/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SHOP LANDING — /shop/, from ~/Downloads/shop-landing-mockup.html, 22 Sep 2026.
   Scoped `.pt-sl`. The PRODUCT CARD is the shop grid's own (`.sg-card` and friends) and is not
   restyled here — only the rail around it is new. A second card is a second thing to keep in step.
   Full-width the same way the grid does it: `.site-content` is display:flex, so the flex basis is what
   actually settles the width.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.pt-sl{flex:0 0 100vw;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:clip}
.pt-sl{background:var(--pt-surface-dim);color:var(--pt-ink);font-size:15px;line-height:1.5}
.pt-sl *{box-sizing:border-box}
.pt-sl a{color:inherit;text-decoration:none}
.pt-sl h1,.pt-sl h2,.pt-sl h3{text-transform:none}
.pt-sl .display{text-transform:uppercase;font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0}
.pt-sl .wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.pt-sl .sl-sec{padding:80px 0}
.pt-sl .sl-sec.tight{padding:56px 0}
.pt-sl .white{background:var(--pt-surface)}
.pt-sl .hair{border-top:1px solid var(--pt-border)}
.pt-sl .idx{font-family:var(--pt-mono);font-size:12.5px;color:var(--pt-ink-3)}
.pt-sl .dk .idx{color:var(--pt-on-dark-mute)}
.pt-sl .eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--pt-ink-2);margin:0 0 12px}
.pt-sl .eyebrow::before{content:"";width:18px;height:2px;background:var(--pt-brand)}
.pt-sl .dk .eyebrow{color:var(--pt-on-dark-mute)}
.pt-sl .dk,.pt-sl .dk h1,.pt-sl .dk h2,.pt-sl .dk h3{color:var(--pt-on-dark)}
.pt-sl .dk p{color:var(--pt-on-dark-mute)}

.pt-sl .sl-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;font:inherit;font-size:15px;font-weight:600;border:1px solid var(--pt-ink);background:var(--pt-ink);color:#fff;white-space:nowrap;cursor:pointer;border-radius:0}
.pt-sl .sl-btn.bone{background:var(--pt-bone);border-color:var(--pt-bone);color:var(--pt-ink)}
.pt-sl .sl-btn.bone:hover{background:var(--pt-bone-2);color:var(--pt-ink)}
.pt-sl .sl-btn.outline{background:transparent;color:var(--pt-ink)}
.pt-sl .sl-btn.outline:hover{background:var(--pt-fill-control)}
.pt-sl .sl-tlink{font-size:15px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.pt-sl .sl-h2{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0;color:var(--pt-ink)}
.pt-sl .sl-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--pt-ink)}
.pt-sl .sl-sec-head p{margin:6px 0 0;color:var(--pt-ink-2)}
.pt-sl .sl-sec-head .r{display:flex;align-items:center;gap:16px}
.pt-sl .sl-arrows{display:flex;gap:6px}
.pt-sl .sl-arrows button{width:36px;height:36px;border:1px solid var(--pt-border-strong);background:var(--pt-surface);color:var(--pt-ink);cursor:pointer;font-size:15px;border-radius:0;padding:0}
.pt-sl .sl-arrows button:hover{border-color:var(--pt-ink)}

/* ── B1. hero ── */
.pt-sl .sl-hero{background:var(--pt-graphite)}
.pt-sl .sl-hero .wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;padding-top:64px;padding-bottom:64px;align-items:center}
.pt-sl .sl-top{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--pt-dark-line);margin:0 0 48px}
.pt-sl .sl-hero .display{font-size:80px;margin:0 0 20px}
.pt-sl .sl-hero .lede{font-size:18px;color:var(--pt-on-dark-mute);max-width:520px;margin:0 0 28px}
.pt-sl .sl-search{display:flex;max-width:560px;margin:0}
.pt-sl .sl-search label{flex:1;display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;background:rgba(243,241,235,.06);border:1px solid rgba(243,241,235,.3);border-right:0;min-width:0}
.pt-sl .sl-search svg{width:18px;height:18px;fill:none;stroke:var(--pt-on-dark-mute);stroke-width:1.7;flex:none}
.pt-sl .sl-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--pt-on-dark);font:inherit;font-size:15px;height:auto;min-height:0;padding:0;margin:0}
.pt-sl .sl-search input::placeholder{color:var(--pt-on-dark-mute)}
.pt-sl .sl-search .sl-btn{height:54px}
.pt-sl .sl-popular{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;font-size:13px;color:var(--pt-on-dark-mute)}
.pt-sl .sl-popular a{padding:5px 10px;border:1px solid var(--pt-dark-line);color:var(--pt-on-dark)}
.pt-sl .sl-popular a:hover{border-color:var(--pt-on-dark-mute)}
.pt-sl .sl-depts{border-top:1px solid var(--pt-on-dark)}
.pt-sl .sl-depts .h{display:flex;justify-content:space-between;padding:14px 0 6px;font-size:13px;color:var(--pt-on-dark-mute)}
.pt-sl .sl-dept{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:10px;padding:14px 0;border-top:1px solid var(--pt-dark-line)}
.pt-sl .sl-dept b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--pt-on-dark)}
.pt-sl .sl-dept .n{font-family:var(--pt-mono);font-size:13px;color:var(--pt-on-dark-mute)}
.pt-sl .sl-dept:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ── B2. assurance ── */
.pt-sl .sl-assure{background:var(--pt-surface);border-bottom:1px solid var(--pt-border)}
.pt-sl .sl-assure .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.pt-sl .as{display:flex;gap:12px;align-items:flex-start;padding:20px 18px;border-left:1px solid var(--pt-border)}
.pt-sl .as:first-child{border-left:0;padding-left:0}
.pt-sl .as svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--pt-ink);stroke-width:1.5}
.pt-sl .as b{display:block;font-size:14px}
.pt-sl .as span{font-size:13px;color:var(--pt-ink-3)}

/* ── B3. bento ── */
.pt-sl .sl-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:260px 260px;gap:16px}
.pt-sl .sl-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:var(--pt-on-dark);overflow:hidden}
.pt-sl .sl-tile .ph{position:absolute;inset:0;background:var(--pt-graphite);background-size:cover;background-position:center;transition:transform .3s ease}
.pt-sl .sl-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,26,0) 35%,rgba(26,26,26,.85));z-index:1}
.pt-sl .sl-tile > *:not(.ph){position:relative;z-index:2}
.pt-sl .sl-tile:hover .ph{transform:scale(1.03)}
.pt-sl .sl-tile.a{grid-column:span 2;grid-row:span 2}
.pt-sl .sl-tile.b{grid-column:span 2}
/* Named, not inherited: the theme colours h3 and an inherited colour loses to it. */
.pt-sl .sl-tile h3{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:2px 0 6px;color:var(--pt-on-dark)}
.pt-sl .sl-tile.a h3{font-size:44px}
.pt-sl .sl-tile .n{font-family:var(--pt-mono);font-size:12.5px;color:var(--pt-on-dark-mute)}

/* ── rails. The CARD comes from the shop grid; only the track is new. ── */
.pt-sl .sl-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4.5*16px)/4.5);   /* 4.5 — the half card is what says 'there is more' */gap:16px;overflow-x:auto;/* FREE SCROLL, no snap (Leon, 22 Sep). `scroll-snap-type` yanks the rail to the nearest card the
   moment you let go, which fights a flick and makes a half-scroll impossible. A rail is a shelf, not a
   slideshow: it should stop where it is put. */
    scrollbar-width:none;padding-bottom:4px}
.pt-sl .sl-rail::-webkit-scrollbar{display:none}

/* ── B5. tools feature ── */
.pt-sl .sl-feature{display:grid;grid-template-columns:1fr 1fr;background:var(--pt-graphite);min-height:480px}
.pt-sl .sl-feature .copy{padding:72px 64px;display:flex;flex-direction:column;justify-content:center}
.pt-sl .sl-feature .display{font-size:64px;margin:0 0 20px}
.pt-sl .sl-feature p{font-size:17px;max-width:460px;margin:0 0 28px}
.pt-sl .sl-feature .ph{background:linear-gradient(135deg,#2E2B27,#47413A);background-size:cover;background-position:center}
.pt-sl .sl-feature .sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.pt-sl .sl-feature .sub a{font-size:13px;padding:6px 12px;border:1px solid var(--pt-dark-line);color:var(--pt-on-dark)}
.pt-sl .sl-feature .sub a .pt-mono{color:var(--pt-on-dark-mute);margin-left:4px;font-size:12px}

/* ── B7. trailers ── */
.pt-sl .sl-trailers{position:relative;min-height:520px;display:flex;align-items:flex-end}
.pt-sl .sl-trailers .ph{position:absolute;inset:0;background:linear-gradient(135deg,#2E2B27,#47413A);background-size:cover;background-position:center}
.pt-sl .sl-trailers::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,26,.88) 0%,rgba(26,26,26,.55) 45%,rgba(26,26,26,.1) 100%);z-index:1}
.pt-sl .sl-trailers .wrap{position:relative;z-index:2;width:100%;padding-top:72px;padding-bottom:72px}
.pt-sl .sl-trailers .display{font-size:72px;margin:0 0 16px;max-width:760px}
.pt-sl .sl-trailers p{font-size:18px;max-width:520px;margin:0 0 28px}
.pt-sl .sl-trailers .spec{display:flex;gap:28px;margin-top:36px;padding-top:18px;border-top:1px solid rgba(243,241,235,.2);max-width:620px}
.pt-sl .sl-trailers .spec b{display:block;font-size:20px;font-weight:600;color:var(--pt-on-dark)}
.pt-sl .sl-trailers .spec span{font-size:13px;color:var(--pt-on-dark-mute)}

/* ── B9. merch ── */
.pt-sl .sl-merch{background:var(--pt-oxblood)}
.pt-sl .sl-merch .wrap{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.pt-sl .sl-merch .display{font-size:64px;margin:0 0 18px}
.pt-sl .sl-merch p{font-size:17px;margin:0 0 28px;max-width:360px}
.pt-sl .sl-merch .sl-rail{grid-auto-columns:calc((100% - 2.5*16px)/2.5);min-width:0}
.pt-sl .sl-merch .sg-card{border-color:transparent}

/* ── B10. brands. The brands archive tile, same geometry. ── */
.pt-sl .sl-brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pt-sl .bt{background:var(--pt-surface);border:1px solid var(--pt-border);display:flex;flex-direction:column}
.pt-sl .bt:hover{border-color:var(--pt-ink)}
.pt-sl .bt .logo-area{aspect-ratio:4/3;background:var(--pt-fill-control);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pt-sl .bt .logo-area img{max-width:62%;max-height:46%;width:auto;height:auto;object-fit:contain}
.pt-sl .bt .mono-mark{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--pt-bone);color:var(--pt-ink);font-weight:900;font-size:30px;letter-spacing:-.04em}
.pt-sl .bt .meta{padding:10px 12px 12px;border-top:1px solid var(--pt-border);display:block}
.pt-sl .bt .meta b{display:block;font-size:14px;font-weight:600}
.pt-sl .bt .meta .pt-mono{font-size:12px;color:var(--pt-ink-3)}

/* ── B12. cross-link ── */
.pt-sl .sl-cross{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:28px 32px;background:var(--pt-surface);border:1px solid var(--pt-border)}
.pt-sl .sl-cross .mk{font-family:var(--pt-mono);font-size:12.5px;color:var(--pt-ink-3);border:1px solid var(--pt-border-strong);padding:6px 10px}
.pt-sl .sl-cross b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.pt-sl .sl-cross span{color:var(--pt-ink-2)}

/* ═══════════════ TABLET ═══════════════ */
@media (max-width:1100px){
  .pt-sl .sl-hero .wrap{grid-template-columns:1fr;gap:40px}
  .pt-sl .sl-hero .display{font-size:60px}
  .pt-sl .sl-assure .wrap{grid-template-columns:1fr 1fr}
  .pt-sl .as:nth-child(3){border-left:0;padding-left:0}
  .pt-sl .sl-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .pt-sl .sl-tile{min-height:220px}
  .pt-sl .sl-tile.a{grid-column:span 2;grid-row:auto;min-height:340px}
  .pt-sl .sl-rail{grid-auto-columns:calc((100% - 2*16px)/3)}
  .pt-sl .sl-feature{grid-template-columns:1fr}
  .pt-sl .sl-feature .ph{order:-1;min-height:300px}
  .pt-sl .sl-brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-sl .sl-merch .wrap{grid-template-columns:1fr}
  .pt-sl .sl-cross{grid-template-columns:1fr auto}
  .pt-sl .sl-cross .mk{display:none}
}

/* ═══════════════ PHONE ═══════════════ */
@media (max-width:640px){
  .pt-sl .wrap{padding:0 16px}
  .pt-sl .sl-sec{padding:48px 0}
  .pt-sl .sl-sec.tight{padding:36px 0}
  .pt-sl .sl-h2{font-size:26px}
  .pt-sl .sl-hero .wrap{padding-top:28px;padding-bottom:36px;gap:32px}
  .pt-sl .sl-top{margin-bottom:28px}
  .pt-sl .sl-top-r{display:none}
  .pt-sl .sl-hero .display{font-size:46px}
  .pt-sl .sl-hero .lede{font-size:16px}
  /* The input needs an explicit height once the row stacks, or it collapses to nothing. */
  .pt-sl .sl-search{flex-direction:column;gap:8px}
  .pt-sl .sl-search label{flex:none;height:54px;border-right:1px solid rgba(243,241,235,.3)}
  .pt-sl .sl-search .sl-btn{width:100%}
  .pt-sl .sl-popular{flex-wrap:nowrap;overflow-x:auto;margin:16px -16px 0;padding:0 16px;scrollbar-width:none}
  .pt-sl .sl-popular a,.pt-sl .sl-popular span{flex:none}
  .pt-sl .sl-dept b{font-size:19px}
  .pt-sl .sl-assure .wrap{display:flex;overflow-x:auto;padding:0;scrollbar-width:none}
  .pt-sl .as{flex:none;width:230px;padding:16px 18px;border-left:1px solid var(--pt-border)}
  .pt-sl .as:first-child{border-left:0;padding-left:16px}
  .pt-sl .sl-bento{gap:10px}
  .pt-sl .sl-tile{min-height:170px;padding:14px}
  .pt-sl .sl-tile.a{min-height:300px;padding:20px}
  .pt-sl .sl-tile.b{min-height:190px}
  .pt-sl .sl-tile h3{font-size:20px}
  .pt-sl .sl-tile.a h3{font-size:34px}
  .pt-sl .sl-sec-head{flex-wrap:wrap}
  .pt-sl .sl-arrows{display:none}
  .pt-sl .sl-rail,.pt-sl .sl-merch .sl-rail{grid-auto-columns:72%;gap:10px;margin-right:-16px;padding-right:16px}
  .pt-sl .sl-feature .copy{padding:40px 16px 48px}
  .pt-sl .sl-feature .display{font-size:40px}
  .pt-sl .sl-feature .ph{min-height:220px}
  .pt-sl .sl-trailers{min-height:0}
  .pt-sl .sl-trailers::before{background:linear-gradient(180deg,rgba(26,26,26,.35) 0%,rgba(26,26,26,.9) 60%)}
  .pt-sl .sl-trailers .wrap{padding-top:180px;padding-bottom:40px}
  .pt-sl .sl-trailers .display{font-size:40px}
  .pt-sl .sl-btn.full-m{width:100%}
  .pt-sl .sl-brands{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pt-sl .sl-brands .bt:nth-child(n+5){display:none}
  .pt-sl .sl-merch .wrap{padding-top:44px;padding-bottom:48px;gap:28px}
  .pt-sl .sl-merch .display{font-size:44px}
  .pt-sl .sl-cross{grid-template-columns:1fr;padding:22px 18px;gap:14px}
  .pt-sl .sl-cross .sl-btn{width:100%}
}


/* ─────────────────────────── CARDS ON A DARK BAND ───────────────────────────
   🔴 THE MERCH CARDS WERE UNREADABLE, and it was the band's own rules doing it. `.dk p` and `.dk a`
   set a light colour for the BAND's text — and the product cards sitting on that band are white boxes,
   so their brand, title, price and stock lines all inherited bone-on-white.
   Third time today: the homepage tribe cards and the receipt on the graphite band needed the same
   naming. A `.dk` band colours everything inside it, including the things that are not dark. */
.pt-sl .dk .sg-card,
.pt-sl .dk .sg-card p,
.pt-sl .dk .sg-card a,
.pt-sl .dk .sg-card .sg-title{color:var(--pt-ink)}
.pt-sl .dk .sg-card .sg-brand,
.pt-sl .dk .sg-card .sg-stock{color:var(--pt-ink-3)}
.pt-sl .dk .sg-card .now{color:var(--pt-ink)}
.pt-sl .dk .sg-card .was{color:var(--pt-ink-3)}
.pt-sl .dk .sg-card .sale{color:var(--pt-brand)}
.pt-sl .dk .sg-add{color:var(--pt-ink);border-color:var(--pt-ink)}
.pt-sl .dk .sg-add:hover{background:var(--pt-fill-control);color:var(--pt-ink)}

/* Tablet and phone keep their own counts. */
@media (max-width:1100px){
  .pt-sl .sl-rail{grid-auto-columns:calc((100% - 2.5*16px)/2.5)}
  .pt-sl .sl-merch .sl-rail{grid-auto-columns:calc((100% - 2*16px)/2)}
}

/* ─────────────────────────── ONE RHYTHM FOR EVERY RAIL ───────────────────────────
   Leon, 23 Sep: the rails should be the same height with the same gaps. They were not, two ways.

   🔴 1. THE MERCH RAIL WAS RAGGED BY 20px. Last night I gave it `align-items:start` to kill a huge
      gap, which fixed the gap by letting every card size to its own content — so a two-line title made
      a taller card than a one-line title. Trading one inconsistency for another.

   🔴 2. THE GAPS DIFFERED BETWEEN RAILS: 12px title→price and 37px price→button in the main rails,
      18px and 12px in merch. Two rails on one page with two rhythms.

   The fix is to move the auto margin from the PRICE ROW to the BUTTON. With it on the price, all the
   slack in a stretched card collects above the price and shoves the middle of the card apart — which
   is what last night's gap actually was. On the button, the slack collects in ONE place at the bottom,
   the text block keeps its natural spacing, and every button in a rail lines up with its neighbours.
   Cards stretch to equal height again, and the reserved title and stock heights come back because
   that is what makes the price sit on the same line across a row. */
.pt-sl .sl-rail .sg-price{margin-top:0;padding-top:10px}
.pt-sl .sl-rail .sg-add{margin-top:auto}
/* A quick-choice card wraps its button, so the AUTO MARGIN has to move to the WRAPPER. Left on the
   button it collects the slack INSIDE the wrapper instead of above it, and the rail goes ragged again —
   which is exactly the 20px the merch rail was out by on 22 Sep. */
.pt-sl .sl-rail .sg-choose{margin-top:auto}
.pt-sl .sl-rail .sg-choose .sg-add{margin-top:0}
/* The reserved lines are what align the text across a row — a one-line title still holds the second. */
.pt-sl .sl-rail .sg-title{min-height:39px;margin-bottom:10px}
.pt-sl .sl-rail .sg-brand{min-height:18px}
.pt-sl .sl-rail .sg-stock{min-height:19px;margin:6px 0 0}