/* 09-cart-drawer.css: FunnelKit Cart colours, radius and buttons only (D-133).
 * Drawer text lives in FunnelKit > Cart settings, never here.
 * theme.js opens the drawer by clicking #fkcart-floating-toggler, so the toggler
 * must stay enabled in FunnelKit. If the design hides the floating bubble, hide it here: */
/* (hidden below: the header cart icon opens the drawer.) */
body.woopify .fkcart-modal-container { background: var(--color-surface); color: var(--color-ink); }
body.woopify .fkcart-checkout-info a { background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-md); }
body.woopify .fkcart-modal-container .fkcart-checkout-wrap a, body.woopify .fkcart-modal-container .fkcart-shortcode-container a.fkcart-checkout-btn { min-height: 48px; }
/* The header cart icon opens the drawer; FunnelKit's floating bubble is not part of this design. */
body.woopify #fkcart-floating-toggler { display: none; }
/* Shoptimizer's own side cart is replaced by FunnelKit's drawer. */
body.woopify #shoptimizerCartDrawer, body.woopify .shoptimizer-mini-cart-wrap { display: none !important; }
/* Drawer controls at 44px (design-system.md: quantity stepper 44 × 44, "Remove" with a 44px hit area). */
body.woopify .fkcart-modal-container .fkcart-quantity-selector { height: 44px; border: 1px solid var(--color-input-border); border-radius: var(--radius-md); background: var(--color-bg); }
body.woopify .fkcart-modal-container .fkcart-quantity-button { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
body.woopify .fkcart-modal-container .fkcart-quantity__input { height: 44px !important; width: 36px !important; font: 600 var(--fs-body-sm)/1 var(--font-body); color: var(--color-ink); background: transparent; border: 0 !important; }
body.woopify .fkcart-modal-container .fkcart-remove-item { width: 44px !important; height: 44px !important; margin: -8px !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; }
body.woopify .fkcart-modal-container .fkcart-remove-item svg { width: 20px; height: 20px; padding: 4px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-border); }
body.woopify .fkcart-modal-container .fkcart-select-options { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); }
body.woopify .fkcart-modal-container .fkcart-item-title { color: var(--color-ink); font: 600 var(--fs-body-md)/1.3 var(--font-body); }

/* 2026-10-09 visual QA: FunnelKit draws an inset shadow box around the quantity number inside our stepper border. */
body.woopify .fkcart-modal-container .fkcart-quantity__input { box-shadow: none !important; background: transparent !important; }

/* 2026-10-09 mobile QA: the drawer's close button was a 20 x 20 target and the "Have a discount code?" toggle 18px
   tall. Both get a 44px hit area (buttons only, D-133); the close icon stays where it was (negative margin). */
body.woopify .fkcart-modal-container .fkcart-modal-close { box-sizing: content-box; padding: 12px; margin: -12px; cursor: pointer; }
body.woopify .fkcart-modal-container .fkcart-coupon-head { min-height: 44px; display: flex; align-items: center; }

/* 2026-10-09 launch QC: FunnelKit's drawer draws #DEDFEA on the item photo border and the remove-icon ground (not a
   palette colour). Both to tokens (colours only, D-133). */
body.woopify .fkcart-modal-container img.fkcart-image { border-color: var(--color-border); }
body.woopify .fkcart-modal-container .fkcart-remove-item span { background: var(--color-surface); }