/** * Happy Cappy — Side-cart drawer (v5 design, WooCommerce-backed). * File: hapcapstaging-child/assets/css/hc-cart.css * * Slide-in mini-cart used site-wide by the V2 chrome. Markup: * template-parts/product-v2/cart-drawer.php (+ cart-drawer-contents.php). * Behaviour: js/hc-cart.js. Opens via `html.cart-open`. * * Design tokens (--teal, --ink-surface, --accent, --radius-sm, …) come from * tokens.css / hc-header.css, which load first. The `.cart-dot` badge itself is * styled in hc-header.css; this file only styles the drawer + its contents. */ /* mini-cart drawer (slides from right) */ .cart-switch{position:relative} .cart-scrim{position:fixed;inset:0;background:rgba(7,26,31,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:120} html.cart-open .cart-scrim{opacity:1;visibility:visible} .cart-menu{position:fixed;top:0;right:0;height:100dvh;width:400px;max-width:100vw;background:var(--cart-surface,var(--surf));border:none;border-radius:0;box-shadow:none;visibility:hidden;padding:0;display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:121} html.cart-open .cart-menu{transform:translateX(0);visibility:visible;box-shadow:-20px 0 60px -16px rgba(7,26,31,.55)} .cart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 18px 11px;background:var(--ink-surface);flex-shrink:0} .cart-head .ch-title{font-family:var(--font-display);font-weight:600;font-size:17px;color:#fff;margin-right:auto} .cart-head .ch-count{font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);padding:3px 9px;border-radius:99px} .cart-close{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.14);border:0;cursor:pointer;transition:background .14s,color .14s} .cart-close svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none} .cart-close:hover{background:rgba(255,255,255,.27);color:#fff} html.cart-open{overflow:hidden;padding-right:var(--sbw,0px)} .cart-ship{padding:4px 18px 15px;background:var(--ink-surface)} .cart-ship .cs-txt{font-size:12px;color:rgba(255,255,255,.9);margin-bottom:8px;line-height:1.35} .cart-ship .cs-txt b{font-weight:700;color:#e8915b} .cart-ship .cs-ck{color:#fff;font-weight:800;font-size:13px;margin-right:2px} .cart-ship .cs-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.34);overflow:hidden} .cart-ship .cs-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f6fa8,#e8915b);transition:width .35s ease} .cart-menu{--cart-surface:#fff;--cart-2:#eef2f8;--cart-line:#e4e9ee;font-family:var(--font-body)} /* Buttons inherit the drawer font (Inter) instead of the parent theme's Poppins off product pages, and a normal line-height instead of the theme's button{line-height:1}. */ .cart-menu button{font-family:inherit;line-height:normal} /* WooCommerce wraps every price in .woocommerce-Price-amount, which the parent _s style.css hard-codes to `font-weight:400 !important` + its own colour/font. Make the amount fully inherit its row (ci-price 700, cf-sub b Poppins/600, cx-meta b 700, struck s muted) so prices render as designed. */ .cart-menu .woocommerce-Price-amount{font-weight:inherit!important;color:inherit;font-family:inherit;font-size:inherit} /* Dynamic fragment wrapper: must itself be the flex column that fills the drawer under the header, otherwise .cart-body can't take remaining height and scroll. */ #hcCartInner{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .cart-ship,.cart-xsell,.cart-foot{flex-shrink:0} /* Icon buttons must ignore the theme's global