/* WhatsTK storefront layer — batch 09: cart and checkout appearance. Scoped to body.wtk-sf-cartpage.
   Not styled here on purpose: #payment (FlyLink box, place-order button and notes), form fields, notices. */

/* ---------- Cart ---------- */
/* The page title already says "Cart"; the extra "Cart Summary" heading above the table goes. */
html body.wtk-sf-cartpage .woocommerce-cart-form .cart-summary{display:none!important}
html body.wtk-sf-cartpage .woocommerce-cart-form table.cart td.product-name > a{font-size:var(--sf-step-0);font-weight:600;line-height:1.35;color:var(--sf-ink);text-decoration:none}
html body.wtk-sf-cartpage .woocommerce-cart-form table.cart td.product-name > a:hover{text-decoration:underline;text-underline-offset:3px}
html body.wtk-sf-cartpage table.shop_table dl.variation{margin:6px 0 0;font-size:var(--sf-step--1);line-height:1.4;color:var(--sf-ink-3)}
html body.wtk-sf-cartpage table.shop_table dl.variation dt{font-weight:500;color:var(--sf-ink-3)}
html body.wtk-sf-cartpage table.shop_table dl.variation dd,
html body.wtk-sf-cartpage table.shop_table dl.variation dd p{margin:0;color:var(--sf-ink-2)}
html body.wtk-sf-cartpage .woocommerce-cart-form table.cart td{vertical-align:middle}
html body.wtk-sf-cartpage .woocommerce-cart-form table.cart td.product-thumbnail img{border-radius:var(--sf-radius);background:var(--sf-surface)}
html body.wtk-sf-cartpage .cart-collaterals .cart_totals > h2{font-size:var(--sf-step-2);letter-spacing:-.01em;margin:0 0 12px}
html body.wtk-sf-cartpage .wtk-new-customer-hint{font-size:var(--sf-step--1);line-height:1.5;color:var(--sf-ink-2);padding:12px 14px;border:1px solid var(--sf-line);border-radius:var(--sf-radius);background:var(--sf-surface)}
@media (min-width:768px){
  html body.wtk-sf-cartpage .woocommerce-cart-form td.actions .coupon{display:flex;gap:8px;align-items:center}
  html body.wtk-sf-cartpage .woocommerce-cart-form td.actions .coupon input#coupon_code{max-width:240px}
}

/* ---------- Checkout (outside the payment box) ---------- */
html body.wtk-sf-cartpage .woocommerce-form-coupon-toggle .woocommerce-info{padding:12px 16px!important;font-size:var(--sf-step--1);line-height:1.5;border-left-width:3px}
html body.wtk-sf-cartpage form.woocommerce-checkout .woocommerce-billing-fields > h3,
html body.wtk-sf-cartpage form.woocommerce-checkout #order_review_heading{font-size:var(--sf-step-2);letter-spacing:-.01em;margin:8px 0 12px}
html body.wtk-sf-cartpage #order_review table.woocommerce-checkout-review-order-table td.product-name{font-weight:600;color:var(--sf-ink);line-height:1.4}
html body.wtk-sf-cartpage #order_review table.woocommerce-checkout-review-order-table td.product-name .product-quantity{font-weight:500;color:var(--sf-ink-2)}
html body.wtk-sf-cartpage #order_review table.woocommerce-checkout-review-order-table td.product-name dl.variation{font-weight:400}

/* ---------- batch 17: cart page in two cards (lines left, totals right; stacked on phones) ----------
   Cart page only (body.woocommerce-cart); the checkout page and its payment box are not touched. */
html body.wtk-sf-cartpage.woocommerce-cart .content-area .entry.content-bg.single-entry{background:transparent!important;box-shadow:none!important;border:0!important;padding-left:0!important;padding-right:0!important}
html body.wtk-sf-cartpage.woocommerce-cart #main form.woocommerce-cart-form,
html body.wtk-sf-cartpage.woocommerce-cart #main .cart-collaterals .cart_totals{box-sizing:border-box;padding:20px!important;border:1px solid var(--sf-line)!important;border-radius:var(--sf-radius-lg)!important;background:#fff!important}
html body.wtk-sf-cartpage.woocommerce-cart #main .cart-collaterals{margin-top:20px}
html body.wtk-sf-cartpage.woocommerce-cart #main .cart-collaterals .cart_totals .wc-proceed-to-checkout{padding-bottom:0!important;margin-bottom:0!important}
@media (min-width:1025px){
  html body.wtk-sf-cartpage.woocommerce-cart #main .kadence-woo-cart-form-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
  html body.wtk-sf-cartpage.woocommerce-cart #main .kadence-woo-cart-form-wrap > *{grid-column:1/-1}
  html body.wtk-sf-cartpage.woocommerce-cart #main .kadence-woo-cart-form-wrap > form.woocommerce-cart-form{grid-column:1;grid-row:1;width:auto!important;max-width:none!important;float:none!important;margin:0!important;padding:24px!important}
  html body.wtk-sf-cartpage.woocommerce-cart #main .kadence-woo-cart-form-wrap > .cart-collaterals{grid-column:2;grid-row:1;width:auto!important;max-width:none!important;float:none!important;margin:0!important;position:sticky;top:96px}
  html body.wtk-sf-cartpage.woocommerce-cart #main .cart-collaterals .cart_totals{width:auto!important;float:none!important;padding:24px!important}
}

/* ---------- batch 2-01 ----------
   (1) Phones: in the cart line the line total was drawn on top of the quantity "+" button (the grid's last column
   was 21 px wide, the total 59 px), and the remove "×" overlapped the product name. The quantity box and the line
   total now share their own row under the photo and the name keeps clear of the "×". Same cells, same order. */
@media (max-width:767px){
  html body.wtk-sf-cartpage.woocommerce-cart #main .woocommerce-cart-form table.cart tr.cart_item{
    grid-template-columns:84px minmax(0,1fr) auto!important;grid-template-areas:"thumb name name" "thumb price price" "qty qty subtotal"!important;row-gap:8px!important}
  html body.wtk-sf-cartpage.woocommerce-cart #main .woocommerce-cart-form table.cart td.product-name{padding-right:40px!important}
  html body.wtk-sf-cartpage.woocommerce-cart #main .woocommerce-cart-form table.cart td.product-quantity{justify-self:start;margin-top:4px!important}
  html body.wtk-sf-cartpage.woocommerce-cart #main .woocommerce-cart-form table.cart td.product-subtotal{align-self:center;justify-self:end;white-space:nowrap}
}
/* (2) Desktop: the two cart cards sat 32 px inside the page title and header on both sides (leftover padding of the
   page box, whose background and border batch 17 already removed). */
@media (min-width:768px){
  html body.wtk-sf-cartpage.woocommerce-cart .content-area .entry.content-bg.single-entry .entry-content-wrap{padding-left:0!important;padding-right:0!important}
}

/* ---------- batch 2-13: empty cart suggestions ----------
   Shown under the "Return to shop" button (moved there with flex order; the markup order is WooCommerce's), centred
   like the message above. Hidden when the storefront-polish category links (.wtk-empty-cats) have content, so the
   page never shows two lists. */
html body.wtk-sf-cartpage.woocommerce-cart #main .entry-content > .woocommerce:has(> .wtk-sf-suggest--cart){display:flex;flex-direction:column}
html body.wtk-sf-cartpage.woocommerce-cart #main .entry-content > .woocommerce > .wtk-sf-suggest--cart{order:10;margin:24px 0 8px;text-align:left}
html body.wtk-sf-cartpage.woocommerce-cart #main .wtk-sf-suggest--cart h2{text-align:center}
html body.wtk-sf-cartpage.woocommerce-cart #main .wtk-sf-suggest--cart .wtk-sf-cards{grid-template-columns:repeat(auto-fit,minmax(150px,220px));justify-content:center}
html body.wtk-sf-cartpage.woocommerce-cart #main .woocommerce:has(.wtk-empty-cats:not(:empty)) .wtk-sf-suggest--cart{display:none}
html body.wtk-sf-cartpage.woocommerce-cart #main .wtk-sf-suggest--cart a.wtk-sf-card__link{text-decoration:none!important}

/* ---------- batch 2-10: checkout "Your order" table ----------
   The right column took most of the width (long shipping-package text) and squeezed product names into ~150 px.
   Fixed columns: product 58 %, amounts 42 %. Only this table; the payment box below is not touched. */
html body.wtk-sf-cartpage #order_review table.woocommerce-checkout-review-order-table{table-layout:fixed;width:100%}
html body.wtk-sf-cartpage #order_review table.woocommerce-checkout-review-order-table thead th.product-name{width:58%}
html body.wtk-sf-cartpage :is(#order_review, .cart_totals) .woocommerce-shipping-contents{overflow-wrap:anywhere}

/* ---------- batch 2-02: phones, no card inside a card ----------
   Each cart line is already a bordered card (whatstk-ui-fixes), and batch 17 drew a second card around the whole
   form, plus a grey strip behind the coupon field. On phones the outer card goes; lines, coupon and the totals card
   sit on the page directly. */
@media (max-width:767px){
  html body.wtk-sf-cartpage.woocommerce-cart #main form.woocommerce-cart-form{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
  html body.wtk-sf-cartpage.woocommerce-cart #main .woocommerce-cart-form table.cart td.actions{background:transparent!important;padding-top:4px!important}
}