/* ============================================================
   RADICAL — MEN'S JEWELLERY
   Global Stylesheet · Phase 1: Shell & Navigation
   ============================================================ */

/* ------------------------------------------------------------
   0. CSS RESET & ROOT VARIABLES
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Brand Colors ──────────────────────────── */
  --color-bg:           #F6F6F6;       /* Exact Dior editorial off-white */
  --color-bg-alt:       #EEEEEE;       /* Dior alternate neutral */
  --color-text:         #1A1A1A;       /* Primary text / charcoal */
  --color-text-muted:   #7B8487;       /* Secondary / muted text */
  --color-text-faint:   #ACACAC;       /* Placeholder labels */
  --color-border:       #E8E8E8;       /* Nav border / dividers */
  --color-border-light: #EFEFEF;       /* Very light borders */
  --color-white:        #FFFFFF;       /* Pure white */
  --color-overlay:      rgba(26,26,26,0.35); /* Dark image overlay */
  --color-accent:       #250902;             /* Deep maroon — used sparingly */
  --color-saffron:      #C9872F;             /* Saffron-ochre — warm brand accent */
  --color-crimson:      #8B2414;             /* Dried-blood crimson — secondary accent */

  /* ── Typography ────────────────────────────── */
  --font-body:    "Playfair Display", "Cormorant Garamond", serif;
  --font-display: "Bodoni Moda", "Cormorant Garamond", serif;
  --font-brand:   "Cormorant Garamond", serif;
  --font-ui:      "Questrial", sans-serif;
  --font-size-body:      17px;
  --font-size-label:     13px;
  --font-size-nav-brand: 24px;
  --line-height-body:    1.6;

  /* ── Navigation ────────────────────────────── */
  --nav-height:          60px;
  --nav-height-scrolled: 48px;
  --nav-bg:              var(--color-white);
  --nav-border:          1px solid var(--color-border);
  --nav-shadow-idle:     none;
  --nav-shadow-scrolled: 0 1px 6px rgba(0, 0, 0, 0.06);
  --nav-brand-size:      22px;
  --nav-brand-size-sm:   17px;
  --nav-icon-gap:        16px;
  --nav-transition:      0.35s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Spacing System ────────────────────────── */
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-20:   20px;
  --space-24:   24px;
  --space-32:   32px;
  --space-40:   40px;
  --space-60:   60px;
  --space-80:   80px;
  --space-100:  100px;

  /* ── Layout ────────────────────────────────── */
  --max-width-content:  1440px;
  --gutter-desktop:     48px;
  --gutter-mobile:      20px;

  /* ── Animation ─────────────────────────────── */
  --ease-brand:    cubic-bezier(0.31, 0, 0.13, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
}


/* ------------------------------------------------------------
   1. BASE STYLES
   ------------------------------------------------------------ */
html {
  font-size: var(--font-size-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  max-width: 100%;
}

/* Pointer-events lockout during Barba page transitions — scoped to page
   containers only so cart drawer, nav, and modals stay interactive */
.is-transitioning [data-barba="container"] {
  pointer-events: none;
}


/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
a:hover { opacity: 0.6; }
a:focus-visible {
  outline: 1.5px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Buttons reset */
button {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
button:focus-visible {
  outline: 1.5px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Images */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists */
ul, ol { list-style: none; }


/* ------------------------------------------------------------
   2. SCROLL PROGRESS BAR
   ------------------------------------------------------------ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background-color: var(--color-accent);
  width: 0%; /* updated via JS */
  z-index: 3000;
  transition: width 0.1s ease-out; /* smooth follow */
  pointer-events: none;
}

/* ------------------------------------------------------------
   3. STICKY NAVIGATION
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: var(--nav-height);
  background-color: transparent; /* Always transparent — never a solid bar */
  border-bottom: none;
  box-shadow: none;
  color: var(--color-text); /* Charcoal by default — most pages are light */
  transform: translateY(0);
  transition:
    height var(--nav-transition),
    color 0.6s var(--ease-standard),
    transform 0.4s var(--ease-brand);
  will-change: transform, color;
}

/* Over a dark section (video/image hero) — flips text/icons to white.
   Toggled by JS (updateNav in script.js) based on scroll position relative
   to whatever dark hero element is present on the current page. */
.nav.is-on-dark {
  color: #FFFFFF;
}

/* Past the hero — nav shrinks slightly (background stays transparent) */
.nav.is-scrolled {
  height: var(--nav-height-scrolled);
}

/* PDP-only top vignette — gallery imagery brightness varies shot to shot,
   so this guarantees the white nav text stays legible without needing a
   solid bar. Fades out via the sibling selector once .is-on-dark clears
   (i.e. once scrolled past the gallery). */
.nav-top-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard);
}
.nav.is-on-dark ~ .nav-top-scrim {
  opacity: 1;
}

/* Hidden state — added by JS (scroll down) */
.nav.is-hidden {
  transform: translateY(-100%);
  transition:
    height var(--nav-transition),
    transform 0.4s var(--ease-brand); /* Dior-speed buttery slide */
}

/* Inner 3-column layout */
.nav__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--gutter-desktop);
}

.nav__left, .nav__right {
  display: flex;
  align-items: center;
  flex: 1;
}

.nav__left {
  justify-content: flex-start;
}

.nav__right {
  justify-content: flex-end;
  transition: opacity 0.3s ease;
}

.nav__center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

/* Hamburger Menu Toggle */
.menu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  cursor: pointer;
  z-index: 1001;
  pointer-events: auto;
}
.menu-toggle_lines {
  position: relative;
  width: 64px;
  height: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-toggle_line {
  width: 100%;
  height: 1.5px;
  background-color: currentColor; /* Follows .nav's color theme automatically */
  transition: transform 0.4s var(--ease-standard), background-color 0.6s var(--ease-standard);
}
.nav.is-menu-open .menu-toggle_line:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
.nav.is-menu-open .menu-toggle_line:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}

.menu-toggle_text {
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: currentColor; /* Follows .nav's color theme automatically */
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-standard), color 0.6s var(--ease-standard);
  pointer-events: none;
  white-space: nowrap;
}
.menu-toggle:hover .menu-toggle_text {
  opacity: 1;
  transform: translateX(0);
}
.nav.is-menu-open .menu-toggle_text {
  opacity: 0 !important;
  transform: translateX(-10px) !important;
}

/* Nav state when menu is open — transparent so dark panels show behind it */
.nav.is-menu-open {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important; /* White hamburger X visible against dark menu */
  pointer-events: none; /* Let clicks pass through nav to the menu overlay below */
}
/* Keep only the hamburger center interactive — it's the X close trigger */
.nav.is-menu-open .nav__center {
  pointer-events: auto;
}
/* Fade right-side nav links so they don't distract while menu is open */
.nav.is-menu-open .nav__right {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ============================================================
   MENU FULLSCREEN OVERLAY (Odd Ritual Split Layout)
============================================================ */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999; /* Below nav so toggle is clickable */
  display: none;
  pointer-events: auto;
  background-color: #111111; /* Dark fallback so panels animate cleanly */
}
.nav-overlay[data-nav="closed"] {
  pointer-events: none;
}
.nav-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}
.menu-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.menu-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bg-panel_full {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45vh; /* Bottom image area */
  background: #000;
  /* NO CSS transform — GSAP owns this entirely via yPercent set inside openNav */
}
.bg-panel_full-img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.bg-panel_full-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 63%; /* Shows pendant centred in the frame */
}
.bg-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55vh;
  background: #1A1A1A; /* RADICAL charcoal */
  /* NO CSS transform — GSAP owns this entirely via yPercent set inside openNav */
}
.bg-panel.first {
  z-index: 1; /* Stagger layer — sweeps in first */
  background: #111111; /* Slightly darker for visible double-curtain stagger */
}
.menu-inner {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.menu-contain {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 var(--gutter-desktop);
}
.menu-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  height: 55vh; /* Maps exactly to the white background */
  align-items: center;
}
.menu-img_wrap {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.menu-img_inner {
  width: 150px;
  aspect-ratio: 4/5;
  background: #2A2A2A; /* Dark placeholder for image thumbnail */
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}
.menu-img_slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.menu-img_slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.menu-list_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.menu-list-item {
  overflow: hidden;
  line-height: 0.85; /* Extremely tight stack */
}
.menu-link {
  display: block;
  font-size: clamp(3rem, 6vw, 7rem);
  text-decoration: none;
  color: #FFFFFF; /* White on dark menu */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  /* NO CSS transform — GSAP owns yPercent set inside openNav */
  transition: opacity 0.3s ease;
  text-transform: uppercase;
}
.menu-list-item.inactive .menu-link {
  opacity: 0.25;
}
.menu-bottom_layout {
  position: absolute;
  width: calc(100% - var(--gutter-desktop)*2);
  left: var(--gutter-desktop);
  display: flex;
  justify-content: space-between;
}
.menu-bottom_layout.is-menu {
  top: calc(55vh - 2.5rem); /* Sitting inside the white section, at the bottom */
}
.menu-bottom_layout:not(.is-menu) {
  bottom: 2rem; /* The brand text overlaid on the image */
}
.menu-footer_col {
  color: #FFFFFF; /* White on dark menu */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.menu-footer_col.center-col {
  flex: 1;
  display: flex;
  justify-content: center;
}
.menu-bot_wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-bot_wrap a {
  text-decoration: none;
  color: inherit;
}
.menu-bottom_layout:not(.is-menu) .menu-footer_col {
  flex: 1; /* color already #FFFFFF from base rule */
}
.menu-footer_col.logo-col {
  justify-content: flex-start;
  display: flex;
}
.menu-footer_col.copyright-col {
  justify-content: center;
  display: flex;
}
.menu-footer_col.location-col {
  justify-content: flex-end;
  display: flex;
}
.menu-extras__brand {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.25rem;
}

/* Brand wordmark - serif, uppercase */
.nav__brand {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: var(--nav-brand-size);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: currentColor;
  transition: font-size var(--nav-transition);
  white-space: nowrap;
  cursor: pointer;
}

.nav.is-scrolled .nav__brand {
  font-size: var(--nav-brand-size-sm);
}

/* Text links on the right - all caps plain text */
.nav__link-btn {
  font-family: var(--font-ui);
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: currentColor;
  margin-left: 28px;
  transition: opacity var(--duration-fast) var(--ease-standard);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.nav__link-btn:hover {
  opacity: 0.55;
}



/* Roll hover text effect (h-flip) */
[h-flip] {
  overflow: hidden;
  display: inline-flex;
  vertical-align: top;
}
[h-flip] .body-upper {
  text-shadow: 0px -1.5em 0px currentColor;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  display: inline-block;
}
[h-flip]:hover .body-upper {
  transform: translateY(1.5em);
}

/* Menu extras — overlaid on the bottom image */
.menu-extras {
  position: absolute;
  bottom: var(--space-40, 2rem);
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 var(--gutter-desktop, 5vw);
}




/* ------------------------------------------------------------
   4. SECTION SKELETONS — PLACEHOLDER STYLES
   ------------------------------------------------------------ */
.section {
  position: relative;
  width: 100%;
}

/* Full-bleed sections (hero, banners) */
.section--full-bleed {
  max-width: 100%;
}

/* Hero — replaced by .hero__* component below */
.section--hero {
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Editorial grid */
.section--editorial {
  min-height: 80vh;
  background-color: var(--color-bg-alt);
}

.editorial__img {
  transition: scale 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Philosophy block — replaced by .philosophy__* component below */
.section--philosophy {
  background-color: var(--color-bg);
}

/* Collection banner — replaced by .banner__* component below */
.section--banner {
  height: 70vh;
  overflow: hidden;
}

/* Category row */
.section--category {
  background-color: var(--color-bg);
  padding: 48px 0;
}

/* Campaign — replaced by .campaign__* component below */
.section--campaign {
  background-color: var(--color-bg-alt);
}

.product-card:hover .product-card__img {
  scale: 1.05;
}

.product-card__img {
  transition: scale 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Footer — replaced by .footer__* component below */
.section--footer {
  background-color: #1A1A1A;
}

/* Placeholder content box */
.section__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: var(--space-60) var(--gutter-desktop);
  border: 1.5px dashed rgba(26, 26, 26, 0.12);
  gap: var(--space-12);
  text-align: center;
  pointer-events: none;
}

.section__placeholder-label {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.28);
}

.section__placeholder-desc {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.18);
  max-width: 400px;
}


/* ------------------------------------------------------------
   5. UTILITY & ANIMATION CLASSES
   ------------------------------------------------------------ */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Constrained content container */
.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}

/* Body lock when menu is open */
body.menu-open {
  overflow: hidden;
}

/* ── Scroll Reveal System ─────────────────────────────────────
   GSAP sets initial states via autoAlpha. CSS never hides elements.
   This ensures content is always visible if JS fails or is slow.
─────────────────────────────────────────────────────────────── */
.reveal, .about-reveal {
  will-change: opacity, transform;
}

/* ------------------------------------------------------------
   6. SCROLLBAR (minimal, brand-aligned)
   ------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, 0.2);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 26, 26, 0.4);
}


/* -----------------/* ── Hero Slider Layout (Odd Ritual Replica) ─────────────────── */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100dvh;
  background-color: #000000;
  overflow: hidden;
}

/* ── Hero strip reveal — 5 horizontal bands, each a displaced video copy ── */
.hero-strips {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.hstrip {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  overflow: hidden;
}
.hstrip:nth-child(1) { top: 0;   }
.hstrip:nth-child(2) { top: 20%; }
.hstrip:nth-child(3) { top: 40%; }
.hstrip:nth-child(4) { top: 60%; }
.hstrip:nth-child(5) { top: 80%; }
.hstrip__vid {
  position: absolute;
  width: 100%;
  height: 500%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hstrip:nth-child(1) .hstrip__vid { top: 0;     }
.hstrip:nth-child(2) .hstrip__vid { top: -100%; }
.hstrip:nth-child(3) .hstrip__vid { top: -200%; }
.hstrip:nth-child(4) .hstrip__vid { top: -300%; }
.hstrip:nth-child(5) .hstrip__vid { top: -400%; }


/* ── Hero Background Video ─────────────────────────────────── */
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: #000000;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* transition removed — opacity controlled by initHeroTileReveal directly */
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

.hero-video-wrapper {
  pointer-events: none;
}

.hero-bg-video {
  pointer-events: none;
}

/* Make slide visuals transparent so video background shows through */
.hero-slide_visual {
  background-color: transparent !important;
}

.hero-slider_nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
}
.hero-slider_nav-left {
  position: absolute;
  left: var(--gutter-desktop);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}

.hero-slider_nav-list {
  display: flex;
  gap: var(--space-40);
  pointer-events: auto;
}

.hero-slider_nav-item {
  cursor: pointer;
  opacity: 0.35;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.hero-slider_nav-item.active {
  opacity: 1;
}

.slide-nav_layout {
  position: relative;
  display: flex;
  align-items: center;
}

.hero-slider_num {
  font-family: var(--font-display), serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 300;
  color: var(--color-white);
  transition: font-size 0.4s var(--ease-standard);
}
.hero-slider_nav-item.active .hero-slider_num {
  font-size: 32px;
  font-weight: 400;
}
.is-active-indicator {
  font-family: var(--font-display), serif;
  font-style: italic;
  font-size: 40px;
  font-weight: 300;
  color: var(--color-white);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.3s var(--ease-standard), opacity 0.3s ease;
}
.is-active-indicator:hover {
  transform: scale(1.1);
}

/* Slide hover image preview */
.slide-nav_img {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translate(-50%, 10px) scale(0.8);
  width: 60px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-standard);
}
.hero-slider_nav-item:hover .slide-nav_img {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.slide-nav_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Far right vertical scroll */
.hero-slider_scroll {
  position: absolute;
  right: var(--gutter-desktop);
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center;
  font-family: var(--font-display), serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: inline-block;
  opacity: 1;
  pointer-events: auto;
}

/* Slider slides wrapper */
.hero-slider_wrap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}
.hero-slider_list {
  width: 100%;
  height: 100%;
  position: relative;
}
.hero-slider_item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
}
.hero-slider_item.active {
  display: flex;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: opacity 0.4s var(--ease-standard), background-color 0.4s var(--ease-standard);
}

.slide-overlay.darken {
  background-color: rgba(0, 0, 0, 0.55);
}

.u-cover-absolute {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide_visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
}

/* Bottom Left text info */
.site-info {
  position: absolute;
  bottom: 8%;
  left: var(--gutter-desktop);
  z-index: 10;
  pointer-events: none;
  max-width: 650px;
  text-align: left;
}

.hero-intro_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  pointer-events: auto;
}

.orgc-detail {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-white);
}

.detail-wrap {
  position: relative;
  overflow: hidden;
}
.detail-text {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.detail-text:hover {
  opacity: 0.6;
}
.detail-text.is-hero {
  font-family: var(--font-ui), sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: opacity var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  display: block;
}
.detail-text.is-hero:hover {
  opacity: 0.6;
}

.hero-title {
  font-family: var(--font-ui), sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-white);
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: -0.02em;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .hero-slider_nav-left {
    display: none;
  }
  .site-info {
    left: var(--gutter-mobile);
    bottom: 12%;
  }
  .hero-title {
    font-size: 28px;
  }
}
/* ------------------------------------------------------------
   9. EDITORIAL GRID — Phase 3
   ------------------------------------------------------------ */

/* ── Section shell ──────────────────────────────────────────── */
.section--editorial {
  min-height: auto;
  background-color: var(--color-bg);
  padding: 48px 0;
}

/* ── Inner layout — horizontal padding only ─────────────────── */
.editorial__inner {
  max-width: none;
  margin: 0;
  padding: 0 40px;
}

/* ── 2-column grid — gap between panels ────────────────────── */
.editorial__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 85vh;
  gap: 12px;
  width: 100%;
}

/* ── Individual grid item ──────────────────────────────────── */
.editorial__item {
  display: block;
  height: 100%;
}

/* ── Image cell — fills the full grid cell ─────────────────── */
.editorial__media {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #111;
  overflow: hidden;
}

/* Real photo */
.editorial__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 1.0s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dark gradient for caption legibility */
.editorial__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* ── Caption — inside image, bottom-left ───────────────────── */
.editorial__caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  z-index: 2;
  transition: color 0.25s ease;
}
.editorial__item-link:hover .editorial__caption {
  color: #ffffff;
}

/* ── Scroll-in entrance animation handled by Utility .reveal ── */

/* ── Editorial responsive ──────────────────────────────────── */

@media (max-width: 768px) {
  .editorial__inner {
    padding: 0 20px;
  }
  .editorial__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 70vh);
    gap: 8px;
  }
  .editorial__caption {
    bottom: 20px;
    left: 20px;
    font-size: 14px;
  }
}


/* ------------------------------------------------------------
   10. PHILOSOPHY TEXT — Phase 4
   ------------------------------------------------------------ */

/* ── Inner layout ──────────────────────────────────────────── */
.philosophy__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 100px var(--gutter-desktop);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Brand mark placeholder ────────────────────────────────── */
.philosophy__mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}

.philosophy__mark-svg {
  display: block;
}

/* ── Body text ─────────────────────────────────────────────── */
.philosophy__text {
  font-family: var(--font-body);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

/* ── IntersectionObserver Entrance ─────────────────────────── */
#philosophy-text.is-visible .philosophy__mark,
#philosophy-text.is-visible .philosophy__text {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive overrides ──────────────────────────────────── */
@media (max-width: 768px) {
  .philosophy__inner {
    padding: 80px var(--gutter-mobile);
  }
}

@media (max-width: 480px) {
  .philosophy__inner {
    padding: 60px var(--gutter-mobile);
  }
  .philosophy__text {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ------------------------------------------------------------
   11. COLLECTION BANNER — Phase 5
   ------------------------------------------------------------ */

/* ── Media shell ───────────────────────────────────────────── */
.banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #B8B3AC; /* Placeholder grey matching the brief */
  overflow: hidden;
}

/* Real photo */
.banner__img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  transform: translateZ(0);
  will-change: transform;
}
.banner__img.is-loaded {
  opacity: 1;
}

/* Placeholder */
.banner__media-placeholder {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.3);
  text-align: center;
  pointer-events: none;
  user-select: none;
  padding: var(--space-24);
  transform: translateZ(0);
  will-change: transform;
}

/* ── Gradient overlay ──────────────────────────────────────── */
.banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Text content block ────────────────────────────────────── */
.banner__content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 680px;
  padding-bottom: 60px;
  padding-left: var(--gutter-desktop);
  padding-right: var(--gutter-desktop);
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Label ─────────────────────────────────────────────────── */
.banner__label {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

/* ── Headline ──────────────────────────────────────────────── */
.banner__headline {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 24px;
}

/* ── CTA Ghost Button ──────────────────────────────────────── */
.banner__cta {
  /* Borrowing transitions from hero__cta, just overriding entrance */
  transition:
    opacity 0.7s var(--ease-brand) 0.3s,
    transform 0.7s var(--ease-brand) 0.3s,
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

/* ── Entrance Animation ────────────────────────────────────── */
#collection-banner.is-visible .banner__label,
#collection-banner.is-visible .banner__headline,
#collection-banner.is-visible .banner__cta {
  opacity: 1;
  transform: translateY(0);
}


/* ── Responsive overrides ──────────────────────────────────── */
@media (max-width: 768px) {
  .section--banner {
    height: 50vh;
  }
  .banner__headline {
    font-size: 24px;
    letter-spacing: 1.5px;
  }
  .banner__content {
    padding-bottom: 40px;
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
  .banner__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.1) 40%,
      transparent 60%
    );
  }
}

@media (max-width: 480px) {
  .banner__headline {
    font-size: 20px;
    letter-spacing: 1px;
  }
}

/* ------------------------------------------------------------
   12. CATEGORY ROW — Phase 6
   ------------------------------------------------------------ */

/* ── Inner layout — side padding matches editorial ──────────── */
.category__inner {
  max-width: none;
  margin: 0;
  padding: 0 40px;
}

/* ── 2×2 grid — gaps between panels ────────────────────────── */
.category__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 85vh);
  gap: 12px;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── List item / Link ──────────────────────────────────────── */
.category__item {
  display: block;
  height: 100%;
}
.category__link {
  display: block;
  position: relative;
  text-decoration: none;
  height: 100%;
  overflow: hidden;
}

/* ── Media — fills the full grid cell ──────────────────────── */
.category__media {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #111;
  overflow: hidden;
}

.category__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 1.0s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Hover effect */
.category__link:hover .category__img {
  transform: scale(1.04);
}

/* ── Category Title — inside image, bottom-left ────────────── */
.category__title {
  position: absolute;
  bottom: 32px;
  left: 32px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  z-index: 2;
  transition: color 0.25s ease;
}

.category__link:hover .category__title {
  color: #ffffff;
}

/* Subtle dark gradient at bottom for legibility */
.category__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* ── Responsive overrides ──────────────────────────────────── */
@media (max-width: 768px) {
  .category__inner {
    padding: 0 20px;
  }
  .category__grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 70vh);
    gap: 8px;
  }
  .category__title {
    font-size: 14px;
    bottom: 16px;
    left: 16px;
  }
}


/* ------------------------------------------------------------
   13. CAMPAIGN SECTION — Phase 7
   ------------------------------------------------------------ */

/* ── Inner layout ──────────────────────────────────────────── */
.campaign__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 80px var(--gutter-desktop) 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Header ────────────────────────────────────────────────── */
.campaign__header {
  text-align: center;
  margin-bottom: 48px;
}

/* ── Scroll Entrance Animation handled by .reveal ── */

/* ── Media 16:9 ────────────────────────────────────────────── */
.campaign__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #C5C0B9;
  overflow: hidden;
  margin-bottom: 24px;
}

.campaign__img,
.campaign__placeholder {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.campaign__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.campaign__img.is-loaded {
  opacity: 1;
}

/* Hover subtle zoom */
.campaign__media:hover .campaign__img,
.campaign__media:hover .campaign__placeholder {
  transform: scale(1.04);
}

.campaign__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(26, 26, 26, 0.3);
  pointer-events: none;
  user-select: none;
}

/* ── Body Copy & CTA ───────────────────────────────────────── */
.campaign__body {
  text-align: center;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.campaign__text {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 24px;
}

.campaign__link {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  
  /* Link underline animation */
  background-image: linear-gradient(#1A1A1A, #1A1A1A);
  background-size: 0% 1px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease, color 0.3s ease;
  padding-bottom: 4px;
}
.campaign__link:hover {
  background-size: 100% 1px;
  background-position: 0% 100%;
  color: #8A8A8A;
}

/* ── Scroll Entrance Animation handled by .reveal ── */

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .campaign__inner {
    padding: 60px var(--gutter-mobile) 80px;
  }
  .campaign__headline {
    font-size: 24px;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .campaign__media {
    /* More squared on mobile so the image isn't too thin */
    aspect-ratio: 4 / 3;
  }
  .campaign__header {
    margin-bottom: 32px;
  }
  .campaign__headline {
    font-size: 20px;
  }
  .campaign__text {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ------------------------------------------------------------
   4.5 SEARCH OVERLAY
   ------------------------------------------------------------ */
.search-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1400; /* below strip, above nav */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.search-scrim.is-active {
  opacity: 1;
  pointer-events: auto;
}

.search-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--color-white);
  border-bottom: 1px solid #E8E8E8;
  z-index: 1500;
  transform: translateY(-100%);
  transition: transform 0.35s ease; /* Default matched to close ease */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter-desktop);
  will-change: transform;
}
.search-strip.is-open {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.search-strip__inner {
  width: 100%;
  max-width: 600px;
  display: flex;
  position: relative;
  align-items: center;
}

.search-strip__input {
  width: 100%;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  color: #1A1A1A;
  border: none;
  border-bottom: 1px solid #CCCCCC;
  padding: 8px 30px 8px 0;
  background: transparent;
  outline: none;
}
.search-strip__input::placeholder {
  font-family: var(--font-brand);
  font-size: 14px;
  letter-spacing: 2px;
  color: #AAAAAA;
}

.search-strip__close {
  position: absolute;
  right: 0;
  background: transparent;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 4px; /* hit area */
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}
.search-strip__close:hover {
  color: #1A1A1A;
}

@media (max-width: 768px) {
  .search-strip {
    padding: 0 var(--gutter-mobile);
  }
}


/* ------------------------------------------------------------
   5. FOOTER — Phase 8
   ------------------------------------------------------------ */

/* ── Section Shell ─────────────────────────────────────────── */
.section--footer {
  background-color: #1A1A1A;
  color: #CCCCCC;
}

.footer__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 60px 40px;
}

/* ── Top Brand Logo ────────────────────────────────────────── */
.footer__brand {
  text-align: center;
  margin-bottom: 40px;
}

.footer__logo {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.3em;
  color: #FFFFFF;
  text-transform: uppercase;
}

/* ── 4-Column Navigation ───────────────────────────────────── */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto 60px auto;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__col-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #BBBBBB;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease-standard);
}

.footer__link:hover {
  color: #FFFFFF;
}

/* ── Bottom Legal / Copyright ──────────────────────────────── */
.footer__bottom {
  border-top: 1px solid #333333;
  padding-top: 24px;
  text-align: center;
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 14px;
  color: #666666;
}

/* ── Responsive Overrides ──────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --nav-height:          52px;
    --nav-height-scrolled: 44px;
    --nav-brand-size:      18px;
    --nav-brand-size-sm:   18px;
    --gutter-desktop:      var(--gutter-mobile);
  }

  /* Nav Mobile */
  .nav__inner {
    padding: 0 var(--gutter-mobile);
  }
  .nav__brand {
    letter-spacing: 3px;
    white-space: nowrap;
  }
  .nav__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: none;
  }
  .menu-toggle_lines {
    width: 32px;
    height: 6px;
  }
  .nav.is-menu-open .menu-toggle_line:nth-child(1) {
    transform: translateY(2.25px) rotate(45deg);
  }
  .nav.is-menu-open .menu-toggle_line:nth-child(2) {
    transform: translateY(-2.25px) rotate(-45deg);
  }
  .nav__link-btn {
    margin-left: 12px;
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  [h-flip] {
    white-space: nowrap;
  }
  .nav__icon-btn {
    width: 44px;
    height: 44px;
  }
  .nav__icon {
    width: 18px;
    height: 18px;
  }
  .nav-overlay__panel {
    width: 100%;
    max-width: 320px;
  }

  /* Hero Mobile */
  .section--hero { min-height: 75vh; }
  .hero__headline { font-size: 24px; }
  .hero__label { font-size: 14px; }
  .hero__cta { padding: 10px 24px; font-size: 14px; }
  .hero__content { padding-bottom: 50px; }

  /* Editorial Grid Mobile — handled in component block */

  /* Philosophy Text Mobile */
  .philosophy__inner {
    padding: 60px 24px;
    max-width: 100%;
  }
  .philosophy__text {
    font-size: 15px;
    line-height: 1.75;
  }

  /* Collection Banner Mobile */
  .section--banner { min-height: 55vh; }
  .banner__headline { font-size: 24px; }
  .banner__label { font-size: 14px; }
  .banner__cta { font-size: 14px; padding: 10px 24px; }

  /* Category Row Mobile */
  .category__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 16px;
  }
  .category__caption { font-size: 14px; }

  /* Campaign Mobile */
  .campaign__headline { font-size: 22px; }
  .campaign__text { font-size: 14px; max-width: 100%; padding: 0 20px; }
  .campaign__img-wrapper { aspect-ratio: 4 / 3; }

  /* Footer Mobile Accordion */
  .footer__inner { padding: 40px 20px; }
  .footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 60px;
  }
  .footer__col {
    border-bottom: 1px solid #333333;
    padding: 0;
  }
  .footer__col-title { margin-bottom: 0; }
  .footer__col-toggle {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .footer__col-toggle .footer__chevron {
    transition: transform 0.3s ease;
  }
  .footer__col-toggle[aria-expanded="true"] .footer__chevron {
    transform: rotate(180deg);
  }
  .footer__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .footer__logo {
    font-size: 16px;
  }
}

@media (min-width: 769px) {
  /* Hide the toggle interactions on desktop since they are normal h3s */
  .footer__col-toggle { cursor: default; pointer-events: none; }
  .footer__chevron { display: none; }
  .footer__col.is-accordion .footer__list { max-height: none !important; }
}

@media (max-width: 480px) {
  :root {
    --nav-icon-gap: 12px;
  }
}

/* ------------------------------------------------------------
   TOUCH DEVICE HOVER DISABLE
   ------------------------------------------------------------ */
@media (hover: none) {
  .editorial__img-wrapper:hover .editorial__img,
  .category__item:hover .category__img,
  .campaign__img-wrapper:hover .campaign__img {
    transform: scale(1) !important;
  }
  .editorial__img-wrapper::after {
    display: none !important;
  }
  .category__item:hover .category__caption {
    color: inherit !important;
  }
  .btn-ghost:hover {
    background-color: transparent !important;
    color: var(--color-white) !important;
  }
  .btn-solid:hover {
    background-color: var(--color-text) !important;
    color: var(--color-white) !important;
  }
  .btn-link:hover::after {
    width: 0 !important;
  }
}

/* ------------------------------------------------------------
   PHASE 18 — TACTILE BUTTON FIX
   ------------------------------------------------------------ */

/* Button Press Tactile Feedback */
.hero__cta,
.banner__cta {
  /* Provide baseline transition for the return scale(1) */
  transition: transform 0.2s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero__cta:active,
.banner__cta:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}


/* ============================================================
   PHASE 24 — PRODUCT DETAIL PAGE (PDP)
   ============================================================ */

/* ------------------------------------------------------------
   PDP LAYOUT — Two-column grid: 55% left / 45% right
   ------------------------------------------------------------ */
.pdp {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: start;
  max-width: var(--max-width-content);
  margin: 0 auto;
}


/* ------------------------------------------------------------
   PDP GALLERY — Left column, stacked images
   ------------------------------------------------------------ */
/* Editorial item link wrapper */
.editorial__item-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.editorial__item-link:hover { opacity: 1; }

/* .pdp__gallery-col — no styles needed; images bleed full column width */

.pdp__gallery-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Each image cell: 4:5 aspect ratio, full column width */
.pdp__gallery-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-bg-alt);
}

.pdp__gallery-item:focus-visible {
  outline: 1.5px solid var(--color-text);
  outline-offset: -1.5px;
}

/* Placeholder text when no real image */
.pdp__gallery-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  background: var(--color-bg-alt);
  user-select: none;
  pointer-events: none;
}

/* Real image — fades in when loaded */
.pdp__gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: transform 0.6s var(--ease-brand);
  pointer-events: none;
}
.pdp__gallery-img.is-loaded {
  opacity: 1;
}

.pdp__gallery-item:hover .pdp__gallery-img.is-loaded {
  transform: scale(1.02);
}

/* Mobile carousel dots — hidden on desktop */
.pdp__carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 14px 0 8px;
}

.pdp__carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pdp__carousel-dot.is-active {
  background: var(--color-text);
  transform: scale(1.3);
}


/* ------------------------------------------------------------
   PDP INFO — Right column, sticky
   ------------------------------------------------------------ */
.pdp__info-col {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  scrollbar-width: none;
}

.pdp__info-col::-webkit-scrollbar {
  display: none;
}

.pdp__info {
  padding: 60px 40px;
}

/* Breadcrumb */
.pdp__breadcrumb {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #999;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.pdp__breadcrumb a {
  color: #999;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.pdp__breadcrumb a:hover {
  color: var(--color-text);
  opacity: 1;
}

/* Product name */
.pdp__name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 16px;
  line-height: 1.2;
}

/* Price */
.pdp__price {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.pdp__price .price-original {
  text-decoration: line-through;
  color: var(--color-crimson);
  opacity: 0.7;
  font-size: 0.85em;
}

.pdp__price .price-discounted {
  color: var(--color-text);
  font-weight: 700;
}

/* Thin divider */
.pdp__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 24px 0;
}

/* Short description */
.pdp__description {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}


/* ------------------------------------------------------------
   SIZE SELECTOR
   ------------------------------------------------------------ */
.pdp__sizes {
  margin-top: 24px;
}

.pdp__sizes-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 10px;
}

.pdp__sizes-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pdp__size-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #CCCCCC;
  background: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.pdp__size-btn:hover {
  border-color: #999999;
}

.pdp__size-btn.is-selected,
.pdp__size-btn[aria-pressed="true"] {
  border-color: var(--color-text);
  background-color: var(--color-text);
  color: var(--color-white);
}

/* ------------------------------------------------------------
   COLOR SWATCH SELECTOR
   ------------------------------------------------------------ */
.pdp__colors {
  margin-top: 24px;
}

.pdp__colors-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 10px;
}

.pdp__colors-label span {
  text-transform: none;
  letter-spacing: 0;
  color: #777777;
}

.pdp__colors-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pdp__color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #CCCCCC;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pdp__color-btn:hover {
  transform: scale(1.08);
}

.pdp__color-btn.is-selected,
.pdp__color-btn[aria-pressed="true"] {
  border-color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-text);
}


/* ------------------------------------------------------------
   ADD TO BAG BUTTON
   ------------------------------------------------------------ */
.pdp__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  margin-top: 24px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.pdp__add-btn:hover {
  background-color: #333333;
}

.pdp__add-btn:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

.pdp__add-btn:disabled {
  cursor: default;
}

/* Size-not-selected error state */
.pdp__add-btn--error {
  background-color: #8B1A10 !important;
  letter-spacing: 1.5px;
}

/* PDP unavailable size button state */
.pdp__size-btn--unavailable {
  border-color: #8B1A10 !important;
  color: #8B1A10 !important;
  background-color: rgba(139, 26, 16, 0.05) !important;
  cursor: not-allowed;
  text-decoration: line-through;
}


/* Shake animation for size error feedback */
@keyframes shake {
  0%  { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
  100%{ transform: translateX(0); }
}

/* Find in Store */
.pdp__find-store {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6A6A6A;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 14px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.pdp__find-store:hover {
  color: var(--color-text);
  opacity: 1;
}


/* ------------------------------------------------------------
   ACCORDION SECTIONS
   ------------------------------------------------------------ */
.pdp__accordions {
  margin-top: 32px;
}

.pdp__accordion {
  border-top: 1px solid var(--color-border);
}

.pdp__accordion:last-child {
  border-bottom: 1px solid var(--color-border);
}

.pdp__accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}

.pdp__accordion-chevron {
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.pdp__accordion-toggle[aria-expanded="true"] .pdp__accordion-chevron {
  transform: rotate(90deg);
}

.pdp__accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.pdp__accordion-content {
  padding-bottom: 20px;
}

.pdp__accordion-content p {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.pdp__accordion-content p:last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   LIGHTBOX
   ------------------------------------------------------------ */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pdp-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Centered image stage */
.pdp-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(80vw, 640px);
  max-height: 85vh;
  z-index: 5001;
}

.pdp-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

/* Placeholder shown when no image src */
.pdp-lightbox__placeholder {
  width: min(80vw, 640px);
  height: min(80vw * 1.25, 800px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 4 / 5;
}

/* Close button — top right, same style as nav overlay */
.pdp-lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 5002;
  padding: 8px;
  transition: opacity 0.2s ease;
}

.pdp-lightbox__close:hover {
  opacity: 0.6;
}

/* Nav arrows — fixed at viewport vertical center */
.pdp-lightbox__prev,
.pdp-lightbox__next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.9);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 5002;
  padding: 12px;
  transition: opacity 0.2s ease;
  line-height: 0;
}

.pdp-lightbox__prev:hover,
.pdp-lightbox__next:hover {
  opacity: 0.5;
}

.pdp-lightbox__prev {
  left: 40px;
}

.pdp-lightbox__next {
  right: 40px;
}

/* Hide arrow at bounds */
.pdp-lightbox__prev.is-hidden,
.pdp-lightbox__next.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ------------------------------------------------------------
   PDP — MOBILE (below 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Single column */
  .pdp {
    grid-template-columns: 1fr;
  }

  /* Gallery becomes horizontal swipeable carousel */
  .pdp__gallery-stack {
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 0;
    scrollbar-width: none;
  }

  .pdp__gallery-stack::-webkit-scrollbar {
    display: none;
  }

  .pdp__gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    cursor: default;
  }

  /* Show dots on mobile */
  .pdp__carousel-dots {
    display: flex;
  }

  /* Info col: no sticky on mobile */
  .pdp__info-col {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .pdp__info {
    padding: 24px 20px;
  }

  /* Lightbox arrow inset tighter on small screens */
  .pdp-lightbox__prev {
    left: 12px;
  }

  .pdp-lightbox__next {
    right: 12px;
  }

  .pdp-lightbox__stage {
    max-width: calc(100vw - 80px);
  }
}

@media (hover: none) {
  .pdp__gallery-item:hover .pdp__gallery-img.is-loaded {
    transform: scale(1) !important;
  }
}


/* ============================================================
   PHASE 25 — ABOUT / PHILOSOPHY PAGE
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Start fully visible */
  will-change: clip-path;
}
.preloader.is-done {
  visibility: hidden;
}
.preloader__box {
  position: relative;
  width: clamp(280px, 25vw, 360px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Start fully visible */
  will-change: clip-path;
}
.preloader__inner {
  position: absolute;
  inset: 0;
  z-index: 1; /* Lowest z-index so it's behind background and image wrap */
  font-size: clamp(28px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.preloader__logo {
  width: 7.2em; /* Proportionate logo size */
  height: auto;
  margin-bottom: -0.2em; /* Slight negative margin to counteract SVG padding */
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}
.preloader__brand {
  font-family: 'Cinzel', serif;
  font-size: 0.85em; /* Elegant wordmark size */
  font-weight: 500;
  letter-spacing: 0.25em;
  color: #FFFFFF;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}
.preloader__box-bg {
  position: absolute;
  inset: 0;
  background: #550000;
  z-index: 2;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); /* Starts fully clipped */
  will-change: clip-path;
}
.preloader__image-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); /* Starts fully clipped */
  will-change: clip-path;
}
.preloader__box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* ------------------------------------------------------------
   ABOUT HERO — Full-screen opening, dark editorial
   ------------------------------------------------------------ */
/* About Page Premium Split Layout */
.about-hero {
  background: var(--color-bg);
  padding: 180px var(--gutter-desktop) 60px;
  height: auto;
  min-height: auto;
  display: block;
}

.about-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  width: 100%;
}

.about-hero__content {
  text-align: left;
  padding: 0;
  max-width: none;
  margin-bottom: 60px;
}

.about-hero__label {
  color: var(--color-text-muted);
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.about-hero__headline {
  color: var(--color-text);
  font-family: 'Cinzel', serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.about-grid__media-col {
  width: 100%;
}

.about-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.about-hero__img {
  position: absolute;
  inset: -10% 0; /* extra vertical height to clear GSAP scroll parallax safely */
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 12%;
}

.about-grid__text-col {
  padding-top: 20px; /* aligns top edge of bio text with image */
}


/* ------------------------------------------------------------
   ABOUT SECTION — Alternating editorial layout
   ------------------------------------------------------------ */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  align-items: stretch;
}

/* Reversed: flip column order visually */
.about-section--reversed .about-section__media {
  order: 2;
}
.about-section--reversed .about-section__text {
  order: 1;
}

/* Image side */
.about-section__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--color-bg-alt);
  overflow: hidden;
  min-height: 480px;
}

.about-section__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  background: var(--color-bg-alt);
  user-select: none;
}

.about-section__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.about-section__img.is-loaded { opacity: 1; }

/* Text side */
.about-section__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
}

/* ── Clip-path pre-state (ensures no flash on non-GSAP load) ── */
.editorial__media,
.campaign__media,
.banner__media,
.about-section__media,
.pdp__gallery-item {
  clip-path: inset(0% 0% 0% 0%);
  will-change: clip-path;
}

.js-enabled .editorial__media,
.js-enabled .campaign__media,
.js-enabled .banner__media,
.js-enabled .about-section__media,
.js-enabled .pdp__gallery-item {
  clip-path: inset(100% 0% 0% 0%);
}

.about-section__label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block;
}

.about-section__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 1.5px;
  color: var(--color-text);
  margin-bottom: 28px;
  line-height: 1.1;
}

.about-section__body {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 18px;
  max-width: 480px;
}

.about-section__body:last-child {
  margin-bottom: 0;
}

/* Alternate section background tint for rhythm */
.about-section:nth-child(even) .about-section__text {
  background: var(--color-bg-alt);
}
.about-section:nth-child(odd) .about-section__text {
  background: var(--color-bg);
}


/* ------------------------------------------------------------
   ABOUT CLOSING — Dark statement block
   ------------------------------------------------------------ */
.about-closing {
  background: #1A1A1A;
  padding: 100px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.about-closing__inner {
  max-width: 600px;
}

.about-closing__statement {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 4px;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.about-closing__sub {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}

.about-closing__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.about-closing__cta:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #1A1A1A;
  opacity: 1;
}

.about-closing__cta:active {
  transform: scale(0.98);
}


/* ------------------------------------------------------------
   ABOUT SCROLL ANIMATIONS
   Horizontal slide-in on desktop, vertical on mobile.
   ------------------------------------------------------------ */
.about-reveal {
  will-change: opacity, transform;
}

.about-reveal--left  { transform: translateX(0); }
.about-reveal--right { transform: translateX(0); }
.about-reveal--up    { transform: translateY(0); }

.about-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger: text arrives 120ms after image */
.about-section__text.about-reveal {
  transition-delay: 0.12s;
}


/* ------------------------------------------------------------
   ABOUT — MOBILE (below 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Hero */
  .about-hero__content {
    padding: 0 var(--gutter-mobile);
  }

  .about-hero__label,
  .about-hero__headline {
    font-size: 24px;
  }

  .about-hero__sub {
    font-size: 14px;
  }

  /* Single-column stacked sections */
  .about-section {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  /* On mobile: image always on top regardless of reversed state */
  .about-section--reversed .about-section__media {
    order: 0;
  }
  .about-section--reversed .about-section__text {
    order: 1;
  }

  .about-section__media {
    min-height: 300px;
    aspect-ratio: 4 / 3;
  }

  .about-section__text {
    padding: 40px 20px;
  }

  .about-section__body {
    max-width: 100%;
  }

  /* Mobile animations: vertical only */
  .about-reveal--left,
  .about-reveal--right {
    transform: translateY(30px);
  }

  /* Closing */
  .about-closing {
    padding: 70px 20px;
  }

  .about-closing__statement {
    font-size: 14px;
    letter-spacing: 3px;
  }

  .about-section__text.about-reveal {
    transition-delay: 0.08s;
  }
}

@media (max-width: 480px) {
  .about-hero__label,
  .about-hero__headline {
    font-size: 20px;
  }
}

/* ------------------------------------------------------------
   FOUNDER PAGE (About) — editorial bio below the full-bleed hero
   ------------------------------------------------------------ */
.founder-bio__inner {
  max-width: 580px;
  margin: 0;
}

.about-section__body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 24px;
}

.founder-bio__lede {
  font-weight: 700;
  font-size: 19px;
  color: var(--color-text);
}

.founder-closing {
  background: var(--color-bg);
  padding: 100px var(--gutter-desktop) 140px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.philosophy__text {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 800px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────
   Awwwards-Level Animation Utilities
   ───────────────────────────────────────────────── */

/* 1. Lenis Smooth Scroll Setup */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* 2. Magnetic Effect Utility */
.magnetic-wrap {
  display: inline-block;
  position: relative;
  transition: transform 0.3s var(--ease-standard);
}

/* 3. Split Text Styles */
.line {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.8s var(--ease-brand);
}

/* 4. Enhanced Image Hovers */
.editorial__media, .campaign__media {
  overflow: hidden;
  background-color: #000;
}

.editorial__img, .campaign__img {
  will-change: transform;
}

/* 5. Custom GSAP Reveal Classes */
.gsap-reveal {
  opacity: 0;
  visibility: hidden;
}

.gsap-reveal-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* ── Masked line reveal wrapper (Blæd-style text animation) ── */
.line-mask {
  display: block;
  overflow: hidden;
  /* padding-bottom prevents descenders (g, y, p) from being clipped;
     negative margin cancels the extra spacing so layout is unchanged */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* ============================================================
   ODD RITUAL DNA ADDITIONS
   ============================================================ */



/* ── Nav Overlay Image Panel (Odd Ritual DNA) ──────────────── */
.nav-overlay__img-panel {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 410px;
  width: clamp(200px, calc(45vw - 200px), 560px);
  overflow: hidden;
  border-radius: 4px;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s,
              transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s;
  pointer-events: none;
}
.nav-overlay.is-open .nav-overlay__img-panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.nav-overlay__img-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
}
@media (max-width: 1000px) {
  .nav-overlay__img-panel { display: none; }
}

/* ── SplitType word overflow clip ──────────────────────────── */
.hero__headline .word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.05em;
}

/* ── Editorial dual-image hover swap ───────────────────────── */
.editorial__img--hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  pointer-events: none;
}
.editorial__item:hover .editorial__img--hover {
  opacity: 1;
}
.editorial__img {
  position: relative;
  z-index: 0;
}


.page-content {
  position: relative;
  background-color: var(--color-bg);
}

/* ── SplitType — line overflow clip ───────────────────────── */
.split-line-wrap {
  overflow: hidden;
  display: block;
}
h1, h2, h3,
.hero__headline, .about-hero__headline,
.campaign__headline, .banner__headline,
.about-section__heading, .about-closing__statement {
  transform-style: preserve-3d;
}



/* ── Banner media ensure position ─────────────────────────── */
.banner__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   STORE — Cart Drawer · Auth Modal · Checkout · Account
   ============================================================ */

/* ── Shared overlay backdrop ─────────────────────────────── */
.cart-overlay,
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  z-index: 900;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cart-overlay.is-active { display: block; z-index: 1050; }
.auth-overlay.is-active { display: block; z-index: 1000; }

/* ── Cart Drawer ──────────────────────────────────────────── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100%;
  background: var(--color-white);
  z-index: 1100; /* Above .nav (1000) — the nav is transparent but still pointer-events:auto,
                     so without this the close button's click was swallowed by the nav sitting on top */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text);
}
.cart-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  /* 44×44px tap target (Apple HIG minimum) */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  /* Pull the button flush to the right edge without adding layout width */
  margin-right: -12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.cart-drawer__close:hover { color: var(--color-text); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.cart-drawer__body::-webkit-scrollbar { width: 3px; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: var(--color-border); }

.cart-drawer__footer {
  padding: 20px 32px 32px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart__loading {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-faint);
  text-align: center;
  padding: 48px 0;
  letter-spacing: 0.06em;
}
.cart__empty {
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-muted);
  text-align: center;
  padding: 56px 0;
  letter-spacing: 0.04em;
}

/* Cart Item */
.cart__item {
  display: grid;
  grid-template-columns: 72px 1fr 44px;
  gap: 0 16px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.cart__item:last-child { border-bottom: none; }

.cart__item-img {
  grid-row: span 2;
  width: 72px;
  height: 88px;
  background: var(--color-bg-alt);
  overflow: hidden;
  flex-shrink: 0;
}
.cart__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart__item-info { min-width: 0; }
.cart__item-name {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
  line-height: 1.3;
}
.cart__item-variant {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.cart__item-price {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
  letter-spacing: 0.03em;
}

.cart__item-qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.cart__qty-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  font-family: var(--font-ui);
}
.cart__qty-btn:hover { color: var(--color-text); }
.cart__item-qty > span {
  font-family: var(--font-ui);
  font-size: 14px;
  min-width: 18px;
  text-align: center;
  color: var(--color-text);
}

.cart__item-remove {
  grid-column: 3;
  grid-row: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-faint);
  padding: 0;
  /* 44×44px tap target */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  /* Visually centre alongside the item name */
  margin-top: -10px;
  /* Pull right to sit flush at edge */
  margin-right: -12px;
}
.cart__item-remove:hover { color: var(--color-text); }

/* Cart Footer */
.cart__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.cart__subtotal > span:first-child {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart__subtotal > span:last-child {
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.cart__shipping-note {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.cart__checkout-btn {
  display: block;
  width: 100%;
  height: 50px;
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  margin-bottom: 10px;
}
.cart__checkout-btn:hover { background-color: #333; }

.cart__clear-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--color-text-faint);
  text-align: center;
  transition: color 0.2s;
  margin-top: 12px;
}
.cart__clear-btn:hover { color: var(--color-text-muted); }

/* ── Auth Modal ───────────────────────────────────────────── */
.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: 480px;
  max-width: calc(100vw - 40px);
  background: var(--color-white);
  z-index: 1001;
  padding: 52px 48px 44px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.auth-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.auth-modal__inner { position: relative; }

/* ── Auth Tabs (shared between modal + account page) ─────── */
.auth__tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 36px;
}
.auth__tab {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 16px;
  margin-bottom: -1px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--color-text-faint);
  transition: color 0.2s, border-color 0.2s;
}
.auth__tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}
.auth__tab:hover:not(.is-active) { color: var(--color-text-muted); }

.auth__panel { display: none; }
.auth__panel.is-active { display: block; }

/* ── Shared form components ─────────────────────────────── */
.form-group { margin-bottom: 18px; }

.auth-form label,
.checkout-form label,
.auth-gate__box label {
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.auth-form input,
.checkout-form input,
.auth-gate__box input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.auth-form input:focus,
.checkout-form input:focus,
.auth-gate__box input:focus { border-color: var(--color-text); background: var(--color-white); }

.checkout-form input[readonly] {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  cursor: default;
  border-color: transparent;
}

.form-error {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #b5341e;
  margin-bottom: 14px;
  min-height: 14px;
}

/* ── Primary action button ──────────────────────────────── */
.checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 24px;
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-top: 8px;
}
.checkout-btn:hover { background-color: #2e2e2e; }

.checkout-btn--ghost {
  background: transparent;
  color: var(--color-text);
}
.checkout-btn--ghost:hover { background: var(--color-bg-alt); }

.checkout-btn--sm {
  height: 40px;
  font-size: 14px;
  letter-spacing: 2px;
  width: auto;
  display: inline-flex;
}

/* ── Checkout Page ────────────────────────────────────────── */
.checkout-page { background: var(--color-bg); min-height: 100vh; }

.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 64px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
}
.checkout-header__brand {
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
}
.checkout-header__steps {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.checkout-header__steps .step { transition: color 0.2s; }
.checkout-header__steps .step.is-active { color: var(--color-text); }
.step-divider { color: var(--color-border); }

.checkout-main {
  display: flex;
  min-height: calc(100vh - 64px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 40px;
  gap: 72px;
  align-items: flex-start;
}

.checkout-form-col { flex: 1; min-width: 0; }
.checkout-summary-col { width: 320px; flex-shrink: 0; position: sticky; top: 88px; }

.checkout-step { display: none; }
.checkout-step.is-active { display: block; }

.checkout-step__title {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.06em;
  margin-bottom: 36px;
  color: var(--color-text);
}

.checkout-guest-toggle {
  margin-bottom: 24px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 14px 16px;
  background: var(--color-bg-alt);
  border-left: 2px solid var(--color-border);
}
.checkout-guest-toggle a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid currentColor; }

.checkout-form .form-row { display: flex; gap: 16px; }
.checkout-form .form-row .form-group { flex: 1; }

/* Payment */
.payment-placeholder { margin-bottom: 28px; }
.payment-cod {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  margin-bottom: 12px;
  cursor: pointer;
}
.payment-cod__icon { font-size: 22px; flex-shrink: 0; }
.payment-cod__title {
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.payment-cod__sub {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.payment-cod input[type="radio"] { margin-left: auto; accent-color: var(--color-text); }
.payment-note {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  font-style: italic;
}
#back-to-shipping { margin-top: 12px; }

/* Order Confirmation */
.checkout-confirm {
  text-align: center;
  padding: 56px 0 32px;
}
.checkout-confirm__icon {
  width: 52px;
  height: 52px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}
.checkout-confirm h2 {
  font-family: var(--font-brand);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.checkout-confirm p {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.checkout-confirm__sub {
  max-width: 340px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

/* Order Summary Sidebar */
.checkout-summary__title {
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.checkout-summary__items { margin-bottom: 20px; }
.checkout-summary__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.checkout-summary__item:first-child { padding-top: 0; }
.checkout-summary__item img {
  width: 56px;
  height: 68px;
  object-fit: cover;
  background: var(--color-bg-alt);
  flex-shrink: 0;
  display: block;
}
.checkout-summary__item > div { flex: 1; min-width: 0; }
.checkout-summary__item p {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.summary-variant { color: var(--color-text-muted) !important; font-size: 14px !important; }
.checkout-summary__item > span {
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 400;
  flex-shrink: 0;
  color: var(--color-text);
}

.checkout-summary__totals {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.summary-row--total {
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  letter-spacing: 0.02em;
}

/* ── Account Page ─────────────────────────────────────────── */
.account-page { background: var(--color-bg); min-height: 100vh; }

/* Auth Gate */
.auth-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 64px);
  padding: 48px 24px;
}
.auth-gate__box {
  width: 100%;
  max-width: 460px;
  background: var(--color-white);
  padding: 52px 48px 44px;
}
.auth-gate__box .auth__tabs { margin-bottom: 36px; }

/* Account Dashboard */
.account-dashboard {
  display: flex;
  min-height: calc(100vh - 64px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 40px;
  gap: 72px;
  align-items: flex-start;
}
.account-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 88px; }

.account-sidebar__name {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.account-sidebar__email {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 36px;
}
.account-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.account-nav-btn {
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  padding: 14px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.account-nav-btn:hover { color: var(--color-text); }
.account-nav-btn.is-active { color: var(--color-text); }
.account-nav-btn--logout {
  margin-top: 24px;
  border: none;
  color: var(--color-text-faint);
  font-size: 14px;
  letter-spacing: 0.1em;
}
.account-nav-btn--logout:hover { color: #b5341e; }

.account-main { flex: 1; min-width: 0; }
.account-panel { display: none; }
.account-panel.is-active { display: block; }
.account-panel__title {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.06em;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.account-empty {
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 300;
  color: var(--color-text-muted);
  padding: 40px 0;
  letter-spacing: 0.04em;
}

/* Order Cards */
.orders-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border-light); }
.order-card {
  background: var(--color-white);
  padding: 24px 28px;
}
.order-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.order-card__id {
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.order-card__status {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.order-status--pending    { background: #fdf8ec; color: #9a6e00; }
.order-status--confirmed  { background: #f0f7f1; color: #2a6b34; }
.order-status--dispatched { background: #eef4fb; color: #1a4f8a; }
.order-status--delivered  { background: #f0f7f1; color: #1e5028; }
.order-status--cancelled  { background: #fdf0ee; color: #8a2318; }
.order-card__date {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-left: auto;
}
.order-card__items p {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  line-height: 1.5;
}
.order-card__total {
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
}

/* Address Cards */
.addresses-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border-light); }
.address-card {
  background: var(--color-white);
  padding: 20px 28px;
}
.address-card p {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.default-badge {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-text);
  color: var(--color-white);
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: middle;
}
.address-delete {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  cursor: pointer;
  padding: 8px 0 0;
  display: inline-block;
  transition: color 0.2s;
}
.address-delete:hover { color: #b5341e; }

/* Add Address Form */
.account-main .checkout-form .form-row { display: flex; gap: 16px; }
.account-main .checkout-form .form-row .form-group { flex: 1; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .checkout-main,
  .account-dashboard { flex-direction: column; padding: 32px 20px; gap: 40px; }
  .checkout-summary-col,
  .account-sidebar { width: 100%; position: static; }
  .checkout-header { padding: 0 20px; }
  .auth-gate__box { padding: 36px 28px; }
  .auth-modal { padding: 40px 28px 32px; }
  .cart-drawer { width: 100vw; }
}
@media (max-width: 480px) {
  .checkout-form .form-row { flex-direction: column; gap: 0; }
  .checkout-confirm h2 { font-size: 28px; }
}

/* Philosophy Section Styling */
.philosophy__text {
  color: var(--color-accent) !important;
}

/* ============================================================
   GRAIN TEXTURE OVERLAY
   ============================================================ */
.grain-overlay {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 99997;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

/* ============================================================
   BRAND INTRO SECTION  (Odd Ritual DNA — logo left, text right)
   ============================================================ */
.brand-intro {
  padding: clamp(72px, 9vw, 130px) var(--gutter-desktop) clamp(64px, 8vw, 110px);
}

.brand-intro__inner {
  display: grid;
  grid-template-columns: clamp(100px, 18vw, 260px) 1fr;
  column-gap: clamp(48px, 10vw, 180px);
  align-items: center;
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.brand-intro__logo-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.brand-intro__logo {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  filter: invert(1);  /* logo SVG is white — invert to black on light bg */
}

.brand-intro__text-col {
  max-width: 620px;
}

.brand-intro__statement {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.65;
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ============================================================
   FEATURED PRODUCTS TRACK  (horizontal infinite scroll)
   ============================================================ */
.product-track-section {
  padding-bottom: clamp(48px, 5vw, 80px);
}

.product-track-section__header,
.product-track-section__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px var(--gutter-desktop);
}

.product-track-section__label {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-track-section__footer {
  padding-top: 30px;
}

.product-track-section__cta {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  position: relative;
  padding-bottom: 3px;
  opacity: 1;
  transition: color 0.3s ease;
}

.product-track-section__cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: color 0.3s ease;
}

.product-track-section__cta:hover {
  opacity: 1;
  color: var(--color-accent);
}

/* Track outer — hides overflow, handles cursor */
.product-track-outer {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.product-track-outer.is-dragging {
  cursor: grabbing;
}

/* Inner flex row — GSAP x-moves this */
.product-track__inner {
  display: flex;
  gap: 3px;
  will-change: transform;
}

/* ── Individual card — tall portrait, light bg, Odd Ritual scale ── */
.product-track__item {
  flex-shrink: 0;
  width: clamp(260px, 33.5vw, 500px);
  height: calc(100svh - 190px);
  min-height: 400px;
  max-height: 760px;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #EBEBEB;
  overflow: hidden;
}

/* Image area — fills most of the card */
.product-track__media {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #EBEBEB;
}

.product-track__img {
  position: absolute;
  inset: 8% 10%;          /* breathing room around product */
  width: 80%;
  height: 84%;
  object-fit: contain;    /* product floats on clean background */
  object-position: center;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-track__item:hover .product-track__img {
  transform: scale(1.04) translateY(-8px);
}

/* Bottom info strip */
.product-track__meta {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 16px 16px;
  background: #EBEBEB;
  border-top: 1px solid rgba(0,0,0,0.08);
  transition: background 0.35s ease;
}

.product-track__item:hover .product-track__meta {
  background: #E2E2E2;
}

.product-track__meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-track__name {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.4;
  font-weight: 400;
}

.product-track__sub {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-track__price {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Accent arrow → */
.product-track__arrow {
  font-size: 16px;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.product-track__item:hover .product-track__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Mobile responsive ─── */
@media (max-width: 768px) {
  .brand-intro__inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .brand-intro__logo {
    max-width: 120px;
  }

  .brand-intro__statement {
    font-size: 17px;
  }

  .product-track__item {
    width: 80vw;
    height: 65vh;
    min-height: 320px;
  }
}

/* ============================================================
   OVERRIDES v2 — Exact Odd Ritual DNA replication
   ============================================================ */

/* ── Global font: Instrument Serif (same as Odd Ritual) ──── */
:root {
  --font-body:    "Instrument Serif", "Cormorant Garamond", serif;
  --font-display: "Bodoni Moda", "Instrument Serif", serif;
}

/* ── Accent color applied throughout ───────────────────────── */
/* Hero slide numbers */
.hero-slider_num,
.hero-slider_scroll,
.is-active-indicator {
  color: var(--color-white);
}

/* Featured / View All labels */
.product-track-section__label,
.product-track-section__cta {
  color: var(--color-accent);
}
.product-track-section__cta::after {
  background: var(--color-accent);
}
.product-track-section__cta:hover {
  color: var(--color-text);
}

/* Menu toggle lines — white on transparent/hero, dark when scrolled (handled in base rules) */

/* ── Brand intro — exact 50/50 split, Odd Ritual match ────── */
.brand-intro {
  padding: clamp(80px, 10vw, 140px) 0;
  overflow: hidden;
}

.brand-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  align-items: flex-start;
  max-width: 100%;
  margin: 0;
  padding: 0 var(--gutter-desktop);
}

.brand-intro__logo-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-right: clamp(40px, 5vw, 80px);
}

.brand-intro__logo {
  width: clamp(120px, 18vw, 240px);
  height: auto;
  display: block;
  filter: invert(1);
}

.brand-intro__text-col {
  max-width: 100%;
  padding-left: clamp(20px, 3vw, 48px);
}

.brand-intro__statement {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.4vw, 38px);
  line-height: 1.5;
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── Product track — Odd Ritual card structure ─────────────── */
.product-track-section {
  padding-bottom: clamp(48px, 5vw, 80px);
}

.product-track-outer {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.product-track-outer.is-dragging {
  cursor: grabbing;
}

.product-track__inner {
  display: flex;
  gap: 3px;
  will-change: transform;
  transform: translateX(0);
  padding: 0;  /* edge-to-edge — no side gutters */
}

/* The card — image fills all, info overlaid at bottom */
.product-track__item {
  flex-shrink: 0;
  width: clamp(300px, 34vw, 700px);
  height: 82svh;
  min-height: 440px;
  max-height: none;   /* override earlier 760px cap */
  position: relative;
  background: #E8E8E8;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

/* Full-bleed image — sits behind the info overlay */
.product-track__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 40%;
  background: #E8E8E8;
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  display: block;
  max-width: none;
  height: 100%;
}

.product-track__item:hover .product-track__img {
  transform: scale(1.04);
}

/* The link covers the entire card so click works */
.product-track__link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
}

/* Info strip — positioned at absolute bottom */
.product-track__info {
  background: #E8E8E8;
  border-top: 1px solid rgba(0,0,0,0.09);
  padding: 14px 16px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.product-track__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-track__name {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.4;
  font-weight: 400;
}

.product-track__sku {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.product-track__price-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.product-track__price {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* Animated diagonal arrow — Odd Ritual exact DNA */
.product-track__arrow-wrap {
  position: relative;
  width: 13px;
  height: 13px;
  overflow: hidden;
  flex-shrink: 0;
}

.product-track__arrow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  stroke-width: 1;
  color: var(--color-accent);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-track__arrow-svg.is-2 {
  transform: translate(-110%, 110%);
}

.product-track__item:hover .product-track__arrow-svg:not(.is-2) {
  transform: translate(110%, -110%);
}

.product-track__item:hover .product-track__arrow-svg.is-2 {
  transform: translate(0, 0);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .brand-intro__inner {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .brand-intro__logo-col { padding-right: 0; }
  .brand-intro__text-col { padding-left: 0; }
  .brand-intro__statement { font-size: 18px; }
  .product-track__item {
    width: 78vw;
    height: 64vh;
    min-height: 320px;
  }
}

/* ============================================================
   PRODUCT TRACK v3 — Exact OR layout: info always visible
   ============================================================ */

/* Info panel: always visible, column layout — name/sku top, price bottom */
.product-track__info {
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  min-height: 115px !important;
  gap: 0 !important;
  transition: background 0.3s ease;
  background: #FAFAF9 !important;
  padding: 18px 20px 20px !important;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.product-track__item:hover .product-track__info {
  background: #F3F2F0 !important;
}

/* Hover image — sits above primary, crossfades in on hover */
.product-track__img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 40%;
  background: #E8E8E8;
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity;
  display: block;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

.product-track__item:hover .product-track__img-hover {
  opacity: 1;
}

/* Card: true flex column — image fills top, info strip sits below (no overlap) */
.product-track__item {
  display: flex !important;
  flex-direction: column !important;
}

/* Image wrapper: takes all remaining height above the info strip */
.product-track__img-wrap {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.product-track__img-wrap .product-track__img,
.product-track__img-wrap .product-track__img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Link: sits in normal flow below the image wrap */
.product-track__link {
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex-shrink: 0;
  z-index: auto !important;
  text-decoration: none;
}

/* Card text — clean uppercase sans-serif, OR-scale */
.product-track__name {
  font-family: "Questrial", sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1A1A1A !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.product-track__sku {
  font-family: "Questrial", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7B8487 !important;
}

.product-track__price {
  font-family: "Questrial", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  color: #1A1A1A !important;
}

/* Price row: price left, arrow right — OR layout */
.product-track__price-row {
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Arrow wrap slightly bigger to match OR */
.product-track__arrow-wrap {
  width: 16px;
  height: 16px;
}

.product-track__arrow-svg {
  width: 16px;
  height: 16px;
}

/* Section header — OR exact type spec */
.product-track-section__label {
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Mobile overrides */
@media (max-width: 768px) {
  .product-track__name { font-size: 15px !important; }
  .product-track__price { font-size: 14px !important; }
}

/* ============================================================
   MANIFESTO SECTION — Odd Ritual exact DNA
   ============================================================ */
.manifesto-section {
  background: var(--color-bg);
  overflow: hidden;
}

/* Full-bleed image — 80svh, parallax img inside */
.manifesto__visual {
  position: relative;
  width: 100%;
  height: 80svh;
  min-height: 460px;
  overflow: hidden;
}

.manifesto__img {
  width: 100%;
  height: 115%;             /* taller than container — room for parallax drift */
  object-fit: cover;
  object-position: center 25%;
  display: block;
  will-change: transform;
  transform-origin: center top;
}

/* Text block — sits directly below the image on the page bg colour */
.manifesto__copy {
  padding-top: clamp(12px, 1.8vw, 28px);
  padding-left: var(--gutter-desktop);
  padding-right: var(--gutter-desktop);
  padding-bottom: clamp(64px, 9vw, 130px);
}

/* Headline — massive Instrument Serif italic, OR scale */
.manifesto__headline {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(72px, 13vw, 192px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--color-text);
  font-weight: 400;
  margin: 0;
}

/* Lines — no clipping, reveal is opacity-based in JS */
.manifesto__line {
  display: block;
}

.manifesto__line-inner {
  display: block;
  font-style: inherit;
}

/* Mobile */
@media (max-width: 768px) {
  .manifesto__visual {
    height: 62svh;
    min-height: 300px;
  }

  .manifesto__headline {
    font-size: clamp(52px, 15vw, 90px);
    line-height: 0.92;
  }

  .manifesto__copy {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
    padding-bottom: clamp(48px, 10vw, 80px);
  }
}

/* ============================================================
   GLOBAL POINTER-EVENTS SAFETY NET
   Ensures no overlay or z-index issue can silently block links/buttons.
============================================================ */
a[href], button, [role="button"] {
  pointer-events: auto;
}

.nav, header {
  pointer-events: auto;
}

/* Hero video layer — never intercept clicks */
.hero-video-wrapper,
.hero-video-wrapper video,
.hero-video-overlay {
  pointer-events: none !important;
}

/* Site-info click pass-through with hero-intro_copy restoring it */
.hero-intro_copy a,
.hero-intro_copy button {
  pointer-events: auto;
  position: relative;
  z-index: 20;
}

/* ============================================================
   REPLICATED ODD RITUAL HOMEPAGE SECTIONS
   ============================================================ */

/* ── Split Grid (3-column layout) ────────────────────────── */
.split-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--color-bg);
}
.split-grid .split-col {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  height: 75vh;
  min-height: 550px;
  overflow: hidden;
}
.split-grid .split-col.u-column-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.split-grid .split-col.u-column-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
@media (max-width: 991px) {
  .split-grid .split-col.u-column-6,
  .split-grid .split-col.u-column-3 {
    flex: 0 0 100%;
    max-width: 100%;
    height: 60vh;
    border-right: none;
  }
}

.cta-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
}
.cta-block .body-upper.is-desktop {
  padding: 30px 40px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  z-index: 5;
  background-color: var(--color-bg);
}
.cta-img_wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.cta-img_wrap .g_visual_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-brand);
}
.cta-block:hover .g_visual_img {
  transform: scale(1.04);
}
.img-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(26,26,26,0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}
.cta-block:hover .img-overlay {
  opacity: 1;
}
.cta-hover_el {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 3;
  color: var(--color-white);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-brand);
  transform: translateY(15px);
}
.cta-block:hover .cta-hover_el {
  opacity: 1;
  transform: translateY(0);
}
.cta-hover_el .body-upper {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 12px;
}
.cta-hover_el .orgc-detail {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  gap: 4px;
  color: var(--color-white);
}
.detail-svg {
  width: 6px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* ── Brand Info Bar ────────────────────────────────────────── */
.or-info {
  padding: 100px var(--gutter-desktop) 80px var(--gutter-desktop);
  color: #686060;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.text-style_alt-large {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 60px;
  text-transform: uppercase;
  color: var(--color-text);
}
.or-info .split-grid {
  border: none;
  max-width: 1000px;
  margin: 0 auto;
}
.or-info .u-column-3 {
  flex: 0 0 25%;
  max-width: 25%;
  min-height: auto;
  border: none;
  padding: 0;
}
.or-info .u-column-6 {
  flex: 0 0 50%;
  max-width: 50%;
  min-height: auto;
  border: none;
  padding: 0;
}
.or-info .body-upper.f-5 {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.or-info .u-text-align-center {
  text-align: center;
}
.or-info .u-text-align-right {
  text-align: right;
}
.logo-icon_wrap {
  margin-top: 60px;
  width: 52px;
  height: auto;
  display: flex;
  justify-content: center;
  opacity: 0.85;
}
.logo-icon_wrap--lg {
  width: 68px;
}
.logo-icon_wrap svg {
  width: 100%;
  height: auto;
  fill: currentColor;
  color: var(--color-text);
}
@media (max-width: 991px) {
  .or-info {
    padding: 60px var(--gutter-mobile) 40px var(--gutter-mobile);
  }
  .or-info .u-column-3.is-hidden {
    display: none;
  }
  .or-info .u-column-6 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .text-style_alt-large {
    margin-bottom: 40px;
  }
  .logo-icon_wrap {
    margin-top: 40px;
  }
}

/* ── Full-Bleed Lifestyle Visual ───────────────────────────── */
.full-bleed-visual-section {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.full-bleed-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: #000000;
}
.full-bleed-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.full-bleed-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45); /* exact same opacity as hero video */
  z-index: 1;
}
.full-bleed-video-wrapper,
.full-bleed-video-wrapper video,
.full-bleed-video-overlay {
  pointer-events: none;
}
@media (max-width: 991px) {
  .full-bleed-visual-section {
    height: 60dvh;
  }
}

/* ── "More Than Just Wearables" Manifesto Section ──────────────── */
.manifesto-section {
  padding: 120px var(--gutter-desktop);
  background-color: #FFFFFF; /* Pure white matching Odd Ritual */
  border-bottom: 1px solid var(--color-border);
}
.manifesto-split-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
.manifesto-split-header .left-col {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.manifesto-split-header .right-col {
  flex: 0 0 41.666%;
  max-width: 41.666%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
}
.manifesto-header-svg {
  width: 100px;
  height: auto;
  color: var(--color-text);
  margin-bottom: 10px;
}
.manifesto-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-text);
}
.manifesto-intro-subtitle {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
}
.manifesto-intro-desc {
  font-family: var(--font-ui); /* Questrial Grotesque Sans-Serif */
  font-size: 17px;             /* Slightly bigger fonts */
  line-height: 1.5;
  color: var(--color-text-muted);
}
.manifesto-item {
  border-top: 0.5px solid var(--color-text); /* Thin dark line */
  padding: 0;
  position: relative;
  background-color: #FFFFFF;
}
.manifesto-item:last-child {
  border-bottom: 0.5px solid var(--color-text); /* Thin dark line on bottom */
}
@media (min-width: 992px) {
  .manifesto-item:nth-of-type(1) { z-index: 1; }
  .manifesto-item:nth-of-type(2) { z-index: 2; }
  .manifesto-item:nth-of-type(3) { z-index: 3; }
  .manifesto-item:nth-of-type(4) { z-index: 4; }
}
.manifesto-item-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Stretch columns to match height */
}
.manifesto-item-text-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 40px var(--gutter-desktop) 40px 0; /* Align text with padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.manifesto-item-img-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.manifesto-item-num-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 16px;
}
.manifesto-item-desc {
  font-family: var(--font-ui); /* Questrial Grotesque Sans-Serif */
  font-size: 17px;             /* Slightly bigger fonts */
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 460px;
}
.manifesto-item-img-wrap {
  width: 100%;
  aspect-ratio: 2; /* 2:1 Wide format matching Odd Ritual */
  overflow: hidden;
  position: relative;
  clip-path: inset(100% 0% 0% 0%);
  margin-bottom: 40px; /* Space before next line */
}
.manifesto-item-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-brand);
}
.manifesto-item-img-wrap:hover img {
  transform: scale(1.04);
}
@media (max-width: 991px) {
  .manifesto-section {
    padding: 60px var(--gutter-mobile);
  }
  .manifesto-split-header {
    margin-bottom: 60px;
  }
  .manifesto-split-header .left-col,
  .manifesto-split-header .right-col {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .manifesto-split-header .right-col {
    margin-top: 40px;
  }
  .manifesto-item {
    padding: 0;
  }
  .manifesto-item-text-col,
  .manifesto-item-img-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .manifesto-item-text-col {
    padding: 30px 0 20px 0;
  }
  .manifesto-item-img-col {
    margin-top: 0;
  }
  .manifesto-item-img-wrap {
    aspect-ratio: 2;
    margin-bottom: 30px;
  }
}

/* ── Redesigned Footer (Odd Ritual Style) ──────────────────── */
.footer-ritual {
  background-color: var(--color-bg);
  color: var(--color-text);
  padding: 100px var(--gutter-desktop) 40px var(--gutter-desktop);
  border-top: 1px solid var(--color-border);
}
.footer-ritual-inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.footer-top-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 80px;
  gap: 40px;
}
.footer-logos-col {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
.footer-logo-svg-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-logo-radical {
  width: 80px;
  height: auto;
  color: var(--color-text);
}
.footer-info-col {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  text-align: center;
}
.footer-tagline {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #686060;
}
.footer-signup-col {
  flex: 0 0 30%;
  max-width: 30%;
}
.footer-signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.footer-signup-form input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--color-border);
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--color-text);
  text-transform: uppercase;
  outline: none;
  transition: border-bottom-color 0.3s ease;
}
.footer-signup-form input:focus {
  border-bottom-color: var(--color-text);
}
.footer-signup-submit {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.footer-signup-submit:hover {
  opacity: 0.6;
}
.footer-ritual-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: 60px;
}
.footer-bottom-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}
.footer-bottom-col {
  display: flex;
  flex-direction: column;
}
.footer-col-header {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 24px;
}
.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links-list li {
  line-height: 1.2;
}
.footer-links-list a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.footer-links-list a:hover {
  color: var(--color-text);
  opacity: 1;
}
.footer-text-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted) !important;
  text-transform: uppercase;
}
.footer-text-span {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-text-muted);
}
.footer-ritual-copyright-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--color-text-faint);
  text-transform: uppercase;
  border-top: 1px solid var(--color-border);
  padding-top: 30px;
}
@media (max-width: 991px) {
  .footer-ritual {
    padding: 60px var(--gutter-mobile) 30px var(--gutter-mobile);
  }
  .footer-top-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    gap: 30px;
  }
  .footer-logos-col, .footer-info-col, .footer-signup-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer-signup-col {
    width: 100%;
  }
  .footer-signup-submit {
    align-self: center;
  }
  .footer-bottom-row {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
  }
  .footer-col-header {
    margin-bottom: 12px;
  }
  .footer-ritual-divider {
    margin-bottom: 40px;
  }
}


/* ============================================================
   SHOP PAGE — Collection + Product Grid
   ============================================================ */

/* ── Shop page wrapper ──────────────────────────────────── */
.shop-page {
  background: #F8F7F4;
  color: #1a1a1a;
  min-height: 100dvh;
}

/* ── Shop header — compact, minimal ────────────────────── */
.shop-header {
  padding: calc(var(--nav-height) + 3.5rem) 4vw 0;
  background: #F8F7F4;
}

.shop-header__label {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 0.75rem;
}

.shop-header__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 1.5rem;
}

.shop-header__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}

.shop-header__collection {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
}

/* ── Filter bar ─────────────────────────────────────────── */
.shop-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 4vw 1.5rem;
  background: #F8F7F4;
}

.shop-filters__left {
  display: flex;
  align-items: center;
}

.filter-pill {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-right: 2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.filter-pill--active,
.filter-pill:hover {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}

.product-count {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Products section ───────────────────────────────────── */
.products-section {
  padding: 0 0 clamp(4rem, 6vw, 7rem);
}

/* ── Product grid — 3 columns ───────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 2.5rem);
  padding: 0 4vw;
}

/* ── Product card ───────────────────────────────────────── */
.product-card {
  background: #F8F7F4;
  position: relative;
}

.product-card__link {
  display: block;
  text-decoration: none;
  opacity: 1 !important;
}

.product-card__link:hover,
.product-card__link:hover * {
  opacity: 1;
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F8F7F4;
}

/* Placeholder — warm solid neutral, clearly visible */
.product-card__placeholder {
  width: 100%;
  height: 100%;
  background: #ECEAE5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-card__placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    transparent 40%,
    rgba(0, 0, 0, 0.06) 100%
  );
  pointer-events: none;
}

.product-card__placeholder-inner {
  text-align: center;
  z-index: 1;
}

.product-card__placeholder-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.75rem, 1vw, 1rem);
  letter-spacing: 0.3em;
  color: rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.product-card__placeholder-sub {
  display: block;
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
}

/* Real images — dual hover swap */
.product-card__image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-primary { opacity: 1; z-index: 1; }
.img-hover   { opacity: 0; z-index: 2; }

.product-card:hover .img-primary { opacity: 0; }
.product-card:hover .img-hover   { opacity: 1; }

/* Hover CTA */
.product-card__hover-cta {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.35);
  padding: 0.45rem 1rem;
  background: rgba(237, 232, 225, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  z-index: 10;
}

.product-card:hover .product-card__hover-cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Card info row — name left, price right */
.product-card__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.85rem 0 1.25rem;
  background: #F8F7F4;
}

.product-card__name {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-transform: none;
}

.product-card__price {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}

.product-card__price .price-original {
  text-decoration: line-through;
  color: var(--color-crimson);
  opacity: 0.75;
  font-weight: 300;
}

.product-card__price .price-discounted {
  color: #1a1a1a;
  font-weight: 500;
}

/* ── Featured Products (homepage, dark context) ──────────── */
.featured-products {
  background: #000000;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.5rem, 5vw, 6rem) clamp(5rem, 8vw, 9rem);
}

.featured-products__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.featured-products__label {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--color-saffron);
  text-transform: uppercase;
}

.featured-products__all {
  font-family: 'Inter Tight', 'Questrial', sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}

.featured-products__all:hover {
  color: #ffffff;
  opacity: 1;
}

.featured-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* Dark-context overrides for cards inside featured section */
.featured-products .product-card {
  background: #000000;
}

.featured-products .product-card__image-wrap {
  background: #111111;
}

.featured-products .product-card__info {
  background: #000000;
}

.featured-products .product-card__name {
  color: #ffffff;
}

.featured-products .product-card__price {
  color: var(--color-saffron);
}

.featured-products .product-card__price .price-original {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.featured-products .product-card__price .price-discounted {
  color: var(--color-saffron);
}

.featured-products .product-card__hover-cta {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.38);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .products-grid,
  .featured-products__grid {
    grid-template-columns: 1fr;
  }

  .shop-header {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .shop-filters {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .featured-products {
    padding: 3.5rem 1.25rem 4.5rem;
  }
}

@media (hover: none) {
  .product-card__hover-cta {
    display: none;
  }
}

/* ===== MOBILE STYLES (max-width: 768px) ===== */
@media (max-width: 768px) {
  .menu-link {
    font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
  }
  .menu-bottom_layout.is-menu {
    position: relative !important;
    top: auto !important;
    margin-top: 30px !important;
    left: 0 !important;
    width: 100% !important;
    padding-bottom: 20px !important;
  }
  .menu-bottom_layout:not(.is-menu) {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
  }
  .menu-bottom_layout:not(.is-menu) .menu-footer_col {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .menu-extras {
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 20px !important;
  }
  /* Image previews are desktop-only; on mobile the menu list takes the full width */
  .menu-img_wrap {
    display: none !important;
  }
  .menu-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding-top: 20dvh !important;
  }
  .menu-contain {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100dvh !important;
  }
}

/* Mobile responsive styling for About page split grid */
@media (max-width: 991px) {
  .about-hero {
    padding: 120px var(--gutter-mobile) 40px;
  }
  .about-hero__content {
    text-align: center;
    margin-bottom: 40px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-grid__media-col {
    max-width: 450px;
    margin: 0 auto;
  }
  .about-grid__text-col {
    padding-top: 0;
  }
  .founder-bio__inner {
    max-width: 100%;
  }
  .philosophy__text {
    font-size: 20px;
  }
}

/* ── Policy Pages Styling ──────────────────────────────────── */
.policy-page-content {
  font-family: var(--font-ui), sans-serif;
  color: var(--color-text);
  line-height: 1.8;
  font-size: 15px;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px;
}
.policy-page-content h2, .policy-page-content h3 {
  font-family: var(--font-display), serif;
  color: var(--color-text);
  margin-top: 48px;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.policy-page-content h2 {
  font-size: 24px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
  text-transform: uppercase;
}
.policy-page-content h3 {
  font-size: 18px;
  text-transform: uppercase;
}
.policy-page-content p {
  margin-bottom: 24px;
  color: #333;
}
.policy-page-content ul, .policy-page-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
  list-style: square;
}
.policy-page-content li {
  margin-bottom: 12px;
}
.policy-page-content strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Footer brand description paragraph styling */
.footer-about-text {
  font-family: var(--font-ui), sans-serif;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-top: 16px;
  text-align: center;
}

/* ============================================================
   DELHIVERY LOGISTICS & TRACKING SYSTEM
   ============================================================ */

/* 1. Checkout Pincode Checker */
.pincode-result {
  font-family: var(--font-ui), sans-serif;
  font-size: 12px;
  margin-top: 8px;
  min-height: 18px;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.pincode-checking {
  color: var(--color-text-muted);
}

.pincode-available {
  color: #10B981; /* Emerald Green */
  font-weight: 500;
}

.pincode-unavailable {
  color: var(--color-crimson);
  font-weight: 500;
}

.pincode-error {
  color: var(--color-crimson);
}

/* 2. Tracking Page Layout */
.tracking-page {
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tracking-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

.tracking-container {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 48px;
  max-width: 650px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.tracking-title {
  font-family: var(--font-display), serif;
  font-size: 32px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 400;
}

.tracking-subtitle {
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 36px;
  line-height: 1.6;
}

.tracking-form-group {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.tracking-form-group input {
  flex: 1;
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.3s ease;
}

.tracking-form-group input:focus {
  border-color: var(--color-text);
}

.tracking-form-group button {
  white-space: nowrap;
  padding: 14px 28px;
}

.track-result-container {
  margin-top: 40px;
}

.track-loading {
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px;
}

/* Current Status Box */
.track-current-status {
  padding: 24px;
  background-color: var(--color-bg);
  border-left: 3px solid var(--color-text);
  margin-bottom: 36px;
}

.track-badge {
  display: inline-block;
  font-family: var(--font-ui), sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--color-text);
  color: var(--color-white);
  padding: 6px 12px;
  margin-bottom: 12px;
}

.track-instruction {
  font-family: var(--font-body), serif;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 6px;
  color: var(--color-text);
}

.track-meta {
  font-family: var(--font-ui), sans-serif;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* History Timeline */
.track-history {
  border-top: 1px solid var(--color-border);
  padding-top: 36px;
}

.history-title {
  font-family: var(--font-display), serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  font-weight: 500;
}

.timeline {
  list-style: none;
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-color: var(--color-border);
}

.timeline-item {
  position: relative;
  margin-bottom: 28px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-text-faint);
  transition: all 0.3s ease;
}

.timeline-item:first-child .timeline-dot {
  background-color: var(--color-text);
  border-color: var(--color-text);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scan-status {
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.scan-location {
  font-family: var(--font-ui), sans-serif;
  font-size: 13px;
  color: var(--color-text-muted);
}

.scan-time {
  font-family: var(--font-ui), sans-serif;
  font-size: 11px;
  color: var(--color-text-faint);
}

.empty-history {
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 768px) {
  .tracking-container {
    padding: 32px 20px;
  }
  .tracking-form-group {
    flex-direction: column;
  }
  .tracking-form-group button {
    width: 100%;
  }
}