/* ===========================================================================
   Page compositions — hero, product page, cart, checkout, account, footer
   =========================================================================== */

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

.hero {
  position: relative;
  min-block-size: clamp(560px, 92svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-900);
  color: var(--cream-400);
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  /* A slow drift keeps a still photograph alive without asking for attention. */
  animation: hero-drift 24s var(--ease) infinite alternate;
}
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__media video { animation: none; transform: scale(1.02); }
}

.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 28, 17, 0.92) 0%, rgba(8, 18, 13, 0.62) 40%, rgba(14, 16, 15, 0.3) 100%);
}

.hero__inner { padding-block: clamp(var(--space-7), 9vh, var(--space-10)); inline-size: 100%; }
/* `ch` is a poor measure for Arabic — the zero glyph is narrow, so 34ch
   collapses to ~320px and forces a display headline into three lines. Hero
   measures are em-based instead, relative to the type they hold. */
.hero__content { max-inline-size: min(100%, 44rem); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-300);
  margin-block-end: var(--space-4);
}
.hero__eyebrow::before { content: ""; inline-size: 32px; block-size: 1px; background: var(--gold-500); }

/* Amiri carries tall ascenders and low-hanging marks, so Arabic display type
   needs more leading than a Latin headline at the same size. The measure is
   deliberately short: the line should break where the phrase breaks. */
.hero__title {
  font-size: var(--step-hero);
  line-height: 1.28;
  max-inline-size: 8em;
  color: var(--cream-400);
  margin-block-end: var(--space-4);
}

[lang="en"] .hero__title { line-height: 1.06; max-inline-size: 9em; }

.hero__lede {
  font-size: var(--step-subhead);
  line-height: var(--leading-snug);
  color: rgba(243, 232, 200, 0.82);
  max-inline-size: 30em;
  margin-block-end: var(--space-6);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--gutter);
  display: none;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wider);
  color: rgba(243, 232, 200, 0.7);
  writing-mode: vertical-rl;
}
@media (min-width: 1024px) { .hero__scroll { display: flex; } }

/* Entrance: the headline settles, then the supporting lines follow. */
.hero__content > * { animation: rise var(--dur-slow) var(--ease-out) backwards; }
.hero__content > *:nth-child(1) { animation-delay: 80ms; }
.hero__content > *:nth-child(2) { animation-delay: 180ms; }
.hero__content > *:nth-child(3) { animation-delay: 280ms; }
.hero__content > *:nth-child(4) { animation-delay: 380ms; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* ---- editorial split ---------------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-6), 5vw, var(--space-9)); }
  .split--reverse > *:first-child { order: 2; }
}

.split__media { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.split__media img, .split__media video { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img, .split__media--wide video { aspect-ratio: 3 / 2; }

.video-mute {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-pill);
  background: rgba(14, 16, 15, 0.45);
  color: var(--cream-400);
  transition: background var(--dur-fast) var(--ease);
}
.video-mute:hover { background: rgba(14, 16, 15, 0.65); }
.video-mute__icon--on { display: none; }
.video-mute[aria-pressed="false"] .video-mute__icon--off { display: none; }
.video-mute[aria-pressed="false"] .video-mute__icon--on { display: block; }

/* ---- marquee of values -------------------------------------------------- */

.value-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  text-align: center;
}
@media (min-width: 900px) { .value-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.value__icon { color: var(--gold-600); margin-inline: auto; margin-block-end: var(--space-3); }
.value__title { font-size: var(--step-small); letter-spacing: var(--tracking-wide); margin-block-end: var(--space-1); }
.value__text { font-size: var(--step-micro); color: var(--text-secondary); line-height: var(--leading-snug); }
.dark-section .value__text { color: var(--text-on-dark-muted); }

/* ---- breadcrumb --------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-micro);
  color: var(--text-muted);
  padding-block: var(--space-4);
}
.crumbs a:hover { color: var(--text-primary); }
.crumbs li { display: flex; align-items: center; gap: var(--space-2); }
/* The separator points the way the script runs. */
.crumbs li + li::before { content: "\2039"; color: var(--ink-300); }
[dir="ltr"] .crumbs li + li::before { content: "\203A"; }
.crumbs [aria-current] { color: var(--text-primary); }

/* ---- page head ---------------------------------------------------------- */

.page-head { padding-block: var(--space-6) var(--space-5); }
.page-head__title { font-size: var(--step-display); }
.page-head__lede { margin-block-start: var(--space-3); color: var(--text-secondary); max-inline-size: var(--measure); }
.page-head__count { font-size: var(--step-small); color: var(--text-muted); margin-block-start: var(--space-2); }

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

.listing { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .listing { grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-8); }
}

.listing__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block: 1px solid var(--line-soft);
  margin-block-end: var(--space-5);
  position: sticky;
  inset-block-start: var(--header-h);
  background: var(--surface);
  z-index: 5;
}

.listing__count { font-size: var(--step-small); color: var(--text-muted); }

/* ---- filters ------------------------------------------------------------ */

.filters { display: none; }
@media (min-width: 1024px) { .filters { display: block; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); } }

.filter-group { padding-block: var(--space-5); border-block-end: 1px solid var(--line-soft); }
.filter-group:first-child { padding-block-start: 0; }
.filter-group__title {
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-block-end: var(--space-4);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--step-small);
  cursor: pointer;
}
.filter-option input { accent-color: var(--emerald-700); inline-size: 18px; block-size: 18px; flex: none; }
.filter-option__count { margin-inline-start: auto; color: var(--text-muted); font-size: var(--step-micro); }

.price-range { display: flex; align-items: center; gap: var(--space-3); }
.price-range .input { min-block-size: 42px; text-align: center; }

/* On phones filters arrive as a bottom sheet, which is where thumbs are. */
.sheet {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-drawer);
  max-block-size: 86svh;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  box-shadow: var(--shadow-lg);
}
.sheet[data-shown] { transform: translateY(0); visibility: visible; pointer-events: auto; }
.sheet__grip {
  inline-size: 40px; block-size: 4px;
  background: var(--ink-200);
  border-radius: var(--radius-pill);
  margin: var(--space-3) auto var(--space-2);
  flex: none;
}
.sheet__body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.sheet__foot {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line-soft);
}

.mobile-tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (min-width: 1024px) { .mobile-tools { display: none; } }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-4); }

/* ---- product detail ----------------------------------------------------- */

.pdp { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); }
}

.gallery { display: grid; gap: var(--space-3); }
@media (min-width: 900px) {
  /* Only reserve the thumbnail rail when there are thumbnails — a
     single-image product gets the full width for its photograph. */
  .gallery--with-thumbs { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
  .gallery--with-thumbs .gallery__thumbs { order: -1; }
}

.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  cursor: zoom-in;
}
.gallery__stage img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
}
.gallery__stage img.is-active { opacity: 1; }

.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gallery__thumbs { flex-direction: column; overflow: visible; } }

.gallery__thumb {
  flex: none;
  inline-size: 68px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity: 0.6;
}
@media (min-width: 900px) { .gallery__thumb { inline-size: 84px; } }
.gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--emerald-700); opacity: 1; }
.gallery__thumb:hover { opacity: 1; }

.pdp__info { position: relative; }
@media (min-width: 900px) { .pdp__info { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); } }

.pdp__kicker {
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-600);
}
.pdp__title { font-size: var(--step-display); margin-block: var(--space-2) var(--space-3); }

.rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step-small); color: var(--text-secondary); }
.rating__stars { display: inline-flex; gap: 2px; color: var(--gold-500); }

.pdp__price { margin-block: var(--space-4); }

.pdp__actions { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.pdp__buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  block-size: 48px;
  overflow: hidden;
}
.qty button {
  inline-size: 44px; block-size: 100%;
  display: grid; place-items: center;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.qty button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text-primary); }
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty input {
  inline-size: 46px;
  text-align: center;
  border: 0;
  background: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--step-micro); color: var(--text-muted); }

/* ---- accordion ---------------------------------------------------------- */

.accordion { border-block-start: 1px solid var(--line-soft); }
.accordion__item { border-block-end: 1px solid var(--line-soft); }
.accordion__trigger {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-size: var(--step-small);
  letter-spacing: var(--tracking-wide);
  text-align: start;
}
.accordion__trigger .chev { transition: transform var(--dur) var(--ease); flex: none; }
.accordion__trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Height is animated with max-height, set from the content's real height in
   JS. The grid 0fr→1fr trick is tidier, but engines that cannot interpolate
   fr tracks stick at the start value and the panel never opens at all —
   which silently hides the description, shipping and returns copy. */
.accordion__panel {
  max-block-size: 0;
  overflow: hidden;
  transition: max-block-size var(--dur) var(--ease);
}
.accordion__panel > div { overflow: hidden; }

/* Without JS the panel still opens — it just does not animate. */
.no-js .accordion__panel,
.accordion__panel[data-shown] { max-block-size: none; }
.accordion__content {
  padding-block-end: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--step-small);
  line-height: var(--leading-relaxed);
}
.accordion__content p + p { margin-block-start: var(--space-3); }

/* ---- sticky mobile buy bar ---------------------------------------------- */

/* One add-to-cart control on a phone, not two: the bar used to only slide
   in once the inline button above had scrolled out of view, which meant
   both existed on screen depending on scroll position. Now it is simply
   the only one on mobile — always present, nothing to reveal — and the
   inline button next to the quantity stepper is hidden at that width.
   Desktop is unaffected: the bar stays display:none there and the inline
   button is the only control, same as before. */
.buy-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
  padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  background: rgba(253, 251, 247, 0.96);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--line-soft);
}
@media (min-width: 900px) { .buy-bar { display: none; } }
.buy-bar__price { flex: none; }
.buy-bar .btn { flex: 1; }

@media (max-width: 899px) {
  .pdp__buy-row { grid-template-columns: auto; justify-content: start; }
  .pdp__buy-row [data-add-to-cart] { display: none; }
}

/* ---- set builder -------------------------------------------------------- */

.set-page { padding-block-end: 96px; }

.set-hero { text-align: center; padding-block: var(--space-2) var(--space-3); }
.set-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-small);
  color: var(--gold-600);
}
.set-hero__kicker::before, .set-hero__kicker::after {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background: var(--gold-500);
}
.set-hero__title { font-size: var(--step-title); line-height: 1.2; margin-block: var(--space-1) 0; }

/* Where the set stands: a step for each piece, filled as they are chosen. */
.set-progress { display: grid; justify-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.set-progress__status { font-family: var(--font-display); font-size: var(--step-subhead); }
.set-progress__status.is-complete { color: var(--emerald-700); }

.set-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.set-step {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--gold-500);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--gold-600);
  font: inherit;
  font-size: var(--step-small);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.set-step.is-next { border-style: solid; box-shadow: 0 0 0 4px rgba(194, 163, 106, .2); }
.set-step.is-filled { border: 2px solid var(--gold-500); cursor: pointer; }
.set-step:disabled { cursor: default; }
.set-step.is-filled .set-step__num { display: none; }
.set-step__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 40%;
  background: var(--surface-sunken);
}
.set-step__img[hidden] { display: none; }

/* The products, one card at a time: swipe, or use the arrows on a big screen. */
.set-stage { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.set-stage__rail { position: relative; }

.set-track {
  --slide: min(64vw, 270px);
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Half the rail less half a card on each side, so the first and last can sit in the middle. */
  padding-inline: calc(50% - var(--slide) / 2);
  padding-block: var(--space-2) var(--space-3);
}
.set-track::-webkit-scrollbar { display: none; }
/* On a wide screen several cards show at once, starting from the edge. */
@media (min-width: 768px) {
  .set-track {
    --slide: 232px;
    gap: var(--space-5);
    padding-inline: 0;
    scroll-snap-type: x proximity;
  }
  .pick { scroll-snap-align: start; }
}

.pick {
  position: relative;
  flex: 0 0 var(--slide);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pick:not(.is-closed):not(.is-sold-out):hover { transform: translateY(-2px); }
.pick:has(input:checked) { border-color: var(--emerald-700); box-shadow: 0 0 0 1px var(--emerald-700), var(--shadow-md); }
.pick:has(input:focus-visible) { outline: 2px solid var(--emerald-700); outline-offset: 3px; }

.pick__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.pick__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Which step this one fills, once it is chosen. */
.pick__badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--emerald-700);
  color: var(--cream-400);
  font-size: var(--step-small);
}
.pick:has(input:checked) .pick__badge { display: inline-flex; }

.pick__body { display: grid; flex: 1; align-content: start; justify-items: center; gap: 2px; min-inline-size: 0; text-align: center; }
.pick__kicker { font-size: var(--step-micro); color: var(--gold-600); }
.pick__name {
  max-inline-size: 100%;
  font-family: var(--font-display);
  font-size: var(--step-heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* The one button on the card: it says what tapping the card will do. */
.pick__action {
  display: grid;
  place-items: center;
  min-block-size: 42px;
  border-radius: var(--radius-md);
  background: var(--emerald-700);
  color: var(--cream-400);
  font-size: var(--step-small);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pick__action-add, .pick__action-on, .pick__action-full, .pick__action-out { display: none; align-items: center; gap: 6px; }
.pick__action-add { display: inline-flex; }

.pick:has(input:checked) .pick__action { background: transparent; color: var(--emerald-700); box-shadow: inset 0 0 0 1px var(--emerald-700); }
.pick:has(input:checked) .pick__action-add { display: none; }
.pick:has(input:checked) .pick__action-on { display: inline-flex; }

/* A full set closes off the rest; a product the shop has run out of stays on show. */
.pick.is-closed, .pick.is-sold-out { cursor: not-allowed; box-shadow: none; }
.pick.is-closed .pick__media, .pick.is-sold-out .pick__media { opacity: .5; }
.pick.is-closed .pick__action, .pick.is-sold-out .pick__action { background: var(--ink-100); color: var(--ink-400); }
.pick.is-closed .pick__action-add, .pick.is-sold-out .pick__action-add { display: none; }
.pick.is-closed .pick__action-full { display: inline-flex; }
.pick.is-sold-out .pick__action-full { display: none; }
.pick.is-sold-out .pick__action-out { display: inline-flex; }

.set-nav {
  position: absolute;
  inset-block-start: 38%;
  z-index: 2;
  display: none;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink-900);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.set-nav:disabled { opacity: .35; cursor: default; }
.set-nav--prev { inset-inline-start: 0; }
.set-nav--next { inset-inline-end: 0; }
@media (min-width: 768px) { .set-nav:not([hidden]) { display: grid; } }
/* The chevron points down; turn it toward the side it moves to. */
.set-nav--prev svg { transform: rotate(90deg); }
.set-nav--next svg { transform: rotate(-90deg); }
[dir="rtl"] .set-nav--prev svg { transform: rotate(-90deg); }
[dir="rtl"] .set-nav--next svg { transform: rotate(90deg); }

.set-stage__count {
  text-align: center;
  font-size: var(--step-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .set-stage__count { display: none; } }

/* The bar that stays in view: the price, and the same green button as any other add to cart. */
.bundle-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
  /* Edge to edge, like the product page's bar. */
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-3) var(--gutter);
  padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  background: rgba(253, 251, 247, 0.96);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--line-soft);
}
.bundle-bar .price { flex: none; white-space: nowrap; }
.bundle-bar .btn { flex: 1; min-inline-size: 0; line-height: 1.3; }
/* On wider screens the round chat button floats over the bar's start corner, so the content starts beside it. */
@media (min-width: 900px) {
  .bundle-bar { padding-inline-start: calc(var(--gutter) + 72px); }
  .bundle-bar .btn { flex: 0 1 360px; margin-inline-start: auto; }
}

/* What the shopper chose on a bag line: a size, the pieces of a set. */
.line-choices {
  margin-block: var(--space-1) 0;
  font-size: var(--step-small);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.line-choices__group { color: var(--text-muted, var(--text-secondary)); }

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

.cart-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-8); }
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .cart-line { grid-template-columns: 120px minmax(0, 1fr); } }

.cart-line__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.cart-line__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.cart-line__top { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.cart-line__name { font-family: var(--font-display); font-size: var(--step-subhead); }
.cart-line__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
  flex-wrap: wrap;
}

.summary {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
@media (min-width: 1024px) { .summary { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); } }

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--step-small);
}
.summary__row--total {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-4);
  font-size: var(--step-subhead);
}
.summary__row dt { color: var(--text-secondary); }
.summary__row dd { font-variant-numeric: tabular-nums; }
.summary__row--discount dd { color: var(--emerald-700); }

.voucher-form { display: flex; gap: var(--space-2); margin-block: var(--space-4); }
.voucher-form .input { min-block-size: 44px; }

/* Sticky inside its own panel on desktop — that is all it needs there. */
.sticky-cta {
  position: sticky;
  inset-block-end: 0;
  padding-block: var(--space-3);
  padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--surface) 62%, transparent);
  z-index: 20;
}
@media (min-width: 1024px) { .sticky-cta { position: static; background: none; padding-block-end: 0; } }

/* On phones the checkout action leaves the summary box entirely and becomes a
   fixed bar, so it is reachable from anywhere in a long cart rather than only
   when the totals happen to be on screen. */
.checkout-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
  padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  background: rgba(253, 251, 247, 0.97);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--line);
}
.checkout-bar__total { flex: none; line-height: 1.2; }
.checkout-bar__label {
  display: block;
  font-size: var(--step-micro);
  color: var(--text-secondary);
}
.checkout-bar .btn { flex: 1; }

@media (min-width: 1024px) { .checkout-bar { display: none; } }

/* The cart's summary box: desktop checks out from the box (there is no fixed bar),
   phones check out from the fixed bar and the box offers "continue shopping"
   instead — and the plain link under the lines would then be a second copy of it. */
.cart-cta__shop { display: none; }
@media (max-width: 1023px) {
  .cart-cta__checkout, .cart-keep-shopping { display: none; }
  .cart-cta__shop { display: inline-flex; }
}

/* Keep the last of the page clear of the fixed bar. */
@media (max-width: 1023px) {
  body:has(.checkout-bar) { padding-block-end: 84px; }
  /* The floating WhatsApp button must not sit on top of the checkout action. */
  body:has(.checkout-bar) .wa-float { inset-block-end: calc(84px + var(--space-3)); }
}

/* ---- checkout ----------------------------------------------------------- */

.steps { margin-block-end: var(--space-7); }
.steps__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step { position: relative; }

/* The rail runs from this step's marker back to the previous one, behind both,
   so the row reads as one connected track at any width. */
.step + .step::before {
  content: "";
  position: absolute;
  inset-block-start: 15px;
  inset-inline-end: calc(50% + 23px);
  inline-size: calc(100% - 46px);
  block-size: 1px;
  background: var(--line);
}

.step__link {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-1);
  color: var(--text-secondary);
  text-decoration: none;
}
.step__link:hover,
.step__link:focus-visible { color: var(--text-primary); }

.step__num {
  inline-size: 26px; block-size: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.steps .step__num {
  inline-size: 30px; block-size: 30px;
  border-color: var(--emerald-700);
  background: var(--emerald-700);
  color: var(--cream-400);
  font-size: var(--step-micro);
}

.step__label {
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.fieldset { border: 0; padding: 0; margin-block-end: var(--space-7); }
/* `display:flex` directly on a <legend> is inconsistently supported —
   Safari in particular has misplaced it flush against the viewport edge,
   ignoring the fieldset's own inline inset. The flex layout now lives on
   a plain inner span instead, so the legend itself stays a normal,
   unstyled block every browser positions the same way. */
.fieldset__legend { display: block; margin-block-end: var(--space-5); inline-size: 100%; }
.fieldset__legend-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-heading);
}
.fieldset__legend-inner::after { content: ""; flex: 1; block-size: 1px; background: var(--line-soft); }

.grid-2 { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-2 .span-2 { grid-column: 1 / -1; }

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--ink-300); }
.choice:has(input:checked) { border-color: var(--emerald-700); background: var(--emerald-050); }
.choice input { accent-color: var(--emerald-700); inline-size: 18px; block-size: 18px; flex: none; }
.choice__label { font-size: var(--step-small); }
.choice__note { font-size: var(--step-micro); color: var(--text-muted); }
.choice img { block-size: 22px; inline-size: auto; margin-inline-start: auto; }

/* Payment step: the two payment *types* (online / cash) read as the primary
   choice, side by side rather than stacked in the same list as the card
   options nested under "online" — which used to sit at the same visual
   weight as everything else, telling indentation alone to carry the
   "these belong to online payment" relationship. A shaded panel now does
   that instead, with the card options themselves in a tighter 2-up grid
   rather than five full-width rows. */
.payment-primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.choice--primary { font-weight: 500; }

.payment-methods {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.payment-methods__label {
  font-size: var(--step-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}
.payment-methods__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
}
.choice--sm { padding: var(--space-3); background: var(--surface-raised); }
.choice--sm .choice__label { font-size: var(--step-micro); }

/* Phone entry: the +965 prefix is fixed and never editable. */
.phone-field { display: flex; align-items: stretch; }
.phone-field__prefix {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid var(--line);
  border-inline-end: 0;
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-small);
  color: var(--text-secondary);
  white-space: nowrap;
}
.phone-field .input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  letter-spacing: 0.06em;
}

/* ---- account ------------------------------------------------------------ */

.account { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .account { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); } }

.account-nav { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-block-end: var(--space-2); }
.account-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .account-nav { flex-direction: column; overflow: visible; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-5)); } }

.account-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--step-small);
  white-space: nowrap;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.account-nav a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.account-nav a[aria-current="page"] { background: var(--ink-900); color: var(--cream-400); }

.panel {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.panel + .panel { margin-block-start: var(--space-4); }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
  flex-wrap: wrap;
}
.panel__title { font-size: var(--step-heading); }

.order-row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--line-soft);
}
@media (min-width: 640px) {
  .order-row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
}
.order-row__label { font-size: var(--step-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wide);
}
.status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status--pending { color: var(--gold-600); }
.status--done { color: var(--emerald-700); }
.status--cancelled { color: var(--danger); }

/* ---- auth --------------------------------------------------------------- */

.auth { display: grid; min-block-size: calc(100svh - var(--header-h)); }
@media (min-width: 900px) { .auth { grid-template-columns: 1fr 1fr; } }

.auth__aside { position: relative; display: none; isolation: isolate; }
@media (min-width: 900px) { .auth__aside { display: block; } }
.auth__aside img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
.auth__aside::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,48,29,0.9), rgba(14,16,15,0.35));
}
.auth__aside-body {
  position: absolute;
  inset-block-end: var(--space-7);
  inset-inline: var(--space-7);
  color: var(--cream-400);
}

.auth__form { display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--gutter); }
.auth__form-inner { inline-size: min(420px, 100%); }

/* ---- editorial / legal content ------------------------------------------ */

.prose { max-inline-size: var(--measure); }
.prose h2 { font-size: var(--step-heading); margin-block: var(--space-6) var(--space-3); }
.prose h3 { font-size: var(--step-subhead); margin-block: var(--space-5) var(--space-2); }
.prose p { margin-block-end: var(--space-4); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.prose ul { margin-block-end: var(--space-4); padding-inline-start: var(--space-5); list-style: disc; color: var(--text-secondary); }
.prose li { margin-block-end: var(--space-2); }
.prose a { color: var(--emerald-700); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text-primary); font-weight: 600; }

/* A pull quote for the brand story. */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--step-title);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--gold-500);
  margin-block: var(--space-6);
}

/* Content the client still has to supply is marked, never invented. */
.placeholder-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--gold-500);
  border-radius: var(--radius-md);
  background: rgba(194, 163, 106, 0.07);
  font-size: var(--step-small);
  color: var(--brown-700);
  margin-block-end: var(--space-5);
}

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

.footer {
  background: var(--ink-900);
  color: var(--text-on-dark);
  padding-block: var(--space-8) var(--space-5);
  margin-block-start: var(--section-y);
}

.footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--space-7); } }

.footer__brand img { block-size: 76px; inline-size: auto; margin-block-end: var(--space-4); }
.footer__about { color: var(--text-on-dark-muted); font-size: var(--step-small); max-inline-size: 40ch; line-height: var(--leading-relaxed); }

.footer__title {
  font-family: var(--font-sans);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-300);
  margin-block-end: var(--space-4);
}

.footer__links li + li { margin-block-start: var(--space-3); }
.footer__links a { font-size: var(--step-small); color: var(--text-on-dark-muted); }
.footer__links a:hover { color: var(--cream-400); }

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--step-small);
  color: var(--text-on-dark-muted);
}
.footer__contact li + li { margin-block-start: var(--space-3); }
.footer__contact svg { flex: none; margin-block-start: 3px; color: var(--gold-500); }
.footer__contact a:hover { color: var(--cream-400); }
.footer__contact .ltr-num { direction: ltr; unicode-bidi: embed; }

.socials { display: flex; gap: var(--space-2); margin-block-start: var(--space-5); }
.socials a {
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--text-on-dark-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.socials a:hover { border-color: var(--gold-500); color: var(--ink-900); background: var(--gold-500); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line-on-dark);
  font-size: var(--step-micro);
  color: var(--text-on-dark-muted);
}

.footer__credit {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-on-dark-muted);
  overflow-wrap: anywhere;
}
.footer__credit img {
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  vertical-align: middle;
  margin-inline: 3px;
}
.footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payments { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.payments__logo {
  display: grid;
  place-items: center;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: #fff;
}
.payments__logo .pay-logo { block-size: 20px; inline-size: auto; display: block; }

/* ---- language switch ---------------------------------------------------- */

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 2px;
  font-size: var(--step-micro);
  opacity: 0.85;
}
.lang a { padding: 4px var(--space-3); border-radius: var(--radius-pill); letter-spacing: var(--tracking-wide); }
.lang a[aria-current="true"] { background: currentColor; }
.lang a[aria-current="true"] span { color: var(--surface); mix-blend-mode: normal; }
.header--overlay .lang a[aria-current="true"] span { color: var(--ink-900); }

/* ---- whatsapp ----------------------------------------------------------- */

.wa-float {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  z-index: 55;
  inline-size: 52px; block-size: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--emerald-700);
  color: var(--cream-400);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
@media (max-width: 899px) { .wa-float { inset-block-end: calc(var(--space-5) + 64px); } }

/* ---- product options ---------------------------------------------------- */

.option-groups { margin-block: var(--space-5); }
.option-group { border: 0; padding: 0; margin-block-end: var(--space-5); }

.option-group__legend {
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-block-end: var(--space-3);
  padding: 0;
}

.option-group__values { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* A chip, not a native radio: the whole target is tappable and the selected
   state is carried by border and weight, never colour alone. */
.option-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--step-small);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.option-chip:hover { border-color: var(--ink-300); }

.option-chip:has(input:checked) {
  border-color: var(--emerald-700);
  border-inline-start-width: 3px;
  background: var(--emerald-050);
  font-weight: 500;
}
.option-chip:has(input:focus-visible) { outline: 2px solid var(--emerald-700); outline-offset: 2px; }
.option-chip:has(input:disabled) { opacity: .4; cursor: not-allowed; }

.option-chip__price { font-size: var(--step-micro); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.option-chip:has(input:checked) .option-chip__price { color: var(--emerald-800); }

/* ---- payment step -------------------------------------------------------
   Two large cards for the way to pay (online / on delivery), then — only for
   online — the methods as tiles with a small glyph each, and a plain note on
   where the payment happens. Marks are neutral glyphs, not brand logos. */
.pay-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pay-card:hover { border-color: var(--ink-300); }
.pay-card input,
.pay-method input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pay-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--emerald-700);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pay-card__text { display: grid; gap: 2px; min-inline-size: 0; flex: 1; }
.pay-card__title { font-weight: 600; font-size: var(--step-small); line-height: 1.45; }
.pay-card__note { font-size: var(--step-micro); color: var(--text-muted); line-height: 1.45; }
.pay-card__tick {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pay-card:has(input:checked) {
  border-color: var(--emerald-700);
  background: var(--emerald-050);
  box-shadow: 0 0 0 1px var(--emerald-700);
}
.pay-card:has(input:checked) .pay-card__icon { background: var(--emerald-700); color: #fff; }
.pay-card:has(input:checked) .pay-card__tick { background: var(--emerald-700); border-color: var(--emerald-700); color: #fff; }
.pay-card:has(input:focus-visible),
.pay-method:has(input:focus-visible) { outline: 2px solid var(--emerald-700); outline-offset: 2px; }

.pay-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  min-block-size: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pay-method:hover { border-color: var(--ink-300); }
.pay-method__logo {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 52px;
  block-size: 34px;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.pay-method__logo .pay-logo { block-size: 24px; inline-size: auto; max-inline-size: 44px; object-fit: contain; display: block; }
.pay-method__label { flex: 1; min-inline-size: 0; font-size: var(--step-small); font-weight: 500; line-height: 1.4; }
.pay-method__tick {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pay-method:has(input:checked) { border-color: var(--emerald-700); box-shadow: 0 0 0 1px var(--emerald-700); }
.pay-method:has(input:checked) .pay-method__tick { background: var(--emerald-700); border-color: var(--emerald-700); color: #fff; }

.pay-trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--step-micro);
  line-height: 1.6;
  color: var(--text-secondary);
}
.pay-trust svg { flex: none; color: var(--emerald-700); }
.pay-trust[hidden] { display: none; }


/* ---- Apple Pay on the shop's own page -----------------------------------
   MyFatoorah draws the button itself, in a frame, at the size it is told; this
   only gives it room, with the order it pays for above it. */
.apple-pay { display: grid; gap: var(--space-4); max-inline-size: 26rem; margin-inline: auto; }
.apple-pay__summary {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  text-align: start;
}
.apple-pay__summary div { display: flex; justify-content: space-between; gap: var(--space-3); }
.apple-pay__summary dt { color: var(--text-secondary); }
.apple-pay__summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.apple-pay__button { min-block-size: 48px; }
.apple-pay__status { margin: 0; min-block-size: 1.5em; font-size: var(--step-small); line-height: 1.6; color: var(--text-secondary); }
.apple-pay__status[data-tone="error"] { color: var(--danger); }
.apple-pay__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }