/* ===========================================================================
   Base — reset, typography, primitives
   ---------------------------------------------------------------------------
   Written RTL-first: every directional rule uses logical properties
   (inline-start/end, margin-inline, inset-inline) so Arabic is the native
   layout and English is the mirror, not the other way round.
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* The hidden attribute must win over a component's own display rule. */
[hidden] { display: none !important; }

html {
  /* `clip` rather than `hidden`: it contains stray absolutely-positioned
     panels without turning the root into a scroll container, which would
     break position: sticky on the header and filter rails. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: clip;
}

body[data-locked] { overflow: hidden; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

/* ---- headings ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-wrap: balance;
}

:lang(en) h1, :lang(en) h2, :lang(en) h3, :lang(en) h4,
[lang="en"] h1, [lang="en"] h2, [lang="en"] h3, [lang="en"] h4 {
  font-family: var(--font-latin-display);
}

h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-title); }
h3 { font-size: var(--step-heading); }
h4 { font-size: var(--step-subhead); }

p { text-wrap: pretty; }

/* ---- accessibility ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--emerald-700);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.dark-section :focus-visible,
.footer :focus-visible { outline-color: var(--gold-500); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: calc(var(--z-modal) + 10);
  padding: var(--space-3) var(--space-5);
  background: var(--emerald-700);
  color: var(--cream-400);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---- layout primitives -------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }

.dark-section {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}
.dark-section h1, .dark-section h2, .dark-section h3 { color: var(--cream-400); }

.brand-section {
  background: var(--surface-brand);
  color: var(--cream-400);
}

/* ---- section heading ---------------------------------------------------- */

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

.section-heading__text { max-width: 54ch; }

.section-heading__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-600);
  margin-block-end: var(--space-3);
}

.section-heading__eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background: var(--gold-500);
  flex: none;
}

.dark-section .section-heading__eyebrow,
.brand-section .section-heading__eyebrow { color: var(--gold-300); }

.section-heading__title { font-size: var(--step-title); }

.section-heading__lede {
  margin-block-start: var(--space-3);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.dark-section .section-heading__lede,
.brand-section .section-heading__lede { color: var(--text-on-dark-muted); }

/* ---- link with a moving rule -------------------------------------------- */

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step-small);
  letter-spacing: var(--tracking-wide);
  padding-block-end: 2px;
  color: var(--text-primary);
}

.link-underline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: currentColor;
  transform-origin: inline-end;
  transition: transform var(--dur) var(--ease);
}

.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(0); transform-origin: inline-start; }

.dark-section .link-underline, .footer .link-underline { color: var(--cream-400); }

/* The arrow points the way the language reads. */
.link-underline .icon-arrow { transition: transform var(--dur) var(--ease); }
.link-underline:hover .icon-arrow { transform: translateX(calc(var(--dir, -1) * 4px)); }

[dir="ltr"] { --dir: 1; }
[dir="rtl"] { --dir: -1; }

/* ---- buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: var(--emerald-700);
  --btn-fg: var(--cream-400);
  --btn-border: var(--emerald-700);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.btn:hover:not(:disabled) { --btn-bg: var(--emerald-800); --btn-border: var(--emerald-800); }
.btn:active:not(:disabled) { --btn-bg: var(--emerald-900); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-border: var(--ink-300);
}
.btn--ghost:hover:not(:disabled) {
  --btn-bg: var(--ink-900);
  --btn-fg: var(--ivory-200);
  --btn-border: var(--ink-900);
}

.btn--gold {
  --btn-bg: transparent;
  --btn-fg: var(--gold-600);
  --btn-border: var(--gold-500);
}
.btn--gold:hover:not(:disabled) {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--ink-900);
  --btn-border: var(--gold-500);
}

.btn--on-dark {
  --btn-bg: var(--cream-400);
  --btn-fg: var(--ink-900);
  --btn-border: var(--cream-400);
}
.btn--on-dark:hover:not(:disabled) {
  --btn-bg: transparent;
  --btn-fg: var(--cream-400);
  --btn-border: var(--cream-400);
}

.btn--outline-on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--cream-400);
  --btn-border: var(--line-on-dark);
}
.btn--outline-on-dark:hover:not(:disabled) {
  --btn-bg: var(--cream-400);
  --btn-fg: var(--ink-900);
  --btn-border: var(--cream-400);
}

.btn--block { inline-size: 100%; }
.btn--sm { min-block-size: 40px; padding-inline: var(--space-4); font-size: var(--step-micro); }
.btn--lg { min-block-size: 56px; padding-inline: var(--space-7); }

/* ---- icon button -------------------------------------------------------- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-pill);
  color: inherit;
  position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: rgba(14, 16, 15, 0.06); }
.dark-section .icon-btn:hover, .header--inverse .icon-btn:hover { background: rgba(243, 232, 200, 0.12); }

.icon-btn__badge {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--emerald-700);
  color: var(--cream-400);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-family: var(--font-sans);
}

.header--inverse .icon-btn__badge { background: var(--gold-500); color: var(--ink-900); }

/* ---- forms -------------------------------------------------------------- */

.field { display: block; }

.field__label {
  display: block;
  font-size: var(--step-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-block-end: var(--space-2);
}

.field__required { color: var(--danger); margin-inline-start: 2px; }

.input,
.select,
.textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.textarea { min-block-size: 120px; resize: vertical; line-height: var(--leading-snug); }

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

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--emerald-700);
  box-shadow: 0 0 0 3px rgba(0, 96, 58, 0.12);
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.select {
  appearance: none;
  padding-inline-end: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235d635f' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--space-4) center;
  background-size: 12px 8px;
}
[dir="ltr"] .select { background-position: right var(--space-4) center; }

/* Errors are never colour alone — they carry an icon and a message. */
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  font-size: var(--step-small);
  color: var(--danger);
}
.field__error::before {
  content: "!";
  flex: none;
  inline-size: 16px; block-size: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--ivory-100);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.field__hint {
  margin-block-start: var(--space-2);
  font-size: var(--step-small);
  color: var(--text-muted);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--step-small);
  line-height: var(--leading-snug);
}
.checkbox input {
  flex: none;
  inline-size: 20px; block-size: 20px;
  margin-block-start: 2px;
  accent-color: var(--emerald-700);
  cursor: pointer;
}

/* ---- alerts ------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-500);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: var(--step-small);
  line-height: var(--leading-snug);
}
.alert--error   { border-inline-start-color: var(--danger); color: var(--danger); }
.alert--success { border-inline-start-color: var(--emerald-700); color: var(--emerald-800); }
.alert--notice  { border-inline-start-color: var(--gold-500); }
.alert__icon { flex: none; margin-block-start: 2px; }

/* ---- rule / divider ----------------------------------------------------- */

.rule { block-size: 1px; background: var(--line-soft); border: 0; }
.rule--gold { background: linear-gradient(to inline-end, transparent, var(--gold-300), transparent); }

/* ---- badges ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline: var(--space-2);
  padding-block: 3px;
  font-size: var(--step-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  color: var(--cream-400);
  font-family: var(--font-sans);
}
.badge--sale  { background: var(--danger); }
.badge--new   { background: var(--emerald-700); }
.badge--gold  { background: var(--gold-500); color: var(--ink-900); }
.badge--quiet { background: var(--ivory-400); color: var(--brown-700); }

/* ---- price -------------------------------------------------------------- */

.price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.price__now { font-size: var(--step-subhead); font-weight: 500; color: var(--text-primary); }
.price__was {
  font-size: var(--step-small);
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price--lg .price__now { font-size: var(--step-heading); }
.price--sale .price__now { color: var(--danger); }
.dark-section .price__now { color: var(--cream-400); }

/* ---- utility ------------------------------------------------------------ */

.muted { color: var(--text-secondary); }
.center { text-align: center; }
.flow-sm { --flow: var(--space-2); }
.flow-lg { --flow: var(--space-6); }

.price__from {
  font-size: var(--step-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}