/* ============================================================
   GLACÉ — The Cold Sculpt Ritual
   global.css · Design System / Style Foundation
   ------------------------------------------------------------
   HARMONISATION RULES (read before building):
   1. Colour balance 60 / 30 / 10
      · 60%  Frost base (page background, whitespace)
      · 30%  Midnight ink (text, structure, footer, CTAs)
      · 10%  Sky accent (icons, dividers, small highlights) — use it RARELY
   2. Page rhythm: DARK hero → LIGHT body → DARK footer.
      The page opens and closes on Midnight; the brand bookends every scroll.
   3. Warmth comes from PHOTOGRAPHY (warm skin on cool backgrounds),
      not from the palette. Oat is the only warm token, used ≤10%.
   4. Type: Playfair Display = display/headings only. Montserrat = everything else.
   5. Mobile-first: base styles target ~390px. Scale up at breakpoints.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ------------------------------------------------------------
   1 · DESIGN TOKENS
   ------------------------------------------------------------ */
:root{
  /* --- Colour: core cold scale --- */
  --midnight:  #1C2A45;   /* ink · hero · CTA · footer */
  --marine:    #33517E;   /* primary blue · links · headings accent */
  --sky:       #7FA6CE;   /* accent · icons · dividers (10% max) */
  --ice:       #D8E4F0;   /* field · alternating section bg · chips */
  --frost:     #F3F6FB;   /* base · page background */
  --white:     #FFFFFF;   /* surfaces · cards · product cutouts */

  /* --- Colour: warm balance (sparingly) --- */
  --oat:       #EDE6DA;   /* warmth · gifting section */
  --silver:    #C6D0DB;   /* foil / packaging cue */

  /* --- Colour: text --- */
  --text:      #2A3340;   /* body copy */
  --text-muted:#5E7091;   /* secondary copy, captions */
  --text-on-dark: #C6D0DB;/* body copy on Midnight */
  --heading:   #1C2A45;   /* headings on light */

  /* --- Colour: utility --- */
  --line:      #D3DED6;   /* hairlines, borders */
  --line-dark: #35476A;   /* hairlines on Midnight */
  --gold:      #C9A24B;   /* review stars only */
  --focus:     #7FA6CE;   /* focus ring */

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* fluid type scale (mobile → desktop) */
  --fs-display: clamp(2.2rem, 8.5vw, 3.4rem);  /* hero H1 */
  --fs-h2:      clamp(1.55rem, 5.5vw, 2.3rem);
  --fs-h3:      clamp(1.15rem, 3.6vw, 1.45rem);
  --fs-lead:    clamp(1rem, 2.6vw, 1.12rem);
  --fs-body:    1rem;        /* 16px */
  --fs-sm:      0.875rem;    /* 14px */
  --fs-xs:      0.75rem;     /* 12px */
  --fs-eyebrow: 0.6875rem;   /* 11px */

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --ls-eyebrow: 0.28em;   /* wide tracking for uppercase labels = "expensive" */
  --ls-label:   0.14em;
  --ls-wordmark:0.22em;   /* GLACÉ logotype */

  /* weights */
  --w-light:300; --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;

  /* section vertical padding (mobile → desktop) */
  --section-y: clamp(3.25rem, 9vw, 5.5rem);

  /* --- Radius --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* --- Shadows (navy-tinted, soft, premium) --- */
  --shadow-sm: 0 2px 8px rgba(28,42,69,.06);
  --shadow-md: 0 10px 30px rgba(28,42,69,.10);
  --shadow-lg: 0 24px 60px rgba(28,42,69,.16);
  --shadow-bar:0 -8px 24px rgba(28,42,69,.10);

  /* --- Layout --- */
  --container: 1120px;
  --container-pad: clamp(1.25rem, 5vw, 2rem);

  /* --- Motion --- */
  --ease: cubic-bezier(.4,.14,.3,1);
  --dur: .28s;
}

/* ------------------------------------------------------------
   2 · RESET / BASE
   ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--w-reg);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--frost);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:var(--marine); text-decoration:none; transition:color var(--dur) var(--ease); }
a:hover{ color:var(--midnight); }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; }

/* ------------------------------------------------------------
   3 · TYPOGRAPHY
   ------------------------------------------------------------ */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--w-med); color:var(--heading); line-height:var(--lh-tight); }
h1{ font-size:var(--fs-display); letter-spacing:-.01em; }
h2{ font-size:var(--fs-h2); line-height:var(--lh-snug); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-snug); }
p{ max-width:66ch; }

.lead{ font-size:var(--fs-lead); color:var(--text-muted); line-height:var(--lh-snug); }
.eyebrow{
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:var(--w-semi);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--sky);
}
.label{
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:var(--w-semi);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted);
}
.wordmark{
  font-family:var(--font-display); font-weight:var(--w-semi);
  letter-spacing:var(--ls-wordmark); color:var(--midnight);
}
.serif{ font-family:var(--font-display); }
em,.italic{ font-style:italic; }

/* ------------------------------------------------------------
   4 · LAYOUT
   ------------------------------------------------------------ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad); }
.section{ padding-block:var(--section-y); }
.stack > * + *{ margin-top:var(--space-4); }          /* vertical rhythm helper */
.center{ text-align:center; }
.measure{ max-width:60ch; }

/* section surfaces — drive the 60/30/10 + dark→light→dark rhythm */
.section--frost{ background:var(--frost); color:var(--text); }
.section--white{ background:var(--white); color:var(--text); }
.section--ice{   background:var(--ice);   color:var(--text); }
.section--oat{   background:var(--oat);   color:var(--text); }   /* warm block: guarantee/gifting */
.section--dark{  background:var(--midnight); color:var(--text-on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--frost); }
.section--dark .eyebrow{ color:var(--sky); }
.section--dark a{ color:var(--sky); }

/* responsive two-column (image + text). Mobile = stacked, desktop = side by side */
.split{ display:grid; gap:var(--space-6); }
@media (min-width:820px){ .split{ grid-template-columns:1fr 1fr; align-items:center; gap:var(--space-8); } }

/* ------------------------------------------------------------
   5 · BUTTONS
   ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--w-semi);
  letter-spacing:.02em; line-height:1;
  padding:1rem 1.75rem; border:1.5px solid var(--midnight); border-radius:var(--r-pill);
  background:var(--midnight); color:var(--frost);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{ background:var(--marine); border-color:var(--marine); color:var(--frost); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--light{ background:var(--frost); color:var(--midnight); border-color:var(--frost); }
.btn--light:hover{ background:var(--white); border-color:var(--white); color:var(--midnight); }
.btn--outline{ background:transparent; color:var(--midnight); border-color:var(--midnight); }
.btn--outline:hover{ background:var(--midnight); color:var(--frost); }
.btn--block{ display:flex; width:100%; }
.btn--lg{ padding:1.15rem 2rem; font-size:1rem; }

/* ------------------------------------------------------------
   6 · COMPONENTS
   ------------------------------------------------------------ */
/* cards */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--space-5); }
.card--soft{ box-shadow:var(--shadow-md); border-color:transparent; }

/* image tile (product/gallery — the "floating on frost" look) */
.tile{ background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.tile--frost{ background:var(--frost); }

/* chips / trust pills */
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--frost); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.55rem 1rem; font-size:var(--fs-xs); font-weight:var(--w-semi); color:var(--midnight);
  white-space:nowrap;
}

/* badge (e.g. MOST LOVED) */
.badge{
  display:inline-block; background:var(--midnight); color:var(--frost);
  font-size:.625rem; font-weight:var(--w-semi); letter-spacing:.12em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:var(--r-pill);
}

/* rating stars */
.stars{ color:var(--gold); letter-spacing:2px; font-size:var(--fs-sm); }

/* colour swatch (variant selector) */
.swatch{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); display:inline-block; cursor:pointer; }
.swatch[aria-checked="true"]{ outline:2px solid var(--midnight); outline-offset:2px; }

/* selectable option (kit selector 1 vs 2) */
.option{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:.95rem 1.15rem; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.option[aria-checked="true"]{ border:2px solid var(--midnight); background:var(--ice); }

/* hairline divider */
.divider{ height:1px; background:var(--line); border:0; }
.section--dark .divider{ background:var(--line-dark); }

/* horizontal swipe row (mobile carousels: tools, gallery, reviews, UGC) */
.hscroll{ display:flex; gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ scroll-snap-align:start; flex:0 0 auto; }

/* accordion (FAQ) */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  width:100%; background:none; border:0; padding:1rem 0; text-align:left;
  font-weight:var(--w-semi); color:var(--heading); font-size:var(--fs-body); }
.accordion-panel{ padding-bottom:1rem; color:var(--text-muted); font-size:var(--fs-sm); }

/* bars */
.announcement{ background:var(--midnight); color:var(--frost); text-align:center;
  font-size:var(--fs-xs); letter-spacing:.04em; padding:.7rem 1rem; }
.header{ position:sticky; top:0; z-index:50; background:rgba(243,246,251,.96);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.buybar{ position:sticky; bottom:0; z-index:55; background:var(--white);
  border-top:1px solid var(--line); box-shadow:var(--shadow-bar);
  display:flex; align-items:center; gap:var(--space-4); padding:.75rem 1rem; }
.buybar .btn{ flex:1; }
.footer{ background:#141F33; color:var(--text-on-dark); }

/* price display */
.price{ font-family:var(--font-display); color:var(--midnight); }
.price--lg{ font-size:clamp(1.8rem,6vw,2.2rem); }

/* ------------------------------------------------------------
   7 · FORMS (light — inputs, checkout fields)
   ------------------------------------------------------------ */
input,select,textarea{
  width:100%; font:inherit; color:var(--text);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:.85rem 1rem; transition:border-color var(--dur) var(--ease);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--marine); }

/* ------------------------------------------------------------
   8 · UTILITIES
   ------------------------------------------------------------ */
.text-muted{ color:var(--text-muted); }
.text-marine{ color:var(--marine); }
.text-center{ text-align:center; }
.bg-frost{ background:var(--frost); } .bg-ice{ background:var(--ice); }
.bg-dark{ background:var(--midnight); color:var(--text-on-dark); }
.mt-2{ margin-top:var(--space-2);} .mt-4{ margin-top:var(--space-4);} .mt-6{ margin-top:var(--space-6);}
.hide-desktop{ } .hide-mobile{ display:none; }
@media (min-width:820px){ .hide-desktop{ display:none; } .hide-mobile{ display:revert; } }

/* ------------------------------------------------------------
   9 · ACCESSIBILITY
   ------------------------------------------------------------ */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}