/* ─── Fonts ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

/* Archivo Expanded — self-hosted display font for headlines.
   Only 700/900 are registered, so any weight request snaps to Bold minimum. */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/Archivo_Expanded-Bold.ttf') format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/Archivo_Expanded-Black.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Base ───────────────────────────────────────────────────────────────── */
body {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  min-height: 100vh;
}

/* ─── Announcement Bar ───────────────────────────────────────────────────── */
.announcement-bar {
  background: #111111;
  color: #ffffff;
  height: 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #1a1a1a;
}
.announcement-track {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.announcement-track span {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0 1rem;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4.5rem;
  height: 84px;
  border-bottom: 1px solid #1a1a1a;
  background: #000000;
}
nav.left {
  display: flex;
  gap: 1.5rem;
}
nav.left a {
  color: rgba(143,143,143,0.6);
  text-decoration: none;
  font-family: 'Archivo Expanded', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s;
}
nav.left a:hover { color: #ffffff; }
nav.left a.active { color: #ffffff; font-weight: 800; }
nav.left a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ffffff;
  transition: width 0.3s ease;
}
nav.left a:hover::after { width: 100%; }

/* drawer-only elements (backdrop, close button, extra links) — the desktop
   header just shows the 3 plain nav links inline, so these stay hidden until
   the mobile media query turns nav.left into a full-screen overlay */
.drawer-backdrop, .drawer-close, .drawer-link, .drawer-logo, .drawer-cart { display: none; }
/* transparent wrappers — on desktop these contribute nothing to layout, so
   nav.left's real flex children are still just the plain <a> tags (exactly
   as before); the mobile media query below turns them into real boxes */
.drawer-topbar, .drawer-links { display: contents; }

/* explicit grid-column pins: nav.left is display:none on mobile (closed state),
   and a display:none item is removed from grid auto-placement entirely — without
   this, the logo and nav.right would slide into columns 1 and 2, off-centre. */
.header-logo { grid-column: 2; display: flex; justify-content: center; align-items: center; }
.header-logo a { display: flex; align-items: center; }
/* logo PNG has ~26% transparent padding top/bottom — 96px renders a ~46px visible mark.
   Negative margins collapse the image's box to the 84px header height so the taller
   image doesn't stretch the grid row and push content off-centre. The PNG's visible
   mark sits ~2% left of the file's centre (padding: 23.5% left vs 27.6% right), so a
   2px nudge right puts the mark itself on the page's exact centre line. */
.header-logo img { height: 96px; width: auto; object-fit: contain; margin: -6px 0; transform: translateX(2px); }

nav.right {
  grid-column: 3;
  display: flex;
  gap: 1.4rem;
  justify-content: flex-end;
  align-items: center;
}
nav.right a {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
nav.right a:hover { color: #aaaaaa; }
nav.right svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* small numeric badge overlaid on the cart icon — only used on mobile,
   where the "Cart (n)" text label is hidden in favour of icon-only nav */
.hcart-icon { position: relative; display: inline-flex; }
.cart-count-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  font-size: 0.58rem;
  background: #f2f0eb;
  color: #000;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  padding: 0 3px;
}

/* ─── Header right: inline search, cart with count, account (accent) ─────── */
.hsearch { display: flex; align-items: center; gap: 0.6rem; }
.hsearch svg { width: 18px; height: 18px; stroke: rgba(242,240,235,0.8); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hsearch input {
  width: 11rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  outline: none;
  padding: 0.25rem 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f2f0eb;
}
.hsearch input:focus { border-bottom-color: rgba(255,255,255,0.7); }
.hsearch input::placeholder { color: rgba(242,240,235,0.55); }
.hsearch svg { cursor: pointer; }
/* mobile: icon-only nav — search collapses to a bare icon that opens a full-width
   dropdown bar under the header (not an inline expand); cart collapses to just
   the icon with a small count badge */
@media (max-width: 1024px) {
  .hsearch input {
    position: fixed;
    top: 85px; left: 0; right: 0; width: auto;
    margin: 0; box-sizing: border-box;
    background: #000000;
    border: none;
    border-bottom: 1px solid #1a1a1a;
    padding: 1.1rem 1.2rem;
    font-size: 0.85rem;
    text-align: left;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
    z-index: 97;
  }
  .hsearch.active input {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .search-backdrop {
    position: fixed;
    top: 85px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 96;
  }
  .search-backdrop.open { opacity: 1; pointer-events: auto; }
  .hcart-label { display: none; }
  .cart-count-badge.visible { display: flex; }

  /* bigger tap targets on mobile — hamburger, search icon, cart icon */
  .menu-toggle svg { width: 26px; height: 26px; }
  .hsearch svg { width: 23px; height: 23px; }
  .hcart svg { width: 25px; height: 25px; }
  .cart-count-badge { top: -8px; right: -10px; }
}
nav.right a.hcart, nav.right a.haccount {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,240,235,0.8);
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
  white-space: nowrap;
}
nav.right a.hcart:hover, nav.right a.haccount:hover { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,0.4); }
.hcart svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) { nav.right a.haccount { display: none; } }

/* Hamburger — its own header column (see header grid-column below), left of the logo */
.menu-toggle {
  display: none;
  grid-column: 1;
  justify-self: start;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.2rem;
}
.menu-toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer {
  border-top: none;
  padding: 2rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
.footer-left {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: #333;
  text-transform: uppercase;
}
.footer-center { display: flex; justify-content: center; }
.footer-center img { height: 24px; width: 24px; object-fit: contain; opacity: 0.3; }
.footer-right { display: flex; justify-content: flex-end; gap: 1.5rem; }
.footer-right a {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-right a:hover { color: #fff; }

/* ─── Form Fields ────────────────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  resize: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #555; }
.field input::placeholder,
.field textarea::placeholder { color: #333; }
.field select option { background: #111; color: #fff; }
.field.error input,
.field.error select,
.field.error textarea { border-color: #c0392b; }
.field-error {
  font-size: 0.62rem;
  color: #c0392b;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
  display: none;
}
.field.error .field-error { display: block; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  padding: 1rem 2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.btn-white { background: #fff; color: #000; border: 1px solid #fff; }
.btn-white:hover { background: #000000; color: #fff; }
.btn-outline { background: transparent; color: #fff; border: 1px solid #333; }
.btn-outline:hover { border-color: #fff; }
.btn-full { width: 100%; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #111;
  border: 1px solid #222;
  padding: 2.5rem;
  max-width: 500px;
  width: 90%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  color: #555;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover { color: #fff; }
.modal h2 {
  font-family: 'Archivo Expanded', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

/* Size table (reused in shop + product) */
.size-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; letter-spacing: 0.1em; }
.size-table th {
  text-transform: uppercase;
  color: #555;
  font-weight: 400;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #222;
  text-align: left;
  font-size: 0.62rem;
}
.size-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid #1a1a1a; color: #aaa; }
.size-table tr:last-child td { border-bottom: none; }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  background: #111;
  border: 1px solid #2a2a2a;
  padding: 0.9rem 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #fff;
  z-index: 9998;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ─── Cookie Banner ──────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111;
  border-top: 1px solid #1a1a1a;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  z-index: 9999;
  transition: transform 0.3s;
}
.cookie-banner.hidden { display: none; }
.cookie-text {
  /* capped so it reads as a left-aligned column next to the button on wide
     screens, rather than stretching edge-to-edge with the button pushed
     far off to the right */
  max-width: 42rem;
  font-size: 0.68rem; letter-spacing: 0.06em; color: #666; line-height: 1.7;
}
.cookie-text a { color: #aaa; }
.cookie-accept {
  padding: 0.6rem 1.5rem;
  background: #fff;
  color: #000;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.cookie-accept:hover { background: #ddd; }

/* Only genuinely narrow phones stack — the row layout (text left, button
   right, vertically centred) holds all the way down through tablet widths.
   This used to live in the max-width:1024px block below, which meant
   tablets AND small desktop windows got stacked unnecessarily. */
@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1rem 1.2rem;
  }
  .cookie-text { max-width: none; }
  .cookie-accept { width: 100%; }
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 1rem 2.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #555;
}
.breadcrumb a { color: #555; text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 0.5rem; }

/* ─── Cart Dropdown ──────────────────────────────────────────────────────── */
.cart-drop {
  position: fixed;
  top: 85px; /* header 84 + 1px border */
  right: 2.5rem;
  width: 300px;
  background: #111;
  border: 1px solid #1e1e1e;
  z-index: 9995;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.35s;
}
.cart-drop.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cart-drop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid #1a1a1a;
}
.cart-drop-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #444;
}
.cart-drop-check {
  width: 16px;
  height: 16px;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-drop-check svg {
  width: 8px;
  height: 8px;
  stroke: #555;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cart-drop-x {
  background: none;
  border: none;
  color: #2a2a2a;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.2rem;
  transition: color 0.2s;
}
.cart-drop-x:hover { color: #fff; }
.cart-drop-body {
  display: flex;
  gap: 1rem;
  padding: 1.1rem;
  align-items: flex-start;
}
.cart-drop-img {
  width: 60px;
  height: 75px;
  object-fit: cover;
  background: #000000;
  flex-shrink: 0;
  display: block;
}
.cart-drop-info { flex: 1; min-width: 0; }
.cart-drop-name {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-drop-meta {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: #333;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.cart-drop-price {
  font-size: 0.65rem;
  color: #444;
  letter-spacing: 0.05em;
}
.cart-drop-footer {
  padding: 0.9rem 1.1rem;
  border-top: 1px solid #1a1a1a;
}
.cart-drop-btn {
  display: block;
  width: 100%;
  background: #fff;
  color: #000;
  border: none;
  padding: 0.8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
}
.cart-drop-btn:hover { background: #ddd; }
.cart-drop-bar { height: 2px; background: #0f0f0f; overflow: hidden; }
.cart-drop-bar-fill {
  height: 100%;
  background: #1e1e1e;
  width: 100%;
  transform-origin: left;
}
.cart-drop-bar-fill.draining {
  transition: transform 4s linear;
  transform: scaleX(0);
}

@media (max-width: 480px) {
  .cart-drop { right: 1rem; left: 1rem; width: auto; top: 85px; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  header {
    padding: 0 1.2rem;
    grid-template-columns: 1fr auto 1fr;
    background: transparent; /* ::before below supplies the translucent blurred backdrop */
  }
  /* subtle premium blur so content scrolling behind the fixed header reads as
     glass rather than a hard-edged bar. This lives on a pseudo-element rather
     than on `header` directly because `filter`/`backdrop-filter` on an element
     turns it into the containing block for its own `position: fixed`
     descendants — header contains the full-screen nav.left drawer, and that
     would trap it to the header's own 84px box instead of the viewport. A
     pseudo-element has no real children, so it can't cause that trap. */
  header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.86);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    z-index: -1;
    pointer-events: none;
  }

  /* ── Full-screen nav menu — drops down from above the viewport ─────────── */
  .drawer-backdrop { display: none; } /* full-screen panel is opaque; no separate dimmer needed */

  nav.left {
    display: flex;
    position: fixed;
    inset: 0;
    width: auto;
    background: #000000;
    border: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    z-index: 10000; /* above everything, incl. the cookie banner (9999) and header (100) */
    transform: translateY(-100%);
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
    overflow-y: auto;
  }
  nav.left.open { transform: translateY(0); }

  /* Header row inside the overlay: X / logo / cart, one clean horizontal
     line. Uses the same 3-column grid trick as the real header so the logo
     lands on the exact viewport centre line, not just "between the icons". */
  .drawer-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-shrink: 0;
    padding: calc(1.3rem + env(safe-area-inset-top)) 1.2rem 0.6rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    transition-delay: 0s;
  }
  nav.left.open .drawer-topbar { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }

  .drawer-close {
    display: flex;
    grid-column: 1;
    justify-self: start;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-left: -0.6rem; /* optically align the glyph with the page edge despite the larger tap target */
    background: none; border: none;
    color: #f2f0eb; cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
  }

  .drawer-logo { grid-column: 2; display: flex; align-items: center; justify-self: center; height: 34px; }
  .drawer-logo img { height: 34px; width: auto; }

  .drawer-cart {
    display: flex;
    grid-column: 3;
    justify-self: end;
    align-items: center; justify-content: center;
    position: relative;
    width: 44px; height: 44px;
    margin-right: -0.6rem;
    color: #f2f0eb;
  }
  .drawer-cart svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* Navigation column — one flat list, all six links sharing the same
     visual system. Sits below the header row with generous top spacing,
     then leaves the rest of the viewport as clean black negative space
     (not vertically centred — the reference composition is top-weighted). */
  .drawer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.4rem 1.6rem calc(2.5rem + env(safe-area-inset-bottom));
    gap: 1.9rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    transition-delay: 0s;
  }
  nav.left.open .drawer-links { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }

  /* scoped as "nav.left .drawer-links a" (not just ".drawer-links a") so its
     specificity beats the base "nav.left a" / "nav.left a.active" rules
     above — otherwise those desktop rules (font-weight 600/800) would win
     and silently re-introduce the big-vs-small mismatch this is fixing */
  nav.left .drawer-links a {
    display: block;
    font-family: 'Archivo Expanded', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(242,240,235,0.9);
    text-decoration: none;
    text-align: center;
    transition: color 0.2s;
  }
  nav.left .drawer-links a:hover, nav.left .drawer-links a:active { color: #ffffff; }
  /* keep the same font-weight as the other five (the base .active rule
     elsewhere bolds to 800, which would break the "one visual system" look) */
  nav.left .drawer-links a.active { color: #ffffff; font-weight: 700; }
  nav.left .drawer-links a.active::after { display: none; } /* desktop's underline hover-fx reads as clutter at this scale */

  @media (prefers-reduced-motion: reduce) {
    nav.left, .drawer-topbar, .drawer-links { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  }

  /* hide the account link on mobile — nav.right keeps just search + cart, hamburger lives in column 1 */
  nav.right a:not([href="cart.html"]) { display: none; }
  nav.right a[href="cart.html"] { display: flex; }
  nav.right { gap: 0.9rem; }

  .menu-toggle { display: flex; }

  footer {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
    padding: 1.5rem;
  }
  .footer-center, .footer-right { justify-content: center; }

  .breadcrumb { padding: 0.8rem 1.2rem; }

  /* Form fields, site-wide — any input under 16px triggers iOS Safari's
     auto-zoom on focus, which reads as broken/janky rather than premium.
     Also sizes touch targets up to a comfortable ~48px tall. */
  .field input, .field select, .field textarea {
    font-size: 1rem;
    padding: 0.95rem 1rem;
  }
  .field label { font-size: 0.68rem; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LAYER — Cursor / Reveals / Transitions / Grain
   ══════════════════════════════════════════════════════════ */

/* Film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: -200px;
  width: calc(100% + 400px);
  height: calc(100% + 400px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.01;
  pointer-events: none;
  z-index: 9980;
  animation: grainShift 0.5s steps(2) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, -5%); }
  50%  { transform: translate(5%, 3%); }
  75%  { transform: translate(-2%, 6%); }
  100% { transform: translate(4%, -2%); }
}


/* Scroll reveal — fade + rise */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
              transform 0.9s cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--d, 0s);
}
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal].visible { opacity: 1; transform: none; }

/* Text clip reveal (premium slide-up effect) */
.rl { overflow: hidden; display: block; }
.rl > span {
  display: block;
  transform: translateY(108%);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--d, 0s);
}
.rl.visible > span { transform: translateY(0); }

/* Stagger children on reveal */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-stagger].visible > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].visible > *:nth-child(2) { transition-delay: 0.07s; }
[data-stagger].visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-stagger].visible > *:nth-child(4) { transition-delay: 0.21s; }
[data-stagger].visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-stagger].visible > *:nth-child(6) { transition-delay: 0.35s; }
[data-stagger].visible > * { opacity: 1; transform: none; }

/* Marquee / Ticker enhanced */
.marquee-banner {
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  padding: 0.9rem 0;
  overflow: hidden;
  background: #000000;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marqueeRoll 22s linear infinite;
}
.marquee-track span {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #333;
  padding: 0 2.5rem;
}
.marquee-track .mx {
  color: #222;
  padding: 0 1rem;
}
@keyframes marqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Enhanced header — subtle backdrop blur on scroll */
header.scrolled {
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Enhanced size modal — animated drawer */
.size-drawer {
  position: fixed;
  inset: 0;
  z-index: 9950;
  visibility: hidden;
}
.size-drawer.open { visibility: visible; }
.size-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.4s;
  cursor: pointer;
}
.size-drawer.open .size-drawer-backdrop { background: rgba(0,0,0,0.7); }
.size-drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(480px, 100vw);
  background: #111;
  border-left: 1px solid #1d1d1d;
  padding: 3rem 2.5rem;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
}
.size-drawer.open .size-drawer-panel { transform: translateX(0); }
.size-drawer-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #555;
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
  padding: 0.25rem;
}
.size-drawer-close:hover { color: #fff; }
.size-drawer-title {
  font-family: 'Archivo Expanded', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}
.size-drawer-sub {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #444;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.size-tabs {
  display: flex;
  gap: 0;
  border: 1px solid #222;
  margin-bottom: 2rem;
}
.size-tab {
  flex: 1;
  padding: 0.65rem 0;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #444;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border: none;
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
}
.size-tab + .size-tab { border-left: 1px solid #222; }
.size-tab.active { background: #fff; color: #000; }
.size-tab-content { display: none; }
.size-tab-content.active { display: block; }
.fit-note {
  font-size: 0.68rem;
  line-height: 1.8;
  color: #555;
  margin-top: 1.5rem;
  letter-spacing: 0.05em;
}
.fit-note strong { color: #888; font-weight: 400; }

/* Hover quick-view overlay on product cards */
.card-hover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  padding: 2rem 1rem 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.card-hover-overlay span {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
}
.product-card:hover .card-hover-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Line-clamp utility */
.line-clamp-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Smooth underline link */
.ul-link {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ul-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.ul-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ─── Enhanced Footer ────────────────────────────────────── */
footer {
  position: relative;
}
/* knit stitch — the drop's signature texture, carried across every page */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 2.5rem; right: 2.5rem;
  height: 7px;
  background-image:
    repeating-linear-gradient(45deg, rgba(242,240,235,0.13) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(-45deg, rgba(242,240,235,0.13) 0 1.5px, transparent 1.5px 8px);
}

/* ─── Knit stitch line — reusable brand divider ──────────── */
.knit-line {
  height: 7px;
  background-image:
    repeating-linear-gradient(45deg, rgba(242,240,235,0.2) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(-45deg, rgba(242,240,235,0.2) 0 1.5px, transparent 1.5px 8px);
}

/* ─── Section divider line ───────────────────────────────── */
.section-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1a1a1a 20%, #1a1a1a 80%, transparent);
  margin: 0;
}