/* ======================= CLEAN CANONICAL CSS (Global, delivery banner removed) ======================= */
/* ---------------- Vars (keep only what’s used globally) ---------------- */
:root{
/* Global brand/use */
--brand-primary:#ed8227;
/* Reviews */
--hbs-brand:#ed8227; --hbs-ink:#111827; --hbs-muted:#6b7280; --hbs-ring:#e5e7eb; --hbs-card:#ffffff;
/* Footer */
--hbs-brand-2:#ffcaa0;
}
/* ---------------- Hero Video Section ---------------- */
.tagline { z-index: 20; }
.tagline:first-child{
height:54vh; min-width:250px; text-align:center;
display:flex; align-items:center; justify-content:center;
}
section#section-top{ height:54vh; overflow:hidden; position:relative; }
.video-filter{ position:absolute; inset:0; width:100%; height:100%; background-color:rgba(45,54,65,.34); z-index:0; }
.bgvid-c{ position:absolute; inset:0 0 auto 0; width:100vw; height:54vh; overflow:hidden; }
#bgvid{
position:relative; display:flex; align-items:center; justify-content:center;
width:100vw; height:auto; object-fit:cover;
}
#section-top h1{ color:#fff; }
.img-icon{ width:10px; margin:-3px 0 0 5px; }
.btn-white{ background:transparent; border:1px solid #fff; color:#fff; }
.btn-white:hover{ background:rgba(255,255,255,.37); color:#fff; }
#section-top .btn-primary{ border:1px solid #fff; }
/* Hero MQ */
@media (min-width:1501px){ #bgvid{ bottom:50%; } }
@media (max-width:1500px) and (min-width:1220px){ #bgvid{ bottom:32%; } }
@media (max-width:992px){
#section-top h1{ font-size:1.5em; }
#section-top .btn{ font-size:23px; padding:12px 30px; }
}
@media (max-width:600px){
#section-top h1{ font-size:1.5em; }
#section-top .btn{ font-size:14px; padding:10px 15px; }
}
/* ---------------- Image Tiles Grid ---------------- */
.image-tile-grid{
display:grid; grid-template-columns:repeat(6,1fr);
gap:20px; padding:20px 10px; box-sizing:border-box;
}
/* ---------------- Tiles (shared) ---------------- */
.image-tile,
.image-tile-large{
position:relative; isolation:isolate; overflow:hidden; border-radius:8px;
color:#fff; text-align:center; font-family:Arial, sans-serif;
transition:transform .3s ease, box-shadow .3s ease;
}
/* Background layers for both */
.image-tile .tile-bg,
.image-tile-large .tile-bg{
position:absolute; inset:0; background-size:cover; background-position:center;
transition:opacity 1s ease-in-out, filter .3s ease; z-index:0;
}
/* Full-height dark overlay sits above bg, below content */
.image-tile::before,
.image-tile-large::before{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.65) 100%);
}
/* Content sits above overlay */
.image-tile .tile-content,
.image-tile-large .tile-content{
position:relative; z-index:2; top:50%; transform:translateY(-50%); padding:0 10px;
background:transparent !important;
}
/* Headings */
.image-tile .tile-content h3{ font-size:22px; margin-bottom:10px; text-shadow:1px 1px 4px rgba(0,0,0,.6); }
.image-tile-large .tile-content h3{ font-size:32px; margin-bottom:15px; text-shadow:2px 2px 6px rgba(0,0,0,.7); }
/* Buttons (small) */
.image-tile .tile-content button{
font-size:16px; padding:10px 15px; color:#fff; background:transparent;
border:1px solid rgba(255,255,255,.6); border-radius:6px; cursor:pointer;
opacity:0; transform:translateY(10px);
transition:opacity .4s ease, transform .4s ease, box-shadow .4s ease, background-color .4s ease, border-color .4s ease;
}
/* Buttons (large) */
.image-tile-large .tile-content button{ font-size:18px; padding:12px 20px; text-shadow:1px 1px 3px rgba(0,0,0,.6); }
/* Small tile specifics */
.image-tile{ height:221px; background:#000; grid-column:span 1; }
.image-tile .tile-bg{ filter:brightness(.7); }
/* Large tile specifics */
.image-tile-large{ height:442px; background:transparent; }
.image-tile-large.left{ grid-column:span 4; }
.image-tile-large.right{ grid-column:span 2; }
.image-tile-large .tile-bg{ filter:brightness(.85); }
.image-tile-large .tile-content{ padding:0 15px; }
/* Hovers */
.image-tile:hover,
.image-tile-large:hover{ transform:scale(1.03); box-shadow:0 10px 20px rgba(0,0,0,.3); }
.image-tile:hover{ transform:scale(1.05); }
.image-tile:hover .tile-bg,
.image-tile-large:hover .tile-bg{ filter:brightness(1); }
.image-tile:hover .tile-content button{
opacity:1; transform:translateY(0);
background-color:#ed8227; border-color:#ed8227;
box-shadow:0 0 12px rgba(237,130,39,.7); animation:glowPulse 1.8s ease-in-out infinite alternate;
}
@keyframes glowPulse{
from{ box-shadow:0 0 8px rgba(237,130,39,.4); }
to{ box-shadow:0 0 20px rgba(237,130,39,1); }
}
/* ---------------- Large Tile #2 (static/cycler compatible) ---------------- */
#large-tile-2{ position:relative; height:442px; overflow:hidden; border-radius:8px; }
#large-tile-2 .tile-bg{ opacity:0; z-index:0; }
#large-tile-2 .tile-bg.active,
#large-tile-2 .tile-bg:first-of-type{ opacity:1; z-index:1; }
#large-tile-2 .tile-content{ z-index:2; color:#fff; }
/* ---------------- Responsive ---------------- */
@media (max-width:1200px){
.image-tile-grid{ grid-template-columns:repeat(3,1fr); }
.image-tile-large.left,
.image-tile-large.right{ grid-column:span 3; height:auto; }
}
@media (max-width:768px){
.image-tile-grid{ grid-template-columns:repeat(2,1fr); }
.image-tile-large.left,
.image-tile-large.right{ grid-column:span 2; }
.image-tile-large .tile-content h3{ font-size:24px; }
.image-tile-large .tile-content button{ font-size:16px; padding:10px 15px; }
}
@media (max-width:480px){
.image-tile-grid{ grid-template-columns:1fr; }
.image-tile-large.left,
.image-tile-large.right{ grid-column:span 1; }
.image-tile-large .tile-content h3{ font-size:20px; }
.image-tile-large .tile-content button{ font-size:14px; padding:8px 12px; }
}
/* ---------- Full-screen stats video section ---------- */
.stats-video{
position:relative;
width:100%;
overflow:hidden;
background:#000;
}
/* Desktop / big screens: keep giant full-height hero */
@media (min-width: 992px){
.stats-video{
height:100vh;
}
}
/* Mobile + small tablet: let section shrink to content */
@media (max-width: 991px){
.stats-video{
height:auto;
min-height:auto;
}
}
.stats-video__bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.stats-video__overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.65) 100%);
pointer-events:none;
}
.stats-video__content{
position:relative;
z-index:1;
height:100%;
display:grid;
place-items:center;
padding:2rem;
color:#fff;
text-align:center;
row-gap:clamp(8px,1.2vh,16px);
}
/* On mobile, don’t vertically centre with loads of dead space */
@media (max-width: 991px){
.stats-video__content{
height:auto;
min-height:auto;
padding:24px 16px 32px;
place-items:start;
row-gap:16px;
}
}
.stats-title{
margin:0 0 clamp(8px,1.2vh,16px); max-width:1100px; padding:0 clamp(8px,2vw,16px);
font-weight:900; text-transform:uppercase; letter-spacing:1px; line-height:1.1; color:#fff;
font-size:clamp(28px,6vw,64px); text-shadow:0 8px 24px rgba(0,0,0,.45);
}
.stats-title span{ background:linear-gradient(90deg,var(--brand-primary),#ffffff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stats-title::after{
content:""; display:block; height:4px; width:clamp(80px,14vw,180px); margin:clamp(8px,1.6vh,14px) auto 0;
border-radius:999px; background:linear-gradient(90deg,var(--brand-primary),#ffffff); box-shadow:0 0 14px rgba(237,130,39,.45);
}
.stats-subtitle{
margin:clamp(2px,.5vh,6px) 0 clamp(16px,3vh,28px);
font-size:clamp(18px,2vw,26px); font-weight:600; color:#e5e7eb;
text-transform:uppercase; letter-spacing:1px; text-shadow:0 4px 12px rgba(0,0,0,.35);
}
.stats-grid{
display:grid; grid-template-columns:repeat(3, minmax(260px,1fr));
gap:clamp(16px,2.5vw,28px); width:min(1500px,96vw); margin:0 auto;
}
@media (min-width:1440px){ .stats-grid{ grid-template-columns:repeat(5, minmax(260px,1fr)); } }
@media (min-width:1200px) and (max-width:1439.98px){ .stats-grid{ grid-template-columns:repeat(4, minmax(260px,1fr)); } }
@media (min-width:992px) and (max-width:1199.98px){ .stats-grid{ grid-template-columns:repeat(3, minmax(260px,1fr)); } }
@media (max-width:700px){ .stats-grid{ grid-template-columns:1fr; } }
.stat-card{
background:rgba(37,26,33,.45); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px);
border-radius:16px; padding:clamp(16px,3vw,28px); box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.stat-number{
font-size:clamp(36px,6vw,64px); font-weight:900; letter-spacing:.5px; line-height:1; color:#fff;
text-shadow:0 6px 18px rgba(0,0,0,.35); white-space:nowrap;
}
.stat-number::after{
content:""; display:block; height:4px; width:64px; margin:12px auto 0; border-radius:999px;
background:linear-gradient(90deg,var(--brand-primary),#ffffff); box-shadow:0 0 10px rgba(237,130,39,.5);
}
.stat-label{
margin-top:10px; font-size:clamp(13px,1.8vw,17px); font-weight:700; color:#e5e7eb;
text-transform:uppercase; letter-spacing:.8px; line-height:1.2; text-align:center; max-width:90%; margin-inline:auto;
}
@media (prefers-reduced-motion:reduce){ .stat-card,.stat-number::after{ transition:none; } }
/* ---------------- Testimonials (scoped, non-widget) ---------------- */
#hbs-reviews:not([data-hbs-reviews]){ background:#fff; padding:clamp(28px,4vw,56px) 10px; position:relative; z-index:1; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__inner{ width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:clamp(18px,3vw,28px); }
#hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__title{
margin:0; font-weight:900; letter-spacing:.4px; line-height:1.1; color:var(--hbs-ink);
font-size:clamp(22px,3.6vw,34px);
}
#hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__title span{
background:linear-gradient(90deg, var(--hbs-brand), #ffb77a);
-webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
#hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__meta{ display:flex; align-items:center; gap:10px; color:var(--hbs-muted); font-weight:700; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__grid{
list-style:none !important; margin:0 !important; padding:0 !important;
display:grid !important; gap:clamp(12px,1.2vw,16px) !important;
grid-template-columns:repeat(4, minmax(0,1fr)) !important; justify-content:stretch !important; align-items:start !important; justify-items:stretch !important;
}
@media (min-width:1600px){ #hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__grid{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; } }
@media (max-width:1199.98px){ #hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } }
@media (max-width:899.98px){ #hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:599.98px){ #hbs-reviews:not([data-hbs-reviews]) .hbs-reviews__grid{ grid-template-columns:1fr !important; } }
#hbs-reviews:not([data-hbs-reviews]) .hbs-card{
background:var(--hbs-card); border:1px solid var(--hbs-ring); border-radius:16px;
padding:clamp(14px,1.6vw,18px) !important; box-shadow:0 10px 26px rgba(0,0,0,.06);
min-height:180px !important; display:flex !important; flex-direction:column !important; gap:6px !important; overflow:hidden !important;
transform:translateY(10px) scale(.985); opacity:0;
transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; will-change:transform, opacity;
}
#hbs-reviews:not([data-hbs-reviews]) .hbs-card.is-in{ transform:none; opacity:1; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-card__top{ display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:6px !important; flex-wrap:wrap !important; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-avatar{
width:42px; height:42px; border-radius:12px;
background:linear-gradient(135deg, var(--hbs-brand), #ffcaa0);
color:#1a1a1a; font-weight:900; display:grid; place-items:center;
}
#hbs-reviews:not([data-hbs-reviews]) .hbs-who .name{ color:var(--hbs-ink); font-weight:700; font-size:16px; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-who .meta{ color:var(--hbs-muted); font-size:12px; display:block; margin-top:2px; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-stars{ position:relative !important; overflow:hidden !important; line-height:1 !important; }
#hbs-reviews:not([data-hbs-reviews]) .hbs-stars .base,
#hbs-reviews:not([data-hbs-reviews]) .hbs-stars .fill{
display:block !important; font-size:15px !important; letter-spacing:1px !important; line-height:1 !important; white-space:nowrap !important;
}
#hbs-reviews:not([data-hbs-reviews]) .hbs-stars .fill{ position:absolute !important; left:0; top:0; overflow:hidden !important; color:var(--hbs-brand); }
#hbs-reviews:not([data-hbs-reviews]) .hbs-card__title{
margin:.1rem 0 .2rem !important; font-size:16px !important; line-height:1.25 !important; word-break:break-word !important; overflow-wrap:anywhere !important;
}
#hbs-reviews:not([data-hbs-reviews]) .hbs-card__body{
margin:0 !important; color:#374151 !important; line-height:1.5 !important;
word-break:break-word !important; overflow-wrap:anywhere !important;
display:-webkit-box !important; -webkit-line-clamp:4 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}
@media (prefers-reduced-motion:reduce){ #hbs-reviews:not([data-hbs-reviews]) .hbs-card{ transition:none !important; transform:none !important; opacity:1 !important; } }
/* ---------------- Footer (scoped) ---------------- */
.hbs-footer:not([data-hbs-footer]){
position:relative; overflow:hidden; isolation:isolate; color:#fff;
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
background:linear-gradient(180deg, rgba(37,26,33,.97) 0%, rgba(26,19,23,1) 100%) !important;
border-top:1px solid rgba(255,255,255,.08);
padding:clamp(40px, 6vw, 80px) 5vw 20px;
}
.hbs-footer:not([data-hbs-footer])::before{
content:""; position:absolute; left:0; right:0; top:-30px; height:100px;
background:radial-gradient(60% 100% at 50% 100%, rgba(237,130,39,.25) 0%, rgba(0,0,0,0) 80%);
filter:blur(18px); opacity:.45; pointer-events:none;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__inner{
display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr;
gap:clamp(16px,2vw,28px); align-items:flex-start; max-width:1200px; margin:0 auto;
}
/* Brand block */
.hbs-footer:not([data-hbs-footer]) .hbs-footer__brand{ align-self:start; position:relative; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__brand-row{ display:flex; align-items:flex-start; gap:14px; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__logo{ width:65px; height:auto; flex-shrink:0; margin-top:2px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__brand-text{ display:flex; flex-direction:column; gap:8px; padding-top:6px; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__tagline{
margin:0; font-size:1.25rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff; line-height:1.2;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__brandname{
margin:6px 0 0; font-weight:900; font-size:1.1rem; text-transform:uppercase; letter-spacing:1px;
background:linear-gradient(90deg,#ed8227,#ffffff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-shadow:0 0 8px rgba(0,0,0,.3);
}
/* Columns */
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col h4{
font-weight:800; margin:0 0 10px; font-size:1.25rem; line-height:1.2;
background:linear-gradient(90deg,#ed8227,#ffffff);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
text-transform:uppercase; letter-spacing:.5px;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col ul{ list-style:none; margin:0; padding:0; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col ul li{ margin:6px 0; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col ul a{
color:#e5e7eb; text-decoration:none; font-size:1.05rem; font-weight:600; position:relative; transition:color .2s ease;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col ul a::after{
content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0%; background:linear-gradient(90deg,#ed8227,#ffd9ba); transition:width .25s ease;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col ul a:hover{ color:#fff; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__col ul a:hover::after{ width:100%; }
/* Socials */
.hbs-footer:not([data-hbs-footer]) .hbs-footer__socials{ display:flex; gap:10px; align-items:center; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__socials a{
display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__socials a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); }
/* Newsletter */
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form{ display:flex; gap:8px; margin:10px 0 14px; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form input{
flex:1; padding:10px 12px; border-radius:6px; border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06); color:#fff; outline:none; transition:box-shadow .2s ease, border-color .2s ease;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form input::placeholder{ color:#ccc; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form input:focus{ border-color:rgba(237,130,39,.6); box-shadow:0 0 0 6px rgba(237,130,39,.15); }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form button{
background:linear-gradient(90deg,#ed8227,#ffffff); border:none; color:#1a1a1a; font-weight:800;
padding:10px 14px; border-radius:6px; cursor:pointer; transition:transform .2s ease;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form button:hover{ transform:scale(1.05); }
/* Contact / bottom */
.hbs-footer:not([data-hbs-footer]) .hbs-footer__contact{ font-size:14px; color:#d1d5db; line-height:1.6; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__bottom{
border-top:1px solid rgba(255,255,255,.1); margin-top:clamp(40px,5vw,60px);
padding-top:18px; text-align:center; font-size:14px; color:#aaa;
}
.hbs-footer:not([data-hbs-footer]) .hbs-footer__bottom span{ color:#fff; }
/* Back-to-top (scoped) */
.hbs-footer:not([data-hbs-footer]) .back-to-top{
position:fixed; right:14px; bottom:16px; z-index:40; width:44px; height:44px; border-radius:12px;
border:1px solid rgba(255,255,255,.18); background:rgba(20,20,20,.7); color:#fff; font-weight:900; font-size:18px;
display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.3);
cursor:pointer; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .15s ease, background .2s ease;
}
.hbs-footer:not([data-hbs-footer]) .back-to-top:hover{ transform:translateY(-2px); background:rgba(20,20,20,.86); }
.hbs-footer:not([data-hbs-footer]) .back-to-top.show{ opacity:1; pointer-events:auto; }
/* Responsive footer grid (scoped) */
@media (max-width:900px){
.hbs-footer:not([data-hbs-footer]) .hbs-footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
.hbs-footer:not([data-hbs-footer]) .hbs-footer__inner{ grid-template-columns:1fr; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__brand-row{ align-items:center; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__brand-text{ padding-top:0; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form{ flex-direction:column; }
.hbs-footer:not([data-hbs-footer]) .hbs-footer__form button{ width:100%; }
}
/* ---------------- Utilities ---------------- */
.sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Storefront search (optional section) */
.sta-shopcat .sta-search{ margin:clamp(18px,3.5vw,30px) auto 0; display:block; text-align:center; max-width:760px; padding:0 16px; }
.sta-search__box{
display:flex; gap:8px; align-items:center; justify-content:center;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
border-radius:14px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.18); backdrop-filter:blur(2px) saturate(120%);
}
.sta-search input[type="search"]{
flex:1 1 auto; min-width:0; border:0; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.10);
color:#fff; font-weight:700; outline:none;
}
.sta-search input::placeholder{ color:#cbd5e1; opacity:.9; }
.sta-search__btn{
flex:0 0 auto; border:0; cursor:pointer; padding:12px 16px; border-radius:10px; font-weight:900; color:#111;
background:linear-gradient(90deg, var(--hbs-brand), var(--hbs-brand-2)); transition:transform .15s ease, filter .2s ease;
}
.sta-search__btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.sta-search__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sta-search__hint{ margin:8px 0 0; color:#e5e7eb; font-weight:700; font-size:12px; opacity:.9; }
@media (max-width:520px){
.sta-search__box{ flex-direction:column; align-items:stretch; }
.sta-search__btn{ width:100%; }
}
/* ======================= END (delivery header removed) ======================= */
/* ---------- Search results styling (HBS theme, search-only) ---------- */
/* Overall background + spacing on search pages */
body.hbs-search-active .page-content.onecolumn {
background:
radial-gradient(circle at 0 0, #1f2937 0, #050816 45%, #020617 100%);
padding-bottom: 40px;
}
/* Keep the results area nicely centred */
body.hbs-search-active .catalog-grid__inner {
max-width: 1220px;
margin: 0 auto;
}
/* Glassy filter / header bar above the results */
body.hbs-search-active #filterswrapperhorizontal {
background: radial-gradient(circle at top left,
rgba(255,255,255,0.96),
rgba(248,250,252,0.98));
border-radius: 18px;
border: 1px solid rgba(148,163,184,0.28);
box-shadow: 0 18px 40px rgba(15,23,42,0.22);
padding: 12px 16px;
}
/* Remove any old flat backgrounds inside the filter bar */
body.hbs-search-active #filterswrapperhorizontal .panel,
body.hbs-search-active #filterswrapperhorizontal .panel-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* --- Product tiles --------------------------------------------------- */
/* Make each product card a clean white tile on the dark background */
body.hbs-search-active .tileparent {
background: rgba(255,255,255,0.97);
border-radius: 18px;
padding: 16px 16px 18px;
border: 1px solid rgba(15,23,42,0.04);
box-shadow: 0 16px 40px rgba(15,23,42,0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease;
margin-bottom: 18px;
}
/* Let the outer card control the look */
body.hbs-search-active .tileparent .tile {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* Slight lift on hover */
body.hbs-search-active .tileparent:hover {
transform: translateY(-3px);
box-shadow: 0 22px 55px rgba(15,23,42,0.24);
}
/* Product image – slightly softer corners */
body.hbs-search-active .tileparent .imgthumbnail img,
body.hbs-search-active .tileparent .product-image img {
border-radius: 14px;
}
/* Pricing area – keep hierarchy clear */
body.hbs-search-active .tileparent .price,
body.hbs-search-active .tileparent .has-price {
font-weight: 800;
font-size: 20px;
color: #111827;
}
/* RRP + save pill sit together neatly */
body.hbs-search-active .tileparent .product-price-rrp {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #6b7280;
}
body.hbs-search-active .tileparent .product-price-rrp .rrp {
text-decoration: line-through;
color: #9ca3af;
}
body.hbs-search-active .tileparent .product-price-rrp .label.save {
border-radius: 999px;
padding: 2px 8px;
font-weight: 800;
background: rgba(248,113,113,0.08);
border: 1px solid rgba(248,113,113,0.35);
color: #b91c1c;
}
/* Add to basket button – match product page theme */
body.hbs-search-active .tileparent .btn-add-to-cart.btn-primary {
width: 100%;
border-radius: 999px;
padding: 8px 18px;
font-weight: 800;
font-size: 13px;
border: none;
background: linear-gradient(90deg, #ed8227, #ffd9ba);
color: #111827;
box-shadow: 0 8px 20px rgba(15,23,42,0.18);
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.hbs-search-active .tileparent .btn-add-to-cart.btn-primary:hover {
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow: 0 14px 30px rgba(15,23,42,0.24);
}
/* Quantity pill inside tiles – keep compact */
body.hbs-search-active .tileparent .qnt-count {
border-radius: 999px;
border: 1px solid rgba(148,163,184,0.35);
}
/* Product title underline on hover */
body.hbs-search-active .hbs-title {
position: relative;
font-weight: 700;
display: inline-block;
}
body.hbs-search-active .hbs-title::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 2px;
background: linear-gradient(90deg, #ed8227, #ffd9ba);
transition: width 0.25s ease;
}
body.hbs-search-active .hbs-title:hover::after {
width: 100%;
}
/* --- Compact mobile layout ------------------------------------------- */
@media (max-width: 768px) {
body.hbs-search-active .catalog-grid__inner {
padding: 0 10px;
}
body.hbs-search-active .tileparent {
margin-bottom: 14px;
padding: 14px 12px 16px;
border-radius: 16px;
}
body.hbs-search-active #filterswrapperhorizontal {
padding: 10px 12px;
border-radius: 16px;
}
}
/* ================= HBS PRODUCT PAGE: RIGHT COLUMN CARD ================= */
/* Turn the grey slab into a clean HBS card */
body.hbs-product .product-shopping-actions.softgraybackground {
background:#ffffff;
border-radius:16px;
padding:22px 20px 18px;
border:1px solid rgba(0,0,0,0.04);
box-shadow:0 10px 26px rgba(0,0,0,0.08);
text-align:left;
}
/* Slightly tighter row spacing inside */
body.hbs-product .product-shopping-actions-row + .product-shopping-actions-row {
margin-top:14px;
}
/* Price block – strong hierarchy */
body.hbs-product .product-shopping-actions-prices .price {
margin-bottom:6px;
}
body.hbs-product .product-shopping-actions-prices .price .has-price {
display:block;
font-size:26px;
line-height:1.1;
font-weight:800;
color:#111827;
}
body.hbs-product .product-shopping-actions-prices .price .uom {
display:block;
margin-top:4px;
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.4px;
color:#6b7280;
}
/* Inc VAT row */
body.hbs-product .product-shopping-actions-prices .price-label-inc-vat {
display:block;
margin-top:4px;
font-size:12px;
color:#6b7280;
}
body.hbs-product .product-shopping-actions-prices .price-label-inc-vat .has-vat-price {
font-weight:700;
color:#111827;
}
/* RRP + saving pill */
body.hbs-product .product-shopping-actions-prices .product-price-rrp {
margin-top:8px;
display:flex;
align-items:center;
justify-content:center; /* centre horizontally */
gap:6px;
font-size:12px;
text-align:center;
}
body.hbs-product .product-shopping-actions-prices .product-price-rrp .rrp {
color:#9ca3af;
text-decoration:line-through;
}
body.hbs-product .product-shopping-actions-prices .product-price-rrp .label.save {
border-radius:999px;
padding:2px 8px;
font-size:11px;
font-weight:800;
background:rgba(248,113,113,.08);
border:1px solid rgba(248,113,113,.3);
color:#b91c1c;
}
/* Main Add to basket button – match search grid styling */
body.hbs-product .product-shopping-actions .btn-add-to-cart.btn-primary {
border-radius:999px;
padding:10px 22px;
font-weight:800;
font-size:14px;
border:none;
background:linear-gradient(90deg, var(--hbs-brand), var(--hbs-brand-2));
color:#111827;
box-shadow:0 8px 18px rgba(0,0,0,.12);
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.hbs-product .product-shopping-actions .btn-add-to-cart.btn-primary i {
margin-right:6px;
}
body.hbs-product .product-shopping-actions .btn-add-to-cart.btn-primary:hover {
transform:translateY(-1px);
filter:brightness(1.03);
box-shadow:0 12px 24px rgba(0,0,0,.16);
}
/* Quote Me button – outlined sibling using brand colours */
body.hbs-product .product-shopping-actions-quoteme .quoteme-button {
border-radius:999px;
border:1px solid rgba(237,130,39,.7);
color:#ed8227;
font-weight:700;
padding:8px 18px;
font-size:13px;
background:#fff;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
body.hbs-product .product-shopping-actions-quoteme .quoteme-button:hover {
background:rgba(237,130,39,.06);
border-color:#ed8227;
}
/* Quick list + compare links tone */
body.hbs-product .product-shopping-actions-addtoquicklist a,
body.hbs-product .product-compare-action {
font-size:12px;
color:#6b7280;
font-weight:600;
}
body.hbs-product .product-shopping-actions-addtoquicklist a:hover,
body.hbs-product .product-compare-action:hover {
color:#111827;
}
/* Make the compare icon more subtle */
body.hbs-product .product-compare-action .fa-stack {
margin-right:4px;
font-size:12px;
}
/* Mobile: let the card breathe */
@media (max-width: 768px) {
body.hbs-product .product-shopping-actions.softgraybackground {
margin-top:18px;
padding:18px 16px;
}
}
/* ================= HBS product page: fix qty +/- controls ================= */
/* Make the qty control a clean pill on the product card */
.product-shopping-actions .qnt-count {
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 10px 30px rgba(15,23,42,.07);
overflow:hidden;
padding:4px;
}
/* Reset the plus/minus buttons and draw our own symbols */
.product-shopping-actions .qnt-count .incr-btn {
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:transparent !important;
border:0 !important;
text-decoration:none;
font-size:0; /* hide original +/- characters */
line-height:1;
color:transparent; /* belt-and-braces */
cursor:pointer;
}
/* Minus (left button) */
.product-shopping-actions .qnt-count .incr-btn:first-child::before {
content:"−";
font-size:20px;
font-weight:900;
color:#111827;
}
/* Plus (right button) */
.product-shopping-actions .qnt-count .incr-btn:last-child::before {
content:"+";
font-size:20px;
font-weight:900;
color:#111827;
}
/* The middle input */
.product-shopping-actions .qnt-count .inputquantity,
.product-shopping-actions .qnt-count input[type="text"] {
width:56px;
border:0 !important;
text-align:center;
font-weight:700;
font-size:16px;
background:transparent;
box-shadow:none;
color:#111827;
}
/* ================= HBS product page: section headings (Description, Also Consider, Specifications) ================= */
body.hbs-product h3 {
font-size:18px;
font-weight:900;
letter-spacing:.4px;
text-transform:uppercase;
color:#111827;
}
/* === FIX: avoid changing all H3s on product pages === */
/* Undo the global product-page H3 styling */
body.hbs-product h3 {
background: none;
color: inherit;
padding: 0;
border: none;
text-transform: none;
letter-spacing: normal;
}
/* OPTIONAL: if you want the black pill headings only on specific
section titles, add class="hbs-section-heading" to those
in the product HTML and this style will apply just to them. */
body.hbs-product h3.hbs-section-heading {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
background: #111827;
color: #ffffff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* === FIX: centre RRP and Save pill in the price block === */
body.hbs-product .product-shopping-actions-prices .product-price-rrp {
display: flex;
align-items: center;
justify-content: center; /* centres horizontally */
gap: 6px;
font-size: 12px;
text-align: center;
}
/* =========================================================
HBS PRODUCT PAGE – CONTENT PANELS, ALSO CONSIDER, SPECS
========================================================= */
/* ---------- Section headers (Description, Also Consider, Specifications) ---------- */
/* Assumes headers are direct children of softgraybackground panels on the product page */
body.hbs-product .softgraybackground > h2,
body.hbs-product .softgraybackground > h3 {
margin: 0;
padding: 10px 16px;
border-radius: 12px 12px 0 0;
background: #ffffff;
color: #111827;
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: .4px;
box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
/* Make the collapsible header look clickable but keep existing JS behaviour */
body.hbs-product .softgraybackground > h2 a,
body.hbs-product .softgraybackground > h3 a {
color: inherit;
text-decoration: none;
display: block;
}
/* Panel bodies directly after those headers */
body.hbs-product .softgraybackground > h2 + .panel-collapse .panel-body,
body.hbs-product .softgraybackground > h3 + .panel-collapse .panel-body,
body.hbs-product .softgraybackground > h2 + div,
body.hbs-product .softgraybackground > h3 + div {
background: #ffffff;
border-radius: 0 0 12px 12px;
box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
/* ---------- "Also Consider" product cards (reuse search card styling) ---------- */
body.hbs-product .tileparent {
background: rgba(255,255,255,0.96);
border-radius: 14px;
padding: 14px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
transition: transform 0.15s ease, box-shadow 0.2s ease;
margin-bottom: 16px;
}
/* Strip legacy styling from inner .tile so the outer card controls the look */
body.hbs-product .tileparent .tile {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* Product titles hover underline */
body.hbs-product .tileparent .hbs-title {
position: relative;
font-weight: 700;
display: inline-block;
}
body.hbs-product .tileparent .hbs-title::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 0;
height: 2px;
background: linear-gradient(90deg,#ed8227,#ffd9ba);
transition: width 0.25s ease;
}
body.hbs-product .tileparent .hbs-title:hover::after {
width: 100%;
}
/* Nice hover lift */
body.hbs-product .tileparent:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}
/* ---------- Specifications table card ---------- */
/* Treat any table in a product-page softgraybackground panel as a specs table */
body.hbs-product .softgraybackground table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 0 0 12px 12px;
overflow: hidden;
font-size: 13px;
}
/* Rows & zebra striping */
body.hbs-product .softgraybackground table tr:nth-child(odd) {
background: #f9fafb;
}
body.hbs-product .softgraybackground table tr:nth-child(even) {
background: #f3f4f6;
}
/* Two-column layout: label + value */
body.hbs-product .softgraybackground table td,
body.hbs-product .softgraybackground table th {
padding: 8px 14px;
border: 0;
vertical-align: middle;
line-height: 1.4;
}
body.hbs-product .softgraybackground table td:first-child,
body.hbs-product .softgraybackground table th:first-child {
width: 32%;
font-weight: 700;
color: #4b5563;
text-transform: none;
}
body.hbs-product .softgraybackground table td:last-child,
body.hbs-product .softgraybackground table th:last-child {
font-weight: 500;
color: #111827;
}
/* Mobile: make rows more card-like and easier to scan */
@media (max-width: 640px) {
body.hbs-product .softgraybackground table,
body.hbs-product .softgraybackground table tbody,
body.hbs-product .softgraybackground table tr {
display: block;
width: 100%;
}
body.hbs-product .softgraybackground table tr {
margin-bottom: 6px;
border-radius: 10px;
overflow: hidden;
}
body.hbs-product .softgraybackground table td:first-child {
display: block;
width: 100%;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .4px;
background: rgba(15,23,42,.04);
}
body.hbs-product .softgraybackground table td:last-child {
display: block;
width: 100%;
padding-top: 6px;
}
}
/* =========================================================
PREMIUM TOUCHES – SEARCH & PRODUCT PAGES
========================================================= */
/* ---------- 1) Glass / soft-hero treatment around search filters ---------- */
body.hbs-search-active .glass-shimmer {
background: radial-gradient(circle at top left, rgba(255,255,255,0.92), rgba(248,250,252,0.96));
border-radius: 16px;
border: 1px solid rgba(148,163,184,0.25);
box-shadow: 0 14px 40px rgba(15,23,42,0.12);
backdrop-filter: blur(8px);
}
/* ---------- 2) Sticky product summary card on desktop ---------- */
@media (min-width: 992px) {
body.hbs-product .product-shopping-actions.softgraybackground {
position: sticky;
top: 96px; /* sits nicely under the header */
z-index: 5;
}
}
/* ---------- 3) Micro hover on main product image ---------- */
body.hbs-product .product-image img,
body.hbs-product .product-main-image img {
border-radius: 18px;
box-shadow: 0 10px 30px rgba(15,23,42,0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
body.hbs-product .product-image:hover img,
body.hbs-product .product-main-image:hover img {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 18px 45px rgba(15,23,42,0.18);
filter: saturate(1.03);
}
/* Thumbnail hover (if present) */
body.hbs-product .product-thumbnails img,
body.hbs-product .product-gallery img {
border-radius: 10px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.hbs-product .product-thumbnails img:hover,
body.hbs-product .product-gallery img:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15,23,42,0.16);
}
/* ---------- 4) Consistent, premium focus outlines (accessibility + polish) ---------- */
body.hbs-search-active a:focus-visible,
body.hbs-search-active button:focus-visible,
body.hbs-search-active input:focus-visible,
body.hbs-product a:focus-visible,
body.hbs-product button:focus-visible,
body.hbs-product input:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(237,130,39,0.35);
border-radius: 6px;
}
/* ============= HBS: My Account Dashboard Premium Styling ============= */
/* Scope only to the My Account page */
.page-content.myaccount.onecolumn {
background: radial-gradient(circle at top left, #111827 0, #020617 50%, #000 100%);
padding-bottom: 40px;
}
/* Optional: tweak the main container spacing */
.page-content.myaccount.onecolumn section.myaccount.container {
padding-top: 20px;
padding-bottom: 10px;
}
/* Header row (Account Dashboard title area) */
.page-content.myaccount.onecolumn .row.myaccount-title.vertical-align {
background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(15,23,42,0.7));
border-radius: 18px;
padding: 14px 18px;
margin-bottom: 18px;
border: 1px solid rgba(148,163,184,.35);
box-shadow: 0 16px 40px rgba(15,23,42,.85);
}
.page-content.myaccount.onecolumn .myaccount-grid-title h1,
.page-content.myaccount.onecolumn .myaccount-grid-title h2,
.page-content.myaccount.onecolumn .myaccount-grid-title h3 {
margin: 0;
font-size: 1.2rem;
letter-spacing: .12em;
text-transform: uppercase;
color: #e5e7eb;
font-weight: 900;
}
.page-content.myaccount.onecolumn .myaccount-grid-title h1::after,
.page-content.myaccount.onecolumn .myaccount-grid-title h2::after,
.page-content.myaccount.onecolumn .myaccount-grid-title h3::after {
content: "";
display: block;
width: 72px;
height: 3px;
margin-top: 8px;
border-radius: 999px;
background: linear-gradient(90deg,#ed8227,#ffd9ba);
box-shadow: 0 0 16px rgba(237,130,39,.75);
}
/* ================= Dashboard Tiles ================= */
/* Wrapper UL that holds all dashboard tiles */
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: 0;
margin: 10px 0 0;
list-style: none;
}
/* Each individual tile (LI) */
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li {
position: relative;
flex: 1 1 230px;
max-width: 100%;
min-width: 210px;
border-radius: 18px;
padding: 14px 16px;
background: radial-gradient(circle at top left,
rgba(15,23,42,0.95),
rgba(15,23,42,0.85));
border: 1px solid rgba(148,163,184,.55);
box-shadow:
0 18px 40px rgba(15,23,42,.95),
0 0 0 1px rgba(15,23,42,.9) inset;
color: #f9fafb;
overflow: hidden;
transform: translateY(0) scale(1);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease;
}
/* Gradient accent strip on the left side of each tile */
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg,#ed8227,#ffd9ba);
opacity: .95;
}
/* Soft glow overlay in corner */
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(237,130,39,.35), transparent 60%);
opacity: .5;
pointer-events: none;
}
/* Hover / focus state */
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li:hover,
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li:focus-within {
transform: translateY(-3px) scale(1.01);
border-color: rgba(251,191,36,.9);
background: radial-gradient(circle at top left,
rgba(15,23,42,1),
rgba(15,23,42,0.92));
box-shadow:
0 24px 52px rgba(0,0,0,.9),
0 0 18px rgba(237,130,39,.55);
}
/* ================= Tile Content (links, labels etc.) ================= */
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li a {
display: block;
text-decoration: none;
color: inherit;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li h2,
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li h3,
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .dashboard-title {
margin: 0 0 4px;
font-size: .95rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #e5e7eb;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li p,
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .dashboard-description {
margin: 2px 0 0;
font-size: .8rem;
color: #9ca3af;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li i[class*="fa"] {
font-size: 1.2rem;
margin-right: 6px;
color: #fed7aa;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .dashboard-header,
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .dashboard-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .badge,
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 999px;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
background: rgba(15,23,42,.8);
border: 1px solid rgba(148,163,184,.75);
color: #d1d5db;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li .dashboard-chevron {
margin-left: auto;
font-size: .75rem;
opacity: .7;
}
/* Responsive tweaks */
@media (max-width: 767px) {
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable {
gap: 10px;
}
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li {
flex: 1 1 100%;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li {
flex: 1 1 calc(50% - 10px);
}
}
@media (min-width: 1200px) {
.page-content.myaccount.onecolumn .myaccountdashboard_container .dashboard-sortable > li {
flex: 1 1 calc(33.333% - 10px);
}
}
/* ========== FORCE DASHBOARD TEXT TO LIGHT COLOUR (ALL WIDGETS) ========== */
.page-content.myaccount.onecolumn .grid-title,
.page-content.myaccount.onecolumn .grid-title *,
.myaccountdashboard_container .grid-title,
.myaccountdashboard_container .grid-title *,
.myaccountdashboard_container .grid-body,
.myaccountdashboard_container .grid-body *,
.myaccountdashboard_container .grid-footer,
.myaccountdashboard_container .grid-footer * {
color: #f9fafb !important;
opacity: 1 !important;
}
/* Specifically catch “muted” lines like Requester Details options */
.myaccountdashboard_container .grid-body .text-muted,
.myaccountdashboard_container .grid-body .muted,
.myaccountdashboard_container .grid-body .small {
color: #e5e7eb !important;
opacity: 1 !important;
}
/* FORCE text-muted to white only inside dashboard panels */
.myaccountdashboard_container .grid-body .text-muted,
.myaccountdashboard_container .grid-body .text-muted *,
.myaccountdashboard_container .grid-body .row .text-muted,
.myaccountdashboard_container .grid-body .col-md-6 .text-muted {
color: #ffffff !important;
opacity: 0.92 !important;
}
/* Dashboard title area */
.myaccountdashboard_container .grid-title,
.myaccountdashboard_container .grid-title * {
color: #ffffff !important;
}
/* ================= HBS: Product Page Styling ================= */
/* Overall product page background */
.catalog-single.desktop {
/* Give the product page the same dark gradient feel */
background: radial-gradient(circle at 0 0, #1f2937 0, #050816 45%, #020617 100%);
padding-top: 30px;
padding-bottom: 40px;
}
/* Main inner container that holds product image + details + buy box */
.catalog-single.desktop .mainproductpagedesktop {
background: linear-gradient(135deg, #111827, #020617);
border-radius: 26px;
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7);
padding: 28px 32px 32px;
}
/* Left-hand product summary area */
.catalog-single.desktop .productsummary_container,
.catalog-single.desktop .product-summary {
color: #f9fafb;
}
/* Product title + any headings in the product block */
.catalog-single.desktop .productsummary_container h1,
.catalog-single.desktop .productsummary_container h2,
.catalog-single.desktop .productsummary_container h3,
.catalog-single.desktop .productsummary_container h4 {
color: #f9fafb;
}
/* General text inside the main product content */
.catalog-single.desktop .productsummary_container,
.catalog-single.desktop .productsummary_container p,
.catalog-single.desktop .productsummary_container li,
.catalog-single.desktop .productsummary_container span,
.catalog-single.desktop .productsummary_container .text-muted {
color: #e5e7eb !important;
}
/* Any bullet / feature list text inside the product-points block */
.catalog-single.desktop .product-points-wrapper,
.catalog-single.desktop .product-points-wrapper p,
.catalog-single.desktop .product-points-wrapper li,
.catalog-single.desktop .product-points-wrapper span {
color: #e5e7eb !important;
}
/* Make icons + little labels visible on dark background */
.catalog-single.desktop .productsummary_container i,
.catalog-single.desktop .productsummary_container .fa,
.catalog-single.desktop .product-points-wrapper i,
.catalog-single.desktop .product-points-wrapper .fa {
color: #fbbf77;
}
/* Links inside the product area – brand orange */
.catalog-single.desktop .productsummary_container a,
.catalog-single.desktop .product-points-wrapper a {
color: #fbbf77;
}
.catalog-single.desktop .productsummary_container a:hover,
.catalog-single.desktop .product-points-wrapper a:hover {
color: #fed7aa;
}
/* If any “muted” text is still too dark, lift it up a bit */
.catalog-single.desktop .text-muted {
color: #d1d5db !important;
}
/* Optional: tidy up any white block backgrounds that might sit inside */
.catalog-single.desktop .productsummary_container .panel,
.catalog-single.desktop .productsummary_container .well {
background: rgba(15, 23, 42, 0.9);
border-color: rgba(148, 163, 184, 0.5);
color: #e5e7eb;
}
/* Fix unreadable zebra-spec rows on product pages */
.catalog-single .specification-container .spec-row:nth-child(odd) {
background: rgba(255,255,255,0.08) !important;
}
.catalog-single .specification-container .spec-row:nth-child(even) {
background: rgba(255,255,255,0.04) !important;
}
/* Make all spec-row text fully white */
.catalog-single .specification-container .spec-row,
.catalog-single .specification-container .spec-row span,
.catalog-single .specification-container .spec-row div {
color: #fff !important;
}
/* Optional: strengthen row borders */
.catalog-single .specification-container .spec-row {
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
/* =========================================================
HBS / Latus – PRODUCT PAGE THEME
Scoped to product pages only (.catalog-single)
======================================================= */
/* Main product page container */
.catalog-single.desktop {
/* keeps everything on-brand + readable */
color: #f9fafb;
}
/* Product title / headings */
.catalog-single.desktop h1,
.catalog-single.desktop h2,
.catalog-single.desktop h3,
.catalog-single.desktop h4 {
color: #ffffff;
letter-spacing: .03em;
}
/* General body text on the product page */
.catalog-single.desktop p,
.catalog-single.desktop li,
.catalog-single.desktop span,
.catalog-single.desktop .productsummary_container,
.catalog-single.desktop .product-points,
.catalog-single.desktop .productsummary_container p,
.catalog-single.desktop .productsummary_container li {
color: #e5e7eb;
}
/* -------------------------------------------------------
Product header card (image + bullets + title block)
----------------------------------------------------- */
.catalog-single.desktop .mainproductpagedesktop {
border-radius: 26px;
padding: 24px 28px 32px;
background: radial-gradient(140% 220% at 0% 0%, #161e2e 0%, #050910 45%, #050910 100%);
box-shadow: 0 26px 70px rgba(0,0,0,.85);
border: 1px solid rgba(255,255,255,.06);
}
/* Slightly lift the left content (title + bullets) */
.catalog-single.desktop .productsummary_container {
background: linear-gradient(135deg, rgba(22,30,46,.96), rgba(7,10,18,.98));
border-radius: 22px;
padding: 18px 22px 22px;
border: 1px solid rgba(148,163,184,.45);
}
/* Bullet list under the title */
.catalog-single.desktop .productsummary_container ul {
margin-left: 1.1rem;
}
.catalog-single.desktop .productsummary_container li {
margin-bottom: 4px;
}
/* -------------------------------------------------------
SPECIFICATIONS "ZEBRA" TABLE – make rows readable
----------------------------------------------------- */
/* Base table styling (this will hit the specs table and any
other tables on the product page – which is usually OK) */
.catalog-single.desktop table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
/* Cells */
.catalog-single.desktop table td,
.catalog-single.desktop table th {
padding: 6px 12px;
border: 1px solid rgba(148,163,184,.35);
color: #f9fafb;
font-size: 13px;
}
/* First column = label */
.catalog-single.desktop table td:first-child,
.catalog-single.desktop table th:first-child {
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #e5e7eb;
}
/* Zebra background – darker, on-brand */
.catalog-single.desktop table tr:nth-child(odd) td,
.catalog-single.desktop table tr:nth-child(odd) th {
background: rgba(15,23,42,.96);
}
.catalog-single.desktop table tr:nth-child(even) td,
.catalog-single.desktop table tr:nth-child(even) th {
background: rgba(15,23,42,.85);
}
/* Hover highlight so rows feel interactive */
.catalog-single.desktop table tr:hover td,
.catalog-single.desktop table tr:hover th {
background: linear-gradient(90deg, rgba(237,130,39,.16), rgba(15,23,42,.98));
}
/* -------------------------------------------------------
Description / lower panels
----------------------------------------------------- */
.catalog-single.desktop .product-description,
.catalog-single.desktop .product-description-container,
.catalog-single.desktop .product-detail,
.catalog-single.desktop .product-detail-container {
background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(7,10,18,.98));
border-radius: 22px;
border: 1px solid rgba(148,163,184,.45);
box-shadow: 0 20px 55px rgba(0,0,0,.7);
padding: 18px 22px 22px;
}
/* Make sure description text is bright enough */
.catalog-single.desktop .product-description p,
.catalog-single.desktop .product-description li {
color: #e5e7eb;
}
/* Small labels (e.g. “Product Code”, “Manufacturer”) */
.catalog-single.desktop .productsummary_container strong,
.catalog-single.desktop .productsummary_container .label,
.catalog-single.desktop .productsummary_container .text-muted {
color: #f9fafb;
}
/* -------------------------------------------------------
Tiny tweaks for mobile (keep round corners + spacing)
----------------------------------------------------- */
@media (max-width: 768px) {
.catalog-single.desktop .mainproductpagedesktop {
padding: 18px 16px 22px;
border-radius: 20px;
}
.catalog-single.desktop .productsummary_container {
padding: 14px 16px 18px;
}
.catalog-single.desktop table td,
.catalog-single.desktop table th {
padding: 5px 8px;
font-size: 12px;
}
}
/* ==========================
PRODUCT PAGE – FIXES
========================== */
/* 1. Make the right-hand price card use normal dark text again */
.catalog-single.desktop .row.product-points-wrapper > .col-lg-4,
.catalog-single.desktop .row.product-points-wrapper > .col-lg-4 * {
color: #222 !important;
opacity: 1 !important;
}
/* If your price card uses col-md-4 / col-sm-4 on smaller breakpoints: */
.catalog-single.desktop .row.product-points-wrapper > .col-md-4,
.catalog-single.desktop .row.product-points-wrapper > .col-sm-4,
.catalog-single.desktop .row.product-points-wrapper > .col-md-4 *,
.catalog-single.desktop .row.product-points-wrapper > .col-sm-4 * {
color: #222 !important;
opacity: 1 !important;
}
/* 2. Specifications – keep zebra rows but make the text properly visible */
.catalog-single.desktop #collapseSpecs .panel-body,
.catalog-single.desktop #collapseSpecs .panel-body * {
color: #f9fafb; /* light text to match the dark bg */
opacity: 1 !important; /* cancel any previous “faded” look */
}
/* Optional: if you’d like the SPEC labels darker than the values */
.catalog-single.desktop #collapseSpecs .tech-specs .col-lg-4 span,
.catalog-single.desktop #collapseSpecs .tech-specs .col-sm-4 span,
.catalog-single.desktop #collapseSpecs .tech-specs .col-xs-6 span {
font-weight: 600;
color: #e5e7eb;
}
.catalog-single.desktop #collapseSpecs .tech-specs .col-lg-8 p,
.catalog-single.desktop #collapseSpecs .tech-specs .col-sm-8 p,
.catalog-single.desktop #collapseSpecs .tech-specs .col-xs-6 p {
font-weight: 700;
color: #ffffff;
}
/* 3. Make sure the gradient background matches the header colours */
.catalog-single.desktop {
/* same palette as your header */
--brand-primary: #ed8227;
--bg: #251a21;
--fg: #ffffff;
--muted: #e5e7eb;
background:
radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 55%),
radial-gradient(circle at bottom right, rgba(0,0,0,.65), transparent 55%),
#251a21;
color: var(--fg);
}
/* === FINAL FIX – PRODUCT PRICE CARD TEXT === */
.catalog-single.desktop .product-shopping-actions.softgraybackground,
.catalog-single.desktop .product-shopping-actions.softgraybackground * {
color: #222222 !important; /* normal dark text */
opacity: 1 !important; /* kill any faded styles */
}
/* === FINAL FIX – SPECIFICATIONS TEXT READABILITY === */
.catalog-single.desktop #collapseSpecs .panel-body,
.catalog-single.desktop #collapseSpecs .panel-body * {
color: #f9fafb !important; /* bright text */
opacity: 1 !important;
}
/* Make labels slightly dimmer than values so they’re easy to scan */
.catalog-single.desktop #collapseSpecs .tech-specs .col-lg-4 span,
.catalog-single.desktop #collapseSpecs .tech-specs .col-sm-4 span,
.catalog-single.desktop #collapseSpecs .tech-specs .col-xs-6 span {
font-weight: 600;
color: #e5e7eb !important;
}
.catalog-single.desktop #collapseSpecs .tech-specs .col-lg-8 p,
.catalog-single.desktop #collapseSpecs .tech-specs .col-sm-8 p,
.catalog-single.desktop #collapseSpecs .tech-specs .col-xs-6 p {
font-weight: 700;
color: #ffffff !important;
}
/* ===================================================================
EXTRA PRODUCT PAGE POLISH – HBS THEME
(add this at the very bottom of your main CSS block)
=================================================================== */
/* 1) Make sure the price / add-to-basket panel sits level with the main card */
.catalog-single.desktop .productaddtocart_container {
margin-top: 0 !important;
}
/* 2) Specifications section: remove flat grey panel + style rows as HBS cards */
.catalog-single.desktop #collapseSpecs,
.catalog-single.desktop #collapseSpecs .panel-body {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-top: 0;
}
/* Each spec row as a soft, dark “zebra” block */
.catalog-single.desktop #collapseSpecs .tech-specs .row {
margin: 0 0 6px;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.03);
}
.catalog-single.desktop #collapseSpecs .tech-specs .row:nth-child(odd) {
background: rgba(255,255,255,.07);
}
/* Left and right columns inside each spec row */
.catalog-single.desktop #collapseSpecs .tech-specs .col-lg-4,
.catalog-single.desktop #collapseSpecs .tech-specs .col-sm-4,
.catalog-single.desktop #collapseSpecs .tech-specs .col-xs-6 {
padding: 10px 16px;
border-right: 1px solid rgba(255,255,255,.09);
color: #e5e7eb;
}
.catalog-single.desktop #collapseSpecs .tech-specs .col-lg-8,
.catalog-single.desktop #collapseSpecs .tech-specs .col-sm-8,
.catalog-single.desktop #collapseSpecs .tech-specs .col-xs-6 + .col-lg-8 {
padding: 10px 16px;
color: #ffffff;
}
/* Labels + values (you already set weights/colours, this just reinforces it) */
.catalog-single.desktop #collapseSpecs .tech-specs span,
.catalog-single.desktop #collapseSpecs .tech-specs p {
color: #ffffff !important;
}
/* 3) Accessories / Also Consider carousels – remove white frame & edge glow */
.catalog-single.has-carousel.productsrelated {
border: none !important; /* kills the white frame */
background: transparent !important;
box-shadow: none !important;
}
/* Hide the white gradient bars at the far left/right of the carousel */
.productsrelated .inner.owl-carousel::before,
.productsrelated .inner.owl-carousel::after {
display: none !important;
}
/* 4) Give the individual carousel cards a darker HBS-style surface */
.productsrelated .inner .owl-stage-outer,
.productsrelated .inner .owl-stage {
background: transparent;
}
.productsrelated .inner .owl-item > div {
background: rgba(255,255,255,.06) !important;
border-radius: 26px !important;
box-shadow: 0 24px 60px rgba(0,0,0,.65) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
/* Make sure text on those cards is readable on the darker background */
.productsrelated .inner .owl-item > div,
.productsrelated .inner .owl-item > div * {
color: #ffffff;
}
/* 5) Tiny tweak: keep the accessories / also-consider sections flush
with the rest of the content and avoid stray white lines */
.catalog-single.desktop section.catalog-single.has-carousel.productsrelated {
padding-top: 24px;
padding-bottom: 32px;
}
/* ---------- PRODUCT PAGE – SPECS PANEL WRAPPER ---------- */
/* Remove the white Bootstrap “panel” around the spec rows */
.catalog-single.desktop #collapseSpecs .panel,
.catalog-single.desktop #collapseSpecs .panel-default {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Remove the white panel-body background and extra padding */
.catalog-single.desktop #collapseSpecs .panel-body {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* Specs rows spacing */
.catalog-single.desktop #collapseSpecs .tech-specs .item {
margin-bottom: 6px; /* was effectively much larger */
}
/* Small gap under the last item instead of a big one */
.catalog-single.desktop #collapseSpecs .tech-specs .item:last-child {
margin-bottom: 2px;
}
.catalog-single.desktop #collapseSpecs .tech-specs .row > div > .row {
background: var(--surface);
border-radius: 8px;
border: 1px solid var(--hbs-border);
}
/* Remove white container around specifications */
.catalog-single_desktop #collapseSpecs .panel,
.catalog-single_desktop #collapseSpecs .panel-default,
.catalog-single_desktop #collapseSpecs .panel-body {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Reduce spacing between specification items */
.catalog-single_desktop #collapseSpecs .item {
margin: 6px 0 !important;
}
/* Hide Twitter post/share button iframe */
iframe[id^="twitter-widget"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* HBS spec row styling */
#collapseSpecs .item > .row {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 12px !important;
padding: 10px 20px !important;
}
/* --- SPECIFICATIONS PANEL CLEAN-UP --- */
/* Kill the white panel background just for Specs */
.catalog-single.desktop #collapseSpecs,
.catalog-single.desktop #collapseSpecs .panel,
.catalog-single.desktop #collapseSpecs .panel-body,
.catalog-single.desktop #collapseSpecs .panel-border,
.catalog-single.desktop #collapseSpecs .panel-heading {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Turn the whole specs block into one HBS-style card */
.catalog-single.desktop .product-specs {
background: linear-gradient(135deg, #2d2329, #1c161b);
border-radius: 26px;
padding: 22px 24px 16px;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.8);
}
/* Tighten spacing between rows */
.catalog-single.desktop .product-specs .row {
margin: 0 0 10px;
}
.catalog-single.desktop .product-specs .row:last-child {
margin-bottom: 0;
}
/* Make the inner grey bars feel tighter + on-brand */
.catalog-single.desktop .product-specs .row > [class*="col-"] {
padding: 10px 18px;
}
/* Labels (left column) */
.catalog-single.desktop .product-specs .row > [class*="col-"].text-right span {
color: #ffffff;
font-weight: 600;
letter-spacing: 0.04em;
opacity: 0.85;
}
/* Values (right column) */
.catalog-single.desktop .product-specs .row > [class*="col-"]:not(.text-right) p {
color: #ffffff;
font-weight: 500;
opacity: 0.95;
margin: 0;
}
/* --- PRODUCT POINTS / FEATURES CARD --- */
.catalog-single.desktop .product-points-wrapper {
margin-top: 18px;
}
.catalog-single.desktop .product-points-wrapper .product-points {
background: linear-gradient(135deg, #171a22, #242a34);
border-radius: 26px;
padding: 22px 24px 18px;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.75);
color: #ffffff;
}
/* Remove default bullets and use small brand dots */
.catalog-single.desktop .product-points-wrapper .product-points ul {
margin: 0;
padding: 0;
list-style: none;
}
.catalog-single.desktop .product-points-wrapper .product-points li {
position: relative;
padding-left: 1.1rem;
margin-bottom: 6px;
font-size: 0.9rem;
line-height: 1.4;
}
.catalog-single.desktop .product-points-wrapper .product-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--brand-primary, #ed8227);
}
/* “Show more” link */
.catalog-single.desktop .product-points-wrapper .product-points-show-more {
color: #ffd9ba;
font-weight: 500;
text-decoration: none;
}
.catalog-single.desktop .product-points-wrapper .product-points-show-more:hover {
text-decoration: underline;
}
/* === PRODUCT PAGE: SPECIFICATIONS CLEAN-UP === */
/* Strip the default panel chrome for the Specs accordion */
.catalog-single.desktop #collapseSpecs,
.catalog-single.desktop #collapseSpecs .panel,
.catalog-single.desktop #collapseSpecs .panel-body,
.catalog-single.desktop #collapseSpecs .panel-border,
.catalog-single.desktop #collapseSpecs .panel-heading {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Make the whole specs area a single HBS-style card */
.catalog-single.desktop #collapseSpecs .tech-specs {
background: linear-gradient(135deg, #171a22, #242a34);
border-radius: 26px;
padding: 20px 24px 16px;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.75);
}
/* Each "item" (Lead time, Weight, Brand, etc.) */
.catalog-single.desktop #collapseSpecs .tech-specs .item {
margin-bottom: 8px;
}
.catalog-single.desktop #collapseSpecs .tech-specs .item:last-child {
margin-bottom: 0;
}
/* Kill extra spacing on inner row */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row {
margin: 0;
}
/* Inner grey bars for label + value */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"] {
background: rgba(0, 0, 0, 0.22);
border-radius: 10px;
padding: 8px 14px;
}
/* Label (left cell) */
.catalog-single.desktop #collapseSpecs .tech-specs .item .text-right span {
color: #e5e7eb;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Value (right cell) */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"]:not(.text-right) p {
margin: 0;
color: #f9fafb;
font-weight: 500;
}
/* ============================
PRODUCT PAGE – SPEC PILL LAYOUT
============================ */
/* Remove original panel / zebra styling */
.catalog-single.desktop #collapseSpecs,
.catalog-single.desktop #collapseSpecs .panel,
.catalog-single.desktop #collapseSpecs .panel-body,
.catalog-single.desktop #collapseSpecs .panel-border,
.catalog-single.desktop #collapseSpecs .panel-heading {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Specs container as a single HBS-style card */
.catalog-single.desktop #collapseSpecs .tech-specs {
background: radial-gradient(circle at 0% 0%, #111827 0, #020617 58%);
border-radius: 24px;
padding: 18px 20px 16px;
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.75);
}
/* Each spec row becomes a pill */
.catalog-single.desktop #collapseSpecs .tech-specs .item {
margin-bottom: 10px;
}
.catalog-single.desktop #collapseSpecs .tech-specs .item:last-child {
margin-bottom: 0;
}
/* Turn the inner .row into a flex pill */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row {
margin: 0;
display: flex;
align-items: stretch;
gap: 8px;
}
/* Kill any old backgrounds */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"] {
background: transparent !important;
border-radius: 0;
padding: 0;
}
/* Label (left side) */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"].text-right {
flex: 0 0 190px; /* label width on desktop */
max-width: 190px;
background: linear-gradient(135deg, #1f2937, #111827);
border-radius: 999px;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
}
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"].text-right span {
color: #f9fafb;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
/* Value (right side) */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"]:not(.text-right) {
flex: 1 1 auto;
background: rgba(15, 23, 42, 0.85);
border-radius: 999px;
padding: 8px 16px;
display: flex;
align-items: center;
}
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"]:not(.text-right) p {
margin: 0;
color: #e5e7eb;
font-weight: 500;
}
/* Mobile tweaks: stack label over value */
@media (max-width: 767px) {
.catalog-single.desktop #collapseSpecs .tech-specs {
padding: 14px 14px 12px;
border-radius: 18px;
}
.catalog-single.desktop #collapseSpecs .tech-specs .item .row {
flex-direction: column;
gap: 4px;
}
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"].text-right,
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"]:not(.text-right) {
max-width: 100%;
flex: 1 1 auto;
border-radius: 12px;
}
}
/* =========================================================
HBS PRODUCT PAGE – FINAL SPEC / WIDGET OVERRIDES
(append at very bottom of CSS)
========================================================= */
/* 1) SPECIFICATIONS – remove white container & extra chrome */
.catalog-single.desktop #collapseSpecs,
.catalog-single.desktop #collapseSpecs .panel,
.catalog-single.desktop #collapseSpecs .panel-default,
.catalog-single.desktop #collapseSpecs .panel-body,
.catalog-single.desktop #collapseSpecs .panel-border,
.catalog-single.desktop #collapseSpecs .panel-heading,
.catalog-single.desktop #collapseSpecs .product-specs {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Don’t add an extra card background around the rows */
.catalog-single.desktop #collapseSpecs .tech-specs {
background: transparent !important;
padding: 0 !important;
}
/* 2) SPEC ROWS – pill layout with tighter spacing */
.catalog-single.desktop #collapseSpecs .tech-specs .item {
margin: 4px 0 !important; /* reduces vertical gap */
}
.catalog-single.desktop #collapseSpecs .tech-specs .item:last-child {
margin-bottom: 2px !important;
}
/* Turn each inner .row into a pill */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row {
margin: 0 !important;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
}
/* Remove any leftover white/grey from Bootstrap cols */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"] {
background: transparent !important;
padding: 8px 14px !important;
}
/* Label column (left) – subtle darker strip */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"].text-right {
background: rgba(255, 255, 255, 0.06) !important;
}
/* Value column (right) just uses the pill bg */
.catalog-single.desktop #collapseSpecs .tech-specs .item .row > [class*="col-"]:not(.text-right) {
background: transparent !important;
}
/* Text colours – bright and readable */
.catalog-single.desktop #collapseSpecs .tech-specs span,
.catalog-single.desktop #collapseSpecs .tech-specs p {
color: #ffffff !important;
}
/* 3) HIDE TWITTER "POST" SHARE BUTTON WIDGET */
iframe[id^="twitter-widget"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* Kill the central white strip on search results only */
body.hbs-search-active section.catalog-grid,
body.hbs-search-active section.catalog-grid .catalog-grid__inner,
body.hbs-search-active section.catalog-grid .container.gridcontent {
background: transparent !important;
box-shadow: none !important;
}
/* Make sure the whole page content uses the dark HBS background */
body.hbs-search-active .page-content.onecolumn {
background:
radial-gradient(circle at 0 0, #1f2937 0, #050816 45%, #020617 100%);
}
/* =========================================================
HBS SEARCH RESULTS – FILTER BAR + PAGINATION POLISH
(add this at the very bottom of your main CSS)
========================================================= */
/* 1) Kill any leftover white backgrounds on the search shell */
body.hbs-search-active .page-content.onecolumn,
body.hbs-search-active section.catalog-grid,
body.hbs-search-active .catalog-grid__inner {
background: transparent !important;
}
/* Keep the product grid nicely centred */
body.hbs-search-active .catalog-grid__inner {
max-width: 1200px;
margin: 0 auto 40px;
}
/* 2) Filters bar – remove white “strip” and turn into a glass pill */
body.hbs-search-active #filterswrapperhorizontal.shop-filters.filterswrapper {
background: rgba(15, 23, 42, 0.96);
border-radius: 18px;
padding: 10px 14px;
border: 1px solid rgba(148, 163, 184, 0.45);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}
/* Don’t let inner Bootstrap cols re-add white boxes */
body.hbs-search-active #filterswrapperhorizontal.shop-filters.filterswrapper .row,
body.hbs-search-active #filterswrapperhorizontal.shop-filters.filterswrapper .row > [class*="col-"] {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Optional: tighten vertical spacing under the filters */
body.hbs-search-active .catalog-grid__inner .row:first-of-type {
margin-bottom: 10px;
}
/* 3) Pagination – remove the boxy background and make text clear */
body.hbs-search-active ul.pagination.load-more {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
/* Clear any “button” background on the
items */
body.hbs-search-active ul.pagination.load-more li {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 2px;
padding: 0;
}
/* Links / spans inside pagination */
body.hbs-search-active ul.pagination.load-more li a,
body.hbs-search-active ul.pagination.load-more li span {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
text-decoration: none;
background: transparent;
color: #f9fafb;
}
/* Active page – soft orange pill */
body.hbs-search-active ul.pagination.load-more li.active span,
body.hbs-search-active ul.pagination.load-more li.active a {
background: linear-gradient(90deg, #ed8227, #ffd9ba);
color: #111827;
}
/* Hover state – subtle underline, no blur */
body.hbs-search-active ul.pagination.load-more li a:hover {
text-decoration: underline;
background: transparent;
}
/* Make sure nothing weird (filters) adds blur/filters to pagination */
body.hbs-search-active ul.pagination.load-more,
body.hbs-search-active ul.pagination.load-more * {
filter: none !important;
backdrop-filter: none !important;
}
/* ============================
FIX: restore HBS dark background
on search results pages
============================ */
/* Put the dark gradient back on the main content wrapper */
body.hbs-search-active .page-content.onecolumn {
background:
radial-gradient(circle at 0 0, #1f2937 0, #050816 45%, #020617 100%) !important;
}
/* Keep the catalog grid transparent so cards float nicely */
body.hbs-search-active section.catalog-grid {
background: transparent !important;
}
/* Leave the inner wrapper centred and clean */
body.hbs-search-active .catalog-grid__inner {
max-width: 1200px;
margin: 0 auto 40px;
}
/* ========================================
HBS SEARCH PAGE – MATCH PRODUCT BG
======================================== */
body.hbs-search-active .page-content {
background:
radial-gradient(circle at top left,
rgba(255,255,255,0.06) 0%,
var(--bg) 28%,
#000 85%
) !important;
color: var(--fg);
}
/* Keep the search grid transparent so the gradient shows */
body.hbs-search-active section.catalog-grid,
body.hbs-search-active .catalog-grid__inner {
background: transparent !important;
}
/* ================================
HBS – Search results legibility fixes
================================ */
/* 1) Green product leaf icon */
body.hbs-search-active .fa.fa-leaf {
color: #16a34a !important; /* readable green */
text-shadow: none !important;
}
/* 2) "Category" label text under the image */
body.hbs-search-active .list-attribute.product-category strong,
body.hbs-search-active .footer-wrapper-description .brand-label,
body.hbs-search-active .footer-wrapper-description strong {
color: #4b5563 !important; /* dark grey against the light tile */
font-weight: 700;
}
/* 3) Qty input box (number + border) */
body.hbs-search-active .qty-list input,
body.hbs-search-active input.qty-list,
body.hbs-search-active .qty-list .form-control {
background: #ffffff !important;
color: #111827 !important;
border: 1px solid #d4d4d8 !important;
border-radius: 6px;
}
/* Optional: qty placeholder colour (if any) */
body.hbs-search-active .qty-list input::placeholder {
color: #6b7280;
}
/* ================================
HBS – Search results "Sort by" select
================================ */
body.hbs-search-active #productorderby,
body.hbs-search-active select.productorderby {
background: #ffffff !important; /* solid white pill */
color: #111827 !important; /* dark text so it’s readable */
border: 1px solid #d4d4d8 !important; /* light grey border */
border-radius: 999px !important; /* pill shape */
padding: 6px 12px !important;
font-weight: 600;
font-size: 0.85rem;
line-height: 1.2;
}
/* (Optional, but helps keep it tidy on very small screens) */
@media (max-width: 767px) {
body.hbs-search-active #productorderby,
body.hbs-search-active select.productorderby {
width: 100%;
}
}
/* Remove the black band between content and footer on search pages */
body.hbs-search-active .page-content.onecolumn {
margin-bottom: 0 !important; /* stop the margin showing body background */
padding-bottom: 0px; /* keep a nice gap above the footer */
}
/* Add horizontal spacing between product tiles */
.page-content .search-results-main .product-list > li,
.page-content .search-results-main .product-grid > div,
.page-content .search-results-main .product,
.page-content .search-results-main .tileparent {
margin-left: 10px !important;
margin-right: 10px !important;
}
/* Optional: give the grid a little negative margin so rows stay aligned */
.page-content .search-results-main .product-list,
.page-content .search-results-main .product-grid {
margin-left: -10px !important;
margin-right: -10px !important;
}
/* ===== Replace broken header logo image with gradient text ===== */
/* Hide any logo ![]()
that is missing/empty */
header a.logo img:not([src]),
header a.logo img[src=""],
header a.logo img[src=" "],
header .header-logo img:not([src]),
header .header-logo img[src=""],
header .header-logo img[src=" "]{
display:none !important;
}
/* Text logo replacement */
header a.logo,
header .header-logo a{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
}
/* Inject text */
header a.logo::after,
header .header-logo a::after{
content:"HUMBER BUSINESS SUPPLIES";
display:block;
text-transform:uppercase;
font-weight:1000;
letter-spacing:.14em;
font-size:.95rem;
line-height:1;
padding:6px 0;
background:linear-gradient(90deg, #ed8227, #ffd9ba);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}