/*
Theme Name: JeisFinds Theme
Template: hello-elementor
Description: Custom WooCommerce shop theme for JeisFinds - curated clothing finds with filtering by category, color, and brand.
Version: 2.0.0
Author: JeiDrips
*/

/* =============================================================================
   CSS VARIABLES
   ============================================================================= */

:root {
    /* Japanese Cherry Blossom Color Palette */
    --color-accent: #fec5e5;
    /* Pink */
    --color-tan-light: #f2ebf5;
    /* Soft Plum Light */
    --color-tan-medium: #9a89aa;
    /* Soft Plum Medium */
    --color-tan-dark: #685776;
    /* Plum Dark */
    --color-brown: #4f405f;
    /* Plum Base */
    --color-white: #ffffff;
    --color-gold: #d4af37;
    --color-teal: #ff2840;
    --color-teal-dark: #ff2840;
    --color-text-main: #4f405f;

    /* Semantic Mappings */
    --e-global-color-primary: var(--color-brown);
    --e-global-color-secondary: var(--color-tan-dark);
    --e-global-color-text: var(--color-brown);
    --e-global-color-accent: var(--color-accent);
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

/* Overflow prevention for mobile/tablet only (sticky not used there) */
@media (max-width: 1279px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* =============================================================================
   WOOCOMMERCE OVERRIDES
   ============================================================================= */

/* WooCommerce Button Styling */
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--color-accent);
    color: var(--color-brown);
    border-radius: 5px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--color-tan-medium);
    color: white;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--color-accent);
    background-color: white;
}

.woocommerce span.onsale {
    background-color: var(--color-accent);
    color: var(--color-brown);
    border-radius: 50%;
    font-weight: bold;
}

/* Filter Everything Plugin Styling */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-widget-main-wrapper {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-title {
    color: var(--color-tan-dark);
    font-weight: 600;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-range-slider .ui-slider-range {
    background-color: var(--color-accent);
}

/* Product Grid Styling */
.woocommerce ul.products li.product {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.2s;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--color-brown);
    font-family: var(--font-main);
    font-weight: 600;
}

/* Product Buttons */
ul.products li.product a.button,
ul.products li.product .added_to_cart {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
    color: #ffffff !important;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

ul.products li.product a.button:hover,
ul.products li.product .added_to_cart:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 40, 64, 0.3);
    animation: pop 0.3s ease;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.1);
    }
}

/* =============================================================================
   SHOP/FINDS PAGE LAYOUT
   ============================================================================= */

/* Shop Archive Specific */
.post-type-archive-product .container,
.tax-product_cat .container {
    max-width: 2100px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: visible !important;
    /* Required for sticky sidebar */
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-tan-medium);
    padding-bottom: 20px;
    flex-wrap: wrap;
}

.shop-layout {
    display: block;
    /* Mobile-first: single column */
    margin-top: 30px;
    position: relative;
}

.shop-sidebar {
    /* Mobile: hidden by default, controlled by staggered-menu.css */
    width: 100%;
}

.shop-sidebar .woocommerce-ordering {
    display: none !important;
}

.shop-grid {
    width: 100%;
    margin: 0 auto;
}

/* Category Navigation */

/* Product Grid Styling */
.woocommerce ul.products li.product {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.2s;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--color-brown);
    font-family: var(--font-main);
    font-weight: 600;
}

/* Product Buttons */
ul.products li.product a.button,
ul.products li.product .added_to_cart {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
    color: #ffffff !important;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

ul.products li.product a.button:hover,
ul.products li.product .added_to_cart:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 40, 64, 0.3);
    animation: pop 0.3s ease;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.1);
    }
}

/* =============================================================================
   SHOP/FINDS PAGE LAYOUT
   ============================================================================= */

/* Shop Archive Specific */
.post-type-archive-product .container,
.tax-product_cat .container {
    max-width: 2100px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: visible !important;
    /* Required for sticky sidebar */
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-tan-medium);
    padding-bottom: 20px;
    flex-wrap: wrap;
}

.shop-layout {
    display: block;
    /* Mobile-first: single column */
    margin-top: 30px;
    position: relative;
}

.shop-sidebar {
    /* Mobile: hidden by default, controlled by staggered-menu.css */
    width: 100%;
}

.shop-sidebar .woocommerce-ordering {
    display: none !important;
}

.shop-grid {
    width: 100%;
    margin: 0 auto;
}

/* Category Navigation */
.category-navigation {
    flex: 1;
    min-width: 300px;
}

.parent-cats-list,
.child-cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.child-cats-list {
    margin-top: 15px;
    animation: slideDownFade 0.5s ease-out forwards;
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.all-cat-item {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid var(--color-tan-medium);
    display: flex;
    align-items: center;
}

.cat-pill {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--color-tan-medium);
    border-radius: 25px;
    color: var(--color-brown);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--color-white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin: 2px;
}

.cat-pill:hover,
.cat-pill.active,
a.cat-pill:hover,
a.cat-pill.active,
.category-navigation .cat-pill.active {
    background-color: var(--color-brown);
    border-color: var(--color-brown);
    transform: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 10;
    position: relative;
    color: white !important;
}

.cat-pill.small {
    font-size: 13px;
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.6);
}

.cat-pill.small:hover,
.cat-pill.small.active {
    background-color: var(--color-tan-dark);
    border-color: var(--color-tan-dark);
    transform: none;
    color: white !important;
}

/* Remove WooCommerce default ::before and ::after on products */
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}

/* Search Bar */
.shop-search {
    margin-left: 20px;
}


/* Subcategory Indentation */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat ul.children,
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat .wpc-filters-list li ul {
    margin-left: 15px !important;
    padding-left: 0 !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat ul.children li a,
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat .wpc-filters-list li ul li a {
    font-size: 13px !important;
    color: var(--color-text-main);
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat>.wpc-filters-list>li>a {
    font-weight: 600;
    font-size: 15px;
}

/* Force all category items to remain visible */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat .wpc-term-item {
    display: list-item !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide zero counts for categories to prevent flicker */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat .wpc-term-count:has(.wpc-term-count-value:empty),
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-product_cat .wpc-term-count-value:empty {
    display: none !important;
}

/* Currency Switcher - Styles are in currency-complete.css */

/* =============================================================================
   RESPONSIVE GRID
   ============================================================================= */
/* Desktop grid (4/5 columns) defined in style-enhancements.css */

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Product Images */
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product img,
body.post-type-archive-product ul.products li.product img,
body.tax-product_cat ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px;
    transition: transform 0.5s ease;
}

ul.products li.product:hover img {
    transform: scale(1.05);
}

/* Taller images for bottoms category */
body.term-bottoms ul.products li.product img,
body.tax-product_cat.term-bottoms ul.products li.product img,
.term-bottoms ul.products li.product img {
    height: 350px !important;
    aspect-ratio: auto !important;
}

/* Responsive Sidebar & Toggle */
.filter-toggle-btn {
    display: none;
    background-color: var(--color-brown);
    color: var(--color-white);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    font-weight: 600;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .custom-sorting-container .select2-selection__arrow {
    background: none !important;
    border: none !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .custom-sorting-container .select2-selection__arrow b {
    border-color: #333 transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    background: none !important;
    box-shadow: none !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    width: 0 !important;
    height: 0 !important;
}

/* Color Swatches - 4 per row with grid layout */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-filters-list {
    display: grid !important;
    grid-template-columns: repeat(4, 36px) !important;
    gap: 6px !important;
    justify-content: start !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-filter-link {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-term-swatch-wrapper {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ddd;
    overflow: hidden;
    transition: all 0.2s ease;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-term-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: none !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-term-swatch::before,
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-term-swatch::after {
    display: none !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-filter-link:hover .wpc-term-swatch-wrapper {
    transform: scale(1.15);
    border-color: var(--color-brown);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-filter-link.wpc-term-item-selected .wpc-term-swatch-wrapper {
    border-color: var(--color-brown);
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(67, 53, 67, 0.2);
}

/* Hide color text labels */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-term-name {
    display: none !important;
}

/* Hide count numbers */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color .wpc-term-count {
    display: none !important;
}

/* Ensure colors collapse with the filter */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color:not(.wpc-opened) .wpc-filters-list,
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color:not(.wpc-opened) .wpc-filter-content {
    display: none !important;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color.wpc-opened .wpc-filters-list {
    display: grid !important;
}

/* Individual color swatches - use title selector to avoid URL conflicts */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Black"] .wpc-term-swatch-wrapper {
    background: #000;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="White"] .wpc-term-swatch-wrapper {
    background: #FFF;
    border-color: #ccc;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Blue"] .wpc-term-swatch-wrapper {
    background: #0066CC;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Gray"] .wpc-term-swatch-wrapper,
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Grey"] .wpc-term-swatch-wrapper {
    background: #808080;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Silver"] .wpc-term-swatch-wrapper {
    background: linear-gradient(135deg, #C0C0C0, #E8E8E8, #C0C0C0);
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Green"] .wpc-term-swatch-wrapper {
    background: #228B22;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Red"] .wpc-term-swatch-wrapper {
    background: #DC143C;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Pink"] .wpc-term-swatch-wrapper {
    background: #FF69B4;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Brown"] .wpc-term-swatch-wrapper {
    background: #8B4513;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Orange"] .wpc-term-swatch-wrapper {
    background: #FF8C00;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Yellow"] .wpc-term-swatch-wrapper {
    background: #FFD700;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Beige"] .wpc-term-swatch-wrapper {
    background: #F5F5DC;
    border-color: #ccc;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Purple"] .wpc-term-swatch-wrapper {
    background: #800080;
}

/* Special textures */
body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Camo"] .wpc-term-swatch-wrapper {
    background-image:
        radial-gradient(ellipse 40% 35% at 20% 30%, #2d3a1f 0%, transparent 50%),
        radial-gradient(ellipse 45% 40% at 75% 20%, #3d4a2f 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 35% 75%, #8b8b6b 0%, transparent 60%),
        radial-gradient(ellipse 35% 30% at 85% 65%, #5a5f3a 0%, transparent 50%),
        radial-gradient(ellipse 40% 50% at 10% 80%, #2d3a1f 0%, transparent 55%),
        radial-gradient(ellipse 30% 35% at 60% 50%, #8b8b6b 0%, transparent 45%);
    background-color: #6b7c59;
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Rainbow"] .wpc-term-swatch-wrapper {
    background: linear-gradient(135deg,
            rgba(255, 0, 0, 0.7),
            rgba(255, 127, 0, 0.7),
            rgba(255, 255, 0, 0.7),
            rgba(0, 255, 0, 0.7),
            rgba(0, 0, 255, 0.7),
            rgba(139, 0, 255, 0.7));
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Gold"] .wpc-term-swatch-wrapper {
    background: linear-gradient(135deg,
            #D4AF37 0%,
            #F4E5A0 15%,
            #D4AF37 30%,
            #F4E5A0 45%,
            #D4AF37 60%,
            #F4E5A0 75%,
            #D4AF37 90%,
            #F4E5A0 100%);
}

body:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-pa_color a[title="Reflective"] .wpc-term-swatch-wrapper {
    background: linear-gradient(135deg, #C0C0C0, #FFF, #C0C0C0, #FFF, #C0C0C0);
}

/* Brown button color (default) */
ul.products li.product a.button,
ul.products li.product .added_to_cart {
    background: var(--color-brown) !important;
}

/* Teal gradient on hover */
ul.products li.product a.button:hover,
ul.products li.product .added_to_cart:hover {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%) !important;
}

/* Page title hidden in style-enhancements.css */

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =============================================================================
   HEADER & BRANDING
   ============================================================================= */

/* Logo text - left corner */
.site-branding {
    flex: 0 0 auto !important;
}

.site-branding a {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--color-brown) !important;
    text-decoration: none !important;
    font-family: var(--font-accent) !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Hide logo image */
.site-branding img,
.custom-logo {
    display: none !important;
}

/* Center navigation */
.site-navigation {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

.site-navigation a {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-brown) !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.site-navigation a::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--color-teal) !important;
    transition: all 0.3s ease !important;
    transform: translateX(-50%) !important;
}

.site-navigation a:hover {
    background: var(--color-brown) !important;
    color: white !important;
}

.site-navigation a:hover::before {
    width: 80% !important;
}

.site-navigation a.is-current:not(.finds-link),
.site-navigation a[aria-current="page"]:not(.finds-link),
body.post-type-archive-product .site-navigation a.finds-link,
body.tax-product_cat .site-navigation a.finds-link,
body.post-type-archive-product .site-navigation a.finds-link:hover,
body.tax-product_cat .site-navigation a.finds-link:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)) !important;
    color: inherit !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.08) !important;
    transform: none !important;
    animation: none !important;
}

.site-navigation a.is-current:not(.finds-link)::before,
.site-navigation a[aria-current="page"]:not(.finds-link)::before,
body.post-type-archive-product .site-navigation a.finds-link::before,
body.tax-product_cat .site-navigation a.finds-link::before {
    display: none !important;
}

.header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
}

/* Right side links - inline */
.header-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    align-items: center !important;
}

.header-links a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-brown) !important;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    position: relative !important;
    padding-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.header-links a::before {
    display: none !important;
    content: none !important;
}

.header-links a::after {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    margin-left: 1px !important;
    background-image: url('assets/images/arrow-right.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: rotate(-45deg) !important;
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(18%) sepia(14%) saturate(769%) hue-rotate(259deg) brightness(95%) contrast(88%) !important;
}

.header-links a:hover {
    color: var(--color-teal) !important;
    transform: translateY(-1px);
}

.header-links a:hover::after {
    transform: rotate(0deg) !important;
}

.header-links a[href*="kakobuy"]:hover::after {
    filter: none !important;
}

.header-links a[href*="discord"]:hover::after {
    filter: brightness(0) saturate(100%) invert(42%) sepia(85%) saturate(2500%) hue-rotate(225deg) brightness(100%) contrast(95%) !important;
}

.header-link-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.header-link-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    fill: currentColor !important;
}

#dark-mode-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin-right: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid rgba(141, 120, 137, 0.16) !important;
    box-shadow: 0 8px 22px rgba(67, 53, 67, 0.12) !important;
    color: var(--color-brown) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* ============================================================================= 
   DESKTOP ONLY - Product grid layout (>= 1280px)
   Layout and sidebar positioning handled in style-enhancements.css
   ============================================================================= */
@media (min-width: 1280px) {

    /* Product grid - 5 columns on desktop */
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        gap: 20px !important;
    }
}

/* Product boxes - flexbox for button at bottom */
.woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    min-height: 450px !important;
}

/* Product link area - grows to push button down */
.woocommerce ul.products li.product>a {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Button styling in style-enhancements.css */

/* Price styling in style-enhancements.css */

/* Grid shift rightward - DESKTOP ONLY (handled in 1280px media query above) */

/* Divider after Accessories (before Videos) */
.accessories-cat-item {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid var(--color-tan-medium);
    display: flex;
    align-items: center;
}


/* =============================================================================
   FINDS PAGE ENHANCEMENTS (Consolidated)
   ============================================================================= */

/* Promo Pills Container */
.finds-promo-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 20px 0;
    padding: 0;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.finds-desktop-promo-shell {
    display: none;
}

.finds-promo-left,
.finds-promo-right {
    display: flex;
    flex-direction: column;
    gap: 5px !important;
    /* Reduced from 10px */
}

.finds-promo-left {
    align-items: flex-start !important;
    /* Desktop: Left align */
}

.finds-promo-right {
    align-items: flex-end;
}

@media (max-width: 767px) {
    .finds-promo-left {
        align-items: center !important;
        /* Mobile: Center align */
        width: 100%;
    }

    .finds-promo-right {
        align-items: center !important;
        /* Mobile: Center align */
        width: 100%;
    }
}

.finds-promo-left .glass-pill {
    display: inline-block !important;
    width: auto !important;
    text-align: left;
}

/* Glass Pill Styling - Matches Currency Switcher */
.glass-pill {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(79, 64, 95, 0.15) !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    color: var(--color-brown) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.glass-pill:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(79, 64, 95, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    color: var(--color-brown) !important;
    transform: none !important;
    /* Currency switcher has no transform */
}

.glass-pill:focus,
.glass-pill:active {
    outline: none !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Glowing JEI Text */
.glowing-text {
    font-weight: 700 !important;
    color: var(--color-brown);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Icon Styling */
.glass-pill svg,
.glass-pill .pill-icon {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
}

.glass-pill .pill-icon {
    opacity: 0.8;
}

.promo-link .pill-icon {
    vertical-align: -2px !important;
    margin-left: 4px !important;
    width: 12px !important;
    height: 12px !important;
}

/* Modal Styling */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 10000 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content.glass-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    margin: 10% auto;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 90%;
    max-width: 600px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: var(--color-brown);
}

/* Mobile modal positioning - center on screen, below header */
@media (max-width: 766px) {
    .modal-content.glass-container {
        margin: 0 auto;
        position: fixed;
        top: calc(50% + 40px);
        /* Shift down to avoid header */
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        max-width: 420px;
        /* Wider to fit "Suggest New Products" on one line */
        max-height: calc(100vh - 120px);
        /* Leave space for header + margins */
        overflow-y: auto;
        padding: 35px 25px 25px 25px;
        /* Top padding for close button */
    }

    /* Close button - position in top right corner with generous spacing */
    .modal-content.glass-container .close-modal {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        z-index: 10;
    }

    /* Headings - prevent wrapping */
    .modal-content.glass-container h2 {
        white-space: nowrap;
        font-size: 22px;
    }

    /* Risk Reminder GIF - fill container width */
    .modal-content.glass-container img,
    .modal-content.glass-container .tab-content img {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* Dark Mode Glass Modal */
html.dark-mode .custom-modal {
    background-color: rgba(0, 0, 0, 0.4);
}

html.dark-mode .modal-content.glass-container {
    background: rgba(30, 30, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html.dark-mode .modal-content.glass-container h2 {
    color: #ffffff;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--color-brown);
    text-decoration: none;
}

.modal-tabs {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    display: flex;
}

.tab-link {
    background-color: transparent !important;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 16px;
    transition: 0.1s ease;
    /* Faster for bold feels snappier */
    font-size: 16px;
    font-family: var(--font-main);
    color: var(--color-brown) !important; /* Fix: Explicitly set brown color */
}

/* Light Mode Hover: Bold, no color change */
.tab-link:hover,
.tab-link:focus,
.tab-link:active {
    background-color: transparent !important;
    font-weight: 700;
    color: var(--color-brown) !important;
    outline: none !important;
}

.tab-link.active {
    background-color: transparent !important;
    border-bottom: 3px solid var(--color-brown);
    font-weight: 700;
}

/* Dark Mode Overrides */
html.dark-mode .tab-link {
    color: #ffffff !important;
}

html.dark-mode .tab-link:hover {
    font-weight: 700;
    color: #ffffff !important;
}

html.dark-mode .tab-link.active {
    border-bottom: 3px solid #b794f4;
    color: #ffffff !important;
}

.tab-content {
    display: none;
    padding: 15px 0;
    animation: fadeEffect 0.5s;
    min-height: 300px;
    /* Center content vertically and horizontally */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Ensure valid flex display when shown */
.tab-content[style*="display: block"] {
    display: flex !important;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* DESKTOP ONLY - Layout handled in style-enhancements.css */

.shop-grid {
    width: 100% !important;
    margin: 0 !important;
}

/* Dark Mode Overrides */
html.dark-mode .glass-pill {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .glass-pill:hover {
    color: #ffffff !important;
}

html.dark-mode .glowing-text {
    color: #ffffff !important;
}

html.dark-mode .glass-pill .pill-icon {
    filter: invert(1);
}

/* Tablet & Mobile Responsive (below 1280px) */
@media (max-width: 1279px) {

    body.woocommerce:not(.post-type-archive-product):not(.tax-product_cat) .shop-layout {
        display: block !important;
        transform: none !important;
    }

    /* Shop sidebar - fixed positioning, uses transform for animation (handled in staggered-menu.css) */
    body.woocommerce:not(.post-type-archive-product):not(.tax-product_cat) .shop-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        z-index: 10000 !important;
    }

    /* =========================================================================
       Z-INDEX STACKING ORDER (mobile):
       Dropdowns (1000) < Overlay (9999) < Sidebar (10000) < Header (10001) < Controls (10002)
       ========================================================================= */

    /* Overlay - above dropdowns, below sidebar */
    #shop-sidebar-overlay,
    .shop-sidebar-overlay {
        z-index: 9999 !important;
    }

    /* Header - above sidebar so logo/title visible */
    .site-header,
    header.site-header {
        z-index: 10001 !important;
    }

    /* Menu wrapper + all control buttons - highest layer */
    .staggered-menu-wrapper,
    .filter-toggle,
    button#filter-toggle,
    .sm-toggle,
    button#sm-toggle {
        z-index: 10002 !important;
    }

    .finds-promo-left {
        align-items: center;
    }
}

/* =============================================================================
   JEIDRIPS FORMS PLUGIN STYLES
   ============================================================================= */

.jdf-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.jdf-field input,
.jdf-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #fec5e5;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-main);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-brown);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.jdf-field input:focus,
.jdf-field textarea:focus {
    outline: none;
    border-color: #fec5e5;
    box-shadow: 0 0 0 3px rgba(254, 197, 229, 0.4);
}

.jdf-field input::placeholder,
.jdf-field textarea::placeholder {
    color: var(--color-tan-medium);
}

.jdf-prefix-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jdf-field-label {
    color: var(--color-brown);
    font-size: 13px;
    font-weight: 600;
}

.jdf-prefix-input {
    display: flex;
    align-items: center;
    border: 1px solid #fec5e5;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.jdf-prefix-input:focus-within {
    border-color: #fec5e5;
    box-shadow: 0 0 0 3px rgba(254, 197, 229, 0.4);
}

.jdf-input-prefix {
    padding-left: 15px;
    color: var(--color-tan-medium);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

.jdf-prefix-input input {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 12px 15px 12px 6px;
    margin: 0 !important;
}

.jdf-prefix-input input:focus {
    border: none !important;
    box-shadow: none !important;
}

.jdf-file-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jdf-file-label {
    color: var(--color-brown);
    font-size: 13px;
    font-weight: 600;
}

.jdf-file-field small {
    color: var(--color-tan-medium);
    font-size: 12px;
}

.jdf-file-field input[type="file"] {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.jdf-submit {
    padding: 14px 32px;
    background: linear-gradient(135deg, rgba(67, 53, 67, 0.9) 0%, rgba(90, 73, 88, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.jdf-submit:hover {
    background: linear-gradient(135deg, rgba(90, 73, 88, 0.95) 0%, rgba(67, 53, 67, 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.jdf-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.jdf-message {
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    display: none;
}

.jdf-message.jdf-success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.jdf-message.jdf-error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Cloudflare Turnstile Widget Styling */
.turnstile-wrapper {
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    position: relative;
    width: 300px;
    height: 65px;
    background: #fafafa;
}

/* Overlay border using pseudo-element */
.turnstile-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 1;
}

/* Dark mode */
html.dark-mode .turnstile-wrapper {
    background: #1e1e1e;
}

html.dark-mode .turnstile-wrapper::after {
    border-color: #797979;
}

/* Turnstile iframe styling */
.turnstile-wrapper .jdf-turnstile-widget,
.turnstile-wrapper .jdf-turnstile-widget iframe,
.turnstile-wrapper [data-jdf-turnstile],
.turnstile-wrapper [data-jdf-turnstile] iframe {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

/* Dark Mode Form Styles */
html.dark-mode .jdf-field input,
html.dark-mode .jdf-field textarea {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

html.dark-mode .jdf-field input::placeholder,
html.dark-mode .jdf-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

html.dark-mode .jdf-field-label {
    color: #ffffff;
}

html.dark-mode .jdf-file-label {
    color: #ffffff;
}

html.dark-mode .jdf-prefix-input {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .jdf-prefix-input:focus-within {
    border-color: #b794f4;
    box-shadow: 0 0 0 3px rgba(183, 148, 244, 0.3);
}

html.dark-mode .jdf-input-prefix {
    color: rgba(255, 255, 255, 0.55);
}

html.dark-mode .jdf-file-field small {
    color: rgba(255, 255, 255, 0.65);
}

html.dark-mode .jdf-field input:focus,
html.dark-mode .jdf-field textarea:focus {
    border-color: #b794f4;
    box-shadow: 0 0 0 3px rgba(183, 148, 244, 0.3);
}

html.dark-mode .jdf-submit {
    padding: 14px 32px;
    background: linear-gradient(135deg, rgba(183, 148, 244, 0.9) 0%, rgba(159, 122, 234, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(183, 148, 244, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

html.dark-mode .jdf-submit:hover {
    background: linear-gradient(135deg, rgba(159, 122, 234, 0.95) 0%, rgba(183, 148, 244, 0.95) 100%);
    box-shadow: 0 6px 20px rgba(183, 148, 244, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}




/* ============================================================================= 
   FORM STYLE OVERRIDES (HIGH SPECIFICITY)
   ============================================================================= */

/* Light mode input fields - dark brown border */
.modal-content .jdf-field input,
.modal-content .jdf-field textarea,
.modal-content.glass-container .jdf-field input,
.modal-content.glass-container .jdf-field textarea {
    border: 1px solid var(--color-brown, #584943) !important;
    border-radius: 8px !important;
}

.modal-content .jdf-field input:focus,
.modal-content .jdf-field textarea:focus,
.modal-content.glass-container .jdf-field input:focus,
.modal-content.glass-container .jdf-field textarea:focus {
    border-color: var(--color-brown, #584943) !important;
    box-shadow: 0 0 0 3px rgba(67, 53, 67, 0.22) !important;
}

.modal-content .jdf-prefix-input,
.modal-content.glass-container .jdf-prefix-input {
    border: 1px solid var(--color-brown, #584943) !important;
    border-radius: 8px !important;
}

.modal-content .jdf-prefix-input input,
.modal-content.glass-container .jdf-prefix-input input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.modal-content .jdf-prefix-input input::placeholder,
.modal-content.glass-container .jdf-prefix-input input::placeholder {
    color: var(--color-tan-medium) !important;
}

.modal-content .jdf-prefix-input:focus-within,
.modal-content.glass-container .jdf-prefix-input:focus-within {
    border-color: var(--color-brown, #584943) !important;
    box-shadow: 0 0 0 3px rgba(67, 53, 67, 0.22) !important;
}

/* Light mode submit button - pill with white text and white border */
.modal-content .jdf-submit,
.modal-content.glass-container .jdf-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: 100% !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, rgba(67, 53, 67, 0.9) 0%, rgba(90, 73, 88, 0.9) 50%, rgba(67, 53, 67, 0.9) 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s ease-in-out, background-position 0.5s ease !important;
}

.modal-content .jdf-submit:hover,
.modal-content.glass-container .jdf-submit:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Dark mode input fields - WHITE border */
html.dark-mode .modal-content .jdf-field input,
html.dark-mode .modal-content .jdf-field textarea,
html.dark-mode .modal-content.glass-container .jdf-field input,
html.dark-mode .modal-content.glass-container .jdf-field textarea {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html.dark-mode .modal-content .jdf-field input:focus,
html.dark-mode .modal-content .jdf-field textarea:focus {
    border-color: #b794f4 !important;
    box-shadow: 0 0 0 3px rgba(183, 148, 244, 0.3) !important;
}

html.dark-mode .modal-content .jdf-prefix-input,
html.dark-mode .modal-content.glass-container .jdf-prefix-input {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(30, 30, 30, 0.9) !important;
}

html.dark-mode .modal-content .jdf-prefix-input:focus-within,
html.dark-mode .modal-content.glass-container .jdf-prefix-input:focus-within {
    border-color: #b794f4 !important;
    box-shadow: 0 0 0 3px rgba(183, 148, 244, 0.3) !important;
}

html.dark-mode .modal-content .jdf-prefix-input input,
html.dark-mode .modal-content.glass-container .jdf-prefix-input input {
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.dark-mode .modal-content .jdf-prefix-input input::placeholder,
html.dark-mode .modal-content.glass-container .jdf-prefix-input input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark mode submit button - purple gradient with white text */
html.dark-mode .modal-content .jdf-submit,
html.dark-mode .modal-content.glass-container .jdf-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: 100% !important;
    background: linear-gradient(135deg, rgba(183, 148, 244, 0.9) 0%, rgba(159, 122, 234, 0.9) 50%, rgba(183, 148, 244, 0.9) 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(183, 148, 244, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s ease-in-out, background-position 0.5s ease !important;
}

html.dark-mode .modal-content .jdf-submit:hover,
html.dark-mode .modal-content.glass-container .jdf-submit:hover {
    background-position: 100% 50% !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(183, 148, 244, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================================= 
   RESPONSIVE BREAKPOINTS - PRODUCT GRID
   Mobile: < 768px (2 cols) | iPad Portrait: 768-1023px (3 cols) | 
   iPad Landscape: 1024-1279px (4 cols) | Desktop: >= 1280px (5 cols)
   ============================================================================= */

/* --- Inline sidebar shell (>= 950px) - visibility controls only; layout lives in style-enhancements.css --- */
@media (min-width: 950px) {

    /* Filter button hidden on desktop - sidebar always visible */
    body.post-type-archive-product .filter-toggle,
    body.post-type-archive-product .filter-toggle-btn,
    body.post-type-archive-product button.filter-toggle,
    body.tax-product_cat .filter-toggle,
    body.tax-product_cat .filter-toggle-btn,
    body.tax-product_cat button.filter-toggle {
        display: none !important;
    }

    /* Hide overlay on desktop */
    body.post-type-archive-product #shop-sidebar-overlay,
    body.post-type-archive-product .shop-sidebar-overlay,
    body.tax-product_cat #shop-sidebar-overlay,
    body.tax-product_cat .shop-sidebar-overlay {
        display: none !important;
    }

    /* Sidebar - visible on desktop */
    body.post-type-archive-product .shop-sidebar,
    body.tax-product_cat .shop-sidebar {
        display: block !important;
        transform: none !important;
        visibility: visible !important;
    }
}

/* --- Tablet landscape / small laptops (950px - 1279px) - 3 product columns with inline sidebar --- */
@media (min-width: 950px) and (max-width: 1279px) {

    /* Page-level padding - SYMMETRIC */
    body.woocommerce,
    body.post-type-archive-product,
    body.tax-product_cat {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fixed 3-column product grid inside the inline sidebar shell */
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Layout shell is owned by style-enhancements.css in the inline-sidebar band */
    .shop-layout,
    .shop-grid {
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filter-toggle-btn {
        display: none !important;
    }
}

/* --- Tablet portrait / compact tablet (768px - 949px) - 3 columns with overlay sidebar --- */
@media (min-width: 768px) and (max-width: 949px) {

    /* Page-level padding - SYMMETRIC */
    body.woocommerce,
    body.post-type-archive-product,
    body.tax-product_cat {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fixed 3-column grid */
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Full-width layout container - no extra margins */
    .shop-layout {
        display: block !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Grid fills available space - no extra margins */
    .shop-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .filter-toggle-btn {
        display: none !important;
    }
}

/* --- Mobile (< 768px) - EXACTLY 2 columns with compact product boxes --- */
@media (max-width: 767px) {

    /* Page-level padding - SYMMETRIC */
    body.woocommerce,
    body.post-type-archive-product,
    body.tax-product_cat {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fixed 2-column grid */
    body.woocommerce ul.products,
    body.woocommerce-page ul.products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Full-width layout container - no extra margins */
    .shop-layout {
        display: block !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Grid fills available space - no extra margins */
    .shop-grid {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Compact product boxes for mobile */
    body.woocommerce ul.products li.product,
    body.woocommerce-page ul.products li.product,
    body.post-type-archive-product ul.products li.product,
    body.tax-product_cat ul.products li.product {
        padding: 5px !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Product images - contain without distortion */
    body.woocommerce ul.products li.product img,
    body.woocommerce-page ul.products li.product img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin-bottom: 5px !important;
    }

    /* Mobile title - min-height 47px for alignment */
    /* Mobile title - fixed 3-line height for uniform cards */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 12px !important;
        margin: 3px 0 2px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        line-clamp: 3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* Fixed height: 12px * 1.3 * 3 lines = ~47px */
        height: 47px !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 11px !important;
        margin: 2px 0 4px !important;
    }

    /* Center Price if Desc is Empty (Mobile) */
    .woocommerce ul.products li.product.has-empty-desc .price {
        margin: auto 0 15px !important;
    }

    .woocommerce ul.products li.product.has-empty-desc .button {
        margin-top: 0 !important;
    }

    /* Mobile description - fixed 2-line height for uniform cards */
    .woocommerce ul.products li.product .woocommerce-product-details__short-description,
    .woocommerce ul.products li.product p {
        font-size: 11px !important;
        /* Fixed height: 11px * 1.3 * 2 lines = ~29px */
        height: 29px !important;
    }

    /* Collapse description when empty */
    .woocommerce ul.products li.product .woocommerce-product-details__short-description:empty,
    .woocommerce ul.products li.product p:empty {
        height: 0 !important;
        margin: 0 !important;
    }

    /* Smaller button on mobile */
    .woocommerce ul.products li.product .button {
        padding: 8px 0 !important;
        font-size: 11px !important;
    }

    .page-main a {
        background: #fff;
        border: 1px solid #ccc;
        color: #333;
        font-size: 12px !important;
        padding: 3px 6px !important;
        margin: 0 2px;
        border-radius: 3px;
        line-height: 100%;
    }
}

/* --- Small Devices (iPhone SE, 12/13/14 Pro, etc. ≤400px) - Allow title to overlap image --- */
@media (max-width: 400px) {
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        /* Remove fixed height, allow natural overflow */
        height: auto !important;
        /* Pull up into image area */
        position: relative !important;
        z-index: 2 !important;
        margin-top: -10px !important;
        /* Keep 3-line clamp */
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
    }
}

/* --- iPad Header Fix --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-header {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .site-branding a {
        font-size: 20px !important;
    }

    .site-navigation a {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    .header-links a {
        font-size: 12px !important;
    }
}

/* ============================================================================= 
   FILTEREVERYTHING PLUGIN OVERRIDES
   Hide plugin's mobile button, show filters directly when our toggle is active
   ============================================================================= */

@media (max-width: 1279px) {

    /* Hide FilterEverything's own open button/controls */
    body.post-type-archive-product .wpc-filters-open-button-container,
    body.post-type-archive-product .wpc-open-close-filters-button,
    body.post-type-archive-product .wpc-filters-widget-controls-container,
    body.post-type-archive-product .wpc-widget-close-container,
    body.tax-product_cat .wpc-filters-open-button-container,
    body.tax-product_cat .wpc-open-close-filters-button,
    body.tax-product_cat .wpc-filters-widget-controls-container,
    body.tax-product_cat .wpc-widget-close-container {
        display: none !important;
    }

    /* Force filters to show directly when our filter-active class is present */
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-widget-content,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-scroll-container,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-widget-wrapper,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-main-wrap {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Ensure the filter sections are visible */
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-section {
        display: block !important;
    }

    /* Remove any overlay the plugin creates */
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-overlay {
        display: none !important;
    }

    /* Finds uses the same custom overlay, so keep the real filter widget visible there too */
    body.post-type-archive-product.filter-active .wpc-filters-widget-content,
    body.post-type-archive-product.filter-active .wpc-filters-scroll-container,
    body.post-type-archive-product.filter-active .wpc-filters-widget-wrapper,
    body.post-type-archive-product.filter-active .wpc-filters-main-wrap,
    body.post-type-archive-product.filter-active .wpc-filters-section,
    body.tax-product_cat.filter-active .wpc-filters-widget-content,
    body.tax-product_cat.filter-active .wpc-filters-scroll-container,
    body.tax-product_cat.filter-active .wpc-filters-widget-wrapper,
    body.tax-product_cat.filter-active .wpc-filters-main-wrap,
    body.tax-product_cat.filter-active .wpc-filters-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.post-type-archive-product.filter-active .wpc-filters-overlay,
    body.tax-product_cat.filter-active .wpc-filters-overlay {
        display: none !important;
    }

    /* FILTER BUTTON - add frosting ONLY when filter is open */
    body.filter-active .filter-toggle,
    body.filter-active button#filter-toggle {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    html.dark-mode body.filter-active .filter-toggle,
    html.dark-mode body.filter-active button#filter-toggle {
        background: rgba(255, 255, 255, 0.2) !important;
    }
}

/* ============================================================================= 
   FILTER BUTTON - Match menu button exactly (no frosting by default)
   ============================================================================= */

button#filter-toggle,
button.filter-toggle,
.filter-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================================================================= 
   BODY SCROLL PREVENTION when filter is active
   ============================================================================= */

body.filter-active,
html body.filter-active {
    overflow: hidden !important;
}

/* ============================================================================= 
   FORCE FILTER SECTIONS EXPANDED when filter sidebar is open
   ============================================================================= */

@media (max-width: 1279px) {

    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-content,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-content.wpc-filter-product_cat,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-content.wpc-filter-pa_color,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-content.wpc-filter-product_brand {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }

    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filter-item,
    body.filter-active:not(.post-type-archive-product):not(.tax-product_cat) .wpc-filters-section {
        display: block !important;
    }

}