.page-stack {
  display: grid;
  /* Without an explicit track the implicit `auto` column is sized to
     min-content, so a wide horizontal rail drags the whole stack off-screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.cx-hero__title {
  max-width: 14ch;
}

@keyframes cx-line {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Above the fold, so it writes itself out on arrival rather than waiting for
   a scroll observer that will never fire for it. */
.cx-hero__inner > * {
  animation: cx-line 820ms var(--ease-out) both;
}

.cx-hero__inner > *:nth-child(1) { animation-delay: 100ms; }
.cx-hero__inner > *:nth-child(2) { animation-delay: 190ms; }
.cx-hero__inner > *:nth-child(3) { animation-delay: 280ms; }
.cx-hero__inner > *:nth-child(4) { animation-delay: 370ms; }
/* Opening hours belong up here with the invitation, not in a panel at the
   foot of the page: they are the answer to "will anyone actually reply?" */
.cx-hours {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.35rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-warm-gray);
}

.cx-hours__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(224, 204, 164, 0.78);
}

.cx-channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 76px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--transition-medium),
    background var(--transition-medium),
    transform var(--transition-fast);
}

.cx-channel__badge {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--gold-edge);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

.cx-channel__note {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--color-warm-gray);
}

.cx-channel__go {
  width: 18px;
  height: 18px;
  flex: none;
  color: rgba(224, 204, 164, 0.5);
  transition: transform 420ms var(--ease-out), color var(--transition-fast);
}

/* WhatsApp is how Algeria talks to a shop, so it is the one row that carries
   its own colour. Green, not gold: this is the only place on the site where a
   second accent earns its keep, because it is the colour the app itself is
   recognised by and recognition is the whole point of the row. */
.cx-channel--featured {
  border-color: rgba(37, 211, 102, 0.28);
  background:
    linear-gradient(180deg, rgba(37, 211, 102, 0.07), rgba(37, 211, 102, 0.02));
}

.cx-channel--featured .cx-channel__badge {
  border-color: rgba(37, 211, 102, 0.45);
  color: #4ee08a;
}

/* The green is the same one the WhatsApp row uses — this button opens that
   conversation, so it says so before it is pressed. */
.cx-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, #1da851, #25d366);
  color: #04240f;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-medium);
}

.cx-form__note {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--color-warm-gray);
}

@media (prefers-reduced-motion: reduce) {
  .cx-hero__inner > * { animation: none; }
  .cx-channel,
  .cx-channel__go,
  .cx-submit { transition: none; }
}

/* ── Floating-label field ─────────────────────────────────────── */
.field {
  position: relative;
  display: block;
}

.field__input {
  width: 100%;
  padding: 1.5rem 1rem 0.6rem;
  border-radius: 14px;
  border: 1px solid rgba(197, 164, 106, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f1ea;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px stops iOS Safari zooming on focus */
  line-height: 1.6;
  transition: border-color 220ms ease, background 99ms ease, box-shadow 99ms ease;
}

.field__input--area {
  min-height: 128px;
  padding-bottom: 1.75rem;
  resize: vertical;
}

.field__input::placeholder { color: transparent; }
.field__input:focus {
  outline: none;
  border-color: rgba(197, 164, 106, 0.55);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(197, 164, 106, 0.1);
}

/* Rests inside the field, lifts once there is something to label */
.field__label {
  position: absolute;
  inset-block-start: 0.95rem;
  inset-inline-start: 1rem;
  font-size: 0.95rem;
  color: rgba(200, 190, 175, 0.5);
  pointer-events: none;
  /* The page is RTL, so the label shrinks toward the right edge */
  transform-origin: right top;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), color 90ms ease;
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-0.7rem) scale(0.76);
  color: var(--color-gold-soft);
}

.field__count {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-end: 0.9rem;
  font-size: 0.72rem;
  color: rgba(200, 190, 175, 0.35);
  pointer-events: none;
}

.field__input.is-error {
  border-color: rgba(220, 110, 110, 0.65);
  background: rgba(220, 110, 110, 0.06);
}

.field__error {
  display: block;
  font-size: 0.82rem;
  color: #f38b8b;
}

/* `display:block` above outranks the [hidden] attribute, which left a stale
   validation error sitting above a successfully tracked order. */
.field__error[hidden] {
  display: none;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   Home
   ═══════════════════════════════════════════════════════════════════════════
   Phone first throughout. Every width query below adds to this; none of them
   rescues it.
   The one structural note worth keeping: `#app-main` carries a top padding for
   the benefit of every other page, and a hero that opens on a photograph has
   to start at the very top of the viewport or the picture reads as a banner
   pasted onto a page. The negative margin cancels exactly that padding — the
   two values are paired, so if `.site-main` changes, this changes with it.
   ═══════════════════════════════════════════════════════════════════════════ */
.home {
  margin-top: calc(var(--space-5) * -1);
}

@media (min-width: 769px) {
  .home {
    margin-top: calc(var(--space-6) * -1);
  }
}
@keyframes lx-crest-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes lx-frame-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes lx-hair-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The hero is above the fold, so it does not wait for a scroll observer that
   would never fire for it. It writes itself out on arrival instead. */
@keyframes lx-hero-line {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 600px) {
  .lx-hero__promises li {
    font-size: 0.82rem;
  }
}

/* ── Collection tabs ───────────────────────────────────────────────────────
   Not pills. A pill row reads as a filter bar on a marketplace; a set of words
   with a gold rule under the live one reads as the contents page of a
   catalogue, which is the register this shop is written in.
   The rail bleeds to both screen edges on a phone so a thumb can see there is
   more to the side, and hides its scrollbar because a visible one under four
   words looks like a mistake. */
.lx-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}

.lx-tab {
  position: relative;
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  /* 44px of height, which on a control this small has to be bought with
     padding rather than a min-height that would push the rule off the edge. */
  padding: 0.85rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-warm-gray);
  white-space: nowrap;
  transition: color var(--transition-medium);
  -webkit-tap-highlight-color: transparent;
}

/* The live marker. `transform` rather than width, so switching tabs never
   re-lays-out the row. */
.lx-tab::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  left: 0.9rem;
  bottom: -1px;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 420ms var(--ease-out);
}

.lx-tab.is-active {
  color: var(--color-ink);
}

.lx-tab.is-active::after {
  transform: scaleX(1);
}

.lx-tab:active {
  color: var(--color-gold-soft);
}

@media (hover: hover) {
  .lx-tile:hover {
    border-color: var(--gold-edge);
    background:
      radial-gradient(130% 120% at 92% 0%, rgba(201, 169, 97, 0.14), transparent 58%),
      linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  }
  .lx-tile:hover .lx-tile__go svg {
    transform: translateX(-4px);
  }
}

/* On a wide screen the plates sit two and then three across; the row layout
   inside each one is unchanged, so nothing is re-designed by the breakpoint. */
@media (min-width: 720px) {
  .lx-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .lx-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .home-editorial__grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
  }
}

@media (min-width: 700px) {
  .home-steps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 3.5rem);
    border-inline-start: 0;
  }

  .home-step {
    padding-inline-start: 0;
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }

  .home-step::before {
    display: none;
  }
}

@media (min-width: 1100px) {
  .home-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .home-step {
    padding-bottom: 0;
  }
}

@media (max-width: 400px) {
  .home-final__actions .btn {
    width: 100%;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   Everything above that moves without being asked to. The reveal system
   handles itself in system.css; these are the page's own entrances. */
@media (prefers-reduced-motion: reduce) {
  .lx-hero__inner > *,
  .lx-hero__promises,
  .lx-hero__frame,
  .lx-hero__hair {
    animation: none;
  }

  /* The crest must end drawn, never caught mid-stroke. */
  .lx-hero__stroke {
    animation: none;
    stroke-dashoffset: 0;
  }

  /* Same rule, and it was missed here. The lines of the hero carry no opacity
     of their own — they are invisible only for as long as the keyframe holds
     them there — so dropping the animation reveals them. The frame and the
     hairline are different: they set their resting state in the base rule and
     rely on the animation to undo it, so cancelling the animation stranded
     them. The frame simply never appeared for anyone browsing with Reduce
     Motion on, which on iOS is also what Low Power Mode turns on. */
  .lx-hero__frame {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .lx-hero__hair {
    animation: none;
    transform: scaleX(1);
  }

  .lx-tab::after,
  .lx-tile__go svg,
  .home-curated__grid {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-search,
  .shop-search__icon,
  .shop-search__clear {
    transition: none;
  }
}

.shop-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.shop-select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  width: 0.48rem;
  height: 0.48rem;
  border-inline-end: 1.6px solid rgba(243, 223, 184, 0.92);
  border-bottom: 1.6px solid rgba(243, 223, 184, 0.92);
  transform: translateY(-62%) rotate(45deg);
  pointer-events: none;
}

.shop-select-wrap .select {
  min-width: 9.5rem;
  padding: 0.72rem 1.15rem 0.72rem 1rem;
  padding-inline: 1rem 2.4rem;
  font-size: 0.92rem;
  appearance: none;
  background:
    radial-gradient(circle at 78% 28%, rgba(255, 241, 213, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(197, 164, 106, 0.20);
  color: #f2e1bf;
  border-color: rgba(197, 164, 106, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 226, 0.02),
    0 2px 6px rgba(0, 0, 0, 0.06);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.shop-select-wrap .select:hover,
.shop-select-wrap .select:focus-visible {
  border-color: rgba(197, 164, 106, 0.35);
  background:
    radial-gradient(circle at 78% 28%, rgba(255, 241, 213, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(197, 164, 106, 0.10), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 226, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ── Luxury custom dropdown ───────────────────────────────────── */
.lux-select {
  position: relative;
  outline: none;
  flex: 0 0 auto;
}

/* A gold ring breathes outward while the pointer rests here. It lives on the
   wrapper because the trigger clips its own overflow for the sweep. */
.lux-select::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(197, 164, 106, 0.55);
  opacity: 0;
  pointer-events: none;
}

.lux-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 10rem;
  min-height: 49px;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(197, 164, 106, 0.26);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition:
    border-color 328ms cubic-bezier(0.16, 1, 0.3, 1),
    background 328ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 328ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 328ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The same slow gold sweep the product cards use, so the pair feel related */
.lux-select__trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 34%,
    rgba(233, 213, 173, 0.22) 50%,
    transparent 66%
  );
  transform: translateX(-130%);
  transition: transform 504ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.lux-select:focus .lux-select__trigger,
.lux-select__trigger:hover {
  border-color: rgba(197, 164, 106, 0.58);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.26),
    0 0 22px rgba(197, 164, 106, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.lux-select__trigger:hover::after { transform: translateX(130%); }
/* Touch devices keep :hover after a tap, so the resting motion is opt-in */
@media (hover: hover) {
  .lux-select:not(.is-open):hover::before {
    animation: lux-halo 2600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }

  .lux-select__trigger:hover .lux-select__label {
    color: #fdf8ef;
    text-shadow: 0 0 18px rgba(233, 213, 173, 0.35);
  }

  .lux-select__trigger:hover .lux-select__chevron {
    transform: translateY(2px);
  }
}

@keyframes lux-halo {
  0% { opacity: 0.5; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.13); }
  100% { opacity: 0; transform: scale(1.13); }
}

.lux-select.is-open .lux-select__trigger {
  border-color: rgba(197, 164, 106, 0.62);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.3),
    0 0 26px rgba(197, 164, 106, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lux-select__label {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f5f1ea;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 328ms ease, text-shadow 189ms ease;
}

.lux-select__chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: rgba(218, 195, 154, 0.7);
  transition: transform 336ms cubic-bezier(0.16, 1, 0.3, 1), color 135ms ease;
}

.lux-select__chevron svg {
  width: 1rem;
  height: 1rem;
}

.lux-select__trigger:hover .lux-select__chevron {
  color: rgba(233, 213, 173, 0.95);
}

.lux-select.is-open .lux-select__chevron {
  transform: rotate(180deg);
  color: #e9d5ad;
}

.lux-select__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  min-width: 100%;
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(197, 164, 106, 0.24);
  /* Echoes the body gradient — same angle, same warm drift into the last stop */
  background: linear-gradient(
    160deg,
    rgba(13, 13, 14, 0.98) 0%,
    rgba(18, 18, 20, 0.98) 55%,
    rgba(26, 23, 21, 0.98) 100%
  );
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  /* Unveils like drawn silk rather than popping: the box is always the right
     size, the clip just uncovers it. Visibility is what hides it when closed. */
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round 20px);
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 240ms ease,
    clip-path 328ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 328ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 189ms;
}

/* The gold seam parts from the middle, like opening a jewellery box */
.lux-select__panel::before {
  content: "";
  position: absolute;
  inset-inline: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 213, 173, 0.55), transparent);
  transform: scaleX(0);
  transition: transform 365ms cubic-bezier(0.16, 1, 0.3, 1) 54ms;
}

/* One slow pass of light down the panel as it opens */
.lux-select__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(233, 213, 173, 0.09) 45%,
    transparent 90%
  );
}

.lux-select.is-open .lux-select__panel {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0 round 20px);
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 234ms ease,
    clip-path 384ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 384ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

.lux-select.is-open .lux-select__panel::before { transform: scaleX(1); }
.lux-select.is-open .lux-select__panel::after {
  animation: lux-sheen 552ms cubic-bezier(0.16, 1, 0.3, 1) 81ms;
}

@keyframes lux-sheen {
  0% { transform: translateY(-100%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.lux-select__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  transition: background 234ms ease, color 135ms ease;
}

/* A gold rule grows beside the row on hover — no text shift, unlike padding */
.lux-select__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #e9d5ad, rgba(233, 213, 173, 0.25));
  transform: translateY(-50%);
  transition: height 328ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lux-select__item:hover::before,
.lux-select__item.is-selected::before { height: 22px; }
.lux-select__item + .lux-select__item {
  margin-top: 4px;
}

/* Each option comes into focus a beat after the one before it */
.lux-select.is-open .lux-select__item {
  animation: lux-option-in 408ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(72ms + var(--i, 0) * 34ms);
}

@keyframes lux-option-in {
  from { opacity: 0; transform: translateY(9px); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

.lux-select__item:hover {
  background: rgba(255,255,255,0.075);
  color: #ffffff;
}

.lux-select__item.is-selected {
  background: linear-gradient(90deg, rgba(197, 164, 106, 0.2), rgba(197, 164, 106, 0.08));
  color: #f5f1ea;
  font-weight: 600;
}

/* A single gold bead marks the active choice */
.lux-select__item.is-selected::after {
  content: "";
  margin-inline-start: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e9d5ad;
  box-shadow: 0 0 8px rgba(233, 213, 173, 0.75);
}

.lux-select.is-open .lux-select__item.is-selected::after {
  animation: lux-bead 2600ms ease-in-out 900ms infinite;
}

@keyframes lux-bead {
  0%, 100% { box-shadow: 0 0 6px rgba(233, 213, 173, 0.45); }
  50% { box-shadow: 0 0 13px rgba(233, 213, 173, 0.95); }
}

.lux-select__item.is-selected:hover {
  background: linear-gradient(90deg, rgba(197, 164, 106, 0.26), rgba(197, 164, 106, 0.12));
}

@media (prefers-reduced-motion: reduce) {
  .lux-select__trigger,
  .lux-select__chevron,
  .lux-select__label,
  .lux-select__item,
  .lux-select__item::before,
  .lux-select__panel,
  .lux-select__panel::before { transition: none; }
  .lux-select__trigger::after { display: none; }
  .lux-select__trigger:hover { transform: none; }
  .lux-select__trigger:hover .lux-select__chevron { transform: none; }
  .lux-select:hover::before,
  .lux-select.is-open .lux-select__item,
  .lux-select.is-open .lux-select__panel::after,
  .lux-select.is-open .lux-select__item.is-selected::after { animation: none; }
}

.placeholder-page {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(197, 164, 106, 0.34);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.placeholder-page h1 {
  margin-top: 0;
  font-family: var(--font-heading);
}

/* Catalog loading / error states (RTL, mobile-first) */
.state-loading,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: clamp(2rem, 8vw, 3.5rem) 1rem;
}

.state-loading__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(197, 164, 106, 0.15);
  border-top-color: #c5a46a;
  border-radius: 50%;
  animation: state-spin 0.8s linear infinite;
}

@keyframes state-spin { to { transform: rotate(360deg); } }

.state-error {
  border-color: rgba(197, 106, 106, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .state-loading__spinner { animation: none; }
}

.kicker {
  color: rgba(218, 195, 154, 0.7);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.muted {
  color: rgba(185, 176, 164, 0.62);
}

.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: #aca394;
  font-size: 0.92rem;
}

.product-breadcrumb strong {
  color: #f5e3c1;
}

/* Toast */
.dn-toast {
  position: fixed;
  inset-inline: 1rem;
  bottom: 5.5rem;
  z-index: 400;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(197,164,106,0.25);
  background: rgba(13,13,15,0.97);
  color: #f4e1bf;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 90ms ease;
  text-align: center;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.dn-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT SHEET  (.co-*)
   A bottom sheet on the phone, a centred dialog from 640px. Mobile-first:
   every base rule here is the phone. The money lives in a pinned footer — it
   is the one number a buyer checks twice, and it should never require a
   scroll to find.
   ═══════════════════════════════════════════════════════════════════════ */
.co-overlay,
.pdp-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}

.pdp-checkout-overlay.is-open {
  pointer-events: all;
  visibility: visible;
}

.pdp-checkout-overlay.is-open .co-backdrop { opacity: 1; }
.co,
.co-sheet {
  --co-gold: #c5a46a;
  --co-gold-lt: #e8d5b0;
  --co-ink: rgba(236, 231, 222, 0.95);
  --co-dim: rgba(202, 193, 179, 0.6);
  --co-line: rgba(197, 164, 106, 0.16);
  --co-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 34rem;
  /* dvh so the sheet is not cut off by mobile browser chrome */
  max-height: 92dvh;
  background: linear-gradient(180deg, #17150f 0%, #121110 42%, #0e0d0c 100%);
  border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--co-line);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55);
  font-family: var(--font-body);
  color: var(--co-ink);
  /* Settled state is VISIBLE. The entrance is an animation played over the
     top, not a transition out of an invisible base.
     It used to be the other way round: opacity 0 in the base rule, lifted to 1
     only while a 220ms transition ran. Anything that stops that transition
     from completing — a backgrounded tab, a throttled renderer, iOS pausing
     animations while the keyboard or scroll momentum settles — left the panel
     at opacity 0 underneath a fully opaque overlay. The shopper taps "متابعة
     الطلب", the screen dims, and nothing is there. Written this way the panel
     cannot end up invisible: if the animation never runs, it is simply shown. */
  transform: none;
  opacity: 1;
}

.pdp-checkout-overlay.is-open .co-sheet {
  animation: co-sheet-in 320ms var(--co-ease);
}

/* Transform only — opacity is never animated on this panel.
   The first attempt at this fix animated opacity from 0, which is no safer
   than the transition it replaced: a frozen animation holds its first frame,
   so the sheet was still invisible. Animating only the rise means the worst
   case is a panel sitting 14px low at 98.5% scale — visible, readable and
   usable. The fade lives on the backdrop, where being stuck costs nothing. */
@keyframes co-sheet-in {
  from { transform: translateY(14px) scale(0.985); }
  to   { transform: none; }
}
.co-grab {
  width: 40px;
  height: 4px;
  margin: 0.6rem auto 0;
  border-radius: 999px;
  background: rgba(197, 164, 106, 0.28);
  flex: none;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.co-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem 0.75rem;
  flex: none;
}

.co-head__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--co-gold);
}

.co-head__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--co-gold-lt);
}
/* ── Scroll region ──────────────────────────────────────────────────────── */
.co-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.co-card {
  padding: 0.95rem 1rem;
  border: 1px solid var(--co-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
}

.co-card--order { padding: 0.55rem 0.7rem; }
.co-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--co-gold-lt);
}

.co-legend__n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(197, 164, 106, 0.14);
  border: 1px solid var(--co-line);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--co-gold);
}

/* ── Order lines ────────────────────────────────────────────────────────── */
.co-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem;
}
.co-line__img {
  display: block;
  width: 52px;
  height: 62px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.co-line__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}
.co-chip {
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--co-line);
  background: rgba(197, 164, 106, 0.07);
  font-size: 0.66rem;
  color: var(--co-dim);
}

.co-input.is-error {
  border-color: rgba(226, 132, 132, 0.85);
  background: rgba(214, 122, 122, 0.07);
}

.co-input.is-error:focus { box-shadow: 0 0 0 3px rgba(214, 122, 122, 0.2); }

.co-hint,
.co-err {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  line-height: 1.6;
}

.co-hint { color: rgba(214, 205, 190, 0.75); }
.co-err { display: none; color: #e99696; font-weight: 500; }
.co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  /* Fields grow downward when their validation message appears; anchoring at
     the top keeps the pair's top edges fixed as that happens. */
  align-items: start;
}
/* The bureau picker sits under the wilaya/commune pair, not inside it. */
.co-field--desk { margin-top: 0.85rem; }

.co-seg__pill {
  position: absolute;
  inset-block: 0.3rem;
  inset-inline-start: 0.3rem;
  width: calc(50% - 0.5rem);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(197, 164, 106, 0.22), rgba(197, 164, 106, 0.1));
  border: 1px solid rgba(197, 164, 106, 0.34);
  transition: transform 300ms var(--co-ease);
}
.co-seg__sub { font-size: 0.66rem; opacity: 0.75; }

/* ── Pinned money footer ────────────────────────────────────────────────── */
.co-foot {
  flex: none;
  padding: 0.65rem 1.15rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--co-line);
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.9), #0e0d0c 60%);
}
.co-sum__label { font-size: 0.71rem; color: var(--co-dim); }
.co-sum__value {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.co-sum__value.is-pending { color: rgba(202, 193, 179, 0.45); font-size: 0.72rem; }

.co-sum__row--grand .co-sum__label { font-size: 0.82rem; color: var(--co-ink); font-weight: 600; }
.co-sum__value--grand {
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--co-gold-lt);
  line-height: 1.2;
}

/* A price that changes silently is a price the buyer distrusts. */
.co-sum__value.is-changed { animation: co-roll 320ms var(--co-ease); }
@keyframes co-roll {
  0% { opacity: 0; transform: translateY(-0.42em); }
  100% { opacity: 1; transform: none; }
}
@keyframes co-sheen {
  0%, 62% { transform: translateX(0); opacity: 0; }
  66% { opacity: 1; }
  100% { transform: translateX(340%); opacity: 0; }
}

.co-submit.is-loading { display: flex; align-items: center; justify-content: center; gap: 0.55rem; }
.co-submit.is-loading .co-submit__label { opacity: 0.75; }
.co-submit.is-loading .co-submit__spin { display: block; }

/* ── Order received ──────────────────────────────────────────────────────
   The quarter-second between the server saying yes and the page changing.
   It was unstyled: the form set `is-done` and nothing rendered it, so the
   button sat spinning until the route changed underneath her. The same gap
   existed on the product page's own button before the order moved in here,
   which is a good argument for the state living with the form rather than
   with whichever button happens to be driving it. */
.co-submit.is-done {
  background: var(--color-success);
  background-image: none;
  color: #08130c;
  cursor: default;
}

.co-submit.is-done .co-submit__spin { display: none; }
.co-submit.is-done::after { animation: none; opacity: 0; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.co-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  color: var(--co-dim);
}
/* ── Entrance ───────────────────────────────────────────────────────────
   Cards and lines rise as the sheet lands. Base state is the settled one, so
   a stalled animation leaves a usable form rather than an empty sheet. */
.pdp-checkout-overlay.is-open .co-card,
.pdp-checkout-overlay.is-open .co-line {
  animation: co-rise 300ms var(--co-ease) both;
}

.pdp-checkout-overlay.is-open .co-card:nth-of-type(2) { animation-delay: 40ms; }
.pdp-checkout-overlay.is-open .co-card:nth-of-type(3) { animation-delay: 80ms; }
.pdp-checkout-overlay.is-open .co-line { animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes co-rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

/* ── Tablet and up: a centred dialog, not a drawer ──────────────────────── */
@media (min-width: 640px) {

  .co-grab { display: none; }}

/* ── Tablet and up: a centred dialog, not a drawer ──────────────────────── */
@media (min-width: 640px) {
  .co-head { padding-top: 1.15rem; }
  .co-grid { grid-template-columns: 1fr 1fr; }
  .co-head__title { font-size: 1.35rem; }}

/* ── Reduced motion ─────────────────────────────────────────────────────
   Everything settles instantly; nothing here carries meaning. */
@media (prefers-reduced-motion: reduce) {
  .pdp-checkout-overlay.is-open .co-card,
  .pdp-checkout-overlay.is-open .co-line { animation: none; opacity: 1; transform: none; }}

/* ── Reduced motion ─────────────────────────────────────────────────────
   Everything settles instantly; nothing here carries meaning. */
@media (prefers-reduced-motion: reduce) {
  .co-sum__value.is-changed { animation: none; }
  .co-submit::after { animation: none; }
  .co-submit__spin { animation-duration: 1.4s; }
  .co-seg__pill { transition: none; }}

@media (min-width: 900px) {
  .dn-toast { bottom: 2rem; }
}

@media (min-width: 900px) {
  .home-luxe-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }

  .home-curated__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .home-journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .home-luxe-hero {
    padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.8rem, 5vw, 3.5rem);
  }

  .home-ring {
    width: 180px;
    height: 180px;
    inset-inline-end: 4%;
  }

  .home-curated__tabs {
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 0.35rem;
  }

  .home-curated__tab {
    flex: 0 0 auto;
  }

  .home-final-cta__actions .btn {
    width: 100%;
    text-align: center;
  }

  .detail-specs-grid {
    grid-template-columns: 1fr;
  }

  .shop-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }}

@media (max-width: 768px) {

  .shop-select-wrap {
    width: 100%;
  }

  .shop-select-wrap .select {
    width: 100%;
  }
}

/* Sections arrive as a cascade; the hero opts out and writes itself instead */
/* Opacity and transform only — see the note on `.home-reveal` above. */
.about-reveal > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 365ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 365ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--r, 0) * 50ms);
}

.about-reveal.is-visible > * {
  opacity: 1;
  transform: none;
}

.about-hero.about-reveal > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.about-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
}

.about-orb--one {
  inset-inline-start: -14%;
  top: 6%;
  width: 58vw;
  max-width: 380px;
  aspect-ratio: 1;
  background: rgba(197, 164, 106, 0.2);
}

.about-orb--two {
  inset-inline-end: -18%;
  bottom: 0;
  width: 52vw;
  max-width: 340px;
  aspect-ratio: 1;
  background: rgba(122, 96, 52, 0.24);
}

@keyframes about-orb-drift {
  0%, 100% { transform: none; }
  50% { transform: translate3d(7%, -6%, 0) scale(1.12); }
}

.about-hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 720px;
  margin-inline: auto;
}

/* Held back until the reveal fires, otherwise the lines paint once at full
   opacity and then blink out as the entrance animation takes over */
.about-hero__inner > * {
  opacity: 0;
}

.about-hero.is-visible .about-hero__inner > * {
  animation: about-rise 432ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.about-hero.is-visible .about-hero__inner > *:nth-child(1) { animation-delay: 36ms; }
.about-hero.is-visible .about-hero__inner > *:nth-child(3) { animation-delay: 81ms; }
.about-hero.is-visible .about-hero__inner > *:nth-child(4) { animation-delay: 114ms; }
/* Both animations must share one declaration, or the entrance shorthand
   above wins the cascade and the sheen never runs */
.about-hero.is-visible .about-hero__inner > .about-hero__title {
  animation:
    about-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both,
    about-title-sheen 7s linear 1100ms infinite;
}

@keyframes about-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

.about-hero__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: rgba(218, 195, 154, 0.85);
}

.about-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 9vw, 4rem);
  line-height: 1.3;
  color: #fdfaf4;
  background: linear-gradient(
    100deg,
    #fdfaf4 0%,
    #fdfaf4 38%,
    #f0dcae 50%,
    #fdfaf4 62%,
    #fdfaf4 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: about-title-sheen 7s linear infinite;
}

@keyframes about-title-sheen {
  from { background-position: 200% center; }
  to { background-position: -200% center; }
}

.about-hero__lead {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(0.94rem, 3.9vw, 1.08rem);
  line-height: 1.95;
  color: rgba(216, 205, 188, 0.78);
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 0.4rem;
}

.about-block__intro {
  margin-bottom: clamp(1.6rem, 6vw, 2.6rem);
}

.about-block__intro .section-title {
  position: relative;
  margin: 0.5rem 0 0;
  padding-bottom: 0.85rem;
}

.about-block__intro .section-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 195, 143, 0.95), transparent);
}

.about-reveal.is-visible .about-block__intro .section-title::after {
  animation: about-rule-draw 432ms cubic-bezier(0.16, 1, 0.3, 1) 117ms forwards;
}

@keyframes about-rule-draw {
  to { width: 74px; }
}

.about-statement__inner {
  width: min(100%, 760px);
  margin-inline: auto;
  text-align: center;
}

/* ── Pillars ───────────────────────────────────────────────────── */
.about-pillars__grid {
  display: grid;
  gap: 0.9rem;
}
.about-reveal.is-visible .about-pillar {
  animation: about-rise 365ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(117ms + var(--g, 0) * 58ms);
}

.about-pillar__title {
  margin: 0.5rem 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: #f6f1e7;
}

.about-pillar__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.95;
  color: rgba(206, 196, 182, 0.76);
}

/* ── Journey ───────────────────────────────────────────────────── */
.about-journey__list {
  position: relative;
  margin: 0;
  padding: 0;
  padding-inline-start: 2.7rem;
  list-style: none;
  display: grid;
  gap: 1.9rem;
}

.about-journey.is-visible .about-journey__list::before {
  animation: about-thread 600ms cubic-bezier(0.16, 1, 0.3, 1) 90ms forwards;
}

@keyframes about-thread {
  to { transform: scaleY(1); }
}

.about-journey__num {
  position: absolute;
  inset-inline-start: -2.7rem;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(197, 164, 106, 0.55);
  background: #141414;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  color: #e8d5ac;
  opacity: 0;
  transform: scale(0.5);
}

.about-journey.is-visible .about-journey__num {
  animation: about-dot 372ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(189ms + var(--g, 0) * 86ms);
}

@keyframes about-dot {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

.about-facts__list {
  width: min(100%, 1080px);
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.about-reveal.is-visible .about-facts__list li {
  animation: about-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(81ms + var(--g, 0) * 50ms);
}

/* ── Promise ───────────────────────────────────────────────────── */
.about-promise__inner {
  max-width: 660px;
}

.about-promise__inner .section-title {
  position: relative;
  margin: 0.5rem 0 1rem;
}

.about-final__inner {
  position: relative;
  overflow: hidden;
  width: min(100%, 1080px);
  margin-inline: auto;
  padding: clamp(2.4rem, 10vw, 4.5rem) clamp(1.3rem, 6vw, 3rem);
  text-align: center;
  border: 1px solid rgba(197, 164, 106, 0.22);
  border-radius: 1.5rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(197, 164, 106, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, #1c1b19 0%, #111110 100%);
}

/* ── Wider screens ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  .about-facts__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .about-pillars__grid { grid-template-columns: repeat(3, 1fr); }
  .about-facts__list { grid-template-columns: repeat(4, 1fr); }
  .about-journey__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding-inline-start: 0;
    padding-top: 2.9rem;
  }

  /* On a wide screen the thread runs across the steps, not down them */
  .about-journey__list::before {
    inset-block: auto;
    inset-inline: 0.75rem;
    top: 0.75rem;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(224, 195, 143, 0.85),
      rgba(197, 164, 106, 0.12));
    transform: scaleX(0);
    transform-origin: inline-start;
  }}

@media (min-width: 900px) {

  .about-journey.is-visible .about-journey__list::before {
    animation-name: about-thread-x;
  }

  @keyframes about-thread-x {
    to { transform: scaleX(1); }
  }}

@media (min-width: 900px) {

  .about-journey__num {
    inset-inline-start: 0;
    top: -2.9rem;
  }}

@media (prefers-reduced-motion: reduce) {
  /* These mirror the specificity of the rules that start the animations */
  .about-orb,
  .about-hero.is-visible .about-hero__inner > *,
  .about-hero.is-visible .about-hero__inner > .about-hero__title,
  .about-reveal.is-visible .about-block__intro .section-title::after,
  .about-reveal.is-visible .about-pillar,
  .about-reveal.is-visible .about-facts__list li,
  .about-journey.is-visible .about-journey__list::before,
  .about-journey.is-visible .about-journey__num {
    animation: none;
  }}

@media (prefers-reduced-motion: reduce) {

  .about-reveal > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  /* Without animation nothing would ever reveal these */
  .about-hero__inner > * { opacity: 1; }
  .about-journey__list::before { transform: none; }
  .about-journey__num { opacity: 1; transform: none; }}

@media (prefers-reduced-motion: reduce) {
  .about-reveal.is-visible .about-block__intro .section-title::after { width: 74px; }}

@media (max-width: 560px) {
  .about-hero__actions .btn,
  .about-final__actions .btn { width: 100%; }
}

/* ── Categories Page ────────────────────────────────────────────── */
.cat-page { gap: var(--space-7); }
.cat-hero {
  text-align: center;
  padding: var(--space-6) 0 var(--space-4);
}

.cat-hero__title {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 600;
  color: #f5f1ea;
  line-height: 1.25;
}

.cat-hero__sub {
  margin: var(--space-3) 0 0;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(200,190,175,0.55);
  max-width: 38ch;
  margin-inline: auto;
  line-height: 1.8;
}

/* Category nav cards */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.cat-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(197, 164, 106, 0.16);
  background: linear-gradient(160deg, #1e1d21, #181719);
  text-decoration: none;
  transition: border-color 218ms ease, transform 126ms ease, box-shadow 126ms ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(197,164,106,0.07), transparent 55%);
  opacity: 0;
  transition: opacity 218ms ease;
}

.cat-card:hover {
  border-color: rgba(197, 164, 106, 0.38);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

.cat-card:hover::before { opacity: 1; }
.cat-card__icon {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(197,164,106,0.18);
  background: rgba(197,164,106,0.06);
  color: rgba(197,164,106,0.65);
}

.cat-card__icon svg { width: 1.5rem; height: 1.5rem; }
.cat-card__body { flex: 1; min-width: 0; }
.cat-card__count {
  margin: 0 0 0.2rem;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(195,163,107,0.5);
}

.cat-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #f5f1ea;
  line-height: 1.3;
}

.cat-card__sub {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: rgba(200,190,175,0.52);
}

.cat-card__tagline {
  margin: 0.35rem 0 0;
  font-size: 0.65rem;
  color: rgba(197,164,106,0.48);
  letter-spacing: 0.04em;
}

.cat-card__arrow {
  flex: 0 0 1.5rem;
  color: rgba(197,164,106,0.35);
  transition: transform 218ms ease, color 126ms ease;
}

.cat-card__arrow svg { width: 1.25rem; height: 1.25rem; }
.cat-card:hover .cat-card__arrow { transform: translateX(-4px); color: rgba(197,164,106,0.7); }
/* Per-category product sections */
.cat-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.cat-section__see-all {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 1.25rem;
  font-size: 0.8rem;
  text-decoration: none;
}

@media (max-width: 768px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { padding: 1.1rem 1rem; }
}

/* ── Wishlist Page ──────────────────────────────────────────────── */
.wl-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wl-header__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wl-count {
  font-size: 0.78rem;
  color: rgba(200,190,175,0.5);
  letter-spacing: 0.04em;
}

.wl-clear {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: rgba(200,190,175,0.4);
  cursor: pointer;
  transition: color 200ms ease;
  padding: 0;
}

.wl-clear:hover { color: rgba(220,130,130,0.8); }
.wl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  gap: 1rem;
}

.wl-empty__icon svg { width: 4rem; height: 4rem; }
.wl-empty__title {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 600;
  color: #f5f1ea;
}

.wl-empty__sub {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(200,190,175,0.55);
  max-width: 30ch;
  line-height: 1.7;
}

/* ── Order Success ──────────────────────────────────────────────── */
.checkout-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 860px) {
  .checkout-layout {
    grid-template-columns: 1fr 380px;
  }
}

.checkout-section { margin-bottom: var(--space-5); }
.checkout-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: #f5f1ea;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(197, 164, 106, 0.12);
}

.checkout-fields { display: grid; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(218, 195, 154, 0.75);
  letter-spacing: 0.02em;
}

.form-label--opt { opacity: 0.55; font-weight: 400; }
.form-input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(197, 164, 106, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f1ea;
  font-size: 0.92rem;
  transition: border-color 220ms ease, background 99ms ease;
  box-sizing: border-box;
}

.form-input::placeholder { color: rgba(218, 195, 154, 0.32); }
.form-input:focus {
  outline: none;
  border-color: rgba(197, 164, 106, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.form-select-wrap { position: relative; }
.form-select {
  appearance: none;
  padding-inline-start: 2rem;
  cursor: pointer;
}

.form-select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.9rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-inline-end: 1.5px solid rgba(218, 195, 154, 0.6);
  border-bottom: 1.5px solid rgba(218, 195, 154, 0.6);
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}

.form-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.6;
}

.form-error {
  font-size: 0.74rem;
  color: #f0b9b9;
}

.checkout-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin: 1.25rem 0;
}

.checkout-trust-pill {
  font-size: 0.72rem;
  color: rgba(218, 195, 154, 0.6);
  letter-spacing: 0.01em;
}

.checkout-submit {
  width: 100%;
  min-height: 52px;
  font-size: 0.95rem;
}

/* Summary */
.summary-card {
  position: sticky;
  top: 1rem;
  border: 1px solid rgba(197, 164, 106, 0.18);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #222226 0%, #1b1b1e 100%);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.summary-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f5f1ea;
  margin: 0 0 0.5rem;
}

.summary-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.summary-item__media {
  position: relative;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, #2e2a25, #1c1a18);
}

.summary-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.summary-item__placeholder {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(197,164,106,0.08), transparent);
}

.summary-item__qty {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(197, 164, 106, 0.9);
  color: #1a1815;
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
}

.summary-item__info { flex: 1; min-width: 0; }
.summary-item__name {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #f5f1ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-item__price {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: rgba(218, 195, 154, 0.7);
}

.summary-sep {
  height: 1px;
  background: rgba(197, 164, 106, 0.1);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(185, 175, 163, 0.8);
}

.summary-line--total {
  font-size: 0.96rem;
  color: #f5f1ea;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(197, 164, 106, 0.12);
}

.summary-line--total strong { font-weight: 700; color: #dac39a; }
.summary-free { color: #a7e4bd; font-size: 0.78rem; }
.summary-free-hint {
  font-size: 0.72rem;
  color: rgba(218, 195, 154, 0.5);
  text-align: center;
}
@keyframes os-orb-float { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,30px) scale(1.1); } }

@keyframes os-card-enter { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes os-ring-expand {
  0%   { opacity: 0.6; transform: scale(0.85); }
  70%  { opacity: 0.15; }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes os-check-draw { to { stroke-dashoffset: 0; } }
@keyframes os-spark-burst {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1.4) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(360deg); }
}
.os-copy.is-done {
  background: rgba(76,175,110,0.18);
  border-color: rgba(76,175,110,0.5);
  color: #8fe0ac;
  animation: os-copy-pop 312ms ease;
}

.os-copy.is-done .os-copy__icon--copy { display: none; }
.os-copy.is-done .os-copy__icon--done { display: inline-flex; }

@keyframes os-copy-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .os-copy.is-done { animation: none; }
}

@keyframes os-btn-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}

@keyframes os-btn-breathe {
  0%, 100% { box-shadow: 0 6px 18px rgba(197, 164, 106, 0.18); }
  50%      { box-shadow: 0 8px 26px rgba(197, 164, 106, 0.34); }
}
/* Barely there — anything stronger casts a brown film over the whole page */
.trk-glow {
  position: absolute;
  inset-block-start: -34%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: min(560px, 100%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(197, 164, 106, 0.05), transparent 60%);
  pointer-events: none;
  animation: trk-breathe 9s ease-in-out infinite;
}

@keyframes trk-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* A ringed mark to open the page, so it starts with a crest and not a form */
.trk-crest {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 62px;
  block-size: 62px;
  margin-block-end: 0.35rem;
  border-radius: 50%;
  color: var(--color-gold);
  border: 1px solid rgba(197, 164, 106, 0.3);
  background: var(--color-bg-elevated);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: trk-float 6s ease-in-out infinite;
}

@keyframes trk-orbit { to { transform: rotate(360deg); } }
@keyframes trk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Hairlines reaching out from the label, the way a title is ruled on a card */
.trk-kicker { position: relative; }
@keyframes trk-rule-out {
  from { inline-size: 0; opacity: 0; }
}

.trk-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 6.4vw, 2.75rem);
  line-height: 1.35;
  color: var(--color-ink);
}

/* Light travelling across the words, the way it does over foil */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .trk-title {
    background: linear-gradient(100deg,
      var(--color-ink) 24%,
      var(--color-gold-soft) 43%,
      #fff4de 50%,
      var(--color-gold-soft) 57%,
      var(--color-ink) 76%);
    background-size: 260% 100%;
    background-position: 145% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: trk-shine 8s ease-in-out 900ms infinite;
  }
}

@keyframes trk-shine {
  0%, 58%, 100% { background-position: 145% 0; }
  26%           { background-position: -45% 0; }
}

@keyframes trk-bracket {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: none; }
}

/* Digits read left-to-right, but stay under the label on this RTL page */
.trk-form .field__input {
  text-align: right;
  letter-spacing: 0.06em;
  padding-block: 1.6rem 0.7rem;
  /* Sunk into the panel rather than raised off it */
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(197, 164, 106, 0.16);
}

.trk-form .field__input:focus {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(197, 164, 106, 0.5);
  animation: trk-focus 372ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes trk-focus {
  from { box-shadow: 0 0 0 0 rgba(197, 164, 106, 0.4); }
  to   { box-shadow: 0 0 0 4px rgba(197, 164, 106, 0.1); }
}

.trk-form .btn--gold {
  position: relative;
  overflow: hidden;
  padding-block: 0.95rem;
  letter-spacing: 0.02em;
}

/* A sheen crosses the button once on hover */
.trk-form .btn--gold::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -45%;
  inline-size: 38%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  opacity: 0;
  pointer-events: none;
}

.trk-form .btn--gold:hover::after { animation: trk-sheen 408ms ease-out; }

@keyframes trk-spin { to { transform: rotate(360deg); } }
@keyframes trk-skel-sweep {
  from { background-position: calc(160% * var(--trk-dir, 1)) 0; }
  to   { background-position: calc(-160% * var(--trk-dir, 1)) 0; }
}

@keyframes trk-part-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Reaching the end of the journey earns a brighter gold, not another colour */
.trk-badge--delivered {
  border-color: rgba(197, 164, 106, 0.62);
  background: rgba(197, 164, 106, 0.2);
  color: #f3e3c4;
}

/* A closed order steps back rather than shouting in red */
.trk-badge--cancelled {
  border-color: rgba(187, 179, 168, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(187, 179, 168, 0.75);
}

.trk-badge--cancelled::after { display: none; }

@keyframes trk-seal {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* Resolving from soft to sharp, the way the page transitions do */
@keyframes trk-lux-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Good news burns brighter; a closed order recedes. Same gold either way. */
.trk-msg--good {
  --trk-msg-line: rgba(197, 164, 106, 0.34);
  --trk-msg-edge: var(--color-gold-soft);
  --trk-msg-title: #f3e3c4;
}

.trk-msg--bad {
  --trk-msg-line: rgba(187, 179, 168, 0.14);
  --trk-msg-edge: var(--color-gold-deep);
  --trk-msg-title: var(--color-warm-gray);
}

@keyframes trk-sheen {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-260% * var(--trk-dir, 1))); }
}
/* A completed leg pours downward, then keeps a slow current running through it */
.trk-step.is-done::before {
  background:
    linear-gradient(180deg,
      rgba(197, 164, 106, 0.65),
      rgba(255, 240, 210, 0.9) 45%,
      rgba(197, 164, 106, 0.28)) 0 0 / 100% 300%;
  transform-origin: top;
  animation:
    trk-rail 560ms ease-out calc(var(--trk-beat) + 200ms) both,
    trk-flow 4.5s ease-in-out calc(var(--trk-beat) + 900ms) infinite;
}

@keyframes trk-rail {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes trk-flow {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 0 100%; }
}

@keyframes trk-dot-in {
  from { opacity: 0; transform: scale(0.35); }
  to   { opacity: 1; transform: none; }
}

.trk-step.is-done .trk-step__dot {
  border-color: transparent;
  background: linear-gradient(150deg, #e8d3a6, var(--color-gold) 55%, #b8955c);
  color: #17130a;
}

.trk-step.is-done .trk-step__dot::after { border-color: rgba(197, 164, 106, 0.3); }
/* The tick draws itself once the dot has settled */
.trk-step.is-done .trk-step__dot svg path {
  stroke-dasharray: 26;
  animation: trk-check 328ms ease-out both;
  animation-delay: calc(var(--trk-beat) + 153ms);
}

@keyframes trk-check {
  from { stroke-dashoffset: 26; }
  to   { stroke-dashoffset: 0; }
}

/* The stage the order is on right now keeps a soft pulse */
.trk-step.is-active .trk-step__dot {
  border-color: transparent;
  background: linear-gradient(150deg, #e8d3a6, var(--color-gold) 55%, #b8955c);
  animation:
    trk-dot-in 640ms cubic-bezier(0.34, 1.32, 0.44, 1) calc(var(--trk-beat) + 110ms) both,
    trk-pulse 2.6s ease-out calc(var(--trk-beat) + 700ms) infinite;
}

.trk-step.is-active .trk-step__dot::after { border-color: rgba(197, 164, 106, 0.45); }

.trk-step.is-done .trk-step__label { color: var(--color-charcoal); }
.trk-step.is-active .trk-step__label {
  color: var(--color-gold-soft);
  font-size: 1.08rem;
}

.trk-step.is-done .trk-step__hint { color: rgba(185, 176, 164, 0.62); }

@keyframes trk-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes trk-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(197, 164, 106, 0.5),
      0 0 12px 0 rgba(197, 164, 106, 0.55);
  }

  70% {
    box-shadow:
      0 0 0 12px rgba(197, 164, 106, 0),
      0 0 12px 0 rgba(197, 164, 106, 0.2);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(197, 164, 106, 0),
      0 0 12px 0 rgba(197, 164, 106, 0.55);
  }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .trk-row--grand strong:last-child {
    background: linear-gradient(100deg,
      var(--color-gold-soft) 30%,
      #fff2d6 50%,
      var(--color-gold-soft) 70%) 145% 0 / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: trk-shine 7s ease-in-out 1.4s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trk-glow,
  .trk-crest,
  .trk-crest::before,
  .trk-title,
  .trk-skel,
  .trk-skel__head,
  .trk-skel__block,
  .trk-skel__row,
  .trk-result > *,
  .trk-result > .trk-msg,
  .trk-msg__mark,
  .trk-msg__title,
  .trk-msg__line,
  .trk-msg::before,
  .trk-step,
  .trk-step.is-done::before,
  .trk-step__dot,
  .trk-step.is-active .trk-step__dot,
  .trk-step.is-done .trk-step__dot svg path,
  .trk-item,
  .trk-form .field__input:focus,
  .trk-row--grand strong:last-child {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }}

@media (prefers-reduced-motion: reduce) {
  .trk-msg::after,
  .trk-badge::after,
  .trk-form .btn--gold::after { display: none; }}

@media (prefers-reduced-motion: reduce) {
  .trk-step.is-done .trk-step__dot svg path { stroke-dasharray: none; }
}

/* The order-status CTA shimmers and breathes forever. This sits last in the
   file so it outranks the rule that switches those loops on. */
@media (prefers-reduced-motion: reduce) {
  .co-submit,
  .os-btn-primary {
    animation: none;
    background-position: 50% center;
  }
}

.pp-hero__inner .lx-eyebrow::before {
  content: "";
  width: clamp(1.5rem, 6vw, 2.75rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to right, var(--color-gold), transparent);
}

.pp-hero__inner .lx-lead {
  max-width: 46ch;
}

@keyframes pp-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Last-updated stamp ──────────────────────────────────────────────────── */
.pp-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--gold-hairline);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: rgba(224, 204, 164, 0.82);
}
.tc-kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tc-gold);
  background: rgba(197, 164, 106, 0.09);
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

.tc-title {
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 6.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 0.75rem 0 0;
  color: var(--tc-gold-lt);
}

.tc-lede {
  max-width: 34rem;
  margin: 0.85rem auto 0;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--tc-ink-dim);
}

.tc-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--tc-ink-dim);
}

.tc-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid var(--tc-line);
  border-radius: 16px;
  background: var(--tc-card);
  transition: border-color 328ms var(--tc-ease), transform 189ms var(--tc-ease);
}
.tc-art {
  padding: 1.35rem 1.2rem;
  border: 1px solid var(--tc-line);
  border-radius: 18px;
  background: var(--tc-card);
}

.tc-art__badge {
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--tc-line);
  background: rgba(197, 164, 106, 0.08);
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tc-gold);
}

.tc-code {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  border: 1px solid var(--tc-line);
  background: rgba(0, 0, 0, 0.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  color: var(--tc-gold-lt);
  overflow-wrap: anywhere;
}

/* ── Closing card ────────────────────────────────────────────────────────── */
.tc-cta {
  margin-top: 1.75rem;
  padding: 2rem 1.35rem;
  text-align: center;
  border: 1px solid var(--tc-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(197, 164, 106, 0.1), transparent 65%),
    var(--tc-card);
}

/* ── Scroll reveal ───────────────────────────────────────────────────────
   Only active once .tc--anim is set by JS, so the page is readable if the
   script never runs. */
.tc--anim .tc-reveal {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 384ms var(--tc-ease) var(--d, 0ms),
    transform 384ms var(--tc-ease) var(--d, 0ms);
}

.tc--anim .tc-reveal.is-in { opacity: 1; transform: none; }
.tc--anim .tc-art.is-in .tc-art__badge::after { transform: translateX(120%); }
@keyframes tc-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes tc-stamp {
  0% { opacity: 0; transform: scale(1.9) rotate(-14deg); }
  55% { opacity: 1; transform: scale(0.93) rotate(3deg); }
  78% { transform: scale(1.04) rotate(-1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes tc-halo {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.13); }
}

@keyframes tc-spin { to { transform: rotate(360deg); } }
@keyframes tc-gem {
  from { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes tc-live {
  0% { box-shadow: 0 0 0 0 rgba(107, 191, 122, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(107, 191, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 191, 122, 0); }
}

/* ── Unwind the panel shell ─────────────────────────────────────────────── */
.co--inline {
  display: block;
  /* the shared token block carries the popup's 34rem cap; in the page the
     panel decides the width, not the form */
  max-width: none;
  max-height: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  font-family: var(--font-body);
  color: var(--co-ink);
}

/* The page header already says what this is. */
.co--inline .co-head { display: none; }
.co--inline .co-scroll {
  overflow: visible;
  padding: 0;
  gap: 0.7rem;
}

.co--inline .co-foot {
  padding: 0.9rem 0 0;
  margin-top: 0.7rem;
  background: none;
  border-top: 1px solid rgba(197, 164, 106, 0.16);
}

.co--inline .co-card {
  background: rgba(255, 255, 255, 0.03);
}

/* The order line repeats what is already on the page above, so it stays a
   quiet confirmation of size, colour and quantity rather than a second hero. */
.co--inline .co-card--order { background: rgba(0, 0, 0, 0.18); }
.co--inline .co-line__img { width: 40px; height: 48px; }
/* The photo is already the biggest thing on the page, directly above. Here the
   line only needs to confirm size, colour and quantity. */
.co--inline .co-line__name { font-size: 0.8rem; }
.co--inline .co-sum__value--grand { font-size: 1.35rem; }
.co--inline .co-submit { min-height: 54px; font-size: 1rem; }
/* Entrance is owned by the page's reveal system out here, not by an overlay. */
.co--inline .co-card,
.co--inline .co-line { animation: none; opacity: 1; transform: none; }
@media (min-width: 640px) {
  .co--inline .co-scroll { gap: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — ORDER FLOW REFINEMENT
   One path: see it → want it → choose it → say who you are → order.
   ═══════════════════════════════════════════════════════════════════════════
   The order area was four levels of nested surfaces deep: the .pdp-checkout
   card held three .co-card panels, each holding bordered inputs, one of which
   held a segmented control with its own sliding pill. Every level drew its own
   border, radius and tint, so the eye had to cross four frames to reach a
   field — boxes inside boxes, and the page read as crowded rather than calm.
   Inside the page there is already one card: .pdp-checkout. So the panels
   within it stop being cards and become sections, separated by space and a
   hairline instead of by another frame. Nothing moves and nothing is removed —
   there is simply one frame where there were four.
   Scoped to .co--inline. The cart sheet is a floating dialog with its own
   scroller, where the cards genuinely are the structure; it keeps them. */
.co--inline .co-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* A hairline where a border used to be a box: the same separation, a quarter
   of the visual weight. */
.co--inline .co-card + .co-card {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(197, 164, 106, 0.14);
}

/* The basket recap keeps a faint surface — it is a summary of something
   chosen elsewhere, not a step to fill in, and needs to read as distinct. */
.co--inline .co-card--order {
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
}

/* Section headings carry the structure now that the frames are gone, so they
   need a little more presence than they had inside a titled box. */
.co--inline .co-legend {
  margin-bottom: 0.7rem;
  font-size: 0.98rem;
}
.co-chip { font-size: 0.72rem; }
.co-legend__n { font-size: 0.74rem; }
/* The delivery-method sub-labels ("يصلك إلى بابك") sat at 10.6px — the
   smallest visible text in the order flow, explaining the choice above it. */
.co-seg__sub { font-size: 0.72rem; }
/* ── Phone floor: 12px ──────────────────────────────────────────────────
   The floor above (~11.5px) was set against a desktop viewport. Re-measured
   on a real 320px touch device, these labels still land at 10.5–11.8px, and
   Arabic diacritics and joins are the first thing to go. Phones get 12px;
   desktop keeps the finer scale, which reads correctly at its own distance. */
@media (hover: none) and (pointer: coarse) {
  .co-head__kicker,
  .co-seg__sub,
  .co-chip,
  .co-legend__n,
  .kicker,
  .pc-badge,
  /* The redesign's shared small type. `.lx-eyebrow` alone replaced five
     per-page kicker classes that were each listed here separately —
     `.home-hero__kicker`, `.cx-hero__kicker`, `.pp-kicker`, `.cx-social__label`
     and the mobile dock's labels, none of which exist any more. */
  .lx-eyebrow,
  .lx-tile__index,
  .lx-tile__go,
  .lx-hero__promises li,
  .faq-group__title,
  /* The product page keeps its own copy of this floor, at the foot of
     pdp.css. That sheet is linked after this one, so a floor written here
     would be overruled by the page's own font sizes — a media query adds no
     specificity, only order. */
  /* Anything that carries information the shopper acts on: validation errors,
     field hints, the money column, the reassurance line under the buy button,
     and the section eyebrows that say where you are. These sit in flowing text
     with room to grow, so a floor costs nothing but legibility. */
  .co-err,
  .co-hint,
  .co-trust,
  .co-sum__label,
  .co-sum__value,
  .field__count,
  .cx-form__note,
  .cx-hours__label,
  .cx-channel__note,
  /* "الأسرع" over the WhatsApp row. It sat with the ornamental stamps below
     on the assumption that it was one, but it is an Arabic word the shopper
     reads to choose a channel, and it is a padded pill with no fixed width or
     height — so it grows to fit rather than bursting. At 9.6px it was the
     smallest Arabic on the page. */
  .cx-channel__badge,
  /* "آخر تحديث · …" — when the policy last changed, which is the one date a
     legal page is obliged to make legible. Another free-growing pill, and it
     sat at 11.84px: under the floor by a hair, but under it. `.tc-stamp` is
     the same stamp on the terms page and was sitting at 11.52px. */
  .pp-stamp,
  .tc-stamp,
  /* "المادة 01", "المادة 02" — the article headings a reader navigates a
     legal document by. These were on the excluded list as ornamental
     numerals, but each one is an Arabic word carrying a number, in a pill
     that grows to fit, and they were the smallest type on the page at
     10.56px. */
  .tc-art__badge,
  .tc-code,
  .ft-copy,
  .mega-panel__label,
  .about-hero__kicker,
  .tc-kicker,
  /* "للأعلى" — the back-to-top label in the footer, on every page */
  .ft-totop span {
    font-size: 0.75rem;
  }}
/* ── Phone floor: 12px ──────────────────────────────────────────────────
   The floor above (~11.5px) was set against a desktop viewport. Re-measured
   on a real 320px touch device, these labels still land at 10.5–11.8px, and
   Arabic diacritics and joins are the first thing to go. Phones get 12px;
   desktop keeps the finer scale, which reads correctly at its own distance. */
@media (hover: none) and (pointer: coarse) {

  /* Deliberately NOT raised: .lx-numeral, .about-journey__num, .pp-sec__num.
     Those are ornamental numerals sized to fit inside fixed circles —
     .about-journey__num sits in a 12×12 one — and inflating them would burst
     the shape. None of them is text the shopper has to read: they are bare
     figures, "01" and "02", with no word attached. */
  /* The generic `input { font-size: max(16px, 1rem) }` in base.css loses to
     class-level rules on specificity, so this one stayed under 16px and iOS
     zoomed the page the moment it was tapped, on every visit to the shop.
     Matched here. The product page's quantity box is handled in pdp.css. */
  .shop-search__input {
    font-size: max(16px, 1rem);
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   FAQ  (.faq-*)
   ═══════════════════════════════════════════════════════════════════════════
   Rows on hairlines, grouped by what the shopper is actually worrying about.
   No boxes: eight bordered cards stacked down a phone is a form, not a page of
   answers.
   ═══════════════════════════════════════════════════════════════════════════ */
.faq {
  padding-bottom: clamp(1rem, 5vw, 2rem);
}

.faq-hero__inner .lx-eyebrow::before {
  content: "";
  width: clamp(1.5rem, 6vw, 2.75rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to right, var(--color-gold), transparent);
}

.faq-hero__inner .lx-lead {
  max-width: 44ch;
}

.about-hero__title,
.about-section__title,
.about-pillar__title,
.about-journey__title {
  letter-spacing: normal;
  word-spacing: 0.08em;
}

.about-hero__lead,
.about-pillar__body,
.about-journey__body {
  font-size: var(--fs-body);
  line-height: 1.95;
  color: rgba(236, 233, 226, 0.72);
}

.about-kicker,
.about-hero__kicker {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  color: var(--color-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE — la maison
   ═══════════════════════════════════════════════════════════════════════════
   A campaign told in frames, with the merchandise threaded through it.

   Four decisions carry the whole look, and they are the four things the
   houses this is drawn from actually do — none of them is an effect:

   1 · TYPE AT TWO SIZES, NOTHING BETWEEN. A display line at 12vw and a label
       at 0.62rem tracked to 0.32em. The gap between them is the hierarchy.
       Medium type is what makes a page read as a template.

   2 · SQUARE CORNERS, NO SHADOW, NO FILL. Every photograph is cropped square
       and every control is a rule or an outline. A rounded corner or a soft
       shadow is the crop of a phone app.

   3 · THE PHOTOGRAPH IS THE PAGE. Sections are full-bleed by default; the
       margin is the exception, used to set a caption *off* an image rather
       than on it.

   4 · SPACE INSTEAD OF ORNAMENT. There is no divider, no card, no chip. What
       separates two sections is distance.

   Written at 375px first. The wider rules only give this layout room — there
   is no separate desktop composition.

   Motion: opacity and transform only, so every entrance stays on the
   compositor and a scroll costs nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

.mz-page {
  display: flow-root;
  background: var(--color-bg);
}

.mz-h2 {
  margin: 0.55rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink);
}

/* ── The two controls ─────────────────────────────────────────────────────-
   An outlined block for the action, a ruled word for everything else. No
   filled pill anywhere: a solid gold capsule is the one shape that would
   drag this page back to a template. */
.mz-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: none;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out);
}

.mz-cta:active {
  background: #fff;
  color: #0a0a0b;
}

.mz-cta--line {
  border-color: var(--gold-edge);
  color: var(--color-gold-soft);
}

.mz-cta--line:active {
  background: var(--color-gold);
  color: #0a0a0b;
}

/* The hit area runs wider than the word.
   "الكل" is four characters, so the link was 21px across — tall enough at
   44px, but a target a thumb has to aim at. The overlay widens what the
   finger hits while the underline stays tight to the text, which is the same
   trick `.about-hero__link` and `.lx-link` use for their height. */
.mz-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--color-gold-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-edge);
  align-self: flex-start;
}

.mz-link::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -0.7rem;
}

/* ── Section rhythm ───────────────────────────────────────────────────────-
   Distance is the only divider on this page. */
.mz-head {
  padding-inline: var(--gutter);
  margin-bottom: 1.5rem;
}

.mz-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

/* ── 1 · Hero ─────────────────────────────────────────────────────────────-
   One frame, full screen, and three things on it. */
.mz-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* svh: `vh` on both mobile browsers is the address-bar-retracted height, so
     100vh puts the action below the screen it is meant to sit on.
     And then MINUS the chrome above it, which is the half this was missing:
     the hero does not start at the top of the screen, it starts under the
     header and the announcement strip. At a full 100svh the section ended one
     header-height past the fold and took its button with it -- measured at
     390x844 (button 73px under), at 1024x768 (173px under) and at 375x667
     (18px under). `--header-h` is published on :root by the header from its
     own offsetHeight, so this follows the strip being switched off. */
  min-height: calc(100svh - var(--header-h, 76px));
  max-height: 960px;
  padding: 0 var(--gutter) calc(3rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  isolation: isolate;
}

.mz-hero__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0d0d10;
}

.mz-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  display: block;
}

/* The wash. Type on an unwashed photograph is legible until the day somebody
   uploads a pale garment. Two stops, so the top of the frame stays a
   photograph rather than becoming a gradient. */
/* The slides, stacked. Two <picture> elements swapping roles, so any number
   of photographs needs exactly two elements and only one is ever in flight.

   Absolutely positioned, so a slide takes no part in layout and cannot shift
   anything. Opacity only — no transform, no filter, no blur — so the fade
   stays on the compositor and never touches layout or paint. 500ms, because
   the panels were stripped of long animations for a reason and the storefront
   is not the place to reintroduce them. */
.mz-hero__pic {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms linear;
  /* The fade is the only thing that changes; tell the compositor so. */
  will-change: opacity;
}

.mz-hero__pic.is-on { opacity: 1; }

/* The first slide is painted before any script runs — it is the LCP element
   and must not wait for a class to be toggled onto it. */
.mz-hero__pic--lead { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* No crossfade at all: the lead slide stays, the rest are never shown.
     Nothing is downloaded for a fade that does not happen. */
  .mz-hero__pic { transition: none; }
  .mz-hero__pic:not(.mz-hero__pic--lead) { display: none; }
}

.mz-hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 6, 8, 0.5) 0%, rgba(6, 6, 8, 0) 30%),
    linear-gradient(0deg, rgba(6, 6, 8, 0.9) 0%, rgba(6, 6, 8, 0.45) 32%, rgba(6, 6, 8, 0) 66%);
}

.mz-hero--plain .mz-hero__frame {
  background:
    radial-gradient(ellipse at 50% 34%, rgba(201, 169, 97, 0.12), transparent 62%),
    #0b0b0d;
}

.mz-hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  width: 100%;
}

.mz-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 11vw, 4.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: #fff;
  text-wrap: balance;
}

.mz-hero__body .mz-cta {
  margin-top: 0.4rem;
}

/* ── The hero on a short phone ───────────────────────────────────────────
   100svh puts the button on the last line of the first screen, which is
   correct on a tall phone and cramped on a short one: on a 667px iPhone SE
   the title, the button and the safe-area inset share 100% of the screen
   with nothing below them, so there is no sign that the page continues.

   Nothing here crops the photograph or shrinks the type. The frame gives up
   a tenth of its height, which lifts the button clear of the bottom edge and
   lets the top of the next section show — the only cue a shopper has that
   there is more to scroll to. */
@media (max-width: 767px) and (max-height: 740px) {
  .mz-hero {
    /* The screen MINUS the chrome above it, which is the mistake 100svh was
       making: the header and the announcement strip are 121px on a 667px
       phone, so a 100svh hero put its button 18px below the fold -- measured,
       not assumed. `--header-h` is published on :root by the header itself
       from its own offsetHeight, so this stays correct when the shop turns
       the announcement strip off.

       The 1.5rem is breathing room under the button, and what lets the top of
       the next section show: the only cue that the page continues. */
    /* A little further still on a short phone, where the difference between
       "the button is on screen" and "the button is the last thing on screen"
       is the whole of whether the page looks like it continues. */
    min-height: calc(100svh - var(--header-h, 76px) - 1.5rem);
    padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
  }

  .mz-hero__body { gap: 0.9rem; }
}

/* ── 4/5 · The rails ──────────────────────────────────────────────────────-
   Swiped, and they snap. A rail is how a phone reads a row of garments; a
   grid is how a desktop does. */
.mz-rail-wrap {
  padding-block: 1rem 3.5rem;
}

.mz-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76vw;
  gap: 0.9rem;
  overflow-x: auto;
  /* Stops a swipe that runs off the end from turning into an Android
     back-gesture or an iOS rubber-band on the page behind. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mz-rail::-webkit-scrollbar { display: none; }

.mz-rail__cell {
  scroll-snap-align: start;
  min-width: 0;
}

/* The card, set the way a house sets one. */
.mz-rail .pc-frame,
.mz-rail .pc-media,
.mz-rail .pc-slide,
.mz-rail .pc-media__img,
.mz-rail .pc-media__placeholder {
  border-radius: 0;
}

.mz-rail .pc-media { aspect-ratio: 3 / 4; }

.mz-rail .pc-wish,
.mz-rail .pc-quickadd {
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.mz-rail .pc-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.mz-rail .pc-body {
  gap: 0.25rem;
  padding-top: 0.9rem;
}

.mz-rail .pc-name {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  min-height: 0;
  color: rgba(248, 247, 244, 0.94);
}

/* The caption is set small on purpose, which takes its tap target down with
   it. The padding restores the target; the negative margin gives the space
   back to the layout so the caption's rhythm is unchanged. */
.mz-rail .pc-name a {
  display: inline-block;
  padding-block: 0.85rem;
  margin-block: -0.85rem;
}

.mz-rail .pc-price {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--color-warm-gray);
}

.mz-rail .pc-price--old {
  font-size: 0.7rem;
  color: rgba(169, 162, 154, 0.5);
}

.mz-rail .pc-cta {
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--gold-hairline);
  border-radius: 0;
  padding-inline: 0.65rem;
  background: none;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-soft);
  align-self: flex-start;
}

/* ── 9 · Close ────────────────────────────────────────────────────────────- */
.mz-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78svh;
  padding: 4rem var(--gutter) calc(4rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.mz-close__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b0b0d;
}

.mz-close__wash {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.72);
}

.mz-close__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.mz-close__line {
  color: #fff;
}

.mz-close__track {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

/* ── Wider screens ────────────────────────────────────────────────────────-
   The phone layout is the design. These only give it room — there is no
   second composition to maintain. */
@media (min-width: 900px) {
  .mz-campaign {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: 7rem 6rem;
  }

  .mz-campaign__media { margin-inline: 0; }

  .mz-campaign__body {
    margin-top: 0;
    padding-inline: 0;
    padding-inline-end: var(--gutter);
  }

  .mz-campaign__body .mz-display { text-shadow: none; color: var(--color-ink); }

  .mz-plates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }

  /* A sideways swipe is a phone gesture. On a desktop the garments lie down
     as a grid instead. */
  .mz-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 2.25rem 1.5rem;
    overflow-x: visible;
    scroll-snap-type: none;
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }

  .mz-editorial {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding-block: 6rem;
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  .mz-editorial__media { margin-inline: 0; }

  .mz-editorial__body {
    padding-inline: 0;
    padding-top: 0;
  }

  .mz-head,
  .mz-maison {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }

  .mz-maison__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
  }

  .mz-promo { padding-block: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-cta { transition: none; }
  .mz-rail { scroll-behavior: auto; }
}

/* ── 3 · Assurance ────────────────────────────────────────────────────────
   Three lines, and nothing else. This replaced a four-row specification
   block and, above it, an editorial section — 1300px between them to say
   what fits here in three lines a shopper reads without stopping. */
.mz-assure {
  padding: 2.75rem var(--gutter) 3rem;
  border-block: 1px solid var(--line);
  background: #08080a;
}

.mz-assure__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mz-assure__list li {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}

.mz-assure__list li:last-child {
  border-bottom: 0;
}

.mz-assure__list span {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: rgba(236, 233, 226, 0.88);
}

/* The closing photograph fills its section rather than sitting in a ratio
   box — the section's own height is what holds the space, so there is still
   nothing for a late image to shift. */
.mz-close__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

@media (min-width: 700px) {
  .mz-assure {
    padding-block: 4rem;
  }

  .mz-assure__list {
    flex-direction: row;
    gap: 3rem;
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  .mz-assure__list li {
    flex: 1;
    border-bottom: 0;
    border-inline-end: 1px solid var(--line);
  }

  .mz-assure__list li:last-child {
    border-inline-end: 0;
  }
}

/* ── Masthead ─────────────────────────────────────────────────────────────- */
.bt-masthead {
  padding: 2.25rem var(--gutter) 1.5rem;
}

.bt-masthead__count {
  margin: 0.5rem 0 0;
  min-height: 1em;     /* holds its line so the shelves never jump up */
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--color-gold-soft);
}

/* ── Shelves ──────────────────────────────────────────────────────────────
   Words on a rule, not pills. A row of filled capsules is a filter bar on a
   marketplace; a row of words with the live one underlined is a contents
   page. The rail bleeds to both screen edges so a thumb can see there is
   more to the side. */
.bt-shelves {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 var(--gutter) 0.25rem;
  margin-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bt-shelf {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: 0;
  /* See `.bt-shelf::before` below: the hit area is widened there rather than
     with padding, so the active chip's underline stays the width of its own
     word. */
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: rgba(200, 192, 182, 0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 220ms var(--ease-out);
}

.bt-shelf.is-on {
  color: var(--color-ink);
}

.bt-shelf.is-on::after {
  transform: scaleX(1);
}

/* ── The bar ──────────────────────────────────────────────────────────────
   It scrolls with the page. It used to stick under the header, and that was
   wrong twice over:

     · it sat 20px in from each screen edge, so garments scrolled past in the
       gaps either side of it
     · its background was 92% opaque over a blur, so the garments underneath
       showed faintly *through* it as well

   Together those read as a bar that had come loose from the page. A sticky
   element has to be opaque and full-bleed or it looks broken — and on a shelf
   this size it was buying nothing: the whole page is barely two screens, so
   the search and the ordering are never more than a flick away.

   Dropping it also drops a `backdrop-filter`, which is the most expensive
   thing a phone can be asked to composite on every scroll frame. */
.bt-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-inline: var(--gutter);
  border-block: 1px solid var(--line);
}

.bt-bar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 0.75rem;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(236, 233, 226, 0.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

.bt-bar__btn.is-on {
  color: var(--color-gold-soft);
}

/* ── Search ───────────────────────────────────────────────────────────────- */
.bt-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem var(--gutter) 0;
  border-bottom: 1px solid var(--gold-hairline);
}

/* ── The grid ─────────────────────────────────────────────────────────────
   Two to a row. One garment per row turns eight products into eight screens
   of scrolling; two keeps a shelf readable as a shelf, which is what a
   shopper is here to browse. */
.bt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 0.9rem;
  padding: 1.75rem var(--gutter) 0;
}

/* The card, set the way a house sets one: square crop, bare controls, a
   caption quieter than the garment. */
.bt-cell .pc-frame,
.bt-cell .pc-media,
.bt-cell .pc-slide,
.bt-cell .pc-media__img,
.bt-cell .pc-media__placeholder {
  border-radius: 0;
}

.bt-cell .pc-media {
  aspect-ratio: 3 / 4;
}

.bt-cell .pc-wish,
.bt-cell .pc-quickadd {
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.bt-cell .pc-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.bt-cell .pc-body {
  gap: 0.2rem;
  padding-top: 0.8rem;
}

.bt-cell .pc-name {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.6;
  min-height: 0;
  color: rgba(248, 247, 244, 0.94);
}

/* The caption is set small on purpose, which takes its tap target down with
   it. The padding restores the target; the negative margin returns the space
   to the layout so the caption's rhythm is unchanged. */
.bt-cell .pc-name a {
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}

.bt-cell .pc-price {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--color-warm-gray);
}

.bt-cell .pc-price--old {
  font-size: 0.68rem;
  color: rgba(169, 162, 154, 0.45);
}

.bt-cell .pc-cta {
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--gold-hairline);
  border-radius: 0;
  padding-inline: 0.65rem;
  background: none;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: var(--color-gold-soft);
  align-self: flex-start;
}

/* ── Load more, and the empty shelf ───────────────────────────────────────- */
.bt-more {
  display: flex;
  justify-content: center;
  padding: 2.5rem var(--gutter) 0;
}

.bt-sheet.is-open .bt-sheet__scrim { opacity: 1; }

.bt-sheet.is-open .bt-sheet__panel { transform: none; }

.bt-sheet__title {
  margin: 0 0 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--color-gold-soft);
}

.bt-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(236, 233, 226, 0.85);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bt-sort__mark {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.bt-sort.is-on {
  color: var(--color-gold-soft);
}

.bt-sort.is-on .bt-sort__mark {
  opacity: 1;
  transform: none;
}

/* ── Wider screens ────────────────────────────────────────────────────────
   The phone layout is the design; these give it room. */
@media (min-width: 600px) {
  .bt-grid,
  .bt-grid--ghost {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.75rem 1.5rem;
  }
}

@media (min-width: 900px) {
  .bt-masthead,
  .bt-shelves,
  .bt-bar,
  .bt-search,
  .bt-grid,
  .bt-more {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
    padding-inline: 0;
  }

  .bt-masthead { padding-block: 4rem 2rem; }

  .bt-grid,
  .bt-grid--ghost {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.25rem 1.75rem;
  }

  .bt-bar__btn {
    flex: none;
    justify-content: flex-start;
    padding-inline: 1.25rem;
  }

  .bt-bar__btn:first-child { padding-inline-start: 0; }
}

/* ── The card's call to action ───────────────────────────────────────────
   The same object as the product page's button, quieter.

   On a grid of garments the button must not compete with the photographs —
   twenty filled gold rectangles is a page of buttons with clothes between
   them. So the card's CTA rests as a word on a gold hairline, and becomes
   the solid gold of the product page only under a cursor or a thumb. The
   hierarchy that gives is: the picture, then the name, then the price, then
   the ask.

   The fill is a child element scaled on `transform`, not a `width` or a
   `background-position` transition. Scaling a layer is compositor work;
   animating a width is layout, on every card the grid is showing, on every
   frame of the hover. On a phone that difference is the whole scroll. */
.pc-cta--buy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms var(--ease-soft), transform 130ms var(--ease-soft);
}

.pc-cta__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #f0e2c4 0%, var(--color-gold-soft) 46%, #d3b98c 100%);
  /* Grows from the inline start, the direction the page reads. */
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--ease-out);
}

.pc-card:dir(ltr) .pc-cta__fill { transform-origin: left center; }

.pc-cta__word {
  position: relative;
  display: inline-block;
  transition: transform 200ms var(--ease-soft);
}

/* The tap. A press has to answer immediately or the card feels dead, so the
   fill arrives fast on `:active` and the whole control gives a little. */
.pc-cta--buy:active {
  transform: scale(0.97);
  color: #17140d;
}

.pc-cta--buy:active .pc-cta__fill {
  transform: scaleX(1);
  transition-duration: 140ms;
}

.pc-cta--oos {
  opacity: 0.45;
  cursor: default;
}

/* ── The card's CTA under a cursor ───────────────────────────────────── */
@media (hover: hover) {
  .pc-cta--buy:hover {
    color: #17140d;
    border-bottom-color: transparent;
  }

  .pc-cta--buy:hover .pc-cta__fill { transform: scaleX(1); }

  /* The word steps in from the rule it was sitting on. */
  .pc-cta--buy:hover .pc-cta__word { transform: translateX(-2px); }
  .pc-card:dir(ltr) .pc-cta--buy:hover .pc-cta__word { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-cta--buy,
  .pc-cta__fill,
  .pc-cta__word { transition: none; }
}

/* ── Phone floor, part two: the product card in its contexts ─────────────
   The floor above lists `.pc-badge`, `.pc-price` and the rest as bare
   classes. That is specificity 0,1,0 — and the homepage rail and the
   bestseller grid restyle the same elements as `.mz-rail .pc-badge` and
   `.bt-cell .pc-price`, which is 0,2,0 and wins no matter which sheet comes
   last. So on a phone the shop grid was rendering the price at 11.8px, the
   discount badge at 9.0px and the word inside the buy button at 10.2px,
   while the floor that was supposed to prevent exactly that sat one
   specificity point below and never applied.

   Measured on a 360px Android, which is the narrowest screen this shop sees.
   These selectors match the overrides point for point, and this block sits
   at the foot of the sheet: equal specificity is settled by source order,
   and the overrides it answers live as far down as line 6189.

   The card's tap target is unaffected: `.pc-cta` keeps its `min-height: 44px`
   and only the label inside it grows. */
@media (hover: none) and (pointer: coarse) {
  .mz-rail .pc-name,
  .mz-rail .pc-price,
  .mz-rail .pc-price--old,
  .mz-rail .pc-badge,
  .mz-rail .pc-cta,
  .bt-cell .pc-name,
  .bt-cell .pc-price,
  .bt-cell .pc-price--old,
  .bt-cell .pc-badge,
  .bt-cell .pc-cta {
    font-size: 0.75rem;
  }

  /* The price is the figure the whole card is built around, and in the
     bestseller grid it had been sized identically to the product name. It
     leads again.

     0.85rem is 13.6px against a name and a struck price both sitting on the
     12px floor — 1.6px of difference to carry the one number a shopper scans
     a grid by. 0.92rem is 14.7px, which reads as the heading of the card
     without touching the floor under everything else. */
  .mz-rail .pc-price,
  .bt-cell .pc-price {
    font-size: 0.92rem;
  }

  /* Single-class labels the first floor missed: the rail's "الكل" link, the
     grid's piece count, the sheet title and the "more" button. */
  .mz-link,
  .mz-close__track,
  .bt-masthead__count,
  .bt-sheet__title,
  .bt-more__btn,
  /* "بحث" and "الأحدث" — the two controls the shop is browsed with. Their
     labels are unclassed spans inheriting from the button, so the floor has
     to land on `.bt-bar__btn` itself. */
  .bt-bar__btn {
    font-size: 0.75rem;
  }

  /* "اكتشفي المجموعة" — the first call to action on the site, and it sat at
     11.5px under 0.22em of tracking, which is where Arabic joins start to
     close up. The button's own 52px height is unchanged. */
  .mz-cta {
    font-size: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customer reviews (.rv-*)
   ═══════════════════════════════════════════════════════════════════════════

   Written for a 360px phone held in one hand and widened from there. Not a
   desktop layout with breakpoints subtracted: the rail, the star row and the
   full-width button are the phone design, and the two `min-width` rules at the
   bottom are the only concession to a larger screen.

   Three rules this block keeps to, the same three the home page keeps to:

   1. Every target a thumb aims at clears 44px, and the stars clear 56 — a
      mis-tap on a star is a wrong review, not a retry.
   2. Only opacity and transform ever animate. No height, no top, nothing that
      makes a phone re-lay-out a list while a finger is on it.
   3. Nothing is measured in px where a phone would rather it were fluid: the
      type uses the same clamp() scale as the rest of the shop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stars ──────────────────────────────────────────────────────────────── */
.rv-stars {
  display: inline-flex;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  line-height: 1;
}
.rv-stars--sm { font-size: 0.8rem; }

/* ── The card ───────────────────────────────────────────────────────────── */
.rv-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem 1.15rem 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(201, 169, 97, 0.14);
  border-radius: 14px;
}
.rv-card__text {
  margin: 0;
  font-size: clamp(0.92rem, 0.88rem + 0.4vw, 1.02rem);
  line-height: 1.85;
  color: var(--color-charcoal);
  overflow-wrap: anywhere;
}
/* On the home rail every card is the same height whatever was written, so the
   rail cannot jolt as it fills and a long review cannot become the section. */
.rv-card__text--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rv-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
}
.rv-card__who { color: var(--color-ink); font-weight: 600; }
/* The badge is the whole feature. Gold, because on this shop gold means
   "this is the part that matters". */
.rv-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  color: var(--color-gold);
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 999px;
}
.rv-card__age { margin-inline-start: auto; color: var(--color-warm-gray); }

/* ── The summary ────────────────────────────────────────────────────────── */
.rv-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
}
.rv-summary__score {
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.2rem);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1;
}
.rv-summary__of { font-size: 0.78rem; color: var(--color-warm-gray); }
.rv-summary__count {
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-warm-gray);
}

/* ── The home section ───────────────────────────────────────────────────── */
.rv-home { padding: clamp(2.2rem, 1.6rem + 3vw, 3.4rem) 0 0; }
.rv-home__head {
  display: grid;
  gap: 0.5rem;
  padding-inline: 1rem;
  margin-bottom: 1rem;
}
.rv-home__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  font-weight: 500;
  color: var(--color-ink);
}

/* The rail. Native scroll-snap does the swiping: no library, no touch
   handlers, nothing of ours in the gesture path — which is why it feels like
   the phone rather than like a website. The edge padding lets the first and
   last card sit clear of the screen edge while still snapping. */
.rv-rail {
  display: flex;
  gap: 0.75rem;
  padding: 0.2rem 1rem 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rv-rail::-webkit-scrollbar { display: none; }
.rv-rail__item {
  flex: 0 0 clamp(250px, 78vw, 320px);   /* two and a half cards on a phone */
  scroll-snap-align: start;
  display: flex;
}
.rv-rail__item > .rv-card { width: 100%; }

.rv-home__acts,
.rv-page__acts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.4rem 1rem 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.rv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;              /* thumb-sized, not the 44px floor */
  padding: 0 1.2rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rv-btn:active { transform: scale(0.985); }
.rv-btn--primary {
  color: #14110b;
  background: var(--color-gold);
}
.rv-btn--ghost {
  color: var(--color-gold);
  background: transparent;
  border-color: rgba(201, 169, 97, 0.3);
}
.rv-btn[disabled] { opacity: 0.6; cursor: default; }

/* ── The pages ──────────────────────────────────────────────────────────── */
.rv-page { padding: 1.25rem 0 3rem; }
.rv-page__head { display: grid; gap: 0.6rem; padding: 0 1rem 1.2rem; }
.rv-page__title {
  margin: 0;
  font-size: clamp(1.45rem, 1.2rem + 1.4vw, 1.95rem);
  font-weight: 500;
  color: var(--color-ink);
}
.rv-page__sub {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--color-warm-gray);
}
.rv-rate__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;                 /* larger than the 44px floor, on purpose */
  font-size: 2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.rv-rate__star.is-on { color: var(--color-gold); }
.rv-chip.is-on {
  color: var(--color-gold);
  border-color: rgba(201, 169, 97, 0.45);
  background: rgba(201, 169, 97, 0.08);
}

@keyframes rv-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-btn, .rv-rate__star { transition: none; }
}

/* ── Wider screens ──────────────────────────────────────────────────────────
   The only two rules here that a phone does not use. The rail becomes a grid
   because a swipe is a phone gesture and a mouse should not have to make it,
   and the actions sit side by side because a 1000px-wide button is not a
   button anybody designed. */
@media (min-width: 768px) {
  .rv-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    overflow: visible;
  }
  .rv-rail__item { flex: initial; }
  .rv-home__acts,
  .rv-page__acts { flex-direction: row; justify-content: center; }
  .rv-btn { min-width: 220px; }}