/* ============================================
   BETTER PLACE SUPPLEMENTS — DESIGN TOKENS
   ============================================

   HOW TO CUSTOMIZE:
   ─────────────────────────────────────────────
   CHANGE BRAND COLOR  → edit --primary & 4 variants below it
   CHANGE FONT         → edit @import URL + --font-body / --font-heading
   CHANGE LIGHT AREAS  → edit --bg-page, --bg-light, --bg-light-soft
   CHANGE DARK AREAS   → edit --bg-dark, --bg-dark-2, --bg-black
   CHANGE ALL TEXT     → edit --text, --text-soft, --text-muted
   CHANGE BUTTONS      → edit the BUTTONS block
   CHANGE ANIMATIONS   → edit --reveal-* variables

   ============================================ */

/* ── FONT IMPORT ─────────────────────────────
   1. Change the Google Fonts URL below
   2. Update --font-body and/or --font-heading
   That's it — all type updates site-wide.
   ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');

:root {

  /* ════════════════════════════════════════
     BRAND PRIMARY COLOR
     Change these 5 lines to re-theme the
     entire site instantly.
     ════════════════════════════════════════ */
  --primary:          #0D3B5E;   /* main brand color */
  --primary-dark:     #082840;   /* darker — depth, hover */
  --primary-deeper:   #041820;   /* deepest — hero orbs, overlays */
  --primary-light:    #1A5A8A;   /* lighter — hover accents */
  --primary-lighter:  #2272A8;   /* lightest — labels on dark bg */

  /* ════════════════════════════════════════
     AMAZON (separate — rarely needs changing)
     ════════════════════════════════════════ */
  --amazon:           #FF9900;
  --amazon-hover:     #E8890A;
  --amazon-text:      #111111;
  --amazon-shadow:    0 8px 24px rgba(255, 153, 0, 0.35);

  /* ════════════════════════════════════════
     OPTIONAL ACCENT
     ════════════════════════════════════════ */
  --accent:           #C9A84C;
  --accent-light:     #E8C878;

  /* ════════════════════════════════════════
     BACKGROUNDS
     Edit these to control light vs dark feel
     of each section type.
     ════════════════════════════════════════ */
  --bg-page:          #F5F2EE;   /* overall page background */
  --bg-light:         #FFFFFF;   /* cards, light section bg */
  --bg-light-soft:    #FAF8F5;   /* slightly off-white sections */
  --bg-dark:          #111111;   /* dark hero sections */
  --bg-dark-2:        #1A1A1A;   /* slightly lighter dark */
  --bg-dark-3:        #222222;   /* subtle dark variation */
  --bg-black:         #0A0A0A;   /* near-black — manifesto etc */

  /* ════════════════════════════════════════
     TEXT
     ════════════════════════════════════════ */
  --text:             #111111;   /* primary body text */
  --text-soft:        #444444;   /* secondary text */
  --text-muted:       #888888;   /* placeholder / captions */
  --text-white:       #FFFFFF;
  --text-on-dark:     rgba(255, 255, 255, 0.65);
  --text-on-dark-soft:rgba(255, 255, 255, 0.45);
  --text-on-dark-dim: rgba(255, 255, 255, 0.25);

  /* ════════════════════════════════════════
     BORDERS & OVERLAYS
     ════════════════════════════════════════ */
  --border:           rgba(255, 255, 255, 0.08);  /* on dark bg */
  --border-light:     rgba(0, 0, 0, 0.08);        /* on light bg */
  --border-card:      rgba(0, 0, 0, 0.06);
  --overlay:          rgba(10, 10, 10, 0.65);

  /* ════════════════════════════════════════
     FONTS
     ════════════════════════════════════════ */
  --font-body:        'Montserrat', sans-serif;
  --font-heading:     'Montserrat', sans-serif;
  --font-mono:        'Courier New', monospace;

  /* ════════════════════════════════════════
     TYPE SCALE
     ════════════════════════════════════════ */
  --font-size-root:    16px;
  --line-height:       1.6;
  --line-height-tight: 1.1;
  --line-height-loose: 1.75;

  --text-hero:         clamp(52px, 7vw, 96px);
  --text-display:      clamp(40px, 6vw, 72px);
  --text-h1:           clamp(40px, 6vw, 72px);
  --text-h2:           clamp(32px, 4vw, 52px);
  --text-h3:           clamp(22px, 3vw, 32px);
  --text-h4:           18px;
  --text-h5:           15px;
  --text-h6:           13px;
  --text-lg:           18px;
  --text-base:         16px;
  --text-sm:           14px;
  --text-xs:           13px;
  --text-label:        11px;
  --text-badge:        10px;
  --text-caption:      12px;

  /* ════════════════════════════════════════
     FONT WEIGHTS
     ════════════════════════════════════════ */
  --weight-thin:       300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* ════════════════════════════════════════
     LETTER SPACING
     ════════════════════════════════════════ */
  --tracking-tight:    -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.25em;
  --tracking-label:    0.25em;
  --tracking-badge:    0.12em;
  --tracking-btn:      0.1em;

  /* ════════════════════════════════════════
     SPACING
     ════════════════════════════════════════ */
  --section-pad:       100px;
  --section-pad-sm:    60px;
  --container-max:     1280px;
  --container-pad:     40px;
  --gap-xs:            8px;
  --gap-sm:            16px;
  --gap-md:            24px;
  --gap-lg:            40px;
  --gap-xl:            60px;
  --gap-2xl:           80px;

  /* ════════════════════════════════════════
     BORDER RADIUS
     ════════════════════════════════════════ */
  --radius-xs:         2px;
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         16px;
  --radius-xl:         24px;
  --radius-pill:       100px;
  --radius-circle:     50%;

  /* ════════════════════════════════════════
     SHADOWS
     ════════════════════════════════════════ */
  --shadow-sm:         0 2px 12px rgba(0, 0, 0, 0.12);
  --shadow-md:         0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-lg:         0 20px 60px rgba(0, 0, 0, 0.28);
  --shadow-primary:    0 8px 32px rgba(13, 59, 94, 0.4);
  --shadow-primary-lg: 0 20px 60px rgba(13, 59, 94, 0.3);

  /* ════════════════════════════════════════
     BUTTONS
     Change sizing, radius, weight here.
     ════════════════════════════════════════ */
  --btn-pad-y:         14px;
  --btn-pad-x:         32px;
  --btn-pad-y-sm:      9px;
  --btn-pad-x-sm:      20px;
  --btn-font-size:     13px;
  --btn-font-size-sm:  11px;
  --btn-weight:        700;
  --btn-weight-strong: 800;
  --btn-tracking:      var(--tracking-btn);
  --btn-radius:        var(--radius-sm);
  --btn-border:        2px;
  --btn-gap:           10px;

  /* ════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ════════════════════════════════════════ */
  --ease-fast:         0.2s ease;
  --ease-med:          0.4s ease;
  --ease-slow:         0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:       0.5s cubic-bezier(0.23, 1, 0.32, 1);

  /* Scroll reveal — change these to adjust
     all reveal animations at once */
  --reveal-distance:   30px;
  --reveal-duration:   0.7s;
  --reveal-ease:       ease;
}

/* ════════════════════════════════════════════
   RESPONSIVE TOKEN OVERRIDES
   ════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --section-pad: 80px; --container-pad: 28px; }
}
@media (max-width: 768px) {
  :root { --section-pad: 60px; --container-pad: 20px; --text-lg: 16px; }
}
@media (max-width: 480px) {
  :root { --section-pad: 48px; --container-pad: 16px; }
}

/* ════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: var(--font-size-root); }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  background-color: var(--bg-page);
  color: var(--text);
  line-height: var(--line-height);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img    { max-width: 100%; height: auto; display: block; }
a      { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }

/* ════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-bold); }
h5 { font-size: var(--text-h5); font-weight: var(--weight-bold); }
h6 { font-size: var(--text-h6); font-weight: var(--weight-bold); }

.section-label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 12px;
}
.section-label--light { color: var(--primary-lighter); }

.section-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
}
.section-subtitle {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-loose);
  color: var(--text-muted);
  max-width: 560px;
  margin-top: var(--gap-sm);
}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  border: var(--btn-border) solid transparent;
  transition: all var(--ease-med);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--text-white); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-primary); }

.btn-amazon { background: var(--amazon); color: var(--amazon-text); border-color: var(--amazon); font-weight: var(--btn-weight-strong); }
.btn-amazon:hover { background: var(--amazon-hover); border-color: var(--amazon-hover); transform: translateY(-2px); box-shadow: var(--amazon-shadow); }
.btn-amazon svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-outline { background: transparent; color: var(--text-white); border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--text-white); }

.btn-outline-dark { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-dark:hover { background: var(--primary); color: var(--text-white); }

.btn-sm { padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm); font-size: var(--btn-font-size-sm); }

/* ════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: var(--text-badge);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: rgba(13, 59, 94, 0.08);
  color: var(--primary);
  border: 1px solid rgba(13, 59, 94, 0.15);
}

/* ════════════════════════════════════════════
   DIVIDER
   ════════════════════════════════════════════ */
.divider { width: 48px; height: 3px; background: var(--primary); margin: 20px 0; border-radius: var(--radius-xs); }
.divider--center { margin: 20px auto; }

/* ════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ════════════════════════════════════════════
   PAGE HERO (inner pages)
   ════════════════════════════════════════════ */
.page-hero {
  background: var(--bg-dark);
  padding: 140px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, var(--primary-dark) 0%, transparent 70%);
  opacity: 0.8;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--text-display); color: var(--text-white); margin-bottom: var(--gap-sm); }
.page-hero p  { font-size: var(--text-lg); color: var(--text-on-dark); max-width: 520px; margin: 0 auto; }

/* ════════════════════════════════════════════
   NOISE OVERLAY
   ════════════════════════════════════════════ */
.noise-overlay { position: relative; }
.noise-overlay::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 1; opacity: 0.4;
}

/* ════════════════════════════════════════════
   PRODUCT CARD — shared across home + shop
   ════════════════════════════════════════════ */
.product-card {
  background: var(--bg-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-card);
  transition: transform 0.35s var(--ease-slow), box-shadow 0.35s var(--ease-slow), border-color 0.35s ease;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  word-break: break-word;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* ── Image wrap — fixed square, clips everything inside ── */
.product-card__image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: var(--bg-light-soft);
  flex-shrink: 0;
}

/* Real product image */
.product-card__real-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s var(--ease-slow);
  z-index: 1;
}
.product-card:hover .product-card__real-img {
  transform: scale(1.04);
}

/* Placeholder — fills entire wrap, shown when no image or image fails */
.product-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  z-index: 0;
}
.product-card__placeholder-icon {
  font-size: 48px;
  opacity: 0.45;
}
.product-card__placeholder-name {
  font-size: 14px;
  font-weight: var(--weight-extrabold);
  color: var(--text);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.product-card__placeholder-dose {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

/* Best seller badge */
.product-card__best-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--primary);
  color: var(--text-white);
  font-size: 9px;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* Card body */
.product-card__body {
  padding: 20px 20px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-card__category {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card__name {
  font-size: 18px;
  font-weight: var(--weight-extrabold);
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}
.product-card__tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.product-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.product-card__capsules {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: var(--bg-light-soft);
  color: var(--text-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
}
.product-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-card__footer .btn {
  width: 100%;
  justify-content: center;
  font-size: 11px;
  padding: 11px 16px;
}