/*
 * Homepage — the v1 front-page template's inline <style> block
 * (page-templates/new.php L11-21), extracted VERBATIM so the React homepage
 * loads exactly the same rules.
 *
 * The first rule is load-bearing: `.bullets-slider-infinite` is opacity:0 until
 * Slick adds `.slick-initialized`, so if a marquee fails to initialise the
 * keyword strip renders INVISIBLE rather than merely unstyled.
 */
.bullets-slider-infinite{ opacity: 0;}
.bullets-slider-infinite.slick-initialized{ opacity: 1;}
@media only screen and (max-width: 767px) {
    .woocommerce-error{
            z-index: 99999999;
    }
}

/* -----------------------------------------------------------------------------
 * Sitewide-sale home banner: flush under the fixed chrome.
 *
 * Every banner template carries its own legacy `margin-top` (91px, 115px, …)
 * sized for the OLD layout, where the header sat in a fixed wrapper and nothing
 * reserved space in flow. Under the React chrome part of that clearance is
 * already reserved (.sbchrome-header-spacer), so the template margin lands the
 * banner ~35px BELOW the header — the visible gap. And no single number fixes it:
 * the reserved height differs per breakpoint (90px desktop, 0 where the mobile
 * nav takes over) and the fixed chrome grows by the 56px sale ticker.
 *
 * So: neutralise the template's own top margin and let the wrapper own the
 * clearance. The exact value is measured at runtime (HomePage.jsx / the inline
 * script in inc/sale-home-banner.php); this value is the no-JS fallback, correct
 * on desktop and phones, and refined on tablets the moment the script runs.
 * -------------------------------------------------------------------------- */
.sb-sale-home-banner { margin-top: 56px; }
/* NOT `> *:first-child` — every banner template opens with its own <style> tag,
   so the first child is that tag and the real content is the next sibling. */
.sb-sale-home-banner > section,
.sb-sale-home-banner > div,
.sb-sale-home-banner > figure { margin-top: 0 !important; }