/* Roadworthy — the homepage's samsara.com look, for the shop and the Transport kit page
   (10 Oct 2026, John's picks: the wide heading font, open ruled rows, a dark band with a
   dimmed photo behind the headline, bracketed labels). The floating bar is site-bar.css.
   ⚠️ LOADED BY shop.html AND driver-kit.html ONLY, after their own stylesheets. shop.css is
   shared with the five product pages, and legal.css / guide.css with the guides and the legal
   pages, which must look exactly as they did; so nothing here goes into those files.
   ⚠️ No colour token is defined here. The tokens used are the ones shop.css and legal.css
   BOTH define, or carry a fallback, so a colour change still means the three files the
   roadworthy-web-design skill names, not a fourth. The photo dimming is a fixed rgba, as on
   the homepage, because it has to be the same in both themes. */

/* ---------- the heading font: the homepage's file and its size-matched stand-in ---------- */
@font-face{font-family:"Archivo Expanded";src:url(fonts/archivo-expanded-800.woff2) format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo Fallback";src:local("Arial Black"),local("Arial Bold"),local("Arial");size-adjust:113%;}
:root{--display:"Archivo Expanded","Archivo Fallback",var(--sans);--ease-out:cubic-bezier(.23,1,.32,1);}

/* Brackets as the homepage's labels have: drawn, with empty alt text so a screen reader does
   not read "left bracket". Not on phones, where two more characters can wrap a label. */
@media (min-width:641px){
  .eyebrow::before,.kicker::before{content:"[\00a0" / "";}
  .eyebrow::after,.kicker::after{content:"\00a0]" / "";}
}

/* ---------- the floating bar ---------- */
/* Since later on 10 Oct 2026 it is the homepage's own bar on every page: assets/site-bar.css. */

/* ---------- the dark band with a photo behind the headline ---------- */
/* Pulled up under the floating bar by the bar's own height (10 + 58), so the photo runs to the
   top of the screen as the homepage's hero does. */
.page-band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep);color:#fff;
  margin-top:-68px;padding:122px 0 70px;}
.page-band .band-media{position:absolute;inset:0;z-index:-2;}
.page-band .band-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;}
/* The dimming. Text over the photo must measure 4.5:1 against the BRIGHTEST pixel behind it
   (text made transparent, then the lightest pixel in its box). Lighten this and re-measure,
   never by eye. The figures are in the commit that added this file. */
.page-band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,23,40,.8);}
.band-in{max-width:var(--maxw,1080px);margin:0 auto;padding:0 20px;}
.page-band .crumbs{max-width:none;margin:0 0 22px;padding:0;font-size:13px;color:#cfe0ff;}
.page-band .crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.page-band .eyebrow,.page-band .kicker{display:block;color:var(--amber);margin:0;}
.page-band h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1.02;
  text-wrap:balance;color:#fff;font-size:clamp(27px,4.4vw,54px);max-width:21ch;margin:14px 0 18px;}
.page-band p:not(.crumbs){color:#cfe0ff;font-size:clamp(16px,1.6vw,18px);line-height:1.6;max-width:60ch;margin:0;}
@media (max-width:640px){
  .page-band{padding:100px 0 44px;}
  .page-band .crumbs{margin-bottom:16px;}
  .page-band h1{margin:10px 0 14px;}
}

/* =============================== shop.html only =============================== */
.shop-head{padding:0;}
/* Open rows in place of boxed cards: the picture keeps its rounded frame, a thin rule sits
   over the price. Every product, picture, price and link is as it was. */
.shop-grid{gap:52px 36px;padding:56px 0 10px;}
.shop-grid .card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;}
.shop-grid .card .thumb{border-radius:10px;}
.shop-grid .card .body{padding:18px 0 0;}
.shop-grid .card h3{font-size:19px;}
.shop-grid .card .foot{border-top-color:var(--line-2,var(--line));}
@media (hover:hover) and (pointer:fine){
  .shop-grid .card:hover{transform:none;box-shadow:none;}
  .shop-grid .card:hover .go{text-decoration:underline;}
}
@media (max-width:760px){ .shop-grid{gap:40px;padding-top:36px;} }

/* The filter: All · Operators · Drivers · Hobbies (John, 11 Oct 2026), run by assets/app.js.
   Hidden in the HTML until the script shows it, so without JavaScript every section shows.
   ⚠️ display:flex would override the hidden attribute, hence the [hidden] rule. The pressed
   button is the ink colour filled in, in both themes; 44px tall for a thumb. */
.shop-filter{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;}
.shop-filter[hidden]{display:none;}
.shop-filter button{min-height:44px;padding:0 18px;border:1px solid var(--line-2,var(--line));border-radius:99px;
  background:var(--surface);color:var(--ink);font:600 15px/1.2 var(--sans);cursor:pointer;
  transition:transform .16s var(--ease-out);}
.shop-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.shop-filter button:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){ .shop-filter button[aria-pressed="false"]:hover{border-color:var(--ink);} }
@media (max-width:400px){ .shop-filter{gap:6px;} .shop-filter button{padding:0 13px;} }

/* The three sections, John's own packs first. A heading in the wide font over a rule. */
.shop-sec{padding-top:46px;scroll-margin-top:80px;}
.sec-h{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:0;
  margin:0;padding-top:22px;border-top:2px solid var(--line-2,var(--line));}
.sec-note{margin:8px 0 0;color:var(--muted);font-size:15px;max-width:62ch;}
.sec-note a{text-decoration:underline;text-underline-offset:3px;}
.shop-sec .shop-grid{padding-top:30px;}
.shop-sec .shop-grid .card h3{margin-top:0;}

/* Drivers and Hobbies: the Transport kit page's ruled item rows, picture beside the words
   (the driver-kit.html block below; guide.css, which that page builds on, is not loaded here).
   The Amazon buttons are plain outlines, not amber: the packs keep the loudest billing
   (doctrine 16, see the comment in shop.html). */
.shop-kit .kit-group{font-size:18px;line-height:1.35;margin:34px 0 0;}
.shop-kit .kit-group a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
.shop-kit .kitgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;align-items:start;margin:16px 0 0;}
.shop-kit .kitcard{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);column-gap:20px;align-content:start;
  border-top:1px solid var(--line-2,var(--line));padding:18px 0 0;}
.shop-kit .kitcard > *{grid-column:2;}
.shop-kit .kitcard > figure{grid-column:1;grid-row:1 / span 6;margin:0;}
.shop-kit .kitcard:not(:has(> figure)) > *{grid-column:1 / -1;}
.shop-kit .kitcard img{display:block;width:100%;height:auto;border-radius:10px;}
.shop-kit .kit-vid video{border-radius:10px;}
.shop-kit figcaption{font-size:11.5px;line-height:1.4;color:var(--faint);margin-top:5px;}
.shop-kit .kitcard h3,.shop-kit .kitcard h4{font-size:17px;line-height:1.3;margin:0 0 6px;}
.shop-kit .kitcard p{margin:0 0 10px;font-size:15px;}
.shop-kit .kitcard p:last-child{margin-bottom:0;}
.shop-kit .kit-buy{display:inline-block;padding:11px 16px;border:1px solid var(--line-2,var(--line));border-radius:10px;
  background:var(--surface);color:var(--ink);font-weight:700;font-size:14.5px;line-height:1.4;text-wrap:balance;
  transition:transform .16s var(--ease-out);}
.shop-kit .kit-buy:active{transform:scale(.97);}
/* ⚠️ The generic `:root[data-theme="dark"] a` would otherwise turn the label amber. */
:root[data-theme="dark"] .shop-kit .kit-buy{color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .shop-kit .kit-buy:hover{border-color:var(--ink);} }
/* "Paid link" beside every Amazon link, as on driver-kit.html: plain text, never inside the link.
   --muted measures 4.5:1 or better in both themes on the page background. */
.shop-kit .paid{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:600;line-height:1.4;
  color:var(--muted);white-space:nowrap;vertical-align:middle;}
@media (max-width:860px){ .shop-kit .kitgrid{grid-template-columns:1fr;} }
@media (max-width:640px){
  .shop-kit .kitcard{display:block;}
  .shop-kit .kitcard > figure{margin:0 0 10px;}
}
/* The affiliate statement at the bottom, driver-kit.html's box (guide.css .answer) copied. */
.shop-aff{max-width:760px;margin:44px 0 70px;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--amber-2);border-radius:10px;padding:15px 18px;font-size:16px;line-height:1.55;}
.shop-aff strong{color:var(--navy-2);}
:root[data-theme="dark"] .shop-aff strong{color:var(--amber-ink);}

/* ============================ driver-kit.html only ============================ */
/* legal.css holds every page to a 760px column; this page now runs to the shop's width, with
   the reading text still held to a readable line. */
main.kit-main{max-width:none;margin:0;padding:0;}
.kit-body{max-width:var(--maxw,1080px);margin:0 auto;padding:44px 20px 70px;}
.kit-body > p,.kit-body .answer,.kit-body .disc{max-width:760px;}
.kit-body h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.3vw,27px);line-height:1.15;
  letter-spacing:-.005em;text-wrap:balance;margin:60px 0 10px;padding-top:28px;border-top:2px solid var(--line-2,var(--line));}
/* The section titles are links to the guides. Underlined in the wide font they read as a
   wall of rule, so the line shows on hover and focus instead; they keep the link colour. */
.kit-body h2 a{text-decoration:none;}
.kit-body h2 a:hover,.kit-body h2 a:focus-visible{text-decoration:underline;text-underline-offset:5px;}
/* Ruled rows of kit: a thin rule over each item instead of a box round it, the picture beside
   the words. Two across, as before, so the items without a picture still pair up together. */
.kit-body .kitgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;margin:24px 0 10px;}
.kit-body .kitcard{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);column-gap:20px;align-content:start;
  background:transparent;border:0;border-top:1px solid var(--line-2,var(--line));border-radius:0;padding:18px 0 0;}
.kit-body .kitcard > *{grid-column:2;}
.kit-body .kitcard > figure{grid-column:1;grid-row:1 / span 6;margin:0;}
.kit-body .kitcard:not(:has(> figure)) > *{grid-column:1 / -1;}
.kit-body .kitcard img{border:0;border-radius:10px;}
/* A short clip plays once over each picture (John, 10-11 Oct 2026): three Pexels clips, and a
   slow zoom over the picture itself for the rest (build-kit-clips.cjs). Started by assets/app.js
   exactly as the shop's pack videos are (shop.css holds their copy of these three rules). The
   picture keeps the space and stays as poster, fallback and alt text. */
.kit-body .kit-vid[data-pages]{position:relative;}
.kit-body .kit-vid[data-pages] video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  border-radius:10px;opacity:0;transition:opacity .35s var(--ease-out);}
.kit-body .kit-vid[data-pages] video.on{opacity:1;}
/* "Paid link" beside every Amazon link on this page (11 Oct 2026, John's pick: Amazon UK asks for
   a clear disclosure near each affiliate link; the full statement stays at the bottom). Plain
   text, never a link and never inside the button. --muted measures 4.5:1 or better in both themes
   on the page background; re-measure on the rendered page if either changes. */
.kit-body .paid{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:600;line-height:1.4;
  color:var(--muted);white-space:nowrap;vertical-align:middle;}
.kit-body .kitcard h3{font-size:17px;}
/* A long button label that has to wrap splits into two even lines, never a lone arrow.
   11px, not guide.css's 10px: the buttons measured 43px tall, a pixel under 44. */
.kit-body .kitcard .buy{text-wrap:balance;padding-top:11px;padding-bottom:11px;}
@media (max-width:860px){ .kit-body .kitgrid{grid-template-columns:1fr;} }
@media (max-width:640px){
  .kit-body .kitcard{display:block;}
  .kit-body .kitcard > figure{margin:0 0 10px;}
}
/* ⚠️ legal.css sets every <p> to --ink, which reached inside the email card's navy box and
   left its sentence dark blue on navy (measured below 2:1 in light). Scoped to this page; the
   guide pages that load the same card are untouched by this file. */
.kit-body .rw-card p{color:#fff;}
.kit-body .cta{border-radius:10px;padding:28px 30px;margin-top:56px;}
.kit-body .cta p{max-width:60ch;}
.kit-body .disc{background:transparent;border:0;border-top:1px solid var(--line-2,var(--line));border-radius:0;padding:14px 0 0;}
/* The affiliate statement is the last block on the page since 10 Oct 2026 (John's pick), so the
   first section title now opens the page body and needs no gap or rule above it. */
.kit-body > .answer:last-child{margin:28px 0 0;}
.kit-body > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
main.kit-main + footer{max-width:var(--maxw,1080px);}
@media (max-width:640px){
  .kit-body{padding-top:32px;}
  .kit-body h2{margin-top:44px;padding-top:22px;}
  .kit-body .cta{padding:22px 20px;}
}