/* AKGadgets — mobile-first navigation shell (Phase 2: announcement bar, top bar, search
   overlay, side drawer). Built on tokens.css/base.css; independent of Bootstrap. */

/* ==================== Cookie notice ==================== */
/* A plain block at the very top of the page (not fixed/sticky) — it appears once, gets
   acknowledged, and is gone; it doesn't need to fight the top bar or bottom nav for space. */
.cookie-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--color-navy);
    color: var(--color-on-navy);
    padding: var(--space-3) var(--space-4);
    font-size: 0.85rem;
    text-align: center;
}
.cookie-banner-text { margin: 0; max-width: 640px; }
.cookie-banner-text a { color: #fff; text-decoration: underline; }
.cookie-banner form { flex-shrink: 0; }

/* ==================== Announcement bar ==================== */
.announcement-bar {
    background: var(--color-navy);
    color: var(--color-on-navy);
    font-size: 0.8rem;
}
.announcement-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
}
.announcement-summary::-webkit-details-marker { display: none; }
.announcement-summary::marker { content: ''; }
.announcement-pill {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.announcement-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.announcement-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-weight: 600;
    color: #fff;
}
.announcement-more .icon { width: 1em; height: 1em; transition: transform 0.2s ease; }
.announcement-details[open] .announcement-more .icon { transform: rotate(180deg); }
.announcement-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.78rem;
}

/* ==================== Top bar ==================== */
.topbar-shell {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.topbar-shell.is-scrolled { box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06); }
.topbar-shell.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .topbar-shell { transition: none; } }

.topbar-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--space-2);
}
.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.topbar-icon-btn:hover, .topbar-icon-btn:focus-visible { background: var(--color-surface-alt); }
.topbar-icon-btn[hidden] { display: none; }

.topbar-logo {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-navy);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.brand-logo-img { display: block; height: 32px; width: auto; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-1); }

.topbar-search-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 var(--space-3) var(--space-3);
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-3);
    height: 40px;
}
.topbar-search-form .icon { color: var(--color-text-muted); }
.topbar-search-form input[type="search"] {
    border: none; background: none; flex: 1 1 auto; font: inherit; color: var(--color-text); outline: none; min-width: 0;
}
.topbar-search-form input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Desktop/tablet nav row + mega menu — hidden below 992px, where the hamburger + drawer take over. */
.desktop-nav { display: none; }
.topbar-account-btn { display: none; }

@media (min-width: 992px) {
    .topbar-hamburger { display: none; }
    .topbar-account-btn { display: inline-flex; }
    /* The search field never needs to collapse to an icon when there's room for it permanently. */
    [data-search-trigger] { display: none !important; }

    .topbar-row {
        display: flex;
        align-items: center;
        gap: var(--space-5);
        padding: 0 var(--space-5);
    }
    .topbar-logo { justify-self: auto; }
    .desktop-nav { display: flex; align-items: center; gap: var(--space-4); }
    .desktop-nav-link {
        background: none; border: none; font: inherit; font-weight: 600; color: var(--color-text);
        text-decoration: none; cursor: pointer; padding: var(--space-2) 0;
    }
    .desktop-nav-link:hover, .desktop-nav-link:focus-visible { color: var(--color-accent-dark); }

    .topbar-search-form { flex: 1 1 auto; margin: 0; max-width: 420px; }
    .topbar-actions { margin-left: 0; }

    .desktop-mega-menu { position: relative; }
    .desktop-mega-menu-panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: var(--space-2);
        min-width: 320px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        box-shadow: 0 20px 48px rgba(16, 24, 40, 0.16);
        padding: var(--space-2) 0;
        z-index: var(--z-overlay);
    }
    .desktop-mega-menu:hover .desktop-mega-menu-panel,
    .desktop-mega-menu:focus-within .desktop-mega-menu-panel {
        display: block;
    }
}
/* Below 992px the topbar-row grid still needs to hide the (now desktop-only) elements cleanly. */
@media (max-width: 991.98px) {
    .desktop-nav, .topbar-account-btn { display: none; }
}

/* ==================== Add-to-cart bar (Product pages) ==================== */
/* Always visible — unlike the bottom nav it replaces, the primary buy CTA never hides on scroll. */
.add-to-cart-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
}
.add-to-cart-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.add-to-cart-price { font-weight: 800; font-size: 1.1rem; color: var(--color-text); white-space: nowrap; }
.add-to-cart-variant-link {
    font-size: 0.78rem;
    color: var(--color-accent);
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.add-to-cart-qty-input {
    width: 56px;
    min-height: var(--tap-target-min);
    text-align: center;
    font: inherit;
    font-weight: 700;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    flex-shrink: 0;
}
.add-to-cart-submit-btn {
    flex: 1 1 auto;
    max-width: 220px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font: inherit;
    font-weight: 700;
    padding: var(--space-3);
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-height: var(--tap-target-min);
}
.add-to-cart-submit-btn:hover { background: var(--color-accent-dark); }
.add-to-cart-submit-btn:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }

/* Cart badge bounce, fired by cart.js after a successful AJAX add. */
@keyframes cart-badge-bounce {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.45); }
    60% { transform: scale(0.9); }
}
.cart-count-badge.is-bouncing { animation: cart-badge-bounce 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .cart-count-badge.is-bouncing { animation: none; } }

/* ==================== Search overlay ==================== */
dialog.search-overlay {
    border: none; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
    background: var(--color-surface); color: var(--color-text);
}
dialog.search-overlay::backdrop { background: rgba(11, 18, 32, 0.4); }

.search-overlay-header {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface);
}
.search-overlay-header form {
    flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-surface-alt); border-radius: var(--radius-pill); padding: 0 var(--space-3); height: 44px;
}
.search-overlay-header .icon { color: var(--color-text-muted); }
.search-overlay-header input[type="search"] { border: none; background: none; flex: 1; font: inherit; outline: none; min-width: 0; }

.search-overlay-body { padding: var(--space-4); overflow-y: auto; height: calc(100vh - 68px); }
.search-section { margin-bottom: var(--space-6); }
.search-section h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 var(--space-3); }

.search-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-chip {
    display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
    background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; font-size: 0.85rem;
    border: none; font: inherit; cursor: pointer;
}
.search-chip:hover, .search-chip:focus-visible { background: var(--color-border); }

.search-suggestion-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.search-suggestion-list a {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm);
    text-decoration: none; color: var(--color-text);
}
.search-suggestion-list a:hover, .search-suggestion-list a:focus-visible { background: var(--color-surface-alt); }
.search-suggestion-thumb { width: 44px; height: 44px; object-fit: contain; background: var(--color-surface-alt); border-radius: var(--radius-sm); flex-shrink: 0; }
.search-suggestion-info { display: flex; flex-direction: column; min-width: 0; }
.search-suggestion-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-price { font-size: 0.85rem; color: var(--color-text-muted); }
.search-empty { color: var(--color-text-muted); font-size: 0.9rem; padding: var(--space-2) 0; }

@media (prefers-reduced-motion: no-preference) {
    dialog.search-overlay[open] { animation: search-overlay-in 0.2s ease; }
    @keyframes search-overlay-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ==================== Side drawer ==================== */
dialog.side-drawer {
    border: none; padding: 0; margin: 0; position: fixed; inset: 0 auto 0 0; height: 100vh;
    width: 80vw; max-width: 360px; background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
dialog.side-drawer[open] { transform: translateX(0); }
dialog.side-drawer::backdrop { background: rgba(11, 18, 32, 0.45); }
@media (prefers-reduced-motion: reduce) { dialog.side-drawer { transition: none; } }

.drawer-header {
    padding: var(--space-4); border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.drawer-greeting { font-weight: 700; font-size: 1.05rem; margin: 0; }
.drawer-auth-links { display: flex; gap: var(--space-2); }

.drawer-body { padding: var(--space-3) 0; overflow-y: auto; height: calc(100vh - 73px); }

.drawer-category-list, .drawer-menu-list { list-style: none; margin: 0; padding: 0; }
.drawer-category-summary, .drawer-category-link, .drawer-menu-link {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    width: 100%; padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--color-text);
    font-weight: 600; font-size: 0.95rem; cursor: pointer; list-style: none; background: none; border: none; font-family: inherit;
    text-align: left;
}
.drawer-category-summary::-webkit-details-marker { display: none; }
.drawer-category-group[open] .drawer-chevron { transform: rotate(180deg); }
.drawer-chevron { transition: transform 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .drawer-chevron { transition: none; } }

.drawer-subcategory-list { list-style: none; margin: 0; padding: 0 0 var(--space-2); background: var(--color-surface-alt); }
.drawer-subcategory-link {
    display: block; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
    color: var(--color-text-muted); text-decoration: none; font-weight: 500; font-size: 0.9rem;
}
.drawer-subcategory-link:hover, .drawer-subcategory-link:focus-visible { color: var(--color-accent-dark); }

/* var(--color-sale) is ~2.6:1 against white — nowhere near WCAG AA's 4.5:1 for text this size,
   so this accent link uses a deliberately darker shade of the same hue instead. */
.drawer-menu-button { width: 100%; }
.drawer-divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-2) 0; }

/* ==================== Bottom nav ==================== */
/* Reserve room at the foot of the page so the floating pill never overlaps the last bit of
   content. Checkout still renders the default bottom nav until Phase 6 introduces
   _CheckoutLayout (which drops it entirely) — until then it needs this padding too. */
body { padding-bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom) + var(--space-4)); }

.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    pointer-events: none;
    transition: transform 0.25s ease;
}
.bottom-nav.is-hidden, .bottom-nav.is-keyboard-hidden { transform: translateY(150%); }
@media (prefers-reduced-motion: reduce) { .bottom-nav { transition: none; } }
/* Desktop nav (top bar) replaces it entirely — spec: "Bottom nav is hidden" at desktop.
   Product pages keep their bottom padding at desktop too, since the add-to-cart bar (which
   replaces the bottom nav there) stays visible at every width — see its own rule below. */
@media (min-width: 992px) {
    .bottom-nav { display: none; }
    body:not([data-nav-mode="product"]) { padding-bottom: 0; }
}

.bottom-nav-back {
    pointer-events: auto;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-surface); color: var(--color-text);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16);
    flex-shrink: 0;
}
.bottom-nav-back:hover, .bottom-nav-back:focus-visible { background: var(--color-surface-alt); }

.bottom-nav-pill {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--space-1);
    background: var(--color-navy);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-2);
    box-shadow: 0 10px 30px rgba(11, 18, 32, 0.35);
}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--color-on-navy);
    min-width: var(--tap-target-min);
    min-height: var(--tap-target-min);
}
.bottom-nav-icon-circle {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bottom-nav-item.is-active { color: #fff; }
.bottom-nav-item.is-active .bottom-nav-icon-circle {
    background: var(--color-surface); color: var(--color-navy);
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.bottom-nav-label { font-size: 0.62rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bottom-nav-icon-circle { transition: none; } }

/* ==================== Toast ==================== */
.toast-region {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom) + var(--space-3));
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: calc(100% - var(--space-6));
    max-width: 420px;
    pointer-events: none;
}
.toast {
    background: var(--color-navy);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
/* A dedicated shade, not var(--color-danger) — that value is ~4:1 against white text, just
   under WCAG AA's 4.5:1 for text this size. */
.toast.toast-error { background: #c93838; }
.toast a { color: #fff; font-weight: 700; text-decoration: underline; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ==================== Category chips (Home sub-nav) ==================== */
.category-chip-row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-chip-row::-webkit-scrollbar { display: none; }
.category-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--color-text);
    width: 72px;
    scroll-snap-align: start;
}
.category-chip-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-chip-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.category-chip-label { font-size: 0.72rem; font-weight: 600; text-align: center; line-height: 1.2; }

/* ==================== Filter / Sort bar (Listing sub-nav) ==================== */
.filter-sort-bar {
    position: sticky;
    top: var(--topbar-total-height);
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transition: transform 0.25s ease;
}
.filter-sort-bar.is-hidden { transform: translateY(calc(-1 * var(--topbar-total-height))); }
@media (prefers-reduced-motion: reduce) { .filter-sort-bar { transition: none; } }
/* Desktop gets the left sidebar instead (Products/Index.cshtml shows it from lg up) — the sheet
   pattern is mobile-first only, matching the sidebar's own d-none-d-lg-block split. */
@media (min-width: 992px) { .filter-sort-bar { display: none; } }

.filter-sort-row { display: flex; align-items: center; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
.filter-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-height: var(--tap-target-min);
}
.filter-sort-btn:hover, .filter-sort-btn:focus-visible { background: var(--color-surface-alt); }
.filter-count-badge {
    background: var(--color-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 1px 6px;
    min-width: 1.1rem;
    text-align: center;
}
.filter-sort-divider { width: 1px; height: 24px; background: var(--color-border); }
.filter-sort-select-form { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.filter-sort-select {
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    text-align: right;
}
.filter-sort-select:hover, .filter-sort-select:focus-visible { background: var(--color-surface-alt); }

.active-filter-chips {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 0 var(--space-3) var(--space-2);
    scrollbar-width: none;
}
.active-filter-chips::-webkit-scrollbar { display: none; }
.active-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
}
.active-filter-chip:hover, .active-filter-chip:focus-visible { background: var(--color-border); }
.active-filter-chip span[aria-hidden] { font-weight: 400; opacity: 0.7; }

/* ==================== Filter sheet (bottom sheet) ==================== */
dialog.filter-sheet {
    border: none;
    padding: 0;
    margin: 0;
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-surface);
    color: var(--color-text);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
dialog.filter-sheet[open] { transform: translateY(0); }
dialog.filter-sheet::backdrop { background: rgba(11, 18, 32, 0.4); }
@media (prefers-reduced-motion: reduce) { dialog.filter-sheet { transition: none; } }

.filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.filter-sheet-header h2 { margin: 0; font-size: 1.1rem; }

.filter-sheet-body {
    padding: var(--space-4);
    overflow-y: auto;
    max-height: calc(85vh - 140px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.filter-field { display: flex; flex-direction: column; gap: var(--space-1); }
.filter-field label { font-weight: 600; font-size: 0.85rem; }
.filter-field select, .filter-price-row input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    min-height: var(--tap-target-min);
}
.filter-price-row { display: flex; gap: var(--space-2); }
.filter-price-row input { flex: 1 1 0; min-width: 0; }
.filter-checkbox { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 0.9rem; }
.filter-checkbox input { width: 20px; height: 20px; }

.filter-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}
.filter-clear-link { color: var(--color-text-muted); text-decoration: underline; font-weight: 600; font-size: 0.9rem; }
.btn-brand-full {
    flex: 1 1 auto;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font: inherit;
    font-weight: 700;
    padding: var(--space-3);
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-height: var(--tap-target-min);
}
.btn-brand-full:hover { background: var(--color-accent-dark); }

/* ==================== Footer (v2) ==================== */
.site-footer-v2 {
    background: var(--color-navy);
    color: var(--color-on-navy);
    padding: var(--space-6) var(--space-4) var(--space-4);
}

.footer-cta {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    text-align: center;
}
.footer-cta-title { font-weight: 700; color: #fff; margin: 0 0 var(--space-1); }
.footer-cta-text { margin: 0 0 var(--space-3); font-size: 0.9rem; }
.footer-cta-button {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: #25D366; color: #fff; text-decoration: none; font-weight: 700;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: 0.9rem;
}

.footer-sections { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-section { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer-section summary {
    padding: var(--space-3) var(--space-1);
    font-weight: 700; color: #fff; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.footer-section summary::-webkit-details-marker { display: none; }
.footer-section summary::after { content: '+'; font-size: 1.2rem; font-weight: 400; }
.footer-section[open] summary::after { content: '\2212'; }
.footer-links { list-style: none; margin: 0; padding: 0 var(--space-1) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); font-size: 0.9rem; }
.footer-links a { color: var(--color-on-navy); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-links li { display: flex; align-items: center; gap: var(--space-2); }
.footer-about-text { font-size: 0.9rem; padding: 0 var(--space-1); margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.footer-about-text a { color: #fff; }

/* Desktop: 4 static columns instead of a collapsible accordion (spec: "Footer spreads into
   4 columns"). Content is force-shown regardless of the <details> open state, and the
   toggle affordance is hidden since there's nothing left to toggle. */
@media (min-width: 992px) {
    .footer-sections { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); border-top: none; }
    .footer-section { border-bottom: none; }
    .footer-section summary { cursor: default; pointer-events: none; padding: 0 0 var(--space-2); }
    .footer-section summary::after { display: none; }
    .footer-section > *:not(summary) { display: block !important; }
}

.footer-trust {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-payment-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.payment-badge {
    font-size: 0.72rem; font-weight: 600; padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-secure-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: 0.8rem; font-weight: 600; color: var(--color-success);
}

.footer-social { display: flex; gap: var(--space-2); padding: var(--space-4) 0; }
.footer-copyright { font-size: 0.8rem; color: var(--color-on-navy); margin: 0; }
.footer-credit-link { color: var(--color-on-navy); text-decoration: underline; }
.footer-credit-link:hover { color: #fff; }