/* ============================================================================
   SOUK — store.css
   A single hand-written stylesheet for the Souk artisanal storefront.
   Sections: 1) Tokens  2) Reset/base  3) Layout/chrome  4) Components
             5) Screens  6) RTL  7) Motion  8) Print  9) Responsive
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* — Color: warm neutrals (the "bone & sand" base) — */
  --c-bg:          #F4ECDD;   /* page */
  --c-bg-deep:     #ECE0CB;   /* recessed bands */
  --c-surface:     #FCF8F0;   /* cards */
  --c-surface-2:   #F3EAD9;   /* tiles / wells */
  --c-line:        #E0D1B6;   /* hairlines */
  --c-line-strong: #CDB991;
  --c-ink:         #221C11;   /* primary text (warm near-black) */
  --c-ink-soft:    #6E6249;   /* secondary text */
  --c-ink-faint:   #9A8C6E;   /* tertiary / captions */

  /* — Color: deep teal (primary brand + actions) — */
  --c-teal-900:    #0B302C;
  --c-teal-700:    #0F4A42;
  --c-teal-600:    #15625A;   /* primary action */
  --c-teal-500:    #1E7C6E;
  --c-teal-tint:   #E4EEE9;

  /* — Color: brass / gold (accent only) — */
  --c-brass-600:   #95691F;
  --c-brass-500:   #BC8A2D;   /* accent line/icon */
  --c-brass-400:   #D8AC4E;
  --c-brass-tint:  #F2E6C8;

  /* — Color: deep indigo (night sections) — */
  --c-indigo:      #14233C;
  --c-indigo-700:  #1E3358;

  /* — Color: status — */
  --c-success:     #1C7A50;
  --c-success-surf:#E6F0E8;
  --c-danger:      #A8341F;
  --c-danger-surf: #F6E4DD;

  /* — Typography — */
  --ff-display: "Fraunces", "Amiri", Georgia, serif;
  --ff-ui:      "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Modular type scale (~1.22) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  4rem;      /* 64 — the payment amount */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.55;

  /* — Spacing (4px base) — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* — Radius — */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* — Shadow (warm-tinted) — */
  --sh-sm: 0 1px 2px rgba(60,42,12,.06), 0 1px 1px rgba(60,42,12,.04);
  --sh-md: 0 4px 14px rgba(60,42,12,.08), 0 2px 4px rgba(60,42,12,.05);
  --sh-lg: 0 18px 48px rgba(40,28,8,.16), 0 6px 14px rgba(40,28,8,.08);
  --sh-teal: 0 14px 34px rgba(11,48,44,.30);

  /* — Motion — */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.2,1.3,.4,1);
  --t-fast: .14s; --t-med: .26s; --t-slow: .5s;

  /* layout */
  --maxw: 1120px;
  --header-h: 68px;
}

/* ---------------------------------------------------------------------------
   2) RESET / BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }   /* guard: no horizontal scroll on small screens */
body {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint khatam-star field */
  background-image: var(--zellige-field, none);
  background-size: 64px 64px;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--c-brass-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.display-eyebrow {
  font-family: var(--ff-ui); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-brass-600);
}
.mono { font-family: var(--ff-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.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;
}

/* ---------------------------------------------------------------------------
   3) APP CHROME — demo nav + site header
   --------------------------------------------------------------------------- */
.shell { min-height: 100vh; }

/* Site header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding-inline: var(--s-6);
  background: color-mix(in srgb, var(--c-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__mark { width: 26px; height: 26px; align-self: center; color: var(--c-teal-600); }
.brand__name { font-family: var(--ff-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
.brand__tag { font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: .14em; text-transform: uppercase; }
.header-spacer { flex: 1; }

.lang-switch { display: inline-flex; background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 3px; }
.lang-switch button {
  padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ink-soft); transition: all var(--t-fast);
}
.lang-switch button.is-active { background: var(--c-teal-600); color: #fff; box-shadow: var(--sh-sm); }

.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); font-weight: 600; transition: border-color var(--t-fast), background var(--t-fast); }
.cart-btn:hover { background: var(--c-surface); border-color: var(--c-brass-500); }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--c-brass-500); color: #1c1405; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-med) var(--ease-spring);
}
.cart-count.bump { transform: scale(1.5); }

/* ---------------------------------------------------------------------------
   4) GENERIC COMPONENTS
   --------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-6); }
.screen { display: none; padding-block: var(--s-10) var(--s-20); }
.screen.is-active { display: block; animation: screen-in var(--t-slow) var(--ease-out); }

.section-head { margin-bottom: var(--s-8); }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { color: var(--c-ink-soft); margin-top: var(--s-2); max-width: 56ch; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-base);
  border: 1px solid transparent; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--c-teal-600); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--c-teal-700); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-ink); }
.btn--ghost:hover { border-color: var(--c-brass-500); background: var(--c-surface); }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 26px; font-size: var(--fs-md); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Card */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }

/* Product imagery */
.product__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.product:hover .product__media img { transform: scale(1.04); }
.li-media, .recap-media { border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); flex: none; border: 1px solid var(--c-line); }
.li-media { width: 100%; aspect-ratio: 1; }   /* fills the line-item grid column (84px / 64px) */
.recap-media { width: 52px; aspect-ratio: 1; }
.li-media img, .recap-media img { width: 100%; height: 100%; object-fit: cover; }

/* Pills / badges */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.pill--brass { background: var(--c-brass-tint); color: var(--c-brass-600); }
.pill--teal { background: var(--c-teal-tint); color: var(--c-teal-700); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); overflow: hidden; }
.stepper button { width: 34px; height: 34px; font-size: var(--fs-md); color: var(--c-ink-soft); transition: background var(--t-fast); }
.stepper button:hover { background: var(--c-surface-2); color: var(--c-ink); }
.stepper input { width: 38px; text-align: center; border: none; background: transparent; font-weight: 600; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---------------------------------------------------------------------------
   5) SCREENS
   --------------------------------------------------------------------------- */

/* ---- Catalog ---- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--s-12) var(--s-10);
  background: linear-gradient(120deg, var(--c-teal-900), var(--c-teal-700));
  color: #F2EAD8; margin-bottom: var(--s-10); box-shadow: var(--sh-teal);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .12;
  background: var(--khatam-light) 0 0/72px 72px;
}
.hero__inner { position: relative; max-width: 36ch; }
.hero h1 { font-size: var(--fs-3xl); margin: var(--s-3) 0; color: #fff; }
.hero p { color: #D6E3DC; }
.hero .display-eyebrow { color: var(--c-brass-400); }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.product { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.product:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.product__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.product__name { font-family: var(--ff-display); font-size: var(--fs-md); font-weight: 600; }
.product__origin { font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: .04em; }
.product__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); }
.price { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-lg); }
.price small { font-size: var(--fs-xs); font-weight: 600; font-family: var(--ff-ui); color: var(--c-ink-faint); margin-inline-start: 3px; }
.add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--c-teal-tint); color: var(--c-teal-700); font-weight: 600; font-size: var(--fs-sm); transition: all var(--t-fast); }
.add-btn:hover { background: var(--c-teal-600); color: #fff; }
.add-btn.added { background: var(--c-success); color: #fff; }

/* ---- Cart ---- */
.layout-2col { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-10); align-items: start; }
.line-items { display: flex; flex-direction: column; }
.line-item { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.li-name { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-md); }
.li-price { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.li-controls { display: flex; align-items: center; gap: var(--s-4); }
.li-line-total { font-weight: 600; min-width: 96px; text-align: end; }
.link-danger { color: var(--c-danger); font-size: var(--fs-sm); font-weight: 600; }
.link-danger:hover { text-decoration: underline; }

.summary { padding: var(--s-6); position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.summary h3 { font-size: var(--fs-lg); margin-bottom: var(--s-4); }
.sum-row { display: flex; justify-content: space-between; padding: 9px 0; color: var(--c-ink-soft); }
.sum-row.total { border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: var(--s-4); color: var(--c-ink); font-weight: 700; font-size: var(--fs-md); }
.sum-row .tnum { font-family: var(--ff-mono); }

.empty-state { text-align: center; padding: var(--s-16) var(--s-6); color: var(--c-ink-soft); }
.empty-state svg { width: 56px; height: 56px; margin: 0 auto var(--s-4); color: var(--c-line-strong); }

/* ---- Checkout ---- */
.checkout-grid { display: grid; grid-template-columns: 1fr 440px; gap: var(--s-10); align-items: start; }
.order-recap { padding: var(--s-6); }
.recap-line { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.recap-line:last-child { border-bottom: none; }
.recap-qty { color: var(--c-ink-faint); font-size: var(--fs-sm); }

/* the payment gate — deep teal panel for drama */
.pay-gate { color: #EFE7D6; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-teal); }
.pay-gate__top { background: linear-gradient(160deg, var(--c-teal-700), var(--c-teal-900)); padding: var(--s-6); position: relative; }
.pay-gate__top::before { content:""; position:absolute; inset:0; opacity:.1; background: var(--khatam-light) 0 0/64px 64px; }
.pay-gate__top > * { position: relative; }
.amount-label { font-size: var(--fs-sm); color: #BFD3CB; letter-spacing: .04em; }
.amount-big {
  font-family: var(--ff-display); font-weight: 600; line-height: 1;
  font-size: var(--fs-4xl); color: #fff; margin-top: 6px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.amount-big .cur { font-size: var(--fs-lg); color: var(--c-brass-400); font-weight: 600; }
.pay-gate__top .pill { background: rgba(255,255,255,.12); color: #DDEAE3; margin-top: var(--s-4); }

.pay-gate__body { background: var(--c-surface); color: var(--c-ink); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }

/* T&C block + required checkbox */
.terms-box {
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--s-4); max-height: 124px; overflow-y: auto; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.5;
}
.terms-box h4 { font-family: var(--ff-ui); font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.check-required {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface); transition: border-color var(--t-fast), background var(--t-fast);
}
.check-required.is-checked { border-color: var(--c-teal-500); background: var(--c-teal-tint); }
.check-required.shake { animation: shake .4s; }
.check-required input { width: 22px; height: 22px; accent-color: var(--c-teal-600); margin-top: 1px; flex: none; }
.check-required label { font-size: var(--fs-sm); font-weight: 500; }
.check-required .req { color: var(--c-danger); font-weight: 700; }

/* pay button with card-network chips */
.pay-btn { background: var(--c-brass-500); color: #1c1405; flex-direction: column; gap: 6px; padding: 16px; box-shadow: var(--sh-md); }
.pay-btn:hover:not([disabled]) { background: var(--c-brass-400); }
.pay-btn__main { display: flex; align-items: center; gap: 12px; font-size: var(--fs-md); font-weight: 700; }
.pay-btn__redirect { font-size: var(--fs-xs); font-weight: 500; color: #5a430f; display: flex; align-items: center; gap: 6px; }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { width: 14px; height: 14px; color: var(--c-teal-600); }

/* ---- Result screens (accepted / rejected / receipt) ---- */
.result { max-width: 620px; margin-inline: auto; }
.result-hero { text-align: center; padding: var(--s-10) var(--s-6) var(--s-8); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.result-hero--ok { background: var(--c-success-surf); }
.result-hero--ko { background: var(--c-danger-surf); }
.status-icon { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto var(--s-4); display: grid; place-items: center; color: #fff; }
.status-icon--ok { background: var(--c-success); }
.status-icon--ko { background: var(--c-danger); }
.status-icon svg { width: 38px; height: 38px; }
.status-icon--ok .chk { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .6s var(--ease-out) .15s forwards; }
.result-hero h2 { font-size: var(--fs-2xl); }
.result-hero p { color: var(--c-ink-soft); margin-top: var(--s-2); }

.detail-table { background: var(--c-surface); border: 1px solid var(--c-line); border-top: none; }
.detail-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--c-line); }
.detail-row:last-child { border-bottom: none; }
.detail-row .k { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.detail-row .v { font-weight: 600; text-align: end; }
.detail-row .v.mono { font-family: var(--ff-mono); font-weight: 500; }
.detail-row.amount-row { background: var(--c-teal-900); color: #fff; }
.detail-row.amount-row .k { color: #BFD3CB; }
.detail-row.amount-row .v { color: #fff; font-family: var(--ff-display); font-size: var(--fs-lg); }
.detail-row.amount-row .v .cur { color: var(--c-brass-400); font-size: var(--fs-sm); }

/* SATIM 3020 toll-free badge (official green number image) */
.satim-badge {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--c-success-surf); color: var(--c-teal-900);
  border: 1px solid color-mix(in srgb, var(--c-success) 30%, transparent);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-top: var(--s-5);
}
.satim-badge__img { height: 46px; width: auto; flex: none; image-rendering: -webkit-optimize-contrast; }
.satim-badge small { display: block; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.4; }
.result-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.result-actions .btn { flex: 1; min-width: 150px; }

/* ---- Receipt ---- */
.receipt { max-width: 640px; margin-inline: auto; padding: var(--s-10); }
.receipt__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--c-ink); padding-bottom: var(--s-5); margin-bottom: var(--s-5); }
.receipt__head .brand__name { font-size: var(--fs-2xl); }
.receipt__meta { text-align: end; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.receipt__meta .mono { color: var(--c-ink); }
.receipt-table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); }
.receipt-table th { text-align: start; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-faint); padding-bottom: 8px; border-bottom: 1px solid var(--c-line); }
.receipt-table td { padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.receipt-table .num { text-align: end; font-family: var(--ff-mono); }
.receipt-total { display: flex; justify-content: flex-end; }
.receipt-total .box { width: 280px; }
.receipt__foot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px dashed var(--c-line); font-size: var(--fs-xs); color: var(--c-ink-faint); text-align: center; }
.receipt-actions { display: flex; gap: var(--s-3); justify-content: center; margin: var(--s-6) auto 0; max-width: 640px; }

/* ---------------------------------------------------------------------------
   6) RTL
   --------------------------------------------------------------------------- */
[dir="rtl"] body, [lang="ar"] { --ff-display: "Amiri", serif; --ff-ui: "IBM Plex Sans Arabic", system-ui, sans-serif; }
[dir="rtl"] .display-eyebrow { letter-spacing: 0; }
[dir="rtl"] .brand__tag,
[dir="rtl"] .receipt-table th { letter-spacing: 0; }
[dir="rtl"] .amount-big { direction: rtl; }
[dir="rtl"] .status-icon svg, [dir="rtl"] .brand__mark { transform: none; }

/* ---------------------------------------------------------------------------
   7) MOTION
   --------------------------------------------------------------------------- */
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---------------------------------------------------------------------------
   8) PRINT (receipt)
   --------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .toasts, .email-form, .receipt-actions, .result-actions, .backlink { display: none !important; }
  body { background: #fff; }
  body::before { display: none; }            /* drop the zellige texture */
  .screen { padding: 0 !important; }
  .receipt { box-shadow: none; border: none; max-width: 100%; padding: 0; }
  @page { margin: 16mm; }
}

/* ---------------------------------------------------------------------------
   9) RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-2col, .checkout-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  :root { --fs-4xl: 3rem; --fs-3xl: 2.25rem; --fs-2xl: 1.75rem; }
  .wrap { padding-inline: var(--s-4); }
  .site-header { padding-inline: var(--s-4); gap: var(--s-3); }
  .brand__tag { display: none; }
  .hero { padding: var(--s-8) var(--s-5); }
  .product-grid { gap: var(--s-4); }
  /* stack price + full-width Add so they never overflow a narrow card */
  .product__foot { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .price { font-size: var(--fs-md); }
  .add-btn { justify-content: center; }
  .line-item { grid-template-columns: 64px 1fr; row-gap: var(--s-2); }
  .li-line-total { grid-column: 1 / -1; text-align: start; }
}
@media (max-width: 360px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   10) MOTIF TOKENS + DJANGO INTEGRATION (ported from prototype inline style)
   --------------------------------------------------------------------------- */
:root {
  --khatam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23BC8A2D' stroke-width='1.4'%3E%3Crect x='4' y='4' width='16' height='16'/%3E%3Crect x='4' y='4' width='16' height='16' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  --khatam-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  --zellige-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23BC8A2D' stroke-opacity='0.07' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E");
}
[dir="rtl"] .dir-arrow { transform: scaleX(-1); }

/* server-rendered flash messages -> auto-dismissing toasts */
.toasts { position: fixed; inset-block-end: 24px; inset-inline: 0; z-index: 80;
  display: grid; gap: var(--s-2); justify-items: center; padding-inline: var(--s-4); pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
.toasts.is-hiding { opacity: 0; transform: translateY(10px); }
.toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; max-width: 92vw;
  background: var(--c-ink); color: #FCF8F0; padding: 11px 18px; border-radius: var(--r-pill);
  box-shadow: var(--sh-lg); font-size: var(--fs-sm); font-weight: 600;
  animation: toast-in var(--t-med) var(--ease-out) both; }
.toast svg { flex: none; opacity: .9; }
.toast.success { background: var(--c-teal-700); }
.toast.info    { background: var(--c-indigo); }
.toast.error   { background: var(--c-danger); }
.toast.toast-out { opacity: 0; transform: translateY(10px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
/* "Added ✓" feedback state on the catalog add button */
.add-btn.added { background: var(--c-success); color: #fff; }

/* footer */
.site-footer { background: var(--c-teal-900); color: #C9D6CF; margin-top: var(--s-20); }
.footer-grid { max-width: var(--maxw); margin-inline: auto; padding: var(--s-12) var(--s-6) var(--s-8);
  display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1.3fr; gap: var(--s-8); }
.footer-brand .brand__mark { color: var(--c-brass-400); }
.footer-brand .brand__name { color: #fff; }
.footer-blurb { margin-top: var(--s-3); font-size: var(--fs-sm); color: #A9BBB3; max-width: 32ch; }
.footer-col h5 { font-family: var(--ff-ui); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brass-400); margin-bottom: var(--s-3); }
.footer-col a, .footer-col span { display: block; color: #C9D6CF; font-size: var(--fs-sm); padding: 4px 0; }
.footer-col a:hover { color: #fff; }
.footer-pay { height: 34px; width: auto; background: #fff; border-radius: var(--r-sm); padding: 4px 8px; }
.footer-secure { margin-top: var(--s-2); font-size: var(--fs-xs); color: #93A79E; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); text-align: center;
  padding: var(--s-4) var(--s-6); font-size: var(--fs-xs); color: #8FA39A; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

/* pay button: real CIB/EDAHABIA logo image instead of text chips */
.pay-logo-img { height: 30px; width: auto; background: #fff; border-radius: 5px; padding: 3px 7px; box-shadow: var(--sh-sm); }

/* the checkout form is a plain block; gate styling comes from .pay-gate */
.checkout-form { display: contents; }

/* email-receipt mini form on the receipt screen */
.email-form { max-width: 640px; margin: var(--s-4) auto 0; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.email-form input { flex: 1 1 220px; padding: 11px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); }
.email-form input:focus-visible { outline: none; border-color: var(--c-teal-500); box-shadow: 0 0 0 3px var(--c-teal-tint); }