/* ═══════════════════════════════════════════════════════════════════
   MERAMIEH theme — design tokens + primitives
   Ported 1:1 from the approved Magic Patterns export (tailwind.config.js,
   src/index.css, src/utils/styles.ts). Shared by theme.css and woocommerce.css.
   Layout uses logical properties so the same file serves RTL (Arabic) and LTR.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* colour (Magic Patterns) */
  --paper: #FAF7F2; --bone: #F3EEE6; --sand: #E7DFD2; --stone: #CFC4B4;
  --ink: #1F1D1A; --muted: #6A6358; --clay: #9E5A3C; --sage: #B7C0A6;
  --moss: #2A4A1B; --moss-deep: #1C3112; --moss-soft: #4F6A3C;
  --ink-40: rgba(31,29,26,.4); --ink-80: rgba(31,29,26,.8); --bone-15: rgba(243,238,230,.15); --bone-75: rgba(243,238,230,.75); --bone-85: rgba(243,238,230,.85);
  /* type */
  --font-display: "Cormorant Garamond", Amiri, Georgia, serif;
  --font-ar: "The Year of Handicrafts", Amiri, "Cormorant Garamond", serif;
  --font-sans: Jost, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --t-fast: 150ms; --t-base: 200ms; --t-med: 300ms;
  /* layout (utils/styles.ts container: max 1440, px 24 / 40 / 48 / 64) */
  --container: 1440px; --gutter: 24px;
  --header-h: 88px; --header-h-condensed: 64px; --announce-h: 36px;
  --radius: 2px; --pill: 9999px;
  --control-h: 48px;
}
@media (min-width: 640px)  { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; } }

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
:lang(ar) { letter-spacing: 0 !important; }
html[dir="rtl"] body { line-height: 1.8; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.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:focus { position: fixed; inset-inline-start: 16px; top: 16px; z-index: 90; width: auto; height: auto; clip: auto; margin: 0; padding: 8px 16px; background: var(--ink); color: var(--paper); border-radius: var(--pill); }
.no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

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

/* ── type helpers ── */
.font-display { font-family: var(--font-display); font-weight: 300; }
.font-ar { font-family: var(--font-ar); }
.font-mono { font-family: var(--font-mono); }
.kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--clay); text-transform: none; }
html[dir="rtl"] .kicker { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; }
.display { font-family: var(--font-display); font-weight: 300; line-height: .95; letter-spacing: -.01em; color: var(--ink); }
.display--ar, html[dir="rtl"] .display { font-family: var(--font-ar); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.subline-en { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 20px; }
.lede { color: var(--muted); font-size: 16px; line-height: 1.75; } html[dir="rtl"] .lede { line-height: 1.95; }
.accent { color: var(--moss); } .accent-italic { font-style: italic; color: var(--moss); }
.text-muted { color: var(--muted); } .text-clay { color: var(--clay); } .text-moss { color: var(--moss); }
.tabular { font-variant-numeric: tabular-nums; }

/* ── buttons (styles.ts) ── */
.btn, .btn-primary, .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--control-h); padding-inline: 28px; border-radius: var(--pill); font-family: var(--font-sans); font-size: 13px; letter-spacing: .06em; white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
html[dir="rtl"] .btn, html[dir="rtl"] .btn-primary, html[dir="rtl"] .btn-outline { letter-spacing: 0; font-size: 15px; }
.btn-primary { background: var(--moss); color: var(--paper); border-color: var(--moss); }
.btn-primary:hover { background: var(--moss-deep); border-color: var(--moss-deep); }
.btn-primary:active, .btn-outline:active { transform: scale(.98); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn-primary--light { background: var(--bone); color: var(--moss); border-color: var(--bone); } .btn-primary--light:hover { background: var(--paper); border-color: var(--paper); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink-80); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline--light { color: var(--bone); border-color: rgba(243,238,230,.25); } .btn-outline--light:hover { background: var(--bone); color: var(--moss-deep); border-color: var(--bone); }
.btn--sm { height: 40px; padding-inline: 20px; font-size: 12.5px; } .btn--lg { height: 56px; padding-inline: 34px; }
.btn--block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-bottom: 1px solid var(--ink-40); padding-bottom: 4px; font-size: 13px; letter-spacing: .06em; transition: border-color var(--t-base) var(--ease-out), gap var(--t-base) var(--ease-out); }
html[dir="rtl"] .text-link { letter-spacing: 0; font-size: 15px; }
.text-link:hover { gap: 12px; border-color: var(--ink); }
.text-link--light { color: var(--bone); border-color: rgba(243,238,230,.3); } .text-link--light:hover { border-color: var(--bone); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pill); color: var(--ink); transition: background-color var(--t-fast); }
.icon-btn:hover { background: var(--sand); }
.pill { display: inline-flex; align-items: center; height: 44px; padding-inline: 20px; border-radius: var(--pill); border: 1px solid rgba(31,29,26,.25); font-size: 14px; color: var(--ink); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.pill:hover, .pill.is-active { background: var(--moss); color: var(--paper); border-color: var(--moss); }
.pill--sm { height: 36px; padding-inline: 14px; font-size: 12.5px; border-color: var(--stone); } .pill--sm:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.tag { display: inline-flex; align-items: center; border-radius: var(--pill); background: rgba(250,247,242,.95); padding: 4px 12px; font-size: 12px; color: var(--ink); }
.tag--mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; }
.tag--moss { background: var(--moss); color: var(--paper); }

/* ── icons (lucide-style, 1.5px) ── */
.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--xs { width: 14px; height: 14px; } .icon--sm { width: 16px; height: 16px; } .icon--lg { width: 28px; height: 28px; stroke-width: 1; }
html[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* ── inputs (inputBase) ── */
.input, .meramieh-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .meramieh-form select, .meramieh-form textarea {
  height: var(--control-h); width: 100%; border-radius: var(--radius); border: 1px solid var(--stone); background: var(--paper); padding-inline: 16px; font-size: 14px; color: var(--ink); transition: border-color var(--t-fast); }
.meramieh-form textarea, textarea.input { height: auto; min-height: 140px; padding-block: 12px; resize: vertical; }
.input::placeholder, .meramieh-form ::placeholder { color: rgba(106,99,88,.6); }
.input:focus, .meramieh-form input:focus, .meramieh-form select:focus, .meramieh-form textarea:focus { border-color: var(--moss); outline: none; }
.input.is-invalid, .meramieh-form .is-invalid input, .meramieh-form input[aria-invalid="true"] { border-color: var(--clay); }
.field { display: block; min-width: 0; } .field > label, .field__label { display: block; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.field__error { margin-top: 6px; font-size: 12.5px; color: var(--clay); } .field__help { margin-top: 8px; font-size: 13px; color: var(--muted); }
.select-wrap { position: relative; } .select-wrap select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; }
.select-wrap .icon { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.check { display: flex; align-items: center; gap: 12px; padding-block: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 2px; border: 1px solid var(--stone); transition: background-color var(--t-fast), border-color var(--t-fast); flex: none; }
.check--radio .check__box { border-radius: 50%; }
.check input:checked + .check__box { border-color: var(--moss); background: var(--moss); }
.check--radio input:checked + .check__box { background: transparent; } .check--radio input:checked + .check__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }
.check input:checked + .check__box .icon { color: var(--paper); stroke-width: 2.5; width: 12px; height: 12px; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 2px var(--moss); }
.option-card { display: flex; align-items: center; gap: 16px; border-radius: var(--radius); border: 1px solid var(--stone); padding: 16px 20px; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.option-card:hover { border-color: rgba(31,29,26,.5); } .option-card.is-checked, .option-card:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.option-card__title { display: block; font-size: 14.5px; color: var(--ink); } .option-card__detail { display: block; font-size: 12.5px; color: var(--muted); }

/* ── quantity stepper ── */
.qty { display: inline-flex; height: var(--control-h); align-items: center; border-radius: var(--pill); border: 1px solid var(--stone); }
.qty button { display: flex; height: 100%; width: 44px; align-items: center; justify-content: center; color: var(--ink); transition: color var(--t-fast); } .qty button:hover { color: var(--moss); } .qty button:disabled { color: var(--stone); cursor: default; }
.qty input, .qty output { width: 24px; min-width: 24px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; border: 0; background: transparent; padding: 0; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 36px; } .qty--sm button { width: 32px; }

/* ── surfaces ── */
.surface { background: var(--paper); border-radius: var(--radius); }
.surface--pad { padding: 24px; } @media (min-width: 1024px) { .surface--pad { padding: 32px; } }
.hairline { border: 0; height: 1px; background: var(--stone); }
.divide-y > * + * { border-top: 1px solid var(--stone); }
.aspect-4-5 { aspect-ratio: 4 / 5; } .aspect-5-6 { aspect-ratio: 5 / 6; } .aspect-4-3 { aspect-ratio: 4 / 3; } .aspect-16-11 { aspect-ratio: 16 / 11; } .aspect-square { aspect-ratio: 1; } .aspect-3-4 { aspect-ratio: 3 / 4; } .aspect-21-9 { aspect-ratio: 21 / 9; }
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--zoom img { transition: transform var(--t-med) var(--ease-out); } .media--zoom:hover img, .group:hover .media--zoom img { transform: scale(1.04); }

/* ── progress hairline (delivery / order) ── */
.progress { height: 3px; overflow: hidden; border-radius: var(--pill); background: rgba(207,196,180,.6); }
.progress__bar { height: 100%; border-radius: var(--pill); background: var(--moss); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform var(--t-med) var(--ease-out); }
html[dir="rtl"] .progress__bar { transform-origin: right center; }

/* ── tabs underline ── */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--stone); }
.tabs__tab { position: relative; height: 48px; flex: none; padding-inline: 16px; font-size: 13.5px; color: var(--muted); white-space: nowrap; transition: color var(--t-fast); }
.tabs__tab:hover, .tabs__tab.is-active { color: var(--ink); }
.tabs__tab.is-active::after { content: ""; position: absolute; inset-inline: 16px; bottom: -1px; height: 1px; background: var(--ink); }

/* ── toast ── */
.toast { position: fixed; inset-inline-start: 50%; bottom: 24px; z-index: 95; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--pill); font-size: 13.5px; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
html[dir="rtl"] .toast { transform: translate(50%, 16px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); } html[dir="rtl"] .toast.is-visible { transform: translate(50%, 0); }

/* ── scrim / drawers (shared by cart, menu, filters, search) ── */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(31,29,26,.4); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; width: 100%; max-width: 440px; background: var(--paper); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); transform: translateX(var(--drawer-x, 100%)); transition: transform var(--t-med) var(--ease-out); visibility: hidden; }
.drawer.is-open { transform: translateX(0); visibility: visible; }
/* Closed drawers are taken out of layout so their off-canvas position never widens the page. */
.drawer:not(.is-open):not(.is-mounted) { display: none; }
.drawer--end { inset-inline-end: 0; --drawer-x: 100%; } html[dir="rtl"] .drawer--end { --drawer-x: -100%; }
.drawer--start { inset-inline-start: 0; --drawer-x: -100%; } html[dir="rtl"] .drawer--start { --drawer-x: 100%; }
.drawer__head { display: flex; height: 72px; flex: none; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(207,196,180,.7); padding-inline: 24px; }
.drawer__title { font-family: var(--font-display); font-size: 26px; color: var(--ink); }
.drawer__body { flex: 1; overflow-y: auto; padding-inline: 24px; }
.drawer__foot { flex: none; border-top: 1px solid rgba(207,196,180,.7); padding: 20px 24px 24px; }
body.has-drawer-open { overflow: hidden; }

/* ── reveal states (GSAP sets final values; CSS only hides initial paint when JS is present) ── */
html.js [data-reveal] { opacity: 0; }
html.js.reduced-motion [data-reveal], html.no-js [data-reveal] { opacity: 1; }

/* ── empty state ── */
.empty-state { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--stone); padding-block: 56px; }
.empty-state__title { font-family: var(--font-display); font-size: 32px; color: var(--ink); } html[dir="rtl"] .empty-state__title { font-family: var(--font-ar); }
.empty-state__text { margin-top: 8px; max-width: 28rem; font-size: 15px; color: var(--muted); }
.empty-state .btn-primary { margin-top: 32px; }