/* 12-cart.css: the WooCommerce cart page (/cart/, page 13, Elementor full-width template with the cart shortcode).
 * CSS only (D-133: no cart template is touched). Shoptimizer's cart-checkout stylesheet paints this page in its own
 * greys (#ECECEC checkout bar, #F8F8F8 coupon button, #CCCCCC disabled "Update cart", #F9F9F9 totals table, #111111
 * links) which sit outside the design-system palette (launch QC 2026-10-09, storefront rows cart-empty@*). Every rule
 * below maps one of those to a token. The h1 comes from inc/cart.php (the page's own WordPress title). */

/* Page title: the cart page had no h1 (launch QC "h1 count 0"). Same type as the Woopify slots template title. */
body.woopify.woocommerce-cart .woopify-cart-title { margin: 0 0 var(--space-lg); }

/* Shoptimizer's Cart > Checkout > Complete progress bar: surface ground, ink text, accent for the current step. */
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar,
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li { background: var(--color-surface); color: var(--color-ink-muted); }
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li.active,
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li.active a { color: var(--color-ink); }
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li:before { background: var(--color-border); color: var(--color-ink); }
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li.active:before,
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li.visited:before { background: var(--color-accent); color: var(--color-accent-ink); }
html body.woopify.woocommerce-cart .checkout-wrap .checkout-bar li:after { background: var(--color-border); }

/* Cart table: ink text, token borders, product links in ink (Shoptimizer paints them #111111). */
html body.woopify.woocommerce-cart table.shop_table { border-color: var(--color-border); color: var(--color-ink); }
html body.woopify.woocommerce-cart table.shop_table :is(th, td) { border-color: var(--color-border); }
html body.woopify.woocommerce-cart table.shop_table td.product-name a,
html body.woopify.woocommerce-cart table.shop_table a.remove { color: var(--color-ink); }
html body.woopify.woocommerce-cart table.shop_table a.remove:hover { color: var(--color-accent); background: transparent; }

/* Coupon: the field and its "Apply coupon" button (Shoptimizer: #F8F8F8 ground). Secondary button look. */
html body.woopify.woocommerce-cart .coupon .button,
html body.woopify.woocommerce-cart .coupon button.button { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-input-border); }
html body.woopify.woocommerce-cart .coupon .button:hover { background: var(--color-bg); color: var(--color-ink); border-color: var(--color-ink); }

/* "Update cart": enabled it is the accent button (03-base.css). Disabled, Shoptimizer paints #111111 on #CCCCCC at
   opacity .3 (1.89:1). Keep it visibly inactive but readable: muted ink on surface with a border, full opacity (6.4:1). */
html body.woopify.woocommerce-cart td.actions .button,
html body.woopify.woocommerce-cart button[name="update_cart"] { background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); }
html body.woopify.woocommerce-cart td.actions .button:disabled,
html body.woopify.woocommerce-cart button[name="update_cart"]:disabled,
html body.woopify.woocommerce-cart button[name="update_cart"][disabled] { background: var(--color-surface); color: var(--color-ink-muted); border-color: var(--color-border); opacity: 1; cursor: default; }

/* Cart totals: Shoptimizer gives the table a #F9F9F9 ground. */
html body.woopify.woocommerce-cart .cart_totals table.shop_table,
html body.woopify.woocommerce-cart .cart_totals,
html body.woopify.woocommerce-cart .cart-collaterals .cart_totals { background: var(--color-surface); }
html body.woopify.woocommerce-cart .cart_totals h2 { color: var(--color-ink); }
html body.woopify.woocommerce-cart .cart_totals .checkout-button { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }

/* Shoptimizer's own loader and photo caption greys (#CCCCCC / #111111), on this page only. */
html body.woopify.woocommerce-cart .shoptimizer-loader .spinner { border-color: var(--color-border); border-bottom-color: var(--color-ink); }
html body.woopify.woocommerce-cart .pswp__caption__center { color: var(--color-ink-muted); border-color: var(--color-border); }

/* Shoptimizer's cart-checkout stylesheet and the Elementor kit win on specificity for these, so they take !important
   (verified in a guest frame on 2026-10-09: no off-palette colour left on /cart/ afterwards). */
html body.woopify.woocommerce-cart .woocommerce :is(table.shop_table, table.shop_table th, table.shop_table td, td.product-name a, .amount, bdi, .woocommerce-Price-currencySymbol, input.qty, .e-cart-content) { color: var(--color-ink) !important; }
html body.woopify.woocommerce-cart .woocommerce input.qty { border-color: var(--color-input-border) !important; }
html body.woopify.woocommerce-cart .coupon .button,
html body.woopify.woocommerce-cart .coupon button.button { background-color: var(--color-surface) !important; color: var(--color-ink) !important; border: 1px solid var(--color-input-border) !important; }
html body.woopify.woocommerce-cart td.actions .button:disabled,
html body.woopify.woocommerce-cart button[name="update_cart"]:disabled { background-color: var(--color-surface) !important; color: var(--color-ink-muted) !important; border-color: var(--color-border) !important; opacity: 1 !important; }
html body.woopify.woocommerce-cart td.actions .button:not(:disabled) { background-color: var(--color-accent) !important; color: var(--color-accent-ink) !important; }