/* A11y utility: visually hide but keep for screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Homepage Categories Side Panel --- */
.has-home-cat-panel {
    --home-panel-width: 320px;
}

@media (min-width: 992px) {
    body.has-home-cat-panel {
        padding-left: var(--home-panel-width);
    }
}

.home-cat-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--home-panel-width);
    background: #121214;
    border-right: 1px solid #222327;
    z-index: 800;
    display: none;
    flex-direction: column;
    transform: translateX(0);
    transition: transform .2s ease;
}

@media (min-width: 992px) {
    .home-cat-panel {
        display: flex;
    }
}

.home-cat-panel.collapsed {
    transform: translateX(calc(-1 * var(--home-panel-width) + 44px));
}

.home-cat-panel .panel-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
}

.home-cat-panel .panel-btn {
    background: #1a1b20;
    color: #ddd;
    border: 1px solid #272830;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
}

.home-cat-panel .panel-btn:hover {
    background: #21222a;
}

.home-cat-panel .panel-close {
    display: none;
}

/* Overlay and open button for mobile/tablet */
.home-cat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 799;
}

.home-cat-open-btn {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 801;
    background: #181a20;
    color: #eee;
    border: 1px solid #2a2d36;
    border-radius: 999px;
    padding: .55rem .8rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

/* Mobile behavior: panel acts as drawer off-canvas by default */
@media (max-width: 991px) {
    .home-cat-panel {
        display: flex;
        transform: translateX(-100%);
        width: min(86vw, 420px);
    }

    .home-cat-panel.open {
        transform: translateX(0);
    }

    .home-cat-panel .panel-close {
        display: inline-block;
    }

    body.has-home-cat-panel {
        padding-left: 0;
    }
}

.home-cat-panel .panel-header {
    padding: 16px 14px;
    border-bottom: 1px solid #1e1f23;
}

.home-cat-panel .panel-header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: .3px;
}

/* SEO editor preview */
.seo-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    align-items: start;
}

.seo-form textarea {
    resize: vertical;
    min-height: 88px;
}

.seo-preview {
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px;
    background: #111116;
}

.seo-serp {
    font: 400 .9rem/1.35 system-ui;
}

.seo-serp .serp-title {
    color: #1a73e8;
    font-weight: 600;
    margin-bottom: 4px;
}

.seo-serp .serp-url {
    color: #9aa0a6;
    font-size: .85rem;
    margin-bottom: 4px;
}

.seo-serp .serp-desc {
    color: #e8eaed;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .seo-grid {
        grid-template-columns: 1fr;
    }
}

.home-cat-panel .category-grid {
    padding: 12px;
    overflow: auto;
}

/* Ensure the home categories slide-out uses a single, safe column and cards never clip */
.home-cat-panel .category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* In the narrow panel, make the thumbnail column flexible so text/actions aren't squeezed */
.home-cat-panel .category-card.horizontal {
    grid-template-columns: clamp(120px, 38%, 200px) 1fr;
}

/* Wrap action buttons within the panel with smaller minimums */
.home-cat-panel .category-card .cat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.home-cat-panel .category-card .cat-actions a,
.home-cat-panel .category-card .cat-actions .btn,
.home-cat-panel .category-card .shop-cat-btn {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.category-grid {
    /* Center the grid and limit to 1–2 columns that always fit full cards */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
    gap: 16px;
    justify-content: center;
    /* center tracks when fewer than available */
    align-items: stretch;
    grid-auto-rows: auto;
    /* rows fit content */
    margin: 6px 0;
    /* small breathing room */
}

/* Ensure only 1 column on tight viewports; auto-fit will naturally reduce to 1 */
@media (max-width: 640px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.category-card {
    background: #15161a;
    border: 1px solid #23242a;
    border-radius: 10px;
    /* Ensure full card content (buttons, samples) isn't clipped and border wraps content */
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}

.category-card.horizontal {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: stretch;
    /* Keep entire card within view even when inside narrow containers */
    min-width: 0;
    max-width: 100%;
    padding: 0;
}

.category-card:hover {
    /* Avoid vertical shift to prevent any clipping in tightly spaced lists */
    border-color: #2d2f36;
}

.category-grid {
    /* Centered grid, maximum two columns, cards remain fully visible */
    display: grid;
    grid-template-columns: 1fr;
    /* default: single column */
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    grid-auto-rows: auto;
    margin: 6px auto;
}

/* At wider viewports, allow exactly two columns and cap overall width so cards don't get squeezed */
@media (min-width: 1180px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 1140px;
        /* 2 * 560px + 20ish gap */
    }
}

.category-card .category-thumb {
    aspect-ratio: 4 / 3;
    background: #0e0f12;
    overflow: hidden;
    /* clip image to card border radius */
}

.category-card .category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-card .category-body {
    padding: 10px;
    min-width: 0;
    /* allow text to wrap within grid track */
}

.category-card .cat-actions {
    margin-top: .5rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    /* wrap buttons on narrow tracks or high zoom */
}

/* Make action buttons wrap gracefully without overflow */
.category-card .cat-actions a,
.category-card .cat-actions .btn {
    flex: 1 1 220px;
    min-width: 180px;
    /* Allow long labels like "Shop Accessories & Add-Ons" to wrap cleanly */
    white-space: normal;
    overflow-wrap: anywhere;
}

.category-card .cat-samples {
    display: flex;
    gap: 6px;
    margin-top: .35rem;
}

.category-card .cat-samples img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #2a2a2a;
}

/* Category detail page */
.cat-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: center;
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: .85rem;
    margin: .25rem 0 .75rem;
    color: #b9bbc3;
}

.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.breadcrumbs li+li::before {
    content: '/';
    opacity: .6;
}

.breadcrumbs a {
    color: #d8daea;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.cat-hero .hero-media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #23242a;
    background: #0e0f12;
}

.cat-samples-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cat-samples-row img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #2a2a2a;
}

@media (max-width: 900px) {
    .category-card.horizontal {
        grid-template-columns: 1fr;
    }

    .cat-hero {
        grid-template-columns: 1fr;
    }
}

.category-btn {
    margin: 0 10px 12px;
}

/* Make sure hero layout still looks good with panel */
.hero .container.hero-wrap {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: center;
}

@media (max-width: 991px) {
    .hero .container.hero-wrap {
        grid-template-columns: 1fr;
    }
}

/* Left Category Box Styles */
.shop-categories-left {
    min-width: 180px;
    max-width: 220px;
    background: #18181c;
    border-radius: 14px;
    box-shadow: 0 2px 12px -4px #ff478733;
    padding: 1.2rem 1rem 1.2rem 1rem;
    margin-right: 2.2rem;
    margin-top: 0.2rem;
    align-self: flex-start;
    position: sticky;
    top: 110px;
    z-index: 10;
    /* Make the entire sidebar a scroll box */
    max-height: calc(100dvh - 140px);
    overflow: hidden;
    /* inner .sidebar-scroll will handle scroll */
}

.shop-categories-left .sidebar-scroll {
    overflow: auto;
    max-height: calc(100dvh - 168px);
    padding-right: 6px;
    scrollbar-width: thin;
}

.shop-categories-left .sidebar-scroll::-webkit-scrollbar {
    width: 10px;
}

.shop-categories-left .sidebar-scroll::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 8px;
}

.cat-box-title {
    color: #f2f2f4;
    font-size: 1.02rem;
    font-weight: 800;
    margin: .25rem 0 .6rem 0;
    letter-spacing: .32px;
    text-align: left;
}

.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cat-list li {
    margin: 0;
}

.cat-list a {
    color: #f3f3f6;
    text-decoration: none;
    font-size: 1.01em;
    font-weight: 600;
    padding: 0.45em 0.7em;
    border-radius: 9px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    display: block;
}

.category-box .cat-list a:hover,
.category-box .cat-list a:focus {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.category-box .cat-list a.active {
    background: rgba(255, 71, 87, .18);
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 71, 87, .18);
}

/* Multi-category active state accent */
.category-box.multi-active {
    border-color: rgba(255, 71, 87, .45) !important;
    box-shadow: 0 0 0 2px rgba(255, 71, 87, .12);
}

/* Small count pill appended to Categories headers when multi-select active */
.cat-count-pill {
    display: none;
    margin-left: .5rem;
    background: #2a2a38;
    color: #fff;
    border: 1px solid #444;
    border-radius: 999px;
    padding: .12em .5em;
    font-size: .74em;
    vertical-align: middle;
}

/* Keep previous scoped rule for legacy blocks */
.category-box .cat-box-title .cat-count-pill {
    display: none;
}

@media (max-width: 900px) {

    /* Mobile off-canvas filters: keep element in DOM and slide it in */
    .shop-categories-left {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: 86vw;
        max-width: 360px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1210;
        /* Reset sticky/spacing from desktop */
        margin-right: 0;
        margin-top: 0;
        top: 0;
        /* override sticky top */
        border-radius: 0 14px 14px 0;
    }

    .shop-categories-left .sidebar-scroll {
        max-height: 100vh;
    }

    .shop-categories-left.open {
        transform: translateX(0);
    }
}

/* Slim Row Filter Bar */
.shop-filters-slim-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface-1);
    border-radius: 12px;
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .45);
    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
    margin-bottom: 1.2rem;
    border: 1px solid var(--border-strong);
    position: sticky;
    top: 64px;
    z-index: 12;
}

.shop-filters-slim-row .filter-slim {
    font-size: 0.85em;
    padding: 0.25em 0.7em;
    height: 1.7em;
    min-width: 60px;
    max-width: 120px;
}

.shop-filters-slim-row .filter-price-group {
    gap: 0.3rem;
}

.shop-filters-slim-row .filter-select.filter-slim {
    min-width: 90px;
    max-width: 140px;
}

.shop-filters-slim-row .filter-reset.filter-slim {
    padding: 0.25em 1em;
    font-size: 0.85em;
}

@media (max-width: 700px) {
    .shop-filters-slim-row {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.4rem 0.5rem;
    }
}

/* Premium Trust Bar Styles */
.trust-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .9rem;
    background: linear-gradient(90deg, #18181c 60%, #232336 100%);
    color: #fffbe7;
    font-size: .96rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-bottom: 1px solid #ff478733;
    box-shadow: 0 1px 8px -4px #ff478733;
    letter-spacing: 0.01em;
    z-index: 900;
}

.trust-bar .trust-icon {
    font-size: 1.18em;
    margin-right: 0.3em;
    filter: drop-shadow(0 2px 8px #ff478799);
}

.trust-bar .trust-sep {
    color: #ff4787;
    font-weight: 700;
    opacity: 0.7;
    margin: 0 0.7em;
    font-size: 1.2em;
}

@media (max-width: 700px) {
    .trust-bar {
        flex-wrap: wrap;
        gap: .5rem .75rem;
        font-size: .92rem;
        padding: .4rem .5rem;
        text-align: left;
    }

    .trust-bar .trust-sep {
        display: none;
    }
}

/* --- Shop All Horizontal Filter Bar & Scrollbox Redesign --- */
.shop-filters-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 1.5rem;
    background: var(--surface-1);
    border-radius: 18px;
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, .45);
    padding: 1.2rem 2.2rem 1.2rem 2.2rem;
    margin-bottom: 2.2rem;
    border: 1px solid var(--border-strong);
    position: sticky;
    top: 80px;
    z-index: 12;
}

.shop-filters-horizontal .filter-input,
.shop-filters-horizontal .filter-select {
    background: #232336;
    color: #fff;
    border: 1.5px solid #ff478744;
    border-radius: 999px;
    padding: 0.5em 1.2em;
    font-size: 1.01em;
    font-weight: 500;
    outline: none;
    transition: border 0.18s, box-shadow 0.18s;
}

.shop-filters-horizontal .filter-input:focus,
.shop-filters-horizontal .filter-select:focus {
    border-color: #ff4787;
    box-shadow: 0 0 0 2px #ff478799;
}

.shop-filters-horizontal .filter-chips {
    gap: 0.5rem;
}

.shop-filters-horizontal .filter-price-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shop-filters-horizontal .filter-price-sep {
    color: #ff4787;
    font-weight: 600;
    font-size: 1.01em;
}

.shop-filters-horizontal .filter-checkbox,
.shop-filters-horizontal .filter-radio {
    color: #fffbe7;
    font-size: 0.98em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.shop-filters-horizontal .filter-reset {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.5em 1.8em;
    font-weight: 700;
    font-size: 1.01em;
    box-shadow: 0 2px 8px -2px #ff478799;
    transition: background 0.18s, box-shadow 0.18s;
}

.shop-filters-horizontal .filter-reset:hover {
    background: linear-gradient(90deg, #c44569 0%, #ff4787 100%);
    box-shadow: 0 4px 18px -4px #ff478799;
}

.shop-products-scrollbox {
    max-height: 70vh;
    overflow-y: auto;
    background: none;
    border-radius: 18px;
    padding: 0 0.5rem;
}

/* Sleek, modern, sexy product card/buttons */
.sleek-card {
    background: linear-gradient(135deg, #232336 60%, #18181c 100%);
    border-radius: 18px;
    box-shadow: 0 8px 32px -8px #ff478733, 0 2px 12px 0 #0002;
    border: 1.5px solid #ff478799;
    transition: box-shadow 0.18s, border 0.18s, transform 0.18s;
    overflow: hidden;
}

.sleek-card:hover {
    box-shadow: 0 12px 36px -8px #ff4787cc, 0 4px 18px 0 #c4456933;
    border-color: #ff4787;
    transform: translateY(-4px) scale(1.02);
}

.sleek-btn {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    color: #fffbe7;
    border: none;
    border-radius: 999px;
    padding: 0.5em 1.8em;
    font-weight: 700;
    font-size: 1.01em;
    box-shadow: 0 2px 8px -2px #ff478799;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}

.sleek-btn:hover {
    background: linear-gradient(90deg, #c44569 0%, #ff4787 100%);
    box-shadow: 0 4px 18px -4px #ff478799;
    transform: translateY(-2px) scale(1.04);
}

.sleek-btn:active {
    background: #c44569;
    box-shadow: 0 2px 8px -2px #c44569cc;
}

/* Sleek filter chips */
.shop-filters-horizontal .filter-chip {
    background: linear-gradient(90deg, #232336 60%, #18181c 100%);
    color: #fffbe7;
    border-radius: 999px;
    border: 1.5px solid #ff478744;
    padding: 0.5em 1.2em;
    font-size: 1.01em;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 8px -2px #ff478722;
}

.shop-filters-horizontal .filter-chip.active,
.shop-filters-horizontal .filter-chip:hover,
.shop-filters-horizontal .filter-chip:focus {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    color: #fffbe7;
    border-color: #ff4787;
    box-shadow: 0 4px 18px -4px #ff478799;
}

/* --- Section Layout & Hierarchy Enhancements --- */
.shop-layout {
    display: flex;
    gap: 2.2rem;
    align-items: flex-start;
    margin-top: 1.2rem;
    margin-bottom: 2.2rem;
}

.shop-filters {
    box-shadow: 0 8px 32px -8px #ff478733, 0 2px 12px 0 #0002;
    margin-bottom: 2.5rem;
}

.container>div>.products-grid,
.container>.products-grid {
    margin-bottom: 2.5rem;
    padding: 1rem;
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .45);
}

.section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 2.5rem 0 1.5rem 0;
    letter-spacing: 0.01em;
    text-align: center;
    text-shadow: 0 2px 8px #0006;
    border-bottom: 2px solid #ff4787;
    padding-bottom: 0.5rem;
}

.best-sellers-section,
.staff-picks-section,
.shop-by-need-section,
.recently-viewed-section,
.recommended-section {
    margin-bottom: 2.5rem;
    padding: 2rem 0 1.5rem 0;
    background: linear-gradient(135deg, #18181c 60%, #232336 100%);
    border-radius: 18px;
    box-shadow: 0 4px 18px -4px #ff478722;
}

/* --- Wishlist/Favorites Button Styles --- */
.wishlist-btn {
    background: none;
    border: none;
    font-size: 1.25em;
    cursor: pointer;
    margin-right: 0.5em;
    vertical-align: middle;
    transition: transform 0.1s;
}

.wishlist-btn:hover,
.wishlist-btn:focus {
    transform: scale(1.18);
    outline: none;
}

/* --- Why You’ll Love It & How to Use Styles --- */
.qv-extra {
    margin-top: 1em;
    font-size: 0.98em;
    color: #333;
}

.qv-why-love strong,
.qv-how-to-use strong {
    color: #6c63ff;
    font-weight: 700;
    font-size: 1em;
}

.qv-why-love {
    margin-bottom: 0.5em;
}

.qv-how-to-use {
    margin-bottom: 0.5em;
}

/* --- Star Ratings & Reviews Styles --- */
.star-bar {
    display: inline-block;
    font-size: 1.05em;
    color: #ffd600;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.star {
    color: #e0e0e0;
    font-size: 1.1em;
    margin-right: -2px;
}

.star.filled {
    color: #ffd600;
    text-shadow: 0 1px 2px #ffecb3;
}

.rating-num {
    color: #444;
    font-size: 0.98em;
    margin-left: 0.25em;
    font-weight: 600;
}

.review-count {
    color: #888;
    font-size: 0.92em;
    margin-left: 0.4em;
    font-weight: 400;
}

/* --- Trust/Info Badges Styles --- */
.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 16px;
    padding: 0.18em 0.7em 0.18em 0.5em;
    background: #f7f7fa;
    color: #444;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px #0001;
    line-height: 1.2;
    white-space: nowrap;
    margin-right: 0.2em;
}

.badge-discreet {
    background: linear-gradient(90deg, #e0e7ff 0%, #f7e8ff 100%);
    color: #4b2995;
    border-color: #d1c4e9;
}

.badge-bodysafe {
    background: linear-gradient(90deg, #e0ffe7 0%, #e7fff7 100%);
    color: #1b5e20;
    border-color: #b2dfdb;
}

.badge-new {
    background: linear-gradient(90deg, #fffde7 0%, #ffe0b2 100%);
    color: #ff9800;
    border-color: #ffe0b2;
}

.badge-bestseller {
    background: linear-gradient(90deg, #ffe0e6 0%, #fff3e0 100%);
    color: #d84315;
    border-color: #ffccbc;
}

/* --- Best Sellers & Staff Picks Styles --- */
.best-sellers-section,
.staff-picks-section {
    background: var(--background-card, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 16px #0001;
    padding: 1.5rem 1rem 1.5rem 1rem;
    margin-bottom: 2.5rem;
}

.best-sellers-section .section-title,
.staff-picks-section .section-title {
    color: #ff4757;
    letter-spacing: 0.01em;
}

.best-sellers-section .product-card,
.staff-picks-section .product-card {
    border: 2px solid #ffe0e6;
    box-shadow: 0 2px 12px #ff47571a;
}

.staff-picks-section .product-card {
    border-color: #e0e7ff;
    box-shadow: 0 2px 12px #6c63ff1a;
}

@media (max-width: 600px) {

    .best-sellers-section,
    .staff-picks-section {
        padding: 1rem 0.3rem 1rem 0.3rem;

    }

    /* --- Shop by Need/Experience Styles --- */
    .shop-by-need-section {
        background: var(--background-card, #fff);
        border-radius: 12px;
        box-shadow: 0 2px 16px #0001;
        padding: 1.5rem 1rem 1.5rem 1rem;
        margin-bottom: 2.5rem;
    }

    .shop-by-need-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-start;
    }

    .need-chip {
        background: linear-gradient(90deg, #f7e8ff 0%, #e0e7ff 100%);
        color: #4b2995;
        border: none;
        border-radius: 24px;
        padding: 0.7rem 1.4rem;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px #b39ddb22;
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .need-chip:hover,
    .need-chip:focus {
        background: linear-gradient(90deg, #e0e7ff 0%, #f7e8ff 100%);
        color: #2d1457;
        box-shadow: 0 4px 16px #b39ddb33;
        outline: none;
    }

    @media (max-width: 600px) {
        .shop-by-need-grid {
            flex-direction: column;
            gap: 0.5rem;
        }

        .need-chip {
            width: 100%;
            text-align: left;
            font-size: 1rem;
            padding: 0.8rem 1.2rem;
        }
    }

    /* --- Cart Drawer Styles --- */
    .cart-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 370px;
        max-width: 100vw;
        background: var(--background-card, #fff);
        box-shadow: -4px 0 32px #0003;
        z-index: 12000;
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        flex-direction: column;
    }

    .cart-drawer.open {
        transform: translateX(0);
    }

    .cart-drawer-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 2rem 1.5rem 1.5rem;
        height: 100%;
        overflow-y: auto;
    }

    .cart-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--primary, #ff4757);
    }

    .cart-items {
        margin: 1.5rem 0;
    }

    .cart-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        background: var(--background, #f7f7fa);
        border-radius: 8px;
        padding: 0.75rem 0.5rem;
    }

    .cart-item-img {
        width: 54px;
        height: 54px;
        object-fit: cover;
        border-radius: 6px;
    }

    .cart-item-info {
        flex: 1;
    }

    .cart-item-title {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }

    .cart-item-price {
        color: var(--primary, #ff4757);
        font-weight: 600;
        font-size: 1rem;
    }

    .cart-item-qty {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.3rem;
    }

    .qty-btn {
        background: var(--background-card, #fff);
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .qty-input {
        width: 38px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1rem;
        padding: 2px 4px;
    }

    .remove-btn {
        background: none;
        border: none;
        color: #e74c3c;
        font-size: 1.2rem;
        cursor: pointer;
        margin-left: 0.5rem;
    }

    .cart-footer {
        margin-top: 1.5rem;
        text-align: center;
    }

    .checkout-btn {
        width: 100%;
        padding: 1rem;
        font-size: 1.1rem;
        background: linear-gradient(135deg, var(--primary, #ff4757) 0%, #c44569 100%);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: box-shadow 0.2s;
    }

    .checkout-btn:hover {
        box-shadow: 0 6px 24px #ff475733;
    }

    @media (max-width: 600px) {
        .cart-drawer {
            width: 100vw;
            max-width: 100vw;
        }

        .cart-drawer-content {
            padding: 1.2rem 0.5rem 1rem;
        }
    }

    /* Sticky Filters (Desktop) & Mobile Drawer */
    @media (min-width: 900px) {
        .shop-filters {
            position: sticky;
            top: 2.2rem;
            align-self: flex-start;

            /* When the sticky category panel is visible on desktop, hide the empty sidebar aside to avoid blank space */
            #sticky-category-panel {
                display: block;
            }

            body.has-sticky-panel .shop-categories-left {
                display: none !important;
            }

            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 2px 16px -4px rgba(0, 0, 0, 0.10);
            background: var(--background-card, #222);
            z-index: 10;
        }
    }

    @media (max-width: 899px) {
        .shop-filters {
            position: fixed;
            left: 0;
            top: 0;
            width: 90vw;
            max-width: 340px;
            height: 100vh;
            background: var(--background-card, #222);
            box-shadow: 2px 0 24px -6px rgba(0, 0, 0, 0.18);
            z-index: 1002;
            transform: translateX(-100%);
            transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
            overflow-y: auto;
            padding-top: 2.5rem;
        }

        .shop-filters.open {
            transform: translateX(0);
        }

        #filterOverlay {
            display: block;
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.32);
            z-index: 1001;
        }
    }

    /* Branding, Imagery, and Iconography */
    body,
    html {
        font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        background: var(--background-gradient, #0f0f0f);
        color: var(--text-primary, #fff);
    }

    .brand-logo {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        letter-spacing: 0.04em;
    }

    .brand-logo img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 10px -2px var(--shadow-glow, rgba(255, 71, 87, 0.18));
    }

    .icon-body-positive {
        display: inline-block;
        width: 32px;
        height: 32px;
        background: url('assets/branding/body-positive-icon.svg') center/contain no-repeat;
        vertical-align: middle;
        margin-right: 0.4em;
    }

    .icon-inclusive {
        display: inline-block;
        width: 32px;
        height: 32px;
        background: url('assets/branding/inclusive-icon.svg') center/contain no-repeat;
        vertical-align: middle;
        margin-right: 0.4em;
    }

    /* Example: Use <span class="icon-body-positive"></span> in HTML for body-positive icon */
    /* Navigation, Chips, and Button Enhancements */
    .nav-link,
    .nav-action,
    .tab-item {
        font-weight: 600;
        color: var(--text-primary, #fff);
        padding: 0.7rem 1.1rem;
        border-radius: 8px;
        transition: background 0.18s, color 0.18s, box-shadow 0.18s;
        outline: none;
    }

    .nav-link:hover,
    .nav-link:focus,
    .nav-action:hover,
    .nav-action:focus,
    .tab-item:focus,
    .tab-item:hover {
        background: var(--primary-color, #ff4757);
        color: #fff;
        box-shadow: 0 2px 12px -2px var(--shadow-glow, rgba(255, 71, 87, 0.18));
    }

    .chip {
        display: inline-block;
        background: #23232b;
        color: var(--text-secondary, #ccc);
        border-radius: 16px;
        padding: 0.45em 1.1em;
        margin: 0.18em 0.18em 0.18em 0;
        font-size: 0.98em;
        font-weight: 500;
        border: 2px solid transparent;
        cursor: pointer;
        transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
        outline: none;
    }

    .chip.active,
    .chip:focus {
        background: var(--primary-color, #ff4757);
        color: #fff;
        border: 2px solid var(--primary-dark, #c44569);
        box-shadow: 0 2px 10px -2px var(--shadow-glow, rgba(255, 71, 87, 0.18));
    }

    .chip:hover {
        background: var(--primary-dark, #c44569);
        color: #fff;
    }

    .btn,
    .add-to-cart-btn,
    .quick-view-btn {
        transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.13s;
    }

    .btn:active,
    .add-to-cart-btn:active,
    .quick-view-btn:active {
        transform: scale(0.97);
    }

    /* Product Grid & Card Styling */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.3rem;
        margin: 0.7rem 0 1.2rem 0;
        padding: 0 1rem;
        width: 100%;
        max-width: 1400px;
        box-sizing: border-box;
        justify-content: center;
        align-items: stretch;
    }

    @media (max-width: 1200px) {
        .products-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 900px) {
        .products-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .products-grid {
            grid-template-columns: 1fr;
            gap: 1.2rem;
            padding: 0 0.2rem;
        }
    }
}

.product-card {
    background: var(--background-card, #222);
    border-radius: var(--border-radius);
    box-shadow: 0 6px 32px -8px rgba(255, 71, 87, 0.18), 0 1.5px 6px 0 rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.25s, transform 0.18s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    position: relative;
    min-height: 370px;
    min-width: 0;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.product-card:hover,
.product-card:focus-within {
    box-shadow: 0 12px 40px -6px var(--shadow-glow, rgba(255, 71, 87, 0.25)), 0 2px 12px 0 rgba(0, 0, 0, 0.13);
    transform: translateY(-4px) scale(1.012);
    z-index: 2;
}

.product-image-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, #181818 60%, #2c2c2c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* slight breathing room so contained images aren't hard against edges */
    padding: 6px;
}

/* Scope image fill rules to the legacy img.product-image inside the wrap to avoid conflicts */
.product-image-wrap img.product-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    /* Show full product without cropping */
    object-fit: contain;
    object-position: center center;
    border-radius: 0;
    /* rounding handled by container */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Ensure full-bleed on Shop All and All Products contexts too */
.shop-all-page .product-image-wrap img.product-image,
.all-products .product-image-wrap img.product-image,
html.view-grid .product-image-wrap img.product-image,
html.view-compact .product-image-wrap img.product-image,
html.density-compact .shop-all-page .product-image-wrap img.product-image {
    width: 100% !important;
    height: 100% !important;
    /* Consistently show entire product, centered */
    object-fit: contain !important;
    object-position: center center !important;
}

.product-card:hover .product-image-wrap img.product-image,
.product-card:focus-within .product-image-wrap img.product-image {
    box-shadow: 0 6px 24px -4px var(--shadow-glow, rgba(255, 71, 87, 0.18));
    /* Avoid zooming the image to prevent any perceived cropping */
    transform: none;
}

.product-info {
    padding: 1.1rem 1.2rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1 1 auto;
}

.product-title {
    font-size: 1.13rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 0.2rem;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.product-price {
    font-size: 1.08rem;
    color: color-mix(in srgb, #ffffff 94%, #ff4757 6%);
    /* Fallback if color-mix unsupported */
    color: #fff1f3;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.product-rating {
    font-size: 0.98rem;
    color: #ffd700;
    font-weight: 500;
    margin-bottom: 0.1rem;
}

.add-to-cart-btn,
.quick-view-btn {
    margin-top: 0.7rem;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    border-radius: 8px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px -2px rgba(255, 71, 87, 0.13);
}

.add-to-cart-btn:hover,
.quick-view-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 16px -2px var(--shadow-glow, rgba(255, 71, 87, 0.18));
    transform: translateY(-2px) scale(1.03);
}

.quick-view-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(34, 34, 34, 0.85);
    color: #fff;
    font-size: 0.98rem;
    padding: 0.45rem 1rem;
    z-index: 3;
    border-radius: 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}

.product-card:hover .quick-view-btn,
.product-card:focus-within .quick-view-btn {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 700px) {
    .products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        padding: 0 0.2rem;
    }

    .product-info {
        padding: 0.8rem 0.7rem 1rem 0.7rem;
    }

    .product-title {
        font-size: 1.01rem;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .product-info {
        padding: 0.7rem 0.5rem 0.8rem 0.5rem;
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #ff4757;
    --primary-dark: #c44569;
    --secondary-color: #1a1a1a;
    --accent-color: #ff6b81;
    --text-primary: #ffffff;
    --text-secondary: #d0d0d2;
    /* slightly whiter notes */
    --text-light: #ffffff;
    --background-dark: #0f0f0f;
    --bg-app: #0e0f12;
    --background-light: #1a1a1a;
    --background-gradient: linear-gradient(135deg, #0f0f0f 0%, #2c2c2c 100%);
    --background-card: #222222;
    --surface-1: #141418;
    /* a touch brighter than before */
    --surface-2: #1b1b21;
    --border-subtle: #2a2a30;
    /* slightly brighter */
    --border-strong: #343844;
    /* slightly brighter */
    --shadow-soft: 0 10px 40px rgba(255, 71, 87, 0.2);
    --shadow-medium: 0 15px 50px rgba(255, 71, 87, 0.3);
    --shadow-glow: 0 0 30px rgba(255, 71, 87, 0.5);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 12px;
}

/* Boxed section utilities */
.boxed {
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--border-radius);
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .45);
}

.boxed.pad-sm {
    padding: .75rem;
}

.boxed.pad-md {
    padding: 1rem 1.2rem;
}

.boxed.pad-lg {
    padding: 1.5rem 1.8rem;
}

/* Global Sticky Category Panel defaults (used on multiple pages) */
#sticky-category-panel {
    background: var(--surface-1);
    border-right: 1px solid var(--border-strong);
}

#sticky-category-panel .scp-item {
    background: transparent;
    border: none;
}

#sticky-category-panel .scp-item:hover {
    background: transparent;
    border-color: transparent;
}

#sticky-category-panel .scp-item.active {
    background: transparent;
    border-color: transparent;
}

/* -------------------------------------------------- */
/* Generic Button System (anchors + buttons unified)  */
/* -------------------------------------------------- */
/* Base */
.btn {
    --btn-bg: var(--primary-color);
    --btn-bg-hover: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    --btn-text: var(--text-light);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font: 600 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: .9rem 1.9rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: var(--btn-text);
    background: var(--btn-bg);
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: 0 8px 24px -4px rgba(255, 71, 87, 0.35);
    transition: var(--transition);
    will-change: transform, box-shadow;
}

.btn:hover {
    background: var(--btn-bg-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 32px -4px rgba(255, 71, 87, 0.55);
    text-decoration: none;
}

.btn:active {
    transform: translateY(-1px) scale(.98);
    box-shadow: 0 6px 20px -4px rgba(255, 71, 87, 0.5);
}

.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Primary (default) */
.btn-primary {
    /* Uses base gradient variables */
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 8px 28px -6px rgba(255, 71, 87, 0.55), 0 0 0 1px rgba(255, 71, 87, 0.4) inset;
}

.btn-primary:hover {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
}

/* Secondary (outline) - existing style refined to build on base */
.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 1px rgba(255, 71, 87, 0.4), 0 6px 20px -4px rgba(255, 71, 87, 0.25);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-light);
    box-shadow: 0 8px 30px -4px rgba(255, 71, 87, 0.55);
}

/* Outline alias for consistency with examples */
.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 1px rgba(255, 71, 87, 0.4), 0 6px 20px -4px rgba(255, 71, 87, 0.25);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--text-light);
    box-shadow: 0 8px 30px -4px rgba(255, 71, 87, 0.55);
}

/* Large size variant */
.btn-lg {
    padding: 1.1rem 2.4rem;
    font-size: 1.05rem;
    letter-spacing: .6px;
}

/* High contrast forced-colors mode support */
@media (forced-colors: active) {

    .btn,
    .btn-secondary,
    .btn-primary {
        forced-color-adjust: auto;
    }
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background-gradient, var(--background-dark));
    overflow-x: hidden;
}

/* Inclusive trust copy block */
.trust-copy-inline {
    background: #181818;
    border: 1px solid #262626;
    border-radius: 10px;
    font-size: .8rem;
    padding: .9rem 1rem 1rem;
    line-height: 1.35;
    color: var(--text-secondary);
    position: relative;
}

.trust-copy-inline strong {
    font-size: .78rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.trust-copy-inline:focus-within,
.trust-copy-inline:hover {
    border-color: var(--primary-color);
}

/* Because You Viewed stripe */
#because-you-viewed {
    padding-top: .25rem;
}

#because-you-viewed h2 {
    font-weight: 600;
    letter-spacing: .5px;
}

#because-you-viewed .because-grid .product-card {
    flex: 1 1 220px;
    max-width: 240px;
}

/* Cross-sell panel */
.cross-sell {
    background: #161616;
    border: 1px solid #262626;
    border-radius: 10px;
    padding: .85rem 1rem 1rem;
}

.cross-sell-head {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .9;
}

.cross-sell-body {
    width: 100%;
}

.cross-item {
    transition: background .25s, border-color .25s;
}

.cross-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.cross-item:hover {
    background: #1f1f1f !important;
    border-color: #333 !important;
}

/* Cart trust footer */
.cart-trust {
    background: #151515;
    border: 1px solid #222;
    padding: .75rem .85rem .9rem;
    border-radius: 8px;
    font-size: .7rem;
}

.cart-trust strong {
    font-size: .7rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Recommendation / cross-sell accessibility labels */
[data-region-label] {
    position: relative;
}

[data-region-label]::before {
    content: attr(data-region-label);
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Clear browsing / transparency links */
.reco-actions {
    display: flex;
    gap: .75rem;
    margin-top: .4rem;
    flex-wrap: wrap;
}

.reco-actions button,
.reco-actions a {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: .65rem;
    text-decoration: underline;
    cursor: pointer;
    letter-spacing: .5px;
}

.reco-actions button:hover,
.reco-actions a:hover {
    color: var(--text-primary);
}

@media (max-width:680px) {
    .cross-sell-body {
        flex-direction: row;
    }

    #because-you-viewed .because-grid {
        gap: .75rem;
    }

    .trust-copy-inline {
        font-size: .76rem;
    }
}

/* Top announcement / trust bar */
.top-announcement {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255, 71, 87, .85), rgba(255, 71, 87, .55));
    color: #fff;
    font: 500 .65rem/1.2 system-ui, sans-serif;
    letter-spacing: .5px;
    z-index: 1200;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .6);
}

.top-announcement .ta-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 4px 18px 5px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.top-announcement .ta-item {
    opacity: .95;
}

.top-announcement .ta-item strong {
    font-weight: 700;
}

.top-announcement .ta-sep {
    opacity: .65;
}

@media (max-width: 540px) {
    .top-announcement .ta-item:nth-of-type(5) {
        display: none;
    }
}

/* Adjust header offset due to announcement bar */
.header {
    top: 20px;
}

@media (max-width: 640px) {
    .header {
        top: 22px;
    }
}

/* Hero micro trust line */
.hero-micro-trust {
    margin: -4px auto 1.2rem;
    font: 600 .7rem/1.3 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-secondary);
    display: flex;
    gap: .55rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-micro-trust .ht-sep {
    opacity: .4;
}

.hero-micro-trust .ht-item {
    position: relative;
}

.hero-micro-trust .ht-item::before {
    content: '\2726';
    position: absolute;
    left: -10px;
    opacity: 0;
    font-size: .5rem;
    color: var(--primary-color);
}

@media (max-width: 520px) {
    .hero-micro-trust {
        font-size: .58rem;
        letter-spacing: .6px;
    }
}


@media (max-width: 768px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(18, 19, 24, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-subtle);
}

.navbar {
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Enhanced nav actions (icon + label + badge) */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.nav-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-decoration: none;
    color: var(--text-secondary);
    font: 600 .55rem/1 system-ui, sans-serif;
    letter-spacing: .5px;
    position: relative;
    cursor: pointer;
}

.nav-action .icon {
    width: 24px;
    height: 24px;
}

.nav-action:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 8px;
}

.nav-action:hover .nav-label,
.nav-action:focus-visible .nav-label {
    color: var(--text-primary);
}

.nav-label {
    font-size: .55rem;
    text-transform: uppercase;
}

.cart-count-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    background: var(--primary-color);
    color: #fff;
    font-size: .55rem;
    line-height: 1;
    padding: 2px 5px 3px;
    border-radius: 999px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 0 1px #111, 0 2px 4px -1px rgba(0, 0, 0, .6);
}

/* Shop-all grid unified with homepage */
.shop-all-page .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
}

/* Homepage full catalog section */
.all-products .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
}

.all-products .product-image:not(img) {
    /* Container sizing if a non-img element uses .product-image elsewhere */
    width: 100%;
    height: 100%;
}

.all-products .product-card h3 {
    font-size: .8rem;
}

.all-products .product-card p {
    font-size: .68rem;
}

/* All Products: show full product image without cropping (centered, no stretch) */
.all-products .product-image-wrap {
    padding: 6px;
}

.all-products .product-image-wrap img.product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.shop-all-page .product-image:not(img) {
    /* Container sizing if a non-img element uses .product-image elsewhere */
    width: 100%;
    height: 100%;
}

.shop-all-page .product-card h3 {
    font-size: .85rem;
}

.shop-all-page .product-card p {
    font-size: .7rem;
    display: block;
}

/* Shop-all: show full product image without cropping (centered, no stretch) */
.shop-all-page .product-image-wrap {
    /* keep square cards but allow slight breathing room so contained images aren't hard against edges */
    padding: 6px;
}

.shop-all-page .product-image-wrap img.product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background-color: transparent;
}

.nav-logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: -0.5px;
}

.logo-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 71, 87, .6)) saturate(1.1);
    border-radius: 8px;
}

.logo-aura {
    position: absolute;
    inset: -8px -10px -8px -10px;
    background: radial-gradient(circle at 20% 30%, rgba(255, 71, 87, .25), rgba(255, 71, 87, .05));
    filter: blur(12px);
    border-radius: 16px;
    pointer-events: none;
}

.logo-wordmark {
    font: 700 1.1rem ui-serif, Georgia, 'Times New Roman', Times, serif;
    color: var(--text-light);
    letter-spacing: .5px;
}

.logo-wordmark em {
    color: var(--primary-color);
    font-style: normal;
    text-shadow: 0 0 12px rgba(255, 71, 87, .6);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.brand-accent {
    color: var(--primary-color);
    text-shadow: 0 0 12px rgba(255, 71, 87, 0.6);
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
}

.nav-link:hover::after {
    width: 100%;
}

/* Active nav link state */
.nav-link.active,
.nav-link[aria-current="page"] {
    color: var(--primary-color);
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    width: 100%;
}

/* (Underground button & animations removed 2025-10-07) */

.nav-icons {
    display: flex;
    gap: 1.5rem;
}

.nav-icon {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.nav-icon:hover {
    color: var(--primary-color);
}

.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    color: currentColor;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    transition: var(--transition);
}

/* Hero Section */
.hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background: var(--background-gradient);
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    z-index: 2;
    position: relative;
}

.hero-title {
    font-size: clamp(2.7rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero rating & guarantees */
.hero-rating {
    font: 600 .8rem/1.2 system-ui, sans-serif;
    letter-spacing: .5px;
    color: var(--primary-color);
    margin: -6px 0 1.2rem;
    text-transform: uppercase;
}

.hero-guarantees {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    font: 500 .65rem/1.2 system-ui, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: .85;
}

.hero-guarantees span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

@media (max-width:600px) {
    .hero-guarantees {
        font-size: .58rem;
        gap: .6rem;
    }
}

/* Payment logos (generic placeholders) */
.payment-logos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin-top: 1rem;
}

.payment-logos .pay-logo {
    font: 700 .55rem/1 system-ui, sans-serif;
    letter-spacing: .5px;
    padding: .4rem .5rem .42rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    border-radius: 6px;
    color: #ddd;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.checkout-logos {
    margin-top: .75rem;
    justify-content: flex-start;
}

.payment-logos .pay-logo:hover {
    background: rgba(255, 255, 255, .12);
}

/* Subtle tactile shadows & warm tone tweak */
body {
    --tactile-shadow: 0 4px 14px -4px rgba(255, 71, 87, .35);
}

.product-card,
.collection-card,
.feature-card,
.education-card,

.category-box {
    background: linear-gradient(180deg, var(--surface-1) 0%, #16161c 100%);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.category-card:hover {
    /* Removed vertical shift to ensure full card visibility */
    border-color: #2d2f36;
}

body.preload .floating-element {
    animation: none !important;
    opacity: .25;
}

body.motion-ready .floating-element {
    animation: float 6s ease-in-out infinite;
    opacity: 1;
}


.script {
    font-family: ui-script, "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
    color: var(--primary-color);
    text-shadow: 0 0 18px rgba(255, 71, 87, 0.5);
}

.cta-button {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: var(--text-light);
    border: none;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.cta-button.glow {
    box-shadow: var(--shadow-glow);
}

.secondary-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 14px 28px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.secondary-btn:hover {
    border-color: var(--primary-color);
    color: var(--text-light);
}

.hero-visual {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.floating-elements {
    position: relative;
    width: 100%;
    height: 100%;
}

.floating-element {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 71, 87, 0.25), rgba(255, 71, 87, 0.05));
    animation: float 6s ease-in-out infinite;
}

.element-1 {
    width: 120px;
    height: 120px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.element-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.element-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Features Section */
.features {
    padding: 80px 0;
    background: var(--background-light);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: var(--border-radius);
    background: var(--background-card);
    transition: var(--transition);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.feature-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.feature-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Section Titles */
.section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Featured Products Section */
.featured-products {
    padding: 80px 0;
    background: var(--background-dark);
}

/* Shop All Layout Enhancements */
.shop-layout {
    display: grid;
    /* Sidebar | Product Column (topbar, filters, main) */
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar filters"
        "sidebar main";
    column-gap: 0.8rem;
    row-gap: .8rem;
    align-items: start;
}

/* Ensure sidebar occupies the first column */
.shop-categories-left {
    grid-area: sidebar;
}

.shop-categories-left .sidebar-scroll {
    position: sticky;
    top: 90px;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
}

/* Active filters and products live in the right column */
.active-filters {
    grid-area: filters;
}

.active-filters {
    position: sticky;
    top: 160px;
    /* below toolbar */
    z-index: 11;
}

.shop-products-scrollbox {
    grid-area: main;
    width: 100%;
    min-width: 0;
    padding-left: .2rem;
    padding-right: .2rem;
}

/* Quick Picks top bar above filters */
.quick-picks-bar {
    grid-area: topbar;
}

@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "topbar"
            "filters"
            "main";
    }

    .shop-filters {
        position: relative;
        top: 0;
    }

    /* Stack bars and products on mobile (sidebar is already hidden by earlier CSS) */
    .quick-picks-bar,
    .active-filters,
    .shop-products-scrollbox {
        grid-column: auto;
        grid-row: auto;
    }
}

.shop-filters {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: linear-gradient(135deg, #18181c 60%, #232336 100%);
    padding: 2.2rem 1.2rem 2.2rem 1.2rem;
    border: 1.5px solid #ff478722;
    border-radius: 18px;
    box-shadow: 0 8px 32px -8px #ff478733, 0 2px 12px 0 #0002;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    min-width: 270px;
    max-width: 340px;
    color: #fff;
    font-size: 1.04rem;
    z-index: 10;
}

.shop-filters h3 {
    font-size: 1.08rem;
    color: #ff4787;
    margin-bottom: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px #0005;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.filter-chip {
    background: #232336;
    color: #fff;
    border-radius: 999px;
    border: 1.5px solid #ff478744;
    padding: 0.28em 0.7em;
    margin: 0.15em 0.25em 0.15em 0;
    font-size: 0.86em;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 8px -2px #ff478722;
}

.filter-chip.active,
.filter-chip:hover,
.filter-chip:focus {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    color: #fffbe7;
    border-color: #ff4787;
    box-shadow: 0 4px 18px -4px #ff478799;
}

/* Compact Quick Picks bar above grid */
.quick-picks-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    background: linear-gradient(135deg, #18181c 60%, #232336 100%);
    border: 1px solid #ff478722;
    border-radius: 10px;
    box-shadow: 0 4px 14px -6px #ff478733;
}

.qp-chip {
    background: #232336;
    color: #fff;
    border-radius: 999px;
    border: 1px solid #ff478744;
    padding: 0.22em 0.6em;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.8;
    transition: background .18s, color .18s, border .18s, box-shadow .18s;
}

.qp-chip.active,
.qp-chip:hover,
.qp-chip:focus {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    color: #fffbe7;
    border-color: #ff4787;
    box-shadow: 0 4px 14px -4px #ff478799;
}

/* Hide the sidebar Quick Picks (we render the top bar instead) */
#meta-chips {
    display: none;
}

label[for="meta-chips"] {
    display: none;
}

/* Catalog toolbar removed 2025-10-18 */
/* Remove inner scroll; allow page to scroll so sticky bars work well */
.shop-products-scrollbox {
    max-height: none;
    overflow: visible;
}

/* Breadcrumb bar */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .35rem 0;
    font-size: .8rem;
    color: #9aa;
}

.bc-item {
    background: #20222a;
    border: 1px solid #2b2e36;
    border-radius: 999px;
    padding: .2rem .6rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.bc-sep {
    opacity: .6;
    padding: 0 .25rem;
}

.bc-clear {
    background: none;
    border: none;
    color: #c44569;
    cursor: pointer;
    font-weight: 700;
}

/* Compare drawer removed 2025-10-17 */

/* Admin: highlight cards flagged with missing images when toggle is on */
/* Facets styling */
.facet-panel details {
    margin: .35rem 0;
}

.facet-panel summary {
    cursor: pointer;
    font-weight: 700;
    color: #ff8aa6;
}

.facet-values {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.facet-slider {
    margin-top: .35rem;
}

.facet-slider .slider-inputs {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    font-size: .85em;
}

.facet-slider .slider-inputs input[type="number"] {
    width: 4rem;
    padding: .2rem .3rem;
    background: #232336;
    border: 1px solid #3a3a46;
    color: #fff;
    border-radius: 4px;
}

.facet-slider .dual-range {
    position: relative;
    height: 24px;
}

.facet-slider .dual-range input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none;
    background: transparent;
}

.facet-chip {
    background: #232336;
    color: #fff;
    border: 1px solid #ff478744;
    border-radius: 999px;
    padding: .25em .7em;
    font-size: .82em;
    font-weight: 600;
}

.facet-chip.active {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    border-color: #ff4787;
}

.facet-more {
    background: none;
    border: 1px dashed #3a3a46;
    color: #aaa;
    padding: .25em .7em;
    border-radius: 999px;
    font-size: .82em;
}

.facet-hidden {
    display: none;
}

.facet-radio {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .2rem 0;
    font-size: .9em;
}

.facet-clear-rating {
    background: none;
    border: 1px solid #3a3a46;
    color: #bbb;
    border-radius: 6px;
    padding: .25em .5em;
    font-size: .82em;
    margin-top: .3rem;
}

.active-filters .active-chip {
    background: #2a2a38;
    color: #fff;
    border: 1px solid #444;
    border-radius: 999px;
    padding: .28em .7em;
    margin: .15rem;
    font-size: .8em;
}

/* Mobile facet collapse */
@media (max-width: 900px) {
    .facet-panel details[open] summary {
        margin-bottom: .5rem;
    }
}

html.highlight-missing-images .product-card[data-img-missing="1"],
body.highlight-missing-images .product-card[data-img-missing="1"] {
    outline: 2px dashed #ff6b6b;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18) inset;
}

/* .catalog-toolbar .ct-right removed 2025-10-18 */
.icon-toggle {
    background: #232336;
    color: #fff;
    border: 1px solid #ff478744;
    border-radius: 8px;
    padding: .35rem .5rem;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}

.icon-toggle.active,
.icon-toggle:hover,
.icon-toggle:focus {
    background: linear-gradient(90deg, #ff4787 0%, #c44569 100%);
    color: #fffbe7;
    border-color: #ff4787;
}

label[for="meta-chips"] {
    display: none;
}

.shop-meta {
    font-size: .75rem;
    color: var(--text-secondary);
    margin-top: .25rem;
}

/* Denser grid on shop-all page */
/* Shop-all baseline grid: increase density and allow more columns on wide screens */
.shop-all-page .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem 1rem;
}


.shop-all-page .product-card {
    border-radius: 10px;
}

.shop-all-page .product-card .product-info {
    padding: .9rem .9rem 1.1rem;
}

.shop-all-page .product-card h3 {
    font-size: .8rem;
    line-height: 1.25;
}

.shop-all-page .product-card p {
    font-size: .65rem;
}

.shop-all-page .price {
    font-size: .8rem;
}

/* Density toggle adjustments */
html.density-compact .shop-all-page .products-grid,
html.view-compact .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .55rem;
}

/* Ultra density (3rd mode) */
html.density-ultra .shop-all-page .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .45rem;
}

html.density-ultra .shop-all-page .product-image {
    height: auto;
    max-height: 85%;
    object-fit: contain;
}

html.density-ultra .shop-all-page .product-card h3 {
    font-size: .6rem;
}

html.density-ultra .shop-all-page .product-card p {
    display: none;
}

/* Ultra-compact (auto applied on very wide screens) */
@media (min-width: 1500px) {
    html.density-compact .shop-all-page .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .shop-all-page .products-grid:not(.no-ultra) {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

html.density-compact .shop-all-page .product-image,
html.view-compact .product-image {
    /* Keep images full-bleed even in compact/alternate views */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.density-compact .shop-all-page .product-card .product-info,
html.view-compact .product-card .product-info {
    padding: .55rem .55rem .7rem;
}

html.density-compact .shop-all-page .product-card h3,
html.view-compact .product-card h3 {
    font-size: .65rem;
}

html.density-compact .shop-all-page .product-card p,
html.view-compact .product-card p {
    display: none;
}

/* Grid view (default) - more spacious */
html.view-grid .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

html.view-grid .product-image {
    /* Grid view should not shrink images */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* List view - horizontal layout */
html.view-list .products-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

html.view-list .product-card {
    display: flex;
    flex-direction: row;
    max-width: none;
    width: 100%;
}

html.view-list .product-image {
    width: 180px;
    height: 140px;
    flex-shrink: 0;
}

html.view-list .product-info {
    flex: 1;
    padding: 1rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

html.view-list .product-info h3 {
    font-size: .9rem;
    margin-bottom: .5rem;
}

html.view-list .product-info p {
    display: block !important;
    font-size: .8rem;
    margin-bottom: .75rem;
    flex: 1;
}

html.view-list .price {
    font-size: .9rem;
    align-self: flex-end;
}

/* Category preview sections (limited rows) */
#category-preview {
    border: 1px solid rgba(255, 71, 87, .25);
    border-radius: 12px;
    padding: 1rem 1rem .6rem;
    background: rgba(0, 0, 0, .25);
}

#category-preview:empty {
    display: none;
}

.cat-preview-section {
    margin-bottom: 1.2rem;
}

.cat-preview-section:last-child {
    margin-bottom: .2rem;
}

.cat-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .35rem;
}

.cat-preview-head h3 {
    font: 600 .75rem/1 system-ui, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cat-preview-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
}

html.density-compact .cat-preview-row {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.preview-card .product-image {
    height: 120px;
}

html.density-compact .preview-card .product-image {
    height: 100px;
}

.preview-card .product-card h3,
.preview-card h3 {
    font-size: .6rem;
}

.cat-more-btn {
    margin-top: .5rem;
    font-size: .6rem;
    padding: .45rem .9rem;
}

@media (max-width: 760px) {
    .shop-all-page .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: .65rem;
    }

    .shop-all-page .product-image:not(img) {
        height: 150px;
    }

    html.density-compact .shop-all-page .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    html.density-ultra .shop-all-page .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* Global grid fallback */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem 1.2rem;
    margin-bottom: 3rem;
}

.product-card {
    background: var(--background-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

/* Skeleton loading cards */
.product-card.skeleton {
    position: relative;
    overflow: hidden;
    background: #1b1b1b;
    border: 1px solid #2a2a2a;
    box-shadow: none;
}

.product-card.skeleton .sk-img {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #202020 0%, #262626 40%, #202020 80%);
    animation: shimmer 1.2s linear infinite;
}

.product-card.skeleton .sk-lines {
    padding: .55rem .7rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.product-card.skeleton .sk-line {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #2a2a2a 0%, #313131 40%, #2a2a2a 80%);
    animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: 200px 0;
    }
}

/* Quick view modal */
#quickViewOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 2rem;
}

#quickViewOverlay[hidden] {
    display: none;
}

#quickViewModal {
    background: #141414;
    border: 1px solid #262626;
    border-radius: 14px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    position: relative;
}

@media (max-width:860px) {
    #quickViewModal {
        grid-template-columns: 1fr;
    }
}

#quickViewModal .qv-images {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

#quickViewModal .qv-images .qv-main {
    aspect-ratio: 4/5;
    background: #111;
    border: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#quickViewModal .qv-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#quickViewModal .qv-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: .4rem;
}

#quickViewModal .qv-thumbs button {
    background: #1d1d1d;
    border: 1px solid #262626;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

#quickViewModal .qv-thumbs button.active {
    outline: 2px solid var(--primary-color);
}

#quickViewModal .qv-content h2 {
    font-size: 1rem;
    margin: 0 0 .5rem;
    letter-spacing: .5px;
}

#quickViewModal .qv-content p {
    font-size: .7rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0 0 .75rem;
}

#quickViewModal .qv-content .qv-price {
    font: 600 .9rem/1 system-ui;
    margin: .25rem 0 .9rem;
}

#quickViewModal .qv-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #222;
    border: 1px solid #333;
    color: #bbb;
    padding: .4rem .55rem;
    font-size: .75rem;
    border-radius: 6px;
    cursor: pointer;
}

#quickViewModal .qv-close:hover {
    background: #2b2b2b;
    color: #fff;
}

#quickViewModal .qv-actions {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
}

#quickViewModal .qv-actions button {
    flex: 1 1 160px;
}

#quickViewModal .qv-meta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .75rem;
}

#quickViewModal .qv-meta .qv-meta-line {
    font-size: .6rem;
    color: #888;
}

.product-image:not(img) {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: var(--background-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/5;
}

/* Lazy image fade-in */
.product-image img[data-lazy] {
    opacity: 0;
    transition: opacity .4s ease;
}

.product-image img[data-lazy].loaded {
    opacity: 1;
}

.product-image img.product-img.secondary {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}

.product-image img.product-img.primary {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease;
}

.product-card.has-secondary:hover .product-image img.product-img.secondary {
    opacity: 1;
}

.product-card.has-secondary:hover .product-image img.product-img.primary {
    opacity: 0;
}

.product-actions {
    display: flex;
    gap: 0.6rem;
}

.product-actions.below {
    position: static;
    margin-top: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.wishlist-btn,
.quick-add-btn,
.quick-view-btn,
.review-open-btn {
    position: relative;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    border: 1px solid rgba(255, 71, 87, .6);
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    font: 700 1rem/1 "Segoe UI", sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Text labels under each action for clarity */
.wishlist-btn::after,
.quick-add-btn::after,
.quick-view-btn::after,
.review-open-btn::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    font-weight: 600;
    font-size: 10px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    opacity: .95;
}

/* Ensure enough vertical spacing so labels don't overlap buttons */
.product-actions {
    gap: 0.85rem;
}

.wishlist-btn:hover,
.quick-add-btn:hover,
.quick-view-btn:hover,
.review-open-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.wishlist-btn.added {
    background: #e74c3c !important;
    border-color: #e74c3c;
    color: white;
}

.wishlist-btn.added::before {
    content: '♥';
}

.quick-add-btn.added {
    background: #2e7d32 !important;
    border-color: #2e7d32;
}

.quick-view-btn {
    font-size: 0.95rem;
}

/* Mobile: transform action stack into a bottom row to avoid overlap with fingers */
@media (max-width: 560px) {
    .product-actions.below {
        justify-content: flex-start;
    }
}

/* Aux actions area under content */
.card-aux-actions {
    margin-top: 8px;
}

.card-aux-actions .review-open-btn {
    padding: 0 10px;
    height: 34px;
    border-radius: 8px;
}

/* (removed legacy admin navbar dropdown styles) */

/* Edit mode outline only (no drag & drop) */
.admin-edit-mode .product-card {
    outline: 1px dashed #444;
}

/* Editable inline highlight */
.admin-editable-outline {
    outline: 1px dashed #3a5fff;
    outline-offset: 2px;
}

/* Admin Modal & Catalog Manager (lightweight styles) */
#admin-modal-root.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 12002;
    display: grid;
    place-items: center;
}

#admin-modal-root[hidden] {
    display: none;
}

#admin-modal-root .admin-modal-dialog {
    width: min(960px, 96vw);
    max-height: 86vh;
    overflow: auto;
    background: #151518;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 10px 36px -10px rgba(0, 0, 0, .6);
    padding: 12px 14px;
}

#admin-modal-root .admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    background: #151518;
    padding-bottom: 8px;
    margin-bottom: 8px;
    z-index: 1;
}

#admin-modal-root .admin-modal-title {
    font: 700 1rem/1.2 system-ui;
    color: #fff;
}

#admin-modal-root .admin-modal-close {
    background: none;
    border: 1px solid #2a2a2a;
    color: #ddd;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

#admin-modal-root .admin-modal-body {
    font: 500 .9rem/1.3 system-ui;
    color: #ddd;
}

.catalog-manager .cm-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.catalog-manager .cm-tab {
    background: #1a1a20;
    color: #ddd;
    border: 1px solid #2a2a2a;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.catalog-manager .cm-tab.active {
    background: #2a2a38;
    border-color: #3a3a48;
    color: #fff;
}

.catalog-manager .cm-pane {
    display: block;
}

.catalog-manager .cm-section {
    display: block;
}

.catalog-manager .cm-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.catalog-manager .cm-search {
    flex: 1;
    max-width: 420px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    background: #101014;
    color: #ddd;
}

.catalog-manager .cm-actions .btn {
    margin-left: 6px;
}

.catalog-manager .cm-table-scroll {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
}

.catalog-manager .cm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.catalog-manager .cm-table th,
.catalog-manager .cm-table td {
    border-bottom: 1px solid #23232a;
    padding: 8px 10px;
    text-align: left;
}

.catalog-manager .cm-table tr:hover {
    background: #14141a;
}

.catalog-manager .cm-table .btn {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #2a2a2a;
    background: #222230;
    color: #ddd;
    cursor: pointer;
}

.catalog-manager .cm-table .btn.danger {
    background: #301a1a;
    border-color: #3a1f1f;
    color: #f2c0c0;
}

.catalog-manager .cm-cat-list {
    display: grid;
    gap: 10px;
}

.catalog-manager .cm-cat-item {
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 8px 10px;
    background: #111116;
}

.catalog-manager .cm-cat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.catalog-manager .cm-pill {
    background: #2a2a38;
    color: #fff;
    font: 700 .75rem/1 system-ui;
    border-radius: 999px;
    padding: 4px 8px;
}

.catalog-manager .cm-cat-products {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.catalog-manager .cm-cat-products li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #23232a;
    padding: 6px 2px;
}

.catalog-manager .cm-p-title {
    color: #eee;
}

.catalog-manager .cm-p-price {
    color: #b8e0c2;
}

.cm-form {
    display: grid;
    gap: 10px;
}

.cm-form label {
    display: grid;
    gap: 6px;
    font: 600 .85rem/1.1 system-ui;
    color: #ddd;
}

.cm-form input {
    padding: 8px 10px;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: #101014;
    color: #eee;
}

.cm-form .cm-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.cm-form .btn {
    padding: 6px 12px;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    background: #222230;
    color: #ddd;
    cursor: pointer;
}

.cm-form .btn.primary {
    background: #2a394f;
    border-color: #34445a;
    color: #fff;
}

.cm-form .btn.danger {
    background: #3a1f1f;
    border-color: #462424;
    color: #f2c0c0;
}

/* Dynamic merchandising badges */
.dyn-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.m-badge {
    background: rgba(255, 71, 87, .16);
    color: var(--primary-color);
    border: 1px solid rgba(255, 71, 87, .4);
    font-weight: 700;
    font-size: .55rem;
    padding: 3px 6px;
    border-radius: 8px;
    letter-spacing: .5px;
}

.m-badge-hot {
    background: linear-gradient(135deg, #ff8a00, #ff0066);
    color: #fff;
    border: none;
}

.m-badge-new {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #fff;
    border: none;
}

.m-badge-low-stock {
    background: linear-gradient(135deg, #ff6a00, #ee0979);
    color: #fff;
    border: none;
}

.m-badge-limited {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
    color: #fff;
    border: none;
}

.quick-view-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border: 1px solid rgba(255, 71, 87, .5);
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: var(--transition);
}

.product-card:hover .quick-view-btn {
    opacity: 1;
    transform: translateY(0);
}

.fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: 1px solid rgba(255, 71, 87, .45);
    display: grid;
    place-items: center;
}

.fav-btn.active,
.fav-btn:hover {
    background: var(--primary-color);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-img {
    transform: scale(1.05);
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: var(--text-light);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-content {
    padding: 1.5rem;
}

.product-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.product-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: color-mix(in srgb, #ffffff 92%, #ff4757 8%);
    /* Fallback */
    color: #fff1f3;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.product-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.add-to-cart-btn {
    width: 100%;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: var(--text-light);
    border: none;
    padding: 12px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.view-all-container {
    text-align: center;
    margin-top: 3rem;
}

.view-all-btn {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 15px 40px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
}

.view-all-btn:hover {
    background: var(--primary-color);
    color: var(--text-light);
}

/* Collections Section */
.collections {
    padding: 80px 0;
    background: var(--background-gradient);
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.collection-card {
    background: var(--background-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.collection-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.collection-image {
    height: 250px;
    background: linear-gradient(45deg, #1c1c1c, #2a2a2a);
    position: relative;
    overflow: hidden;
}

.collection-1 {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
}

.collection-2 {
    background: linear-gradient(45deg, var(--accent-color), var(--primary-color));
}

.collection-3 {
    background: linear-gradient(45deg, #ff3838, var(--primary-dark));
}

.collection-content {
    padding: 2rem;
}

.collection-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.collection-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.collection-btn {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 30px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.collection-btn:hover {
    background: var(--primary-color);
    color: var(--text-light);
}

/* Wellness Section */
.wellness {
    padding: 80px 0;
    background: var(--background-light);
}

.wellness-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.wellness-text h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.wellness-text p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.7;
}

.wellness-list {
    list-style: none;
    margin-bottom: 2rem;
}

.wellness-list li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.wellness-list i {
    color: var(--primary-color);
    margin-right: 1rem;
    font-size: 1.2rem;
}

.learn-more-btn {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 15px 35px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.learn-more-btn:hover {
    background: var(--primary-color);
    color: var(--text-light);
}

.wellness-card {
    background: var(--background-card);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.wellness-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.wellness-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.wellness-card p {
    color: var(--text-secondary);
}

/* Education Section */
.education {
    padding: 80px 0;
    background: var(--background-gradient);
}

/* Categories */
.categories {
    padding: 70px 0;
    background: var(--background-dark);
}

.category-grid {
    display: grid;
    gap: 1.5rem;
}

.category-card {
    background: var(--background-card);
    border: 1px solid rgba(255, 71, 87, .2);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    /* Avoid clipping of content (buttons) while keeping media clipped by its own wrapper */
    overflow: visible;
}

/* Representative image for category cards */
.category-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #0f0f10;
    display: block;
    margin: 0 0 12px 0;
    border: 1px solid rgba(255, 255, 255, .06);
}

.category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-card:hover {
    /* Prevent vertical movement to avoid any clipping in grids */
    transform: none;
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.category-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    background: radial-gradient(circle at 30% 30%, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: 0 0 16px rgba(255, 71, 87, .45);
}

.category-card h3 {
    color: var(--text-light);
    margin-bottom: .3rem;
    font-weight: 700;
}

.category-card p {
    color: var(--text-secondary);
    font-size: .95rem;
    margin-bottom: 1rem;
}

.category-btn {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.category-btn:hover {
    background: var(--primary-color);
    color: var(--text-light);
}

/* Ensure categories page shows full cards without clipping, 1–2 per row centered */
.categories .category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    max-width: 1140px;
    margin: 8px auto;
}

@media (min-width: 1024px) {
    .categories .category-grid {
        /* Two columns with a comfortable minimum width to fit long buttons */
        grid-template-columns: repeat(2, minmax(520px, 1fr));
    }
}

/* Inside the card, allow actions to wrap and never overflow */
.categories .category-card .cat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.categories .category-card .cat-actions a,
.categories .category-card .cat-actions .btn,
.categories .category-card .shop-cat-btn {
    flex: 1 1 260px;
    min-width: 240px;
    max-width: 100%;
    white-space: normal;
}

.education-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.education-card {
    background: var(--background-card);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 71, 87, 0.2);
}

.education-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.education-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.education-icon {
    font-size: 2rem;
    color: var(--text-light);
}

.education-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.education-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Footer */
.footer {
    background: #0b0b0b;
    color: var(--text-light);
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.footer-section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: var(--transition);
    text-decoration: none;
}

.social-link:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-color);
}

.newsletter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 12px;
    border: none;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    font-size: 0.95rem;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-btn {
    background: var(--primary-color);
    color: var(--text-light);
    border: none;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    white-space: nowrap;
}

.newsletter-btn:hover {
    background: var(--primary-dark);
}

.product-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
}

.rating i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 6px rgba(255, 71, 87, .4));
}

.reviews {
    color: var(--text-secondary);
    font-size: .9rem;
}

/* Age-gate */
.age-pill {
    background: rgba(255, 71, 87, .15);
    border: 1px solid rgba(255, 71, 87, .4);
    color: var(--primary-color);
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    margin-right: .5rem;
}

.age-gate {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(4px);
    z-index: 2000;
}

.age-gate[hidden] {
    display: none !important;
}

.age-gate-card {
    width: min(520px, 92vw);
    background: #141414;
    border: 1px solid rgba(255, 71, 87, .25);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-glow);
    text-align: center;
}

.age-gate-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    background: radial-gradient(circle at 30% 30%, var(--primary-color), var(--primary-dark));
    box-shadow: 0 0 20px rgba(255, 71, 87, .6);
}

.age-gate h2 {
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 1.6rem;
}

.age-gate p {
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.age-gate-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.age-gate-note {
    color: var(--text-secondary);
    display: block;
    margin-top: 12px;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.muted {
    color: var(--text-secondary);
}

/* Contact */
.contact-section {
    padding: 80px 0;
    background: var(--background-dark);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.contact-card {
    background: var(--background-card);
    border: 1px solid rgba(255, 71, 87, .2);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.contact-card h3 {
    margin-bottom: .5rem;
}

.contact-link {
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, .3);
}

.contact-actions {
    display: flex;
    gap: .75rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: var(--background-dark);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-soft);
        padding: 2rem 0;
        z-index: 999;
        border-bottom: 1px solid rgba(255, 71, 87, 0.3);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-logo h1 {
        font-size: 1.4rem;
    }

    .logo-img {
        height: 38px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
    }

    .view-controls {
        position: static;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .quick-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .quick-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .wellness-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .newsletter {
        flex-direction: column;
    }

    .newsletter-input {
        min-width: auto;
    }

    .product-card {
        margin: 0 auto;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero {
        padding-top: 90px;
        min-height: calc(100dvh - 70px);
        /* account for header */
    }

    .nav-logo h1 {
        font-size: 1.2rem;
    }

    .logo-img {
        height: 34px;
    }

    .hero-title {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .cta-button {
        padding: 15px 30px;
        font-size: 1rem;
    }

    .features-grid,
    .collections-grid,
    .education-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-card {
        max-width: 100%;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .feature-card,
    .collection-card,
    .education-card {
        padding: 2rem 1.5rem;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .container {
        padding: 0 10px;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .nav-logo h1 {
        font-size: 1.1rem;
    }

    .product-content {
        padding: 1rem;
    }

    .feature-card,
    .collection-card,
    .education-card {
        padding: 1.5rem 1rem;
    }
}

/* Quick Actions */
.quick-actions {
    position: sticky;
    top: 70px;
    z-index: 5;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    padding: 10px 0 6px;
    backdrop-filter: blur(6px);
}

.actions-scroll {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: 0 20px 6px;
    scrollbar-width: none;
}

.actions-scroll::-webkit-scrollbar {
    display: none;
}

.action-chip {
    background: rgba(255, 255, 255, .06);
    color: var(--text-light);
    border: 1px solid rgba(255, 71, 87, .35);
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 600;
}

.action-chip:hover {
    background: rgba(255, 71, 87, .15);
}

/* Style Palette (theme switcher) */
.style-palette {
    display: none;
    /* replaced by floating theme button on mobile */
}

.palette-label {
    color: var(--text-secondary);
    font-size: .85rem;
    margin-right: 4px;
}

.swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .7);
    cursor: pointer;
}

.swatch[data-theme="classic"] {
    background: #ff4757;
}

.swatch[data-theme="candy"] {
    background: linear-gradient(45deg, #ff9ff3, #feca57);
}

.swatch[data-theme="velvet"] {
    background: linear-gradient(45deg, #8e2de2, #4a00e0);
}

.swatch[data-theme="midnight"] {
    background: linear-gradient(45deg, #00d2ff, #3a47d5);
}

.swatch[data-theme="gold"] {
    background: linear-gradient(45deg, #d4af37, #ff6b81);
}

.swatch[data-theme="light"] {
    background: linear-gradient(45deg, #ffffff, #ffd9ec);
    border-color: rgba(0, 0, 0, .2);
}

/* Spotlight strip */
.spotlight {
    padding: 10px 0 0;
    background: linear-gradient(180deg, rgba(255, 71, 87, .06), transparent);
}

.spotlight .strip {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.spotlight .strip img {
    height: 80px;
    width: 120px;
    object-fit: cover;
    border-radius: 10px;
    opacity: .85;
    filter: saturate(1.2);
    animation: marquee 18s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* Trust strip */
.trust-strip {
    background: rgba(0, 0, 0, .4);
    border-top: 1px solid rgba(255, 71, 87, .15);
    border-bottom: 1px solid rgba(255, 71, 87, .15);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    padding: .85rem 0;
    align-items: center;
}

.trust-item {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-weight: 600;
}

.trust-item i {
    color: var(--primary-color);
    text-shadow: 0 0 8px rgba(255, 71, 87, .35);
}

/* Equality chips */
.equality {
    padding: 40px 0;
    background: var(--background-dark);
    border-top: 1px solid rgba(255, 71, 87, .15);
}

.equality-wrap {
    text-align: center;
}

.equality-title {
    color: var(--text-light);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-bottom: .3rem;
}

.equality-sub {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.equality-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eq-chip {
    background: rgba(0, 0, 0, .45);
    color: var(--text-light);
    border: 1px solid rgba(255, 71, 87, .35);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.eq-chip i {
    color: var(--primary-color);
}

.eq-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* Membership CTA */
.membership {
    padding: 70px 0;
    background: linear-gradient(120deg, rgba(255, 71, 87, .08), rgba(255, 71, 87, .02));
    border-top: 1px solid rgba(255, 71, 87, .15);
}

.member-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 900px) {
    .member-grid {
        grid-template-columns: 1fr;
    }
}

.member-copy h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--text-light);
    margin-bottom: .35rem;
}

.member-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: 10px 0 14px;
    color: var(--text-secondary);
}

.member-benefits i {
    color: var(--primary-color);
    margin-right: .35rem;
}

.member-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.member-visual {
    position: relative;
    min-height: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(circle at 30% 30%, rgba(255, 71, 87, .25), rgba(255, 71, 87, .05));
}

.member-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 71, 87, .35), rgba(255, 71, 87, 0) 60%);
    filter: blur(30px);
    animation: drift 10s ease-in-out infinite alternate;
}

@keyframes drift {
    from {
        transform: translate(-10%, -10%);
    }

    to {
        transform: translate(12%, 18%);
    }
}

/* Vibe Selector */
.vibe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin-top: .5rem;
}

.vibe-choice {
    display: grid;
    gap: .25rem;
    justify-items: center;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 71, 87, .25);
    background: rgba(0, 0, 0, .45);
    color: var(--text-light);
}

.vibe-choice:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.vibe-swatch {
    width: 54px;
    height: 32px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}

.vibe-swatch.classic {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
}

.vibe-swatch.candy {
    background: linear-gradient(45deg, #ff7eb3, #ff758c);
}

.vibe-swatch.velvet {
    background: linear-gradient(45deg, #a66bbe, #5e2a84);
}

.vibe-swatch.midnight {
    background: linear-gradient(45deg, #111, #333);
}

.vibe-swatch.gold {
    background: linear-gradient(45deg, #d4af37, #a57c00);
}

/* Smart Join Banner */
.join-banner {
    position: sticky;
    bottom: 0;
    z-index: 8;
    background: rgba(10, 10, 10, .9);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 71, 87, .25);
    padding: 10px 0;
}

.join-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.join-copy {
    display: grid;
}

.join-copy strong {
    color: var(--text-light);
}

.join-actions {
    display: flex;
    gap: .6rem;
}

/* Sticky Cart Bar */
.cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(15, 15, 15, .96);
    border-top: 1px solid rgba(255, 71, 87, .25);
    backdrop-filter: blur(8px);
}

.cart-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-bar-info {
    color: var(--text-light);
}

.cart-bar-actions {
    display: flex;
    gap: .6rem;
}

/* Mini Cart Panel (bottom-right) */
.cart-mini {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: flex;
    gap: .5rem;
    background: rgba(15, 15, 15, .92);
    border: 1px solid rgba(255, 71, 87, .35);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
}

.cart-mini .secondary-btn {
    padding: .4rem .6rem;
    font-size: .9rem;
}

.cart-mini .cta-button {
    padding: .4rem .7rem;
    font-size: .9rem;
}

/* Mobile enhancements */
@media (max-width: 520px) {
    .filter-toggle-btn {
        position: fixed;
        left: .75rem;
        top: .75rem;
        z-index: 1150;
        background: linear-gradient(135deg, #ff4757, #ff6b81);
        color: #fff;
        font-weight: 600;
        border: none;
        padding: .55rem .9rem;
        border-radius: 10px;
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .5);
    }

    .shop-filters {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 78%;
        max-width: 340px;
        background: var(--background-dark);
        z-index: 1100;
        padding: 1.25rem 1rem 5rem;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .3s ease;
        box-shadow: 4px 0 18px -4px rgba(0, 0, 0, .6);
    }

    .shop-filters.open {
        transform: translateX(0);
    }

    body.filter-open {
        overflow: hidden;
    }

    .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        backdrop-filter: blur(2px);
        z-index: 1090;
        opacity: 0;
        transition: opacity .25s ease;
    }

    .filter-overlay.visible {
        opacity: 1;
    }

    .filter-apply-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .85);
        padding: .65rem .85rem;
        display: flex;
        gap: .5rem;
        z-index: 1200;
        backdrop-filter: blur(8px);
    }

    .filter-apply-bar button {
        flex: 1;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 58px;
        background: rgba(15, 15, 18, .92);
        backdrop-filter: blur(14px);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border-top: 1px solid rgba(255, 255, 255, .08);
        z-index: 1300;
        font-size: .7rem;
    }

    /* More polished mobile bottom nav */
    .mobile-bottom-nav {
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-bottom-nav button {
        background: none;
        border: none;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        font-weight: 600;
        min-height: 58px;
        padding: 4px 2px 6px;
    }

    .mobile-bottom-nav a.tab-item,
    .mobile-bottom-nav button.tab-item {
        text-decoration: none;
        color: var(--text-secondary);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 4px;
        position: relative;
    }

    .mobile-bottom-nav .tab-item .tab-label {
        font-size: .72rem;
        line-height: 1;
        display: block;
    }

    .mobile-bottom-nav button.active {
        color: #fff;
    }

    .mobile-bottom-nav svg {
        width: 20px;
        height: 20px;
    }

    /* Cart badge on mobile nav: compact and visible */
    .mobile-bottom-nav .cart-count-badge {
        position: absolute;
        top: 6px;
        right: 22%;
        transform: translateX(6px);
        background: var(--primary-color);
        color: white;
        font-size: .64rem;
        padding: 2px 6px;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        min-width: 18px;
        text-align: center;
    }

    .theme-fab {
        position: fixed;
        right: .85rem;
        bottom: calc(58px + 12px + env(safe-area-inset-bottom));
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4a00e0, #8e2de2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: .85rem;
        box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .6);
        z-index: 1320;
        border: none;
        cursor: pointer;
    }

    .theme-fab-panel {
        position: fixed;
        right: .85rem;
        bottom: 122px;
        background: var(--background-dark);
        padding: .75rem .9rem;
        border-radius: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        width: 200px;
        box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .65);
        z-index: 1320;
    }

    .theme-fab-panel.hidden {
        display: none;
    }

    .theme-fab-panel .swatch {
        width: 26px;
        height: 26px;
    }
}

/* Tooltip & icon label utilities */
.icon-labeled {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .6rem;
}

.tooltip-hint {
    position: absolute;
    background: #111;
    color: #fff;
    font-size: .65rem;
    padding: 4px 6px;
    border-radius: 6px;
    white-space: nowrap;
    transform: translate(-50%, -6px);
    top: 0;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 3000;
}

[data-hint]:focus .tooltip-hint,
[data-hint]:hover .tooltip-hint {
    opacity: 1;
}

/* Accepted payments bar */
.accepted-payments {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    align-items: center;
    font-size: .55rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.accepted-payments .pay-icon {
    padding: .42rem .55rem .44rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 6px;
    font-weight: 700;
    line-height: 1;
    position: relative;
}

.accepted-payments .pay-icon.visa {
    color: #1a6bd6;
    border-color: rgba(26, 107, 214, .35);
}

.accepted-payments .pay-icon.mc {
    color: #ff5f00;
    border-color: rgba(255, 95, 0, .35);
}

.accepted-payments .pay-icon.amex {
    color: #2e77bb;
    border-color: rgba(46, 119, 187, .35);
}

.accepted-payments .pay-icon.paypal {
    color: #003087;
    border-color: rgba(0, 48, 135, .4);
}

.accepted-payments .pay-icon.stripe {
    color: #635bff;
    border-color: rgba(99, 91, 255, .4);
}

.accepted-payments .pay-icon.btc {
    color: #f6921a;
    border-color: rgba(246, 146, 26, .4);
}

/* Tap target sizing adjustments */
button,
.btn,
.cta-button,
.secondary-btn,
.filter-chip,
.action-chip,
.swatch,
.tab-item {
    min-height: 44px;
}

@media (hover:hover) {
    .tab-item:hover {
        background: rgba(255, 255, 255, .06);
    }
}

@media (max-width: 520px) {
    .cart-bar-actions .secondary-btn {
        display: none;
    }
}

/* Product tabs */
.product-tabs {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.product-tab {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 71, 87, .35);
    color: var(--text-light);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
}

.product-tab.active,
.product-tab:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Fun Zone */
.fun-zone {
    padding: 70px 0;
    background: var(--background-light);
}

.fun-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.fun-card {
    background: var(--background-card);
    border: 1px solid rgba(255, 71, 87, .2);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.fun-btn {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 700;
}

.vibe-bars {
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    height: 40px;
    align-items: end;
    margin: 12px 0;
}

.vibe-bars span {
    width: 8px;
    height: 12px;
    background: var(--primary-color);
    filter: drop-shadow(0 0 8px rgba(255, 71, 87, .5));
    border-radius: 3px;
    animation: vibe-slow 1.6s ease-in-out infinite;
}

.vibe-controls {
    display: flex;
    gap: .5rem;
}

.vibe-btn {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
}

@keyframes vibe-slow {

    0%,
    100% {
        height: 12px
    }

    50% {
        height: 28px
    }
}

@keyframes vibe-wave {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes vibe-pulse {

    0%,
    100% {
        height: 10px
    }

    50% {
        height: 40px
    }
}

/* Mobile Tab Bar */
.mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, .92);
    border-top: 1px solid rgba(255, 71, 87, .3);
    display: none;
    gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
    backdrop-filter: blur(8px);
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    font-weight: 700;
}

.tab-item i {
    color: var(--text-secondary);
}

.tab-item:focus,
.tab-item:hover {
    color: var(--text-light);
}

@media (max-width: 768px) {
    .mobile-tabbar {
        display: flex;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.request-price-btn {
    background: transparent;
    color: var(--text-light);
    border: 1px solid rgba(255, 71, 87, .5);
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

.request-price-btn:hover {
    background: rgba(255, 71, 87, .1);
}

.variant-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .5rem .75rem;
    margin: .5rem 0 1rem;
}

.variant-controls label {
    display: grid;
    gap: 4px;
    font-size: .9rem;
    color: var(--text-secondary);
}

.variant-controls select {
    background: #141414;
    color: var(--text-light);
    border: 1px solid rgba(255, 71, 87, .35);
    border-radius: 8px;
    padding: 8px 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Modals & Overlays */
.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    z-index: 2000;
}

.modal[hidden] {
    display: none !important;
}

.modal-card {
    width: min(680px, 92vw);
    background: #121212;
    border: 1px solid rgba(255, 71, 87, .3);
    border-radius: 14px;
    box-shadow: var(--shadow-glow);
    padding: 20px;
    color: var(--text-light);
    position: relative;
}

.modal-form {
    display: grid;
    gap: .8rem;
    margin-top: .6rem;
}

.modal-form input,
.modal-form textarea {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 71, 87, .25);
    border-radius: 10px;
    padding: 12px;
    color: var(--text-light);
}

.modal-actions {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    color: #fff;
    border: 0;
    font-size: 1.6rem;
    cursor: pointer;
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, .9);
    z-index: 2100;
    display: grid;
    place-items: start center;
    padding-top: 120px;
}

.search-overlay[hidden] {
    display: none !important;
}

.search-card {
    width: min(900px, 95vw);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 71, 87, .35);
    border-radius: 999px;
    padding: 12px 16px;
}

.search-bar input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 1.1rem;
}

.search-meta {
    color: var(--text-secondary);
    margin-top: .8rem;
}

/* Quick View */
.quick-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
}

.quick-grid img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    background: #000;
}

.qv-media {
    position: relative;
}

.qv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .4);
    color: var(--text-light);
    border: 1px solid rgba(255, 71, 87, .3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.qv-nav.prev {
    left: 8px;
}

.qv-nav.next {
    right: 8px;
}

.qv-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.qv-thumbs button {
    padding: 0;
    border: 1px solid rgba(255, 71, 87, .25);
    background: #111;
    border-radius: 8px;
    cursor: pointer;
}

.qv-thumbs img {
    width: 100%;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    opacity: .85;
}

.qv-thumbs .active img {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--primary-color) inset;
}

.quick-info .qv-price {
    font-weight: 800;
    color: var(--primary-color);
    margin: .5rem 0 1rem;
    font-size: 1.3rem;
}

.qv-specs {
    list-style: none;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    padding: 0;
}

.qv-specs li {
    margin-bottom: .25rem;
}

@media (max-width: 720px) {
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .quick-grid img {
        height: 220px;
    }

    .qv-nav {
        display: none;
    }
}

/* Cart Drawer */
.cart-drawer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2200;
    display: grid;
    justify-items: end;
}

.cart-drawer[hidden] {
    display: none !important;
}

.cart-panel {
    width: min(420px, 92vw);
    height: 100%;
    background: #111;
    border-left: 1px solid rgba(255, 71, 87, .3);
    padding: 16px;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.cart-items {
    overflow: auto;
    display: grid;
    gap: .6rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: .6rem;
    align-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 71, 87, .25);
    padding: 8px;
    border-radius: 10px;
}

.cart-item img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}

.cart-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .8rem;
}

.cart-total {
    font-weight: 800;
}

/* Floating Support Button */
.support-fab {
    position: fixed;
    bottom: 90px;
    right: 16px;
    z-index: 1200;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-dark));
    color: white;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    box-shadow: var(--shadow-glow);
    display: grid;
    place-items: center;
}

/* Theme presets (via data-theme attribute on body) */
[data-theme="classic"] {
    --primary-color: #ff4757;
    --primary-dark: #c44569;
    --accent-color: #ff6b81;
}

[data-theme="candy"] {
    --primary-color: #f368e0;
    --primary-dark: #ff9ff3;
    --accent-color: #feca57;
}

[data-theme="velvet"] {
    --primary-color: #8e2de2;
    --primary-dark: #4a00e0;
    --accent-color: #a29bfe;
}

[data-theme="midnight"] {
    --primary-color: #3a47d5;
    --primary-dark: #00d2ff;
    --accent-color: #00f7ff;
}

[data-theme="gold"] {
    --primary-color: #d4af37;
    --primary-dark: #c59d2f;
    --accent-color: #ff6b81;
}

/* Light theme (clean, wellness oriented) */
[data-theme="light"] {
    --primary-color: #e83e8c;
    --primary-dark: #c82368;
    --accent-color: #ffb8d2;
    --background-dark: #faf9fb;
    --background-light: #ffffff;
    --background-card: #ffffff;
    --text-primary: #2a2530;
    --text-secondary: #5a5560;
    --shadow-soft: 0 6px 24px -6px rgba(232, 62, 140, 0.25);
    --shadow-glow: 0 0 24px rgba(232, 62, 140, .35);
    color-scheme: light;
}

body[data-theme="light"] {
    background: linear-gradient(135deg, #ffffff 0%, #f4eef7 100%);
}

body[data-theme="light"] .header {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(232, 62, 140, .25);
}

body[data-theme="light"] .product-card,
body[data-theme="light"] .collection-card,
body[data-theme="light"] .feature-card,
body[data-theme="light"] .education-card,
body[data-theme="light"] .category-card {
    border-color: rgba(232, 62, 140, .25);
}

body[data-theme="light"] .footer {
    background: #f2edf5;
    color: #2a2530;
}

body[data-theme="light"] .nav-link {
    color: #2a2530;
}

body[data-theme="light"] .nav-link::after {
    background: var(--primary-color);
}

body[data-theme="light"] .trust-badge {
    background: rgba(232, 62, 140, .08);
    border-color: rgba(232, 62, 140, .35);
}

body[data-theme="light"] .badge-text {
    color: #2a2530;
}

body[data-theme="light"] .hero-subtitle {
    color: var(--text-secondary);
}

body[data-theme="light"] .top-announcement {
    background: linear-gradient(90deg, rgba(232, 62, 140, .85), rgba(232, 62, 140, .55));
}

/* Theme FAB subtle styling */
body .theme-fab {
    opacity: .85;
    backdrop-filter: blur(6px);
    transition: opacity .25s;
}

body .theme-fab:hover {
    opacity: 1;
}

/* Enhanced Hero Section */
.gradient-passion {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 50%, #ff9ff3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(255, 71, 87, 0.8));
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(255, 71, 87, 0.8));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(255, 107, 129, 0.9));
    }
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 1rem auto 2rem;
    max-width: 600px;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

/* Hero Trust Badges */
.hero-trust-badges {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: 50px;
    transition: var(--transition);
}

.trust-badge:hover {
    background: rgba(255, 71, 87, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
}

.badge-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 5px rgba(255, 71, 87, 0.6));
}

.badge-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Section Headers */
.section-header-center {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* View Controls */
.view-controls {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: .5rem;
    background: var(--background-card);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: .5rem;
    padding: .25rem;
}

.view-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    padding: .5rem .75rem;
    border-radius: .25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle:hover {
    background: rgba(255, 71, 87, 0.1);
    color: var(--primary-color);
}

.view-toggle.active {
    background: var(--primary-color);
    color: white;
}

/* Quick Filters */
.quick-filters {
    display: flex;
    gap: .75rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-chip {
    background: transparent;
    border: 1px solid rgba(255, 71, 87, 0.4);
    color: var(--text-secondary);
    padding: .5rem 1rem;
    border-radius: 2rem;
    font-size: .85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.filter-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(255, 71, 87, 0.1);
}

.filter-chip.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Enhanced Feature Cards */
.features {
    padding: 4rem 0;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.5) 0%, rgba(15, 15, 15, 0.8) 100%);
}

/* Customer Reviews */
.reviews-section {
    padding: 4rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.review-card {
    background: var(--background-card);
    border: 1px solid rgba(255, 71, 87, 0.2);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(255, 71, 87, 0.2);
}

.review-stars {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #ffd700;
}

.review-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text-light);
    font-style: italic;
}

.review-author {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.review-product {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(255, 71, 87, 0.6));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.feature-card {
    background: var(--background-card);
    border: 1px solid rgba(255, 71, 87, 0.2);
    border-radius: var(--border-radius);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: var(--transition);
}

.feature-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-medium);
    transform: translateY(-5px);
}

.feature-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.15) 0%, rgba(255, 107, 129, 0.05) 100%);
    padding: 5rem 0;
    margin: 3rem 0;
    border-top: 1px solid rgba(255, 71, 87, 0.3);
    border-bottom: 1px solid rgba(255, 71, 87, 0.3);
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(255, 71, 87, 0.8));
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.newsletter-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.newsletter-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto 1rem;
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 71, 87, 0.3);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: var(--transition);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form button {
    padding: 1rem 2rem;
    white-space: nowrap;
    border-radius: 50px;
}

.newsletter-privacy {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.newsletter-privacy a {
    color: var(--primary-color);
    text-decoration: none;
}

.newsletter-privacy a:hover {
    text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-trust-badges {
        gap: 0.75rem;
    }

    .trust-badge {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .badge-icon {
        font-size: 1.1rem;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta-group .btn {
        width: 100%;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
    }

    .newsletter-content h2 {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-trust-badges {
        gap: 0.5rem;
    }

    .trust-badge {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }

    .badge-text {
        font-size: 0.8rem;
    }

    /* Underground Corner Button Mobile */
    .underground-side-button {
        bottom: 15px;
        right: 15px;
        transform: scale(0.9);
    }

    .underground-button-inner {
        padding: 6px 8px;
        min-width: 75px;
    }

    .underground-icon {
        font-size: 1rem;
    }

    .underground-main {
        font-size: 0.7rem;
    }

    .underground-sub {
        font-size: 0.55rem;
    }

    .hanging-word {
        font-size: 0.55rem;
        padding: 2px 4px;
    }
}