@charset "utf-8";

/* ==========================================================================
   Halix — design system
   Derived from the printed label: off-white field, thin red rule as the only
   graphic accent, Didone caps for names, one solid charcoal bar, red section
   labels, red diagonal corner. Three colours only. No shadows, no radii.
   ========================================================================== */

:root {
  /* Brand — the only three colours in the system */
  --ink:   #1F2023;
  --paper: #F7F5F1;
  --red:   #C0392B;

  /* Tints of the brand colours. No new hues are introduced. */
  --ink-88: rgba(31, 32, 35, .88);
  --ink-64: rgba(31, 32, 35, .64);
  --ink-48: rgba(31, 32, 35, .48);
  --rule:   rgba(31, 32, 35, .20);
  --rule-2: rgba(31, 32, 35, .11);
  --paper-72: rgba(247, 245, 241, .72);
  --paper-40: rgba(247, 245, 241, .40);
  --paper-18: rgba(247, 245, 241, .18);

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", "Playfair Display", Georgia, serif;
  /* Held separately so the Arabic tree can override --serif without
     losing the brand face for Latin product names. */
  --serif-latin: "Bodoni Moda", "Bodoni 72", Didot, "Playfair Display", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1500px;

  /* Vertical rhythm */
  --band: clamp(4.5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Several toggled blocks also carry a `display` rule, which otherwise
   beats the hidden attribute's UA default. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--red); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip:focus { inset-inline-start: 0; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(3rem, 7vw, 6rem); }

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

/* --------------------------------------------------------- typography --- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  line-height: 1.02;
  letter-spacing: -.015em;
  font-optical-sizing: auto;
}

p { margin: 0; }

/* Display sizes. .d1 is sized to hold "tous les jours." on one line inside
   the hero's left column — check that line if you change it. */
.d1 { font-size: clamp(2.75rem, 6vw, 5.75rem); line-height: .95; letter-spacing: -.03em; }
.d2 { font-size: clamp(2.4rem, 6.2vw, 5rem);   line-height: .98; letter-spacing: -.025em; }
.d3 { font-size: clamp(1.75rem, 3.4vw, 2.9rem); line-height: 1.04; letter-spacing: -.02em; }

/* The label lockup: Didone, all caps, tight. Matches the printed panel. */
.name {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1;
}

/* Red small-caps section label — "Conseils d'Utilisation :" on the label */
.eyebrow {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}
.eyebrow--ink { color: var(--ink-48); }
.eyebrow--paper { color: var(--paper-40); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-88);
  max-width: 42ch;
}

.small {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-64);
}

.meta {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-48);
}

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* The signature: 2px red rule sitting above a name. Straight off the label. */
.redrule {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--red);
  border: 0;
  margin: 0;
}
.redrule--short { width: 3.5rem; }

/* The solid charcoal bar from the ingredient panel */
.inkbar {
  display: block;
  height: 1.5rem;
  background: var(--ink);
  border: 0;
  margin: 0;
}

/* The red diagonal corner from the bottom-right of the label */
.corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(90px, 14vw, 190px);
  aspect-ratio: 1;
  background: var(--red);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------- links --- */

.link {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--ink);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover { color: var(--red); border-color: var(--red); }
.link--red { color: var(--red); border-color: var(--red); }
.link--red:hover { color: var(--ink); border-color: var(--ink); }
.link--paper { border-color: var(--paper-40); }
.link--paper:hover { color: var(--paper); border-color: var(--paper); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3.5rem;
  padding: .9rem 2rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--red); border-color: var(--red); }

.btn--red { background: var(--red); border-color: var(--red); }
.btn--red:hover { background: var(--ink); border-color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--onink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--onink:hover { background: var(--red); color: var(--paper); border-color: var(--red); }

.btn--ghost-onink { background: transparent; color: var(--paper); border-color: var(--paper-40); }
.btn--ghost-onink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn[disabled] { opacity: .4; pointer-events: none; }

/* -------------------------------------------------------- image slots --- */

/* Real photography is produced separately. These slots are deliberately
   empty and labelled so nobody mistakes them for finished art. */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.slot__note {
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem;
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.slot__note b {
  font-weight: 500;
  color: var(--red);
  letter-spacing: .2em;
}
.slot__x {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right,
      transparent calc(50% - .5px), var(--rule-2) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right,
      transparent calc(50% - .5px), var(--rule-2) 50%, transparent calc(50% + .5px));
  pointer-events: none;
}
.slot--wide { aspect-ratio: 3 / 2; }
.slot--tall { aspect-ratio: 3 / 4; }

/* A real bottle render sits on the paper with no chrome at all */
.shot {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
}

/* ------------------------------------------------------------ header --- */

.topbar {
  background: var(--ink);
  color: var(--paper-72);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding-block: .5rem;
}
.topbar__x { color: var(--paper); }
.topbar__b { display: none; }

.head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.head .wrap {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  min-height: 5.75rem;
}

.brand { display: block; line-height: 0; margin-inline-end: auto; }
/* The lockup includes "BUILT FOR EVERY DAY." under the wordmark, so it
   runs larger than a plain wordmark would to keep that line readable. */
.brand img { width: auto; height: clamp(34px, 4.2vw, 46px); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}
.nav a {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-88);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--red); border-color: var(--red); }

.cartbtn {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  background: none;
  border: 0;
  padding: .35rem 0;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.cartbtn:hover { color: var(--red); border-color: var(--red); }
.cartbtn__n {
  min-width: 1.5rem;
  padding: 0 .3rem;
  background: var(--red);
  color: var(--paper);
  font-size: .6875rem;
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cartbtn__n[data-empty="true"] { background: none; color: var(--ink-48); }

/* Language switch. Sits after the cart, separated by a hairline, and is
   always set in the language it takes you to. */
.langswitch {
  position: relative;
  padding: .35rem 0;
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink-48);
  transition: color .2s var(--ease);
}
.langswitch::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1px;
  height: 1.15em;
  margin-top: -.575em;
  background: var(--rule);
}
.langswitch:hover { color: var(--red); }
.langswitch[lang="ar"] { font-family: var(--sans-ar); font-size: .875rem; }
.langswitch[lang="fr"] { font-family: var(--sans); }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  margin-inline-end: -.5rem;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.hero__h {
  margin-top: 1.5rem;
  /* 'jours' sets in the Didone italic to echo the wordmark's own 'alix' */
}
.hero__h em {
  font-style: italic;
  font-weight: 400;
}
.hero__sub {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 38ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.hero__fig {
  position: relative;
  margin-bottom: -1px;
}
.hero__fig .shot {
  /* sized so the figure and the copy column end up close in height —
     bottom-aligned columns of very different heights read as a hole */
  max-width: min(100%, 26rem);
  margin-inline: auto;
}
.hero__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.25rem;
}

/* Masthead ledger — facts as one typographic strip, not a card grid */
.ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-64);
}
.ledger b { font-weight: 500; color: var(--ink); }
.ledger .sep { color: var(--red); }

/* ----------------------------------------------------------- position --- */

.pos__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.pos__h { margin-top: 1.25rem; position: sticky; top: 7rem; }

.claims { display: grid; }
.claims__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.claims__row:last-child { border-bottom: 1px solid var(--rule); }
.claims__n {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--red);
  padding-top: .45rem;
}
.claims__t {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.claims__d {
  margin-top: .65rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-64);
  max-width: 46ch;
}

/* ------------------------------------------------------ product index --- */

.idx__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.idx {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

/* Index entries, not cards: no radius, no shadow, hairlines do the work. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  text-decoration: none;
  transition: background .3s var(--ease);
}
a.card:hover { background: rgba(31, 32, 35, .035); }

.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.card__n {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--red);
}
.card__fig {
  position: relative;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.card__fig .shot { max-width: 78%; margin-inline: auto; }
.card__body { margin-top: auto; }
.card__name {
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  margin-top: .85rem;
}
.card__sub {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--ink-64);
}
.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-2);
}
.card__price {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.card__price span {
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--ink-48);
  margin-inline-start: .2rem;
}
.card__go {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-48);
  transition: color .25s var(--ease);
}
a.card:hover .card__go { color: var(--red); }

/* -------------------------------------------------------------- pack --- */

.pack {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.pack__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.pack__h { margin-top: 1.25rem; color: var(--paper); }
.pack__p {
  margin-top: 1.5rem;
  max-width: 40ch;
  color: var(--paper-72);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.pack__list { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.pack__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
  border-top: 1px solid var(--paper-18);
  font-size: .9375rem;
}
.pack__item:last-of-type { border-bottom: 1px solid var(--paper-18); }
.pack__item b {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.pack__item span { color: var(--paper-40); font-variant-numeric: tabular-nums; }

.pack__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 1.5rem;
  margin-top: 1.75rem;
}
.pack__now {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.02em;
}
/* only the currency, never the figure itself */
.pack__now .unit {
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .1em;
  color: var(--paper-40);
  margin-inline-start: .35rem;
}
.pack__was {
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--paper-40);
}
.pack__save {
  padding: .3rem .6rem;
  background: var(--red);
  color: var(--paper);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pack__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.pack__alt { margin-top: 1.75rem; color: var(--paper-40); font-size: .8125rem; }
.pack__alt a { color: var(--paper-72); text-underline-offset: .25em; }
.pack__alt a:hover { color: var(--paper); }

.pack__fig { position: relative; }
.pack__fig .slot { border-color: var(--paper-18); }
.pack__fig .slot__note { color: var(--paper-40); }
.pack__fig .slot__x {
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--paper-18) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--paper-18) 50%, transparent calc(50% + .5px));
}

/* -------------------------------------------------------------- steps --- */

.steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.steps { display: grid; }
.step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--red);
  padding-top: .3rem;
}
.step__t {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.005em;
}
.step__d {
  margin-top: .4rem;
  font-size: .9375rem;
  color: var(--ink-64);
  max-width: 52ch;
}

/* ------------------------------------------------------------- labels --- */

.labels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.labelcard { display: flex; flex-direction: column; gap: 1rem; }
.labelcard figure { margin: 0; border: 1px solid var(--rule); background: #fff; }
.labelcard img { width: 100%; }
.labelcard figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* ------------------------------------------------------------- footer --- */

.foot {
  position: relative;
  background: var(--ink);
  color: var(--paper-72);
  overflow: hidden;
}
.foot a { text-decoration: none; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 4vw, 3.5rem);
}
.foot__brand img { width: clamp(160px, 20vw, 230px); }
.foot__tag { margin-top: 1.5rem; max-width: 30ch; font-size: .875rem; color: var(--paper-40); }
.foot__col h3 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-40);
  margin-bottom: 1.1rem;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot__col a {
  font-size: .875rem;
  color: var(--paper-72);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__col a:hover { color: var(--paper); border-color: var(--paper-40); }

.foot__legal {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--paper-18);
  display: grid;
  gap: 1.25rem;
}
.foot__disc {
  font-size: .75rem;
  line-height: 1.65;
  color: var(--paper-40);
  max-width: 90ch;
}
.foot__bot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  /* keep clear of the red diagonal corner */
  padding-inline-end: clamp(70px, 11vw, 150px);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-40);
}
.foot__bot a { border-bottom: 1px solid var(--paper-18); }
.foot__bot a:hover { color: var(--paper); border-color: var(--paper-40); }

/* smaller than the pack's, so it reads as a sign-off rather than a device */
.foot .corner { width: clamp(70px, 9vw, 130px); }

/* ---------------------------------------------------------- open items --- */

/* Anything still waiting on a decision is marked in the markup, never guessed. */
.todo {
  display: inline-block;
  padding: .15rem .45rem;
  border: 1px dashed var(--red);
  color: var(--red);
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ------------------------------------------------------------ motion --- */

/* Gated on `.js` so a failed or blocked script never leaves whole sections
   invisible — without JS the content simply renders. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- responsive --- */

@media (min-width: 48em) {
  .topbar__b { display: block; }
}

@media (max-width: 62em) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__fig { order: -1; max-width: 24rem; }
  .pos__grid,
  .steps__grid { grid-template-columns: 1fr; }
  .pos__h { position: static; }
  .pack__grid { grid-template-columns: 1fr; }
  .pack__fig { order: -1; max-width: 28rem; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 46em) {
  .burger { display: block; }
  .head .wrap { min-height: 4.75rem; }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    top: var(--head-h, 4.75rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 2rem;
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s;
  }
  .nav[data-open="true"] { transform: none; visibility: visible; }
  .nav a {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -.01em;
    text-transform: none;
    padding-block: .85rem;
    border-bottom: 1px solid var(--rule-2);
  }
  .nav .langswitch {
    font-size: 1rem;
    letter-spacing: .06em;
    padding-inline-start: 0;
    padding-top: 1.25rem;
    border-bottom: 0;
  }
  .nav .langswitch::before { display: none; }
  .nav .langswitch[lang="ar"] { font-size: 1.125rem; }

  .claims__row,
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .claims__n, .step__n { padding-top: 0; }
  .foot__grid { grid-template-columns: 1fr; }

  /* one fact per line, hairline-separated — the inline "/" reads as litter
     once the strip wraps */
  .ledger { display: grid; gap: 0; }
  .ledger .sep { display: none; }
  .ledger > span { padding-block: .55rem; border-top: 1px solid var(--rule-2); }
  .ledger > span:first-child { border-top: 0; }

  .hero__cap span { white-space: nowrap; }

  /* two up, so the tall photo slots don't turn the index into a scroll */
  .idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* An odd number of cards would leave a visible empty cell, since the grid
     gaps are painted by the container background. The last one spans instead,
     with a wider crop so the full-width row stays short. */
  .idx > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .idx > :last-child:nth-child(odd) .slot { aspect-ratio: 3 / 2; }
  .idx > :last-child:nth-child(odd) .card__fig .shot { max-width: 42%; }
  .card { padding: 1rem .9rem 1.25rem; }
  .card__top .meta { font-size: .5625rem; letter-spacing: .08em; }
  .card__fig { margin-bottom: 1.25rem; }
  .card__name { font-size: 1.15rem; }
  .card__sub { font-size: .75rem; }
  .card__foot { margin-top: 1.1rem; }
  .card__price { font-size: 1.0625rem; }
  .card__go { font-size: .625rem; }
}

/* ==========================================================================
   Page-level components — product, cart, checkout, editorial, forms
   Same rules as the rest of the system: hairlines, no radius, no shadow,
   three colours only.
   ========================================================================== */

/* ------------------------------------------------------- page masthead --- */

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-block: 1.25rem;
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--red); }
.crumb i { font-style: normal; color: var(--rule); }

.masthead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.masthead__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
}
.masthead h1 { margin-top: 1.25rem; }
.masthead__side { padding-bottom: .5rem; }

/* ------------------------------------------------------- shot briefs --- */

/* Every empty slot carries the brief for the photograph that belongs in it,
   so the Higgsfield pass is a lookup rather than a guess. */
.slot__note em {
  display: block;
  font-style: normal;
  font-size: .5625rem;
  letter-spacing: .16em;
  color: var(--ink-48);
}
.slot__id {
  position: absolute;
  top: .6rem;
  inset-inline-start: .6rem;
  font-size: .5625rem;
  letter-spacing: .14em;
  color: var(--ink-48);
}
.slot--square { aspect-ratio: 1; }
.slot--pano { aspect-ratio: 21 / 9; }
.slot--onink { border-color: var(--paper-18); }
.slot--onink .slot__note,
.slot--onink .slot__id { color: var(--paper-40); }
.slot--onink .slot__x {
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--paper-18) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--paper-18) 50%, transparent calc(50% + .5px));
}

/* ------------------------------------------------------------- the PDP --- */

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.gal { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.gal__main { position: relative; background: var(--paper); display: grid; place-items: center; }
.gal__main .shot { width: 100%; max-width: 30rem; margin-inline: auto; padding: clamp(1rem, 3vw, 2.5rem); }
.gal__main .slot { border: 0; }
.gal__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.gal__thumbs > * { background: var(--paper); }
.gal__thumbs .slot { border: 0; aspect-ratio: 1; }
.gal__thumbs .slot__note { font-size: .5rem; letter-spacing: .12em; padding: .5rem; gap: .25rem; }

.pdp__info { position: sticky; top: 6.5rem; }
.pdp__moment {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.pdp__moment::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.pdp__name { font-size: clamp(2.5rem, 5vw, 4rem); margin-top: 1rem; }
.pdp__label {
  margin-top: .6rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-48);
}
.pdp__claim {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-top: 1.5rem;
  max-width: 26ch;
}
.pdp__sum { margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-64); max-width: 44ch; }

/* Actives, front and centre — the transparency argument made visual */
.actives { margin-top: 2rem; border-top: 1px solid var(--rule); }
.actives__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--rule-2);
  font-size: .875rem;
}
.actives__row b { font-weight: 400; }
.actives__row span { font-variant-numeric: tabular-nums; color: var(--ink-64); }
.actives__foot {
  padding-top: .7rem;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-48);
}

.buyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.price {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.price .unit {
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--ink-48);
  margin-inline-start: .3rem;
}
.price__per { font-size: .75rem; color: var(--ink-48); letter-spacing: .06em; }

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  height: 3.5rem;
}
.qty button {
  width: 3rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.qty button:hover { background: var(--ink); color: var(--paper); }
.qty input {
  width: 3rem;
  border: 0;
  border-inline: 1px solid var(--rule);
  background: none;
  text-align: center;
  font-family: var(--sans);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buyrow .btn { flex: 1 1 12rem; }

/* Bundle nudge sitting directly under the button, where the decision is */
.upsell {
  display: block;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-inline-start: 2px solid var(--red);
  text-decoration: none;
  transition: background .25s var(--ease);
}
.upsell:hover { background: rgba(31, 32, 35, .035); }
.upsell b { font-weight: 500; }
.upsell__t { font-size: .875rem; }
.upsell__d { margin-top: .3rem; font-size: .8125rem; color: var(--ink-64); }
.upsell__go {
  display: inline-block;
  margin-top: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}

/* Cash-on-delivery reassurance, stated plainly at the point of decision */
.assure { margin-top: 2rem; border-top: 1px solid var(--rule); }
.assure__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .75rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--rule-2);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-64);
}
.assure__row b { display: block; font-weight: 500; color: var(--ink); }
.assure__n { font-size: .6875rem; color: var(--red); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- content sections --- */

.sec__head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec__head h2 { margin-top: 1rem; }
.sec__head p { margin-top: 1.25rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rich { display: grid; gap: 1.5rem; max-width: 62ch; }
.rich p { font-size: 1rem; line-height: 1.7; color: var(--ink-88); }
.rich p.small { font-size: .8125rem; color: var(--ink-64); }
.rich strong { font-weight: 500; }

/* Expectation setting — the honest half of the sell */
.expect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.expect__col { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); }
.expect__col h3 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.expect__col--yes h3 { color: var(--red); }
.expect__col--no h3 { color: var(--ink-48); }
.expect ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.expect li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-88);
}
.expect li::before { content: "—"; color: var(--rule); }
.expect__col--no li { color: var(--ink-64); }

/* The printed ingredient panel, restyled rather than dumped in raw */
.panel { border: 1px solid var(--rule); background: var(--paper); }
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 2vw, 1.5rem);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.panel__head b { color: var(--red); font-weight: 500; }
.panel__bar { height: 1.25rem; background: var(--ink); }
.panel__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--rule-2);
  font-size: .9375rem;
}
.panel__row span { font-variant-numeric: tabular-nums; color: var(--ink-64); }
.panel__note {
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  font-size: .8125rem;
  color: var(--ink-64);
}
.panel__ar {
  padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--ink-88);
}
.panel__legal {
  padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
  font-size: .75rem;
  line-height: 1.65;
  color: var(--ink-64);
}
.panel__legal h4 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .5rem;
}
.panel__legal + .panel__legal { border-top: 1px solid var(--rule-2); }
.panel__disc {
  margin: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
  padding: .75rem 1rem;
  border: 1px solid var(--ink);
  font-size: .8125rem;
  line-height: 1.7;
  text-align: center;
}

/* ------------------------------------------------------------- FAQ --- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.125rem;
  color: var(--red);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq__a {
  padding-bottom: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 68ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-64);
}
.faq__a p + p { margin-top: .85rem; }

/* ------------------------------------------------------ cross-sell --- */

.also { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }

/* --------------------------------------------------------- prose pages --- */

.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  margin-top: 2rem;
}
.prose p, .prose li { font-size: 1rem; line-height: 1.7; color: var(--ink-88); }
.prose p { margin-top: 1rem; }
.prose ul, .prose ol { margin: 1rem 0 0; padding-inline-start: 1.25rem; display: grid; gap: .6rem; }
.prose a { text-underline-offset: .2em; }
.prose .meta { margin-top: 2.5rem; display: block; }

/* --------------------------------------------------------------- note --- */

.note {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rule);
  border-inline-start: 2px solid var(--red);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-88);
}
.note b { font-weight: 500; }
.note--ink { border-color: var(--paper-18); border-inline-start-color: var(--red); color: var(--paper-72); }

/* -------------------------------------------------------------- forms --- */

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .45rem; }
.field > label {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-64);
}
.field__hint { font-size: .75rem; color: var(--ink-48); }

.input, .select, .textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: .8rem 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); outline-offset: 1px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-48); }
.textarea { min-height: 6rem; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;  /* flipped for RTL below */
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
}

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--red); }
.field__err { display: none; font-size: .75rem; color: var(--red); }
.field[data-invalid="true"] .field__err { display: block; }

.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

.check {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  cursor: pointer;
  font-size: .9375rem;
  line-height: 1.5;
}
.check input {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
}
.check input:checked { background: var(--red); border-color: var(--red); }
.check input:checked::after {
  content: "";
  display: block;
  width: .35rem; height: .6rem;
  margin: .05rem auto;
  border: solid var(--paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.check span small { display: block; font-size: .75rem; color: var(--ink-48); }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: block;
  padding: .6rem 1rem;
  border: 1px solid var(--rule);
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.pill input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pill input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

/* ------------------------------------------------------- cart & order --- */

.order__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.lines { border-top: 1px solid var(--rule); }
.line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.line__fig { border: 1px solid var(--rule-2); aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; }
.line__fig .shot { width: 100%; padding: .35rem; }
.line__fig .slot { border: 0; }
.line__fig .slot__note { font-size: .4375rem; letter-spacing: .1em; padding: .25rem; }
.line__name { font-family: var(--serif); font-size: 1.25rem; letter-spacing: -.01em; }
.line__name a { text-decoration: none; }
.line__name a:hover { color: var(--red); }
.line__sub { margin-top: .3rem; font-size: .8125rem; color: var(--ink-64); }
.line__ctl { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }
.line__ctl .qty { height: 2.5rem; }
.line__ctl .qty button { width: 2.25rem; font-size: 1rem; }
.line__ctl .qty input { width: 2.5rem; font-size: .875rem; }
.line__rm {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-48);
  border-bottom: 1px solid var(--rule);
}
.line__rm:hover { color: var(--red); border-color: var(--red); }
.line__price { font-family: var(--serif); font-size: 1.125rem; font-variant-numeric: tabular-nums; text-align: end; }

.summary { border: 1px solid var(--rule); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.summary--sticky { position: sticky; top: 6.5rem; }
.summary h2 {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.25rem;
}
.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .6rem;
  font-size: .9375rem;
  border-bottom: 1px solid var(--rule-2);
}
.summary__row span { font-variant-numeric: tabular-nums; color: var(--ink-64); }
.summary__row--free span { color: var(--red); }

/* Long values (an address) read better stacked under their label. */
.summary__row--stack { display: block; }
.summary__row--stack span {
  display: block;
  margin-top: .3rem;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.5;
}
.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* the figure is large and set solid, so it needs room above the rule */
  padding-top: 1.6rem;
  margin-top: .5rem;
}
.summary__total b { font-family: var(--sans); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.summary__total span { font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.summary .btn { width: 100%; margin-top: 1.5rem; }
.summary__cash {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-64);
}
.summary__cash b { color: var(--ink); font-weight: 500; }

.empty { padding-block: clamp(3rem, 8vw, 6rem); text-align: start; }
.empty .buyrow .btn { flex: 0 0 auto; }
.empty h2 { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------- contact --- */

.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.channel { background: var(--paper); padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem; }
.channel h3 { font-family: var(--serif); font-size: 1.375rem; }
.channel p { font-size: .875rem; color: var(--ink-64); }
.channel .link { margin-top: auto; align-self: flex-start; padding-top: .75rem; }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 62em) {
  .masthead__grid,
  .pdp__grid,
  .order__grid,
  .split,
  .split--even { grid-template-columns: 1fr; }
  .pdp__info,
  .summary--sticky { position: static; }
  .expect { grid-template-columns: 1fr; }
}

@media (max-width: 46em) {
  .row2 { grid-template-columns: 1fr; }
  .line { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .line__price { grid-column: 2; text-align: start; margin-top: .5rem; }
  .buyrow .btn { flex: 1 1 100%; }
  /* the trailing rule collapses to a stub once the label wraps */
  .pdp__moment::after { display: none; }
  .gal__thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ photographs --- */

/* .shot multiplies into the paper, which is right for a cut-out render on
   white and wrong for a photograph: a real background would come out grey.
   Photographs carry their own field, so they blend normally and fill the
   figure edge to edge. */
.photo {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------- cart drawer --- */

/* Slides in from the reading edge — right in French, left in Arabic — so the
   checkout button lands where the thumb already is. Built from the same three
   colours as everything else: the panel is separated by a rule, not a shadow. */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
}
.drawer[data-open="true"] { visibility: visible; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(31, 32, 35, .44);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(26.5rem, 100%);
  background: var(--paper);
  border-inline-start: 1px solid var(--ink);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  transform: translateX(100%);
  transition: transform .34s var(--ease);
}
.drawer__panel:focus { outline: 0; }
.drawer[data-open="true"] .drawer__panel { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 1.75rem);
  border-bottom: 1px solid var(--ink);
}
.drawer__title {
  margin: 0;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.drawer__close {
  background: none;
  border: 0;
  padding: 0;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-48);
  transition: color .2s var(--ease);
}
.drawer__close:hover { color: var(--red); }

.drawer__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline: clamp(1.25rem, 4vw, 1.75rem);
}
.drawer__empty {
  padding-block: 3rem;
  text-align: center;
  color: var(--ink-48);
}

.drawer__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule-2);
  align-items: start;
}
.drawer__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.25;
}
.drawer__sub {
  margin: .25rem 0 0;
  font-size: .75rem;
  color: var(--ink-48);
}
.drawer__ctl {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.drawer__price {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
  margin: 0;
}

/* The stepper is the cart page's, one size down to fit the panel. */
.qty--sm { height: 2.5rem; }
.qty--sm button { width: 2.25rem; font-size: 1rem; }
.qty--sm input { width: 2.5rem; }

.drawer__foot {
  padding: 1.25rem clamp(1.25rem, 4vw, 1.75rem);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink);
  display: grid;
  gap: .75rem;
}
.drawer__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 1.25rem;
}
.drawer__sum .num { font-variant-numeric: tabular-nums; }
.drawer__note {
  margin: 0;
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink-48);
}
.drawer__go { width: 100%; }
.drawer__alt {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink-64);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.drawer__alt:hover { color: var(--red); }

/* The page behind must not scroll while the panel is over it. */
.has-drawer, .has-drawer body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__scrim { transition: none; }
}

@media print {
  .topbar, .head, .btn, .link, .burger, .foot, .drawer { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   Arabic / RTL

   Arabic typography is its own craft, not a mirrored Latin one. Three rules
   drive everything below:
     · never track a connected script — letter-spacing stays at 0
     · Arabic needs more leading than Latin (1.8 body, 1.3–1.4 headings)
     · the smallest Latin label sizes are unreadable in Arabic, so they lift

   Hierarchy comes from weight and scale rather than a serif/sans split,
   because there is no honest Arabic counterpart to a Didone. Product names
   stay Latin and stay in Bodoni, so the brand reads the same in both trees.
   ========================================================================== */

:root {
  /* Swap these two lines to restyle the whole Arabic site. */
  --display-ar: "Tajawal", "Noto Sans Arabic", Tahoma, sans-serif;
  --sans-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}

[lang="ar"] {
  --serif: var(--display-ar);
  --sans: var(--sans-ar);
}

[lang="ar"] body {
  line-height: 1.8;
  font-size: 1.0625rem;   /* Plex Arabic reads a step larger than Inter */
}

/* Latin product names keep the brand face. */
[lang="ar"] .name,
[lang="ar"] .brand,
[lang="ar"] .langswitch[lang="fr"] { font-family: var(--serif-latin); }

/* --- no tracking, no capitals ------------------------------------------- */

[lang="ar"] * { letter-spacing: 0; }
[lang="ar"] .name { letter-spacing: .005em; }

[lang="ar"] .eyebrow,
[lang="ar"] .meta,
[lang="ar"] .link,
[lang="ar"] .btn,
[lang="ar"] .nav a,
[lang="ar"] .cartbtn,
[lang="ar"] .topbar,
[lang="ar"] .crumb,
[lang="ar"] .card__go,
[lang="ar"] .pdp__moment,
[lang="ar"] .pdp__label,
[lang="ar"] .actives__foot,
[lang="ar"] .panel__head,
[lang="ar"] .summary h2,
[lang="ar"] .summary__total b,
[lang="ar"] .expect__col h3,
[lang="ar"] .foot__col h3,
[lang="ar"] .foot__bot,
[lang="ar"] .field > label,
[lang="ar"] .ledger,
[lang="ar"] .pack__save,
[lang="ar"] .todo,
[lang="ar"] .slot__note,
[lang="ar"] .upsell__go,
[lang="ar"] .panel__legal h4,
[lang="ar"] .step__t { text-transform: none; }

/* --- scale: lift everything that was sized for Latin capitals ------------ */

[lang="ar"] .eyebrow,
[lang="ar"] .meta,
[lang="ar"] .card__go,
[lang="ar"] .foot__col h3,
[lang="ar"] .field > label,
[lang="ar"] .summary h2,
[lang="ar"] .expect__col h3,
[lang="ar"] .panel__legal h4,
[lang="ar"] .actives__foot,
[lang="ar"] .panel__head,
[lang="ar"] .summary__total b,
[lang="ar"] .pdp__label,
[lang="ar"] .upsell__go,
[lang="ar"] .pack__save,
[lang="ar"] .todo { font-size: .8125rem; font-weight: 600; }

[lang="ar"] .topbar,
[lang="ar"] .crumb,
[lang="ar"] .foot__bot,
[lang="ar"] .slot__note,
[lang="ar"] .pdp__moment { font-size: .875rem; }

[lang="ar"] .small,
[lang="ar"] .card__sub,
[lang="ar"] .field__hint,
[lang="ar"] .field__err,
[lang="ar"] .line__sub,
[lang="ar"] .summary__cash,
[lang="ar"] .foot__col a,
[lang="ar"] .foot__tag,
[lang="ar"] .foot__disc { font-size: .9375rem; line-height: 1.75; }

[lang="ar"] .nav a,
[lang="ar"] .cartbtn { font-size: 1rem; font-weight: 500; }
[lang="ar"] .btn { font-size: .9375rem; font-weight: 700; }
[lang="ar"] .link { font-size: .9375rem; font-weight: 500; }
[lang="ar"] .claims__d,
[lang="ar"] .step__d,
[lang="ar"] .pdp__sum,
[lang="ar"] .expect li,
[lang="ar"] .faq__a,
[lang="ar"] .rich p,
[lang="ar"] .prose p,
[lang="ar"] .prose li { font-size: 1rem; line-height: 1.8; }

/* --- display: weight carries the hierarchy ------------------------------- */

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { font-weight: 800; }
[lang="ar"] .d1 { font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.32; font-weight: 900; }
[lang="ar"] .d2 { font-size: clamp(2rem, 4.2vw, 3.5rem);     line-height: 1.34; font-weight: 900; }
[lang="ar"] .d3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem);  line-height: 1.38; font-weight: 800; }
[lang="ar"] .name { font-weight: 700; line-height: 1.15; }
[lang="ar"] .claims__t { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.5; font-weight: 800; }
[lang="ar"] .faq summary { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.55; font-weight: 700; }
[lang="ar"] .pdp__claim { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.6; font-weight: 700; }
[lang="ar"] .lede { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.85; }
[lang="ar"] .step__t { font-weight: 700; font-size: 1.0625rem; }
[lang="ar"] .channel h3,
[lang="ar"] .line__name,
[lang="ar"] .pack__item b { font-weight: 700; }

/* Index numerals stay Latin and monospaced-ish, as counters not words. */
[lang="ar"] .card__n,
[lang="ar"] .claims__n,
[lang="ar"] .step__n,
[lang="ar"] .assure__n { font-family: var(--sans-ar); font-size: .8125rem; font-weight: 600; }

/* --- bidi ---------------------------------------------------------------- */

/* The wordmark is Latin artwork and stays as drawn, left to right. */
[dir="rtl"] .brand img { direction: ltr; }

/* Prices, dosages and phone numbers stay in Western digits — Moroccan
   convention — and must not be reordered by the bidi algorithm. */
[lang="ar"] .num,
[lang="ar"] .price,
[lang="ar"] .pack__now,
[lang="ar"] .card__price,
[lang="ar"] .line__price,
[lang="ar"] .actives__row span,
[lang="ar"] .panel__row span { direction: ltr; unicode-bidi: isolate; }
[lang="ar"] .actives__row span,
[lang="ar"] .panel__row span,
[lang="ar"] .summary__row span { text-align: end; }

/* --- shapes with a genuine handedness ------------------------------------ */

[dir="rtl"] .corner {
  right: auto;
  left: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

[dir="rtl"] .select {
  background-position: left 1.15rem center, left .85rem center;
}

/* The stepper reads − … + in both directions. */
[dir="rtl"] .qty { flex-direction: row-reverse; }

/* inset-inline-end already puts the drawer on the left in Arabic, so it has to
   leave to the left as well — a logical property cannot flip a transform. */
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
[dir="rtl"] .drawer[data-open="true"] .drawer__panel { transform: none; }

[dir="rtl"] .slot__id { direction: ltr; }

@media (max-width: 46em) {
  /* iOS zooms any input under 16px, which loses the sale. */
  [lang="ar"] .input,
  [lang="ar"] .select,
  [lang="ar"] .textarea { font-size: 1.0625rem; }
  [lang="ar"] .nav a { font-size: 1.5rem; font-weight: 700; }
}

/* The Arabic headline occupies fewer lines than the French one; centring the
   hero columns keeps the void off the top of the copy. */
[lang="ar"] .hero__grid { align-items: center; }

/* Arabic fragments living inside the French tree — the regulatory line and
   the language switch — take the Arabic face rather than a system fallback. */
[lang="ar"]:not(html) .foot__disc,
.foot__disc[lang="ar"],
.panel__disc[lang="ar"],
.langswitch[lang="ar"] { font-family: var(--sans-ar); }
.foot__disc[lang="ar"] { font-size: .8125rem; line-height: 1.9; }
.langswitch[lang="ar"] { font-size: .9375rem; }