.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);
}

/* ── Contact ──────────────────────────────────────────────────── */
.cx-page {
  gap: clamp(2.5rem, 9vw, 4.5rem);
  padding-bottom: clamp(3rem, 10vw, 5rem);
}

.cx-reveal > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--r, 0) * 110ms);
}

.cx-reveal.is-visible > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.cx-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 13vw, 6rem) var(--space-4) clamp(1rem, 4vw, 2rem);
  text-align: center;
}

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

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

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

.cx-orb--one {
  inset-inline-start: -12%;
  top: -8%;
  width: 56vw;
  max-width: 360px;
  aspect-ratio: 1;
  background: rgba(197, 164, 106, 0.2);
  animation: cx-orb-drift 18s ease-in-out infinite;
}

.cx-orb--two {
  inset-inline-end: -16%;
  bottom: -20%;
  width: 50vw;
  max-width: 320px;
  aspect-ratio: 1;
  background: rgba(122, 96, 52, 0.24);
  animation: cx-orb-drift 22s ease-in-out infinite reverse;
}

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

.cx-hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 620px;
  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 */
.cx-hero__inner > * {
  opacity: 0;
}

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

.cx-hero.is-visible .cx-hero__inner > *:nth-child(1) { animation-delay: 80ms; }
.cx-hero.is-visible .cx-hero__inner > *:nth-child(3) { animation-delay: 340ms; }

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

@keyframes cx-rise {
  from { opacity: 0; transform: translateY(24px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

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

.cx-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.95rem, 8.6vw, 3.6rem);
  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: cx-title-sheen 7s linear infinite;
}

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

.cx-hero__lead {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(0.92rem, 3.8vw, 1.04rem);
  line-height: 1.95;
  color: rgba(216, 205, 188, 0.76);
}

/* ── Shared frame ──────────────────────────────────────────────── */
.cx-block {
  width: min(100% - 2 * var(--space-4), 640px);
  margin-inline: auto;
}

.cx-empty { text-align: center; }

/* ── Channels ──────────────────────────────────────────────────── */
.cx-channels {
  display: grid;
  gap: 0.8rem;
}

.cx-reveal.is-visible .cx-channel {
  animation: cx-rise 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(120ms + var(--g, 0) * 130ms);
}

.cx-channel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-height: 84px;
  padding: 1.05rem 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(197, 164, 106, 0.18);
  background: linear-gradient(180deg, rgba(28, 27, 25, 0.86), rgba(19, 19, 20, 0.86));
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}

/* Gold light crossing the card on hover */
.cx-channel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(243, 223, 184, 0.12) 50%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cx-channel:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 195, 143, 0.55);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

.cx-channel:hover::before { transform: translateX(120%); }

.cx-channel:active { transform: translateY(-1px) scale(0.995); }

.cx-channel:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.cx-channel__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 1rem;
  background: rgba(197, 164, 106, 0.1);
  color: var(--color-gold-soft);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), background 320ms ease;
}

.cx-channel__icon svg {
  position: relative;
  width: 24px;
  height: 24px;
}

.cx-channel:hover .cx-channel__icon {
  transform: scale(1.08) rotate(-5deg);
  background: rgba(197, 164, 106, 0.2);
}

/* WhatsApp is the fastest route, so it carries its own colour and a live pulse */
.cx-channel--featured {
  border-color: rgba(37, 211, 102, 0.28);
}

.cx-channel--featured:hover {
  border-color: rgba(37, 211, 102, 0.6);
}

.cx-channel--featured::before {
  background: linear-gradient(115deg, transparent 0%, rgba(37, 211, 102, 0.14) 50%, transparent 100%);
}

.cx-channel--featured .cx-channel__icon {
  background: rgba(37, 211, 102, 0.13);
  color: #4ade80;
}

.cx-channel--featured:hover .cx-channel__icon {
  background: rgba(37, 211, 102, 0.22);
}

.cx-channel__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(74, 222, 128, 0.7);
  animation: cx-pulse 2600ms ease-out infinite;
}

@keyframes cx-pulse {
  0% { opacity: 0.75; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(1.45); }
}

.cx-channel__text {
  position: relative;
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.cx-channel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #f2e9d8;
}

.cx-channel__badge {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(37, 211, 102, 0.12);
  font-size: 0.6rem;
  font-weight: 500;
  color: #86efac;
}

.cx-channel__value {
  font-size: 0.84rem;
  color: rgba(224, 195, 143, 0.85);
  text-align: start;
  overflow-wrap: anywhere;
}

.cx-channel__note {
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(200, 190, 175, 0.55);
}

.cx-channel__go {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  margin-inline-start: auto;
  opacity: 0.35;
  transition: opacity 320ms ease, transform 320ms ease;
}

.cx-channel:hover .cx-channel__go {
  opacity: 0.9;
  transform: translateX(-5px);
}

/* ── Form ──────────────────────────────────────────────────────── */
.cx-form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.35rem, 5vw, 2rem);
  border-radius: 1.4rem;
  border: 1px solid rgba(197, 164, 106, 0.16);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(197, 164, 106, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(28, 27, 25, 0.8), rgba(17, 17, 16, 0.8));
}

.cx-form__head .section-title {
  position: relative;
  margin: 0.45rem 0 0.6rem;
  padding-bottom: 0.8rem;
}

.cx-form__head .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);
}

.cx-reveal.is-visible .cx-form__head .section-title::after {
  animation: cx-rule-draw 900ms cubic-bezier(0.16, 1, 0.3, 1) 320ms forwards;
}

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

.cx-form__lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(200, 190, 175, 0.62);
}

.cx-form__note {
  margin: 0;
  text-align: center;
  font-size: 0.74rem;
  color: rgba(200, 190, 175, 0.45);
}

.cx-submit {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #c8a86a 0%, #eadab4 50%, #c8a86a 100%);
  background-size: 200% 100%;
  color: #211c12;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(150, 118, 62, 0.3);
  animation: cx-submit-flow 5s linear infinite;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

@keyframes cx-submit-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

.cx-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(150, 118, 62, 0.42);
}

.cx-submit__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.cx-submit__icon svg { width: 20px; height: 20px; }

/* ── Hours and social ──────────────────────────────────────────── */
.cx-aside {
  display: grid;
  gap: 0.8rem;
}

.cx-hours,
.cx-social {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  padding: 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(197, 164, 106, 0.14);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.cx-hours__label,
.cx-social__label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 190, 175, 0.45);
}

.cx-hours__value {
  font-size: 0.92rem;
  color: rgba(224, 214, 198, 0.85);
}

.cx-social__row {
  display: flex;
  gap: 0.7rem;
}

.cx-social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(197, 164, 106, 0.28);
  color: rgba(224, 195, 143, 0.9);
  transition: color 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.cx-social__link svg { width: 18px; height: 18px; }

.cx-social__link:hover {
  color: #f6ecd6;
  border-color: rgba(224, 195, 143, 0.8);
  transform: translateY(-3px);
}

@media (min-width: 640px) {
  .cx-aside { grid-template-columns: 1fr auto; align-items: stretch; }
  .cx-social { min-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  /* These mirror the specificity of the rules that start the animations */
  .cx-orb,
  .cx-channel__pulse,
  .cx-submit,
  .cx-hero.is-visible .cx-hero__inner > *,
  .cx-hero.is-visible .cx-hero__inner > .cx-hero__title,
  .cx-reveal.is-visible .cx-channel,
  .cx-reveal.is-visible .cx-form__head .section-title::after {
    animation: none;
  }

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

  /* Without animation nothing would ever reveal these */
  .cx-hero__inner > * { opacity: 1; }
  .cx-reveal.is-visible .cx-form__head .section-title::after { width: 74px; }
  .cx-channel::before { display: none; }
  .cx-channel:hover { transform: none; }
  .cx-channel:hover .cx-channel__icon { transform: 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 220ms ease, box-shadow 220ms 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 200ms 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-luxe {
  position: relative;
}

/* Sections assemble themselves as they arrive: the kicker, then the title,
   then the grid, rather than the whole slab sliding up at once. The section
   itself never fades, so nothing is dimmed twice. */
.home-reveal > * {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--r, 0) * 110ms);
}

.home-reveal.is-visible > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Grids hand the motion to their cards — blurring a whole wall of product
   photography is expensive and looks smeared. */
.home-reveal > .grid,
.home-reveal > .faq-list {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* Cards use an animation rather than a transition: several of them already
   own a `transition` for their hover border, and the later rule would win. */
.home-reveal:not(.is-visible) .grid > *,
.home-reveal:not(.is-visible) .faq-list > * {
  opacity: 0;
}

/* Their mount animation would otherwise hold them visible before the scroll */
.home-reveal:not(.is-visible) .grid > .reveal { animation: none; }

.home-reveal.is-visible .grid > *,
.home-reveal.is-visible .faq-list > * {
  animation: home-cell-in 820ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(200ms + var(--g, 0) * 90ms);
}

/* `backwards` and not `both`: once it lands the card goes back to its own
   styles, so the hover lift still works. */
@keyframes home-cell-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal > *,
  .home-reveal:not(.is-visible) .grid > *,
  .home-reveal:not(.is-visible) .faq-list > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .home-reveal.is-visible .grid > *,
  .home-reveal.is-visible .faq-list > * { animation: none; }
}

/* ── Home: built for the phone first, widened by media queries ── */
.home-luxe {
  display: grid;
  gap: clamp(3.25rem, 10vw, 6rem);
}

/* Sections run full-bleed; only their contents are held to the grid */
.home-hero__inner,
.home-block,
.home-editorial__inner,
.home-final__inner {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.home-block__intro {
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
}

/* A gold rule draws itself under every section title as it arrives */
.home-block__intro .section-title {
  position: relative;
  padding-bottom: 0.7rem;
}

.home-block__intro .section-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(233, 213, 173, 0.9), rgba(197, 164, 106, 0));
}

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

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

/* ── Hero ──────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 16vw, 7rem) clamp(3rem, 12vw, 5.5rem);
  background:
    radial-gradient(circle at 82% 8%, rgba(197, 164, 106, 0.16), transparent 46%),
    radial-gradient(circle at 6% 88%, rgba(154, 122, 69, 0.14), transparent 42%),
    linear-gradient(168deg, #131215 0%, #17161a 46%, #221c16 100%);
}

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

.home-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
}

.home-orb--one {
  width: 46vw;
  max-width: 340px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(197, 164, 106, 0.4), transparent 68%);
  inset-inline-end: -8%;
  top: -6%;
  animation: home-orb-drift 17s ease-in-out infinite;
}

.home-orb--two {
  width: 38vw;
  max-width: 280px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(154, 122, 69, 0.34), transparent 70%);
  inset-inline-start: -10%;
  bottom: -8%;
  animation: home-orb-drift 21s ease-in-out infinite reverse;
}

@keyframes home-orb-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4%, 6%, 0) scale(1.12); }
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

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

.home-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  /* Big on a phone without ever overflowing it */
  font-size: clamp(2.1rem, 9.5vw, 4.4rem);
  line-height: 1.25;
  color: #fdfaf4;
  /* Gold travels through the letters instead of sitting behind them */
  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: home-title-sheen 7s linear infinite;
}

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

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

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

.home-hero__link {
  position: relative;
  font-size: 0.9rem;
  color: rgba(226, 214, 192, 0.9);
  padding-block: 0.3rem;
}

/* Grows the tap area to a comfortable 44px without pushing the underline
   away from the text */
.home-hero__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.home-hero__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: rgba(197, 164, 106, 0.75);
  transform: scaleX(0.35);
  transform-origin: inline-start;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-hero__link:hover::after { transform: scaleX(1); }

.home-hero__promises {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.home-hero__promises li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(206, 195, 178, 0.72);
}

.home-hero__promises li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(197, 164, 106, 0.9);
  flex: none;
}

/* A thread that keeps sliding downward, hinting there is more below */
.home-hero__scroll {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 0;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(197, 164, 106, 0.16);
}

.home-hero__scroll::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -60%;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(233, 213, 173, 0.95));
  animation: home-scroll-thread 2.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes home-scroll-thread {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* The hero writes itself line by line; the generic cascade steps aside */
.home-hero.home-reveal > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

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

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

.home-hero.is-visible .home-hero__inner > *:nth-child(1) { animation-delay: 80ms; }
.home-hero.is-visible .home-hero__inner > *:nth-child(2) { animation-delay: 200ms; }
.home-hero.is-visible .home-hero__inner > *:nth-child(3) { animation-delay: 330ms; }
.home-hero.is-visible .home-hero__inner > *:nth-child(4) { animation-delay: 450ms; }
.home-hero.is-visible .home-hero__inner > *:nth-child(5) { animation-delay: 560ms; }

/* The title rises first, then keeps its gold sheen for good. Both animations
   have to live on one declaration, otherwise the entrance shorthand above
   wins the cascade and the sheen never runs. */
.home-hero.is-visible .home-hero__inner > .home-hero__title {
  animation:
    home-hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both,
    home-title-sheen 7s linear 1100ms infinite;
}

@keyframes home-hero-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ── Curated ───────────────────────────────────────────────────── */
.home-curated__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
}

.home-curated__head .home-block__intro { margin-bottom: 0; }

.home-curated__tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  /* Tabs scroll rather than wrap into a tall block on a phone */
  margin-inline: -1rem;
  padding-inline: 1rem;
}

.home-curated__tabs::-webkit-scrollbar { display: none; }

.home-curated__tab {
  flex: 0 0 auto;
  border: 1px solid rgba(197, 164, 106, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: #d5c7b1;
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    color 320ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-curated__tab:hover { transform: translateY(-2px); }

.home-curated__tab.is-active {
  background: linear-gradient(180deg, rgba(197, 164, 106, 0.26), rgba(197, 164, 106, 0.12));
  border-color: rgba(197, 164, 106, 0.6);
  color: #fbecd0;
}

.home-curated__grid {
  transition: opacity 220ms ease, transform 220ms ease;
}

.home-curated__grid.is-updating {
  opacity: 0;
  transform: translateY(10px);
}

/* ── Style tiles ───────────────────────────────────────────────── */
.home-styles__grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

.style-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(197, 164, 106, 0.18);
  background: linear-gradient(150deg, rgba(38, 36, 40, 0.9), rgba(24, 23, 26, 0.9));
  transition:
    border-color 420ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms ease;
}

/* Gold washes across the tile on touch or hover */
.style-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(233, 213, 173, 0.14) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.style-tile:hover,
.style-tile:focus-visible {
  border-color: rgba(197, 164, 106, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

.style-tile:hover::before { transform: translateX(130%); }

.style-tile__index {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: rgba(197, 164, 106, 0.8);
}

.style-tile__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 600;
  color: #f4efe6;
}

.style-tile__go {
  font-size: 0.78rem;
  color: rgba(203, 192, 175, 0.66);
}

.style-tile--all {
  background: linear-gradient(150deg, rgba(197, 164, 106, 0.18), rgba(24, 23, 26, 0.92));
  border-color: rgba(197, 164, 106, 0.36);
}

/* ── Editorial ─────────────────────────────────────────────────── */
.home-editorial {
  position: relative;
  padding-block: clamp(3rem, 11vw, 5rem);
  background:
    radial-gradient(circle at 50% 0%, rgba(197, 164, 106, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(20, 19, 22, 0.6), rgba(26, 22, 18, 0.75));
  border-block: 1px solid rgba(197, 164, 106, 0.14);
}

.home-editorial__inner {
  display: grid;
  gap: 1.15rem;
  justify-items: start;
  text-align: start;
}

.home-editorial h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 6.6vw, 2.6rem);
  line-height: 1.5;
  color: #f6f1e8;
  max-width: 22ch;
}

.home-editorial p {
  margin: 0;
  max-width: 52ch;
  line-height: 2.05;
  color: rgba(210, 199, 182, 0.76);
}

.home-editorial__link {
  position: relative;
  font-size: 0.88rem;
  color: #e0cfa6;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(197, 164, 106, 0.5);
  transition: color 300ms ease, border-color 300ms ease;
}

/* Grows the tap area to a comfortable 44px without moving the underline */
.home-editorial__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.home-editorial__link:hover {
  color: #fbecd0;
  border-color: rgba(233, 213, 173, 0.95);
}

/* ── Promise steps ─────────────────────────────────────────────── */
.home-promise__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* One continuous gold thread runs the length of the steps */
  border-inline-start: 1px solid rgba(197, 164, 106, 0.22);
}

.home-promise__step {
  position: relative;
  padding: 0 0 2rem 0;
  padding-inline-start: 1.5rem;
}

.home-promise__step:last-child { padding-bottom: 0; }

.home-promise__step::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c5a46a;
  box-shadow: 0 0 0 4px rgba(197, 164, 106, 0.14);
}

.home-promise__num {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: rgba(197, 164, 106, 0.85);
}

.home-promise__step h3 {
  margin: 0.3rem 0 0.4rem;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  font-weight: 600;
  color: #f2ece1;
}

.home-promise__step p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.9;
  color: rgba(203, 192, 175, 0.7);
}

/* ── Final call ────────────────────────────────────────────────── */
.home-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.25rem, 12vw, 5.5rem);
  background:
    radial-gradient(circle at 20% 20%, rgba(197, 164, 106, 0.2), transparent 42%),
    linear-gradient(150deg, #1d1815, #141318 58%, #241d17);
  border-block: 1px solid rgba(197, 164, 106, 0.16);
}

.home-final__inner {
  position: relative;
  display: grid;
  gap: 0.85rem;
  justify-items: start;
}

.home-final h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 7vw, 2.6rem);
  line-height: 1.4;
  color: #fbf6ec;
}

.home-final p {
  margin: 0;
  color: rgba(207, 196, 179, 0.74);
  line-height: 1.9;
}

.home-final__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-top: 0.6rem;
}

/* ── Wider screens ─────────────────────────────────────────────── */
@media (min-width: 600px) {
  .home-styles__grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .home-promise__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2rem;
    border-inline-start: 0;
  }
  .home-promise__step { padding-bottom: 0; }
}

@media (min-width: 900px) {
  .home-hero__inner { gap: 1.35rem; }
  .home-styles__grid { grid-template-columns: repeat(3, 1fr); }
  .home-promise__list { grid-template-columns: repeat(4, 1fr); }
  .home-curated__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .home-curated__tabs { margin-inline: 0; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* These have to mirror the specificity of the rules that start the
     animations, otherwise the motion keeps playing */
  .home-orb,
  .home-hero__scroll::after,
  .home-hero.is-visible .home-hero__inner > *,
  .home-hero.is-visible .home-hero__inner > .home-hero__title,
  .home-reveal.is-visible .home-block__intro .section-title::after {
    animation: none;
  }
  /* No animation means nothing would ever reveal the held-back hero lines */
  .home-hero__inner > * { opacity: 1; transform: none; filter: none; }
  .home-reveal.is-visible .home-block__intro .section-title::after { width: 74px; }
  .style-tile::before { display: none; }
}

.shop-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.shop-controls label:first-child {
  flex: 1 1 auto;
  min-width: 200px;
}

/* ── Shop search ───────────────────────────────────────────────── */
.shop-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.95rem;
  border: 1px solid rgba(197, 164, 106, 0.25);
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(197, 164, 106, 0.09), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  transition:
    border-color 380ms ease,
    box-shadow 420ms ease,
    background 380ms ease;
}

.shop-search:focus-within {
  border-color: rgba(224, 195, 143, 0.75);
  box-shadow:
    0 0 0 3px rgba(197, 164, 106, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.32);
}

.shop-search__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: rgba(218, 195, 154, 0.6);
  transition: color 380ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-search__icon svg { width: 100%; height: 100%; }

.shop-search:focus-within .shop-search__icon {
  color: rgba(243, 223, 184, 0.95);
  transform: scale(1.12) rotate(-8deg);
}

.shop-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: #f3eee8;
  font-family: inherit;
  font-size: 0.94rem;
}

.shop-search__input:focus { outline: none; }

.shop-search__input::placeholder {
  color: rgba(218, 195, 154, 0.45);
  transition: color 380ms ease, opacity 380ms ease;
}

.shop-search:focus-within .shop-search__input::placeholder {
  opacity: 0.55;
}

/* The native control is inconsistent across browsers, so the page draws its own */
.shop-search__input::-webkit-search-cancel-button,
.shop-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.shop-search__clear {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(197, 164, 106, 0.14);
  color: rgba(233, 213, 173, 0.9);
  cursor: pointer;
  animation: shop-search-clear 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background 300ms ease, color 300ms ease, transform 300ms ease;
}

/* The dot stays small; the thumb gets the full height of the field */
.shop-search__clear::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: -0.55rem;
  height: 44px;
  transform: translateY(-50%);
}

.shop-search__clear svg { width: 13px; height: 13px; }

.shop-search__clear:hover {
  background: rgba(197, 164, 106, 0.26);
  color: #fbf1dd;
  transform: rotate(90deg);
}

@keyframes shop-search-clear {
  from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
  to { opacity: 1; transform: none; }
}

/* Gold rule that draws out from the centre while the field holds focus */
.shop-search__rule {
  position: absolute;
  inset-inline: 12%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(243, 223, 184, 0.9),
    transparent);
  transform: scaleX(0);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-search:focus-within .shop-search__rule { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .shop-search,
  .shop-search__icon,
  .shop-search__rule,
  .shop-search__clear {
    transition: none;
    animation: none;
  }
  .shop-search:focus-within .shop-search__icon { transform: none; }
  .shop-search__clear:hover { transform: 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 420ms cubic-bezier(0.16, 1, 0.3, 1),
    background 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms 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 1050ms 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 420ms ease, text-shadow 420ms ease;
}

.lux-select__chevron {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: rgba(218, 195, 154, 0.7);
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms 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 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 420ms;
}

/* 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 760ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

/* 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 300ms ease,
    clip-path 640ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms 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 1150ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}

@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 300ms ease, color 300ms 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 420ms 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 680ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(160ms + var(--i, 0) * 75ms);
}

@keyframes lux-option-in {
  from { opacity: 0; filter: blur(7px); transform: translateY(9px); }
  60% { opacity: 1; }
  to { opacity: 1; filter: blur(0); 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: pdp-spin 0.8s linear infinite;
}

.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;
}

/* ── Product Details Page (PDP) ─────────────────────────────────────── */

/* Loading state */
.pdp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.pdp-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(197,164,106,0.15);
  border-top-color: #c5a46a;
  border-radius: 50%;
  animation: pdp-spin 0.8s linear infinite;
}
@keyframes pdp-spin { to { transform: rotate(360deg); } }

/* Page wrapper */
.pdp-wrap {
  padding-bottom: 6rem; /* space for mobile sticky bar */
}

/* Breadcrumb */
.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem var(--space-4);
  font-size: 0.8rem;
  color: rgba(200,190,175,0.5);
  flex-wrap: wrap;
}
.pdp-breadcrumb a { color: rgba(200,190,175,0.65); text-decoration: none; }
.pdp-breadcrumb a:hover { color: #c5a46a; }
.pdp-breadcrumb span { color: rgba(200,190,175,0.85); }
.pdp-breadcrumb svg { opacity: 0.4; flex-shrink: 0; }

/* Main layout: gallery + panel */
.pdp-main {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 0 var(--space-4);
  align-items: start;
}

/* ── Gallery ── */
.pdp-gallery__stage {
  position: relative;
  background: transparent;
}
/* One photo at a time. Every slide shares one grid cell, so the stage is as
   tall as the tallest shot and the page does not jump between them. */
.pdp-gallery__track {
  display: grid;
}
.pdp-slide {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0e0e10;
  cursor: zoom-in;
  /* Nothing reserves height until the photo loads, so a slow or broken one
     would otherwise collapse the stage to a sliver */
  min-height: 180px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms;
}
.pdp-slide.is-active {
  opacity: 1;
  visibility: visible;
}
/* No fixed frame and no crop — the image sets its own height */
.pdp-slide__img {
  display: block;
  width: 100%;
  height: auto;
}

.pdp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 13, 15, 0.6);
  backdrop-filter: blur(8px);
  color: rgba(245, 241, 234, 0.92);
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease;
}
.pdp-arrow svg { width: 20px; height: 20px; }
.pdp-arrow--prev { inset-inline-start: 0.75rem; }
.pdp-arrow--next { inset-inline-end: 0.75rem; }
.pdp-arrow:hover { background: rgba(13, 13, 15, 0.85); }
.pdp-arrow:active { transform: translateY(-50%) scale(0.94); }
.pdp-arrow:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pdp-slide,
  .pdp-arrow { transition: none; }
}
.pdp-gallery__zoomhint {
  position: absolute;
  bottom: 0.9rem;
  inset-inline-start: 0.9rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(13,13,15,0.6);
  backdrop-filter: blur(8px);
  color: rgba(245,241,234,0.85);
  pointer-events: none;
}
.pdp-gallery__zoomhint svg { width: 17px; height: 17px; }
.pdp-gallery__placeholder {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(197,164,106,0.35);
  font-size: 0.85rem;
}
.pdp-gallery__badges {
  position: absolute;
  top: 0.9rem;
  inset-inline-start: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  pointer-events: none;
}
.pdp-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.pdp-badge--scarce {
  background: rgba(13,13,15,0.72);
  border: 1px solid rgba(197,164,106,0.45);
  color: #e2c97e;
}
.pdp-gallery__counter {
  position: absolute;
  bottom: 0.9rem;
  inset-inline-end: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(245,241,234,0.9);
  background: rgba(13,13,15,0.6);
  backdrop-filter: blur(8px);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pdp-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0 0;
}
.pdp-dot {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(197,164,106,0.28);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
/* The dot stays small; the thing you can tap does not */
.pdp-dot::after {
  content: "";
  position: absolute;
  inset: -14px -6px;
}
.pdp-dot.is-active { width: 22px; background: #c5a46a; }

.pdp-gallery__thumbs {
  display: none;
  gap: 0.6rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.pdp-gallery__thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb {
  flex-shrink: 0;
  width: 72px; height: 88px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(197,164,106,0.15);
  background: #0e0e10;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active,
.pdp-thumb:hover { border-color: #c5a46a; }

/* ── Lightbox ─────────────────────────────────────────────────── */
body.pdp-lightbox-open { overflow: hidden; }

.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(6px);
  animation: rise-in 240ms ease both;
}
.pdp-lightbox.is-open { display: grid; }

.pdp-lightbox__viewport {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(0.5rem, 3vw, 2rem);
}

.pdp-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pinch-zoom;
}
.pdp-lightbox__img.is-zoomed {
  transform: scale(2.5);
  cursor: zoom-out;
}

.pdp-lightbox__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-end: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f1ea;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.pdp-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }

.pdp-lightbox__nav {
  position: absolute;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.pdp-lightbox__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f1ea;
  cursor: pointer;
  transition: background 200ms ease;
}
.pdp-lightbox__arrow:hover { background: rgba(255, 255, 255, 0.2); }
.pdp-lightbox__arrow svg { width: 20px; height: 20px; }
.pdp-lightbox__count {
  font-size: 0.85rem;
  color: rgba(245, 241, 234, 0.8);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pdp-lightbox { animation: none; }
  .pdp-lightbox__img { transition: none; }
  .pdp-lightbox__close:hover { transform: none; }
}

/* ── Panel ── */
.pdp-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pdp-panel__brand {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c5a46a;
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.pdp-panel__name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  font-weight: 500;
  color: #f5f1ea;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}
.pdp-panel__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.pdp-stars { color: #d4aa60; letter-spacing: 0.04em; font-size: 0.95rem; }
.pdp-rating-count { font-size: 0.8rem; color: rgba(200,190,175,0.5); }

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.pdp-price {
  font-size: clamp(1.7rem, 6vw, 2rem);
  font-weight: 600;
  color: #e2c97e;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pdp-savings {
  font-size: 0.8rem;
  color: #8fd6ac;
  margin: 0 0 1.1rem;
  letter-spacing: 0.01em;
}
.pdp-price__old {
  font-size: 1rem;
  color: rgba(200,190,175,0.4);
  text-decoration: line-through;
}
.pdp-discount-badge {
  background: rgba(197,164,106,0.12);
  border: 1px solid rgba(197,164,106,0.3);
  color: #c5a46a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.pdp-panel__desc {
  font-size: 0.9rem;
  color: rgba(200,190,175,0.7);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Fields */
.pdp-field {
  margin-bottom: 1.1rem;
}
.pdp-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(200,190,175,0.55);
  margin-bottom: 0.5rem;
}

/* Tags (size / color) */
.pdp-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.pdp-tag {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  min-width: 48px;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(197,164,106,0.25);
  background: rgba(255,255,255,0.03);
  color: rgba(200,190,175,0.75);
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s;
}
.pdp-tag:hover { border-color: rgba(197,164,106,0.5); color: #dac89a; }
.pdp-tag:active { transform: scale(0.96); }

/* Gold blooms out of the size the moment it is chosen */
.pdp-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(233,213,173,0.4), transparent 65%);
}

.pdp-tag.is-active {
  border-color: #c5a46a;
  background: rgba(197,164,106,0.14);
  color: #f0e0b8;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(197,164,106,0.35);
  animation: pdp-tag-pick 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pdp-tag.is-active::after {
  animation: pdp-tag-bloom 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pdp-tag-pick {
  0% { transform: scale(0.94); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes pdp-tag-bloom {
  0% { opacity: 0.95; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* Qty control */
.pdp-qty {
  display: flex;
  align-items: center;
  border: 1px solid rgba(197,164,106,0.25);
  border-radius: 12px;
  overflow: hidden;
  width: fit-content;
  min-width: 140px;
}
.pdp-qty button {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.04);
  border: none;
  color: #c5a46a;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdp-qty button:hover { background: rgba(197,164,106,0.12); }
.pdp-qty button:active {
  background: rgba(197,164,106,0.24);
  transform: scale(0.86);
}
.pdp-qty input {
  width: 52px;
  border: none;
  background: transparent;
  color: #f5f1ea;
  text-align: center;
  font-size: 0.95rem;
  min-height: 44px;
}
.pdp-qty input:disabled { opacity: 0.4; }

/* The figure rolls in from the direction it is counting, clipped by the
   control's own overflow so it reads as a counter rather than a nudge. */
.pdp-qty input.is-up { animation: pdp-qty-up 420ms cubic-bezier(0.16, 1, 0.3, 1); }
.pdp-qty input.is-down { animation: pdp-qty-down 420ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes pdp-qty-up {
  0% { transform: translateY(11px); opacity: 0; color: #e9d5ad; }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; color: #f5f1ea; }
}

@keyframes pdp-qty-down {
  0% { transform: translateY(-11px); opacity: 0; color: #e9d5ad; }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; color: #f5f1ea; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-tag,
  .pdp-tag.is-active,
  .pdp-tag.is-active::after,
  .pdp-qty button,
  .pdp-qty input.is-up,
  .pdp-qty input.is-down {
    animation: none;
    transform: none;
    transition: none;
  }
}
.pdp-qty-note {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: #dba86a;
}

/* CTA */
.pdp-cta { margin: 1.5rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.pdp-cta-main { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pdp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(135deg, #c5a46a, #a8885a);
  color: #0d0d0f;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  width: 100%;
  letter-spacing: 0.02em;
}
.pdp-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.pdp-btn-primary:active { transform: translateY(0); }
.pdp-btn-buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(110deg, #e2c97e 0%, #c5a46a 28%, #f5e6c0 50%, #c5a46a 72%, #e2c97e 100%);
  background-size: 250% 100%;
  color: #1a140a;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.3s;
  animation: pdp-btn-shimmer 3s linear infinite, pdp-btn-breathe 2.8s ease-in-out infinite;
}
.pdp-btn-buy-now::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: pdp-btn-shine 2.5s linear infinite;
  pointer-events: none;
}
.pdp-btn-buy-now--full {
  font-size: 1rem;
  padding: 1.05rem 1.5rem;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.pdp-btn-buy-now:hover { transform: translateY(-2px); }
.pdp-btn-buy-now:active { transform: translateY(0); animation-play-state: paused; }

@keyframes pdp-btn-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes pdp-btn-shine {
  0%   { background-position: 200% center; opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { background-position: -200% center; opacity: 0; }
}
@keyframes pdp-btn-breathe {
  0%, 100% { box-shadow: 0 4px 20px rgba(197,164,106,0.25), 0 0 0 0 rgba(197,164,106,0); }
  50%       { box-shadow: 0 8px 32px rgba(197,164,106,0.5),  0 0 0 6px rgba(197,164,106,0.08); }
}
.pdp-cta-secondary { display: flex; gap: 0.6rem; }
.pdp-btn-ghost {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(197,164,106,0.2);
  color: rgba(200,190,175,0.75);
  font-size: 0.82rem;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.pdp-btn-ghost:hover { border-color: rgba(197,164,106,0.45); color: #dac89a; }

/* Trust strip */
.pdp-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: rgba(197,164,106,0.04);
  border: 1px solid rgba(197,164,106,0.12);
  border-radius: 14px;
  margin-bottom: 1.1rem;
}
.pdp-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(200,190,175,0.7);
}
.pdp-trust__item svg { opacity: 0.9; }

/* Product meta */
.pdp-meta {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.pdp-meta > div { display: flex; gap: 0.5rem; align-items: baseline; }
.pdp-meta dt { font-size: 0.78rem; color: rgba(200,190,175,0.45); font-weight: 600; min-width: 3.5rem; }
.pdp-meta dd { font-size: 0.85rem; color: rgba(200,190,175,0.8); margin: 0; }
.pdp-stock--in { color: #6ee7b7 !important; }
.pdp-stock--out { color: #f87171 !important; }

/* Section titles */
.pdp-section {
  padding: 2rem var(--space-4) 0;
}
.pdp-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: #f5f1ea;
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(197,164,106,0.12);
}

/* Full description */
.pdp-desc-body {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(200,190,175,0.8);
}
.pdp-desc-body p { margin: 0 0 0.75rem; }
.pdp-desc-body ul, .pdp-desc-body ol { padding-inline-start: 1.25rem; margin: 0 0 0.75rem; }
.pdp-desc-body li { margin-bottom: 0.3rem; }
.pdp-desc-body strong { color: #dac89a; }
.pdp-desc-body h3 { color: #e8d5b0; font-size: 1rem; margin: 1rem 0 0.4rem; }

/* Info grid (shipping) */
.pdp-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.pdp-info-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(197,164,106,0.1);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pdp-info-card svg { opacity: 0.85; }
.pdp-info-card h3 { font-size: 0.82rem; font-weight: 600; color: #e8d5b0; margin: 0; }
.pdp-info-card p { font-size: 0.77rem; color: rgba(200,190,175,0.55); margin: 0; line-height: 1.4; }

/* Reviews */
.pdp-reviews { display: grid; gap: 0.85rem; }
.pdp-review {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(197,164,106,0.1);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}
.pdp-review__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.pdp-review__title { font-size: 0.88rem; font-weight: 600; color: #e8d5b0; margin: 0 0 0.4rem; }
.pdp-review__body { font-size: 0.82rem; color: rgba(200,190,175,0.65); margin: 0; line-height: 1.55; }
.pdp-review--empty { text-align: center; color: rgba(200,190,175,0.4); font-size: 0.85rem; padding: 2rem; }

/* Mobile sticky bar */
.pdp-mobile-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 118;
  background: rgba(13,13,15,0.94);
  border-top: 1px solid rgba(197,164,106,0.22);
  display: flex;
  align-items: center;
  padding: 0.6rem 0.9rem;
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  gap: 0.7rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
}
.pdp-mobile-bar__img {
  width: 44px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(197,164,106,0.2);
  flex-shrink: 0;
}
.pdp-mobile-bar__info { display: flex; flex-direction: column; gap: 0.1rem; flex-shrink: 0; }
.pdp-mobile-bar__price { font-size: 1.05rem; color: #e2c97e; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdp-mobile-bar__old { font-size: 0.72rem; color: rgba(200,190,175,0.4); }
/* Mobile bar buy-now button inherits .pdp-btn-buy-now animation */
.pdp-mobile-bar .pdp-btn-buy-now {
  flex: 1;
  min-height: 48px;
  padding: 0.75rem 0.6rem;
  font-size: 0.9rem;
  border-radius: 12px;
}

/* 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 200ms ease;
  text-align: center;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.dn-toast.is-visible { opacity: 1; transform: translateY(0); }

/* Draws the eye to the choice a card could not make on its own */
@keyframes pdp-ask {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 164, 106, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(197, 164, 106, 0.22); }
}
.pdp-tags.is-asking {
  border-radius: 999px;
  animation: pdp-ask 800ms ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .pdp-tags.is-asking { animation: none; }
}

/* ── Inline Checkout Overlay ─────────────────────────────────────────── */
.pdp-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  visibility: hidden;
}
.pdp-checkout-overlay.is-open {
  pointer-events: all;
  visibility: visible;
}
.pdp-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pdp-checkout-overlay.is-open .pdp-checkout-backdrop { opacity: 1; }

.pdp-checkout-sheet {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: #141416;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(197,164,106,0.2);
  padding: 0 1.25rem 2rem;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  scrollbar-width: none;
}
.pdp-checkout-sheet::-webkit-scrollbar { display: none; }
.pdp-checkout-overlay.is-open .pdp-checkout-sheet { transform: translateY(0); }

.pdp-checkout-sheet__handle {
  width: 36px; height: 4px;
  background: rgba(197,164,106,0.25);
  border-radius: 999px;
  margin: 0.85rem auto 0;
}
.pdp-checkout-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid rgba(197,164,106,0.1);
  margin-bottom: 1rem;
}
.pdp-checkout-sheet__header h2 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: #f5f1ea;
  margin: 0;
}
.pdp-checkout-close {
  position: relative;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 50%;
  color: rgba(200,190,175,0.7);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.pdp-checkout-close::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.pdp-checkout-close:hover { background: rgba(255,255,255,0.12); color: #f5f1ea; transform: rotate(90deg); }

.pdp-checkout-product {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem;
  background: rgba(197,164,106,0.05);
  border: 1px solid rgba(197,164,106,0.12);
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.pdp-checkout-product__img {
  width: 56px; height: 68px;
  border-radius: 8px;
  object-fit: cover;
  background: #0e0e10;
  flex-shrink: 0;
}
.pdp-checkout-product__name { font-size: 0.88rem; font-weight: 600; color: #f0e6d3; margin: 0 0 0.2rem; }
.pdp-checkout-product__desc {
  font-size: 0.76rem;
  color: rgba(200,190,175,0.55);
  line-height: 1.45;
  margin: 0 0 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-checkout-product__variant {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.35rem;
}
.pdp-checkout-chip {
  font-size: 0.72rem;
  color: #dac89a;
  background: rgba(197,164,106,0.12);
  border: 1px solid rgba(197,164,106,0.28);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.pdp-checkout-product__price { font-size: 0.82rem; color: #c5a46a; margin: 0; }

.pdp-co-form { display: flex; flex-direction: column; gap: 0.85rem; }

.pdp-co-field { display: flex; flex-direction: column; gap: 0.3rem; position: relative; }
.pdp-co-label { font-size: 0.75rem; font-weight: 600; color: rgba(200,190,175,0.55); letter-spacing: 0.05em; text-transform: uppercase; }
.pdp-co-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(197,164,106,0.2);
  border-radius: 10px;
  color: #f5f1ea;
  font-size: 0.92rem;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.18s;
}
.pdp-co-input:focus { outline: none; border-color: rgba(197,164,106,0.55); }
.pdp-co-input.is-error { border-color: rgba(248,113,113,0.6); }
.pdp-co-input:disabled { opacity: 0.5; cursor: not-allowed; }
.pdp-co-err { font-size: 0.75rem; color: #f87171; display: none; }

/* Native select keeps the picker native on mobile and free text impossible */
.pdp-co-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-inline-start: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, rgba(200,190,175,0.55) 50%),
                    linear-gradient(135deg, rgba(200,190,175,0.55) 50%, transparent 50%);
  background-position: left 1rem top 55%, left 0.7rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.pdp-co-select option { background: #1c1c1f; color: #f5f1ea; }

.pdp-co-method { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pdp-co-method__option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(197,164,106,0.2);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  min-height: 64px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.pdp-co-method__option:has(input:checked) {
  border-color: rgba(197,164,106,0.7);
  background: rgba(197,164,106,0.1);
}
.pdp-co-method__option:has(input:focus-visible) {
  outline: 2px solid rgba(197,164,106,0.7);
  outline-offset: 2px;
}
.pdp-co-method__option input {
  accent-color: #c5a46a;
  width: 16px;
  height: 16px;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.pdp-co-method__body { display: flex; flex-direction: column; gap: 0.2rem; }
.pdp-co-method__title { font-size: 0.88rem; font-weight: 600; color: #f5f1ea; }
.pdp-co-method__sub { font-size: 0.72rem; color: rgba(200,190,175,0.5); line-height: 1.4; }

@media (max-width: 380px) {
  .pdp-co-method { grid-template-columns: 1fr; }
}

.pdp-checkout-totals {
  margin: 1rem 0 0;
  border-top: 1px solid rgba(197,164,106,0.1);
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pdp-checkout-total-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: rgba(200,190,175,0.6); }
.pdp-checkout-total-row--grand { font-size: 0.95rem; color: #dac89a; margin-top: 0.25rem; padding-top: 0.5rem; border-top: 1px solid rgba(197,164,106,0.15); }
.pdp-checkout-total-hint { margin: 0; font-size: 0.72rem; color: rgba(197,164,106,0.5); text-align: center; }
.pdp-checkout-free { color: #7bc47f; }

.pdp-co-error {
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(220,60,60,0.1);
  border: 1px solid rgba(248,113,113,0.35);
  color: #f87171;
  font-size: 0.82rem;
}

.pdp-checkout-submit {
  margin-top: 1rem;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(110deg, #e2c97e 0%, #c5a46a 28%, #f5e6c0 50%, #c5a46a 72%, #e2c97e 100%);
  background-size: 250% 100%;
  color: #1a140a;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
  animation: pdp-btn-shimmer 3s linear infinite, pdp-btn-breathe 2.8s ease-in-out infinite;
  transition: transform 0.15s;
}
.pdp-checkout-submit:hover { transform: translateY(-1px); }
.pdp-checkout-submit:active { transform: translateY(0); animation-play-state: paused; }
.pdp-checkout-trust {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(200,190,175,0.4);
  margin: 0.75rem 0 0;
}

/* ── Responsive ── */
@media (min-width: 900px) {
  .pdp-wrap { padding-bottom: 0; }
  .pdp-main {
    grid-template-columns: 1.1fr 1fr;
    padding: 0 var(--space-6);
  }
  .pdp-section { padding-inline: var(--space-6); }
  .pdp-breadcrumb { padding-inline: var(--space-6); }
  .pdp-panel { position: sticky; top: 6.5rem; }
  .pdp-mobile-bar { display: none; }
  .dn-toast { bottom: 2rem; }
  .pdp-info-grid { grid-template-columns: repeat(4, 1fr); }
  .pdp-reviews { grid-template-columns: repeat(2, 1fr); }
  .pdp-slide { border: 1px solid rgba(197,164,106,0.15); }
}

@media (max-width: 899px) {
  /* Full-bleed imagery reads as editorial rather than as a boxed thumbnail */
  .pdp-gallery {
    margin-inline: calc(var(--space-4) * -1);
  }
  .pdp-breadcrumb { padding-block: 0.6rem; font-size: 0.72rem; }
  .pdp-panel { padding-top: 1.4rem; }
  .pdp-wrap { padding-bottom: 7rem; }
}

@media (max-width: 480px) {
  .pdp-info-grid { grid-template-columns: 1fr; }
  .pdp-cta-secondary { flex-direction: row; }
  .pdp-thumb { width: 60px; height: 74px; }
}



@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);
  }

  .shop-search {
    flex: 1 1 100%;
  }

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

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

/* ── About ─────────────────────────────────────────────────────── */
.about-luxe {
  display: grid;
  gap: clamp(3.5rem, 12vw, 7rem);
  padding-bottom: clamp(3rem, 10vw, 6rem);
}

/* Sections arrive as a cascade; the hero opts out and writes itself instead */
.about-reveal > * {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 760ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--r, 0) * 110ms);
}

.about-reveal.is-visible > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 17vw, 8rem) var(--space-4) clamp(3rem, 12vw, 6rem);
  text-align: center;
}

.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);
  animation: about-orb-drift 19s ease-in-out infinite;
}

.about-orb--two {
  inset-inline-end: -18%;
  bottom: 0;
  width: 52vw;
  max-width: 340px;
  aspect-ratio: 1;
  background: rgba(122, 96, 52, 0.24);
  animation: about-orb-drift 23s ease-in-out infinite reverse;
}

@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 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.about-hero.is-visible .about-hero__inner > *:nth-child(1) { animation-delay: 80ms; }
.about-hero.is-visible .about-hero__inner > *:nth-child(3) { animation-delay: 330ms; }
.about-hero.is-visible .about-hero__inner > *:nth-child(4) { animation-delay: 460ms; }

/* 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); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.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-hero__link {
  position: relative;
  font-size: 0.9rem;
  color: rgba(226, 214, 192, 0.9);
  padding-block: 0.3rem;
}

/* Grows the tap area to a comfortable 44px without moving the underline */
.about-hero__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.about-hero__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: rgba(197, 164, 106, 0.75);
  transform: scaleX(0.35);
  transform-origin: inline-start;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-hero__link:hover::after { transform: scaleX(1); }

/* ── Shared section frame ──────────────────────────────────────── */
.about-block {
  width: min(100% - 2 * var(--space-4), 1080px);
  margin-inline: auto;
}

.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 900ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards;
}

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

/* ── Opening statement ─────────────────────────────────────────── */
.about-statement {
  position: relative;
  padding: clamp(2.5rem, 10vw, 4.5rem) var(--space-4);
  border-block: 1px solid rgba(197, 164, 106, 0.14);
  background: linear-gradient(180deg, rgba(20, 19, 18, 0.7), rgba(12, 12, 13, 0.7));
}

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

.about-statement__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 5.4vw, 2rem);
  line-height: 1.75;
  color: #f2ece0;
}

/* ── Pillars ───────────────────────────────────────────────────── */
.about-pillars__grid {
  display: grid;
  gap: 0.9rem;
}

.about-pillar {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.35rem;
  border: 1px solid rgba(197, 164, 106, 0.18);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(28, 27, 25, 0.9), rgba(19, 19, 20, 0.9));
  transition: border-color 420ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(243, 223, 184, 0.09) 50%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-pillar:hover {
  border-color: rgba(224, 195, 143, 0.5);
  transform: translateY(-4px);
}

.about-pillar:hover::before { transform: translateX(120%); }

.about-reveal.is-visible .about-pillar {
  animation: about-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(260ms + var(--g, 0) * 130ms);
}

.about-pillar__index {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: rgba(218, 195, 154, 0.65);
}

.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;
}

/* The gold thread draws itself down the steps as the section arrives */
.about-journey__list::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0.72rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(224, 195, 143, 0.85),
    rgba(197, 164, 106, 0.12));
  transform: scaleY(0);
  transform-origin: top;
}

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

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

.about-journey__step {
  position: relative;
}

.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 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(420ms + var(--g, 0) * 190ms);
}

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

.about-journey__copy h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 1.06rem;
  color: #f4eee3;
}

.about-journey__copy p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.9;
  color: rgba(206, 196, 182, 0.74);
}

/* ── Facts strip ───────────────────────────────────────────────── */
.about-facts {
  padding: clamp(1.8rem, 7vw, 3rem) var(--space-4);
  border-block: 1px solid rgba(197, 164, 106, 0.14);
  background: linear-gradient(180deg, rgba(22, 21, 19, 0.6), rgba(13, 13, 14, 0.6));
}

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

.about-facts__list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: rgba(224, 214, 198, 0.86);
}

.about-facts__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(224, 195, 143, 0.9);
  box-shadow: 0 0 0 4px rgba(197, 164, 106, 0.14);
}

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

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

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

.about-promise__inner p {
  margin: 0 0 1.3rem;
  font-size: 0.94rem;
  line-height: 2;
  color: rgba(206, 196, 182, 0.78);
}

.about-promise__link {
  position: relative;
  font-size: 0.88rem;
  color: #e0cfa6;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(197, 164, 106, 0.5);
  transition: color 300ms ease, border-color 300ms ease;
}

/* Grows the tap area to a comfortable 44px without moving the underline */
.about-promise__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.about-promise__link:hover {
  color: #fbecd0;
  border-color: rgba(233, 213, 173, 0.95);
}

/* ── Final call ────────────────────────────────────────────────── */
.about-final {
  padding-inline: var(--space-4);
}

.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%);
}

.about-final__inner h2 {
  margin: 0.6rem 0 0.7rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 6.6vw, 2.6rem);
  color: #f8f3e9;
}

.about-final__inner p {
  margin: 0 auto 1.6rem;
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(206, 196, 182, 0.76);
}

.about-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.4rem;
}

.about-final__link {
  position: relative;
  font-size: 0.9rem;
  color: rgba(226, 214, 192, 0.9);
  padding-block: 0.3rem;
  border-bottom: 1px solid rgba(197, 164, 106, 0.45);
}

.about-final__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ── 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;
  }

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

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

  .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;
  }

  .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; }
  .about-reveal.is-visible .about-block__intro .section-title::after { width: 74px; }
  .about-pillar::before { display: none; }
}

@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 280ms ease, transform 280ms ease, box-shadow 280ms 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 280ms 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 280ms ease, color 280ms 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 220ms 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;
}

/* ── Order Success ──────────────────────────────────────────────── */
/* ── Order Success Page ─────────────────────────────────────────────────── */

.os-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem 3rem;
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

/* Bokeh background orbs */
.os-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.os-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: os-orb-float 8s ease-in-out infinite alternate;
}
.os-bg__orb--1 { width: 400px; height: 400px; background: rgba(197,164,106,0.08); top: -10%; left: -10%; animation-delay: 0s; }
.os-bg__orb--2 { width: 300px; height: 300px; background: rgba(197,164,106,0.06); bottom: 10%; right: -5%;  animation-delay: 2s; }
.os-bg__orb--3 { width: 200px; height: 200px; background: rgba(218,200,154,0.05); top: 40%; left: 50%;      animation-delay: 4s; }
@keyframes os-orb-float { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,30px) scale(1.1); } }

/* Main card */
.os-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  animation: os-card-enter 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes os-card-enter { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }

/* Animated checkmark */
.os-check {
  position: relative;
  width: 100px; height: 100px;
  margin-bottom: 0.5rem;
}
.os-check__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(197,164,106,0.3);
  animation: os-ring-expand 2.4s ease-out infinite;
}
.os-check__ring--1 { inset: 0;    animation-delay: 0s; }
.os-check__ring--2 { inset: -12px; animation-delay: 0.4s; }
.os-check__ring--3 { inset: -26px; animation-delay: 0.8s; }
@keyframes os-ring-expand {
  0%   { opacity: 0.6; transform: scale(0.85); }
  70%  { opacity: 0.15; }
  100% { opacity: 0; transform: scale(1.25); }
}

.os-check__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.os-check__circle {
  stroke: rgba(197,164,106,0.25);
  stroke-width: 1.5;
  fill: rgba(197,164,106,0.07);
}
.os-check__path {
  stroke: #c5a46a;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: os-check-draw 0.6s 0.3s ease-out forwards;
}
@keyframes os-check-draw { to { stroke-dashoffset: 0; } }

/* Sparkle dots */
.os-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #dac89a;
  animation: os-spark-burst 0.9s 0.5s ease-out both;
}
.os-spark--1 { top: 5%;  left: 50%; transform-origin: 0 45px; }
.os-spark--2 { top: 20%; right: 5%; transform-origin: -35px 25px; }
.os-spark--3 { bottom: 20%; right: 5%; transform-origin: -35px -25px; }
.os-spark--4 { bottom: 5%; left: 50%; transform-origin: 0 -45px; }
.os-spark--5 { bottom: 20%; left: 5%; transform-origin: 35px -25px; }
.os-spark--6 { top: 20%; left: 5%; transform-origin: 35px 25px; }
@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); }
}

/* Header */
.os-header { animation: os-card-enter 0.7s 0.15s both; }
.os-header__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c5a46a;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.os-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 700;
  color: #f5f1ea;
  margin: 0 0 0.65rem;
  line-height: 1.2;
}
.os-header__sub {
  font-size: 0.9rem;
  color: rgba(200,190,175,0.65);
  line-height: 1.7;
  margin: 0;
  max-width: 360px;
}
.os-header__sub strong { color: rgba(200,190,175,0.9); font-weight: 600; }

/* Order ID badge */
.os-order-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: rgba(197,164,106,0.08);
  border: 1px solid rgba(197,164,106,0.25);
  border-radius: 12px;
  padding: 0.7rem 1.4rem;
  animation: os-card-enter 0.7s 0.25s both;
}
.os-order-id__label { font-size: 0.78rem; color: rgba(200,190,175,0.5); }
.os-order-id__val {
  font-size: 1rem;
  font-weight: 700;
  color: #dac89a;
  letter-spacing: 0.06em;
  border-radius: 6px;
  padding: 0.1rem 0.25rem;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.os-order-id__val.is-flash {
  background: rgba(197,164,106,0.28);
  color: #fff3d8;
}
.os-order-id__hint {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(200,190,175,0.55);
}

/* Copy the reference */
.os-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.35rem 0.8rem;
  border-radius: 9px;
  border: 1px solid rgba(197,164,106,0.35);
  background: rgba(197,164,106,0.1);
  color: #dac89a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.15s ease;
}
.os-copy:hover { background: rgba(197,164,106,0.2); }
.os-copy:active { transform: scale(0.95); }
.os-copy:focus-visible { outline: 2px solid #c5a46a; outline-offset: 2px; }
.os-copy__icon { display: inline-flex; width: 15px; height: 15px; }
.os-copy__icon svg { width: 100%; height: 100%; }
.os-copy__icon--done { display: none; }
.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 0.4s ease;
}
.os-copy.is-done .os-copy__icon--copy { display: none; }
.os-copy.is-done .os-copy__icon--done { display: inline-flex; }
.os-copy.is-failed {
  background: rgba(214,104,104,0.16);
  border-color: rgba(214,104,104,0.45);
  color: #f0a9a9;
}
@keyframes os-copy-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .os-copy, .os-order-id__val { transition: none; }
  .os-copy.is-done { animation: none; }
}

/* Confirmed order breakdown */
.os-summary {
  width: 100%;
  display: grid;
  gap: 0.4rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(197,164,106,0.12);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  color: rgba(200,190,175,0.75);
}
.os-summary__row { display: flex; justify-content: space-between; gap: 1rem; }
.os-summary__row--grand {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(197,164,106,0.16);
  color: #dac89a;
}

/* Steps timeline */
.os-steps {
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(197,164,106,0.12);
  border-radius: 18px;
  padding: 1.25rem;
  animation: os-card-enter 0.7s 0.35s both;
}
.os-steps__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(200,190,175,0.45);
  margin: 0 0 1rem;
}
.os-steps__list { display: flex; flex-direction: column; gap: 0; }
.os-step {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(197,164,106,0.07);
}
.os-step:last-child { border-bottom: none; padding-bottom: 0; }
.os-step:first-child { padding-top: 0; }
.os-step__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(197,164,106,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.os-step__icon svg { width: 18px; height: 18px; stroke: #c5a46a; }
.os-step__body { text-align: start; }
.os-step__body h3 { font-size: 0.85rem; font-weight: 600; color: #e8d5b0; margin: 0 0 0.15rem; }
.os-step__body p  { font-size: 0.75rem; color: rgba(200,190,175,0.5); margin: 0; }
.os-step__time { font-size: 0.7rem; color: #c5a46a; font-weight: 600; white-space: nowrap; }

/* Trust row */
.os-trust {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: os-card-enter 0.7s 0.45s both;
}
.os-trust__item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: rgba(200,190,175,0.55);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(197,164,106,0.1);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
}
.os-trust__item svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Action buttons */
.os-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  animation: os-card-enter 0.7s 0.55s both;
}
.os-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: linear-gradient(110deg, #e2c97e 0%, #c5a46a 28%, #f5e6c0 50%, #c5a46a 72%, #e2c97e 100%);
  background-size: 250% 100%;
  color: #1a140a;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
  text-decoration: none;
  letter-spacing: 0.03em;
  animation: pdp-btn-shimmer 3s linear infinite, pdp-btn-breathe 2.8s ease-in-out infinite;
  transition: transform 0.15s;
  flex: 1;
  min-width: 140px;
}
.os-btn-primary:hover { transform: translateY(-1px); }
.os-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  background: transparent;
  border: 1px solid rgba(197,164,106,0.25);
  color: rgba(200,190,175,0.7);
  font-size: 0.88rem;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  flex: 1;
  min-width: 120px;
}
.os-btn-ghost:hover { border-color: rgba(197,164,106,0.5); color: #dac89a; }

/* Mobile tweaks */
@media (max-width: 768px) {
  .os-page { padding: 5rem 1rem 3rem; }
  .os-bg__orb--1 { width: 250px; height: 250px; }
  .os-bg__orb--2 { width: 200px; height: 200px; right: 0; }
  .os-header__title { font-size: clamp(1.6rem, 6vw, 2rem); }
}

@media (max-width: 480px) {
  .os-page { padding: 4.5rem 0.85rem 2.5rem; }
  .os-card { gap: 1rem; }
  .os-header__title { font-size: clamp(1.4rem, 7vw, 1.8rem); word-break: break-word; }
  .os-steps { padding: 0.9rem; }
  .os-steps__list { gap: 0; }
  .os-step { grid-template-columns: 34px 1fr; gap: 0.55rem; }
  .os-step__time { grid-column: 2; font-size: 0.67rem; margin-top: -0.1rem; }
  .os-step__icon { width: 34px; height: 34px; border-radius: 8px; }
  .os-trust { gap: 0.35rem; }
  .os-trust__item { font-size: 0.68rem; padding: 0.35rem 0.55rem; }
  .os-actions { flex-direction: column; }
  .os-btn-primary, .os-btn-ghost { width: 100%; min-width: unset; flex: unset; }
  .os-order-id { padding: 0.6rem 1rem; }
}

/* ── Order tracking ───────────────────────────────────────────── */
.trk-page {
  position: relative;
  padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}

/* The page reads right-to-left, so every sweep has to travel the other way */
[dir="rtl"] .trk-page { --trk-dir: -1; }

/* 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; }
}

.trk-inner {
  position: relative;
  max-width: 620px;
  display: grid;
  gap: clamp(1.25rem, 4vw, 2rem);
}

.trk-head {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  text-align: center;
}

/* 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;
}
.trk-crest svg { inline-size: 26px; block-size: 26px; position: relative; }

/* A light running around the rim, the way a signal sweeps a dial */
.trk-crest::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(197, 164, 106, 0.75) 46deg, transparent 96deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 2px));
  mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 2px));
  animation: trk-orbit 4.5s linear 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; }
.trk-kicker::before,
.trk-kicker::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inline-size: clamp(28px, 9vw, 56px);
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 164, 106, 0.55));
  /* No `to`, so each rule grows out to whatever width it computed */
  animation: trk-rule-out 900ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}
.trk-kicker::before { inset-inline-end: calc(100% + 12px); }
.trk-kicker::after  { inset-inline-start: calc(100% + 12px); transform: scaleX(-1); }

@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; }
}

.trk-lead {
  margin: 0;
  max-width: 34ch;
  color: rgba(185, 176, 164, 0.75);
  font-size: 0.92rem;
  line-height: 1.9;
}

.trk-form {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.4rem, 5vw, 2rem) clamp(1.1rem, 4vw, 1.7rem);
  border-radius: var(--radius-md);
  /* A gold rim that catches the light unevenly, rather than a flat 1px line */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--color-bg-elevated), var(--color-bg-elevated)) padding-box,
    linear-gradient(150deg,
      rgba(197, 164, 106, 0.42),
      rgba(197, 164, 106, 0.07) 42%,
      rgba(197, 164, 106, 0.09) 58%,
      rgba(197, 164, 106, 0.36)) border-box;
  box-shadow:
    0 28px 56px -38px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: box-shadow var(--transition-medium);
}

/* Engraved corner brackets on the diagonal */
.trk-form::before,
.trk-form::after {
  content: "";
  position: absolute;
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid rgba(197, 164, 106, 0.45);
  pointer-events: none;
  animation: trk-bracket 720ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
}

@keyframes trk-bracket {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: none; }
}
.trk-form::before {
  inset-block-start: 9px;
  inset-inline-start: 9px;
  border-inline-end: 0;
  border-block-end: 0;
  border-start-start-radius: 7px;
}
.trk-form::after {
  inset-block-end: 9px;
  inset-inline-end: 9px;
  border-inline-start: 0;
  border-block-start: 0;
  border-end-end-radius: 7px;
}

.trk-form:focus-within {
  box-shadow:
    0 0 0 1px rgba(197, 164, 106, 0.14),
    0 30px 60px -34px rgba(197, 164, 106, 0.42);
}

/* 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 620ms 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 850ms ease-out; }

.trk-form__hint {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.8;
  color: rgba(185, 176, 164, 0.5);
}

.trk-spin {
  display: inline-block;
  inline-size: 15px;
  block-size: 15px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(23, 19, 10, 0.25);
  border-block-start-color: #17130a;
  animation: trk-spin 640ms linear infinite;
}
@keyframes trk-spin { to { transform: rotate(360deg); } }

/* ── Ornament and the way out ── */
.trk-rule {
  display: grid;
  place-items: center;
  block-size: 1px;
  margin-block: 0.4rem;
  background: linear-gradient(90deg, transparent, rgba(197, 164, 106, 0.26), transparent);
}
.trk-rule span {
  inline-size: 7px;
  block-size: 7px;
  rotate: 45deg;
  background: rgba(197, 164, 106, 0.5);
  box-shadow: 0 0 0 4px var(--color-bg);
}

.trk-help {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem 0.9rem;
  padding: clamp(1rem, 3.5vw, 1.4rem);
  border-radius: var(--radius-md);
  border: 1px solid rgba(197, 164, 106, 0.12);
  background: var(--color-bg-elevated);
}

.trk-help__icon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  color: var(--color-gold-soft);
  border: 1px solid rgba(197, 164, 106, 0.24);
  background: var(--color-bg-panel);
}
.trk-help__icon svg { inline-size: 19px; block-size: 19px; }

.trk-help__body { display: grid; gap: 0.25rem; }

.trk-help__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
}

.trk-help__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: rgba(185, 176, 164, 0.68);
}

.trk-help__btn {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-block-start: 0.25rem;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-gold-soft);
  border: 1px solid rgba(197, 164, 106, 0.34);
  background: rgba(197, 164, 106, 0.08);
  transition:
    background var(--transition-medium),
    border-color var(--transition-medium),
    transform var(--transition-medium);
}
.trk-help__btn svg { inline-size: 17px; block-size: 17px; }
.trk-help__btn:hover {
  background: rgba(197, 164, 106, 0.16);
  border-color: rgba(197, 164, 106, 0.5);
  transform: translateY(-1px);
}
.trk-help__btn[hidden] { display: none; }

@media (min-width: 560px) {
  .trk-help { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .trk-help__btn { grid-column: auto; margin-block-start: 0; white-space: nowrap; }
}

/* ── Waiting for the lookup ── */
.trk-skel {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.1rem, 4vw, 1.6rem);
  border-radius: var(--radius-md);
  border: 1px solid rgba(197, 164, 106, 0.1);
  background: var(--color-bg-elevated);
  animation: trk-part-in 420ms ease both;
}

.trk-skel__head,
.trk-skel__block,
.trk-skel__row {
  border-radius: 8px;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.035) 30%,
      rgba(197, 164, 106, 0.12) 50%,
      rgba(255, 255, 255, 0.035) 70%)
    0 0 / 240% 100%;
  animation: trk-skel-sweep 1500ms ease-in-out infinite;
}
.trk-skel__head  { block-size: 34px; }
.trk-skel__block { block-size: 96px; animation-delay: 120ms; }
.trk-skel__row   { block-size: 16px; animation-delay: 240ms; }
.trk-skel__row--short { inline-size: 62%; animation-delay: 320ms; }

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

/* ── Result card ── */
.trk-result {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 4.5vw, 1.8rem) clamp(1.1rem, 4vw, 1.6rem);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--color-bg-elevated), var(--color-bg-elevated)) padding-box,
    linear-gradient(150deg,
      rgba(197, 164, 106, 0.42),
      rgba(197, 164, 106, 0.07) 42%,
      rgba(197, 164, 106, 0.09) 58%,
      rgba(197, 164, 106, 0.36)) border-box;
  box-shadow:
    0 34px 66px -44px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* The card assembles section by section rather than arriving all at once */
.trk-result > * {
  animation: trk-part-in 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--s, 0) * 95ms);
}

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

/* The note is the emotional beat of the page, so it resolves rather than slides */
.trk-result > .trk-msg {
  animation: trk-lux-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}

.trk-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block-end: 0.9rem;
  border-block-end: 1px solid rgba(197, 164, 106, 0.14);
}

.trk-result__ref {
  display: inline-block;
  padding: 0.24rem 0.6rem;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-gold-soft);
  letter-spacing: 0.09em;
  border: 1px solid rgba(197, 164, 106, 0.22);
  background: rgba(197, 164, 106, 0.07);
}

.trk-result__date {
  display: block;
  margin-block-start: 0.35rem;
  font-size: 0.76rem;
  color: rgba(185, 176, 164, 0.6);
}

.trk-badge {
  position: relative;
  overflow: hidden;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(197, 164, 106, 0.4);
  background: rgba(197, 164, 106, 0.12);
  color: var(--color-gold-soft);
}
.trk-badge::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -50%;
  inline-size: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: trk-sheen 1400ms 700ms ease-out both;
  pointer-events: 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; }

/* ── The note the customer reads first ── */
.trk-msg {
  --trk-msg-line: rgba(197, 164, 106, 0.2);
  --trk-msg-edge: var(--color-gold);
  --trk-msg-title: var(--color-gold-soft);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.4rem;
  padding: clamp(1rem, 3.5vw, 1.35rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--trk-msg-line);
  background: var(--color-bg-panel);
}

/* A gold edge on the reading side, the way a letter is sealed */
.trk-msg::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--trk-msg-edge);
  transform-origin: top;
  animation: trk-seal 620ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* A slow sheen crossing the card once on arrival */
.trk-msg::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: trk-sheen 1500ms 480ms ease-out both;
  pointer-events: none;
}

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

/* An engraved flourish where the emoji used to be */
.trk-msg__mark {
  position: relative;
  inline-size: 38px;
  block-size: 1px;
  margin-block-end: 0.7rem;
  background: linear-gradient(90deg, transparent, var(--trk-msg-edge));
  animation: trk-rule-out 820ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}
.trk-msg__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 5px;
  block-size: 5px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--trk-msg-edge);
}

.trk-msg__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.18rem, 4.4vw, 1.5rem);
  line-height: 1.55;
  color: var(--trk-msg-title);
  animation: trk-lux-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both;
}

.trk-msg__line {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 2;
  color: rgba(185, 176, 164, 0.8);
  animation: trk-lux-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(480ms + var(--l, 0) * 130ms);
}

/* The first line is the thank-you; it carries a touch more presence */
.trk-msg__line:first-of-type { color: rgba(214, 205, 192, 0.92); }

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

/* 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))); }
}

/* ── The journey ── */
.trk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.trk-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.8rem;
  /* Offset past the card's own cascade, so the journey reads as the next beat */
  --trk-beat: calc(280ms + var(--i, 0) * 130ms);
  animation: trk-step-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--trk-beat);
}

/* The rail joining one dot to the next */
.trk-step::before {
  content: "";
  position: absolute;
  inset-block-start: 2.35rem;
  inset-block-end: -0.5rem;
  inset-inline-start: 15px;
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.trk-step:last-child::before { display: none; }

/* 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%; }
}

.trk-step__dot {
  position: relative;
  z-index: 1;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--color-bg);
  color: var(--color-bg);
  transition: background-color var(--transition-medium), border-color var(--transition-medium);
  animation: trk-dot-in 640ms cubic-bezier(0.34, 1.32, 0.44, 1) both;
  animation-delay: calc(var(--trk-beat) + 110ms);
}
.trk-step__dot svg { inline-size: 13px; block-size: 13px; }

/* A hairline orbit set off the marker, the way a seal is ringed */
.trk-step__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(197, 164, 106, 0.12);
}

@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 420ms ease-out both;
  animation-delay: calc(var(--trk-beat) + 340ms);
}

@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__body { display: grid; gap: 0.28rem; align-content: center; }

.trk-step__label {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: rgba(185, 176, 164, 0.42);
  transition: color var(--transition-medium);
}
.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__hint {
  font-size: 0.78rem;
  line-height: 1.75;
  color: rgba(185, 176, 164, 0.45);
}
.trk-step.is-done .trk-step__hint { color: rgba(185, 176, 164, 0.62); }

.trk-step__at {
  justify-self: start;
  margin-block-start: 0.15rem;
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: rgba(197, 164, 106, 0.8);
  border: 1px solid rgba(197, 164, 106, 0.16);
}

@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);
  }
}

/* ── Detail panels ── */
.trk-panel {
  display: grid;
  gap: 0.55rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid rgba(197, 164, 106, 0.14);
}

.trk-panel__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(185, 176, 164, 0.55);
}

.trk-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  animation: trk-part-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(560ms + var(--i, 0) * 90ms);
}

.trk-item__img {
  inline-size: 48px;
  block-size: 60px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.9);
  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}
.trk-item:hover .trk-item__img {
  transform: scale(1.06);
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.95);
}
.trk-item__img--empty { display: block; }

.trk-item__text { display: grid; gap: 0.12rem; min-width: 0; }
.trk-item__name {
  font-size: 0.86rem;
  color: var(--color-charcoal);
  overflow-wrap: anywhere;
}
.trk-item__variant,
.trk-item__qty {
  font-size: 0.74rem;
  color: rgba(185, 176, 164, 0.6);
}
.trk-item__total {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-gold-soft);
  white-space: nowrap;
}

.trk-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: rgba(185, 176, 164, 0.75);
}
.trk-row--grand {
  padding-block-start: 0.5rem;
  border-block-start: 1px solid rgba(197, 164, 106, 0.16);
  font-size: 0.98rem;
  color: var(--color-gold-soft);
}

@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 (max-width: 420px) {
  .trk-item { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .trk-item__img { inline-size: 40px; block-size: 50px; }
}

@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;
  }

  .trk-msg::after,
  .trk-badge::after,
  .trk-kicker::before,
  .trk-kicker::after,
  .trk-form::before,
  .trk-form::after { animation: none; opacity: 1; transform: none; }

  .trk-kicker::after { transform: scaleX(-1); }
  .trk-msg::after,
  .trk-badge::after,
  .trk-form .btn--gold::after { display: none; }

  /* Plain ink beats a gradient frozen halfway through its sweep */
  .trk-title,
  .trk-row--grand strong:last-child {
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .trk-step__dot,
  .trk-item__img,
  .trk-help__btn,
  .trk-form { transition: none; }

  .trk-step.is-done .trk-step__dot svg path { stroke-dasharray: none; }
}

/* The gold CTAs shimmer and breathe forever. This sits last in the file so it
   outranks the three rules that switch those loops on. */
@media (prefers-reduced-motion: reduce) {
  .pdp-btn-buy-now,
  .pdp-checkout-submit,
  .os-btn-primary {
    animation: none;
    background-position: 50% center;
  }
  .pdp-btn-buy-now::after { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRIVACY POLICY
   Written phone-first: every base rule below is the phone layout, and the
   media queries only add room. Long-form Arabic is set in Alexandria rather
   than the site's Tajawal — at paragraph length its wider counters and more
   even rhythm hold the eye for far longer, which is the entire job of a page
   nobody opens for fun. Headings stay in the brand's El Messiri so the page
   still belongs to the shop.
   ═══════════════════════════════════════════════════════════════════════════ */
.pp {
  --pp-gold: #c5a46a;
  --pp-gold-lt: #e8d5b0;
  --pp-ink: rgba(226, 218, 205, 0.86);
  --pp-ink-dim: rgba(200, 190, 175, 0.62);
  --pp-line: rgba(197, 164, 106, 0.16);
  --pp-card: rgba(255, 255, 255, 0.028);

  max-width: 780px;
  margin-inline: auto;
  padding-inline: 1.15rem;
  padding-bottom: 3rem;
  font-family: "Alexandria", "Tajawal", sans-serif;
  color: var(--pp-ink);
}

/* ── Reading progress ─────────────────────────────────────────────────────
   Fixed to the viewport, not the page, so it survives the sticky header. */
.pp-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: rgba(197, 164, 106, 0.08);
}
.pp-progress__bar {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right center; /* RTL: fills from the right */
  background: linear-gradient(90deg,
    rgba(197, 164, 106, 0.5), var(--pp-gold-lt), rgba(197, 164, 106, 0.5));
  will-change: transform;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.pp-hero {
  text-align: center;
  padding: 2.25rem 0 1.75rem;
}

.pp-shield {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 1.35rem;
}
.pp-shield svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.pp-shield__ring {
  stroke: rgba(197, 164, 106, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 7;
  transform-origin: 60px 60px;
  animation: pp-ring 34s linear infinite;
}
.pp-shield__body {
  stroke: var(--pp-gold);
  stroke-width: 2.4;
  fill: rgba(197, 164, 106, 0.05);
  /* Drawn on rather than faded in: a shield that assembles itself reads as
     something being built around you. 430 comfortably exceeds the path. */
  stroke-dasharray: 430;
  stroke-dashoffset: 430;
  animation: pp-draw 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
.pp-shield__tick {
  stroke: var(--pp-gold-lt);
  stroke-width: 3;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: pp-draw 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards;
}
.pp-shield__glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(197, 164, 106, 0.2), transparent 72%);
  animation: pp-pulse 5.5s ease-in-out infinite;
}

@keyframes pp-draw { to { stroke-dashoffset: 0; } }
@keyframes pp-ring { to { transform: rotate(360deg); } }
@keyframes pp-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.pp-kicker {
  display: inline-block;
  font-family: "Alexandria", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--pp-gold);
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  background: rgba(197, 164, 106, 0.06);
}

.pp-title {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 7vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: #f4ecdd;
  margin: 0.85rem 0 0.7rem;
}

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

.pp-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.35rem;
  font-size: 0.74rem;
  color: rgba(200, 190, 175, 0.5);
}
.pp-stamp__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7bc47f;
  box-shadow: 0 0 0 0 rgba(123, 196, 127, 0.55);
  animation: pp-live 2.6s ease-out infinite;
}
@keyframes pp-live {
  0%   { box-shadow: 0 0 0 0 rgba(123, 196, 127, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(123, 196, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 196, 127, 0); }
}

/* ── The four promises ───────────────────────────────────────────────────
   One column on a phone. Two would halve the line length of Arabic that is
   already tight, and these four lines are the ones that actually reassure. */
.pp-promises {
  display: grid;
  gap: 0.7rem;
  margin: 0.5rem 0 2.5rem;
}

.pp-promise {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  background: var(--pp-card);
  transition: border-color 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* A slow gold wipe on hover, clipped by the card */
.pp-promise::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%,
    rgba(197, 164, 106, 0.09) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .pp-promise:hover { border-color: rgba(197, 164, 106, 0.4); transform: translateY(-3px); }
  .pp-promise:hover::before { transform: translateX(100%); }
  .pp-promise:hover .pp-promise__icon { color: var(--pp-gold-lt); transform: scale(1.08); }
}

.pp-promise__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.75rem;
  border-radius: 12px;
  color: var(--pp-gold);
  background: rgba(197, 164, 106, 0.09);
  border: 1px solid rgba(197, 164, 106, 0.18);
  transition: color 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pp-promise__icon svg { width: 21px; height: 21px; }

.pp-promise__title {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #efe4d1;
  margin: 0 0 0.35rem;
}
.pp-promise__body {
  position: relative;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--pp-ink-dim);
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.pp-body { display: flex; flex-direction: column; gap: 1rem; }

.pp-sec {
  padding: 1.35rem 1.2rem;
  border: 1px solid rgba(197, 164, 106, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  /* Offsets the sticky rail so an anchored jump does not hide the heading */
}

.pp-sec__head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: #f0e6d3;
  line-height: 1.4;
}
.pp-sec__num {
  flex: none;
  font-family: "Alexandria", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pp-gold);
  padding: 0.2rem 0.45rem;
  border-radius: 7px;
  background: rgba(197, 164, 106, 0.1);
  border: 1px solid rgba(197, 164, 106, 0.2);
}

.pp-sec__body { font-size: 0.88rem; line-height: 2; color: var(--pp-ink); }
.pp-sec__body p { margin: 0 0 0.85rem; }
.pp-sec__body p:last-child { margin-bottom: 0; }
.pp-sec__body strong { color: var(--pp-gold-lt); font-weight: 600; }

.pp-list { margin: 0 0 0.9rem; padding: 0; list-style: none; }
.pp-list li {
  position: relative;
  padding-inline-start: 1.15rem;
  margin-bottom: 0.5rem;
}
.pp-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--pp-gold);
  transform: rotate(45deg);
}
.pp-list--check li::before {
  content: "✓";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  color: #7bc47f;
  font-weight: 700;
}

.pp-note {
  padding: 0.75rem 0.9rem;
  border-inline-start: 2px solid rgba(197, 164, 106, 0.45);
  border-radius: 0 10px 10px 0;
  background: rgba(197, 164, 106, 0.05);
  font-size: 0.83rem;
  color: rgba(214, 204, 189, 0.8);
}

/* A two-column table would be unreadable at 390px, so it stacks into pairs */
.pp-table {
  margin-bottom: 0.9rem;
  border: 1px solid var(--pp-line);
  border-radius: 12px;
  overflow: hidden;
}
.pp-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
}
.pp-row + .pp-row { border-top: 1px solid rgba(197, 164, 106, 0.08); }
.pp-row span:first-child { color: var(--pp-gold-lt); font-weight: 600; }
.pp-row span:last-child { color: var(--pp-ink-dim); }
.pp-row--head { display: none; }

/* ── Closing call to action ──────────────────────────────────────────────── */
.pp-cta {
  margin-top: 2.25rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border: 1px solid var(--pp-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(197, 164, 106, 0.09), transparent 62%),
    rgba(255, 255, 255, 0.02);
}
.pp-cta__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: #f0e6d3;
  margin: 0 0 0.5rem;
}
.pp-cta__body {
  font-size: 0.87rem;
  line-height: 1.85;
  color: var(--pp-ink-dim);
  margin: 0 0 1.35rem;
}

/* ── Reveal ──────────────────────────────────────────────────────────────
   The hidden state is scoped to .pp--anim, which JS adds only once the
   observer is live. If the script never runs the page is simply readable —
   the one outcome a policy page must never get wrong. */
.pp--anim .pp-reveal {
  opacity: 0;
  transform: translateY(20px);
}
.pp--anim .pp-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .pp { padding-inline: 1.5rem; }
  .pp-hero { padding: 3rem 0 2rem; }
  .pp-shield { width: 108px; height: 108px; }
  .pp-promises { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .pp-sec { padding: 1.6rem 1.5rem; }
  .pp-sec__head { font-size: 1.15rem; }
  .pp-sec__body { font-size: 0.9rem; }
  .pp-row {
    grid-template-columns: minmax(9rem, 0.8fr) 1.2fr;
    gap: 1rem;
    align-items: baseline;
  }
  .pp-row--head {
    display: grid;
    background: rgba(197, 164, 106, 0.07);
    font-size: 0.74rem;
  }
  .pp-row--head span { color: var(--pp-gold) !important; font-weight: 600 !important; }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .pp { padding-inline: 0; }
  .pp-promises { grid-template-columns: repeat(4, 1fr); }
  .pp-promise { padding: 1.25rem; }
  .pp-cta { padding: 2.5rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Nothing here carries meaning, so all of it stops — but the shield must end
   drawn, not half-drawn, and the reveal class is never applied at all. */
@media (prefers-reduced-motion: reduce) {
  .pp-shield__body,
  .pp-shield__tick { animation: none; stroke-dashoffset: 0; }
  .pp-shield__ring,
  .pp-shield__glow,
  .pp-stamp__dot { animation: none; }
  .pp-promise,
  .pp-promise::before,
  .pp-promise__icon { transition: none; }
  .pp-progress { display: none; }
}

/* reading measure */
@media (min-width: 600px) {
  /* Measured, not estimated: the full-width column ran to 79 characters a line
     on tablet and 105 on desktop, against a 75 ceiling for comfortable reading.
     Capping the column brings tablet to ~72. Phone sits at 36 and is left
     alone. */
  .pp .pp-body {
    max-width: 40rem;
  }
}

@media (min-width: 900px) {
  /* Desktop has the room to spend on size as well as measure; this lands a
     line at ~62 characters. */
  .pp .pp-sec__body,
  .pp .pp-sec__body li {
    font-size: 0.97rem;
    line-height: 2.05;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TERMS & CONDITIONS  (.tc-*)
   Mobile-first: every base rule below is the phone layout. The 600px and
   900px blocks only ever add room. A contract should look like one — hence
   numbered articles, a sealed document, and a drawn flourish.
   ═══════════════════════════════════════════════════════════════════════ */
.tc {
  --tc-gold: #c5a46a;
  --tc-gold-lt: #e8d5b0;
  --tc-ink: rgba(233, 227, 216, 0.9);
  --tc-ink-dim: rgba(201, 191, 177, 0.62);
  --tc-line: rgba(197, 164, 106, 0.15);
  --tc-card: rgba(255, 255, 255, 0.022);
  --tc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Alexandria holds its rhythm across paragraphs better than the body face;
     headings stay on the brand serif. */
  font-family: "Alexandria", "Tajawal", sans-serif;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: 1.15rem;
  padding-bottom: 3.5rem;
  color: var(--tc-ink);
}

/* ── Reading progress ─────────────────────────────────────────────────────
   Fixed, and scaled from the inline-end edge so it fills right-to-left. */
.tc-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.tc-progress__bar {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(197, 164, 106, 0), var(--tc-gold), var(--tc-gold-lt));
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.tc-hero {
  text-align: center;
  padding: 2.25rem 0 1.75rem;
}

.tc-doc {
  width: 92px;
  height: 95px;
  margin: 0 auto 1.1rem;
  color: var(--tc-gold);
}
.tc-doc svg { width: 100%; height: 100%; overflow: visible; }

/* Base state is the finished state; the hidden state lives in the keyframes.
   `both` holds it through the delay, so nothing can strand the art undrawn. */
.tc-doc__sheet,
.tc-doc__fold,
.tc-doc__line,
.tc-doc__tick {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: tc-draw 900ms var(--tc-ease) both;
}
.tc-doc__sheet { animation-duration: 1100ms; }
.tc-doc__fold { animation-delay: 700ms; animation-duration: 400ms; }
.tc-doc__line {
  opacity: 0.55;
  animation-delay: calc(950ms + var(--i) * 130ms);
  animation-duration: 380ms;
}
.tc-doc__tick { animation-delay: 2050ms; animation-duration: 420ms; }

.tc-doc__seal {
  /* fill-box keeps the stamp scaling about the seal, not the whole canvas */
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  animation: tc-stamp 620ms var(--tc-ease) 1650ms both;
}
.tc-doc__halo {
  fill: rgba(197, 164, 106, 0.13);
  animation: tc-halo 3.6s ease-in-out 2.3s infinite;
}
.tc-doc__rim { opacity: 0.85; animation: tc-spin 24s linear 2.3s infinite; transform-box: fill-box; transform-origin: center; }
.tc-doc__disc { opacity: 0.5; }

.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-flourish {
  display: block;
  width: min(260px, 74%);
  height: auto;
  margin: 0.7rem auto 0.3rem;
  color: rgba(197, 164, 106, 0.55);
}
.tc-flourish__line,
.tc-flourish__curl {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: tc-draw 900ms var(--tc-ease) 820ms both;
}
.tc-flourish__curl { animation-delay: 1500ms; animation-duration: 520ms; }
.tc-flourish__gem {
  fill: rgba(197, 164, 106, 0.9);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: tc-gem 620ms var(--tc-ease) 1280ms both;
}

.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-stamp__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6bbf7a;
  box-shadow: 0 0 0 0 rgba(107, 191, 122, 0.55);
  animation: tc-live 2.4s ease-out infinite;
}

/* ── Summary cards ───────────────────────────────────────────────────────
   One column on the phone: four stacked cards read faster than a 2x2 grid of
   clipped text at 390px. */
.tc-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 1.5rem 0 2.25rem;
}
.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 420ms var(--tc-ease), transform 420ms var(--tc-ease);
}
.tc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(197, 164, 106, 0.11), transparent 62%);
  opacity: 0;
  transition: opacity 460ms var(--tc-ease);
}
.tc-card:hover,
.tc-card:focus-within {
  border-color: rgba(197, 164, 106, 0.34);
  transform: translateY(-3px);
}
.tc-card:hover::before,
.tc-card:focus-within::before { opacity: 1; }

.tc-card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--tc-gold);
  background: rgba(197, 164, 106, 0.1);
  border: 1px solid var(--tc-line);
  transition: transform 520ms var(--tc-ease);
}
.tc-card__icon svg { width: 21px; height: 21px; }
.tc-card:hover .tc-card__icon { transform: scale(1.08) rotate(-5deg); }

.tc-card__title {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.3rem;
  color: var(--tc-gold-lt);
}
.tc-card__body {
  position: relative;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--tc-ink-dim);
}

/* ── Articles ────────────────────────────────────────────────────────────── */
.tc-body { display: flex; flex-direction: column; gap: 0.9rem; }

.tc-art {
  padding: 1.35rem 1.2rem;
  border: 1px solid var(--tc-line);
  border-radius: 18px;
  background: var(--tc-card);
}

.tc-art__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
}
.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-art__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(232, 213, 176, 0.5), transparent 80%);
  transform: translateX(-120%);
}
.tc-art__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tc-gold-lt);
}

.tc-art__body { font-size: 0.88rem; line-height: 2; color: var(--tc-ink-dim); }
.tc-art__body p { margin: 0 0 0.85rem; }
.tc-art__body p:last-child { margin-bottom: 0; }
.tc-art__body strong { color: var(--tc-ink); font-weight: 600; }

.tc-list { margin: 0 0 0.85rem; padding: 0; list-style: none; }
.tc-list li {
  position: relative;
  padding-inline-start: 1.15rem;
  margin-bottom: 0.5rem;
}
.tc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tc-gold);
  opacity: 0.6;
}
.tc-list--yes li::before,
.tc-list--no li::before {
  width: auto;
  height: auto;
  border-radius: 0;
  top: 0;
  font-size: 0.9em;
  font-weight: 700;
  opacity: 1;
}
.tc-list--yes li::before { content: "✓"; color: #6bbf7a; background: none; }
.tc-list--no li::before { content: "✕"; color: #d98b8b; background: none; }

/* A figure the reader will be held to should not hide inside a sentence. */
.tc-k {
  display: inline-block;
  padding: 0.05em 0.45em;
  margin-inline: 0.12em;
  border-radius: 6px;
  background: rgba(197, 164, 106, 0.14);
  color: var(--tc-gold-lt);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.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;
}

.tc-note,
.tc-warn {
  position: relative;
  margin: 0.9rem 0 0;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  font-size: 0.83rem;
  line-height: 1.9;
  border-inline-start: 2px solid var(--tc-gold);
  background: rgba(197, 164, 106, 0.06);
  color: var(--tc-ink-dim);
}
.tc-warn {
  border-inline-start-color: #d9a441;
  background: rgba(217, 164, 65, 0.07);
  color: rgba(233, 210, 170, 0.8);
}

/* ── 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);
}
.tc-cta__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--tc-gold-lt);
}
.tc-cta__body {
  margin: 0 auto 1.25rem;
  max-width: 26rem;
  font-size: 0.86rem;
  line-height: 1.9;
  color: var(--tc-ink-dim);
}

/* ── 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 640ms var(--tc-ease) var(--d, 0ms),
    transform 640ms var(--tc-ease) var(--d, 0ms);
}
.tc--anim .tc-reveal.is-in { opacity: 1; transform: none; }

.tc--anim .tc-art__title { position: relative; }
.tc--anim .tc-art .tc-art__badge::after { transition: transform 900ms var(--tc-ease) 260ms; }
.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); }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .tc { padding-inline: 1.5rem; }
  .tc-hero { padding: 3rem 0 2rem; }
  .tc-doc { width: 108px; height: 112px; }
  .tc-cards { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .tc-art { padding: 1.6rem 1.5rem; }
  .tc-art__head { flex-direction: row; align-items: center; gap: 0.75rem; }
  .tc-art__title { font-size: 1.2rem; }
  .tc-art__body { font-size: 0.9rem; }
  /* Measured, not estimated: the full-width column runs past 75 characters a
     line without this cap. */
  .tc-body { max-width: 40rem; margin-inline: auto; }
  .tc-cta { max-width: 40rem; margin-inline: auto; }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .tc { padding-inline: 0; }
  .tc-cards { grid-template-columns: repeat(4, 1fr); }
  .tc-card { padding: 1.25rem; }
  .tc-art__body,
  .tc-art__body li { font-size: 0.97rem; line-height: 2.05; }
  .tc-cta { padding: 2.5rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Nothing here carries meaning, so all of it stops — but the document must
   end drawn and the seal present, never mid-stamp. */
@media (prefers-reduced-motion: reduce) {
  .tc-doc__sheet,
  .tc-doc__fold,
  .tc-doc__line,
  .tc-doc__tick,
  .tc-flourish__line,
  .tc-flourish__curl { animation: none; stroke-dashoffset: 0; }
  .tc-flourish__gem { animation: none; opacity: 1; }
  .tc-doc__seal { animation: none; opacity: 1; }
  .tc-doc__halo,
  .tc-doc__rim,
  .tc-stamp__dot { animation: none; }
  .tc-card,
  .tc-card::before,
  .tc-card__icon,
  .tc-art__badge::after { transition: none; }
  .tc-progress { display: none; }
}