/* ==========================================================================
   Allo Cadeaux — tokens
   ========================================================================== */
:root{
  --pink: #ee4f7a;
  --pink-deep: #c22a58;
  --pink-soft: #ffe2ec;
  --orange: #f7a24d;
  --orange-soft: #ffedd4;
  --mint: #3dc9a3;
  --mint-soft: #dff8f0;
  --lavender: #9b83e8;
  --lavender-soft: #efe8fd;
  --cream: #fff6ef;
  --paper: #fffaf5;
  --ink: #3a2530;
  --ink-soft: #7d6670;
  --ink-45: rgba(58,37,48,.45);
  --twine: #d9ac7a;
  --line: rgba(58,37,48,0.09);
  --shadow-soft: 0 14px 30px rgba(238,79,122,0.14);
  --hero-pink: #e22253;

  --font-display: 'Fraunces', serif;
  --font-body: 'Poppins', sans-serif;
  --font-script: 'Caveat', cursive;
  /* Personalization font — isolated so swapping the font later only requires changing this
     one value, not the mirror preview system itself. */
  --mirror-name-font: 'MirrorNameFont', 'Caveat', cursive;

  --wrap: 1180px;
  --radius: 22px;
  --ease: cubic-bezier(.22,1,.36,1);
  --header-h: 76px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background:
    radial-gradient(650px 420px at 8% 0%, var(--pink-soft) 0%, transparent 60%),
    radial-gradient(600px 400px at 100% 12%, var(--orange-soft) 0%, transparent 55%),
    radial-gradient(700px 460px at 50% 100%, var(--lavender-soft) 0%, transparent 55%),
    var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1em; }

.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--pink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 10px 0; z-index: 999;
}
.skip-link:focus{ left: 0; }
:focus-visible{ outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.icon{ width: 1.1em; height: 1.1em; fill: currentColor; flex-shrink: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 28px; border-radius: 100px; font-weight: 600; font-size: .95rem;
  border: none; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn .icon{ width: 18px; height: 18px; }
.btn-lg{ padding: 16px 30px; font-size: 1rem; }

.btn-primary{ background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff; box-shadow: 0 12px 26px rgba(238,79,122,.28); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(238,79,122,.4); }

.btn-commander{
  background: #e6255a; color: #fff;
  padding: 12px 22px; font-weight: 600; font-size: .92rem;
  box-shadow: 0 6px 16px rgba(230,37,90,.3);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn-commander:hover{ background: #d81b4f; box-shadow: 0 8px 20px rgba(230,37,90,.38); transform: translateY(-1px); }
.btn-commander .icon{ width: 16px; height: 16px; }

.btn-outline{ background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-outline:hover{ border-color: var(--pink); color: var(--pink-deep); background: rgba(238,79,122,.06); transform: translateY(-3px); }

.btn-white{ background: #fff; color: var(--pink-deep); }
.btn-white:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,.2); }

.btn-ghost-dark{ background: transparent; color: var(--cream); border: 1.5px solid rgba(255,246,235,.3); }
.btn-ghost-dark:hover{ border-color: var(--cream); background: rgba(255,255,255,.08); transform: translateY(-3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,246,239,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(255,246,239,.92);
  border-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(58,37,48,.4);
}
.header-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }

.brand{ display: flex; align-items: center; }
.brand-mark{ height: 42px; width: auto; }

.main-nav{ display: flex; align-items: center; gap: 30px; }
.main-nav a{ font-size: 14.5px; font-weight: 500; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .2s; }
.main-nav a:hover{ color: var(--pink); }

.header-actions{ display: flex; align-items: center; gap: 10px; }
.header-call{
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  justify-content: center; background: rgba(58,37,48,.06); color: var(--ink);
}
.header-call:hover{ background: rgba(58,37,48,.12); }

.nav-toggle{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.nav-toggle span{ width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); }

/* Full-screen mobile menu */
.mobile-menu{
  position: fixed; inset: 0; z-index: 900;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.mobile-menu.is-open{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu a{ font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); }
.mobile-menu a:hover{ color: var(--pink); }
.mobile-menu-close{
  position: absolute; top: 22px; right: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(58,37,48,.06); border: none; font-size: 1.3rem; color: var(--ink); cursor: pointer;
}

/* ==========================================================================
   Hero — written mobile-first: base rules below are the phone layout;
   tablet/desktop are progressive min-width enhancements further down.
   ========================================================================== */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pink-deep); background: var(--pink-soft); padding: 8px 18px; border-radius: 100px;
  margin-bottom: 22px;
}
.eyebrow-dark{ color: var(--ink-soft); background: rgba(58,37,48,.06); }

.premium-badge{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: #8a6415; background: linear-gradient(135deg, #fff3d6, #f7dfa3);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 22px; margin-left: 8px;
  box-shadow: 0 3px 8px rgba(154,111,17,.18);
}

.hero{ position: relative; overflow: hidden; aspect-ratio: 0.78 / 1; max-height: 560px; }
.hero-bg-img{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  display: block;
}
.hero-scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,246,239,.72) 0%, rgba(255,246,239,.34) 34%, rgba(255,246,239,0) 50%);
}
.hero-content{
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding-top: calc(var(--header-h) + 10px);
}
.hero-title{
  font-size: clamp(1.15rem, 5.6vw, 1.4rem); font-weight: 600; letter-spacing: -.2px;
  line-height: 1.2; color: var(--ink); margin-bottom: .24em; max-width: 11ch;
}
.hero-lead{ font-size: .78rem; color: var(--ink-soft); line-height: 1.45; max-width: 23ch; margin-bottom: 12px; }
.hero-title-accent{ color: inherit; }
.hero-sparkle{ display: none; }
.hero-intro{ display: none; }
.hero-title-line{ display: inline; }

/* Product showcase — a true continuous infinite marquee (mobile only; desktop keeps the
   original .hero-collage marquee, see the min-width:980px block further down).
   The track's motion is a single linear CSS animation (seamless because JS renders the
   catalogue twice back-to-back — see script.js); per-item scale/opacity update every frame
   from JS based on real position, so only box-shadow transitions here (never transform/opacity,
   which would fight the per-frame writes and look laggy). */
.hero-showcase{
  display: none; position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
}
.hero-showcase-track{
  display: flex; align-items: center; gap: 14px; width: max-content;
  will-change: transform;
}
@keyframes heroShowcaseScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.hero-showcase-item{
  flex: 0 0 auto; width: 42vw; max-width: 180px; aspect-ratio: 3 / 4;
  border-radius: 20px; overflow: hidden; border: 4px solid #fff; background: #fff;
  box-shadow: 0 14px 26px -12px rgba(226,34,83,.28);
  will-change: transform, opacity;
  transition: box-shadow .3s var(--ease);
}
.hero-showcase-item img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; }

.hero-cta-btn{
  display: inline-flex; height: 36px; padding: 0 16px; border-radius: 18px;
  font-size: 11.5px; font-weight: 600;
  background: linear-gradient(135deg, var(--hero-pink), var(--pink-deep)); box-shadow: 0 8px 18px rgba(226,34,83,.28);
}
.hero-cta-btn:hover{ transform: translateY(-2px); }

@keyframes heroFadeUp{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }
.hero-anim{ opacity: 0; animation: heroFadeUp .7s var(--ease) forwards; }
.hero-anim-1{ animation-delay: .15s; }
.hero-anim-2{ animation-delay: .32s; }
.hero-anim-3{ animation-delay: .5s; }
@media (prefers-reduced-motion: reduce){
  .hero-anim{ opacity: 1; animation: none; }
}

.hero-collage-section{ padding: 28px 0 32px; }

/* Mobile-only hero — no background photo here (that stays a desktop-only treatment via the
   min-width:980px block further down). Instead: text in normal flow, then a center-featured
   product showcase, then the CTA, all stacked in one clean vertical composition. Scoped
   strictly to max-width:979px so desktop is never touched by any of this. */
@media (max-width: 979px){
  .hero{ aspect-ratio: unset; max-height: none; height: auto; overflow: visible; padding-bottom: 28px; }
  .hero-bg-img, .hero-scrim, .hero-sparkle{ display: none; }
  .hero-collage-section{ display: none; } /* mobile shows the hero-showcase marquee instead */

  .hero-content{
    position: static; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    padding-top: calc(var(--header-h) + 20px);
  }

  /* Entrance sequence — plays once on load, ~1.3s end-to-end. The h1's own inherited
     .hero-anim/.hero-anim-1 (desktop's simple fade-up) is neutralized here since each line
     inside it now animates individually instead of the whole heading fading as one block. */
  @keyframes heroTextIn{
    from{ opacity: 0; transform: translateY(15px); filter: blur(4px); }
    to{ opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @keyframes heroCtaIn{
    from{ opacity: 0; transform: translateY(12px) scale(.95); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes heroAccentPop{
    0%{ transform: scale(1); text-shadow: 0 0 0 rgba(226,34,83,0); }
    55%{ transform: scale(1.07); text-shadow: 0 0 16px rgba(226,34,83,.4); }
    100%{ transform: scale(1); text-shadow: 0 0 0 rgba(226,34,83,0); }
  }
  @keyframes heroShowcaseIn{ from{ opacity: 0; } to{ opacity: 1; } }

  .hero-intro{
    display: block; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
    color: var(--hero-pink); margin: 0 auto 6px;
    opacity: 0; animation: heroTextIn .55s var(--ease) forwards;
  }
  .hero-title.hero-anim{ opacity: 1; animation: none; } /* parent no longer fades as a block */
  .hero-title-line{
    display: block; opacity: 0; animation: heroTextIn .55s var(--ease) forwards;
  }
  .hero-title-line:nth-child(1){ animation-delay: .15s; }
  .hero-title-line:nth-child(2){ animation-delay: .27s; }
  .hero-title-line:nth-child(3){ animation-delay: .39s; }
  .hero-title-accent{
    color: var(--hero-pink); display: inline-block;
    animation: heroAccentPop .6s var(--ease) .94s both;
  }
  .hero-lead.hero-anim{ font-size: .74rem; line-height: 1.42; max-width: 31ch; margin: 0 auto 0; animation: heroTextIn .55s var(--ease) forwards; animation-delay: .54s; }

  .hero-showcase{ display: block; padding: 22px 0 6px; opacity: 0; animation: heroShowcaseIn .6s ease forwards; animation-delay: .65s; }

  .hero-cta-wrap{ display: flex; justify-content: center; margin-top: 18px; }
  .hero-cta-btn{ height: 42px; padding: 0 22px; font-size: 13px; border-radius: 21px; box-shadow: 0 10px 22px -4px rgba(226,34,83,.45); }
  .hero-cta-btn.hero-anim{ opacity: 0; animation: heroCtaIn .55s var(--ease) forwards; animation-delay: .74s; }
}

/* Product carousel — built at runtime from the product catalogue.
   Auto-scrolls right → left forever via the classic "duplicate the content once, animate
   to exactly -50%" trick: the JS renders the card list twice back-to-back, so the moment
   the track has scrolled past the first copy, the second copy is pixel-identical to where
   the first one started — the loop seam is invisible. */
.hero-collage{ overflow: hidden; }
.hero-collage-track{
  display: flex; gap: 12px; align-items: center; width: max-content;
  padding: 6px 20px 14px;
  animation: hero-collage-scroll 32s linear infinite;
  animation-delay: -11s; /* already mid-flow at load, not starting flush from the first card */
  will-change: transform;
}
.hero-collage:hover .hero-collage-track,
.hero-collage:focus-within .hero-collage-track{ animation-play-state: paused; }
@keyframes hero-collage-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.hero-collage-card{
  position: relative; flex: 0 0 auto;
  width: 132px; height: 168px;
  border-radius: 22px; overflow: hidden; border: 4px solid #fff; background: #fff;
  box-shadow: 0 14px 28px -12px rgba(226,34,83,.32);
  transition: box-shadow .25s var(--ease);
}
.hero-collage-card:hover{ box-shadow: 0 20px 34px -12px rgba(226,34,83,.4); }
.hero-collage-card img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-collage-badge{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #fff; color: var(--hero-pink);
  font-family: var(--font-mono, var(--font-body)); font-weight: 700; font-size: .62rem;
  letter-spacing: .02em; padding: 4px 10px; border-radius: 100px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.hero-collage-name{
  position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px 8px;
  background: linear-gradient(to top, rgba(28,13,16,.65), transparent);
  color: #fff; font-family: var(--font-display); font-size: .88rem; font-weight: 600;
}

/* ==========================================================================
   Category shortcuts — horizontally scrollable row directly under the hero
   ========================================================================== */
.category-shortcuts{ padding: 4px 0 40px; }
.category-shortcuts-track{
  display: flex; gap: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -20px; padding: 0 20px;
}
.category-shortcuts-track::-webkit-scrollbar{ display: none; }
.category-shortcut{
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 16px; font-size: .85rem; font-weight: 600; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.category-shortcut:hover{ border-color: var(--hero-pink); color: var(--hero-pink); background: var(--pink-soft); transform: translateY(-2px); }
.category-shortcut.is-active{ background: var(--hero-pink); border-color: var(--hero-pink); color: #fff; }

/* Desktop nav search (hidden on mobile per the "no unnecessary elements" rule) */
.nav-search{ display: none; }

@media (min-width: 980px){
  .hero{ aspect-ratio: auto; height: 640px; max-height: none; }
  .hero-bg-img{ object-position: 74% 32%; }
  .hero-scrim{ background: linear-gradient(90deg, rgba(255,246,239,.94) 0%, rgba(255,246,239,.62) 40%, rgba(255,246,239,0) 66%); }
  .hero-content{ top: 50%; transform: translateY(-50%); padding-top: 0; }
  .hero-title{ font-size: clamp(2.3rem, 3.6vw, 3.1rem); max-width: 9ch; }
  .hero-title-line:first-child{ display: block; } /* reproduces the old <br> between "Des cadeaux" and the rest */
  .hero-lead{ font-size: 1.1rem; max-width: 32ch; margin-bottom: 26px; }
  .hero-cta-btn{ height: 48px; padding: 0 26px; font-size: 14.5px; border-radius: 24px; }
  .hero-collage-section{ padding: 40px 0 50px; }
  .hero-collage{ margin: 0; }
  .hero-collage-track{ padding: 6px 4px 14px; }
  .hero-collage-card{ width: 150px; height: 190px; }

  .nav-search{
    display: inline-flex; align-items: center; position: relative;
  }
  .nav-search-toggle{
    width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(58,37,48,.06);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
    transition: background .2s var(--ease);
  }
  .nav-search-toggle:hover{ background: var(--pink-soft); color: var(--hero-pink); }
  .nav-search-input{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 0; opacity: 0; pointer-events: none;
    padding: 10px 16px; border-radius: 100px; border: 1.5px solid var(--line);
    font-family: var(--font-body); font-size: .85rem; background: #fff;
    transition: width .25s var(--ease), opacity .2s var(--ease);
  }
  .nav-search.is-open .nav-search-input{ width: 220px; opacity: 1; pointer-events: auto; right: 46px; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  background: var(--ink); color: var(--cream); padding: 15px 0; overflow: hidden; white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.marquee-track{
  display: inline-flex; gap: 30px; align-items: center; width: max-content;
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  animation: scroll-left 28s linear infinite;
}
.marquee-track .dot{ color: var(--orange); font-style: normal; font-weight: 600; }
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   Section headers
   ========================================================================== */
.section{ padding: 90px 0; }
.section-head{ max-width: 600px; margin-bottom: 50px; }
.section-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-head p{ color: var(--ink-soft); font-size: 1rem; margin-top: 14px; }
.section-tint{ background: linear-gradient(180deg, var(--paper), var(--pink-soft) 160%); }

/* ==========================================================================
   Horizontal scroll-snap track (photo showcase)
   ========================================================================== */
.scroll-track{
  display: flex; gap: 22px; overflow-x: auto; padding: 10px 4px 24px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.scroll-track::-webkit-scrollbar{ height: 6px; }
.scroll-track::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 10px; }
.track-card{
  flex: 0 0 220px; scroll-snap-align: start;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 28px rgba(238,79,122,.14);
  border: none; padding: 0; cursor: zoom-in;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.track-card:hover{ transform: translateY(-8px); box-shadow: 0 22px 38px rgba(238,79,122,.2); }
.track-card img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.track-card figcaption{
  padding: 12px 6px; text-align: center;
  font-family: var(--font-script); font-size: 19px; font-weight: 600; color: var(--ink);
}

/* ==========================================================================
   Products
   ========================================================================== */
.product-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 24px; }
.product-card{
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(238,79,122,.08);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column;
  cursor: pointer;
}
.product-card:focus-visible{ outline: 3px solid var(--orange); outline-offset: 3px; }
.product-card:hover{ transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 20px 34px rgba(238,79,122,.16); }

.pc-img{ position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--lavender-soft); }
.pc-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .pc-img img{ transform: scale(1.06); }
.pc-icon{
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; background: var(--pink-soft);
}
.product-card:nth-child(2) .pc-icon{ background: var(--orange-soft); }
.product-card:nth-child(3) .pc-icon{ background: var(--mint-soft); }
.product-card:nth-child(4) .pc-icon{ background: var(--lavender-soft); }
.product-card:nth-child(5) .pc-icon{ background: var(--pink-soft); }
.product-card:nth-child(6) .pc-icon{ background: var(--orange-soft); }
.product-card:nth-child(7) .pc-icon{ background: var(--mint-soft); }
.product-card:nth-child(8) .pc-icon{ background: var(--lavender-soft); }

.pc-body{ padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.pc-body h3{ font-size: 1.15rem; margin-bottom: 6px; text-align: center; }
.pc-premium-badge{
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  color: #8a6415; background: linear-gradient(135deg, #fff3d6, #f7dfa3);
  padding: 4px 10px; border-radius: 100px; margin-bottom: 7px;
}
.pc-body p{ font-size: .88rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; flex: 1; text-align: center; }
.pc-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-price{ font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--pink-deep); white-space: nowrap; flex: 0 0 auto; }
.pc-order{
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; line-height: 1;
  box-shadow: 0 4px 10px rgba(238,79,122,.28);
  transition: box-shadow .2s var(--ease);
}
.pc-order svg{ width: 12px; height: 12px; }

/* Global delivery badge on every product card (see DELIVERY_FEE in script.js) — appended last
   inside .pc-body, so it sits under the price/commander row. Overrides the generic ".pc-body p"
   rule (flex:1 for the description paragraph) so it stays compact and doesn't stretch. */
.pc-body p.pc-delivery{
  flex: 0 0 auto; margin: 8px 0 0; font-size: .72rem; color: var(--ink-45); line-height: 1.3;
}
.product-card:hover .pc-order{ box-shadow: 0 8px 18px rgba(238,79,122,.38); }

/* ==========================================================================
   Process
   ========================================================================== */
.process-row{ display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.process-row::before{
  content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--twine) 0 10px, transparent 10px 20px);
}
.step{ position: relative; padding: 0 18px 0 0; }
.step-num{
  width: 52px; height: 52px; border-radius: 50%; background: var(--pink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--pink-deep);
  margin-bottom: 20px; position: relative; z-index: 2;
}
.step:nth-child(2) .step-num{ background: var(--orange-soft); color: #a85c1c; }
.step:nth-child(3) .step-num{ background: var(--mint-soft); color: #1d7d63; }
.step:nth-child(4) .step-num{ background: var(--lavender-soft); color: #5b3fc4; }
.step h3{ font-size: 1.05rem; margin-bottom: 8px; }
.step p{ font-size: .88rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ==========================================================================
   Feature story
   ========================================================================== */
.feature{
  background: linear-gradient(155deg, var(--pink) 0%, var(--pink-deep) 65%, #8a2456 100%);
  color: #fff; position: relative; overflow: hidden;
}
.feature::after{
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(247,162,77,.4), transparent 70%);
  top: -160px; right: -140px; pointer-events: none;
}
.feature-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.feature-img{ position: relative; }
.feature-img img{ border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: rotate(-3deg); border: 6px solid #fff; width: 100%; }
.feature h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 500; line-height: 1.18; margin-bottom: 18px; letter-spacing: -.5px; }
.feature h2 em{ font-style: italic; color: var(--orange); font-weight: 500; }
.feature p{ font-size: 1rem; line-height: 1.7; opacity: .92; max-width: 480px; margin-bottom: 26px; }
.feature-list{ list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0 0 28px; padding: 0; }
.feature-list li{ display: flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 500; }
.feature-list li .ck{
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .75rem;
}

/* ==========================================================================
   Gallery grid
   ========================================================================== */
.gallery-strip{ display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.gallery-strip figure{ margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; position: relative; cursor: zoom-in; border: none; padding: 0; background: none; }
.gallery-strip img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.gallery-strip figure:hover img{ transform: scale(1.08); }
.gallery-strip figcaption{
  position: absolute; bottom: 0; left: 0; right: 0; padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  color: #fff; font-family: var(--font-script); font-size: 18px;
}

/* ==========================================================================
   Occasions
   ========================================================================== */
.occasion-grid{ display: flex; flex-wrap: wrap; gap: 12px; }
.occasion-pill{
  font-weight: 600; font-size: .92rem; padding: 12px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.occasion-pill:hover{ background: var(--pink); color: #fff; border-color: var(--pink); transform: translateY(-2px); }

/* ==========================================================================
   CTA band + footer
   ========================================================================== */
.cta-band{ background: var(--ink); color: var(--cream); text-align: center; padding: 90px 0; position: relative; overflow: hidden; }
.cta-band::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(238,79,122,.22), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(247,162,77,.18), transparent 40%),
    radial-gradient(circle at 55% 15%, rgba(155,131,232,.16), transparent 35%);
}
.cta-band h2{ position: relative; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -1px; margin-bottom: 18px; color: #fff; }
.cta-band h2 em{ font-style: italic; color: var(--orange); font-weight: 500; }
.cta-band p{ position: relative; color: rgba(253,245,236,.7); font-size: 1rem; margin-bottom: 34px; }
.cta-band .hero-cta{ position: relative; justify-content: center; }

.site-footer{ background: #1c0d10; color: rgba(253,245,236,.55); padding: 60px 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-mark{ height: 36px; width: auto; }
.footer-brand p{ font-size: .88rem; line-height: 1.6; max-width: 280px; color: rgba(253,245,236,.55); margin: 0; }
.footer-col h4{ color: var(--cream); font-size: .82rem; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .04em; }
.footer-col p{ font-size: .88rem; margin: 0 0 8px; }
.footer-col a{ transition: color .2s; }
.footer-col a:hover{ color: var(--orange); }
.footer-bottom{
  border-top: 1px solid rgba(253,245,236,.1); padding: 22px 0;
  display: flex; justify-content: space-between; font-size: .78rem; flex-wrap: wrap; gap: 10px;
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.45);
  transition: transform .2s var(--ease);
}
.wa-float .icon{ width: 27px; height: 27px; fill: #fff; }
.wa-float:hover{ transform: scale(1.08); }

/* ==========================================================================
   Scroll reveal + Lightbox (shared)
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * .1s); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.product-card-reveal{ transform: translateY(25px) scale(.98); }
.product-card-reveal.is-visible{ transform: translateY(0) scale(1); }

.lightbox{
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28,13,16,.9); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); padding: 40px 24px;
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; }
.lightbox-figure{ margin: 0; max-width: min(520px, 90vw); text-align: center; transform: scale(.92); transition: transform .25s var(--ease); }
.lightbox.is-open .lightbox-figure{ transform: scale(1); }
.lightbox-figure img{ width: 100%; border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lightbox-figure figcaption{ margin-top: 16px; font-family: var(--font-script); font-size: 22px; color: var(--cream); }
.lightbox-close{
  position: absolute; top: 22px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); transform: rotate(90deg); }

/* ==========================================================================
   Product modal (Freesia)
   ========================================================================== */
.product-modal{
  position: fixed; inset: 0; z-index: 960;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.product-modal.is-open{ opacity: 1; pointer-events: auto; }
.product-modal-backdrop{ position: absolute; inset: 0; background: rgba(28,13,16,.55); backdrop-filter: blur(4px); }
.product-modal-panel{
  position: relative; z-index: 1;
  background: var(--paper); border-radius: 28px;
  max-width: 920px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
  transform: scale(.95); transition: transform .25s var(--ease);
}
.product-modal.is-open .product-modal-panel{ transform: scale(1); }
.product-modal-close{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: 1rem; color: var(--ink);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.product-modal-close:hover{ background: var(--pink-soft); transform: rotate(90deg); }

.product-modal-grid{ display: grid; grid-template-columns: 1fr 1fr; }
.product-modal-gallery{ padding: 28px; }
.product-modal-main{ position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; margin-bottom: 14px; background: var(--pink-soft); }
.product-modal-main img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery prev/next — cycle through this product's own images only, never navigate away.
   Hidden automatically by JS when a product has just one image (nothing to navigate to). */
.product-modal-nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,246,239,.92); color: var(--ink);
  box-shadow: 0 4px 14px rgba(58,37,48,.2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.product-modal-nav:hover{ background: #fff; color: var(--pink-deep); }
.product-modal-nav svg{ width: 18px; height: 18px; }
.product-modal-nav-prev{ left: 10px; }
.product-modal-nav-next{ right: 10px; }
.product-modal-thumbs{ display: flex; gap: 10px; }
.product-modal-thumb{
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden; padding: 0;
  border: 2px solid transparent; cursor: pointer; background: none; transition: border-color .2s var(--ease);
}
.product-modal-thumb.is-active{ border-color: var(--pink); }
.product-modal-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Product image zoom/lightbox — one reusable overlay, injected once by JS and shared by every
   product gallery's main image (homepage modals and standalone product pages alike), so it
   works automatically for any current or future product without per-product markup. */
.pz-lightbox{
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,12,15,.92);
  opacity: 0; transition: opacity .25s var(--ease);
}
.pz-lightbox.is-open{ display: flex; opacity: 1; }
body.pz-lock-scroll{ overflow: hidden; }

.pz-stage{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.pz-img{
  max-width: 90vw; max-height: 80vh; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  transition: transform .15s var(--ease);
  will-change: transform;
}

.pz-close{
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ease);
}
.pz-close:hover{ background: rgba(255,255,255,.26); }

.pz-nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease);
}
.pz-nav:hover{ background: rgba(255,255,255,.26); }
.pz-nav svg{ width: 22px; height: 22px; }
.pz-prev{ left: 16px; }
.pz-next{ right: 16px; }

.pz-controls{
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.14); border-radius: 100px; padding: 6px;
}
.pz-controls button{
  min-width: 40px; height: 40px; border-radius: 50%; border: none; padding: 0 10px;
  background: transparent; color: #fff; font-size: 1.1rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease);
}
.pz-controls button:hover{ background: rgba(255,255,255,.18); }
.pz-zoom-reset{ font-size: .76rem; }

@media (max-width: 640px){
  .pz-nav{ width: 40px; height: 40px; }
  .pz-nav svg{ width: 18px; height: 18px; }
  .pz-close{ width: 38px; height: 38px; top: 12px; right: 12px; }
  .pz-img{ max-width: 94vw; max-height: 74vh; }
}

.product-modal-info{ padding: 32px 32px 32px 0; display: flex; flex-direction: column; }
.product-modal-info h3, .product-modal-info h1{ font-size: 1.9rem; margin-bottom: 10px; }

/* Standalone product page (products/<slug>/index.html) — same grid/gallery/info classes as the
   homepage modal, just laid out directly on the page instead of inside a floating panel. */
.product-page{ padding-top: calc(var(--header-h) + 40px); }
.product-page-back{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 28px; padding: 10px 4px; margin-left: -4px; min-height: 44px; box-sizing: border-box;
  transition: color .2s var(--ease);
}
.product-page-back:hover{ color: var(--pink-deep); }
.product-page .product-modal-grid{
  background: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(238,79,122,.08);
}
.product-modal-desc{ font-size: .92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 18px; }
.product-modal-features{ list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }

.product-option-group{ margin-bottom: 22px; }
.product-option-label{
  display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 10px;
}

.size-selector{ display: flex; gap: 10px; flex-wrap: wrap; }
.size-option{
  position: relative; flex: 1; min-width: 130px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.size-option:hover{ border-color: var(--pink); }
.size-option.is-selected{ border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 6px 16px rgba(238,79,122,.18); }
.size-option-dim{ font-weight: 600; font-size: .92rem; color: var(--ink); }
.size-option-price{ font-family: var(--font-display); font-weight: 600; color: var(--pink-deep); font-size: 1.05rem; }
.size-option-check{
  position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.size-option.is-selected .size-option-check{ background: var(--pink); border-color: var(--pink); }
.size-option.is-selected .size-option-check::after{
  content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.personalize-input{
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.personalize-input::placeholder{ color: var(--ink-45); }
.personalize-input:focus{ outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(238,79,122,.12); }

/* Cute nudge arrow beside the personalization name input — a sibling in a flex row (never
   inside the input box), so it can never overlap the border, placeholder, or typing area.
   The input shrinks to share the row via flex:1/min-width:0 instead of the arrow overlapping it. */
.name-input-row{ display: flex; align-items: center; gap: 10px; }
.name-input-row .personalize-input{ flex: 1; min-width: 0; }
.name-input-arrow{
  flex: 0 0 auto; display: inline-flex; color: var(--pink); pointer-events: none;
  animation: nameInputArrowNudge 1.35s ease-in-out infinite;
}
@keyframes nameInputArrowNudge{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(-4px, 1px); }
}

/* Live mirror personalization preview — one shared template image (medias/personalization/
   mirror-template.jpg), the typed name is a CSS overlay, never a new image. Appears only once
   the customer starts typing (data-driven per-product via products.json's "mirrorPreview" flag)
   and hides again on empty input. Positioned in % so it stays on the mirror at any screen size;
   font-size uses container query units (cqw) so the name scales with the frame, not the viewport. */
.mirror-preview{ margin: 2px 0 4px; }
.mirror-preview-frame{
  position: relative; width: 100%; max-width: 240px; margin: 0 auto;
  aspect-ratio: 364 / 451; border-radius: 14px; overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 8px 22px rgba(58,37,48,.16);
}
.mirror-preview-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mirror-preview-name{
  position: absolute; left: 53%; top: 70%; transform: translate(-50%, -50%);
  max-width: 82%; display: inline-block; text-align: center; pointer-events: none;
  color: #fff; font-family: var(--mirror-name-font); font-weight: 400;
  font-size: 2.02rem; font-size: 14.3cqw; line-height: 1.2; word-break: break-word;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
/* Independent of .mirror-preview-name on purpose — its left/top are set in px by JS, anchored
   to the name's own measured right edge, so selecting/changing/clearing the emoji can never
   shift the name (no shared centering, no recentering of a combined "name + emoji" group). */
.mirror-preview-emoji{
  position: absolute; top: 70%; left: 53%; transform: translateY(-50%);
  pointer-events: none; opacity: 0; white-space: nowrap;
  color: #fff; font-size: 1.07rem; font-size: 7.58cqw;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Custom handwritten font for the mirror personalization overlay only — replacing the font
   later means swapping this @font-face + the --mirror-name-font value above, nothing else. */
@font-face{
  font-family: 'MirrorNameFont';
  src: url('../medias/personalization/FREESCPT.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.frame-color-selector{ display: flex; flex-wrap: wrap; gap: 10px; }
.frame-color-option{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 100px; border: 1.5px solid var(--line); background: #fff;
  font-size: .92rem; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.frame-color-option:hover{ border-color: var(--pink); transform: translateY(-2px); }
.frame-color-option.is-selected{ border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 6px 16px rgba(238,79,122,.18); }

.symbol-selector{ display: flex; flex-wrap: wrap; gap: 10px; }
.symbol-option{
  width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff;
  font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.symbol-option:hover{ border-color: var(--pink); transform: translateY(-2px); }
.symbol-option.is-selected{ border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 6px 16px rgba(238,79,122,.18); }

.qty-selector{ display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 100px; overflow: hidden; }
.qty-btn{ width: 40px; height: 40px; background: #fff; border: none; font-size: 1.1rem; cursor: pointer; color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease); }
.qty-btn:hover{ background: var(--pink-soft); color: var(--pink-deep); }
.qty-value{ width: 42px; text-align: center; font-weight: 600; font-size: .95rem; }

.product-order-summary{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  background: var(--pink-soft); border-radius: 16px; padding: 14px 18px; margin-bottom: 20px;
  font-size: .86rem; color: var(--ink-soft);
}
.product-order-summary strong{ font-family: var(--font-display); color: var(--ink); font-weight: 600; }
.product-order-total{ font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--pink-deep); }

/* Global delivery fee badge (see DELIVERY_FEE in script.js) — visually secondary to the pink
   price box above it, same badge for every product with zero per-product markup. */
.product-delivery-note{
  display: inline-flex; align-items: center; gap: 6px;
  margin: -12px 0 20px; padding: 7px 14px;
  background: var(--orange-soft); color: #a85c1c;
  border-radius: 12px; font-size: .82rem; font-weight: 600; line-height: 1.3;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .main-nav{ display: none; }
  .header-actions .btn span{ display: none; }
  .nav-toggle{ display: flex; order: 1; }
  .header-row{ position: relative; }
  .brand{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .brand-mark{ height: 60px; }
  .hero-collage-card{ width: 72vw; max-width: 290px; aspect-ratio: 132 / 168; height: auto; }
  .header-actions{ order: 3; margin-left: auto; }
  .feature-grid{ grid-template-columns: 1fr; }
  .feature-img img{ transform: rotate(-2deg); }
  .process-row{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .process-row::before{ display: none; }
  .gallery-strip{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }

  .product-modal{ padding: 0; align-items: flex-end; }
  .product-modal-panel{ max-width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0; }
  .product-modal-grid{ grid-template-columns: 1fr; }
  .product-modal-info{ padding: 8px 24px 28px; }
}

@media (max-width: 640px){
  .section{ padding: 64px 0; }
  .hero-stats{ gap: 24px; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .pc-img{
    aspect-ratio: 3 / 4;
    background: var(--paper);
  }
  /* Cover, not contain: any product photo whose own aspect ratio doesn't match this 3:4 card
     container (portrait, square, landscape — Lobelia's square cover shot included) otherwise
     letterboxes with empty background bands. Cover always fills the container, centered, with
     no distortion — same behavior desktop already uses, applied globally so no future product
     needs a per-product override (this replaces the old Zinnia-only override, now redundant). */
  .pc-img img{ object-fit: cover; object-position: center; }
  .pc-body{ padding: 10px 12px 14px; }
  .pc-body h3{ font-size: .95rem; margin-bottom: 3px; }
  .pc-premium-badge{ font-size: 9px; padding: 3px 8px; margin-bottom: 5px; }
  .pc-body p{ font-size: .78rem; margin-bottom: 8px; }
  .pc-foot{ gap: 5px; }
  .pc-price{ font-size: .78rem; }
  .pc-order{ font-size: 8.5px; padding: 3px 5px; gap: 1px; line-height: 1; }
  .pc-order svg{ width: 7px; height: 7px; }
  .similar-products-grid{
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    gap: 14px; margin: 0 -20px; padding: 0 20px 4px;
  }
  .similar-products-grid::-webkit-scrollbar{ display: none; }
  .similar-products-grid .product-card{ flex: 0 0 46%; min-width: 150px; scroll-snap-align: start; }
  .process-row{ grid-template-columns: 1fr; }
  .gallery-strip{ grid-template-columns: repeat(2,1fr); gap: 12px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom{ flex-direction: column; }
  .header-call{ display: none; }
  .track-card{ flex-basis: 160px; }
}