/* ==========================================================================
   InstaMart storefront — GOLDEN visual layer (Google Stitch design system,
   "InstaMart UI/UX System").

   This is the UNIVERSAL production storefront skin. app.js sets
   <html data-store-preview="stitch"> for EVERY store in boot(), so every rule
   below applies to every storefront. No per-store opt-in.

   Structure (neutral palette, shape scale, component treatments) is universal.
   The ACCENT colour stays dynamic: applyBranding() writes --brand from the
   store's configured colour (or the InstaMart default). The one exception is
   the carrefour demo, which keeps the teal evaluation palette via a narrow
   :root[data-store-brand="cfr-demo"] override (app.js BRAND_SKINS).

   Typography note: the Stitch mock uses "IBM Plex Sans Arabic" from a CDN. The
   storefront CSP is `font-src 'self'` and no IBM Plex file is bundled, so the
   skin keeps the self-hosted Cairo face. Only the colour system, shape
   scale and a few component treatments change.
   ========================================================================== */

/* Golden neutral palette + shape scale — universal (applies to every store).
   These are store-agnostic surfaces/text/borders/radii, never brand colour. */
:root[data-store-preview="stitch"] {
  --bg:             #f8f9fa !important;
  --surface:        #ffffff !important;
  --surface-sunk:   #eef1f2 !important;
  --border:         #dfe3e4 !important;
  --border-strong:  #bcc9c6 !important;

  --text:           #191c1d !important;
  --text-2:         #3d4947 !important;
  --text-3:         #6d7a77 !important;

  --danger:         #ba1a1a !important;

  --r-sm: 8px  !important;
  --r-md: 10px !important;
  --r-lg: 12px !important;
  --r-xl: 16px !important;
}

/* Per-store BRAND override — carrefour demo only. Keeps the original teal
   evaluation palette. Every other store's --brand / --brand-2 come from
   applyBranding() (inline, from store.theme), so their branding stays dynamic.
   !important is still needed here to beat that inline style for this one store. */
:root[data-store-brand="cfr-demo"] {
  --brand:          #00685f !important;
  --brand-strong:   #005049 !important;
  --on-brand:       #ffffff !important;
  --brand-2:        #008378 !important;
  --brand-2-strong: #006a61 !important;
  --on-brand-2:     #ffffff !important;
}

/* ---------- header ---------- */
:root[data-store-preview="stitch"] .site-header {
  background: var(--surface);
  backdrop-filter: none;
}

/* ---------- hero: slightly taller card ---------- */
:root[data-store-preview="stitch"] .hero { block-size: 190px; }
:root[data-store-preview="stitch"] .hero-info {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}

/* ---------- category rail: outlined inactive pills, filled active ---------- */
:root[data-store-preview="stitch"] .cat-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}
:root[data-store-preview="stitch"] .cat-btn[aria-pressed="true"] {
  background: var(--brand); color: var(--on-brand); border-color: transparent;
}

/* ---------- product card: framed surface, heart, full-width add ---------- */
:root[data-store-preview="stitch"] .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding-block-end: 10px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
:root[data-store-preview="stitch"] .card:hover {
  border-color: var(--brand); box-shadow: var(--shadow-sm);
}
:root[data-store-preview="stitch"] .card-media {
  /* was --surface-sunk (a distinct warm gray) behind the img's own 10px
     padding — against a white-background product photo this read as a
     separate pasted rectangle inside a differently colored card. .card is
     already white (rule above); match it so the two surfaces blend. */
  border-radius: 0; background: var(--surface);
}
:root[data-store-preview="stitch"] .card-media img {
  object-fit: contain; padding: 10px;
}
:root[data-store-preview="stitch"] .card-name,
:root[data-store-preview="stitch"] .card-meta,
:root[data-store-preview="stitch"] .card-price,
:root[data-store-preview="stitch"] .card-foot { padding-inline: 10px; }
:root[data-store-preview="stitch"] .card-name { margin-block-start: 10px; }
:root[data-store-preview="stitch"] .card-price { color: var(--brand); }

:root[data-store-preview="stitch"] .card-fav {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2;
  inline-size: 28px; block-size: 28px;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
:root[data-store-preview="stitch"] .card-fav:active { transform: scale(.92); }
:root[data-store-preview="stitch"] .card-fav.on {
  color: #e0455f;
}
:root[data-store-preview="stitch"] .card-fav.on .icon {
  fill: currentColor;
}
:root[data-store-preview="stitch"] .card-fav .icon { inline-size: 16px; block-size: 16px; stroke-width: 1.7; }
/* 28px visual, 44px hit area */
:root[data-store-preview="stitch"] .card-fav::after { content: ""; position: absolute; inset: -8px; }

:root[data-store-preview="stitch"] .card-foot > div { inline-size: 100%; }
:root[data-store-preview="stitch"] .add-btn {
  inline-size: 100%; block-size: 34px;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  /* A faint resting tint (half the existing hover's 8%) gives the primary
     per-card action a touch more presence in a dense grid, without changing
     the deliberate outline treatment, border, or text color. */
  background: color-mix(in srgb, var(--brand) 4%, transparent);
  border: 1px solid var(--brand); color: var(--brand);
  border-radius: var(--r-md); gap: 6px;
  font-size: .8125rem; font-weight: 600;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
:root[data-store-preview="stitch"] .add-btn .icon { inline-size: 16px; block-size: 16px; }
:root[data-store-preview="stitch"] .add-btn::after { content: "أضف"; }
:root[data-store-preview="stitch"][lang="en"] .add-btn::after { content: "Add"; }
:root[data-store-preview="stitch"] .add-btn:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
/* full-width button: a 10% scale-down reads as a jump — keep the press subtle */
:root[data-store-preview="stitch"] .add-btn:active { transform: scale(.98); }
:root[data-store-preview="stitch"] .add-btn.added {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
/* in-cart stepper keeps the same full-width footprint */
:root[data-store-preview="stitch"] .card-foot .stepper { inline-size: 100%; justify-content: space-between; }

/* ---------- product sheet: square image, teal price, spec tiles ---------- */
:root[data-store-preview="stitch"] .sheet-media {
  aspect-ratio: 1 / 1; max-block-size: 44dvh;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
:root[data-store-preview="stitch"] .sheet-media img { object-fit: contain; padding: 24px; }
:root[data-store-preview="stitch"] .sheet-price { font-size: 1.75rem; color: var(--brand); }
:root[data-store-preview="stitch"] .sheet-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-block-start: 16px;
}
:root[data-store-preview="stitch"] .spec-tile {
  background: var(--surface-sunk); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
:root[data-store-preview="stitch"] .spec-k { font-size: .75rem; color: var(--text-3); }
:root[data-store-preview="stitch"] .spec-v { font-size: .875rem; font-weight: 600; color: var(--text); }

:root[data-store-preview="stitch"] .sheet-action .btn-primary,
:root[data-store-preview="stitch"] .sheet-action .stepper { border-radius: var(--r-pill); }

/* ---------- bottom nav: Stitch order + filled active pill ---------- */
:root[data-store-preview="stitch"] .bn-item { position: relative; z-index: 0; }
:root[data-store-preview="stitch"] .bn-item[data-route="orders"] { order: 2; }
:root[data-store-preview="stitch"] .bn-item[data-route="cart"]   { order: 3; }
:root[data-store-preview="stitch"] .bn-item[data-route="account"]{ order: 4; }
:root[data-store-preview="stitch"] .bn-item[aria-current="page"] { color: var(--on-brand); font-weight: 700; }
:root[data-store-preview="stitch"] .bn-item[aria-current="page"]::before { display: none; }
:root[data-store-preview="stitch"] .bn-item[aria-current="page"]::after {
  content: ""; position: absolute; inset-block: 6px; inset-inline: 14%;
  background: var(--brand); border-radius: var(--r-pill); z-index: -1;
}
:root[data-store-preview="stitch"] .bn-item .icon,
:root[data-store-preview="stitch"] .bn-item span { position: relative; }

/* ==========================================================================
   STABILIZATION PASS — targeted defect fixes re-applied on top of the f20e4f2
   baseline. NO redesign: every rule below either restores legibility for
   markup the storefront already ships (Phase G hero elements) or corrects a
   rendering/accessibility defect, using the f20e4f2 visual language unchanged.
   ========================================================================== */

/* S1 · hero legibility. index.html ships `.hero-delivery` / `.hero-hours`;
   without a rule they render as dark body text over the dark hero image.
   White text, dark chip, bottom-anchored stack. Store identity (logo, name,
   status) now lives in the header brand lockup — the Hero is image +
   operational info only. */
:root[data-store-preview="stitch"] .hero-info {
  flex-direction: column; gap: 6px;
  inset-inline: var(--s-4); inset-block-end: var(--s-4);
  padding-inline: 0;
  /* This info stack is anchored to the PHYSICAL right in BOTH locales.
     align-items is direction-relative, so it flips per `dir`: flex-end lands on
     the right under LTR, flex-start lands on the right under RTL. Text direction
     inside each line still follows the active locale (untouched). */
  align-items: flex-end;
}
:root[data-store-preview="stitch"][dir="rtl"] .hero-info {
  align-items: flex-start;
}
:root[data-store-preview="stitch"] .hero[data-fallback] .hero-info {
  inset-block-end: auto; inset-block-start: var(--s-4);
}
:root[data-store-preview="stitch"] .hero[data-fallback] .hero-scrim { opacity: .35; }
:root[data-store-preview="stitch"] .hero-delivery,
:root[data-store-preview="stitch"] .hero-hours {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: .75rem; font-weight: 600;
  background: color-mix(in srgb, #000 30%, transparent);
  padding: 3px 9px; border-radius: var(--r-pill);
}
:root[data-store-preview="stitch"] .hero-info-icon { inline-size: 13px; block-size: 13px; }

/* S2 · adaptive media. `object-fit: contain` is unchanged (nothing cropped);
   the CARD frame stays 1:1 so the grid is uniform — only the inner padding is
   trimmed so an extreme bottle/bag fills the square instead of sitting as a
   tiny sliver. The PDP frame (not gridded) reshapes toward the image.
   `data-ar` is already set by setMedia()/openSheet(). */
:root[data-store-preview="stitch"] .card-media[data-ar="tall"] img,
:root[data-store-preview="stitch"] .card-media[data-ar="wide"] img { padding: 5px; }
:root[data-store-preview="stitch"] .sheet-media[data-ar="tall"] { aspect-ratio: 3 / 4; max-block-size: 46dvh; }
:root[data-store-preview="stitch"] .sheet-media[data-ar="wide"] { aspect-ratio: 4 / 3; }
:root[data-store-preview="stitch"] .sheet-media[data-ar="tall"] img,
:root[data-store-preview="stitch"] .sheet-media[data-ar="wide"] img { padding: 16px; }

/* S3 · bidi. A Latin measure ("363 gr") must not visually reorder to "gr 363"
   inside the RTL card. `plaintext` = base direction from the first strong
   character; no catalog value is touched. */
:root[data-store-preview="stitch"] .card-meta,
:root[data-store-preview="stitch"] .sheet-meta,
:root[data-store-preview="stitch"] .spec-v { unicode-bidi: plaintext; }

/* S4 · touch targets. f20e4f2's 34px add-to-cart is below the 44px minimum on
   touch layouts. Same visual language (outline pill + "أضف"). */
:root[data-store-preview="stitch"] .add-btn { min-block-size: 40px; }
@media (max-width: 900px) {
  :root[data-store-preview="stitch"] .add-btn { min-block-size: 44px; }
  :root[data-store-preview="stitch"] .card-foot .stepper button { min-block-size: 40px; }
}