/* ==========================================================================
   TOUGH DOG BRAND STOREFRONT  (/brand/tough-dog/)  v2
   Load after brand-skin.css. Everything is scoped to body.ol-bs-tough-dog,
   so Lightforce and the other brand pages are untouched.

   What changes against the shared skin, and why:
   1. Palette is the Tough Dog logo: yellow (#F4B50C) as the accent and on
      buttons, red (#ED000B) for the tagline, section rules, step numbers,
      the TD-R Pro tag and the closing band, black as the ground. The skin's
      blue read as a weaker second accent (3.5:1 on near-black) and is gone.
      Colour logo replaces the white one; the paw mark is an inline SVG
      symbol (#td-paw), used for the tagline, a hero watermark and the band.
   2. Hero uses a real workshop photograph (a Tough Dog coil-over and upper
      control arm on a vehicle), faded in from the right like the Lightforce
      hero, instead of a white studio vehicle in a circular mask.
   3. All other Tough Dog imagery is studio photography on white. It sits in
      framed light plates (as product cards do), never masked into a circle.
   4. New sections: Find your kit (vehicle first, D-03), How a kit comes
      together (the choices explainer, D-03), What to tell your fitment centre
      (no fitment guarantee online, D-02).
   ========================================================================== */

body.ol-bs-tough-dog{
  --bs-y:#F4B50C;          /* Tough Dog yellow (logo badge): buttons, accents */
  --bs-yh:#FFC93A;
  --bs-on:#0C0C0B;         /* ink on the yellow */
  --bs-ondark:#F4B50C;
  --td-hi:#F4B50C;         /* accent text + icons on dark (10:1) */
  --td-hi-line:rgba(244,181,12,.5);
  --td-red:#ED000B;        /* Tough Dog red (logo wordmark): fills, rules, paws */
  --td-red-dk:#C70009;     /* band ground, white ink 5.9:1 */
  --td-red-hi:#FF3B3B;     /* red as text on near-black (5.4:1) */
  --td-plate:#ECECEF;      /* light ground behind studio shots */
  --td-plate-2:#F6F6F8;
}

/* ---- the shared skin already keys hover borders and glows to yellow, which
   is now the Tough Dog accent too; only these need restating */
body.ol-bs-tough-dog .bs-usp .ol-i,
body.ol-bs-tough-dog .bs-tests .ol-i{color:var(--td-hi);stroke:var(--td-hi)}
body.ol-bs-tough-dog .bs-stats dt{color:var(--td-hi)}

/* ---- small shared pieces */
.td-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--td-red-hi);margin:0 0 18px}
.td-eyebrow .td-paw{color:var(--td-red)}
.td-pack{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--bs-disp);font-weight:800;font-size:28px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--td-red-hi)}
.td-pack .td-paw{color:var(--td-red);transform:rotate(-14deg)}
.td-sec-h:after{content:"";display:block;width:56px;height:4px;margin-top:14px;background:var(--td-red);border-radius:2px}
.td-sub{font-size:16.5px;line-height:1.6;color:#C9C9C3;max-width:620px;margin:-14px 0 32px}
.td-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:3px;background:var(--bs-s2);color:#D6D6D0;border:1px solid var(--bs-line)}
.td-tag-pro{background:var(--td-red);border-color:var(--td-red);color:#fff}
.td-tag-out{background:transparent;color:var(--bs-mute)}

/* ==========================================================================
   HERO: copy left, the workshop photo faded in from the right
   ========================================================================== */
body.ol-bs-tough-dog .bs-hero{background:radial-gradient(50% 80% at 82% 50%,rgba(244,181,12,.10),transparent 65%),var(--bs-bg)}
body.ol-bs-tough-dog .bs-logo img{height:76px}
.td-hero-paw{position:absolute;z-index:1;left:-80px;bottom:-110px;color:var(--td-red);opacity:.09;transform:rotate(-18deg);pointer-events:none}
body.ol-bs-tough-dog .bs-hero-art{top:0;bottom:0;right:0;transform:none;width:62%;aspect-ratio:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
body.ol-bs-tough-dog .bs-hero-art img{object-position:30% 45%}
body.ol-bs-tough-dog .bs-hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,11,.35),transparent 30%,transparent 70%,rgba(12,12,11,.55))}
body.ol-bs-tough-dog .bs-hero-in>*{max-width:540px}
body.ol-bs-tough-dog .bs-h1{font-size:clamp(54px,6.6vw,100px)}
.td-hero-chip{position:absolute;z-index:3;right:40px;bottom:28px;display:flex;align-items:center;gap:12px;max-width:340px;
  background:rgba(12,12,11,.86);border:1px solid var(--bs-line);border-radius:var(--bs-r);padding:12px 14px;color:var(--bs-ink);backdrop-filter:blur(6px)}
.td-hero-chip b{display:block;font-family:var(--bs-disp);font-weight:800;font-size:19px;line-height:1;text-transform:uppercase}
.td-hero-chip small{display:block;font-size:12.5px;line-height:1.4;color:var(--bs-mute);margin-top:4px}
.td-hero-chip svg{flex-shrink:0;stroke:var(--td-hi)}

/* ---- framed light plate for studio shots (story section) */
.td-plate{position:relative;display:block;border-radius:var(--bs-r);overflow:hidden;
  background:linear-gradient(180deg,var(--td-plate-2),var(--td-plate));border:1px solid #3A3A36;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.td-plate img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:6%;transition:transform .7s var(--ease)}
a.td-plate:hover img{transform:scale(1.03)}
.td-plate-lbl{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(12,12,11,.86);color:#fff;padding:7px 10px;border-radius:3px}
.td-plate-cap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;background:#121211;border-top:1px solid var(--bs-line);color:var(--bs-ink)}
.td-plate-cap b{display:block;font-family:var(--bs-disp);font-weight:800;font-size:24px;line-height:1;text-transform:uppercase}
.td-plate-cap small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-mute);margin-top:6px}
.td-plate-cap .td-from{font-weight:800;font-size:18px;white-space:nowrap}
.td-plate-cap .td-from span{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--bs-mute);text-transform:uppercase;text-align:right}

/* ==========================================================================
   SHOP BY TYPE: one feature tile + three, no orphan row
   ========================================================================== */
.td-bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,minmax(230px,auto));gap:14px}
.td-tile{position:relative;display:flex;flex-direction:column;border-radius:var(--bs-r);overflow:hidden;background:var(--bs-s1);border:1px solid var(--bs-line);color:var(--bs-ink);transition:border-color .2s}
.td-tile:hover{border-color:var(--td-hi-line)}
.td-tile-big{grid-row:span 2}
.td-tile-wide{grid-column:span 2}
.td-tile-shot{flex:1;display:grid;place-items:center;background:var(--ol-shot,var(--td-plate));min-height:150px;overflow:hidden}
.td-tile-shot img{width:100%;height:100%;max-height:260px;object-fit:contain;padding:22px;transition:transform .6s var(--ease)}
.td-tile-big .td-tile-shot img{max-height:none;object-fit:cover;padding:0}
.td-tile:hover .td-tile-shot img{transform:scale(1.04)}
.td-tile-b{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:16px 20px 18px;background:#121211;border-top:1px solid var(--bs-line)}
.td-tile-t{font-family:var(--bs-disp);font-weight:800;font-size:28px;line-height:.95;text-transform:uppercase}
.td-tile-big .td-tile-t{font-size:clamp(34px,3.2vw,46px)}
.td-tile-n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bs-mute);margin-bottom:8px}
.td-tile-d{display:block;font-size:14px;line-height:1.45;color:#C9C9C3;margin-top:8px;max-width:340px}
.td-tile-go{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-family:var(--bs-disp);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--td-hi)}
.td-tile-go svg{transition:transform .25s var(--ease)}
.td-tile:hover .td-tile-go svg{transform:translateX(4px)}

/* ==========================================================================
   FIND YOUR KIT: make tabs + kit cards (replaces the 31-card rail)
   ========================================================================== */
.td-makes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.td-make{font-family:var(--bs-disp);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase;line-height:1;
  padding:11px 16px;border-radius:var(--bs-r);background:var(--bs-s1);color:var(--bs-ink);border:1px solid var(--bs-line);cursor:pointer;transition:.2s}
.td-make em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--bs-mute);margin-left:6px}
.td-make:hover{border-color:var(--td-hi-line)}
.td-make[aria-selected="true"]{background:var(--bs-y);border-color:var(--bs-y);color:var(--bs-on)}
.td-make[aria-selected="true"] em{color:rgba(12,12,11,.7)}
.td-kits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.td-kits[hidden]{display:none}
.td-kit{display:flex;flex-direction:column;border-radius:var(--bs-r);overflow:hidden;background:var(--bs-s1);border:1px solid var(--bs-line);color:var(--bs-ink);transition:border-color .2s}
.td-kit:hover{border-color:var(--td-hi-line)}
.td-kit-shot{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--ol-shot,var(--td-plate))}
.td-kit-shot img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .5s var(--ease)}
.td-kit:hover .td-kit-shot img{transform:scale(1.04)}
.td-kit-shot .td-tag{position:absolute;left:10px;top:10px}
.td-kit-shot.td-noimg{background:repeating-linear-gradient(135deg,#1A1A18 0 12px,#161614 12px 24px)}
.td-kit-shot.td-noimg span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bs-mute);border:1px dashed #44443F;padding:7px 10px;border-radius:3px}
.td-kit-b{display:flex;flex-direction:column;gap:6px;padding:16px 16px 16px;flex:1}
.td-kit-make{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--td-hi)}
.td-kit-n{font-family:var(--bs-disp);font-weight:800;font-size:24px;line-height:.98;text-transform:uppercase}
.td-kit-meta{font-size:13px;color:var(--bs-mute);line-height:1.4}
.td-kit-f{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--bs-line)}
.td-kit-p{font-weight:800;font-size:18px;white-space:nowrap}
.td-kit-p small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bs-mute)}
.td-kit-go{font-family:var(--bs-disp);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--td-hi);white-space:nowrap}
.td-kits-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding:16px 18px;border:1px solid var(--bs-line);border-radius:var(--bs-r);background:var(--bs-s1);font-size:14.5px;color:#C9C9C3}
.td-kits-foot b{color:var(--bs-ink)}

/* ==========================================================================
   HOW A KIT COMES TOGETHER: the choices explainer
   ========================================================================== */
.td-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--bs-line);border-radius:var(--bs-r);overflow:hidden;background:var(--bs-s1)}
.td-step{display:flex;flex-direction:column;padding:26px 24px 24px;border-left:1px solid var(--bs-line)}
.td-step:first-child{border-left:0}
.td-step-no{font-family:var(--bs-disp);font-weight:800;font-size:56px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--td-red-hi);margin-bottom:18px}
.td-step h3{font-family:var(--bs-disp);font-weight:800;font-size:28px;line-height:.95;text-transform:uppercase;margin:0 0 12px;color:var(--bs-ink)}
.td-step p{font-size:14.5px;line-height:1.55;color:#C9C9C3;margin:0 0 16px}
.td-opts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.td-opts li{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:3px;border:1px solid var(--bs-line);background:var(--bs-s2);color:#E2E2DC}
.td-step a.td-step-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--bs-disp);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--td-hi)}
.td-step a.td-step-go:hover{color:#fff}

/* ==========================================================================
   STORY: framed plate instead of the masked circle
   ========================================================================== */
body.ol-bs-tough-dog .bs-story-art{margin-left:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
body.ol-bs-tough-dog .bs-story-art:before{display:none}
.td-quote{margin:0 0 28px;padding:0 0 0 18px;border-left:2px solid var(--td-red);font-family:var(--bs-disp);font-weight:700;font-size:24px;line-height:1.1;text-transform:uppercase;color:var(--bs-ink)}

/* ==========================================================================
   BEFORE YOU BOOK: replaces the image-masked "tested" band
   ========================================================================== */
.td-brief{margin-top:110px;border-top:1px solid var(--bs-line);border-bottom:1px solid var(--bs-line);background:#080807}
.td-brief-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;padding-top:88px;padding-bottom:88px}
.td-brief-in p{font-size:16.5px;line-height:1.65;color:#C9C9C3;margin:22px 0 0;max-width:520px}
.td-brief-in .td-eyebrow{color:var(--td-red-hi);margin:0 0 18px;font-size:11.5px;line-height:1.2}
.td-list{list-style:none;margin:0;padding:0;border:1px solid var(--bs-line);border-radius:var(--bs-r);background:var(--bs-s1)}
.td-list li{display:grid;grid-template-columns:34px 1fr;gap:6px 14px;padding:18px 20px;border-top:1px solid var(--bs-line)}
.td-list li:first-child{border-top:0}
.td-list svg{grid-row:span 2;margin-top:2px;stroke:var(--td-hi)}
.td-list b{font-family:var(--bs-disp);font-weight:800;font-size:21px;line-height:1;text-transform:uppercase;color:var(--bs-ink)}
.td-list span{font-size:14px;line-height:1.5;color:var(--bs-mute)}

/* ==========================================================================
   BAND: Tough Dog red with a paw trail, the tagline as the headline
   ========================================================================== */
body.ol-bs-tough-dog .bs-band{position:relative;overflow:hidden;background:var(--td-red-dk)}
body.ol-bs-tough-dog .bs-band-in{position:relative;z-index:1}
body.ol-bs-tough-dog .bs-page .bs-band .bs-h2{color:#fff;font-size:clamp(44px,4.6vw,68px)}
body.ol-bs-tough-dog .bs-band p{color:rgba(255,255,255,.9)}
.td-band-kicker{margin:0 0 6px!important;font-family:var(--mono);font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;color:#FFE08A!important}
.td-trail{position:absolute;inset:0;pointer-events:none}
.td-trail-paw{position:absolute;color:#000;opacity:.13}
.td-trail-paw:nth-child(1){left:44%;top:66%;transform:rotate(78deg)}
.td-trail-paw:nth-child(2){left:50%;top:22%;transform:rotate(70deg)}
.td-trail-paw:nth-child(3){left:57%;top:60%;transform:rotate(82deg)}
.td-trail-paw:nth-child(4){left:63%;top:16%;transform:rotate(74deg)}
.td-trail-paw:nth-child(5){left:70%;top:58%;transform:rotate(80deg)}
.td-trail-paw:nth-child(6){left:77%;top:14%;transform:rotate(72deg)}
.td-trail-paw:nth-child(7){left:84%;top:56%;transform:rotate(78deg)}
body.ol-bs-tough-dog .bs-band .bs-btn-dark{background:var(--bs-y);border-color:var(--bs-y);color:var(--bs-on)}
body.ol-bs-tough-dog .bs-band .bs-btn-dark:hover{background:var(--bs-yh);border-color:var(--bs-yh);color:var(--bs-on)}
body.ol-bs-tough-dog .bs-band .bs-btn-dline{border-color:rgba(255,255,255,.8);color:#fff}
body.ol-bs-tough-dog .bs-band .bs-btn-dline:hover{background:#fff;border-color:#fff;color:var(--td-red-dk)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .td-kits{grid-template-columns:repeat(3,minmax(0,1fr))}
  .td-steps{grid-template-columns:1fr 1fr}
  .td-step:nth-child(3){border-left:0}
  .td-step:nth-child(n+3){border-top:1px solid var(--bs-line)}
}
@media (max-width:900px){
  body.ol-bs-tough-dog .bs-hero-art{top:auto;bottom:0;left:0;right:0;width:auto;height:300px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%);mask-image:linear-gradient(180deg,transparent 0%,#000 40%)}
  .td-hero-chip{display:none}
  .td-hero-paw{display:none}
  body.ol-bs-tough-dog .bs-logo img{height:52px}
  .td-trail-paw{opacity:.09}
  .td-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .td-tile-big{grid-column:span 2;grid-row:auto}
  .td-tile-big .td-tile-shot{aspect-ratio:16/9}
  .td-kits{grid-template-columns:1fr 1fr}
  .td-makes{flex-wrap:nowrap;overflow-x:auto;margin-right:-22px;padding-right:22px;scrollbar-width:none}
  .td-makes::-webkit-scrollbar{display:none}
  .td-make{white-space:nowrap}
  .td-brief{margin-top:72px}
  .td-brief-in{grid-template-columns:1fr;gap:30px;padding-top:64px;padding-bottom:64px}
}
@media (max-width:560px){
  .td-bento{grid-template-columns:1fr}
  .td-tile-big,.td-tile-wide{grid-column:auto}
  .td-tile-t{font-size:24px}
  .td-kits{grid-template-columns:1fr 1fr;gap:10px}
  .td-kit-n{font-size:19px}
  .td-kit-b{padding:12px}
  .td-kit-f{flex-direction:column;align-items:flex-start;gap:4px}
  .td-steps{grid-template-columns:1fr}
  .td-step{border-left:0!important;border-top:1px solid var(--bs-line)}
  .td-step:first-child{border-top:0}
  .td-plate-cap{flex-direction:column;align-items:flex-start}
  .td-plate-cap .td-from span{text-align:left}
  body.ol-bs-tough-dog .bs-hero-art{height:260px}
}
@media (prefers-reduced-motion:reduce){
  .td-tile-shot img,.td-kit-shot img,.td-plate img{transition:none}
}