/* ═══════════════════════════════════════════════════════
   AVNORE — style.css
═══════════════════════════════════════════════════════ */

/* ── Self-hosted Fonts ── */
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── New display + editorial fonts (self-hosted) ── */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/BarlowCondensed-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('../assets/fonts/ArchivoNarrow-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --black:       #000000;
  --white:       #FFFFFF;
  --paper:       #FAF8F4;   /* warm off-white canvas — replaces pure white on all light sections */
  --bone:        #F5F2ED;   /* slightly deeper warm white for cards/hover surfaces */
  --bone-2:      #ECE7DF;   /* section dividers, deeper surfaces */
  --grey-light:  #f5f5f5;
  --grey-mid:    #e0e0e0;
  --orange:      #FF7741;   /* reserved for primary CTAs only */
  --orange-dark: #CE3000;   /* reserved for primary CTA hover only */
  --gold:        #A16207;   /* warm accent for tags, badges, highlights */
  --gold-light:  #D4A017;   /* lighter gold for hover on gold elements */
  --stone:       #44403C;   /* secondary text, muted labels */
  --mute:        #6B6862;   /* warm gray for secondary text on light bg */
  --max-w:       1280px;
  --transition:  0.25s ease;
  /* ── Font roles ── */
  --font-display:   'Barlow Condensed', sans-serif;
  --font-editorial: 'Archivo Narrow', serif;
  --font-body:      'Sora', sans-serif;
  --font-ui:        'Roboto', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto', sans-serif;
  color: var(--black);
  background: var(--paper);
  overflow-x: hidden;
}

a   { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }


/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }


/* ═══════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 72px;
  display: flex; align-items: center;
  padding: 0 64px;
  z-index: 500;
  transition: background 0.4s ease, box-shadow 0.4s ease,
              backdrop-filter 0.4s ease, border-color 0.4s ease;
}

/* ── Liquid Glass — dark pages (hero/index) ───────────
   On scroll: frosted dark glass with a faint bottom shimmer.
   backdrop-filter gives the blur; the semi-transparent
   background lets the hero colour bleed through subtly.   */
.navbar.scrolled {
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08),
              0 4px 32px rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ── Liquid Glass — white pages (about, product, etc.) ──
   Frosted white glass: bright with a soft shadow.         */
.navbar--white.scrolled {
  background: rgba(250,248,244,0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06),
              0 4px 24px rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.navbar__inner {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
}

.navbar__links { display: flex; align-items: center; gap: 32px; }

.navbar__links a {
  font-family: 'Roboto', sans-serif; font-size: 16px;
  color: var(--white); position: relative;
}
.navbar__links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--white);
  transition: width var(--transition);
}
.navbar__links a:hover::after { width: 100%; }

/* White-navbar pages (legal, blog, product, etc.) */
.navbar__links--black a,
.navbar__links--black .nav-dropdown__trigger {
  color: var(--black);
}
.navbar__links--black a::after {
  background: var(--black);
}
.nav-dropdown__trigger--black {
  color: var(--black);
}
.navbar--white .cart-icon {
  filter: none;
}
.navbar--white .hamburger span {
  background: var(--black);
}

.navbar__logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
  line-height: 0;
  text-decoration: none;
  border: none;
  outline: none;
}
/* Kill any pseudo-element that could render as a line */
.navbar__logo::before,
.navbar__logo::after {
  display: none !important;
  content: none !important;
}

/* Logo icon — fades out on scroll */
.navbar__logo-img {
  height: 40px; width: auto;
  display: block;
  vertical-align: bottom;
  border: none;
  outline: none;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.35s ease;
  position: relative;
}

/* Wordmark — sits behind logo icon, fades in on scroll */
.navbar__wordmark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);        /* homepage: white */
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  line-height: 1;
}

/* On white-nav pages, wordmark is black */
.navbar--white .navbar__wordmark {
  color: var(--black);
}

/* Scrolled state: hide icon, show wordmark */
.navbar.scrolled .navbar__logo-img {
  opacity: 0;
  pointer-events: none;
}
.navbar.scrolled .navbar__wordmark {
  opacity: 1;
  pointer-events: auto;
}

.navbar__logo-fallback {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: 0.18em; color: var(--white);
}

.navbar__right { display: flex; align-items: center; gap: 16px; }

.cart-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: none; border: none; padding: 0;
  position: relative;
}
.cart-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); }

.cart-badge {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: var(--gold); border-radius: 50%;
  font-size: 10px; font-weight: 700; color: white;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: opacity 0.2s, transform 0.2s;
}
.cart-badge.show { opacity: 1; transform: scale(1); }

/* Dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown__trigger {
  display: flex; align-items: center; gap: 5px;
  border: none; background: none; padding: 0;
  font-family: 'Roboto', sans-serif; font-size: 16px;
  color: var(--white); cursor: pointer;
  letter-spacing: 0.01em;
}

.drop-icon {
  width: 14px; height: 14px;
  filter: brightness(0) invert(1);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.nav-dropdown.open .drop-icon { transform: rotate(180deg); }
/* White-navbar pages use drop-black.svg — no invert needed */
.navbar--white .drop-icon { filter: none; }

/* ── Unified dropdown card — white on all pages ── */
.nav-dropdown__menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 6px 0; min-width: 148px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 600;
}
.nav-dropdown.open .nav-dropdown__menu {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown__menu a {
  display: block; padding: 11px 18px;
  font-family: 'Roboto', sans-serif; font-size: 14px;
  font-weight: 400; letter-spacing: 0.01em;
  color: #111;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-dropdown__menu a:first-child { border-radius: 10px 10px 0 0; }
.nav-dropdown__menu a:last-child  { border-radius: 0 0 10px 10px; }
.nav-dropdown__menu a:only-child  { border-radius: 10px; }
.nav-dropdown__menu a:hover { background: #f4f4f4; color: #000; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 4px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--white); transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ═══════════════════════════════════════════════════════
   HERO — SCROLL-DRIVEN ANIMATION
   
   Performance notes:
   - will-change: transform, opacity on posters → GPU layer
   - No ::after pseudo-element → no label text rendered
   - transform + opacity only → compositor-only properties,
     zero layout/paint cost during scroll
═══════════════════════════════════════════════════════ */

.hero-scroll-wrapper {
  position: relative;
  height: 200vh; /* 100vh visible + 100vh scroll travel */
  /* NOTE: No z-index / isolation here — .hero itself (position:sticky + z-index:0)
     creates its own stacking context that contains mix-blend-mode and child z-indices.
     Keeping this wrapper z-index-free allows .features (z-index:1) to correctly
     paint over the sticky hero as the user scrolls, producing the overlap effect. */
}

.hero {
  position: sticky; top: 0;
  width: 100%; height: 100vh; min-height: 700px;
  overflow: hidden;
  z-index: 0;
}

/* ── Hero video background layer ──
   Sits below the orange gradient (z-index -1 relative to .hero__bg).
   object-fit:cover fills the full hero regardless of video dimensions.
   To revert: remove .hero__video-bg + .hero__video rules here, and
   remove the <div class="hero__video-bg"> block in index.html. */
.hero__video-bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  will-change: transform;
}

.hero__bg {
  position: absolute; inset: 0;
  /* Brand orange gradient — now sits above the video as a colour wash.
     Radial centre darkened slightly so video texture shows through the
     outer glow while the deep orange character is fully preserved. */
  background:
    radial-gradient(180.15% 97.5% at 50% 100%, rgba(255,133,19,0.55) 0%, rgba(124,4,0,0.75) 100%),
    linear-gradient(0deg, rgba(255,119,65,0.55) 12.98%, rgba(143,33,0,0.75) 100%);
  z-index: 1;
  will-change: transform;
  transform-origin: center center;
}

/* ── Hero z-index stack (all children of .hero, which is z-index:0 isolation root)
   0 → .hero__video-bg  (raw video fill)
   1 → .hero__bg        (orange gradient wash over video)
   2 → .hero__noise     (grain texture)
   3 → .hero__content   (headline + CTA — pointer-events:none so mouse passes to cards)
   4 → .hero__stack     (poster cards — above content so elementFromPoint hits them)
   ── */

/* ═══════════════════════════════════════════════════════
   HERO POSTER STACK — Apple Wallet style
   ─ Cards stacked, each peeking to the RIGHT of the front card
   ─ Porsche (index 5) is the frontmost, fully visible
   ─ Hover/tap slides a card LEFT toward the centre
   ─ Scroll back up → stack slides back out to the right
═══════════════════════════════════════════════════════ */

/* ── Hero poster stack ──────────────────────────────────────
   Design: 6 cards arranged in a loose, dynamic spread across
   the entire right half of the hero. Each card has its own
   fixed position (top/right/width set via CSS custom props
   from JS). Cards enter from the right on scroll.
   Hover: only the card directly under cursor peeks left.
─────────────────────────────────────────────────────────── */
.hero__stack {
  position: absolute;
  inset: 0;               /* fills the entire hero */
  z-index: 4;             /* above .hero__content (z-index:3) so elementFromPoint hits cards */
  overflow: visible;
  pointer-events: none;   /* individual cards capture their own events */
}

.hero__stack-card {
  position: absolute;
  /* top/right/width set inline by JS per card */
  height: auto;

  background-color: rgba(20, 10, 0, 0.15);

  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 10px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;

  /* Enters from the right */
  transform: translateX(110vw);
  opacity: 0;

  transition:
    transform  0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity    0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s ease;

  will-change: transform, opacity;
}

.hero__stack-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

/* Warm tint overlay — blends posters into the orange hero */
.hero__stack-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(200, 60, 0, 0.15) 0%,
    rgba(100, 20, 0, 0.08) 50%,
    transparent 100%
  );
  mix-blend-mode: multiply;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ── Settled: each card in its spread position ── */
.hero__stack-card.stack-settled {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

/* ── Peeked: slides left, lifts, loses tint ── */
.hero__stack-card.stack-peek {
  transform: translateX(-8vw) scale(1.04);
  box-shadow:
    -24px 32px 72px rgba(0, 0, 0, 0.6),
    0 8px 28px rgba(0, 0, 0, 0.4);
  z-index: 20 !important;
  transition-delay: 0s !important;
}
.hero__stack-card.stack-peek::after {
  opacity: 0;
}

/* ── Exit: slides back out right ── */
.hero__stack.stack-exiting .hero__stack-card.stack-settled {
  transform: translateX(110vw);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.55, 0, 1, 0.45),
    opacity   0.4s ease;
}

/* Base z-index per card */
.hero__stack-card[data-index="0"] { z-index: 1; }
.hero__stack-card[data-index="1"] { z-index: 2; }
.hero__stack-card[data-index="2"] { z-index: 3; }
.hero__stack-card[data-index="3"] { z-index: 4; }
.hero__stack-card[data-index="4"] { z-index: 5; }
.hero__stack-card[data-index="5"] { z-index: 6; }

/* Hero text */
.hero__content {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 3; padding: 0 64px 160px;
  will-change: opacity, transform;
  transform-origin: center bottom;
  /* Pass mouse events through to the poster cards behind */
  pointer-events: none;
}
.hero__content-inner {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  /* Restore pointer events for interactive children (buttons, links) */
  pointer-events: auto;
}

.hero__text-group {
  display: inline-block;
  will-change: transform; /* GPU layer for smooth JS animation */
}

.hero__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: 104px; line-height: 100%;
  letter-spacing: -0.025em; text-transform: uppercase;
  color: var(--white); margin-bottom: 32px;
}

/* Editorial italic accent — used inside headlines for the "soft voice" contrast */
.hero__headline .editorial-accent {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 0.88em; /* slightly smaller so italic sits gracefully next to bold caps */
}

.hero__sub {
  font-size: 16px; color: rgba(255,255,255,0.9);
  line-height: 150%; margin-bottom: 40px; max-width: 480px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero__actions {
  display: flex; gap: 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
.hero__sub.show,
.hero__actions.show { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 24px;
  font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 150%;
  cursor: pointer; border: none;
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; width: 0; height: 0;
  background: rgba(255,255,255,0.25); border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease; opacity: 0;
}
.btn:active::after { width: 200px; height: 200px; opacity: 1; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--white        { background: var(--white); border: 1px solid var(--white); color: var(--black); }
.btn--white:hover  { background: #eee; box-shadow: 0 6px 20px rgba(255,255,255,0.3); }

.btn--outline-white       { background: transparent; border: 1px solid var(--white); color: var(--white); }
.btn--outline-white:hover { background: rgba(255,255,255,0.12); }

.btn--outline-black       { background: transparent; border: 1px solid var(--black); color: var(--black); }
.btn--outline-black:hover { background: var(--black); color: var(--white); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

.btn--filled-black       { background: var(--black); border: 1px solid var(--black); color: var(--white); }
.btn--filled-black:hover { background: #222; box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

.btn--link               { background: none; border: none; color: var(--black); padding: 0; gap: 6px; }
.btn--link .arrow        { transition: transform var(--transition); }
.btn--link:hover .arrow  { transform: translateX(4px); }
.btn--link:hover         { transform: none; }


/* ═══════════════════════════════════════════════════════
   SECTION SHARED
   All sections sit above the hero (z-index 1) with solid
   white backgrounds — they slide over the pinned hero as
   the user scrolls, creating the overlap reveal effect.
═══════════════════════════════════════════════════════ */
.section {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; padding: 112px 64px; gap: 80px;
  position: relative; z-index: 1;
  background: var(--paper);
}

/* Card-slide effect — the first white section slides over the pinned
   hero with rounded top corners and a shadow, giving the impression
   of a physical card being laid on top of the hero. */
.features {
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow: 0 -24px 60px rgba(0,0,0,0.28);
}
.container {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 80px;
}
.section-title {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; max-width: 768px; width: 100%; text-align: center;
}
.tagline {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}
.section-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 100%;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--black);
}
/* Editorial italic accent inside section headings */
.section-heading .editorial-accent {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.02em;
}
.section-text { font-size: 18px; line-height: 150%; color: var(--black); }


/* ═══════════════════════════════════════════════════════
   FEATURES / WHY AVNORE
═══════════════════════════════════════════════════════ */
.features__row { display: flex; flex-direction: row; gap: 48px; width: 100%; }

.feature-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 24px; padding: 32px 24px; border: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.feature-col:hover {
  border-color: var(--grey-mid); box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}
.feature-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feature-icon img { width: 48px; height: 48px; object-fit: contain; }

.feature-col__heading { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 110%; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.feature-col__text    { font-size: 16px; line-height: 150%; text-align: center; color: #333; }

/* View All only — centred */
.features__actions {
  display: flex; justify-content: center; align-items: center; width: 100%;
}


/* ═══════════════════════════════════════════════════════
   PRODUCTS
═══════════════════════════════════════════════════════ */
.products          { background: var(--bone); }
.products__content { width: 100%; display: flex; flex-direction: column; gap: 48px; }
.products__row     { display: flex; flex-direction: row; gap: 48px; width: 100%; }

.product-card { flex: 1; display: flex; flex-direction: column; gap: 16px; cursor: pointer; }

.product-card__img-wrap {
  width: 100%; aspect-ratio: 394 / 486;
  position: relative; overflow: hidden;
  background: var(--grey-light);
}

/* Primary + hover images stacked — no overlay button */
.product-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.product-card__img--primary { opacity: 1; z-index: 1; transform: scale(1); }
.product-card__img--hover   { opacity: 0; z-index: 2; transform: scale(1.04); }

.product-card:hover .product-card__img--primary { opacity: 0; transform: scale(1.04); }
.product-card:hover .product-card__img--hover   { opacity: 1; transform: scale(1); }

.product-card__body  { display: flex; flex-direction: column; gap: 16px; }
.product-card__name  { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 120%; letter-spacing: 0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.product-card__price { font-family: var(--font-mono); font-weight: 400; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--black); }
.product-card .btn   { width: 100%; padding: 8px 20px; font-size: 16px; }
.products__footer    { display: flex; justify-content: center; }


/* ═══════════════════════════════════════════════════════
   HERITAGE
═══════════════════════════════════════════════════════ */
.heritage {
  padding: 0;
  position: relative; z-index: 1;
  background: var(--paper);
}
.heritage__container {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: row; min-height: 720px;
  padding: 0 64px; gap: 80px; align-items: center;
}
.heritage__left {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 112px 0; gap: 32px;
}
.heritage__content { max-width: 560px; display: flex; flex-direction: column; gap: 32px; }
.heritage__heading { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 100%; letter-spacing: -0.025em; text-transform: uppercase; color: var(--black); }
.heritage__text    { font-size: 18px; line-height: 160%; color: #333; }

.heritage__right {
  width: 560px; flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background: #111; position: relative; overflow: hidden;
}
.heritage__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}


/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.faq__title   { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.faq__content { width: 100%; display: flex; flex-direction: column; gap: 64px; }
.faq__row     { display: flex; flex-direction: row; gap: 48px; width: 100%; }

.faq-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 24px; padding: 24px; border: 1px solid transparent;
  transition: border-color var(--transition), transform var(--transition);
}
.faq-item:hover { border-color: var(--grey-mid); transform: translateY(-3px); }

.faq-icon     { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.faq-icon img { width: 48px; height: 48px; object-fit: contain; }

.faq-item__question { font-weight: 700; font-size: 18px; line-height: 150%; text-align: center; color: var(--black); }
.faq-item__answer   { font-size: 16px;  line-height: 150%; text-align: center; color: #444; }


/* ═══════════════════════════════════════════════════════
   CONTACT CTA
═══════════════════════════════════════════════════════ */
.contact-cta {
  padding: 0;
  position: relative; z-index: 1;
  background: var(--paper);
}
.contact-cta__container {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: row; min-height: 720px;
  padding: 0 64px; gap: 80px; align-items: center;
}
.contact-cta__left {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 112px 0; gap: 32px;
}
.contact-cta__content { max-width: 560px; display: flex; flex-direction: column; gap: 32px; }
.contact-cta__heading { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 100%; letter-spacing: -0.025em; text-transform: uppercase; color: var(--black); }
.contact-cta__text    { font-size: 18px; line-height: 150%; color: #333; margin-top: 8px; }

.contact-cta__right {
  width: 560px; flex-shrink: 0; min-height: 560px;
  position: relative; overflow: hidden;
}
.contact-cta__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}


/* ═══════════════════════════════════════════════════════
   CART DRAWER
═══════════════════════════════════════════════════════ */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 800; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }

.cart-drawer {
  position: fixed; top: 0; right: 0;
  width: 400px; height: 100%;
  /* Liquid Glass cart: frosted white panel, content visible through it */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: -4px 0 40px rgba(0, 0, 0, 0.18);
  z-index: 900; transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer__header {
  padding: 24px; border-bottom: 1px solid var(--grey-mid);
  display: flex; align-items: center; justify-content: space-between;
}
.cart-drawer__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }

.cart-close {
  width: 36px; height: 36px; background: none; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--black); transition: opacity 0.2s;
}
.cart-close:hover { opacity: 0.5; }

.cart-drawer__items { flex: 1; overflow-y: auto; padding: 24px; }
.cart-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%; gap: 12px; color: #aaa;
}
.cart-empty p { font-size: 14px; }

.cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--grey-light); }
.cart-item__img   { width: 72px; height: 72px; background: var(--grey-light); flex-shrink: 0; overflow: hidden; border-radius: 4px; }
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item__info  { flex: 1; }
.cart-item__name  { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.cart-item__meta  { font-size: 12px; color: #888; margin-bottom: 4px; letter-spacing: 0.01em; }
.cart-item__price { font-size: 14px; color: #555; }

/* Delivery estimate in cart */
.cart-delivery {
  font-size: 13px; color: #555;
  background: none; padding: 0;
  margin: 0 0 10px; line-height: 1.4;
}

/* Payment logos strip in cart */
.cart-payment-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: 8px; margin: 0 0 14px;
}
.cart-payment-logo-img {
  height: 22px; width: auto;
  object-fit: contain; display: block;
  opacity: 0.85;
}
.cart-item__remove {
  background: none; border: none; cursor: pointer;
  color: #aaa; font-size: 20px; line-height: 1; padding: 0;
  align-self: flex-start; transition: color 0.2s;
}
.cart-item__remove:hover { color: var(--black); }

.cart-drawer__footer { padding: 24px; border-top: 1px solid var(--grey-mid); }
.cart-total {
  display: flex; justify-content: space-between;
  font-weight: 600; font-size: 18px; margin-bottom: 4px;
}
.cart-shipping-note {
  font-size: 13px; color: #888; margin: 0 0 16px; letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--black); color: var(--white);
  padding: 14px 28px; font-size: 15px;
  z-index: 1000; opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ═══════════════════════════════════════════════════════
   REVIEWS CAROUSEL
═══════════════════════════════════════════════════════ */
.reviews-section {
  background: var(--black);
  color: var(--white);
  padding: 80px 0 84px;
  overflow: hidden;
}
.reviews-section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.reviews-section__heading {
  font-family: var(--font-display, 'PP Formula Condensed', sans-serif);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}

/* Track wrapper — clips overflow and enables drag */
.reviews-track-wrap {
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.reviews-track-wrap:active { cursor: grabbing; }

/* Scrolling track */
.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

/* Individual review card */
.review-item {
  flex-shrink: 0;
  width: 320px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-item__stars {
  display: flex;
  gap: 3px;
}
.review-item__star {
  font-size: 14px;
  color: #f59e0b;
}
.review-item__star--empty {
  color: rgba(255,255,255,0.25);
}
.review-item__quote {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  flex: 1;
}
.review-item__media {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.review-item__media--video {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.review-item__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.review-item__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.review-item__location {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 600px) {
  .review-item { width: 270px; }
  .reviews-section { padding: 60px 0 64px; }
}


/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer {
  width: 100%; padding: 80px 64px;
  background: var(--paper); border-top: 1px solid var(--grey-mid);
  position: relative; z-index: 1;
  overflow-x: hidden;
}
.footer__container {
  max-width: var(--max-w); width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 64px;
}
.footer__top { display: flex; flex-direction: row; gap: 80px; align-items: flex-start; }

.footer__newsletter {
  width: 460px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.footer__brand { display: flex; align-items: center; }
.footer__brand img { height: 40px; width: auto; }
.footer__brand-fallback {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 20px; letter-spacing: 3px; color: var(--black);
}
.footer__location {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  margin-bottom: 4px;
}
.footer__location-word {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
}
.footer__location-place {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 28px;
  font-weight: 500;
  font-style: italic;
  color: var(--black);
}
.footer__tagline  { font-size: 16px; line-height: 150%; color: var(--black); }
.footer__form     { display: flex; flex-direction: column; gap: 10px; }
.footer__form-row { display: flex; gap: 0; }
.footer__input {
  flex: 1; padding: 12px 14px;
  border: 1px solid var(--black); border-right: none;
  font-family: 'Roboto', sans-serif; font-size: 16px;
  outline: none; background: transparent;
  transition: border-color var(--transition);
}
.footer__input:focus { border-color: var(--gold); }
.footer__input::placeholder { color: rgba(0,0,0,0.4); }
.footer__disclaimer { font-size: 12px; line-height: 150%; color: #666; }

/* Newsletter consent checkbox */
.footer__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-top: 8px;
}
.footer__consent-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--black);
  cursor: pointer;
}
.footer__consent-text {
  font-size: 12px;
  line-height: 150%;
  color: #666;
}
.footer__consent-link {
  color: var(--black);
  text-decoration: underline;
}

.footer__links { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.footer__cols  { display: flex; flex-direction: row; gap: 40px; }
.footer__col   { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.footer__col-title { font-weight: 600; font-size: 16px; color: var(--black); }
.footer__link-list { display: flex; flex-direction: column; }
.footer__link-list a {
  padding: 7px 0; font-size: 14px; line-height: 150%; color: #333;
  transition: color var(--transition), padding-left var(--transition);
}
.footer__link-list a:hover { color: var(--black); padding-left: 4px; }

.footer__social-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 14px; color: #333;
  transition: color var(--transition), gap var(--transition);
}
.footer__social-link:hover { color: var(--black); gap: 14px; }
.footer__social-link img { width: 20px; height: 20px; object-fit: contain; }

.footer__brand-notice {
  border-top: 1px solid rgba(0,0,0,0.12);
  padding: 20px 0 0;
  margin-bottom: 28px;
}
.footer__brand-notice p {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--mute);
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  text-transform: none;
}

.footer__bottom  { display: flex; flex-direction: column; gap: 24px; }
.footer__divider { width: 100%; height: 1px; background: var(--black); }
.footer__credits {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer__copy  { font-size: 14px; color: var(--black); }
.footer__payment {
  display: flex; flex-direction: row; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.footer__payment-icon {
  display: block;
  height: 24px !important;
  width: auto !important;
  max-width: 48px !important;
  max-height: 24px !important;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.footer__payment-icon:hover { opacity: 1; }
.footer__legal { display: flex; gap: 24px; }
.footer__legal a {
  font-size: 14px; text-decoration: underline; color: var(--black);
  transition: opacity var(--transition);
}
.footer__legal a:hover { opacity: 0.6; }


/* ═══════════════════════════════════════════════════════
   HERO NOISE OVERLAY (both desktop + mobile)
   Multi-colour noise: size 1, density 100%, opacity 15%
═══════════════════════════════════════════════════════ */
.hero__noise {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* ═══════════════════════════════════════════════════════
   MOBILE DRAWER MENU  — Option B (right-side panel)
═══════════════════════════════════════════════════════ */
.mobile-menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 700; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: all; }

/* Panel slides in from the LEFT */
.mobile-menu {
  position: fixed; top: 0; left: 0;
  width: 82vw; max-width: 340px; height: 100%;
  background: var(--paper);
  border-radius: 0 20px 20px 0;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.18);
  z-index: 800;
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu__inner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 28px 28px 32px;
}

/* Top row: logo left, close right */
.mobile-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 36px;
}
.mobile-menu__logo {
  display: flex; align-items: center;
}
.mobile-menu__logo img { height: 28px; width: auto; }

.mobile-menu__close {
  width: 36px; height: 36px;
  background: var(--bone); border: none; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--black);
  transition: background 0.2s;
}
.mobile-menu__close:hover { background: var(--bone-2); }

/* Nav links — big, Sora, with a fine divider */
.mobile-menu__nav {
  display: flex; flex-direction: column;
  width: 100%; flex: 1;
}
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0;
  font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600;
  color: var(--black); text-decoration: none;
  border-bottom: 1px solid var(--bone-2);
  letter-spacing: -0.01em;
  transition: color 0.15s, padding-left 0.2s;
}
.mobile-menu__link:last-child { border-bottom: none; }
.mobile-menu__link:hover { color: #555; padding-left: 4px; }

/* Support / accordion trigger */
.mobile-menu__support-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; width: 100%;
  font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600;
  color: var(--black); background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--bone-2);
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
.mobile-menu__support-trigger:hover { color: #555; }
.mobile-menu__support-trigger .drop-icon {
  width: 18px; height: 18px;
  filter: brightness(0);
  transition: transform 0.25s;
  opacity: 0.4;
}
.mobile-menu__support-trigger.open .drop-icon { transform: rotate(180deg); }

.mobile-menu__subnav {
  display: none; flex-direction: column;
  padding: 8px 0 4px 0; gap: 0;
  border-bottom: 1px solid var(--bone-2);
}
.mobile-menu__subnav.open { display: flex; }
.mobile-menu__subnav a {
  font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 400;
  color: #555; text-decoration: none;
  padding: 10px 0 10px 4px;
  border-bottom: 1px solid var(--grey-light);
  transition: color 0.15s;
}
.mobile-menu__subnav a:last-child { border-bottom: none; }
.mobile-menu__subnav a:hover { color: var(--black); }

/* CTA button pinned to bottom */
.mobile-menu__cta {
  display: flex; justify-content: center; align-items: center;
  margin-top: 32px;
  padding: 15px 24px; width: 100%;
  background: var(--black); border: none; border-radius: 8px;
  font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.mobile-menu__cta:hover { background: #222; transform: translateY(-1px); }


/* ═══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ┌──────────────────────────────────────────────────┐
   │  0 – 499px   →  Mobile                           │
   │  500 – 699px →  Adjusted mobile (video square)   │
   │  700 – 999px →  Desktop hero + 2-col catalog     │
   │  1000px+     →  Full desktop (3-col catalog)      │
   └──────────────────────────────────────────────────┘
═══════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────
   ≤ 999px  — shared tablet/mobile rules
   Stacks heritage, contact, footer; keeps sections tidy.
   Also scales down desktop poster sizes so they don't
   clutter the text during the scroll animation at
   narrower viewport widths (700–999px).
───────────────────────────────────────────────────── */
@media (max-width: 999px) {

  /* Desktop poster vw sizing handles tablet scaling automatically —
     no pixel overrides needed here. */

  /* Heritage: stack vertically, text on top, video below */
  .heritage__container {
    flex-direction: column;
    padding: 64px 40px 0;
    gap: 0;
    min-height: unset;
    align-items: flex-start;
  }
  .heritage__left {
    width: 100%; padding: 48px 0; gap: 24px;
  }
  .heritage__content { max-width: 100%; gap: 24px; }
  .heritage__heading { font-size: 40px; }
  .heritage__text    { font-size: 16px; }
  .heritage__right {
    width: 100%;
    min-height: unset;
    height: unset;
    aspect-ratio: 1 / 1;        /* always square */
    flex-shrink: 0;
  }

  /* Contact CTA: stack vertically */
  .contact-cta__container {
    flex-direction: column;
    padding: 64px 40px 0;
    gap: 0;
    min-height: unset;
    align-items: flex-start;
  }
  .contact-cta__left {
    width: 100%; padding: 48px 0; gap: 24px;
  }
  .contact-cta__content { max-width: 100%; gap: 20px; }
  .contact-cta__heading { font-size: 40px; }
  .contact-cta__text    { font-size: 16px; }
  .contact-cta__right {
    width: 100%; min-height: unset;
    height: 375px; flex-shrink: 0;
  }

  /* Footer */
  .footer__top        { flex-direction: column; }
  .footer__newsletter { width: 100%; }
}


/* ─────────────────────────────────────────────────────
   < 700px  — mobile hero (text centred, scroll animation)
   Hamburger nav, stacked sections
───────────────────────────────────────────────────── */
@media (max-width: 699px) {

  /* ── Navbar ── */
  .navbar { padding: 0 20px; height: 64px; }
  .navbar__links { display: none; }
  .navbar__right .nav-dropdown { display: none; }

  /* Three-zone navbar: hamburger | LOGO | cart
     We use a flex row on .navbar__inner.
     Hamburger sits naturally first (order:-1 on the left zone).
     Logo is position:absolute centred (already in base CSS).
     Cart stays in .navbar__right which gets margin-left:auto. */
  /* navbar__inner: hamburger left | logo absolute centre | cart right */
  .navbar__inner {
    position: relative;   /* needed for logo absolute centring */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Hamburger: first child in DOM = natural left, fixed width matches cart */
  .hamburger {
    display: flex;
    flex-shrink: 0;
    width: 40px;          /* same as cart-btn so logo lands dead-centre */
  }
  /* Logo: absolutely centred — unaffected by sibling sizes */
  .navbar__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
  }
  .navbar__logo-img { height: 24px; }
  /* Cart: last item, pushed naturally to right by justify-content:space-between */
  .navbar__right {
    margin-left: 0;
    gap: 0;
  }


  /* ── Mobile hero: no posters, text centred and always visible ── */
  .hero-scroll-wrapper { height: auto; }
  .hero {
    position: relative;
    width: 100%;
    height: 627px;
    min-height: unset;
    overflow: hidden;
    top: unset;
  }

  /* Mobile: hide the poster stack entirely */
  .hero__stack {
    display: none;
  }

  /* Text: centred, always fully visible, no animation */
  .hero__content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 0 20px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  .hero__content-inner {
    width: 100%; max-width: 335px;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: 20px;
  }
  .hero__text-group {
    display: flex; flex-direction: column;
    align-items: center; gap: 20px;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto;
  }
  .hero__headline {
    font-family: var(--font-display);
    font-weight: 800; font-size: 44px; line-height: 105%;
    letter-spacing: -0.02em; text-transform: uppercase;
    color: var(--white); margin-bottom: 0; text-align: center;
  }
  .hero__sub {
    font-size: 16px; line-height: 150%;
    color: var(--white); margin-bottom: 0;
    max-width: 335px; text-align: center;
    opacity: 1 !important; transform: none !important;
    transition: none !important;
  }
  .hero__actions {
    display: flex; flex-direction: row;
    gap: 16px; justify-content: center;
    opacity: 1 !important; transform: none !important;
    transition: none !important;
  }
  .hero__actions .btn { padding: 12px 24px; font-size: 16px; }

  /* ── Section sizing ── */
  .section { padding: 64px 20px; gap: 48px; }
  .section-heading { font-size: 36px; }
  .section-text    { font-size: 16px; }
  .tagline         { font-size: 16px; }

  /* ── Features ── */
  .features__row { flex-direction: column; gap: 48px; }
  .feature-col   { padding: 0; gap: 20px; }
  .feature-col__heading { font-size: 24px; }

  /* ── Heritage mobile ── */
  .heritage__container {
    padding: 64px 20px 0;
    gap: 0;
  }
  .heritage__left  { padding: 0 0 40px; }
  .heritage__heading { font-size: 36px; }
  .heritage__right {
    width: 100%; min-height: unset; height: unset;
    aspect-ratio: 1 / 1;
  }

  /* ── Contact CTA mobile ── */
  .contact-cta__container {
    padding: 64px 20px 0;
    gap: 0;
  }
  .contact-cta__left   { padding: 0 0 40px; }
  .contact-cta__heading { font-size: 36px; }
  .contact-cta__right {
    width: 100%; min-height: unset; height: 375px;
  }

  /* ── FAQ ── */
  .faq__row { flex-direction: column; gap: 48px; }
  .faq-item { padding: 0; gap: 20px; }
  .faq-item__question { font-size: 16px; font-weight: 700; }
  .faq-item__answer   { font-size: 16px; }

  /* ── Footer ── */
  .footer { padding: 48px 20px; }
  .footer__container { gap: 48px; }
  .footer__top { flex-direction: column; gap: 48px; }
  .footer__newsletter { width: 100%; gap: 20px; }
  .footer__form-row   { flex-direction: column; gap: 16px; }
  .footer__input      { width: 100%; border-right: 1px solid var(--black); }
  .footer__submit {
    width: 100%; padding: 12px 24px;
    border: 1px solid var(--black);
    font-family: 'Roboto', sans-serif; font-size: 16px;
    background: transparent; color: var(--black); cursor: pointer;
  }
  .footer__links {
    flex-direction: column; gap: 28px;
  }
  .footer__location-word,
  .footer__location-place { font-size: 22px; }
  .footer__cols { gap: 24px; flex-wrap: wrap; }
  .footer__col { flex: 1; min-width: 100px; }
  .footer__col-title   { font-size: 15px; font-weight: 600; }
  .footer__link-list a { font-size: 13.5px; padding: 7px 0; }
  .footer__social-link { font-size: 13.5px; padding: 7px 0; }
  .footer__credits { flex-direction: column; gap: 16px; align-items: flex-start; }
  .footer__payment { gap: 8px; }
  .footer__payment-icon { height: 20px; }
  .footer__legal   { flex-direction: row; gap: 16px; flex-wrap: wrap; }
  .footer__copy    { font-size: 14px; }
  .footer__legal a { font-size: 14px; }
}


/* ─────────────────────────────────────────────────────
   < 700px  — 2-column product catalog (mobile only)
   KEY TECHNIQUE: Make products__content the CSS grid,
   not the rows. The row divs become display:contents so
   all 6 cards flow into one flat 2-column grid — no
   orphaned singles no matter how many cards per row.
   Tablet (700–999px) and desktop keep their own layout.
───────────────────────────────────────────────────── */
@media (max-width: 699px) {

  /* Turn the content wrapper into the 2-col grid */
  .products__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 4vw, 32px);
  }

  /* Row divs become transparent to grid layout —
     their children (cards) flow directly into the grid */
  .products__row {
    display: contents;
  }

  /* Cards fill their grid cell cleanly */
  .product-card {
    flex: unset;
    width: 100%;
    min-width: 0;
  }
  .product-card__img-wrap {
    width: 100%;
    height: unset;
    aspect-ratio: 394 / 486;
  }

  /* Prevent long titles from pushing card height and misaligning grid */
  .product-card__name {
    font-size: 14px;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-card__price { font-size: 16px; }
  .product-card .btn   { font-size: 14px; padding: 8px 12px; }

  /* Footer (view all button) needs to span both columns */
  .products__footer {
    grid-column: 1 / -1;
  }
}


/* ═══════════════════════════════════════════════════════
   LANGUAGE TOGGLE
═══════════════════════════════════════════════════════ */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 0;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  color: #000; /* black on all pages by default */
}

/* Homepage: navbar is transparent/black-bg — toggle must be white */
.navbar:not(.navbar--white) .lang-btn,
.navbar:not(.navbar--white) .lang-sep {
  color: #fff;
}

.lang-btn:hover {
  opacity: 0.7;
}

.lang-btn--active {
  opacity: 1;
}

.lang-sep {
  font-size: 11px;
  opacity: 0.35;
  color: inherit;
  pointer-events: none;
  line-height: 1;
}

/* Mobile: hide lang toggle in hamburger area, keep in navbar right */
@media (max-width: 699px) {
  .lang-toggle {
    margin-right: 10px;
  }
  .lang-btn {
    font-size: 11px;
  }
}


/* ─────────────────────────────────────────────────────
   ≤ 390px — small phone pass (iPhone SE, Galaxy A-series)
   Tighten font sizes, fix cart drawer overflow, ease
   padding so nothing feels cramped on narrow viewports.
───────────────────────────────────────────────────── */
@media (max-width: 390px) {

  /* Cart drawer must never exceed viewport width */
  .cart-drawer { width: 100vw; border-left: none; }

  /* Hero headline — tighter on small screens */
  .hero__headline { font-size: 34px; }
  .hero__content-inner { max-width: 100%; padding: 0 4px; }

  /* Hero CTA buttons — stack vertically on very small screens
     so "Shop Now" and "View Collection" don't get squashed */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero__actions .btn { width: 100%; max-width: 280px; }

  /* Section headings */
  .section-heading { font-size: 30px; }
  .section { padding: 52px 16px; }

  /* Product cards — slightly tighter gap on very small screens */
  .products__content { gap: 12px; }
  .product-card__name { font-size: 13px; }
  .product-card .btn  { font-size: 13px; padding: 8px 10px; }

  /* Footer — tighter on very small screens */
  .footer__location-word,
  .footer__location-place { font-size: 20px; }
  .footer__cols { gap: 16px; }
  .footer__col { min-width: 80px; }
  .footer__col-title   { font-size: 13px; }
  .footer__link-list a { font-size: 12.5px; }
  .footer__social-link { font-size: 12.5px; }

  /* Heritage & contact-cta sections */
  .heritage__heading    { font-size: 30px; }
  .contact-cta__heading { font-size: 30px; }
  .heritage__right  { height: auto; aspect-ratio: 1 / 1; }
  .contact-cta__right { height: 300px; }

  /* FAQ */
  .faq-item__question { font-size: 15px; }
  .faq-item__answer   { font-size: 15px; }

  /* Trust strip in cart — shrink icons and text for narrow drawer */
  .cart-trust { padding: 8px 8px; gap: 2px; }
  .cart-trust__item { font-size: 9px; }
  .cart-trust__item svg { width: 14px; height: 14px; }
}


/* ═══════════════════════════════════════════════════════
   GERMAN HERO HEADLINE — reduce size to fit longer text
═══════════════════════════════════════════════════════ */
/* Barlow Condensed is narrower than Sora — German text fits better now */
:lang(de) .hero__headline {
  font-size: 88px;
}

@media (max-width: 699px) {
  :lang(de) .hero__headline {
    font-size: 36px;
  }
}


/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL
   Elements start invisible + shifted down 30px.
   IntersectionObserver adds .reveal--visible when in view.
   transition is compositor-only (opacity + transform).
═══════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger product grid items */
.product-grid__item.reveal { transition-delay: calc(var(--item-index, 0) * 0.08s); }


/* ═══════════════════════════════════════════════════════
   HERO HEADLINE WORD ANIMATION
   Words sit inline-block naturally.
   JS adds .headline-word--animate when hero reaches 85%.
   Each word slides up and fades in with staggered delay.
═══════════════════════════════════════════════════════ */
.headline-word {
  display: inline-block;
}
.headline-word--animate {
  animation: wordReveal 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes wordReveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ─── Cart trust strip ───────────────────────────────── */
.cart-trust {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--grey-light);
  border-radius: 8px;
  gap: 4px;
}
.cart-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--stone);
  text-align: center;
  line-height: 1.2;
}
.cart-trust__item svg {
  color: var(--gold);
  flex-shrink: 0;
}

/* Cart pre-checkout legal notice */
.cart-legal-notice {
  font-size: 11px;
  line-height: 1.5;
  color: var(--stone);
  text-align: center;
  padding: 8px 0 12px;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion
   Disables all decorative animations for users who have
   "Reduce Motion" enabled in their OS accessibility settings.
   Scroll-driven opacity/transform still work (driven by JS,
   not CSS animation) but all CSS keyframes are silenced.
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .hero__stack-card { transition: none !important; }
  .hero__stack-card.stack-settled { transform: translateX(0) !important; opacity: 1 !important; }
  .hero__stack.stack-exiting .hero__stack-card.stack-settled { transform: translateX(110vw) !important; opacity: 0 !important; }
  .reveal { opacity: 1; transform: none; }
  .reveal.in-view { opacity: 1; transform: none; }
  .headline-word--animate { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY — :focus-visible
   Keyboard / screen-reader focus rings for every interactive
   element. Uses orange brand colour so it stays on-brand
   while meeting WCAG 2.1 AA (3:1 contrast minimum for UI).
   Uses :focus-visible so mouse users never see the ring.
═══════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Buttons already have their own shape — tighten the ring */
.btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Cart icon, close buttons, lang toggles — small targets */
.navbar__cart-btn:focus-visible,
.mobile-menu__close:focus-visible,
.lang-btn:focus-visible,
.cart-close:focus-visible,
.cart-remove:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Product cards — use a contained inset ring so it doesn't spill */
.product-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 0px;
  border-radius: 4px;
}

/* Footer newsletter input */
.footer__input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 0px;
}

/* Nav links */
.navbar__link:focus-visible,
.mobile-menu__link:focus-visible,
.footer__link:focus-visible,
.legal-sidebar__link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}
/* ── Announcement bar ────────────────────────────────────────── */
.announcement-bar {
  width: 100%;
  background: #111;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
}

/* ── Discount banner — animated ticker ───────────────────────── */
.discount-banner {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  height: 36px;
  display: flex;
  align-items: center;
}

.discount-banner__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 28s linear infinite;
  will-change: transform;
}

.discount-banner__track:hover {
  animation-play-state: paused;
}

.discount-banner__item {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 28px;
  flex-shrink: 0;
}

.discount-banner__sep {
  font-size: 10px;
  opacity: 0.5;
  flex-shrink: 0;
  padding: 0 4px;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* When banner/bar is visible, shift navbar down via JS-added class */
body.has-announcement .navbar { top: 33px; }
body.has-banner        .navbar { top: 36px; }
body.has-announcement.has-banner .navbar { top: 69px; }

/* ══════════════════════════════════════════════
   SEARCH BUTTON (navbar)
══════════════════════════════════════════════ */
.search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer;
  color: var(--white);
  transition: opacity 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.search-btn:hover { opacity: 0.65; }
.navbar--white .search-btn { color: #000; }

/* ══════════════════════════════════════════════
   SEARCH OVERLAY + DRAWER
══════════════════════════════════════════════ */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.search-overlay.open { opacity: 1; pointer-events: all; }

.search-drawer {
  position: fixed; top: 0; right: 0;
  width: 100%; max-width: 520px; height: 100%;
  background: #fff;
  z-index: 1101;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.1);
}
.search-drawer.open { transform: translateX(0); }

.search-drawer__header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.search-drawer__input-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #f5f5f5; border-radius: 8px;
  padding: 0 14px; height: 46px;
}
.search-drawer__icon { color: rgba(0,0,0,0.4); flex-shrink: 0; }
.search-drawer__input {
  flex: 1; border: none; background: none;
  font-family: 'Roboto', sans-serif; font-size: 15px;
  color: #111; outline: none;
}
.search-drawer__input::placeholder { color: rgba(0,0,0,0.35); }
.search-drawer__input::-webkit-search-cancel-button { display: none; }

.search-drawer__close {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(0,0,0,0.5); border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.search-drawer__close:hover { background: #f0f0f0; color: #000; }

.search-drawer__results {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.search-drawer__no-results {
  padding: 32px 20px; text-align: center;
  font-size: 14px; color: rgba(0,0,0,0.45);
}

.search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  text-decoration: none; color: inherit;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.search-result:hover { background: #f7f7f7; }
.search-result__img {
  width: 56px; height: 72px; object-fit: cover;
  border-radius: 4px; flex-shrink: 0;
  background: #f0f0f0;
}
.search-result__img--empty { background: #ebebeb; }
.search-result__info { display: flex; flex-direction: column; gap: 4px; }
.search-result__title { font-size: 14px; font-weight: 500; color: #111; }
.search-result__price { font-size: 13px; color: rgba(0,0,0,0.5); }

@media (max-width: 600px) {
  .search-drawer { max-width: 100%; }
}