/* =========================================
   GLOBAL SHOP PAGE FIX (The "App Grid")
   ========================================= */

@media (max-width: 768px) {
    /* 1. Force the Container to be a Grid */
    .elementor-widget-wl-product-tab ul.products, 
    .woocommerce ul.products, 
    ul.products,
    .elementor-wc-products .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Columns */
        gap: 12px !important;
        margin: 0 !important;
        padding: 10px 10px !important; /* Safety padding */
        background: #f9f9f9 !important; /* Light Gray App Background */
    }

    /* 2. Style the Product Card */
    .elementor-widget-wl-product-tab ul.products li.product, 
    .woocommerce ul.products li.product,
    ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        background: #ffffff !important;
        padding: 0 0 10px 0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Soft App Shadow */
        overflow: hidden !important;
        float: none !important; /* Fix float issues */
    }

    /* 3. The Image */
    .woocommerce ul.products li.product a img,
    ul.products li.product a img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* Perfect Square */
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
        margin-bottom: 8px !important;
    }

    /* 4. The Title */
    .woocommerce-loop-product__title,
    h2.woocommerce-loop-product__title { 
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important; 
        line-height: 1.4 !important; 
        padding: 0 8px !important; 
        min-height: 36px !important; /* 2 lines of text */
        color: #333 !important;
        font-weight: 600 !important;
        margin-bottom: 5px !important;
    }

    /* 5. The Price */
    .price { 
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important; 
        font-weight: 800 !important; 
        color: #000 !important; 
        padding: 0 8px !important; 
        display: block !important;
    }

    /* 6. Hide "Add to Cart" buttons on Grid (Cleaner look) */
    .add_to_cart_button, .button.product_type_auction {
        display: none !important; 
    }
}


.btn-sell-item {
    display: inline-block;
    background: #000;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #333;
    width: 100%;
}
.btn-sell-item:hover {
    background: #222;
}


/* STOCKX DASHBOARD STYLING (Global Fix) */

/* 1. Main Container */
.stx-dashboard-wrapper { 
    font-family: 'Inter', sans-serif !important; 
    max-width: 900px !important; 
    margin: 40px auto !important; 
    padding: 0 20px !important; 
}

/* 2. Remove default list styles if theme adds them */
.stx-asks-list { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important; 
}

/* 3. The Card (White Box) */
.stx-ask-card {
    display: flex !important; 
    align-items: center !important; 
    gap: 20px !important;
    background: #ffffff !important; 
    border: 1px solid #e5e5e5 !important; 
    border-radius: 8px !important;
    padding: 20px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.04) !important;
    transition: transform 0.2s ease !important;
}
.stx-ask-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* 4. Image */
.stx-card-img img { 
    width: 80px !important; 
    height: 80px !important; 
    object-fit: contain !important; 
    border-radius: 4px !important; 
    border: 1px solid #f0f0f0 !important;
    padding: 5px !important;
    background: #fff !important;
}

/* 5. Text Info */
.stx-card-info { 
    flex: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important;
}

.stx-card-info h4 { 
    margin: 0 0 5px 0 !important; 
    font-size: 16px !important; 
    font-weight: 800 !important; 
    color: #000 !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.stx-meta { 
    font-size: 13px !important; 
    color: #666 !important; 
    display: flex !important; 
    gap: 15px !important; 
    margin-bottom: 10px !important; 
    align-items: center !important;
}

/* 6. Status Dot */
.stx-status {
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    background: #f5f5f5 !important;
    font-size: 11px !important;
}

/* 7. Action Area (Right Side) */
.stx-price-edit { 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    margin-top: 5px !important;
}

.stx-current-price { 
    font-size: 18px !important; 
    font-weight: 800 !important; 
    color: #000 !important; 
    margin-right: 15px !important; 
}

/* 8. Buttons */
.btn-edit-ask {
    background: #fff !important; 
    border: 1px solid #000 !important; 
    color: #000 !important;
    font-size: 12px !important; 
    font-weight: 700 !important;
    padding: 8px 15px !important; 
    border-radius: 4px !important; 
    cursor: pointer !important;
    text-transform: uppercase !important;
}
.btn-edit-ask:hover {
    background: #000 !important;
    color: #fff !important;
}

.btn-delete-ask {
    background: #fee2e2 !important; 
    border: 1px solid #ef4444 !important; 
    color: #ef4444 !important; 
    font-size: 16px !important;
}

/* =========================================
   FIX STICKY HEADER OVERLAP
   Adds padding to the top of the page body so content
   isn't hidden underneath the fixed header.
   Adjust '90px' to match the actual height of your header.
========================================= */
body {
    padding-top: 90px !important;
}

/* Ensure the header itself is fixed at the top */
/* Note: Your theme likely handles this, but this ensures it stays on top */
.elementor-location-header { /* This selector might need adjustment based on your theme */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* High z-index to stay on top of everything */
    background-color: #fff; /* Ensure it has a background */
}


/* =========================================
   STOCKX PRODUCT PAGE: LUXURY OVERRIDE
   ========================================= */

/* 1. KILL ALL YELLOW TEXT (Force Premium Black) */
.uwa_auction_current_bid,
.uwa_auction_current_bid span,
.uwa_auction_current_bid b,
.uwa_auction_current_bid strong,
.uwa_auction_current_bid .woocommerce-Price-amount {
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 22px !important; /* Make the price pop */
}

/* Make "Reserve price has been met" black */
.uwa_auction_reserve_met strong {
    color: #111111 !important;
}

/* 2. KILL THE GREEN BOX FOREVER */
#uwa_auction_countdown,
.uwa_auction_time,
.hasCountdown,
.uwa-main-auction-product,
.countdown_row {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 3. LUXURY TIMER LAYOUT (Fixes the broken 2nd row) */
/* This forces all boxes into one perfect line using Flexbox */
.countdown_row {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important; /* No more dropping to second line */
    width: 100% !important;
    margin-top: 10px !important;
}

/* 4. MINIMALIST TIMER BOXES (Clean grey, equal widths) */
.countdown_section {
    background-color: #f7f7f7 !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    padding: 10px 5px !important;
    flex: 1 !important; /* Forces all 5 boxes to be the exact same size */
    text-align: center !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.countdown_amount {
    color: #111111 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; /* Scaled down slightly to fit all 5 */
    font-weight: 700 !important;
    display: block !important;
}

.countdown_label {
    color: #666666 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-top: 2px !important;
}

/* 5. PREMIUM BID INPUT & BUTTON (StockX Style Alignment) */
form.uwa_auction_form {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 20px !important;
}

.quantity.buttons_added {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #eaeaea !important;
    border-radius: 4px !important;
    background: #fff !important;
    padding-left: 15px !important;
    margin: 0 !important;
}

.quantity.buttons_added input[type="number"] {
    border: none !important;
    background: transparent !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-shadow: none !important;
    color: #000 !important;
}

button#placebidbutton {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    padding: 0 30px !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    transition: background 0.2s ease !important;
}

button#placebidbutton:hover {
    background-color: #000000 !important;
}

/* 6. RELATED PRODUCTS (Force the White Cards) */
.related.products ul.products li.product,
.up-sells ul.products li.product {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
    min-height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
}

.related.products ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    border-color: #111111 !important;
}

.related.products ul.products li.product img {
    height: 180px !important;
    width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    background: transparent !important;
}

/* 7. HIDE SYSTEM GHOSTS */
.related.products li.product:not(:has(img)),
.related.products .uwa_auction_bage_icon,
.related.products .uwa_auction_badge_icon,
.related.products .add_to_cart_button,
.related.products .button,
.related.products .uwa_auction_status {
    display: none !important;
}


/* =========================================
   STOCKX LUXURY UPGRADE: THE STUDIO EFFECT
   ========================================= */

/* 1. THE STUDIO FRAME (Fixes the empty left side) */
/* Creates a luxury grey box around the product to fill the void */
.elementor-widget-wl-single-product-image,
.woocommerce-product-gallery {
    background-color: #f7f8fa !important; /* StockX signature soft grey */
    border-radius: 16px !important; /* Modern luxury curves */
    padding: 60px 40px !important; /* Massive breathing room */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #f0f0f0 !important;
}

/* Make the image blend perfectly into the grey background */
.woocommerce-product-gallery img {
    width: 100% !important;
    max-width: 500px !important; /* Keeps the jacket a perfect size */
    height: auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important; /* MAGIC TRICK: Makes white image backgrounds transparent */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Subtle zoom effect when hovering over the product */
.woocommerce-product-gallery img:hover {
    transform: scale(1.05); 
}

/* 2. KILL THE REMAINING YELLOW & GREEN */
/* Force the Yellow Price to be High-End Black */
.uwa_auction_current_bid,
.uwa_auction_current_bid span,
.uwa_auction_current_bid b,
.uwa_auction_current_bid strong,
.uwa_auction_current_bid .woocommerce-Price-amount {
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 26px !important; /* Make it bold and punchy */
    letter-spacing: -0.5px !important;
}

/* Force the "Watchlist" button to be a classy grey instead of yellow */
.uwa-watchlist-button a {
    color: #888888 !important; 
    font-weight: 500 !important;
    text-decoration: none !important;
}

.uwa-watchlist-button a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Force the Green Bid Button to be Pure Black */
button#placebidbutton,
input#placebidbutton,
.bid_button.button.alt {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    padding: 0 40px !important;
}

button#placebidbutton:hover,
input#placebidbutton:hover,
.bid_button.button.alt:hover {
    background-color: #333333 !important;
}

/* 3. POLISH THE INPUT FIELD */
/* Gives the $ input box a premium border that turns black when clicked */
.quantity.buttons_added {
    border: 2px solid #eaeaea !important;
    border-radius: 6px !important;
    transition: border-color 0.3s ease !important;
}

.quantity.buttons_added:focus-within {
    border-color: #000000 !important; 
}


/* FORCE BLACK PRICES AND BUTTONS */
.elementor-widget-wl-single-product-price .woocommerce-Price-amount,
.elementor-widget-wl-single-product-price .price,
.uwa_auction_current_bid {
    color: #111111 !important;
    font-weight: 800 !important;
}

/* Force Bid Button Black */
.elementor-widget-container button#placebidbutton,
.elementor-widget-wl-product-add-to-cart .button {
    background-color: #111111 !important;
    border-radius: 6px !important;
}


/* =========================================
   STOCKX PREMIUM MARKET DATA MODAL (V3)
   ========================================= */

/* 1. THE OVERLAY (Forces true center of the screen) */
.stx-market-data-modal-overlay-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important; /* Locks it to the vertical middle */
    justify-content: center !important; /* Locks it to the horizontal middle */
    z-index: 999999 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* 2. THE MODAL BOX (No longer flies off screen) */
.stx-market-data-modal-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    bottom: auto !important;
    margin: auto !important;
    background-color: #111111 !important; /* Deep Dark */
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.9) !important;
    width: 100% !important;
    max-width: 600px !important;
    overflow: hidden !important;
}

/* 3. Modal Header & Close Button */
.stx-market-data-modal-header-section {
    background-color: #111111 !important;
    border-bottom: 1px solid #222 !important;
    padding: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.stx-market-data-modal-title-text {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.stx-market-data-modal-close-button {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.stx-market-data-modal-close-button:hover {
    background-color: #ff4444 !important;
}

/* 4. The Tabs Container */
.stx-market-data-modal-tabs-wrapper {
    display: flex !important;
    background-color: #111111 !important;
    border-bottom: 1px solid #333333 !important;
}

/* 5. Individual Tabs */
.stx-market-data-tab-button {
    flex: 1 !important;
    background: transparent !important;
    color: #666666 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 15px 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* 6. Active Tab (StockX Green) */
.stx-market-data-tab-button.stx-tab-active {
    color: #ffffff !important;
    border-bottom: 2px solid #4ade80 !important; 
}

/* 7. Body & Table styling */
.stx-market-data-modal-body-content {
    background: #111111 !important;
    padding: 20px !important;
    min-height: 250px !important;
}

.stx-market-data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Inter', sans-serif !important;
}

.stx-market-data-table th {
    color: #888888 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px !important;
    border-bottom: 1px solid #333333 !important;
    text-align: left !important;
}

.stx-market-data-table td {
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 15px 10px !important;
    border-bottom: 1px solid #222222 !important;
}

.stx-market-data-table strong {
    color: #4ade80 !important; /* Premium Green */
}

/* Empty State */
.stx-market-data-no-data-message {
    color: #888888 !important;
    text-align: center !important;
    padding: 40px 20px !important;
    font-family: 'Inter', sans-serif !important;
}

/* =========================================
   CLEAN MODAL TABS
   ========================================= */

/* Kills the ugly thick black focus box from your theme */
.stx-market-data-tab-button {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.stx-market-data-tab-button:focus,
.stx-market-data-tab-button:active {
    outline: none !important;
    border: none !important;
}

/* Ensure the tables have a little breathing room */
.stx-market-data-modal-body-content {
    padding-top: 10px !important;
}



/* =========================================
   MOBILE FIX: PRODUCT IMAGE & STUDIO FRAME
   ========================================= */
@media (max-width: 768px) {
    /* 1. Reduce the massive desktop padding so the image fits */
    .elementor-widget-wl-single-product-image,
    .woocommerce-product-gallery {
        padding: 20px !important; /* Much smaller padding for phones */
        min-height: 280px !important; /* Gives the box a guaranteed height */
        width: 100% !important;
    }
    
    /* 2. Force the image to show up and scale correctly */
    .woocommerce-product-gallery img {
        max-width: 100% !important;
        max-height: 240px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 auto !important; /* Centers it perfectly */
    }
    
    /* 3. Fix the weird spacing under the title on mobile */
    .elementor-widget-wl-single-product-title h2 {
        font-size: 24px !important;
        margin-top: 15px !important;
    }
}


/* =========================================
   LUXURY CHECKOUT (V3 - ELEMENTOR OPTIMIZED)
   ========================================= */

/* 1. FIX THE SQUISHED NESTED COLUMNS (The Root Bug) */
/* WooCommerce tries to put Billing and Shipping side-by-side inside Elementor's left column. We force them to stack at 100% width. */
.woocommerce-checkout .col2-set .col-1, 
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. DESKTOP LAYOUT (Clean Proportions) */
@media (min-width: 1025px) {
    .elementor-widget-woocommerce-checkout-page .e-checkout__container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 50px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    
    /* Left Side (Billing) */
    .e-checkout__column-start {
        width: 60% !important;
        flex: 0 0 60% !important;
    }
    
    /* Right Side (Order Summary) */
    .e-checkout__column-end {
        width: 40% !important;
        flex: 0 0 40% !important;
    }
}

/* 3. TABLET & PHONE LAYOUT (Vertical Stacking) */
@media (max-width: 1024px) {
    .elementor-widget-woocommerce-checkout-page .e-checkout__container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important;
    }
    
    .e-checkout__column-start,
    .e-checkout__column-end {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 40px !important;
    }
}

/* 4. THE PREMIUM ORDER SUMMARY CARD (Right Side) */
.e-checkout__column-end .e-checkout__column-inner {
    background-color: #f8f9fa !important; /* Premium studio grey */
    padding: 35px !important;
    border-radius: 12px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

/* Fix table typography inside the card */
.woocommerce-checkout-review-order-table th {
    color: #888888 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #eaeaea !important;
    border-top: none !important;
    padding: 15px 0 !important;
}

.woocommerce-checkout-review-order-table td {
    color: #111111 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-bottom: 1px solid #eaeaea !important;
    padding: 20px 0 !important;
}

/* 5. LUXURY INPUT FIELDS (Billing details) */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.select2-container .select2-selection--single {
    border: 1px solid #dcdcdc !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    font-family: 'Inter', sans-serif !important;
    color: #111111 !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Dark border on click */
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #111111 !important;
}

.woocommerce-checkout form .form-row label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #333333 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* 6. CLEANUP UGLY THEME DEFAULTS */
.woocommerce-checkout .page-title,
.woocommerce-checkout .entry-header {
    display: none !important; /* Hide massive checkout title */
}

.woocommerce-checkout #payment div.payment_box {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    color: #666666 !important;
    box-shadow: none !important;
    padding: 20px !important;
}
.woocommerce-checkout #payment div.payment_box::before {
    display: none !important; /* Kills the pointing triangle */
}

/* 7. PREMIUM PLACE ORDER BUTTON */
button#place_order {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 20px !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    border: none !important;
    margin-top: 25px !important;
    transition: all 0.2s ease !important;
}

button#place_order:hover {
    background-color: #000000 !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   8. NUKE THE BILLING DETAILS BORDER
   ========================================= */

/* Strip the border, shadow, and box background from ALL left column layers */
.e-checkout__column-start,
#customer_details,
#customer_details .col-1,
.woocommerce-billing-fields,
.woocommerce-billing-fields__field-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important; 
    margin: 0 !important;
}

/* Make the "Billing Details" heading look bold and premium */
.woocommerce-billing-fields h3,
#customer_details h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 25px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
    background: transparent !important;
}

/* Ensure the form fields still have spacing between them */
.woocommerce-billing-fields__field-wrapper .form-row {
    margin-bottom: 20px !important;
}




/* =========================================
   LUXURY CART PAGE (ELEMENTOR OPTIMIZED)
   ========================================= */

/* 1. LAYOUT & SPACING */
/* Force the container to breathe and center properly */
.elementor-widget-woocommerce-cart .e-cart__container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    gap: 50px !important;
}

/* 2. NUKE THE UGLY BROWN BORDERS */
.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce form.woocommerce-cart-form {
    border: none !important;
    border-radius: 0 !important;
}

/* 3. THE CART TABLE (Left Side) */
.woocommerce-cart table.cart {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Table Headers */
.woocommerce-cart table.cart th {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #888888 !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
}

/* Table Rows */
.woocommerce-cart table.cart td {
    padding: 25px 0 !important;
    border-bottom: 1px solid #eaeaea !important;
    color: #111111 !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Product Image & Link */
.woocommerce-cart table.cart td.product-thumbnail img {
    border-radius: 8px !important;
    max-width: 80px !important;
}
.woocommerce-cart table.cart td.product-name a {
    color: #111111 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* Quantity Input */
.woocommerce-cart .quantity input.qty {
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    padding: 10px !important;
    width: 65px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    background: #ffffff !important;
}

/* Remove Product 'X' Icon */
.woocommerce-cart table.cart a.remove {
    color: #ff4444 !important;
    font-weight: 800 !important;
    background: transparent !important;
}
.woocommerce-cart table.cart a.remove:hover {
    color: #000000 !important;
    background: transparent !important;
}

/* 4. COUPON & UPDATE BUTTONS */
.woocommerce-cart .actions {
    padding-top: 30px !important;
}
.woocommerce-cart .coupon {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.woocommerce-cart .coupon input.input-text {
    flex: 1 !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    outline: none !important;
}
.woocommerce-cart .coupon input.input-text:focus {
    border-color: #111111 !important;
}

/* Secondary Buttons (Apply Coupon / Update Cart) */
.woocommerce-cart .coupon button.button,
.woocommerce-cart button[name="update_cart"] {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    border-radius: 8px !important;
    padding: 15px 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}
.woocommerce-cart .coupon button.button:hover,
.woocommerce-cart button[name="update_cart"]:hover {
    background-color: #f5f5f5 !important;
}

/* 5. CART TOTALS CARD (Right Side) */
.e-cart__column-end .e-cart__column-inner {
    background-color: #f8f9fa !important; /* Premium studio grey */
    border-radius: 16px !important;
    padding: 40px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

/* Fix the gold heading */
.cart_totals h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #eaeaea !important;
    padding-bottom: 15px !important;
}

.cart_totals table th {
    color: #666666 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 15px 0 !important;
}
.cart_totals table td {
    color: #111111 !important;
    font-weight: 800 !important;
    text-align: right !important;
}

/* 6. MASSIVE BLACK PROCEED TO CHECKOUT BUTTON */
.wc-proceed-to-checkout a.checkout-button {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 22px !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-top: 30px !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #000000 !important;
    transform: translateY(-2px) !important;
}

/* 7. RESPONSIVE MOBILE FIXES */
@media (max-width: 1024px) {
    .elementor-widget-woocommerce-cart .e-cart__container {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 15px !important;
    }
    
    .e-cart__column-start,
    .e-cart__column-end {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .e-cart__column-end .e-cart__column-inner {
        padding: 25px !important;
        margin-top: 30px !important;
    }

    /* Fix Woo's weird mobile table stacking */
    .woocommerce table.cart .product-thumbnail {
        display: block !important;
        text-align: center !important;
    }
    .woocommerce table.cart .product-thumbnail img {
        margin: 0 auto !important;
    }
    .woocommerce-cart .coupon {
        flex-direction: column !important;
    }
    .woocommerce-cart .coupon input.input-text,
    .woocommerce-cart .coupon button.button {
        width: 100% !important;
    }
}

/* =========================================
   SINGLE PRODUCT: PREMIUM QUANTITY INPUT
   ========================================= */

/* 1. Add breathing room so it doesn't touch the Buy button */
.wl-addto-cart .quantity,
.woocommerce div.product form.cart div.quantity {
    margin-bottom: 15px !important; 
    margin-right: 15px !important; /* Adds space if they ever sit side-by-side */
}

/* 2. Soften and style the input box */
.wl-addto-cart .quantity input.qty,
.woocommerce div.product form.cart input.qty {
    border: 2px solid #eaeaea !important; /* Soft luxury grey border */
    border-radius: 6px !important; /* Smooth rounded corners */
    padding: 12px 10px !important; /* Taller, clickable feel */
    height: 48px !important; /* Matches standard button heights */
    width: 80px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-align: center !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

/* 3. Dark border when the user clicks/taps to type */
.wl-addto-cart .quantity input.qty:focus,
.woocommerce div.product form.cart input.qty:focus {
    border-color: #111111 !important;
}

/* Optional: Hide the ugly default up/down spinner arrows on webkit browsers */
.wl-addto-cart .quantity input.qty::-webkit-outer-spin-button,
.wl-addto-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wl-addto-cart .quantity input.qty[type=number] {
    -moz-appearance: textfield; /* Firefox hide arrows */
}


/* =========================================
   PHASE 4: LUXURY USER DASHBOARD (MY ACCOUNT)
   ========================================= */

/* 1. MAIN LAYOUT CONTAINER */
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    gap: 40px !important;
    padding: 0 20px !important;
    font-family: 'Inter', sans-serif !important;
}

/* 2. THE SIDEBAR NAVIGATION (Desktop) */
.woocommerce-MyAccount-navigation {
    width: 25% !important;
    float: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #eaeaea !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 18px 25px !important;
    color: #666666 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}

/* Hover & Active States */
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f8f9fa !important;
    color: #111111 !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #f8f9fa !important;
    color: #111111 !important;
    font-weight: 800 !important;
    border-left: 4px solid #111111 !important;
}

/* 3. THE CONTENT AREA */
.woocommerce-MyAccount-content {
    width: calc(75% - 40px) !important;
    float: none !important;
    background: transparent !important;
}

/* Clean up standard text & fix purple button */
.woocommerce-MyAccount-content p {
    color: #666666 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .button {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
    transition: background-color 0.2s ease !important;
    border: none !important;
}
.woocommerce-MyAccount-content a.button:hover { background-color: #000000 !important; }

/* 4. PREMIUM PORTFOLIO WIDGETS */
.stx-dash-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 15px !important;
    margin-bottom: 40px !important;
}

.stx-dash-card {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 30px 25px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
}

.stx-dash-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05) !important;
    border-color: #cccccc !important;
}

.stx-stat-label {
    color: #888888 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.stx-stat-num {
    color: #111111 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
}

/* 5. ACTIVE BIDS / ASKS LISTINGS */
.stx-ask-card {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.01) !important;
    transition: all 0.2s ease !important;
}

.stx-ask-card:hover { border-color: #111111 !important; }

/* 6. MOBILE "APP-STYLE" MENU */
@media (max-width: 992px) {
    .woocommerce-account .woocommerce {
        flex-direction: column !important;
        padding: 20px 15px !important;
        gap: 20px !important;
        margin-top: 10px !important;
    }
    
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        width: 100% !important;
    }
    
    /* Converts sidebar into a swipeable pill menu */
    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Swipeable */
        -webkit-overflow-scrolling: touch !important;
        border: none !important;
        border-radius: 0 !important;
        padding-bottom: 10px !important;
        gap: 10px !important;
        background: transparent !important;
    }
    
    /* Hides the scrollbar for a clean look */
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none !important; }
    
    .woocommerce-MyAccount-navigation ul li {
        border: none !important;
        flex: 0 0 auto !important;
    }
    
    .woocommerce-MyAccount-navigation ul li a {
        background: #f5f5f5 !important;
        border-radius: 30px !important; /* Pill shape */
        padding: 12px 20px !important;
        border-left: none !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }
    
    .woocommerce-MyAccount-navigation ul li.is-active a {
        background: #111111 !important;
        color: #ffffff !important;
        border: none !important;
    }
    
    .stx-ask-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
}

/* =========================================
   BUG FIX: DESKTOP SIDE-BY-SIDE ACCOUNT
   ========================================= */

/* 1. Kill the invisible WooCommerce blocks breaking the layout */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
    display: none !important;
}

/* 2. Force the columns to sit next to each other on Desktop */
@media (min-width: 993px) {
    .woocommerce-account .woocommerce {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Forces them to stay on one line */
        align-items: flex-start !important;
        gap: 50px !important;
    }

    /* Lock the Sidebar Width */
    .woocommerce-MyAccount-navigation {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 280px !important; /* Prevents it from stretching too wide */
    }

    /* Let the Content fill the rest of the space perfectly */
    .woocommerce-MyAccount-content {
        flex: 1 !important; 
        width: auto !important;
        min-width: 0 !important; /* Prevents wide tables from breaking the layout */
    }
}

/* =========================================
   9. DASHBOARD CLUTTER & MOBILE NAV FIXES
   ========================================= */

/* 1. DE-CLUTTER & FIX PURPLE BUTTON */
.woocommerce-MyAccount-content p {
    line-height: 1.8 !important;
    font-size: 15px !important;
    margin-bottom: 20px !important; /* Adds breathing room between paragraphs */
}

/* Force overrides the vendor plugin's inline purple styles */
.woocommerce-MyAccount-content a[href*="vendor"],
.woocommerce-MyAccount-content a[style*="background"] {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 10px !important;
    margin-bottom: 50px !important; /* Massive breathing room before the Portfolio section starts */
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-content a[href*="vendor"]:hover,
.woocommerce-MyAccount-content a[style*="background"]:hover {
    background-color: #000000 !important;
    transform: translateY(-2px) !important;
}


/* 2. FIX MOBILE "SWIPE" NAVIGATION */
@media (max-width: 992px) {
    /* Stretch the container edge-to-edge so you can swipe cleanly */
    .woocommerce-MyAccount-navigation {
        width: 100vw !important; 
        margin-left: -20px !important; 
        padding: 0 20px !important; 
        overflow: hidden !important; 
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Makes it swipeable horizontally */
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding-bottom: 15px !important;
        width: 100% !important;
        /* Hide scrollbars for a clean app look */
        -ms-overflow-style: none !important; 
        scrollbar-width: none !important;  
    }
    
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none !important;
    }

    .woocommerce-MyAccount-navigation ul li {
        display: block !important;
        flex: 0 0 auto !important; /* Forces the missing buttons to stay their natural width and not disappear */
        visibility: visible !important;
    }

    /* Style the inactive pills so they are visible */
    .woocommerce-MyAccount-navigation ul li a {
        background-color: #f0f0f0 !important;
        color: #555555 !important; /* Dark grey text */
        border-radius: 30px !important;
        padding: 12px 24px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border: none !important;
        white-space: nowrap !important; /* Stops text from wrapping onto two lines */
        display: block !important;
    }

    /* Style the active pill */
    .woocommerce-MyAccount-navigation ul li.is-active a {
        background-color: #111111 !important;
        color: #ffffff !important;
    }
}

/* =========================================
   10. MOBILE NAV - CLEAN SWIPE (V2)
   ========================================= */
@media (max-width: 992px) {
    /* The Swipe Hint */
    .woocommerce-MyAccount-navigation::before {
        content: "SWIPE FOR MORE \2192";
        display: block !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        color: #888888 !important;
        margin-bottom: 12px !important;
        letter-spacing: 1px !important;
    }

    /* Force pills to stay their exact size and not squish */
    .woocommerce-MyAccount-navigation ul li {
        flex: 0 0 auto !important; 
    }

    .woocommerce-MyAccount-navigation ul li a {
        display: block !important;
        padding: 10px 20px !important;
        white-space: nowrap !important;
    }

    /* Hide the ugly physical scrollbar completely, but keep swipe active */
    .woocommerce-MyAccount-navigation ul {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;  /* Firefox */
        padding-bottom: 5px !important;
    }
    
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari and Opera */
    }
}


/* =========================================
   HEADER: SMART CART BADGE
   ========================================= */
.stx-custom-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111111 !important;
    text-decoration: none !important;
    padding: 5px;
    margin-left: 12px; /* Smooth spacing from the heart */
    transform: translateY(-2px); /* Nudges the bag UP to align perfectly */
    transition: all 0.2s ease;
}

.stx-custom-cart-btn:hover {
    transform: translateY(-2px) scale(1.05); /* Keeps it aligned when hovering */
}

.stx-custom-cart-btn i,
.stx-custom-cart-btn svg {
    font-size: 22px !important;
    color: #111111 !important;
    vertical-align: middle !important;
}

/* The Red Notification Bubble */
.stx-cart-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: #e60000 !important; /* App Alert Red */
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: 'Inter', sans-serif !important;
    height: 18px;
    min-width: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

/* Hides the red dot if the cart has 0 items */
.stx-hidden-badge {
    opacity: 0 !important;
    transform: scale(0) !important;
}


/* =========================================
   FIX: FLYOUT MENU CLIPPING ON PRODUCT PAGE
   ========================================= */

/* Only target the inner side panel, NOT the push wrapper */
#hfe-flyout-content-id-6aeeecc,
.hfe-side.hfe-flyout-left {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    position: fixed !important;
    top: 0 !important;
}

/* The dark overlay behind the menu */
.hfe-flyout-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}


/* =========================================
   MOBILE/TABLET: ELEMENTOR SWIPEABLE PILLS (V3)
   ========================================= */
@media (max-width: 1024px) {
    /* 1. Target your exact container ID and force its inner wrapper to swipe */
    .stx-swipeable-pills .e-con-inner,
    [data-id="341e8602"] .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Absolutely prevents stacking */
        overflow-x: auto !important; /* Enables horizontal swipe */
        -webkit-overflow-scrolling: touch !important; /* Smooth iOS scrolling */
        justify-content: flex-start !important;
        gap: 12px !important;
        padding-bottom: 15px !important;
        
        /* Hide the ugly scrollbars */
        scrollbar-width: none !important; 
        -ms-overflow-style: none !important; 
    }

    /* Hide Webkit (Chrome/Safari/iOS) scrollbars */
    .stx-swipeable-pills .e-con-inner::-webkit-scrollbar,
    [data-id="341e8602"] .e-con-inner::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. Force the Elementor Button Widgets to lock their natural width */
    .stx-swipeable-pills .elementor-widget-button,
    [data-id="341e8602"] .elementor-widget-button {
        width: auto !important;
        flex: 0 0 auto !important; /* Kills Elementor's mobile width overrides */
        margin-bottom: 0 !important;
    }

    /* 3. Stop the text inside the buttons from wrapping onto two lines */
    .stx-swipeable-pills .elementor-button,
    [data-id="341e8602"] .elementor-button {
        white-space: nowrap !important;
        display: inline-block !important;
    }
}



/* =========================================
   FIX: AJAX PAGINATION FLOATING BUG
   ========================================= */

/* 1. Ensure the parent container allows items to drop to the next line */
.elementor-widget-woocommerce-products .woocommerce,
.elementor-widget-wc-archive-products .woocommerce {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 2. Force the pagination to span 100% width so it cannot sit side-by-side with products */
nav.woocommerce-pagination,
.woocommerce-pagination,
.wpf-pagination {
    width: 100% !important;
    flex: 0 0 100% !important; /* Absolutely forces a line break in Flexbox */
    clear: both !important;    /* Absolutely forces a line break in standard layouts */
    display: block !important;
    text-align: center !important; /* Centers the numbers */
    margin-top: 50px !important;
    margin-bottom: 30px !important;
}

/* 3. Style the pagination numbers to look clean and centered */
nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* 4. Tweak the individual number boxes for a premium look */
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    border: 1px solid #eaeaea !important;
    background: #ffffff !important;
    color: #111111 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

/* Make the active page number black */
nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li span.current {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}


/* =========================================
   THE ULTIMATE WPF AJAX INCEPTION FIX
   ========================================= */

/* 1. DISARM THE DUPLICATE WRAPPER */
/* Forces the injected wrapper to act as a normal 100% wide block */
#stockx-desktop-wrapper #stockx-desktop-wrapper {
    display: block !important;
    width: 100% !important;
    gap: 0 !important;
}

/* 2. FORCE THE GRID (Scoped strictly to the filter area) */
#stockx-desktop-wrapper ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile 2-Column Grid */
@media (max-width: 1024px) {
    #stockx-desktop-wrapper ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 3. OVERRIDE THE 31% SQUISH BUG */
/* The inspector shows Elementor forcing width:31%. This absolutely overrides it. */
#stockx-desktop-wrapper ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 4. ANCHOR THE PAGINATION */
#stockx-desktop-wrapper .wpf-pagination,
#stockx-desktop-wrapper nav.woocommerce-pagination {
    grid-column: 1 / -1 !important; /* Forces pagination to span across all 3 grid columns */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 40px !important;
}

/* =========================================
   THE ULTIMATE WPF AJAX GRID & PAGINATION FIX
   ========================================= */

/* 1. FIX THE SIDE-BY-SIDE SQUISH BUG */
/* The plugin uses flexbox but forgets to allow wrapping. This forces pagination to the next line. */
.wpf-search-container,
#stockx-desktop-wrapper {
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 2. FORCE THE GRID LAYOUT (And fix the Inception wrapper) */
.wpf-search-container ul.products,
#stockx-desktop-wrapper ul.products,
#stockx-desktop-wrapper #stockx-desktop-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Columns Desktop */
    gap: 20px !important;
    width: 100% !important;
    flex: 0 0 100% !important; /* Forces the grid to take the full row */
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile 2-Column Override */
@media (max-width: 1024px) {
    .wpf-search-container ul.products,
    #stockx-desktop-wrapper ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* 3. LUXURY CARD STYLING (Overriding Elementor's 31%) */
ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 380px !important;
    float: none !important;
}

/* Card Hover */
ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    border-color: #111111 !important;
    z-index: 5 !important;
}

/* Image Polish */
ul.products li.product img {
    height: 180px !important; 
    width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    background: transparent !important;
}

/* Typography & Alignment */
.woocommerce-loop-product__title {
    color: #111111 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 42px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.price {
    color: #111111 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    margin-top: auto !important; 
}

/* 4. ANCHOR PAGINATION TO THE BOTTOM */
.wpf-pagination,
nav.woocommerce-pagination {
    width: 100% !important;
    flex: 0 0 100% !important; /* Absolutely forces it to its own full-width line */
    display: block !important;
    text-align: center !important;
    margin-top: 40px !important;
    clear: both !important;
}

/* 5. HIDE ALL JUNK */
.uwa_auction_bage_icon,   
.uwa_auction_badge_icon,
.yith-wcact-auction-badge,
.woocommerce-result-count, 
.woocommerce-ordering,
.add_to_cart_button,
.button,
.star-rating,
.onsale,
.uwa_auction_status,
.uwa_winning_bid_text {
    display: none !important;
}

/* =========================================
   NUKE WOOCOMMERCE RESULTS & SORTING
   ========================================= */

p.woocommerce-result-count,
form.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-ordering,
#stockx-desktop-wrapper .woocommerce-result-count,
#stockx-desktop-wrapper .woocommerce-ordering,
.wpf-search-container .woocommerce-result-count,
.wpf-search-container .woocommerce-ordering {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}


/* =========================================
   CLEANUP: NUKE RESULTS, SORTING & GHOSTS
   ========================================= */

/* 1. KILL THE GHOST (Fixes the empty first spot) */
/* This destroys the invisible WooCommerce elements stealing your grid slots */
ul.products::before,
ul.products::after,
.wpf-search-container ul.products::before,
.wpf-search-container ul.products::after,
#stockx-desktop-wrapper ul.products::before,
#stockx-desktop-wrapper ul.products::after {
    display: none !important;
    content: none !important;
}

/* 2. HIDE WOOCOMMERCE RESULTS & SORTING DROPDOWNS */
p.woocommerce-result-count,
form.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-ordering,
#stockx-desktop-wrapper .woocommerce-result-count,
#stockx-desktop-wrapper .woocommerce-ordering,
.wpf-search-container .woocommerce-result-count,
.wpf-search-container .woocommerce-ordering {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* =========================================
   STOCKX ILLUSION: HIDE AUCTION TIMERS (V2)
   ========================================= */

div.uwa_auction_time,
#uwa_auction_countdown,
.uwa-main-auction-product.hasCountdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}



/* =========================================
   FIX: RESTORE MISSING ACCOUNT BUTTONS
   ========================================= */

.woocommerce-account form .button,
.woocommerce form.register .button,
.woocommerce form.login .button,
.dokan-form-container .button,
button[name="register"],
button[name="login"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    background-color: #111111 !important; /* Premium Black */
    color: #ffffff !important; /* White Text */
    padding: 12px 24px !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    margin-top: 15px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    width: 100% !important; /* Makes it a nice, full-width button */
}

/* Hover Effect for the button */
.woocommerce-account form .button:hover,
button[name="register"]:hover,
button[name="login"]:hover {
    background-color: #333333 !important;
}


/* =======================================================
   TAPINBEAUTY: MASTER MARKETPLACE GRID & FILTER FIX
   ======================================================= */

/* -----------------------------------------
   1. DISARM AJAX WRAPPERS & INLINE STYLES
   ----------------------------------------- */
/* Forces the plugin's injected flexboxes to stack vertically instead of side-by-side */
.wpf-search-container,
#stockx-desktop-wrapper,
#stockx-desktop-wrapper #stockx-desktop-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -----------------------------------------
   2. THE IRONCLAD 3-COLUMN GRID
   ----------------------------------------- */
.wpf-search-container ul.products,
#stockx-desktop-wrapper ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile 2-Column Override */
@media (max-width: 1024px) {
    .wpf-search-container ul.products,
    #stockx-desktop-wrapper ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* -----------------------------------------
   3. ELEMENTOR OVERRIDE & LUXURY CARDS
   ----------------------------------------- */
/* Crushes Elementor's 31% width bug and applies the premium design */
.wpf-search-container ul.products li.product,
#stockx-desktop-wrapper ul.products li.product,
.woocommerce ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important; /* Prevents AJAX squishing */
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 380px !important;
}

/* Card Hover */
.woocommerce ul.products li.product:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    border-color: #111111 !important;
    z-index: 5 !important;
}

/* Image Alignment */
.woocommerce ul.products li.product img {
    height: 180px !important; 
    width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    background: transparent !important;
}

/* Typography */
.woocommerce .woocommerce-loop-product__title {
    color: #111111 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    min-height: 42px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce .price {
    color: #111111 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    margin-top: auto !important; 
}

/* -----------------------------------------
   4. PAGINATION ANCHOR & STYLING
   ----------------------------------------- */
/* Locks pagination to the bottom and styles it like StockX */
.wpf-pagination,
nav.woocommerce-pagination,
.woocommerce-pagination {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    clear: both !important;
}

nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    border: 1px solid #eaeaea !important;
    background: #ffffff !important;
    color: #111111 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li span.current {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

/* -----------------------------------------
   5. GHOSTBUSTERS & JUNK HIDERS
   ----------------------------------------- */
/* Destroys grid ghosts, duplicate results, sorting, and timers */
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}

p.woocommerce-result-count,
form.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-ordering,
.uwa_auction_bage_icon,   
.uwa_auction_badge_icon,
.yith-wcact-auction-badge,
.woocommerce ul.products li.product .button, /* Hides grid buttons without breaking registration forms */
.star-rating,
.onsale,
.uwa_auction_status,
.uwa_winning_bid_text,
div.uwa_auction_time,
#uwa_auction_countdown,
.uwa-main-auction-product.hasCountdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* =========================================
   COMING SOON: BEHEAD THE THEME
   ========================================= */
/* Aggressively forces any custom theme or ShopLentor header/footer to vanish during Maintenance Mode */
body.elementor-maintenance-mode header,
body.elementor-maintenance-mode footer,
body.elementor-maintenance-mode .site-header,
body.elementor-maintenance-mode .site-footer,
body.elementor-maintenance-mode [data-elementor-type="header"],
body.elementor-maintenance-mode [data-elementor-type="footer"],
body.elementor-maintenance-mode #masthead,
body.elementor-maintenance-mode #colophon {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* =========================================
   COMING SOON: UPK GLASS NEWSLETTER
   ========================================= */
/* 1. Force the main wrapper to align side-by-side */
.luxury-form .upk-newsletter {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important; /* Forces input and button to match heights perfectly */
    gap: 15px !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* 2. Break the UPK Input Cage */
.luxury-form .upk-newsletter-input-wrapper {
    flex-grow: 1 !important; /* Forces it to take up all available horizontal space */
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Style the Input Box (Frosted Glass) */
.luxury-form .upk-input {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    padding: 16px 24px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    outline: none !important;
}

.luxury-form .upk-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Strip the Button Cage & Style the Button */
.luxury-form .upk-newsletter-signup-wrapper {
    margin: 0 !important;
}

.luxury-form button.upk-newsletter-submit {
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    padding: 16px 32px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.luxury-form button.upk-newsletter-submit:hover {
    background-color: #ffffff !important;
    color: #111111 !important;
}/* 3. Style the Input Box (Frosted Glass) */
.luxury-form .upk-input {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    padding: 0 24px !important; /* Padding left/right only */
    height: 54px !important; /* FORCED EXACT HEIGHT */
    box-sizing: border-box !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    outline: none !important;
    margin: 0 !important;
}

.luxury-form .upk-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 4. Strip the Button Cage & Style the Button */
.luxury-form .upk-newsletter-signup-wrapper {
    margin: 0 !important;
    height: 54px !important;
}

.luxury-form button.upk-newsletter-btn {
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    padding: 0 32px !important; /* Padding left/right only */
    height: 54px !important; /* FORCED EXACT HEIGHT TO MATCH INPUT */
    box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.luxury-form button.upk-newsletter-btn:hover {
    background-color: #ffffff !important;
    color: #111111 !important;
}

/* 5. Mobile Fix (Stack nicely on phones) */
@media (max-width: 768px) {
    .luxury-form .upk-newsletter {
        flex-direction: column !important;
    }
}


/* =========================================
   COMING SOON: KILL THE WHITE GAP
   ========================================= */
body.elementor-maintenance-mode .site-content,
body.elementor-maintenance-mode #content,
body.elementor-maintenance-mode #main,
body.elementor-maintenance-mode #primary,
body.elementor-maintenance-mode .page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* =========================================
   COMING SOON: KILL EHF PLUGIN WRAPPERS
   ========================================= */
body.elementor-maintenance-mode .ehf-header,
body.elementor-maintenance-mode .ehf-footer,
body.elementor-maintenance-mode .hfe-header,
body.elementor-maintenance-mode .hfe-footer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Force the body itself to touch the very top edge of the browser */
body.elementor-maintenance-mode,
html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================
   COMING SOON: MOBILE OVERHAUL FIX
   ========================================= */
@media (max-width: 768px) {
    /* 1. Kill Horizontal Scrolling (The white bar on the right) */
    html, body.elementor-maintenance-mode {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

   /* 2. Fix the Squished Timer Overlap & Force Labels Under Numbers */
    
    /* Catch BOTH divs and spans that act as the container for each time block */
    div[class*="countdown-item"], 
    div[class*="countdown-section"],
    span[class*="countdown-section"],
    .elementor-countdown-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 6px !important; /* Adds clean spacing between the blocks */
    }

    /* Force the numbers and labels to act as solid blocks so they HAVE to stack */
    span[class*="countdown-digits"],
    span[class*="countdown-amount"],
    .elementor-countdown-digits,
    span[class*="countdown-label"],
    span[class*="countdown-period"],
    .elementor-countdown-label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Shrinks the massive numbers so they fit on a phone */
    span[class*="countdown-digits"],
    span[class*="countdown-amount"],
    .elementor-countdown-digits {
        font-size: 36px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important; /* Tiny gap between number and label */
    }

    /* Shrinks the labels (Days, Hours) */
    span[class*="countdown-label"],
    span[class*="countdown-period"],
    .elementor-countdown-label {
        font-size: 10px !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    /* 3. Fix the Form Stretching */
    .luxury-form {
        width: 100% !important;
        padding: 0 20px !important; /* Gives the form breathing room on the sides */
        box-sizing: border-box !important;
    }

    .luxury-form .upk-newsletter {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    /* Forces the input and button to span the full width of the phone */
    .luxury-form .upk-newsletter-input-wrapper,
    .luxury-form .upk-newsletter-signup-wrapper,
    .luxury-form .upk-input,
    .luxury-form button.upk-newsletter-btn {
        width: 100% !important;
        height: 54px !important; /* Keeps that premium height */
        margin: 0 !important;
    }
}



/* =========================================
   LUXURY CARDS: REMOVE LINK UNDERLINES
   ========================================= */
.elementor-image-box-title a,
.elementor-image-box-title a:hover,
.elementor-image-box-title a:focus,
.elementor-image-box-title a:active {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Force WooCommerce 'Pay for Order' button to display on Invoice pages */
.woocommerce-checkout-pay #payment .form-row,
.woocommerce-checkout-pay #payment div.form-row {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 20px !important;
}

button#place_order, 
.woocommerce-page #payment #place_order {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 16px !important;
    background-color: #357355 !important; /* TapInBeauty Green */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    margin-top: 20px !important;
    border: none !important;
    z-index: 9999 !important;
    cursor: pointer !important;
}

button#place_order:hover, 
.woocommerce-page #payment #place_order:hover {
    background-color: #285a42 !important;
}

.fs-market-wrap{
	padding:100px !important;
}

.entry-title{
	display:none !important;
}

@media screen and (min-width: 1280px) and (hover: hover) and (pointer: fine) {
    .hfeed.site {
        margin-top: 70px;
    }
}

/* Force the menu to stay on one line and prevent wrapping */
.hfe-nav-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Ensure the parent container doesn't force a wrap */
.hfe-nav-menu-layout-horizontal {
    flex-wrap: nowrap !important;
}

/* Optional: If the items are still too wide, slightly reduce their padding */
.hfe-nav-menu .menu-item a {
    padding-left: 10px !important;
    padding-right: 10px !important;
}