/* ==========================================================================
   MANSUR STOREFRONT — store-premium.css   (ADDITIVE premium editorial skin)
   Loaded LAST on the CUSTOMER pages (home/shop/product/cart/account/wishlist/
   info). Calm, editorial, boutique-premium (fromourplace.com / apple.com):
   a SERIF display face (Fraunces), confident type, pure-white canvas and
   restrained NEUTRAL depth.

   STRUCTURE (2026-06): a BASE layer applies the safe premium LOOK on ALL
   screens (type / colour / depth / pure white) so MOBILE gets the upgrade too;
   a DESKTOP layer (@media min-width:900px) adds the bigger spacing, hover
   effects, image zoom, the capped PDP stepper and the scroll-reveal motion —
   all of which are desktop-only so phone layout + performance are never touched.
   Pure skin (no DOM change), reversible by unlinking.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* =============================================================================
   BASE LAYER — applies on EVERY screen (mobile + desktop). Low-risk: type,
   colour, pure-white, neutral depth, the brand-tile compaction. NO layout,
   spacing or hover changes here (those stay desktop-only below).
   ============================================================================= */
:root{
  --mnp-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mnp-ink:#15171c;
  --mnp-line:#ececea;
  --mnp-ease:cubic-bezier(.22,1,.36,1);
  --mnp-sh-card:0 1px 2px rgba(16,24,40,.04), 0 8px 22px -12px rgba(16,24,40,.12);
  --mnp-sh-hover:0 2px 6px rgba(16,24,40,.05), 0 26px 48px -18px rgba(16,24,40,.18);
  /* DEFAULT store accent = GREEN. These override store.css's orange defaults but
     are themselves overridden by Manage → Appearance → Primary colour (the
     appearance <style> is injected after this file), so the store colour is fully
     editable from the admin panel — green is just the out-of-the-box default. */
  --orange:#16a34a; --orange-600:#16a34a; --orange-700:#15803d;
  --orange-soft:#dcfce7; --orange-grad:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
}

/* pure-white canvas everywhere (also paints below-footer/overscroll white) */
html,body{ background:#ffffff; }
body{ color:var(--mnp-ink); }

/* editorial serif on every heading surface (sizes stay per-breakpoint) */
.mn-logo b{ font-family:var(--mnp-serif);font-weight:600;letter-spacing:.2px; }
.mn-sec-hd h2{
  font-family:var(--mnp-serif);font-weight:600;letter-spacing:-.4px;line-height:1.05;
  color:var(--mnp-ink);background:none;
  -webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;
}
.mn-sec-hd h2::after{ display:none; }   /* drop the accent bar — calmer */
.mn-sec-hd h2 small{ font-family:var(--font);font-weight:500;color:var(--muted);letter-spacing:0; }
.mn-hero-overlay h1{ font-family:var(--mnp-serif);font-weight:600;letter-spacing:-.5px; }
.mn-pdp-info h1{ font-family:var(--mnp-serif);font-weight:600;letter-spacing:-.4px;line-height:1.1; }
.mn-showcase-cap{ font-family:var(--mnp-serif);font-weight:600;letter-spacing:-.2px; }
.mn-ft h4{ font-family:var(--mnp-serif);font-weight:600; }

/* neutral, calm depth on cards / tiles (replaces the flat single shadow) */
.mn-card,.mn-cat-tile{ border:1px solid var(--mnp-line);box-shadow:var(--mnp-sh-card); }
.mn-showcase-card{ box-shadow:var(--mnp-sh-card); }

/* product card refinements (all screens) */
.mn-card-imgwrap{ background:#fff; }
.mn-card-imgwrap img{ padding:4%; }                       /* product floats with breathing room */
.mn-card-brand{ color:var(--muted);letter-spacing:.6px; } /* neutral, not shouting */
.mn-card-price .now{ color:var(--mnp-ink); }

/* brand tiles: name is ALWAYS one line — kill the inherited 2-line reserve
   (min-height:2.36em) that left dead whitespace under the name. ALL screens. */
.mn-brand-tile .meta{ padding-top:7px;padding-bottom:8px; }
.mn-brand-tile .meta b{ min-height:0;line-height:1.2; }

/* =============================================================================
   ACCENT SHADOWS → NEUTRAL (2026-06). The accent COLOUR now comes from --orange*
   (default green above, editable via Appearance → Primary colour). store.css's
   button/cart/stepper shadows were hardcoded orange-tinted, which would clash
   with any other accent — neutralise them so they work with ANY chosen colour.
   ============================================================================= */
.btn-primary{ box-shadow:0 6px 16px rgba(16,24,40,.16); }
.btn-primary:hover{ box-shadow:0 10px 22px rgba(16,24,40,.20); }
.mn-cartbar-inner{ box-shadow:0 10px 24px rgba(16,24,40,.22); }
.mn-pdp-step{ box-shadow:0 6px 16px rgba(16,24,40,.14); }
/* hero CTA stays a clean white button on the image */
.mn-hero-overlay .btn-primary{ background:#fff!important;color:var(--ink)!important;box-shadow:0 4px 14px rgba(0,0,0,.18)!important; }

/* =============================================================================
   SCROLL REVEAL (ALL screens) — the hidden state applies only when <html> has
   .mn-fx-reveal, which store-fx.js adds solely when IntersectionObserver +
   MutationObserver are supported and motion is allowed; a 5s safety in the JS
   reveals anything left, so content is never stuck hidden.
   ============================================================================= */
html.mn-fx-reveal .mn-card,
html.mn-fx-reveal .mn-cat-tile,
html.mn-fx-reveal .mn-showcase-card,
html.mn-fx-reveal .mn-sec-hd{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--mnp-ease), transform .6s var(--mnp-ease), box-shadow .4s var(--mnp-ease), border-color .3s;
}
html.mn-fx-reveal .mn-card.mn-fx-in,
html.mn-fx-reveal .mn-cat-tile.mn-fx-in,
html.mn-fx-reveal .mn-showcase-card.mn-fx-in,
html.mn-fx-reveal .mn-sec-hd.mn-fx-in{ opacity:1;transform:none; }

/* =============================================================================
   PDP TRUST BADGES (ALL screens) — confidence row under the buy box.
   ============================================================================= */
.mn-pdp-trust{ display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px;padding-top:16px;border-top:1px solid var(--mnp-line); }
.mn-pdp-trust .mn-tb{ display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:#334155;line-height:1.2; }
.mn-pdp-trust .mn-tb .i{ width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:var(--orange-soft,#dcfce7);font-size:1rem; }
@media (min-width:600px){ .mn-pdp-trust{ grid-template-columns:repeat(4,auto);gap:20px;justify-content:flex-start; } }

/* reduced-motion: reveal everything immediately (all screens) */
@media (prefers-reduced-motion:reduce){
  html.mn-fx-reveal .mn-card,
  html.mn-fx-reveal .mn-cat-tile,
  html.mn-fx-reveal .mn-showcase-card,
  html.mn-fx-reveal .mn-sec-hd{ opacity:1!important;transform:none!important; }
}

/* =============================================================================
   DESKTOP LAYER — spacing, hover, big type, capped stepper, scroll-reveal.
   Everything here is desktop-only so the mobile layout/perf is untouched.
   ============================================================================= */
@media (min-width:900px){

  /* refined scrollbar */
  *::-webkit-scrollbar{ width:11px;height:11px; }
  *::-webkit-scrollbar-thumb{ background:#dcdcd8;border-radius:99px;border:3px solid #fff; }
  *::-webkit-scrollbar-thumb:hover{ background:#c7c7c2; }

  /* editorial container + vertical rhythm (wider + tighter sides = less dead margin) */
  .mn-wrap{ max-width:1340px;padding:0 24px; }
  .mn-sec{ margin-top:72px; }

  /* header */
  .mn-hd{ background:rgba(255,255,255,.85);border-bottom:1px solid var(--mnp-line); }
  .mn-hd-bar{ height:72px;gap:16px; }
  .mn-logo b{ font-size:1.32rem; }
  .mn-logo small{ letter-spacing:1.6px;font-size:.58rem; }
  .mn-hd-search{ height:46px;max-width:460px;background:#f6f6f3;border-radius:999px;border-color:transparent; }
  .mn-hd-search:focus-within{ background:#fff;border-color:#dcdcd8;box-shadow:0 0 0 4px rgba(16,24,40,.04); }
  .mn-icon-btn{ border-color:var(--mnp-line);border-radius:999px; }
  .mn-icon-btn:hover{ border-color:#dcdcd8;background:#fafaf8; }

  /* section headings (large serif) */
  .mn-sec-hd{ align-items:flex-end;margin-bottom:26px; }
  .mn-sec-hd h2{ font-size:2.5rem;letter-spacing:-.6px; }
  .mn-sec-hd h2 small{ font-size:.94rem;margin-top:10px; }
  .mn-sec-hd a{
    font-family:var(--font);font-weight:600;font-size:.9rem;color:var(--mnp-ink);
    border-bottom:1.6px solid var(--orange);border-radius:0;padding:0 0 2px;
    transition:color .2s,transform .2s var(--mnp-ease);
  }
  .mn-sec-hd a:hover{ color:var(--orange-700);transform:translateX(3px); }

  /* hero */
  .mn-hero{ border-radius:22px;box-shadow:var(--mnp-sh-card);margin-top:10px; }
  .mn-hero-slide{ transform:scale(1);transition:opacity .8s ease, transform 18s ease-out; }
  .mn-hero-slide.active{ transform:scale(1.05); }
  .mn-hero-overlay{ padding:0 64px;background:linear-gradient(90deg,rgba(10,12,16,.58) 0%,rgba(10,12,16,.14) 56%,transparent 82%); }
  .mn-hero-overlay h1{ font-size:3.4rem;line-height:1.02;letter-spacing:-1px;max-width:56%;text-shadow:0 2px 30px rgba(0,0,0,.42);animation:mnpIn .7s var(--mnp-ease) both; }
  .mn-hero-overlay p{ font-size:1.12rem;max-width:46%;opacity:.96;animation:mnpIn .7s .08s var(--mnp-ease) both; }
  .mn-hero-overlay .btn{ animation:mnpIn .7s .16s var(--mnp-ease) both; }
  .mn-hero-arrow{ background:rgba(255,255,255,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.16); }
  @keyframes mnpIn{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }

  /* product cards — hover lift + image zoom + reveal-on-hover controls */
  .mn-prod-grid{ gap:26px; }
  .mn-card{ border-radius:16px;transition:box-shadow .4s var(--mnp-ease), transform .4s var(--mnp-ease), border-color .3s; }
  .mn-card:hover{ transform:translateY(-5px);box-shadow:var(--mnp-sh-hover);border-color:#e3e3df; }
  .mn-card-imgwrap img{ padding:5%;transition:opacity .35s ease, transform .6s var(--mnp-ease); }
  .mn-card:hover .mn-card-imgwrap img.loaded{ transform:scale(1.05); }
  .mn-card-fav,.mn-card-qv{
    opacity:0;transform:translateY(-4px);
    transition:opacity .25s var(--mnp-ease),transform .25s var(--mnp-ease),background .2s,color .2s;
    box-shadow:0 4px 12px rgba(16,24,40,.14);
  }
  .mn-card:hover .mn-card-fav,.mn-card:hover .mn-card-qv,.mn-card-fav.on{ opacity:1;transform:none; }
  .mn-card-body{ padding:14px 15px 16px; }
  .mn-card-title{ font-size:.95rem;font-weight:600;line-height:1.34; }
  .mn-card-price .now{ font-size:1.12rem;font-weight:700;letter-spacing:-.3px; }
  .mn-card .mn-card-ctl .btn{ box-shadow:0 8px 18px rgba(16,24,40,.14);border-radius:11px; }

  /* category / brand tiles */
  .mn-cat-grid{ grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px; }
  .mn-cat-tile{ border-radius:16px;transition:box-shadow .4s var(--mnp-ease), transform .4s var(--mnp-ease), border-color .3s; }
  .mn-cat-tile:hover{ transform:translateY(-5px);box-shadow:var(--mnp-sh-hover);border-color:#e3e3df; }
  .mn-cat-thumb{ background:#ffffff; }
  .mn-cat-tile:not(.mn-brand-tile) .mn-cat-thumb img{ padding:6%;transition:transform .6s var(--mnp-ease); }
  .mn-cat-tile:not(.mn-brand-tile):hover .mn-cat-thumb img{ transform:scale(1.06); }
  .mn-cat-tile .meta{ padding:9px 10px;text-align:center; }
  .mn-cat-tile .meta b{ font-size:.92rem;font-weight:600;letter-spacing:-.1px; }
  .mn-cat-tile .meta span{ font-size:.76rem; }
  .mn-brand-tile .meta{ padding:10px 10px 12px; }

  /* showcase */
  .mn-showcase-card{ border-radius:18px;overflow:hidden;transition:box-shadow .4s var(--mnp-ease), transform .4s var(--mnp-ease); }
  .mn-showcase-card:hover{ transform:translateY(-5px);box-shadow:var(--mnp-sh-hover); }
  .mn-showcase-card .mn-showcase-img img{ transition:transform .7s var(--mnp-ease); }
  .mn-showcase-card:hover .mn-showcase-img img{ transform:scale(1.05); }

  /* trust strip — static (no hover lift), serif labels */
  #mnTrust .mn-cat-tile{ background:#fff;cursor:default; }
  #mnTrust .mn-cat-tile:hover{ transform:none;box-shadow:var(--mnp-sh-card); }
  #mnTrust .mn-cat-tile .meta b{ font-family:var(--mnp-serif);font-weight:600; }

  /* buttons */
  .btn-primary{ box-shadow:0 6px 18px rgba(234,88,12,.26);letter-spacing:.2px; }
  .btn-primary:hover{ box-shadow:0 10px 24px rgba(234,88,12,.34); }

  /* PDP title + COMPACT add/qty control (was a full-row giant bar) */
  .mn-pdp-info h1{ line-height:1.08; }
  .mn-pdp-actions{ justify-content:flex-start; }
  .mn-pdp-actions > #pAddWrap{ flex:0 0 auto !important;width:260px;max-width:260px; }
  .mn-pdp-step.big{ height:46px; }
  .mn-pdp-actions .mn-pdp-step{ box-shadow:0 6px 16px rgba(234,88,12,.16); }

  /* PDP gallery: SMALLER product image, roomier info column, browsable thumbs.
     (The image was capped at 440px square → too dominant; thumbs fell below the
     fold. Shrink to ~360 and wrap the thumbnail rail so every image is visible.) */
  .mn-pdp{ grid-template-columns:minmax(0,360px) 1fr;gap:46px; }
  .mn-gallery .main{ border-radius:16px;background:#ffffff; }
  .mn-gallery .main img{ padding:6%; }
  .mn-thumbs{ flex-wrap:wrap;margin-top:12px;overflow:visible; }
  .mn-thumbs img{ width:56px;height:56px;border-radius:10px; }
}

/* reduced-motion: no hero zoom / entrance even on desktop */
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  .mn-hero-slide,.mn-hero-slide.active{ transform:none;transition:opacity .8s ease; }
  .mn-hero-overlay h1,.mn-hero-overlay p,.mn-hero-overlay .btn{ animation:none; }
}

/* =============================================================================
   MOBILE PDP STICKY BAR (2026-06) — the qty stepper carried an inline flex:1 so
   it stretched the full width. Cap it to a compact width and CENTER the three
   controls (qty/Add · wishlist · share) as a group. Mobile only (desktop hides
   this bar and uses the in-page action row).
   ============================================================================= */
@media (max-width:899px){
  .mn-pdp-stick{ display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:16px;padding-right:16px; }
  .mn-pdp-stick > #pFav2{ order:1; }                                  /* heart — far left */
  .mn-pdp-stick > #pAddWrap2{ order:2;flex:1 1 auto !important;width:auto;min-width:0;display:flex; }  /* Add to Quote — bigger, middle */
  .mn-pdp-stick > #pAddWrap2 .mn-pdp-step,
  .mn-pdp-stick > #pAddWrap2 .btn{ width:100%; }
  .mn-pdp-stick > #pShare2{ order:3; }                                /* share/link — far right */
}

/* =============================================================================
   POLISH PASS (2026-06) — accessibility + micro-interaction refinements.
   Accent-agnostic (uses --orange*, which follows Appearance → Primary colour).
   Safe on mobile (only the hover block is desktop-gated).
   ============================================================================= */
/* text selection = soft accent tint */
::selection{ background:rgba(22,163,74,.16); }
/* keyboard focus rings — visible for keyboard users, not on mouse click */
.btn:focus-visible, .mn-icon-btn:focus-visible, .mn-burger:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible{ outline:2px solid var(--orange,#16a34a); outline-offset:2px; border-radius:8px; }
/* consistent tactile button press everywhere */
.btn:active{ transform:translateY(1px) scale(.99); }

@media (min-width:900px){
  /* card hover: title takes the accent + the Add/qty control gives a subtle pop */
  .mn-card .mn-card-ctl .btn, .mn-card .mn-card-ctl .mn-card-step{
    transition:transform .25s var(--mnp-ease), box-shadow .25s var(--mnp-ease);
  }
  .mn-card:hover .mn-card-title{ color:var(--orange-700); }
  .mn-card:hover .mn-card-ctl .btn{ transform:translateY(-2px) scale(1.03); }
  /* category / brand tile name takes the accent on hover */
  .mn-cat-tile:hover .meta b{ color:var(--orange-700); }
  /* PDP thumbnails: clearer hover + selected state */
  .mn-thumbs img{ transition:border-color .2s, transform .2s var(--mnp-ease); }
  .mn-thumbs img:hover{ transform:translateY(-2px); }
}