/* ------------------------------------------------------------------
   hqt-cart.css — the cart page (approved mockups/cart-thankyou.html, part A)

   Purpose : restyle the cart into the same anatomy as checkout v2 — line
             cards, a free-shipping progress bar, quantity steppers and a
             sticky summary whose primary action is WooCommerce's OWN
             "Proceed to checkout" button.
   Note on the DOM: the template keeps WooCommerce's <table> markup on
             purpose. Plugins echo <tr> rows into woocommerce_cart_contents
             and woocommerce_after_cart_contents, so swapping to <div>s would
             produce invalid markup for them. Everything below turns those
             table rows into cards with CSS instead.
   Note on the CTA: the button is Woo's native .checkout-button, not a
             replacement. Fastrr binds to that element on live, and a
             leftover Customizer rule used to hide it (see ledger row 65).
   Scope   : enqueued on is_cart() only (functions.php).
   Refs    : docs/TRACKING_LEDGER.md row 65 · assets/css/hqt-commerce.css.
   ------------------------------------------------------------------ */

/* Scoped box reset — carried over from the legacy cart stylesheet that this
   file replaces, so removing that sheet cannot shift spacing here. */
.woocommerce-cart .custom-cart-page *,
.woocommerce-cart .custom-cart-page *::before,
.woocommerce-cart .custom-cart-page *::after { box-sizing: border-box; }

.woocommerce-cart .custom-cart-page {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 20px 70px;
	font-family: var(--hqt-ff-body, 'Raleway', Arial, sans-serif);
}

/* ---- header + breadcrumb ---- */
.woocommerce-cart .hqt-cart__crumbs { font-size: 12px; color: #8a977b; margin-bottom: 14px; }
.woocommerce-cart .hqt-cart__crumbs b { color: var(--hqt-forest); }
.woocommerce-cart .custom-cart-page .page-header h1 {
	font-family: var(--hqt-ff-display); font-size: 30px; color: var(--hqt-forest);
	letter-spacing: -.01em; margin: 0;
}
.woocommerce-cart .custom-cart-page .page-header p { font-size: 13.5px; color: #8a977b; margin: 4px 0 20px; }

/* ---- free shipping progress ---- */
.hqt-ship {
	background: #fff; border: 1px solid var(--hqt-line); border-radius: 14px;
	padding: 15px 20px; margin-bottom: 14px;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.hqt-ship__txt { font-size: 13.5px; font-weight: 600; }
.hqt-ship__txt b { color: var(--hqt-forest); }
.hqt-ship__bar { flex: 1; min-width: 130px; height: 7px; background: #f4f6ef; border-radius: 99px; overflow: hidden; }
.hqt-ship__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hqt-leaf), var(--hqt-forest)); }
.hqt-ship__tick {
	width: 22px; height: 22px; border-radius: 50%; background: var(--hqt-leaf); color: #16220e;
	display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none;
}

/* ---- layout ---- */
.woocommerce-cart .cart-wrapper {
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
	gap: 26px; align-items: start;
}
.woocommerce-cart .cart-main { min-width: 0; }
.woocommerce-cart .cart-sidebar { position: sticky; top: 20px; }

/* ---- the table, restyled into cards ---- */
.woocommerce-cart .woocommerce-cart-form { background: #fff; border: 1px solid var(--hqt-line); border-radius: 14px; }
/* The whole table leaves table-layout and becomes block flow. This is required,
   not cosmetic: once tr.cart_item became a grid those rows no longer take part
   in column sizing, and the remaining actions row (colspan=6) collapsed to its
   content width — about 109px — crushing the coupon input and its error text.
   Making table/tbody/tr block gives every row the full container width. */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart > tbody { display: block; width: 100%; border: none; background: transparent; margin: 0; }
.woocommerce-cart table.shop_table.cart > tbody > tr { display: block; width: 100%; }
/* Header row: visually gone, but still in the accessibility tree. display:none
   would drop the column headers entirely, leaving a screen-reader user with a
   bare "₹229 / 1 / ₹229" and no idea which number is which. The ARIA roles in
   cart.php restore the table relationships the display:block rules above strip. */
.woocommerce-cart table.shop_table.cart thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.woocommerce-cart table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: start; padding: 18px 20px; border-bottom: 1px solid var(--hqt-line); }
.woocommerce-cart table.shop_table.cart tr.cart_item td { border: none; padding: 0; background: transparent; }
.woocommerce-cart table.shop_table.cart td.product-remove { grid-column: 3; grid-row: 1; justify-self: end; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 76px; height: 76px; object-fit: cover; border-radius: 11px; border: 1px solid var(--hqt-line); display: block; }
.woocommerce-cart table.shop_table.cart td.product-name { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 700; }
.woocommerce-cart table.shop_table.cart td.product-name a { color: var(--hqt-ink); text-decoration: none; }
.woocommerce-cart table.shop_table.cart td.product-name a:hover { color: var(--hqt-forest); }
.woocommerce-cart table.shop_table.cart td.product-name .variation,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation { font-size: 12px; color: #8a977b; font-weight: 500; margin: 3px 0 0; display: block; }
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd { display: inline; margin: 0 3px 0 0; float: none; }
.woocommerce-cart table.shop_table.cart td.product-name dl.variation p { display: inline; margin: 0; }
.woocommerce-cart table.shop_table.cart td.product-price { display: none; } /* line total carries the money */
.woocommerce-cart table.shop_table.cart td.product-quantity { grid-column: 2; grid-row: 2; margin-top: 10px; }
.woocommerce-cart table.shop_table.cart td.product-subtotal { grid-column: 3; grid-row: 2; text-align: right; font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* remove control */
.woocommerce-cart td.product-remove a.remove {
	width: 30px; height: 30px; font-size: 19px; line-height: 28px; color: #8a977b;
	border: 1px solid var(--hqt-line); border-radius: 50%; display: inline-flex;
	align-items: center; justify-content: center; text-decoration: none; background: #fff;
}
.woocommerce-cart td.product-remove a.remove:hover { color: #a33; border-color: #a33; background: #fff; }

/* quantity stepper — the number input stays (WooCommerce reads cart[key][qty]) */
.woocommerce-cart .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--hqt-line); border-radius: 10px; overflow: hidden; background: #fff; }
.woocommerce-cart .hqt-qty__btn {
	width: 38px; height: 38px; min-height: 38px; border: none; background: #fff; cursor: pointer;
	font-size: 17px; font-weight: 700; color: var(--hqt-forest); padding: 0; line-height: 1;
}
.woocommerce-cart .hqt-qty__btn:hover { background: #f4f6ef; }
.woocommerce-cart .hqt-qty__btn[disabled] { opacity: .35; cursor: not-allowed; }
.woocommerce-cart .quantity input.qty {
	width: 46px; min-width: 46px; height: 38px; min-height: 38px; border: none; border-left: 1.5px solid var(--hqt-line);
	border-right: 1.5px solid var(--hqt-line); border-radius: 0; text-align: center; font-size: 14.5px;
	font-weight: 700; padding: 0; background: #fff; font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- actions row (coupon + update) ---- */
.woocommerce-cart table.shop_table.cart td.actions { display: block; padding: 16px 20px; border-top: 1px solid var(--hqt-line); }
.woocommerce-cart td.actions .coupon { display: flex; gap: 9px; width: 100%; }
.woocommerce-cart td.actions .coupon label { display: none; }
/* WooCommerce core's own layout sheet pins this field at 80px
   (`#content table.cart td.actions .input-text{width:80px}`) and the
   small-screen sheet pins the button to 48%. Both are overridden here so the
   field can actually grow — measured 80px -> full row. */
.woocommerce-cart td.actions .coupon input#coupon_code {
	flex: 1 1 auto; width: auto !important; min-width: 0;
	min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--hqt-line);
	border-radius: 10px; font-size: 15px; background: #fff;
}
.woocommerce-cart td.actions .coupon button[name="apply_coupon"] { width: auto !important; flex: 0 0 auto; }
/* The steppers submit the cart for you, so Woo's own Update-cart button stays
   in the DOM (no-JS fallback, screen readers) but out of sight. This replaces
   an inline <style> that functions.php used to inject into wp_head. */
.woocommerce-cart td.actions button[name="update_cart"] { display: none; }
.woocommerce-cart td.actions .coupon input#coupon_code:focus { border-color: var(--hqt-leaf); outline: 2px solid rgba(139,195,74,.35); }
.woocommerce-cart td.actions .coupon button[name="apply_coupon"] {
	min-height: 46px; padding: 0 20px; background: #fff; border: 1.5px solid var(--hqt-forest);
	color: var(--hqt-forest); font-weight: 800; border-radius: 10px; font-size: 13.5px; cursor: pointer;
}
.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover { background: var(--hqt-forest); color: #fff; }
/* wt-smart-coupons prints its feedback as <p class="coupon-error-notice"> INSIDE
   the .coupon flex row, so it was competing with the input for width and
   crushing it to a few characters. Give it the whole row, under the controls. */
.woocommerce-cart td.actions .coupon { flex-wrap: wrap; }
.woocommerce-cart td.actions .coupon .coupon-error-notice,
.woocommerce-cart td.actions .coupon .coupon-success-notice {
	flex: 0 0 100%; width: 100%; margin: 4px 0 0; padding: 10px 13px;
	font-size: 12.5px; line-height: 1.5; border-radius: 9px;
	background: #fff8e6; border: 1px solid #eadfb8; color: #7a6320;
}
.woocommerce-cart td.actions .coupon .coupon-success-notice {
	background: #f4f6ef; border-color: var(--hqt-line); color: var(--hqt-forest);
}
/* the update button is driven by the steppers; kept in the DOM for no-JS and screen readers */
.woocommerce-cart td.actions button[name="update_cart"] {
	margin-top: 10px; min-height: 40px; padding: 0 16px; background: #fff; border: 1.5px solid var(--hqt-line);
	color: #4a5a39; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.woocommerce-cart td.actions button[name="update_cart"]:disabled { opacity: .4; }

/* ---- summary panel ---- */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals { width: 100% !important; float: none !important; }
.woocommerce-cart .cart_totals { background: #fff; border: 1px solid var(--hqt-line); border-radius: 14px; padding: 20px; }
.woocommerce-cart .cart_totals h2 { font-family: var(--hqt-ff-display); font-size: 19px; color: var(--hqt-forest); margin: 0 0 14px; }
.woocommerce-cart .cart_totals table { width: 100%; border: none; background: transparent; margin: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td { border: none; padding: 7px 0; font-size: 13.5px; color: #4a5a39; background: transparent; }
.woocommerce-cart .cart_totals table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-cart .cart_totals table th { font-weight: 600; text-align: left; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	font-size: 18px; font-weight: 800; color: var(--hqt-forest);
	border-top: 1.5px dashed var(--hqt-line); padding-top: 13px;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 12px; color: #8a977b; }

/* THE primary action — WooCommerce's own button, restored and branded.
   High specificity + !important is deliberate: a leftover Customizer rule
   (`.checkout-button.button.alt.wc-forward{display:none!important}`, added when
   Fastrr supplied its own button) is printed AFTER theme styles, so a plain
   rule cannot win. The Customizer rule itself is removed as the real fix;
   this stays as a belt so the cart can never silently lose its CTA again. */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin-top: 16px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
	display: grid !important; place-items: center;
	width: 100%; min-height: 54px; background: var(--hqt-forest); color: #fff;
	border: none; border-radius: 12px; font-size: 16px; font-weight: 800;
	text-decoration: none; text-transform: none; letter-spacing: 0; padding: 0 16px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #3a6420; color: #fff; }

.hqt-cart__keep { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--hqt-forest); text-decoration: none; }
.hqt-cart__keep:hover { text-decoration: underline; }
.hqt-cart__trust { margin-top: 14px; font-size: 11.5px; color: #8a977b; }
.hqt-cart__trust span { display: block; margin: 4px 0; }
.hqt-cart__trust span::before { content: '✓ '; color: var(--hqt-forest); font-weight: 800; }

/* ---- cross sells ---- */
.woocommerce-cart .cross-sells { margin-top: 34px; }
.woocommerce-cart .cross-sells h2 { font-family: var(--hqt-ff-display); font-size: 22px; color: var(--hqt-forest); text-align: center; }
.woocommerce-cart .cross-sells > p { text-align: center; font-size: 13px; color: #8a977b; margin: 4px 0 18px; }

/* ---- empty cart ---- */
.hqt-cart__empty { background: #fff; border: 1px solid var(--hqt-line); border-radius: 14px; padding: 44px 24px; text-align: center; }
.hqt-cart__empty h2 { font-family: var(--hqt-ff-display); font-size: 22px; color: var(--hqt-forest); }
.hqt-cart__empty p { font-size: 13.5px; color: #8a977b; margin: 6px 0 18px; }

@media (max-width: 860px) {
	.woocommerce-cart .cart-wrapper { grid-template-columns: 1fr; }
	.woocommerce-cart .cart-sidebar { position: static; }
	.woocommerce-cart .custom-cart-page .page-header h1 { font-size: 25px; }
	.woocommerce-cart table.shop_table.cart tr.cart_item { grid-template-columns: 64px 1fr auto; padding: 16px 14px; }
	.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 64px; height: 64px; }
	.woocommerce-cart td.actions .coupon { flex-wrap: wrap; }
	.woocommerce-cart td.actions .coupon input#coupon_code,
	.woocommerce-cart td.actions .coupon button[name="apply_coupon"] { width: 100%; flex: none; }
}