/* ── The circled control ─────────────────────────────────────────────────
   All that is left of the old header block. The wordmark, the desktop nav,
   the header actions row and the collections panel all moved into
   system.css when the header was rebuilt in two tiers, and keeping a second
   definition of any of them here is how a stylesheet ends up quietly
   fighting itself.

   `.chip-icon` stays because the cart drawer's close button still uses it,
   and that control has nothing to do with the header. */

.chip-icon {
  border: 0.75px solid rgba(197, 164, 106, 0.22);
  border-radius: 999px;
  color: var(--color-gold-soft);
  background: rgba(255, 255, 255, 0.02);
  min-width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  font-size: 0.9rem;
  transition: border-color 234ms ease, background 135ms ease;
}

.chip-icon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip-icon--luxury {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 240, 209, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 245, 226, 0.08);
}

.chip-icon:hover {
  border-color: rgba(197, 164, 106, 0.4);
  background: rgba(255, 255, 255, 0.05);
}


.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}

.search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Near-opaque instead of blurred.

   `backdrop-filter` is the most expensive property in this stylesheet: it
   cannot be cached, so the compositor reads back everything behind the
   element, blurs it and recomposites — every frame that anything underneath
   moves. This one covers the whole screen. At 74% opacity the blur was being
   computed to affect the quarter of the backdrop that still showed through;
   at 94% there is nothing left to blur and the two are indistinguishable. */
.ui-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 4, 5, 0.94);
}

.search-overlay__panel {
  position: relative;
  width: min(92vw, 760px);
  margin: min(18vh, 7rem) auto 0;
  border: 1px solid rgba(197, 164, 106, 0.24);
  border-radius: 28px;
  background: linear-gradient(180deg, #1f1f23, #1a1a1d);
  box-shadow: var(--shadow-soft);
  padding: clamp(1rem, 5vw, 2rem);
}

.search-overlay__panel h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4.6vw, 2rem);
}

.search-overlay__panel p {
  margin: var(--space-2) 0 0;
  color: #b8aea0;
}

.search-overlay__form {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 50px;
  padding: 0 2.125rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 234ms ease,
    border-color 234ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 234ms ease;
}

/* A light sweep on hover, so a press feels like it landed */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 372ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

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

.btn__icon {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.btn__icon svg { width: 100%; height: 100%; }

.btn--block { width: 100%; }

.btn--primary {
  background: var(--color-gold);
  color: #171411;
}

.btn--primary:hover {
  background: var(--color-gold-soft);
  box-shadow: 0 10px 26px rgba(197, 164, 106, 0.28);
}

.btn--ghost {
  border-color: rgba(197, 164, 106, 0.33);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-gold-soft);
}

.btn--ghost:hover {
  border-color: rgba(197, 164, 106, 0.62);
  background: rgba(197, 164, 106, 0.08);
}

.btn--gold {
  background: linear-gradient(140deg, #b89258, #dbc49d);
  color: #1c1915;
  box-shadow: 0 6px 20px rgba(197, 164, 106, 0.2);
}

.btn--gold:hover {
  background: linear-gradient(140deg, #ccb07d, #e6d2ac);
  box-shadow: 0 12px 30px rgba(197, 164, 106, 0.35);
}

.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn[disabled]::after,
.btn:disabled::after { display: none; }

/* Thumbs need a bigger target than cursors do */
@media (max-width: 768px) {
  .btn {
    min-height: 52px;
    padding: 0 1.5rem;
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after {
    transition: none;
  }
  .btn:hover { transform: none; }
}

.hero {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 70% 20%, rgba(197, 164, 106, 0.25), transparent 30%),
    linear-gradient(130deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
    linear-gradient(125deg, #1a1715 0%, #201d1b 50%, #292420 100%);
  padding-block: clamp(3rem, 5vw, 4.5rem);
  padding-inline: clamp(1.5rem, 5vw, 3.8rem);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(197, 164, 106, 0.2);
}

.hero__title {
  margin: 0 0 2rem;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.4;
  color: rgba(251, 248, 242, 0.88);
}

.hero__subtitle {
  max-width: 520px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 2;
  color: rgba(255, 255, 255, 0.62);
}

.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.section-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* Everything here is decoration. Under reduced motion the strip still has to
   say what it says, so the animations stop but nothing is hidden and nothing
   is left mid-transform. */
@media (prefers-reduced-motion: reduce) {

}

/* ══ Product card ══════════════════════════════════════════════════════════
   No box. The photograph sits on the page, the type sits under it.

   Sizes below are all set for the narrowest real case: a 360px phone, two
   columns, which leaves each card about 155px wide. Anything that does not
   survive at 155px does not belong on the card.                          */
.pc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  position: relative;
  /* The actions row sizes itself from the card, not the viewport: home
     sections are inset further than the shop grid, so the same screen gives
     them narrower cards. */
  container-type: inline-size;
}

/* ── The photograph ──────────────────────────────────────────────────────
   `.pc-frame` exists so the corner controls can be positioned against the
   picture rather than against the whole card — a heart pinned to the card
   would drift down as the name below it wrapped to a second line. */
.pc-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 169, 97, 0.09), transparent 55%),
    linear-gradient(160deg, #1d1d20, #131315);
  isolation: isolate;
}

.pc-media {
  display: block;
  position: relative;
  width: 100%;
  /* Product photography here is portrait; a square frame left tall shots
     stranded between two wide bars. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
}

/* Fills the frame edge to edge. Cropping a thumbnail is fine — the product
   page shows every photo whole. */
.pc-media__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) {
  .pc-card:hover .pc-slide.is-active .pc-media__img {
    transform: scale(1.05);
  }
}

/* ── Card slider ─────────────────────────────────────────────────────────── */
.pc-slides {
  position: absolute;
  inset: 0;
}

.pc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms var(--ease-out), visibility 620ms;
}

.pc-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.pc-media__placeholder {
  width: 100%;
  height: 100%;
}

/* ── Badge ───────────────────────────────────────────────────────────────
   One, on the reading edge, in the corner the eye reaches first. Flat tint
   with a hairline, never a filled block: a solid coloured rectangle over a
   garment is a supermarket sticker. */
.pc-badge-list {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5rem;
  z-index: 2;
  pointer-events: none;
}

.pc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.5rem;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: rgba(8, 8, 9, 0.72);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.pc-badge--sale    { color: #e8a5a5; }
.pc-badge--best    { color: #e8c98a; }
.pc-badge--new     { color: #a7e4bd; }
.pc-badge--limited { color: #c9b8f0; }
.pc-badge--low     { color: #f0d49a; }

/* ── Corner controls ─────────────────────────────────────────────────────
   Both are 40px discs sitting on the photograph. Together they save the card
   roughly 56px of height against the buttons they replace — which, across a
   two-column grid twelve rows deep, is most of a phone screen.

   The `::before` pad brings the real hit area to 44px without growing the
   disc, so the control stays small and the thumb target does not. */
.pc-wish,
.pc-quickadd {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 11, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(245, 241, 234, 0.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.pc-wish::before,
.pc-quickadd::before {
  content: "";
  position: absolute;
  inset: -3px;
}

.pc-wish {
  top: 0.5rem;
  inset-inline-start: 0.5rem;
}

.pc-quickadd {
  bottom: 0.5rem;
  inset-inline-start: 0.5rem;
}

.pc-wish svg,
.pc-quickadd svg {
  width: 18px;
  height: 18px;
}

.pc-wish:active,
.pc-quickadd:active {
  transform: scale(0.92);
}

.pc-wish[aria-pressed="true"] {
  color: var(--color-gold);
  border-color: var(--gold-edge);
}

.pc-wish[aria-pressed="true"] .pc-wish__path {
  fill: var(--color-gold);
  stroke: var(--color-gold);
}

.pc-quickadd.is-done {
  background: rgba(76, 175, 110, 0.85);
  border-color: rgba(76, 175, 110, 0.9);
  color: #06180d;
}

@media (hover: hover) {
  .pc-wish:hover,
  .pc-quickadd:hover {
    background: rgba(201, 169, 97, 0.9);
    border-color: var(--color-gold);
    color: #17130c;
  }
}

/* ── Sold out ────────────────────────────────────────────────────────────── */
.pc-card--oos .pc-media__img {
  opacity: 0.42;
  filter: grayscale(0.6);
}

.pc-oos-tag {
  position: absolute;
  z-index: 2;
  bottom: 0.5rem;
  inset-inline: 0.5rem;
  padding: 0.35rem;
  border-radius: 4px;
  background: rgba(10, 10, 11, 0.82);
  color: rgba(245, 241, 234, 0.72);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── Body ────────────────────────────────────────────────────────────────
   Name, price, one button. The two-line description and the empty five-star
   row that used to sit between them are gone: the description repeated the
   name at a size nobody reads, and the rating drew five hollow stars and a
   "(0)" for a shop whose API sends no reviews at all — which reads as a bad
   product rather than a new one. */
.pc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.3rem;
  padding-top: 0.75rem;
  min-width: 0;
}

.pc-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink);
  /* A long Arabic product name in a 162px column otherwise breaks wherever
     the box ends, including mid-word. */
  overflow-wrap: anywhere;
  /* Two lines are reserved whether or not they are used, so a short name and a
     long one leave their prices on the same baseline across a row. */
  min-height: calc(0.94rem * 1.5 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-name a {
  color: inherit;
  text-decoration: none;
}

/* Side by side, with the current price leading. Stacked — as it was — the
   struck price sat directly above the real one and the pair read as a single
   confused number. */
.pc-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}

.pc-price {
  font-weight: 600;
  /* The figure a shopper scans a grid by. It sat at 1rem against a struck
     price of 0.78 — a quarter of a step apart, on the two numbers that most
     need telling from one another at a glance. */
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--color-gold-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pc-price--old {
  color: rgba(169, 162, 154, 0.7);
  text-decoration: line-through;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* Pushes the button to the foot of the card so a row of cards of different
   heights still lines its buttons up. */
.pc-cta {
  margin-top: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--gold-edge);
  background: transparent;
  color: var(--color-gold-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--transition-medium),
    border-color var(--transition-medium),
    color var(--transition-medium),
    transform var(--transition-fast);
}

/* An outline, not a filled gold slab.
 *
 * Twenty-four filled gold buttons in one grid is what a discount marketplace
 * looks like, and it left nothing louder for the product page's own order
 * button to be. The outline still reads as the card's action; the solid gold
 * is saved for the one screen where the sale is actually made.
 *
 * It also drops two permanently-running animations per card — a travelling
 * gradient and a breathing shadow, neither of which the compositor can take —
 * which on a shop page was forty-eight elements repainting before the shopper
 * had scrolled once. */
/* The gold arrives as a scaled layer now, not as a background change — see
   `.pc-cta__fill`. Painting it here as well would run a colour transition on
   every card in the grid alongside the transform, which is exactly the paint
   this was rewritten to avoid. */
.pc-cta--buy:active {
  transform: scale(0.975);
}

@media (hover: hover) {
  .pc-cta--buy:hover {
    border-color: var(--color-gold);
  }
}

.pc-cta--oos {
  border-color: var(--line);
  color: rgba(255, 255, 255, 0.32);
  cursor: not-allowed;
}

.pc-cta:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Below this the label is wider than the card can hold. */
@container (max-width: 132px) {
  .pc-cta { font-size: 0.74rem; }
}

@media (min-width: 640px) {
  .pc-name { font-size: 1rem; min-height: calc(1rem * 1.5 * 2); }
  .pc-price { font-size: 1.08rem; }
  .pc-cta { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-slide,
  .pc-media__img,
  .pc-cta,
  .pc-wish,
  .pc-quickadd {
    transition: none;
  }
  .pc-card:hover .pc-slide.is-active .pc-media__img { transform: none; }
}

/* `backdrop-filter` cannot be cached: the compositor re-reads and re-blurs
   whatever is behind the element every frame anything under it moves — which,
   during a scroll, is every frame. Two of these per card, twenty-four cards.
   The discs keep their translucency; they simply stop blurring. */
@media (hover: none) and (pointer: coarse) {
  .pc-wish,
  .pc-quickadd {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 10, 11, 0.78);
  }
}

/* ── Cart Drawer ────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   THE CART
   A boutique hands you the box; it does not slide a receipt across a counter.
   The drawer is treated as an object with weight: layered surface, a gold
   light source along its edge, hairlines that fade instead of stopping, and
   the money set apart on its own raised panel.

   Every moving part here is transform or opacity only — no blur, no shadow
   animation, nothing that asks a phone to repaint while it is scrolling.
   ═══════════════════════════════════════════════════════════════════════ */
.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  /* Warm, not neutral: the shop behind should read as dimmed, not greyed. */
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(197, 164, 106, 0.10), transparent 60%),
    rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 234ms ease;
  pointer-events: none;
}

.cart-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Blurring a full-screen layer is the single most expensive thing on this
   page, and it sits under a drawer the shopper is about to scroll. The tint
   alone reads the same at a glance. */
@media (hover: none) and (pointer: coarse) {
  .cart-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(197, 164, 106, 0.10), transparent 60%),
      rgba(6, 6, 8, 0.84);
  }
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(430px, 100vw);
  height: 100dvh;
  z-index: 300;
  display: flex;
  flex-direction: column;
  /* Three layers: a gold bloom at the top edge where the light enters, a
     cooler floor, and the lacquer between them. Flat #1e1d21 read as a panel;
     this reads as a surface. */
  background:
    radial-gradient(130% 42% at 100% 0%, rgba(197, 164, 106, 0.13), transparent 62%),
    radial-gradient(90% 40% at 0% 100%, rgba(120, 96, 58, 0.10), transparent 70%),
    linear-gradient(190deg, #1c1b1f 0%, #171619 52%, #131215 100%);
  border-left: 1px solid rgba(197, 164, 106, 0.16);
  transform: translateX(calc(100% + 1px));
  transition: transform 320ms cubic-bezier(0.32, 0, 0.16, 1);
  will-change: transform;
  overflow: hidden;
  /* Reads as depth against the scrim without animating a shadow */
  box-shadow: -32px 0 60px -28px rgba(0, 0, 0, 0.9);
}

/* The gold edge, brightest where the light lands and fading to nothing at the
   floor. A uniform 1px border is a rule; this is an edge. */
.cart-drawer::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(230, 211, 163, 0.55) 0%,
    rgba(197, 164, 106, 0.28) 22%,
    rgba(197, 164, 106, 0.08) 60%,
    transparent 100%
  );
}

/* [hidden] attribute needs explicit override — display:flex would otherwise win */
.cart-drawer[hidden] {
  display: none;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.35rem 1.15rem;
  flex-shrink: 0;
}

/* A hairline that fades at both ends, rather than a border that stops dead
   against the padding. */
.cart-drawer__head::after {
  content: "";
  position: absolute;
  inset-inline: 1.35rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(197, 164, 106, 0.34) 22%, rgba(197, 164, 106, 0.34) 78%, transparent);
}

.cart-drawer__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
}

.cart-drawer__kicker {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(197, 164, 106, 0.85);
  /* Arabic joins — no tracking, no uppercasing */
  letter-spacing: normal;
}

.cart-drawer__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.25;
  color: #f5f1ea;
}

.cart-drawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(197, 164, 106, 0.3), rgba(197, 164, 106, 0.14));
  border: 1px solid rgba(197, 164, 106, 0.45);
  color: #f0e0b8;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0 0.4rem;
  font-variant-numeric: tabular-nums;
}

.cart-drawer__close {
  color: rgba(218, 195, 154, 0.7);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(197, 164, 106, 0.2);
  flex: none;
}

/* Measured 34x34 on a phone — under the 44px minimum, and it is the only way
   out of the drawer. Grown by touch area alone so the visual chip is
   unchanged. Both classes are named on purpose: the base `.chip-icon` has
   equal specificity, and naming only one of them would leave the result
   decided by source order. */
@media (hover: none) and (pointer: coarse) {
  .cart-drawer__close.chip-icon,
  .cart-drawer__close {
    min-width: 44px;
    min-height: 44px;
  }
}

.cart-drawer__close:hover {
  color: #f5f1ea;
  border-color: rgba(197, 164, 106, 0.5);
  background: rgba(197, 164, 106, 0.12);
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1.35rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(197,164,106,0.2) transparent;
}

/* ── A line in the cart ───────────────────────────────────────────────────
   Rebuilt around the two things that were wrong on a phone: the controls were
   unusable and the money was ambiguous.

   Measured before: the remove cross was 15x21 and the quantity buttons 22x22,
   against the 44px a fingertip needs — three targets that small, side by side,
   on the screen where a shopper commits money. And only the line total was
   shown, so a cart of two read as if the price had gone up.

   The photograph is also given room. This is a clothes shop; a 56px square
   thumbnail of a dress is not a picture of anything.                        */
.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.95rem;
  padding: 1.05rem 0;
  /* Each line arrives a beat after the one above it. Opacity and transform
     only, so the stagger costs the compositor and nothing else. */
  animation: cart-line-in 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* The divider fades out before it reaches either edge — a rule that stops
   dead against the padding is a table; this is a list of things. */
.cart-item::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(197, 164, 106, 0.2) 18%, rgba(197, 164, 106, 0.2) 82%, transparent);
}
.cart-item:last-child::after { display: none; }

@keyframes cart-line-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-item { animation: none; }
}

.cart-item__media {
  flex: none;
  width: 72px;
  /* 3:4 — the ratio the shop's photography is actually shot in */
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(150deg, #2b2721, #17161a);
  /* An inset hairline reads as a mount around the photograph; a plain border
     reads as a box drawn around it. */
  box-shadow: inset 0 0 0 1px rgba(197, 164, 106, 0.22),
              0 6px 14px -10px rgba(0, 0, 0, 0.9);
}

.cart-item__media img {
  width: 100%;
  height: 100%;
  /* contain, not cover. Most shops crop their cart thumbnails, and it looks
     tidier — but this shop's photography is shot 9:16, so covering a 3:4 box
     would cut roughly 40% off each one, and the garment is the whole point of
     the picture. The box is generous enough that a contained shot reads
     clearly, and the gradient behind it is the frame. */
  object-fit: contain;
}

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

.cart-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.cart-item__brand {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(218,195,154,0.62);
  /* Arabic: no case to upper, and tracking prises its joins apart */
  text-transform: none;
  letter-spacing: normal;
}

.cart-item__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 500;
  color: #f5f1ea;
  line-height: 1.35;
  /* Two lines, then ellipsis — a long Arabic product name cut at one line
     loses the half that identifies it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item__variant {
  margin: 0.15rem 0 0;
  align-self: flex-start;
  padding: 0.14rem 0.5rem;
  border: 1px solid rgba(197, 164, 106, 0.34);
  border-radius: 999px;
  font-size: 0.72rem;
  color: rgba(226, 214, 192, 0.88);
}

/* Quantity on one side, money on the other, on the same baseline */
.cart-item__row {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cart-item__money { text-align: end; }
.cart-item__price {
  display: block;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #dac39a;
  font-variant-numeric: tabular-nums;
}
.cart-item__each {
  display: block;
  font-size: 0.72rem;
  color: rgba(203, 193, 176, 0.55);
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: rgba(255,255,255,0.34);
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
.cart-item__remove svg { width: 15px; height: 15px; }
.cart-item__remove:hover {
  color: #f0b4b4;
  background: rgba(196, 76, 76, 0.12);
}

.cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid rgba(197,164,106,0.28);
  border-radius: 999px;
  overflow: hidden;
}

.cart-qty__btn {
  background: none;
  border: none;
  color: rgba(218,195,154,0.85);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  /* 44px on touch; a little tighter where there is a cursor */
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  transition: color 180ms ease, background 180ms ease;
}
.cart-qty__btn:hover { color: #f5f1ea; background: rgba(197,164,106,0.14); }
.cart-qty__btn:active { background: rgba(197,164,106,0.22); }

.cart-qty__val {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f5f1ea;
  min-width: 2.2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (hover: none) and (pointer: coarse) {
  .cart-qty__btn { width: 44px; height: 44px; }
  /* "مواصلة التسوق" measured 24px — the one way out of the drawer that is not
     the checkout button, and too small to hit. */
  .cart-drawer__continue-link { min-height: 44px; }
}

/* An empty cart is still a room in the shop, so it is given air rather than
   an apology squeezed into the middle of the panel. */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 3.5rem 1.25rem;
  text-align: center;
}

/* The bag sits inside a ring of light rather than floating as a loose glyph */
.cart-empty__icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  color: rgba(218, 195, 154, 0.7);
  background: radial-gradient(circle at 50% 35%, rgba(197, 164, 106, 0.16), transparent 68%);
  box-shadow: inset 0 0 0 1px rgba(197, 164, 106, 0.2);
}

.cart-empty__icon svg { width: 2.4rem; height: 2.4rem; }

.cart-empty__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 500;
  color: #f5f1ea;
}

.cart-empty__sub {
  margin: 0;
  max-width: 26ch;
  font-size: 0.86rem;
  line-height: 1.7;
  color: rgba(203, 193, 176, 0.62);
}

.cart-empty .btn { margin-top: 0.6rem; }

.cart-drawer__foot {
  position: relative;
  padding: 1.15rem 1.35rem calc(1.35rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-shrink: 0;
  /* A darker floor so the panel above it lifts, and so the list appears to
     pass behind the footer rather than stop at it. */
  background: linear-gradient(180deg, rgba(10, 10, 12, 0), rgba(10, 10, 12, 0.55) 38%);
}
.cart-drawer__foot::before {
  content: "";
  position: absolute;
  inset-inline: 1.35rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(197, 164, 106, 0.3) 20%, rgba(197, 164, 106, 0.3) 80%, transparent);
}
.cart-drawer__foot.is-empty { background: none; }
.cart-drawer__foot.is-empty::before { display: none; }

/* ── What she owes, and what is still unknown ─────────────────────────────
   The footer used to show one figure labelled "الإجمالي", which was the goods
   only — delivery is priced from the wilaya and she has not picked one yet.
   Calling that the total and then adding 400–1000 دج at checkout is the kind
   of surprise that loses a cash-on-delivery order at the last step. */
.cart-sum {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  /* Lifted onto its own surface. The total is the one thing in this drawer
     the shopper is deciding about, and it was sitting in the same plane as
     the rest of the footer. */
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(197, 164, 106, 0.10), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 0 0 1px rgba(197, 164, 106, 0.18);
}
.cart-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(226, 218, 205, 0.9);
}
.cart-sum__row--muted {
  font-size: 0.78rem;
  color: rgba(203, 193, 176, 0.55);
}
.cart-total__val {
  font-weight: 700;
  font-size: 1.15rem;
  color: #f0e0b8;
  font-variant-numeric: tabular-nums;
}

/* Three promises, evenly spaced, separated by a hairline dot rather than a
   tick — the ticks read as a checklist she has to satisfy, not as reassurance. */
.cart-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin: 0;
  font-size: 0.72rem;
  color: rgba(218, 195, 154, 0.6);
  text-align: center;
}
.cart-trust > span { display: inline-flex; align-items: center; }
.cart-trust > span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(197, 164, 106, 0.45);
  margin-inline-end: 0.7rem;
}

.cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 49px;
}

.cart-drawer__continue-link {
  background: none;
  border: none;
  color: rgba(218,195,154,0.55);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: center;
  transition: color 200ms ease;
  width: 100%;
}

.cart-drawer__continue-link:hover { color: rgba(218,195,154,0.85); }

/* Header cart badge */
.cart-btn { position: relative; }
.header-cart-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #c5a46a;
  color: #1a1815;
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2rem;
  pointer-events: none;
}

/* Responsive grid breakpoints */
@media (min-width: 640px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .product-grid { grid-template-columns: repeat(5, 1fr); } }

.section-shell {
  background: linear-gradient(180deg, rgba(29, 29, 33, 0.9), rgba(25, 25, 28, 0.9));
  border: 1px solid rgba(197, 164, 106, 0.16);
  border-radius: 28px;
  padding: clamp(1.8rem, 5vw, 3.2rem);
}

.collection-grid,
.category-grid,
.review-grid,
.trust-grid,
.instagram-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.collection-card,
.category-card,
.review-card,
.trust-card,
.ig-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #2a2a2e 0%, #232327 100%);
  border: 1px solid rgba(197, 164, 106, 0.14);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* Category tiles are links, so they must not inherit anchor styling */
a.category-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.collection-card__label,
.category-card__label {
  color: var(--color-warm-gray);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-transform: uppercase;
}

.collection-card__label::before,
.category-card__label::before {
  content: "";
  flex: 0 1 1rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 164, 106, 0.3), transparent);
}

.collection-card__label::after,
.category-card__label::after {
  content: "";
  flex: 0 1 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 164, 106, 0.3));
}

.collection-card h3,
.category-card h3,
.review-card h3,
.trust-card h3 {
  margin: var(--space-2) 0 0;
  font-size: 1.02rem;
}

.promo-banner {
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 5vw, 2.2rem);
  background:
    radial-gradient(circle at 20% 20%, rgba(234, 201, 149, 0.22), transparent 30%),
    linear-gradient(110deg, #181514 0%, #2a2018 55%, #3a2c1f 100%);
  color: #f7f0e6;
  display: grid;
  gap: var(--space-4);
  border: 1px solid rgba(197, 164, 106, 0.25);
}

.promo-banner p {
  margin: 0;
  color: rgba(255, 248, 240, 0.86);
}

.story {
  display: grid;
  gap: var(--space-4);
}

.story p {
  margin: 0;
  color: #cdc2b3;
}

.newsletter {
  display: grid;
  gap: var(--space-3);
}

.newsletter__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.input {
  border: 1px solid rgba(197, 164, 106, 0.25);
  border-radius: 999px;
  padding: 0.74rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  color: #f2ece3;
}

/* ── Footer ───────────────────────────────────────────────────── */
.ft-inner {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 6vw, 2.75rem);
  padding-block: clamp(2.25rem, 8vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
}

/* Gold hairline that draws itself across the top as the footer arrives */
.ft-hairline {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(224, 195, 143, 0.55),
    transparent);
  transform: scaleX(0);
}

.ft-inner.is-visible .ft-hairline {
  animation: ft-hairline 576ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ft-hairline {
  to { transform: scaleX(1); }
}

.ft-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ft-brand {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.ft-brand__mark {
  display: inline-block;
  width: fit-content;
}

.ft-logo {
  display: block;
  width: clamp(5.5rem, 22vw, 7.5rem);
  height: auto;
  mix-blend-mode: screen;
  opacity: 0.92;
  transition: opacity 312ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-brand__mark:hover .ft-logo {
  opacity: 1;
  transform: translateY(-2px);
}

.ft-tagline {
  margin: 0;
  max-width: 30ch;
  font-size: 0.84rem;
  line-height: 1.95;
  color: rgba(214, 206, 194, 0.7);
}

.ft-totop {
  display: inline-grid;
  justify-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(197, 164, 106, 0.28);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(224, 195, 143, 0.9);
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 234ms ease, color 135ms ease, background 135ms ease;
}

/* The arrow used to bob for ever — a 2.4s loop, on every page, in a footer
   that is in the DOM whether or not anyone has scrolled to it. It is only a
   transform, so it is cheap per frame, but it is a compositor frame being
   scheduled continuously for the whole life of every page view in order to
   animate a control nobody is looking at. It moves when it is pointed at
   now, which is when the movement means something. */
.ft-totop svg {
  width: 16px;
  height: 16px;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-totop:hover svg,
.ft-totop:focus-visible svg { transform: translateY(-3px); }

.ft-totop:hover {
  border-color: rgba(224, 195, 143, 0.7);
  background: rgba(197, 164, 106, 0.1);
  color: #f6ecd6;
}

/* ── Link columns ──────────────────────────────────────────────── */
.ft-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.25rem;
}

.ft-col {
  display: grid;
  align-content: start;
  /* Wide enough that neighbouring 44px tap areas do not collide */
  gap: 1.45rem;
  min-width: 0;
}

/* Held back until the reveal fires, otherwise they paint at full opacity and
   then blink out as the entrance animation takes over */
.ft-col,
.ft-trust__item {
  opacity: 0;
}

.ft-inner.is-visible .ft-col,
.ft-inner.is-visible .ft-trust__item {
  animation: ft-rise 384ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(72ms + var(--g, 0) * 40ms);
}

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

.ft-col__heading {
  margin: 0 0 -0.35rem;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(224, 195, 143, 0.95);
}

.ft-link {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: 0.83rem;
  line-height: 1.6;
  color: rgba(216, 209, 199, 0.78);
  text-decoration: none;
  transition: color 234ms ease;
}

/* Comfortable thumb target without spacing the list out */
.ft-link::before {
  content: "";
  position: absolute;
  inset-inline: -0.25rem;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.ft-link--wrap { overflow-wrap: anywhere; }

.ft-link--plain {
  color: rgba(200, 190, 175, 0.55);
  pointer-events: none;
}

.ft-link--plain::before { display: none; }

/* Anchored to the start edge so it grows the way the text reads */
.ft-link:not(.ft-link--plain)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(224, 195, 143, 0.8);
  transition: width 296ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-link:hover {
  color: #f4ecdd;
}

.ft-link:not(.ft-link--plain):hover::after { width: 100%; }

/* ── Trust row ─────────────────────────────────────────────────── */
.ft-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
  padding: clamp(1rem, 4vw, 1.35rem) 0;
  list-style: none;
  border-block: 1px solid rgba(197, 164, 106, 0.12);
}

.ft-trust__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  line-height: 1.5;
  /* "الدفع عند الاستلام", "توصيل إلى 58 ولاية" — the facts a cash-on-delivery
     shopper is checking for, so they read at full strength rather than as
     the surrounding chrome. */
  color: rgba(211, 203, 191, 0.88);
}

.ft-trust__item svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: rgba(224, 195, 143, 0.85);
}

/* ── Bottom bar ────────────────────────────────────────────────── */
.ft-bottom {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
}

.ft-social {
  display: flex;
  gap: 0.7rem;
}

.ft-social__link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(195, 163, 107, 0.34);
  color: rgba(224, 195, 143, 0.9);
  text-decoration: none;
  transition:
    border-color 250ms ease,
    color 250ms ease,
    background 250ms ease,
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-social__link svg { width: 1.05rem; height: 1.05rem; }

.ft-social__link:hover {
  border-color: rgba(224, 195, 143, 0.85);
  background: rgba(195, 163, 107, 0.14);
  color: #f6ecd6;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.ft-copy {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.9;
  /* 0.55 rendered as rgb(113,109,103) over the page — a contrast ratio of
     about 3.9:1, under the 4.5:1 a line of text is meant to clear. 0.72
     lands near 5.9:1 and is still plainly the quietest line on the page. */
  color: rgba(198, 190, 179, 0.72);
  letter-spacing: 0.04em;
}

@media (min-width: 600px) {
  .ft-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .ft-bottom {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
  }
  .ft-copy { text-align: end; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-totop svg,
  .ft-inner.is-visible .ft-hairline,
  .ft-inner.is-visible .ft-col,
  .ft-inner.is-visible .ft-trust__item {
    animation: none;
  }
  /* Without animation nothing would ever reveal these */
  .ft-hairline { transform: none; }
  .ft-col,
  .ft-trust__item { opacity: 1; transform: none; }
  .ft-social__link:hover,
  .ft-brand__mark:hover .ft-logo { transform: none; }
}

.hero-stage {
  display: grid;
  gap: var(--space-5);
}

.hero-metrics {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.metric-card {
  border: 1px solid rgba(197, 164, 106, 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--space-4);
}

.metric-card strong {
  display: block;
  color: #f4e0bb;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
}

.metric-card .muted {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 400;
  opacity: 0.7;
}

.lux-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 164, 106, 0.6), transparent);
}

/* The `.faq-*` card rules that used to live here described an <article> with
   an <h3> and a <p>, which the FAQ page stopped rendering when it became a
   list of <details>. They survived only to fight the new rules in pages.css —
   `border` and `background` shorthands the replacement never thought to
   cancel — so every row still painted as a bordered card. Deleted. */

@media (min-width: 769px) {
    .collection-grid,
  .category-grid,
  .review-grid,
  .trust-grid,
  .instagram-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .newsletter__row {
    max-width: 520px;
  }
}

@media (max-width: 768px) {
  /* The header's own mobile rules used to live here: hiding a desktop nav
     that no longer exists, absolutely centring a brand mark that is no
     longer emitted, and showing a dock that was removed with it. The header
     is rebuilt in system.css and sizes itself; a second, older opinion about
     it here is how a stylesheet ends up fighting itself.

     One of them was not merely dead. The circled icon control was shrunk to
     2.1rem - 33.6px - on every screen under 768px, which is where nearly all
     of this shop's traffic is. The header no longer uses that class, but the
     cart drawer's close button still does, so the control for getting out of
     the cart was a third under the 44px floor on a phone. It keeps its
     size. */

  .search-overlay__form {
    grid-template-columns: 1fr;
  }

  .hero-metrics {
    gap: var(--space-2);
  }

  .metric-card {
    padding: var(--space-3) var(--space-2);
  }

  .metric-card strong {
    font-size: 1.35rem;
  }

  .metric-card .muted {
    font-size: 0.78rem;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero__subtitle {
    max-width: 450px;
  }
}

/* ── Quick add: pick a variant without leaving the grid ─────────── */
.qa-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}

.qa-overlay.is-open {
  display: block;
}

body.qa-locked {
  overflow: hidden;
}

.qa-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(84, 66, 34, 0.32) 0%, transparent 62%),
    rgba(6, 6, 8, 0.78);
  backdrop-filter: blur(10px) saturate(120%);
  animation: qa-fade 250ms ease both;
}

.qa-sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 0.65rem 1.15rem calc(1.3rem + env(safe-area-inset-bottom));
  border-radius: 1.75rem 1.75rem 0 0;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(197, 164, 106, 0.11) 0%, transparent 58%),
    linear-gradient(180deg, #1c1b19 0%, #111110 100%);
  box-shadow:
    0 -1px 0 rgba(224, 195, 143, 0.34),
    0 -26px 70px rgba(0, 0, 0, 0.62);
  animation: qa-rise 312ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Gold light travelling across the top edge as the sheet settles */
.qa-sheet__sheen {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(243, 223, 184, 0.95) 50%,
    transparent 100%
  );
  opacity: 0;
  animation: qa-sheen 600ms ease 117ms both;
}

@keyframes qa-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes qa-rise {
  from { transform: translateY(101%); }
  to { transform: none; }
}

@keyframes qa-sheen {
  0% { opacity: 0; transform: translateX(-60%) scaleX(0.35); }
  45% { opacity: 1; }
  100% { opacity: 0.5; transform: none; }
}

.qa-sheet__handle {
  width: 46px;
  height: 4px;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(197, 164, 106, 0.2),
    rgba(233, 213, 173, 0.75),
    rgba(197, 164, 106, 0.2));
}

.qa-close {
  position: absolute;
  top: 0.85rem;
  inset-inline-end: 0.95rem;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(197, 164, 106, 0.26);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 214, 192, 0.8);
  cursor: pointer;
  transition: color 203ms ease, border-color 117ms ease, transform 117ms ease;
}

/* The circle stays 34px; the finger gets 44.
   This is the close control on a sheet that covers the page, so a miss either
   does nothing or hits the button underneath it. Six pixels of overlay on
   each side is the difference, and it costs the design nothing. */
.qa-close::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.qa-close svg { width: 15px; height: 15px; }

.qa-close:hover {
  color: #f6ecd6;
  border-color: rgba(224, 195, 143, 0.7);
  transform: rotate(90deg);
}

/* ── Product header ─────────────────────────────────────────────── */
.qa-product {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(197, 164, 106, 0.16);
  animation: qa-item-in 372ms cubic-bezier(0.16, 1, 0.3, 1) 63ms both;
}

.qa-product__media {
  flex-shrink: 0;
  width: 66px;
  height: 82px;
  overflow: hidden;
  border-radius: 0.7rem;
  border: 1px solid rgba(197, 164, 106, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

.qa-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qa-product__media.is-empty img { display: none; }

.qa-product__info { min-width: 0; }

.qa-product__kicker {
  margin: 0;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(218, 195, 154, 0.7);
}

.qa-product__name {
  margin: 0.25rem 0 0.3rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.4;
  color: #f7f2e8;
}

.qa-product__price {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #dfc79a;
}

/* ── Option groups ──────────────────────────────────────────────── */
.qa-group {
  margin-bottom: 1.15rem;
  animation: qa-item-in 372ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(99ms + var(--qa-g, 0) * 50ms);
}

.qa-group__label {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(218, 195, 154, 0.82);
}

.qa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.qa-chip {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding: 0 1.05rem;
  border: 1px solid rgba(197, 164, 106, 0.3);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
  color: #ece5d9;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition:
    border-color 250ms ease,
    background 250ms ease,
    color 250ms ease,
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.qa-chip:hover:not([disabled])::before { transform: translateX(120%); }

.qa-chip__text { position: relative; }

.qa-chip:hover:not([disabled]),
.qa-chip:focus-visible {
  border-color: rgba(224, 195, 143, 0.8);
  transform: translateY(-2px);
}

.qa-chip.is-selected {
  border-color: rgba(233, 213, 173, 0.95);
  background: linear-gradient(135deg, rgba(197, 164, 106, 0.26), rgba(197, 164, 106, 0.1));
  color: #fbf3e3;
  box-shadow: 0 0 0 1px rgba(224, 195, 143, 0.32), 0 8px 22px rgba(0, 0, 0, 0.35);
  animation: qa-chip-pick 276ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qa-chip-pick {
  0% { transform: scale(0.94); }
  55% { transform: scale(1.05); }
  100% { transform: none; }
}

.qa-chip[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(226, 148, 148, 0.6);
}

/* ── Footer ─────────────────────────────────────────────────────── */
.qa-note {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  text-align: center;
  color: rgba(226, 186, 132, 0.9);
}

.qa-confirm {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, #c8a86a 0%, #eadab4 50%, #c8a86a 100%);
  background-size: 200% 100%;
  color: #211c12;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 234ms ease, transform 135ms ease, box-shadow 135ms ease;
}

.qa-confirm.is-ready {
  box-shadow: 0 12px 30px rgba(150, 118, 62, 0.34);
  animation: qa-confirm-flow 5s linear infinite;
}

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

.qa-confirm:hover:not([disabled]) { transform: translateY(-2px); }

.qa-confirm[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(226, 214, 192, 0.6);
  box-shadow: none;
}

@keyframes qa-item-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.qa-state {
  margin: 0;
  padding: 1.4rem 0;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(214, 205, 191, 0.72);
}

.qa-state--err {
  color: rgba(226, 148, 148, 0.9);
}

.qa-fallback {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: #e0cfa6;
}

@media (min-width: 640px) {
  .qa-sheet {
    inset: auto 50% auto auto;
    bottom: auto;
    top: 50%;
    transform: translate(50%, -50%);
    width: min(440px, 92vw);
    border-radius: 1.4rem;
    border: 1px solid rgba(197, 164, 106, 0.28);
    animation: qa-pop 328ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .qa-sheet__handle { display: none; }

  @keyframes qa-pop {
    from { opacity: 0; transform: translate(50%, -46%) scale(0.96); }
    to { opacity: 1; transform: translate(50%, -50%) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa-backdrop,
  .qa-sheet,
  .qa-sheet__sheen,
  .qa-product,
  .qa-group,
  .qa-chip.is-selected,
  .qa-confirm.is-ready {
    animation: none;
  }

  .qa-sheet__sheen { opacity: 0.5; }
  .qa-product,
  .qa-group { opacity: 1; transform: none; filter: none; }
  .qa-chip::before { display: none; }
}

/* ── Touch targets ──────────────────────────────────────────────────────
   A control that is hard to hit is a control that does not work. These sit
   just under the 44px floor at their design sizes, which is fine for a
   cursor and not fine for a thumb, so the floor is applied where there is no
   cursor rather than inflating them for everyone. */
@media (hover: none) and (pointer: coarse) {
  .pc-wish {
    width: 44px;
    height: 44px;
  }
}

/* Shown only when the line is already holding everything that is left. The
   shopper learns the ceiling here, in the cart, instead of at the server's
   refusal on the last screen. */
.cart-item__stock {
  margin: 0.15rem 0 0;
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(196, 140, 76, 0.14);
  box-shadow: inset 0 0 0 1px rgba(196, 140, 76, 0.34);
  font-size: 0.72rem;
  color: #e6b980;
}

/* A "+" that cannot go further should look spent, not broken. */
.cart-qty__btn:disabled {
  opacity: 0.32;
  cursor: default;
}
.cart-qty__btn:disabled:hover { background: none; color: rgba(218,195,154,0.85); }

/* ═══ The footer, on a phone ═══════════════════════════════════════════════
   Measured before it was changed, at 375px: 999px tall — one and a quarter
   phone screens — of which 412 was four groups of links, and every link was a
   21px target.

   The groups collapse to their headings. A footer link is something a shopper
   reaches for by name, not something she browses, so a heading she can open is
   worth more than a list she scrolls past. Each heading is a 52px row, which
   is a target rather than a label.
   ═══════════════════════════════════════════════════════════════════════════ */

.ft-col > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  cursor: pointer;
  /* Both are needed: the first kills Safari's triangle, the second every
     other engine's. */
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.ft-col > summary::-webkit-details-marker {
  display: none;
}

/* The house's own marker: a hairline cross that loses its upright when the
   group opens. Transform only, so it costs the scroll nothing. */
.ft-col > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  opacity: 0.55;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}

.ft-col[open] > summary::after {
  transform: rotate(90deg);
  /* The upright is hidden by the rotation landing it on the crossbar. */
  background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat;
  opacity: 0.4;
}

.ft-col__body {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5rem;
}

/* 21px of link was a line of text, not a target. */
.ft-col__body .ft-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 700px) {
  /* Side by side there is nothing to save, so the heading stops pretending to
     be a control. */
  .ft-col > summary {
    min-height: 0;
    cursor: default;
    pointer-events: none;
  }

  .ft-col > summary::after {
    display: none;
  }

  .ft-col__body .ft-link {
    min-height: 34px;
  }
}

/* The four-icon trust row is the reassurance a shopper reads *after* deciding.
   On the home page the assurance section already answers the same questions
   above it, in more words and better placed, so the footer's copy is the one
   that goes — on that page only. Every other page keeps it. */
body:has(.mz-page) .ft-trust {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ft-col > summary::after {
    transition: none;
  }
}

/* The colour a shopper is choosing, on the chip that chooses it. A size has
   no swatch and the chip is unchanged; a colour shows the cloth beside its
   name rather than asking her to picture it from the word. */
.qa-chip__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sw);
  /* A ring, so a white or cream choice is a disc rather than a hole. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  flex: none;
  margin-inline-end: 0.45rem;
}

/* ── The announcement line ────────────────────────────────────────────────
   A ruled band above the wordmark: a gold hairline that fades toward both
   ends, a mark, the message, and — when the shop wants one — a link.

   ── What it replaced, twice ────────────────────────────────────────────
   First a marquee, which is the house style of every discount store on the
   internet. Then a flat black band with its type at 0.62rem — 9.9px, in
   Arabic, tracked to 0.26em, at the very top of the page. That was not
   restraint; it was text nobody could read, and it truncated with an
   ellipsis the moment a shop typed a real sentence into it.

   ── What it costs ──────────────────────────────────────────────────────
   One entrance, once. Then a transform and an opacity on two spans every few
   seconds. No blur, no filter, no shadow, and nothing that repaints the page
   behind it. The band's own background is two flat gradients, painted once.  */

.anb {
  position: relative;
  /* Warm at the centre, near-black at the ends — the band reads as lit from
     the middle rather than as a black bar with text on it. One gradient, one
     paint, no filter. */
  background:
    linear-gradient(90deg, #08080a 0%, #100e0b 50%, #08080a 100%);
  border-bottom: 1px solid var(--line);
}

/* The hairline. Gold at the centre, gone at both ends, so the band is ruled
   the way a printed plate is rather than boxed the way a banner is. */
.anb::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--gold-rgb), 0) 0%,
    rgba(var(--gold-rgb), 0.4) 50%,
    rgba(var(--gold-rgb), 0) 100%);
  pointer-events: none;
}

/* ── Entrance ────────────────────────────────────────────────────────────
   Settled state is VISIBLE. The arrival is an animation played over the top,
   not a transition out of an invisible base — a browser that drops the
   animation shows the bar rather than nothing. This site has been bitten by
   the other way round before. */
.anb.is-in { animation: anb-in 620ms var(--ease-out); }

@keyframes anb-in {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: none; }
}

.anb__stage {
  position: relative;
  display: grid;
  place-items: center;
  /* Fixed. A message that changed the band's height would push the entire
     page down every few seconds, and the header measures this to publish
     `--header-h`. Two lines of the mobile size fit inside it, so a long
     message wraps instead of being cut. */
  /* 36 on a phone, not 46.
     This band, the header row and the way back were together taking 158px
     before a single pixel of the garment — nineteen per cent of an iPhone
     screen spent on chrome. It still holds two lines of the mobile size, so
     the fixed height it promises is unchanged; what went was air it did not
     need. */
  min-height: 36px;
  padding: 0.3rem var(--gutter);
  overflow: hidden;
}

.anb__line {
  /* All messages share one cell, so the tallest never sets the height and no
     message can shift another. */
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.45;
  color: var(--color-gold-soft);
  text-align: center;
  text-decoration: none;
  opacity: 0;
  /* Below the resting line, ready to rise into place. */
  transform: translate3d(0, 8px, 0);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  pointer-events: none;
}

.anb__line.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* The outgoing message leaves upward while the next arrives from below, so
   the two pass rather than dissolve through each other in place. */
.anb__line.is-out {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

/* ── The message ─────────────────────────────────────────────────────────
   Two lines at most. A single line is the intent and what every stock
   message does; the clamp is the safety net for the day a shop types a
   sentence, and it is what makes the fixed height above safe to promise. */
.anb__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The house mark. A small gold lozenge, turned — the printer's ornament that
   sits before a line of display type. It is 4px of transform, not an image
   and not a glyph that depends on a font having it. */
.anb__mark {
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--color-gold);
  transform: rotate(45deg);
  opacity: 0.85;
}

/* ── The optional destination ────────────────────────────────────────────
   Present only when the message carried a route. Underlined rather than
   boxed: a button in a 46px band would be the loudest thing on the page
   before the shopper has seen a single garment. */
.anb__cta {
  flex: none;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.55);
  color: var(--color-ink);
  letter-spacing: 0.12em;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

a.anb__line:active .anb__cta {
  color: var(--color-gold-soft);
  border-bottom-color: var(--color-gold);
}

a.anb__line:focus-visible {
  outline: 1px solid var(--gold-halo);
  outline-offset: -3px;
}

/* ── Room to breathe ─────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .anb__stage { min-height: 44px; padding-block: 0.4rem; }
  .anb__line { font-size: 0.75rem; letter-spacing: 0.24em; gap: 0.7rem; }
  .anb__mark { width: 5px; height: 5px; }
}

@media (min-width: 1100px) {
  .anb__line { letter-spacing: 0.28em; }
}

@media (hover: hover) {
  a.anb__line:hover .anb__cta {
    color: var(--color-gold-soft);
    border-bottom-color: var(--color-gold);
  }
}

/* ── The phone floor ─────────────────────────────────────────────────────
   This is the first line of Arabic on the page. 0.72rem is 11.5px, which is
   under the size at which the script keeps its joins at arm's length. */
@media (hover: none) and (pointer: coarse) {
  .anb__line { font-size: 0.75rem; }
}

/* The rotation is stopped in JS under reduced motion, so the first message
   simply stays. This makes sure nothing is left mid-move if the preference is
   switched on while the page is open, and that the entrance never runs. */
@media (prefers-reduced-motion: reduce) {
  .anb.is-in { animation: none; }
  .anb__line { transition: none; }
  .anb__line.is-on { transform: none; }
}

/* ══ The WhatsApp button ═══════════════════════════════════════════════════

   A link, styled as the shop's own object rather than as WhatsApp's: the
   house black, a gold hairline, a gold glyph. The brand green would be the
   one saturated colour on the site and would read as an advertisement
   somebody else had placed on the page.

   Everything about its position is defensive, because a control pinned to the
   corner of a phone is pinned on top of whatever else is there:

   · z-index 55 puts it UNDER every layer that can open over the page — the
     order bar at 60, the header at 100, the search overlay at 220, the cart
     and the nav sheet at 300, the toast at 400, the checkout sheet at 500,
     the photograph viewer at 1000. It cannot cover a popup because it is
     never above one.
   · it stands down entirely for the surfaces that take the whole screen, so
     it is not a dimmed circle sitting on a backdrop.
   · it lifts over the product page's order bar rather than hiding, so the
     one page where a question is most likely keeps its answer reachable. */
.wa-fab {
  position: fixed;
  z-index: 55;
  /* The inline-END corner — visually the LEFT on this RTL page.
     
     The obvious corner was the other one, and it was wrong: `.mz-hero__body`
     aligns to flex-start, which in RTL packs the home page's "اكتشف المجموعة"
     against the right edge. Measured at 390x844 the button covered its last
     48px — a floating contact link sitting on top of the primary call to
     action of the shop's front page. Mirrored, it is the trailing corner,
     which is where this control belongs on a right-to-left page anyway. */
  inset-inline-end: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));

  display: grid;
  place-items: center;
  /* 52px: the same target as the viewer's close and the gallery's controls. */
  width: 52px;
  height: 52px;
  border-radius: 50%;

  background: var(--color-bg-elevated);
  border: 1px solid var(--gold-edge);
  color: var(--color-gold-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  -webkit-tap-highlight-color: transparent;

  transition: transform 234ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 234ms ease,
              color 234ms ease;
}

/* `display: grid` on the class outranks the user-agent's `[hidden]` rule, so
   the attribute has to be honoured explicitly or setting it does nothing. */
.wa-fab[hidden] { display: none; }

.wa-fab svg { width: 25px; height: 25px; }

.wa-fab:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

.wa-fab:active { transform: translateY(0); }

.wa-fab:focus-visible {
  outline: 2px solid var(--gold-halo);
  outline-offset: 3px;
}

/* ── Out of the way ──────────────────────────────────────────────────────
   Each of these is a surface that owns the whole screen while it is open.
   A floating button behind a backdrop is not "underneath", it is litter. */
body.pv-open .wa-fab,
body.is-checkout-open .wa-fab,
body.qa-locked .wa-fab {
  display: none;
}

/* ── Above the order bar ─────────────────────────────────────────────────
   The product page's bar is full width and about 66px tall plus the inset,
   so at the shared bottom offset the two would be on top of one another —
   and the bar is the thing that sells. The class is set by the product page
   from the same place it shows and hides that bar. */
body.has-order-dock .wa-fab {
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
}

/* ── The contact page keeps its corner ───────────────────────────────────
   No offset works there: the channel rows tile the whole column with 9px
   between them and the circle is 52px, so wherever it sits it sits on a row.
   It is also the one page where a floating "message us" button has nothing
   to add — WhatsApp is already in the list, with its own row, at full width.
   So it stands down. Positioning only, scoped by the page's own root class.

   Why /shop has no rule here
   --------------------------
   It had one: a 6.75rem lift, to clear the ~6% of a card's buy button the
   circle covered at 390x844. It was tuned on that one screen, and measured
   across the rest of the range it was worse than doing nothing — the card
   grid's pitch changes with the viewport, so the two phones want opposite
   answers:

       390x844    16px: 4% of the buy button    108px: clean
       414x896    16px: clean                   108px: 19% of the buy button

   Sweeping every offset from 16 to 184px across five phone sizes, the best
   any fixed value manages is 9% worst-case coverage (at 172px, which floats
   the circle a third of the way up the screen); 16px gives 21% and 108px 19%.

   But that whole table is measured at the top of the page, and this is the
   part that settles it. The grid's row pitch is 342px, a buy button is 45px
   and the circle is 52px, so as the page scrolls the circle crosses a buy
   button over (52 + 45) / 342 of the travel — about 28% of scroll positions,
   *whatever* the offset is. A fixed offset cannot change how often the two
   meet, only which scroll positions they meet at. Tuning it is choosing a
   number for one screenshot.

   So /shop keeps the shared 16px offset: the conventional position, the same
   one every other page uses, and no worse than any alternative once she
   scrolls. Actually fixing this needs the button to know where the page is
   — yielding while the grid is under it — which is the scroll-aware
   behaviour that was ruled out, and is not something CSS can do alone. */
body:has(.cx-page) .wa-fab {
  display: none;
}

/* ── Two more pages that already say it better ───────────────────────────
   The same reasoning as the contact page above, which is why they share its
   rule rather than getting an offset each.

   The tracking page carries a help card with its own full-width
   "راسلنا على واتساب" button, permanently, under the search. Measured at
   414x896 the circle sat on that button — a floating WhatsApp control
   covering a labelled WhatsApp control — and at 360x640 it sat on
   «تتبّع الطلب», the one thing the page exists to press. Neither is a near
   miss an offset would fix: the two are at opposite ends of a short page, so
   clearing one lands on the other.

   The review form is a single-task surface, like the checkout sheet that
   already hides this button. The circle sat over the bottom corner of the
   message box on every phone measured — 7% of it at 360px — which on a
   typing target is worse than the percentage sounds: a tap meant to place a
   cursor opens WhatsApp instead, halfway through writing a review. Scoped to
   the form rather than to the page, so the button comes back on the
   thank-you screen and stays on the reviews list, where a question is
   plausible and nothing is underneath it. */
body:has(.trk-page) .wa-fab,
body:has(.rv-form) .wa-fab {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}

/* ── Smart Offers: the one box a shopper sees ───────────────────────────
   Value, not an advertisement. A quiet bordered panel in the shop's own gold,
   never a coloured banner: this shop sells cash on delivery to people who are
   deciding whether to trust it, and urgency theatre spends that trust.
   One box per surface — the server sends at most one for a product. */
.pdp-offers:empty,
.cart-offers:empty { display: none; }

.of-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem 0.95rem;
  margin: 1rem 0;
  border: 1px solid rgba(197, 164, 106, 0.28);
  border-radius: 16px;
  background: rgba(197, 164, 106, 0.05);
}
.cart-offers .of-card { margin: 0 0 0.75rem; }

.of-card__head {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #c5a46a;
  letter-spacing: -0.01em;
}
.of-card__body {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.of-card__img {
  flex: none;
  width: 52px;
  height: 66px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.of-card__text { flex: 1; min-width: 0; }
.of-card__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}
.of-card__sub {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.7;
  opacity: 0.72;
}
.of-card__money {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 0.1rem;
}
.of-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #c5a46a;
  font-variant-numeric: tabular-nums;
}
.of-price--free { font-size: 0.85rem; }
.of-price__was {
  font-size: 0.74rem;
  opacity: 0.55;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* The button is the whole interaction, so it is a full-width target rather
   than something to aim at with a thumb. */
.of-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(197, 164, 106, 0.4);
  background: transparent;
  color: #c5a46a;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 120ms ease;
}
.of-btn:hover { background: rgba(197, 164, 106, 0.12); }
.of-btn.is-on {
  background: rgba(197, 164, 106, 0.18);
  border-color: rgba(197, 164, 106, 0.55);
}

.of-badge {
  justify-self: start;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(197, 164, 106, 0.14);
  color: #c5a46a;
  font-size: 0.72rem;
}

/* A quantity offer is a small table: the whole point is comparing the rows. */
.of-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.of-tier {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
}
.of-tier__price {
  font-weight: 600;
  color: #c5a46a;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .of-card__img { width: 44px; height: 56px; }
  .of-card__money { justify-items: end; }
}