/* VOLTARC storefront — top bar, hero, tiles, brand strip, reviews, payment icons, rich footer.
   Loaded globally (header+footer) and on the homepage. Requires tokens.css + global.css. */

/* ─────────── Homepage layout reset ───────────
   WordPress wraps page content in .entry-content.is-layout-constrained, which
   clamps EVERY child to ~600px. That squished the whole homepage into a narrow
   column. Override: remove the clamp and make every top-level <section> span the
   full viewport; the inner .vx-container caps content width and centres it. */
.home.page .entry-content.is-layout-constrained > *{max-width:none!important}
.home.page .entry-content{max-width:100%!important;padding-left:0!important;padding-right:0!important;margin:0!important}
.home.page main#main,.home.page article.page,.home.page .ct-container{max-width:100%!important;padding-left:0!important;padding-right:0!important}
/* Robust full-bleed via calc() — works regardless of container width/padding,
   unlike left:50%+margin which shifts content sideways and clipped the hero. */
.home.page .entry-content > section{
  width:100vw;max-width:none!important;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.home.page .entry-content > section + section{margin-top:0}
/* clip (not hidden) avoids a horizontal scrollbar from 100vw without breaking sticky header */
html:has(body.home.page){overflow-x:clip}
body.home.page{overflow-x:clip}

/* Generic full-bleed helper for non-home use */
.vx-bleed{width:100vw;max-width:none!important;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ─────────── Live QA fixes ─────────── */
/* Hide the auto "Home" page title + entry header on the front page only */
.home.page .entry-header,
.home.page .page-title,
.home.page h1.entry-title.page-title{display:none!important}

/* Header: force solid dark + kill EVERY stray white background (the white edge blocks) */
#header.ct-header{background:#0b0f14!important;border-bottom:1px solid rgba(200,255,43,.18)!important}
#header [data-row],
#header [data-column],
#header .ct-container,
#header .ct-header-row,
#header .site-branding,
#header [class*="header-cell"],
#header .ct-header-cell,
#header [class*="logo"],
#header .ct-toggle-dropdown,
#header [class*="ct-header"]{background-color:transparent!important}

/* Wordmark / logo text clearly visible */
#header .site-title,#header .site-title a,.ct-logo-container .site-title a{color:#fff!important}

/* MAIN NAV LINKS — Blocksy uses .ct-menu-link (this is the real fix) */
.ct-menu-link,
#header .ct-menu-link,
#header .menu-item > a{
  color:#ffffff!important;font-weight:600!important;font-size:.95rem!important;letter-spacing:.01em;
}
.ct-menu-link:hover,
#header .ct-menu-link:hover,
.menu-item.current-menu-item > .ct-menu-link{color:var(--vx-volt)!important}
/* sub-menu (dropdown) links readable on dark panel */
#header .sub-menu{background:#14181f!important;border:1px solid rgba(200,255,43,.14)!important}
#header .sub-menu .ct-menu-link{color:#e7ecf2!important;font-size:.875rem!important}

/* Header icons (search / cart / account) visible */
#header .ct-toggle,#header .ct-icon,#header [class*="cart"] svg,#header [class*="search"] svg,#header svg{color:#ffffff!important}

/* Top utility bar — more visible (lighter text, clearer bar, accent border) */
.vx-topbar{background:#0f141b!important;border-bottom:1px solid rgba(200,255,43,.2)!important}
.vx-topbar,.vx-topbar a,.vx-topbar__item{color:#d4dae3!important;font-size:.85rem!important}
.vx-topbar strong{color:#fff!important}
.vx-topbar a:hover{color:var(--vx-volt)!important}
.vx-topbar__item .ico{color:var(--vx-volt)!important}

/* ─────────── Inline SVG icon sizing ─────────── */
.vx-ico{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em;flex-shrink:0}
.vx-topbar__item .ico .vx-ico{width:.95rem;height:.95rem}
.vx-topbar__item .ico{color:var(--vx-volt);display:inline-flex}
.vx-usp__ico .vx-ico{width:1.35rem;height:1.35rem}
.vx-world__tag .vx-ico{width:.85rem;height:.85rem;vertical-align:-.1em}
.vx-footer__social .vx-ico{width:1.05rem;height:1.05rem}
.vx-footer__brand .contact .vx-ico{width:1rem;height:1rem;color:var(--vx-volt);vertical-align:-.18em;margin-right:.15rem}
.vx-throttle-notice__icon .vx-ico{width:1.3rem;height:1.3rem}
.vx-trust-item .vx-ico{width:1.3rem;height:1.3rem;color:var(--vx-volt)}

/* ─────────── Top utility bar ─────────── */
.vx-topbar{
  background:var(--vx-carbon);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.8125rem;
  color:var(--vx-slate);
}
.vx-topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
  flex-wrap:wrap;
}
.vx-topbar__left,.vx-topbar__right{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.vx-topbar a{color:var(--vx-slate);font-weight:600}
.vx-topbar a:hover{color:var(--vx-volt)}
.vx-topbar strong{color:var(--vx-cloud)}
.vx-topbar__item{display:inline-flex;align-items:center;gap:.4rem}
.vx-topbar__item .ico{color:var(--vx-volt)}
@media(max-width:640px){
  .vx-topbar__left .vx-topbar__item:not(:first-child){display:none}
}

/* ─────────── HERO ─────────── */
.vx-hero{
  position:relative;
  min-height:min(82vh,720px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--vx-ink);
  isolation:isolate;
}
.vx-hero__media{position:absolute;inset:0;z-index:0}
.vx-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.vx-hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(11,15,20,.94) 0%,rgba(11,15,20,.78) 40%,rgba(11,15,20,.35) 100%),
            radial-gradient(ellipse 60% 50% at 75% 40%,rgba(0,229,255,.10),transparent 70%);
}
.vx-hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,8vw,6rem)}
.vx-hero__content{max-width:620px}
.vx-hero__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vx-volt);margin-bottom:1.1rem;
}
.vx-hero__eyebrow::before{content:'';width:2.2rem;height:2px;background:var(--vx-arc-grad)}
.vx-hero h1{font-size:clamp(2.25rem,5.2vw,4rem);line-height:1.05;margin-bottom:1.1rem;letter-spacing:-.02em;overflow-wrap:break-word;max-width:14ch}
.vx-hero h1 .accent{background:var(--vx-arc-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vx-hero__sub{font-size:clamp(1rem,1.6vw,1.25rem);color:#cfd6e0;line-height:1.6;max-width:46ch;margin-bottom:2rem}
.vx-hero__ctas{display:flex;flex-wrap:wrap;gap:.875rem}

/* ─────────── USP trust pillars ─────────── */
.vx-usps{background:var(--vx-surface);border-block:1px solid rgba(255,255,255,.06)}
.vx-usps__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.06);
}
.vx-usp{
  background:var(--vx-surface);
  display:flex;align-items:center;gap:.875rem;
  padding:1.25rem clamp(1rem,2vw,1.5rem);
}
.vx-usp__ico{
  flex-shrink:0;width:2.6rem;height:2.6rem;border-radius:.7rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,255,43,.1);color:var(--vx-volt);font-size:1.35rem;
}
.vx-usp__t{font-family:var(--vx-font-display);font-weight:700;font-size:.95rem;color:var(--vx-white);line-height:1.2}
.vx-usp__s{font-size:.78rem;color:var(--vx-slate);margin-top:.15rem}
@media(max-width:900px){.vx-usps__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vx-usps__grid{grid-template-columns:1fr}}

/* ─────────── Section shell ─────────── */
.vx-sec{padding-block:clamp(3rem,7vw,5.5rem)}
.vx-sec--alt{background:var(--vx-surface)}
.vx-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.vx-sec__head h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:0}
.vx-sec__head .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vx-volt);display:block;margin-bottom:.4rem}
.vx-sec__head .vx-link{font-weight:700;font-size:.9rem;white-space:nowrap}
.vx-sec__head .vx-link::after{content:' →'}

/* ─────────── Category world tiles ─────────── */
.vx-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.vx-tiles--types{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.vx-tiles,.vx-tiles--types{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.vx-tiles,.vx-tiles--types{grid-template-columns:1fr 1fr}}
.vx-tile{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  border-radius:var(--vx-radius-lg);aspect-ratio:3/4;background:var(--vx-carbon);
  border:1px solid rgba(255,255,255,.06);
}
.vx-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--vx-ease)}
.vx-tile:hover img{transform:scale(1.07)}
.vx-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(11,15,20,.9) 100%)}
.vx-tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.1rem 1rem}
.vx-tile__cap h3{font-size:1rem;color:#fff;margin:0 0 .15rem;line-height:1.2}
.vx-tile__cap span{font-size:.74rem;color:var(--vx-volt);font-weight:700}
.vx-tile--offroad .vx-tile__cap span{color:var(--vx-danger)}
.vx-tile:hover .vx-tile__cap h3{color:var(--vx-volt)}

/* ─────────── Two-worlds split ─────────── */
.vx-worlds2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:800px){.vx-worlds2{grid-template-columns:1fr}}
.vx-world{
  position:relative;border-radius:var(--vx-radius-lg);overflow:hidden;
  min-height:340px;display:flex;align-items:flex-end;
  padding:1.75rem;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
}
.vx-world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s var(--vx-ease)}
.vx-world:hover img{transform:scale(1.05)}
.vx-world::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,20,.2) 0%,rgba(11,15,20,.92) 100%);z-index:1}
.vx-world__body{position:relative;z-index:2}
.vx-world__tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:.35rem;margin-bottom:.75rem}
.vx-world--road .vx-world__tag{background:rgba(22,163,74,.2);border:1px solid var(--vx-success);color:var(--vx-success)}
.vx-world--offroad .vx-world__tag{background:rgba(229,72,77,.18);border:1px solid var(--vx-danger);color:var(--vx-danger)}
.vx-world h3{font-size:1.6rem;margin:0 0 .4rem}
.vx-world p{font-size:.9rem;color:#dfe4ec;margin:0 0 1rem;max-width:40ch}
.vx-world .vx-btn{pointer-events:none}

/* ─────────── Brand strip ─────────── */
.vx-brandstrip{background:var(--vx-ink);border-block:1px solid rgba(255,255,255,.06);padding-block:2.25rem}
.vx-brandstrip__label{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vx-slate);margin-bottom:1.25rem}
.vx-brandstrip__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1rem}
.vx-brandchip{
  font-family:var(--vx-font-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;
  color:var(--vx-slate);padding:.5rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;
  transition:all var(--vx-dur) var(--vx-ease);text-decoration:none;
}
.vx-brandchip:hover{color:var(--vx-ink);background:var(--vx-volt);border-color:var(--vx-volt)}

/* ─────────── Reviews ─────────── */
.vx-reviews__top{text-align:center;margin-bottom:2.25rem}
.vx-reviews__stars{color:var(--vx-volt);font-size:1.5rem;letter-spacing:.15em}
.vx-reviews__score{font-family:var(--vx-font-mono);color:var(--vx-white);font-weight:700;margin-top:.4rem}
.vx-reviews__score span{color:var(--vx-slate);font-weight:400}
.vx-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:820px){.vx-reviews__grid{grid-template-columns:1fr}}
.vx-review{background:var(--vx-ink);border:1px solid rgba(255,255,255,.07);border-radius:var(--vx-radius-lg);padding:1.5rem;display:flex;flex-direction:column;gap:.85rem}
.vx-sec--alt .vx-review{background:var(--vx-carbon)}
.vx-review__stars{color:var(--vx-volt);letter-spacing:.12em}
.vx-review__body{font-size:.92rem;color:var(--vx-cloud);line-height:1.6;flex:1}
.vx-review__who{font-size:.82rem;color:var(--vx-slate)}
.vx-review__who b{color:var(--vx-white);display:block;font-size:.9rem}
.vx-review__verified{color:var(--vx-success);font-weight:700;font-size:.72rem}

/* ─────────── CTA band ─────────── */
.vx-ctaband{position:relative;overflow:hidden;text-align:center;padding-block:clamp(3.5rem,8vw,5.5rem);background:var(--vx-ink)}
.vx-ctaband::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(200,255,43,.08),transparent 70%)}
.vx-ctaband>*{position:relative;z-index:1}
.vx-ctaband h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.75rem}
.vx-ctaband p{color:var(--vx-slate);font-size:1.05rem;max-width:50ch;margin:0 auto 1.75rem}
.vx-ctaband .vx-hero__ctas{justify-content:center}

/* ─────────── Featured product rows (Woo [products]) ─────────── */
.vx-sec .woocommerce.columns-4 ul.products,
.vx-sec ul.products{margin-top:0!important}

/* ─────────── Payment icons ─────────── */
.vx-pay{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.vx-pay svg{height:24px;width:38px;border-radius:3.5px;display:block;flex-shrink:0}
.vx-pay__label{font-size:.75rem;color:var(--vx-slate);width:100%;margin-bottom:.25rem;font-weight:600}

/* ─────────── Rich custom footer (replaces Blocksy footer) ─────────── */
.ct-footer{display:none!important} /* hide Blocksy default footer */
.vx-footer{background:var(--vx-surface);border-top:1px solid rgba(200,255,43,.1);color:var(--vx-slate)}
.vx-footer__top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2rem;padding-block:3.25rem}
@media(max-width:980px){.vx-footer__top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.vx-footer__top{grid-template-columns:1fr 1fr}}
.vx-footer__brand .wordmark{font-family:var(--vx-font-display);font-weight:700;font-size:1.4rem;color:#fff}
.vx-footer__brand .wordmark span{color:var(--vx-volt)}
.vx-footer__brand p{font-size:.85rem;margin:.6rem 0 1rem;max-width:30ch;line-height:1.6}
.vx-footer__brand .contact{font-size:.85rem;line-height:1.8}
.vx-footer__brand .contact a{color:var(--vx-cloud)}
.vx-footer__col h4{font-family:var(--vx-font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vx-slate);margin:0 0 1rem}
.vx-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.vx-footer__col a{font-size:.875rem;color:var(--vx-cloud)}
.vx-footer__col a:hover{color:var(--vx-volt)}
.vx-footer__news input[type=email]{width:100%;background:var(--vx-ink);border:1px solid rgba(255,255,255,.12);border-radius:var(--vx-radius);color:var(--vx-cloud);padding:.6rem .8rem;font-size:.875rem;margin-bottom:.6rem}
.vx-footer__social{display:flex;gap:.6rem;margin-top:1rem}
.vx-footer__social a{width:2.2rem;height:2.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--vx-carbon);color:var(--vx-cloud);border:1px solid rgba(255,255,255,.08)}
.vx-footer__social a:hover{background:var(--vx-volt);color:var(--vx-ink);border-color:var(--vx-volt)}
.vx-footer__bottom{border-top:1px solid rgba(255,255,255,.07);padding-block:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.vx-footer__bottom .legal{font-size:.78rem;color:var(--vx-slate)}
.vx-footer__bottom .legal a{color:var(--vx-slate)}
.vx-footer__bottom .legal a:hover{color:var(--vx-volt)}
.vx-footer__eapc{font-size:.72rem;color:var(--vx-slate);line-height:1.5;padding:1rem 0;border-top:1px solid rgba(255,255,255,.05);max-width:none}

/* ─────────── Header cart count badge ─────────── */
.vx-cart-count{display:inline-flex;min-width:1.1rem;height:1.1rem;padding:0 .3rem;align-items:center;justify-content:center;background:var(--vx-volt);color:var(--vx-ink);border-radius:999px;font-size:.7rem;font-weight:700;margin-left:.25rem}

/* ─────────── Newsletter signup (Contact page) ─────────── */
.vx-news-form{display:flex;gap:.5rem;max-width:440px;flex-wrap:wrap;margin-top:.5rem}
.vx-news-form input[type=email]{flex:1;min-width:200px;background:var(--vx-surface);border:1px solid rgba(255,255,255,.14);border-radius:var(--vx-radius);color:var(--vx-cloud);padding:.7rem .9rem;font-size:.95rem}
.vx-news-form input[type=email]:focus{border-color:var(--vx-volt);outline:none;box-shadow:0 0 0 3px rgba(200,255,43,.18)}

/* ─────────── Mobile ─────────── */
/* Blocksy mobile off-canvas menu: dark + readable nav */
#offcanvas,#offcanvas .ct-panel-inner,#offcanvas .ct-panel-content,#offcanvas .ct-panel-content-inner{background:var(--vx-ink)!important}
#offcanvas a,#offcanvas .menu-item > a,#offcanvas .ct-menu-link{color:var(--vx-cloud)!important;font-family:var(--vx-font-display)!important;font-weight:600!important}
#offcanvas .menu-item > a:hover,#offcanvas .current-menu-item > a{color:var(--vx-volt)!important}
#offcanvas .ct-toggle-close,.ct-header .ct-toggle{color:var(--vx-cloud)!important}
/* hamburger trigger visible */
.ct-header-trigger,.ct-toggle{color:var(--vx-cloud)!important}

@media (max-width:782px){
  .vx-topbar__inner{justify-content:center;gap:.75rem 1.25rem}
  .vx-topbar__right{display:none}
  .vx-topbar__left .vx-topbar__item:not(:first-child){display:none}
  .vx-hero{min-height:auto}
  .vx-hero__inner{padding-block:2.75rem}
  .vx-hero__content{max-width:100%}
  .vx-hero h1{font-size:clamp(2.25rem,11vw,3rem)}
  .vx-hero::after{background:linear-gradient(180deg,rgba(11,15,20,.55) 0%,rgba(11,15,20,.9) 100%)}
  .vx-hero__media img{object-position:center}
  .vx-sec{padding-block:2.5rem}
  .vx-sec__head{flex-direction:column;align-items:flex-start;gap:.35rem}
  .vx-world{min-height:240px;padding:1.25rem}
  .vx-footer__top{gap:1.5rem}
  .vx-footer__bottom{flex-direction:column;align-items:flex-start;gap:.6rem}
}
@media (max-width:480px){
  .vx-hero__ctas{flex-direction:column;align-items:stretch}
  .vx-hero__ctas .vx-btn{justify-content:center;width:100%}
  .vx-tiles,.vx-tiles--types{grid-template-columns:1fr 1fr;gap:.6rem}
  .vx-tile__cap h3{font-size:.85rem}
}