/* scitru-v3 base — reset, type, buttons, cards, chrome, reveal, a11y prefs. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

/* ---------- Grid overflow guard ----------
   CSS Grid items default to min-width:auto, which lets a child's
   intrinsic content width (long unbroken text, a button, WooCommerce's
   own gallery/table markup) stretch its track past the grid's actual
   available space instead of shrinking to it. This produced two real
   mobile horizontal-scroll bugs (PDP gallery at ~390px, review cards at
   320px) — applied as a blanket reset across every grid container in
   the theme rather than patching each one as it's individually found. */
.pdp > *,
.ing-cards > *,
.benefit-row > *,
.usage-row > *,
.review-summary > *,
.review-list > *,
.xsell-grid > *,
.trust-grid > *,
.contact-grid > *,
.contact-side > *,
.footer-grid > *,
.products > *,
.ing-grid > *,
.insta-grid > *,
.testi-row > *,
form.checkout.woocommerce-checkout > *,
.woocommerce ul.products > * {
  min-width: 0;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--dark-green);
  letter-spacing: -0.01em;
  margin: 0;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dark-green); color: var(--white);
  padding: 8px 16px; z-index: 999;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mint); color: var(--dark-green);
  border: none; padding: 16px 30px; border-radius: 100px;
  font-weight: 700; font-size: 15px; min-height: 48px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary:hover { transform: scale(1.03); box-shadow: 0 10px 28px rgba(116, 197, 161, 0.35); }
.btn-primary:active { transform: scale(0.97); }

.btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dark-green); color: var(--white);
  border: none; padding: 13px 26px; border-radius: 100px;
  font-weight: 600; font-size: 14px; min-height: 44px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-dark:hover { background: #0a4550; }
.btn-dark:active { transform: scale(0.97); }

.btn-ghost {
  color: var(--white); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none;
}

/* ---------- Shared bits ---------- */
.eyebrow {
  color: var(--mint); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px; display: block;
}
.eyebrow--steel { color: var(--steel); }

.section { padding: 100px 32px; }

/* Page hero band used by About, Contact, Cart and Checkout. Lives here
   rather than in woocommerce.css because two of those pages are plain
   templates that never load the WooCommerce stylesheet. The band carries
   the horizontal padding itself and its .wrap drops the inner inset, so
   hero text lines up with the page content below instead of sitting
   32px further in. */
.shop-hero { background: var(--cream); padding: 64px 32px; }
.shop-hero .wrap { padding: 0; }
.shop-hero h1 { font-size: 38px; margin: 8px 0 12px; }
.shop-hero p { color: var(--muted); margin: 0; }

.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: 38px; line-height: 1.15; }
.section-head p { color: var(--muted); font-size: 15.5px; margin-top: 14px; line-height: 1.6; }

/* ---------- Promo banners (PDP top + homepage; images editable in
   wp-admin under "Site Banners") ---------- */
.promo-banner { max-width: 1240px; margin: 0 auto; padding: 24px 32px 0; }
.promo-banner a, .promo-banner picture { display: block; }
.promo-banner img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-rest);
}
/* Shop slot is a full-bleed hero band: edge-to-edge, no card chrome. */
.promo-banner--shop { max-width: none; padding: 0; }
.promo-banner--shop img { border-radius: 0; box-shadow: none; }

.stars { color: var(--mint); font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; }

.tag {
  position: absolute; top: 16px; left: 16px;
  background: var(--dark-green); color: var(--white);
  font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 100px;
}

/* ---------- Trust card / icon (shared: Home, About, Contact) ---------- */
.trust-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-card {
  background: var(--white); border-radius: var(--radius-md);
  padding: 26px 22px; display: flex; gap: 16px; align-items: flex-start;
  box-shadow: var(--shadow-rest);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.trust-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.trust-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--mint-tint); color: var(--dark-green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-head); font-size: 14px; flex-shrink: 0;
}
.trust-card h3 { font-size: 15px; margin-bottom: 4px; }
.trust-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.contact-form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-rest);
}
.contact-side { display: grid; gap: 20px; align-content: start; }
.contact-side .trust-card { border: 1px solid var(--line); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- MetForm (Contact) — restyle default Elementor-widget markup.
   MetForm renders each form's fields through a per-post Elementor CSS file
   (e.g. post-8493.css) enqueued after theme styles; at equal selector
   specificity it wins the cascade purely on load order, so these need
   !important to reliably override it (same pattern as the WC grid fix). */
.contact-form-card .mf-input-wrapper { margin-bottom: 20px; }
.contact-form-card .mf-input-label {
  display: block !important; font-family: var(--font-head) !important; font-weight: 700 !important;
  font-size: 13px !important; color: var(--dark-green) !important; margin-bottom: 8px !important;
}
.contact-form-card .mf-input-required-indicator { color: var(--steel) !important; }
.contact-form-card .mf-input,
.contact-form-card .mf-textarea {
  width: 100% !important; font-family: var(--font-body) !important; font-size: 14px !important; color: var(--black) !important;
  border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important;
  padding: 13px 16px !important; background: var(--white) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form-card .mf-input:focus,
.contact-form-card .mf-textarea:focus {
  outline: none !important; border-color: var(--mint) !important; box-shadow: 0 0 0 3px var(--mint-tint) !important;
}
.contact-form-card .mf-textarea { resize: vertical !important; min-height: 130px !important; }
.contact-form-card .mf-btn-wraper { margin-top: 4px; }
.contact-form-card .metform-btn.metform-submit-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--dark-green) !important; color: var(--white) !important;
  border: none !important; padding: 14px 30px !important; border-radius: 100px !important;
  font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 14px !important; min-height: 48px !important;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.contact-form-card .metform-btn.metform-submit-btn:hover { background: #0a4550 !important; transform: scale(1.02); }
.contact-form-card .mf-main-response-wrap { margin-bottom: 16px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Legal / generic page content ---------- */
.page-plain { max-width: 840px; margin: 0 auto; padding: 64px 32px 100px; }
.page-plain h1 { font-size: 38px; margin-bottom: 24px; }
.page-plain h2 { font-size: 24px; margin: 32px 0 12px; }
.page-plain p, .page-plain li { color: #33403f; font-size: 14.5px; line-height: 1.7; }

/* ---------- Header (dark teal, sticky, shrink) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 48, 55, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.navrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; max-width: 1240px; margin: 0 auto;
  transition: padding 0.3s var(--ease);
}
.site-header.shrink .navrow { padding: 12px 32px; }
.logo img { height: 30px; width: auto; max-width: none; }
.logo--footer img { height: 34px; margin-bottom: 16px; }

.main-nav ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em; transition: color 0.2s;
}
.main-nav a:hover, .main-nav .current-menu-item a { color: var(--mint); }

.navicons { display: flex; align-items: center; gap: 20px; }
.nav-toggle { display: none; background: none; border: none; color: rgba(255,255,255,0.85); width: 44px; height: 44px; align-items: center; justify-content: center; }
.cart-pill {
  background: var(--mint); color: var(--dark-green);
  font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 100px;
  display: inline-flex; gap: 4px; align-items: center; min-height: 36px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cart-pill:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(116, 197, 161, 0.4); }

/* Account link sits beside the cart rather than in the primary menu, so it
   survives whatever the client does to that menu in wp-admin. */
.account-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  color: rgba(255, 255, 255, 0.82); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.02em; transition: color 0.2s;
}
.account-link:hover { color: var(--mint); }
.account-link svg { flex: none; }

.promo-bar { background: var(--dark-green); border-top: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; padding: 8px 0; }
.promo-track {
  display: flex; gap: 48px; white-space: nowrap; width: max-content;
  animation: scitru-scroll 22s linear infinite;
  color: var(--mint); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
}
@keyframes scitru-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Newsletter band ---------- */
.newsletter { background: var(--dark-green); text-align: center; padding: 100px 32px; }
.newsletter h2 { color: var(--white); font-size: 32px; margin-bottom: 14px; }
.newsletter p { color: rgba(255, 255, 255, 0.65); margin: 0 0 32px; }
.nl-form { display: flex; justify-content: center; gap: 12px; max-width: 440px; margin: 0 auto; }
.nl-form input {
  flex: 1; padding: 15px 18px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  color: var(--white); font-family: var(--font-body); font-size: 14px; min-height: 48px;
}
.nl-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.nl-msg { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); margin: 12px 0 0; min-height: 16px; }
.nl-msg.is-error { color: #ff9d90; }
.nl-success { color: var(--mint); font-weight: 600; font-size: 15px; max-width: 440px; margin: 0 auto; }
.nl-success strong { font-family: var(--font-head); letter-spacing: 0.03em; }

/* ---------- First-visit offer popup (shares .offer-popup-form styling
   with the newsletter form; success state swaps in the coupon code). ---------- */
body.no-scroll { overflow: hidden; }
.offer-popup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.offer-popup[hidden] { display: none; }
.offer-popup-backdrop { position: absolute; inset: 0; background: rgba(5, 48, 55, 0.6); backdrop-filter: blur(2px); }
.offer-popup-card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 44px 36px; text-align: center; box-shadow: var(--shadow-hover);
  animation: scitru-popup-in 0.35s var(--ease);
}
@keyframes scitru-popup-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.offer-popup-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 50%; border: none; background: var(--cream); color: var(--dark-green);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.offer-popup-card .eyebrow { justify-content: center; display: flex; }
.offer-popup-card h2 { font-size: 26px; margin: 6px 0 10px; }
.offer-popup-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 26px; }
.offer-popup-form { display: flex; flex-direction: column; gap: 12px; }
.offer-popup-form input {
  width: 100%; padding: 14px 18px; border-radius: 100px;
  border: 1px solid var(--line); font-family: var(--font-body); font-size: 14px;
}
.offer-popup-form input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-tint); }
.offer-popup-form .btn-primary { width: 100%; }
.offer-popup-msg { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; min-height: 16px; }
.offer-popup-msg.is-error { color: #c0392b; }
.offer-code {
  font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: 0.04em;
  color: var(--dark-green); background: var(--mint-tint); border-radius: var(--radius-sm);
  padding: 14px; margin: 0 0 18px; border: 1px dashed var(--mint);
}
.offer-popup-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; }
@media (max-width: 560px) {
  .offer-popup-card { padding: 34px 24px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.6); padding: 70px 32px 32px; font-size: 13.5px; }
.footer-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-grid h4 { color: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: rgba(255, 255, 255, 0.6); }
.footer-grid a:hover { color: var(--mint); }
.footer-blurb { max-width: 280px; line-height: 1.6; }
.footer-bottom { max-width: 1240px; margin: 24px auto 0; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.4); flex-wrap: wrap; gap: 8px; }

/* ---------- Responsive base ---------- */
@media (max-width: 900px) {
  .section { padding: 64px 20px; }
  .shop-hero { padding: 40px 20px; }
  .shop-hero h1 { font-size: 30px; }
  .logo img { height: 26px; }
  .section-head h2 { font-size: 30px; }
  .main-nav ul { display: none; }
  .main-nav.is-open ul {
    display: flex; flex-direction: column;
    /* Sits below the whole header (navrow + marquee), whose measured height
       main.js publishes as --header-h. The z-index is load-bearing: the
       marquee is a later sibling inside the header and its animated track
       makes its own stacking context, so without this the scrolling promo
       text paints straight over the open menu's links. */
    position: fixed; top: var(--header-h, 98px); right: 0; z-index: 10;
    width: min(80vw, 320px); height: calc(100vh - var(--header-h, 98px));
    background: var(--dark-green); padding: 24px; gap: 18px;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3);
  }
  .nav-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nl-form { flex-direction: column; }
  .promo-banner { padding: 20px 20px 0; }
  .promo-banner--shop { padding: 0; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* Logo, menu, account and cart all share one row here — the account link
     drops to its icon so the cart pill keeps its label. */
  .navicons { gap: 12px; }
  .account-link-text { display: none; }
  .promo-banner img { border-radius: var(--radius-sm, 8px); }
  .promo-banner--shop img { border-radius: 0; }
}

/* ---------- Accessibility prefs ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #33403f; --line: #9aa5a4; }
}