@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght@200;300;400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800&display=swap');

/* ==========================================================================
   ARIZOO — CORE
   Design system, reset, primitives, components and site chrome.
   Direction-agnostic: authored with CSS logical properties so the entire
   layout mirrors for Arabic with no per-component RTL patching.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — black, warmed a shade so gold sits naturally on it */
  --c-void: #000000;
  --c-bg: #080807;
  --c-surface: #0f0e0c;
  --c-surface-2: #161412;
  --c-surface-3: #201d19;
  --c-elevated: #2a2621;

  /* The brand: gold and white on black */
  --c-white: #ffffff;
  --c-white-2: #e8e4dc;

  /* Text that sits on a plate which is dark whatever the theme is — a badge
     over a photograph, the wishlist button, the quick-view pill. The white
     roles above deliberately invert with the theme; these must not, or the
     light theme paints them black on black. */
  --c-on-photo: #f1eee7;
  --c-gold-on-photo: #f4e2a1;
  --c-white-3: #a8a298;
  --c-gold: #d4af37;
  --c-gold-bright: #f4e2a1;
  --c-gold-deep: #8a6d18;
  --c-gold-glow: rgba(212, 175, 55, 0.26);

  /* Text */
  --c-text: #f8f6f1;
  --c-text-2: #bab4a8;
  --c-text-3: #7e786d;
  --c-text-inverse: #090806;

  /* Lines */
  --c-line: rgba(255, 255, 255, 0.09);
  --c-line-2: rgba(255, 255, 255, 0.17);
  --c-line-gold: rgba(212, 175, 55, 0.38);

  /* Status */
  --c-success: #3fbf7f;
  --c-warn: #e0a33e;
  --c-danger: #e5484d;
  --c-info: #4c8dff;
  /* The same meanings as text. On a dark page they can be the bright hue
     itself; the light theme has to darken them or they wash out on white. */
  --c-danger-text: #ff8f92;

  /* Gradients */
  --g-pearl: linear-gradient(168deg, #ffffff 0%, #f4f1ea 26%, #cbc5b8 52%, #ffffff 74%, #ded8cb 100%);
  --g-gold: linear-gradient(168deg, #f8ecc2 0%, #d4af37 42%, #8a6d18 72%, #efdca2 100%);
  --g-spotlight: radial-gradient(60% 50% at 50% 0%, rgba(212, 175, 55, 0.14) 0%, transparent 70%);
  --g-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));

  /* Typography */
  --f-display: 'Cormorant', 'Tajawal', Georgia, 'Times New Roman', serif;
  --f-body: 'Montserrat', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Montserrat', ui-monospace, 'Cascadia Mono', monospace;

  /* Fluid type scale — clamp() so nothing needs a breakpoint to stay readable */
  --t-hero: clamp(3rem, 10.5vw, 8.5rem);
  --t-d1: clamp(2.5rem, 6vw, 5rem);
  --t-d2: clamp(2rem, 4.4vw, 3.5rem);
  --t-d3: clamp(1.6rem, 3vw, 2.4rem);
  --t-h1: clamp(1.5rem, 2.4vw, 2rem);
  --t-h2: clamp(1.25rem, 1.9vw, 1.5rem);
  --t-h3: 1.125rem;
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.78rem;
  --t-xxs: 0.7rem;

  /* Spacing — standard density (5/10) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --sh-3: 0 14px 44px rgba(0, 0, 0, 0.55);
  --sh-4: 0 30px 90px rgba(0, 0, 0, 0.65);
  --sh-gold: 0 0 0 1px var(--c-line-gold), 0 12px 40px var(--c-gold-glow);

  /* Motion */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 460ms;
  --d-fluid: 700ms;

  /* Structure */
  --wrap: 1320px;
  --wrap-narrow: 880px;
  --header-h: 76px;
  --topbar-h: 34px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* Optional light gallery mode — the shop can be shown on white walls too */
[data-theme='light'] {
  --c-void: #ffffff;
  --c-bg: #faf9f6;
  --c-surface: #ffffff;
  --c-surface-2: #f4f2ec;
  --c-surface-3: #e9e6dd;
  --c-elevated: #ffffff;
  --c-text: #0f0e0c;
  --c-text-2: #4a463f;
  --c-text-3: #837e74;
  --c-text-inverse: #ffffff;
  /* The metal role inverts: ink where the dark theme uses white */
  --c-white: #0f0e0c;
  --c-white-2: #1c1a17;
  --c-white-3: #6b665d;
  --c-line: rgba(15, 14, 12, 0.1);
  --c-line-2: rgba(15, 14, 12, 0.18);
  --c-line-gold: rgba(138, 109, 24, 0.4);
  --c-gold: #8a6d18;
  --c-gold-bright: #6f5713;
  --c-gold-glow: rgba(138, 109, 24, 0.16);
  /* Status hues, darkened for white. The dark-theme values sit at around 2:1
     against this background, which is a colour you can see but not read. */
  --c-success: #1f7a4d;
  --c-warn: #8a5a00;
  --c-danger: #c02026;
  --c-danger-text: #c02026;
  --c-info: #1d5ecc;
  --g-pearl: linear-gradient(168deg, #2a2621 0%, #0f0e0c 50%, #2a2621 100%);
  --g-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55));
  --g-spotlight: radial-gradient(60% 50% at 50% 0%, rgba(138, 109, 24, 0.09) 0%, transparent 70%);
  --sh-2: 0 4px 16px rgba(20, 19, 15, 0.08);
  --sh-3: 0 14px 44px rgba(20, 19, 15, 0.1);
  --sh-4: 0 30px 90px rgba(20, 19, 15, 0.14);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[dir='rtl'] {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.85;

  /* Arabic sets optically much larger than Latin at the same point size, and
     has no lowercase to shrink into. Pull the display scale down so Arabic
     headlines occupy comparable space instead of swallowing the viewport. */
  --t-hero: clamp(1.9rem, 5.2vw, 4.4rem);
  --t-d1: clamp(1.6rem, 3.6vw, 3rem);
  --t-d2: clamp(1.35rem, 2.9vw, 2.3rem);
  --t-d3: clamp(1.2rem, 2.2vw, 1.7rem);
  --t-h1: clamp(1.15rem, 1.9vw, 1.45rem);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Components below set display on classes, which would otherwise out-specify
   the attribute — make [hidden] authoritative. */
[hidden] { display: none !important; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

/* Visible focus for every keyboard user — never removed, only restyled */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--c-gold); color: var(--c-text-inverse); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-void); }
::-webkit-scrollbar-thumb {
  background: var(--c-surface-3);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-void);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-gold-deep); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

body[dir='rtl'] h1,
body[dir='rtl'] h2,
body[dir='rtl'] h3,
body[dir='rtl'] h4,
body[dir='rtl'] h5 {
  font-family: var(--f-body);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.display { font-family: var(--f-display); font-size: var(--t-d1); line-height: 1.02; }
body[dir='rtl'] .display { font-family: var(--f-body); font-weight: 800; line-height: 1.3; }

.eyebrow {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.6;
  flex: none;
}

body[dir='rtl'] .eyebrow { letter-spacing: 0; font-weight: 700; }

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.6;
  flex: none;
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--c-text-2);
  line-height: 1.75;
  max-width: 62ch;
  font-weight: 300;
}

.pearl-text {
  background: var(--g-pearl);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-text {
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Catalogue index numbers, museum-placard style */
.placard {
  font-family: var(--f-mono);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--c-text-3);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

body[dir='rtl'] .placard { letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(56px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-end: var(--s-7);
}

.section-head__title { font-size: var(--t-d2); max-width: 20ch; }
.section-head__title .thin { font-style: italic; color: var(--c-text-2); }
body[dir='rtl'] .section-head__title .thin { font-style: normal; }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); }
.stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }
.stack-5 { gap: var(--s-5); }
.stack-6 { gap: var(--s-6); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

.hr {
  height: 1px;
  background: var(--c-line);
  border: 0;
  width: 100%;
}

.hr--gold {
  background: linear-gradient(90deg, transparent, var(--c-line-gold), transparent);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first tab stop on every page */
.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: 999;
  background: var(--c-gold);
  color: var(--c-text-inverse);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: inset-block-start var(--d-base) var(--e-out);
}
.skip-link:focus { inset-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  --btn-bd: var(--c-line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out),
              transform var(--d-fast) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}

body[dir='rtl'] .btn { letter-spacing: 0; font-weight: 700; text-transform: none; font-size: var(--t-sm); }

.btn:active { transform: translateY(1px); }

.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm svg { width: 15px; height: 15px; }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

/* Gold sweep fill.
   transform-origin has no logical keywords, so the leading edge is set
   physically and flipped for RTL. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
  z-index: -1;
}

body[dir='rtl'] .btn::before { transform-origin: right; }

/* Hover-only so the sweep never sticks on a phone after a tap */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover { color: var(--c-text-inverse); border-color: transparent; }
}

.btn--gold {
  --btn-bg: var(--c-gold);
  --btn-fg: #17130a;
  --btn-bd: transparent;
  font-weight: 700;
}
.btn--gold::before { background: var(--c-gold-bright); }
.btn--gold:hover { color: #17130a; box-shadow: 0 10px 34px var(--c-gold-glow); }

.btn--solid {
  --btn-bg: var(--c-text);
  --btn-fg: var(--c-text-inverse);
  --btn-bd: transparent;
}

.btn--ghost { --btn-bd: transparent; }
.btn--ghost:hover::before { display: none; }
.btn--ghost:hover { color: var(--c-gold); background: rgba(255, 255, 255, 0.05); border-color: var(--c-line); }

.btn--sm { min-height: 38px; padding: 0 var(--s-4); font-size: var(--t-xxs); }
.btn--lg { min-height: 56px; padding: 0 var(--s-7); }
.btn--block { width: 100%; }

.btn--danger { --btn-bd: rgba(229, 72, 77, 0.4); --btn-fg: #ff8f92; }
.btn--danger::before { background: var(--c-danger); }
.btn--danger:hover { color: #fff; }

/* Icon-only control — always carries an aria-label in markup */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  position: relative;
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

.icon-btn:hover { color: var(--c-gold); background: rgba(255, 255, 255, 0.05); }
.icon-btn svg { width: 20px; height: 20px; }

.icon-btn__count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--c-gold);
  color: #17130a;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  transition: transform var(--d-base) var(--e-back);
}

.icon-btn__count[data-empty='true'] { transform: scale(0); }

/* Text link with an underline that draws in */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text);
  padding-block-end: 3px;
  transition: color var(--d-base) var(--e-out);
}

body[dir='rtl'] .link { letter-spacing: 0; text-transform: none; font-size: var(--t-sm); }

.link::after {
  content: '';
  position: absolute;
  inset-block-end: 6px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  /* Retracts to the trailing edge, redraws from the leading edge */
  transform-origin: right;
  transition: transform var(--d-slow) var(--e-out);
}

body[dir='rtl'] .link::after { transform-origin: left; }

.link:hover { color: var(--c-gold); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }
body[dir='rtl'] .link:hover::after { transform-origin: right; }

.link svg { width: 15px; height: 15px; transition: transform var(--d-base) var(--e-out); }
.link:hover svg { transform: translateX(4px); }
body[dir='rtl'] .link:hover svg { transform: translateX(-4px); }
body[dir='rtl'] .link svg { transform: scaleX(-1); }
body[dir='rtl'] .link:hover svg { transform: scaleX(-1) translateX(4px); }

/* --------------------------------------------------------------------------
   6. FORM CONTROLS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

body[dir='rtl'] .field__label { letter-spacing: 0; text-transform: none; font-size: var(--t-sm); font-weight: 700; }

.field__hint { font-size: var(--t-xs); color: var(--c-text-3); }

.field__error {
  font-size: var(--t-xs);
  color: #ff8f92;
  display: none;
  align-items: center;
  gap: var(--s-2);
}

.field[data-invalid='true'] .field__error { display: flex; }
.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea { border-color: var(--c-danger); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

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

.input::placeholder,
.textarea::placeholder { color: var(--c-text-3); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  background: var(--c-surface-3);
}

.select {
  appearance: none;
  padding-inline-end: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a94' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 16px;
  cursor: pointer;
}

body[dir='rtl'] .select { background-position: left var(--s-4) center; }

.select option { background: var(--c-surface-2); color: var(--c-text); }

/* --------------------------------------------------------------------------
   CLUB MARK — the club's crest, on a swatch of its kit colours.
   The crest image removes itself if the file is missing, leaving the kit
   swatch visible, so a club with no badge on file still reads.
   -------------------------------------------------------------------------- */
.club-mark {
  position: relative;
  /* Real crests carry fine detail; 22px lost it */
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  transition: transform var(--d-fast) var(--e-out);
}

.club-mark__kit {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--c-line-2);
  /* jersey silhouette */
  clip-path: polygon(
    30% 0%, 42% 7%, 58% 7%, 70% 0%,
    100% 15%, 92% 36%, 81% 30%,
    81% 100%, 19% 100%, 19% 30%,
    8% 36%, 0% 15%
  );
}

.club-mark__crest {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A crest is self-contained artwork — hide the kit swatch, but only once the
   file has actually decoded, so a missing badge never flashes an empty box */
.club-mark[data-crest] .club-mark__kit { display: none; }

.checkbox:has(input:checked) .club-mark { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   LEAGUE MARK
   Most league marks are dark wordmarks, so unlike a club crest they always get
   a lit backing — otherwise they vanish into the gallery black.
   -------------------------------------------------------------------------- */
.league-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  flex: none;
  padding: 3px 4px;
  border-radius: var(--r-xs);
  background: linear-gradient(160deg, #ffffff, #ececea);
  box-shadow: 0 0 0 1px var(--c-line-2);
  transition: transform var(--d-fast) var(--e-out);
}

.league-mark img { width: 100%; height: 100%; object-fit: contain; }

.checkbox:has(input:checked) .league-mark { transform: scale(1.06); }

/* Heading inside a filter group — splits clubs from national sides */
.filter-sub {
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-block: var(--s-3) var(--s-1);
  padding-block-end: var(--s-1);
  border-block-end: 1px solid var(--c-line);
}

.filter-sub:first-child { margin-block-start: 0; }

body[dir='rtl'] .filter-sub { letter-spacing: 0; text-transform: none; font-size: var(--t-xs); }

.checkbox,
.radio {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--c-text-2);
  min-height: 38px;
  transition: color var(--d-fast) var(--e-out);
}

.checkbox:hover,
.radio:hover { color: var(--c-text); }

.checkbox input,
.radio input {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xs);
  cursor: pointer;
  position: relative;
  transition: all var(--d-fast) var(--e-out);
}

.radio input { border-radius: 50%; }

.checkbox input:checked,
.radio input:checked { background: var(--c-gold); border-color: var(--c-gold); }

.checkbox input:checked::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 5.5px;
  width: 4px;
  height: 9px;
  border: solid #17130a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.radio input:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #17130a;
  border-radius: 50%;
}

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface-2);
}

.qty button {
  width: 44px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--c-text-2);
  font-size: 1.1rem;
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}

.qty button:hover { color: var(--c-gold); background: rgba(255, 255, 255, 0.05); }

.qty input {
  width: 46px;
  height: 46px;
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--c-line);
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty input { appearance: textfield; -moz-appearance: textfield; }

/* --------------------------------------------------------------------------
   7. SURFACES, BADGES & CHIPS
   -------------------------------------------------------------------------- */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.glass {
  background: var(--g-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--c-line);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding-inline: var(--s-3);
  border-radius: var(--r-xs);
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.07);
  color: var(--c-text-2);
  border: 1px solid var(--c-line);
  white-space: nowrap;
}

body[dir='rtl'] .badge { letter-spacing: 0; text-transform: none; }

.badge--gold {
  background: var(--g-gold);
  color: #17130a;
  border-color: transparent;
}

.badge--rare {
  background: rgba(217, 182, 92, 0.12);
  color: var(--c-gold);
  border-color: var(--c-line-gold);
}

.badge--sold { background: rgba(229, 72, 77, 0.14); color: var(--c-danger-text); border-color: rgba(229, 72, 77, 0.3); }
.badge--ok { background: rgba(63, 191, 127, 0.13); color: var(--c-success); border-color: rgba(63, 191, 127, 0.3); }
.badge--warn { background: rgba(224, 163, 62, 0.13); color: var(--c-warn); border-color: rgba(224, 163, 62, 0.3); }
.badge--info { background: rgba(76, 141, 255, 0.13); color: var(--c-info); border-color: rgba(76, 141, 255, 0.3); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding-inline: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--d-fast) var(--e-out);
}

.chip:hover { border-color: var(--c-line-gold); color: var(--c-text); }

.chip[aria-pressed='true'],
.chip.is-active {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #17130a;
  font-weight: 700;
}

.chip__x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. OVERLAYS — modal, drawer, toast
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}

.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(440px, 100vw);
  background: var(--c-surface);
  border-inline-start: 1px solid var(--c-line);
  box-shadow: var(--sh-4);
  z-index: 210;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-out), visibility var(--d-slow);
}

body[dir='rtl'] .drawer { transform: translateX(-100%); }

/* The RTL closed-state rule above out-specifies a bare `.drawer.is-open`
   (0,2,1 vs 0,2,0), which would pin the drawer off-screen in Arabic. Both
   directions are listed so the open state always wins. */
.drawer.is-open,
body[dir='rtl'] .drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer--start {
  inset-inline-start: 0;
  inset-inline-end: auto;
  border-inline: 0 1px solid var(--c-line);
  transform: translateX(-100%);
}
body[dir='rtl'] .drawer--start { transform: translateX(100%); }
.drawer--start.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-block-end: 1px solid var(--c-line);
  flex: none;
}

.drawer__title {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[dir='rtl'] .drawer__title { letter-spacing: 0; text-transform: none; font-size: var(--t-h3); }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer__foot { flex: none; padding: var(--s-5); border-block-start: 1px solid var(--c-line); background: var(--c-surface-2); }

.modal {
  position: fixed;
  inset-block-start: 50%;
  /* Physical `left` on purpose: a centred dialog is symmetric, and pairing
     the logical inset with a physical translate mis-centres it under RTL. */
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  z-index: 210;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  border-block-end: 1px solid var(--c-line);
}

.modal__body { padding: var(--s-5); overflow-y: auto; }
.modal__foot { padding: var(--s-5); border-block-start: 1px solid var(--c-line); display: flex; gap: var(--s-3); justify-content: flex-end; }

.toasts {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline-end: var(--s-5);
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--c-elevated);
  border: 1px solid var(--c-line-2);
  border-inline-start: 3px solid var(--c-gold);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: toast-in var(--d-slow) var(--e-back) both;
}

.toast--success { border-inline-start-color: var(--c-success); }
.toast--error { border-inline-start-color: var(--c-danger); }
.toast svg { width: 18px; height: 18px; flex: none; color: var(--c-gold); }
.toast--success svg { color: var(--c-success); }
.toast--error svg { color: var(--c-danger); }
.toast.is-leaving { animation: toast-out var(--d-base) var(--e-out) both; }

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

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

/* --------------------------------------------------------------------------
   9. TOP BAR + HEADER
   -------------------------------------------------------------------------- */
.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg, var(--c-void));
  color: var(--topbar-fg, var(--c-text-3));
  border-block-end: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 60;
}

.topbar__track {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  white-space: nowrap;
  animation: ticker var(--topbar-speed, 42s) linear infinite;
  will-change: transform;
}

body[dir='rtl'] .topbar__track { animation-direction: reverse; }

.topbar:hover .topbar__track { animation-play-state: paused; }

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 500;
}

/* The whole bar can be a link when the client points it at a sale. */
.topbar__link {
  display: block;
  width: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

body[dir='rtl'] .topbar__item { letter-spacing: 0; text-transform: none; font-size: var(--t-xs); }

.topbar__item svg { width: 13px; height: 13px; color: var(--c-gold); opacity: .9; }

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-block-end: 1px solid transparent;
  transition: background var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              height var(--d-base) var(--e-out);
}

[data-theme='light'] .header { background: rgba(255, 255, 255, 0.78); }

.header.is-stuck {
  border-block-end-color: var(--c-line);
  background: rgba(6, 6, 7, 0.9);
  height: 64px;
}

[data-theme='light'] .header.is-stuck { background: rgba(255, 255, 255, 0.94); }

.header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); padding-block: var(--s-2); }
.brand img { height: 30px; width: auto; transition: height var(--d-base) var(--e-out); }

/* The wordmark ships in both inks — see .brandmark below. */

.nav { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }

.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-2);
  border-radius: var(--r-sm);
  transition: color var(--d-fast) var(--e-out);
  white-space: nowrap;
}

body[dir='rtl'] .nav__link { letter-spacing: 0; text-transform: none; font-size: var(--t-sm); font-weight: 500; }

.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 50%;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transform: translateX(-50%);
  transition: width var(--d-base) var(--e-out);
}

body[dir='rtl'] .nav__link::after { transform: translateX(50%); }

.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--c-text); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { width: calc(100% - 32px); }

.header__tools { display: flex; align-items: center; gap: var(--s-1); justify-self: end; }

/* Language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--c-surface-2);
}

.lang-switch button {
  min-width: 42px;
  height: 36px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-text-2);
  transition: all var(--d-fast) var(--e-out);
}

/* The Arabic glyph needs more optical size than the Latin pair */
.lang-switch button[data-lang='ar'] { font-size: 1.05rem; letter-spacing: 0; line-height: 1; }

.lang-switch button:hover { color: var(--c-text); }

.lang-switch button[aria-pressed='true'] {
  background: var(--c-gold);
  color: #17130a;
}

.burger { display: none; }

/* Mobile navigation panel */
.mobile-nav__links { display: flex; flex-direction: column; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-block-end: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-out), padding-inline-start var(--d-base) var(--e-out);
}

body[dir='rtl'] .mobile-nav__link { font-family: var(--f-body); font-size: 1.25rem; font-weight: 700; }

.mobile-nav__link:hover { color: var(--c-gold); padding-inline-start: var(--s-3); }
.mobile-nav__link .placard { font-size: 10px; }

/* Search overlay */
.search-panel {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  background: var(--c-surface);
  border-block-end: 1px solid var(--c-line);
  z-index: 220;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-out), visibility var(--d-slow);
  box-shadow: var(--sh-3);
  max-height: 100vh;
  overflow-y: auto;
}

.search-panel.is-open { transform: translateY(0); visibility: visible; }
.search-panel__inner { padding-block: var(--s-6); }

.search-panel__field {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  border-block-end: 1px solid var(--c-line-2);
  padding-block-end: var(--s-4);
}

.search-panel__field svg { width: 24px; height: 24px; color: var(--c-gold); flex: none; }

.search-panel__field input {
  flex: 1;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.6vw, 2.4rem);
  color: var(--c-text);
  background: none;
  min-width: 0;
}

body[dir='rtl'] .search-panel__field input { font-family: var(--f-body); font-weight: 600; }
.search-panel__field input::placeholder { color: var(--c-text-3); }

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-4);
  margin-block-start: var(--s-5);
}

.search-result {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: all var(--d-fast) var(--e-out);
}

.search-result:hover { border-color: var(--c-line-gold); background: var(--c-surface-2); }
.search-result img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-xs); flex: none; }
.search-result__name { font-size: var(--t-sm); font-weight: 500; line-height: 1.3; }
.search-result__meta { font-size: var(--t-xs); color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   10. PRODUCT CARD — the museum case
   -------------------------------------------------------------------------- */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 27vw, 300px), 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--d-slow) var(--e-out),
              border-color var(--d-slow) var(--e-out),
              box-shadow var(--d-slow) var(--e-out);
}

.pcard:hover {
  transform: translateY(-6px);
  border-color: var(--c-line-gold);
  box-shadow: var(--sh-3);
}

.pcard__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-surface-2);
  display: block;
}

/* Gallery spotlight that follows the card on hover */
.pcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 55% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 68%);
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out);
  pointer-events: none;
}

.pcard:hover .pcard__media::after { opacity: 1; }

.pcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-fluid) var(--e-out), opacity var(--d-slow) var(--e-out);
}

.pcard:hover .pcard__img { transform: scale(1.06); }

.pcard__flags {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  z-index: 2;
}

/* Flags sit on top of photography, so they need an opaque plate of their own —
   the translucent badge fills used elsewhere disappear over grass. */
.pcard__flags .badge,
.gallery__flags .badge {
  background: rgba(6, 6, 7, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--c-on-photo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.pcard__flags .badge--gold,
.gallery__flags .badge--gold {
  background: var(--g-gold);
  color: #17130a;
  border-color: transparent;
}

.pcard__flags .badge--rare,
.gallery__flags .badge--rare { color: var(--c-gold-on-photo); border-color: rgba(244, 226, 161, 0.45); }

.pcard__flags .badge--sold,
.gallery__flags .badge--sold { color: #ff9ea1; border-color: rgba(229, 72, 77, 0.55); }

.pcard__wish {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(8px);
  color: var(--c-on-photo);
  border: 1px solid rgba(255, 255, 255, 0.17);
  opacity: 0;
  transform: translateY(-6px);
  transition: all var(--d-base) var(--e-out);
}

.pcard:hover .pcard__wish,
.pcard__wish:focus-visible,
.pcard__wish[aria-pressed='true'] { opacity: 1; transform: none; }
.pcard__wish:hover { color: var(--c-gold); border-color: var(--c-line-gold); }
.pcard__wish svg { width: 17px; height: 17px; }
.pcard__wish[aria-pressed='true'] svg { fill: var(--c-gold); color: var(--c-gold); }

/* Slide-up quick actions */
.pcard__quick {
  position: absolute;
  inset-inline: var(--s-3);
  inset-block-end: var(--s-3);
  display: flex;
  gap: var(--s-2);
  z-index: 2;
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
}

.pcard:hover .pcard__quick,
.pcard:focus-within .pcard__quick { transform: none; opacity: 1; }

/* This pill sits on the photograph, so it stays dark in both themes — which
   means its own text has to stay light. Pinning only the background and
   letting the label keep the page's text colour turned it black on black the
   moment the shop was switched to the light theme. */
.pcard__quick .btn {
  flex: 1;
  min-height: 40px;
  backdrop-filter: blur(10px);
  --btn-bg: rgba(10, 10, 12, 0.72);
  --btn-fg: var(--c-on-photo);
  --btn-bd: rgba(255, 255, 255, 0.17);
}
.pcard__quick .btn--gold {
  --btn-bg: var(--c-gold);
  --btn-fg: #17130a;
  --btn-bd: transparent;
}

.pcard__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}

.pcard__club {
  font-size: var(--t-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: 600;
}

body[dir='rtl'] .pcard__club { letter-spacing: 0; text-transform: none; font-size: var(--t-xs); }

/* The name is wrapped in a link. Left inline, the link's hit box collapses to
   the height of the text itself rather than the heading it contains, which
   makes it a smaller target than it looks. */
.pcard__body > a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pcard__name {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.2;
  min-height: 30px;
  display: flex;
  align-items: center;
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-out);
}

body[dir='rtl'] .pcard__name { font-family: var(--f-body); font-size: 1.05rem; font-weight: 700; line-height: 1.5; }

.pcard:hover .pcard__name { color: var(--c-gold); }

.pcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-line);
}

.price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }

.price__now {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price__was {
  font-size: var(--t-xs);
  color: var(--c-text-3);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.pcard__sizes { display: flex; gap: 4px; }

.pcard__size {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text-3);
  /* Sizes to its label: a fixed square fits "M" but clips "XXL" */
  min-width: 21px;
  height: 21px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.pcard__size[data-out='true'] { opacity: 0.32; text-decoration: line-through; }

/* Skeleton placeholder — reserves exact space, so no layout shift */
.skeleton {
  background: linear-gradient(100deg, var(--c-surface-2) 30%, var(--c-surface-3) 50%, var(--c-surface-2) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -60% 0; }
}

.skeleton-card { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.skeleton-card__media { aspect-ratio: 1; }
.skeleton-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-5);
  color: var(--c-text-3);
}

.empty svg { width: 44px; height: 44px; color: var(--c-text-3); opacity: 0.6; }
.empty__title { font-family: var(--f-display); font-size: 1.6rem; color: var(--c-text); }
body[dir='rtl'] .empty__title { font-family: var(--f-body); font-weight: 700; font-size: 1.3rem; }

/* --------------------------------------------------------------------------
   11. CART LINE ITEM (shared by drawer + cart page)
   -------------------------------------------------------------------------- */
.line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--c-line);
  align-items: start;
}

.line:last-child { border-block-end: 0; }

.line__img {
  width: 84px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
}

.line__name { font-size: var(--t-sm); font-weight: 500; line-height: 1.35; }
.line__meta { font-size: var(--t-xs); color: var(--c-text-3); }

.line__custom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xxs);
  color: var(--c-gold);
  border: 1px dashed var(--c-line-gold);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  margin-block-start: 4px;
}

.line__remove {
  color: var(--c-text-3);
  font-size: var(--t-xs);
  transition: color var(--d-fast) var(--e-out);
  padding: 4px 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.line__remove:hover { color: var(--c-danger); }
.line__price { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }

/* Totals */
.totals { display: flex; flex-direction: column; gap: var(--s-3); }

.totals__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-text-2);
}

.totals__row--grand {
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-line);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text);
}

.totals__row span:last-child { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-void);
  border-block-start: 1px solid var(--c-line);
  margin-block-start: var(--s-9);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-gold), transparent);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-7);
  padding-block: var(--s-8);
}

.footer__logo { height: 34px; width: auto; margin-block-end: var(--s-4); }

.footer__col-title {
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-block-end: var(--s-4);
}

body[dir='rtl'] .footer__col-title { letter-spacing: 0; text-transform: none; font-size: var(--t-sm); }

.footer__links { display: flex; flex-direction: column; gap: var(--s-1); }

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: var(--t-sm);
  color: var(--c-text-2);
  transition: color var(--d-fast) var(--e-out), padding-inline-start var(--d-base) var(--e-out);
  width: fit-content;
}

.footer__links a:hover { color: var(--c-gold); padding-inline-start: 6px; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-5);
  border-block-start: 1px solid var(--c-line);
  font-size: var(--t-xs);
  color: var(--c-text-3);
}

.socials { display: flex; gap: var(--s-2); }

.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  transition: all var(--d-fast) var(--e-out);
}

.socials a:hover { color: var(--c-gold); border-color: var(--c-line-gold); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.pay-marks { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

.pay-mark {
  height: 27px;
  padding-inline: var(--s-3);
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
  background: var(--c-surface);
}

/* --------------------------------------------------------------------------
   12b. TOUCH DEVICES
   A device with no hover never triggers the reveal, so anything that is
   normally hover-revealed has to be permanently visible instead — otherwise
   the control simply does not exist for a phone user.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .pcard__wish { opacity: 1; transform: none; }
  .pcard__quick { transform: none; opacity: 1; }
  .collection__cta { opacity: 1; transform: none; }

  /* No sticky hover residue after a tap */
  .pcard:hover { transform: none; box-shadow: none; }
  .pcard:hover .pcard__img { transform: none; }
  .collection:hover .collection__img { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   12c. IMAGE FADE-IN
   A photograph snapping in at full opacity the instant it decodes reads as a
   jolt. Marked images start clear and settle as they arrive; a cached image is
   flagged synchronously, so it never fades on a repeat visit.
   -------------------------------------------------------------------------- */
img[data-fade] {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 620ms var(--e-out), transform 900ms var(--e-out);
}

img[data-fade].is-loaded {
  opacity: 1;
  transform: none;
}

/* A broken image must not leave a permanent hole */
img[data-fade].is-failed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  img[data-fade] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   13. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-fluid) var(--e-out), transform var(--d-fluid) var(--e-out);
}

[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal='fade'] { transform: none; }
[data-reveal='left'] { transform: translateX(-28px); }
[data-reveal='right'] { transform: translateX(28px); }
[data-reveal='scale'] { transform: scale(0.95); }

/* Curtain wipe used on hero imagery */
[data-reveal='curtain'] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--e-out);
}
[data-reveal='curtain'].is-in { clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }

  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__inner { grid-template-columns: auto 1fr; }
  .lang-switch { display: none; }
  .drawer { width: min(400px, 100vw); }

  /* Cards are narrow from tablet down, so the quick bar carries one action.
     The image and title remain links, so nothing becomes unreachable. */
  .pcard__quick .btn:not(.btn--gold) { display: none; }
  .pcard__quick .btn--gold { flex: 1; padding-inline: var(--s-3); }

  /* Submit buttons keep their intrinsic width instead of being squeezed */
  .newsletter__form .btn,
  .promo .btn { flex: none; }
}

@media (max-width: 620px) {
  :root {
    /* 11.2px labels and meta are legible on a desktop monitor and not on a
       phone held at arm's length — raise the small end of the scale. */
    --t-xxs: 0.75rem;
    --t-xs: 0.85rem;
  }

  /* Generous button padding is a desktop luxury; on a phone it is the
     difference between a readable label and a clipped one. */
  .btn { padding-inline: var(--s-4); letter-spacing: 0.08em; }
  .btn--lg { padding-inline: var(--s-5); }
  .btn--sm { padding-inline: var(--s-3); }
  body[dir='rtl'] .btn { letter-spacing: 0; }

  /* Heavy tracking costs width the small screen does not have */
  .eyebrow { letter-spacing: 0.22em; }
  .eyebrow::before, .eyebrow--center::after { width: 22px; }
  .pay-mark { font-size: 11px; letter-spacing: 0.04em; }
  .placard { letter-spacing: 0.16em; }

  .footer__top { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-6); }
  .footer__bottom { justify-content: center; text-align: center; }
  .section-head { margin-block-end: var(--s-5); }
  .grid-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }

  /* Two buttons cannot hold their labels inside a ~150px card, so the quick
     bar drops to a single full-width action. "View" is not lost — the image
     and the title are both already links to the product. */
  .pcard__quick {
    position: static;
    transform: none;
    opacity: 1;
    padding: var(--s-3) var(--s-3) 0;
  }

  .pcard__quick .btn:not(.btn--gold) { display: none; }

  .pcard__quick .btn--gold {
    flex: 1;
    padding-inline: var(--s-2);
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  body[dir='rtl'] .pcard__quick .btn--gold { font-size: 12px; letter-spacing: 0; }

  .pcard__body { padding-block-end: var(--s-3); }
  .toasts { inset-inline: var(--s-4); inset-block-end: var(--s-4); max-width: none; }
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   15. MOTION & PRINT PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .topbar__track { animation: none; }
}


/* --------------------------------------------------------------------------
   BRAND MARK
   The same artwork in two inks. Both ship in the markup and CSS chooses, so
   switching theme never flashes a missing logo or re-downloads a file.
   -------------------------------------------------------------------------- */
.brandmark {
  display: inline-grid;
  line-height: 0;
}

.brandmark__ink {
  grid-area: 1 / 1;
  height: var(--brandmark-h, 30px);
  width: auto;
  transition: height var(--d-base) var(--e-out), opacity var(--d-fast) linear;
}

/* Dark is the default wall, so white ink shows and black ink waits. */
.brandmark__ink--light { opacity: 0; }
[data-theme='light'] .brandmark__ink--dark { opacity: 0; }
[data-theme='light'] .brandmark__ink--light { opacity: 1; }

.header.is-stuck .brandmark__ink { height: calc(var(--brandmark-h, 30px) - 5px); }

/* --------------------------------------------------------------------------
   MODAL EXTRAS
   The .modal component above already centres and animates itself; these are
   the pieces the size chart and the offer popup add on top of it.
   -------------------------------------------------------------------------- */
.modal__title {
  font-family: var(--f-display);
  font-size: var(--t-d3);
  font-weight: 400;
  line-height: 1.1;
}

.modal__head { align-items: flex-start; }
.modal__sub { color: var(--c-text-3); font-size: var(--t-sm); margin-block-start: var(--s-2); }

/* The offer popup is a narrower, centred variant with no head rule. */
.modal--offer {
  width: min(460px, calc(100vw - 32px));
  padding: var(--s-7) var(--s-6) var(--s-6);
  text-align: center;
  border-color: var(--c-line-gold);
  background-image: var(--g-spotlight);
}

.modal--offer .modal__title { margin-block: var(--s-3) var(--s-2); }
.modal--offer .btn { margin-block-start: var(--s-5); }

.modal__x {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
}

/* --------------------------------------------------------------------------
   VOUCHER CHIP
   -------------------------------------------------------------------------- */
.voucher-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  margin-block-start: var(--s-5);
  padding: var(--s-3) var(--s-6);
  border: 1px dashed var(--c-line-gold);
  border-radius: var(--r-md);
  background: rgba(212, 175, 55, 0.06);
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}

.voucher-chip:hover { background: rgba(212, 175, 55, 0.12); border-color: var(--c-gold); }

.voucher-chip__code {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--c-gold-bright);
}

.voucher-chip__hint {
  font-size: var(--t-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

body[dir='rtl'] .voucher-chip__hint { letter-spacing: 0; text-transform: none; }

/* --------------------------------------------------------------------------
   SIZE CHART
   -------------------------------------------------------------------------- */
.sizechart__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.sizechart__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.sizechart__table th,
.sizechart__table td {
  padding: var(--s-3) var(--s-4);
  text-align: center;
  border-block-end: 1px solid var(--c-line);
  white-space: nowrap;
}

.sizechart__table thead th {
  background: var(--c-surface-2);
  color: var(--c-gold);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

body[dir='rtl'] .sizechart__table thead th { letter-spacing: 0; text-transform: none; }

.sizechart__table tbody th {
  text-align: start;
  color: var(--c-text-2);
  font-weight: 500;
}

.sizechart__table tbody tr:last-child th,
.sizechart__table tbody tr:last-child td { border-block-end: 0; }
.sizechart__table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.sizechart__unit {
  margin-block-start: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-text-3);
}

.sizechart__fits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--s-2);
  margin-block-start: var(--s-5);
}

.sizechart__fit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
}

.sizechart__fit-size { font-weight: 700; color: var(--c-gold); letter-spacing: 0.1em; }
.sizechart__fit-who { font-size: var(--t-xs); color: var(--c-text-3); }

.sizechart__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 2px solid var(--c-gold);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--c-text-2);
  line-height: 1.6;
}

.sizechart__note svg { flex: none; width: 16px; height: 16px; color: var(--c-gold); margin-block-start: 2px; }

@media print {
  .header, .topbar, .footer, .toasts, .scrim, .drawer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}


/* The studio credit. Quiet enough not to compete with the shop's own name,
   and it lifts on hover so it reads as a link rather than small print. */
.footer__by {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.footer__by a {
  color: var(--c-text-2);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}

.footer__by a:hover,
.footer__by a:focus-visible {
  color: var(--c-gold);
  border-block-end-color: var(--c-gold);
}

/* A line of text is about 23px tall, and a finger needs 24. Padding would push
   the underline away from the words, so the hit area is grown behind the link
   instead: the target is comfortably tappable and the credit still reads as
   one quiet line. */
.footer__by a {
  position: relative;
}

.footer__by a::after {
  content: '';
  position: absolute;
  inset-block: -7px;
  inset-inline: -6px;
}