/* ============================================================
   SHOP / ARCHIVE PAGE — ISOLATED STYLES
   For lux-shop-wrapper template
   Loaded after main.css, only on shop/category pages
   ============================================================ */

/* ---------- BASE WRAPPER ---------- */
.lux-shop-wrapper {
    background: #FBF7F0 !important;
    color: #2A1F14 !important;
    font-family: 'Inter', sans-serif !important;
}

.lux-container {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

/* ---------- SHOP HEADER (Hero) ---------- */
.lux-shop-header {
    padding: 4rem 0 3rem !important;
    background: #F6F1E8 !important;
    border-bottom: 1px solid #E5DCC9 !important;
    text-align: center !important;
}

.lux-shop-header .woocommerce-breadcrumb {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #8B7B6B !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
}

.lux-shop-header .woocommerce-breadcrumb a {
    color: #8B7B6B !important;
    text-decoration: none !important;
}

.lux-shop-header .woocommerce-breadcrumb a:hover {
    color: #B8935E !important;
}

.lux-shop-title-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
}

.lux-shop-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    font-weight: 500 !important;
    color: #2A1F14 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
}

.lux-shop-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: #8B7B6B !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

.lux-shop-count {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #B8935E !important;
    border: 1px solid #B8935E !important;
    padding: 0.4rem 1rem !important;
    border-radius: 999px !important;
    background: transparent !important;
}

/* ---------- MAIN LAYOUT ---------- */
.lux-shop-layout {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 4rem !important;
    padding-top: 4rem !important;
    padding-bottom: 5rem !important;
    align-items: start !important;
}

/* ---------- SIDEBAR ---------- */
.lux-sidebar {
    position: sticky !important;
    top: 100px !important;
}

.lux-sidebar-header {
    display: none !important;
}

.lux-filter-group {
    margin-bottom: 3rem !important;
}

.lux-filter-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #2A1F14 !important;
    margin: 0 0 1.25rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid #E5DCC9 !important;
}

.lux-filter-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lux-filter-list li {
    margin-bottom: 0.25rem !important;
}

.lux-filter-list a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.6rem 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    color: #8B7B6B !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.lux-filter-list a:hover,
.lux-filter-list a.is-active {
    color: #B8935E !important;
    font-weight: 500 !important;
}

.lux-filter-count {
    font-size: 0.75rem !important;
    color: #B8935E !important;
}

.lux-filter-trust {
    background: #FBF7F0 !important;
    border: 1px solid #E5DCC9 !important;
    border-radius: 4px !important;
    padding: 1.5rem !important;
}

.lux-trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.lux-trust-item:last-child {
    margin-bottom: 0 !important;
}

.lux-trust-item span {
    font-size: 1.25rem !important;
}

.lux-trust-item p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    color: #8B7B6B !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ---------- PRODUCTS MAIN ---------- */
.lux-products-main {
    min-width: 0 !important;
}

.lux-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #E5DCC9 !important;
}

.lux-toolbar .woocommerce-ordering {
    margin: 0 !important;
}

.lux-toolbar select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0.6rem 2.5rem 0.6rem 1rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    color: #2A1F14 !important;
    background: #fff !important;
    border: 1px solid #E5DCC9 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B8935E' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
}

/* ---------- PRODUCT GRID ---------- */
.lux-product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

.lux-product-card {
    transition: transform 0.3s ease !important;
}

.lux-product-card:hover {
    transform: translateY(-4px) !important;
}

.lux-product-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.lux-product-img {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    background: #E5DCC9 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}

.lux-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

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

.lux-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 2px !important;
    color: #fff !important;
    z-index: 2 !important;
}

.lux-sale {
    background: #6B1F2E !important;
}

.lux-out {
    background: #2A1F14 !important;
}

.lux-product-info {
    text-align: left !important;
}

.lux-product-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #2A1F14 !important;
    margin: 0 0 0.25rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.lux-product-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #B8935E !important;
}

.lux-product-price del {
    color: #8B7B6B !important;
    font-size: 0.9em !important;
    margin-right: 0.4rem !important;
}

.lux-product-price ins {
    text-decoration: none !important;
    color: #6B1F2E !important;
}

/* ---------- PAGINATION ---------- */
.lux-pagination {
    margin-top: 4rem !important;
    text-align: center !important;
}

.lux-pagination .page-numbers {
    display: inline-flex !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lux-pagination .page-numbers li {
    list-style: none !important;
}

.lux-pagination .page-numbers li a,
.lux-pagination .page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid #E5DCC9 !important;
    color: #2A1F14 !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    transition: all 0.2s !important;
}

.lux-pagination .page-numbers li span.current,
.lux-pagination .page-numbers li a:hover {
    background: #B8935E !important;
    border-color: #B8935E !important;
    color: #fff !important;
}

/* ---------- EMPTY STATE ---------- */
.lux-empty {
    text-align: center !important;
    padding: 4rem 0 !important;
}

.lux-empty h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.75rem !important;
    color: #2A1F14 !important;
    margin-bottom: 0.5rem !important;
}

.lux-empty p {
    font-family: 'Inter', sans-serif !important;
    color: #8B7B6B !important;
    margin: 0 !important;
}

/* ---------- MOBILE FILTER BUTTON ---------- */
.lux-mobile-filter-btn {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background: #fff !important;
    border: 1px solid #E5DCC9 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 2px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #2A1F14 !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
}

/* ---------- FILTER BACKDROP ---------- */
.lux-filter-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s !important;
}

.lux-filter-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
}

body.lux-no-scroll {
    overflow: hidden !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .lux-shop-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .lux-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .lux-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 340px !important;
        height: 100vh !important;
        background: #FBF7F0 !important;
        z-index: 99999 !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 5px 0 30px rgba(0,0,0,0.1) !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .lux-sidebar.is-open {
        left: 0 !important;
    }

    .lux-sidebar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #E5DCC9 !important;
    }

    .lux-sidebar-header h3 {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 1.5rem !important;
        color: #2A1F14 !important;
        margin: 0 !important;
    }

    .lux-close-filters {
        background: none !important;
        border: none !important;
        font-size: 1.75rem !important;
        cursor: pointer !important;
        color: #2A1F14 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .lux-mobile-filter-btn {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .lux-product-grid {
        grid-template-columns: 1fr !important;
    }

    .lux-shop-title {
        font-size: 1.85rem !important;
    }
}

/* ============================================================
   SHOP GRID — HARD OVERRIDES
   Forces 3 equal columns and prevents flex fallback from main.css
   ============================================================ */

/* Kill any inherited flex layout on the shop grid */
.lux-shop-wrapper .lux-product-grid,
.lux-product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2rem !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force every card to be equal width — overrides .ab-product-card flex rule */
.lux-shop-wrapper .lux-product-card,
.lux-product-grid .lux-product-card,
.lux-product-grid > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Kill any WooCommerce `ul.products` flex/float rules that sneak in */
.lux-product-grid ul.products,
.lux-product-grid ul.products li.product {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    list-style: none !important;
    padding: 0 !important;
}

/* Prevent image stretching */
.lux-product-grid .lux-product-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

.lux-product-grid .lux-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Card link fill the card */
.lux-product-grid .lux-product-link {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* ============================================================
   PAGINATION — HARD OVERRIDES
   Prevents default WC float/pill styles from leaking
   ============================================================ */

.lux-pagination,
.lux-pagination .woocommerce-pagination {
    margin-top: 3rem !important;
    text-align: center !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

.lux-pagination ul.page-numbers,
.lux-pagination .woocommerce-pagination ul.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border: none !important;
    float: none !important;
    width: auto !important;
}

.lux-pagination ul.page-numbers li,
.lux-pagination .woocommerce-pagination ul.page-numbers li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    list-style: none !important;
}

.lux-pagination ul.page-numbers li a,
.lux-pagination ul.page-numbers li span,
.lux-pagination .woocommerce-pagination ul.page-numbers li a,
.lux-pagination .woocommerce-pagination ul.page-numbers li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    border: 1px solid #E5DCC9 !important;
    color: #2A1F14 !important;
    background: #FBF7F0 !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: all 0.2s !important;
    float: none !important;
}

.lux-pagination ul.page-numbers li span.current,
.lux-pagination ul.page-numbers li a:hover,
.lux-pagination .woocommerce-pagination ul.page-numbers li span.current,
.lux-pagination .woocommerce-pagination ul.page-numbers li a:hover {
    background: #B8935E !important;
    border-color: #B8935E !important;
    color: #fff !important;
}

/* Hide "prev/next" text so only icons show if WC renders them */
.lux-pagination ul.page-numbers li a.prev,
.lux-pagination ul.page-numbers li a.next {
    font-size: 0.9rem !important;
}

/* ============================================================
   RESPONSIVE — reassert grid columns
   ============================================================ */

@media (max-width: 1024px) {
    .lux-shop-wrapper .lux-product-grid,
    .lux-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .lux-shop-wrapper .lux-product-grid,
    .lux-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   FIXES FOR SHOP PAGE (Mobile & Desktop)
   ============================================================ */

/* --- FIX A: Increase Header Height (Mobile only) --- */
@media (max-width: 1024px) {
    .site-header-lux .ab-lux-inner {
        padding: 1.25rem 1.5rem !important; /* Increased from 1rem */
        min-height: 80px;
    }
    .site-header-lux .custom-logo {
        max-height: 48px !important; /* Ensures logo fits the bigger header */
    }
    .site-header-lux .ab-mob-toggle {
        width: 44px !important;
        height: 44px !important;
    }
}

/* --- FIX C: Product Image Size --- */
/* Make images significantly smaller, more premium, and balanced */
.lux-shop-wrapper .lux-product-img {
    max-width: 85% !important;
    margin: 0 auto 1rem auto !important;
}

/* On mobile, make it even smaller so 2 cards can fit if needed, or 1 cleanly */
@media (max-width: 768px) {
    .lux-shop-wrapper .lux-product-img {
        max-width: 75% !important;
    }
    .lux-shop-wrapper .lux-product-grid {
        gap: 1.5rem !important;
    }
}

/* ============================================================
   SHOP — MOBILE 2-COLUMN DENSITY (keeps theme aesthetic)
   ============================================================ */

/* Hide the mobile toolbar on desktop */
.lux-mobile-toolbar {
    display: none;
}

@media (max-width: 768px) {

    /* ---------- 1. Sticky toolbar (Filters + Sort side by side) ---------- */
    .lux-mobile-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        background: #FBF7F0;
        padding: 0.85rem 1.25rem;
        margin: 0 -1.25rem 1.25rem;
        position: sticky;
        top: 68px;
        z-index: 100;
        border-top: 1px solid #E5DCC9;
        border-bottom: 1px solid #E5DCC9;
    }

    .lux-toolbar {
        display: none !important;
    }

    .lux-mobile-toolbar .lux-mobile-filter-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 0.5rem;
        background: transparent;
        border: 1px solid #E5DCC9;
        padding: 0.6rem 1rem;
        border-radius: 4px;
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        color: #2A1F14;
        width: 48%;
        justify-content: center;
        cursor: pointer;
    }

    .lux-mobile-toolbar .lux-mobile-sort {
        width: 48%;
    }

    .lux-mobile-toolbar .woocommerce-ordering {
        margin: 0;
        width: 100%;
    }

    .lux-mobile-toolbar .woocommerce-ordering select {
        width: 100%;
        padding: 0.6rem 2rem 0.6rem 1rem;
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        color: #2A1F14;
        background-color: transparent;
        border: 1px solid #E5DCC9;
        border-radius: 4px;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B8935E' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
    }

    /* ---------- 2. Product grid — 2 columns, tighter gap ---------- */
    .lux-shop-wrapper .lux-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.25rem 0.85rem !important;
    }

    /* Remove the previous max-width cap on images (back to full-width in each cell) */
    .lux-shop-wrapper .lux-product-img {
        max-width: 100% !important;
        margin: 0 0 0.6rem 0 !important;
    }

    /* ---------- 3. Compact typography — keep theme fonts, just tighten ---------- */
    .lux-shop-wrapper .lux-product-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 0.95rem;
        line-height: 1.25;
        margin-bottom: 0.25rem;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .lux-shop-wrapper .lux-product-price {
        font-family: 'Inter', sans-serif;
        font-size: 0.8rem;
        font-weight: 500;
        color: #B8935E;
    }

    /* ---------- 4. Badges — keep them compact ---------- */
    .lux-shop-wrapper .lux-badge {
        font-size: 0.55rem;
        padding: 0.25rem 0.5rem;
        top: 8px;
        left: 8px;
    }
}

/* ============================================================
   MOBILE SHOP — KILL DEAD WHITESPACE & MERGE TOOLBAR
   ============================================================ */
@media (max-width: 768px) {

    /* --- 1. Remove the huge padding from the header --- */
    .lux-shop-wrapper .lux-shop-header {
        padding: 1rem 1.25rem 0.25rem 1.25rem !important; /* Almost no bottom padding */
        text-align: center !important;
    }

    /* --- 2. Collapse the title row so it takes 1/3 of the space --- */
    .lux-shop-wrapper .lux-shop-header .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important; /* Keep centered stacked */
        gap: 0.3rem !important;
        margin-top: 0 !important;
    }

    /* Shrink the "Shop" title slightly */
    .lux-shop-wrapper .lux-shop-header .lux-shop-title {
        font-size: 1.75rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Shrink the breadcrumb */
    .lux-shop-wrapper .lux-shop-header .woocommerce-breadcrumb {
        font-size: 0.65rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Shrink the "79 Items" pill */
    .lux-shop-wrapper .lux-shop-header .lux-shop-count {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.6rem !important;
        margin: 0 !important;
        border: 1px solid #E5DCC9 !important;
        background: transparent !important;
        color: #B8935E !important;
    }

    /* --- 3. Merge the Filter/Sort bar INTO the header space --- */
    .lux-mobile-toolbar {
        margin: -0.5rem 0 1rem 0 !important; /* Pull it up slightly */
        padding: 0.5rem 1.25rem 1rem 1.25rem !important;
        background: transparent !important; /* Removes the solid background so it blends */
        border-bottom: none !important;
        position: relative !important; /* Stop it from sticking yet */
        top: auto !important;
    }

    /* Make the Filter button and Sort dropdown fill the space */
    .lux-mobile-toolbar .lux-mobile-filter-btn,
    .lux-mobile-toolbar .lux-mobile-sort {
        width: 48% !important;
    }

    .lux-mobile-toolbar .lux-mobile-filter-btn {
        background: #FBF7F0 !important;
        border: 1px solid #E5DCC9 !important;
    }

    .lux-mobile-toolbar .woocommerce-ordering select {
        background-color: #FBF7F0 !important;
        border: 1px solid #E5DCC9 !important;
    }

    /* --- 4. Pull the product grid up --- */
    .lux-shop-layout {
        padding-top: 0 !important; /* Brings the first row of products right up to the filters */
    }
}

/* ============================================================
   MOBILE SHOP — COMPACT PILL TOOLBAR (No Title Block)
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Hide the entire Shop Header (Breadcrumb, Title, Count) */
    .lux-shop-wrapper .lux-shop-header {
        display: none !important;
    }

    /* 2. Setup the Sticky Toolbar as a pill row */
    .lux-mobile-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        background: #FBF7F0 !important;
        padding: 0.75rem 1.25rem !important;
        margin: 0 !important;
        position: sticky !important;
        top: 60px !important; /* Sits right below the main site header */
        z-index: 100 !important;
        border-top: 1px solid #E5DCC9 !important;
        border-bottom: 1px solid #E5DCC9 !important;
        overflow-x: auto !important; /* Allows side-scrolling on tiny screens */
    }

    /* 3. Style the Filter Button as a pill */
    .lux-mobile-toolbar .lux-mobile-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        background: #F6F1E8 !important; /* slightly darker cream */
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important; /* Pill shape */
        padding: 0.5rem 1rem !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        color: #8B7B6B !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* 4. Style the Sort Dropdown as a pill */
    .lux-mobile-toolbar .lux-mobile-sort {
        flex-shrink: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    .lux-mobile-toolbar .woocommerce-ordering {
        margin: 0 !important;
    }

    .lux-mobile-toolbar .woocommerce-ordering select {
        background-color: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important; /* Pill shape */
        padding: 0.5rem 2.25rem 0.5rem 1rem !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        color: #8B7B6B !important;
        width: auto !important;
        min-width: 100px !important;
        background-position: right 0.75rem center !important;
    }

    /* 5. Remove the extra padding from the grid wrapper */
    .lux-shop-wrapper .lux-shop-layout {
        padding-top: 0 !important;
        padding-bottom: 3rem !important;
        margin-top: 0 !important;
    }

    /* 6. Adjust the product grid gap slightly for a tighter look */
    .lux-shop-wrapper .lux-product-grid {
        padding: 1rem !important;
        gap: 1rem 0.5rem !important;
    }
}

/* ============================================================
   MOBILE SHOP — HEADER + TEMU-STYLE PILL BAR
   ============================================================ */
@media (max-width: 768px) {

    /* --- 1. Compact Header (keep it, just make it tighter) --- */
    .lux-shop-wrapper .lux-shop-header {
        padding: 1.5rem 1.25rem 1rem !important;
        text-align: center !important;
        background: #FBF7F0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .woocommerce-breadcrumb {
        font-size: 0.65rem !important;
        margin-bottom: 0.5rem !important;
        letter-spacing: 0.1em !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-title {
        font-size: 1.9rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-count {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.85rem !important;
        border-radius: 999px !important;
        border: 1px solid #E5DCC9 !important;
        background: transparent !important;
        color: #B8935E !important;
        margin: 0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-desc {
        display: none !important;
    }

    /* --- 2. Pill Toolbar directly below header (Temu style) --- */
    .lux-mobile-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        background: #FBF7F0 !important;
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        border-top: 1px solid #E5DCC9 !important;
        border-bottom: 1px solid #E5DCC9 !important;
        overflow-x: auto !important;
    }

    .lux-mobile-toolbar .lux-mobile-filter-btn,
    .lux-mobile-toolbar .lux-mobile-sort,
    .lux-mobile-toolbar .lux-mobile-category {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .lux-mobile-toolbar .lux-mobile-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        background: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        height: 36px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        color: #8B7B6B !important;
        padding: 0 !important;
    }

    .lux-mobile-toolbar .woocommerce-ordering,
    .lux-mobile-toolbar .woocommerce-ordering select,
    .lux-mobile-toolbar .lux-mobile-category select {
        width: 100% !important;
        height: 36px !important;
        background-color: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        padding: 0 1.5rem 0 0.75rem !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        color: #8B7B6B !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%238B7B6B' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 0.75rem center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* --- 3. Products start right below the pill bar --- */
    .lux-shop-wrapper .lux-shop-layout {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .lux-shop-wrapper .lux-product-grid {
        padding: 1rem !important;
        margin: 0 !important;
    }
}

/* ============================================================
   FINAL OVERRIDE: FORCE 3-COLUMN PILL BAR ON MOBILE
   ============================================================ */
@media (max-width: 768px) {

    /* Force the container to be a flex row */
    .lux-shop-wrapper .lux-mobile-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem !important;
        gap: 0.35rem !important;
    }

    /* Force all 3 items to take equal width and override the big button style */
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-sort,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-category {
        flex: 1 1 30% !important;
        width: 30% !important;
        max-width: 33% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reset the Filter button to look like a small pill again */
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn {
        display: flex !important;
        justify-content: center !important;
        height: 36px !important;
        border-radius: 999px !important;
        background: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        font-size: 0.7rem !important;
        color: #8B7B6B !important;
        white-space: nowrap !important;
    }

    /* Fix the dropdowns to fit inside their 30% width */
    .lux-shop-wrapper .lux-mobile-toolbar select {
        width: 100% !important;
        height: 36px !important;
        border-radius: 999px !important;
        background-color: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        font-size: 0.7rem !important;
        padding: 0 1.25rem 0 0.5rem !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   MOBILE SHOP — TEMU-STYLE PILL BAR (final, clean)
   ============================================================ */

/* Hide the pill bar on desktop */
@media (min-width: 769px) {
    .lux-mobile-toolbar {
        display: none !important;
    }
}

@media (max-width: 768px) {

    /* 1. Compact header — keep it, tighten it */
    .lux-shop-wrapper .lux-shop-header {
        padding: 1.25rem 1.25rem 1rem !important;
        text-align: center !important;
        background: #FBF7F0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .woocommerce-breadcrumb {
        font-size: 0.65rem !important;
        margin-bottom: 0.4rem !important;
        letter-spacing: 0.1em !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-title {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-count {
        font-size: 0.62rem !important;
        padding: 0.25rem 0.75rem !important;
        border-radius: 999px !important;
        border: 1px solid #E5DCC9 !important;
        background: transparent !important;
        color: #B8935E !important;
        margin: 0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-desc {
        display: none !important;
    }

    /* 2. Pill toolbar - 3 equal pills in a row */
    .lux-shop-wrapper .lux-mobile-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.4rem !important;
        background: #FBF7F0 !important;
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
        border-top: 1px solid #E5DCC9 !important;
        border-bottom: 1px solid #E5DCC9 !important;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Force all 3 items to exactly equal width */
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-sort,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-category {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. Style the Filter button as a pill */
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important;
        height: 36px !important;
        padding: 0 0.5rem !important;
        background: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        color: #8B7B6B !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    /* 5. Style the Sort + Category dropdowns as pills */
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering,
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering select,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-category select {
        width: 100% !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 1.4rem 0 0.6rem !important;
        background-color: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
        color: #8B7B6B !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%238B7B6B' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 0.6rem center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* 6. Remove the old full-width filter button from the sidebar area */
    .lux-shop-wrapper > .lux-mobile-filter-btn {
        display: none !important;
    }

    /* 7. Products area flush with the pill bar */
    .lux-shop-wrapper .lux-shop-layout {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* 8. Hide the desktop sort toolbar on mobile */
    .lux-shop-wrapper .lux-toolbar {
        display: none !important;
    }
}

/* ============================================================
   FINAL FIX: Restore Header & Perfect Pill Spacing
   ============================================================ */
@media (max-width: 768px) {

    /* 1. BRING BACK THE HEADER */
    .lux-shop-wrapper .lux-shop-header {
        display: block !important; /* Force it visible */
        padding: 1.5rem 1rem 1rem !important;
        text-align: center !important;
        background: #FBF7F0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .woocommerce-breadcrumb {
        font-size: 0.65rem !important;
        margin-bottom: 0.5rem !important;
        letter-spacing: 0.1em !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-title {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .lux-shop-wrapper .lux-shop-header .lux-shop-count {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.85rem !important;
        border-radius: 999px !important;
        border: 1px solid #E5DCC9 !important;
        background: transparent !important;
        color: #B8935E !important;
        margin: 0 !important;
    }

    /* 2. PERFECT PILL SPACING */
    .lux-shop-wrapper .lux-mobile-toolbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.85rem 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #FBF7F0 !important;
        border-top: 1px solid #E5DCC9 !important;
        border-bottom: 1px solid #E5DCC9 !important;
    }

    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-sort,
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-category {
        flex: 1 1 33% !important; /* Forces 3 equal columns */
        width: 33% !important;
        min-width: 0 !important;
    }

    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 38px !important;
        background: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        font-size: 0.75rem !important;
        color: #8B7B6B !important;
    }

    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering,
    .lux-shop-wrapper .lux-mobile-toolbar select {
        width: 100% !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 1.5rem 0 1rem !important;
        background-color: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        font-size: 0.75rem !important;
        color: #8B7B6B !important;
        background-position: right 0.85rem center !important;
        text-overflow: ellipsis !important;
    }
}

/* ============================================================
   FIX: Sort Dropdown Text Cutoff & Header Spacing
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Tighten the header since the count is gone */
    .lux-shop-wrapper .lux-shop-header {
        padding: 1.25rem 1rem 0.75rem !important;
    }

    /* Hide the empty count span if it still exists in cached HTML */
    .lux-shop-wrapper .lux-shop-count {
        display: none !important;
    }

    /* 2. Fix the Sort Dropdown text truncation */
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering,
    .lux-shop-wrapper .lux-mobile-toolbar select {
        padding: 0 1.75rem 0 0.75rem !important; /* More space on the right for the arrow */
        font-size: 0.65rem !important; /* Slightly smaller font to fit "Default sorting" */
        background-position: right 0.5rem center !important; /* Move arrow closer to edge */
    }

    /* 3. Ensure the filter button text doesn't wrap */
    .lux-shop-wrapper .lux-mobile-toolbar .lux-mobile-filter-btn {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   FIX: Remove Double Pill & Fix Text Truncation
   ============================================================ */
@media (max-width: 768px) {

    /* 1. Kill the outer pill on the form wrapper */
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 2. Style ONLY the select element as the pill */
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering select {
        background-color: #F6F1E8 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 999px !important;
        height: 38px !important;
        width: 100% !important;
        font-size: 0.65rem !important; /* Slightly smaller to fit text */
        padding: 0 1.5rem 0 0.6rem !important; /* Space on right for arrow */
        text-overflow: clip !important; /* Remove the "..." */
        white-space: nowrap !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%238B7B6B' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 0.6rem center !important;
    }

    /* 3. Ensure the arrow is fully visible and not pushed out */
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering::before,
    .lux-shop-wrapper .lux-mobile-toolbar .woocommerce-ordering::after {
        display: none !important;
    }
}

/* ============================================================
   PRICE FILTER STYLES
   ============================================================ */
.lux-price-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.lux-price-inputs input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #E5DCC9;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    background: #FBF7F0;
    color: #2A1F14;
}

.lux-price-inputs input:focus {
    outline: none;
    border-color: #B8935E;
}

.lux-price-inputs span {
    color: #8B7B6B;
    font-size: 0.8rem;
}

.lux-apply-filter-btn {
    display: block;
    width: 100%;
    background: #B8935E;
    color: #fff;
    border: none;
    padding: 0.75rem;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s;
}

.lux-apply-filter-btn:hover {
    background: #8B6F47;
}

.lux-clear-filter {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #8B7B6B;
    text-decoration: underline;
}

.lux-clear-filter:hover {
    color: #B8935E;
}

/* ============================================================
   DESKTOP SHOP PAGE — MODERN CLEAN LAYOUT
   ============================================================ */
@media (min-width: 1025px) {

    /* 1. Force the Mobile Toolbar to stay hidden */
    .lux-mobile-toolbar {
        display: none !important;
    }

    /* 2. Modernize the Top Header (Shop Title) */
    .lux-shop-header {
        padding: 3.5rem 0 2.5rem !important;
        background: #FBF7F0 !important;
        border-bottom: 1px solid #E5DCC9 !important;
        text-align: left !important;
    }

    .lux-shop-header .lux-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
    }

    .lux-shop-header .woocommerce-breadcrumb {
        font-size: 0.72rem !important;
        margin-bottom: 1rem !important;
        letter-spacing: 0.1em !important;
    }

    .lux-shop-header .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .lux-shop-header .lux-shop-title {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        color: #2A1F14 !important;
    }

    .lux-shop-header .lux-shop-count {
        font-size: 0.75rem !important;
        padding: 0.35rem 1rem !important;
        border-radius: 999px !important;
        border: 1px solid #E5DCC9 !important;
        background: transparent !important;
        color: #B8935E !important;
        margin-bottom: 0.5rem !important;
    }

    /* 3. Layout Grid - Push content up */
    .lux-shop-layout {
        padding-top: 3rem !important;
        padding-bottom: 5rem !important;
        gap: 3rem !important;
    }

    /* 4. Clean up the Sort Dropdown in the top toolbar */
    .lux-toolbar {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-bottom: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        border-bottom: 1px solid #E5DCC9 !important;
    }

    .lux-toolbar .woocommerce-ordering {
        margin: 0 !important;
    }

    .lux-toolbar select {
        background-color: #FBF7F0 !important;
        border: 1px solid #E5DCC9 !important;
        border-radius: 4px !important;
        padding: 0.6rem 2.5rem 0.6rem 1rem !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.8rem !important;
        color: #2A1F14 !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B8935E' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 1rem center !important;
    }

    /* 5. Sidebar Styling */
    .lux-sidebar {
        position: sticky !important;
        top: 100px !important;
    }

    .lux-filter-group {
        margin-bottom: 2.5rem !important;
    }
    
    .lux-filter-title {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.15em !important;
        border-bottom: 1px solid #E5DCC9 !important;
        padding-bottom: 0.75rem !important;
        margin-bottom: 1.25rem !important;
        color: #2A1F14 !important;
    }

    /* 6. Fix the Filter Button (hide it on desktop) */
    .lux-mobile-filter-btn {
        display: none !important;
    }

    /* 7. Product Grid */
    .lux-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem 1.5rem !important;
    }
}

/* ============================================================
   HIDE SIDEBAR CATEGORIES ON MOBILE
   ============================================================ */
@media (max-width: 1024px) {
    /* Hide the Categories group in the mobile filter drawer */
    .lux-sidebar .lux-filter-group:first-child {
        display: none !important;
    }
}

/* ============================================================
   SIDEBAR CATEGORIES & PRODUCT GRID FIXES
   ============================================================ */

/* 1. Hide the entire Categories group in the sidebar on mobile */
@media (max-width: 1024px) {
    .lux-shop-wrapper .lux-sidebar .lux-filter-group:first-child {
        display: none !important;
    }
}

/* 2. Force 4 columns on desktop */
@media (min-width: 1025px) {
    .lux-shop-wrapper .lux-product-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem 1.25rem !important;
    }
}

/* 3. Ensure counts are hidden if they were cached in HTML */
.lux-shop-wrapper .lux-filter-list .lux-filter-count {
    display: none !important;
}

/* ============================================================
   FINAL FIX: Hide Sidebar Categories on Mobile
   ============================================================ */
@media (max-width: 1024px) {
    .lux-shop-wrapper .lux-cat-filter {
        display: none !important;
    }
}

/* ============================================================
   PERFECT DESKTOP HEADER & TITLE ALIGNMENT
   ============================================================ */
@media (min-width: 1025px) {
    
    .lux-shop-wrapper .lux-shop-header {
        padding: 4rem 0 3rem !important;
        background: #FBF7F0 !important;
        border-bottom: 1px solid #E5DCC9 !important;
    }

    /* Make it a clean 2-column grid: Left (Breadcrumb + Title), Right (Description) */
    .lux-shop-wrapper .lux-shop-header .lux-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
        align-items: end !important;
    }

    .lux-shop-wrapper .woocommerce-breadcrumb {
        font-size: 0.72rem !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 1.5rem !important;
        color: #8B7B6B !important;
    }

    .lux-shop-wrapper .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important; /* Remove gap */
    }

    .lux-shop-wrapper .lux-shop-title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
        color: #2A1F14 !important;
        margin: 0 !important;
    }

    /* Style the description to sit beautifully on the right */
    .lux-shop-wrapper .lux-shop-desc {
        display: block !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: #8B7B6B !important;
        margin: 0 !important;
        padding-bottom: 0.5rem !important;
    }

    /* Hide the item count completely */
    .lux-shop-wrapper .lux-shop-count {
        display: none !important;
    }
}

/* ============================================================
   FINAL FIX: Center Desktop Shop Header
   ============================================================ */
@media (min-width: 1025px) {
    
    .lux-shop-wrapper .lux-shop-header {
        padding: 4rem 0 3rem !important;
        background: #FBF7F0 !important;
        border-bottom: 1px solid #E5DCC9 !important;
    }

    /* Change from Grid to Flex Column to center everything */
    .lux-shop-wrapper .lux-shop-header .lux-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .lux-shop-wrapper .woocommerce-breadcrumb {
        font-size: 0.72rem !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 0.5rem !important;
        color: #8B7B6B !important;
        text-align: center !important;
    }

    .lux-shop-wrapper .lux-shop-title-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .lux-shop-wrapper .lux-shop-title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
        color: #2A1F14 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Center the description and cap its width so it doesn't stretch too far */
    .lux-shop-wrapper .lux-shop-desc {
        display: block !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: #8B7B6B !important;
        margin: 0 auto !important;
        padding-bottom: 0 !important;
        max-width: 600px !important; 
        text-align: center !important;
    }

    /* Ensure the item count stays hidden */
    .lux-shop-wrapper .lux-shop-count {
        display: none !important;
    }
}

/* ============================================================
   ULTRA-COMPACT DESKTOP SHOP HEADER
   ============================================================ */
@media (min-width: 1025px) {
    
    /* 1. Slash the header padding drastically */
    .lux-shop-wrapper .lux-shop-header {
        padding: 2rem 0 2rem !important;
    }

    /* 2. Reduce the gap between elements */
    .lux-shop-wrapper .lux-shop-header .lux-container {
        gap: 0.35rem !important;
    }

    /* 3. Make the breadcrumb very subtle */
    .lux-shop-wrapper .woocommerce-breadcrumb {
        margin-bottom: 0.25rem !important;
        font-size: 0.65rem !important;
    }

    /* 4. Slightly shrink the title (from 3rem to 2.4rem) */
    .lux-shop-wrapper .lux-shop-title {
        font-size: 2.4rem !important;
        margin-bottom: 0.35rem !important;
    }

    /* 5. Shrink the description and tighten its line-height */
    .lux-shop-wrapper .lux-shop-desc {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        max-width: 550px !important;
    }

    /* 6. Pull the main content area WAY up */
    .lux-shop-wrapper .lux-shop-layout {
        padding-top: 2rem !important; /* Reduced from 3rem */
    }
}

/* ============================================================
   SUBCATEGORY GRID (Landing Page Style)
   ============================================================ */
.lux-subcategory-grid-wrap {
    padding: 2rem 0 4rem;
}

.lux-subcategory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
    max-width: 1000px;
    margin: 0 auto;
}

.lux-subcategory-card {
    display: block;
    text-decoration: none;
    background: #FBF7F0;
    border: 1px solid #E5DCC9;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
}

.lux-subcategory-card:hover {
    border-color: #B8935E;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -10px rgba(42, 31, 20, 0.08);
}

.lux-subcategory-img {
    aspect-ratio: 4 / 3;
    background: #F6F1E8;
    overflow: hidden;
}

.lux-subcategory-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.lux-subcategory-info {
    padding: 1.5rem;
}

.lux-subcategory-info h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2A1F14;
    margin: 0 0 0.25rem 0;
}

.lux-subcategory-info span {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B8935E;
}

@media (max-width: 600px) {
    .lux-subcategory-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   HOME DECOR CUSTOM LANDING PAGE
   ============================================================ */

/* 1. Hero Section */
.ab-landing-hero {
    position: relative;
    height: 60vh;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.ab-landing-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42, 31, 20, 0.3) 0%, rgba(42, 31, 20, 0.7) 100%);
}

.ab-landing-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.ab-landing-hero-content .ab-eyebrow {
    color: #E5DCC9 !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 1rem !important;
    display: inline-block;
}

.ab-landing-hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 6vw, 5rem);
    color: #FBF7F0;
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
    font-weight: 400;
}

.ab-landing-hero-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #E5DCC9;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 2. Subcategory Grid Section */
.ab-landing-subcategories {
    padding: 5rem 0;
    background: #F6F1E8;
}

.ab-subcategory-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.ab-subcategory-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: #2A1F14;
    margin-bottom: 1rem;
    font-weight: 500;
}

.ab-subcategory-line {
    width: 60px;
    height: 1px;
    background: #B8935E;
    margin: 0 auto;
}

/* Grid Setup */
.ab-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Individual Card */
.ab-subcategory-card {
    display: block;
    text-decoration: none;
    background: #FBF7F0;
    border: 1px solid #E5DCC9;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ab-subcategory-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(42, 31, 20, 0.1);
    border-color: #B8935E;
}

.ab-subcat-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #EFE7D8;
}

.ab-subcat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ab-subcategory-card:hover .ab-subcat-img img {
    transform: scale(1.05);
}

.ab-subcat-info {
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
}

.ab-subcat-info h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: #2A1F14;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.ab-subcat-count {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #8B7B6B;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.ab-subcat-cta {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B8935E;
    transition: color 0.2s ease;
}

.ab-subcategory-card:hover .ab-subcat-cta {
    color: #8B6F47;
}

/* 3. Mobile Responsiveness */
@media (max-width: 900px) {
    .ab-subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .ab-landing-hero {
        height: 50vh;
        min-height: 350px;
    }
    
    .ab-subcategory-grid {
        grid-template-columns: 1fr;
    }
    
    .ab-landing-subcategories {
        padding: 3rem 0;
    }
    
    .ab-subcat-info {
        padding: 1.5rem 1rem;
    }
}

/* ============================================================
   OVERRIDES FOR HOME DECOR LANDING PAGE
   ============================================================ */

/* Remove the padding that was meant for the old hero */
.ab-home-decor-landing .ab-landing-subcategories {
    padding: 0 0 5rem 0 !important;
    background: transparent !important;
}

/* Tighten up the subcategory grid */
.ab-home-decor-landing .ab-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Ensure images are perfectly square */
.ab-home-decor-landing .ab-subcat-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #EFE7D8;
}

/* Clean up the cards */
.ab-home-decor-landing .ab-subcategory-card {
    border: 1px solid #E5DCC9;
    border-radius: 4px;
    background: #FBF7F0;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.ab-home-decor-landing .ab-subcategory-card:hover {
    border-color: #B8935E;
    transform: translateY(-4px);
}

/* Make sure the title area looks clean */
.ab-home-decor-landing .lux-shop-header {
    background: #FBF7F0 !important;
    border-bottom: none !important;
    padding: 3rem 0 1rem 0 !important;
}

@media (max-width: 900px) {
    .ab-home-decor-landing .ab-subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ab-home-decor-landing .ab-subcategory-grid {
        grid-template-columns: 1fr;
    }
}