/* =============================================================================
   68 RESERVE / THE GEAR  (shop.css)
   -----------------------------------------------------------------------------
   One stylesheet for the shop floor on the home page (#merch), the product pages
   (shop/<slug>.html) and the overlays every page shares (quick add, added panel,
   bag drawer + checkout, search).

   Reference: Zara. White ground, black type, Inter 300 set tiny and uppercase,
   no card borders, no shadows, no coloured buttons, big 4:5 photographs on one
   light studio plate, 1px black lines only where something can be pressed.

   Prefixes: .sf- shop floor + cards   .pdp- product page   .r68h- light header
             .r68m- light menu         .r68-  overlays + page chrome
   Nothing here styles a bare element, so it is safe on the dark home page.
   ============================================================================= */

:root{
  --sf-ink:#0a0a0a;
  --sf-paper:#ffffff;
  --sf-plate:#f2f2f0;          /* the studio ground every photograph is matched to */
  --sf-hair:#e4e4e1;           /* quiet dividers */
  --sf-mute:#6b6b6b;           /* secondary text, 5.3:1 on white */
  --sf-err:#a4262c;
  --sf-font:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sf-display:'Anton','Impact','Haettenschweiler',sans-serif;
  --sf-ease:cubic-bezier(.2,.7,.2,1);
  --r68-head:80px;             /* fixed header height (both themes) */
}
@media (min-width:768px){ :root{ --r68-head:112px; } }

.sf, .sf *, .r68-ov, .r68-ov *, .r68-page, .r68-page *{ box-sizing:border-box; }

/* shared type */
.sf, .r68-ov, .r68-page{
  font-family:var(--sf-font); font-weight:300; color:var(--sf-ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.sf-t, .sf-name, .sf-price, .sf-oos, .r68-t{
  font-size:11px; line-height:1.45; letter-spacing:.04em; text-transform:uppercase; font-weight:300;
}
.r68-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* buttons + links inside the shop never inherit the page's look. :where() keeps these at
   zero specificity, so every component rule below wins without !important. */
:where(.sf, .r68-ov, .r68-page) :where(button){
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; padding:0; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; border-radius:0;
}
:where(.sf, .r68-ov, .r68-page) :where(a){ color:inherit; text-decoration:none; }
:where(.sf, .r68-ov, .r68-page) :where(ul, ol){ list-style:none; margin:0; padding:0; }
:where(.sf, .r68-ov, .r68-page) :where(h1, h2, h3, p, figure){ margin:0; font-size:inherit; font-weight:inherit; }
.sf :focus-visible, .r68-ov :focus-visible, .r68-page :focus-visible{ outline:1px solid var(--sf-ink); outline-offset:3px; }
.sf [hidden], .r68-ov [hidden], .r68-page [hidden]{ display:none !important; }

/* the outlined Zara button, and its one black sibling for the last step of the bag */
.r68-btn, button.r68-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:44px; padding:0 18px; border:1px solid var(--sf-ink); background:var(--sf-paper);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:400; color:var(--sf-ink);
  transition:background-color .2s ease, color .2s ease;
}
.r68-btn:hover, button.r68-btn:hover{ background:#f3f3f1; }
.r68-btn[disabled], .r68-btn[aria-disabled="true"], button.r68-btn[disabled]:hover{ color:#9a9a9a; border-color:#c9c9c6; cursor:default; background:var(--sf-paper); }
.r68-btn.r68-btn--solid{ background:var(--sf-ink); color:var(--sf-paper); }
.r68-btn.r68-btn--solid:hover{ background:#2a2a2a; }
.r68-btn.r68-btn--solid[disabled]{ background:#5a5a5a; color:#e6e6e6; border-color:#5a5a5a; }
.r68-link{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* =============================================================================
   THE SHOP FLOOR  (home page #merch)
   A white band, full bleed inside the dark page. Phones/tablets: a header block
   (title + view switch, then the numbered categories). From 1280px: Zara's left
   rail, sticky under the nav, with the grid beside it. Capped at 1920px.
   ============================================================================= */
.sf{ background:var(--sf-paper); padding:64px 0 88px; overflow-x:clip; scroll-margin-top:var(--r68-head); }
@media (min-width:1024px){ .sf{ padding:104px 0 136px; } }
.sf-wrap{ max-width:1920px; margin-inline:auto; padding-inline:16px; }
@media (min-width:640px){ .sf-wrap{ padding-inline:24px; } }
@media (min-width:1024px){ .sf-wrap{ padding-inline:40px; } }

.sf-rail{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title view" "note note" "cats cats"; align-items:baseline; column-gap:16px;
}
.sf-title{ grid-area:title; font-size:11px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; font-weight:400; white-space:nowrap; }
.sf-title sup{ font-size:.62em; vertical-align:super; line-height:0; margin-left:1px; }
.sf-title .sf-slash{ color:var(--sf-mute); margin:0 .35em; font-weight:300; }
.sf-ltd-note{ grid-area:note; margin-top:6px; font-size:10px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.sf-cats{ grid-area:cats; margin-top:22px; }
.sf-cats ol{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.sf-view{ grid-area:view; display:flex; align-items:center; gap:2px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.sf-view-l{ margin-right:6px; color:var(--sf-mute); }

/* |01| VIEW ALL 16  (Zara's numbered category list) */
.sf-cat{ display:inline-flex; align-items:baseline; padding:5px 0; font-size:12px; letter-spacing:.03em; text-transform:uppercase; line-height:1.3; white-space:nowrap; color:var(--sf-ink); }
.sf-cat-n{ display:inline-flex; align-items:baseline; margin-right:8px; font-size:12px; letter-spacing:.02em; }
.sf-cat-n .sf-bar{ display:inline-block; width:1px; height:.86em; background:currentColor; transform:translateY(.08em); }
.sf-cat-n .sf-bar:first-child{ width:2px; margin-right:3px; }
.sf-cat-n .sf-bar:last-child{ margin-left:3px; }
.sf-cat-c{ font-size:9px; letter-spacing:.04em; margin-left:4px; color:var(--sf-mute); position:relative; top:-.45em; }
.sf-cat:hover .sf-cat-l{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.sf-cat[aria-pressed="true"]{ font-weight:600; }
.sf-cat[aria-pressed="true"] .sf-cat-n{ font-weight:600; }

.sf-z{ min-width:26px; height:26px; display:inline-grid; place-items:center; font-size:11px; color:var(--sf-mute); }
.sf-z:hover{ color:var(--sf-ink); }
.sf-z[aria-pressed="true"]{ color:var(--sf-ink); font-weight:600; }
.sf-z[data-zoom="3"]{ display:none; }
@media (min-width:640px){ .sf-z[data-zoom="3"]{ display:inline-grid; } }

.sf-main{ margin-top:32px; min-width:0; }
.sf-empty{ padding:80px 0; text-align:center; color:var(--sf-mute); }

@media (min-width:1280px){
  .sf-wrap{ display:grid; grid-template-columns:208px minmax(0,1fr); column-gap:56px; align-items:start; }
  .sf-rail{
    position:sticky; top:calc(var(--r68-head) + 40px);
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .sf-title{ white-space:normal; }
  .sf-title .sf-slash{ display:none; }
  .sf-title .sf-sub{ display:block; }
  .sf-cats{ margin-top:44px; }
  .sf-cats ol{ display:block; }
  .sf-cats li + li{ margin-top:4px; }
  .sf-view{ margin-top:44px; }
  .sf-main{ margin-top:0; }
}

/* --------------------------------------------------------------------- grid */
.sf-grid{
  --sf-cols:2; --sf-gx:8px; --sf-gy:36px;
  display:grid; grid-template-columns:repeat(var(--sf-cols), minmax(0,1fr));
  column-gap:var(--sf-gx); row-gap:var(--sf-gy);
}
.sf-grid[data-zoom="1"]{ --sf-cols:1; --sf-gy:44px; }
@media (min-width:640px){
  .sf-grid{ --sf-cols:3; --sf-gx:16px; --sf-gy:48px; }
  .sf-grid[data-zoom="1"]{ --sf-cols:2; }
  .sf-grid[data-zoom="3"]{ --sf-cols:4; }
}
@media (min-width:1024px){
  .sf-grid{ --sf-cols:4; --sf-gx:24px; --sf-gy:56px; }
  .sf-grid[data-zoom="1"]{ --sf-cols:2; --sf-gx:24px; --sf-gy:64px; }
  .sf-grid[data-zoom="3"]{ --sf-cols:6; --sf-gx:20px; --sf-gy:44px; }
}
@media (min-width:1600px){
  .sf-grid{ --sf-gx:32px; --sf-gy:64px; }
  .sf-grid[data-zoom="3"]{ --sf-gx:24px; }
}
.sf-card[hidden]{ display:none; }

/* --------------------------------------------------------------------- card */
.sf-card{ position:relative; min-width:0; }
.sf-frame{ position:relative; }
.sf-media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--sf-plate); }
.sf-media img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; display:block; }
.sf-alt{ opacity:0; transition:opacity .5s ease; }
@media (hover:hover) and (pointer:fine){
  .sf-card:hover .sf-alt.is-ready, .sf-card:focus-within .sf-alt.is-ready{ opacity:1; }
}
.sf-info{ position:relative; padding:10px 30px 0 0; }
.sf-name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-name a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.sf-price{ margin-top:1px; white-space:nowrap; }
.sf-ltd{ margin-top:3px; font-size:10px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.sf-oos{ margin-top:3px; font-size:10px; letter-spacing:.06em; color:var(--sf-mute); }
.sf-add{
  position:absolute; top:2px; right:-8px; width:34px; height:34px;
  display:grid; place-items:center; color:var(--sf-ink);
}
.sf-add svg{ width:11px; height:11px; display:block; }
.sf-add:hover svg{ transform:rotate(90deg); }
.sf-add svg{ transition:transform .35s var(--sf-ease); }
.sf-add[disabled]{ color:#bdbdbb; cursor:default; }
.sf-add[disabled]:hover svg{ transform:none; }

/* densest view (Zara zoom 3): photograph, price and + only */
@media (min-width:1024px){
  .sf-grid[data-zoom="3"] .sf-info{ display:flex; flex-direction:column; align-items:center; padding:8px 0 0; text-align:center; }
  .sf-grid[data-zoom="3"] .sf-name{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .sf-grid[data-zoom="3"] .sf-add{ position:static; order:3; margin-top:0; width:30px; height:28px; }
}

/* ---------------------------------------------- quick add: Zara's bordered list */
.sf-pick{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:5;
  background:var(--sf-paper); border:1px solid var(--sf-ink);
  opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .25s var(--sf-ease);
}
.sf-pick.is-in{ opacity:1; transform:none; }
.sf-pick-h{ display:flex; align-items:center; justify-content:space-between; padding:9px 6px 7px 14px; border-bottom:1px solid var(--sf-hair); }
.sf-pick-h span{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.sf-x{ width:28px; height:28px; display:grid; place-items:center; color:var(--sf-ink); }
.sf-x svg{ width:10px; height:10px; display:block; }
.sf-pick-list button, .pdp-pick li button{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; min-height:38px; text-align:left;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
}
.sf-pick-list button:hover, .pdp-pick li button:hover{ background:#f3f3f1; }
.sf-pick-list button[disabled], .pdp-pick li button[disabled]{ color:#a3a3a3; cursor:default; background:none; }
.sf-pick-list .is-phone, .pdp-pick .is-phone{ text-transform:none; letter-spacing:.02em; }
.sf-pick-list small, .pdp-pick small{ font-size:9px; letter-spacing:.06em; color:var(--sf-mute); text-transform:uppercase; }
@media (min-width:1024px){
  .sf-grid[data-zoom="3"] .sf-pick{ left:4px; right:4px; bottom:4px; }
  .sf-grid[data-zoom="3"] .sf-pick-list button{ padding:8px 10px; min-height:32px; }
}

/* The home header is ink at 80% over the dark page; over this white band that reads as
   a muddy grey, so while the band is under it the header goes solid ink (shop.js toggles
   html.r68-on-floor with an IntersectionObserver). Remove these two rules to opt out. */
html.r68-has-floor body > header.fixed{ transition:background-color .35s ease; }
html.r68-on-floor body > header.fixed{ background-color:#0a0a0a; }

/* =============================================================================
   OVERLAYS  (every page that loads shop.js)
   ============================================================================= */
.r68-ov[hidden]{ display:none !important; }
.r68-scrim{
  position:fixed; inset:0; z-index:88; background:rgba(10,10,10,.32);
  opacity:0; transition:opacity .35s ease;
}
.r68-scrim.is-open{ opacity:1; }

/* -------------------------------------------------------------- added panel */
.r68-added{
  position:fixed; z-index:86; right:16px; top:calc(var(--r68-head) + 12px);
  width:min(360px, calc(100vw - 32px)); background:var(--sf-paper); border:1px solid var(--sf-ink);
  padding:16px; display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px 16px; align-items:start;
  opacity:0; transform:translateY(-8px); transition:opacity .25s ease, transform .35s var(--sf-ease);
}
.r68-added.is-in{ opacity:1; transform:none; }
.r68-added-img{ width:64px; aspect-ratio:4/5; background:var(--sf-plate); overflow:hidden; }
.r68-added-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.r68-added-t{ padding-right:24px; min-width:0; }
.r68-added-k{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); margin-bottom:6px; }
.r68-added-t .r68-t + .r68-t{ margin-top:2px; }
.r68-added .r68-btn{ grid-column:1 / -1; min-height:40px; font-size:11px; }
.r68-added .sf-x{ position:absolute; top:6px; right:6px; }
@media (min-width:1024px){ .r68-added{ right:max(24px, calc((100% - 1600px) / 2 + 40px)); } }
@media (max-width:639.98px){
  .r68-added{ top:auto; bottom:0; left:0; right:0; width:auto; border-width:1px 0 0;
              padding:16px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(12px); }
}

/* --------------------------------------------------------------- the drawer */
.r68-bag{
  position:fixed; z-index:90; top:0; right:0; bottom:0; width:min(100%, 480px);
  background:var(--sf-paper); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .45s var(--sf-ease); outline:none;
}
.r68-bag.is-open{ transform:none; }
.r68-bag-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:0 14px 0 24px; border-bottom:1px solid var(--sf-hair); }
.r68-bag-h h2{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:400; }
.r68-back{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:8px 0; }
.r68-back svg{ width:7px; height:11px; display:block; }
.r68-bag .sf-x{ width:40px; height:40px; }
.r68-bag .sf-x svg{ width:12px; height:12px; }
.r68-bag-b{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:0 24px; }
.r68-bag-f{ border-top:1px solid var(--sf-ink); padding:18px 24px calc(22px + env(safe-area-inset-bottom)); }
.r68-sum{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:400; }
.r68-note{ margin:10px 0 16px; font-size:10.5px; line-height:1.55; letter-spacing:.02em; color:var(--sf-mute); }
.r68-bag-f .r68-btn{ min-height:48px; }

.r68-items li{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--sf-hair); }
.r68-items li:last-child{ border-bottom:0; }
.r68-items .r68-thumb{ display:block; width:88px; aspect-ratio:4/5; background:var(--sf-plate); overflow:hidden; }
.r68-items .r68-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.r68-line{ display:flex; flex-direction:column; min-width:0; }
.r68-line-top{ display:flex; justify-content:space-between; gap:12px; }
.r68-line-name{ overflow:hidden; text-overflow:ellipsis; }
.r68-line-name a:hover{ text-decoration:underline; text-underline-offset:3px; }
.r68-line .r68-v{ color:var(--sf-mute); margin-top:2px; }
.r68-line .r68-v.is-phone{ text-transform:none; letter-spacing:.02em; }
.r68-line-bot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; }
.r68-qty{ display:inline-flex; align-items:center; border:1px solid var(--sf-ink); height:32px; }
.r68-qty button{ width:32px; height:30px; display:grid; place-items:center; }
.r68-qty button[disabled]{ color:#bdbdbb; cursor:default; }
.r68-qty button svg{ width:9px; height:9px; display:block; }
.r68-qty output{ min-width:26px; text-align:center; font-size:11px; letter-spacing:.04em; }
.r68-rm{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); text-decoration:underline; text-underline-offset:3px; padding:6px 0; }
.r68-rm:hover{ color:var(--sf-ink); }
.r68-empty{ padding:64px 0 24px; text-align:center; }
.r68-empty p{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.r68-empty .r68-btn{ margin-top:28px; }

/* checkout */
.r68-co{ padding:24px 0 8px; }
.r68-co-sum{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding-bottom:18px; border-bottom:1px solid var(--sf-hair); margin-bottom:26px; }
.r68-field{ display:block; margin-bottom:22px; }
.r68-field label{ display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); margin-bottom:4px; }
.r68-field label em{ font-style:normal; }
.r68-field input, .r68-field textarea{
  display:block; width:100%; border:0; border-bottom:1px solid var(--sf-ink); border-radius:0; background:transparent;
  padding:8px 0 7px; font:300 14px/1.4 var(--sf-font); letter-spacing:.02em; color:var(--sf-ink); outline:none;
}
.r68-field textarea{ resize:vertical; min-height:64px; }
.r68-field input:focus, .r68-field textarea:focus{ border-bottom-width:2px; padding-bottom:6px; outline:none; }
.r68-field [aria-invalid="true"]{ border-bottom-color:var(--sf-err); }
.r68-err{ display:block; margin-top:6px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--sf-err); }
.r68-err:empty{ display:none; }
.r68-alert{ border:1px solid var(--sf-ink); padding:18px 18px 16px; margin:4px 0 22px; }
.r68-alert h3{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:400; margin-bottom:8px; }
.r68-alert p{ font-size:12px; line-height:1.55; }
.r68-alert .r68-btn{ margin-top:16px; min-height:40px; font-size:11px; }
.r68-done{ padding:56px 0 24px; }
.r68-done h3{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; font-weight:300; }
.r68-done .r68-ref{ margin-top:22px; padding:14px 0; border-top:1px solid var(--sf-ink); border-bottom:1px solid var(--sf-hair);
                    display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.r68-done .r68-ref b{ font-weight:500; letter-spacing:.04em; }
.r68-done p.r68-copy{ margin-top:18px; font-size:12px; line-height:1.6; }
.r68-done .r68-btn{ margin-top:32px; }

/* --------------------------------------------------------------------- search */
.r68-search{
  position:fixed; inset:0; z-index:92; background:var(--sf-paper); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .25s ease; outline:none;
}
.r68-search.is-open{ opacity:1; }
.r68-search-in{ max-width:1920px; margin:0 auto; padding:0 16px 72px; }
@media (min-width:640px){ .r68-search-in{ padding:0 24px 88px; } }
@media (min-width:1024px){ .r68-search-in{ padding:0 40px 104px; } }
.r68-search-top{ display:flex; align-items:center; justify-content:space-between; height:var(--r68-head); }
.r68-mark{ font-family:var(--sf-display); font-weight:400; font-size:20px; line-height:1; letter-spacing:.01em; color:var(--sf-ink); text-transform:uppercase; white-space:nowrap; flex:0 0 auto; }
.r68-mark sup{ font-size:8px; vertical-align:super; margin-left:2px; line-height:0; font-family:var(--sf-font); }
@media (min-width:768px){ .r68-mark{ font-size:26px; } .r68-mark sup{ font-size:9px; } }
.r68-search .sf-x{ width:40px; height:40px; margin-right:-10px; }
.r68-search .sf-x svg{ width:13px; height:13px; }
.r68-search-f{ margin-top:clamp(16px, 5vh, 56px); max-width:1200px; }
.r68-search-f label{ display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); margin-bottom:6px; }
.r68-search-f input{
  display:block; width:100%; border:0; border-bottom:1px solid var(--sf-ink); border-radius:0; background:transparent;
  padding:10px 0 9px; font:300 15px/1.4 var(--sf-font); letter-spacing:.04em; text-transform:uppercase; color:var(--sf-ink); outline:none;
}
.r68-search-f input::placeholder{ color:#9a9a9a; }
.r68-search-f input:focus{ border-bottom-width:2px; padding-bottom:8px; outline:none; }
.r68-search-f input::-webkit-search-cancel-button{ display:none; }
.r68-chips{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:16px; }
.r68-chips button{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:6px 0; color:var(--sf-mute); }
.r68-chips button:hover, .r68-chips button[aria-pressed="true"]{ color:var(--sf-ink); text-decoration:underline; text-underline-offset:3px; }
.r68-res-h{ margin-top:44px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.r68-res{ margin-top:16px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 8px; }
@media (min-width:640px){ .r68-res{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:36px 16px; } }
@media (min-width:1024px){ .r68-res{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:44px 20px; } }
.r68-res a{ display:block; }
.r68-res .r68-thumb{ display:block; aspect-ratio:4/5; background:var(--sf-plate); overflow:hidden; }
.r68-res .r68-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.r68-res .r68-t{ display:block; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r68-res .r68-t + .r68-t{ margin-top:1px; }
.r68-res a:hover .r68-n{ text-decoration:underline; text-underline-offset:3px; }
.r68-none{ margin-top:44px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; line-height:1.6; }

/* =============================================================================
   PRODUCT PAGES  (shop/<slug>.html)  white page, light variant of the 68 header
   ============================================================================= */
html.r68-light, body.r68-page{ background:var(--sf-paper); }
body.r68-page{ margin:0; overflow-x:hidden; }
.r68-skip{ position:absolute; left:16px; top:-48px; z-index:100; background:var(--sf-ink); color:var(--sf-paper); padding:10px 14px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.r68-skip:focus{ top:12px; }

.r68h{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.92);
       -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(10,10,10,.06); }
.r68h-in{ max-width:1600px; margin:0 auto; height:var(--r68-head); padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media (min-width:640px){ .r68h-in{ padding:0 24px; } }
@media (min-width:1024px){ .r68h-in{ padding:0 40px; } }
.r68h-nav, .r68h-tools{ display:none; align-items:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:300; }
.r68h-nav{ gap:36px; }
.r68h-tools{ gap:20px; }
@media (min-width:768px){ .r68h-nav, .r68h-tools{ display:flex; } }
@media (min-width:768px) and (max-width:1179.98px){
  .r68h-nav, .r68h-tools{ font-size:10.5px; letter-spacing:.12em; }
  .r68h-nav{ gap:18px; } .r68h-tools{ gap:14px; }
  .r68h-nav a:first-child{ display:none; }   /* the wordmark is the way home at tablet width */
}
.r68h-nav a, .r68h-tools a{ padding:6px 0; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease; white-space:nowrap; }
.r68h-nav a:hover, .r68h-tools a:hover, .r68h-nav a[aria-current]{ border-bottom-color:currentColor; }
.r68h-mob{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
@media (min-width:768px){ .r68h-mob{ display:none; } }
.r68h-burger{ width:36px; height:36px; margin-right:-4px; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; }
.r68h-burger span{ display:block; height:1px; width:28px; background:var(--sf-ink); }
.r68h-burger span:nth-child(2){ width:20px; }

.r68m{ position:fixed; inset:0; z-index:60; background:var(--sf-paper); transform:translateX(100%); transition:transform .35s var(--sf-ease); visibility:hidden; }
.r68m.is-open{ transform:none; visibility:visible; }
@media (min-width:768px){ .r68m{ display:none; } }
.r68m-top{ display:flex; align-items:center; justify-content:space-between; height:80px; padding:0 20px; border-bottom:1px solid rgba(10,10,10,.1); }
.r68m nav{ display:flex; flex-direction:column; gap:24px; padding:40px 24px; }
.r68m nav a{ font-family:var(--sf-display); font-size:22px; letter-spacing:.05em; text-transform:uppercase; padding-bottom:20px; border-bottom:1px solid rgba(10,10,10,.1); }
.r68m-tools{ display:flex; align-items:center; gap:20px; padding:0 24px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#555; }
.r68m-tools span{ width:1px; height:16px; background:rgba(10,10,10,.2); }

.pdp{ padding-top:var(--r68-head); }
.pdp-wrap{ max-width:1920px; margin:0 auto; }

/* gallery: phones = full-width swipe, tablets = two up, desktop = one tall column */
.pdp-gal{ position:relative; }
.pdp-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
.pdp-track::-webkit-scrollbar{ display:none; }
.pdp-fig{ flex:0 0 100%; margin:0; aspect-ratio:4/5; background:var(--sf-plate); scroll-snap-align:start; position:relative; overflow:hidden; }
.pdp-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:640px) and (max-width:1023.98px){ .pdp-fig{ flex-basis:50%; } }
.pdp-count{ position:absolute; right:12px; bottom:12px; padding:5px 9px 4px; background:rgba(255,255,255,.92); font-size:10px; letter-spacing:.08em; }

.pdp-info{ padding:22px 16px 0; }
@media (min-width:640px){ .pdp-info{ padding:28px 24px 0; max-width:640px; } }
.pdp-cat{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sf-mute); }
.pdp-cat a:hover{ text-decoration:underline; text-underline-offset:3px; }
.pdp-name{ margin-top:10px; font-size:15px; line-height:1.45; letter-spacing:.03em; text-transform:uppercase; font-weight:300; }
.pdp-price{ margin-top:4px; font-size:15px; line-height:1.45; letter-spacing:.03em; }
.pdp-ltd{ margin-top:6px; font-size:11px; line-height:1.45; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.pdp-oos{ margin-top:6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.pdp-rule{ height:1px; background:var(--sf-ink); margin:22px 0 20px; }
.pdp-colour{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.pdp-colour .pdp-sw{ flex:0 0 auto; width:18px; height:18px; border:1px solid rgba(10,10,10,.18); box-shadow:0 0 0 2px var(--sf-paper), 0 0 0 3px var(--sf-ink); margin:3px; }
.pdp-code{ color:var(--sf-ink); }
.pdp-code span{ color:var(--sf-mute); margin:0 .5em; }
.pdp-buy{ margin-top:22px; position:relative; }
.pdp-pick{ border:1px solid var(--sf-ink); background:var(--sf-paper); }
.pdp-pick-h{ display:flex; align-items:center; justify-content:space-between; padding:10px 6px 8px 14px; border-bottom:1px solid var(--sf-hair); }
.pdp-pick-h span{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sf-mute); }
.pdp-pick ul{ padding:4px 0; }
.pdp-desc{ margin-top:28px; font-size:12px; line-height:1.65; letter-spacing:.01em; max-width:36em; }
.pdp-links{ margin-top:28px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.pdp-links a{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.pdp-links a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* sticky ADD on phones once the inline one has scrolled away */
.pdp-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--sf-paper); border-top:1px solid var(--sf-hair);
          padding:10px 16px calc(10px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .35s var(--sf-ease); }
.pdp-bar.is-on{ transform:none; }
.pdp-bar-in{ display:flex; align-items:center; gap:14px; max-width:640px; margin:0 auto; }
.pdp-bar-t{ flex:1 1 auto; min-width:0; }
.pdp-bar-t .r68-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdp-bar .r68-btn{ flex:0 0 46%; }
.pdp-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:89; background:var(--sf-paper); border-top:1px solid var(--sf-ink);
            padding:0 0 calc(8px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .35s var(--sf-ease); }
.pdp-sheet.is-open{ transform:none; }
.pdp-sheet .pdp-pick{ border:0; }
@media (min-width:1024px){ .pdp-bar, .pdp-sheet{ display:none !important; } }

@media (min-width:1024px){
  .pdp-wrap{
    display:grid; grid-template-columns:min(45vw, 860px) minmax(300px, 380px);
    column-gap:clamp(56px, 6.5vw, 128px); justify-content:center; align-items:start; padding:40px 40px 0;
  }
  .pdp-track{ display:block; overflow:visible; }
  .pdp-fig{ width:100%; }
  .pdp-fig + .pdp-fig{ margin-top:4px; }
  .pdp-count{ display:none; }
  .pdp-info{ position:sticky; top:calc(var(--r68-head) + 56px); padding:0; max-width:none; }
}

/* more from the gear */
.pdp-more{ max-width:1920px; margin:96px auto 0; padding:0 16px 88px; }
@media (min-width:640px){ .pdp-more{ padding:0 24px 96px; } }
@media (min-width:1024px){ .pdp-more{ margin-top:144px; padding:0 40px 128px; } }
.pdp-more h2{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:400; margin-bottom:24px; }
.pdp-more .sf-grid{ --sf-cols:2; }
@media (min-width:640px){ .pdp-more .sf-grid{ --sf-cols:4; } }
@media (min-width:1600px){ .pdp-more .sf-grid{ --sf-cols:4; } }

.r68f{ border-top:1px solid var(--sf-hair); }
.r68f-in{ max-width:1600px; margin:0 auto; padding:28px 20px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center;
          font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--sf-mute); }
@media (min-width:1024px){ .r68f-in{ padding:32px 40px; } }
.r68f nav{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.r68f a:hover{ color:var(--sf-ink); }
body.r68-has-bar .r68f-in{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion:reduce){
  .sf-alt, .sf-add svg, .sf-pick, .r68-added, .r68-bag, .r68-scrim, .r68-search, .pdp-bar, .pdp-sheet, .r68m{ transition:none !important; }
}

/* =============================================================================
   THE GEAR, HOME EDITORIAL  (index.html #merch, generated by build_shop.py)
   The campaign frames (products on models, shot in the field) as a Zara-style editorial
   block in the site's own dark palette (ink, paper, sand): two portraits over three, centred in generous white space, one
   line of copy, one button to the full shop (shop.html). 2:3 portraits like Zara's.
   ============================================================================= */
.ge{ --ge-ink:#0a0a0a; --ge-paper:#f5f2ec; --ge-sand:#cbba9c; --ge-mute:rgba(245,242,236,.55); --ge-hair:rgba(245,242,236,.1);
  background:var(--ge-ink); color:var(--ge-paper); border-top:1px solid var(--ge-hair); font-family:var(--sf-font); font-weight:300;
  -webkit-font-smoothing:antialiased; padding:64px 0 80px; scroll-margin-top:var(--r68-head); }
@media (min-width:1024px){ .ge{ padding:104px 0 120px; } }
.ge, .ge *{ box-sizing:border-box; }
.ge :where(ul){ list-style:none; margin:0; padding:0; }
.ge :where(h2, p){ margin:0; font-size:inherit; font-weight:inherit; }
.ge :where(a){ color:inherit; text-decoration:none; }
.ge :focus-visible{ outline:1px solid var(--ge-sand); outline-offset:3px; }
.ge-wrap{ max-width:1680px; margin:0 auto; padding:0 16px; }
@media (min-width:640px){ .ge-wrap{ padding:0 24px; } }
@media (min-width:1024px){ .ge-wrap{ padding:0 40px; } }

.ge-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; }
@media (min-width:1024px){ .ge-head{ margin-bottom:56px; } }
.ge-title{ font-size:11px; line-height:1.4; letter-spacing:.06em; text-transform:uppercase; font-weight:400; }
.ge-title sup{ font-size:.62em; vertical-align:super; line-height:0; margin-left:1px; }
.ge-slash{ color:var(--ge-mute); margin:0 .35em; font-weight:300; }
.ge-all{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s ease; }
.ge-all span[aria-hidden]{ font-size:9px; color:var(--ge-sand); position:relative; top:-.45em; margin-left:3px; }
.ge-all:hover{ border-color:var(--ge-sand); color:var(--ge-sand); }

/* frames: phones = a swipe rail; 640+ = two portraits over three */
.ge-frames{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin:0 -16px; padding:0 16px; }
.ge-frames::-webkit-scrollbar{ display:none; }
.ge-f{ flex:0 0 78%; scroll-snap-align:start; }
.ge-a{ display:block; overflow:hidden; background:#141414; }
.ge-a img{ display:block; width:100%; height:auto; aspect-ratio:2 / 3; object-fit:cover;
  transition:transform 1.4s var(--sf-ease); }
@media (hover:hover) and (pointer:fine){ .ge-a:hover img{ transform:scale(1.025); } }
@media (min-width:640px){
  .ge-frames{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:16px; margin:0 auto; padding:0;
    overflow:visible; max-width:1180px; }
  .ge-f{ grid-column:span 2; }
  .ge-f.ge-big{ grid-column:span 3; }
}
@media (min-width:1024px){
  .ge-frames{ grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; row-gap:24px; }
  .ge-f{ grid-column:span 4; }
  .ge-f.ge-big:nth-child(1){ grid-column:2 / span 5; }
  .ge-f.ge-big:nth-child(2){ grid-column:7 / span 5; }
}

.ge-foot{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; margin-top:40px; }
@media (min-width:1024px){ .ge-foot{ margin-top:64px; gap:26px; } }
.ge-copy{ font-size:13px; line-height:1.65; letter-spacing:.01em; color:rgba(245,242,236,.6); max-width:34ch; }
.r68-btn.ge-btn{ width:auto; min-width:min(100%, 280px); padding:0 32px; background:transparent; border-color:var(--ge-paper); color:var(--ge-paper); letter-spacing:.22em; font-size:11px; }
.r68-btn.ge-btn:hover{ background:var(--ge-sand); border-color:var(--ge-sand); color:var(--ge-ink); }
.ge-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; }
.ge-cats a{ border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s ease; }
.ge-cats a{ color:rgba(245,242,236,.7); }
.ge-cats a:hover{ border-color:var(--ge-sand); color:var(--ge-sand); }
.ge-cats span{ font-size:9px; color:var(--ge-sand); position:relative; top:-.45em; margin-left:3px; }

/* the full shop page (shop.html): clear the fixed light header */
.sf-main-page{ padding-top:var(--r68-head); }
@media (prefers-reduced-motion:reduce){ .ge-a img{ transition:none; } }