/* ==========================================================================
   Final home page (October 2026) — the owner-approved mix of Version 1 and
   Version 2. Loaded on the home page only, after design-system.css and
   mobile.css (inc/home-final.php).

     1. Hero: the lead slide's rotating picture
     2. "Shop by cut" cards: the quick add and the price range on phones
     3. The creed, with "For the ones who can tell the difference"
     4. Why we do this (the story)
   ========================================================================== */

/* 1. Hero — two or three pictures stacked; home-final.js shows the next one
   each time the slider comes back to the lead slide, fading it in as the
   slide appears (the slide itself is display:none while away, so a keyframe
   animation, not a transition). The media box's gradient (::after) stays on
   top of every picture. */
.gs-heroRot { position: absolute; inset: 0; z-index: 0; } /* its own stack: the gradient (::after) stays on top */
.gs-heroRot__item { position: absolute; inset: 0; opacity: 0; }
.gs-heroRot__item.is-on { opacity: 1; z-index: 1; }
.gs-heroRot__item.is-on.is-enter { animation: gs-herorot-in .9s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes gs-herorot-in { from { opacity: 0; } to { opacity: 1; } }
.gs-heroRot__item picture { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .gs-heroRot__item.is-on.is-enter { animation: none; }
  .gs-heroRot__item:not(:first-child) { display: none; }
}

/* 2. Cards (the Fresh / Frozen pills are site-wide, design-system.css). */
/* The quick add states one price at one weight; keep it on one line. */
.gs-card--home .gs-card__qa-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.01em; }
.gs-card--home .gs-card__qa-label { white-space: nowrap; }
/* V1's price range at the foot. */
.gs-card--home .gs-card__price { font-size: 16.5px; white-space: nowrap; }
.gs-card--home .gs-card__foot { gap: 10px; }

/* The range line exists for the phone's pack label only (the wide card
   shows the range in its foot). */
.gs-card__range { display: none; }

@media (max-width: 860px) {
  /* Pack label: weight row, then "price  [+]", then the range across the
     cut's packs as the label's last line. */
  .gs-card--home .gs-card__range {
    display: block; margin-top: 7px; padding-top: 5px; border-top: 1px solid var(--gs-label-rule);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: -0.01em; line-height: 1.2; color: var(--gs-label-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; unicode-bidi: isolate;
  }
  [dir="rtl"] .gs-card--home .gs-card__range { text-align: right; }
}

/* 3. The creed — V1's line, and under it, in the same band, V2's "For the
   ones who can tell the difference" with its three points. */
.gs-creed__eyebrow { color: var(--gold); }
.gs-creed .gs-manifesto__inner { padding-bottom: clamp(30px, 4vw, 46px); }
.gs-creed__who { position: relative; padding-top: clamp(34px, 4.6vw, 58px); padding-bottom: clamp(48px, 6.4vw, 84px); }
.gs-creed__who::before {
  content: ""; position: absolute; top: 0; left: var(--pad-x); right: var(--pad-x); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 162, 78, 0.45) 18%, rgba(212, 162, 78, 0.45) 82%, transparent);
}
.gs-creed .gs-who__title { font-size: clamp(30px, 3.7vw, 52px); }
.gs-creed .gs-who__lede { text-align: start; }
@media (max-width: 860px) {
  .gs-creed .gs-manifesto__inner { padding-bottom: 28px; }
  .gs-creed__who { padding-top: 30px; padding-bottom: 40px; gap: 18px; }
  .gs-creed .gs-who__title { font-size: 30px; }
}

/* Doneness guide, Arabic: a temperature reads left to right ("46–49°C",
   "68°C+"), not reversed by the right-to-left line. */
[dir="rtl"] .gs-done__temp { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* 4. Why we do this — the photograph's subject sits low in the frame. */
.gs-story__media img { object-position: 50% 62%; }