/* ==========================================================================
   PROGZAM — 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 {
  /* PROGZAM botanical green palette and deep-green family */
  --mp-primary: #0E8D4A;
  --mp-primary-hover: #08743D;
  --mp-forest: #103C2A;
  --mp-mint: #EAF3EA;
  /* Leaf-green accent for subtle highlights, badges and links */
  --mp-accent: #55A932;
  --mp-accent-light: #E0EFD8;
  --mp-accent-dark: #356F32; /* high contrast leaf green on light surfaces */
  /* Calm neutral surfaces */
  --mp-ivory: #F8FAF7;
  --mp-sand: #F0F5F0;
  --mp-line: #DCE6DC;
  --mp-ink: #17251B;
  --mp-muted: #56665A;
  --mp-wa: #0E8D4A; /* WhatsApp green, darkened for readable white text */
  --mp-radius: 16px;
  --mp-shadow: 0 12px 32px -18px rgb(16 60 42 / 0.24);
}

@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-primary); 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-primary); 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-primary); --button-fg: var(--mp-ivory); }
  [ui-slot='button'][data-variant='primary']:hover [ui-slot='button-front'] { background-color: var(--mp-primary-hover); box-shadow: var(--mp-shadow); }
  [ui-slot='button'][data-variant='secondary'] { --button-bg: transparent; --button-fg: var(--mp-primary); }
  [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-primary); color: var(--mp-ivory); box-shadow: inset 0 0 0 1.5px var(--mp-primary); }
  /* On dark sections, keep primary actions leaf-green with high-contrast white text. */
  [data-tone='purple'] [ui-slot='button'][data-variant='primary'],
  [data-tone='deep'] [ui-slot='button'][data-variant='primary'] { --button-bg: var(--mp-primary); --button-fg: #fff; }
  [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-primary-hover); }
  [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-primary); box-shadow: none; }

  /* ---------- header: clean white surface with subtle leaf-green divider ---------- */
  [ui-layout='header'] { min-height: 76px; border-block-end: 1px solid color-mix(in srgb, var(--mp-primary) 22%, var(--mp-line)); }
  /* 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
     product/offers 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-accent-light); opacity: 1; }
  [ui-layout='header'] .links .link .sub-links { border: 1px solid color-mix(in srgb, var(--mp-accent) 35%, transparent); }
  .mp-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
  .mp-lockup__mark { width: 46px; height: auto; }
  .mp-lockup__image { display: block; width: min(196px, 100%); height: auto; object-fit: contain; }
  .mp-lockup__word { width: 112px; height: auto; }
  @media (max-width: 769px) { .mp-lockup__mark { width: 38px; } .mp-lockup__word { width: 92px; } .mp-lockup__image { width: min(168px, 100%); } }

  /* ---------- announcement bar: forest green with crisp, high-contrast white text ---------- */
  .mp-announce { background: var(--mp-forest); color: var(--mp-ivory); font: 600 calc(var(--font-body-scale) * 13px) / 1.4 var(--font-family); letter-spacing: 0.02em; 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: none; text-underline-offset: 3px; } .mp-announce a:hover { text-decoration: underline; }
  .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-accent) 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-primary); 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-primary); }
  [ui-block='product'] .info .collections { display: none; }
  .mp-card-rating { display: flex; align-items: center; gap: 4px; color: var(--mp-accent-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-primary) !important; --button-fg: var(--mp-ivory) !important; }
  [ui-block='product'] .actions [ui-slot='button']:hover [ui-slot='button-front'] { background-color: var(--mp-primary-hover); }

  /* ---------- product page ---------- */
  [ui-section='product-information'] [ui-block='title'] { color: var(--mp-ink); }
  [ui-section='product-information'] [ui-block='price'] { color: var(--mp-primary); }
  [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-accent) 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; }
}

.mp-lockup{color:inherit}.mp-lockup__word{width:auto!important;font:800 21px/1 var(--font-family);letter-spacing:.14em}


/* Brand-aligned section photography and professional, quiet surface treatment. */
.mp-hero .mp-arch { background: #fff; box-shadow: var(--mp-shadow); }
.mp-hero .mp-arch img, .mp-split .mp-arch img { object-fit: contain; }
.mp-section[data-tone='purple'] .mp-title, .mp-section[data-tone='deep'] .mp-title { color: var(--mp-ivory); }
.mp-footer { border-block-start: 1px solid rgb(255 255 255 / .14); }


/* Announcement bar: explicit high-specificity override for YouCan section wrapper and editor preview. */
#youcan-section--announcement-bar,
[ui-section="announcement-bar"] {
  background-color: #0E8D4A !important;
  color: #FFFFFF !important;
}
#youcan-section--announcement-bar .mp-announce,
[ui-section="announcement-bar"] .mp-announce {
  background-color: #0E8D4A !important;
  color: #FFFFFF !important;
  font-weight: 700;
}
#youcan-section--announcement-bar .mp-announce *,
[ui-section="announcement-bar"] .mp-announce * {
  color: #FFFFFF !important;
}