/* ==========================================================================
   B62 · B62.1 — Festive Tech Days · HOMEPAGE redesign layer
   ==========================================================================
   Loads ONLY on the storefront homepage while StorefrontTheme::current()
   is 'festive' (the home Blade pushes it onto the layout's styles stack,
   which renders AFTER festive.css — equal-specificity homepage rules win
   the cascade). EVERY rule in this file is scoped under .g24-festive-home,
   so catalogue / PDP / cart / checkout / auth / admin pages can never
   inherit a single byte of it, and the Normal theme never downloads it.

   B62.1 PALETTE — premium ROYAL NAVY matching the Creator Gift reference
   banner (a clearly BLUE navy, warm-lit — never a near-black grey-navy
   like the first draft leaned on), warm gold + burgundy accents, light
   surfaces:

     royal navy   #142B68   (primary zone colour — hero stage, headings)
     deep navy    #0B1B4D   (gradient end stop)
     mid royal    #234A9E   (gradient lift / hover)
     warm gold    #F5C66A   (accents, hairlines, eyebrows — NOT body text)
     warm amber   #F59E0B   (highlights; deep amber #B45309 for text on light)
     burgundy     #8F1747   (festive sale accents)
     ivory        #FFF9EF   (warm light surface)
     navy ink     #1A2447   (text on light surfaces — navy-tinted, not black)

   Contrast guardrails (WCAG AA measured against the ACTUAL stop):
     white on #142B68 = 11.4:1 · white on #0B1B4D = 15.1:1 · white on
     #8F1747 = 9.3:1 · #F5C66A on #0B1B4D = 9.2:1 · #B45309 on #FFF9EF =
     4.9:1 · #1A2447 on #FFF9EF = 13.1:1. Gold/amber are NEVER used as
     text on light backgrounds.

   Guardrails:
     - Product cards KEEP clean light surfaces (white/ivory) — the navy
       belongs to the hero / campaign / deals zones, not to the catalogue
       grid (§1 of the brief: not a uniformly dark page).
     - The campaign hero banner markup, sizing, aspect ratios and assets
       are NOT touched (§2): the slider rules below only add a backdrop
       and a hairline — no width/height/object-fit/aspect-ratio changes.
     - Hover transitions only; no keyframe animations; no fixed widths.
   ========================================================================== */

/* ── 0 · Page canvas: warm ivory wash with a royal-navy top glow ────────── */
.g24-festive-home {
    background:
        radial-gradient(1100px 280px at 50% -60px, rgba(35, 74, 158, 0.16), transparent 70%),
        linear-gradient(180deg, #FFF9EF 0%, #FFFCF4 260px, #FFFFFF 720px);
}

/* ── 1 · Hero zone: royal-navy stage behind the campaign banners ──────────
     Sizing of the slider itself is UNTOUCHED — this only paints the zone
     around the campaign creative (gold hairline + navy stage + glow). */
.g24-festive-home .g24-hero-slider {
    background:
        radial-gradient(900px 220px at 50% 115%, rgba(245, 198, 106, 0.20), transparent 65%),
        linear-gradient(180deg, #0B1B4D 0%, #142B68 100%);
    border-bottom: 1px solid rgba(245, 198, 106, 0.55);
    box-shadow: 0 10px 34px rgba(11, 27, 77, 0.28);
}

/* ── 2 · Promo tiles (Blade: g24f-tile + modifier) ──────────────────────── */
.g24-festive-home .g24f-tile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.85rem;
    color: #FFFFFF;
    text-decoration: none;
    border: 1px solid rgba(245, 198, 106, 0.38);
    box-shadow: 0 4px 16px rgba(11, 27, 77, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.g24-festive-home .g24f-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11, 27, 77, 0.30);
    filter: brightness(1.06);
    color: #FFFFFF;
}
.g24-festive-home .g24f-tile-icon {
    font-size: 1.45rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 3px rgba(11, 27, 77, 0.35));
}
.g24-festive-home .g24f-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.g24-festive-home .g24f-tile-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.g24-festive-home .g24f-tile-text small {
    font-size: 0.68rem;
    opacity: 0.85;
    line-height: 1.25;
}
/* one-line labels from sm up; mobile tiles let text wrap (no cramped ellipses) */
@media (min-width: 640px) {
    .g24-festive-home .g24f-tile-text strong,
    .g24-festive-home .g24f-tile-text small {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.g24-festive-home .g24f-tile-arrow {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.8;
}
/* modifier: royal navy (Gift Boxes) */
.g24-festive-home .g24f-tile--navy {
    background: linear-gradient(135deg, #142B68 0%, #0B1B4D 100%);
}
/* modifier: warm burgundy-orange (Deals) */
.g24-festive-home .g24f-tile--orange {
    background: linear-gradient(135deg, #8F1747 0%, #142B68 120%);
}
/* modifier: mid royal blue (Game Zone) */
.g24-festive-home .g24f-tile--blue {
    background: linear-gradient(135deg, #234A9E 0%, #142B68 100%);
}
/* modifier: warm gold-amber (New Arrivals) — navy ink text, gold body */
.g24-festive-home .g24f-tile--amber {
    background: linear-gradient(135deg, #F5C66A 0%, #F59E0B 100%);
    border-color: rgba(255, 255, 255, 0.55);
}
.g24-festive-home .g24f-tile--amber,
.g24-festive-home .g24f-tile--amber:hover {
    color: #0B1B4D;
}

/* ── 3 · Section headings: gold eyebrow + royal navy title ─────────────── */
.g24-festive-home .g24f-eyebrow {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #B45309;
    margin: 0 0 0.1rem;
}
.g24-festive-home section > div > h2,
.g24-festive-home .g24f-panel h2 {
    color: #142B68;
}
.g24-festive-home .g24f-viewall {
    color: #142B68;
    font-weight: 600;
}
.g24-festive-home .g24f-viewall:hover {
    color: #B45309;
}
.g24-festive-home section a.text-blue-600:hover,
.g24-festive-home section a.text-violet-600:hover {
    color: #B45309;
}

/* ── 3b · Campaign gift-box banner text: GOLD on burgundy (B64) ───────────
     Owner report: the banner's two small lines were near-invisible on the
     dark burgundy gradient. Root cause: the markup used the Tailwind
     utilities text-amber-100 / text-amber-50/95, which were NEVER compiled
     into tailwind.css (the classes simply do not exist in the built file),
     so both lines inherited the page's dark ink. The rules below are PLAIN
     committed CSS — they cannot regress with a Tailwind rebuild. Owner
     palette: eyebrow + headline GOLD, subline warm white.
     Contrast: #FCD34D on #78150A ≈ 9.0:1 (eyebrow/headline zone, gradient
     start) · #FFF7E8 on #B45309 ≈ 4.6:1 (lightest stop, subline). */
.g24-festive-home .g24f-campaign .g24f-campaign-eyebrow {
    color: #FCD34D;
}
.g24-festive-home .g24f-campaign h2 {
    color: #FCD34D;
}
.g24-festive-home .g24f-campaign .g24f-campaign-sub {
    color: #FFF7E8;
}

/* ── 4 · Deals of the Day: royal-navy stage (overrides the red gradient) ── */
.g24-festive-home section .bg-gradient-to-r.from-red-600 {
    background-image: linear-gradient(90deg, #0B1B4D 0%, #142B68 55%, #234A9E 100%);
    border: 1px solid rgba(245, 198, 106, 0.45);
    box-shadow: 0 10px 30px rgba(11, 27, 77, 0.25);
}

/* ── 5 · Product cards: LIGHT surfaces stay, navy-tinted chrome ─────────── */
.g24-festive-home .g24-pcard {
    background: #FFFFFF;
    border: 1px solid rgba(20, 43, 104, 0.12);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.g24-festive-home .g24-pcard:hover {
    border-color: rgba(245, 198, 106, 0.85);
    box-shadow: 0 10px 26px rgba(11, 27, 77, 0.16);
    transform: translateY(-2px);
}
.g24-festive-home .g24-pcard h3 {
    color: #1A2447;
}
.g24-festive-home .g24-pcard .text-gray-900 {
    color: #1A2447;
}
/* sale badge: festive burgundy (was plain red) */
.g24-festive-home .g24-pcard .bg-red-500 {
    background-color: #8F1747;
}
/* category-panel cards get the warm ivory surface to read as a distinct zone */
.g24-festive-home .g24f-panel .g24-pcard {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9EF 100%);
}

/* ── 6 · B62.2 grid: SIX products per row on desktop (2 rows × 6 = 12) ────
     The sections keep their Tailwind classes; the festive layer re-shapes
     the 8-column desktop grid to 6 columns at the same lg breakpoint.
     Tablet (4-col) and mobile (2-col) behaviour is untouched. */
@media (min-width: 1024px) {
    .g24-festive-home .lg\:grid-cols-8 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ── 7 · Category panels (festive-only sections from the controller) ───── */
.g24-festive-home .g24f-panel {
    background: transparent;
}
.g24-festive-home .g24f-panel::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    border-radius: 2px;
    margin: 0 0 0.6rem;
    background: linear-gradient(90deg, #F5C66A 0%, #F59E0B 100%);
}

/* ── 8 · Trust badges + brands strip: quiet navy-tinted festive chrome ──── */
.g24-festive-home section .bg-gray-50 {
    background: #FFF9EF;
    border-color: rgba(20, 43, 104, 0.10);
}
.g24-festive-home section .bg-blue-600 {
    background-color: #142B68;
}
.g24-festive-home section a.border-gray-200.bg-white {
    border-color: rgba(20, 43, 104, 0.14);
}
.g24-festive-home section a.border-gray-200.bg-white:hover {
    border-color: rgba(245, 198, 106, 0.9);
    box-shadow: 0 4px 14px rgba(11, 27, 77, 0.12);
}

/* ── 9 · Mobile safety: the festive layer must never open a horizontal
     scroll — decorative gradients are constrained, nothing overflows. ── */
.g24-festive-home {
    overflow-x: hidden;
}