/**
 * Heilebär overrides on top of the Suxnix template CSS.
 * Kept in its own file (loaded after style.css/responsive.css) so the
 * template's own stylesheets stay untouched and easy to diff against
 * the original purchase, aside from the two :root colour variables
 * changed directly in style.css.
 */

/* ---- Accessibility / layout fixes carried over from the previous build ---- */
html { overflow-x: hidden; }
body { overflow-x: hidden; } /* closed mobile-nav panel can register as overflow even off-screen */

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-8rem);
  background: var(--tg-secondary-color);
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: 4px;
  z-index: 10000;
  transition: transform .2s ease;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ---- Brand mark: real logo file (assets/images/brand/logo-wordmark-*.webp),
   replacing the earlier inline-SVG-icon + CSS-text placeholder. Three colour
   variants cover every background the logo sits on — white (hero/transparent
   header, dark footer), blue (sticky/scrolled header, matching the active
   nav-link colour) and dark near-black (mobile menu panel, white background)
   — which one loads is chosen in the PHP template, not by CSS filtering, so
   it stays crisp and matches exactly regardless of browser support. The
   sticky-header show/hide toggle below is unchanged from before — it still
   just swaps which of the two `.logo` wrappers is visible on scroll. */
.brand-mark-inline { display: inline-flex; align-items: center; }
.logo-wordmark { display: block; height: 34px; width: auto; }
.logo .brand-mark-inline.secondary-logo { display: none; }
.transparent-header.sticky-menu .logo .brand-mark-inline.secondary-logo { display: inline-flex; }
.transparent-header.sticky-menu .logo .brand-mark-inline.main-logo { display: none; }
/* Pre-existing template gap, found while testing the new logo: the template's
   OWN CSS (style.css) never actually reveals the second `.logo` wrapper on
   this header variant — its Bootstrap `d-none` is never overridden here,
   unlike the sibling `.menu-area-two` header a few thousand lines later in
   the same file, which does this correctly (`.menu-area-two.sticky-menu
   .logo.d-none { display: block !important; }`). Without it, the sticky/
   scrolled header showed no logo at all. Mirrors that same working pattern. */
.transparent-header.sticky-menu .logo { display: none; }
.transparent-header.sticky-menu .logo.d-none { display: block !important; }
.footer-logo .logo-wordmark { height: 32px; }
.mobile-menu .nav-logo .logo-wordmark { height: 30px; }

/* ---- Language switcher dropdown in the primary nav ----
   Built on the Suxnix template's own .menu-item-has-children/.sub-menu
   mechanism (same one a mega-menu would use) rather than bespoke JS: main.js
   already opens it on hover on desktop, appends a chevron .dropdown-btn and
   wires click-to-expand for the cloned copy in the mobile slide-out panel —
   both free, both already tested by the template author. We only style it. */
.lang-switch-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  background: none;
  border: none;
  padding: 38px 12px 38px 30px;
  margin: 0;
  cursor: pointer;
  line-height: 1;
  color: #dcdcdc; /* matches .transparent-header .navbar-wrap ul li a (pre-scroll) */
}
.transparent-header.sticky-menu .lang-switch-toggle {
  color: var(--tg-body-font-color); /* matches ...sticky-menu ul li a (post-scroll) */
}
.lang-switch-item:hover .lang-switch-toggle,
.lang-switch-toggle:focus-visible {
  color: var(--tg-primary-color);
}
.lang-switch-caret {
  font-size: 10px;
  transition: transform 0.3s ease-in-out;
}
.lang-switch-item:hover .lang-switch-caret {
  transform: rotate(180deg);
}
.lang-flag { display: inline-flex; flex: 0 0 auto; line-height: 0; }
/* width/height repeated here with !important as a second line of defence —
   header.php also sets them as real HTML attributes on the <svg> itself, so
   the flag stays small even if this stylesheet is ever briefly out of sync
   with the markup (see the cache-busted link in head.php). */
.lang-flag-svg {
  display: block !important;
  width: 18px !important;
  height: 13px !important;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}
.lang-switch-menu { left: auto; right: 0; min-width: 148px; padding: 6px 0; }
.lang-switch-menu li { margin: 0; }
.lang-switch-menu a,
.lang-switch-menu .lang-switch-current {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 16px !important;
  font-size: 14px;
  color: var(--tg-body-font-color);
}
.lang-switch-menu a:hover,
.lang-switch-menu a:focus-visible {
  color: var(--tg-primary-color);
  background: var(--tg-gray-two);
}
.lang-switch-menu .lang-switch-current {
  color: var(--tg-primary-color);
  font-weight: 600;
  cursor: default;
}
/* Keyboard access: CSS-hover-only dropdowns skip keyboard users, so also
   reveal on focus-within (tabbing to the toggle or a menu link). */
.lang-switch-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Mobile slide-out panel: the template clones .main-menu's HTML wholesale
   (assets/js/main.js), so this is the same markup re-skinned for the
   accordion layout rather than a separate component. */
.mobile-menu .lang-switch-toggle {
  width: 100%;
  justify-content: flex-start;
  padding: 10px 60px 10px 25px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
}
.mobile-menu .lang-switch-caret {
  display: none; /* the template already appends its own dropdown-btn chevron here */
}
.mobile-menu .lang-switch-menu {
  position: static;
  box-shadow: none;
  border: none;
  padding: 0;
  min-width: 0;
}
.mobile-menu .lang-switch-menu a,
.mobile-menu .lang-switch-menu .lang-switch-current {
  padding: 8px 20px 8px 45px !important;
}
.mobile-menu .lang-switch-menu a:hover,
.mobile-menu .lang-switch-menu a:focus-visible {
  background: none; /* the grey hover fill only makes sense on the desktop floating panel */
}

/* ---- Dark sections: solid navy instead of stock wood-texture photography ---- */
.features-wrap,
.features-area-three.features-bg-two {
  background-image: none !important;
  background-color: var(--tg-secondary-color);
}
.features-wrap::after { background: #0a2140; }

/* ---- Breadcrumb bands (Our Story / Science / Products / FAQ / Contact /
   product / 404): the stock background is a literal unfinished placeholder
   graphic — assets/img/bg/video_bg.jpg is actually a 1920x700 dummy PNG
   with its own pixel dimensions watermarked on it as text, left over from
   the Envato template and never replaced. Its ::before scrim darkens the
   band but not enough to fully hide that watermark text. Solid navy
   instead, matching the same treatment already used on the dark sections
   above and the homepage hero. ---- */
.breadcrumb-bg {
  background-image: none !important;
  background-color: var(--tg-secondary-color);
}
.breadcrumb-bg::before {
  background: var(--tg-secondary-color);
  opacity: 1;
}

/* ---- Homepage hero: brand-colour gradient instead of stock supplement photography ----
   Both sub-properties must carry !important and must agree: an un-important
   `background` shorthand here would lose the background-image cascade to the
   !important `none` on the line above (they resolve independently, longhand
   vs. shorthand, regardless of source order), leaving the hero with NO
   background at all behind its white heading text. */
.banner-bg {
  background-image: linear-gradient(135deg, var(--tg-secondary-color) 0%, var(--tg-primary-color) 100%) !important;
  background-color: var(--tg-secondary-color) !important;
}

/* The stock "scroll down" cue is hardcoded at left:332px, tuned for the
   original template's shorter hero copy — on this hero it lands on top of
   the "Explore the Range" button. Centring it between the text and image
   columns instead keeps it clear of both at any hero copy length. */
.banner-area-two .section-down {
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Certification / trust strip (brand-area repurposed as verified-fact
   text chips, not the stock "Featured On" payment/brand-logo row) ---- */
.cert-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cert-strip__list li {
  font-family: var(--tg-heading-font-family);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--tg-heading-font-color);
  font-size: 15px;
  padding: 10px 22px;
  border: 1.5px solid var(--tg-gray);
  border-radius: 30px;
}

/* ---- Homepage section eyebrow reused as a plain label (no faux quote marks) ---- */
.section-title-two .sub-title { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Credibility / science cards (doctors-area repurposed, no stock headshots) ---- */
.doctor-thumb.is-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: var(--tg-gray-two);
  display: flex;
  align-items: center;
  justify-content: center;
}
.doctor-thumb.is-icon svg { color: var(--tg-secondary-color); width: 44px; height: 44px; }

/* ---- Formula / ingredient factor-group breakdown (Ingredients-area repurposed) ---- */
.factor-group { margin-bottom: 28px; }
.factor-group:last-child { margin-bottom: 0; }
.factor-group__label {
  font-family: var(--tg-heading-font-family);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--tg-secondary-color);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.factor-group__items { list-style: none; margin: 0; padding: 0; }
.factor-group__items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--tg-gray);
  font-size: 15px;
  color: var(--tg-body-font-color);
}
.factor-group__items li span:last-child { color: var(--tg-heading-font-color); font-weight: 500; white-space: nowrap; }
.factor-group__note { font-size: 13px; color: var(--tg-body-font-color); margin-top: 8px; font-style: italic; }

/* ---- Allergen badges (product Additional Information tab) ---- */
.allergen-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.allergen-badge {
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 30px;
  font-weight: 600;
}
.allergen-badge--free { background: #E7F0E6; color: #2F6A31; }
.allergen-badge--contains { background: #FBEAE5; color: #A5401F; }

/* ---- Lutein-line accent (used only on lutein product cards/pages) ---- */
.accent-lutein .doctor-thumb.is-icon,
.accent-lutein .counter-icon,
.accent-lutein .factor-group__label { color: var(--tg-lutein-color); }
.accent-lutein.doctor-thumb.is-icon { background: var(--tg-lutein-tint); }
.card-tag--lutein { background: var(--tg-lutein-tint); color: #A15A1D; }
.card-tag--calcium { background: #E7EDF5; color: var(--tg-secondary-color); }
.card-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  margin-bottom: 12px;
}

/* ---- Standalone FAQ page (single-column accordion, no split hero image) ---- */
.faq-page-wrap { max-width: 860px; margin: 0 auto; }

/* ---- Honest fallback copy (contact / store-link sections when config is empty) ---- */
.coming-soon-note {
  background: var(--tg-gray-two);
  border-radius: 8px;
  padding: 26px 30px;
  color: var(--tg-body-font-color);
}

/* ---- Product spec rows (product detail page, replaces price/stock block) ---- */
.spec-rows { list-style: none; margin: 20px 0; padding: 0; }
.spec-rows li { padding: 6px 0; border-bottom: 1px solid var(--tg-gray); font-size: 15px; }
.spec-rows li span:first-child { color: var(--tg-body-font-color); margin-right: 8px; }
.spec-rows li span:last-child { color: var(--tg-heading-font-color); font-weight: 600; }

/* ---- Footer disclaimer line (dietary-supplement legal note) ---- */
.footer-disclaimer {
  color: rgba(255,255,255,.6);
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 980px;
  margin: 0 auto 14px;
  text-align: center;
}

/* ---- Generic inner-page content section spacing (reused across
   contact/404/brand/science/support pages so none of them need inline
   padding styles) ---- */
.content-section { padding: 100px 0; }
@media (max-width: 767px) { .content-section { padding: 60px 0; } }

/* ---- Science page: "Traceability" section, directly under the grey
   certifications block above it. That block already carries its own
   100px bottom padding, so this section originally used an inline
   padding-top:0 to avoid stacking a second full gap on top of that —
   but with zero padding of its own, the heading landed flush against
   the grey→white colour change, which reads as *no* gap at all rather
   than "already spaced out further up". Client flagged this directly
   (annotated screenshot, 2026-09-10): a real gap is needed here. Pulled
   out of an inline style into its own class, matching how .content-section
   itself is meant to be used, so it can carry its own mobile value too
   (an inline style can't respond to the breakpoint below). ---- */
.transparency-section { padding: 70px 0 40px; }
@media (max-width: 767px) { .transparency-section { padding: 40px 0 30px; } }

/* ---- Contact form: honeypot, alerts, inline field errors ---- */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  padding: 15px 22px;
  border-radius: 6px;
  margin-bottom: 26px;
  font-size: 14.5px;
  font-weight: 500;
}
.form-alert--success { background: #E7F0E6; color: #2F6A31; }
.form-alert--error { background: #FBEAE5; color: #A5401F; }

.form-grp.has-error input,
.form-grp.has-error select,
.form-grp.has-error textarea {
  border-color: #A5401F;
}
.form-grp .field-error {
  display: block;
  color: #A5401F;
  font-size: 12.5px;
  margin-top: 5px;
}

/* ---- Content added from Heilebar_Website_Content.docx (2026-09-10) ---- */

/* "Is this right for my child?" reuses .coming-soon-note as its box —
   no new class needed there. The pieces below are new. */

/* Trust micro-badges ("Before you buy": try-first, shipping insured,
   damage covered, 48h dispatch) — same pill treatment as the allergen
   badges, but under its own class name since these aren't allergens. */
.trust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.trust-badge {
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 30px;
  font-weight: 600;
  background: var(--tg-gray-two);
  color: var(--tg-heading-font-color);
}

/* "What's in it, and why" — four labelled callouts above the detailed
   factor-group breakdown on product.php. */
.what-in-it { margin: 0 0 34px; }
.what-in-it__item { padding: 18px 0; border-bottom: 1px solid var(--tg-gray); }
.what-in-it__item:first-child { padding-top: 0; }
.what-in-it__item:last-child { border-bottom: none; padding-bottom: 0; }
.what-in-it__item h4 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--tg-heading-font-color);
}
.what-in-it__item p { margin: 0; }

/* "How to take it" numbered steps. */
.how-to-steps { list-style: none; counter-reset: step; margin: 0 0 20px; padding: 0; }
.how-to-steps li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}
.how-to-steps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tg-secondary-color);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* "1–6 or 6–18?" comparison table — wrapped in .compare-table-wrap so a
   very narrow viewport scrolls the table horizontally instead of the
   whole page (the site-wide overflow-x:hidden rule above would otherwise
   just clip it). */
.compare-table-wrap { overflow-x: auto; margin: 0 0 10px; }
.compare-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.compare-table caption { caption-side: top; text-align: left; font-weight: 600; margin-bottom: 14px; color: var(--tg-heading-font-color); }
.compare-table th,
.compare-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tg-gray);
  font-size: 14.5px;
  vertical-align: top;
}
.compare-table th { width: 22%; color: var(--tg-body-font-color); font-weight: 500; }
.compare-table thead th {
  font-weight: 700;
  color: var(--tg-heading-font-color);
  border-bottom: 2px solid var(--tg-secondary-color);
}
.compare-table tbody td:first-child { font-weight: 600; color: var(--tg-heading-font-color); }

/* Cross-link line ("Child aged 6 or over? See Liquid Calcium 6–18 →"). */
.age-crosslink { display: inline-block; margin: 14px 0 0; font-style: italic; }

/* Homepage "Find Your Child's Formula" symptom picker — four direct
   links (age + focus resolve to exactly one of the four products each,
   so this is implemented as plain links rather than a multi-step quiz). */
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 767px) { .finder-grid { grid-template-columns: 1fr; } }
.finder-card {
  display: block;
  background: #fff;
  border: 1px solid var(--tg-gray);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.finder-card:hover,
.finder-card:focus-visible { border-color: var(--tg-secondary-color); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
/* Photo region: real lifestyle photography (not the product box) sourced
   per-card to match its quote — square crop keeps the grid rhythm even
   though source photos vary between landscape and portrait. Ratio is set
   via aspect-ratio so it scales cleanly at any card width, including the
   single-column mobile layout above. */
.finder-card__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--tg-gray, #f2f2f2); }
.finder-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.finder-card__body { padding: 22px 26px 26px; }
.finder-card__quote { font-size: 16.5px; color: var(--tg-heading-font-color); margin: 0 0 14px; font-style: italic; }
.finder-card__result { font-weight: 700; color: var(--tg-secondary-color); font-size: 15px; }

/* Manufacturing section (science.php): swapped a reused product pack-shot
   for real quality-control photography. Cropped to a consistent ratio and
   responsive at any column width. Other .about-img blocks on the site
   still show full, uncropped product photography and are untouched. */
.about-img.is-lifestyle img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ---- Product-card thumb (homepage range grid + Products listing grid):
   the template's .product-thumb a only caps image WIDTH (global img{max-width:100%}),
   not height, and has no overflow clipping. Our box-carton photos are square
   (800x800), so at the wider 2-column products.php layout they render far
   taller than the fixed 290px-high thumb slot and bleed into the row above/
   below it. Cap the image height to the slot's actual content-box height
   (290px box, border-box, minus 40px padding top+bottom = 210px) and clip
   as a safety net so no future image swap can reopen this. */
.product-thumb a {
  overflow: hidden;
}
.product-thumb a img {
  max-height: 210px;
  width: auto;
  height: auto;
}

/* ---- Product-detail gallery switcher thumbnails (the small tab images
   under the main product photo on product.php): the template leaves these
   completely unsized — only the global img{max-width:100%} applies — so
   our two 800x800 source photos (box + travel pack) rendered at their own
   mismatched natural sizes: tall, uneven rectangles instead of a normal
   thumbnail strip. Fixed to a small, consistent square. */
.inner-shop-details-nav-wrap .nav-tabs .nav-link {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.inner-shop-details-nav-wrap .nav-tabs .nav-link img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* ---- FAQ page category headings (support.php): the expanded docx FAQ
   (~27 Q&As) is grouped into 5 categories instead of one long flat list,
   so each group needs a heading that reads as a sub-heading, not another
   question. */
.faq-category-title {
  font-family: var(--tg-heading-font-family);
  font-size: 22px;
  font-weight: 700;
  color: var(--tg-heading-font-color);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tg-secondary-color);
}
.faq-category-accordion { margin-bottom: 10px; }