/* ==========================================================================
   OYELAN — homepage design system  (index.html ONLY)
   --------------------------------------------------------------------------
   Everything here is scoped under body[data-page="home"], so none of the other
   18 storefront pages or the admin panel are affected by a single byte here.

   What this file does:
     1. remaps the EXISTING design tokens (:root in style.css) to the new
        plum / ivory luxury palette — buttons, cards, forms, drawers and the
        cart all inherit the new brand automatically, no duplication;
     2. turns .site-header into a transparent-over-hero bar that gains a
        solid blurred background once scrolled (main.js already toggles
        .is-scrolled at scrollY > 8);
     3. styles the full-bleed 90vh hero;
     4. styles the 3-up featured-products grid (2-up tablet, 1-up mobile);
     5. styles the minimal footer.

   Reused, not rewritten: .container, .btn (+ modifiers), .product-card and
   all of its parts, .brand, .icon-btn, .lang-switch, .site-footer and the
   existing i18n data-attributes.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. tokens
   The brief's palette:
     Primary #3E263D · Secondary #8B6F7F · Background #FFF9F7
     Text #2B2025 · Accent #C9A7B8 · White #FFFFFF
   Two documented deviations, both for WCAG contrast:
     --accent  #C9A7B8 only ever sits on DARK surfaces (hero, footer) = 6.5:1
     --accent-ink #6B4F60 is the same hue darkened for light surfaces = 7.0:1,
               because #C9A7B8 on ivory would only reach ~2.4:1.
     Body copy keeps --text #2B2025 exactly as specified (≈14:1 on ivory).
*/
body[data-page="home"] {
  --brand: #3E263D;            /* primary plum            */
  --brand-dark: #2A1929;
  --brand-soft: #C9A7B8;       /* accent                  */
  --gold: #C9A7B8;             /* the accent keeps the "gold" token's roles */
  --gold-dark: #8B6F7F;        /* secondary               */
  --beige: #F4EAEE;
  --bg: #FFF9F7;
  --cream: #F8F0F3;
  --dark: #2B2025;
  --text: #2B2025;
  --green: #6E5A63;
  --border: #F1E3E8;
  --border-strong: #E3CED7;
  --white: #FFFFFF;

  --accent: #C9A7B8;           /* for dark surfaces only  */
  --accent-ink: #6B4F60;       /* for light surfaces      */

  --shadow-sm: 0 2px 12px rgba(62, 38, 61, 0.06);
  --shadow-md: 0 14px 38px rgba(62, 38, 61, 0.10);
  --shadow-lg: 0 26px 64px rgba(62, 38, 61, 0.16);

  --header-h: 84px;
  --section-y: clamp(3.75rem, 7vw, 6.5rem);
  --home-h1: clamp(2.5rem, 6.4vw, 5rem);
}

/* :root-level pseudo-elements resolve against :root, not <body>, so the two
   rules they feed have to be restated here for the homepage palette. */
body[data-page="home"] ::selection { background: var(--brand); color: var(--white); }
body[data-page="home"] :focus-visible { outline-color: var(--brand); }

body[data-page="home"] { scroll-padding-top: calc(var(--header-h) + 1.5rem); }

/* ------------------------------------------------------------------ 2. header */
body[data-page="home"] .site-header {
  position: fixed;                 /* was sticky — the bar now LAYERS OVER the hero */
  inset: 0 0 auto;
  z-index: 80;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition:
    background 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease,
    backdrop-filter 420ms ease,
    -webkit-backdrop-filter 420ms ease;
}
body[data-page="home"] .site-header.is-scrolled {
  background: rgba(255, 249, 247, 0.88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 28px rgba(62, 38, 61, 0.09);
}

/* centred nav: 1fr | auto | 1fr so the menu sits optically dead-centre no
   matter how wide the logo lockup and the action cluster get.
   `minmax(0, …)` (not bare `1fr`) is essential: a bare `1fr` track is floored
   at its auto/min-content width, so the wider action cluster pushed the two
   side tracks out of balance and knocked the nav ~20px off centre. */
body[data-page="home"] .site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
}
body[data-page="home"] .brand { margin-inline-end: 0; justify-self: start; }
body[data-page="home"] .main-nav { justify-self: center; }
body[data-page="home"] .header-actions { justify-self: end; }

/* --- transparent (top of page) state: white type on the photo --------------- */
body[data-page="home"] .site-header:not(.is-scrolled) .brand__text,
body[data-page="home"] .site-header:not(.is-scrolled) .main-nav a,
body[data-page="home"] .site-header:not(.is-scrolled) .nav-drop-btn,
body[data-page="home"] .site-header:not(.is-scrolled) .icon-btn,
body[data-page="home"] .site-header:not(.is-scrolled) .lang-btn { color: #FFFFFF; }
body[data-page="home"] .site-header:not(.is-scrolled) .brand__text small {
  color: rgba(255, 255, 255, 0.82);
}
body[data-page="home"] .site-header:not(.is-scrolled) .icon-btn:hover,
body[data-page="home"] .site-header:not(.is-scrolled) .main-nav a:hover,
body[data-page="home"] .site-header:not(.is-scrolled) .nav-drop-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
body[data-page="home"] .site-header:not(.is-scrolled) .main-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
body[data-page="home"] .site-header:not(.is-scrolled) .badge-count {
  background: #FFFFFF; color: var(--brand); border-color: transparent;
}

/* ------------------------------------------------------- categories menu ---
   The rules above are (0,4,2) and reach every `.main-nav a` — including the
   anchors inside `.dropdown`. That panel is an opaque white card (pinned
   unconditionally further down), so on the homepage, before scrolling,
   Categories opened with every category painted white on white: the panel
   appeared, the text did not.

   The card never turns translucent, so its text is never white. The gate below
   mirrors the rule above exactly (only the transparent state needs undoing —
   once the header scrolls the white rule stops matching and the normal dark
   defaults apply), and the specificity is one step higher (0,5,2), so neither
   source order inside this file nor a later stylesheet can resurrect the bug. */
body[data-page="home"] .site-header:not(.is-scrolled) .dropdown .dd-row > a,
body[data-page="home"] .site-header:not(.is-scrolled) .dropdown .dd-sub a {
  color: var(--dark);
}
body[data-page="home"] .site-header:not(.is-scrolled) .dropdown .dd-row > a:hover,
body[data-page="home"] .site-header:not(.is-scrolled) .dropdown .dd-row > a:focus-visible,
body[data-page="home"] .site-header:not(.is-scrolled) .dropdown .dd-sub a:hover,
body[data-page="home"] .site-header:not(.is-scrolled) .dropdown .dd-sub a:focus-visible {
  background: var(--cream);
  color: var(--brand-dark);
}
/* the sub-menu chevron is a <button>, so no rule above ever matched it —
   it already renders at var(--text) on the card, and its open-state
   var(--brand) highlight must keep winning. Left untouched on purpose. */

/* the inline logo mark ships with olive/gold fills, which read as a different
   brand next to the plum wordmark. Recolour it for the homepage (CSS beats the
   SVG presentation attributes), then re-light it for the transparent state. */
body[data-page="home"] .brand__mark circle:first-child { fill: var(--brand); }
body[data-page="home"] .brand__mark circle:nth-child(2) { stroke: var(--accent); }
body[data-page="home"] .brand__mark text { fill: var(--white); }
/* recolour the inline logo mark for the dark hero */
body[data-page="home"] .site-header:not(.is-scrolled) .brand__mark circle:first-child {
  fill: rgba(255, 255, 255, 0.16);
}
body[data-page="home"] .site-header:not(.is-scrolled) .brand__mark circle:nth-child(2) {
  stroke: rgba(255, 255, 255, 0.72);
}

/* --- solid (scrolled) state ------------------------------------------------- */
body[data-page="home"] .site-header.is-scrolled .brand__text small { color: var(--accent-ink); }

body[data-page="home"] .main-nav > ul { gap: 0.1rem; }
body[data-page="home"] .main-nav a,
body[data-page="home"] .nav-drop-btn { padding: 0.5rem 1rem; font-size: 0.86rem; letter-spacing: 0.06em; }

/* --- header CTA ("SHOP NOW") ------------------------------------------------ */
body[data-page="home"] .nav-cta {
  margin-inline-start: 0.45rem;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
body[data-page="home"] .site-header:not(.is-scrolled) .nav-cta {
  background: #FFFFFF; color: var(--brand);
}
body[data-page="home"] .site-header:not(.is-scrolled) .nav-cta:hover {
  background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.75);
}
body[data-page="home"] .site-header.is-scrolled .nav-cta {
  background: var(--brand); color: #FFFFFF;
}
body[data-page="home"] .site-header.is-scrolled .nav-cta:hover {
  background: var(--brand-dark);
}

/* the categories dropdown always renders on an opaque white card */
body[data-page="home"] .dropdown {
  background: var(--white);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------ 3. hero */
.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 90vh;
  min-height: 90svh;              /* svh avoids the mobile URL-bar jump */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #241726;
  padding-block: calc(var(--header-h) + 3rem) 5.5rem;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.home-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  animation: homeHeroZoom 1400ms ease-out both;
}
@keyframes homeHeroZoom {
  from { transform: scale(1.07); opacity: 0.2; }
  to   { transform: scale(1);    opacity: 1; }
}
/* dark, subtle overlay so white type always clears WCAG AA.
   Three layers, each with one job:
     1. a TOP scrim. Without it the overlay is at its weakest across exactly
        the band the fixed header sits in — the 100deg layer has thinned to
        ~0.22 there and `to top` contributes nothing above 55%, so measured
        contrast for the header's own white type fell to 2.95:1 (the language
        switch) and 4.12:1 (the nav), both under the 4.5:1 AA floor. The band
        it darkens is 24% of the hero, and the header covers the first ~10%.
        At 1024×768 a near-hero-height hero left the band under ~0.34, putting
        the AR switch at 4.28:1, so the stops are stronger than the first pass.
     2. the reading-side gradient, strongest where the copy sits.
     3. a floor lift so the type does not sit on the brightest part of the
        photo at the bottom of the frame. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(30, 16, 28, 0.58) 0%, rgba(30, 16, 28, 0.44) 12%, rgba(30, 16, 28, 0) 24%),
    linear-gradient(100deg, rgba(30, 16, 28, 0.78) 0%, rgba(30, 16, 28, 0.5) 42%, rgba(30, 16, 28, 0.22) 78%),
    linear-gradient(to top, rgba(30, 16, 28, 0.55), rgba(30, 16, 28, 0) 55%);
}
/* in RTL the reading side flips, so the gradient has to flip with it */
html[dir="rtl"] body[data-page="home"] .home-hero::after {
  background:
    linear-gradient(to bottom, rgba(30, 16, 28, 0.58) 0%, rgba(30, 16, 28, 0.44) 12%, rgba(30, 16, 28, 0) 24%),
    linear-gradient(260deg, rgba(30, 16, 28, 0.78) 0%, rgba(30, 16, 28, 0.5) 42%, rgba(30, 16, 28, 0.22) 78%),
    linear-gradient(to top, rgba(30, 16, 28, 0.55), rgba(30, 16, 28, 0) 55%);
}
/* Below 1024 the hero copy spans the FULL hero width, so its right edge lands
   where the 100deg layer has thinned to 0.22 — measured contrast fell to
   2.28:1 (title) and 2.40:1 (lede) over the bright right side of the photo.
   On a phone the "reading side" is the whole hero, so under the tablet
   breakpoint the horizontal layer floors at 0.45 instead of 0.22. Desktop is
   untouched, where the copy stays on the left and the right half is free
   photo. */
@media (max-width: 1023.98px) {
  body[data-page="home"] .home-hero::after {
    background:
      linear-gradient(to bottom, rgba(30, 16, 28, 0.58) 0%, rgba(30, 16, 28, 0.44) 12%, rgba(30, 16, 28, 0) 24%),
      linear-gradient(100deg, rgba(30, 16, 28, 0.78) 0%, rgba(30, 16, 28, 0.62) 42%, rgba(30, 16, 28, 0.45) 78%),
      linear-gradient(to top, rgba(30, 16, 28, 0.55), rgba(30, 16, 28, 0) 55%);
  }
  html[dir="rtl"] body[data-page="home"] .home-hero::after {
    background:
      linear-gradient(to bottom, rgba(30, 16, 28, 0.58) 0%, rgba(30, 16, 28, 0.44) 12%, rgba(30, 16, 28, 0) 24%),
      linear-gradient(260deg, rgba(30, 16, 28, 0.78) 0%, rgba(30, 16, 28, 0.62) 42%, rgba(30, 16, 28, 0.45) 78%),
      linear-gradient(to top, rgba(30, 16, 28, 0.55), rgba(30, 16, 28, 0) 55%);
  }
}

.home-hero__copy {
  max-width: 42rem;
  color: #FFFFFF;
  animation: homeHeroUp 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
@keyframes homeHeroUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.home-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  /* var(--accent) rose-gold (#C9A7B8) measured 3.90–4.07:1 over the photo —
     under the 4.5:1 AA floor for small text. This is the same hue, one step
     lighter (#D9BCC9), so the label clears 4.5:1 while staying on palette. */
  color: #D9BCC9;
  margin: 0 0 1.5rem;
}
.home-hero__eyebrow::before,
.home-hero__eyebrow::after {
  content: ""; width: 1.75rem; height: 1px; background: rgba(201, 167, 184, 0.7);
}
.home-hero h1 {
  color: #FFFFFF;
  font-size: var(--home-h1);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 30px rgba(20, 10, 18, 0.4);
}
.home-hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.home-hero__lede {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
  margin: 0 0 2.4rem;
}
.home-hero__cta {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
}

/* hero buttons — solid white + hairline outline */
body[data-page="home"] .home-btn {
  padding: 1rem 2.3rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans);
}
body[data-page="home"] .home-btn--solid {
  background: #FFFFFF; color: var(--brand); box-shadow: 0 10px 30px rgba(20, 10, 18, 0.22);
}
body[data-page="home"] .home-btn--solid:hover {
  background: var(--brand); color: #FFFFFF; box-shadow: 0 12px 34px rgba(20, 10, 18, 0.3);
}
body[data-page="home"] .home-btn--line {
  background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.62);
}
body[data-page="home"] .home-btn--line:hover {
  background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; color: #FFFFFF;
}
body[data-page="home"] .home-btn--dark {
  background: var(--brand); color: #FFFFFF;
}
body[data-page="home"] .home-btn--dark:hover { background: var(--brand-dark); }

/* scroll indicator */
.home-hero__scroll {
  position: absolute;
  inset-inline: 0;
  bottom: 1.75rem;
  z-index: 1;
  margin-inline: auto;
  width: 26px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  transition: border-color var(--trans), background var(--trans);
}
.home-hero__scroll:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.home-hero__scroll::before {
  content: "";
  width: 4px; height: 8px; border-radius: 999px;
  background: #FFFFFF;
  animation: homeScrollDot 1900ms ease-in-out infinite;
}
@keyframes homeScrollDot {
  0%, 100% { transform: translateY(-7px); opacity: 0.35; }
  50%      { transform: translateY(7px);  opacity: 1; }
}

/* ------------------------------------------------------- 4. featured products */
.home-featured {
  background: var(--bg);
  padding-block: var(--section-y);
}
.home-featured__head {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  animation: homeHeroUp 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-featured__head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}
.home-featured__head p {
  margin: 0;
  color: var(--accent-ink);
  font-size: 1rem;
  line-height: 1.7;
}

.home-featured__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.home-featured__grid > * { min-width: 0; }

/* --- premium restyle of the shared .product-card, homepage only ------------- */
.home-featured__grid .product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 320ms ease,
              border-color 320ms ease;
}
.home-featured__grid .product-card:hover,
.home-featured__grid .product-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.home-featured__grid .product-card__media { background: var(--cream); }
.home-featured__grid .product-card__media img {
  aspect-ratio: 1 / 1;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.home-featured__grid .product-card:hover .product-card__media img { transform: scale(1.06); }
.home-featured__grid .product-card__body { padding: 1.4rem 1.5rem 1.6rem; gap: 0.45rem; }
.home-featured__grid .product-card__brand { color: var(--accent-ink); }
.home-featured__grid .product-card__name {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.home-featured__grid .product-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--accent-ink);
  margin: 0.15rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-featured__grid .price { margin-top: 0.35rem; }
.home-featured__grid .product-card__quick {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.home-featured__more {
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
  text-align: center;
}

/* ------------------------------------------------------------- 5. minimal footer */
.home-foot {
  background: var(--brand);
  color: #EADEE4;
  padding-block: 2.75rem;
  border-top: 1px solid rgba(201, 167, 184, 0.22);
}
.home-foot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}
.home-foot__brand {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  margin: 0;
  color: #FFFFFF;
  text-indent: 0.28em;           /* optically re-centre the tracked word */
}
.home-foot__copy {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(234, 222, 228, 0.78);
}
.home-foot__social {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.home-foot__social .icon-btn {
  color: #EADEE4;
  width: 44px; height: 44px;
}
.home-foot__social .icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.home-foot__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.85rem;
}
.home-foot__legal a {
  color: var(--accent);
  padding: 0.35rem 0.15rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--trans), color var(--trans);
}
.home-foot__legal a:hover { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, 0.6); }
.home-foot__legal span[aria-hidden] { color: rgba(234, 222, 228, 0.45); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1023.98px) {
  /* back to the flex row the shared header uses on phones/tablets:
     logo · hamburger · actions — the grid would strand the hamburger */
  body[data-page="home"] .site-header__inner {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  body[data-page="home"] .brand { margin-inline-end: auto; }
  body[data-page="home"] .header-actions { justify-self: auto; }
  body[data-page="home"] .nav-cta { display: none; }  /* the drawer has its own CTA */
  .home-hero { min-height: 82vh; min-height: 82svh; }
  .home-hero__bg img { object-position: center 22%; }
  .home-hero__scroll { display: none; }
}
/* ---------------------------------------------------- desktop-only overrides
   The lockup enlargement and the action-cluster trimming are DESKTOP ONLY.
   Below 1024 the shared responsive.css compaction (32px mark, tight lockup,
   8px gaps) is exactly the width budget a phone needs, and overriding it here
   pushed header-actions past the viewport edge at 360–390px. */
@media (min-width: 1024px) {
  /* header lockup: a touch larger and lighter for the hero */
  body[data-page="home"] .brand__mark { width: 42px; height: 42px; }
  body[data-page="home"] .brand__text { font-size: 1.42rem; letter-spacing: 0.16em; font-weight: 600; }
  body[data-page="home"] .brand__text small { letter-spacing: 0.5em; margin-top: 0.22rem; }
  /* The action cluster must stay narrower than one side column of the header
     grid, otherwise it pushes into the centred nav. Trimmed here rather than
     hidden, so every control keeps a >= 40px tap target. */
  body[data-page="home"] .site-header .icon-btn { width: 40px; height: 40px; }
  body[data-page="home"] .site-header .lang-btn { padding: 0.34rem 0.5rem; font-size: 0.78rem; }
  body[data-page="home"] .site-header .lang-sep { margin-inline: 0.05rem; }
  body[data-page="home"] .site-header .header-actions { gap: 0.05rem; }
}

/* Narrow desktops: the drawer is not in play, but there is not enough width for
   logo + 5-item nav + 6 actions + CTA. Compact the row and drop the CTA (it is
   still the primary action inside the page hero, directly below). */
@media (min-width: 1024px) and (max-width: 1319.98px) {
  body[data-page="home"] .nav-cta { display: none; }
  body[data-page="home"] .site-header__inner { gap: 0.5rem; }
  body[data-page="home"] .brand__mark { width: 34px; height: 34px; }
  body[data-page="home"] .brand__text { font-size: 1.1rem; letter-spacing: 0.1em; }
  body[data-page="home"] .brand__text small { letter-spacing: 0.34em; font-size: 0.52rem; }
  body[data-page="home"] .main-nav a,
  body[data-page="home"] .nav-drop-btn { padding: 0.5rem 0.62rem; font-size: 0.8rem; }
}
@media (min-width: 640px) {
  .home-featured__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .home-featured__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 479.98px) {
  .home-hero { padding-block: calc(var(--header-h) + 2rem) 3.5rem; }
  .home-hero__eyebrow { font-size: 0.66rem; letter-spacing: 0.26em; }
  .home-hero__eyebrow::before,
  .home-hero__eyebrow::after { width: 1.1rem; }
  .home-hero__cta { gap: 0.7rem; }
  body[data-page="home"] .home-btn { flex: 1 1 100%; padding: 0.95rem 1.6rem; }
  .home-featured__grid .product-card__media img { aspect-ratio: 4 / 5; }
  .home-foot__brand { font-size: 1.4rem; letter-spacing: 0.22em; }
}

/* ------------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  .home-hero__bg img,
  .home-hero__copy,
  .home-featured__head { animation: none !important; }
  .home-hero__scroll::before { animation: none; opacity: 0.9; transform: translateY(0); }
  .home-featured__grid .product-card,
  .home-featured__grid .product-card__media img { transition: none; }
  body[data-page="home"] .site-header,
  body[data-page="home"] .nav-cta { transition: none; }
}