/* =========================================================================
   Components — reusable UI. Ordered header → nav → buttons → forms →
   cards → alerts → footer → misc.
   ========================================================================= */

/* ---- Announcement bar -------------------------------------------------- */
.announce {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line-faint);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  flex-wrap: wrap;
}
.announce__dot { color: var(--bronze-deep); }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Solid fallback FIRST: engines without color-mix (older in-app WebViews)
     would otherwise drop the declaration and leave the header transparent. */
  background: rgba(12, 11, 9, 0.94);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  /* Under viewport-fit=cover the header band fills the top safe area (iPhone
     notch / status bar). In a normal browser this inset is 0, so no change;
     in an edge-to-edge in-app WebView (Telegram, Instagram…) it stops the
     hero background showing through a strip above the header. */
  padding-top: env(safe-area-inset-top, 0px);
}
/* Opaque slab rising above the header. In-app browsers (Telegram & co) can
   open a gap above a sticky header — reported safe-area insets, collapsing
   URL-bar viewport lag — and whatever shows through reads as a glitch. Any
   such gap now shows this header-coloured surface instead of the page
   scrolling beneath. Off-canvas (bottom: 100%), so invisible in normal
   browsers, and overflow-x clip on html/body ignores vertical overhang. */
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 30vh;
  background: var(--bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.25rem;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze);
}

/* ---- Nav --------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__list {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  padding-block: var(--space-2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--bronze);
}

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.nav__toggle span,
.nav__toggle::before,
.nav__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle::before { top: 14px; }
.nav__toggle span    { top: 19px; }
.nav__toggle::after  { top: 24px; }
.nav__toggle[aria-expanded="true"]::before { top: 19px; transform: translateX(-50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span    { opacity: 0; }
.nav__toggle[aria-expanded="true"]::after  { top: 19px; transform: translateX(-50%) rotate(-45deg); }

/* ---- Cart link --------------------------------------------------------- */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cart-link:hover { border-color: var(--gold); color: var(--gold); }
.cart-link__icon { font-size: 1rem; color: var(--bronze); }
.cart-link__count {
  min-width: 1.4em;
  padding: 0 0.35em;
  text-align: center;
  background: var(--bronze);
  color: var(--accent-ink);
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.cart-link__count.is-empty { background: transparent; color: var(--ink-faint); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.4em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-accent {
  background: linear-gradient(180deg, var(--gold), var(--bronze));
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
.btn-accent:hover {
  background: linear-gradient(180deg, #ecc884, var(--gold));
  box-shadow: var(--shadow-2);
}

/* Phones: a long CTA wraps to two lines rather than forcing the page wider
   than the viewport (.btn is nowrap on desktop). */
@media (max-width: 640px) {
  .btn { white-space: normal; }
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-lg { padding: 1.05em 1.75em; font-size: 0.95rem; }
.btn-sm { padding: 0.55em 0.9em; font-size: 0.72rem; letter-spacing: 0.08em; }

/* ---- Forms ------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: var(--space-5); }

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.field__error {
  display: block;
  margin-top: var(--space-2);
  color: var(--error);
  font-size: var(--step--1);
}

.field-input,
.form-card input[type="text"],
.form-card input[type="email"],
.form-card textarea {
  display: block;
  width: 100%;
  padding: 0.9em 1em;
  background: var(--bg-inset);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field-input::placeholder,
.form-card input::placeholder { color: var(--ink-faint); }
.field-input:focus,
.form-card input:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-raised);
}

/* Product add-to-basket quantity control */
.pd__add-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.pd__qty {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.pd__qty label {
  font-size: var(--step--1);
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
/* ---- Shared quantity control (cards · product page · basket lines) ------
   No-JS baseline: a <select> weight ladder or a number input. qty-stepper.js
   enhances it into a −/value/+ stepper. Both flavours share this chrome:
   ≥16 px font (no iOS focus-zoom), ≥44 px targets, custom chevron. */
.qty {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.qty__select,
.qty__input,
.stepper__value {
  font: inherit;
  font-size: 1rem;              /* keeps iOS from zooming on focus */
  color: var(--ink);
  min-height: var(--tap);
}
.qty__select,
.qty__input {
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 0.85em;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.qty__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1710' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 0.72em;
  cursor: pointer;
}
.qty__input { width: 5em; text-align: center; }
.qty__select:focus,
.qty__input:focus {
  border-color: var(--gold);
  background: var(--bg-raised);
}
/* Once qty-stepper.js enhances a control it hides the original <select>/<input>
   with [hidden]. Guard that against any page-level form CSS (e.g. .oscar-page on
   the cart) whose explicit `display` would otherwise re-show it as a duplicate box. */
.qty [hidden] { display: none !important; }
.qty__unit { font-size: var(--step--1); }
.qty__estimate {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Dual tranche picker (bulk-priced by-weight products): one word-light row
   per rate — « Par 5 kg » (full tranches, bulk price) and « Complément »
   (extra below a tranche, base price) — plus one combined total line. The
   prices themselves live in the price block, never here. qty-stepper.js. */
.qty--tranche {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  max-width: 21rem;
}
.qty--tranche .qty__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.qty__row-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.qty--tranche .stepper { justify-self: end; }
.qty--tranche .stepper__value { width: 4.2em; }
/* The total is the number the client will pay — it reads like a price, not
   like a footnote. */
.qty__total {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--gold);
  text-align: right;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
/* Card grids: the same column layout despite the card's row-flex qty default. */
.product-card__add .qty--tranche { flex-direction: column; }

/* Mini variant (cards): by default only the standard weight stepper plus a
   small « 5 kg » chip, so the card matches its neighbours' height. Clicking
   the chip reveals the compact tranche counter, the bulk-price line and the
   total (qty-stepper.js drives the [hidden] states). */
.product-card__add .qty--tranche-mini {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: none;
}
.qty--tranche-mini .qty__row {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.qty--tranche-mini .qty__row--weight { flex: none; }
/* The bulk chip is an ACTION, so it speaks the ghost-button language: full
   ink, firm border, bold mono — not a faint meta label. Gold fill when open. */
.qty__tranche-toggle {
  font-family: var(--font-mono);
  /* Same size as the quantity field beside it (.stepper__value: 1rem). */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.85em;
  cursor: pointer;
  flex: none;
  /* Same height as the stepper beside it (width stays natural). */
  align-self: stretch;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.qty__tranche-toggle:hover { border-color: var(--gold); color: var(--gold); }
.qty__tranche-toggle[aria-expanded="true"] {
  border-color: var(--gold);
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 12%, transparent);
}
.qty--tranche-mini .qty__total {
  flex: 1 0 100%;
  font-size: 0.9rem;
  padding-top: var(--space-1);
}

/* The enhanced stepper */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-inset);
  overflow: hidden;
}
.stepper__btn {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.stepper__btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--gold); }
.stepper__btn:disabled { opacity: 0.32; cursor: not-allowed; }
.stepper__value {
  width: 5em;
  border: 0;
  border-inline: 1px solid var(--line-strong);
  background: var(--bg-card);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stepper__value:focus { outline-offset: -2px; background: var(--bg-raised); }
.stepper__unit { font-size: var(--step--1); align-self: center; padding-inline: 0.5em; }

/* Add-to-basket block on a product card: a COMPACT stepper (natural width,
   never stretched) over the full-width reserve button every card shares. */
.product-card__add {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
}
/* Full-width stepper row: fixed-basis buttons (never grow/shrink), value fills
   the rest, so "500 g" / "1,6 kg" get the width, not the buttons. The unit word
   is hidden here — it lives in the price ("/ pièce", "10,80 €/250 g") — so the
   card is just a clean stepper and every card foot aligns automatically. */
/* Full-width stepper row: fixed-basis buttons (never grow), the value fills the
   rest so even a big "12,6 kg" gets the width, not the buttons (qty-stepper.js
   auto-shrinks the font if a value would still overflow). The unit is hidden
   here — it rides with the price ("/ pièce") — so the card is a clean stepper. */
.product-card__add .qty { display: flex; align-items: center; justify-content: center; width: auto; }
.product-card__add .qty__select { width: 100%; }
/* Compact card stepper: slimmer −/+ (tap HEIGHT kept) and a value box sized
   for four characters plus the unit ("12,5 kg" still fits, fitFont() shrinks
   anything longer) — so the bulk chip shares the row on tranche products. */
.product-card__add .stepper { display: flex; flex: none; width: auto; }
.product-card__add .stepper__btn { flex: 0 0 34px; min-width: 34px; }
.product-card__add .stepper__value { flex: none; width: 4.6em; min-width: 0; }
.product-card__add .qty__unit { display: none; }
.product-card__add .qty__estimate { display: none; }  /* the product page carries the estimate */
/* Tranche mini picker: the revealed tranche counter matches the weight
   stepper's size exactly — same buttons, same value width — so the two read
   as equals when the « 5 kg » chip is open. */
.btn-add { width: 100%; }

/* Two-up on phones: the card is only ~110 px wide inside, so shrink the stepper
   buttons (still tappable ≥ WCAG 24 px) and their glyph, trim padding, and drop
   the value font a touch — the value box gets the room so weights never clip. */
@media (max-width: 560px) {
  .product-card__body { padding: var(--space-3); gap: var(--space-1); }
  .product-card__foot { padding-top: var(--space-3); gap: var(--space-2); }
  .product-card__title { font-size: var(--step-0); }
  .product-card__add .stepper__btn { flex-basis: 26px; min-width: 26px; min-height: 40px; font-size: 0.85rem; }
  .product-card__add .stepper__value { min-height: 40px; font-size: 0.92rem; }
  .product-card__add .qty__tranche-toggle { font-size: 0.92rem; }  /* tracks the field */
}

/* ---- Oscar checkout re-skin: style default form controls to match ------ */
.checkout-page label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-bottom: 0.4em;
  font-weight: 500;
}
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page input[type="number"],
.checkout-page input[type="password"],
.checkout-page input[type="search"],
.checkout-page select,
.checkout-page textarea,
.checkout-page .form-control {
  display: block;
  width: 100%;
  max-width: 34rem;
  padding: 0.8em 1em;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  margin-bottom: var(--space-4);
}
/* The cart shares the .checkout-page body, so the form-field rule above would blow up
   the compact quantity stepper (full-width value box + bottom margin). Keep the qty
   control at its intended size — identical to the product page. */
.checkout-page .qty .stepper__value {
  display: block; width: 5em; max-width: none; margin: 0; padding: 0;
}
.checkout-page .qty .qty__select,
.checkout-page .qty .qty__input { width: auto; max-width: none; margin: 0; }
.checkout-page input:focus,
.checkout-page select:focus,
.checkout-page textarea:focus { outline: none; border-color: var(--bronze); }
.checkout-page input[type="radio"],
.checkout-page input[type="checkbox"] { width: auto; display: inline-block; margin-right: 0.5em; }
.checkout-page fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.checkout-page h2, .checkout-page h3, .checkout-page legend, .checkout-page .sub-header { margin-bottom: var(--space-4); }
.checkout-page .card, .checkout-page .card-body {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
/* Oscar renders primary actions as .btn.btn-primary — map to our accent look. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--gold); border-color: var(--gold); }

/* Checkout: two-column form + summary, and the reserve form */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 820px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-form-col > .lede { margin-bottom: var(--space-5); }
.checkout-form-col > .form-card + form,
.checkout-form-col > form + .form-card { margin-top: var(--space-5); }

.reserve-field { margin-bottom: var(--space-5); }
.reserve-field > legend,
.reserve-field > label {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-3);
  display: block;
}
.reserve-rails { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.reserve-rails div, .reserve-rails ul {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  list-style: none; margin: 0; padding: 0;
}
.reserve-rails label {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 500; color: var(--ink); margin: 0; cursor: pointer;
}
.reserve-consent label { display: flex; gap: 0.6em; align-items: flex-start; font-weight: 400; color: var(--ink-soft); }
.reserve-consent input { margin-top: 0.25em; }

.summary-line {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line-faint);
  font-size: var(--step--1);
}
.summary-total {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-4); margin-top: var(--space-2);
  font-weight: 700; font-size: var(--step-0);
}
.summary-address { font-style: normal; color: var(--ink-soft); line-height: 1.5; }

.form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-2);
}

/* Newsletter signup (inline email + submit) */
.signup {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.signup .field-input { flex: 1 1 220px; min-width: 0; }
.signup--lg { margin-top: 0; }
.signup--lg .field-input { flex-basis: 280px; padding: 1.05em 1.15em; }

/* Honeypot: hide the .company field from real users, keep it accessible-hidden */
input[name="company"] {
  position: absolute !important;
  left: -9999px !important;
  height: 1px; width: 1px;
  opacity: 0;
}

/* ---- Product card ------------------------------------------------------ */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--bg-card-hover);
}

.product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 6 / 5;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(226, 189, 111, 0.10), transparent 60%),
    linear-gradient(180deg, #1c1810, #0f0d09);
  color: var(--bronze);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* No-image placeholder: a faint monogram BACKDROP behind a big, high-contrast
   "Photo à venir" so it reads clearly as a pending photo, not an unfinished card. */
.product-card__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 7rem);
  font-weight: 500;
  color: color-mix(in oklab, var(--bronze) 20%, transparent);   /* faint watermark */
}
.product-card__soon {
  position: relative;
  z-index: 1;
  padding-inline: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 3.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #efe8da;                                                /* bone on near-black — high contrast */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.product-card__media--photo { background: #0a0906; }
.product-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.product-card:hover .product-card__img {
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.05);
}
.product-card__unavail {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: 0.25em 0.6em;
  background: var(--bg-inset);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.product-card--unavailable .product-card__img { filter: grayscale(1); opacity: 0.55; }
.product-card--unavailable .product-card__title a { color: var(--ink-soft); }

.range-card__unavail {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: 0.25em 0.6em;
  background: var(--bg-inset);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.range-card--unavail .range-card__media img { filter: grayscale(1); opacity: 0.55; }
.range-card--unavail .range-card__title { color: var(--ink-soft); }

.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.25em 0.6em;
  background: var(--oxblood);
  color: var(--oxblood-ink);   /* bone on oxblood — readable (was near-black) */
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}
.product-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;               /* up from 10.5px */
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze-deep);        /* AA on ivory (was --bronze, ~3.3:1) */
}
.product-card__title {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink);
}
.product-card__title a { color: inherit; transition: color var(--dur) var(--ease); }
.product-card__title a:hover { color: var(--gold); }
.product-card__subtitle {
  color: var(--ink-soft);
  font-size: var(--step--1);
}
/* The foot is pinned to the card bottom and stacks its rows deterministically
   (price · selling line · control+button), so every card in the grid aligns
   regardless of title length or sale mode. */
.product-card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--line-faint);
}
.product-card__price {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}
/* The number itself never breaks; the unit ("/ pièce") may wrap to the next
   line on its own when the card is too narrow. */
.product-card__amount { white-space: nowrap; }
.product-card__price-unit { white-space: nowrap; color: var(--ink-soft); font-weight: 500; }
.product-card__min {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.product-card__window {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.35;
  margin-top: var(--space-1);
}
.product-card__window--closed { color: var(--warn); font-weight: 500; }

/* ---- Alerts / messages ------------------------------------------------- */
.messages { display: flex; flex-direction: column; gap: var(--space-3); }
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: var(--step--1);
}
.alert.success { border-color: color-mix(in oklab, var(--ok) 45%, var(--line)); }
.alert.error   { border-color: color-mix(in oklab, var(--error) 45%, var(--line)); color: var(--error); }
.alert.warning { border-color: color-mix(in oklab, var(--warn) 45%, var(--line)); }

/* ---- Shop notice (inline banner above the grid) ------------------------ */
.shop-notice {
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  margin-bottom: var(--space-7);
  font-size: var(--step--1);
}
.shop-notice strong { color: var(--gold); margin-right: 0.4em; }

/* One estimate/guarantee line above a category grid (says it once, not per card) */
.shop-estimate {
  max-width: 68ch;
  font-size: var(--step--1);
  margin-bottom: var(--space-6);
}

/* ---- Shop: sticky range nav + section subheads ------------------------- */
.shop-nav {
  position: sticky;
  top: var(--header-h); /* under the sticky site-header (real height) */
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-block: 1px solid var(--line);
}
.shop-nav__inner {
  position: relative;
  padding-block: var(--space-3);
}
/* --- Mobile: collapse the categories into a dropdown ------------------- */
.shop-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0.65em 1.1em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.shop-nav__current { color: var(--accent); }
.shop-nav__chevron {
  width: 14px; height: 14px; flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}
.shop-nav__toggle[aria-expanded="true"] .shop-nav__chevron { transform: rotate(180deg); }
.shop-nav__list {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  position: absolute;
  left: 0; right: 0;
  top: calc(100% - var(--space-2));
  z-index: 60;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  max-height: 72vh;
  overflow-y: auto;
}
.shop-nav__inner.is-open .shop-nav__list { display: flex; }
/* --- Desktop: room for pills — hide the toggle, wrap & centre ---------- */
@media (min-width: 880px) {
  .shop-nav__toggle { display: none; }
  .shop-nav__list {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
}
.shop-nav__link {
  flex: 0 0 auto;
  padding: 0.55em 1em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.shop-nav__link:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.shop-nav__link.is-active {
  color: var(--accent-ink);
  background: var(--bronze);
  border-color: var(--bronze);
}

/* ---- Range cards (shop landing + subcategory tiles) -------------------- */
/* auto-FILL (not auto-fit): empty tracks are kept, so two subcategory tiles
   stay the size they would have in a full four-across row instead of
   stretching to fill the container. */
.range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-6));
}
.range-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.range-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--ink);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  isolation: isolate;
}
.range-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

/* Home category plates: a range-card without its media block — a quiet name
   plate, 4-up on desktop via the compact grid, linking into each root range. */
.range-card--flat .range-card__body { padding: var(--space-5); }
.range-card--flat .range-card__title { font-size: var(--step-1); }
.range-card--flat:hover { border-color: var(--gold); }

.range-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0a0906;
}
.range-card--sm .range-card__media { aspect-ratio: 4 / 3; }
.range-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.85);
  transition: transform 600ms var(--ease), filter var(--dur) var(--ease);
}
.range-card:hover .range-card__media img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.05) brightness(0.95);
}
.range-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(12,11,9,0.75) 100%);
}

.range-card__body {
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
}
.range-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.range-card--sm .range-card__title { font-size: var(--step-1); }
.range-card__lede {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  max-width: 46ch;
}
.range-card__meta {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.range-card__count { color: var(--ink-faint); }
.range-card__cta { color: var(--gold); }
.range-card:hover .range-card__cta .arrow { transform: translateX(3px); }

/* ---- Pagination (category page) ---------------------------------------- */
.pagination {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.pagination__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.55em 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pagination__link:hover { color: var(--gold); border-color: var(--gold); }
.pagination__status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- CTA band (home page inner-circle) --------------------------------- */
.cta-band {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: center;
  padding: clamp(var(--space-7), 6vw, var(--space-9));
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(200,155,74,0.12), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
}
.cta-band__text .section-title { margin-top: var(--space-2); margin-bottom: var(--space-3); }

/* ---- Pillar (numbered feature) ----------------------------------------- */
.pillar {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.pillar__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--track-label);
  color: var(--bronze);
  margin-bottom: var(--space-4);
}
.pillar h3 { margin-bottom: var(--space-3); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--bg-inset);
  border-top: 1px solid var(--line);
  margin-top: var(--space-10);
}

/* ---- Mobile nav -------------------------------------------------------- */
@media (max-width: 768px) {
  .nav__toggle { display: inline-block; }
  .nav {
    position: absolute;
    top: 100%;
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    display: none;
  }
  .site-header__inner { position: relative; }
  .nav__list { flex-direction: column; gap: var(--space-3); }
  .nav.is-open { display: flex; }
  .cta-band { grid-template-columns: 1fr; }
}

/* Rows sitting at zero recede so the active composition reads at a glance. */
.qty--tranche .qty__row--zero { opacity: 0.5; }