/* ==========================================================================
   MASTER WOOCOMMERCE STYLESHEET (css-shop.css)
   Organized: Shop Grid, Product Cards, Sidebar, Wishlist & Notices
   ========================================================================== */

/* ==========================================================================
   1. SHOP & ARCHIVE PAGE LAYOUT
   ========================================================================== */

/* Page Headers & Titles */
.page-header, .entry-header, header.entry-header, .woocommerce-products-header {
    background-color: #87BF48 !important;
    background-image: linear-gradient(135deg, #87BF48 0%, #96c957 100%) !important;
    width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important;
    padding: 50px 30px !important; margin-bottom: 40px !important; margin-top: 20px !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important;
    border-radius: 16px !important; box-shadow: 0 4px 15px rgba(135, 191, 72, 0.2) !important;
    display: none !important; /* Title hidden per site configuration */
}

.page-header h1, .entry-title, .entry-header h1, .woocommerce-products-header__title.page-title {
    color: #ffffff !important; font-family: inherit !important; font-size: 34px !important; font-weight: 800 !important;
    text-transform: uppercase !important; margin: 0 !important; letter-spacing: 1px !important; text-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; line-height: 1.2 !important;
}

/* Shop Pagination */
.woocommerce nav.woocommerce-pagination { display: flex !important; justify-content: center !important; width: 100% !important; margin-top: 50px !important; margin-bottom: 50px !important; }
.woocommerce nav.woocommerce-pagination ul, .woocommerce-pagination ul.page-numbers { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; border: none !important; padding: 10px !important; margin: 0 !important; }
.woocommerce-pagination ul.page-numbers li { border: none !important; display: inline-flex !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-pagination ul.page-numbers li a, .woocommerce-pagination ul.page-numbers li span { display: flex !important; justify-content: center !important; align-items: center !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #f4f4f4 !important; color: #444 !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; }
.woocommerce-pagination ul.page-numbers li span.current, .woocommerce-pagination ul.page-numbers li a:hover { background: #88B437 !important; color: #fff !important; }

/* ==========================================================================
   2. MAIN PRODUCT GRID (BLOCK LOOP FIXES)
   ========================================================================== */

/* Force the main shop area into a 3-column grid (Ultra Specific) */
body.archive.woocommerce-page .site-main ul.products,
body.search.woocommerce-page .site-main ul.products,
body.archive.woocommerce-page .site-main .gb-query-loop-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide invisible spacing blocks */
body.archive.woocommerce-page .site-main ul.products::before, 
body.archive.woocommerce-page .site-main ul.products::after {
    display: none !important;
}

/* ==========================================================================
   MODULE 2.3: MASTER CARD DESIGN (Synced with css-home.css)
   ========================================================================== */

/* 1. Base Card Structure */
body.archive.woocommerce-page .site-main ul.products li.product,
body.search.woocommerce-page .site-main ul.products li.product {
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 530px !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.archive.woocommerce-page .site-main ul.products li.product:hover {
    transform: translateY(-6px) !important; 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* 2. Absolute Positioning for Badges (Left) & Heart (Right) */
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-badges-anchor {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-wishlist-anchor {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 50 !important;
}

/* 3. Image Wrapper Formatting */
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-img-wrap {
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    margin-top: 25px !important; /* Extra space to clear the absolute badges */
    margin-bottom: 15px !important; 
    width: 100% !important;
    height: 180px !important;
}
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-img-wrap img {
    margin: 0 auto !important; 
    max-height: 100% !important; 
    width: auto !important;
    object-fit: contain !important;
}

/* 4. Title */
body.archive.woocommerce-page .site-main ul.products li.product .product-title-shop {
    text-align: center !important;
    margin: 0 0 15px 0 !important;
    width: 100% !important;
}
body.archive.woocommerce-page .site-main ul.products li.product .product-title-shop a {
    font-size: 16px !important; 
    font-weight: 800 !important; 
    color: #2c3e50 !important; 
    text-decoration: underline !important; 
    line-height: 1.4 !important; 
    min-height: 44px !important; 
    max-height: 44px !important; 
    display: -webkit-box !important; 
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important; 
    overflow: hidden !important; 
}

/* 5. Meta Row (Category Left & Stars Right) */
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-meta-row {
    display: flex !important; 
    flex-direction: row !important; /* Forces left/right split */
    justify-content: space-between !important; 
    align-items: center !important; 
    margin-bottom: 15px !important; 
    width: 100% !important;
}
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-category {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #767676 !important;
    text-transform: uppercase !important;
}

/* 5b. Fix the overlapping double-stars */
body.archive.woocommerce-page .site-main ul.products li.product .star-rating {
    font-size: 14px !important;
    color: #FFA200 !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    width: 5.4em !important;
}

/* 6. Price & Stock Row (Price Left, Stock Right) */
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-price-stock-row {
    display: flex !important; 
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important; 
    width: 100% !important; 
    margin-bottom: 15px !important; 
}
body.archive.woocommerce-page .site-main ul.products li.product .kh-home-price-stock-row .product-price-shop {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 !important; /* Kills any ghost margins on the price */
}
body.archive.woocommerce-page .site-main ul.products li.product .card-stock-badge {
    margin: 0 !important; /* Kills the orange ghost margin on the right! */
    flex-shrink: 0 !important;
}

/* ==========================================================================
   3. SIDEBAR & FILTERS
   ========================================================================== */

/* Widget Containers */
#left-sidebar .widget, .sidebar .widget { 
    background: #fff !important; border: 1px solid #f0f0f0 !important; border-radius: 16px !important; 
    padding: 25px 30px !important; margin-bottom: 30px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
}
#left-sidebar .widget-title, .sidebar .widget-title { 
    font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; 
    letter-spacing: 1.2px !important; margin-bottom: 20px !important; color: #222 !important; 
    display: block !important; border-bottom: 2px solid #f5f5f5 !important; padding-bottom: 12px !important;
}

/* Category List Styles */
#left-sidebar ul.product-categories, .widget_product_categories ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#left-sidebar ul.product-categories li, .widget_product_categories li { 
    display: flex !important; justify-content: space-between !important; align-items: center !important; 
    margin-bottom: 8px !important; padding: 8px 12px !important; border-radius: 8px !important; 
    transition: all 0.3s ease !important; background: transparent !important;
}
#left-sidebar ul.product-categories li a { color: #444 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; flex-grow: 1 !important; }
#left-sidebar ul.product-categories li .count { background: #f0f0f0 !important; color: #666 !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 20px !important; min-width: 32px !important; text-align: center !important; }

#left-sidebar ul.product-categories li:hover { background-color: #f9f9f9 !important; transform: translateX(4px) !important; }
#left-sidebar ul.product-categories li:hover a { color: #88B437 !important; }
#left-sidebar ul.product-categories li:hover .count { background: #88B437 !important; color: #fff !important; }

#left-sidebar ul.product-categories li.current-cat { background-color: #f4faeb !important; border-left: 3px solid #88B437 !important; border-radius: 0 8px 8px 0 !important; }
#left-sidebar ul.product-categories li.current-cat a { color: #88B437 !important; }
#left-sidebar ul.product-categories li.current-cat .count { background: #88B437 !important; color: #fff !important; }

/* Filter Price Slider */
.widget_price_filter .ui-slider-range { background: #88B437 !important; }
.widget_price_filter .ui-slider-handle { border: 2px solid #88B437 !important; background: #fff !important; }
.woocommerce .widget_price_filter .price_slider_amount .button { border-radius: 8px !important; background-color: #222 !important; color: #fff !important; font-weight: 800 !important; text-transform: uppercase !important; }
.woocommerce .widget_price_filter .price_slider_amount .button:hover { background-color: #88B437 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(136, 180, 55, 0.3) !important; }

/* SAFE SIDEBAR FIX: Hide specific duplicate product lists, DO NOT hide filters! */
#left-sidebar ul.product_list_widget,
.sidebar ul.product_list_widget {
    display: none !important;
}

/* ==========================================================================
   4. KEYHUB PRODUCT CARDS (GLOBAL)
   ========================================================================== */

/* Card Structure & Container */
.gb-query-loop-item .gb-container, .keyhub-card { 
    background: #ffffff !important; border: 1px solid #f0f0f0 !important; border-radius: 16px !important; 
    padding: 20px !important; display: flex !important; flex-direction: column !important; 
    min-height: 520px !important; position: relative !important; overflow: visible !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Card Hover Animations */
.gb-query-loop-item .gb-container:hover, .keyhub-card:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important; border-color: #e4e4e4 !important; }

/* Card Top Row (Badges & Stars Alignment) */
.gb-query-loop-item .gb-container .wp-block-group:has(.card-stock-badge),
.gb-query-loop-item .gb-container .wp-block-group:has(.review-icon-shop) {
    display: flex !important; flex-direction: row !important; justify-content: space-between !important; 
    align-items: center !important; width: 100% !important; margin-bottom: 12px !important; flex-wrap: nowrap !important;
}

/* Dynamic Badges (Hot, Sale, New) */
.kh-product-badges {
    position: absolute !important;
    top: 32px !important;
    left: 8px !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    pointer-events: none !important;
}

.kh-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
}

.kh-hot { background-color: #c0392b !important; }
.kh-sale { background-color: #b34700 !important; }
.kh-new { background-color: #1565c0 !important; }

/* Stock Badges */
.card-stock-badge {
    background-color: #e8f5e9 !important; color: #2e7d32 !important; padding: 4px 10px !important;
    border-radius: 4px !important; font-size: 10px !important; text-transform: uppercase !important;
    font-weight: 800 !important; order: 1 !important; margin-right: auto !important; width: auto !important; flex-shrink: 0 !important;
}
.gb-query-loop-item .card-stock-badge:not([href]) { white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 8px !important; margin-left: auto !important; width: max-content !important; min-width: 0 !important; flex-shrink: 0 !important; font-size: 10px !important; font-weight: 800 !important; border-radius: 4px !important; text-transform: uppercase !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; }
.gb-query-loop-item .card-stock-badge.in-stock { background-color: #e8f5e9 !important; color: #2e7d32 !important; }
.gb-query-loop-item .card-stock-badge.out-of-stock { background-color: #ffebee !important; color: #c62828 !important; }
.gb-query-loop-item .card-stock-badge.contact-support { background-color: #e3f2fd !important; color: #1565c0 !important; }

/* Star Rating System */
.review-icon-shop { order: 2 !important; display: flex !important; align-items: center !important; margin-left: auto !important; flex-shrink: 0 !important; }
.keyhub-star-link { display: inline-flex !important; text-decoration: none !important; transition: transform 0.2s ease !important; opacity: 1 !important; }
.keyhub-star-link:hover { transform: scale(1.05) !important; opacity: 1 !important; }
.keyhub-star-link .star-rating { 
    font-family: 'star' !important; font-size: 16px !important; width: 6.5em !important; height: 1.2em !important;
    position: relative !important; display: inline-block !important; margin: 0 !important; line-height: 1 !important;
    overflow: hidden !important; letter-spacing: 3px !important;
}
.keyhub-star-link .star-rating::before { content: '\73\73\73\73\73' !important; color: #e0e0e0 !important; opacity: 0.5 !important; position: absolute !important; top: 0 !important; left: 0 !important; letter-spacing: 3px !important; }
.keyhub-star-link .star-rating span { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; overflow: hidden !important; padding-top: 1.5em !important; }
.keyhub-star-link .star-rating span::before { content: '\53\53\53\53\53' !important; color: #FFA200 !important; position: absolute !important; top: 0 !important; left: 0 !important; letter-spacing: 3px !important; }
.review-icon-shop .text, .review-icon-shop .count, .review-icon-shop .cr-review-link, .review-icon-shop .woocommerce-review-link { display: none !important; }

/* Titles & Tooltips */
.keyhub-title-fix a, .product-title-shop a { font-size: 16px !important; font-weight: 800 !important; color: #2c3e50 !important; line-height: 1.4 !important; min-height: 44px !important; max-height: 44px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

.keyhub-custom-tooltip {
    position: absolute !important; background: rgba(34, 34, 34, 0.98) !important; color: #ffffff !important; padding: 10px 15px !important; border-radius: 6px !important; font-size: 13px !important; z-index: 99999 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important; pointer-events: none !important; display: none; max-width: 280px !important; width: max-content !important; line-height: 1.4 !important; text-align: center !important; transform: translate(-50%, -100%) !important; margin-top: -25px !important; 
}
.keyhub-custom-tooltip::after {
    content: "" !important; position: absolute !important; top: 100% !important; left: 50% !important; margin-left: -6px !important; border-width: 6px !important; border-style: solid !important; border-color: #222 transparent transparent transparent !important;
}

/* Price Row */
.keyhub-price-row { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; width: 100% !important; gap: 10px !important; margin-top: auto !important; padding: 15px 0 20px 0 !important; }
.product-price-shop { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap !important; color: #4f7a14 !important; }
.product-price-shop ins, .product-price-shop > .amount, .product-price-shop ins .amount, .product-price-shop bdi { color: #4f7a14 !important; text-decoration: none !important; font-weight: 800 !important; font-size: 19px !important; line-height: 1 !important; }
.product-price-shop del, .product-price-shop del .amount, .product-price-shop del bdi { color: #767676 !important; font-size: 11px !important; font-weight: 400 !important; text-decoration: line-through !important; order: 2 !important; }

/* Buttons & Actions */
.gb-button-wrapper { width: 100% !important; display: block !important; }
a.loop-add-btn, a.loop-buy-btn { width: 100% !important; display: block !important; text-align: center !important; padding: 12px 0 !important; border-radius: 8px !important; font-weight: 800 !important; text-transform: uppercase !important; margin-bottom: 10px !important; transition: all 0.3s ease !important; }
a.loop-add-btn { background: #222 !important; color: #fff !important; }
a.loop-buy-btn { background: #4f7a14 !important; color: #ffffff !important; }

a.loop-add-btn:hover, a.loop-buy-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important; }
a.loop-add-btn:hover { background: #3b3b3b !important; }
a.loop-buy-btn:hover { background: #769e2f !important; }
a.loop-add-btn:active, a.loop-buy-btn:active { transform: translateY(1px) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; }

/* Out of Stock Grey-Out Logic */
a.loop-buy-btn[href="#out-of-stock"],
a.loop-add-btn[href="#out-of-stock"],
.gb-button-wrapper a[href="#out-of-stock"] {
    background-color: #cccccc !important;
    color: #888888 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   5. WISHLIST SYSTEM
   ========================================================================== */

.custom-wishlist-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 30px !important; width: 100% !important; margin-top: 20px; align-items: stretch !important; }
.wishlist-controls { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.wishlist-clear-btn { background: transparent; color: #e74c3c; border: 2px solid #e74c3c; padding: 8px 24px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 13px; text-transform: uppercase; }
.wishlist-clear-btn:hover { background: #e74c3c; color: #fff; }

/* Wishlist Card Imagery */
.keyhub-card-header { position: relative; width: 100%; height: 200px; margin-bottom: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wishlist-img-link { display: block; width: 100%; height: 100%; }
.wishlist-img-link img, .keyhub-card img { height: 100% !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; display: block; margin: 0 auto; }

/* Wishlist specific removals */
.wishlist-remove-icon { position: absolute; top: 0; right: 0; width: 32px; height: 32px; background: transparent !important; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: transform 0.2s; }
.wishlist-remove-icon:hover { transform: scale(1.2); }

/* Wishlist Text & Data Elements */
.keyhub-card-body { display: flex; flex-direction: column; flex-grow: 1; width: 100%; }
.wishlist-title-wrapper { width: 100%; margin-bottom: 10px; position: relative; text-align: left; }
.wishlist-title { font-size: 16px; font-weight: 800; color: #2c3e50; text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; }
.wishlist-tooltip-text { visibility: hidden; opacity: 0; width: 240px; background: #2c3e50; color: #fff; text-align: center; border-radius: 8px; padding: 10px; font-size: 13px; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); pointer-events: none; transition: opacity 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.wishlist-title-wrapper:hover .wishlist-tooltip-text { visibility: visible; opacity: 1; }

.wishlist-split-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 8px; }
.wishlist-cat-link { font-size: 11px; text-transform: uppercase; color: #999; font-weight: 700; text-decoration: none; transition: color 0.2s; }
.wishlist-cat-link:hover { color: #88B437; text-decoration: underline; }

.wishlist-price { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 18px; }
.wishlist-price ins { order: 1; color: #88B437 !important; text-decoration: none; font-size: 20px; background: transparent; }
.wishlist-price del { order: 2; color: #ccc !important; font-size: 13px; font-weight: 400; text-decoration: line-through; }

.wishlist-stock-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }

/* Actions */
.wishlist-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.remove-text-btn { background: transparent !important; border: none !important; color: #e74c3c !important; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; margin: 0 auto; display: block; padding: 0 !important; }
.remove-text-btn:hover { color: #c0392b !important; background: transparent !important; }

/* ==========================================================================
   6. WOOCOMMERCE NOTICES (SUCCESS & ERROR) FIXES
   ========================================================================== */

/* Notice Container Fixes */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    position: relative !important; 
    display: flex !important;
    align-items: center !important; 
    padding: 20px 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-message { padding-right: 50px !important; }
.woocommerce-error, .woocommerce-info { justify-content: center !important; }
.woocommerce-error li, .woocommerce-info li {
    margin: 0 !important; padding: 0 !important; list-style: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; 
    gap: 15px !important; width: 100% !important; text-align: center !important;
}

/* Kill Native Clearfix */
.woocommerce-message::before, .woocommerce-message::after,
.woocommerce-error::before, .woocommerce-error::after,
.woocommerce-info::before, .woocommerce-info::after { display: none !important; }

/* Notice Inner Wrapper & Content */
.modern-notice-wrapper { display: flex !important; width: 100% !important; }
.modern-notice-content { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; width: 100% !important; margin: 0 !important; }
.modern-notice-text { font-size: 14px !important; font-weight: 600 !important; color: #333 !important; line-height: 1.4 !important; }

/* Button Row */
.modern-notice-actions { display: flex !important; gap: 12px !important; align-items: center !important; }
.modern-view-cart-btn { background-color: #8db73b !important; color: #fff !important; padding: 8px 18px !important; border-radius: 4px !important; font-weight: 800 !important; font-size: 13px !important; border: none !important; text-decoration: none !important; }
.modern-continue-btn { background-color: #f1f1f1 !important; color: #555 !important; padding: 8px 18px !important; border-radius: 4px !important; font-weight: 800 !important; font-size: 13px !important; border: 1px solid #ddd !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.modern-continue-btn:hover { background-color: #e2e2e2 !important; color: #222 !important; }

/* The 'X' Close Icon */
.modern-notice-close-icon {
    position: absolute !important; top: 15px !important; right: 20px !important;
    font-size: 26px !important; line-height: 1 !important; color: #999 !important;
    cursor: pointer !important; padding: 0 !important; margin: 0 !important; 
    display: block !important; transition: color 0.2s ease !important;
}
.modern-notice-close-icon:hover { color: #e74c3c !important; }

/* Clean Empty Wrappers */
.woocommerce-notices-wrapper:empty { display: none !important; margin: 0 !important; padding: 0 !important; }

/* ==========================================================================
   7. MOBILE & RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet Grid */
@media (max-width: 1024px) {
    html body .gb-query-loop-item .gb-container, 
    html body .keyhub-card { 
        padding: 15px !important; 
        min-height: auto !important; 
    }
    body.archive.woocommerce-page .site-main ul.products,
    body.archive.woocommerce-page .site-main .gb-query-loop-wrapper { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

/* Hide toggle button on desktop */
.keyhub-mobile-filter-btn { display: none !important; }

/* Phone Adjustments */
@media (max-width: 767px) {
    body.archive.woocommerce-page .site-main ul.products,
    body.archive.woocommerce-page .site-main .gb-query-loop-wrapper { 
        grid-template-columns: 1fr !important; 
    }
    
    html body .site-content { display: flex !important; flex-direction: column !important; }
    html body .keyhub-mobile-filter-btn { order: 1 !important; }
    html body #left-sidebar, html body .sidebar { order: 2 !important; display: none !important; width: 100% !important; margin-bottom: 20px !important; }
    html body #primary { order: 3 !important; }
    
    /* Mobile Filter Toggle Button */
    .keyhub-mobile-filter-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; background-color: #222 !important; color: #fff !important; padding: 14px 20px !important; border: none !important; border-radius: 8px !important; font-weight: 800 !important; text-transform: uppercase !important; margin-bottom: 20px !important; cursor: pointer !important; }
    .keyhub-mobile-filter-btn.active-btn { background-color: #88B437 !important; }
    html body #left-sidebar.is-open, html body .sidebar.is-open { display: block !important; animation: filterSlideDown 0.3s ease forwards !important; }

    /* Fix Element Scaling on Mobile */
    html body .keyhub-title-fix a, html body .product-title-shop a { font-size: 15px !important; min-height: 40px !important; }
    html body .woocommerce nav.woocommerce-pagination ul, html body .woocommerce-pagination ul.page-numbers { gap: 8px !important; }
    html body .woocommerce-pagination ul.page-numbers li a, html body .woocommerce-pagination ul.page-numbers li span { width: 38px !important; height: 38px !important; font-size: 14px !important; }
    html body #left-sidebar .widget, html body .sidebar .widget { padding: 20px 15px !important; border-radius: 12px !important; }
}

@keyframes filterSlideDown { 
    from { opacity: 0; transform: translateY(-10px); } 
    to { opacity: 1; transform: translateY(0); } 
}