/* ===========================================================================
   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 { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 3 / 2; }

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

.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);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}
.buy-bar.is-visible { transform: translateY(0); }
@media (min-width: 900px) { .buy-bar { display: none; } }
.buy-bar__price { flex: none; }
.buy-bar .btn { flex: 1; }

/* ---- bundle builder ----------------------------------------------------- */

.bundle-steps { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .bundle-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bundle-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  min-block-size: 132px;
}
.bundle-slot.is-active { border-style: solid; border-color: var(--emerald-700); }
.bundle-slot.is-filled { border-style: solid; border-color: var(--line); background: var(--surface-sunken); }

.bundle-slot__index {
  font-family: var(--font-sans);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wider);
  color: var(--gold-600);
}
.bundle-slot__label { font-size: var(--step-small); color: var(--text-secondary); }
.bundle-slot__chosen { display: flex; align-items: center; gap: var(--space-3); }
.bundle-slot__chosen img {
  inline-size: 52px; block-size: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: none;
}

.bundle-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
  background: var(--ink-900);
  color: var(--cream-400);
  border-radius: var(--radius-md);
}
.bundle-bar__progress { font-size: var(--step-small); }

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

/* 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 { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-6); flex-wrap: wrap; }
.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.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;
}
.step.is-active { color: var(--text-primary); }
.step.is-active .step__num { border-color: var(--emerald-700); background: var(--emerald-700); color: var(--cream-400); }
.step.is-done .step__num { border-color: var(--emerald-700); color: var(--emerald-700); }
.step + .step::before { content: ""; inline-size: 24px; block-size: 1px; background: var(--line); }

.fieldset { border: 0; padding: 0; margin-block-end: var(--space-7); }
.fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-heading);
  margin-block-end: var(--space-5);
  inline-size: 100%;
}
.fieldset__legend::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; }

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

.payments { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.payments img { block-size: 22px; inline-size: auto; opacity: 0.85; }

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