/*
 * Gigglori storefront style/layout corrections v2 — 2026-08-25
 * Purpose: resolve header/nav cascade conflicts without changing storefront logic.
 * Loaded AFTER theme-control.php and storefront-theme-final.php.
 */

:root {
    --gg-ui-red: #d71920;
    --gg-ui-red-dark: #b42318;
    --gg-ui-red-soft: #fff1f2;
    --gg-ui-ink: #172033;
    --gg-ui-line: #e5e7eb;
    --gg-ui-white: #ffffff;
}

/* --------------------------------------------------------------------------
   Desktop category/navigation row
   Legacy core CSS stretches .category-mega to the full row height. Combined
   with later theme rules this can leave the trigger visually glued to the red
   header. Give the ROW real vertical breathing room and make the trigger size
   independent of the row.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
    .site-header .desktop-navigation {
        background: var(--gg-ui-white) !important;
        border-top: 1px solid rgba(23, 32, 51, .08) !important;
        border-bottom: 1px solid rgba(23, 32, 51, .08) !important;
        padding-block: 8px !important;
        overflow: visible !important;
    }

    .site-header .desktop-navigation .nav-row {
        min-height: 46px !important;
        height: auto !important;
        padding-block: 0 !important;
        align-items: center !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    .site-header .desktop-navigation .category-mega {
        position: relative !important;
        align-self: auto !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
    }

    .site-header .desktop-navigation .category-trigger {
        box-sizing: border-box !important;
        align-self: auto !important;
        flex: 0 0 auto !important;
        min-width: 220px !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 20px !important;
        border: 1px solid #171717 !important;
        border-radius: 14px !important;
        background: #171717 !important;
        color: #ffffff !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .10) !important;
        overflow: hidden !important;
        transition: background-color .16s ease, border-color .16s ease,
                    color .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    /* Keep the dropdown below the new 8px bottom breathing room. */
    .site-header .desktop-navigation .category-mega .mega-panel {
        top: calc(100% + 8px) !important;
    }

    .site-header .desktop-navigation .gg-primary-nav-shell,
    .site-header .desktop-navigation .primary-nav {
        min-width: 0 !important;
    }

    .site-header .desktop-navigation .gg-primary-nav-shell {
        height: 46px !important;
        align-items: center !important;
    }

    .site-header .desktop-navigation .primary-nav.gg-synced-category-nav {
        height: 46px !important;
        align-items: center !important;
    }
}

/* --------------------------------------------------------------------------
   High-contrast hover states
   Remove legacy teal/green hover remnants and avoid red-on-red / soft-on-soft
   states in the current red header theme.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* Main account + wishlist + cart: white hover on red header. */
    .site-header .header-actions > a:hover {
        background: #ffffff !important;
        color: var(--gg-ui-red-dark) !important;
        border-color: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 7px 20px rgba(74, 16, 19, .18) !important;
        transform: translateY(-1px) !important;
    }

    .site-header .header-actions > a:hover svg,
    .site-header .header-actions > a:hover b {
        color: var(--gg-ui-red-dark) !important;
        stroke: currentColor !important;
    }

    .site-header .header-actions > a:hover small {
        color: #7f1d1d !important;
    }

    .site-header .header-actions > a:hover .action-count {
        background: var(--gg-ui-red) !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }

    /* All categories: black at rest, unmistakable dark-red hover/open state. */
    .site-header .desktop-navigation .category-trigger:hover,
    .site-header .desktop-navigation .category-mega.open .category-trigger {
        background: var(--gg-ui-red-dark) !important;
        border-color: var(--gg-ui-red-dark) !important;
        color: #ffffff !important;
        filter: none !important;
        box-shadow: 0 8px 20px rgba(180, 35, 24, .22) !important;
        transform: translateY(-1px) !important;
    }

    /* Primary categories: use a pale-red pill instead of legacy green hover. */
    .site-header .desktop-navigation .primary-nav a:hover {
        background: var(--gg-ui-red-soft) !important;
        color: var(--gg-ui-red-dark) !important;
        border-radius: 10px !important;
    }

    /* The old core stylesheet gives these arrows a pale-green hover. */
    .site-header .desktop-navigation .gg-primary-nav-arrow:hover {
        background: var(--gg-ui-red-soft) !important;
        border-color: #fecdd3 !important;
        color: var(--gg-ui-red-dark) !important;
    }

    /* Utility controls should also have a visible non-red hover on white. */
    .gg-top-controls .gg-utility-button:hover,
    .gg-top-controls .gg-language-control a:hover,
    .gg-top-controls .gg-currency-details summary:hover {
        background: var(--gg-ui-red-soft) !important;
        border-color: #fecdd3 !important;
        color: var(--gg-ui-red-dark) !important;
    }
}

/* Active navigation: keep clear text/background contrast and remove stale teal. */
.site-header .desktop-navigation .primary-nav a.active {
    color: var(--gg-ui-red-dark) !important;
}

.site-header .desktop-navigation .primary-nav a.active::after {
    background: var(--gg-ui-red) !important;
}

.site-header .desktop-navigation .nav-benefit {
    color: var(--gg-ui-red-dark) !important;
}

.site-header .desktop-navigation .nav-benefit span {
    background: #fee2e2 !important;
    color: var(--gg-ui-red-dark) !important;
}

/* --------------------------------------------------------------------------
   Focus/interaction quality
   -------------------------------------------------------------------------- */
.site-header .header-actions > a,
.site-header .desktop-navigation .primary-nav a,
.site-header .desktop-navigation .gg-primary-nav-arrow {
    transition: background-color .16s ease, border-color .16s ease,
                color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.site-header .header-actions > a:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(23, 32, 51, .42) !important;
}

.site-header .desktop-navigation .category-trigger:focus-visible,
.site-header .desktop-navigation .primary-nav a:focus-visible,
.site-header .desktop-navigation .gg-primary-nav-arrow:focus-visible {
    outline: 3px solid var(--gg-ui-red) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(215, 25, 32, .14) !important;
}

/* Keep icons and long nav labels from introducing accidental overflow. */
.site-header .header-actions,
.site-header .header-actions > a,
.site-header .desktop-navigation .gg-primary-nav-shell,
.site-header .desktop-navigation .primary-nav {
    min-width: 0 !important;
}

.site-header .header-actions svg,
.site-header .desktop-navigation .category-trigger svg,
.site-header .desktop-navigation .gg-primary-nav-arrow svg {
    flex: 0 0 auto !important;
}

/* Touch devices should not retain simulated hover backgrounds. */
@media (hover: none) {
    .site-header .header-actions > a:hover,
    .site-header .desktop-navigation .primary-nav a:hover,
    .site-header .desktop-navigation .gg-primary-nav-arrow:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .header-actions > a,
    .site-header .desktop-navigation .category-trigger,
    .site-header .desktop-navigation .primary-nav a,
    .site-header .desktop-navigation .gg-primary-nav-arrow {
        transition: none !important;
        transform: none !important;
    }
}