/**
 * E-shop styles.
 *
 * Almost everything is Tailwind utilities in the templates; this file only
 * carries what utilities cannot express.
 */

/* The quantity stepper uses a text input, but browsers still add spinners
   when inputmode is numeric on some platforms. */
[data-beyou-qty] input::-webkit-outer-spin-button,
[data-beyou-qty] input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

[data-beyou-qty] input {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The cart badge used to be styled here as .beyou-cart-badge. It moved to
   Tailwind utilities in template-parts/components/header.php: this stylesheet
   loads only on shop screens, but the header is global, so the badge was
   unstyled everywhere else. Leaving the rule here would also have overridden
   the utilities on shop screens — this file is unlayered — and the two pages
   would have disagreed. */

/* Cart line item.
   Figma rearranges this between breakpoints: on mobile the quantity stepper and
   the price sit inside the text column, above "Odebrat"; on desktop they become
   their own columns to the right of it. Expressed as a grid so the stepper is
   rendered once — shop/cart.js binds to its data attributes and a duplicated
   DOM node would desync. */
.beyou-cart-line {
	display: grid;
	align-items: center;
	gap: 8px 12px;
	padding: 18px 0;
	grid-template-columns: 72px 1fr;
	grid-template-areas:
		'thumb title'
		'thumb variant'
		'thumb qty'
		'thumb remove';
}

.beyou-cart-line__thumb {
	grid-area: thumb;
	align-self: start;
	width: 72px;
	height: 72px;
}

.beyou-cart-line__title   { grid-area: title; }
.beyou-cart-line__variant { grid-area: variant; }
.beyou-cart-line__qty     { grid-area: qty; justify-self: start; }
.beyou-cart-line__price   { grid-area: qty; justify-self: end; }
.beyou-cart-line__remove  { grid-area: remove; justify-self: start; }

@media (min-width: 640px) {
	.beyou-cart-line {
		gap: 6px 20px;
		padding: 24px 0;
		grid-template-columns: 88px 1fr auto 110px;
		grid-template-areas:
			'thumb title   qty price'
			'thumb variant qty price'
			'thumb remove  qty price';
	}

	.beyou-cart-line__thumb {
		width: 88px;
		height: 88px;
	}

	.beyou-cart-line__qty {
		align-self: center;
		justify-self: start;
	}

	.beyou-cart-line__price {
		grid-area: price;
		align-self: center;
		justify-self: end;
	}
}

/* Variant pills that are out of stock stay readable but clearly unavailable. */
[data-beyou-variant]:disabled {
	pointer-events: none;
}

/* Radio-card payment selection for browsers without :has() support:
   the border still changes via the checked input's accent colour. */
@supports not selector(:has(*)) {
	input[name='payment_method']:checked {
		accent-color: var(--color-coal);
	}
}