/* ==========================================================================
   SEREVA — Design System
   --------------------------------------------------------------------------
   Layered on top of Bootstrap 5.3. Bootstrap handles grid/components;
   this file supplies the brand identity so the site does not read as an
   untouched Bootstrap template.

   Structure of this file:
     1.  Design tokens (colour, type, spacing, radius)
     2.  Base typography
     3.  Layout helpers (sections, bands, containers)
     4.  Buttons & links
     5.  Cards
     6.  Timing language (the brand's signature device)
     7.  Packaging mocks (CSS-drawn cartons — no photography needed)
     8.  Header / navigation
     9.  Footer
     10. Editorial + article styling
     11. Forms
     12. States (loading, empty, error)
     13. Utilities, motion, accessibility
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand palette. Spruce is the primary; honey is the accent used sparingly.
     Indigo is NOT decorative — it is reserved for overnight products only. */
  --sv-spruce:        #1D4B3C;
  --sv-spruce-deep:   #113127;
  --sv-spruce-soft:   #35604F;
  --sv-sage:          #C3D6C6;
  --sv-sage-light:    #E3EDE2;
  --sv-paper:         #F4F6F1;
  --sv-paper-warm:    #FAFBF7;
  --sv-honey:         #E09B2D;
  --sv-honey-soft:    #F6E3BE;
  --sv-indigo:        #2E4159;
  --sv-indigo-soft:   #DDE3EC;
  --sv-ink:           #1B2420;
  --sv-stone:         #5F6B63;
  --sv-line:          #DDE3DA;
  --sv-white:         #FFFFFF;

  /* Type */
  --sv-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sv-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sv-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing rhythm */
  --sv-section-y: 5.5rem;
  --sv-section-y-sm: 3.25rem;

  /* Radius — soft, not pill-shaped everywhere */
  --sv-r-sm: 6px;
  --sv-r-md: 12px;
  --sv-r-lg: 20px;

  --sv-shadow-sm: 0 1px 2px rgba(17, 49, 39, .05), 0 4px 14px rgba(17, 49, 39, .05);
  --sv-shadow-md: 0 2px 6px rgba(17, 49, 39, .06), 0 16px 36px rgba(17, 49, 39, .09);

  /* Bootstrap variable overrides so BS components inherit the brand */
  --bs-primary: #1D4B3C;
  --bs-primary-rgb: 29, 75, 60;
  --bs-body-color: #1B2420;
  --bs-body-bg: #FAFBF7;
  --bs-border-color: #DDE3DA;
  --bs-link-color: #1D4B3C;
  --bs-link-hover-color: #113127;
  --bs-font-sans-serif: "Public Sans", system-ui, sans-serif;
  --bs-border-radius: 12px;
}

/* ---------- 2. BASE TYPOGRAPHY ---------- */
body {
  font-family: var(--sv-body);
  color: var(--sv-ink);
  background: var(--sv-paper-warm);
  font-size: 1.0313rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .sv-display {
  font-family: var(--sv-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--sv-spruce-deep);
}

h1, .sv-h1 { font-size: clamp(2.25rem, 5.2vw, 3.9rem); }
h2, .sv-h2 { font-size: clamp(1.75rem, 3.6vw, 2.65rem); }
h3, .sv-h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4         { font-size: 1.125rem; }

.sv-lead {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  color: var(--sv-stone);
}

/* The eyebrow is set in mono to echo the label panels on medicine packaging. */
.sv-eyebrow {
  font-family: var(--sv-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sv-spruce-soft);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
}
.sv-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--sv-honey);
}
.sv-eyebrow--plain::before { display: none; }

/* Footnote markers and regulatory metadata */
.sv-footnote,
.sv-meta {
  font-family: var(--sv-mono);
  font-size: .74rem;
  line-height: 1.55;
  color: var(--sv-stone);
  letter-spacing: .01em;
}
.sv-footnote sup, sup.sv-mark { color: var(--sv-honey); font-weight: 600; }

/* A packaging-style metadata panel: thin rules, mono type, small caps. */
.sv-label-panel {
  border: 1px solid var(--sv-line);
  border-left: 3px solid var(--sv-spruce);
  background: var(--sv-white);
  border-radius: 0 var(--sv-r-sm) var(--sv-r-sm) 0;
  padding: 1rem 1.15rem;
  font-family: var(--sv-mono);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--sv-stone);
}
.sv-label-panel strong {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-spruce);
  margin-bottom: .3rem;
}

/* ---------- 3. LAYOUT ---------- */
.sv-section { padding: var(--sv-section-y) 0; }
.sv-section--tight { padding: var(--sv-section-y-sm) 0; }
@media (max-width: 767.98px) {
  .sv-section { padding: 3.25rem 0; }
}

.sv-bg-paper  { background: var(--sv-paper); }
.sv-bg-sage   { background: var(--sv-sage-light); }
.sv-bg-spruce { background: var(--sv-spruce); color: rgba(255,255,255,.86); }
.sv-bg-spruce h1, .sv-bg-spruce h2, .sv-bg-spruce h3 { color: var(--sv-white); }
.sv-bg-spruce .sv-eyebrow { color: var(--sv-sage); }
.sv-bg-white  { background: var(--sv-white); }

/* An organic soft shape used behind imagery — replaces the usual gradient blob */
.sv-organic {
  position: relative;
}
.sv-organic::before {
  content: "";
  position: absolute;
  inset: -6% -4% 8% 6%;
  background: var(--sv-sage-light);
  border-radius: 46% 54% 38% 62% / 55% 42% 58% 45%;
  z-index: 0;
}
.sv-organic > * { position: relative; z-index: 1; }

/* Thin rule used to separate editorial blocks */
.sv-rule { height: 1px; background: var(--sv-line); border: 0; opacity: 1; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  font-family: var(--sv-body);
  font-weight: 600;
  letter-spacing: .005em;
  border-radius: 999px;
  padding: .72rem 1.6rem;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-sv {
  background: var(--sv-spruce);
  color: #fff;
  border: 1px solid var(--sv-spruce);
}
.btn-sv:hover, .btn-sv:focus {
  background: var(--sv-spruce-deep);
  border-color: var(--sv-spruce-deep);
  color: #fff;
  box-shadow: var(--sv-shadow-sm);
}
.btn-sv-outline {
  background: transparent;
  color: var(--sv-spruce);
  border: 1px solid var(--sv-spruce);
}
.btn-sv-outline:hover, .btn-sv-outline:focus {
  background: var(--sv-spruce);
  color: #fff;
}
.btn-sv-honey {
  background: var(--sv-honey);
  border: 1px solid var(--sv-honey);
  color: var(--sv-spruce-deep);
}
.btn-sv-honey:hover, .btn-sv-honey:focus { background: #cd8b22; border-color: #cd8b22; color: var(--sv-spruce-deep); }

.btn-sv-light {
  background: #fff;
  color: var(--sv-spruce);
  border: 1px solid var(--sv-line);
}
.btn-sv-light:hover { border-color: var(--sv-spruce); color: var(--sv-spruce-deep); }

.btn-sm { padding: .45rem 1rem; font-size: .85rem; }
.btn-lg { padding: .9rem 2rem; font-size: 1.02rem; }

/* Text link with an animated underline */
.sv-link {
  color: var(--sv-spruce);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--sv-sage);
  padding-bottom: 2px;
  transition: border-color .16s ease;
}
.sv-link:hover { border-color: var(--sv-honey); color: var(--sv-spruce-deep); }

/* ---------- 5. CARDS ---------- */
.sv-card {
  background: var(--sv-white);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sv-shadow-md);
  border-color: var(--sv-sage);
}
.sv-card__body { padding: 1.4rem 1.4rem 1.6rem; }
.sv-card__media { position: relative; background: var(--sv-sage-light); }
.sv-card__media img { width: 100%; height: 210px; object-fit: cover; display: block; }

/* Horizontal card variant so not every row is three identical boxes */
.sv-card--row { display: flex; flex-direction: row; align-items: stretch; }
.sv-card--row .sv-card__media { flex: 0 0 40%; }
.sv-card--row .sv-card__media img { height: 100%; min-height: 190px; }
@media (max-width: 575.98px) {
  .sv-card--row { flex-direction: column; }
  .sv-card--row .sv-card__media { flex: none; }
  .sv-card--row .sv-card__media img { height: 190px; }
}

/* ---------- 6. TIMING LANGUAGE (signature device) ----------
   Relief timing is the real decision a shopper makes, so it is encoded as a
   colour + chip system reused on cards, the finder, compare and detail pages. */
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--sv-mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sv-chip--overnight { background: var(--sv-indigo-soft); color: var(--sv-indigo); border-color: #c9d3e2; }
.sv-chip--fast      { background: var(--sv-honey-soft); color: #8a5c07; border-color: #ecd3a2; }
.sv-chip--gradual   { background: var(--sv-sage-light); color: var(--sv-spruce); border-color: var(--sv-sage); }
.sv-chip--daily     { background: #EAF1F0; color: #2A5B57; border-color: #CBDEDB; }
.sv-chip--child     { background: #FBEFE6; color: #92551F; border-color: #F0D8C4; }
.sv-chip--neutral   { background: var(--sv-paper); color: var(--sv-stone); border-color: var(--sv-line); }

/* Coloured left keyline on product cards, matching the timing chip */
.sv-timing-overnight { border-top: 3px solid var(--sv-indigo); }
.sv-timing-fast      { border-top: 3px solid var(--sv-honey); }
.sv-timing-gradual   { border-top: 3px solid var(--sv-sage); }
.sv-timing-daily     { border-top: 3px solid #6FA8A2; }

/* The rhythm band: a horizontal scale from overnight through to daily support */
.sv-rhythm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  overflow: hidden;
  background: var(--sv-white);
}
.sv-rhythm__seg {
  padding: 1.5rem 1.15rem;
  border-right: 1px solid var(--sv-line);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background .18s ease;
}
.sv-rhythm__seg:last-child { border-right: 0; }
.sv-rhythm__seg:hover { background: var(--sv-paper); color: inherit; }
.sv-rhythm__bar { height: 4px; border-radius: 3px; margin-bottom: 1rem; }
.sv-rhythm__seg h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.sv-rhythm__seg p { font-size: .88rem; color: var(--sv-stone); margin: 0; }
@media (max-width: 767.98px) {
  .sv-rhythm { grid-template-columns: 1fr; }
  .sv-rhythm__seg { border-right: 0; border-bottom: 1px solid var(--sv-line); }
  .sv-rhythm__seg:last-child { border-bottom: 0; }
}

/* ---------- 7. PACKAGING MOCKS (CSS-drawn) ----------
   Fictional cartons built entirely in CSS so the site still looks finished
   if external photography does not load. */
.sv-pack {
  position: relative;
  width: 100%;
  max-width: 230px;
  aspect-ratio: 3 / 4;
  margin-inline: auto;
  border-radius: 10px;
  background: linear-gradient(155deg, #ffffff 0%, #ffffff 58%, #f0f3ee 100%);
  border: 1px solid var(--sv-line);
  box-shadow: var(--sv-shadow-md);
  padding: 1rem .9rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sv-pack::after { /* carton side panel for a little dimension */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 16%;
  background: rgba(17, 49, 39, .05);
  border-left: 1px solid rgba(17, 49, 39, .07);
}
.sv-pack__cap {
  height: 6px; width: 46px; border-radius: 3px;
  background: var(--sv-spruce);
  margin-bottom: .75rem;
}
.sv-pack__brand {
  font-family: var(--sv-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sv-spruce-deep);
  letter-spacing: -.02em;
  line-height: 1;
}
.sv-pack__sub {
  font-family: var(--sv-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sv-stone);
  margin-top: .3rem;
}
.sv-pack__name {
  font-family: var(--sv-display);
  font-size: 1.05rem;
  color: var(--sv-spruce);
  margin-top: auto;
  line-height: 1.2;
}
.sv-pack__format {
  font-family: var(--sv-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-stone);
  border-top: 1px solid var(--sv-line);
  padding-top: .45rem;
  margin-top: .5rem;
  width: 78%;
}
/* Timing-coded band across the carton */
.sv-pack--overnight .sv-pack__cap { background: var(--sv-indigo); }
.sv-pack--overnight { background: linear-gradient(155deg, #fff 0%, #fff 58%, var(--sv-indigo-soft) 100%); }
.sv-pack--fast .sv-pack__cap { background: var(--sv-honey); }
.sv-pack--fast { background: linear-gradient(155deg, #fff 0%, #fff 58%, var(--sv-honey-soft) 100%); }
.sv-pack--gradual { background: linear-gradient(155deg, #fff 0%, #fff 58%, var(--sv-sage-light) 100%); }
.sv-pack--daily .sv-pack__cap { background: #6FA8A2; }
.sv-pack--daily { background: linear-gradient(155deg, #fff 0%, #fff 58%, #E4EFEE 100%); }
.sv-pack--child .sv-pack__cap { background: #C97B3C; }
.sv-pack--child { background: linear-gradient(155deg, #fff 0%, #fff 58%, #FBEFE6 100%); }

.sv-pack--sm { max-width: 130px; }
.sv-pack--lg { max-width: 300px; }

/* ---------- 8. HEADER ---------- */
.sv-announce {
  background: var(--sv-spruce-deep);
  color: rgba(255,255,255,.9);
  font-size: .85rem;
}
.sv-announce a { color: var(--sv-honey); font-weight: 600; text-decoration: none; }
.sv-announce a:hover { text-decoration: underline; }
.sv-announce .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .6;
  font-size: .65rem;
}

.sv-header {
  background: var(--sv-white);
  border-bottom: 1px solid var(--sv-line);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.sv-logo {
  font-family: var(--sv-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--sv-spruce-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
}
.sv-logo__mark {
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 12%;
  background: var(--sv-spruce);
  display: inline-block;
  position: relative;
  align-self: center;
}
.sv-logo__mark::after {
  content: "";
  position: absolute;
  inset: 7px 7px auto auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sv-honey);
}
.sv-logo__tag {
  font-family: var(--sv-mono);
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sv-stone);
}

.sv-nav .nav-link {
  color: var(--sv-ink);
  font-weight: 550;
  font-size: .94rem;
  padding: 1.35rem .85rem;
  border-bottom: 2px solid transparent;
}
.sv-nav .nav-link:hover,
.sv-nav .nav-link:focus,
.sv-nav .nav-link.active {
  color: var(--sv-spruce);
  border-bottom-color: var(--sv-honey);
}
.sv-nav .dropdown-menu {
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  box-shadow: var(--sv-shadow-md);
  padding: .6rem;
  margin-top: 0;
}
.sv-nav .dropdown-item {
  border-radius: var(--sv-r-sm);
  font-size: .92rem;
  padding: .5rem .75rem;
}
.sv-nav .dropdown-item:hover, .sv-nav .dropdown-item:focus {
  background: var(--sv-sage-light);
  color: var(--sv-spruce-deep);
}
.sv-megamenu { min-width: 520px; }
.sv-megamenu__title {
  font-family: var(--sv-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-stone);
  padding: .5rem .75rem .25rem;
}

/* Mobile offcanvas nav */
.sv-offcanvas .accordion-button {
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  padding: .85rem 0;
}
.sv-offcanvas .accordion-button:not(.collapsed) { color: var(--sv-spruce); background: transparent; }
.sv-offcanvas .accordion-item { border: 0; border-bottom: 1px solid var(--sv-line); }
.sv-offcanvas .accordion-body { padding: 0 0 .75rem; }
.sv-offcanvas .accordion-body a {
  display: block;
  padding: .45rem 0 .45rem .5rem;
  color: var(--sv-stone);
  text-decoration: none;
  font-size: .95rem;
}
.sv-offcanvas .accordion-body a:hover { color: var(--sv-spruce); }

/* ---------- 9. FOOTER ---------- */
.sv-footer {
  background: var(--sv-spruce-deep);
  color: rgba(255,255,255,.72);
  font-size: .92rem;
}
.sv-footer h4 {
  color: #fff;
  font-family: var(--sv-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 500;
}
.sv-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.sv-footer a:hover { color: var(--sv-honey); }
.sv-footer ul { list-style: none; padding: 0; margin: 0; }
.sv-footer li { margin-bottom: .5rem; }
.sv-footer__legal {
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.sv-footer__disclaimer {
  background: rgba(0,0,0,.18);
  font-family: var(--sv-mono);
  font-size: .74rem;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
}
.sv-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sv-social a:hover { border-color: var(--sv-honey); }

/* ---------- 10. EDITORIAL ---------- */
.sv-breadcrumb {
  font-size: .84rem;
  font-family: var(--sv-body);
}
.sv-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--sv-stone); }
.sv-breadcrumb a { color: var(--sv-stone); text-decoration: none; }
.sv-breadcrumb a:hover { color: var(--sv-spruce); }
.sv-breadcrumb .active { color: var(--sv-ink); }

.sv-prose { font-size: 1.075rem; line-height: 1.75; }
.sv-prose h2 { margin: 2.6rem 0 1rem; }
.sv-prose h3 { margin: 2rem 0 .75rem; }
.sv-prose p { margin-bottom: 1.15rem; }
.sv-prose ul, .sv-prose ol { margin-bottom: 1.3rem; padding-left: 1.25rem; }
.sv-prose li { margin-bottom: .5rem; }
.sv-prose img { border-radius: var(--sv-r-md); width: 100%; }

.sv-pullquote {
  font-family: var(--sv-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--sv-spruce);
  border-left: 3px solid var(--sv-honey);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2.25rem 0;
}

.sv-toc {
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  padding: 1.25rem;
  background: var(--sv-white);
}
.sv-toc a {
  display: block;
  padding: .35rem 0 .35rem .75rem;
  border-left: 2px solid var(--sv-line);
  color: var(--sv-stone);
  text-decoration: none;
  font-size: .9rem;
}
.sv-toc a:hover, .sv-toc a.active { border-left-color: var(--sv-honey); color: var(--sv-spruce); }
@media (min-width: 992px) { .sv-sticky { position: sticky; top: 110px; } }

/* Journey timeline used on the digestive system page */
.sv-timeline { position: relative; padding-left: 2.4rem; }
.sv-timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: .5rem; bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--sv-sage), var(--sv-honey));
}
.sv-timeline__item { position: relative; padding-bottom: 2.25rem; }
.sv-timeline__item::before {
  content: "";
  position: absolute;
  left: -2.4rem; top: .35rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sv-white);
  border: 2px solid var(--sv-spruce);
}
.sv-timeline__item h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.sv-timeline__time {
  font-family: var(--sv-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-honey);
}

/* Icon tile used across feature strips */
.sv-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--sv-sage-light);
  color: var(--sv-spruce);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.sv-icon--honey { background: var(--sv-honey-soft); color: #8a5c07; }
.sv-icon--indigo { background: var(--sv-indigo-soft); color: var(--sv-indigo); }

/* ---------- 11. FORMS ---------- */
.form-control, .form-select {
  border-radius: var(--sv-r-sm);
  border-color: var(--sv-line);
  padding: .68rem .9rem;
  font-size: .96rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sv-spruce-soft);
  box-shadow: 0 0 0 3px rgba(29, 75, 60, .13);
}
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--sv-spruce); border-color: var(--sv-spruce); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(29, 75, 60, .13); border-color: var(--sv-spruce-soft); }

/* Filter chips on the products page */
.sv-filter { border: 1px solid var(--sv-line); border-radius: var(--sv-r-md); background: #fff; padding: 1.25rem; }
.sv-filter h4 {
  font-family: var(--sv-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-stone);
  margin-bottom: .7rem;
}
.sv-filter__group + .sv-filter__group { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--sv-line); }

/* Product finder option tiles */
.sv-option {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--sv-line);
  background: #fff;
  border-radius: var(--sv-r-md);
  padding: 1.05rem 1.15rem;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
  cursor: pointer;
}
.sv-option:hover { border-color: var(--sv-spruce-soft); transform: translateY(-2px); }
.sv-option.is-selected { border-color: var(--sv-spruce); background: var(--sv-sage-light); }
.sv-option.is-selected .sv-option__dot { background: var(--sv-spruce); border-color: var(--sv-spruce); }
.sv-option.is-selected .sv-option__dot::after { opacity: 1; }
.sv-option__dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sv-line);
  flex: 0 0 auto; margin-top: 2px; position: relative;
}
.sv-option__dot::after {
  content: ""; position: absolute; inset: 4px;
  background: #fff; border-radius: 50%; opacity: 0;
}
.sv-option__title { font-weight: 600; display: block; }
.sv-option__desc { font-size: .87rem; color: var(--sv-stone); }

.progress { height: 6px; background: var(--sv-sage-light); border-radius: 999px; }
.progress-bar { background: var(--sv-spruce); }

/* ---------- 12. STATES ---------- */
.sv-state {
  text-align: center;
  padding: 3.25rem 1.5rem;
  border: 1px dashed var(--sv-line);
  border-radius: var(--sv-r-md);
  background: var(--sv-white);
}
.sv-state__icon { font-size: 2rem; color: var(--sv-spruce-soft); margin-bottom: .75rem; display: block; }
.sv-state h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.sv-state p { color: var(--sv-stone); max-width: 460px; margin: 0 auto 1.25rem; }

.sv-skeleton {
  background: linear-gradient(90deg, #eceee9 25%, #f6f7f4 37%, #eceee9 63%);
  background-size: 400% 100%;
  animation: sv-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--sv-r-sm);
}
@keyframes sv-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Image fallback: applied by main.js when a hotlinked photo fails to load */
.sv-img-fallback {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(140deg, var(--sv-sage) 0%, var(--sv-sage-light) 55%, var(--sv-honey-soft) 100%);
  position: relative;
}
.sv-img-fallback::after {
  content: "\F4E8"; /* bootstrap-icons: flower */
  font-family: "bootstrap-icons";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(29, 75, 60, .32);
}

/* ---------- 13. UTILITIES / MOTION / A11Y ---------- */
.sv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sv-spruce-deep);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 2000;
  border-radius: 0 0 var(--sv-r-sm) 0;
}
.sv-skip:focus { left: 0; color: #fff; }

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

.sv-backtotop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--sv-spruce);
  color: #fff;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1040;
  box-shadow: var(--sv-shadow-md);
}
.sv-backtotop.is-visible { display: inline-flex; }

.sv-cookie {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 1080;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  box-shadow: var(--sv-shadow-md);
  padding: 1.35rem 1.5rem;
  max-width: 880px;
  margin-inline: auto;
}

/* Reveal-on-scroll: subtle, and disabled for reduced-motion users */
.sv-reveal { opacity: 1; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.sv-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .sv-reveal { opacity: 1; transform: none; }
}

/* Comparison table */
.sv-compare-table th, .sv-compare-table td { padding: 1rem; vertical-align: top; border-color: var(--sv-line); }
.sv-compare-table thead th { background: var(--sv-paper); }
.sv-compare-table tbody th {
  font-family: var(--sv-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-stone);
  font-weight: 500;
  width: 180px;
  background: var(--sv-paper-warm);
}

/* Accordion */
.accordion-item { border-color: var(--sv-line); border-radius: var(--sv-r-md) !important; margin-bottom: .6rem; overflow: hidden; }
.accordion-button { font-weight: 600; font-size: 1rem; padding: 1.05rem 1.25rem; }
.accordion-button:not(.collapsed) { background: var(--sv-sage-light); color: var(--sv-spruce-deep); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(29,75,60,.13); border-color: var(--sv-sage); }

/* Search-result highlight */
mark.sv-hl { background: var(--sv-honey-soft); color: inherit; padding: 0 .12em; border-radius: 2px; }

/* Safety notice band */
.sv-notice {
  border: 1px solid var(--sv-line);
  border-left: 4px solid var(--sv-honey);
  background: #FFFBF2;
  border-radius: 0 var(--sv-r-md) var(--sv-r-md) 0;
  padding: 1.1rem 1.3rem;
  font-size: .92rem;
}
.sv-notice--child { border-left-color: #C97B3C; background: #FFF7F1; }
.sv-notice strong { color: var(--sv-spruce-deep); }

/* Hero */
.sv-hero { background: var(--sv-paper); overflow: hidden; }
.sv-hero__img {
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  object-fit: cover;
  border-radius: var(--sv-r-lg);
}
.sv-hero__badge {
  position: absolute;
  bottom: -22px; left: -18px;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  box-shadow: var(--sv-shadow-md);
  padding: .85rem 1.1rem;
  max-width: 230px;
}
@media (max-width: 991.98px) { .sv-hero__badge { position: static; margin-top: 1rem; max-width: none; } }

.sv-page-hero { background: var(--sv-sage-light); padding: 2.75rem 0 3.25rem; }
.sv-page-hero--spruce { background: var(--sv-spruce); }
.sv-page-hero--spruce h1, .sv-page-hero--spruce .sv-lead { color: #fff; }
.sv-page-hero--spruce .sv-lead { color: rgba(255,255,255,.8); }
.sv-page-hero--spruce .sv-breadcrumb a,
.sv-page-hero--spruce .sv-breadcrumb .active { color: rgba(255,255,255,.75); }