/* ============================================================
   225 Face Care — Foundations
   Colors + Type + Spacing + Motion tokens.
   Source of truth for the design system.
   ============================================================ */

/* ---------- Fonts ----------------------------------------- */

/* PP Editorial New — replaces Cormorant Garamond as the display serif.
   Three weights × roman/italic, mapped onto the 300 / 400 / 700 slots
   the rest of the system uses. */
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype");
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-UltralightItalic.otf") format("opentype");
  font-weight: 200 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Regular.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Italic.otf") format("opentype");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultrabold.otf") format("opentype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-UltraboldItalic.otf") format("opentype");
  font-weight: 600 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ----------------------------------------- */

:root {
  /* Primary palette */
  --color-brand-navy:        #2B3270;
  --color-deep-navy:         #1A2055;
  --color-soft-sand:         #F0EAE1; /* primary site bg + product photo bg */
  --color-warm-cream:        #F8F4ED; /* card / secondary bg */
  --color-pure-white:        #FFFFFF;
  --color-editorial-black:   #1C1C2E; /* Eridan-style uppercase H2 */

  /* Product accent colors */
  --accent-oleogel:          #5F61ED; /* Deep Cleansing Oleogel — violet */
  --accent-fresh-gel:        #003DC4; /* Fresh Cleansing Gel — indigo */
  --accent-essence:          #001683; /* Hydra³ Essence — brand navy */
  --accent-lift:             #001683; /* Hydra³ Lift — deep lift navy */
  --accent-lift-em:          #4DD9FF; /* Hydra³ Lift EM — light blue */
  --accent-calm:             #FF42B0; /* Hydra³ Calm+Lift — soft pink */
  --accent-pure:             #26FF9C; /* Hydra³ Pure — mint */
  --accent-bright-code:      #FF784A; /* Bright Code — bright orange */

  /* Text */
  --text-dark:               #1C1C2E;
  --text-medium:             #4A4A5A;
  --text-light:              #8A8A98;
  --text-on-dark:            #F0EAE1;

  /* UI */
  --border-light:            #E2E2EC;
  --border-soft:             #D6CFC4; /* on sand */
  --color-success:           #5BA887;
  --color-warning:           #E8A55B;
  --color-danger:            #C9534A;

  /* Type families */
  --font-display: "PP Editorial New", "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-hero:        76px; /* H1 display */
  --fs-h2-bold:     48px; /* Eridan UPPERCASE section header */
  --fs-h2-refined:  52px; /* Light serif H2 alt */
  --fs-h3:          32px;
  --fs-h4:          22px;
  --fs-body-lg:     17px;
  --fs-body:        15px;
  --fs-body-sm:     13px;
  --fs-overline:    11px;
  --fs-caption:     12px;

  /* Line-heights */
  --lh-hero:    1.00;
  --lh-h2:      1.10;
  --lh-h3:      1.20;
  --lh-h4:      1.30;
  --lh-body:    1.75;
  --lh-body-lg: 1.85;
  --lh-tight:   1.40;

  /* Letter spacing */
  --ls-hero:        -0.02em;
  --ls-bold-h2:      0.04em;
  --ls-overline:     0.22em;
  --ls-button:       0.10em;
  --ls-nav:          0.06em;

  /* Spacing scale */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   32px;
  --sp-2xl:  48px;
  --sp-3xl:  64px;
  --sp-4xl:  96px;
  --sp-5xl:  128px;

  /* Layout */
  --content-max-width: 1280px;
  --gutter-desktop: 32px;
  --gutter-mobile:  24px;
  --container-pad-desktop: 64px;
  --container-pad-mobile:  24px;
  --section-py-desktop: 120px;
  --section-py-mobile:  64px;

  /* Radii — deliberately sharp / editorial */
  --radius-xs: 2px;   /* buttons */
  --radius-sm: 4px;   /* cards, inputs */
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--border-light);
  --border-on-sand:  1px solid var(--border-soft);

  /* Shadows — barely-there, editorial */
  --shadow-soft:   0 1px 2px rgba(28, 28, 46, 0.04), 0 2px 8px rgba(28, 28, 46, 0.04);
  --shadow-lift:   0 4px 12px rgba(28, 28, 46, 0.06), 0 12px 32px rgba(28, 28, 46, 0.06);
  --shadow-hero:   0 24px 64px rgba(28, 28, 46, 0.10);

  /* Motion */
  --ease-editorial: cubic-bezier(.19, 1, .22, 1);
  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   600ms;
}

/* ---------- Base / semantic ------------------------------- */

html {
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--color-soft-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 300; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--color-brand-navy);
  margin: 0;
}

/* Eridan-style bold uppercase section header */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-bold-h2);
  text-transform: uppercase;
  color: var(--color-brand-navy);
  margin: 0;
}

/* Refined alt H2 — light serif, sentence case */
.h2-refined {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2-refined);
  line-height: var(--lh-h2);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-brand-navy);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-brand-navy);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--color-brand-navy);
  margin: 0;
}

p { margin: 0; }

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 300; }
.body    { font-size: var(--fs-body);    line-height: var(--lh-body);    font-weight: 300; }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-tight);   font-weight: 400; }

.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-brand-navy);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  color: var(--text-light);
}

/* Display italic — for nuance in a serif title (e.g. "Oni kažu, mi *vidimo*.") */
.italic-emphasis {
  font-style: italic;
  font-weight: 300;
}

/* ---------- Utilities ------------------------------------- */

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--container-pad-desktop);
  padding-right: var(--container-pad-desktop);
}
@media (max-width: 760px) {
  .container { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
}

.section { padding-top: var(--section-py-desktop); padding-bottom: var(--section-py-desktop); }
@media (max-width: 760px) { .section { padding-top: var(--section-py-mobile); padding-bottom: var(--section-py-mobile); } }

.bg-sand   { background: var(--color-soft-sand); }
.bg-cream  { background: var(--color-warm-cream); }
.bg-white  { background: var(--color-pure-white); }
.bg-navy   { background: var(--color-brand-navy); color: var(--text-on-dark); }
.bg-deep   { background: var(--color-deep-navy);  color: var(--text-on-dark); }

/* ============================================================
   RESPONSIVE LAYER  (single source of responsive truth)
   The components use React inline styles, so these rules target
   the serialized style attribute via [style*="…"] and win with
   !important. Breakpoints: 1024 (tablet), 900 (portrait tablet),
   760 (phone), 520 (small phone).
   ============================================================ */

/* ---- Mobile navigation (shared <Nav>) ---- */
.nav-burger { display: none; }
.nav-mobile-panel { display: none; }
@media (max-width: 900px) {
  .site-header .nav-links { display: none !important; }
  .site-header .nav-burger { display: inline-flex !important; }
  .site-header .nav-inner { grid-template-columns: 1fr auto !important; gap: 16px !important; }
  .nav-mobile-panel { flex-direction: column; padding: 4px 24px 22px; }
  .nav-mobile-panel[data-open="true"] {
    display: flex;
    background: rgba(240,234,225,0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(214,207,196,0.6);
  }
}

/* ===================== TABLET  (≤1024) ===================== */
@media (max-width: 1024px) {
  [style*="margin: 0px auto"] { padding-left: 44px !important; padding-right: 44px !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="font-size: 76px"] { font-size: 56px !important; }
  [style*="font-size: 64px"] { font-size: 48px !important; }
}

/* ============== PORTRAIT TABLET / LARGE PHONE (≤900) ============== */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr"]   { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.4fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.2fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr 1.4fr"] { grid-template-columns: 1fr !important; }
  /* big content-split gaps become vertical gaps once stacked */
  [style*="gap: 96px"] { gap: 44px !important; }
  [style*="gap: 88px"] { gap: 44px !important; }
  [style*="gap: 80px"] { gap: 40px !important; }
}

/* ===================== PHONE  (≤760) ===================== */
@media (max-width: 760px) {
  [style*="margin: 0px auto"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* Vertical rhythm compaction (horizontal already handled above) */
  [style*="padding: 200px 64px 160px"] { padding-top: 116px !important; padding-bottom: 72px !important; }
  [style*="padding: 200px 64px 140px"] { padding-top: 116px !important; padding-bottom: 64px !important; }
  [style*="padding: 180px 64px 100px"] { padding-top: 112px !important; padding-bottom: 56px !important; }
  [style*="padding: 180px 64px"]       { padding-top: 72px !important;  padding-bottom: 72px !important; }
  [style*="padding: 160px 64px"]       { padding-top: 72px !important;  padding-bottom: 72px !important; }
  [style*="padding: 140px 64px"]       { padding-top: 60px !important;  padding-bottom: 60px !important; }
  [style*="padding: 120px 64px"]       { padding-top: 60px !important;  padding-bottom: 60px !important; }
  [style*="padding: 96px 64px 32px"]   { padding-top: 52px !important;  padding-bottom: 28px !important; }
  [style*="padding: 80px 64px 140px"]  { padding-top: 40px !important;  padding-bottom: 60px !important; }
  [style*="padding: 56px 64px 140px"]  { padding-top: 32px !important;  padding-bottom: 60px !important; }
  [style*="padding: 80px 64px 60px"]   { padding-top: 40px !important;  padding-bottom: 40px !important; }
  [style*="padding: 40px 64px 80px"]   { padding-top: 28px !important;  padding-bottom: 48px !important; }
  /* hero <section> top-pad (shop / kontakt) */
  [style*="padding-top: 180px"] { padding-top: 104px !important; }

  /* Grids → single column (4-col stays 2-up for product / category cards) */
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { gap: 16px !important; }

  /* 5-step routine / philosophy timelines → 2-up, hide connecting rails */
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 12px !important; }
  [style*="left: 10%"], [style*="left: 8%"] { display: none !important; }

  /* gaps */
  [style*="gap: 56px"] { gap: 36px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }

  /* Display type down-scaling */
  [style*="font-size: 76px"] { font-size: 40px !important; }
  [style*="font-size: 64px"] { font-size: 36px !important; }
  [style*="font-size: 52px"] { font-size: 31px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 36px"] { font-size: 26px !important; }
  [style*="font-size: 32px"] { font-size: 25px !important; }
  [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size: 26px"] { font-size: 21px !important; }

  /* FAQ answer indentation collapses on phone */
  .faq-answer-body { padding-left: 0 !important; padding-right: 0 !important; }
  [style*="padding-left: 72px"] { padding-left: 0 !important; }
}

/* ===================== SMALL PHONE  (≤520) ===================== */
@media (max-width: 520px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }
  /* review carousel cards */
  [style*="width: 420px"] { width: 78vw !important; }
}