/*
 * Cart + Checkout (WooCommerce Blocks).
 *
 * These pages render via WooCommerce's native Cart/Checkout blocks (React +
 * the Interactivity API, bundled in WooCommerce core) — not the classic
 * shortcode templates. WooCommerce's own default block CSS already handles
 * the hard parts correctly out of the box: responsive layout (its own
 * container-width based is-mobile/is-small/is-large classes), the floating
 * label mechanic on text inputs, quantity stepper behavior, address-card
 * edit toggling, AJAX total updates. This file only re-skins colors,
 * spacing, radius and typography to match the theme's design tokens —
 * it never touches position/transform rules that drive that JS-managed
 * behavior, so nothing here can break it.
 *
 * Loaded only on Cart/Checkout (see inc/enqueue.php).
 */

/* ---------- GST-inclusive note (Cart page only — see page.php) ---------- */

.gs-cart-gst-note {
	margin: -0.25rem 0 var(--gs-space-md);
	font-size: 0.8125rem;
	color: var(--gs-color-text-muted);
}

/* ---------- Shared layout: content + sidebar ---------- */

.wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--gs-space-xl);
	align-items: start;
}

/*
 * Explicit column + full width rather than relying on grid auto-placement/
 * stretch — WooCommerce Blocks renders an extra absolutely-positioned
 * overlay div as a sibling here (its own loading-state placeholder), and
 * in practice that leaves auto-placed items sized to their own content
 * instead of stretching to fill their track (the same class of issue as
 * the My Account nav/content grid above — see the comment there).
 */
/*
 * ".wc-block-components-sidebar-layout .wc-block-components-main" matches
 * (and, with source order, beats) WooCommerce's own
 * ".wc-block-components-sidebar-layout .wc-block-components-main{width:65%}"
 * in checkout.css — a plain ".wc-block-components-main" selector has lower
 * specificity and loses to it, leaving the main column stuck at 65% of its
 * grid track instead of filling it.
 */
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-main {
	grid-column: 1;
	width: 100%;
	min-width: 0;
}

.wc-block-components-sidebar {
	grid-column: 2;
	width: 100%;
	min-width: 0;
	position: sticky;
	top: calc(1px + var(--gs-space-md));
}

/* ---------- Notices ---------- */

.wc-block-components-notice-banner {
	border-radius: var(--gs-radius-md);
	border-width: 1px;
	padding: var(--gs-space-md);
	margin-bottom: var(--gs-space-md);
}

.wc-block-components-notice-banner.is-error {
	background: var(--gs-color-danger-bg);
	border-color: var(--gs-color-danger);
	color: var(--gs-color-danger);
}

.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	background: var(--gs-color-background-subtle);
	border-color: var(--gs-color-border);
	color: var(--gs-color-text);
}

/* ---------- Buttons ---------- */

.wc-block-components-button.contained,
.wc-block-components-button:not(.is-link) {
	background: var(--gs-color-primary);
	border-radius: var(--gs-radius-md);
	font-weight: 700;
	min-height: 48px;
}

.wc-block-components-button.contained:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--gs-color-primary-hover);
}

/* ---------- Cart items table ---------- */

.wc-block-cart-items {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var(--gs-color-border);
}

.wc-block-cart-items__header th {
	padding-bottom: var(--gs-space-sm);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gs-color-text-muted);
	text-align: left;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--gs-color-border);
}

.wc-block-cart-items__row td {
	padding-block: var(--gs-space-md);
	vertical-align: top;
}

.wc-block-cart-item__image img {
	border-radius: var(--gs-radius-sm);
	background: var(--gs-color-background-subtle);
}

.wc-block-components-product-name {
	font-weight: 700;
	color: var(--gs-color-text);
	overflow-wrap: anywhere;
}

.wc-block-components-product-price .wc-block-components-product-price__value,
.wc-block-components-product-price ins {
	color: var(--gs-color-primary);
	font-weight: 700;
	text-decoration: none;
}

.wc-block-components-product-price del {
	color: var(--gs-color-text-muted);
}

.wc-block-components-sale-badge {
	background: var(--gs-color-danger-bg);
	color: var(--gs-color-danger);
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.75rem;
}

/* Quantity stepper — same visual language as the single-product one. */

.wc-block-components-quantity-selector {
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	overflow: hidden;
	height: 44px;
}

.wc-block-components-quantity-selector__button {
	width: 40px;
	background: var(--gs-color-background-subtle);
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--gs-color-border);
}

.wc-block-components-quantity-selector__input {
	font-weight: 700;
}

.wc-block-cart-item__remove-link {
	color: var(--gs-color-text-muted);
	min-width: 44px;
	min-height: 44px;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--gs-color-danger);
}

/* ---------- Totals sidebar (cart + checkout) ---------- */

.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-title {
	font-size: 1.125rem;
}

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

.wc-block-components-totals-item__value {
	font-weight: 600;
}

.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: 1.125rem;
	font-weight: 800;
	color: var(--gs-color-primary);
}

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--gs-color-border);
	padding-block: var(--gs-space-sm);
}

.wc-block-components-panel__button {
	font-weight: 600;
	min-height: 44px;
}

/* ---------- Checkout: steps, fields, address cards ---------- */

.wc-block-components-checkout-step__title {
	font-size: 1.125rem;
}

.wc-block-components-checkout-step {
	padding-bottom: var(--gs-space-lg);
	border-bottom: 1px solid var(--gs-color-border);
}

/* Text-input colors/radius only — position/transform intentionally left
   untouched so WC's own JS-driven floating-label animation keeps working. */
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="url"],
.wc-blocks-components-select__select,
textarea.wc-block-components-textarea {
	border-radius: var(--gs-radius-md);
	border-color: var(--gs-color-border);
	font-family: var(--gs-font-body);
	min-height: 48px;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--gs-color-primary);
}

.wc-blocks-components-select {
	border-radius: var(--gs-radius-md);
}

.wc-block-components-address-card {
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	padding: var(--gs-space-md);
}

.wc-block-components-address-card__edit {
	color: var(--gs-color-primary);
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.wc-block-components-checkbox svg,
.wc-block-components-radio-control__input {
	accent-color: var(--gs-color-primary);
}

/* Payment method list */

.wc-block-components-payment-method-label {
	font-weight: 600;
}

.wc-block-components-radio-control__option {
	border: 1px solid var(--gs-color-border);
	border-radius: var(--gs-radius-md);
	padding: var(--gs-space-sm) var(--gs-space-md);
	min-height: 44px;
}

/* Place Order / Proceed to Checkout full-width on their own row */

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	width: 100%;
	font-size: 1rem;
}

/* Root cause: WordPress core's global button-color rule
   (":root :where(.wp-element-button, .wp-block-button__link)") uses :where(),
   which carries zero specificity, so it loses to the theme's own
   ".gs-page__content a" prose-link rule (0,1,1) that wraps all Cart content
   (page.php). That prose rule sets these blue-background buttons' text to
   the same blue as their background, making it unreadable. Fixed here with a
   scoped, cart-specific override (0,2,0) rather than touching the global
   ".gs-page__content a" rule, which must stay as-is for ordinary text links
   on other pages. Background, size, padding, radius and hover background are
   untouched — only text (and any icon) color is corrected to white.
   Covers: the "Proceed to Checkout" button, and the "Add to cart" buttons in
   the empty-cart "New in store" block (both are real <a> elements). */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-cart__submit-button:focus,
.woocommerce-cart .wc-block-cart__submit-button:active,
.woocommerce-cart .wc-block-cart__submit-button:visited,
.woocommerce-cart a.wp-block-button__link.add_to_cart_button,
.woocommerce-cart a.wp-block-button__link.add_to_cart_button:hover,
.woocommerce-cart a.wp-block-button__link.add_to_cart_button:focus,
.woocommerce-cart a.wp-block-button__link.add_to_cart_button:active,
.woocommerce-cart a.wp-block-button__link.add_to_cart_button:visited {
	color: #fff;
}

.woocommerce-cart .wc-block-cart__submit-button svg,
.woocommerce-cart a.wp-block-button__link.add_to_cart_button svg {
	fill: currentColor;
}

/* Order summary line items (checkout sidebar) */

.wc-block-components-order-summary-item__image img {
	border-radius: var(--gs-radius-sm);
	background: var(--gs-color-background-subtle);
}

.wc-block-components-order-summary-item__quantity {
	background: var(--gs-color-secondary);
	color: #fff;
}

.wc-block-components-product-metadata {
	color: var(--gs-color-text-muted);
	font-size: 0.8125rem;
}

/* =========================================================================
   Tablet (<= 1024px)
   ========================================================================= */

@media (max-width: 1024px) {
	.wc-block-components-sidebar-layout {
		grid-template-columns: 1fr 320px;
		gap: var(--gs-space-lg);
	}
}

/* =========================================================================
   Phone (<= 767px): sidebar drops below the main column — WooCommerce's
   own is-mobile/is-small container classes already handle most internal
   spacing changes at this range.
   ========================================================================= */

@media (max-width: 767px) {
	.wc-block-components-sidebar-layout {
		grid-template-columns: 1fr;
	}

	.wc-block-components-main,
	.wc-block-components-sidebar {
		/* Only one track at this width — see the desktop rule above for why
		   these need an explicit grid-column in the first place. */
		grid-column: 1;
	}

	.wc-block-components-sidebar {
		position: static;
	}

	.wc-block-cart-items__header-image,
	.wc-block-cart-items__header-product {
		font-size: 0.6875rem;
	}

	/*
	 * WooCommerce's own is-mobile/is-small/is-medium cart-row grid
	 * (grid-template-columns:80px 132px, line total pulled onto grid-row 1 via
	 * an implicit auto-sized 3rd column) squeezes the product name into such a
	 * narrow column at 320-430px that it wraps right up against the line
	 * total, which sits at the same height — reading like the price is
	 * embedded mid-title. Re-flow to two rows in the same column instead:
	 * name/price/qty on row 1, line total dropped below on row 2. Selectors
	 * repeat WC's own chain with the target class doubled to exceed its
	 * specificity without !important.
	 */
	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row,
	.is-small table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row,
	.is-medium table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row {
		grid-template-columns: 72px 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--gs-space-md);
		row-gap: var(--gs-space-sm);
	}

	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image.wc-block-cart-item__image,
	.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image.wc-block-cart-item__image,
	.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image.wc-block-cart-item__image {
		grid-column: 1;
		grid-row: 1 / 3;
		padding-right: 0;
	}

	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product.wc-block-cart-item__product {
		grid-column: 2;
		grid-row: 1;
	}

	.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total.wc-block-cart-item__total,
	.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total.wc-block-cart-item__total,
	.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total.wc-block-cart-item__total {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
		text-align: left;
		font-weight: 700;
		color: var(--gs-color-primary);
	}
}