/* ============================================================
   STHERB — Promotions (permanent /promotions/ page)
   Scoped to template-promotions-redesign.php
   Depends on homepage-redesign.css (tokens, .sr-btn, product cards),
   blog-redesign.css (related cards) and faq-redesign.css (accordion).

   Specificity note: every rule that sets color or padding on an element
   that also carries .sr-container, or on a bare h1/h2/h3, is prefixed with
   .stherb-redesign-home — homepage-redesign.css styles those broadly and
   wins ties on specificity regardless of load order.
   ============================================================ */

/* =============================================================================
   SEASONAL THEMES
   A theme is one block of custom properties, nothing else. The template puts
   `sr-promo-theme-<name>` on .sr-promo-scope, which wraps ONLY the page content
   (never the header, footer or cart drawer), so a repaint can never leak into
   the shared site chrome. Every reused component on this page is written against
   these same tokens, so a theme re-skins product cards, blog cards, the FAQ
   accordion and the add-to-cart buttons for free.

   NEW CAMPAIGN? Add a block below and point $sr_promo['theme'] at it.
   ========================================================================== */

.sr-promo-scope {
  background: var(--bg);
  color: var(--ink);
  /* Defaults for the theme-only tokens, so an unthemed page still renders. */
  --promo-cta: var(--primary);
  --promo-cta-ink: #FFFFFF;
  --promo-gold: #C79A4B;
  --promo-gold-soft: #F5E9D2;
  --promo-gold-ink: #7A5A18;
  --promo-hero-grad: var(--bg);
  --promo-motif: 0;
}

/* ---- august-refresh: cool botanical (aqua/mint) + warm gold accents ---- */
.sr-promo-theme-august-refresh {
  --bg: #EDF5F2;
  --surface: #FFFFFF;
  --soft: #DDECE7;
  --ink: #1A2E2A;
  --muted: #5A6E69;          /* 4.9:1 on --bg; the site's warm --muted is only 3.8:1 here */
  --border: #CFE2DC;
  --accent: #17756B;
  --accent-soft: #E2F0EC;    /* lightened from #D6EAE5 so accent text clears 4.5:1 */
  --dark: #12332F;
  --primary: #17756B;        /* .sr-add-btn reads --primary */

  --promo-cta: #17756B;
  --promo-cta-ink: #FFFFFF;
  --promo-cta-hover: #135F58;
  --promo-gold: #C79A4B;
  --promo-gold-soft: #F5E9D2;
  --promo-gold-ink: #7A5A18; /* gold is a background colour only -- #C79A4B on white is 2.6:1 */
  --promo-hero-grad:
    radial-gradient(880px 420px at 82% -12%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(620px 380px at 4% 104%, rgba(199, 154, 75, 0.10), transparent 60%),
    linear-gradient(180deg, #EDF5F2 0%, #DDECE7 100%);
  --promo-motif: 1;
}

/* ---------- shared bits ---------- */
.stherb-redesign-home .sr-promo-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.stherb-redesign-home .sr-promo-chip {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.stherb-redesign-home .sr-promo-btn-dark {
  background: var(--promo-cta);
  color: var(--promo-cta-ink);
  border-color: var(--promo-cta);
}
.stherb-redesign-home .sr-promo-btn-dark:hover {
  background: var(--promo-cta-hover, var(--ink));
  border-color: var(--promo-cta-hover, var(--ink));
  color: var(--promo-cta-ink);
}

/* Astra/Woo's .add_to_cart_button beats a single page class — pin the colour. */
.stherb-redesign-home .sr-promo-add.add_to_cart_button { color: #fff !important; }

.stherb-redesign-home .sr-promo-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(34, 30, 24, 0.28);
}
.stherb-redesign-home .sr-promo-btn-ghost:hover { border-color: var(--ink); }

.stherb-redesign-home .sr-promo-section-head { text-align: center; margin-bottom: 40px; }
.stherb-redesign-home .sr-promo-section-head h2 { font-size: 40px; }
.stherb-redesign-home .sr-promo-section-head h3 { font-size: 30px; }
/* 700, not 620: the exclusion note is 661px wide and 620 left "promotion."
   stranded on its own line under a centred paragraph. */
.stherb-redesign-home .sr-promo-section-sub {
  max-width: 700px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.stherb-redesign-home .sr-promo-fineprint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.stherb-redesign-home .sr-promo-fineprint-center { text-align: center; margin-top: 28px; }

/* ---------- hero ---------- */
.stherb-redesign-home .sr-promo-hero {
  padding: 64px 0 72px;
  background: var(--promo-hero-grad);
  position: relative;
  overflow: hidden;
}
/* Decorative botanical sprig — inline SVG, no asset request. Hidden when the
   active theme doesn't ask for it, and on phones where it would crowd the copy. */
.stherb-redesign-home .sr-promo-hero-motif {
  position: absolute;
  top: -34px;
  right: -46px;
  width: 340px;
  height: 340px;
  color: var(--accent);
  opacity: calc(0.16 * var(--promo-motif));
  pointer-events: none;
}
.stherb-redesign-home .sr-promo-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;   /* keep the copy above the motif */
  z-index: 1;
}
.stherb-redesign-home .sr-promo-h1 { font-size: 60px; margin-bottom: 18px; }
.stherb-redesign-home .sr-promo-hero-body {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 520px;
  margin: 0 0 28px;
}
.stherb-redesign-home .sr-promo-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.stherb-redesign-home .sr-promo-hero-note { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }

.stherb-redesign-home .sr-promo-countdown {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.stherb-redesign-home .sr-promo-count-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 6px 12px;
  min-width: 74px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stherb-redesign-home .sr-promo-count-val {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stherb-redesign-home .sr-promo-count-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.stherb-redesign-home .sr-promo-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
.stherb-redesign-home .sr-promo-media-frame {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  aspect-ratio: 7 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.stherb-redesign-home .sr-promo-media-icon { width: 92px; height: 92px; }

/* ---------- featured pair ---------- */
/* Needs its own top padding, unlike the other `0 0 84px` sections: the hero's
   72px bottom padding carries the hero's gradient, so it ends at the colour
   seam and the card's top border landed exactly on it (measured gap = 0). */
.stherb-redesign-home .sr-promo-pair-section { padding: 84px 0; }
.stherb-redesign-home .sr-promo-pair-card {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}
.stherb-redesign-home .sr-promo-pair-media {
  background: var(--soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 28px;
  align-content: center;
}
/* The thumb is a portrait frame, not a shrink-wrap around the image. The media
   column is always shorter than the copy column, so square thumbs left ~120px
   of dead mint above and below them (measured). A 3:4 frame with the packshot
   centred fills that space; it works only because the product photos are
   white-background packshots, so the extra frame height is seamless. */
.stherb-redesign-home .sr-promo-pair-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.stherb-redesign-home .sr-promo-pair-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.stherb-redesign-home .sr-promo-pair-body { padding: 40px 44px; }
.stherb-redesign-home .sr-promo-pair-body h2 { font-size: 34px; margin-bottom: 14px; }
.stherb-redesign-home .sr-promo-pair-text { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.stherb-redesign-home .sr-promo-pair-names { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 18px; }

.stherb-redesign-home .sr-promo-pair-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.stherb-redesign-home .sr-promo-price-now {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
}
.stherb-redesign-home .sr-promo-price-was { color: var(--muted); text-decoration: line-through; font-size: 16px; }
.stherb-redesign-home .sr-promo-save {
  background: var(--promo-gold-soft);
  color: var(--promo-gold-ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stherb-redesign-home .sr-promo-pair-btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* Two equal columns rather than two stacked full-width slabs. The labels are
   product names, so they are not fixed length — 1 1 0 keeps the pair balanced
   whatever the campaign swaps in, and the smaller type buys ~50px of slack
   before a longer name wraps. */
.stherb-redesign-home .sr-promo-pair-btns .sr-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  padding: 13px 14px;
}

/* ---------- products showcase ---------- */
.stherb-redesign-home .sr-promo-shop { padding-top: 0; }
.stherb-redesign-home .sr-promo-shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.stherb-redesign-home .sr-promo-shop-head h2 { font-size: 40px; }
.stherb-redesign-home .sr-promo-ship-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 700;
}
.stherb-redesign-home .sr-promo-ship-badge svg { width: 17px; height: 17px; flex: none; }

/* ---------- tier ladder ---------- */
.stherb-redesign-home .sr-promo-tiers-section { padding: 84px 0; background: var(--soft); }
.stherb-redesign-home .sr-promo-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stherb-redesign-home .sr-promo-tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stherb-redesign-home .sr-promo-tier-hero {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
/* gold hairline on the highlighted tier — the one warm note in a cool section.
   Every tier reserves the rule's space, only the hero paints it: when the rule
   lived on -hero alone it pushed that card's text down and the three kicker
   labels sat at 2425/2442/2425. */
.stherb-redesign-home .sr-promo-tier::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  margin-bottom: 4px;
}
.stherb-redesign-home .sr-promo-tier-hero::before { background: var(--promo-gold); }
.stherb-redesign-home .sr-promo-tier-qty {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.stherb-redesign-home .sr-promo-tier-reward {
  font-family: 'Cormorant', Georgia, serif;
  font-size: 25px;
  line-height: 1.25;
  color: var(--ink);
}
/* Pinned to the card floor so the three notes share a baseline. The tiers hold
   1 or 2 lines of reward copy, so without this the cards ended with 79/31/48px
   of uneven white below the text. */
.stherb-redesign-home .sr-promo-tier-note { font-size: 13px; color: var(--muted); margin-top: auto; }

/* ---------- gifts ---------- */
.stherb-redesign-home .sr-promo-gifts-section { padding: 84px 0; }
.stherb-redesign-home .sr-promo-gifts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.stherb-redesign-home .sr-promo-gifts-copy h2 { font-size: 38px; margin-bottom: 14px; }
.stherb-redesign-home .sr-promo-gifts-copy p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 24px; max-width: 460px; }
.stherb-redesign-home .sr-promo-gift-cards { display: flex; flex-direction: column; gap: 14px; }
.stherb-redesign-home .sr-promo-gift-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 20px;
}
.stherb-redesign-home .sr-promo-gift-media { width: 78px; flex: none; }
.stherb-redesign-home .sr-promo-gift-media img { width: 100%; height: auto; display: block; border-radius: 12px; }
.stherb-redesign-home .sr-promo-gift-body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.stherb-redesign-home .sr-promo-gift-name { font-family: 'Cormorant', Georgia, serif; font-size: 22px; color: var(--ink); line-height: 1.2; }
.stherb-redesign-home .sr-promo-gift-when { font-size: 12.5px; color: var(--muted); }
.stherb-redesign-home .sr-promo-gift-when del { display: none; }
.stherb-redesign-home .sr-promo-gift-flag {
  background: var(--promo-gold);
  color: #221E18;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: none;
}

/* ---------- offer details ---------- */
.stherb-redesign-home .sr-promo-terms-section { padding: 0 0 84px; }
.stherb-redesign-home .sr-promo-terms-card {
  background: var(--dark);
  color: #EDE7DA;
  border-radius: 22px;
  padding: 44px 48px;
}
.stherb-redesign-home .sr-promo-terms-card h3 { color: #fff; font-size: 28px; margin-bottom: 18px; }
.stherb-redesign-home .sr-promo-terms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stherb-redesign-home .sr-promo-terms-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(237, 231, 218, 0.86);
}
.stherb-redesign-home .sr-promo-terms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1.5px;
  background: rgba(237, 231, 218, 0.55);
}

/* ---------- faq + related ---------- */
.stherb-redesign-home .sr-promo-faq-section { padding: 0 0 84px; }
.stherb-redesign-home .sr-promo-related-section { padding: 0 0 96px; }
.stherb-redesign-home .sr-promo-related-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- sticky CTA ---------- */
.sr-promo-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--dark);
  color: #fff;
}
.sr-promo-sticky-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sr-promo-sticky-text { font-size: 13.5px; color: rgba(255, 255, 255, 0.9); }
.sr-promo-sticky-count { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.stherb-redesign-home .sr-promo-sticky-btn {
  background: var(--promo-gold);
  color: #221E18;
  border-color: var(--promo-gold);
  padding: 9px 20px;
  font-size: 13px;
}
.stherb-redesign-home .sr-promo-sticky-btn:hover { opacity: 0.9; }
/* Leave room so the bar never covers the footer's last row. Measured, not
   guessed: the bar is ~48px on desktop and ~56px once the phone rules below
   keep it to one line. */
.stherb-redesign-promotions .sr-footer-bottom { padding-bottom: 76px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .stherb-redesign-home .sr-promo-hero-grid,
  .stherb-redesign-home .sr-promo-pair-card,
  .stherb-redesign-home .sr-promo-gifts-grid { grid-template-columns: 1fr; }
  .stherb-redesign-home .sr-promo-hero-media { order: -1; }
  /* The portrait frame exists only to fill the two-column card's media panel.
     Once the card is one column there is no panel to fill and 3:4 just inflates
     the image band (measured 391x521 tiles at 896px before this line). */
  .stherb-redesign-home .sr-promo-pair-thumb { aspect-ratio: auto; }
  .stherb-redesign-home .sr-promo-pair-body { padding: 32px 28px; }
  .stherb-redesign-home .sr-promo-tiers { grid-template-columns: 1fr; }
  .stherb-redesign-home .sr-promo-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stherb-redesign-home .sr-promo-hero { padding: 40px 0 52px; }
  .stherb-redesign-home .sr-promo-hero-motif { display: none; }
  .stherb-redesign-home .sr-promo-h1 { font-size: 40px; }
  .stherb-redesign-home .sr-promo-section-head h2,
  .stherb-redesign-home .sr-promo-shop-head h2 { font-size: 30px; }
  .stherb-redesign-home .sr-promo-pair-body h2,
  .stherb-redesign-home .sr-promo-gifts-copy h2 { font-size: 27px; }
  .stherb-redesign-home .sr-promo-count-cell { min-width: 0; flex: 1; }
  .stherb-redesign-home .sr-promo-countdown { gap: 8px; }
  .stherb-redesign-home .sr-promo-count-val { font-size: 24px; }
  .stherb-redesign-home .sr-promo-pair-section,
  .stherb-redesign-home .sr-promo-tiers-section,
  .stherb-redesign-home .sr-promo-gifts-section { padding: 52px 0; }
  .stherb-redesign-home .sr-promo-terms-card { padding: 30px 24px; }
  .stherb-redesign-home .sr-promo-related-grid { grid-template-columns: 1fr; }
  .stherb-redesign-home .sr-promo-hero-btns .sr-btn,
  .stherb-redesign-home .sr-promo-pair-btns .sr-btn { flex: 1 1 100%; justify-content: center; }
  /* Sticky Chat Widget's FAB sits bottom-left and overlaps the bar on phones.
     Padding clears it, but it also forced the copy to wrap to 95px tall, which
     then hid the footer's last row behind the bar (measured at 390px). Dropping
     the secondary clause keeps the bar to a single line instead. */
  .sr-promo-sticky-inner { padding: 10px 16px 10px 68px; gap: 10px; flex-wrap: nowrap; }
  .sr-promo-sticky-text { font-size: 12px; }
  .sr-promo-sticky-more { display: none; }
  .stherb-redesign-home .sr-promo-sticky-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
  .stherb-redesign-promotions .sr-footer-bottom { padding-bottom: 96px; }
}