/** * WINTER SALE Campaign Styles - Galaxy/Space Theme * Based on the teaser page design * Dark space background with neon effects */ /* ========================================================================== CRITICAL: Prevent Horizontal Scroll ========================================================================== */ body.page-layout-winter-sale, body.category-winter-sale { overflow-x: hidden !important; } html { overflow-x: hidden !important; } /* ========================================================================== CRITICAL: Hide Filters Immediately (Prevent CLS) ========================================================================== */ /* Hide all filter elements immediately on winter-sale pages to prevent layout shift */ body.page-layout-winter-sale .sidebar-main, body.page-layout-winter-sale .sidebar.sidebar-main, body.page-layout-winter-sale [role="region"][aria-label*="filter"], body.page-layout-winter-sale [role="region"][aria-label*="Filter"], body.page-layout-winter-sale [role="region"][aria-label*="Filtre"], body.page-layout-winter-sale .filter-options, body.page-layout-winter-sale .block.filter, body.page-layout-winter-sale #layered-filter-block, body.page-layout-winter-sale .catalog-topnav, body.page-layout-winter-sale aside.sidebar, body.category-winter-sale .sidebar-main, body.category-winter-sale .sidebar.sidebar-main, body.category-winter-sale [role="region"][aria-label*="filter"], body.category-winter-sale [role="region"][aria-label*="Filter"], body.category-winter-sale [role="region"][aria-label*="Filtre"], body.category-winter-sale .filter-options, body.category-winter-sale .block.filter, body.category-winter-sale #layered-filter-block, body.category-winter-sale .catalog-topnav, body.category-winter-sale aside.sidebar { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== Page-Wide GALAXY/SPACE Background ========================================================================== */ /* Apply WINTER BLUE gradient background - Icy & Frozen */ body.category-winter-sale, body.page-layout-winter-sale { background: /* Top aurora glow - STRONG CYAN */ radial-gradient(ellipse 100% 50% at 50% 0%, rgba(14, 165, 233, 0.4) 0%, transparent 70%), /* Center ice glow - LEFT */ radial-gradient(ellipse 70% 80% at 20% 50%, rgba(56, 189, 248, 0.25) 0%, transparent 60%), /* Center ice glow - RIGHT */ radial-gradient(ellipse 70% 80% at 80% 50%, rgba(6, 182, 212, 0.2) 0%, transparent 60%), /* Bottom frozen glow */ radial-gradient(ellipse 100% 40% at 50% 100%, rgba(14, 165, 233, 0.3) 0%, transparent 70%), /* WINTER BLUE GRADIENT - Mai albastru, mai frozen */ linear-gradient(180deg, #0c4a6e 0%, /* Sky-900 - Deep winter blue */ #075985 15%, /* Sky-800 */ #0369a1 30%, /* Sky-700 */ #0c4a6e 50%, /* Sky-900 */ #082f49 70%, /* Sky-950 */ #0a1929 85%, /* Very dark blue */ #000811 100% /* Almost black but blue tint */ ) !important; background-attachment: fixed !important; min-height: 100vh; } /* Full width page */ body.category-winter-sale .page-wrapper, body.page-layout-winter-sale .page-wrapper { max-width: 100% !important; background: transparent !important; } body.category-winter-sale main, body.page-layout-winter-sale main { background: transparent !important; } /* Remove all grey/default backgrounds */ body.category-winter-sale .main-content, body.category-winter-sale .page-main, body.category-winter-sale .columns, body.category-winter-sale .column.main, body.category-winter-sale .category-view, body.category-winter-sale .products.wrapper, body.category-winter-sale .toolbar-products, body.category-winter-sale .category-products, body.page-layout-winter-sale .main-content, body.page-layout-winter-sale .page-main, body.page-layout-winter-sale .columns, body.page-layout-winter-sale .column.main, body.page-layout-winter-sale .category-view, body.page-layout-winter-sale .products.wrapper, body.page-layout-winter-sale .toolbar-products, body.page-layout-winter-sale .category-products { background: transparent !important; } /* Ensure containers don't have grey backgrounds */ body.category-winter-sale div[class*="container"], body.category-winter-sale div[class*="wrapper"]:not(.product-item-info):not(.product-wrapper), body.page-layout-winter-sale div[class*="container"], body.page-layout-winter-sale div[class*="wrapper"]:not(.product-item-info):not(.product-wrapper) { background: transparent !important; } /* ELIMINATE WHITE/GRAY/GREEN BANDS - Force all elements to transparent */ body.page-layout-winter-sale .page-wrapper > *, body.page-layout-winter-sale .page-main, body.page-layout-winter-sale .page-bottom, body.page-layout-winter-sale main, body.page-layout-winter-sale main > *, body.category-winter-sale .page-wrapper > *, body.category-winter-sale .page-main, body.category-winter-sale .page-bottom, body.category-winter-sale main, body.category-winter-sale main > * { background: transparent !important; background-color: transparent !important; padding: 0 !important; margin: 0 !important; } /* FORCE REMOVE PADDING FROM HERO SECTION AND PARENTS */ body.page-layout-winter-sale .winter-sale-hero, body.category-winter-sale .winter-sale-hero, body.page-layout-winter-sale section[role="banner"], body.category-winter-sale section[role="banner"] { margin: 0 !important; padding: 0 !important; background: transparent !important; } /* FORCE HIDE ANY ANNOUNCEMENT/PROMO BARS */ body.page-layout-winter-sale .announcement-bar, body.page-layout-winter-sale .promo-bar, body.page-layout-winter-sale [class*="announcement"], body.page-layout-winter-sale [class*="promo"], body.category-winter-sale .announcement-bar, body.category-winter-sale .promo-bar, body.category-winter-sale [class*="announcement"], body.category-winter-sale [class*="promo"] { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* TARGET THE CATEGORY DESCRIPTION - This creates the gray/white band! */ body.page-layout-winter-sale .category-description, body.page-layout-winter-sale .category-description-fullwidth, body.page-layout-winter-sale .bg-gray-50, body.category-winter-sale .category-description, body.category-winter-sale .category-description-fullwidth, body.category-winter-sale .bg-gray-50 { background: transparent !important; background-color: transparent !important; display: none !important; /* Hide completely if empty */ } /* Footer with dark gradient overlay */ body.category-winter-sale footer, body.category-winter-sale .page-footer, body.category-winter-sale footer.page-footer, body.category-winter-sale [class*="footer"], body.page-layout-winter-sale footer, body.page-layout-winter-sale .page-footer, body.page-layout-winter-sale footer.page-footer, body.page-layout-winter-sale [class*="footer"] { background: linear-gradient(to bottom, rgba(17, 24, 39, 0.95), rgba(0, 0, 0, 0.98)) !important; background-color: rgba(17, 24, 39, 0.95) !important; margin-top: 0 !important; padding-top: 3rem !important; } /* Footer sections */ body.category-winter-sale footer > *, body.category-winter-sale footer div, body.category-winter-sale .footer-top, body.category-winter-sale .footer-bottom, body.category-winter-sale .footer-content, body.page-layout-winter-sale footer > *, body.page-layout-winter-sale footer div, body.page-layout-winter-sale .footer-top, body.page-layout-winter-sale .footer-bottom, body.page-layout-winter-sale .footer-content { background: transparent !important; background-color: transparent !important; } /* Keep product cards white with subtle galaxy glow - OPTIMIZED */ body.category-winter-sale .product-item, body.category-winter-sale .product-card, body.category-winter-sale .product-item-info, body.page-layout-winter-sale .product-item, body.page-layout-winter-sale .product-card, body.page-layout-winter-sale .product-item-info { background: white !important; border-radius: 0.75rem; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15), 0 0 40px rgba(139, 92, 246, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; /* Performance optimizations */ contain: layout style paint; /* CSS containment */ will-change: transform; transform: translateZ(0); /* GPU acceleration */ backface-visibility: hidden; } body.category-winter-sale .product-item:hover, body.category-winter-sale .product-card:hover, body.category-winter-sale .product-item-info:hover, body.page-layout-winter-sale .product-item:hover, body.page-layout-winter-sale .product-card:hover, body.page-layout-winter-sale .product-item-info:hover { transform: translateY(-4px) translateZ(0); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.1); } /* ========================================================================== WINTER SALE DEAL BADGE ========================================================================== */ /* Winter Sale Deal Badge - HIDDEN */ .product-item .winter-sale-deal-badge { display: none !important; } /* Badge is hidden - no hover or responsive rules needed */ /* ========================================================================== WISHLIST BUTTON - HIDDEN ON WINTER SALE PAGES ONLY ========================================================================== */ /* Hide wishlist/favorite button ONLY on Winter Sale pages - Target the round gray button with heart icon */ body.page-layout-winter-sale .product-item button.rounded-full.w-9.h-9.bg-gray-200, body.category-winter-sale .product-item button.rounded-full.w-9.h-9.bg-gray-200, body.page-layout-winter-sale .product-item button[aria-label*="listă de dorințe"], body.page-layout-winter-sale .product-item button[aria-label*="wishlist"], body.category-winter-sale .product-item button[aria-label*="listă de dorințe"], body.category-winter-sale .product-item button[aria-label*="wishlist"], body.page-layout-winter-sale .product-item .action.towishlist, body.category-winter-sale .product-item .action.towishlist { display: none !important; visibility: hidden !important; } /* ========================================================================== PRODUCT CARD STYLING - MATCHING BLACK FRIDAY APPROACH ========================================================================== */ /* NO custom mobile overrides - let Hyva/Magento handle natural layout */ /* Black Friday works perfectly without any custom button/padding rules */ /* ========================================================================== ADD TO CART BUTTON - COMPACT ON MOBILE TO PREVENT OVERFLOW ========================================================================== */ @media (max-width: 768px) { /* Reduce product card padding to create more space */ body.page-layout-winter-sale .product-item, body.category-winter-sale .product-item { padding: 0.375rem !important; /* 6px - Reduced from 8px */ } /* Make Add to Cart button ONLY show icon on mobile - HIDE TEXT */ body.page-layout-winter-sale .product-item button.btn-primary span.text-sm, body.category-winter-sale .product-item button.btn-primary span.text-sm, body.page-layout-winter-sale .product-item button[type="submit"] span, body.category-winter-sale .product-item button[type="submit"] span { display: none !important; /* Hide text on mobile */ } /* Make button circular and compact - ICON ONLY */ body.page-layout-winter-sale .product-item button.btn-primary, body.category-winter-sale .product-item button.btn-primary, body.page-layout-winter-sale .product-item button[type="submit"], body.category-winter-sale .product-item button[type="submit"] { width: 36px !important; /* Square */ height: 36px !important; /* Square */ min-width: 36px !important; max-width: 36px !important; padding: 8px !important; /* Equal padding for centering */ border-radius: 0.5rem !important; /* Rounded */ display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; gap: 0 !important; } /* Keep icon visible and centered */ body.page-layout-winter-sale .product-item button.btn-primary svg, body.category-winter-sale .product-item button.btn-primary svg, body.page-layout-winter-sale .product-item button[type="submit"] svg, body.category-winter-sale .product-item button[type="submit"] svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; display: block !important; } } /* ========================================================================== PRICE BLOCK OPTIMIZATION - 35% SMALLER ON MOBILE ========================================================================== */ @media (max-width: 768px) { /* URGENT FIX: Reduce card padding + force button to 36px to prevent overflow */ body.category-winter-sale .product-item, body.page-layout-winter-sale .product-item, body.category-winter-sale .product-item-info, body.page-layout-winter-sale .product-item-info, body.category-winter-sale form.product-item, body.page-layout-winter-sale form.product-item { padding: 0.375rem !important; /* 6px - Reduced from 8px to create space */ overflow: hidden !important; position: relative !important; } /* FORCE ADD TO CART BUTTON TO 36x36px - PREVENT OVERFLOW */ body.page-layout-winter-sale .product-item button.btn-primary, body.category-winter-sale .product-item button.btn-primary, body.page-layout-winter-sale .product-item button[type="submit"], body.category-winter-sale .product-item button[type="submit"] { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Hide button text on mobile */ body.page-layout-winter-sale .product-item button.btn-primary span, body.category-winter-sale .product-item button.btn-primary span { display: none !important; } /* Icon sizing */ body.page-layout-winter-sale .product-item button.btn-primary svg, body.category-winter-sale .product-item button.btn-primary svg { width: 18px !important; height: 18px !important; } /* HIDE ICON ON MOBILE - Most specific selector */ body.category-winter-sale .products-grid .product-item .payment-installment-badge img, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge img, body.category-winter-sale .products-grid .product-item .payment-installment-badge svg, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge svg, body.category-winter-sale .products-grid .product-item .payment-icon, body.page-layout-winter-sale .products-grid .product-item .payment-icon, body.category-winter-sale .product-item .payment-installment-badge img, body.page-layout-winter-sale .product-item .payment-installment-badge img, body.category-winter-sale .product-item .payment-installment-badge svg, body.page-layout-winter-sale .product-item .payment-installment-badge svg, body.category-winter-sale .product-item .payment-icon, body.page-layout-winter-sale .product-item .payment-icon, body.category-winter-sale .product-item [class*="payment"] img, body.page-layout-winter-sale .product-item [class*="payment"] img, body.category-winter-sale .product-item [class*="payment"] svg, body.page-layout-winter-sale .product-item [class*="payment"] svg { display: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; visibility: hidden !important; } /* Price container - RESPONSIVE: compact to prevent Add to Cart overflow */ body.category-winter-sale .product-item .price-box, body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price, body.page-layout-winter-sale .product-item .price { font-size: 0.75rem !important; /* 12px - Reduced for better fit */ line-height: 1.1 !important; /* Tighter */ white-space: nowrap !important; /* Prevent wrapping */ max-width: 100% !important; } /* Special price (new price - red) - RESPONSIVE */ body.category-winter-sale .product-item .special-price .price, body.page-layout-winter-sale .product-item .special-price .price, body.category-winter-sale .product-item .price-final_price .price, body.page-layout-winter-sale .product-item .price-final_price .price { font-size: 0.75rem !important; /* 12px - Match container */ font-weight: 700 !important; white-space: nowrap !important; } /* Old price (crossed out) - RESPONSIVE */ body.category-winter-sale .product-item .old-price .price, body.page-layout-winter-sale .product-item .old-price .price, body.category-winter-sale .product-item .price-old_price .price, body.page-layout-winter-sale .product-item .price-old_price .price { font-size: 0.6875rem !important; /* 11px - Proportional */ white-space: nowrap !important; } /* Price wrapper/container spacing - COMPACT */ body.category-winter-sale .product-item .product-item-inner .price-box, body.page-layout-winter-sale .product-item .product-item-inner .price-box { margin-top: 0.15rem !important; /* Reduced */ margin-bottom: 0.15rem !important; /* Reduced */ padding: 0 !important; max-width: 100% !important; overflow: hidden !important; } /* ========================================================================== PAYMENT INSTALLMENT BADGE - REDUCE SIZE ON MOBILE ========================================================================== */ /* "Plata in rate fara dobanda" badge - OPTIMIZED: larger font, reduced height */ body.category-winter-sale .products-grid .product-item .payment-installment-badge, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge, body.category-winter-sale .product-item .payment-installment-badge, body.page-layout-winter-sale .product-item .payment-installment-badge, body.category-winter-sale .product-item [class*="payment"], body.page-layout-winter-sale .product-item [class*="payment"], body.category-winter-sale .product-item [class*="installment"], body.page-layout-winter-sale .product-item [class*="installment"], body.category-winter-sale .product-item div[class*="rate"], body.page-layout-winter-sale .product-item div[class*="rate"] { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; /* Ensure start alignment */ font-size: 0.625rem !important; /* 10px - INCREASED +25% for better readability */ padding-top: 0.125rem !important; /* 2px - REDUCED for lower height */ padding-bottom: 0.125rem !important; /* 2px - REDUCED for lower height */ padding-left: 0.5rem !important; /* 8px - maintained */ padding-right: 0.5rem !important; /* 8px - maintained */ max-width: 100% !important; overflow: hidden !important; /* Text truncation handling on parent for safety */ margin-left: 0 !important; margin-right: 0 !important; margin-top: 0.25rem !important; /* 4px top margin */ margin-bottom: 0.25rem !important; /* 4px bottom margin */ line-height: 1.2 !important; /* Compact line height */ min-height: auto !important; /* Let content define height */ gap: 4px !important; /* Force gap between icon and text */ } /* Fix text inside badge to truncate properly */ body.category-winter-sale .products-grid .product-item .payment-installment-badge span, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge span, body.category-winter-sale .product-item .payment-installment-badge .payment-text, body.page-layout-winter-sale .product-item .payment-installment-badge .payment-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; /* Allow text to shrink/grow filling space */ min-width: 0 !important; /* Allow shrinking below content size */ } /* Icon inside payment badge - Desktop ONLY */ body.category-winter-sale .products-grid .product-item .payment-installment-badge img, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge img, body.category-winter-sale .products-grid .product-item .payment-installment-badge svg, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge svg, body.category-winter-sale .products-grid .product-item .payment-icon, body.page-layout-winter-sale .products-grid .product-item .payment-icon, body.category-winter-sale .product-item .payment-installment-badge img, body.page-layout-winter-sale .product-item .payment-installment-badge img, body.category-winter-sale .product-item .payment-installment-badge svg, body.page-layout-winter-sale .product-item .payment-installment-badge svg, body.category-winter-sale .product-item .payment-icon, body.page-layout-winter-sale .product-item .payment-icon, body.category-winter-sale .product-item [class*="payment"] img, body.page-layout-winter-sale .product-item [class*="payment"] img, body.category-winter-sale .product-item [class*="payment"] svg, body.page-layout-winter-sale .product-item [class*="payment"] svg { display: none !important; /* Hidden by default on mobile */ width: 16px !important; height: 16px !important; flex-shrink: 0 !important; margin-right: 4px !important; stroke: #ffffff !important; stroke-width: 2px !important; color: #ffffff !important; fill: none !important; } /* Show icon ONLY on tablet/desktop (above 768px) */ @media (min-width: 768px) { body.category-winter-sale .products-grid .product-item .payment-installment-badge img, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge img, body.category-winter-sale .products-grid .product-item .payment-installment-badge svg, body.page-layout-winter-sale .products-grid .product-item .payment-installment-badge svg, body.category-winter-sale .product-item .payment-installment-badge svg, body.page-layout-winter-sale .product-item .payment-installment-badge svg, body.category-winter-sale .product-item [class*="payment"] svg, body.page-layout-winter-sale .product-item [class*="payment"] svg { display: block !important; } } /* Force path/circle inside SVG to white as well */ body.category-winter-sale .product-item [class*="payment"] svg *, body.page-layout-winter-sale .product-item [class*="payment"] svg * { stroke: #ffffff !important; color: #ffffff !important; fill: none !important; } /* Target path directly to ensure stroke is applied */ body.category-winter-sale .product-item .payment-installment-badge svg path, body.page-layout-winter-sale .product-item .payment-installment-badge svg path { stroke: #ffffff !important; stroke-width: 2px !important; fill: none !important; opacity: 1 !important; visibility: visible !important; vector-effect: non-scaling-stroke; /* Prevent stroke scaling weirdness */ } /* ========================================================================== ADD-TO-CART BUTTON - 35% SMALLER ON MOBILE (REAL SIZE REDUCTION) ========================================================================== */ /* Perfect square add-to-cart button - 34x34px (25% smaller) */ body.category-winter-sale .product-item button.btn.btn-primary, body.page-layout-winter-sale .product-item button.btn.btn-primary, body.category-winter-sale .product-item button[data-addto="cart"], body.page-layout-winter-sale .product-item button[data-addto="cart"], body.category-winter-sale button.btn.btn-primary[title*="Adaugă"], body.page-layout-winter-sale button.btn.btn-primary[title*="Adaugă"] { /* Perfect square button - 34x34px (75% of 45px) */ width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; padding: 0.25rem !important; /* 4px internal padding */ flex-shrink: 0 !important; /* Rounded corners for softer look */ border-radius: 0.375rem !important; /* 6px - rounded corners */ /* Spacing from price (card edge spacing handled by card padding) */ margin-left: 0.25rem !important; /* 4px spacing from price */ } /* Adjust icon inside button to be centered and proportional */ body.category-winter-sale .product-item button.btn.btn-primary img, body.page-layout-winter-sale .product-item button.btn.btn-primary img, body.category-winter-sale .product-item button.btn.btn-primary svg, body.page-layout-winter-sale .product-item button.btn.btn-primary svg { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; display: block !important; margin: auto !important; } } /* ========================================================================== STARFIELD ANIMATION (from teaser page) ========================================================================== */ /* Optimized Starfield - GPU Accelerated */ .snowflake-layer-1, .snowflake-layer-2, .snowflake-layer-3 { position: absolute; width: 100%; height: 100%; background-repeat: repeat; will-change: opacity; transform: translateZ(0); /* Force GPU acceleration */ backface-visibility: hidden; perspective: 1000px; contain: layout paint; /* CSS containment for performance */ } .snowflake-layer-1 { background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, #eee, transparent); background-size: 200px 200px; animation: twinkle-1 5s ease-in-out infinite; opacity: 0.6; } .snowflake-layer-2 { background-image: radial-gradient(1px 1px at 80px 40px, #fff, transparent), radial-gradient(1px 1px at 180px 140px, #ddd, transparent); background-size: 200px 200px; animation: twinkle-2 6s ease-in-out infinite; opacity: 0.4; } .snowflake-layer-3 { background-image: radial-gradient(1px 1px at 70px 20px, #eee, transparent), radial-gradient(1px 1px at 190px 130px, #fff, transparent); background-size: 200px 200px; animation: twinkle-3 7s ease-in-out infinite; opacity: 0.3; } /* Optimized animations - only change opacity */ @keyframes twinkle-1 { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.3; } } @keyframes twinkle-2 { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } @keyframes twinkle-3 { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.5; } } /* ========================================================================== NEON TEXT EFFECTS (from teaser page) ========================================================================== */ .neon-text { background: linear-gradient(135deg, #e0f2fe 0%, #f59e0b 25%, #38bdf8 50%, #0ea5e9 75%, #0284c7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; animation: neon-breathe 4s ease-in-out infinite; filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 35px rgba(56, 189, 248, 0.5)); will-change: filter; /* Performance optimizations */ transform: translateZ(0); backface-visibility: hidden; contain: paint; } @keyframes neon-breathe { 0%, 100% { filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 35px rgba(56, 189, 248, 0.5)); } 50% { filter: drop-shadow(0 0 25px rgba(251, 191, 36, 1)) drop-shadow(0 0 50px rgba(56, 189, 248, 0.7)); } } .neon-subtitle { color: #e0f2fe; text-shadow: 0 0 15px rgba(251, 191, 36, 0.8), 0 0 30px rgba(251, 191, 36, 0.5); animation: neon-pulse 3s ease-in-out infinite; will-change: text-shadow; } .neon-percentage { color: #e0f2fe; text-shadow: 0 0 15px rgba(251, 191, 36, 1), 0 0 35px rgba(56, 189, 248, 0.6); animation: neon-pulse-strong 3s ease-in-out infinite; will-change: text-shadow; } @keyframes neon-pulse { 0%, 100% { text-shadow: 0 0 15px rgba(251, 191, 36, 0.8), 0 0 30px rgba(251, 191, 36, 0.5); } 50% { text-shadow: 0 0 20px rgba(251, 191, 36, 1), 0 0 40px rgba(251, 191, 36, 0.7); } } @keyframes neon-pulse-strong { 0%, 100% { text-shadow: 0 0 15px rgba(251, 191, 36, 1), 0 0 35px rgba(56, 189, 248, 0.6); } 50% { text-shadow: 0 0 25px rgba(251, 191, 36, 1), 0 0 50px rgba(56, 189, 248, 0.8); } } .neon-badge { animation: neon-badge-glow 3s ease-in-out infinite; will-change: box-shadow; } @keyframes neon-badge-glow { 0%, 100% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.6), 0 0 40px rgba(14, 165, 233, 0.3); } 50% { box-shadow: 0 0 30px rgba(14, 165, 233, 0.9), 0 0 60px rgba(14, 165, 233, 0.5); } } /* ========================================================================== Performance: Content Visibility for Off-Screen Products ========================================================================== */ /* Drastically improve rendering performance for long product lists */ body.page-layout-winter-sale .product-item, body.category-winter-sale .product-item { content-visibility: auto; /* Browser only renders visible items */ contain-intrinsic-size: 0 400px; /* Estimated height for layout calculations */ } /* ========================================================================== Mobile Optimizations - Reduce effects for performance ========================================================================== */ @media (max-width: 768px) { /* Disable starfield animation on mobile */ .snowflake-layer-1, .snowflake-layer-2, .snowflake-layer-3 { animation: none; opacity: 0.4; } /* Reduce neon effects on mobile */ .neon-text { animation: none; filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 20px rgba(56, 189, 248, 0.3)); } .neon-subtitle, .neon-percentage { animation: none; } .neon-badge { animation: none; box-shadow: 0 0 15px rgba(14, 165, 233, 0.5), 0 0 30px rgba(14, 165, 233, 0.25); } } /* ========================================================================== Accessibility: Reduced Motion Support ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .snowflake-layer-1, .snowflake-layer-2, .snowflake-layer-3 { opacity: 0.3; } } /* ========================================================================== RESPONSIVE PRODUCT TITLE SIZING - WINTER SALE ONLY Fix: Product titles were too large on mobile, making them hard to read ========================================================================== */ /* Product title base styles - Target both link and parent container */ body.page-layout-winter-sale .product-item-link, body.page-layout-winter-sale .product-item .product-item-link, body.page-layout-winter-sale .text-lg:has(.product-item-link), body.category-winter-sale .product-item-link, body.category-winter-sale .product-item .product-item-link, body.category-winter-sale .text-lg:has(.product-item-link) { word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } /* Desktop (769px+): Reduced by 15% (18px → 15.3px) */ @media (min-width: 769px) { body.page-layout-winter-sale .product-item .text-lg, body.page-layout-winter-sale .product-item-link, body.category-winter-sale .product-item .text-lg, body.category-winter-sale .product-item-link { font-size: 0.95625rem !important; /* 15.3px (18px - 15%) */ line-height: 1.5 !important; /* 23px */ } } /* Tablet (641px - 768px): Keep original size */ @media (max-width: 768px) and (min-width: 641px) { body.page-layout-winter-sale .product-item .text-lg, body.page-layout-winter-sale .product-item-link, body.category-winter-sale .product-item .text-lg, body.category-winter-sale .product-item-link { font-size: 1rem !important; /* 16px */ line-height: 1.4 !important; /* 22.4px */ } } /* Mobile (481px - 640px): Keep original size */ @media (max-width: 640px) and (min-width: 481px) { body.page-layout-winter-sale .product-item .text-lg, body.page-layout-winter-sale .product-item-link, body.category-winter-sale .product-item .text-lg, body.category-winter-sale .product-item-link { font-size: 0.875rem !important; /* 14px */ line-height: 1.3 !important; /* 18.2px */ font-weight: 600 !important; } /* Ensure product name container has proper spacing */ body.page-layout-winter-sale .product-item .product-item-link, body.category-winter-sale .product-item .product-item-link { margin-bottom: 0.5rem !important; padding: 0 0.25rem !important; } } /* Small mobile (376px - 480px): Keep original size */ @media (max-width: 480px) and (min-width: 376px) { body.page-layout-winter-sale .product-item .text-lg, body.page-layout-winter-sale .product-item-link, body.category-winter-sale .product-item .text-lg, body.category-winter-sale .product-item-link { font-size: 0.8125rem !important; /* 13px */ line-height: 1.25 !important; /* 16.25px */ } } /* Very small screens (375px and below): Keep original size */ @media (max-width: 375px) { body.page-layout-winter-sale .product-item .text-lg, body.page-layout-winter-sale .product-item-link, body.category-winter-sale .product-item .text-lg, body.category-winter-sale .product-item-link { font-size: 0.75rem !important; /* 12px */ line-height: 1.25 !important; /* 15px */ } } /* ========================================================================== RESPONSIVE STOCK LABEL - SHOW "Stoc disponibil:" on desktop, "Stoc:" on mobile ========================================================================== */ /* Desktop: Show full label, hide short label */ @media (min-width: 641px) { body.page-layout-winter-sale .products-grid .product-item span.stock[class*="label-desktop"], body.category-winter-sale .products-grid .product-item span.stock[class*="label-desktop"], .products-grid .product-item span.stock.stock-out-of-stock-label-desktop { display: inline !important; } body.page-layout-winter-sale .products-grid .product-item span.stock[class*="label-mobile"], body.category-winter-sale .products-grid .product-item span.stock[class*="label-mobile"], .products-grid .product-item span.stock.stock-out-of-stock-label-mobile { display: none !important; } } /* Mobile: Hide full label, show short label */ @media (max-width: 640px) { body.page-layout-winter-sale .products-grid .product-item span.stock[class*="label-desktop"], body.category-winter-sale .products-grid .product-item span.stock[class*="label-desktop"], .products-grid .product-item span.stock.stock-out-of-stock-label-desktop { display: none !important; } body.page-layout-winter-sale .products-grid .product-item span.stock[class*="label-mobile"], body.category-winter-sale .products-grid .product-item span.stock[class*="label-mobile"], .products-grid .product-item span.stock.stock-out-of-stock-label-mobile { display: inline !important; } } /* Match label font weight and color with quantity number (NOT font-size, let it use parent's size) */ body.page-layout-winter-sale .products-grid .product-item span.stock[class*="label-desktop"], body.category-winter-sale .products-grid .product-item span.stock[class*="label-desktop"], .products-grid .product-item span.stock.stock-out-of-stock-label-desktop, body.page-layout-winter-sale .products-grid .product-item span.stock[class*="label-mobile"], body.category-winter-sale .products-grid .product-item span.stock[class*="label-mobile"], .products-grid .product-item span.stock.stock-out-of-stock-label-mobile { font-weight: inherit !important; color: inherit !important; } /* ========================================================================== RESPONSIVE STOCK AVAILABILITY SIZING - WINTER SALE ONLY Fix: Stock availability text - MOBILE ONLY reduced by 15% (85% of original) ========================================================================== */ /* Desktop (769px+): Keep original size (16px) */ @media (min-width: 769px) { body.page-layout-winter-sale .product-item .stock, body.page-layout-winter-sale .product-item .stock-status-row, body.category-winter-sale .product-item .stock, body.category-winter-sale .product-item .stock-status-row { font-size: 1rem !important; /* 16px - UNCHANGED */ line-height: 1.5 !important; /* 24px */ } } /* Tablet (641px - 768px): Keep original size (14px) */ @media (max-width: 768px) and (min-width: 641px) { body.page-layout-winter-sale .product-item .stock, body.page-layout-winter-sale .product-item .stock-status-row, body.category-winter-sale .product-item .stock, body.category-winter-sale .product-item .stock-status-row { font-size: 0.875rem !important; /* 14px - UNCHANGED */ line-height: 1.4 !important; /* 19.6px */ } } /* Mobile (481px - 640px): INCREASED +15% - 15px */ @media (max-width: 640px) and (min-width: 481px) { body.page-layout-winter-sale .product-item .stock, body.page-layout-winter-sale .product-item .stock-status-row, body.category-winter-sale .product-item .stock, body.category-winter-sale .product-item .stock-status-row, body.page-layout-winter-sale .product-item .stock span.text-sm, body.category-winter-sale .product-item .stock span.text-sm { font-size: 0.9375rem !important; /* 15px - INCREASED +15% from 13px */ line-height: 1.47 !important; /* 22px */ } } /* Small mobile (376px - 480px): INCREASED +15% - 13px */ @media (max-width: 480px) and (min-width: 376px) { body.page-layout-winter-sale .product-item .stock, body.page-layout-winter-sale .product-item .stock-status-row, body.category-winter-sale .product-item .stock, body.category-winter-sale .product-item .stock-status-row, body.page-layout-winter-sale .product-item .stock span.text-sm, body.category-winter-sale .product-item .stock span.text-sm { font-size: 0.8125rem !important; /* 13px - INCREASED +15% from 11px */ line-height: 1.46 !important; /* 19px */ } } /* Very small screens (375px and below): INCREASED +15% - 11.5px */ @media (max-width: 375px) { body.page-layout-winter-sale .product-item .stock, body.page-layout-winter-sale .product-item .stock-status-row, body.category-winter-sale .product-item .stock, body.category-winter-sale .product-item .stock-status-row, body.page-layout-winter-sale .product-item .stock span.text-sm, body.category-winter-sale .product-item .stock span.text-sm { font-size: 0.71875rem !important; /* 11.5px - INCREASED +15% from 10px */ line-height: 1.48 !important; /* 17px */ } } /* ========================================================================== UNIFORM PADDING FOR STOCK BLOCK - MATCH PAYMENT BADGE ========================================================================== */ /* Apply uniform padding and margins to stock availability block on mobile */ @media (max-width: 768px) { body.page-layout-winter-sale .product-item .stock.available, body.category-winter-sale .product-item .stock.available, body.page-layout-winter-sale .product-item .inline-flex.items-center.gap-2.stock.available, body.category-winter-sale .product-item .inline-flex.items-center.gap-2.stock.available { padding-top: 0.25rem !important; /* 4px - UNIFORM with payment badge */ padding-bottom: 0.25rem !important; /* 4px - UNIFORM with payment badge */ padding-left: 0.5rem !important; /* 8px - UNIFORM with payment badge */ padding-right: 0.5rem !important; /* 8px - UNIFORM with payment badge */ margin-top: 0.25rem !important; /* 4px top margin */ margin-bottom: 0.25rem !important; /* 4px bottom margin */ margin-left: 0 !important; margin-right: 0 !important; line-height: 1.2 !important; /* Compact line height - UNIFORM with payment badge */ min-height: 25px !important; /* Minimum height for consistency */ } } /* ========================================================================== DISCOUNT BADGE (Red percentage badge) ========================================================================== */ body.category-winter-sale .discount-badge, body.page-layout-winter-sale .discount-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 11 !important; background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important; color: white !important; font-size: 1.375rem !important; /* 22px - INCREASED 60% from 14px */ font-weight: 700 !important; padding: 10px 19px !important; /* INCREASED 60% from 6px 12px */ border-radius: 0.8125rem !important; /* 13px - INCREASED 60% from 8px */ box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3) !important; letter-spacing: 0.025em !important; line-height: 1 !important; text-transform: uppercase !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Mobile optimization - Optimized size for better visibility and product view balance */ @media (max-width: 768px) { body.category-winter-sale .products-grid .product-item .discount-badge, body.page-layout-winter-sale .products-grid .product-item .discount-badge, body.category-winter-sale .discount-badge, body.page-layout-winter-sale .discount-badge { font-size: 0.75rem !important; /* 12px - INCREASED 60% from 7.5px */ padding: 3px 8px !important; /* INCREASED 60% from 2px 5px */ top: 3px !important; /* Moved higher - closer to top edge */ left: 6px !important; border-radius: 0.375rem !important; /* 6px - INCREASED 60% from 4px */ font-weight: 700 !important; /* Keep bold for visibility */ } } /* Desktop: Add side margins and limit container width for better card sizing */ @media (min-width: 769px) { body.page-layout-winter-sale #product-list, body.page-layout-winter-sale section[aria-label="Product list"] { padding-left: 1.5rem !important; padding-right: 1.5rem !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Override Tailwind max-w-full on products wrapper */ body.page-layout-winter-sale .products.wrapper.max-w-full, body.page-layout-winter-sale .products-grid.max-w-full, body.page-layout-winter-sale .products.wrapper, body.page-layout-winter-sale .products-grid { max-width: 100% !important; width: 100% !important; } } /* Force 6 products per row for Winter Sale desktop, 2 on mobile - applies to ALL categories using this layout */ body.page-layout-winter-sale .products-grid .product-items, body.page-layout-winter-sale .products.grid .product-items, body.page-layout-winter-sale ol.products.list.items.product-items, body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 1rem !important; width: 100% !important; } body.page-layout-winter-sale .products-grid .product-item, body.page-layout-winter-sale .products.grid .product-item, body.page-layout-winter-sale .product-items .product-item, body.page-layout-winter-sale ul.grid .product-item, body.page-layout-winter-sale li.product-item { width: 100% !important; max-width: 100% !important; flex: none !important; } @media (min-width: 1537px) { body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (max-width: 1536px) and (min-width: 1281px) { body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @media (max-width: 1280px) and (min-width: 1025px) { body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 1024px) and (min-width: 769px) { body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { body.page-layout-winter-sale .product-items, body.page-layout-winter-sale ul.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* =========================================== WINTER SALE FILTER SECTION STYLING =========================================== */ /* "FILTREAZĂ DUPĂ" Header */ body.page-layout-winter-sale .filter-options-title, body.category-winter-sale .filter-options-title, body.page-layout-winter-sale .block-title, body.category-winter-sale .block-title { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important; color: white !important; padding: 1rem 1.5rem !important; border-radius: 1rem 1rem 0 0 !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3) !important; border: none !important; margin: 0 !important; } /* Filter item blocks */ body.page-layout-winter-sale .filter-options-item, body.category-winter-sale .filter-options-item { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px) !important; border-radius: 1rem !important; margin-bottom: 1rem !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; border: 1px solid rgba(220, 38, 38, 0.15) !important; transition: all 0.3s ease !important; } body.page-layout-winter-sale .filter-options-item:hover, body.category-winter-sale .filter-options-item:hover { box-shadow: 0 8px 30px rgba(220, 38, 38, 0.15) !important; transform: translateY(-2px) !important; border-color: rgba(220, 38, 38, 0.3) !important; } /** * WINTER SALE - ENHANCED BACKGROUND * Premium space/winter background with multiple layers * Spectaculos upgrade pentru experiență wow */ /* ========================================================================== ENHANCED GRADIENT BACKGROUND ========================================================================== */ /* Multi-layer gradient background - NOT flat black */ body.category-winter-sale, body.page-layout-winter-sale { background: /* Top aurora glow */ radial-gradient(ellipse 80% 50% at 50% 0%, rgba(14, 165, 233, 0.15) 0%, transparent 50%), /* Center depth */ radial-gradient(ellipse 100% 100% at 50% 50%, rgba(6, 78, 135, 0.3) 0%, transparent 50%), /* Bottom glow */ radial-gradient(ellipse 80% 50% at 50% 100%, rgba(3, 105, 161, 0.2) 0%, transparent 50%), /* Base gradient */ linear-gradient(180deg, #001a33 0%, #000811 30%, #000000 60%, #001122 100%); background-attachment: fixed; background-size: 100% 100%; min-height: 100vh; position: relative; } /* ========================================================================== NEBULA CLOUDS - Animated Depth Layers ========================================================================== */ /* Create nebula container */ body.page-layout-winter-sale::before, body.category-winter-sale::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: /* Nebula cloud 1 - Cyan */ radial-gradient(ellipse 800px 600px at 20% 30%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), /* Nebula cloud 2 - Blue */ radial-gradient(ellipse 700px 500px at 80% 70%, rgba(56, 189, 248, 0.08) 0%, transparent 50%), /* Nebula cloud 3 - Sky */ radial-gradient(ellipse 600px 400px at 50% 50%, rgba(125, 211, 252, 0.06) 0%, transparent 50%); animation: nebula-drift 40s ease-in-out infinite; opacity: 0.7; } @keyframes nebula-drift { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.7; } 25% { transform: translate(50px, 30px) scale(1.05) rotate(2deg); opacity: 0.8; } 50% { transform: translate(30px, -40px) scale(0.98) rotate(-1deg); opacity: 0.6; } 75% { transform: translate(-40px, 20px) scale(1.02) rotate(1deg); opacity: 0.75; } } /* ========================================================================== ENHANCED STARFIELD - Multiple Sizes & Densities ========================================================================== */ /* Large bright stars */ .snowflake-layer-1 { background-image: radial-gradient(circle, #fff 1px, transparent 1px), radial-gradient(circle, #e0f2fe 1px, transparent 1px), radial-gradient(circle, #7dd3fc 2px, transparent 2px); background-size: 250px 250px, 350px 350px, 400px 400px; background-position: 0 0, 50px 100px, 150px 200px; animation: twinkle-1 4s ease-in-out infinite, star-drift-1 60s linear infinite; opacity: 0.8; } /* Medium stars */ .snowflake-layer-2 { background-image: radial-gradient(circle, #fff 1px, transparent 1px), radial-gradient(circle, #bae6fd 1px, transparent 1px), radial-gradient(circle, #e0f2fe 1px, transparent 1px); background-size: 200px 200px, 300px 300px, 350px 350px; background-position: 30px 50px, 120px 180px, 200px 80px; animation: twinkle-2 5s ease-in-out infinite, star-drift-2 80s linear infinite; opacity: 0.6; } /* Small distant stars */ .snowflake-layer-3 { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0.5px, transparent 0.5px), radial-gradient(circle, rgba(224, 242, 254, 0.5) 0.5px, transparent 0.5px), radial-gradient(circle, rgba(186, 230, 253, 0.4) 0.5px, transparent 0.5px); background-size: 150px 150px, 220px 220px, 280px 280px; background-position: 70px 30px, 160px 120px, 90px 180px; animation: twinkle-3 6s ease-in-out infinite, star-drift-3 100s linear infinite; opacity: 0.4; } /* Enhanced twinkle animations */ @keyframes twinkle-1 { 0%, 100% { opacity: 0.8; } 25% { opacity: 1; } 50% { opacity: 0.4; } 75% { opacity: 0.9; } } @keyframes twinkle-2 { 0%, 100% { opacity: 0.6; } 33% { opacity: 0.9; } 66% { opacity: 0.3; } } @keyframes twinkle-3 { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } /* Subtle star drift for depth */ @keyframes star-drift-1 { from { background-position: 0 0, 50px 100px, 150px 200px; } to { background-position: -250px -250px, -200px -150px, -250px -200px; } } @keyframes star-drift-2 { from { background-position: 30px 50px, 120px 180px, 200px 80px; } to { background-position: -170px -150px, -180px -120px, -150px -220px; } } @keyframes star-drift-3 { from { background-position: 70px 30px, 160px 120px, 90px 180px; } to { background-position: -80px -120px, -60px -100px, -90px -100px; } } /* ========================================================================== SHOOTING STARS - Occasional Streaks ========================================================================== */ /* Shooting star container */ .winter-sale-hero::after { content: ''; position: absolute; top: 10%; right: 10%; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.8); animation: shooting-star 8s ease-out infinite; opacity: 0; } @keyframes shooting-star { 0% { opacity: 0; transform: translate(0, 0) rotate(45deg); } 5% { opacity: 1; } 15% { opacity: 0; transform: translate(-400px, 400px) rotate(45deg); box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.8), 0 0 100px 2px rgba(255, 255, 255, 0.4); } 100% { opacity: 0; transform: translate(-400px, 400px) rotate(45deg); } } /* ========================================================================== AURORA BOREALIS EFFECT - Top Glow ========================================================================== */ body.page-layout-winter-sale .page-wrapper::before, body.category-winter-sale .page-wrapper::before { content: ''; position: fixed; top: -50%; left: -10%; right: -10%; height: 80%; background: linear-gradient( 180deg, rgba(14, 165, 233, 0.15) 0%, rgba(56, 189, 248, 0.1) 30%, rgba(125, 211, 252, 0.08) 50%, transparent 100% ); animation: aurora-wave 20s ease-in-out infinite; pointer-events: none; z-index: 0; opacity: 0.6; filter: blur(80px); } @keyframes aurora-wave { 0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.6; } 25% { transform: translateY(30px) scaleX(1.1); opacity: 0.7; } 50% { transform: translateY(-20px) scaleX(0.95); opacity: 0.5; } 75% { transform: translateY(40px) scaleX(1.05); opacity: 0.65; } } /* ========================================================================== ICE CRYSTALS - Floating Particles ========================================================================== */ /* Create ice crystal particles */ .winter-sale-hero { position: relative; } .winter-sale-hero::before { content: '❄ ❄ ❄ ❄ ❄ ❄ ❄ ❄'; position: absolute; inset: 0; font-size: 20px; color: rgba(224, 242, 254, 0.2); letter-spacing: 80px; line-height: 100px; animation: crystal-float 30s linear infinite; pointer-events: none; z-index: 1; } @keyframes crystal-float { 0% { transform: translateY(0) rotate(0deg); opacity: 0.2; } 50% { opacity: 0.4; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } /* ========================================================================== DEPTH LAYERS - Z-index Organization ========================================================================== */ body.page-layout-winter-sale .page-wrapper, body.category-winter-sale .page-wrapper { position: relative; z-index: 1; } /* Ensure content appears above all backgrounds */ body.page-layout-winter-sale header, body.page-layout-winter-sale main, body.category-winter-sale header, body.category-winter-sale main { position: relative; z-index: 2; } /* ========================================================================== MOBILE OPTIMIZATIONS ========================================================================== */ @media (max-width: 768px) { /* Disable heavy animations on mobile for performance */ body.page-layout-winter-sale::before, body.category-winter-sale::before { animation: none; opacity: 0.5; } body.page-layout-winter-sale .page-wrapper::before, body.category-winter-sale .page-wrapper::before { animation: none; filter: blur(40px); } .winter-sale-hero::after { display: none; /* No shooting stars on mobile */ } .winter-sale-hero::before { animation-duration: 60s; /* Slower crystal float */ } /* Simplified starfield */ .snowflake-layer-1, .snowflake-layer-2, .snowflake-layer-3 { animation: twinkle-1 8s ease-in-out infinite !important; } } /* ========================================================================== ACCESSIBILITY - Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { body.page-layout-winter-sale::before, body.category-winter-sale::before, body.page-layout-winter-sale .page-wrapper::before, body.category-winter-sale .page-wrapper::before, .winter-sale-hero::before, .winter-sale-hero::after, .snowflake-layer-1, .snowflake-layer-2, .snowflake-layer-3 { animation: none !important; } } /** * WINTER SALE - ENHANCED HERO SECTION * Spectaculos title effects cu crystal/ice theme * 3D depth, animated gradients, frost effects */ /* ========================================================================== HERO SECTION CONTAINER ========================================================================== */ .winter-sale-hero { position: relative; min-height: 32vh; display: flex; align-items: center; justify-content: center; overflow: visible; /* MEGA VISIBLE BACKGROUND GLOW */ background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(14, 165, 233, 0.25) 0%, transparent 60%), radial-gradient(ellipse 100% 60% at 50% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 50%), transparent; } /* Add pulsing glow effect around hero */ .winter-sale-hero::before { content: ''; position: absolute; inset: -100px; background: radial-gradient( ellipse 80% 60% at 50% 50%, rgba(14, 165, 233, 0.3) 0%, rgba(56, 189, 248, 0.2) 30%, transparent 60% ); animation: hero-glow-pulse 6s ease-in-out infinite; z-index: 0; pointer-events: none; filter: blur(60px); } @keyframes hero-glow-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* Hero content wrapper */ .winter-sale-hero > div { position: relative; z-index: 10; } /* ========================================================================== SEARCH BAR - CENTERED ON ALL SCREENS ========================================================================== */ /* REMOVED - This selector was too broad and affected product grid */ /* Use more specific selector below targeting only search bar */ /* FORCE search bar width - REDUCED by 30% + ADD LATERAL MARGINS */ div[x-data*="winterSaleSearch"], .page-wrapper div[x-data*="winterSaleSearch"].mx-auto { max-width: 627px !important; /* Reduced by 30% from 896px */ margin-left: auto !important; margin-right: auto !important; display: block !important; padding-left: 1rem !important; /* 16px lateral padding on mobile */ padding-right: 1rem !important; /* 16px lateral padding on mobile */ } /* Desktop - more padding for search bar */ @media (min-width: 768px) { div[x-data*="winterSaleSearch"], .page-wrapper div[x-data*="winterSaleSearch"].mx-auto { padding-left: 1.5rem !important; /* 24px on desktop */ padding-right: 1.5rem !important; /* 24px on desktop */ } } /* Make the actual input container wider */ div[x-data*="winterSaleSearch"] > form > div.relative { max-width: 100% !important; width: 100% !important; } div[x-data*="winterSaleSearch"] > form > div.relative input { width: 100% !important; } /* ========================================================================== CENTER PRODUCT GRID ON WINTER SALE PAGES + ADD PROPER MARGINS ========================================================================== */ /* ========================================================================== CRITICAL FIX: Force .columns to NOT use multi-column grid on Winter Sale The page-with-filter class causes .columns to have grid-cols-3/4 on md/lg ========================================================================== */ /* Override ALL screen sizes - force single column layout */ body.page-layout-winter-sale .columns, body.category-winter-sale .columns, body.page-layout-winter-sale.page-with-filter .columns, body.category-winter-sale.page-with-filter .columns { display: block !important; grid-template-columns: 1fr !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1rem !important; padding-right: 1rem !important; max-width: 100% !important; } /* Ensure column.main takes full width at ALL breakpoints */ body.page-layout-winter-sale .columns .main, body.page-layout-winter-sale .columns .column.main, body.category-winter-sale .columns .main, body.category-winter-sale .columns .column.main, body.page-layout-winter-sale.page-with-filter .columns .main, body.page-layout-winter-sale.page-with-filter .columns .column.main { width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; order: 1 !important; } /* Override @screen md rules */ @media (min-width: 768px) { body.page-layout-winter-sale .columns, body.category-winter-sale .columns, body.page-layout-winter-sale.page-with-filter .columns { display: block !important; grid-template-columns: 1fr !important; } body.page-layout-winter-sale .columns .main, body.page-layout-winter-sale .columns .column.main { width: 100% !important; max-width: 100% !important; col-span: 1 !important; grid-column: 1 / -1 !important; } } /* Override @screen lg rules */ @media (min-width: 1024px) { body.page-layout-winter-sale .columns, body.category-winter-sale .columns, body.page-layout-winter-sale.page-with-filter .columns { display: block !important; grid-template-columns: 1fr !important; } body.page-layout-winter-sale .columns .main, body.page-layout-winter-sale .columns .column.main { width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; } } /* Desktop - more padding */ @media (min-width: 768px) { body.page-layout-winter-sale .columns, body.category-winter-sale .columns { padding-left: 1.5rem !important; /* 24px on desktop */ padding-right: 1.5rem !important; /* 24px on desktop */ } } /* ========================================================================== TITLE - "WINTER SALE" - SPECTACULOS EFFECTS ========================================================================== */ .frost-text { /* NEON ICE - Clean white text with electric blue glow and dark outline */ color: #ffffff !important; position: relative; display: inline-block; /* Neon ice effect - dark outline + bright blue glow */ text-shadow: /* Bright neon glow - electric blue */ 0 0 10px rgba(56, 189, 248, 1), 0 0 20px rgba(56, 189, 248, 1), 0 0 30px rgba(56, 189, 248, 0.9), 0 0 40px rgba(14, 165, 233, 0.8), 0 0 60px rgba(14, 165, 233, 0.6), 0 0 80px rgba(2, 132, 199, 0.4), /* Dark blue outline (outer) - sky-950 for strong contrast */ -4px -4px 0 #082f49, 4px -4px 0 #082f49, -4px 4px 0 #082f49, 4px 4px 0 #082f49, -4px 0 0 #082f49, 4px 0 0 #082f49, 0 -4px 0 #082f49, 0 4px 0 #082f49, /* Crisp bright blue outline (inner) for neon effect */ -2px -2px 0 #0ea5e9, 2px -2px 0 #0ea5e9, -2px 2px 0 #0ea5e9, 2px 2px 0 #0ea5e9, -2px 0 0 #0ea5e9, 2px 0 0 #0ea5e9, 0 -2px 0 #0ea5e9, 0 2px 0 #0ea5e9, /* Subtle shadow for depth */ 0 8px 20px rgba(12, 74, 110, 0.5); /* NO animations - static and bold */ animation: none !important; /* Typography */ letter-spacing: 0.05em; line-height: 0.85; font-weight: 900; /* Extra neon glow with filters */ filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 50px rgba(14, 165, 233, 0.5)); } /* Remove pseudo-elements - clean and simple */ .frost-text::before, .frost-text::after { content: none !important; display: none !important; } @keyframes golden-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 40px rgba(251, 191, 36, 1)) drop-shadow(0 0 80px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 120px rgba(251, 191, 36, 0.6)) drop-shadow(0 10px 50px rgba(0, 0, 0, 0.8)); } 50% { filter: drop-shadow(0 0 60px rgba(251, 191, 36, 1)) drop-shadow(0 0 120px rgba(251, 191, 36, 1)) drop-shadow(0 0 180px rgba(251, 191, 36, 0.8)) drop-shadow(0 10px 50px rgba(0, 0, 0, 0.8)); } } @keyframes neon-pulse-simple { 0%, 100% { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #7dd3fc, 0 0 50px #38bdf8, 0 0 80px #0ea5e9, 0 0 120px #0ea5e9, 0 0 160px #0ea5e9, 0 0 200px #0ea5e9, -2px -2px 0 rgba(0, 0, 0, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.5), 0 8px 40px rgba(0, 0, 0, 0.8); } 50% { text-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff, 0 0 45px #7dd3fc, 0 0 70px #38bdf8, 0 0 110px #0ea5e9, 0 0 160px #0ea5e9, 0 0 210px #0ea5e9, 0 0 260px #0ea5e9, -2px -2px 0 rgba(0, 0, 0, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.5), 0 8px 40px rgba(0, 0, 0, 0.8); } } /* MEGA GLOW PULSE - VISIBLE */ @keyframes mega-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 60px rgba(14, 165, 233, 1)) drop-shadow(0 0 100px rgba(56, 189, 248, 0.8)) drop-shadow(0 0 140px rgba(14, 165, 233, 0.6)) drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)); } 50% { filter: drop-shadow(0 0 80px rgba(14, 165, 233, 1)) drop-shadow(0 0 140px rgba(56, 189, 248, 1)) drop-shadow(0 0 200px rgba(14, 165, 233, 0.8)) drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)); } } /* Animated gradient flow */ @keyframes gradient-flow { 0%, 100% { background-position: 0% 50%; filter: brightness(1) saturate(1); } 25% { background-position: 50% 100%; filter: brightness(1.1) saturate(1.2); } 50% { background-position: 100% 50%; filter: brightness(1.15) saturate(1.3); } 75% { background-position: 50% 0%; filter: brightness(1.1) saturate(1.1); } } /* Subtle floating animation */ @keyframes title-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.01); } } /* ========================================================================== FROST SHIMMER EFFECT - DISABLED (Removed annoying line animation) ========================================================================== */ /* Removed - no more moving line across text */ /* ========================================================================== ICE CRYSTAL BORDER - REMOVED (No box around title) ========================================================================== */ /* Removed - clean text without border box */ /* ========================================================================== SUBTITLE - "Reduceri dezghetate" ========================================================================== */ .frost-subtitle { color: #ffffff; /* Pure white pentru contrast maxim */ /* MEGA TEXT SHADOW - VERY VISIBLE */ text-shadow: 0 0 30px rgba(14, 165, 233, 1), 0 0 60px rgba(56, 189, 248, 1), 0 0 90px rgba(14, 165, 233, 0.8), 0 0 120px rgba(14, 165, 233, 0.6), 0 4px 20px rgba(0, 0, 0, 0.8); animation: subtitle-mega-glow 4s ease-in-out infinite; font-weight: 700; } @keyframes subtitle-mega-glow { 0%, 100% { text-shadow: 0 0 30px rgba(14, 165, 233, 1), 0 0 60px rgba(56, 189, 248, 1), 0 0 90px rgba(14, 165, 233, 0.8), 0 4px 20px rgba(0, 0, 0, 0.8); } 50% { text-shadow: 0 0 50px rgba(14, 165, 233, 1), 0 0 100px rgba(56, 189, 248, 1), 0 0 150px rgba(14, 165, 233, 1), 0 4px 20px rgba(0, 0, 0, 0.8); } } @keyframes subtitle-glow { 0%, 100% { text-shadow: 0 0 20px rgba(14, 165, 233, 0.8), 0 0 40px rgba(14, 165, 233, 0.5), 0 2px 10px rgba(0, 0, 0, 0.5); } 50% { text-shadow: 0 0 30px rgba(14, 165, 233, 1), 0 0 60px rgba(14, 165, 233, 0.7), 0 2px 10px rgba(0, 0, 0, 0.5); } } /* ========================================================================== PERCENTAGE - "70%" - MEGA IMPACT ========================================================================== */ .frost-percentage { display: inline-block; /* RED/ORANGE for discount - Maximum impact! */ color: #ef4444 !important; /* Red-500 - Bold and visible */ -webkit-text-fill-color: #ef4444 !important; background: none !important; /* RED GLOW + Dark shadow for readability */ text-shadow: /* Red glow */ 0 0 30px rgba(239, 68, 68, 0.8), 0 0 60px rgba(239, 68, 68, 0.6), 0 0 90px rgba(239, 68, 68, 0.4), /* Black outline for contrast on blue background */ -2px -2px 0 rgba(0, 0, 0, 0.5), 2px -2px 0 rgba(0, 0, 0, 0.5), -2px 2px 0 rgba(0, 0, 0, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.5), /* Bottom shadow */ 0 6px 30px rgba(0, 0, 0, 0.8); /* NO animation - clean and static */ animation: none !important; filter: none !important; font-weight: 900; position: relative; } @keyframes percentage-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes percentage-mega-pulse { 0%, 100% { filter: drop-shadow(0 0 40px rgba(14, 165, 233, 1)) drop-shadow(0 0 80px rgba(56, 189, 248, 1)) drop-shadow(0 0 120px rgba(14, 165, 233, 0.8)); transform: scale(1); } 50% { filter: drop-shadow(0 0 60px rgba(14, 165, 233, 1)) drop-shadow(0 0 120px rgba(56, 189, 248, 1)) drop-shadow(0 0 180px rgba(14, 165, 233, 1)); transform: scale(1.05); } } @keyframes percentage-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.1); filter: brightness(1.3); } } /* Percentage background glow */ .frost-percentage::before { content: ''; position: absolute; inset: -20px; background: radial-gradient( circle, rgba(14, 165, 233, 0.4) 0%, rgba(14, 165, 233, 0.2) 30%, transparent 70% ); animation: percentage-glow 3s ease-in-out infinite; z-index: -1; border-radius: 50%; } @keyframes percentage-glow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } /* ========================================================================== FLOATING ICE PARTICLES - Around Hero ========================================================================== */ /* Create multiple ice particles */ .winter-sale-hero .max-w-4xl { position: relative; } .winter-sale-hero .max-w-4xl::before, .winter-sale-hero .max-w-4xl::after { content: '❄'; position: absolute; font-size: 30px; color: rgba(224, 242, 254, 0.3); animation: particle-float 8s ease-in-out infinite; pointer-events: none; } .winter-sale-hero .max-w-4xl::before { top: 10%; left: 5%; animation-delay: 0s; } .winter-sale-hero .max-w-4xl::after { top: 20%; right: 5%; animation-delay: 2s; } @keyframes particle-float { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; } 25% { transform: translate(20px, -30px) rotate(90deg); opacity: 0.6; } 50% { transform: translate(-10px, -50px) rotate(180deg); opacity: 0.4; } 75% { transform: translate(30px, -40px) rotate(270deg); opacity: 0.5; } } /* ========================================================================== TAGLINE - Bottom Text ========================================================================== */ .winter-sale-hero p.text-gray-200 { color: #bae6fd !important; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6); animation: tagline-fade 5s ease-in-out infinite; } @keyframes tagline-fade { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } /* ========================================================================== RESPONSIVE ADJUSTMENTS ========================================================================== */ /* Desktop large */ @media (min-width: 1280px) { .frost-text { font-size: 9rem; line-height: 0.85; } } /* Tablet */ @media (max-width: 1024px) { .frost-text { text-shadow: 0 0 30px rgba(14, 165, 233, 0.8), 0 0 60px rgba(14, 165, 233, 0.5), 2px 2px 0 rgba(14, 165, 233, 0.3), 4px 4px 0 rgba(14, 165, 233, 0.2); } } /* Mobile - OPTIMIZED for compact hero with LARGER text */ @media (max-width: 768px) { .winter-sale-hero { min-height: 24vh; /* 🎯 Adjusted for larger font size */ padding: 0; /* Let template handle padding with Tailwind */ } .frost-text { /* Larger font on mobile for better impact */ line-height: 1 !important; /* Compact vertical spacing */ } .frost-percentage { animation: none; transform: scale(1); } /* Remove floating particles on mobile */ .winter-sale-hero .max-w-4xl::before, .winter-sale-hero .max-w-4xl::after { display: none; } /* Reduce glow effect intensity on mobile */ .winter-sale-hero::before { opacity: 0.4; filter: blur(40px); } } /* Extra small mobile - slightly more height for larger text */ @media (max-width: 640px) { .winter-sale-hero { min-height: 20vh; /* 🎯 More height for better text visibility */ } } /* ========================================================================== ACCESSIBILITY - Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .frost-text, .frost-subtitle, .frost-percentage, .winter-sale-hero p.text-gray-200 { animation: none !important; } .winter-sale-hero .max-w-4xl::before, .winter-sale-hero .max-w-4xl::after { animation: none !important; } } /* ========================================================================== PRINT STYLES ========================================================================== */ @media print { .frost-text, .frost-subtitle, .frost-percentage { -webkit-text-fill-color: black !important; text-shadow: none !important; animation: none !important; } } /* ========================================================================== REMOVE ALL PING ANIMATIONS (WhatsApp widget + other buttons) - CLS FIX ========================================================================== */ /* Kill ALL ping animations on Winter Sale page */ body.page-layout-winter-sale .animate-ping, body.category-winter-sale .animate-ping, body.page-layout-winter-sale [class*="ping"], body.category-winter-sale [class*="ping"] { animation: none !important; animation-name: none !important; opacity: 0 !important; display: none !important; } /* ========================================================================== FLOATING PHONE BUTTON - FORCE BLUE GRADIENT + NO ANIMATION (CLS FIX) ========================================================================== */ /* Force blue gradient on floating phone button - NO CLS */ body.page-layout-winter-sale .fixed a[href="tel:0799958360"].rounded-full, body.category-winter-sale .fixed a[href="tel:0799958360"].rounded-full, body.page-layout-winter-sale .fixed a[href="tel:0799958360"].rounded-full *, body.category-winter-sale .fixed a[href="tel:0799958360"].rounded-full * { background: linear-gradient(to bottom right, #0ea5e9, #0284c7) !important; background-image: linear-gradient(to bottom right, #0ea5e9, #0284c7) !important; background-color: #0ea5e9 !important; animation: none !important; animation-name: none !important; animation-duration: 0s !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; transition: transform 0.3s ease !important; } /* Remove ALL animations from parent container */ body.page-layout-winter-sale .fixed div[class*="absolute"], body.category-winter-sale .fixed div[class*="absolute"] { animation: none !important; animation-name: none !important; } /* Remove hover effects that cause CLS */ body.page-layout-winter-sale .fixed a[href="tel:0799958360"].rounded-full:hover, body.category-winter-sale .fixed a[href="tel:0799958360"].rounded-full:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15) !important; transform: scale(1.05) !important; } /* ========================================================================== MOBILE: HIDE PAYMENT ICON ON WINTER SALE ========================================================================== */ @media (max-width: 768px) { body.page-layout-winter-sale .product-item .payment-installment-badge svg.payment-icon, body.page-layout-winter-sale .product-item .payment-installment-badge .payment-icon, body.page-layout-winter-sale .product-item .payment-installment-badge svg { display: none !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; margin: 0 !important; padding: 0 !important; position: absolute !important; left: -9999px !important; } /* Remove gap/spacing when icon is hidden */ body.page-layout-winter-sale .product-item .payment-installment-badge { gap: 0 !important; padding: 5px 11px !important; justify-content: flex-start !important; text-align: left !important; } /* Ensure text aligns to the left */ body.page-layout-winter-sale .product-item .payment-installment-badge .payment-text { text-align: left !important; } } /* ========================================================================== PRODUCT CARD SPACING OPTIMIZATION - Reduce gaps between elements ========================================================================== */ /* Reduce gap between title and payment badge */ body.page-layout-winter-sale .product-item .product-item-name, body.category-winter-sale .product-item .product-item-name, [data-content-type="products"][data-appearance="carousel"] .product-item .product-item-name { margin-bottom: 4px !important; /* Reduced from default ~12-16px */ } /* Reduce gap between payment badge and price */ body.page-layout-winter-sale .product-item .payment-installment-badge, body.category-winter-sale .product-item .payment-installment-badge, [data-content-type="products"][data-appearance="carousel"] .product-item .payment-installment-badge { margin-bottom: 4px !important; /* Reduced from default ~8-12px */ margin-top: 4px !important; } /* Reduce gap between price and add to cart button */ body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box { margin-bottom: 6px !important; /* Reduced from default ~12-16px */ } /* Optimize product-info container padding */ body.page-layout-winter-sale .product-item .product-info, body.category-winter-sale .product-item .product-info, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info { padding: 4px 10px !important; /* Minimal padding top/bottom */ gap: 2px !important; /* Minimal gap between children */ } /* ELIMINATE GAP from Yotpo container and description above stock */ body.page-layout-winter-sale .product-item .yotpo-bottomline-container, body.category-winter-sale .product-item .yotpo-bottomline-container, [data-content-type="products"][data-appearance="carousel"] .product-item .yotpo-bottomline-container { display: none !important; /* Hide Yotpo completely */ margin: 0 !important; padding: 0 !important; height: 0 !important; } /* Remove gap from short description above stock */ body.page-layout-winter-sale .product-item .product-info > div, body.category-winter-sale .product-item .product-info > div, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info > div { margin-top: 0 !important; margin-bottom: 0 !important; } /* Ensure reviews summary is hidden/has no gap */ body.page-layout-winter-sale .product-item .product-reviews-summary, body.category-winter-sale .product-item .product-reviews-summary, [data-content-type="products"][data-appearance="carousel"] .product-item .product-reviews-summary { display: none !important; margin: 0 !important; padding: 0 !important; } /* Make the red final price (discounted price) larger - RESPONSIVE */ body.page-layout-winter-sale .product-item .price-box .price, body.page-layout-winter-sale .product-item .price-box .special-price .price, body.category-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .special-price .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .special-price .price { font-size: 1rem !important; /* Mobile: smaller to prevent overflow */ font-weight: 700 !important; /* Bold */ white-space: nowrap !important; /* Prevent wrapping */ } /* Larger on desktop/tablet */ @media (min-width: 768px) { body.page-layout-winter-sale .product-item .price-box .price, body.page-layout-winter-sale .product-item .price-box .special-price .price, body.category-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .special-price .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .special-price .price { font-size: 1.25rem !important; /* Desktop: larger */ } } /* Keep old price (strikethrough) at normal size - REDUCE GAP */ body.page-layout-winter-sale .product-item .old-price .price, body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price .price, body.category-winter-sale .product-item .old-price-block .price, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price .price, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price-block .price { font-size: 0.75rem !important; /* Smaller on mobile */ font-weight: 400 !important; /* Normal weight */ } /* Reduce gap between red price and old price */ body.page-layout-winter-sale .product-item .old-price, body.page-layout-winter-sale .product-item .old-price-block, body.category-winter-sale .product-item .old-price, body.category-winter-sale .product-item .old-price-block, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price-block { margin-top: 0 !important; padding-top: 0 !important; line-height: 1 !important; } /* Reduce line-height on red price for tighter spacing */ body.page-layout-winter-sale .product-item .price-box .special-price, body.category-winter-sale .product-item .price-box .special-price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .special-price { margin-bottom: 0 !important; line-height: 1.1 !important; } /* Remove any gap in the price container */ body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box { display: flex !important; flex-direction: column !important; gap: 0 !important; } @media (min-width: 768px) { body.page-layout-winter-sale .product-item .old-price .price, body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price .price, body.category-winter-sale .product-item .old-price-block .price, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price .price, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price-block .price { font-size: 0.875rem !important; /* Slightly larger on desktop */ } } /* Ensure price container shows full price */ body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box { max-width: 100% !important; overflow: visible !important; /* CHANGED: Show full price */ flex-shrink: 0 !important; /* Don't shrink price */ } /* Ensure the price and button row has proper spacing */ body.page-layout-winter-sale .product-item .mt-auto, body.category-winter-sale .product-item .mt-auto, [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto { gap: 8px !important; /* Tighter gap between price and button */ } @media (max-width: 767px) { body.page-layout-winter-sale .product-item .mt-auto, body.category-winter-sale .product-item .mt-auto, [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto { gap: 6px !important; /* Even tighter on mobile */ } } /* ============================================ GLOBAL FIXES FOR ALL PAGEBUILDER CAROUSELS (Homepage and other pages) ============================================ */ /* Mobile: AGGRESSIVE price size reduction to prevent overflow */ @media (max-width: 767px) { /* Target all price elements in carousels with maximum specificity */ [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .special-price .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price-container .price, [data-content-type="products"][data-appearance="carousel"] .product-item .text-gray-900 .price { font-size: 0.85rem !important; /* Very small on mobile - 13.6px */ font-weight: 700 !important; white-space: nowrap !important; line-height: 1.2 !important; } /* Old price even smaller */ [data-content-type="products"][data-appearance="carousel"] .product-item .old-price .price, [data-content-type="products"][data-appearance="carousel"] .product-item .old-price-block .price { font-size: 0.65rem !important; /* Very small - 10.4px */ line-height: 1.2 !important; } /* Force tight gap between price and button */ [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto.pt-2, [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto { gap: 2px !important; /* Extremely tight */ padding-top: 4px !important; /* Reduce top padding */ } /* Price container - show full price */ [data-content-type="products"][data-appearance="carousel"] .product-item .price-box, [data-content-type="products"][data-appearance="carousel"] .product-item .text-gray-900 { max-width: 100% !important; /* Full width for price */ overflow: visible !important; /* CHANGED: Show full price */ flex-shrink: 0 !important; /* Don't shrink */ margin-right: 0 !important; } /* Button must be compact and never shrink */ [data-content-type="products"][data-appearance="carousel"] .product-item .btn, [data-content-type="products"][data-appearance="carousel"] .product-item button { padding: 0.4rem 0.6rem !important; /* Very compact */ font-size: 0.8rem !important; /* Small text */ flex-shrink: 0 !important; /* Never shrink */ min-width: 42px !important; /* Minimum width */ max-width: 42px !important; /* Maximum width */ } /* Reduce card padding on mobile */ [data-content-type="products"][data-appearance="carousel"] .product-item { padding: 4px !important; } [data-content-type="products"][data-appearance="carousel"] .product-item .product-info { padding: 4px 6px !important; } } /* Reduce overall card padding to maximize content space */ body.page-layout-winter-sale .product-item.product-card, body.category-winter-sale .product-item.product-card, [data-content-type="products"][data-appearance="carousel"] .product-item.product-card { padding: 6px !important; /* Very compact */ } /* Ensure product actions (add to cart) are close to price */ body.page-layout-winter-sale .product-item .product-item-actions, body.category-winter-sale .product-item .product-item-actions, [data-content-type="products"][data-appearance="carousel"] .product-item .product-item-actions { margin-top: 6px !important; padding-top: 0 !important; } /* Stack elements tightly using flexbox */ body.page-layout-winter-sale .product-item .product-details, body.category-winter-sale .product-item .product-details, [data-content-type="products"][data-appearance="carousel"] .product-item .product-details { display: flex !important; flex-direction: column !important; gap: 4px !important; /* Tight spacing between all children */ } /* Eliminate space above stock status badge */ body.page-layout-winter-sale .product-item .stock-status-container, body.category-winter-sale .product-item .stock-status-container, [data-content-type="products"][data-appearance="carousel"] .product-item .stock-status-container, body.page-layout-winter-sale .product-item .stock.available, body.category-winter-sale .product-item .stock.available, [data-content-type="products"][data-appearance="carousel"] .product-item .stock.available { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 4px !important; } /* Ensure no extra space from price-box to stock */ body.page-layout-winter-sale .product-item .price-box + *, body.category-winter-sale .product-item .price-box + *, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box + * { margin-top: 0 !important; } /* Remove any default margins on the stock/actions wrapper */ body.page-layout-winter-sale .product-item .product-item-inner, body.category-winter-sale .product-item .product-item-inner, [data-content-type="products"][data-appearance="carousel"] .product-item .product-item-inner { gap: 4px !important; } /* Target the specific stock-status-row class - MAXIMUM SPECIFICITY Override */ body.page-layout-winter-sale .product-item .product-info .stock-status-row.mt-1.mb-1, body.page-layout-winter-sale .product-item .product-info .stock-status-row.mt-1, body.page-layout-winter-sale .product-item .product-info .stock-status-row.mb-1, body.page-layout-winter-sale .product-item .product-info .stock-status-row, body.category-winter-sale .product-item .product-info .stock-status-row.mt-1.mb-1, body.category-winter-sale .product-item .product-info .stock-status-row.mt-1, body.category-winter-sale .product-item .product-info .stock-status-row.mb-1, body.category-winter-sale .product-item .product-info .stock-status-row, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info .stock-status-row.mt-1.mb-1, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info .stock-status-row.mt-1, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info .stock-status-row.mb-1, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info .stock-status-row, body.page-layout-winter-sale .product-item .stock-status-row.mt-1.mb-1, body.page-layout-winter-sale .product-item .stock-status-row.mt-1, body.page-layout-winter-sale .product-item .stock-status-row.mb-1, body.page-layout-winter-sale .product-item .stock-status-row, body.category-winter-sale .product-item .stock-status-row.mt-1.mb-1, body.category-winter-sale .product-item .stock-status-row.mt-1, body.category-winter-sale .product-item .stock-status-row.mb-1, body.category-winter-sale .product-item .stock-status-row, [data-content-type="products"][data-appearance="carousel"] .product-item .stock-status-row.mt-1.mb-1, [data-content-type="products"][data-appearance="carousel"] .product-item .stock-status-row.mt-1, [data-content-type="products"][data-appearance="carousel"] .product-item .stock-status-row.mb-1, [data-content-type="products"][data-appearance="carousel"] .product-item .stock-status-row { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; /* Nuclear option: zero ALL padding */ } /* Remove space-y-3 gap for product-info specifically between price and stock */ body.page-layout-winter-sale .product-item .product-info, body.category-winter-sale .product-item .product-info, [data-content-type="products"][data-appearance="carousel"] .product-item .product-info { gap: 0.25rem !important; /* Reduce from space-y-3 (0.75rem) to 0.25rem */ } /* =========================================== WINTER SALE - FORCE 6 PRODUCTS PER ROW =========================================== */ body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 1rem !important; width: 100% !important; } body.page-layout-winter-sale ul.grid > li, body.page-layout-winter-sale .grid > .product-item { width: 100% !important; max-width: 100% !important; } @media (min-width: 1537px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (max-width: 1536px) and (min-width: 1281px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @media (max-width: 1280px) and (min-width: 1025px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 1024px) and (min-width: 769px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* =========================================== WINTER SALE - FORCE 6 COLUMNS ON DESKTOP Override all previous rules - HIGHEST PRIORITY =========================================== */ @media (min-width: 1024px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid, body.page-layout-winter-sale .products-grid .product-items, body.page-layout-winter-sale .product-items { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (min-width: 768px) and (max-width: 1023px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid, body.page-layout-winter-sale .products-grid .product-items, body.page-layout-winter-sale .product-items { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (min-width: 640px) and (max-width: 767px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid, body.page-layout-winter-sale .products-grid .product-items, body.page-layout-winter-sale .product-items { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 639px) { body.page-layout-winter-sale ul.grid, body.page-layout-winter-sale .grid, body.page-layout-winter-sale .products-grid .product-items, body.page-layout-winter-sale .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================================== WINTER SALE - OLD PRICE STYLING Make old price more visible: black, strikethrough, appropriate size ========================================================================== */ /* Old price block - Winter Sale specific */ body.page-layout-winter-sale .product-item .old-price-block, body.page-layout-winter-sale .products-grid .old-price-block, body.category-winter-sale .product-item .old-price-block { display: block !important; visibility: visible !important; color: #000000 !important; text-decoration: line-through !important; font-size: 0.75rem !important; /* 12px - readable on mobile */ line-height: 1.2 !important; margin-top: 2px !important; opacity: 0.8 !important; } body.page-layout-winter-sale .product-item .old-price-block .price, body.page-layout-winter-sale .products-grid .old-price-block .price, body.category-winter-sale .product-item .old-price-block .price { color: #000000 !important; text-decoration: line-through !important; font-size: inherit !important; -webkit-text-fill-color: #000000 !important; } /* Desktop - slightly larger old price */ @media (min-width: 768px) { body.page-layout-winter-sale .product-item .old-price-block, body.page-layout-winter-sale .products-grid .old-price-block, body.category-winter-sale .product-item .old-price-block { font-size: 0.8rem !important; /* ~13px on desktop */ } } /* Large desktop - even more readable */ @media (min-width: 1024px) { body.page-layout-winter-sale .product-item .old-price-block, body.page-layout-winter-sale .products-grid .old-price-block, body.category-winter-sale .product-item .old-price-block { font-size: 0.85rem !important; /* ~14px on large screens */ } } /* ============================================ FIX: Prevent Add to Cart button overflow ============================================ */ /* Ensure product card has proper overflow handling */ body.page-layout-winter-sale .product-item, body.category-winter-sale .product-item, [data-content-type="products"][data-appearance="carousel"] .product-item, .product.product-item.card { overflow: hidden !important; } /* Price and button row - proper flex layout */ body.page-layout-winter-sale .product-item .mt-auto.pt-2, body.category-winter-sale .product-item .mt-auto.pt-2, [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto.pt-2, .product-item .mt-auto.pt-2 { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; /* CHANGED: Allow price to show fully */ } /* Price container - flexible width but visible */ body.page-layout-winter-sale .product-item .mt-auto.pt-2 > div:first-child, body.category-winter-sale .product-item .mt-auto.pt-2 > div:first-child, [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto.pt-2 > div:first-child, .product-item .mt-auto.pt-2 > div.text-gray-900 { flex: 1 1 auto !important; min-width: 0 !important; overflow: visible !important; /* CHANGED: Show full price */ max-width: calc(100% - 50px) !important; /* Reserve space for button */ } /* Add to cart button - fixed size, never shrink */ body.page-layout-winter-sale .product-item .mt-auto.pt-2 button, body.category-winter-sale .product-item .mt-auto.pt-2 button, [data-content-type="products"][data-appearance="carousel"] .product-item .mt-auto.pt-2 button, .product-item .mt-auto.pt-2 button[data-addto="cart"], .product-item .mt-auto.pt-2 button.btn-primary { flex: 0 0 auto !important; /* Don't grow or shrink */ margin-left: auto !important; } /* Price text - REMOVED truncation to show full price with unit */ body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price, .product-item .price-box .price { white-space: normal !important; /* Allow wrapping if needed */ overflow: visible !important; /* Show full price */ text-overflow: clip !important; /* No ellipsis */ word-break: keep-all !important; /* Keep price together */ } /* Mobile: Reduce price font size further */ @media (max-width: 640px) { body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price, .product-item .price-box .price { font-size: 0.9rem !important; } body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.7rem !important; } } /* ============================================ FIX: Make price smaller to fit better ============================================ */ /* Reduce price font size on all devices */ body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, .product-item .price-box .price { font-size: 0.95rem !important; /* Reduced from 1rem */ } @media (min-width: 768px) and (max-width: 1024px) { body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, .product-item .price-box .price { font-size: 1rem !important; } } @media (min-width: 1025px) { body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, .product-item .price-box .price { font-size: 1.1rem !important; } } /* Price container - adjust max-width to show more of the price */ body.page-layout-winter-sale .product-item .mt-auto.pt-2 > div:first-child, body.category-winter-sale .product-item .mt-auto.pt-2 > div:first-child, .product-item .mt-auto.pt-2 > div.text-gray-900 { max-width: calc(100% - 42px) !important; /* Reduced button space from 50px to 42px */ } /* ============================================ FIX: Stack price and unit vertically ============================================ */ /* Make price box stack vertically on product cards */ body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* OLD RULES REMOVED - Replaced by ULTIMATE PRICE CONTAINER FIX below */ /* OLD RESPONSIVE RULES - Handled by ULTIMATE PRICE CONTAINER FIX */ /* OLD WINTER SALE SPECIFIC RULES REMOVED - Now handled universally by: - ULTIMATE PRICE CONTAINER FIX (for prices) - MOBILE LAYOUT FIXES (for buttons and layout) */ /* ALL OLD WINTER SALE SPECIFIC RULES REMOVED Now using universal rules from ULTIMATE PRICE CONTAINER FIX and MOBILE LAYOUT FIXES */ /* ============================================ MOBILE FIX: Ensure price is fully visible ============================================ */ @media (max-width: 480px) { /* Smaller price on very small screens */ body.page-layout-winter-sale .product-item .price-box .price, body.page-layout-winter-sale .product-item .special-price .price, body.category-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .special-price .price { font-size: 0.8rem !important; } /* Give more space to price by making button smaller */ body.page-layout-winter-sale .product-item button.btn.btn-primary, body.category-winter-sale .product-item button.btn.btn-primary { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; padding: 0.15rem !important; } body.page-layout-winter-sale .product-item button.btn.btn-primary svg, body.category-winter-sale .product-item button.btn.btn-primary svg { width: 16px !important; height: 16px !important; } /* Price container - more space */ body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { max-width: calc(100% - 32px) !important; } /* Old price smaller */ body.page-layout-winter-sale .product-item .old-price .price, body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.6rem !important; } } /* Tablet portrait fix */ @media (min-width: 481px) and (max-width: 768px) { body.page-layout-winter-sale .product-item .price-box .price, body.page-layout-winter-sale .product-item .special-price .price, body.category-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .special-price .price { font-size: 0.85rem !important; } body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { max-width: calc(100% - 36px) !important; } } /* ============================================ MOBILE FINAL FIX: Price fully visible ============================================ */ @media (max-width: 480px) { /* Allow price to take more space - button floats right */ body.page-layout-winter-sale .product-item .mt-auto.pt-2, body.category-winter-sale .product-item .mt-auto.pt-2 { flex-wrap: wrap !important; gap: 4px !important; } /* Price takes full width, wraps naturally */ body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900, body.page-layout-winter-sale .product-item .mt-auto.pt-2 > div:first-child, body.category-winter-sale .product-item .mt-auto.pt-2 > div:first-child { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; } /* Button on same line as price, aligned top-right */ body.page-layout-winter-sale .product-item .mt-auto.pt-2 > button, body.category-winter-sale .product-item .mt-auto.pt-2 > button { flex: 0 0 auto !important; align-self: flex-start !important; margin-left: auto !important; } /* Card needs relative positioning for button */ body.page-layout-winter-sale .product-item, body.category-winter-sale .product-item { position: relative !important; } /* Smaller font to fit */ body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price { font-size: 0.75rem !important; line-height: 1.3 !important; } } /* ============================================ UNIFORM: Price and unit same size ============================================ */ /* All price elements including unit - same size */ body.page-layout-winter-sale .product-item .price-box .price, body.page-layout-winter-sale .product-item .price-box .price-wrapper, body.page-layout-winter-sale .product-item .price-box .price-label, body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price-wrapper, body.category-winter-sale .product-item .price-box .price-label, body.category-winter-sale .product-item .price-box { font-size: inherit !important; } /* Main price container - set the base size */ body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { font-size: 0.9rem !important; font-weight: 700 !important; color: #dc2626 !important; } /* Desktop */ @media (min-width: 1024px) { body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { font-size: 0.95rem !important; } } @media (min-width: 1280px) { body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { font-size: 1rem !important; } } /* Mobile */ @media (max-width: 640px) { body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { font-size: 0.8rem !important; } } @media (max-width: 480px) { body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { font-size: 0.75rem !important; } } /* Old price - keep smaller and gray */ body.page-layout-winter-sale .product-item .old-price, body.page-layout-winter-sale .product-item .old-price-block, body.category-winter-sale .product-item .old-price, body.category-winter-sale .product-item .old-price-block { font-size: 0.7rem !important; font-weight: 400 !important; color: #6b7280 !important; } body.page-layout-winter-sale .product-item .old-price .price, body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price .price, body.category-winter-sale .product-item .old-price-block .price { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } /* ============================================ MOBILE FIX: Prevent price overlap ============================================ */ @media (max-width: 480px) { /* Price section - stack vertically */ body.page-layout-winter-sale .product-item .mt-auto.pt-2 > div:first-child, body.category-winter-sale .product-item .mt-auto.pt-2 > div:first-child { /* ============================================ PRICE FIX: Keep horizontal layout, prevent overlap ============================================ */ /* All prices uniform size */ body.page-layout-winter-sale .product-item .price, body.category-winter-sale .product-item .price { font-size: 0.875rem !important; font-weight: 700 !important; } /* Old price smaller */ body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.7rem !important; font-weight: 400 !important; color: #9ca3af !important; } /* Mobile: smaller fonts to fit */ @media (max-width: 640px) { body.page-layout-winter-sale .product-item .price, body.category-winter-sale .product-item .price { font-size: 0.8rem !important; } body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.65rem !important; } } /* ============================================ MATCH HOMEPAGE CARD STYLE - Remove restrictions ============================================ */ /* Remove all overflow restrictions on price */ /* OLD OVERFLOW RULES REMOVED - Replaced by ULTIMATE PRICE CONTAINER FIX */ /* Price styling like homepage */ body.page-layout-winter-sale .product-item .am-price-per-unit .price, body.category-winter-sale .product-item .am-price-per-unit .price { font-size: 0.95rem !important; font-weight: 700 !important; color: #dc2626 !important; } /* Old price styling like homepage */ body.page-layout-winter-sale .product-item .old-price .am-price-per-unit .price, body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price .am-price-per-unit .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.75rem !important; font-weight: 400 !important; color: #6b7280 !important; text-decoration: line-through !important; } /* Button should not overflow - keep it small */ body.page-layout-winter-sale .product-item .btn.btn-primary, body.category-winter-sale .product-item .btn.btn-primary { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; min-width: 36px !important; padding: 0.4rem !important; } /* Price row - horizontal with space between */ body.page-layout-winter-sale .product-item .mt-auto.pt-2, body.category-winter-sale .product-item .mt-auto.pt-2 { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-end !important; gap: 8px !important; } /* Mobile adjustments */ @media (max-width: 640px) { body.page-layout-winter-sale .product-item .am-price-per-unit .price, body.category-winter-sale .product-item .am-price-per-unit .price { font-size: 0.85rem !important; } body.page-layout-winter-sale .product-item .old-price .am-price-per-unit .price, body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price .am-price-per-unit .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.65rem !important; } } /* ============================================ FIX: Price box needs more width ============================================ */ /* Price container must take available space */ body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900 { flex: 1 1 auto !important; min-width: 0 !important; } /* Price box - take full width of container */ body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box { width: 100% !important; min-width: 0 !important; } /* Special price wrapper */ body.page-layout-winter-sale .product-item .special-price, body.category-winter-sale .product-item .special-price { display: block !important; width: 100% !important; } /* Old price wrapper */ body.page-layout-winter-sale .product-item .old-price, body.page-layout-winter-sale .product-item .old-price-block, body.category-winter-sale .product-item .old-price, body.category-winter-sale .product-item .old-price-block { display: block !important; width: 100% !important; } /* ============================================ FIX: Button must be 36px, price takes rest ============================================ */ body.page-layout-winter-sale .product-item .mt-auto.pt-2 > button, body.page-layout-winter-sale .product-item .mt-auto.pt-2 button.btn, body.page-layout-winter-sale .product-item button.btn.btn-primary, body.category-winter-sale .product-item .mt-auto.pt-2 > button, body.category-winter-sale .product-item .mt-auto.pt-2 button.btn, body.category-winter-sale .product-item button.btn.btn-primary { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 6px !important; flex-shrink: 0 !important; flex-grow: 0 !important; } body.page-layout-winter-sale .product-item button.btn svg, body.category-winter-sale .product-item button.btn svg { width: 20px !important; height: 20px !important; } /* ============================================ OVERRIDE products-grid button size ============================================ */ body.page-layout-winter-sale .products-grid .product-item button.btn-primary, body.page-layout-winter-sale .products-grid .product-item button.btn.btn-primary, body.page-layout-winter-sale .products.mode-grid .product-item button.btn-primary, body.page-layout-winter-sale .products.mode-grid .product-item button.btn.btn-primary, body.category-winter-sale .products-grid .product-item button.btn-primary, body.category-winter-sale .products-grid .product-item button.btn.btn-primary, body.category-winter-sale .products.mode-grid .product-item button.btn-primary, body.category-winter-sale .products.mode-grid .product-item button.btn.btn-primary { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 6px !important; } /* Mobile image centering fix - SCOPED to winter-sale only */ @media (max-width: 767px) { body.page-layout-winter-sale .product-item-photo { display: flex !important; align-items: center !important; justify-content: center !important; } body.page-layout-winter-sale .product-item-photo .product-image-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } body.page-layout-winter-sale .product-item-photo .product-image-wrapper img, body.page-layout-winter-sale .product-item-photo img.product-image-photo { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: center center !important; margin: auto !important; } } /* Mobile image fill fix - SCOPED to winter-sale only */ @media (max-width: 767px) { body.page-layout-winter-sale .product-item-photo { aspect-ratio: 1 / 1 !important; padding: 0 !important; } body.page-layout-winter-sale .product-item-photo .product-image-wrapper { width: 100% !important; height: 100% !important; padding: 0 !important; } body.page-layout-winter-sale .product-item-photo .product-image-wrapper img, body.page-layout-winter-sale .product-item-photo > img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; padding: 4px !important; } } /* ============================================ FIX: Standardize price dimensions across all product listings Applied to: category pages, search results, carousels ============================================ */ /* Unified font-size for entire price-box container (including unit text like RON/m2, RON/buc) */ body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box, body.catalogsearch-result-index .product-item .price-box, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box, .product-item .price-box, .products-grid .product-item .price-box, .products-list .product-item .price-box, /* Target Amasty/Magento specific price containers */ .price-container, .price-box.price-final_price, .price-wrapper, [data-price-type] { font-size: 1.125rem !important; /* 18px - BASE size for entire price container */ line-height: 1.3 !important; } /* Force ALL elements inside price-box to inherit the same font-size - MAXIMUM SPECIFICITY */ body.page-layout-winter-sale .product-item .price-box *, body.page-layout-winter-sale .product-item .price-box span, body.page-layout-winter-sale .product-item .price-box div, body.category-winter-sale .product-item .price-box *, body.category-winter-sale .product-item .price-box span, body.category-winter-sale .product-item .price-box div, body.catalogsearch-result-index .product-item .price-box *, body.catalogsearch-result-index .product-item .price-box span, body.catalogsearch-result-index .product-item .price-box div, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box *, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box span, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box div, .product-item .price-box *, .product-item .price-box span, .product-item .price-box div, .products-grid .product-item .price-box *, .products-grid .product-item .price-box span, .products-grid .product-item .price-box div, .products-list .product-item .price-box *, .products-list .product-item .price-box span, .products-list .product-item .price-box div, /* Target Amasty/Magento specific classes */ .price-container *, .price-box.price-final_price *, .price-wrapper *, [data-price-type] *, .price-per-unit-wrapper, .price-label { font-size: inherit !important; /* All children inherit from price-box */ line-height: inherit !important; } /* Unified price styling for all contexts */ body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, body.catalogsearch-result-index .product-item .price-box .price, [data-content-type="products"][data-appearance="carousel"] .product-item .price-box .price, .product-item .price-box .price, .products-grid .product-item .price-box .price, .products-list .product-item .price-box .price { font-size: inherit !important; /* Inherit from price-box container */ font-weight: 700 !important; line-height: 1.3 !important; color: #dc2626 !important; /* red-600 */ } /* Old price rules moved to _hide-regular-price.css — single source of truth. Only winter-sale-scoped overrides remain below. */ body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price-block .price { font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.3 !important; color: #6b7280 !important; text-decoration: line-through !important; } /* Global old-price and price-box rules removed — now handled by _hide-regular-price.css */ /* ============================================ MOBILE LAYOUT FIXES ============================================ */ /* FIX 1: Product title should have fixed height for 2 lines */ body .product-item .product-info > div:first-child, body .product-item .product-info .mt-2.mb-1.flex.items-center { min-height: 3.5rem !important; /* ~56px - enough for 2 lines of text */ display: flex !important; align-items: center !important; justify-content: center !important; } /* FIX 2: Price + Button container should be column on mobile, row on desktop */ body .product-item .mt-auto.pt-2.w-full { display: flex !important; flex-direction: column !important; /* Stack vertically on mobile */ align-items: stretch !important; /* Full width elements */ gap: 0.75rem !important; /* 12px gap between price and button */ } /* On mobile, price box should take full width */ @media (max-width: 767px) { body .product-item .mt-auto.pt-2 > div:first-child { width: 100% !important; flex-shrink: 1 !important; /* Allow shrinking */ } body .product-item .mt-auto.pt-2 button, body .product-item .mt-auto.pt-2 a.btn { width: 100% !important; flex-shrink: 0 !important; } } /* On desktop (≥768px), use horizontal layout */ @media (min-width: 768px) { body .product-item .mt-auto.pt-2.w-full { flex-direction: row !important; /* Horizontal on desktop */ align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } body .product-item .mt-auto.pt-2 > div:first-child { flex-shrink: 0 !important; width: auto !important; } body .product-item .mt-auto.pt-2 button, body .product-item .mt-auto.pt-2 a.btn { width: auto !important; flex-shrink: 0 !important; } } /* ============================================ FIX IMAGINI - ULTRA SPECIFIC OVERRIDE ============================================ */ /* CRITICAL: Override padding-bottom pe imagini - SCOPED to winter-sale */ body.page-layout-winter-sale .product-item .product-item-photo, body.page-layout-winter-sale .card .product-item-photo, body.category-winter-sale .product-item .product-item-photo { padding: 1rem !important; aspect-ratio: 1 / 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* Mobile - SCOPED */ @media (max-width: 767px) { body.page-layout-winter-sale .product-item .product-item-photo, body.page-layout-winter-sale .card .product-item-photo, body.category-winter-sale .product-item .product-item-photo { padding: 0.75rem !important; } } /* ============================================ FINAL FIX - MAXIMUM SPECIFICITY Override Hyva's padding-bottom: 100% hack ============================================ */ /* Target product images - SCOPED to winter-sale */ body.page-layout-winter-sale .products-grid .product-item-photo, body.page-layout-winter-sale .products.mode-grid .product-item-photo, body.category-winter-sale .products-grid .product-item-photo { padding: 1rem !important; aspect-ratio: 1 / 1 !important; } /* Mobile override - SCOPED */ @media (max-width: 767px) { body.page-layout-winter-sale .products-grid .product-item-photo, body.page-layout-winter-sale .products.mode-grid .product-item-photo, body.category-winter-sale .products-grid .product-item-photo { padding: 0.75rem !important; } } /* ============================================ ULTIMATE FIX - DOUBLED SELECTOR SPECIFICITY This MUST override Hyva's padding-bottom: 100% ============================================ */ /* DOUBLED SELECTOR - SCOPED to winter-sale */ body.page-layout-winter-sale .products-grid .product-item-photo.product-item-photo, body.category-winter-sale .products-grid .product-item-photo.product-item-photo { padding: 1rem !important; padding-bottom: 1rem !important; aspect-ratio: 1 / 1 !important; } @media (max-width: 767px) { body.page-layout-winter-sale .products-grid .product-item-photo.product-item-photo, body.category-winter-sale .products-grid .product-item-photo.product-item-photo { padding: 0.75rem !important; padding-bottom: 0.75rem !important; } } /* ============================================ FIX: MOBILE PRICE DISPLAY - NO TRUNCATION Show full price with unit measure (RON/m², etc.) ============================================ */ /* Mobile: Keep horizontal layout but allow price to wrap/shrink properly */ @media (max-width: 640px) { /* Price+Button container - KEEP HORIZONTAL but remove overflow hidden */ body .product-item .mt-auto.pt-2.w-full, body .product-item .mt-auto.pt-2, body .product-item .mt-auto, body.page-layout-winter-sale .product-item .mt-auto.pt-2, body.page-layout-winter-sale .product-item .mt-auto, body.category-winter-sale .product-item .mt-auto.pt-2, body.category-winter-sale .product-item .mt-auto, body.catalogsearch-result-index .product-item .mt-auto.pt-2, body.catalogsearch-result-index .product-item .mt-auto, body.catalog-category-view .product-item .mt-auto.pt-2, body.catalog-category-view .product-item .mt-auto, [data-content-type="products"] .product-item .mt-auto.pt-2, [data-content-type="products"] .product-item .mt-auto { flex-direction: row !important; /* KEEP HORIZONTAL */ align-items: flex-end !important; /* Align to bottom */ justify-content: space-between !important; gap: 4px !important; overflow: visible !important; width: 100% !important; } /* Price container wrapper (.text-gray-900) - flexible width, allow wrap */ body .product-item .text-gray-900, body .product-item .text-gray-900.flex-shrink-0, body .product-item > div > div.text-gray-900, body.page-layout-winter-sale .product-item .text-gray-900, body.category-winter-sale .product-item .text-gray-900, body.catalogsearch-result-index .product-item .text-gray-900, body.catalog-category-view .product-item .text-gray-900 { flex: 1 1 auto !important; /* Grow and shrink */ min-width: 0 !important; /* Allow shrinking below content */ max-width: calc(100% - 48px) !important; /* Leave space for button */ overflow: visible !important; } /* Price-box itself - allow content to wrap */ body .product-item .price-box, body.page-layout-winter-sale .product-item .price-box, body.category-winter-sale .product-item .price-box, body.catalogsearch-result-index .product-item .price-box, body.catalog-category-view .product-item .price-box { width: 100% !important; max-width: 100% !important; overflow: visible !important; flex-shrink: 1 !important; } /* Price text - allow wrapping, smaller font to fit */ body .product-item .price-box .price, body .product-item .special-price .price, body.page-layout-winter-sale .product-item .price-box .price, body.category-winter-sale .product-item .price-box .price, body.catalogsearch-result-index .product-item .price-box .price, body.catalog-category-view .product-item .price-box .price { white-space: normal !important; /* Allow wrap to next line */ overflow: visible !important; text-overflow: clip !important; font-size: 0.85rem !important; /* Smaller to fit */ line-height: 1.2 !important; word-break: break-word !important; } /* Unit measure (RON/m², /buc, /set) - ensure visible */ body .product-item .price-box .price-wrapper, body .product-item .price-box .price-label, body .product-item .price-box [class*="unit"], body .product-item .price-box span:not(.price), body .product-item .am-price-per-unit { white-space: normal !important; overflow: visible !important; font-size: 0.85rem !important; } /* Add to cart button - fixed size, don't overlap */ body .product-item .mt-auto.pt-2 button[data-addto="cart"], body .product-item .mt-auto.pt-2 button.btn-primary, body .product-item .mt-auto.pt-2 button.tocart, body.page-layout-winter-sale .product-item .mt-auto.pt-2 button, body.category-winter-sale .product-item .mt-auto.pt-2 button { flex: 0 0 auto !important; /* Don't grow or shrink */ width: auto !important; min-width: 44px !important; max-width: 44px !important; padding: 0.5rem !important; margin-left: auto !important; } /* Old price - smaller (winter sale only) */ body.page-layout-winter-sale .product-item .old-price-block .price, body.category-winter-sale .product-item .old-price-block .price { white-space: normal !important; overflow: visible !important; font-size: 0.65rem !important; } } /* Tablet (641px-768px): Keep horizontal but allow price to show fully */ @media (min-width: 641px) and (max-width: 768px) { body .product-item .price-box, body .product-item .price-box .price { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; } } /* ============================================ CRITICAL FIX: PRODUCT-INFO OVERFLOW The .product-info container clips the price with overflow:hidden Force overflow-visible class to work ============================================ */ html body .product-item .product-info, html body .product-item .product-info.flex, html body .product-item .product-info.flex.flex-col, html body .product-item .product-info.overflow-visible, body.catalog-category-view .product-item .product-info, body.catalog-category-view .product-item .product-info.overflow-visible, body.page-layout-winter-sale .product-item .product-info, body.page-layout-winter-sale .product-item .product-info.overflow-visible, body.catalogsearch-result-index .product-item .product-info, body.catalogsearch-result-index .product-item .product-info.overflow-visible, .product-info.overflow-visible { overflow: visible !important; } /* ============================================ CRITICAL FIX: MOBILE PRICE - MAXIMUM SPECIFICITY Forces price to display completely with unit measure ============================================ */ /* MAXIMUM SPECIFICITY: Override ALL conflicting rules */ @media (max-width: 767px) { /* Container .mt-auto - MUST have overflow visible */ html body .product-item .mt-auto, html body .product-item .mt-auto.pt-2, html body .product-item .mt-auto.pt-2.w-full, html body .product-item .mt-auto.pt-2.w-full.flex, html body .product-item .mt-auto.pt-2.w-full.flex.flex-row, html body.page-layout-winter-sale .product-item .mt-auto, html body.category-winter-sale .product-item .mt-auto, html body.catalog-category-view .product-item .mt-auto, html body.catalogsearch-result-index .product-item .mt-auto { overflow: visible !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: flex-start !important; gap: 6px !important; } /* Container .text-gray-900 (price wrapper) - flexible width */ html body .product-item .text-gray-900, html body .product-item .text-gray-900.flex-shrink-0, html body .product-item div.text-gray-900, html body.page-layout-winter-sale .product-item .text-gray-900, html body.category-winter-sale .product-item .text-gray-900, html body.catalog-category-view .product-item .text-gray-900 { overflow: visible !important; flex: 1 1 auto !important; max-width: calc(100% - 50px) !important; min-width: 0 !important; } /* Price box - full content visible */ html body .product-item .price-box, html body .product-item .price-box.price-final_price, html body.page-layout-winter-sale .product-item .price-box, html body.category-winter-sale .product-item .price-box { overflow: visible !important; white-space: normal !important; width: 100% !important; } /* Price text - wrap if needed, show complete */ html body .product-item .price-box .price, html body .product-item .price-box .special-price .price, html body .product-item .price-container .price, html body.page-layout-winter-sale .product-item .price-box .price, html body.category-winter-sale .product-item .price-box .price { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; font-size: clamp(0.75rem, 2.5vw, 0.95rem) !important; line-height: 1.2 !important; word-break: keep-all !important; } /* Unit measure span (RON/m2, /buc, etc) - MUST be visible */ html body .product-item .am-price-per-unit, html body .product-item .price-box .am-price-per-unit, html body .product-item span[class*="unit"], html body .product-item .price-per-unit-wrapper { overflow: visible !important; white-space: normal !important; display: inline !important; font-size: clamp(0.75rem, 2.5vw, 0.95rem) !important; } /* Add to cart button - FIXED size on right */ html body .product-item .mt-auto button, html body .product-item .mt-auto.pt-2 button, html body .product-item button[data-addto="cart"], html body .product-item button.tocart { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; padding: 0 !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Old price - smaller but visible (winter sale only) */ html body.page-layout-winter-sale .product-item .old-price-block .price, html body.category-winter-sale .product-item .old-price-block .price { overflow: visible !important; white-space: normal !important; font-size: 0.6rem !important; } }