/* ============================================================ BYC 2026 - cart quick-view (hover dropdown under the nav cart icon). A pure-CSS hover popup (like the Guides menu) - no JS. The cart icon stays a real link to /cart/ (click/tap + no-JS fallback); hovering the icon reveals a mini-cart preview. Contents = woocommerce_mini_cart() in div.widget_shopping_cart_content (themed template woocommerce/cart/mini-cart.php), kept live by the WooCommerce cart fragments. Color tokens come from the page sheet; LITERAL px only (loads on shop/product/cart pages too). ============================================================ */ .nav-cart-wrap{position:relative;display:inline-flex} /* the popup: anchored under the icon, right-aligned. padding-top is an invisible "bridge" so the cursor can travel from icon to panel without losing :hover. */ .cart-dropdown{position:absolute;top:100%;right:-6px;width:min(380px,calc(100vw - 24px)); padding-top:14px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60} .nav-cart-wrap:hover .cart-dropdown, .nav-cart-wrap:focus-within .cart-dropdown{opacity:1;visibility:visible;transform:none} /* small caret pointing up at the cart icon */ .cart-dropdown::before{content:"";position:absolute;top:8px;right:18px;width:12px;height:12px; background:var(--surface-2);border-left:1px solid var(--line-strong); border-top:1px solid var(--line-strong);transform:rotate(45deg);z-index:1} /* the panel box. NOTE: this div is what the cart fragment replaces, so style by class (survives the swap) and never put layout-critical classes only here. */ .cart-dropdown .widget_shopping_cart_content{position:relative;z-index:2; display:flex;flex-direction:column;max-height:80vh;overflow:hidden; background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,.55)} /* item list (scrolls if long). These three layout rules are qualified with .widget_shopping_cart_content so they outrank WooCommerce's default .product_list_widget styles. On .woocommerce pages (shop / product / cart) pulls those defaults in - list padding:0, row padding-left:90px and a floated ~72px thumbnail - and a plain .cart-dropdown selector loses to them, jamming the screenshot flush against the panel's left edge. The extra class wins specificity so the thumbnail keeps the same 18px inset as the subtotal/buttons below. */ .cart-dropdown .widget_shopping_cart_content .woocommerce-mini-cart{list-style:none;margin:0; padding:6px 18px;flex:1;min-height:0;overflow-y:auto;max-height:340px} .cart-dropdown .widget_shopping_cart_content .woocommerce-mini-cart-item{position:relative; display:flex;align-items:center; padding:16px 30px 16px 0;border-bottom:1px solid var(--line)} .cart-dropdown .woocommerce-mini-cart-item:last-child{border-bottom:0} /* thumb->text spacing is a margin, not flex `gap`: the remove "x" is the row's first (absolutely-positioned) child, and Chromium adds a phantom leading gap before the first in-flow item when `gap` is set, nudging the thumbnail 14px right of the subtotal/button inset. A margin keeps the thumbnail left edge aligned with the rest of the panel. */ .cart-dropdown .widget_shopping_cart_content .mini-thumb{flex:0 0 52px;line-height:0;float:none; margin-right:14px} /* transform:none / top:auto reset a sitewide "cover image" helper (top:50% + transform:translateY(-50%), meant for absolutely-positioned images) that leaks onto this thumbnail. Our img is position:static so its top:50% is inert, but the translateY(-50%) still fired and shoved it up half its height, breaking the vertical centering the row's align-items:center otherwise gives it. */ .cart-dropdown .widget_shopping_cart_content .mini-thumb img{position:static;float:none; top:auto;transform:none;width:52px;height:auto;display:block;border:1px solid var(--line);margin:0} .cart-dropdown .mini-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px} .cart-dropdown .mini-name, .cart-dropdown .mini-name a{color:var(--text);text-decoration:none; font-size:13.5px;line-height:1.35;font-weight:500} .cart-dropdown .mini-name a:hover{color:var(--accent-dim)} .cart-dropdown .mini-price{font-family:var(--mono);font-size:12.5px;color:var(--text-muted)} /* remove "x": circle, top-right of each row */ .cart-dropdown .woocommerce-mini-cart-item .remove{position:absolute;right:0;top:14px; width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line-strong);border-radius:50%;color:var(--text-muted) !important; font-size:14px;line-height:1;text-decoration:none;transition:.16s ease} .cart-dropdown .woocommerce-mini-cart-item .remove:hover{color:#fff !important; background:var(--accent);border-color:var(--accent)} /* subtotal */ .cart-dropdown .woocommerce-mini-cart__total{flex:none;display:flex;align-items:baseline; justify-content:space-between;margin:0;padding:14px 18px; border-top:1px solid var(--line);font-family:var(--mono);font-size:12px; letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)} .cart-dropdown .woocommerce-mini-cart__total strong{color:var(--text);font-weight:600} .cart-dropdown .woocommerce-mini-cart__total .woocommerce-Price-amount{ font-size:15px;color:var(--text);font-weight:600} /* buttons (stacked: View cart ghost, Checkout white primary) */ .cart-dropdown .woocommerce-mini-cart__buttons{flex:none;display:flex;flex-direction:column; gap:9px;margin:0;padding:0 18px 18px} .cart-dropdown .woocommerce-mini-cart__buttons .button{display:inline-flex; align-items:center;justify-content:center;height:44px; font-family:var(--mono);font-size:12px;letter-spacing:.04em;font-weight:600; border-radius:6px;text-decoration:none;line-height:1;transition:.16s ease} .cart-dropdown .woocommerce-mini-cart__buttons .button:not(.checkout){ background:transparent;color:var(--text);border:1px solid var(--line-strong)} .cart-dropdown .woocommerce-mini-cart__buttons .button:not(.checkout):hover{border-color:var(--text)} .cart-dropdown .woocommerce-mini-cart__buttons .button.checkout{ background:#fff;color:#000;border:1px solid #fff} .cart-dropdown .woocommerce-mini-cart__buttons .button.checkout:hover{ background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow)} /* empty state */ .cart-dropdown .woocommerce-mini-cart__empty-message{margin:0;padding:30px 18px; color:var(--text-muted);font-size:14px;text-align:center} /* mobile: no hover - the icon just links to /cart/ */ @media(max-width:860px){.cart-dropdown{display:none}} @media(prefers-reduced-motion:reduce){.cart-dropdown{transition:none}}