/* ===================================================================
   SOMA TIDES — standalone brand site
   Identity from her packaging: deep frosted navy · engraved gold ·
   sand. Cormorant Garamond (display) + Jost (body) + Allura (script).
   Class names kept compatible with the proven shop page (st-*) —
   the identity shift lives in the tokens + primitives below.
   =================================================================== */

/* Open Props easings are loaded via <link> in each page head (parallel fetch
   instead of a render-blocking @import chain behind style.css). */

:root {
  /* Soma Tides palette (sampled from packaging & banner) */
  --sv-ocean:    #232c54;   /* deep frosted-bottle navy — primary text */
  --sv-ocean-2:  #1a2140;
  --sv-navy:     #141a33;
  --sv-navy-d:   #0e1326;
  /* WCAG-calculated ink values (2026-06-10). Originals failed AA as text:
     gold #a9854b on cream #f1eadd = 2.86:1 · taupe #9b8d76 on cream = 2.72:1.
     #7e6133 on cream = 4.82:1 (5.76 on white) · cream on #7e6133 = 4.82:1 (st-add btns)
     #6d5329 on cream = 6.01:1 (hover)         · #75684f on cream = 4.56:1 (5.37 on note paper) */
  --sv-plum:     #7e6133;   /* deep engraved gold — CTAs/links (kept var name for ported markup) */
  --sv-plum-2:   #6d5329;
  --sv-mauve:    #75684f;   /* sand-taupe muted ink */
  --sv-sage:     #d8bc85;   /* soft gold */
  --sv-sage-d:   #c2a15f;
  --sv-cream:    #f1eadd;   /* sand paper — page bg */
  --sv-cream-2:  #f6f1e7;
  --sv-cream-3:  #e7ddc9;
  --sv-ink:      #10142a;

  --gold-grad: linear-gradient(110deg, #b3914f 0%, #dcc18a 45%, #a9854b 100%);

  --font-serif:  "Cormorant Garamond", "Bodoni 72", Garamond, serif;
  --font-sans:   "Jost", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-script: "Allura", cursive;

  --max:         1760px;
  --pad-x:       clamp(1.5rem, 5vw, 5.5rem);
  --section-y:   clamp(5rem, 11vw, 10rem);

  --blob-a:      36% 64% 65% 35% / 40% 38% 62% 60%;
  --blob-b:      62% 38% 35% 65% / 60% 40% 60% 40%;
  --blob-c:      52% 48% 70% 30% / 50% 70% 30% 50%;

  --radius:      14px;
  --radius-lg:   22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--sv-cream);
  color: var(--sv-ocean);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
em  { font-style: italic; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Keyboard focus — visible ring everywhere, sage on dark/gold surfaces */
:focus-visible {
  outline: 2px solid var(--sv-plum);
  outline-offset: 2px;
}
.st-trust :focus-visible, .st-bundle :focus-visible, .cta-final :focus-visible,
.footer :focus-visible, .topbar__cart:focus-visible, .st-checkout:focus-visible,
.st-add:focus-visible, .st-filter.is-active:focus-visible {
  outline-color: var(--sv-sage);
}

/* ===================================================================
   PRIMITIVES
   =================================================================== */

.pill {
  display: inline-flex; align-self: flex-start;
  padding: 0.4rem 1rem;
  border: 1px solid color-mix(in srgb, var(--sv-plum) 45%, transparent);
  border-radius: 999px;
  color: var(--sv-plum);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--sv-cream-2) 60%, transparent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.25s var(--ease-2, ease), color 0.25s, border-color 0.25s, transform 0.15s;
}
.btn--primary { background: var(--sv-ocean); color: var(--sv-sage); }
.btn--primary:hover { background: var(--sv-navy); color: var(--sv-cream); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost { border: 1px solid color-mix(in srgb, var(--sv-ocean) 40%, transparent); color: var(--sv-ocean); }
.btn--ghost:hover { border-color: var(--sv-ocean); background: color-mix(in srgb, var(--sv-ocean) 6%, transparent); }
.btn--lg { padding: 1rem 2.4rem; }

.link { color: var(--sv-plum); font-weight: 500; letter-spacing: 0.04em; }
.link span { transition: transform 0.25s; display: inline-block; }
.link:hover span { transform: translateX(4px); }

.section-head { display: flex; flex-direction: column; gap: 0.9rem; max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.section-title em { font-style: italic; color: var(--sv-plum); }
.section-lede { font-weight: 300; color: color-mix(in srgb, var(--sv-ocean) 80%, var(--sv-cream)); max-width: 56ch; }

/* ===================================================================
   TOPBAR
   =================================================================== */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.7rem var(--pad-x);
  background: color-mix(in srgb, var(--sv-cream) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--sv-plum) 18%, transparent);
}
.topbar__brand img { height: 46px; width: auto; }
.topbar__nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 880px) { .topbar__nav { display: inline-flex; } }
.topbar__nav a {
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sv-ocean);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}
.topbar__nav a:hover { color: var(--sv-plum); border-color: var(--sv-plum); }
.topbar__cart {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  background: var(--sv-ocean); color: var(--sv-sage);
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.25s;
}
.topbar__cart:hover { background: var(--sv-navy); }
.topbar__cart-count {
  display: grid; place-items: center;
  min-width: 1.35rem; height: 1.35rem; padding-inline: 0.25rem;
  border-radius: 999px; background: var(--sv-sage); color: var(--sv-ocean);
  font-size: 0.74rem; font-weight: 600;
}

/* ===================================================================
   FOOTER
   =================================================================== */

.footer { background: var(--sv-navy); color: color-mix(in srgb, var(--sv-cream) 85%, transparent); }
.footer__inner {
  max-width: var(--max); margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad-x) 1.6rem;
  display: flex; flex-direction: column; gap: 2.2rem;
}
.footer__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
}
.footer__logo { height: 72px; width: auto; filter: brightness(0) invert(0.92) sepia(0.25) saturate(2.4) hue-rotate(10deg); opacity: .95; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer__nav a { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.footer__nav a:hover { opacity: 1; color: var(--sv-sage); }
.footer__tagline { font-family: var(--font-script); font-size: 1.5rem; color: var(--sv-sage); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--sv-sage) 22%, transparent);
  padding-top: 1.4rem;
  font-size: 0.8rem; font-weight: 300; opacity: 0.85;
}
.footer__bottom a { border-bottom: 1px solid color-mix(in srgb, var(--sv-sage) 40%, transparent); }
.footer__nex { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__nex img { height: 14px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }

/* Footer newsletter */
.footer__news {
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  text-align: center;
  width: min(540px, 100%); margin-inline: auto;
}
.footer__news-copy {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.15rem; letter-spacing: 0.02em;
  color: var(--sv-sage);
}
.footer__news-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: 100%; }
.footer__news-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.footer__news-input {
  flex: 1; min-width: 230px;
  padding: 0.72rem 1.25rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sv-sage) 38%, transparent);
  background: color-mix(in srgb, var(--sv-cream) 7%, transparent);
  color: var(--sv-cream); font: inherit; font-size: 0.92rem; font-weight: 300;
}
.footer__news-input::placeholder { color: color-mix(in srgb, var(--sv-cream) 50%, transparent); }
.footer__news-input:focus { outline: 2px solid var(--sv-sage); outline-offset: 1px; }
.footer__news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.footer__news-btn {
  padding: 0.72rem 1.8rem; border-radius: 999px;
  background: var(--sv-sage); color: var(--sv-navy);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.25s;
}
.footer__news-btn:hover { background: var(--sv-cream); }
.footer__news-btn:disabled { opacity: 0.6; cursor: wait; }
.footer__news-msg { font-size: 0.85rem; font-weight: 300; min-height: 1.2em; }
.footer__news-msg.is-ok { color: var(--sv-sage); }
.footer__news-msg.is-err { color: #e7b9a9; }

/* ===================================================================
   FAQ
   =================================================================== */

.faq { padding: var(--section-y) var(--pad-x); max-width: 880px; margin-inline: auto; }
.faq__list { margin-top: 2.6rem; display: grid; gap: 0.8rem; }
.faq details {
  background: var(--sv-cream-2);
  border: 1px solid color-mix(in srgb, var(--sv-plum) 16%, transparent);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::after { content: "+"; color: var(--sv-plum); font-size: 1.3rem; transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-top: 0.7rem; font-weight: 300; color: color-mix(in srgb, var(--sv-ocean) 82%, var(--sv-cream)); }
.faq details a { color: var(--sv-plum); border-bottom: 1px solid color-mix(in srgb, var(--sv-plum) 40%, transparent); }

/* ===================================================================
   FINAL CTA
   =================================================================== */

.cta-final {
  background: radial-gradient(120% 160% at 50% 0%, var(--sv-ocean) 0%, var(--sv-navy) 70%);
  color: var(--sv-cream);
}
.cta-final__inner {
  max-width: 880px; margin-inline: auto; text-align: center;
  padding: var(--section-y) var(--pad-x);
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.cta-final__script { font-family: var(--font-script); font-size: clamp(2rem, 4vw, 3rem); color: var(--sv-sage); transform: rotate(-2deg); }
.cta-final__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1;
}
.cta-final__title em { font-style: italic; color: var(--sv-sage); }
.cta-final__lede { font-weight: 300; opacity: 0.85; }
.cta-final .btn--primary { background: var(--sv-sage); color: var(--sv-navy); }
.cta-final .btn--primary:hover { background: var(--sv-cream); }

/* ===================================================================
   LEGAL PAGES (terms / privacy / shipping-returns)
   =================================================================== */

.legal {
  max-width: 880px; margin-inline: auto;
  padding: clamp(8rem, 16vh, 11rem) var(--pad-x) var(--section-y);
}
.legal__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.08;
  margin: 0.9rem 0 0.4rem;
}
.legal__title em { font-style: italic; color: var(--sv-plum); }
.legal__updated { font-size: 0.85rem; font-weight: 300; color: var(--sv-mauve); margin-bottom: 1.6rem; }
.legal h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.4rem; line-height: 1.2;
  margin: 2.4rem 0 0.6rem;
}
.legal p { font-weight: 300; color: color-mix(in srgb, var(--sv-ocean) 88%, var(--sv-cream)); max-width: 68ch; margin-bottom: 0.7rem; }
.legal ul { display: grid; gap: 0.5rem; margin: 0.4rem 0 1rem; }
.legal li {
  display: flex; gap: 0.7rem; align-items: baseline;
  font-weight: 300; color: color-mix(in srgb, var(--sv-ocean) 88%, var(--sv-cream)); max-width: 68ch;
}
.legal li::before { content: "✦"; color: var(--sv-plum); font-size: 0.7rem; flex: none; }
.legal li b { font-weight: 500; }
.legal a { color: var(--sv-plum); border-bottom: 1px solid color-mix(in srgb, var(--sv-plum) 40%, transparent); }
.legal a:hover { border-color: var(--sv-plum); }
.legal__callout {
  margin: 1rem 0 1.2rem;
  padding: 1.2rem 1.5rem;
  background: var(--sv-cream-2);
  border: 1px solid color-mix(in srgb, var(--sv-plum) 24%, transparent);
  border-radius: var(--radius);
}
.legal__callout p:last-child { margin-bottom: 0; }
.legal table {
  width: 100%; border-collapse: collapse;
  margin: 1rem 0 1.2rem;
  font-size: 0.95rem;
}
.legal th, .legal td {
  text-align: left; padding: 0.65rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sv-plum) 22%, transparent);
}
.legal th {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem;
  border-bottom-color: color-mix(in srgb, var(--sv-plum) 45%, transparent);
}
.legal td { font-weight: 300; }
@media (max-width: 560px) {
  .legal th, .legal td { padding: 0.55rem 0.5rem; font-size: 0.86rem; }
}