/* Sattva 2026 — brand tokens & components. Mobile-first. */

:root {
  --sattva-navy: #132465;
  --sattva-orange: #ff5300;
  --sattva-sky: #cae5ff;
  --sattva-sand: #f3e3ce;
  --sattva-blue: #76c1ff;
  --sattva-coral: #ff8e61;
  --sattva-periwinkle: #85a8ff;
  --sattva-text: #1a2340;
  --sattva-bg-alt: #fdfbf8;
  --sattva-border: #eef1f8;
  --sattva-radius: 16px;
  --sattva-shadow: 0 12px 32px rgba(19, 36, 101, 0.08);
  --sattva-ease: 200ms ease-out;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--sattva-text);
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, h4, .site-title {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--sattva-navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }

a { color: var(--sattva-navy); transition: color var(--sattva-ease); }
a:hover { color: var(--sattva-orange); }

/* Buttons */
.button, .wp-block-button__link, .single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button.alt {
  background: var(--sattva-orange);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 0.9em 1.8em;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: background var(--sattva-ease), transform var(--sattva-ease);
}
.button:hover, .woocommerce a.button:hover, .single_add_to_cart_button:hover {
  background: var(--sattva-navy);
  color: #fff;
  transform: translateY(-1px);
}
.sattva-btn--outline {
  background: transparent;
  color: var(--sattva-navy);
  box-shadow: inset 0 0 0 2px var(--sattva-navy);
}

/* Announcement bar */
.sattva-announce {
  background: var(--sattva-navy);
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: 8px 16px;
}

/* Product cards */
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--sattva-border);
  border-radius: var(--sattva-radius);
  padding: 16px;
  transition: box-shadow var(--sattva-ease), transform var(--sattva-ease);
  position: relative;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--sattva-shadow);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product img {
  border-radius: calc(var(--sattva-radius) - 6px);
  background: var(--sattva-bg-alt);
}
.woocommerce ul.products li.product .price {
  color: var(--sattva-navy);
  font-weight: 600;
}

/* Badges */
.sattva-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.sattva-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.sattva-badge--navy { background: var(--sattva-navy); color: #fff; }
.sattva-badge--coral { background: var(--sattva-coral); color: var(--sattva-navy); }
.sattva-badge--sky { background: var(--sattva-sky); color: var(--sattva-navy); }
.woocommerce span.onsale {
  background: var(--sattva-orange);
  border-radius: 999px;
  font-weight: 600;
}

/* Trust row + supplement note (single product) */
.sattva-trust { list-style: none; margin: 1em 0; padding: 0; font-size: 0.85rem; }
.sattva-trust li { padding-left: 1.4em; position: relative; margin-bottom: 4px; }
.sattva-trust li::before { content: '✓'; color: var(--sattva-orange); position: absolute; left: 0; font-weight: 700; }
.sattva-supplement-note {
  font-size: 0.75rem;
  color: #5a6285;
  border-top: 1px solid var(--sattva-border);
  padding-top: 0.8em;
  margin-top: 1.2em;
}

/* Sections */
.sattva-section { padding: 56px 0; }
.sattva-section--sand { background: var(--sattva-sand); }
.sattva-section--sky { background: var(--sattva-sky); }
.sattva-section--navy { background: var(--sattva-navy); color: #fff; }
.sattva-section--navy h2, .sattva-section--navy h3 { color: #fff; }

/* Goal icon row */
.sattva-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sattva-goals a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border-radius: var(--sattva-radius);
  background: var(--sattva-bg-alt); border: 1px solid var(--sattva-border);
  font-size: 0.85rem; text-align: center;
  transition: background var(--sattva-ease);
}
.sattva-goals a:hover { background: var(--sattva-sky); }
.sattva-goals svg { width: 32px; height: 32px; stroke: var(--sattva-periwinkle); }

/* Reviews stars */
.woocommerce .star-rating span::before, .woocommerce p.stars a { color: var(--sattva-orange); }

/* Footer */
.sattva-footer, footer.site-footer { background: var(--sattva-navy); color: #d8def5; }
.sattva-footer a, footer.site-footer a { color: #fff; }
.sattva-footer a:hover, footer.site-footer a:hover { color: var(--sattva-coral); }

/* Scroll reveal (add .sattva-reveal via theme/JS; falls back gracefully) */
@media (prefers-reduced-motion: no-preference) {
  .sattva-reveal { opacity: 0; transform: translateY(8px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
  .sattva-reveal.is-visible { opacity: 1; transform: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .sattva-goals { grid-template-columns: repeat(2, 1fr); }
  .single_add_to_cart_button { width: 100%; }
  /* Sticky add-to-cart bar */
  .sattva-sticky-atc {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--sattva-border);
    padding: 10px 16px; display: flex; gap: 12px; align-items: center;
  }
}
@media (min-width: 769px) {
  .sattva-section { padding: 96px 0; }
  .sattva-goals { grid-template-columns: repeat(8, 1fr); }
  .sattva-sticky-atc { display: none; }
}

/* ===== Homepage components (Sattva 2026) ===== */
.sattva-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sattva-full { width: 100vw; margin-left: calc(50% - 50vw); }
.sattva-hero { background: var(--sattva-sand); position: relative; overflow: hidden; }
.sattva-hero--navy { background: var(--sattva-navy); }
.sattva-hero .sattva-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.sattva-kicker { color: var(--sattva-coral); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; font-family: 'Poppins', sans-serif; }
.sattva-hero h1.sattva-shout { text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; margin: 0 0 10px; }
.sattva-hero--navy h1.sattva-shout { color: #fff; }
.sattva-hero h1.sattva-shout span { color: var(--sattva-orange); }
.sattva-hero .sattva-sub { font-size: 1.02rem; max-width: 46ch; margin: 0 0 14px; }
.sattva-hero--navy .sattva-sub { color: #c3cdf2; }
.sattva-heroprice { display: inline-block; background: var(--sattva-coral); color: var(--sattva-navy); font-weight: 600; font-family: 'Poppins', sans-serif; border-radius: 999px; padding: 6px 16px; margin: 0 0 16px; font-size: .95rem; }
.sattva-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.sattva-btn { display: inline-block; background: var(--sattva-orange); color: #fff !important; border-radius: 12px; padding: .8em 1.7em; font-weight: 500; text-decoration: none; transition: background var(--sattva-ease); }
.sattva-btn:hover { background: #0e1b4d; }
.sattva-hero--navy .sattva-btn--ghost { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px #fff; }
.sattva-hero--navy .sattva-btn--ghost:hover { background: #fff; color: var(--sattva-navy) !important; }
.sattva-heronote { font-size: .75rem; color: #8f9ac9; margin-top: 14px; }
.sattva-heroart { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.sattva-blob { position: absolute; inset: 4% 8%; background: var(--sattva-sand); border-radius: 50%; }
.sattva-hero--navy .sattva-heroart img { mix-blend-mode: multiply; max-height: 300px; position: relative; }
.sattva-motto { background: var(--sattva-sand); text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--sattva-navy); padding: 14px 20px; font-size: 1.02rem; }
.sattva-sec-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.sattva-sec-head p { color: #5a6285; margin: 4px 0 0; }
.sattva-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sattva-cat { border-radius: var(--sattva-radius); padding: 26px 22px; min-height: 140px; display: flex; flex-direction: column; justify-content: end; position: relative; overflow: hidden; border: 1px solid var(--sattva-border); background: var(--sattva-bg-alt); text-decoration: none; transition: transform var(--sattva-ease), box-shadow var(--sattva-ease); }
.sattva-cat:hover { transform: translateY(-3px); box-shadow: var(--sattva-shadow); }
.sattva-cat::before { content: ''; position: absolute; top: -30px; right: -30px; width: 110px; height: 110px; border-radius: 50%; opacity: .55; background: var(--c, var(--sattva-sky)); }
.sattva-cat h3 { font-size: 1.02rem; margin: 0; position: relative; }
.sattva-cat span { font-size: .8rem; color: #5a6285; position: relative; }
.sattva-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sattva-pillar h3 { color: var(--sattva-coral); font-size: .98rem; margin: 0 0 6px; }
.sattva-pillar p { font-size: .86rem; color: #c3cdf2; margin: 0; }
.sattva-tbadges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.sattva-tbadge { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .78rem; color: var(--sattva-navy); background: var(--sattva-bg-alt); border: 1px solid var(--sattva-border); border-radius: var(--sattva-radius); padding: 16px 10px; }
.sattva-tbadge svg { width: 24px; height: 24px; stroke: var(--sattva-orange); fill: none; stroke-width: 1.8; }
.sattva-newsletter { background: var(--sattva-sky); }
.sattva-newsletter .sattva-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 900px) {
  .sattva-hero .sattva-wrap { grid-template-columns: 1fr; text-align: center; }
  .sattva-ctas { justify-content: center; }
  .sattva-heroart { min-height: 240px; }
  .sattva-cats, .sattva-pillars { grid-template-columns: repeat(2, 1fr); }
  .sattva-tbadges { grid-template-columns: repeat(2, 1fr); }
  .sattva-newsletter .sattva-wrap { grid-template-columns: 1fr; }
}

/* ===== v1.2: sand pattern hero, 3D product, motto navy ===== */
.sattva-hero--pattern { background-color: var(--sattva-sand); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22200%22%20viewBox%3D%22770%20300%20460%20620%22%3E%3Cg%20fill%3D%22%23ff5300%22%20fill-opacity%3D%220.07%22%3E%3Cpath%20d%3D%22M%20850%20708%20C%20851%20641%20907%20586%20975%20587%20L%20975%20587%20C%201044%20587%201099%20642%201099%20710%22%2F%3E%3Cpath%20d%3D%22M%201077%20448%20C%201092%20514%201049%20579%20983%20594%20C%20916%20608%20849%20567%20835%20501%22%2F%3E%3Cpath%20d%3D%22M%201021%20465%20L%20998%20474%20L%20973%20474%20L%20950%20464%20L%20933%20446%20L%20924%20423%20L%20924%20399%20L%20934%20376%20L%20952%20359%20L%20975%20350%20L%201000%20351%20L%201023%20360%20L%201040%20378%20L%201050%20401%20L%201049%20426%20L%201039%20448%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 150px 200px; }
.sattva-hero--pattern h1.sattva-shout { color: var(--sattva-navy); }
.sattva-hero--pattern .sattva-sub { color: #4a5170; }
.sattva-hero--pattern .sattva-heronote { color: #8a7a5f; }
.sattva-hero--pattern .sattva-btn--ghost { background: transparent; color: var(--sattva-navy) !important; box-shadow: inset 0 0 0 2px var(--sattva-navy); }
.sattva-hero--pattern .sattva-btn--ghost:hover { background: var(--sattva-navy); color: #fff !important; }
.sattva-hero--pattern .sattva-blob { background: #fff; }
.sattva-hero--pattern .sattva-heroart img { mix-blend-mode: multiply; max-height: 300px; position: relative; filter: drop-shadow(0 34px 38px rgba(19,36,101,0.35)) drop-shadow(0 6px 12px rgba(19,36,101,0.18)); transform: perspective(900px) rotateY(-10deg) rotateX(2deg); transition: transform 300ms ease-out; }
.sattva-hero--pattern .sattva-heroart:hover img { transform: perspective(900px) rotateY(-4deg); }
.sattva-motto { background: var(--sattva-navy); color: #fff; }

/* ===== v1.4: always-visible promo code panel at checkout ===== */
.woocommerce-form-coupon-toggle { display: none !important; }
form.checkout_coupon.woocommerce-form-coupon { display: block !important; border: 2px solid var(--sattva-sky); background: var(--sattva-bg-alt); border-radius: var(--sattva-radius); padding: 22px !important; margin-bottom: 28px; }
form.checkout_coupon.woocommerce-form-coupon::before { content: "Have a promo code? Enter it here \2014 your discount is applied before payment."; display: block; font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--sattva-navy); margin-bottom: 12px; font-size: 1.02rem; }
form.checkout_coupon .form-row { margin-bottom: 0; }
form.checkout_coupon button { background: var(--sattva-orange) !important; color: #fff !important; border-radius: 10px !important; }