/* ===================================================== SHOPIFY-STYLE CART DRAWER ===================================================== */ /* ── Backdrop ── */ .cart-drawer-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); z-index: 999998; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .cart-drawer-overlay.is-open { opacity: 1; pointer-events: all; } /* ── Keep header icon in place — hide the orphaned label ── */ .minicart-main-wrapper > label:empty { display: none !important; } .minicart-main-wrapper { position: relative !important; width: 24px !important; height: 24px !important; } /* ── Drawer panel (moved to by JS) ── */ .minicart-wrapper { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; width: 400px !important; max-width: 95vw !important; height: 100dvh !important; border: none !important; border-radius: 0 !important; z-index: 999999 !important; padding: 0 !important; box-shadow: -8px 0 48px rgba(0,0,0,0.18) !important; background: #fff !important; display: flex !important; flex-direction: column !important; transform: translateX(100%) !important; transition: transform 0.38s cubic-bezier(0.4,0,0.2,1) !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } .minicart-wrapper::before, .minicart-wrapper::after { display: none !important; } .minicart-wrapper.is-open { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; } /* ── Hide the OLD minicart close button (header.php renders it, we have our own) ── */ .minicart-wrapper .minicart-close-btn { display: none !important; } /* ── Drawer header ── */ .cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; } .cart-drawer-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 8px; } .cart-drawer-count-badge { background: #FF5C29; color: #fff; font-size: 0.72rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .cart-drawer-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e8f0; background: #f8fafc; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.2s; flex-shrink: 0; } .cart-drawer-close:hover { background: #fee2e2; border-color: #fca5a5; color: #ef4444; } /* ── Scrollable item list ── */ .widget_shopping_cart_content { flex: 1 !important; overflow-y: auto !important; padding: 0 !important; width: 100% !important; float: none !important; display: flex !important; flex-direction: column !important; } /* ── Empty state ── */ .cdi-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: #94a3b8; } .cdi-empty p { font-size: 1rem; margin: 0 0 12px; } .cdi-empty a { color: #FF5C29 !important; font-size: 0.9rem !important; } /* ── Item list ── */ ul.woocommerce-mini-cart, ul.cart_list { list-style: none !important; margin: 0 !important; padding: 0 !important; flex: 1; } ul.woocommerce-mini-cart li.mini_cart_item { border-bottom: 1px solid #f1f5f9 !important; padding: 0 !important; float: none !important; width: 100% !important; line-height: normal !important; } ul.woocommerce-mini-cart li.mini_cart_item:last-child { border-bottom: none !important; } /* Item row: [remove] [img] [info] */ .cdi-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; } /* Remove × */ .cdi-remove { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 50% !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; color: #94a3b8 !important; font-size: 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; transition: all 0.2s !important; flex-shrink: 0 !important; margin-top: 2px !important; } .cdi-remove:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #ef4444 !important; } /* Image */ .cdi-img { flex-shrink: 0; } .cdi-img img, .cart-drawer-item-img { width: 72px !important; height: 72px !important; border-radius: 10px !important; object-fit: cover !important; border: 1px solid #e2e8f0 !important; display: block !important; } /* Info block */ .cdi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } /* Product name */ .cdi-name { margin: 0 !important; font-size: 0.875rem !important; font-weight: 600 !important; color: #0f172a !important; line-height: 1.3 !important; } .cdi-name a { color: #0f172a !important; text-decoration: none !important; font-size: 0.875rem !important; font-weight: 600 !important; } .cdi-name a:hover { color: #FF5C29 !important; } /* Variation text */ .cdi-info dl.variation { margin: 0 !important; font-size: 0.75rem !important; color: #94a3b8 !important; } .cdi-info dl.variation dt, .cdi-info dl.variation dd { display: inline !important; margin: 0 !important; font-size: 0.75rem !important; color: #94a3b8 !important; font-weight: 400 !important; } /* Quantity + price row */ .cdi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } /* +/- quantity widget — reset