/* ==========================================================================
   MANSUR STOREFRONT — store-enhance.css   (V2 IDENTITY + premium motion)
   Loaded LAST on the CUSTOMER storefront pages ONLY (home / shop / product /
   cart / account / wishlist / info), AFTER store.css, mn-soft-ui.css and
   store-premium.css. Pairs with assets/js/store-motion.js.

   This is a BOLD "Version 2.0" visual identity — a new colour system, a new
   display typeface and restyled header / buttons / cards / footer — delivered
   as an ADDITIVE token-override layer. It NEVER changes markup, forms, routes
   or JS logic, so 100% of functionality is intact and it's reversible by
   unlinking. It OVERRIDES the base design tokens with !important so the
   identity is authoritative even against a stale cached appearance theme.
   (The Manage → Appearance panel's colour/font controls were removed since V2
   owns the identity; structural controls — layout, sections, sizes, hero,
   badges — still work.)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =============================================================================
   1) DESIGN TOKENS — override the site tokens so the WHOLE UI shifts at once.
      Warm "paper" canvas + high-contrast ink ramp + one bold accent.
   ============================================================================= */
:root{
  /* type: new display face (Space Grotesk); body stays Inter. Redefining
     --mnp-serif makes store-premium.css's heading rules pick it up too. */
  --disp:'Space Grotesk','Jost',sans-serif !important;
  --mnp-serif:'Space Grotesk','Jost',sans-serif;

  /* canvas + ink ramp (warm neutrals) */
  --bg:#f3efe7 !important; --page-bg:#f3efe7 !important;
  --card:#ffffff !important;
  --ink:#17130d !important; --ink-2:#413a30 !important;
  --muted:#8b8275 !important; --muted-2:#b7ada0 !important;
  --line:#e7e0d4 !important; --line-2:#f0ebe1 !important;
  --mnp-ink:#17130d; --mnp-line:#e7e0d4;

  /* ONE bold accent (warm brand orange) + soft tint + AA-safe text shade */
  --orange:#ea580c !important; --orange-600:#ea580c !important; --orange-700:#c2410c !important;
  --orange-soft:#fbe6d8 !important;
  --orange-grad:linear-gradient(135deg,#fb7a3c 0%,#ea580c 100%) !important;
  --accent:#ea580c !important; --link-color:#c2410c !important;

  /* multi-layer elevation (depth from shadows, not borders) */
  --sh-sm:0 1px 2px rgba(28,20,10,.05),0 2px 8px -4px rgba(28,20,10,.10) !important;
  --sh:0 4px 14px rgba(28,20,10,.08),0 12px 28px -12px rgba(28,20,10,.16) !important;
  --sh-lg:0 24px 60px rgba(28,20,10,.22) !important;
  --mnp-sh-card:0 1px 2px rgba(28,20,10,.05),0 10px 26px -14px rgba(28,20,10,.16);
  --mnp-sh-hover:0 2px 8px rgba(28,20,10,.07),0 30px 54px -22px rgba(28,20,10,.24);

  /* motion tokens (additive) */
  --mne-ease:cubic-bezier(.4,0,.2,1);
  --mne-ease-out:cubic-bezier(.22,1,.36,1);
  --mne-dur-1:150ms; --mne-dur-2:220ms; --mne-dur-3:320ms;
}

/* warm paper canvas everywhere (premium.css forced pure white — override) */
html, body{ background:var(--bg) !important; }
body{ color:var(--ink) !important; }

/* =============================================================================
   2) TYPOGRAPHY — fluid clamp() heading scale (mobile mins kept close to the
      current sizes so phone layout isn't disrupted; desktop grows editorially).
   ============================================================================= */
.mn-sec-hd h2{
  font-family:var(--disp) !important; font-weight:700 !important;
  font-size:clamp(1.35rem, 1rem + 1.9vw, 2.4rem) !important;
  letter-spacing:-.5px !important; line-height:1.12 !important; color:var(--ink) !important;
}
.mn-hero-overlay h1{
  font-family:var(--disp) !important; font-weight:700 !important;
  font-size:clamp(1.6rem, 1.05rem + 3vw, 3.4rem) !important;
  letter-spacing:-.6px !important; line-height:1.05 !important;
}
.mn-pdp-info h1{ font-family:var(--disp) !important; font-weight:700 !important; letter-spacing:-.4px !important; }
.mn-logo b{ font-family:var(--disp) !important; font-weight:700 !important; letter-spacing:-.3px !important; }
.mn-ft h4{ font-family:var(--disp) !important; }
/* numbers that change read cleaner as tabular */
.mn-card-price .now, .mn-card-price .mrp, .mn-cartbar-inner .r{ font-variant-numeric:tabular-nums; }

/* =============================================================================
   3) HEADER — translucent paper, ink hairline, restyled brand mark.
   ============================================================================= */
.mn-hd{
  background:rgba(243,239,231,.82) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px);
}

/* =============================================================================
   4) BUTTONS — solid-ink primary + hairline ghost + full state matrix.
      (Product-card floating Add button keeps its own white-pill style: its
      selector .mn-card .mn-card-ctl .btn out-specifies these.)
   ============================================================================= */
.btn{ transition:transform var(--mne-dur-1) var(--mne-ease), box-shadow var(--mne-dur-2) var(--mne-ease), background var(--mne-dur-2) var(--mne-ease), border-color var(--mne-dur-2) var(--mne-ease); }
.btn-primary{
  background:var(--ink) !important; color:#fff !important;
  box-shadow:0 1px 2px rgba(23,19,13,.22), 0 10px 22px -10px rgba(23,19,13,.5) !important;
  letter-spacing:.2px;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 2px 8px rgba(23,19,13,.26), 0 18px 34px -12px rgba(23,19,13,.55) !important; }
.btn-primary:active{ transform:translateY(0) scale(.99); }
.btn-ghost{ background:#fff; border:1px solid var(--line) !important; color:var(--ink) !important; }
.btn-ghost:hover{ border-color:var(--ink) !important; color:var(--ink) !important; background:#fff !important; }
.btn[disabled]{ opacity:.5; box-shadow:none !important; transform:none !important; }

/* =============================================================================
   5) CARDS — hairline + layered soft shadow + hover lift (tilt via JS).
   ============================================================================= */
.mn-card, .mn-cat-tile{ border-color:var(--line) !important; box-shadow:var(--mnp-sh-card) !important; }
.mn-card:hover, .mn-cat-tile:hover{ box-shadow:var(--mnp-sh-hover) !important; }
/* discount badge → editorial ink chip (was mint green) */
.mn-card-off{ background:var(--ink) !important; color:#fff !important; }

/* =============================================================================
   6) FOOTER — deep editorial dark with an accent hairline (strong V2 signal).
   ============================================================================= */
.mn-ft{ background:#17140f !important; color:#cbc3b6 !important; border-top:3px solid var(--orange) !important; }
.mn-ft h4{ color:#fff !important; }
.mn-ft a{ color:#b9b0a2 !important; } .mn-ft a:hover{ color:#fff !important; }
.mn-ft-bottom{ border-top-color:rgba(255,255,255,.08) !important; color:#8c8477 !important; }
.mn-ft-social a{ background:rgba(255,255,255,.06) !important; }

/* =============================================================================
   7) FORMS — clear accent focus ring + soft glow.
   ============================================================================= */
.mn-field input:focus, .mn-field select:focus, .mn-field textarea:focus,
.mn-msearch input:focus{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 3px var(--orange-soft) !important; outline:none;
}

/* =============================================================================
   8) MOTION HOOKS (button ripple + magnetic/tilt compositor hints).
      Attached at run time by store-motion.js.
   ============================================================================= */
.mn-fx-btn{ position:relative; overflow:hidden; }
.mn-fx-ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:currentColor; opacity:.26; will-change:transform,opacity;
  animation:mneRipple 560ms var(--mne-ease-out) forwards;
}
@keyframes mneRipple{ to{ transform:scale(1); opacity:0; } }
.mn-fx-mag-active{ will-change:transform; }
.mn-fx-tilt-active{ will-change:transform; }

@media (pointer:fine){
  .mn-hd-search, .mn-shop-search{
    transition:box-shadow var(--mne-dur-2) var(--mne-ease), border-color var(--mne-dur-2) var(--mne-ease);
  }
}

/* =============================================================================
   9) SEARCH PILL — focus indicator lives on the WRAPPER, not a boxed ring
      around the inner <input> (store-premium's generic input:focus-visible).
   ============================================================================= */
.mn-hd-search input:focus,   .mn-hd-search input:focus-visible,
.mn-shop-search input:focus, .mn-shop-search input:focus-visible,
.mn-msearch input:focus,     .mn-msearch input:focus-visible{
  outline:none !important; box-shadow:none !important;
}
.mn-hd-search:focus-within,
.mn-shop-search:focus-within,
.mn-msearch:focus-within{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 3px var(--orange-soft) !important;
}

/* =============================================================================
   10) REDUCED MOTION — neutralise every added, non-essential effect.
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  .mn-fx-ripple{ display:none !important; animation:none !important; }
  .mn-fx-mag-active, .mn-fx-tilt-active{ will-change:auto !important; }
  .btn-primary:hover{ transform:none !important; }
}

/* =============================================================================
   V2.1 POLISH (2026-07) — richer business vibes, accents, chrome & micro-UX.
   All additive; transform/opacity motion; reduced-motion + touch safe.
   ============================================================================= */

/* refined accent + support tokens */
:root{
  --ok:#0f8a5f !important;                 /* trust green (business, calmer) */
  --accent-ink:linear-gradient(180deg,#211b13 0%,#14100b 100%);  /* subtle button depth */
  --ring:0 0 0 3px var(--orange-soft);
}

/* ---- top scroll-progress bar (injected by store-motion.js) ---- */
#mnScrollProg{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:400;
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  background:linear-gradient(90deg,#fb7a3c,#ea580c); will-change:transform;
}

/* ---- header gains a soft shadow once the page is scrolled ---- */
.mn-hd{ transition:box-shadow var(--mne-dur-2) var(--mne-ease), background var(--mne-dur-2) var(--mne-ease); }
.mn-hd.mn-scrolled{ box-shadow:0 6px 24px -12px rgba(28,20,10,.28); background:rgba(243,239,231,.92) !important; }
.mn-icon-btn{ transition:transform var(--mne-dur-1) var(--mne-ease), border-color var(--mne-dur-2), background var(--mne-dur-2); }
.mn-icon-btn:hover{ transform:translateY(-1px); border-color:var(--orange) !important; }

/* ---- section headings: short accent underline (editorial "kicker") ---- */
.mn-sec-hd h2::after{
  content:""; display:block; width:44px; height:3px; margin-top:10px; border-radius:99px;
  background:linear-gradient(90deg,#fb7a3c,#ea580c); opacity:.95;
}
.mn-sec-hd h2 small{ margin-top:8px; }
.mn-sec-hd a{ transition:color var(--mne-dur-2), transform var(--mne-dur-2) var(--mne-ease); }
.mn-sec-hd a:hover{ color:var(--orange-700) !important; }

/* ---- primary button: subtle depth gradient + smoother lift ---- */
.btn-primary{ background:var(--accent-ink) !important; }
.btn-primary:hover{ filter:brightness(1.08); }
/* accent (secondary) CTA style available via .btn-primary.btn-accent if ever used */
.btn-primary.btn-accent{ background:var(--orange-grad) !important; color:#fff !important; }

/* ---- product cards: crisper hover, price emphasis, add-btn pop ---- */
.mn-card-title{ transition:color var(--mne-dur-2) var(--mne-ease); }
.mn-card-price .now{ color:var(--ink) !important; letter-spacing:-.2px; }
.mn-card-price .mrp{ color:var(--muted-2) !important; }
@media (pointer:fine){
  .mn-card:hover .mn-card-title{ color:var(--orange-700) !important; }
  .mn-card .mn-card-ctl .btn{ transition:transform var(--mne-dur-2) var(--mne-ease), box-shadow var(--mne-dur-2) var(--mne-ease); }
  .mn-card:hover .mn-card-ctl .btn{ transform:translateY(-2px) scale(1.04); }
}

/* ---- category / brand tiles: accent hairline on hover ---- */
@media (pointer:fine){
  .mn-cat-tile:hover{ border-color:var(--orange) !important; }
  .mn-cat-tile:hover .meta b{ color:var(--orange-700) !important; }
}

/* ---- trust strip: soft accent chips ---- */
#mnTrust .mn-cat-tile .meta b{ color:var(--ink) !important; }
.mn-pdp-trust .mn-tb .i{ background:var(--orange-soft) !important; }

/* ---- pills / badges harmonised with the palette ---- */
.pill-orange{ background:var(--orange-soft) !important; color:var(--orange-700) !important; }
.pill-ok{ background:rgba(15,138,95,.12) !important; color:var(--ok) !important; }

/* ---- desktop back-to-top FAB (injected by store-motion.js) ---- */
#mnTopBtn{
  position:fixed; left:22px; right:auto; bottom:26px; z-index:300; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-ink); color:#fff;
  box-shadow:0 8px 22px -8px rgba(23,19,13,.5); opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none; transition:opacity var(--mne-dur-2) var(--mne-ease), transform var(--mne-dur-2) var(--mne-ease-out), filter var(--mne-dur-2);
}
#mnTopBtn.show{ opacity:1; transform:none; pointer-events:auto; }
#mnTopBtn:hover{ filter:brightness(1.12); transform:translateY(-2px); }
#mnTopBtn svg{ width:20px; height:20px; }

/* ---- product images: gentle scale-in on load (no CLS; opacity already handled) ---- */
@media (pointer:fine){
  .mn-card-imgwrap img{ transition:opacity .35s ease, transform .6s var(--mne-ease-out); }
}

/* ---- reduced motion: keep the scroll bar (informative) but drop the rest ---- */
@media (prefers-reduced-motion:reduce){
  #mnTopBtn{ transition:opacity var(--mne-dur-2) linear; transform:none !important; }
  .btn-primary:hover{ filter:none !important; }
  .mn-card:hover .mn-card-ctl .btn{ transform:none !important; }
}

/* =============================================================================
   V2.2 — WARM SHIMMER LOADERS + polish (2026-07)
   Retint every skeleton/shimmer surface to the warm paper palette so the
   "loading" state matches the design (was cool grey). Only recolours the
   gradient — size/animation from store.css are preserved.
   ============================================================================= */
/* Classic, clearly-visible skeleton sweep — reuses store.css's proven `mnShim`
   keyframe (400% background) so EVERY loader animates identically, just warm +
   higher-contrast (tan base → cream highlight) so it reads on the paper canvas. */
.mn-skel, .mn-skel-img, .mn-skel-line, .mn-skel-btn,
.mn-imgwrap-load:not(.ld), .mn-hero-shim, .mn-shim,
.mn-card-imgwrap .shim, .mn-slider .mn-shim, .mn-tl:not(.done)::before{
  background-image:linear-gradient(90deg, #d8cbb4 25%, #f7f1e6 37%, #d8cbb4 63%) !important;
  background-color:#d8cbb4 !important;
  background-size:400% 100% !important;
  background-repeat:repeat !important;
  animation:mnShim 1.4s ease infinite !important;
}
/* PURE shimmer — remove the little ring spinners layered over it (they looked
   "flat"/busy over the shimmer). Alt-text is already hidden, so shimmer alone
   is the clean loading state on tiles, cards, gallery and thumbnails. */
.mn-slider .mn-shim::after, .mn-card-imgwrap .shim::after, .mn-tl:not(.done)::after{ display:none !important; }
.mn-skel-card{ border-color:var(--line) !important; box-shadow:var(--sh-sm) !important; }

/* category-grid skeleton tiles (inlined in home.html so the grid shows shimmer
   from first paint instead of blank while categories + their images load) */
.mn-cat-tile.mn-tskel{ pointer-events:none; cursor:default; }
.mn-cat-tile.mn-tskel .mn-cat-thumb{ position:relative; }
.mn-cat-tile.mn-tskel .mn-cat-thumb .mn-shim{ position:absolute; inset:0; display:block; }
.mn-cat-tile.mn-tskel .meta{ padding:8px 10px 10px; }
.mn-cat-tile.mn-tskel .meta b{ display:block; height:11px; width:78%; border-radius:6px; }
.mn-gallery .main{ background:#fff !important; border-color:var(--line) !important; }

/* hero shimmer fills the reserved 1600×550 frame cleanly */
.mn-hero{ background:#efe8dd !important; }
.mn-hero-slide .mn-hero-shim{ z-index:1; }

/* PDP: keep the gallery + info column tidy while images stream in */
.mn-pdp-info h1{ margin-bottom:6px; }
.mn-thumbs img{ border:1px solid var(--line); background:#fff; }
.mn-thumbs img.on{ border-color:var(--orange) !important; }

/* =============================================================================
   MOBILE alignment tidy-ups (safe; no layout restructuring)
   ============================================================================= */
@media (max-width:600px){
  .mn-sec-hd{ align-items:flex-end; }
  .mn-sec-hd h2{ line-height:1.1; }
  .mn-sec-hd h2::after{ margin-top:7px; }
  .mn-pdp-actions{ gap:8px; }
  .mn-pdp-price .now{ letter-spacing:-.2px; }
  /* the top scroll-progress bar shouldn't sit under the sticky header edge */
  #mnScrollProg{ height:2.5px; }
}

/* =============================================================================
   V2.3 — shimmer reduced-motion + overall UX niceties (2026-07)
   ============================================================================= */
/* reduced motion: freeze the shimmer to a calm, still warm placeholder */
@media (prefers-reduced-motion:reduce){
  .mn-skel, .mn-skel-img, .mn-skel-line, .mn-skel-btn,
  .mn-imgwrap-load:not(.ld), .mn-hero-shim, .mn-shim,
  .mn-card-imgwrap .shim, .mn-slider .mn-shim, .mn-tl:not(.done)::before{
    animation:none !important;
    background-image:none !important; background-color:#e6dccc !important;
  }
}

/* smoother image reveals everywhere (product cards, tiles, gallery, sliders) */
.mn-card-imgwrap img, .mn-gallery .main img, .mn-slider img, .mn-tl img{
  transition:opacity .45s ease !important;
}

/* interactive elements: comfortable pointer + tap targets, no blue tap flash */
a, button, .btn, .mn-icon-btn, .mn-cat-tile, .mn-card{ -webkit-tap-highlight-color:transparent; }
.mn-card, .mn-cat-tile, .btn, .mn-icon-btn{ cursor:pointer; }

/* touch: guarantee ≥44px tap targets on the key controls (a11y) */
@media (pointer:coarse){
  .btn{ min-height:44px; }
  .mn-icon-btn, .mn-burger{ min-width:44px; min-height:44px; }
  .mn-hero-arrow, .mn-gallery-arrow{ width:44px; height:44px; }
}

/* quantity steppers: satisfying press feedback */
.mn-card-step button, .mn-pdp-step button{ transition:transform var(--mne-dur-1) var(--mne-ease), background var(--mne-dur-1); }
.mn-card-step button:active, .mn-pdp-step button:active{ transform:scale(.86); }

/* toast: readable, elevated, animates in (store-core already toggles it) */
#mnToast{ box-shadow:0 12px 34px -10px rgba(23,19,13,.5) !important; border-radius:12px !important; letter-spacing:.1px; }

/* empty states: warmer, friendlier */
.mn-empty{ color:var(--muted) !important; }
.mn-empty .ico{ filter:grayscale(.1); opacity:.9; }