/* =====================================================
 LOVABLE DESIGN INTEGRATION - PREMIUM AC REDESIGN
 ===================================================== */

/* =====================================================
 1. CSS VARIABLES & DESIGN TOKENS
 ===================================================== */
:root{
 /* Primary Colors - Bright Cyan Blue */
 --primary: 195 100% 50%;
 --primary-light: 195 100% 85%;
 --primary-dark: 195 100% 35%;
 --accent: 185 85% 50%;
 
 /* Neutral Colors */
 --background: 210 25% 98%;
 --foreground: 210 40% 8%;
 --card: 0 0% 100%;
 --muted: 210 25% 95%;
 --muted-foreground: 210 20% 45%;
 --border: 214.3 31.8% 91.4%;
 
 /* Semantic Colors */
 --destructive: 0 84.2% 60.2%;
 --success: 142 76% 36%;
 
 /* Radius System */
 --radius: 0.75rem;
 --radius-lg: 0.75rem;
 --radius-md: 0.625rem;
 --radius-sm: 0.5rem;
 
 /* Gradients */
 --gradient-cooling: linear-gradient(135deg,hsl(195 100% 50%),hsl(185 85% 50%));
 --gradient-card: linear-gradient(145deg,hsl(0 0% 100%),hsl(210 25% 98%));
 --gradient-premium: linear-gradient(135deg,hsl(195 100% 50% / 0.1),transparent);
 
 /* Shadows */
 --shadow-elegant: 0 20px 40px -10px hsl(210 40% 8% / 0.1);
 --shadow-cool: 0 10px 30px -10px hsl(195 100% 50% / 0.2);
 --shadow-hover: 0 10px 30px -10px hsl(195 100% 50% / 0.3);
 --shadow-card: 0 4px 20px -4px hsl(210 40% 8% / 0.08);
 
 /* Transitions */
 --transition-base: all 0.3s cubic-bezier(0.4,0,0.2,1);
 --transition-fast: all 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* =====================================================
 2. GLOBAL STYLES & RESET
 ===================================================== */
body{
 background: hsl(var(--background)) !important;
 color: hsl(var(--foreground)) !important;
 font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu',sans-serif !important;
 -webkit-font-smoothing: antialiased !important;
 -moz-osx-font-smoothing: grayscale !important;
}

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
 3. CONTAINER & LAYOUT
 ===================================================== */
.container{
 max-width: 1400px !important;
 margin: 0 auto !important;
 padding: 0 2rem !important;
}

/* Main Grid Layout */
.category-page-content{
 display: grid !important;
 grid-template-columns: 1fr !important;
 gap: 12px !important;
 margin-top: 2rem !important;
}

@media (min-width: 1024px){
 .category-page-content{
 grid-template-columns: 260px 1040px !important; width: 1312px !important; margin-left: -35px !important;
}
}

/* =====================================================
 4. SIDEBAR FILTERS - LOVABLE STYLE
 ===================================================== */
.filters-sidebar{
 background: var(--gradient-card) !important;
 box-shadow: var(--shadow-elegant) !important;
 border-radius: var(--radius-lg) !important;
 padding: 1.5rem !important;
 position: relative !important; height: fit-content !important;
 border: 1px solid hsl(var(--border) / 0.5) !important;
}

.filters-sidebar h3{
 font-size: 1.125rem !important;
 font-weight: 600 !important;
 color: hsl(var(--foreground)) !important;
 margin-bottom: 1rem !important;
 position: relative !important;
 padding-bottom: 0.75rem !important;
 background: none !important;
 -webkit-text-fill-color: hsl(var(--foreground)) !important;
}

.filters-sidebar h3::after{
 content: '' !important;
 position: absolute !important;
 bottom: 0 !important;
 left: 0 !important;
 width: 40px !important;
 height: 3px !important;
 background: var(--gradient-cooling) !important;
 border-radius: 2px !important;
}

/* Filter Section */
.filter-section{
 margin-bottom: 1.5rem !important;
 padding: 0.5rem !important;
 border-radius: var(--radius-sm) !important;
 transition: var(--transition-fast) !important;
}

.filter-section:hover{
 background: hsl(var(--muted) / 0.5) !important;
}

/* Filter Items */
.filter-item{
 display: flex !important;
 align-items: center !important;
 margin-bottom: 0.5rem !important;
 padding: 0.25rem 0 !important;
}

.filter-item input[type="checkbox"]{
 margin-right: 0.5rem !important;
}

.filter-item label{
 flex: 1 !important;
 cursor: pointer !important;
 font-size: 0.875rem !important;
 color: hsl(var(--foreground)) !important;
 background: none !important;
 -webkit-text-fill-color: hsl(var(--foreground)) !important;
}

.filter-count{
 color: hsl(var(--muted-foreground)) !important;
 font-size: 0.75rem !important;
 margin-left: 0.25rem !important;
}

/* Checkboxes */
.filters-sidebar input[type="checkbox"]{
 width: 1.125rem !important;
 height: 1.125rem !important;
 border-radius: 4px !important;
 border: 2px solid hsl(var(--border)) !important;
 background: white !important;
 cursor: pointer !important;
 transition: var(--transition-fast) !important;
 margin-right: 0.5rem !important;
}

.filters-sidebar input[type="checkbox"]:checked{
 background: var(--gradient-cooling) !important;
 border-color: hsl(var(--primary)) !important;
}

.filters-sidebar label{
 display: flex !important;
 align-items: center !important;
 cursor: pointer !important;
 font-size: 0.875rem !important;
 color: hsl(var(--foreground)) !important;
 padding: 0.5rem 0 !important;
 transition: var(--transition-fast) !important;
 background: none !important;
 -webkit-text-fill-color: hsl(var(--foreground)) !important;
}

.filters-sidebar label:hover{
 color: hsl(var(--primary)) !important;
 -webkit-text-fill-color: hsl(var(--primary)) !important;
}

/* Price Range Slider */
.price-slider-container{
 padding: 2rem 0 1rem !important;
}

.price-display{
 display: flex !important;
 justify-content: space-between !important;
 margin-bottom: 1.5rem !important;
 font-weight: 600 !important;
 color: hsl(var(--foreground)) !important;
 font-size: 0.875rem !important;
 padding: 0.75rem !important;
 background: hsl(var(--muted) / 0.3) !important;
 border-radius: var(--radius-sm) !important;
}

.price-separator{
 color: hsl(var(--muted-foreground)) !important;
}

.price-slider-track{
 position: relative !important;
 height: 6px !important;
 margin: 2.5rem 0 !important;
}

.price-slider-bg{
 position: absolute !important;
 width: 100% !important;
 height: 6px !important;
 background: hsl(var(--muted)) !important;
 border-radius: 3px !important;
}

#priceProgress{
 position: absolute !important;
 background: var(--gradient-cooling) !important;
 height: 6px !important;
 border-radius: 3px !important;
 box-shadow: var(--shadow-cool) !important;
 left: 0% !important;
 right: 0% !important;
}

.price-control{
 position: absolute !important;
 width: 20px !important;
 height: 20px !important;
 background: white !important;
 border: 3px solid hsl(var(--primary)) !important;
 border-radius: 50% !important;
 cursor: pointer !important;
 box-shadow: var(--shadow-card) !important;
 transition: var(--transition-fast) !important;
 top: -7px !important;
 z-index: 2 !important;
}

#minControl{
 left: 0% !important;
}

#maxControl{
 right: 0% !important;
}

.price-control:hover{
 transform: scale(1.2) !important;
 box-shadow: var(--shadow-cool) !important;
}

.price-tooltip{
 position: absolute !important;
 top: -35px !important;
 background: white !important;
 padding: 0.25rem 0.5rem !important;
 border-radius: var(--radius-sm) !important;
 font-size: 0.75rem !important;
 white-space: nowrap !important;
 box-shadow: var(--shadow-card) !important;
 pointer-events: none !important;
}

#minControl .price-tooltip{
 left: -25px !important;
}

#maxControl .price-tooltip{
 right: -25px !important;
}

/* =====================================================
 5. PRODUCT GRID
 ===================================================== */
.products-new-section{
 width: 100% !important;
}

.products-grid{
 display: grid !important;
 gap: 1.5rem !important;
 grid-template-columns: repeat(auto-fill,minmax(300px,1fr)) !important;
}

@media (min-width: 768px){
 .products-grid{
 grid-template-columns: repeat(2,1fr) !important;
}
}

@media (min-width: 1280px){
 .products-grid{
 grid-template-columns: repeat(3,1fr) !important;
}
}

/* =====================================================
 6. PRODUCT CARD - LOVABLE STYLE
 ===================================================== */
.product-card{
 background: var(--gradient-card) !important;
 box-shadow: var(--shadow-elegant) !important;
 border-radius: var(--radius-lg) !important;
 overflow: hidden !important;
 transition: var(--transition-base) !important;
 position: relative !important;
 height: 100% !important;
 display: flex !important;
 flex-direction: column !important;
 border: none !important;
 animation: fadeIn 0.6s ease-out !important;
}

.product-card:hover{
 box-shadow: var(--shadow-hover) !important;
 transform: translateY(-8px) !important;
}

/* Staggered Animation */
.product-card:nth-child(1){animation-delay: 0.1s !important;}
.product-card:nth-child(2){animation-delay: 0.2s !important;}
.product-card:nth-child(3){animation-delay: 0.3s !important;}
.product-card:nth-child(4){animation-delay: 0.4s !important;}
.product-card:nth-child(5){animation-delay: 0.5s !important;}
.product-card:nth-child(6){animation-delay: 0.6s !important;}

/* Product Image Container */
.product-card .product-image{
 position: relative !important;
 width: 100% !important;
 height: 256px !important;
 overflow: hidden !important;
 background: white !important;
 border-radius: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
}

.product-card .product-image::before,
.product-card .product-image::after{
 display: none !important;
}

.product-card .product-image img{
 width: 100% !important;
 height: 100% !important;
 object-fit: contain !important;
 padding: 1rem !important;
 transition: var(--transition-base) !important;
 filter: none !important;
 opacity: 1 !important;
}

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

/* Quick Actions Overlay */
.product-card .product-image .quick-actions{
 position: absolute !important;
 bottom: 1rem !important;
 left: 1rem !important;
 right: 1rem !important;
 display: flex !important;
 gap: 0.5rem !important;
 opacity: 0 !important;
 transform: translateY(16px) !important;
 transition: var(--transition-base) !important;
 z-index: 10 !important;
}

.product-card:hover .quick-actions{
 opacity: 1 !important;
 transform: translateY(0) !important;
}

/* Discount Badge */
.product-card .discount-badge{
 display: none !important;/* Hidden per user request */
}

/* Stock Badge */
.product-card .stock-badge{
 position: absolute !important;
 top: 0.75rem !important;
 left: 0.75rem !important;
 background: hsl(var(--success)) !important;
 color: white !important;
 padding: 0.25rem 0.75rem !important;
 border-radius: var(--radius-sm) !important;
 font-size: 0.75rem !important;
 font-weight: 500 !important;
 z-index: 10 !important;
}

/* Product Info Section */
.product-card .product-info{
 padding: 1.5rem !important;
 flex: 1 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 1rem !important;
}

/* Product Header */
.product-card .product-header{
 display: flex !important;
 justify-content: space-between !important;
 align-items: flex-start !important;
 gap: 0.5rem !important;
 margin-bottom: 0.5rem !important;
}

/* Product Name */
.product-card .product-name{
 font-size: 1.125rem !important;
 font-weight: 600 !important;
 color: hsl(var(--foreground)) !important;
 line-height: 1.4 !important;
 margin: 0 0 0.25rem 0 !important;
}

.product-card .product-name a{
 color: inherit !important;
 text-decoration: none !important;
 display: block !important;
 word-wrap: break-word !important;
}

.product-card .product-name a:hover{
 color: hsl(var(--primary)) !important;
}

/* Brand Name */
.product-card .brand-name{
 font-size: 0.875rem !important;
 color: hsl(var(--muted-foreground)) !important;
 font-weight: 500 !important;
 margin: 0 !important;
}

/* Product Features */
.product-card .product-features{
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 0.5rem !important;
 margin: 0.5rem 0 !important;
}

.product-card .feature-tag{
 background: hsl(var(--muted)) !important;
 color: hsl(var(--muted-foreground)) !important;
 padding: 0.375rem 0.625rem !important;
 border-radius: var(--radius-sm) !important;
 font-size: 0.8125rem !important;
 font-weight: 500 !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 0.25rem !important;
}

.product-card .icon-snow{
 width: 14px !important;
 height: 14px !important;
 stroke: hsl(var(--primary)) !important;
}

/* Efficiency Badge */
.product-card .efficiency-badge{
 display: inline-flex !important;
 align-items: center !important;
 background: var(--gradient-premium) !important;
 border: 1px solid hsl(var(--primary) / 0.2) !important;
 color: hsl(var(--primary)) !important;
 padding: 0.25rem 0.5rem !important;
 border-radius: var(--radius-sm) !important;
 font-size: 0.75rem !important;
 font-weight: 600 !important;
 margin-left: 0.5rem !important;
}

/* Rating Section */
.product-card .rating-section{
 display: flex !important;
 align-items: center !important;
 gap: 0.5rem !important;
 margin: 0.75rem 0 !important;
}

.product-card .stars{
 display: flex !important;
 gap: 2px !important;
}

.product-card .star{
 width: 16px !important;
 height: 16px !important;
}

.product-card .star.filled{
 fill: #fbbf24 !important;
 color: #fbbf24 !important;
}

.product-card .star.empty{
 fill: hsl(var(--muted)) !important;
 color: hsl(var(--muted)) !important;
}

.product-card .review-count{
 font-size: 0.8125rem !important;
 color: hsl(var(--muted-foreground)) !important;
}

/* Features List */
.product-card .features-list{
 margin: 0.75rem 0 !important;
 padding: 0 !important;
 list-style: none !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 0.5rem !important;
}

.product-card .features-list li{
 font-size: 0.8125rem !important;
 color: hsl(var(--muted-foreground)) !important;
 display: flex !important;
 align-items: center !important;
 position: relative !important;
 padding-left: 1rem !important;
}

.product-card .features-list li::before{
 content: '•' !important;
 position: absolute !important;
 left: 0 !important;
 color: hsl(var(--primary)) !important;
 font-weight: bold !important;
}

/* Price Section */
.product-card .price-section{
 margin-top: auto !important;
 padding-top: 1rem !important;
 border-top: 1px solid hsl(var(--border)) !important;
}

.product-card .product-price{
 display: flex !important;
 align-items: baseline !important;
 gap: 0.75rem !important;
 margin-bottom: 0.25rem !important;
 background: none !important;
 -webkit-text-fill-color: unset !important;
}

.product-card .price-current{
 font-size: 1.5rem !important;
 font-weight: 700 !important;
 color: hsl(var(--foreground)) !important;
 background: none !important;
 -webkit-text-fill-color: hsl(var(--foreground)) !important;
}

.product-card .price-old{
 font-size: 1rem !important;
 color: hsl(var(--muted-foreground)) !important;
 text-decoration: line-through !important;
}

.product-card .price-info{
 font-size: 0.75rem !important;
 color: hsl(var(--muted-foreground)) !important;
 margin-bottom: 0.75rem !important;
}

/* Add to Cart Button */
.product-card .btn-add-to-cart{
 width: 100% !important;
 background: var(--gradient-cooling) !important;
 color: white !important;
 border: none !important;
 border-radius: var(--radius-sm) !important;
 padding: 0.75rem 1.5rem !important;
 font-size: 0.875rem !important;
 font-weight: 600 !important;
 cursor: pointer !important;
 transition: var(--transition-base) !important;
 text-transform: uppercase !important;
 letter-spacing: 0.5px !important;
 box-shadow: var(--shadow-card) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 0.5rem !important;
 box-sizing: border-box !important;
 margin: 0 !important;
}

.product-card .btn-add-to-cart:hover:not(:disabled){
 transform: translateY(-2px) !important;
 box-shadow: var(--shadow-cool) !important;
}

.product-card .btn-add-to-cart:active{
 transform: translateY(0) !important;
}

.product-card .btn-add-to-cart:disabled{
 background: hsl(var(--muted)) !important;
 cursor: not-allowed !important;
 opacity: 0.6 !important;
}

/* Cart Icon in Button */
.product-card .cart-icon{
 width: 18px !important;
 height: 18px !important;
 stroke: currentColor !important;
 fill: none !important;
}

/* Quick Actions */
.product-card .quick-actions{
 position: absolute !important;
 bottom: 1rem !important;
 left: 1rem !important;
 right: 1rem !important;
 display: flex !important;
 gap: 0.5rem !important;
 opacity: 0 !important;
 transform: translateY(16px) !important;
 transition: var(--transition-base) !important;
 z-index: 10 !important;
}

.product-card:hover .quick-actions{
 opacity: 1 !important;
 transform: translateY(0) !important;
}

.product-card .btn-quick-view{
 flex: 1 !important;
 background: white !important;
 color: hsl(var(--foreground)) !important;
 border: 1px solid hsl(var(--border)) !important;
 border-radius: var(--radius-sm) !important;
 padding: 0.5rem 1rem !important;
 font-size: 0.875rem !important;
 font-weight: 500 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 0.5rem !important;
 text-decoration: none !important;
 transition: var(--transition-fast) !important;
}

.product-card .btn-quick-view:hover{
 background: hsl(var(--primary)) !important;
 color: white !important;
 border-color: hsl(var(--primary)) !important;
}

.product-card .icon-eye{
 width: 16px !important;
 height: 16px !important;
}

/* Stock Badge Variants */
.product-card .stock-badge.supplier{
 background: hsl(45 100% 51%) !important;
}

.product-card .stock-badge.out{
 background: hsl(var(--muted)) !important;
 color: hsl(var(--muted-foreground)) !important;
}

/* =====================================================
 7. ANIMATIONS
 ===================================================== */
@keyframes fadeIn{
 from{
 opacity: 0;
 transform: translateY(20px);
}
 to{
 opacity: 1;
 transform: translateY(0);
}
}

@keyframes slideIn{
 from{
 opacity: 0;
 transform: translateX(-20px);
}
 to{
 opacity: 1;
 transform: translateX(0);
}
}

@keyframes pulse{
 0%,100%{
 opacity: 1;
}
 50%{
 opacity: 0.8;
}
}

/* Loading Animation */
.product-card.loading{
 animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite !important;
}

/* =====================================================
 8. RESPONSIVE ADJUSTMENTS
 ===================================================== */
@media (max-width: 1024px){
 .filters-sidebar{
 position: relative !important;
 top: 0 !important;
 margin-bottom: 2rem !important;
}
 
 .category-page-content{
 grid-template-columns: 1fr !important;
}
}

/* Mobile styles moved to mobile-product-cards.css - DO NOT override here */
@media (max-width: 768px){
 /* Filters sidebar mobile adjustments only */
 .filters-sidebar{
 position: relative !important;
 top: 0 !important;
 margin-bottom: 2rem !important;
}

 .category-page-content{
 grid-template-columns: 1fr !important;
}
}

/* =====================================================
 9. UTILITY CLASSES
 ===================================================== */
.text-primary{
 color: hsl(var(--primary)) !important;
}

.text-muted{
 color: hsl(var(--muted-foreground)) !important;
}

.bg-gradient-cooling{
 background: var(--gradient-cooling) !important;
}

.shadow-elegant{
 box-shadow: var(--shadow-elegant) !important;
}

.shadow-cool{
 box-shadow: var(--shadow-cool) !important;
}

.rounded-lg{
 border-radius: var(--radius-lg) !important;
}

.transition-all{
 transition: var(--transition-base) !important;
}

/* =====================================================
 10. OVERRIDE OLD STYLES
 ===================================================== */
/* Remove all old gradients and borders */
.container section.products-new-section .products-grid .product-card div.product-image,
.container section.products-new-section div.product-card div.product-image{
 background: white !important;
 background-image: none !important;
 border: none !important;
}

/* Remove all pseudo-elements */
.container section.products-new-section .products-grid .product-card::before,
.container section.products-new-section .products-grid .product-card::after,
.container section.products-new-section .products-grid .product-card div.product-image::before,
.container section.products-new-section .products-grid .product-card div.product-image::after{
 display: none !important;
 content: none !important;
}

/* Reset all text fills */
.container section.products-new-section .products-grid .product-card *,
.filters-sidebar *{
 -webkit-background-clip: unset !important;
 background-clip: unset !important;
}