/**
 * AAStore Consolidated Site CSS
 * Shipped CSS (single file): minimal grid + product UI + shared template styles
 *
 * Goals:
 * - Consistency (single source for shipped custom CSS)
 * - Bootstrap 5 / Bootswatch compatibility (use --bs-* variables)
 * - Performance (reduce <style> blocks + reduce extra requests)
 *
 * Last cleaned: 2026-06-02
 * Changes: removed duplicate @keyframes ctaPulse, consolidated pulse/ctaPulse
 *   into cta-heartbeat, trimmed font-family mega-selector, fixed h1.display-*
 *   override conflict, de-indented sidebar block, swapped hardcoded hex in
 *   sidebar/badge rules to --bs-* vars, stripped !important from sticky-bottom-bar,
 *   fixed broken comment block above clickable trust zone.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --product-img-fallback: url("/assets/images/noimage.jpg");
    --grid-cols-desktop: 4;

    /* System font stack */
    --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    /* Font weights */
    --font-weight-light:     300;
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    /* Font size scale (rem) */
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-md:   1.125rem;
    --font-size-lg:   1.25rem;
    --font-size-xl:   1.5rem;
    --font-size-2xl:  1.875rem;
    --font-size-3xl:  2.25rem;
    --font-size-4xl:  3rem;
    --font-size-5xl:  3.75rem;

    /* Line heights */
    --line-height-tight:   1.25;
    --line-height-snug:    1.375;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose:   2;

    /* Letter spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight:   -0.025em;
    --letter-spacing-normal:   0;
    --letter-spacing-wide:     0.025em;
    --letter-spacing-wider:    0.05em;
    --letter-spacing-widest:   0.1em;

    /* FOMO / urgency color tokens */
    --color-urgent:          #d32f2f;
    --color-urgent-light:    #fff5f5;
    --color-urgent-border:   #ffcdd2;
    --color-limited:         #c62828;
    --color-limited-bg:      #ffebee;
    --color-critical:        #b71c1c;
    --color-critical-bg:     #fff0f0;
    --color-critical-border: #ffbaba;
    --color-discount:        #ff6b6b;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FONT OVERRIDE
   Bootswatch themes override Bootstrap's font-family on a small set of
   elements. We reset only those that Bootswatch hard-codes; body inheritance
   handles everything else.
   Last reviewed: 2026-06-02. Do NOT remove without checking all live themes.
   ═══════════════════════════════════════════════════════════════════════════ */
body,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .btn {
    font-family: var(--font-family-sans) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    background-color: #f7f7f8 !important;
    font-family: var(--font-family-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── CANONICAL H1 ───────────────────────────────────────────────────────────
   Single master rule — change here, applies to every public page H1.
   Contextual variants (navbar logo, hero, static hero) are scoped below.
   ─────────────────────────────────────────────────────────────────────────── */
h1 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* Navbar logo text — scoped so it never bleeds to page H1s */
.navbar-brand h1,
.navbar-brand .text-logo {
    font-size: clamp(1rem, 6.2vw, 1.6rem) !important;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── CANONICAL H2 ───────────────────────────────────────────────────────────
   Single master rule — change here, applies to every public page H2.
   ─────────────────────────────────────────────────────────────────────────── */
h2 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/* ── CANONICAL H3 ───────────────────────────────────────────────────────────
   Single master rule — change here, applies to every public page H3.
   ─────────────────────────────────────────────────────────────────────────── */
h3 {
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* ── CANONICAL H4 ───────────────────────────────────────────────────────────
   Single master rule — change here, applies to every public page H4.
   ─────────────────────────────────────────────────────────────────────────── */
h4 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

/* ── CANONICAL H5 ───────────────────────────────────────────────────────────
   Bootstrap default (1.25rem) is larger than h4 (1rem) — override to restore
   correct descending hierarchy. font-weight 700 matches h1–h4.
   ─────────────────────────────────────────────────────────────────────────── */
h5 {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

/* ── CANONICAL H6 ───────────────────────────────────────────────────────────
   Bootstrap default (1rem) is the same as h4 — override so every level
   is visually distinct.
   ─────────────────────────────────────────────────────────────────────────── */
h6 {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

h1.display-6 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}

p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: var(--bs-body-color, #212529);
}

/* ── SCOPED H2/H3 OVERRIDES ─────────────────────────────────────────────────
   Section headings that live inside cards or tight UI contexts need a smaller
   font size than a full page-section h2. Scope by container — never use
   Bootstrap .h* utility classes on the element itself.
   ─────────────────────────────────────────────────────────────────────────── */

/* Store coupon strip title */
.store-coupon-strip h2 {
    font-size: 1rem;
    font-weight: 700;
}

/* Product card h3 (semantic h3 at card-title size) */
.js-product-card .card-title,
.product-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Section h2s inside the two-column new-arrivals / featured list */
.hp-list-header h2 {
    font-size: 1.1rem;
}

.lead-custom {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

/* Page header description (renderPageHeaderWithStats) */
.unified-page-header__description {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.6;
    color: var(--bs-secondary-color, #6c757d);
    max-width: 72ch;
}

/* ── Responsive font scale ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --font-size-3xl: 1.875rem;
        --font-size-2xl: 1.5rem;
        --font-size-xl:  1.25rem;
        --font-size-lg:  1.125rem;
    }
}

@media (max-width: 430px) {
    :root {
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
        --font-size-xl:  1.125rem;
        --font-size-lg:  1.0625rem;
        --font-size-md:  0.9375rem;
    }
    /* Hero H1 scoped override — hero uses .display-5, not bare h1 */
    .hero-text-container h1 {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 360px) {
    :root {
        --font-size-3xl: 1.25rem;
        --font-size-2xl: 1.125rem;
        --font-size-xl:  1rem;
        --font-size-lg:  0.9375rem;
        --font-size-md:  0.875rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED TEMPLATE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
    border-bottom: 1px solid var(--bs-border-color);
}

/* .navbar background is intentionally NOT set here.
   Bootswatch navbars colour themselves. Overriding to bg-light causes
   white-on-white on Minty and similar themes. */

.breadcrumb {
    background: transparent;
}

nav[aria-label="breadcrumb"] {
    margin-bottom: 1rem !important;
}

.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: none;
}
.loading-overlay.active { display: flex; }

.product-detail-image {
    transition: opacity 0.15s ease;
    filter: none;
    image-rendering: auto;
}
.product-detail-image[loading] { opacity: 0.8; }
.product-detail-image.loaded   { opacity: 1; }

/* Breadcrumb sizing */
@media (max-width: 768px) {
    .breadcrumb,
    .breadcrumb .breadcrumb-item,
    .breadcrumb .breadcrumb-item a,
    .breadcrumb .breadcrumb-item.active {
        font-size: 0.75rem !important;
    }
}

.breadcrumb-item.category-crumb,
.breadcrumb-item.category-crumb a {
    font-size: 0.75rem !important;
    color: var(--bs-secondary-color) !important;
    font-style: italic !important;
    opacity: 0.8 !important;
}
.breadcrumb-item.category-crumb a:hover {
    color: var(--bs-body-color) !important;
    opacity: 1 !important;
}

/* ── Static page hero ──────────────────────────────────────────────────────── */
.static-page-hero {
    background: var(--bs-primary);
    color: #fff !important;
    padding: 4rem 0;
    text-align: center;
    margin-bottom: 2rem;
}
.static-page-hero h1,
.static-page-hero h2,
.static-page-hero h3,
.static-page-hero p,
.static-page-hero .lead,
.static-page-hero .text-body-secondary,
.static-page-hero [class*="text-"] {
    color: #fff !important;
    opacity: 1 !important;
}

/* ── Trusted Partners store names ──────────────────────────────────────────── */
.merchant-card-hover .card-body h5 {
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: var(--bs-body-color) !important;
}

/* ── Mobile header logo/toggler alignment ──────────────────────────────────── */
@media (max-width: 400px) {
    .site-header-main-nav .container-xl {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .navbar-brand {
        margin-right: 8px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .site-logo {
        max-width: calc(100vw - 80px) !important;
        height: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   GRID & CARD LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.aa-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
@media (min-width: 992px) {
    .aa-product-grid {
        grid-template-columns: repeat(var(--grid-cols-desktop, 4), minmax(220px, 1fr));
    }
}

.aa-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

/* Product card rhythm */
.js-product-card.card,
.product-card.card,
.hotdeal-card.card {
    height: 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.js-product-card .card-body,
.product-card .card-body,
.hotdeal-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 15rem;
}

.js-product-card .product-name-container,
.product-card .product-name-container {
    min-height: 4.5em;
    height: 4.5em;
    overflow: hidden;
}

/* Clamp must live on the element that directly wraps the text, not the container */
.js-product-card .product-name-container .card-title,
.product-card .product-name-container .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    margin-bottom: 0;
}

.js-product-card .category-brand-container,
.product-card .category-brand-container {
    min-height: 1.5em;
    height: 1.5em;
    overflow: hidden;
}

.js-product-card .category-brand-container .product-card-meta,
.product-card .category-brand-container .product-card-meta {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.js-product-card .product-card-price-wrap,
.product-card .product-card-price-wrap {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
}

.js-product-card .button-container,
.product-card .button-container,
.hotdeal-button-wrap {
    margin-top: auto;
    min-height: 2.75rem !important;
    display: flex;
    align-items: flex-end;
    width: 100%;
}

/* Ensure inner grid wrapper stretches to fill full card width */
.js-product-card .button-container > div,
.product-card .button-container > div {
    flex: 1 1 100%;
    width: 100%;
}

.js-product-card .btn,
.product-card .btn,
.hotdeal-card .btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.2;
}

/* Product card image box */
.product-card-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: clamp(9.5rem, 34vw, 13.5rem);
    min-height: 0;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--bs-tertiary-bg);
    background-image: var(--product-img-fallback);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .product-card-img-wrap { height: clamp(11rem, 28vw, 14rem); }
}
@media (min-width: 992px) {
    .product-card-img-wrap { height: 12rem; }
}

.product-card-img {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0.5rem;
    display: block;
    background-color: transparent;
}
.product-card-img.product-card-img--hidden { display: none !important; }

/* ── CANONICAL link styles ──────────────────────────────────────────────────
   Replace scattered class="text-decoration-none text-primary" with scoped
   CSS rules. Change colour/behaviour here — never in PHP templates.
   ─────────────────────────────────────────────────────────────────────────── */

/* Product card title link */
.product-name-container .card-title a {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Product detail — specs/attributes table search tag links */
.specs-table a {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Coupon detail page — advertiser/brand link */
.coupon-advertiser-link {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Footer community link — absorbs d-inline-flex align-items-center gap-2 fw-semibold small */
.footer-community-link {
    color: var(--bs-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: var(--bs-small, 0.875em);
}

/* ── Product card meta (category • brand) ──────────────────────────────────
   Replaces h6.card-subtitle with a semantic p. Controls size, colour,
   and link style — nothing needed in PHP templates.
   ─────────────────────────────────────────────────────────────────────────── */
.product-card-meta {
    font-size: var(--font-size-sm);
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}
.product-card-meta a {
    color: inherit;
    text-decoration: none;
}
.product-card-meta a:hover {
    text-decoration: underline;
}

/* ── Discount circle badge ──────────────────────────────────────────────────
   Size/typography owned here — no inline style needed on the element.
   ─────────────────────────────────────────────────────────────────────────── */
.product-discount-badge {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    text-align: center;
    padding: 0.35rem;
}

.product-detail-discount-badge {
    z-index: 100 !important;
    pointer-events: auto;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    display: inline-grid;
    place-items: center;
    text-align: center;
    padding: 0.35rem;
    font-size: 0.9rem;
    line-height: 1;
}

.product-detail-discount-badge .product-discount-off,
.product-detail-discount-badge small {
    display: block;
    font-size: 0.65rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Trust/deal badge overlay (top-left of image) ───────────────────────────
   Replaces position-absolute + inline z-index/flex style.
   ─────────────────────────────────────────────────────────────────────────── */
.product-card-badge-overlay {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0.5rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* ── Price block ────────────────────────────────────────────────────────────
   All price link, current price, and was-price styling in one place.
   ─────────────────────────────────────────────────────────────────────────── */
.product-card-price-wrap a {
    text-decoration: none;
}
.product-card-price {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--bs-body-color);
}
.product-card-price-was {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Price verified timestamp ───────────────────────────────────────────────── */
.product-card-price-verified {
    font-size: var(--font-size-sm);
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Premium trust badge ────────────────────────────────────────────────────── */
.product-card-premium-badge {
    font-size: var(--font-size-sm);
}

/* h4 inside product cards */
.js-product-card .card h4,
.product-card .card h4 {
    line-height: 1.3;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 5.2rem;
    height: 5.2rem;
}

/* Clickable cards */
.js-product-card[data-go-url] { cursor: pointer; }
.js-product-card[data-go-url]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Category-brand-store container */
.card .category-brand-store { line-height: 1.2 !important; display: block !important; }
.card .category-brand-store span { display: inline !important; }
.card .category-brand-store span:not(:last-child)::after {
    content: ' - ' !important;
    color: var(--bs-secondary-color) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════════════════ */

#global-search-form { width: 100%; }

.search-bar-input-group {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}
.search-bar-input-group .form-control { flex: 1 1 auto; min-width: 0; width: 0; }

@media (max-width: 991.98px) {
    .search-btn-text { display: none; }
    .search-bar-input-group .btn {
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
        flex: 0 0 auto;
        min-width: 52px;
    }
    .search-bar-input-group .btn-lg {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        min-width: 48px;
    }
}

/* ── Search clear button ────────────────────────────────────────────────────── */
.search-clear-btn {
    position: absolute;
    right: 90px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem;
    display: none;
}
.search-clear-btn.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-clear-btn:hover { color: var(--bs-body-color); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD TEXT COLOR HELPERS (hotdeal colored backgrounds)
   ═══════════════════════════════════════════════════════════════════════════ */

.card .card-text .bg-success,
.card .card-text .bg-danger,
.card .card-text .bg-info,
.card .card-text .bg-primary,
.card .card-text .bg-success *,
.card .card-text .bg-danger *,
.card .card-text .bg-info *,
.card .card-text .bg-primary * {
    color: var(--bs-white) !important;
}

.card .card-text .bg-warning,
.card .card-text .bg-warning * {
    color: var(--bs-dark) !important;
}

.card .card-text .bg-success .text-decoration-line-through,
.card .card-text .bg-danger .text-decoration-line-through,
.card .card-text .bg-info .text-decoration-line-through,
.card .card-text .bg-primary .text-decoration-line-through {
    color: var(--bs-white) !important;
    text-decoration-color: rgba(255, 255, 255, 0.6) !important;
}
.card .card-text .bg-warning .text-decoration-line-through {
    color: var(--bs-dark) !important;
    text-decoration-color: rgba(0, 0, 0, 0.45) !important;
}

/* ── Deal badge pills ───────────────────────────────────────────────────────── */
.card-deal-badge {
    display: block;
    width: fit-content;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3em 0.65em;
    border-radius: 2em;
    line-height: 1.4;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOT DEALS — SAVINGS PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.hotdeal-savings-panel-link--centered { max-width: 19.5rem; margin-left: auto; margin-right: auto; }

.hotdeal-savings-panel {
    position: relative;
    z-index: 2;
    line-height: 1.3;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        0 0.35rem 0 rgba(0, 0, 0, 0.28),
        0 0.85rem 1.75rem rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        0 0 40px rgba(255, 200, 80, 0.12) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
}
.hotdeal-savings-panel--centered  { text-align: center; }
.hotdeal-savings-panel--prominent { font-size: 1.04rem; }

.hotdeal-savings-highlight {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem 0.65rem;
    padding: 0.55rem 0.65rem 0.65rem;
    margin: 0 0 0.65rem;
    border-radius: 0.85rem;
    background: linear-gradient(165deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.07) 45%, rgba(0,0,0,0.12) 100%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0.4rem 1rem rgba(0,0,0,0.28);
}

.hotdeal-savings-chip {
    display: inline-block;
    color: #fff !important;
    font-weight: 900;
    font-size: clamp(0.95rem, 2.8vw, 1.18rem);
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-decoration: none !important;
    text-shadow: 0 0 14px rgba(255,235,120,0.95), 0 0 22px rgba(255,180,60,0.55), 0 2px 0 rgba(0,0,0,0.35);
}

.hotdeal-savings-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    margin-top: 0.35rem;
    line-height: 1.45;
    color: #fff !important;
}
.hotdeal-savings-row--now {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hotdeal-savings-label {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 700;
    font-size: 0.88rem;
}
.hotdeal-savings-was {
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-size: 0.9rem;
    opacity: 0.92;
}
.hotdeal-savings-now-price {
    color: #fff !important;
    font-weight: 900;
    font-size: clamp(1.05rem, 3vw, 1.28rem);
    text-shadow: 0 0 12px rgba(180,255,200,0.45), 0 2px 4px rgba(0,0,0,0.35);
}

.hotdeal-savings-panel-link { outline: none; }
.hotdeal-savings-panel-link:focus-visible .hotdeal-savings-panel,
.hotdeal-savings-panel-link:hover .hotdeal-savings-panel,
.hotdeal-savings-panel:hover {
    transform: translateY(-7px) scale(1.03);
    box-shadow:
        0 0.55rem 0 rgba(0, 0, 0, 0.22),
        0 1.15rem 2.35rem rgba(0, 0, 0, 0.42),
        0 0 0 2px rgba(255, 255, 255, 0.45),
        0 0 36px rgba(255, 210, 90, 0.45),
        0 0 52px rgba(var(--bs-danger-rgb, 220, 53, 69), 0.35) !important;
    z-index: 8;
}

@media (prefers-reduced-motion: reduce) {
    .hotdeal-savings-panel,
    .hotdeal-savings-panel-link:hover .hotdeal-savings-panel,
    .hotdeal-savings-panel:hover {
        transition: none;
        transform: none;
    }
}

.hotdeal-button-wrap { width: 100%; }

.hotdeal-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    will-change: transform;
}
.hotdeal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}
.hotdeal-cta-btn {
    min-width: 11rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* New Arrivals hover */
.new-arrival-item:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.new-arrival-item:hover span.text-body { color: var(--bs-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-static-bg {
    position: relative;
    min-height: 520px;
    background-image: var(--hero-bg-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bs-secondary-bg, #f8f9fa);
    border-radius: var(--bs-border-radius-lg, 1rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}

.hero-bg-picture,
.hero-bg-image,
.hero-overlay {
    border-radius: inherit !important;
    overflow: hidden;
}
.hero-bg-image {
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero-overlay  { z-index: 1; }
.hero-text-container { z-index: 2; max-width: 100%; }

@media (min-width: 992px) {
    .hero-text-container { max-width: 75%; width: 75%; }
}

.hero-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
}

.hero-stat-tile .bi,
.hero-stat-tile i {
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.hero-btn {
    min-height: 2.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, opacity 0.2s ease;
    will-change: transform;
}
.hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* Deals button — brand red, intentional override independent of theme */
.btn-hero-deals {
    background-color: #d4220e !important;
    border-color: #c01f0d !important;
    color: #fff !important;
}
.btn-hero-deals:hover,
.btn-hero-deals:focus {
    background-color: #b51d0c !important;
    border-color: #a01909 !important;
    color: #fff !important;
}

/* Hero: allow stats row to expand — never clip on mobile */
.site-hero-final { max-height: none !important; overflow: visible !important; }
.hero-stats-row  { flex-wrap: nowrap; }

.hero-stat-tile {
    min-height: 3rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero-stat-count { font-size: 1rem; }
.hero-stat-label {
    font-size: 0.65rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .hero-static-bg { min-height: 460px; max-height: none; }
}

@media (max-width: 575.98px) {
    .site-hero-final, .hero-bg-picture, .hero-bg-image { max-height: none !important; }
    .hero-text-container .display-5 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.6rem !important;
    }
    .hero-text-container .fs-5 {
        font-size: 0.95rem !important;
        margin-bottom: 0.85rem !important;
    }
    .hero-overlay {
        background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.60) 70%, rgba(0,0,0,0.25) 100%) !important;
    }
}

@media (max-width: 430px) {
    .site-hero-final, .hero-bg-picture, .hero-bg-image, .hero-section { max-height: none !important; }
    .hero-static-bg {
        min-height: 360px;
        padding: 1.25rem 1rem !important;
    }
    .hero-text-container .display-5 {
        font-size: 1.35rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.25 !important;
    }
    .hero-text-container .fs-5 {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }
    .hero-btn {
        min-height: 2.75rem !important;
        font-size: 0.9rem !important;
        padding: 0 0.65rem !important;
    }
    .hero-btn-grid { gap: 0.5rem !important; }
    .hero-stats-row {
        --bs-gutter-x: 0.35rem;
        margin-top: 0.6rem !important;
    }
    .hero-stat-tile {
        min-height: 2.65rem;
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }
    .hero-stat-count { font-size: 0.88rem; }
    .hero-stat-label { font-size: 0.55rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL — HOVER ANIMATIONS & PRICE
   ═══════════════════════════════════════════════════════════════════════════ */

.price-alert { font-size: 1.25rem; margin-bottom: 0; }
.price-alert .price-display { font-size: 1.5rem; font-weight: 700; color: inherit; text-decoration: none; }
.price-alert .price-cents   { font-size: inherit; font-weight: inherit; }
.price-alert .savings-badge {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border: 1px solid var(--bs-success-border-subtle);
}
.price-alert .savings-cents { font-size: 0.9rem; font-weight: 600; }

.product-detail-card {
    transition: box-shadow 0.15s ease;
    position: relative;
    overflow: visible;
    animation: slideInLeft 0.3s ease;
    will-change: transform;
}
.product-detail-card::before,
.product-detail-card::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}
.product-detail-card::before { left: -20px; }
.product-detail-card::after  { right: -20px; }
.product-detail-card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
.product-detail-card:hover::before { opacity: 1; left: -30px; }
.product-detail-card:hover::after  { opacity: 1; right: -30px; }

.product-arrow-left,
.product-arrow-right {
    position: absolute;
    top: 66.67%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    opacity: 1;
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-decoration: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.product-arrow-left  { left: 8px; }
.product-arrow-right { right: 8px; }
.product-arrow-left:hover,
.product-arrow-right:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.08);
    color: #fff;
    text-decoration: none;
}

.product-image-gallery {
    transition: transform 0.15s ease;
    animation: slideInRight 0.4s ease;
}
.product-image-gallery:hover { transform: scale(1.005); }

.product-discount-badge-wrap,
.product-detail-discount-badge {
    z-index: 100 !important;
    pointer-events: auto;
}

.product-detail-image-container.product-image-gallery {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    background-image: var(--product-img-fallback, url("/assets/images/noimage.jpg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.product-detail-main-img { position: relative; z-index: 1; }
.product-detail-main-img.product-detail-main-img--hidden { display: none !important; }

.product-detail-image img { transition: transform 0.15s ease, filter 0.15s ease; }
.product-detail-image:hover img { transform: scale(1.005); filter: brightness(1.02); }

.product-info-section {
    transition: background-color 0.15s ease;
    animation: slideInLeft 0.5s ease;
}
.product-info-section:hover {
    background-color: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.6);
}

.product-title { transition: color 0.15s ease; position: relative; }
.product-title:hover { color: var(--bs-primary); }
.product-title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
    transition: width 0.15s ease;
}
.product-title:hover::after { width: 100%; }

.product-price-section { transition: color 0.15s ease; }
.product-price-section:hover { color: var(--bs-primary); }

.go-link {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}
.go-link:hover { box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2); }
.go-link::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.15s ease;
}
.go-link:hover::before { left: 100%; }

.related-product-card { transition: box-shadow 0.15s ease; }
.related-product-card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.product-description-section { transition: opacity 0.15s ease; }
.product-description-section:hover { opacity: 0.95; }

.product-tags .badge { transition: background-color 0.15s ease; }
.product-tags .badge:hover { background-color: var(--bs-primary); color: var(--bs-white); }

.share-button { transition: opacity 0.15s ease; }
.share-button:hover { opacity: 0.8; }

.carousel-control-prev,
.carousel-control-next { transition: background-color 0.15s ease; }
.carousel-control-prev:hover,
.carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.1); }

.accordion-button:hover { background-color: var(--bs-tertiary-bg); }

/* Clickable trust zone */
.product-info-section a.d-block.text-reset {
    cursor: pointer;
    border-radius: var(--bs-border-radius, 0.375rem);
    transition: background-color 0.15s ease;
    padding: 0.5rem;
    margin: -0.5rem;
}
.product-info-section a.d-block.text-reset:hover {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04);
    text-decoration: none !important;
}

/* Mobile hover overrides */
@media (max-width: 768px) {
    .product-detail-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); }
    .product-info-section:hover { background-color: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.35); }
    .product-price-section:hover { color: var(--bs-secondary-color); }
    .go-link:hover { background-color: var(--bs-tertiary-bg); }
}

@keyframes slideInLeft  { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(20px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }


/* ═══════════════════════════════════════════════════════════════════════════
   CTA ANIMATIONS
   Consolidated: cta-heartbeat covers all button pulse use-cases.
   .animate-pulse and .btn-cta-pulse both use it.
   prefers-reduced-motion silences all animations globally.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cta-heartbeat {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(var(--bs-primary-rgb, 13,110,253), 0.40); }
    14%  { transform: scale(1.05); box-shadow: 0 0 0 0   rgba(var(--bs-primary-rgb, 13,110,253), 0.40); }
    28%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb, 13,110,253), 0); }
    42%  { transform: scale(1.03); box-shadow: 0 0 0 0   rgba(var(--bs-primary-rgb, 13,110,253), 0); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Main inline CTA + low-ticket pulse buttons share the same keyframe */
.product-cta-btn,
.animate-pulse,
.btn-cta-pulse {
    animation: cta-heartbeat 2.4s ease-in-out infinite !important;
    transform-origin: center;
    will-change: transform;
}

.product-cta-btn:hover,
.product-cta-btn:focus {
    animation-play-state: paused !important;
}

/* Sticky bar button — pointer-events off (parent <a> handles tap) */
.sticky-buy-btn {
    animation: cta-heartbeat 2.4s ease-in-out infinite !important;
    pointer-events: none !important;
    transform-origin: center;
    will-change: transform;
}
.sticky-bottom-bar:active .sticky-buy-btn,
.sticky-bottom-bar:focus-within .sticky-buy-btn {
    animation-play-state: paused !important;
}

/* Sticky bar breathe (kept for legacy class references, same timing) */
@keyframes sticky-btn-breathe {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 13,110,253), 0.35); }
    50%  { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb, 13,110,253), 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 13,110,253), 0); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY BOTTOM BAR (mobile CTA ribbon)
   ═══════════════════════════════════════════════════════════════════════════ */

.sticky-bottom-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1050;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    padding: 1rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    display: flex;
}
.sticky-bottom-bar.active { transform: translateY(0); }
.sticky-bottom-bar:active { background-color: var(--bs-body-bg, #fff); }

.sticky-bottom-bar .sticky-thumb {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 4px;
    background-color: var(--bs-secondary-bg, #f8f9fa);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECS TABLE — mobile collapse
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .specs-table { border: none !important; background: transparent !important; }
    .specs-table thead,
    .specs-table th { display: none !important; }
    .specs-table tbody { display: block !important; width: 100% !important; }
    .specs-table tr {
        display: block !important;
        background: var(--bs-card-bg, #ffffff) !important;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
        border-radius: var(--bs-border-radius, 8px) !important;
        margin-bottom: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
        width: 100% !important;
    }
    .specs-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        border-bottom: 1px dashed var(--bs-border-color, #dee2e6) !important;
        padding: 0.5rem 0 !important;
        font-size: 0.85rem !important;
        text-align: right !important;
        width: 100% !important;
    }
    .specs-table td:last-child { border-bottom: none !important; }
    .specs-table td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--bs-secondary-color, #6c757d) !important;
        text-align: left !important;
        margin-right: 0.5rem !important;
        font-size: 0.85rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUTHOR BOX, REASSURANCE & SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.author-avatar {
    width: 90px; height: 90px;
    object-fit: cover;
    border: 3px solid var(--bs-body-bg);
}
.reassurance-icon { font-size: 1.5rem; color: var(--bs-primary); }

.author-bio-card {
    border-color: rgba(13, 110, 253, 0.15);
    background-color: rgba(13, 110, 253, 0.04);
}
.author-card-row { gap: 1rem; }
.author-card-meta h3 { margin-bottom: 0.5rem; }

.product-store-count-badge { font-size: 0.95rem; padding: 0.45rem 0.8rem; }
.product-info-trust-zone   { border-radius: 0.75rem; }
.product-info-trust-icon   { margin-right: 0.5rem; font-size: 1rem; }
.product-cta-subtext       { display: block; margin-top: 0.35rem; font-size: 0.95rem; opacity: 0.85; }

/* product-notjoined-card: use --bs-body-bg so dark themes stay dark */
.product-notjoined-card { background-color: var(--bs-body-bg, #ffffff); }

/* Sidebar — all hex replaced with --bs-* vars for dark-theme compatibility */
.sidebar-card {
    background: var(--bs-body-bg, #fff) !important;
    color: var(--bs-body-color) !important;
}
.sidebar-panel-title  { color: var(--bs-body-color) !important; }
.sidebar-panel-action { font-size: 0.75em; color: var(--bs-secondary-color) !important; }
.sidebar-panel-link {
    background: var(--bs-body-bg, #fff) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
.sidebar-count-badge {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
}

.compact-dir-more  { font-size: 0.75em; }
.compact-dir-link  { font-size: 0.85rem; }
.compact-dir-link:hover { text-decoration: underline !important; }
.compact-dir-count { font-size: 0.7rem; }

.search-landing-form { max-width: 500px; }

.site-wing{position:fixed;top:50%;transform:translateY(-50%);width:160px;z-index:90;display:none;overflow:hidden;}
.site-wing-left{right:calc(50% + 660px + 16px);}
.site-wing-right{left:calc(50% + 660px + 16px);}
@media(min-width:1668px){.site-wing{display:block;}}

.footer-social-icon { font-size: 1.6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   STORE DIRECTORY CARD GRID
   Styles for the /stores/ directory listing in public_html/page_auxiliary.php
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-wrap { margin-top: 1.5rem; }
.sc-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sc-card:hover,
.sc-card:focus-within {
    border-color: rgba(var(--bs-primary-rgb), .35);
    box-shadow: 0 .75rem 1.75rem rgba(15,23,42,.09);
    transform: translateY(-2px);
}
.sc-avatar {
    width: 72px; height: 72px;
    border-radius: 1rem;
    display: grid; place-items: center;
    font-size: 2rem; font-weight: 800; line-height: 1;
    flex-shrink: 0; text-transform: uppercase; color: #1d4ed8;
    background: #f8f9ff;
    border: 1px solid #e9ecf4;
}
.sc-av-a,.sc-av-b { background: #eff6ff; color: #1d4ed8; }
.sc-av-c,.sc-av-d { background: #7c3aed; }
.sc-av-e,.sc-av-f { background: #0891b2; }
.sc-av-g,.sc-av-h { background: #16a34a; }
.sc-av-i,.sc-av-j { background: #b45309; }
.sc-av-k,.sc-av-l { background: #be185d; }
.sc-av-m,.sc-av-n { background: #0f766e; }
.sc-av-o,.sc-av-p { background: #9333ea; }
.sc-av-q,.sc-av-r { background: #dc2626; }
.sc-av-s,.sc-av-t { background: #2563eb; }
.sc-av-u,.sc-av-v { background: #0891b2; }
.sc-av-w,.sc-av-x { background: #15803d; }
.sc-av-y,.sc-av-z { background: #7c3aed; }
.sc-av-num        { background: #64748b; }
.sc-name {
    font-size: 1.05rem;
    font-weight: 700; line-height: 1.2; overflow-wrap: anywhere;
}
.sc-name a { color: inherit !important; text-decoration: none !important; }
.sc-name a:hover { text-decoration: underline !important; }
.sc-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.sc-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 600;
    padding: .22rem .52rem; border-radius: 999px; line-height: 1; white-space: nowrap;
}
.sc-badge-verified  { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.sc-badge-active    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.sc-badge-curated   { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.sc-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.sc-metric {
    border: 1px solid var(--bs-border-color); border-radius: .375rem;
    padding: .55rem .6rem; background: var(--bs-light, #f8f9fa); text-align: center;
}
.sc-metric strong { display: block; font-size: 1.1rem; line-height: 1; }
.sc-metric span   { font-size: .72rem; color: var(--bs-secondary-color, #6c757d); }
.sc-links-label { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); margin-bottom: .35rem; }
.sc-pill-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-pill-links a {
    display: inline-block; font-size: .8rem;
    color: var(--bs-body-color);
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px; padding: .2rem .55rem;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.sc-pill-links a:hover {
    background: rgba(var(--bs-primary-rgb),.08);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb),.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DESCRIPTION TOGGLE (CSS-only checkbox)
   ═══════════════════════════════════════════════════════════════════════════ */

/* GRID COLUMN EQUAL HEIGHT HELPERS */
.grid-col-eq { display: flex; align-items: stretch; }
.grid-col-eq > .card, .grid-col-eq > a { height: 100%; display: flex; flex-direction: column; }
.grid-col-eq .card-body { flex: 1 1 auto; }

/* Merchant favicon wrapper used on homepage partner grid */
.merchant-favicon-wrap { height: 32px; display: flex; align-items: center; justify-content: center; }
.merchant-favicon { border-radius: 6px; object-fit: contain; display: block; }

/* ── Footer badge row (icon + title + subtitle tiles) ───────────────────────
   Replaces repeated utility chains in template_footer.php badge loop.
   ─────────────────────────────────────────────────────────────────────────── */
.footer-badge-link {
    display: flex;
    align-items: stretch;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.footer-badge-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0.5rem;
}
.footer-badge-title {
    margin-bottom: 0;
    font-weight: 700;
    font-size: var(--bs-small, 0.875em);
}


.desc-toggle {
    position: absolute;
    opacity: 0; width: 0; height: 0;
    pointer-events: none;
}
.desc-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.75rem 0.3rem 0;
    border: none;
    background: none;
    transition: color 0.15s ease;
}
.desc-toggle-label:hover { color: var(--bs-link-hover-color, #0a58ca); }

.desc-toggle-label .btn-text::before         { content: "Show description"; }
.desc-toggle:checked ~ .desc-toggle-label .btn-text::before { content: "Hide description"; }

.desc-toggle-label .bi-chevron-down {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.85rem;
}
.desc-toggle:checked ~ .desc-toggle-label .bi-chevron-down { transform: rotate(180deg); }

.product-description-text { display: none; margin-top: 0.5rem; }
.desc-toggle:checked ~ .product-description-text { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE META ROW TOGGLE (category/brand/store below product H1)
   ═══════════════════════════════════════════════════════════════════════════ */

.meta-row-toggle {
    position: absolute;
    opacity: 0; width: 0; height: 0;
    pointer-events: none;
}
.meta-row-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    user-select: none;
    margin-bottom: 0.35rem;
    padding: 0.15rem 0;
}
.meta-row-toggle-label:hover { color: var(--bs-body-color); }

.meta-chevron {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    will-change: transform;
}
.meta-row-toggle:checked ~ .meta-row-toggle-label .meta-chevron { transform: rotate(180deg); }

.meta-show-txt { display: inline; }
.meta-hide-txt { display: none; }
.meta-row-toggle:checked ~ .meta-row-toggle-label .meta-show-txt { display: none; }
.meta-row-toggle:checked ~ .meta-row-toggle-label .meta-hide-txt { display: inline; }

@media (max-width: 767.98px) {
    .meta-row-content { display: none !important; }
    .meta-row-toggle:checked ~ .meta-row-toggle-label ~ .meta-row-content,
    .meta-row-toggle:checked ~ .meta-row-content {
        display: flex !important;
        flex-wrap: wrap;
        margin-top: 0.35rem;
    }
}
@media (min-width: 768px) {
    .meta-row-toggle-label { display: none !important; }
    .meta-row-content { display: flex !important; margin-bottom: 0.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RELATED DEALS CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.related-deal-card {
    cursor: pointer;
    color: inherit !important;
    border: 0.5px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: visible;
    will-change: transform;
}
.related-deal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    color: inherit !important;
    text-decoration: none !important;
}
.related-deal-card:active { transform: translateY(-1px); }

.related-deal-img-wrap {
    position: relative;
    background: var(--bs-secondary-bg, #f8f9fa);
    overflow: visible;
}

/* Discount badge — uses --bs-danger so it follows the active theme */
.related-deal-badge {
    position: absolute;
    top: -10px; right: -10px;
    width: 56px; height: 56px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    box-shadow: 0 2px 6px rgba(220,53,69,.45);
    pointer-events: none;
    z-index: 10;
    white-space: pre-line;
}

.related-deal-name {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-body-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.related-deal-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.related-deal-price { font-size: 1rem; font-weight: 700; color: var(--bs-body-color); }
.related-deal-was   { font-size: 0.78rem; color: var(--bs-secondary-color, #6c757d); text-decoration: line-through; }
.related-deal-store {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-deal-btn     { pointer-events: none; font-size: 0.8rem; }
.related-deal-savings { font-size: 0.75rem; font-weight: 600; color: #16a34a; margin: 0; }

.related-items-link { color: inherit; display: block; }
.related-items-link:hover, .related-items-link:focus { text-decoration: none; }

/* Featured Pick badge — gold circle */
.related-deal-badge--featured {
    background: #f59e0b;
    color: #1a1a1a;
    font-size: 0.68rem;
    box-shadow: 0 2px 6px rgba(245,158,11,.45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.scroll-to-top {
    position: fixed;
    bottom: 1.5rem; right: 1.25rem;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.scroll-to-top.visible { opacity: 1; pointer-events: auto; }
.scroll-to-top:hover   { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.22); }
@media (prefers-reduced-motion: reduce) { .scroll-to-top { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT IMAGE PEEK STRIP
   ═══════════════════════════════════════════════════════════════════════════ */

.product-peek-strip {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
    height: 52px;
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    padding: 6px;
    box-sizing: border-box;
}

.product-peek-ghost {
    flex: 0 0 44px;
    border-radius: 4px;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-peek-ghost--left::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 100%);
    pointer-events: none;
}
.product-peek-ghost--right::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 100%);
    pointer-events: none;
}
.product-peek-ghost img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0.45; filter: blur(1.5px);
    display: block;
}

.product-peek-active {
    flex: 1 1 auto;
    border-radius: 4px;
    background: var(--bs-body-bg, #fff);
    border: 2px solid var(--bs-primary, #0d6efd);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-peek-active img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block;
}

.product-peek-count {
    position: absolute;
    bottom: 3px; right: 4px;
    font-size: 0.65rem; font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1; z-index: 2;
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .product-peek-ghost { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.10); }
    .product-peek-ghost--left::after  { background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); }
    .product-peek-ghost--right::after { background: linear-gradient(to left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER BLOCK (.ph) — renderPageHeaderWithStats()
   Keep in sync with page_header_stats.php — no inline <style> needed.
   ═══════════════════════════════════════════════════════════════════════════ */

.ph { margin-bottom: .75rem; }
.ph h1 { margin-bottom: .2rem; line-height: 1.2; }
.ph__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    font-size: .82rem;
    color: var(--bs-secondary-color, #666);
    margin-bottom: .5rem;
    line-height: 1.6;
}
.ph__meta .sep { color: var(--bs-border-color, #ddd); padding: 0 .05rem; }
.ph__desc {
    font-size: .85rem;
    color: var(--bs-secondary-color, #666);
    margin: 0  auto .45rem;
    line-height: 1.45;
}

/* Shared dropdown — Sort, Brands, Stores, Related */
.ph__dd { position: relative; display: inline-block; }
.ph__dd > summary {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    cursor: pointer;
    font-size: .8rem;
    padding: .18rem .42rem;
    border-radius: .3rem;
    border: 1px solid var(--bs-border-color, #ccc);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #444);
    list-style: none;
    user-select: none;
    white-space: nowrap;
}
.ph__dd > summary::-webkit-details-marker { display: none; }
.ph__dd > summary .dd-caret { font-size: .58rem; color: var(--bs-secondary-color, #aaa); margin-left: .1rem; }
.ph__dd > summary .dd-label { color: var(--bs-secondary-color, #999); font-size: .74rem; margin-right: .1rem; }
.ph__dd__panel {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    z-index: 400;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #d0d0d0);
    border-radius: .4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .11);
    min-width: 160px;
    max-height: 260px;
    overflow-y: auto;
    padding: .25rem 0;
}
.ph__dd--right .ph__dd__panel { left: auto; right: 0; }
.ph__dd__panel a,
.ph__dd__panel span {
    display: block;
    padding: .32rem .85rem;
    font-size: .8rem;
    text-decoration: none;
    color: var(--bs-body-color, #333);
    white-space: nowrap;
}
.ph__dd__panel a:hover { background: var(--bs-tertiary-bg, #f4f6ff); color: var(--bs-primary); }
.ph__dd__panel .dd-active { font-weight: 600; color: var(--bs-primary); background: var(--bs-primary-bg-subtle, #eef3ff); }
.ph__dd__panel::-webkit-scrollbar { width: 4px; }
.ph__dd__panel::-webkit-scrollbar-thumb { background: var(--bs-border-color, #ddd); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL BLOCKS — category-editorial, brand-editorial, cat-intro
   Rendered by category_renderer.php, brand_renderer.php, store_renderer.php
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lead intro paragraph shown above the product grid */
.cat-intro {
    font-size: .93rem;
    color: var(--bs-secondary-color, #555);
    line-height: 1.6;
    margin: .5rem 0 1.1rem;
    max-width: 72ch;
}

/* SEO editorial block shown below pagination — categories */
.category-editorial {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color, #e9ecef);
    font-size: .9rem;
    line-height: 1.7;
    color: var(--bs-body-color, #333);
    max-width: 72ch;
}
.category-editorial h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.4rem 0 .4rem;
    color: var(--bs-heading-color, #1a1a2e);
}
.category-editorial h2:first-child { margin-top: 0; }
.category-editorial p { margin: 0 0 .7rem; }
.category-editorial strong { font-weight: 600; color: var(--bs-body-color, #222); }

/* SEO editorial block shown below pagination — brands & stores */
.brand-editorial,
.store-editorial {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color, #e9ecef);
    font-size: .9rem;
    line-height: 1.7;
    color: var(--bs-body-color, #333);
    max-width: 72ch;
}
.brand-editorial h2,
.store-editorial h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.4rem 0 .4rem;
    color: var(--bs-heading-color, #1a1a2e);
}
.brand-editorial h2:first-child,
.store-editorial h2:first-child { margin-top: 0; }
.brand-editorial p,
.store-editorial p { margin: 0 0 .7rem; }
.brand-editorial strong,
.store-editorial strong { font-weight: 600; color: var(--bs-body-color, #222); }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN FEATURE OVERLAY — admin_feature_overlay.php
   Only rendered when admin is browsing. Kept in site.css so <style> tags
   are not injected into page HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-feature-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: rgba(20, 20, 28, 0.94);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .78rem;
    padding: 7px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-feature-bar strong { color: #ffd966; }
.admin-feature-bar span   { opacity: .76; }
.admin-feature-bar .admin-bar-hi { color: #6cf17c; font-weight: 700; }

.admin-feature-form {
    position: absolute;
    top: 7px; left: 7px;
    z-index: 100;
    margin: 0; padding: 0;
    line-height: 1;
}
.admin-feature-form button {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    background: rgba(25, 135, 84, .92);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    transition: transform .12s, box-shadow .12s;
    padding: 0;
}
.admin-feature-form button:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .50);
}
.admin-feature-form.is-featured button {
    background: rgba(200, 140, 0, .95);
    border-color: #ffd966;
}
.admin-feature-form--inline {
    position: static;
    display: block;
    margin: .5rem 0 0;
    padding: 0;
    line-height: 1;
}
.admin-feature-form--inline button {
    width: 100%;
    height: auto;
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    gap: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Category list items (renderCategoriesListPageContent) ─────────────────── */
.category-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bs-body-bg, #fff) !important;
    color: var(--bs-body-color, #212529) !important;
    border-color: var(--bs-border-color, #dee2e6) !important;
}
.category-list-item a {
    color: var(--bs-body-color, #212529) !important;
    text-decoration: none;
}
.category-list-item a:hover { color: var(--bs-primary) !important; }
.category-list-item .list-item-count { color: var(--bs-secondary-color, #6c757d) !important; }

/* ── Footer misc ────────────────────────────────────────────────────────────── */
.footer-version-label {
    font-size: 0.7rem;
    color: #e8e8e8;
    letter-spacing: 0.03em;
    opacity: 0.45;
}
.footer-logo-credit { font-size: .7rem; }

/* ── Mobile sidebar toggle (footer) ────────────────────────────────────────── */
.mob-sidebar-chk {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.mob-sidebar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: .6rem 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    user-select: none;
}
.mob-sidebar-chevron {
    transition: transform .2s ease;
    font-size: .8rem;
}
.mob-sidebar-chk:checked ~ .mob-sidebar-label .mob-sidebar-chevron {
    transform: rotate(180deg);
}
.mob-sidebar-content { display: none; }
.mob-sidebar-chk:checked ~ .mob-sidebar-content { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER SCROLL ROWS (renderFiltersRow)
   ═══════════════════════════════════════════════════════════════════════════ */

.fsr{display:flex;align-items:flex-start;flex-wrap:nowrap;gap:.4rem;margin-bottom:.35rem;font-size:.82rem;overflow:hidden;}
.fsr__label{color:var(--bs-secondary-color);white-space:nowrap;flex-shrink:0;font-size:.75rem;padding-top:.2rem;}
.fsr__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.fsr__wrap::-webkit-scrollbar{display:none;}
.fsr__track{display:flex;flex-wrap:wrap;gap:.25rem .3rem;align-items:center;}
@media(max-width:575.98px){
    .fsr{flex-wrap:wrap;}
    .fsr__label{width:100%;padding-top:0;margin-bottom:.15rem;}
    .fsr__wrap{width:100%;}
}
.fsr__track a{
    display:inline-flex;align-items:center;
    padding:.15rem .55rem;
    font-size:.75rem;font-weight:400;white-space:nowrap;
    color:var(--bs-secondary-color);text-decoration:none;
    border:1px solid var(--bs-border-color);border-radius:999px;
    background:transparent;
    transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.fsr__track a:hover{
    color:var(--bs-body-color);
    border-color:var(--bs-secondary-color);
    background-color:var(--bs-secondary-bg,rgba(0,0,0,.04));
    text-decoration:none;
}
.fsr__track .dot{display:none;}
.fsr-section{margin-top:1.5rem;padding-top:.75rem;border-top:1px solid var(--bs-border-color,#dee2e6);}

/* ── Category editorial body ────────────────────────────────────────────────── */
.category-editorial{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--bs-border-color,#dee2e6);}
.category-editorial h2{font-size:1.1rem;font-weight:600;line-height:1.35;margin:1.25rem 0 .35rem;color:var(--bs-body-color);}
.category-editorial h3{font-size:1rem;font-weight:600;margin:1rem 0 .3rem;color:var(--bs-secondary-color);}
.category-editorial h4{font-size:0.9375rem;font-weight:600;margin:.85rem 0 .25rem;color:var(--bs-secondary-color);}
.category-editorial h5{font-size:0.875rem;font-weight:600;margin:.75rem 0 .25rem;color:var(--bs-secondary-color);}
.category-editorial p{font-size:.9rem;line-height:1.65;color:var(--bs-secondary-color);margin-bottom:.6rem;}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-card {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    border-radius: var(--bs-card-border-radius, .375rem);
}
.cta-card h1,
.cta-card h2,
.cta-card h3,
.cta-card h4,
.cta-card p,
.cta-card .lead {
    color: var(--bs-white) !important;
}
.cta-card .btn-cta-primary {
    background: var(--bs-white) !important;
    color: var(--bs-primary) !important;
    border: 2px solid var(--bs-white) !important;
}
.cta-card .btn-cta-primary:hover {
    background: transparent !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-white) !important;
}
.cta-card .btn-cta-secondary {
    background: transparent !important;
    color: var(--bs-white) !important;
    border: 2px solid var(--bs-white) !important;
}
.cta-card .btn-cta-secondary:hover {
    background: var(--bs-white) !important;
    color: var(--bs-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {

    .related-deal-card {
        background-color: var(--bs-card-bg, #1e1e2e) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
    .related-deal-card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }
    .related-deal-img-wrap { background: rgba(255, 255, 255, 0.05) !important; }
    .related-deal-savings  { color: #4ade80 !important; }
    .related-deal-store,
    .related-deal-was      { color: rgba(255, 255, 255, 0.55) !important; }

    .product-cta-btn.animate-pulse {
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 13, 110, 253), 0.5) !important;
    }

    .sticky-bottom-bar {
        background-color: rgba(30, 30, 46, 0.97) !important;
        border-top-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45) !important;
    }
    .sticky-bottom-bar:active { background-color: rgba(30, 30, 46, 1) !important; }
    .sticky-bottom-bar .sticky-thumb { background-color: rgba(255, 255, 255, 0.07) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO COMPONENT — inline style removals (June 2026 audit)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero bg image — object-fit lives here, not on the element */
.hero-bg-image {
    object-fit: cover;
    object-position: center;
}

/* Hero overlay gradient — default; adaptive CSS from generateAdaptiveHeroCSS()
   may add a nonce-scoped override for specific image brightness. */
.hero-overlay {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.50) 65%,
        rgba(0, 0, 0, 0.15) 85%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}

/* Hero button icons — alignment; eliminates style="vertical-align:middle;line-height:1;" */
.hero-btn .bi { vertical-align: middle; line-height: 1; }

/* ── Homepage list items — .hp-list-item / .hp-dot / .hp-list-name ──────────── */
.hp-list-item {
    min-width: 0;
    text-decoration: none;
}
.hp-list-item:hover { background: var(--bs-tertiary-bg); }
.hp-list-item:hover .text-body { color: var(--bs-link-color) !important; }

.hp-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.hp-dot--success { background: var(--bs-success); }
.hp-dot--warning { background: var(--bs-warning); }

.hp-list-name {
    flex-grow: 1;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Logo text-logo — navbar brand ─────────────────────────────────────────── */
.text-logo-wrap {
    font-weight: 900;
    letter-spacing: -0.5px;
    position: relative;
}
.text-logo-tld {
    font-weight: normal;
    opacity: 0.8;
}

/* ── Mobile offcanvas nav "Browse" section label ────────────────────────────── */
.mobile-nav-section-label {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Breadcrumb bar background ──────────────────────────────────────────────── */
.breadcrumb-bar-bg { background: rgba(0, 0, 0, 0.04); }


/* ═══════════════════════════════════════════════════════════════════════════
   INLINE-STYLE CONSOLIDATION — June 2026 audit (pass 2)
   Replaces all style="" attributes found across private/includes/modules/**
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Homepage: category-card icon size ──────────────────────────────────────── */
.icon-cat { font-size: 1.75rem; }

/* ── Icons at fixed pixel sizes ─────────────────────────────────────────────── */
.icon-xl   { font-size: 48px; }          /* singular_keyword_landing, etc.      */
.icon-sm-fixed { font-size: .9rem; flex-shrink: 0; }  /* product detail links  */

/* ── Sitemap / product-detail list-group theme-override ─────────────────────── */
/* Ensures list items stay light on dark Bootswatch themes (e.g. Darkly).       */
.sitemap-list-item,
.pdp-list-item {
    background: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}
.pdp-list-wrap { background: #fff !important; }
.sitemap-link { color: #212529 !important; }
.sitemap-count { color: #6c757d !important; }

/* ── Keywords hero section (keywords_renderer.php) ──────────────────────────── */
.kwh-badge-primary {
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.kwh-badge-secondary {
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.85);
    font-size: .72rem;
}
.kwh-hero-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}
.kwh-hero-desc {
    max-width: 560px;
    color: rgba(255,255,255,.85);
    font-size: .95rem;
    line-height: 1.55;
}
.kwh-hero-desc-alt {
    max-width: 560px;
    color: rgba(255,255,255,.80);
    font-size: .92rem;
    line-height: 1.5;
}
.kwh-search    { max-width: 480px; }
.kwh-trust-sep { opacity: .8; margin-left: .25rem; }

/* ── Coupon detail view (coupon_detail_view.php) ─────────────────────────────── */
.coupon-card         { border-radius: 16px; overflow: hidden; }
.coupon-card-accent  { height: 6px; }
.coupon-logo-wrap {
    width: 72px; height: 72px;
    background: #fff;
    padding: 8px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.coupon-logo-img     { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.coupon-code-box     { border: 2px dashed #0d6efd; background-color: #f8f9fa; }
.coupon-code-text    { letter-spacing: 0.15em; }
.coupon-terms        { line-height: 1.6; font-size: 0.9rem; }
.coupon-stat-label   { font-size: 0.75rem; }

/* ── Coupons list view (coupons_view.php) ────────────────────────────────────── */
.coupon-card-top-bar  { height: 4px; }
.cc-expiry-label      { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-code-text         { font-size: .95rem; }
.cc-line-height       { line-height: 1.45; }

/* ── Product image renderer ──────────────────────────────────────────────────── */
.product-img-placeholder {
    min-height: 280px;
    display: flex; align-items: center; justify-content: center;
    background: #f8f9fa;
}
.product-badge-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 7px;
    background: #0a7abf;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.product-discount-badge { font-size: 1.2rem; width: 60px; height: 60px; }
.product-discount-off   { font-size: 0.8rem; opacity: 0.9; }
.product-main-img       { max-height: 420px; width: 100%; object-fit: contain; object-position: center; }
.product-img-min-h      { min-height: 280px; }
.color-card-swatch      { height: 72px; }
.color-dot-swatch       { width: 12px; height: 12px; flex-shrink: 0; }
.custom-field-image     { max-width: 200px; max-height: 200px; }

/* ── Product detail renderer ─────────────────────────────────────────────────── */
.pdp-attr-link-icon { font-size: .9rem; flex-shrink: 0; }
.cursor-pointer     { cursor: pointer; }
.pdp-sticky-name    { max-width: 150px; }
.pdp-sticky-merch   { font-size: 0.7rem; }
.pdp-disclaimer     { font-size: .75rem; }
.price-display      { line-height: 1; }

/* ── TOUCH TARGETS (WCAG 2.5.5) ─────────────────────────────────────────────
   Ensure interactive elements meet 44×44px minimum tap target size.
   ─────────────────────────────────────────────────────────────────────────── */
.navbar .nav-link,
.mobile-offcanvas-menu .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
}
.btn-close {
    min-width: 44px;
    min-height: 44px;
}

/* ── CONTRAST SAFETY (WCAG 1.4.3 AA) ─────────────────────────────────────────
   Ensure muted/secondary text meets 4.5:1 ratio on white/light backgrounds.
   Bootstrap's default --bs-secondary-color is #6c757d (4.54:1 on #fff — passes).
   Some Bootswatch themes override this to a lighter value; clamp it here.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --bs-secondary-color: #6c757d;
}

/* ── Store renderer ──────────────────────────────────────────────────────────── */
.store-logo-wrap    { height: 56px; padding: 6px 10px; overflow: hidden; }
.store-logo-img     { max-height: 100%; max-width: 100%; object-fit: contain; }
.store-badge-sm     { font-size: .65rem; }
.store-discount-lbl { font-size: .95rem; }
.store-deal-btn     { font-size: .75rem; }
.store-exp-label    { font-size: .65rem; }
.store-code-btn     { font-size: .7rem; }

/* ── Search landing & not-found ──────────────────────────────────────────────── */
.search-landing-form { max-width: 620px; }
.not-found-form-wrap { max-width: 500px; }

/* ── Page-header icon sizes ──────────────────────────────────────────────────── */
/* .icon-xl already defined above (48px); add the fixed 32px variant used in     */
/* renderStandardPageHeader and page_icon_helper when no size is passed.          */
.icon-32         { font-size: 32px; }
/* page_icon_helper: arbitrary size via CSS custom property --icon-sz             */
.icon-custom-sz  { font-size: var(--icon-sz, 1em); line-height: 1; }

/* ── Store logo (renderStoreLogo default style) ──────────────────────────────── */
/* Replaces the inline style="max-height:100px;max-width:100%;object-fit:contain" */
/* applied as the default in simple_logo_helper.php renderStoreLogo().            */
.store-logo { max-height: 100px; max-width: 100%; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER ICON STANDARDIZATION
   Consistent footer icon styling across all footer elements
   ═══════════════════════════════════════════════════════════════════════════ */

/* Footer icon wrapper */
.footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
}

.footer-icon:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.footer-icon i {
    font-size: 1.5rem;
    color: var(--bs-primary);
}

/* Footer icon wrapper for text content */
.footer-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-icon-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB MOBILE OPTIMIZATION
   ─────────────────────────────────────────────────────────────────────────── */

/* Mobile-optimized breadcrumbs with horizontal scroll */
.breadcrumb-mobile {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.breadcrumb-mobile::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Accessibility label for screen readers */
.breadcrumb-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive breadcrumb container */
@media (max-width: 767.98px) {
    .breadcrumb-container {
        padding: 0.5rem 0;
    }
    
    .breadcrumb-item {
        display: inline-flex;
        align-items: center;
    }
}