/* ============================================================
   fermite.bg — Homepage
   Design: Figma "fermite.bg – UI Design" (frame 257:499)
   ============================================================ */

:root {
  --green: #2c5336;
  --green-90: rgba(44, 83, 54, 0.9);
  --green-deep: #22412a;
  --light-green: #7ba757;
  --green-mid: #4b744c;    /* cookie banner ground (370:143) */
  --green-heading: #4d5e49; /* legal page headings (370:758) */
  --ink-legal: #343e32;     /* legal page body copy (370:756) */
  --cream: #f5ddc0;      /* Fermite Khaki */
  --cream-2: #fff4e7;    /* page background */
  --orange: #f3772f;     /* Fermite Orange */
  --orange-deep: #e0662a;
  --peach: #fcc698;      /* Dark Khaki */

  --font-display: "Geologica", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Google Sans", "Product Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* Type ramp — Figma variables (Final Design, node 328:121).
     Display = Geologica Auto Bold; body = Google Sans 17pt Regular.
     NOTE: Google Sans is proprietary and not on Google Fonts, so --font-body
     resolves to Inter for real visitors. Sizes below are the design's. */
  --t-h1: 700 62px/62px var(--font-display);
  --t-h2: 700 42px/48px var(--font-display);
  --t-h3: 700 32px/37.09px var(--font-display);
  --t-h4: 700 24px/28px var(--font-display);
  --t-h5: 700 16px/16px var(--font-display);      /* also "Special" */
  --t-special-2: 700 14px/14px var(--font-display);
  --t-b1: 400 18px/28px var(--font-body);
  --t-b2: 400 16px/23px var(--font-body);
  --t-b3: 400 14px/1 var(--font-body);
  --t-b4: 400 12px/1 var(--font-body);

  --shadow: 0 24px 74px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 10px 30px rgba(20, 38, 25, 0.12);
  --radius: 30px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream-2);
  color: var(--green);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* An author `display` on an element beats the UA stylesheet's
   [hidden] { display: none }, so `el.hidden = true` silently does nothing
   for anything we also give a display to. That is exactly what happened to
   the cookie banner (display:flex) and the checkout's coupon row (.sumrow,
   display:flex): the click handlers ran and stored the choice, but the
   element stayed on screen. Make `hidden` authoritative everywhere. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
}

.wrap {
  width: 100%;
  max-width: 1501px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5.3vw, 80px);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn__arrow { flex: none; }
.btn--primary { background: var(--green); color: var(--cream); }
.btn--primary:hover { background: var(--green-deep); }
.btn--orange { background: var(--orange); color: var(--cream); }
/* The design's standard pill: 240x44 at 53.333px radius, Special 2 label.
   Shared by the hero CTA (328:152) and both cookie buttons (370:152/162). */
.btn--pill {
  min-width: 240px;
  height: 44px;
  padding: 0 29.714px;
  border-radius: 53.333px;
  justify-content: center;
  gap: 16px;
  font: var(--t-special-2);
  letter-spacing: 0;
}
/* Hero CTA pushes its label and arrow to opposite edges. */
.btn--hero { justify-content: space-between; }
.btn--hero .btn__arrow { width: 22.095px; height: 22.095px; }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--cream-2);
  color: var(--cream-2);
}
.btn--ghost:hover { background: rgba(255, 244, 231, 0.12); }
.btn--orange:hover { background: var(--orange-deep); }
.btn--outline { background: transparent; color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.btn--outline:hover { background: var(--green); color: var(--cream); }
.btn:active { transform: translateY(1px); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 20px;
  padding-bottom: 6px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--green);
  border-radius: 90px;
  height: 72px;
  padding: 0 22px 0 32px;
}
.nav__logo { flex: none; display: block; }
.nav__logo img { width: clamp(140px, 12vw, 190px); height: auto; }

/* display:contents lets the drawer wrap the list for the mobile menu without
   taking a box of its own here — the <ul> keeps its slot in the nav's flex row.
   The contact/store blocks it also wraps belong to the mobile menu only. */
.nav__drawer { display: contents; }
.nav__meta { display: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--cream);
}
.nav__links a { position: relative; padding: 6px 0; transition: color 0.15s ease; }
.nav__links a:hover { color: var(--peach); }

.nav__toggle { display: none; }

/* Language switcher */
.lang { position: relative; flex: none; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 12px 0 6px;
  border-radius: 45px;
  background: transparent;
  border: 2px solid var(--cream);
  color: var(--cream);
}
.lang__active {
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 38px;
  padding: 0 14px;
  border-radius: 45px;
  background: var(--orange);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
}
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 96px;
  background: var(--green);
  border: 2px solid var(--cream);
  border-radius: 20px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.lang.is-open .lang__menu { display: flex; }
/* Caret is the exported Figma polygon (assets/nav-caret.svg), which points UP.
   Rotate it 180deg so it reads as "closed", back to 0 when the menu opens. */
.lang__caret {
  width: 16px;
  height: 15px;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}
.lang.is-open .lang__caret { transform: rotate(0deg); }
.lang__menu button {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--cream);
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-align: left;
}
.lang__menu button:hover,
.lang__menu button.is-active { background: var(--orange); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: clamp(28px, 5vw, 56px); position: relative; }

.hero__head { text-align: center; max-width: 720px; margin: 0 auto; }
/* Hero copy — Figma nodes 328:150 (H1 62/62, 592 wide) and 328:156
   (b2 16/23, 513 wide). Gaps come from the frame offsets: 19px under the
   H1, 32px above the CTA. */
.hero__title {
  color: var(--green);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 62px);
  line-height: 1;
  letter-spacing: 0;
}
.hero__sub {
  font: var(--t-b2);
  max-width: 513px;
  margin: 19px auto 32px;
  color: var(--green);
}

.hero__stage {
  position: relative;
  margin-top: clamp(20px, 3vw, 34px);
}
/* Hero art — the Lottie composition (3213x2147) mounts here. The
   aspect-ratio reserves the box before the JSON lands so nothing shifts,
   and matches the Final Design's hero group (340:157, 1501x1005.68).
   The cream ground is the animation's own sky colour, so the reserved box
   is invisible while it loads. */
.hero__art {
  position: relative;
  width: 100%;
  aspect-ratio: 3213 / 2147;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cream);
}
.hero__art svg { display: block; width: 100%; height: 100%; }
/* Static fallback, only injected if Lottie or the JSON fails to load. */
.hero__art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero__badge {
  position: absolute;
  top: clamp(-6px, 2vw, 24px);
  right: clamp(8px, 4vw, 40px);
  width: clamp(84px, 11vw, 150px);
  height: auto;
}

/* Store card overlay */
/* Store-opening card — Figma node 328:527 ("Frame 93", 426x240).
   Padding derives from the frame's absolute offsets: title/body/input all
   start at x=37, body is inset 29 from the right, input row ends 29 above
   the bottom edge. */
.store-card {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  bottom: clamp(12px, 3vw, 44px);
  width: min(426px, 78%);
  background: var(--green-90);
  backdrop-filter: blur(6px);
  border: 1px solid var(--cream);
  border-radius: 30.531px;
  box-shadow: var(--shadow);
  padding: 27px 29px 29px 37px;
  color: var(--cream);
}
.store-card__close {
  position: absolute;
  top: 23px;
  right: 24px;
  width: 38.164px;
  height: 38.164px;
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, filter 0.2s ease;
}
.store-card__close img { width: 100%; height: 100%; }
.store-card__close:hover { transform: scale(1.05); filter: brightness(0.94); }
.store-card__title {
  font: var(--t-h4);
  text-transform: uppercase;
  max-width: 213px;
  margin-bottom: 30px;
}
.store-card__text { font: var(--t-b4); line-height: 1.35; margin-bottom: 32px; }

/* Mini subscribe input (dark bg) */
.mini-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1.018px solid var(--cream);
  border-radius: 25.442px;
  height: 38px;
  padding: 0 5px 0 16px;
}
.mini-sub__icon { width: 15px; height: auto; flex: none; }
.mini-sub input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--cream);
  font: var(--t-b4);
}
.mini-sub input::placeholder { color: var(--cream); opacity: 0.85; }
.mini-sub button { border: none; background: transparent; display: grid; place-items: center; flex: none; }
.mini-sub button img { width: 28px; height: 28px; transition: transform 0.15s ease; }
.mini-sub button:hover img { transform: translateX(2px); }

/* Feature pills */
/* Feature chips — Figma node 328:257 ("Frame 88", 1341x72) */
.feature-pills {
  display: flex;
  gap: clamp(14px, 1.6vw, 32px);
  margin-top: clamp(18px, 2.4vw, 30px);
}
.chip {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 72px;
  background: var(--cream);
  border-radius: 72.095px;
  padding: 11px 41px 12px 14px;
  min-width: 0;
}
.chip__icon {
  flex: none;
  width: 49.565px;
  height: 49.565px;
  border-radius: 24.783px;
  background: var(--orange);
  display: grid;
  place-items: center;
}
/* Icons are exported Figma assets (white glyphs), sized to their own art box. */
.chip__icon img { display: block; }
.chip span:last-child {
  font: var(--t-h5);
  text-transform: uppercase;
  color: var(--green);
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(26px, 4vw, 48px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
}
.hero__scroll svg { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================================================
   Responsive — nav + hero
   ============================================================ */
@media (max-width: 860px) {
  .nav { position: relative; flex-wrap: nowrap; padding: 0 14px 0 22px; }
  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border: none;
    background: transparent;
  }
  .nav__toggle span { display: block; height: 2.5px; width: 24px; background: var(--cream); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  /* Expanded menu — Figma "03 fermite.bg - Egg Subscription Details Mobile"
     (382:88). One translucent panel (382:462) anchored to the TOP of the nav,
     so the dark pill sits on it rather than above a detached dropdown; z-index
     -1 keeps it behind the bar's own background. Content clears the 60px bar
     by the design's 48px, and .site-header's z-index:40 is the stacking
     context, so the negative z-index stays above the page. */
  .nav__drawer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    background: rgba(56, 98, 67, 0.9);
    border-radius: 30px 30px 20px 20px;
    padding: 0 29px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.2s ease,
                visibility 0s linear 0.35s;
  }
  .nav__drawer.is-open {
    /* The design's panel is 861px tall, which is more than an 844px phone
       viewport — and the header is sticky, so anything past the fold could
       never be scrolled to. Cap it to the viewport and scroll inside instead;
       taller phones still get the full panel unclipped. */
    max-height: min(900px, calc(100dvh - 28px));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    visibility: visible;
    padding: 108px 29px 40px;
    transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.2s ease,
                visibility 0s;
  }
  .nav__links {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin: 0;
    font: var(--t-h3);
    text-transform: uppercase;
    color: var(--cream);
  }
  /* Only the current page reads at full strength (382:479 vs the rest at 50%). */
  .nav__links a { display: block; opacity: 0.5; padding: 0; }
  .nav__links a:hover,
  .nav__links a[aria-current="page"],
  .nav__links li:first-child a { opacity: 1; }

  .nav__meta { display: block; margin-top: 70px; color: var(--cream); }
  .nav__meta-block + .nav__meta-block,
  .nav__meta-cols { margin-top: 32px; }
  .nav__meta-h { font: var(--t-special-2); text-transform: uppercase; margin-bottom: 16px; }
  /* b3 is 14px/1; the address blocks need real leading to stay readable. */
  .nav__meta p { font: var(--t-b3); line-height: 1.45; }
  .nav__meta p + p { margin-top: 18px; }
  .nav__meta-cols { display: flex; gap: 16px; }
  .nav__meta-cols > * { flex: 1 1 0; min-width: 0; }
  .nav__meta-cols p + p { margin-top: 0; }
  .nav__meta-copy { margin-top: 40px; text-align: center; }
  .lang { order: 2; }
}

@media (max-width: 720px) {
  /* relative, not static: the close button is absolutely positioned inside
     this card, and going static re-anchors it to .hero__stage, where it
     lands on top of the premium badge. */
  .store-card { position: relative; inset: auto; width: 100%; margin-top: 16px; backdrop-filter: none; background: var(--green); }
  .hero__badge { width: 76px; top: -8px; right: 8px; }
  .feature-pills { flex-direction: column; }
  .chip { flex: none; }
}

/* ============================================================
   Ethos band ("Подбрано с любов")
   ============================================================ */
/* Ethos band — Figma node 328:247 ("Group 55", 1341x292): 40px radius,
   48px padding, 48px column gap, with a big rotated light-green wash
   clipped by the card. */
.ethos { margin-top: clamp(48px, 7vw, 96px); }
.ethos__box {
  position: relative;
  overflow: clip;
  background: var(--green);
  color: var(--cream-2);
  border-radius: 40px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
/* Decorative wash (328:249). The design places a 2213.893x1865.334 shape,
   rotated 20.04deg, centred at (-269.5, -10.5) inside the 1341-wide card;
   expressed here as ratios of the card width so it scales with it. Both
   left and margin-top resolve against the inline size, so the placement
   holds at any card height. */
.ethos__blob {
  position: absolute;
  left: -20.1%;
  top: 0;
  margin-top: -0.78%;
  width: 165.1%;
  height: auto;
  /* The global `img { max-width: 100% }` would otherwise clamp this to the
     card width and shrink the wash to ~74% of its intended size. */
  max-width: none;
  transform: translate(-50%, -50%) rotate(20.04deg);
  pointer-events: none;
  z-index: 0;
}
.ethos__left, .ethos__text { position: relative; z-index: 1; }
.ethos__title {
  color: var(--cream-2);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.2vw, 42px);
  line-height: 48px;
  max-width: 576px;
}
.ethos__leaf { width: 62px; height: auto; margin-top: 27px; }
.ethos__text { max-width: 564px; }
.ethos__text p { color: var(--cream-2); font: var(--t-b1); }
.ethos__text p + p { margin-top: 1em; }
@media (max-width: 760px) {
  .ethos__box { grid-template-columns: 1fr; }
  .ethos__leaf { margin-top: 4px; }
}

/* ============================================================
   Feature mega-section (farm eggs / free-range / subscription)
   ============================================================ */
.feature { padding: clamp(48px, 7vw, 92px) clamp(16px, 5.3vw, 80px); }
.feature__inner {
  max-width: 1341px;
  margin-inline: auto;
  background: var(--cream);
  border-radius: clamp(28px, 3vw, 44px);
  padding: clamp(18px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 40px);
}

/* Farm-eggs feature card */
/* Farm-eggs feature — Figma nodes 328:341 (cream card, 751x440, 40px
   radius) and 328:342 (copy block, 32px stack, 567 wide). */
.egg-feature {
  background: var(--cream-2);
  border-radius: 40px;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 46px);
}
.egg-feature__title { font: var(--t-h3); text-transform: uppercase; color: var(--green); }
.egg-feature__sub {
  font: var(--t-h5);
  color: var(--orange);
  text-transform: uppercase;
  margin: 8px 0 32px;
}
.egg-feature__text { font: var(--t-b1); color: var(--green); max-width: 482px; }
.egg-feature__media img { width: 100%; height: auto; border-radius: 16px; }
/* Carousel dots — 328:350: 59x10 at 10px radius, 7px apart. */
.dots { display: flex; gap: 7px; margin-top: 32px; }
.dots span { width: 59px; height: 10px; border-radius: 10px; background: #f5dec2; }
.dots span.is-active { background: var(--green); }

/* Free-range 4-point row — Figma node 328:294 (1341x477, 40px radius).
   Columns are 250px with an 83px gap; each tile is 100px at 20px radius.
   The design fills the tile with --green on a --green ground, so it reads
   as a floating cream outline icon; kept explicit so it still holds if the
   section ground ever changes.
   NOTE: the design's label and body copy are #2c5336 on that same #2c5336
   ground, i.e. invisible. Rendered cream here -- the designer's own render
   of this section uses light text. */
.freerange {
  background: var(--green);
  border-radius: 40px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 250px));
  justify-content: center;
  gap: clamp(20px, 5.8vw, 83px);
}
.freerange li { color: var(--cream); }
.fr-icon {
  width: 100px; height: 100px;
  border-radius: 20px;
  background: var(--green);
  display: grid; place-items: center;
  margin-bottom: 18px;
}
/* Exported at their own art-box sizes; both dimensions set so they never
   fall back to intrinsic size. */
.fr-icon img { display: block; width: auto; height: 62px; }
.fr-icon img[data-icon="chicken"] { height: 70px; }
.fr-icon img[data-icon="sun"] { height: 65px; }
.freerange h4 { font: var(--t-h5); text-transform: uppercase; color: var(--cream); margin-bottom: 12px; }
.freerange p { font: var(--t-b1); color: var(--cream); }

/* Subscription box */
/* Egg subscription box — Figma node 328:354 (1339x334, 30px radius).
   A green card, not a cream one: the calendar well, the copy and the tier
   rows are all light on green. */
.subbox {
  background: var(--green);
  border-radius: 30px;
  padding: 33px 37px 35px 39px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 621.654px);
  gap: clamp(26px, 3vw, 48px);
  align-items: start;
}
.subbox__intro { display: flex; gap: 30px; align-items: flex-start; }
.subbox__cal {
  flex: none;
  width: 62px; height: 62px;
  border-radius: 50px;
  background: var(--cream);
  display: grid; place-items: center;
}
.subbox__cal img { width: 35px; height: 35px; }
.subbox__copy { display: flex; flex-direction: column; }
.subbox__title { font: var(--t-h3); text-transform: uppercase; color: var(--cream); }
.subbox__save { font: var(--t-h4); text-transform: uppercase; color: var(--orange); margin-top: 8px; }
.subbox__text { font: var(--t-b2); color: var(--cream); max-width: 265px; margin-top: 16px; }
.subbox__cta { align-self: flex-start; min-width: 270px; margin-top: 28px; }

.size-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9.8px; margin-bottom: 12.7px; }
.size-tabs button {
  height: 37.143px;
  border-radius: 100px;
  border: 1px solid var(--cream);
  background: transparent;
  color: var(--cream);
  font: var(--t-h5);
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.size-tabs button.is-active { background: var(--cream); color: var(--green); }

.tiers { display: flex; flex-direction: column; gap: 9.8px; }
.tier {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 62.556px;
  background: var(--cream);
  border-radius: 100px;
  padding: 8px 10px 8px 13.68px;
}
.tier__eggs { flex: none; display: grid; }
.tier__label { font: var(--t-h5); text-transform: uppercase; color: var(--green); }
.tier__old { font: var(--t-b2); text-decoration: line-through; opacity: 0.6; color: var(--green); white-space: nowrap; }
/* Subscription button — Components node 297:1059 (206x44): a cream label
   pill with the orange add button overlapping its right end. */
.tier__disc {
  margin-left: auto;
  display: flex;
  align-items: center;
  background: var(--cream-2);
  border-radius: 53.333px;
  overflow: hidden;
  flex: none;
  height: 43.007px;
}
.tier__disc em {
  font-style: normal;
  font: var(--t-special-2);
  text-transform: uppercase;
  color: var(--green);
  padding: 0 14px 0 22px;
  white-space: nowrap;
}
.tier__disc button {
  width: 43.007px;
  height: 43.007px;
  flex: none;
  border: none;
  background: var(--orange);
  border-radius: 53.333px;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease;
}
.tier__disc button:hover { background: var(--orange-dark, var(--orange-deep)); }
.tier__disc button img { width: 19.5px; height: 19.5px; }

@media (max-width: 900px) {
  .freerange { grid-template-columns: repeat(2, 1fr); }
  .subbox { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .egg-feature { grid-template-columns: 1fr; }
  .egg-feature__media { order: -1; }
  .freerange { grid-template-columns: 1fr; }
  .tier { flex-wrap: wrap; }
  .tier__disc { margin-left: 0; }
}

/* ============================================================
   Section title (shared)
   ============================================================ */
/* Section titles are h3 32/37.09 across the page (328:197, 328:158,
   328:441, 328:485 all measure 38px tall). */
.section-title { text-align: center; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 32px); line-height: 37.09px; color: var(--green); }

/* ============================================================
   Categories rail
   ============================================================ */
.cat-section { margin-top: clamp(8px, 1.5vw, 20px); }
.cat-section .section-title { margin-bottom: clamp(20px, 3vw, 36px); }
.cat-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.cat-card { flex: 1 1 340px; min-width: 290px; background: var(--green); border-radius: 36px; padding: clamp(24px, 2.4vw, 34px); position: relative; overflow: hidden; min-height: 460px; }
.cat-card__body { position: relative; z-index: 1; max-width: 321px; }
/* Orange swoosh behind the chicken (328:200): 552x396, rotated 15.74deg,
   clipped by the card. Sized against the 393px-wide design card. */
.cat-card__swoosh {
  position: absolute;
  left: -38%;
  bottom: -12%;
  width: 140%;
  height: auto;
  max-width: none;
  transform: rotate(15.74deg);
  pointer-events: none;
  z-index: 0;
}
.cat-card h3 { font: var(--t-h4); text-transform: uppercase; color: var(--cream-2); }
.cat-card p { font: var(--t-b1); margin-top: 14px; color: var(--cream-2); }
.cat-card__chicken { position: absolute; right: 22px; bottom: 20px; width: clamp(120px, 12vw, 161px); height: auto; z-index: 1; }

.cat-tab { flex: 0 0 134px; height: 460px; border-radius: 36px; background: var(--c, var(--green)); position: relative; overflow: hidden; display: block; transition: transform 0.2s ease; }
.cat-tab:hover { transform: translateY(-6px); }
.cat-tab__deco { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tab__label {
  position: absolute; bottom: 28px; left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font: var(--t-h4); text-transform: uppercase; color: var(--cream-2);
}
.cat-tab__badge {
  position: absolute; top: 28px; left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  background: var(--cream); color: var(--green);
  font: var(--t-special-2); text-transform: uppercase;
  padding: 10px 7px; border-radius: 53px;
}

/* ============================================================
   Products in focus (carousel)
   ============================================================ */
.products { margin-top: clamp(30px, 5vw, 64px); }
.products .section-title { margin-bottom: clamp(20px, 3vw, 36px); }
.products__viewport { position: relative; }
.products__track { display: flex; gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 6px; scrollbar-width: none; }
.products__track::-webkit-scrollbar { display: none; }
.product-card { position: relative; flex: 0 0 clamp(240px, 24vw, 321px); aspect-ratio: 321 / 417; border-radius: 40px; overflow: hidden; background: var(--cream); scroll-snap-align: start; }
.product-card__wave { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Each product shot sits differently on its card in the design (328:157):
   the egg carton is wide and low, the cheeses are narrower and higher. The
   card is 321x417 there, so the per-card values below are that geometry as
   percentages, passed inline the way .cat-tab already passes --c. Defaults
   are the egg carton's, so a card that sets nothing is unchanged. */
.product-card__media {
  position: absolute;
  top: var(--mt, 13%);
  left: var(--ml, 9%);
  width: var(--mw, 82%);
  z-index: 1;
}
.product-card__media img { width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18)); }
.product-card__body { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 1; padding: 0 26px; }
.product-card__body h3 { font: var(--t-h5); text-transform: uppercase; color: var(--green); }
.product-card__body p { font: var(--t-b4); color: var(--green); margin: 6px 0 14px; }
.product-card__body .btn { width: 100%; justify-content: center; font-size: 0.8rem; padding: 13px; }

.carousel-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--orange); color: var(--cream); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: background-color 0.2s ease; }
.carousel-arrow:hover { background: var(--orange-deep); }
.carousel-arrow--prev { left: -6px; }
.carousel-arrow--next { right: -6px; }
@media (max-width: 640px) { .carousel-arrow { display: none; } }

/* ============================================================
   Green region — Platform CTA + Locations
   ============================================================ */
.green-region { background: var(--green); padding: clamp(48px, 7vw, 90px) 0; margin-top: clamp(40px, 6vw, 80px); }
.green-region > .wrap { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 54px); }

/* Platform CTA */
.platform {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
  border-radius: 40px;
  padding: clamp(28px, 4vw, 50px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 445px);
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}
.platform__deco { position: absolute; z-index: 0; pointer-events: none; opacity: 0.95; }
.platform__deco--tl { top: -46%; left: -6%; width: 46%; transform: rotate(8deg); }
.platform__deco--tr { top: -30%; right: -4%; width: 42%; }
.platform__body { position: relative; z-index: 1; }
.platform__title { font-size: clamp(1.55rem, 2.7vw, 32px); line-height: 37.09px; text-transform: uppercase; color: var(--green); max-width: 491px; }
.platform__text { font: var(--t-b2); color: var(--green); margin: 18px 0 26px; max-width: 44ch; }
.platform__media { position: relative; z-index: 1; }
.platform__media img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 90px rgba(0, 0, 0, 0.14); }

/* Inline subscribe (light bg, button inside) */
.inline-sub { position: relative; display: flex; align-items: center; gap: 14px; border: 2px solid var(--green); border-radius: 46px; height: 70px; padding: 0 8px 0 22px; max-width: 552px; background: var(--cream-2); }
/* Mask, not an <img>: the same asset then renders dark on the cream footer
   card and light on the green one, following currentColor. It used to be a
   light PNG-style asset pushed through a hue-rotate filter, which came out
   a bright, off-brand green on mobile. */
.inline-sub__icon { width: 30px; height: 24px; flex: none; }
.inline-sub input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: var(--green); font-family: var(--font-body); font-size: 1rem; }
.inline-sub input::placeholder { color: var(--green); opacity: 0.8; }
.inline-sub .btn { flex: none; height: 50px; padding: 0 26px; }
.sub-note { color: var(--light-green); font-weight: 600; font-size: 0.9rem; margin-top: 10px; }
.sub-note.is-error { color: var(--orange); }

/* Locations */
.locations { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 32px); }
.loc-card { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 663 / 417; box-shadow: var(--shadow); }
.loc-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, rgba(245, 221, 192, 0.97) 22%, rgba(245, 221, 192, 0.72) 40%, rgba(245, 221, 192, 0) 64%); }
.loc-card__content { position: absolute; inset: 0; z-index: 1; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; }
.loc-card__badge { align-self: flex-start; background: var(--green); color: var(--cream); font: var(--t-special-2); text-transform: uppercase; padding: 8px 14px; border-radius: 53px; margin-bottom: 16px; }
.loc-card__top h3 { font-size: clamp(1.4rem, 2.4vw, 32px); line-height: 37.09px; text-transform: uppercase; color: var(--green); }
.loc-card__top p { font: var(--t-b1); color: var(--green); margin-top: 10px; }

@media (max-width: 820px) {
  .platform { grid-template-columns: 1fr; }
  .platform__media { max-width: 445px; }
  .locations { grid-template-columns: 1fr; }
  .loc-card { aspect-ratio: 663 / 320; }
}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq { padding: clamp(48px, 7vw, 90px) clamp(16px, 5.3vw, 80px); }
.faq .section-title { margin-bottom: clamp(28px, 4vw, 48px); }
.faq__list { max-width: 1341px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.faq__item { border: 1.5px solid var(--green); border-radius: 40px; overflow: hidden; transition: background-color 0.2s ease; }
.faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 14px 14px clamp(24px, 3vw, 40px); min-height: 80px; cursor: pointer; font: var(--t-h5); color: var(--green); }
.faq__q::-webkit-details-marker { display: none; }
.faq__toggle { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--green); transition: background-color 0.2s ease, color 0.2s ease; }
/* 2px sat the answer right under the question, which only worked while both
   shared one green field. Against the pill it needs the design's gap
   (340:558 ends at 80, 340:597 starts at 102). */
.faq__a { padding: 22px clamp(24px, 3vw, 40px) 30px; color: var(--green); font: var(--t-b2); max-width: 66ch; }
/* Open state — Figma 346:1186. Only the question is a green pill (340:558,
   80px, its own 20px radius); the body of the card keeps the page cream and
   the green outline (340:557), and the answer is green text on it. Filling
   the whole card green instead turned the answer into cream-on-green and
   stretched what reads as a pill into a tall block. The pill takes the
   card's radius so its shape does not change when the item opens. */
.faq__item[open] .faq__q {
  background: var(--green);
  border-radius: 40px;
  color: var(--cream);
}
.faq__item[open] .faq__toggle { background: var(--orange); color: var(--cream); }

/* ============================================================
   Our approach
   ============================================================ */
.approach { background: var(--cream); padding: clamp(48px, 7vw, 90px) clamp(16px, 5.3vw, 80px) 0; }
.approach__card { max-width: 1341px; margin: 0 auto; background: var(--green); border-radius: 40px; position: relative; overflow: hidden; }
.approach__hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: 0; }
.approach__content { position: relative; z-index: 1; padding: clamp(40px, 5vw, 62px) clamp(28px, 5vw, 80px) clamp(140px, 18vw, 240px); }
.approach__title { text-align: center; text-transform: uppercase; font-size: clamp(1.55rem, 2.7vw, 32px); line-height: 37.09px; color: var(--cream); }
.approach__divider { display: block; width: 185px; height: 3px; background: var(--orange); border-radius: 3px; margin: 22px auto clamp(44px, 6vw, 80px); }
.approach__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 2.4vw, 44px); }
.approach__icon { position: relative; width: clamp(90px, 9vw, 125px); aspect-ratio: 1; border: 2px solid var(--light-green); border-radius: 20px 5px 20px 20px; display: grid; place-items: center; margin-bottom: 26px; }
.approach__icon::after { content: ""; position: absolute; top: -7px; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.approach__icon img { width: 46%; height: auto; }
.approach__col h4 { font: var(--t-h4); text-transform: uppercase; color: var(--cream); margin-bottom: 14px; }
.approach__col p { font: var(--t-b2); color: var(--cream-2); }

/* ============================================================
   Footer
   ============================================================ */
/* The footer card had no top padding, so it started on the exact pixel the
   section above it ended — on the homepage that put the khaki card flush
   against the dark green approach card. Figma's desktop board (328:121)
   leaves 106px between the two: the approach card ends at y 7189 and the
   footer card starts at 7295. Scales down to the 64px the mobile board
   uses, which the <=768px block states explicitly. */
.site-footer { background: var(--cream); padding: clamp(64px, 7vw, 106px) clamp(16px, 5.3vw, 80px) clamp(36px, 5vw, 64px); }
.footer__card { max-width: 1341px; margin: 0 auto; background: var(--green); border-radius: 40px; padding: clamp(34px, 4vw, 56px) clamp(28px, 4vw, 64px); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 0.7fr 0.9fr 1.1fr; gap: clamp(24px, 3vw, 44px); }
.footer__logo { width: 160px; height: auto; margin-bottom: 24px; }
.footer__heading { color: var(--cream); font: var(--t-special-2); text-transform: uppercase; margin-bottom: 14px; }
.footer__text { color: var(--cream); font: var(--t-b2); max-width: 347px; margin-bottom: 26px; }
.footer__col h5 { color: var(--cream); font: var(--t-special-2); text-transform: uppercase; margin-bottom: 18px; }
.footer__col ul { display: flex; flex-direction: column; gap: 14px; }
.footer__col a, .footer__col p { color: var(--cream); font: var(--t-b2); }
.footer__col a { transition: color 0.15s ease; }
.footer__col a:hover { color: var(--peach); }
.footer__col p + p { margin-top: 14px; }
.footer__col-h2 { margin-top: 26px; }

.inline-sub { color: var(--green); }
.inline-sub--dark { border-color: var(--cream); background: transparent; color: var(--cream); }
.inline-sub--dark input { color: var(--cream); }
.inline-sub--dark input::placeholder { color: var(--cream); opacity: 0.8; }

.footer__bottom { margin-top: clamp(30px, 4vw, 44px); background: var(--cream); border-radius: 90px; padding: clamp(16px, 2vw, 22px) clamp(24px, 3vw, 44px); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer__bottom span, .footer__legal a { color: var(--green); font: var(--t-b2); }
.footer__legal { display: flex; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.footer__legal a { transition: opacity 0.15s ease; }
.footer__legal a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .approach__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .approach__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; border-radius: 30px; }
}

/* ============================================================
   Icon utility — recolours the real exported Figma SVGs via mask
   so one asset can render green-on-cream or cream-on-green.
   ============================================================ */
.ico {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.approach__icon { color: var(--light-green); }
.approach__icon .ico { width: 52%; height: 52%; }

/* Footer logo variants (light on green, dark on khaki) */
.footer__logo--dark { display: none; }

/* ============================================================
   MOBILE — Figma frame "fermite.bg - Homepage - Mobile" (390px)
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Nav: orange circular hamburger, no language pill ----
     Figma "Group 40" (340:707) on the 390px mobile board: a 60px dark-green
     pill, logo 135x32 inset 32px from its left edge, and a 48px orange circle
     inset 6px from the pill's right/top/bottom. The burger glyph (346:1135)
     is three 20x4 cream bars, round-capped, 4px apart. */
  .site-header { padding-top: 14px; }
  .nav { height: 60px; padding: 0 6px 0 32px; }
  .nav__logo img { width: 135px; height: 32px; }
  .nav__toggle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--orange);
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .nav__toggle span { width: 20px; height: 4px; border-radius: 2px; background: var(--cream); }
  /* Bar centres sit 8px apart (4px bar + 4px gap), so 8px collapses them. */
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .lang { display: none; }

  /* ---- Hero ---- */

  /* Feature pills: stacked, circular orange icon */
  .feature-pills { flex-direction: column; gap: 12px; }
  .chip { padding: 10px 20px 10px 10px; gap: 14px; }
  .chip__icon { width: 46px; height: 46px; border-radius: 50%; }
  .chip span:last-child { font-size: 0.82rem; }

  /* ---- Ethos: two-tone (light-green head, dark-green body) ---- */
  .ethos__box { grid-template-columns: 1fr; padding: 0; gap: 0; overflow: hidden; }
  .ethos__left {
    background: var(--light-green);
    padding: 30px 26px 34px;
    display: flex;
    flex-direction: column;
  }
  .ethos__leaf { order: -1; margin: 0 0 22px; }
  /* Mobile uses a two-tone card, not the desktop wash. */
  .ethos__blob { display: none; }
  .ethos__text { padding: 28px 26px 32px; }

  /* ---- 4-point row: outlined cream card, green icon squares ---- */
  .freerange {
    background: var(--cream);
    border: 1.5px solid var(--green);
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 26px;
  }
  .fr-icon { background: var(--green); color: var(--cream); width: 84px; height: 84px; }
  .freerange h4, .freerange p { color: var(--green); }

  /* ---- Subscription ----
     The desktop card is a fixed 39/37px padding with a 62px calendar beside
     a 270px-wide copy column; that cannot fit 390px, and it was pushing the
     page 49px wide. Stack it and let the CTA fill the card instead. */
  .subbox { padding: 22px 16px; }
  .subbox__intro { flex-direction: column; gap: 18px; }
  .subbox__copy { width: 100%; }
  .subbox__text { max-width: none; }
  .subbox__cta { width: 100%; min-width: 0; justify-content: center; margin-top: 20px; }
  .size-tabs button { border-color: var(--cream); color: var(--cream); }
  .size-tabs button.is-active { background: var(--cream); color: var(--green); }
  .tier { background: var(--cream); flex-wrap: nowrap; }
  .tier__label { font-size: 0.8rem; }
  .tier__old { font-size: 0.78rem; }
  .tier__disc { margin-left: auto; background: transparent; }
  .tier__disc em { display: none; }           /* mobile shows only the + control */
  .tier__disc button { border-radius: 50%; }

  /* ---- Categories ----
     Mobile stacks them: the eggs card stays a full card with its
     illustration, the rest become pills that grow to fit their title with
     the COMING SOON badge beside it (design: mobile frame 351:163).

     The label and badge are laid out as flex children rather than absolutely
     positioned. The desktop rule pins them with left:50% / bottom:28px for
     the vertical orientation; any mobile rule that leaves them positioned
     re-activates those offsets and shoves the label off the right edge,
     which is exactly what used to happen here. */
  .cat-rail { flex-direction: column; overflow: visible; gap: 14px; }
  /* The illustration goes into normal flow below the copy (design: mobile
     351:163) instead of being pinned bottom-right. Reserving space for an
     absolutely positioned one means guessing its rendered height, and the
     copy ran into the chicken when the guess was short. */
  /* flex:none — the base rule's `flex: 1 1 340px` is a HEIGHT basis once the
     rail becomes a column, which capped the card at 340px and clipped the
     illustration off the bottom. */
  .cat-card { flex: none; min-height: 0; min-width: 0; }
  .cat-card__body { max-width: none; }
  .cat-card__chicken {
    /* relative (not static) so it still paints above the absolutely
       positioned swoosh; inset:auto keeps the desktop offsets out. */
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
    margin: 24px 0 0 auto;
    width: clamp(120px, 34vw, 161px);
  }
  .cat-tab {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
  }
  .cat-tab:hover { transform: none; }
  .cat-tab__label {
    position: relative;          /* only to sit above the swoosh */
    inset: auto;                 /* drop the desktop offsets */
    z-index: 1;
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 1.2rem;
    line-height: 1.15;
    max-width: none;
  }
  .cat-tab__badge {
    position: relative;
    inset: auto;
    z-index: 2;
    order: 2;
    flex: none;
    transform: none;
    writing-mode: horizontal-tb;
    padding: 7px 12px;
    white-space: nowrap;
  }

  /* ---- Approach: full-width green section ---- */
  .approach { background: var(--green); padding: clamp(40px, 9vw, 60px) 0 0; }
  .approach__card { background: transparent; border-radius: 0; }
  .approach__content { padding: 0 22px clamp(120px, 34vw, 180px); }
  .approach__grid { grid-template-columns: 1fr; gap: 34px; }
  .approach__icon { width: 84px; }

  /* ---- Footer: khaki card with green text ----
     The section above it is green too, and the base rule has no top padding,
     so the cream card butted straight against the approach section's hills
     illustration and read as part of it. Figma leaves 64px between the two. */
  .site-footer { background: var(--green); padding-inline: 16px; padding-top: 64px; }
  .footer__card { background: var(--cream); }
  .footer__logo--light { display: none; }
  .footer__logo--dark { display: block; }
  .footer__heading,
  .footer__text,
  .footer__col h5,
  .footer__col a,
  .footer__col p { color: var(--green); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer__brand { grid-column: 1 / -1; }
  /* Cream card on mobile, so the form (and the masked icon, which follows
     currentColor) has to flip to the dark colour. */
  .inline-sub--dark { border-color: var(--green); color: var(--green); }
  .inline-sub--dark input { color: var(--green); }
  .inline-sub--dark input::placeholder { color: var(--green); opacity: 0.75; }

  .footer__bottom {
    background: transparent;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 26px;
  }
  .footer__legal { flex-direction: column; align-items: center; gap: 14px; }
}

/* ---- Mobile fixes ---- */
@media (max-width: 768px) {
  /* Subscribe inputs stack: icon+field on one row, button full-width below */
  .inline-sub { flex-wrap: wrap; height: auto; border-radius: 28px; padding: 12px 16px; gap: 10px 12px; }
  .inline-sub__icon { flex: none; }
  .inline-sub input { flex: 1 1 60%; min-width: 0; }
  .inline-sub .btn { flex: 1 1 100%; justify-content: center; height: 46px; padding: 0 20px; }

  /* Location cards: taller, copy over a bottom fade */
  .loc-card { aspect-ratio: 390 / 380; }
  .loc-card::after {
    background: linear-gradient(to top,
      rgba(245, 221, 192, 0.97) 34%,
      rgba(245, 221, 192, 0.78) 52%,
      rgba(245, 221, 192, 0) 74%);
  }
  .loc-card__content { justify-content: flex-end; padding: 22px; }
  .loc-card__badge { position: absolute; top: 22px; left: 22px; margin: 0; }
  .loc-card__top { margin-bottom: 16px; }
}

@media (max-width: 768px) {
  /* Two columns: navigation on the left, contacts and stores stacked on the
     right (design: mobile frame 351:160). Placed by position rather than by
     class because the markup order is fixed and shared across all pages:
     1 brand, 2 navigation, 3 contacts, 4 stores. The stores column was
     previously left under the narrow first column, which shredded the
     addresses into one word per line. */
  .footer__card { padding: 26px 20px; }
  .footer__grid { grid-template-columns: 0.72fr 1.28fr; gap: 22px 16px; }
  .footer__grid > :nth-child(1) { grid-column: 1 / -1; }
  .footer__grid > :nth-child(2) { grid-column: 1; grid-row: 2 / span 2; }
  .footer__grid > :nth-child(3) { grid-column: 2; grid-row: 2; align-self: start; }
  .footer__grid > :nth-child(4) { grid-column: 2; grid-row: 3; align-self: start; }
  .footer__col p, .footer__col a { font-size: 0.92rem; }
  .footer__col h5 { font-size: 0.8rem; }
}


/* ============================================================
   Quantity stepper — shared component
   ------------------------------------------------------------
   Used by the subscription pop-up and by the checkout's order review.
   It used to live in subscription.css, which checkout.html does not
   load, so on the checkout the buttons fell back to the browser's
   default grey and the +/- bars were transparent -- they rendered as
   empty boxes.
   ============================================================ */
.qty { display: flex; align-items: center; gap: 10px; flex: none; }
.qty button {
  width: 44px; height: 44px;
  border-radius: 14px;
  border: none;
  background: var(--green);
  display: grid; place-items: center;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.qty button:hover { background: var(--green-deep); }
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty button span { display: block; width: 16px; height: 2.5px; border-radius: 2px; background: var(--cream); }
.qty button span.v { position: absolute; transform: rotate(90deg); }
.qty__plus { position: relative; }
.qty__value {
  min-width: 34px;
  text-align: center;
  font: var(--t-h5);
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Cookie consent — Figma node 370:143 ("Cookies -", 1338x129)
   ------------------------------------------------------------
   Placed at y=787 in the 1005px-tall hero frame, i.e. near the bottom of
   the first screen, so it is rendered as a fixed bar rather than in flow.
   ============================================================ */
.cookie-banner {
  position: fixed;
  z-index: 60;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, 2vw, 24px);
  width: min(1338px, calc(100% - 2 * clamp(16px, 5.3vw, 80px)));
  min-height: 129px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--green-mid) 90%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 40px;
  box-shadow: var(--shadow-sm);
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1188px, 100%);
  margin: 0 auto;
  padding: 20px clamp(20px, 3vw, 75px);
}
.cookie-banner__text {
  font: var(--t-b2);
  color: var(--cream-2);
  max-width: 545px;
}
.cookie-banner__text a { text-decoration: underline; }
.cookie-banner__actions { display: flex; align-items: center; gap: 16px; flex: none; }

@media (max-width: 860px) {
  .cookie-banner { border-radius: 28px; }
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .btn { width: 100%; }
}


/* ============================================================
   Legal pages — Figma node 370:165
   ("fermite.bg - Privacy Policy template", 1501x1958)
   ------------------------------------------------------------
   Note the page ground is Fermite Khaki, not the homepage's --cream-2.
   ============================================================ */
.page--legal { background: var(--cream); }

.legal { padding-top: clamp(48px, 8vw, 106px); padding-bottom: clamp(48px, 7vw, 96px); }
.legal__title {
  font-size: clamp(2.2rem, 5.5vw, 62px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--green-heading);
  max-width: 709px;
}
.legal__updated {
  font: var(--t-b3);
  color: var(--ink-legal);
  opacity: 0.75;
  margin-top: 18px;
}
.legal__section { margin-top: clamp(36px, 5vw, 64px); }
.legal__section h2 {
  font: var(--t-h4);
  text-transform: uppercase;
  color: var(--green-heading);
  margin-bottom: 24px;
}
/* The design sets the body as two 661px columns under each heading. Multi-column
   keeps the reading order correct (down the left, then the right) and collapses
   on its own when there is not room for two. */
.legal__body {
  /* column-width must be a length -- minmax() here is invalid and silently
     collapses to a single column. Giving both an ideal width and a max count
     lets the browser drop to one column on narrow screens by itself. */
  columns: 420px 2;
  column-gap: 80px;
  font: var(--t-b1);
  color: var(--ink-legal);
}
.legal__body p { break-inside: avoid; margin-bottom: 28px; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body a { text-decoration: underline; }
.legal__body strong { font-weight: 600; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}