/* ============================================================
   overnight-fixes.css — v2.9.24.87
   Shipped by overnight campaign 2026-04-23 (Sohan asleep 3AM ET).

   Scope: narrow, surgical CSS-only fixes over shared-v3.css +
   home-sections-refinement.css + about-dna-sitewide.css.

   Each block is rollback-safe (just remove the block). Enqueued
   AFTER sr-home-sections-refinement so it wins specificity wars
   without needing !important on everything.

   Loaded site-wide on home/menu/delivery/kiosk via the plugin.
   Rules scoped by selector when fix is page-specific.

   CHANGELOG
   ---------
   F1 — Category grid height reservation. The 2x4 shop-by-category
        grid was collapsing to ~12px (CLS) before IntersectionObserver
        fired the lazy image load. Reserves min-height on each tile
        so the grid paints at proper size immediately. Zero visual
        difference post-load, prevents a 1000px layout jank on scroll.

   F2 — Lazy carousel skeleton height. Same CLS story on below-fold
        product carousels. 4 rows of skeletons collapsed to 12px until
        scrolled. Reserves ~680px height so the layout doesn't jank
        when 9 cards populate. Aspect-locked so desktop + mobile both
        preserve the right height.

   F3 — Eyebrow h2 rhythm. "Jamaica's most-covered dispensary" h2
        was computing 11px / rgba(15,21,17,0.55) — looked like a
        typo not an intentional eyebrow. Bumped to 13px + uppercase
        + letter-spacing so it reads as a label, not broken text.

   F4 — Focus-visible outlines. v1-parity feedback noted no keyboard
        focus rings on CTAs. Add explicit #7ED957 outline for all
        focusable buttons/links under .sr-wrap — fixes a11y without
        touching anything else.

   F5 — Image lazy-load placeholder background. Category + mood tile
        images had no placeholder bg, so during the ~80ms lazy load
        there's a flash of naked transparent space. Gentle #f6f6f2
        placeholder matches the sr-moods-section background so it
        looks like a deliberate tile, not a broken image.
   ============================================================ */


/* ----------------------------------------------------------------
   F1 — Category grid height reservation (homepage)
   ---------------------------------------------------------------- */
#sr-homepage .sr-categories-section .sr-cat,
#sr-homepage .sr-categories-grid > a,
#sr-homepage .sr-categories-grid > * {
    min-height: 200px;
}
@media (min-width: 769px) {
    #sr-homepage .sr-categories-section .sr-cat,
    #sr-homepage .sr-categories-grid > a,
    #sr-homepage .sr-categories-grid > * {
        min-height: 260px;
    }
}


/* ----------------------------------------------------------------
   F2 — Lazy carousel skeleton height reservation (homepage)
   Prevents below-fold product carousels from collapsing to 12px
   before IntersectionObserver fires the data fetch.
   ---------------------------------------------------------------- */
#sr-homepage .sr-carousel-section .sr-carousel-track {
    min-height: 360px;
}
@media (min-width: 769px) {
    #sr-homepage .sr-carousel-section .sr-carousel-track {
        min-height: 440px;
    }
}
#sr-homepage .sr-carousel-section .sr-card-skeleton {
    min-height: 280px;
    background: linear-gradient(90deg, rgba(240,240,240,0.55), rgba(246,246,242,0.9), rgba(240,240,240,0.55));
    border-radius: 14px;
}
@media (min-width: 769px) {
    #sr-homepage .sr-carousel-section .sr-card-skeleton {
        min-height: 380px;
    }
}


/* ----------------------------------------------------------------
   F3 — Eyebrow h2 rhythm fix (Live from Silk Road tagline + others)
   Any h2 computed under 14px is almost certainly an eyebrow — treat
   it like a proper eyebrow label instead of "broken" small text.
   ---------------------------------------------------------------- */
#sr-homepage h2[class*="eyebrow"],
#sr-homepage .sr-section-eyebrow,
#sr-homepage h2.sr-eyebrow,
.sr-ig-section h2[style*="font-size:11px"],
.sr-ig-section h2[style*="font-size: 11px"] {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: rgba(15, 21, 17, 0.78) !important;
    margin-bottom: 8px !important;
}


/* ----------------------------------------------------------------
   F4 — Focus-visible outlines for keyboard users (a11y parity)
   ---------------------------------------------------------------- */
.sr-wrap a:focus-visible,
.sr-wrap button:focus-visible,
.sr-wrap .sr-btn:focus-visible,
.sr-wrap .sr-card-add-btn:focus-visible,
.sr-wrap [role="button"]:focus-visible {
    outline: 2px solid #7ED957 !important;
    outline-offset: 3px;
    border-radius: 6px;
}
.sr-theme-dark .sr-wrap a:focus-visible,
.sr-theme-dark .sr-wrap button:focus-visible {
    outline-color: #9AE67D !important;
}


/* ----------------------------------------------------------------
   F5 — Lazy image placeholder tint (no flash of bare space)
   ---------------------------------------------------------------- */
#sr-homepage .sr-categories-section .sr-cat img,
#sr-homepage .sr-categories-grid img,
#sr-homepage .sr-moods-section img,
#sr-homepage .sr-carousel-section .sr-card-img,
#sr-homepage .sr-carousel-section .sr-card-img-wrap {
    background-color: #f6f6f2;
}
#sr-homepage .sr-categories-section .sr-cat img[src=""],
#sr-homepage .sr-categories-grid img[src=""] {
    /* Hide the broken 1x1 fallback before the real src assigns */
    visibility: hidden;
}