/* ==========================================================================
   BRAND STOREFRONTS  (/brand/<slug>/)
   Scoped to body.ol-brandskin / .bs-page. Loaded only when
   ol_brand_skin_active(). Structure is shared by every brand; each brand sets
   its own palette and display face in the block at the foot of this file, and
   is selected by the body class ol-bs-<slug> that inc/brand-skin.php adds.
   Conduit ITC and Tough Dog's own condensed face are stood in for by Barlow
   Condensed (OFL), self-hosted like the rest of the theme's fonts.
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2')}

body.ol-brandskin{
  --bs-r:5px;
  background:var(--bs-bg);
  color:var(--bs-ink);
}

/* ---- the strip above the storefront (fitment bar + crumbs) sits on the dark ground */
body.ol-brandskin .ol-crumbs{color:var(--bs-mute)}
body.ol-brandskin .ol-crumbs a{color:var(--bs-ink)}
body.ol-brandskin .ol-crumbs a:hover{color:var(--bs-y)}

.bs-page{color:var(--bs-ink);font-family:var(--body);overflow-x:clip}
.bs-wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 40px}
.bs-page .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---- type */
.bs-page .bs-h1,.bs-page .bs-h2{font-family:var(--bs-disp);font-style:normal;text-transform:uppercase;color:var(--bs-ink);margin:0;letter-spacing:0}
.bs-h1{font-weight:800;font-size:clamp(56px,7.4vw,112px);line-height:.86}
.bs-h2{font-weight:800;font-size:clamp(34px,3.6vw,54px);line-height:.95}

/* ---- buttons: solid yellow, 5px corners, bold caps (Lightforce's own) */
.bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--bs-disp);font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;
  background:var(--bs-y);color:var(--bs-on);border:2px solid var(--bs-y);border-radius:var(--bs-r);
  padding:11px 22px;line-height:1;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .15s}
.bs-btn:hover{background:var(--bs-yh);border-color:var(--bs-yh);color:var(--bs-on)}
.bs-btn:active{transform:translateY(1px)}
.bs-btn .ol-i{stroke:currentColor}
.bs-btn-line{background:transparent;color:var(--bs-ink);border-color:rgba(244,244,240,.5)}
.bs-btn-line:hover{background:transparent;color:var(--bs-y);border-color:var(--bs-y)}
.bs-btn-dark{background:var(--bs-dark);border-color:var(--bs-dark);color:var(--bs-ondark)}
.bs-btn-dark:hover{background:#2a2a27;border-color:#2a2a27;color:var(--bs-y)}
.bs-btn-dline{background:transparent;border-color:var(--bs-on);color:var(--bs-on)}
.bs-btn-dline:hover{background:var(--bs-dark);color:var(--bs-ondark);border-color:var(--bs-dark)}
.bs-btn-block{width:100%}
.bs-page a:focus-visible,.bs-page button:focus-visible,.bs-rail:focus-visible{outline:2px solid var(--bs-y);outline-offset:3px}
.bs-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---- HERO: copy left, the light itself bleeding off the right edge */
.bs-hero{position:relative;overflow:hidden;background:
  radial-gradient(60% 90% at 78% 50%,rgba(254,188,17,.16),transparent 62%),var(--bs-bg);
  margin-top:18px;border-top:1px solid var(--bs-line)}
.bs-hero-in{position:relative;z-index:2;min-height:clamp(520px,64vh,680px);display:flex;flex-direction:column;justify-content:center;padding-top:56px;padding-bottom:64px}
.bs-hero-in>*{max-width:560px}
.bs-logo{display:block;margin-bottom:26px}
.bs-logo img{height:40px;width:auto;display:block}
.bs-lede{font-size:17px;line-height:1.6;color:#D6D6D0;margin:24px 0 32px;max-width:470px}
.bs-hero-art{position:absolute;z-index:1;top:50%;right:-6vw;transform:translateY(-50%);width:min(64vw,860px);aspect-ratio:1/1;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.bs-hero-art img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- USP strip */
.bs-usp{background:var(--bs-s1);border-top:1px solid var(--bs-line);border-bottom:1px solid var(--bs-line)}
.bs-usp ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:14px 24px;padding-top:18px;padding-bottom:18px}
.bs-usp li,.bs-usp a{display:flex;align-items:center;gap:10px;font-family:var(--bs-disp);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:var(--bs-ink)}
.bs-usp a:hover{color:var(--bs-y)}
.bs-usp .ol-i{color:var(--bs-y);stroke:var(--bs-y);flex-shrink:0}

/* ---- sections */
.bs-sec{padding:88px 0 0}
.bs-sec .bs-h2{margin-bottom:30px}

/* ---- CATEGORY BENTO: two feature tiles over four */
.bs-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bs-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:250px;padding:20px 22px;
  border-radius:var(--bs-r);overflow:hidden;background:var(--bs-s1);border:1px solid var(--bs-line);color:var(--bs-ink);isolation:isolate}
.bs-t-big{grid-column:span 2;min-height:340px}
.bs-tile-shot{position:absolute;inset:0;z-index:-2;background:var(--ol-shot,var(--bs-s1));display:block}
.bs-tile-shot img{width:100%;height:100%;object-fit:contain;padding:36px 26px 64px;transition:transform .6s var(--ease)}
.bs-tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,10,.78) 0%,rgba(11,11,10,0) 34%,rgba(11,11,10,0) 52%,rgba(11,11,10,.92) 100%)}
.bs-t-big .bs-tile-shot img{-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.bs-tile:hover .bs-tile-shot img{transform:scale(1.05)}
.bs-tile-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bs-tile-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#E0E0DA}
.bs-tile-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--bs-disp);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--bs-y)}
.bs-tile-go .ol-i{stroke:var(--bs-y);transition:transform .25s var(--ease)}
.bs-tile:hover .bs-tile-go .ol-i{transform:translateX(4px)}
.bs-tile-t{font-family:var(--bs-disp);font-weight:800;font-size:30px;line-height:.95;text-transform:uppercase}
.bs-t-big .bs-tile-t{font-size:clamp(34px,3.4vw,48px)}
.bs-tile:hover{border-color:rgba(254,188,17,.55)}

/* ---- DRIVING LIGHT RAIL */
.bs-range-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.bs-range-head .bs-h2{margin:0}
.bs-arrows{display:flex;gap:10px}
.bs-arw{width:46px;height:46px;border-radius:var(--bs-r);border:1px solid var(--bs-line);background:var(--bs-s1);color:var(--bs-ink);display:grid;place-items:center;cursor:pointer;transition:.2s}
.bs-arw:hover{border-color:var(--bs-y);color:var(--bs-y)}
.bs-arw .ol-i{stroke:currentColor}
.bs-arw-prev .ol-i{transform:rotate(180deg)}
.bs-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,292px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 max(40px,calc((100vw - 1440px)/2 + 40px)) 10px;scroll-padding:0 max(40px,calc((100vw - 1440px)/2 + 40px));scrollbar-width:none}
.bs-rail::-webkit-scrollbar{display:none}
.bs-dl{scroll-snap-align:start;display:flex;flex-direction:column;background:linear-gradient(180deg,#232321,#141413);border:1px solid var(--bs-line);border-radius:var(--bs-r);overflow:hidden;color:var(--bs-ink);transition:border-color .2s}
.bs-dl:hover{border-color:rgba(254,188,17,.55)}
.bs-dl-shot{display:block;aspect-ratio:1/1;background:var(--ol-shot,#1c1c1a)}
.bs-dl-shot img{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .5s var(--ease)}
.bs-shot.ol-pshot--dark img,.bs-dl-shot.ol-pshot--dark img{padding:0}
.bs-dl:hover .bs-dl-shot img{transform:scale(1.05)}
.bs-dl-b{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 18px 18px;flex:1}
.bs-dl-n{font-family:var(--bs-disp);font-weight:800;font-size:26px;line-height:.98;text-transform:uppercase}
.bs-dl-sku{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--bs-mute)}
.bs-dl-p{font-weight:800;font-size:19px;margin:6px 0 14px;margin-top:auto;padding-top:8px}
.bs-dl-p del{color:var(--bs-mute);font-weight:500;font-size:14px;margin-right:6px}
.bs-dl-p ins{text-decoration:none}
.bs-dl .bs-btn{font-size:18px;padding:10px 16px}

/* ---- CATALOGUE: the shared grid, dressed for the dark */
.bs-shop{padding:88px 0 0}
.bs-shop .bs-h2{margin-bottom:6px}
.bs-shop .ol-layout{padding-bottom:40px}
.bs-slim{padding:34px 0 0}
.bs-slim-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-bottom:6px}
.bs-slim .bs-logo{margin:0;padding-right:22px;border-right:1px solid var(--bs-line)}
.bs-slim + .bs-shop{padding-top:10px}

.bs-page .ol-fx{background:var(--bs-s1);border:1px solid var(--bs-line);border-radius:var(--bs-r)}
.bs-page .ol-fc{border-bottom-color:var(--bs-line)}
.bs-page .ol-fc h5{color:var(--bs-y)}
.bs-page .ol-fc h5 span,.bs-page .ol-fc .ol-cnt{color:var(--bs-mute)}
.bs-page .ol-fc label{color:#D6D6D0}
.bs-page .ol-fc label:hover{color:var(--bs-ink)}
.bs-page .ol-cb{border-color:#6E6E68;border-radius:3px}
.bs-page .ol-fc input:checked+.ol-cb{background:var(--bs-y);border-color:var(--bs-y)}
.bs-page .ol-fc input:checked+.ol-cb:after{border-color:var(--bs-on)}
.bs-page .ol-fc input:focus-visible+.ol-cb{outline-color:var(--bs-y)}
.bs-page .ol-fc-fit{background:var(--bs-s2)}
.bs-page .ol-fx-note{color:var(--bs-mute)}
.bs-page .ol-fx-act{background:var(--bs-s2)}
.bs-page .ol-fx-clear{color:var(--bs-y)}
.bs-page .ol-fx-toggle{background:var(--bs-s2);color:var(--bs-ink);border:1px solid var(--bs-line);border-radius:var(--bs-r)}
.bs-page .ol-fx-toggle em{background:var(--bs-y);color:var(--bs-on)}
.bs-page .ol-fx::-webkit-scrollbar-thumb{background:var(--bs-line)}
.bs-page .ol-btn-red{background:var(--bs-y);color:var(--bs-on);border-radius:var(--bs-r)}

.bs-page .ol-tbar{border-bottom-color:var(--bs-line)}
.bs-page .ol-tcount b{color:var(--bs-ink)}
.bs-page .ol-spec{color:var(--bs-mute)}
.bs-page .ol-sortsel{background-color:var(--bs-s1);border-color:var(--bs-line);color:var(--bs-ink);border-radius:var(--bs-r);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FEBC11' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bs-page .ol-sortsel option{background:var(--bs-s1);color:var(--bs-ink)}
.bs-page .ol-chip{background:var(--bs-s1);border-color:var(--bs-line);color:var(--bs-ink);border-radius:var(--bs-r)}
.bs-page .ol-chip:hover{border-color:var(--bs-y)}
.bs-page .ol-chip .ol-x{color:var(--bs-y)}

.bs-page .ol-pc{background:var(--bs-s1);border-color:var(--bs-line);border-radius:var(--bs-r)}
.bs-page .ol-pc:hover{border-color:rgba(254,188,17,.55);box-shadow:0 22px 40px -26px rgba(0,0,0,.9)}
.bs-page .ol-pb{padding:16px 16px 16px}
.bs-page .ol-pname{font-family:var(--bs-disp);font-weight:700;font-size:19px;line-height:1.05;text-transform:uppercase;color:var(--bs-ink);min-height:40px}
.bs-page a.ol-pname:hover{color:var(--bs-y)}
.bs-page .ol-price{color:var(--bs-ink)}
.bs-page .ol-price del{color:var(--bs-mute)}
.bs-page .ol-add{background:var(--bs-y);color:var(--bs-on);border-radius:var(--bs-r)}
.bs-page .ol-add .ol-i{stroke:var(--bs-on)}
.bs-page .ol-pc:hover .ol-add{background:var(--bs-yh);color:var(--bs-on);transform:none}
.bs-page .ol-fitl.ol-no{background:var(--bs-s2);color:var(--bs-mute)}
.bs-page .ol-fitl.ol-no .ol-d{background:#6E6E68}
.bs-page .ol-fitl:not(.ol-no):not(.ol-warn){background:rgba(254,188,17,.12);color:var(--bs-y)}
.bs-page .ol-fitl:not(.ol-no):not(.ol-warn) .ol-d{background:var(--bs-y)}
.bs-page .ol-tg{border-radius:3px}
.bs-page .ol-tg-navy{background:var(--bs-y);color:var(--bs-on)}
.bs-page .ol-wish{background:var(--bs-s2);border-color:var(--bs-line);color:var(--bs-mute)}
.bs-page .ol-wish:hover,.bs-page .ol-wish.ol-on{color:var(--bs-y);border-color:var(--bs-y)}

.bs-page .ol-pag{border-top-color:var(--bs-line)}
.bs-page .ol-pag .page-numbers{background:var(--bs-s1);border-color:var(--bs-line);color:var(--bs-ink);border-radius:var(--bs-r)}
.bs-page .ol-pag a.page-numbers:hover{border-color:var(--bs-y);color:var(--bs-y)}
.bs-page .ol-pag .page-numbers.current{background:var(--bs-y);border-color:var(--bs-y);color:var(--bs-on)}
.bs-page .ol-pag .page-numbers.dots{background:none;border-color:transparent;color:var(--bs-mute)}
.bs-page .ol-pag-of{color:var(--bs-mute)}
.bs-page .woocommerce-message,.bs-page .woocommerce-info{background:var(--bs-s1);color:var(--bs-ink);border-color:var(--bs-y)}

/* ---- STORY: the light breaks out of its column */
.bs-story{padding-top:110px}
.bs-story-in{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.bs-story-art{position:relative;aspect-ratio:1/1;margin-left:-6vw;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.bs-story-art:before{content:"";position:absolute;inset:18%;border-radius:50%;background:rgba(254,188,17,.22);filter:blur(60px);z-index:-1}
.bs-story-art img{width:100%;height:100%;object-fit:cover;display:block}
.bs-story-copy p{font-size:17px;line-height:1.65;color:#D6D6D0;max-width:520px;margin:22px 0 34px}
.bs-stats{display:flex;gap:0;margin:0;border-top:1px solid var(--bs-line)}
.bs-stats div{flex:1;padding:22px 20px 0 0}
.bs-stats div+div{padding-left:22px;border-left:1px solid var(--bs-line)}
.bs-stats dt{font-family:var(--bs-disp);font-weight:800;font-size:clamp(44px,4.6vw,68px);line-height:.9;color:var(--bs-y)}
.bs-stats dd{margin:8px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-mute)}

/* ---- TESTED: full-bleed band, the light bar lit across it */
.bs-tested{position:relative;overflow:hidden;margin-top:110px;background:#050505;border-top:1px solid var(--bs-line);border-bottom:1px solid var(--bs-line)}
.bs-tested-art{position:absolute;inset:0 0 0 38%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 36%);mask-image:linear-gradient(90deg,transparent 0%,#000 36%)}
.bs-tested-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.9}
.bs-tested .bs-wrap{position:relative;z-index:1}
.bs-tested-copy{max-width:520px;padding:96px 0}
.bs-tested-copy p{font-size:17px;line-height:1.65;color:#D6D6D0;margin:22px 0 30px}
.bs-tests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bs-tests li{display:flex;align-items:center;gap:14px;font-family:var(--bs-disp);font-weight:700;font-size:22px;text-transform:uppercase}
.bs-tests .ol-i{color:var(--bs-y);stroke:var(--bs-y);flex-shrink:0}

/* ---- YELLOW BAND */
.bs-band{background:var(--bs-y);color:var(--bs-on);margin-top:0}
.bs-band-in{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:56px;padding-bottom:56px;flex-wrap:wrap}
.bs-page .bs-band .bs-h2{color:var(--bs-on)}
.bs-band p{margin:10px 0 0;font-size:16px;line-height:1.55;max-width:560px;color:#2A2511}
.bs-page .bs-sec + .bs-band,.bs-shop + .bs-band{margin-top:40px}

/* ---- the site footer keeps its own look; only the seam is closed */
body.ol-brandskin .elementor-location-footer{margin-top:0}

/* ---- responsive */
@media (max-width:1100px){
  .bs-usp ul{grid-template-columns:1fr 1fr}
  .bs-bento{grid-template-columns:repeat(2,1fr)}
  .bs-story-in{gap:36px}
}
@media (max-width:980px){
  .bs-wrap{padding:0 22px}
}
@media (max-width:900px){
  .bs-hero-in{min-height:0;padding-top:40px;padding-bottom:300px}
  .bs-hero-art{top:auto;bottom:-60px;right:-14vw;transform:none;width:92vw}
  .bs-usp ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .bs-usp li,.bs-usp a{font-size:15px}
  .bs-sec,.bs-shop{padding-top:64px}
  .bs-story{padding-top:72px}
  .bs-story-in{grid-template-columns:1fr}
  .bs-story-art{margin:0 auto;max-width:520px;width:100%}
  .bs-tested{margin-top:72px}
  .bs-tested-art{inset:auto 0 0 0;height:46%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);mask-image:linear-gradient(180deg,transparent 0%,#000 40%)}
  .bs-tested-copy{padding:64px 0 260px}
  .bs-rail{padding:0 22px 10px;scroll-padding:0 22px}
  .bs-arrows{display:none}
}
@media (max-width:560px){
  .bs-bento{grid-template-columns:1fr 1fr;gap:10px}
  .bs-t-big{grid-column:span 2;min-height:250px}
  .bs-tile{min-height:190px;padding:14px}
  .bs-tile-t{font-size:22px}
  .bs-tile:not(.bs-t-big) .bs-tile-go{display:none}
  .bs-tile-shot img{padding:30px 16px 50px}
  .bs-story-art{margin:0 -22px;width:auto}
  .bs-usp ul{grid-template-columns:1fr}
  .bs-ctas .bs-btn{flex:1 1 100%}
  .bs-stats div{padding-right:10px}
  .bs-stats div+div{padding-left:12px}
  .bs-band-in{padding-top:44px;padding-bottom:44px}
}
@media (prefers-reduced-motion:reduce){
  .bs-page *{transition:none!important}
  .bs-rail{scroll-behavior:auto}
}


/* ==========================================================================
   BRAND PALETTES
   --bs-y    the brand accent          --bs-on     ink on the accent
   --bs-dark the dark surface          --bs-ondark ink on the dark surface
   ========================================================================== */

body.ol-bs-lightforce{
  --bs-y:#FEBC11;
  --bs-yh:#FFD04D;
  --bs-bg:#0B0B0A;
  --bs-s1:#151514;
  --bs-s2:#1F1F1D;
  --bs-line:#2C2C29;
  --bs-ink:#F4F4F0;
  --bs-mute:#A6A69F;
  --bs-dark:#0B0B0A;
  --bs-on:#0B0B0A;
  --bs-ondark:#FEBC11;
  --bs-disp:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
}

/* Tough Dog: their signal blue on a warm near-black, logo yellow on the dark
   surfaces. White on the blue rather than black, which the blue cannot carry. */
body.ol-bs-tough-dog{
  --bs-y:#2F62B8;
  --bs-yh:#4479D2;
  --bs-bg:#0C0C0B;
  --bs-s1:#141413;
  --bs-s2:#1D1D1B;
  --bs-line:#2B2B28;
  --bs-ink:#F3F3EF;
  --bs-mute:#A4A49D;
  --bs-dark:#0A0A09;
  --bs-on:#FFFFFF;
  --bs-ondark:#FFC20E;
  --bs-disp:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
}