/* Infinite Scroll Grid */
.ifl-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px 20px;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Hide standard pagination if JS is active */
.ifl-pagination {
    margin-top: 60px;
    opacity: 0.5;
    /* Visual cue it's being handled */
}

/* Loader */
.ifl-loading-spinner {
    width: 100%;
    margin: 40px 0;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Filter Bar */
/* --- Sticky Filter Bar --- */
/* --- Sticky Filter Bar --- */
.ifl-filter-bar {
    position: sticky;
    top: var(--ifl-header-height, 80px);
    /* Default: Below header */
    z-index: 9990;
    /* Below header (9999) */
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* Match header transition */
    width: 100%;
}

/* When header is hidden (scrolling down), stick to top */
body.ifl-header-hidden .ifl-filter-bar {
    top: 0;
}

/* Hide Default Theme Footers (Hammer approach) */
.site-footer,
#colophon,
footer[id="footer"],
.elementor-location-footer {
    display: none !important;
}

/* But keep OUR footer */
.ifl-footer {
    display: block !important;
}

.ifl-filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Custom Dropdown */
.ifl-custom-dropdown {
    position: relative;
    font-family: 'DM Sans', sans-serif;
}

.ifl-dropdown-toggle {
    background: none;
    border: none;
    font-size: 13px;
    /* Slightly smaller for elegance */
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000 !important;
    /* Force Black */
    padding: 0;
}

.ifl-dropdown-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
    color: #000;
}

.ifl-custom-dropdown.open .ifl-dropdown-toggle .dashicons {
    transform: rotate(180deg);
}

.ifl-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* Align left */
    background: #fff;
    min-width: 280px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    /* Stronger shadow */
    padding: 20px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    border-radius: 0;
    /* Square elegant */
    border: 1px solid #f0f0f0;
}

.ifl-custom-dropdown.open .ifl-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ifl-dropdown-header {
    padding: 10px 30px;
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.ifl-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 30px;
    color: #000 !important;
    /* Force Black */
    text-decoration: none;
    font-size: 13px;
    transition: background 0.2s;
    letter-spacing: 0.5px;
}

.ifl-dropdown-item:hover {
    background: #f7f7f7;
    color: #000 !important;
}

.ifl-dropdown-item.active {
    font-weight: 500;
    background: #fdfdfd;
    color: #000 !important;
}

.ifl-check {
    font-size: 12px;
    color: #000 !important;
    /* Checkmark Black */
}

/* Filter Button (Pill Style) */
#ifl-filter-toggle.ifl-filter-pill {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 25px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000 !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

#ifl-filter-toggle.ifl-filter-pill:hover {
    border-color: #000;
    background: #fdfdfd;
}

#ifl-filter-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

/* Filter Button */
#ifl-filter-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 24px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000 !important;
}

#ifl-filter-toggle:hover {
    border-color: #000;
    background: #000;
    color: #fff !important;
}

/* --- Filter Drawer --- */
.ifl-filter-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smooth eased */
    display: flex;
    flex-direction: column;
}

.ifl-filter-drawer.open {
    right: 0;
}

.ifl-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
}

.ifl-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.ifl-drawer-header {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.ifl-drawer-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.ifl-drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #000;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ifl-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
}

.ifl-filter-group {
    margin-bottom: 30px;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 20px;
}

.ifl-filter-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Radios & Checkboxes */
.ifl-radio-option,
.ifl-checkbox-option {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.ifl-radio-option input,
.ifl-checkbox-option input {
    display: none;
}

/* Custom Checkbox Box */
.ifl-checkbox-box {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ifl-checkbox-option input:checked+.ifl-checkbox-box {
    background: #000;
    border-color: #000;
}

.ifl-checkbox-option input:checked+.ifl-checkbox-box::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Custom Radio */
.ifl-radio-option input:checked+.text-label {
    /* Or direct styling if easier */
    font-weight: bold;
}

/* Let's keep radio simple for now or use similar custom box logic */
.ifl-radio-option {
    gap: 10px;
}

.ifl-drawer-footer {
    padding: 20px 30px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.ifl-btn-primary {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 15px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.3s;
}

.ifl-btn-primary:hover {
    background: #333;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .ifl-filter-drawer {
        width: 100%;
        right: -100%;
    }
}

/* Force Hide Copyright if it persists (Failsafe) */
.ifl-footer-copyright p:first-of-type {
    /* If the rogue text is the first paragraph, hide it. 
       But be careful. The correct copyright is also a p. 
       Assuming the rogue one is rendered separately. */
}

/* Specific fix for text node removal if we could use JS, but CSS cannot content-match */

.ifl-filter-count {
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
}

.ifl-filter-right button:hover {
    color: #000;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .ifl-hero__content {
        padding-bottom: 40px !important;
        /* Override inline style */
        padding-left: 20px !important;
        padding-right: 20px !important;
        align-items: flex-start !important;
        /* Left align on mobile for LV vibe? Or Keep centered? LV is usually centered title but let's stick to flex-end vertical */
    }

    .ifl-hero__title {
        font-size: 2rem !important;
    }

    .ifl-filter-container {
        padding: 15px 20px;
    }

    .ifl-catalog-header h1 {
        font-size: 1.8rem !important;
    }
}

/* ====================================================
   GLOBAL MOBILE GRID FIX (2 Columns)
   Applied to Archive, Widgets, and Standard Woo
   ==================================================== */
@media (max-width: 768px) {

    .ifl-products-grid,
    .ifl-product-grid,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Adjust padding for minimalist cards globally */
    .ifl-media-box {
        padding: 15px !important;
    }

    /* Ensure text wrapping */
    .ifl-product-title,
    .woocommerce-loop-product__title {
        white-space: normal !important;
        font-size: 12px !important;
    }
}


/* --- Filter Drawer Styles (Applied) --- */
.ifl-filter-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
}

.ifl-filter-drawer.open {
    right: 0;
}

.ifl-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
}

.ifl-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.ifl-drawer-header {
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* No border bottom in mockup? It looks clean. Let's keep it minimal. */
}

.ifl-drawer-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.ifl-drawer-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #000;
    padding: 0;
}

.ifl-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    /* Full width items */
}

/* Toggle Row */
.ifl-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: #f9f9f9;
    /* Slight grey for 'Available Online' per standard UX or keep white? Mockup shows greyish row? Or Just header. */
    background: #fbfbfb;
}

.ifl-filter-toggle-row {
    border-bottom: 1px solid #eee;
}

.ifl-filter-label {
    font-size: 14px;
    font-weight: 500;
}

/* Switch */
.ifl-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.ifl-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ifl-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.ifl-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.ifl-slider {
    background-color: #555;
    /* Dark grey active */
}

input:checked+.ifl-slider:before {
    transform: translateX(20px);
}

/* Accordions */
.ifl-accordion-item {
    border-bottom: 1px solid #eee;
}

.ifl-accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 30px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s;
}

.ifl-accordion-header:hover {
    background: #fafafa;
}

.ifl-accordion-header .dashicons {
    transition: transform 0.3s;
    font-size: 18px;
    color: #000;
}

.ifl-accordion-item.active .ifl-accordion-header .dashicons {
    transform: rotate(180deg);
}

.ifl-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
    padding: 0 30px;
}

.ifl-accordion-item.active .ifl-accordion-body {
    /* JS will calculate height or we use max-height trick */
    max-height: 500px;
    /* Safe limit */
    transition: max-height 0.3s ease-in;
    padding-bottom: 20px;
}

/* Options */
.ifl-checkbox-option,
.ifl-radio-option {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
}

.ifl-checkbox-box {
    margin-right: 15px;
    border-radius: 2px;
    /* Slight round */
}

/* Footer */
.ifl-drawer-footer {
    padding: 20px 30px;
    border-top: 1px solid #eee;
}

.ifl-btn-primary {
    background: #000;
    border-radius: 50px;
    /* Pill button for View Products too? Mockup shows black pill? Or rect? Canvas usually rect. Let's do Pill for consistency */
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
}

/* --- Color Swatches --- */
.ifl-color-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    cursor: pointer;
}

.ifl-color-option input {
    display: none;
}

.ifl-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ddd;
    /* Subtle border for white/light colors */
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

/* Checked State for Color: Ring effect */
.ifl-color-option input:checked+.ifl-color-swatch {
    transform: scale(1.1);
    border: 1px solid #000;
}

.ifl-color-option input:checked+.ifl-color-swatch::after {
    /* Optional: Checkmark inside or outer ring? LV just boldens or ring. 
       Let's do a simple overlay check if readable, or just outer ring. */
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid #000;
    border-radius: 50%;
}

.ifl-color-label {
    font-size: 13px;
    color: #333;
}

.ifl-color-option input:checked~.ifl-color-label {
    font-weight: 600;
    color: #000;
}

/* --- FORCE REMOVE PINK (Pink Killer) --- */
/* The user reported pink active states. We override aggressively. */

.ifl-dropdown-toggle,
.ifl-dropdown-toggle:active,
.ifl-dropdown-toggle:focus,
.ifl-dropdown-item,
.ifl-dropdown-item:active,
.ifl-dropdown-item:hover,
.ifl-dropdown-item.active {
    background-color: transparent !important;
    /* Or white/black as needed, never pink */
    color: #000 !important;
    border-color: #ddd !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Toggle hover */
.ifl-dropdown-toggle:hover {
    color: #555 !important;
}

/* Dropdown Item Active */
.ifl-dropdown-item.active {
    background-color: #f5f5f5 !important;
    /* Light grey, acceptable */
    color: #000 !important;
}

/* Any theme button overrides */
button.ifl-btn-primary {
    background-color: #000 !important;
    color: #fff !important;
}

/* Fix for any elementor global color overriding */
/* ========================================
   PREMIUM PRODUCT CARD (LV Style)
   ======================================== */
.ifl-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
}

.ifl-product-media {
    position: relative;
    aspect-ratio: 3/4;
    /* Standard Fashion Ratio */
    overflow: hidden;
    background: #f7f7f7;
    /* Light background for loading */
    border-radius: 4px;
}

.ifl-media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.ifl-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.ifl-card-img.active {
    opacity: 1;
    z-index: 2;
}

/* Slider Navigation */
/* Slider Navigation */
.ifl-card-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    /* Slightly larger */
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9) !important;
    /* Force White override Pink */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: all 0.2s ease;
    color: #1a1a1a !important;
    /* Force Icon Color */
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ifl-card-nav svg {
    width: 16px;
    /* Explicit Size */
    height: 16px;
    stroke-width: 2px;
    display: block;
    /* Fix vertical align */
}

.ifl-card-nav:hover {
    background-color: #fff !important;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.ifl-product-card:hover .ifl-card-nav {
    opacity: 1;
}

.ifl-card-prev {
    left: 12px;
}

.ifl-card-next {
    right: 12px;
}

/* Hide arrows on mobile touch */
@media (hover: none) {
    .ifl-card-nav {
        display: none;
    }
}

/* Dots */
.ifl-card-dots {
    position: absolute;
    bottom: 15px;
    /* Higher up */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    /* Let clicks pass through */
}

/* Wishlist Button - Cleaner */
.ifl-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.8) !important;
    /* Semi-transparent */
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    color: #1a1a1a !important;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: none;
    /* Flat elegant */
}

.ifl-wishlist-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5px;
    fill: none;
    /* Ensure no fill default */
}

.ifl-wishlist-btn:hover {
    background: #fff !important;
    transform: scale(1.1);
    color: #c8a45c !important;
    /* Gold on Hover */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ifl-product-card:hover .ifl-card-dots {
    opacity: 1;
}

.ifl-dot {
    width: 6px;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transition: background 0.2s;
}

.ifl-dot.active {
    background: #1a1a1a;
}

/* Badges */
.ifl-badge-new {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
    background: transparent;
    padding: 2px 0;
    z-index: 5;
}

/* Wishlist */
.ifl-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #1a1a1a;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s;
}

.ifl-wishlist-btn:hover {
    transform: scale(1.1);
}

.ifl-wishlist-btn svg {
    stroke-width: 1.5;
}

/* Info */
.ifl-product-info {
    padding: 4px 0;
}

.ifl-product-title {
    margin: 0 0 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.ifl-product-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.ifl-product-price {
    font-size: 13px;
    color: #555;
    font-weight: 400;
}