/* ==========================================================================
   LE BENIC — The Ritual (ritual.html) — the product page

   One still stage under the fixed header, back to front:
     r-vignette    the stage's quiet edge darkening
     r-buy         the lit bottle + purchase controls
     r-info        the sales composition (beside the bottle; below the stage on phones)
     r-veil        the opening fade
   Then the sticky purchase bar (r-bar) once the stage has scrolled away.
   ========================================================================== */

.ritual {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--ink);
}
/* wide screens: the stage is the whole page, so the footer starts a little below the fold —
   its dissolve (footer.js) then begins only once the reader scrolls, never over ADD TO CART at rest */
@media (min-width: 761px) and (min-aspect-ratio: 9/10) {
  .ritual { margin-bottom: clamp(64px, 12vh, 140px); }
}

.r-stage {
  position: absolute;
  inset: calc(var(--header-h) + var(--header-edge)) 0 0 0;
  overflow: hidden;
  contain: layout paint;
  background: #090a08;
}

.r-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 84% 80% at 50% 48%, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   The product and its purchase controls — no container. The bottle is the hero of the
   stage, separated from the dark only by its light:
     • its own light: a studio key from the LEFT baked into bottle-studio.webp
     • an atmospheric pocket behind it (.r-buy__aura) with a faint warm lift on its lit side,
       reaching zero long before its box ends, so it has no visible shape
   − 1 + and ADD TO CART sit beneath the bottle.
   -------------------------------------------------------------------------- */
.r-stage { --buy-shift: clamp(52px, 4.2vw, 84px); }  /* ≈ 2 cm left of centre on desktop */
.r-buy {
  position: absolute;
  left: calc(50% - var(--buy-shift));
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 26px);
}
.r-buy__aura {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(92vw, 1500px);
  height: 150%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 42% 44%,
      rgb(156 136 104 / 0.085) 0%, rgb(156 136 104 / 0.058) 22%, rgb(156 136 104 / 0.026) 46%, rgb(156 136 104 / 0) 70%),
    radial-gradient(closest-side,
      rgb(9 10 8 / 0.72) 0%, rgb(9 10 8 / 0.7) 8%, rgb(9 10 8 / 0.64) 17%, rgb(9 10 8 / 0.55) 26%,
      rgb(9 10 8 / 0.44) 36%, rgb(9 10 8 / 0.32) 47%, rgb(9 10 8 / 0.21) 58%, rgb(9 10 8 / 0.12) 69%,
      rgb(9 10 8 / 0.055) 80%, rgb(9 10 8 / 0.015) 90%, rgb(9 10 8 / 0) 100%);
}
.r-buy__product {
  position: relative;
  margin: 0;
}
.r-buy__bottle {
  display: block;
  height: min(60vh, 640px);
  width: auto;
  max-width: none;
}
/* where it stands: a soft, wide contact shadow (no outline, no drop shadow) */
.r-buy__product::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3.5%;
  width: 300%;
  height: 9%;
  transform: translateX(-42%);
  z-index: -1;
  background:
    radial-gradient(closest-side at 58% 50%, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.5) 30%, rgb(0 0 0 / 0.22) 62%, rgb(0 0 0 / 0) 100%);
}
/* the floor catches a little of the key light just left of the base (reflected, very faint) */
.r-buy__product::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 130%;
  height: 6%;
  transform: translateX(-70%);
  z-index: -1;
  background: radial-gradient(closest-side, rgb(170 150 116 / 0.07) 0%, rgb(170 150 116 / 0.03) 55%, rgb(170 150 116 / 0) 100%);
  pointer-events: none;
}
/* the sales composition follows the product: --prod-x is the bottle's centre, --bottle-half its half width */
.ritual, .r-info-slot { --gold: #c59a5d; }  /* warm amber gold — aged gold in candlelight */
.r-stage {
  --prod-x: calc(50% - var(--buy-shift));
  --bottle-half: calc(min(60vh, 640px) * 0.16);
  --around: clamp(34px, 3.3vw, 64px);
  --zone-l-end: calc(var(--prod-x) - var(--bottle-half) - var(--around));
  --zone-r: calc(var(--prod-x) + var(--bottle-half) + var(--around));
  --zone-r-w: calc(100% - var(--zone-r) - var(--gutter));
}

/* --------------------------------------------------------------------------
   The sales composition. Palette inside the darkness: warm ivory + one warm amber gold.
   • the statement: ONE serif, one size, one colour — the sentence begins left of the bottle and
     resolves right of it on the same line of sight; only "quality of one." takes the gold
   • the benefits: five stepped lines right beside the bottle (left, right, left …), gold line icons
   • the philosophy: quiet, under the first half of the statement, revealed line by line (ritual.js)
   Legibility is local to the letters (a soft dark text shadow).
   -------------------------------------------------------------------------- */
.r-info {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  color: var(--bone);
  text-shadow: 0 0 26px rgb(5 6 4 / 0.75), 0 0 8px rgb(5 6 4 / 0.55), 0 1px 2px rgb(5 6 4 / 0.6);
}

/* the statement */
.r-info__statement {
  margin: 0;
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.15vw, 2.95rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bone);
}
.r-info__a,
.r-info__b { position: absolute; top: 8%; }
.r-info__a { right: calc(100% - var(--zone-l-end)); text-align: right; }
.r-info__b { left: var(--zone-r); text-align: left; }
.r-info__sl { display: block; white-space: nowrap; }
.r-info__gold { color: var(--gold); }

/* the philosophy — quiet; its right edge shares the statement's axis beside the bottle */
.r-info__philosophy {
  position: absolute;
  top: 33%;
  left: calc(var(--zone-l-end) - min(20rem, var(--zone-l-end) - var(--gutter)));
  width: min(20rem, calc(var(--zone-l-end) - var(--gutter)));
  font-size: clamp(13.5px, 0.95vw, 15.5px);
  line-height: 1.62;
  color: rgb(233 225 213 / 0.72);
}
.r-info__philosophy p + p { margin-top: clamp(7px, 1.2vh, 12px); }
.r-info__l { display: block; }
.r-info__philosophy .r-info__belief {
  margin: clamp(11px, 1.8vh, 18px) 0 clamp(4px, 0.6vh, 8px);
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.36em;
  line-height: 1.25;
  color: rgb(233 225 213 / 0.92);
}
/* the key ingredients, closing the philosophy column */
.r-info__found { margin-top: clamp(22px, 3.4vh, 36px); }
.r-info__philosophy p.r-info__kicker {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.r-info__philosophy p.r-info__ingredients {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3em;
  line-height: 1.2;
  color: rgb(233 225 213 / 0.9);
}
.r-info__dot { margin: 0 0.45em; opacity: 0.55; }

/* the benefits — one family of five, stepped beside the bottle */
.r-info__benefits {
  position: absolute;
  left: var(--zone-r);
  top: 30%;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 4.2vh, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-benefit {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.1vw, 20px);
}
.r-benefit:nth-child(even) { margin-left: clamp(30px, 3vw, 60px); }
.r-benefit__icon {
  flex: none;
  width: clamp(28px, 2.1vw, 40px);
  height: auto;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.r-benefit__icon circle[r="1.1"] { fill: var(--gold); stroke: none; }
.r-benefit__text {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: clamp(11.5px, 0.84vw, 14px);
  line-height: 1.45;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(236 228 214 / 0.96);
}
@media (min-width: 761px) and (min-aspect-ratio: 9/10) and (max-height: 760px) {
  .r-info__benefits { gap: 16px; }
  .r-benefit__icon { width: 26px; }
  .r-benefit__text { font-size: 11px; }
}

/* the message below the stage on phones and portrait tablets (moved there by ritual.js) */
.r-info-slot { background: linear-gradient(180deg, rgb(5 6 4) 0, #090a08 140px); } /* continues the stage's darker lower edge, no seam */
.r-info-slot:empty { display: none; }

.r-buy__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* the purchase row — name and size · price · − 1 + · ADD TO CART, divided by hairlines */
.r-buy__row {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.7vw, 28px);
  white-space: nowrap;
}
.r-buy__rule {
  flex: none;
  width: 1px;
  height: 30px;
  background: rgb(236 228 214 / 0.16);
}

/* − 1 + : small, secondary, the navigation's type */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--header-ivory);
  font-family: var(--font-nav);
}
.qty__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(236 228 214 / 0.22);
  color: rgb(236 228 214 / 0.85);
  transition: box-shadow 0.7s var(--ease-cine), color 0.7s var(--ease-cine), opacity 0.5s;
}
.qty__btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.qty__btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgb(236 228 214 / 0.55); color: var(--header-ivory); }
.qty__btn:disabled { opacity: 0.32; cursor: default; }
.qty__value {
  min-width: 2.2ch;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ADD TO CART: the site's capsule, centred, width steady while the label confirms */
.r-buy__add {
  --ground: var(--gold);
  --edge: rgb(0 0 0 / 0);
  min-width: 15.5em;
  justify-content: center;
  font-weight: 500;
  color: #17140e;
}
.r-buy__add:hover { --ground: #d0a86c; --edge: rgb(236 228 214 / 0.28); }
.r-buy__add .cta__label { transition: opacity 0.5s var(--ease-cine), translate 0.9s var(--ease-cine); }
.r-buy__add.is-added { --ground: #d6b47f; }
.r-buy__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* what is being bought — name in the navigation's type, the size in the serif under it */
.r-buy__id { text-align: left; }
.r-buy__name {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.28em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--header-ivory);
}
.r-buy__size {
  margin: 7px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1;
  color: rgb(236 228 214 / 0.7);
}
.r-buy__price {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--header-ivory);
}
.r-buy__price[hidden],
.r-buy__price[hidden] + .r-buy__rule { display: none; }
/* the fine print under the row */
.r-buy__fine {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgb(236 228 214 / 0.62);
}
.r-buy__fine span { white-space: nowrap; }
.r-buy__fine [hidden] { display: none; }
.r-buy__dot { opacity: 0.6; }
/* short laptop screens: the module must clear the header, so the reassurance line yields */
@media (min-width: 761px) and (max-height: 780px) {
  .r-buy__bottle { height: min(56vh, 600px); }
}

/* --------------------------------------------------------------------------
   The purchase bar — one dark line that follows the reader after the stage has
   scrolled away: name, size, (price), and the same gold ADD TO CART. Shown and hidden
   by ritual.js; it leaves again as the footer arrives. Never over the stage itself.
   -------------------------------------------------------------------------- */
.r-bar {
  --gold: #c59a5d;             /* the stage's gold, for the button (the bar lives outside the stage) */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;                 /* under the header (100) and the cart drawer (120), over the footer fade (88) */
  padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
  background: linear-gradient(to top, rgb(8 8 7 / 0.97), rgb(8 8 7 / 0.92));
  box-shadow: 0 -1px 0 rgb(236 228 214 / 0.08);
  transform: translate3d(0, 110%, 0);
  visibility: hidden;
  transition: transform 0.7s var(--ease-cine), visibility 0s linear 0.7s;
}
.r-bar.is-on {
  transform: none;
  visibility: visible;
  transition: transform 0.7s var(--ease-cine), visibility 0s;
}
.r-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, 100%);
  min-height: 62px;
  margin: 0 auto;
}
.r-bar__text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  margin: 0;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--header-ivory);
}
.r-bar__size { font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: 0; text-transform: none; color: rgb(236 228 214 / 0.7); }
.r-bar__price { letter-spacing: 0.1em; }
.r-bar__price[hidden] { display: none; }
.r-bar__add {
  --ground: var(--gold);
  --edge: rgb(0 0 0 / 0);
  flex: none;
  padding: 14px 26px 13px 27px;
  font-weight: 500;
  color: #17140e;
}
.r-bar__add:hover { --ground: #d0a86c; --edge: rgb(236 228 214 / 0.28); }
.r-bar__add.is-added { --ground: #d6b47f; }

/* --------------------------------------------------------------------------
   The opening fade
   -------------------------------------------------------------------------- */
.r-veil {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--ink);
  pointer-events: none;
  transition: opacity 1.6s var(--ease-cine), visibility 0s linear 1.6s;
}
.r-veil.is-gone { opacity: 0; visibility: hidden; }

/* --------------------------------------------------------------------------
   Small screens and portrait tablets (same test as ritual.js → layout "small"):
   the bottle alone on the stage, the sales composition continues below it.
   -------------------------------------------------------------------------- */
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .r-stage { --buy-shift: 0px; }
  .r-info-slot .r-info {
    position: relative;
    inset: auto;
    max-width: 30rem;
    margin: 0 auto;
    padding: clamp(56px, 10vh, 96px) var(--gutter) clamp(72px, 14vh, 128px);
    text-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  .r-info-slot .r-info__a,
  .r-info-slot .r-info__b,
  .r-info-slot .r-info__philosophy,
  .r-info-slot .r-info__benefits { position: static; inset: auto; width: auto; text-align: left; }
  .r-info-slot .r-info__a,
  .r-info-slot .r-info__b { display: block; }
  .r-info-slot .r-info__statement { font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
  .r-info-slot .r-info__sl { white-space: normal; }
  .r-info-slot .r-info__philosophy { margin-top: 40px; max-width: 21rem; font-size: 15.5px; color: rgb(233 225 213 / 0.76); }
  .r-info-slot .r-info__benefits { margin-top: 48px; gap: 24px; }
  .r-info-slot .r-benefit:nth-child(even) { margin-left: 34px; }
  .r-info-slot .r-benefit__icon { width: 32px; }
  .r-info-slot .r-benefit__text { white-space: normal; font-size: 12.5px; letter-spacing: 0.18em; }

  .r-buy { gap: clamp(12px, 2vh, 20px); }
  .r-buy__bottle { height: min(48vh, 440px); }
  .r-buy__aura { width: 170vw; }
  /* the same 30px circles, with a 44px touch area around them */
  .qty__btn { position: relative; }
  .qty__btn::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  .r-bar__inner { min-height: 66px; gap: 12px; }
  .r-bar__text { font-size: 10.5px; letter-spacing: 0.16em; gap: 10px; }
  .r-bar__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .r-bar__size { display: none; }                 /* the name needs the room; the size stays on the stage */
  /* the purchase row as a small grid: name + size | price, then − 1 + | ADD TO CART */
  .r-buy__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 16px; width: min(22rem, calc(100vw - 2 * var(--gutter))); }
  .r-buy__name { white-space: normal; line-height: 1.35; } /* a long name (PL, IS) takes two lines instead of pushing the price off screen */
  .r-buy__rule { display: none; }
  .r-buy__price { justify-self: end; }
  .r-buy__add { justify-self: end; min-width: 0; padding-inline: 28px; }
  .r-buy__fine { max-width: calc(100vw - 2 * var(--gutter)); font-size: 10.5px; }
  .r-bar__add { padding: 15px 20px 14px 21px; }
}
/* phones: VAT and delivery on their own lines, in every language — a "·" would otherwise
   hang at the end of the first line wherever the two parts wrap */
@media (max-width: 760px) {
  .r-buy__fine { flex-direction: column; align-items: center; gap: 5px; }
  .r-buy__dot { display: none; }
}
/* narrow phones (360px Androids, 320px iPhone SE, 280px folded phones): − 1 + and ADD TO CART no
   longer fit side by side, so the name takes the first line, − 1 + sits beside the price, and
   ADD TO CART spans the full width below */
@media (max-width: 374px) {
  .r-buy__row { grid-template-areas: "id id" "qty price" "add add"; gap: 18px 12px; }
  .r-buy__id { grid-area: id; }
  .r-buy__row .qty { grid-area: qty; justify-self: start; }
  .r-buy__price { grid-area: price; }
  .r-buy__add { grid-area: add; justify-self: stretch; padding-inline: 16px; }
  .r-bar__inner { gap: 10px; }
  .r-bar__add { padding-inline: 14px; }
}
/* the narrowest phones: the sticky bar keeps the price and ADD TO CART; the name is on the stage above */
@media (max-width: 359px) {
  .r-bar__name { display: none; }
}