/* ===================================================== Rob Mini Cart v3.3 — Bootstrap-resistant via specificity, NOT !important, so Elementor panel controls can override. Specificity strategy: - Base structural styles: single class (.asc-x) — low specificity so Elementor's .elementor-element-XXXX .asc-x always wins. - Bootstrap resets: prefixed with "html body" to beat Bootstrap's .btn / .badge etc without blocking Elementor overrides. ===================================================== */ /* ── Body scroll lock ──────────────────────────────── */ html body.asc-body-locked { overflow: hidden; } /* ── Trigger wrapper ────────────────────────────────── */ .asc-trigger-wrap { display: inline-flex; position: relative; vertical-align: middle; } /* Base trigger — low specificity, Elementor will override colours etc */ .asc-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 52px; height: 52px; background-color: #2c2c2c; color: #fff; border-radius: 50%; cursor: pointer; padding: 0; margin: 0; line-height: 1; transition: background-color 0.2s ease, transform 0.15s ease; -webkit-user-select: none; user-select: none; } /* Bootstrap .btn reset — "html body" prefix beats Bootstrap without blocking Elementor */ html body .asc-trigger { border: none; outline: none; box-shadow: none; text-decoration: none; vertical-align: middle; white-space: nowrap; font-size: inherit; } html body .asc-trigger:hover, html body .asc-trigger:focus { transform: scale(1.05); outline: none; box-shadow: none; } html body .asc-trigger:active { transform: scale(0.97); } .asc-trigger-icon { display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; pointer-events: none; } .asc-trigger-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; } .asc-trigger-label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; line-height: 1; } /* ── Count Badge ─────────────────────────────────────── */ .asc-badge { position: absolute; top: -4px; right: -4px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; background-color: #e74c3c; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; transform: scale(0); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 1px 4px rgba(0,0,0,0.25); z-index: 1; } /* Bootstrap .badge reset */ html body .asc-badge { border: none; letter-spacing: 0; text-transform: none; vertical-align: baseline; } .asc-badge.asc-badge--visible { transform: scale(1); } /* ── Overlay ─────────────────────────────────────────── */ /* Lives on after JS moves it — no Elementor wrapper, so we can safely use higher specificity here */ html body .asc-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 100000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; margin: 0; padding: 0; border: none; pointer-events: none; } html body .asc-overlay.asc-is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Drawer Panel ────────────────────────────────────── */ /* Lives on — higher specificity is safe here */ html body .asc-drawer { position: fixed; top: 0; bottom: 0; height: 100%; width: 400px; max-width: 100vw; background-color: #fff; z-index: 100001; display: flex; flex-direction: column; overflow: hidden; margin: 0; padding: 0; border: none; border-radius: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; box-shadow: -4px 0 40px rgba(0,0,0,0.15); } html body .asc-drawer--right { right: 0; left: auto; transform: translateX(100%); } html body .asc-drawer--left { left: 0; right: auto; transform: translateX(-100%); box-shadow: 4px 0 40px rgba(0,0,0,0.15); } html body .asc-drawer.asc-is-open { transform: translateX(0); } /* ── Drawer Header ───────────────────────────────────── */ html body .asc-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #efefef; flex-shrink: 0; box-sizing: border-box; } html body .asc-drawer-title { font-size: 1.1rem; font-weight: 700; color: #1a1a1a; letter-spacing: -0.01em; margin: 0; padding: 0; line-height: 1.3; } html body .asc-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; background: transparent; border: none; border-radius: 50%; cursor: pointer; color: #666; font-size: 1.1rem; line-height: 1; padding: 0; margin: 0; outline: none; box-shadow: none; flex-shrink: 0; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } html body .asc-drawer-close:hover, html body .asc-drawer-close:focus { background-color: #f0f0f0; color: #1a1a1a; outline: none; box-shadow: none; } html body .asc-drawer-close svg { width: 18px; height: 18px; fill: currentColor; display: block; pointer-events: none; } html body .asc-drawer-close i { pointer-events: none; } /* ── Items area ──────────────────────────────────────── */ html body .asc-drawer-items { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 16px 24px; box-sizing: border-box; -webkit-overflow-scrolling: touch; transition: opacity 0.15s ease; } html body .asc-drawer-items.asc--loading { opacity: 0.4; pointer-events: none; } html body .asc-loading-msg { margin: 0; padding: 12px 0; color: #999; font-style: italic; font-size: 0.875rem; } /* WooCommerce items */ html body .asc-drawer-items .woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; } html body .asc-drawer-items .woocommerce-mini-cart__empty-message { margin: 0; color: #999; font-size: 0.9rem; padding: 16px 0; text-align: center; } html body .asc-drawer-items .mini_cart_item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f2f2f2; border-top: none; border-left: none; border-right: none; margin: 0; list-style: none; background: none; } html body .asc-drawer-items .mini_cart_item:last-child { border-bottom: none; } html body .asc-drawer-items .mini_cart_item a img { width: 64px; height: 64px; min-width: 64px; object-fit: cover; border-radius: 6px; display: block; margin: 0; } html body .asc-drawer-items .mini_cart_item a:not(.remove_from_cart_button) { font-weight: 600; font-size: 0.9rem; color: #1a1a1a; text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.35; } html body .asc-drawer-items .mini_cart_item .quantity { font-size: 0.8125rem; color: #888; display: block; } html body .asc-drawer-items .remove_from_cart_button { margin-left: auto; font-size: 1.1rem; color: #bbb; text-decoration: none; flex-shrink: 0; line-height: 1; align-self: flex-start; display: inline-flex; padding: 4px; transition: color 0.15s ease; } html body .asc-drawer-items .remove_from_cart_button:hover { color: #c0392b; text-decoration: none; } /* ── Drawer Footer ───────────────────────────────────── */ html body .asc-drawer-footer { border-top: 1px solid #efefef; border-bottom: none; border-left: none; border-right: none; padding: 20px 24px 24px; flex-shrink: 0; box-sizing: border-box; } html body .asc-subtotal-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 0.9375rem; } html body .asc-subtotal-label { color: #666; font-weight: 400; } html body .asc-subtotal-value { font-weight: 700; color: #1a1a1a; font-size: 1.05rem; } /* ── Action buttons ──────────────────────────────────── */ html body .asc-actions { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } html body .asc-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 20px; border-radius: 6px; font-size: 0.9375rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; line-height: 1.2; letter-spacing: 0.01em; outline: none; box-shadow: none; vertical-align: middle; -webkit-user-select: none; user-select: none; } html body .asc-btn:active { transform: scale(0.98); } html body .asc-btn:focus { outline: none; box-shadow: none; } html body .asc-btn-checkout { background-color: #2c2c2c; color: #fff; border: 2px solid transparent; } html body .asc-btn-checkout:hover, html body .asc-btn-checkout:focus { background-color: #111; color: #fff; text-decoration: none; } html body .asc-btn-view-cart { background-color: transparent; color: #2c2c2c; border: 2px solid #2c2c2c; } html body .asc-btn-view-cart:hover, html body .asc-btn-view-cart:focus { background-color: #2c2c2c; color: #fff; text-decoration: none; }