/**
 * Yodha Fuel — Cart page styles.
 *
 * IMPORTANT ARCHITECTURE NOTE: this store's Cart page is NOT the classic
 * WooCommerce [woocommerce_cart] shortcode/template — it is the
 * WooCommerce Blocks "Cart" block (a React-rendered block, output by
 * do_blocks() into the normal Page content and displayed via this theme's
 * existing page.php → template-parts/content-page.php → the_content()).
 * There is no woocommerce/cart/cart.php or woocommerce/cart/cart-empty.php
 * template in this theme because WooCommerce never looks for them here —
 * confirmed by inspecting the live page's actual rendered markup
 * (`[data-block-name="woocommerce/cart"]`, `.wc-block-cart-*` classes)
 * before writing any of this.
 *
 * Because of that, EVERY cart behaviour this file's classes hang off of —
 * quantity +/- (already clamped at 1 natively), remove (already AJAX via
 * the block's own Store API calls), coupon apply, totals recalculation,
 * Proceed to Checkout — is already fully native, already reactive, and
 * requires zero custom JavaScript or PHP cart logic from this theme. This
 * file only restyles the block's own stable output classes to match the
 * Yodha Fuel brand; it never duplicates or reimplements any of that
 * behaviour. assets/js/cart.js adds only cosmetic text/markup (the empty-
 * cart copy and a Continue Shopping link) — see that file's own notes.
 *
 * Loaded only on is_cart() — see inc/enqueue.php.
 *
 * Mobile-first: base rules are the 375px default, breakpoints layer up at
 * 480 / 768 / 1024 / 1280px, matching every other stylesheet in this theme.
 */

/* ============================================================
   PAGE HEADER — reuses the existing .yf-page__title (from
   template-parts/content-page.php, untouched) and .yf-page__content
   (from the same file). Only two things are cart-specific:
   1) the max-width: 72ch that layout.css gives .yf-page__content for
      readable article text would squeeze the two-column cart layout into
      a narrow column — the same class of bug already found and fixed on
      the Single Product page's Description tab. Removed here, scoped to
      the cart page only via the native `woocommerce-cart` body class
      WooCommerce itself adds — every other page keeps the 72ch cap.
   2) widening it to match the site's normal --container-max (1280px)
      instead of Storefront's own default content-area width, so the cart
      reads as the same width as the rest of the site.
   ============================================================ */
body.woocommerce-cart .yf-page__content {
	max-width: var(--container-max);
	margin: 0 auto;
	/* THE REAL CAUSE of "no space left and right on iPhone" / "not centre
	   aligned on iPad": confirmed live (via getComputedStyle on the actual
	   site) that #primary — this page's own wrapper, from page.php,
	   untouched per the file-safety rule — carries zero left/right
	   padding of its own. The only thing that was ever giving this page
	   any side gutter is the `margin: 0 auto` centering above, and that
	   only produces visible space once the viewport is WIDER than this
	   file's own 1280px max-width. Below 1280px — every iPad, every
	   iPhone, and most laptop windows — margin: 0 auto resolves to 0 on
	   both sides, so the cards were rendering flush against the literal
	   edge of the screen with nothing holding them in. This was never
	   about the item cards or sidebar (those already carry their own
	   internal padding, which is why it wasn't obviously "broken" —
	   just edge-to-edge). Padding added here, at the same breakpoints
	   and using the same tokens .yf-container uses site-wide, so this
	   page's gutter matches every other page's. */
	padding-left: var(--container-padding-mobile);
	padding-right: var(--container-padding-mobile);
}

@media (min-width: 480px) {
	body.woocommerce-cart .yf-page__content {
		padding-left: var(--container-padding-small);
		padding-right: var(--container-padding-small);
	}
}

@media (min-width: 768px) {
	body.woocommerce-cart .yf-page__content {
		padding-left: var(--container-padding-tablet);
		padding-right: var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	body.woocommerce-cart .yf-page__content {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* Hero-style title band — no photo. A soft, light diagonal "shine" over
   the theme's own off-white tone (var(--off-white)/var(--color-bg-alt)),
   built entirely from a CSS gradient — no image request, nothing to keep
   dark-enough for text contrast, so the title just uses the normal
   heading color. Kept inside the existing .yf-page__content width (not
   full-bleed to the viewport edge) so it can never introduce horizontal
   scroll on its own. Rounded on all four corners since nothing is
   attached directly beneath it anymore (the breadcrumb below sits on the
   plain page background, not as a continuation band). */
body.woocommerce-cart .yf-page__header {
	position: relative;
	margin: 0 0 var(--space-md);
	padding: var(--space-3xl) var(--space-lg);
	background-color: var(--color-bg-alt);
	background-image: linear-gradient(135deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
	border-radius: var(--radius-lg);
	text-align: center;
	overflow: hidden;
}

body.woocommerce-cart .yf-page__title {
	margin: 0;
	color: var(--color-heading);
}

/* Breadcrumb — added by inc/cart.php via the_content, replacing the old
   photo-band subtitle. Plain text row on the normal page background,
   matching the "Home / My Cart" trail pattern from the reference design. */
.yf-cart-breadcrumb {
	display: block;
	margin: 0 0 var(--space-lg);
	padding: 0 var(--space-lg);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.yf-cart-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.yf-cart-breadcrumb a:hover,
.yf-cart-breadcrumb a:focus-visible {
	color: var(--yodha-orange);
}

.yf-cart-breadcrumb__sep {
	margin: 0 var(--space-2xs);
	color: var(--color-border);
}

.yf-cart-breadcrumb__current {
	color: var(--color-text);
	font-weight: var(--fw-medium);
}

/* ============================================================
   CART BLOCK — base
   ============================================================ */
.wc-block-cart {
	margin: 0;
}

.wc-block-components-sidebar-layout.wc-block-cart {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

/* ============================================================
   ITEMS — each row is now its own white, rounded "card" (matching the
   reference design) rather than a shared table with row dividers. Real
   <table>/<tr>/<td> markup stays in the DOM (WooCommerce Blocks renders
   it, not this theme — still screen-reader-readable), only the visual
   display changes, via the same display:flex-on-table-parts technique
   already used elsewhere in this theme for native WooCommerce tables.
   Built with flex-wrap so it reflows naturally at any width — no fixed
   breakpoint grid override needed (see the removed 767px block that used
   to live at the bottom of this file).
   ============================================================ */
.wc-block-cart-items,
.wc-block-cart-items tbody {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.wc-block-cart-items__header {
	display: none;
}

.wc-block-cart-items__row {
	/* !important on display + padding — the real root cause of the
	   still-broken mobile/tablet layout reported after v1.4.6. Found by
	   fetching WooCommerce Blocks' own plugin CSS directly (not just this
	   theme's): it ships a `@container (max-width: 699px)` rule (plus a
	   `.is-mobile`/`.is-small`/`.is-medium` class-based fallback for
	   browsers without native container-query support, applied by its own
	   JS ResizeObserver — same effect, same fix) that switches this exact
	   row to `display: grid; grid-template-columns: 80px 132px; padding:
	   16px 0` via a 3-class-plus-`table` selector (specificity 0,3,1) —
	   again beating this theme's plain 1-class rule regardless of load
	   order, the same class of bug already found and fixed (with the same
	   !important technique) for the stray line and the quantity buttons
	   elsewhere in this file. Because that rule is keyed off the
	   *container's* width (the whole cart block), not the viewport, it
	   fires on real phones and tablets whenever the cart column itself
	   narrows below ~700px — which local viewport-only testing (no real
	   WooCommerce Blocks CSS loaded) never exercised, so it went
	   undetected until now. Forcing `display: flex !important` here makes
	   every grid-column-start/grid-row-start WooCommerce sets on the
	   children below inert (those properties only do anything inside an
	   actual grid), so no per-child overrides are needed. */
	display: flex !important;
	align-items: center;
	gap: var(--space-md);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	/* Stronger, brand-tinted shadow rather than the theme's neutral
	   --shadow-card. rgba(245, 83, 1, …) is var(--yodha-orange) (#F55301)
	   written as rgba — the same technique this file (and shop.css) already
	   uses for the orange tint in gradient overlays, since box-shadow can't
	   take a var() color and apply alpha to it directly. */
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
	padding: var(--space-md) var(--space-lg) !important;
	margin-bottom: var(--space-md);
}

.wc-block-cart-items__row > td {
	/* !important on both — confirmed live these lose to WooCommerce
	   Blocks' own stylesheet rule for this exact element
	   (`.wc-block-cart__main .wc-block-cart-items td`), which is three
	   classes deep (specificity 0,3,1) and beats this theme's one-class
	   selector on specificity alone, regardless of load order. That rule
	   is what was drawing a border-top (and an extra 20px of padding)
	   inside every item card. */
	padding: 0 !important;
	border: none !important;
	vertical-align: middle;
}

.wc-block-cart-item__image {
	flex: 0 0 auto;
	width: 88px;
}

.wc-block-cart-item__image img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-alt);
}

.wc-block-cart-item__product {
	flex: 1 1 auto;
	min-width: 0;
}

/* Name sits on its own full-width line; price and the quantity/remove
   group share the line below it, quantity pinned to the right via
   margin-left: auto — this is what gives the "name on top, controls
   below" card layout without needing extra wrapper markup the block
   doesn't render. */
.wc-block-cart-item__wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--space-lg);
	row-gap: var(--space-xs);
}

.wc-block-components-product-name {
	flex: 1 1 100%;
	font-size: var(--fs-product-title-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	text-decoration: none;
}

a.wc-block-components-product-name:hover,
a.wc-block-components-product-name:focus {
	color: var(--yodha-orange);
}

/* Product description — the reference design shows only name + price,
   no excerpt, so it's hidden here for the same clean, scannable card
   look. The data isn't removed, just not displayed on this page. */
.wc-block-components-product-metadata {
	display: none;
}

.wc-block-cart-item__prices,
.wc-block-components-product-price {
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

.wc-block-components-product-price__regular {
	margin-right: var(--space-xs);
	font-size: var(--fs-price-compare);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.wc-block-cart-item__total {
	flex: 0 0 auto;
	text-align: right;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2xs);
}

.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: var(--fs-price-lg);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--badge-padding-y) var(--badge-padding-x);
	border-radius: var(--radius-full);
	background-color: #E8F5EA;
	color: var(--color-success);
	font-size: var(--badge-font-size);
	font-weight: var(--fw-semibold);
}

/* ------------------------------------------------------------
   QUANTITY STEPPER — the block already renders a real [-] input [+]
   group (.wc-block-components-quantity-selector) with the minus button
   natively disabled at quantity 1, so "quantity cannot go below 1" and
   "must use WooCommerce cart APIs" are already satisfied by WooCommerce
   itself; this only restyles the existing buttons/input. Both real
   modifier classes (confirmed live: --minus / --plus) get their own
   look — plus filled in the brand orange as the primary action, minus a
   quieter outline — while both stay full circles the same size, so nothing
   about how they work changes, only how they look.
   ------------------------------------------------------------ */
.wc-block-cart-item__quantity {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	height: auto;
	border: none;
	border-radius: 0;
	overflow: visible;
}

.wc-block-components-quantity-selector__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	border: var(--border-width) solid transparent;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

/* !important here — confirmed live that WooCommerce Blocks' own base
   button rule otherwise still wins the background/color cascade over an
   equal-specificity single-class selector like this theme's, the same
   issue already documented (and fixed the same way) further down this
   file for the mobile item-row layout. */
.wc-block-components-quantity-selector__button--plus {
	background-color: var(--yodha-orange) !important;
	color: var(--white) !important;
}

.wc-block-components-quantity-selector__button--plus:hover:not(:disabled),
.wc-block-components-quantity-selector__button--plus:focus-visible:not(:disabled) {
	background-color: var(--yodha-orange-dark) !important;
}

.wc-block-components-quantity-selector__button--minus {
	background-color: var(--color-bg-alt) !important;
	border-color: var(--color-border);
	color: var(--color-text) !important;
}

.wc-block-components-quantity-selector__button--minus:hover:not(:disabled),
.wc-block-components-quantity-selector__button--minus:focus-visible:not(:disabled) {
	background-color: var(--color-border) !important;
	color: var(--yodha-orange-dark) !important;
}

.wc-block-components-quantity-selector__button:disabled {
	color: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.5;
}

.wc-block-components-quantity-selector__input {
	width: 40px;
	height: 32px;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	text-align: center;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	/* Hide native number-input spinners so only the theme's own +/-
	   buttons control the value. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ------------------------------------------------------------
   REMOVE — the block's own <button> (already AJAX, already accessible —
   it ships a real aria-label naming the product). Icon-button styling
   only, grouped right next to the quantity control since that's where
   this block's markup actually places it.
   ------------------------------------------------------------ */
.wc-block-cart-item__remove-link {
	/* !important — the same container-query rule described above on
	   .wc-block-cart-items__row also sets `display: none` on this exact
	   remove button below ~700px container width (its own selector is
	   even more specific there: table + 4 classes). Without this, the
	   remove ("trash") button on every cart item simply vanished on real
	   phones/tablets, with no plain-CSS way to tell from a screenshot that
	   it was `display:none` rather than just unstyled. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	padding: 0;
	background-color: var(--color-bg-alt) !important;
	border: none;
	border-radius: var(--radius-full);
	color: var(--color-text-muted) !important;
	cursor: pointer;
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus-visible {
	background-color: var(--color-danger) !important;
	color: var(--white) !important;
}

.wc-block-cart-item__remove-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ============================================================
   CONTINUE SHOPPING — added by inc/cart.php via the_content, so it sits
   outside the block's own React-managed DOM (immune to re-renders on
   quantity/coupon changes) and links via the same yodha_fuel_shop_url()
   helper used site-wide, never a hard-coded URL.
   ============================================================ */
.yf-cart-continue {
	margin-top: var(--space-xl);
}

/* Circular back-arrow "button" + label, matching the reference design's
   round icon-button treatment. The arrow is a plain aria-hidden span
   from inc/cart.php (not a real button, since the link itself is the
   clickable element) — only its appearance changes here. */
.yf-cart-continue__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.yf-cart-continue__link span[aria-hidden] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background-color: var(--yodha-orange);
	color: var(--white);
	font-size: 1.1rem;
}

.yf-cart-continue__link:hover,
.yf-cart-continue__link:focus {
	color: var(--yodha-orange);
}

.yf-cart-continue__link:hover span[aria-hidden],
.yf-cart-continue__link:focus span[aria-hidden] {
	background-color: var(--yodha-orange-dark);
}

/* ============================================================
   SIDEBAR — coupon + totals + Proceed to Checkout. Styled as its own
   white card (border + shadow) to match the "Order Summary" panel in
   the reference design, rather than the flat off-white well used
   before.
   ============================================================ */
.wc-block-cart__sidebar {
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	/* Same stronger, brand-tinted shadow as the item cards above, so the
	   two card types on this page read as one consistent system. */
	box-shadow: 0 10px 28px rgba(245, 83, 1, 0.16), 0 2px 8px rgba(39, 47, 50, 0.06);
	/* !important — the same WooCommerce container-query mechanism
	   documented on .wc-block-cart-items__row above also resets this
	   panel's own padding to 0 below ~700px container width (selector:
	   two classes on the sidebar-layout wrapper, still more specific than
	   this theme's plain one-class rule), which was flattening the "Order
	   Summary" card's coupon/totals/checkout button flush against its own
	   border on real phones and tablets. */
	padding: var(--space-lg) !important;
}

.wc-block-cart__totals-title {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-md);
}

/* Coupon panel (collapsible "Add coupons" / "Apply coupon" toggle). */
.wc-block-components-totals-coupon {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: var(--border-width) solid var(--color-border);
}

.wc-block-components-panel__button {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	width: 100%;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-text);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	cursor: pointer;
}

.wc-block-components-panel__button:hover,
.wc-block-components-panel__button:focus-visible {
	color: var(--yodha-orange);
}

.wc-block-components-totals-coupon__content {
	margin-top: var(--space-sm);
}

.wc-block-components-totals-coupon__form {
	display: flex;
	gap: var(--space-xs);
}

.wc-block-components-totals-coupon__input {
	flex: 1 1 auto;
}

.wc-block-components-totals-coupon__input input,
.wc-block-components-text-input input {
	width: 100%;
	height: var(--btn-height-sm);
	padding: 0 var(--space-sm);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
}

.wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	height: var(--btn-height-sm);
	padding: 0 var(--space-md);
	background-color: var(--warrior-dark);
	border: var(--border-width) solid var(--warrior-dark);
	border-radius: var(--radius-sm);
	color: var(--white);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button:focus-visible {
	background-color: var(--warrior-dark-soft);
	border-color: var(--warrior-dark-soft);
}

.wc-block-components-totals-coupon__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Subtotal / Shipping / Discount / Total rows — the block shows whichever
   of these are relevant (e.g. a Shipping row only appears once a shipping
   method is calculable, a Discount row only once a coupon is applied) and
   always recalculates them itself; this styles the row pattern generically
   so every combination looks consistent. Labels are muted by default —
   Subtotal/Shipping/Discount are "working" figures, not the number the eye
   should land on — with the final Total row overriding back to full
   heading weight below, so it reads as the one line that matters. */
.wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-xs) 0;
	font-size: var(--fs-body);
	color: var(--color-text);
}

.wc-block-components-totals-item__label {
	color: var(--color-text-muted);
}

.wc-block-components-totals-item__value {
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	text-align: right;
}

.wc-block-components-totals-item__description {
	flex-basis: 100%;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* Discount row — WooCommerce Blocks renders this as a distinct
   `TotalsDiscount` component (its own wc-block-components-totals-discount
   class alongside the generic totals-item one), so its amount can be
   picked out from a plain Subtotal figure. Colored as a positive outcome
   (savings), matching the "Save ₹x" treatment already used on product
   cards elsewhere in the theme, rather than reusing the same neutral
   dark heading color every other value uses. */
.wc-block-components-totals-discount .wc-block-components-totals-item__label,
.wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--color-success);
}

/* Applied coupon "chip" — WooCommerce Blocks renders each applied coupon
   as a removable chip inside the Discount row's description slot
   (.wc-block-components-totals-item__description above). Restyled from
   its plain default pill into a compact, branded tag rather than left at
   WooCommerce's own unstyled default. */
.wc-block-components-totals-discount__coupon-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-2xs) 0 0;
	padding: 0;
	list-style: none;
}

.wc-block-components-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	height: 28px;
	padding: 0 var(--space-2xs) 0 var(--space-sm);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-success);
	border-radius: var(--radius-full);
	color: var(--color-success);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.wc-block-components-chip__text {
	white-space: nowrap;
}

.wc-block-components-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	color: inherit;
	cursor: pointer;
}

.wc-block-components-chip__remove:hover,
.wc-block-components-chip__remove:focus-visible {
	background-color: var(--color-danger);
	color: var(--white);
}

.wc-block-components-chip__remove svg,
.wc-block-components-chip__remove-icon {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* The final Total row — visually the heaviest line in the summary. */
.wc-block-components-totals-footer-item {
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	border-top: var(--border-width) solid var(--color-border);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--fs-price-lg);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

/* ------------------------------------------------------------
   PROCEED TO CHECKOUT — native <a> already pointed at
   wc_get_checkout_url() by WooCommerce itself; styling only, matching
   this theme's .yf-btn--primary look without depending on that class
   (the block renders its own markup/classes, not this theme's button
   component).
   ------------------------------------------------------------ */
.wc-block-cart__submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--btn-height-lg);
	margin-top: var(--space-lg);
	background-color: var(--yodha-orange) !important;
	border: var(--btn-border-width) solid var(--yodha-orange) !important;
	border-radius: var(--radius-md);
	color: var(--white) !important;
	font-weight: var(--fw-button);
	font-size: var(--fs-button);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus-visible {
	background-color: var(--yodha-orange-dark) !important;
	border-color: var(--yodha-orange-dark) !important;
	color: var(--white) !important;
}

.wc-block-cart__submit-button:focus-visible {
	outline: 3px solid var(--warrior-dark);
	outline-offset: 3px;
}

/* ============================================================
   NOTICES — coupon errors ("invalid coupon"), stock notices, etc. Native
   block markup, restyled to the theme's danger/muted palette rather than
   WooCommerce Blocks' default red/yellow.
   ============================================================ */
.wc-block-components-notice-banner {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	margin-bottom: var(--space-md);
}

.wc-block-components-notice-banner.is-error {
	background-color: #FBEAEA;
	color: var(--color-danger);
}

.wc-block-components-notice-banner.is-success {
	background-color: #E8F5EA;
	color: var(--color-success);
}

/* ============================================================
   EMPTY CART STATE — native .wp-block-woocommerce-empty-cart-block.
   assets/js/cart.js swaps in the branded title/subtitle text and adds the
   "Explore Products" button (see that file); this file only styles
   whatever is there, whether JS has run yet or not, so the native default
   copy is never left completely unstyled while the page hydrates.
   ============================================================ */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: var(--space-2xl) 0;
}

.wc-block-cart__empty-cart__title {
	margin-bottom: var(--space-sm);
}

.yf-cart-empty__subtext {
	color: var(--color-text-muted);
	max-width: 48ch;
	margin: 0 auto var(--space-lg);
}

.yf-cart-empty__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height-lg);
	padding: 0 var(--btn-padding-x-lg);
	background-color: var(--yodha-orange);
	border-radius: var(--btn-radius);
	color: var(--white);
	font-weight: var(--fw-button);
	font-size: var(--fs-button);
}

.yf-cart-empty__cta:hover,
.yf-cart-empty__cta:focus {
	background-color: var(--yodha-orange-dark);
	color: var(--white);
}

.wp-block-woocommerce-empty-cart-block hr {
	max-width: 320px;
	margin: var(--space-2xl) auto;
	border-color: var(--color-border);
}

/* Space between the "New in store" heading and the grid below it —
   targets the grid's own wrapper (WooCommerce's native block markup, the
   element immediately after that <h2>) rather than the heading itself,
   since the heading carries no class of its own to hang a selector off
   (just the generic .wp-block-heading it shares with every other native
   heading on this page). */
.wp-block-woocommerce-empty-cart-block .wc-block-grid {
	margin-top: var(--space-lg);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	padding: 0;
	list-style: none;
	text-align: left;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--card-radius);
	overflow: hidden;
	/* Same card treatment as .yf-product-card in components.css (the
	   homepage/shop product card foundation) — this block renders its own
	   native WooCommerce markup, not that theme component, so the same
	   --shadow-card / --shadow-card-hover / translateY lift is reproduced
	   here directly rather than reused via a shared class, to keep this
	   "New in store" card visually consistent with every other product
	   card on the site. */
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	/* !important — confirmed live (by walking document.styleSheets for
	   every rule matching this exact element) that WooCommerce's own
	   all-products.css ships a leftover flexbox-era rule scoped to this
	   block's "4 columns" editor setting:
	   `.wc-block-grid.has-4-columns .wc-block-grid__product { flex: 1 0
	   25%; max-width: 25% }`. The `flex` half is inert once this grid
	   layout is in play, but `max-width` is not flex-specific — it still
	   caps each card to 25% of its own grid cell no matter how many
	   columns this theme's grid actually uses. That 3-class selector
	   (0,3,0) beats this rule's 2-class one (0,2,0) regardless of load
	   order — the same class of conflict already documented and fixed
	   (the same way) elsewhere in this file — and is what was squeezing
	   every "New in store" product down to a quarter of its column,
	   leaving the rest of the row blank. */
	max-width: none !important;
	width: 100% !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:focus-within {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	padding: 0 var(--space-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	padding: 0 var(--space-sm) var(--space-sm);
	font-weight: var(--fw-bold);
}

/* "Add to cart" — WooCommerce/Gutenberg's own native button markup here
   (confirmed live: <a class="wp-block-button__link add_to_cart_button
   ajax_add_to_cart">), left completely unstyled by this theme until now,
   which is why it was still rendering in WooCommerce's plain gray/black
   default rather than the brand's orange primary button used everywhere
   else (.yf-btn--primary in components.css). Same colors/radius/hover
   reproduced directly on WooCommerce's own classes for the same reason
   as the card shadow above — this markup can't carry the theme's own
   button class. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	padding: 0 var(--space-sm) var(--space-sm);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--btn-height-md);
	padding: 0 var(--btn-padding-x-md);
	background-color: var(--yodha-orange) !important;
	border: var(--btn-border-width) solid var(--yodha-orange) !important;
	border-radius: var(--btn-radius);
	color: var(--white) !important;
	font-weight: var(--fw-button);
	font-size: var(--fs-button);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .add_to_cart_button:focus-visible {
	background-color: var(--yodha-orange-dark) !important;
	border-color: var(--yodha-orange-dark) !important;
	color: var(--white) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .add_to_cart_button:focus-visible {
	outline: 3px solid var(--warrior-dark);
	outline-offset: 3px;
}

/* ============================================================
   BREAKPOINTS — 375 (base, stacked) → 480 → 768 → 1024 (two columns) →
   1280px, matching every other stylesheet in this theme.
   ============================================================ */

/* 768px — tablet: still one column (items above summary), but the empty-
   cart recommendation grid grows to 3 columns. */
@media (min-width: 768px) {
	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 1024px — desktop: the real two-column cart layout, items left / sticky
   summary right, matching the same grid pattern already used on the
   Single Product page (gallery/summary) and generally in this theme. */
@media (min-width: 1024px) {
	/* WooCommerce Blocks' own stylesheet sets flex-wrap: wrap on this
	   container (confirmed live) so it can reflow to a single column on
	   its own at narrow widths. At this theme's own 1024px breakpoint we
	   take over the column/row decision ourselves (this rule already
	   forces flex-direction: row above), so flex-wrap must be pinned to
	   nowrap here too — otherwise the native wrap rule was still forcing
	   the sidebar onto its own line below an empty, full-width first
	   child the block renders (a notice-region placeholder div), even
	   though flex-direction had correctly switched to row. */
	.wc-block-components-sidebar-layout.wc-block-cart {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: var(--space-2xl);
	}

	.wc-block-cart__main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wc-block-cart__sidebar {
		flex: 0 0 360px;
		position: sticky;
		top: var(--space-lg);
	}

	.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 1280px — large desktop: a little more room for the summary column. */
@media (min-width: 1280px) {
	.wc-block-cart__sidebar {
		flex-basis: 400px;
	}
}

/* ------------------------------------------------------------
   BELOW 480px — the item card's own flexbox (image | name+price+qty,
   set up above) already reflows on its own as space runs out, so the
   only narrow-screen adjustment needed is letting the total column
   drop to its own full-width line under very tight widths instead of
   squeezing next to the image.

   BUG FIXED HERE (confirmed live on an actual iPhone/iPad — the tool
   in this environment can't truly emulate a narrow viewport to catch
   this itself): the total column previously combined `flex: 1 1 100%`
   (full row width) with an extra `margin-left: 88px` on top of that —
   on a flex item, a margin adds to, not carves out of, that 100%, so
   the row was 88px wider than its container on every phone. That's
   what was cutting off the price and pushing "Proceed to Checkout" off
   the right edge of the screen. Fixed by using `padding-left` with
   `box-sizing: border-box` instead, which keeps the same visual indent
   but is subtracted from the 100% width rather than added to it.
   ------------------------------------------------------------ */
@media (max-width: 479px) {
	.wc-block-cart-items__row {
		flex-wrap: wrap;
	}

	.wc-block-cart-item__total {
		flex: 1 1 100%;
		box-sizing: border-box;
		padding-left: 100px;
		margin-left: 0;
	}

	.wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-start;
	}
}