/** * Cart Drawer - Premium Slide-in Cart * * @package ChildTheme_Clean * * STACKING CONTEXT FIXES: * - Drawer and overlay are direct children of (rendered in footer.php) * - NO isolation: isolate on drawer/overlay (prevents stacking context traps) * - Parent containers (#page, body, html, footer, header) explicitly set to: * - isolation: auto * - transform: none * - filter: none * - perspective: none * - opacity: 1 * - Drawer uses z-index: 2147483647, overlay uses 2147483646 * - Body-level CSS rules (body > .cart-drawer) ensure drawer is always on top * - Page scroll is disabled via body.cart-drawer-open class when drawer is active */ /* ============================================ OVERLAY ============================================ */ .cart-drawer-overlay { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0, 0, 0, 0.5) !important; z-index: 2147483646 !important; /* Just below drawer */ opacity: 0 !important; visibility: hidden !important; display: block !important; transition: opacity 0.3s ease, visibility 0.3s ease; /* NO isolation - prevents stacking context trapping */ pointer-events: none !important; will-change: opacity; } .cart-drawer-overlay.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ============================================ DRAWER CONTAINER ============================================ */ /* Prevent page scrolling when drawer is open */ body.cart-drawer-open { overflow: hidden !important; } html.cart-drawer-open { overflow: hidden !important; } /* Ensure drawer is above footer and all other elements */ /* Prevent parent containers from creating stacking context */ .site-footer, .footer-main, footer, .footer-container-inner, .footer-bottom, .footer-bottom-inner, .footer-columns, .footer-section { z-index: 1 !important; position: relative; /* Prevent these from creating stacking context above drawer */ transform: none !important; filter: none !important; isolation: auto !important; perspective: none !important; opacity: 1 !important; } /* Force footer to be below cart drawer on mobile */ @media (max-width: 767px) { /* Force footer to be below drawer - very specific selectors */ .site-footer, .site-footer.footer-main, .footer-main, footer, #page .site-footer, #page footer { z-index: 1 !important; position: relative !important; overflow: visible !important; isolation: auto !important; transform: none !important; filter: none !important; opacity: 1 !important; } /* Ensure cart drawer is always above footer - maximum specificity with ID */ #cart-drawer, #cart-drawer.active, body > #cart-drawer, body > #cart-drawer.active, body > .cart-drawer, body > .cart-drawer.active, body .cart-drawer, body .cart-drawer.active, html body > .cart-drawer, html body > .cart-drawer.active { z-index: 2147483647 !important; position: fixed !important; top: 0 !important; left: auto !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 0 !important; } body > .cart-drawer-overlay, body > .cart-drawer-overlay.active, body .cart-drawer-overlay, body .cart-drawer-overlay.active { z-index: 2147483646 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; } } /* Ensure header doesn't create stacking context */ /* DO NOT override header position - it needs to stay fixed */ .site-header, header, #masthead { z-index: 1000 !important; /* Header should be below drawer - but keep its fixed position */ /* position: fixed is set in header.css - don't override it */ transform: none !important; filter: none !important; isolation: auto !important; perspective: none !important; opacity: 1 !important; } /* Only apply transform/filter fixes to header-container, not the header itself */ .header-container { transform: none !important; filter: none !important; isolation: auto !important; perspective: none !important; } /* Ensure #page doesn't create stacking context that traps drawer */ #page.site { position: relative !important; z-index: 1 !important; /* Remove any transform/filter that creates stacking context */ transform: none !important; filter: none !important; perspective: none !important; will-change: auto !important; isolation: auto !important; opacity: 1 !important; } /* Ensure body and html don't create stacking context issues */ body { position: relative !important; z-index: 0 !important; transform: none !important; filter: none !important; /* Prevent stacking context traps */ isolation: auto !important; perspective: none !important; opacity: 1 !important; } html { position: static !important; transform: none !important; filter: none !important; /* Prevent stacking context traps */ isolation: auto !important; perspective: none !important; opacity: 1 !important; } /* Ensure any scripts/elements injected by wp_footer() don't interfere */ body>*:not(.cart-drawer):not(.cart-drawer-overlay) { z-index: auto !important; } /* Ensure cart drawer and overlay are always on top as direct children of body */ body>.cart-drawer-overlay { z-index: 2147483646 !important; position: fixed !important; } body>.cart-drawer { z-index: 2147483647 !important; position: fixed !important; top: 0 !important; bottom: auto !important; margin: 0 !important; padding: 0 !important; } .cart-drawer { position: fixed !important; top: 0 !important; right: 0 !important; width: 100% !important; max-width: 420px !important; height: 100vh !important; background-color: #ffffff !important; z-index: 2147483647 !important; /* Maximum z-index value - always above overlay */ display: flex !important; flex-direction: column !important; transform: translateX(100%) !important; /* Hidden by default - slides in from right */ visibility: hidden !important; opacity: 0 !important; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); /* NO isolation - prevents stacking context trapping */ /* NO transform/filter/perspective/opacity < 1 on parent containers */ will-change: transform; /* Ensure drawer is positioned relative to viewport, not parent */ margin: 0 !important; padding: 0 !important; left: auto !important; /* Drawer is always clickable when visible */ pointer-events: none !important; /* Enable touch scrolling on mobile */ -webkit-overflow-scrolling: touch; touch-action: pan-y; } /* Force all footer elements to be below drawer */ .site-footer *, .footer-main *, footer *, .footer-container-inner *, .footer-bottom *, .footer-bottom-inner *, .footer-columns *, .footer-section * { z-index: inherit !important; position: relative !important; /* Prevent any transform/filter that creates stacking context */ transform: none !important; filter: none !important; isolation: auto !important; } .cart-drawer.active { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; touch-action: pan-y !important; } @media (max-width: 767px) { .cart-drawer { max-width: 100% !important; width: 100% !important; z-index: 2147483647 !important; position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; display: flex !important; visibility: hidden !important; opacity: 0 !important; transform: translateX(100%) !important; pointer-events: none !important; } .cart-drawer.active { transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; top: 0 !important; bottom: 0 !important; position: fixed !important; } /* Ensure overlay works on mobile */ .cart-drawer-overlay { z-index: 2147483646 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .cart-drawer-overlay.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Ensure cart drawer is always on top on mobile */ body > .cart-drawer, body > .cart-drawer.active { z-index: 2147483647 !important; position: fixed !important; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; } body > .cart-drawer-overlay, body > .cart-drawer-overlay.active { z-index: 2147483646 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; } } /* ============================================ DRAWER HEADER ============================================ */ .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 20px; border-bottom: 1px solid #e5e5e5; } .cart-drawer-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1.125rem; font-weight: 600; color: #1a1a1a; margin: 0; padding: 0; } .cart-drawer-close { background: transparent; border: none; padding: 4px; cursor: pointer; color: #1a1a1a; display: flex; align-items: center; justify-content: center; line-height: 1; } .cart-drawer-close svg { width: 20px; height: 20px; } .cart-drawer-close:hover, .cart-drawer-close:focus { opacity: 0.7; outline: none; } /* ============================================ DRAWER CONTENT (Scrollable) ============================================ */ .cart-drawer-content { flex: 1; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; } /* ============================================ FREE DELIVERY PROGRESS BAR ============================================ */ .cart-delivery-progress { padding: 20px 24px; border-bottom: 1px solid #e5e5e5; } .delivery-progress-container { background-color: #f0f5f2; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .delivery-progress-text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; color: #1a1a1a; margin: 0 0 12px 0; padding: 0; text-align: center; } .delivery-progress-text strong { font-weight: 600; } .delivery-progress-bar-wrapper { position: relative; width: 100%; height: 4px; background-color: #e0e0e0; border-radius: 2px; margin-bottom: 16px; overflow: hidden; } .delivery-progress-bar { height: 100%; background-color: var(--primary-color, #245c2a); border-radius: 2px; transition: width 0.3s ease; } .delivery-progress-labels { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .delivery-label-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; } .delivery-label-item svg { width: 20px; height: 20px; color: var(--primary-color, #245c2a); flex-shrink: 0; } .delivery-label-item span { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.6875rem; font-weight: 500; color: #666; text-align: center; line-height: 1.3; } /* ============================================ CART ITEMS ============================================ */ .cart-drawer-items { padding: 0; } .cart-drawer-item { display: flex; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #e5e5e5; } .cart-item-image-wrapper { flex-shrink: 0; width: 80px; height: 80px; background-color: #f5f5f0; border-radius: 4px; overflow: hidden; } .cart-item-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-item-details { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .cart-item-name { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 400; color: #1a1a1a; margin: 0; padding: 0; line-height: 1.4; } .cart-item-name a { color: inherit; text-decoration: none; } .cart-item-variation { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; color: #666; font-weight: 300; margin: 0; padding: 0; } .cart-item-price { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 600; color: #1a1a1a; margin-left: auto; } .cart-item-quantity { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .quantity-btn { width: 32px; height: 32px; background-color: #f5f5f0; border: 1px solid #e5e5e0; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; font-weight: 500; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .quantity-btn:hover, .quantity-btn:focus { background-color: #e5e5e0; outline: none; } .quantity-value { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 500; color: #1a1a1a; min-width: 24px; text-align: center; } .cart-item-remove { background: transparent; border: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 400; color: #666; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 4px; align-self: flex-end; } .cart-item-remove:hover, .cart-item-remove:focus { color: #1a1a1a; outline: none; } /* ============================================ YOU MAY ALSO LIKE ============================================ */ .cart-drawer-recommendations { padding: 24px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .recommendations-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1a1a; margin: 0 0 16px 0; padding: 0; } .recommended-product-card { display: flex; flex-direction: column; gap: 12px; } .recommended-product-image-wrapper { width: 100%; aspect-ratio: 1 / 1; background-color: #f5f5f0; border-radius: 4px; overflow: hidden; } .recommended-product-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; } .recommended-product-name { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.875rem; font-weight: 400; color: #1a1a1a; margin: 0; padding: 0; line-height: 1.4; } .recommended-product-add { width: 100%; padding: 12px 20px; background-color: var(--primary-color, #245c2a); color: #ffffff; border: none; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease; } .recommended-product-add:hover, .recommended-product-add:focus { background-color: #1a4a1f; outline: none; } /* ============================================ EMPTY CART STATE ============================================ */ .cart-drawer-empty { padding: 60px 24px; text-align: center; } .cart-drawer-empty p { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; color: #666; margin: 0; padding: 0; } /* ============================================ DRAWER FOOTER ============================================ */ .cart-drawer-footer { padding: 24px; border-top: 1px solid #e5e5e5; background-color: #ffffff; } .cart-drawer-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; } .subtotal-label { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 500; color: #666; } .subtotal-amount { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 500; color: #1a1a1a; } .cart-drawer-delivery { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; } .delivery-label { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 500; color: #666; display: flex; align-items: center; gap: 8px; } .delivery-free-badge { font-size: 0.8125rem; color: var(--primary-color, #245c2a); font-weight: 600; } .delivery-amount { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.9375rem; font-weight: 500; color: #1a1a1a; } .delivery-free { color: var(--primary-color, #245c2a); font-weight: 600; } .cart-drawer-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-top: 16px; border-top: 2px solid #1a1a1a; } .total-label { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1.125rem; font-weight: 700; color: #1a1a1a; } .total-amount { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1.125rem; font-weight: 700; color: #1a1a1a; } .cart-drawer-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .cart-action-btn { display: block; width: 100%; padding: 14px 20px; background-color: var(--primary-color, #245c2a); color: #ffffff; border: none; border-radius: 4px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; } .cart-action-btn:hover, .cart-action-btn:focus { background-color: #1a4a1f; text-decoration: none; outline: none; } .cart-continue-shopping { display: block; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.875rem; font-weight: 400; color: #1a1a1a; text-decoration: underline; padding: 8px 0; } .cart-continue-shopping:hover, .cart-continue-shopping:focus { color: #666; text-decoration: underline; outline: none; } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 767px) { .cart-drawer-header { padding: 20px 20px 16px; } .cart-delivery-progress { padding: 16px 20px; } .cart-drawer-item { padding: 16px 20px; } .cart-drawer-recommendations { padding: 20px; } .cart-drawer-footer { padding: 20px; } /* FINAL OVERRIDE - Ensure cart drawer is ALWAYS above footer on mobile */ /* This rule has maximum specificity and is placed last to override any conflicting styles */ html body > #cart-drawer:not(.active), html body > .cart-drawer:not(.active) { z-index: 2147483647 !important; position: fixed !important; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; margin: 0 !important; padding: 0 !important; transform: translateX(100%) !important; } html body > #cart-drawer.active, html body > .cart-drawer.active { z-index: 2147483647 !important; position: fixed !important; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; margin: 0 !important; padding: 0 !important; transform: translateX(0) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Force footer to be below drawer - final override */ html body .site-footer, html body .site-footer.footer-main, html body .footer-main, html body footer, html body #page .site-footer, html body #page footer { z-index: 1 !important; position: relative !important; } }