/* ==========================================================================
   MAFAZ PURE — BRAND LAYER
   Design tokens extracted from the logo + overrides of the base theme so the
   store feels premium, calm and Moroccan instead of "toy shop".
   Loaded after main.css. Edit the tokens in :root to re-colour the whole site.
   ========================================================================== */

:root {
  /* Logo purple (sampled from the logo) and its family */
  --mp-purple: #4f0056;
  --mp-purple-hover: #3d0043;
  --mp-purple-deep: #2b0030;
  --mp-purple-soft: #f3e9f4;
  /* Logo gold (sampled) : light for dark backgrounds, dark for text on light backgrounds */
  --mp-gold: #d4a548;
  --mp-gold-light: #ecc978;
  --mp-gold-dark: #8a6116; /* 5.3:1 on ivory: safe for small text */
  /* Warm neutrals (honey-tinted, never grey) */
  --mp-ivory: #fbf7f0;
  --mp-sand: #f3eadb;
  --mp-line: #e6dac6;
  --mp-ink: #2a1030;
  --mp-muted: #6a5a6d;
  --mp-wa: #128c4a; /* WhatsApp green, darkened for AA contrast with white text */
  --mp-radius: 14px;
  --mp-shadow: 0 10px 30px -12px rgb(43 0 48 / 0.28);
}

@layer overrides {
  /* ---------- base ---------- */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { background: var(--mp-ivory); color: var(--mp-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  :focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 3px; }
  .mp-skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--mp-ivory); color: var(--mp-purple); border-radius: 8px; font-weight: 600; }
  .mp-skip:focus { top: 8px; }

  /* Headings: refined serif (Latin/French) or Cairo (Arabic), heavier weight, tighter leading */
  :root { --mp-hs: 1.14; --mp-hlh: 1.08; }
  html[dir='rtl'] { --mp-hs: 0.9; --mp-hlh: 1.35; }
  :root {
    --font-heading-2xl: 600 calc(var(--font-heading-scale) * var(--mp-hs) * 52px) / calc(var(--font-heading-scale) * var(--mp-hs) * 52px * var(--mp-hlh)) var(--font-heading-family);
    --font-heading-xl: 600 calc(var(--font-heading-scale) * var(--mp-hs) * 44px) / calc(var(--font-heading-scale) * var(--mp-hs) * 44px * var(--mp-hlh)) var(--font-heading-family);
    --font-heading-lg: 600 calc(var(--font-heading-scale) * var(--mp-hs) * 36px) / calc(var(--font-heading-scale) * var(--mp-hs) * 36px * var(--mp-hlh)) var(--font-heading-family);
    --font-heading-md: 600 calc(var(--font-heading-scale) * var(--mp-hs) * 28px) / calc(var(--font-heading-scale) * var(--mp-hs) * 28px * var(--mp-hlh)) var(--font-heading-family);
    --font-heading-sm: 600 calc(var(--font-heading-scale) * var(--mp-hs) * 22px) / calc(var(--font-heading-scale) * var(--mp-hs) * 22px * 1.2) var(--font-heading-family);
    --font-heading-xs: 600 calc(var(--font-heading-scale) * var(--mp-hs) * 18px) / calc(var(--font-heading-scale) * var(--mp-hs) * 18px * 1.25) var(--font-heading-family);
  }

  /* ---------- buttons: flat, calm, no bouncing "toy" motion ---------- */
  [ui-slot='button'][data-variant] { --button-elevation: 0px; margin-block-start: 0; }
  [ui-slot='button'][data-variant]:has([ui-slot='button-front']) { background-color: transparent; }
  [ui-slot='button'][data-variant] [ui-slot='button-front'],
  [ui-slot='button'][data-variant]:hover [ui-slot='button-front'],
  [ui-slot='button'][data-variant]:active [ui-slot='button-front'] {
    transform: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  html[dir='rtl'] [ui-slot='button'][data-variant] [ui-slot='button-front'] { letter-spacing: 0; }
  [ui-slot='button'][data-variant='primary'] { --button-bg: var(--mp-purple); --button-fg: var(--mp-ivory); }
  [ui-slot='button'][data-variant='primary']:hover [ui-slot='button-front'] { background-color: var(--mp-purple-hover); box-shadow: var(--mp-shadow); }
  [ui-slot='button'][data-variant='secondary'] { --button-bg: transparent; --button-fg: var(--mp-purple); }
  [ui-slot='button'][data-variant='secondary'] [ui-slot='button-front'] { box-shadow: inset 0 0 0 1.5px currentcolor; }
  [ui-slot='button'][data-variant='secondary']:hover [ui-slot='button-front'] { background-color: var(--mp-purple); color: var(--mp-ivory); box-shadow: inset 0 0 0 1.5px var(--mp-purple); }
  /* on dark surfaces primary = gold, secondary = ivory outline */
  [data-tone='purple'] [ui-slot='button'][data-variant='primary'],
  [data-tone='deep'] [ui-slot='button'][data-variant='primary'] { --button-bg: var(--mp-gold); --button-fg: var(--mp-purple-deep); }
  [data-tone='purple'] [ui-slot='button'][data-variant='primary']:hover [ui-slot='button-front'],
  [data-tone='deep'] [ui-slot='button'][data-variant='primary']:hover [ui-slot='button-front'] { background-color: var(--mp-gold-light); }
  [data-tone='purple'] [ui-slot='button'][data-variant='secondary'],
  [data-tone='deep'] [ui-slot='button'][data-variant='secondary'] { --button-fg: var(--mp-ivory); }
  [data-tone='purple'] [ui-slot='button'][data-variant='secondary']:hover [ui-slot='button-front'],
  [data-tone='deep'] [ui-slot='button'][data-variant='secondary']:hover [ui-slot='button-front'] { background-color: var(--mp-ivory); color: var(--mp-purple); box-shadow: none; }

  /* ---------- header (purple, gold hairline) ---------- */
  [ui-layout='header'] { min-height: 76px; border-block-end: 1px solid color-mix(in srgb, var(--mp-gold) 40%, transparent); }
  /* Bug fix: the cart-count badge had no positioned parent of its own, so it was placed
     relative to the whole header bar instead of its button and flew off-screen on mobile,
     forcing the entire page to scroll sideways. This gives it the right anchor. */
  [ui-layout='header'] .actions [ui-slot='button'] { position: relative; }
  /* Safety net: guarantees the page can never drift left/right, without affecting the
     honey-varieties carousel, which scrolls inside its own container, not the page. */
  html { overflow-x: hidden; }
  [ui-layout='header'] .links { gap: var(--spacing-24); }
  [ui-layout='header'] .links .link [ui-slot='link-button'] { font: 500 calc(var(--font-body-scale) * 14px) / 1 var(--font-family); letter-spacing: 0.03em; opacity: 0.92; transition: color 0.2s, opacity 0.2s; }
  [ui-layout='header'] .links .link [ui-slot='link-button']:hover { color: var(--mp-gold-light); opacity: 1; }
  [ui-layout='header'] .links .link .sub-links { border: 1px solid color-mix(in srgb, var(--mp-gold) 35%, transparent); }
  .mp-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
  .mp-lockup__mark { width: 46px; height: auto; }
  .mp-lockup__word { width: 112px; height: auto; }
  @media (max-width: 769px) { .mp-lockup__mark { width: 38px; } .mp-lockup__word { width: 92px; } }

  /* ---------- announcement bar: static, deep purple, gold text ---------- */
  .mp-announce { background: var(--mp-purple-deep); color: var(--mp-gold-light); font: 500 calc(var(--font-body-scale) * 12.5px) / 1.4 var(--font-family); letter-spacing: 0.06em; text-align: center; }
  html[dir='rtl'] .mp-announce { letter-spacing: 0; font-size: 13px; }
  .mp-announce__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 0; padding: 9px 16px; list-style: none; }
  .mp-announce__list li + li::before { content: '•'; margin-inline-end: 28px; opacity: 0.5; }
  .mp-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  .mp-announce strong { margin-inline-end: 6px; color: var(--mp-ivory); font-weight: 600; }
  @media (max-width: 640px) { .mp-announce__list li:nth-child(n + 2) { display: none; } }

  /* ---------- product cards (used by every collection grid) ---------- */
  [ui-block='product'] { --bg-color: #fff; border: 1px solid var(--mp-line); border-radius: var(--radius-product); background: #fff; box-shadow: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
  @media (hover: hover) { [ui-block='product']:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow); border-color: color-mix(in srgb, var(--mp-gold) 60%, var(--mp-line)); } }
  [ui-block='product'] .media { background: var(--mp-sand); }
  [ui-block='product'] .media > img { transition: transform 0.5s ease; }
  @media (hover: hover) { [ui-block='product']:hover .media > img { transform: scale(1.03); } }
  /* Sits in normal flow, just above the price, so it can never overlap the price or the actions row */
  [ui-block='product'] .stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
  [ui-block='product'] .stats:empty { display: none; padding: 0; }
  [ui-block='product'] .stats > span { padding: 3px 10px; border-radius: 999px; background: var(--mp-sand); color: var(--mp-purple); font: 600 11px / 1.4 var(--font-family); }
  [ui-block='product'] .content { position: relative; }
  [ui-block='product'] .info { gap: 6px; padding: 16px 16px 8px; }
  [ui-block='product'] .info .name { order: -1; color: var(--mp-ink); font: 600 calc(var(--font-body-scale) * 21px) / 1.15 var(--font-heading-family); text-decoration: none; }
  html[dir='rtl'] [ui-block='product'] .info .name { font-size: 17px; line-height: 1.4; }
  [ui-block='product'] .info .price { font: 600 calc(var(--font-body-scale) * 16px) / 1.2 var(--font-family); color: var(--mp-purple); }
  [ui-block='product'] .info .collections { display: none; }
  .mp-card-rating { display: flex; align-items: center; gap: 4px; color: var(--mp-gold-dark); font: 600 13px / 1 var(--font-family); }
  .mp-card-rating svg { fill: currentcolor; }
  [ui-block='product'] .actions { padding: 8px 16px 16px; }
  [ui-block='product'] .actions [ui-slot='button'] { --button-bg: var(--mp-purple) !important; --button-fg: var(--mp-ivory) !important; }
  [ui-block='product'] .actions [ui-slot='button']:hover [ui-slot='button-front'] { background-color: var(--mp-purple-hover); }

  /* ---------- product page ---------- */
  [ui-section='product-information'] [ui-block='title'] { color: var(--mp-ink); }
  [ui-section='product-information'] [ui-block='price'] { color: var(--mp-purple); }
  [ui-slot='accordion'] [ui-slot='accordion-item'] { border-color: var(--mp-line); }
  [ui-slot='accordion-trigger'] { font-weight: 600; color: var(--mp-ink); }
  .mp-product-wa { display: grid; gap: 10px; padding: 16px; border: 1px dashed color-mix(in srgb, var(--mp-gold) 70%, transparent); border-radius: var(--mp-radius); background: var(--mp-sand); }
  .mp-product-wa p { margin: 0; color: var(--mp-muted); font-size: 14px; }
  ui-shop-bar { border-block-start: 1px solid var(--mp-line); }

  /* ---------- FAQ ---------- */
  [ui-section='faqs'] .faqs-card { border: 1px solid var(--mp-line); }

  /* ---------- floating WhatsApp: small, still, never covers the sticky product bar ---------- */
  .mp-wa-float { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 40; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mp-wa); color: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / 0.22); }
  .mp-wa-float:hover { background: #0f7a41; }
  body:has(ui-shop-bar) .mp-wa-float { bottom: 92px; }
  @media (min-width: 770px) { body:has(ui-shop-bar) .mp-wa-float { bottom: 16px; } }
}

@layer overrides {
  /* ---------- product card: mobile-safe actions row (fixes quantity/out-of-stock overlap) ---------- */
  [ui-block='product'] { container-type: inline-size; container-name: mp-card; }
  [ui-block='product'] .actions [ui-slot='button'] { min-inline-size: 0; }
  [ui-block='product'] .actions [ui-slot='button'] [ui-slot='button-front'] { white-space: normal; line-height: 1.2; text-align: center; padding-block: 10px; overflow-wrap: anywhere; }
  [ui-block='product'] .actions ui-quantity { flex: none; }
  @container mp-card (max-width: 230px) {
    [ui-block='product'] .actions { flex-direction: column; align-items: stretch; }
    [ui-block='product'] .actions ui-quantity { inline-size: 100%; justify-content: space-between; }
    [ui-block='product'] .actions > * { inline-size: 100%; }
  }
  /* starting-from price */
  .mp-price-from { display: block; margin-block-end: 2px; color: var(--mp-muted); font: 500 11px / 1.2 var(--font-family); }
  [ui-block='product'] .info .price:has(.mp-price-from) { display: block; }
}