/*
 * InTouchDesign Companion Pro - the `shop` module: WooCommerce in the theme's clothes.
 *
 * Loaded after WooCommerce's own stylesheet (woocommerce-general) on the store's pages only
 * (ITDCompanion_Shop_Theme::enqueue). Colours come only from the theme's palette,
 * var( --wp--preset--color--{slot} ), and from the four tones the theme derives from it at the top
 * of its main.css (--itd-primary-dark, --itd-accent-tint, --itd-accent-light, --itd-on-dark-soft)
 * plus its two aliases (--itd-cream = surface, --itd-border = line). No palette colour is written
 * here as a hex value, so a demo that recolours the palette recolours the store with it. The one
 * literal is the theme's form error colour (#c0392b, as main.css gives `.wpcf7-not-valid`), which the
 * palette rules keep fixed: the border of a checkout field in error.
 *
 * What it imitates in the theme (intouchdesign/assets/css/main.css and theme.json):
 * - the container: `.content-area` inside `<main class="site-content">`, sized like `.itd-blog-grid`
 *   (wide size, spacing-30 inline, spacing-70 at the end);
 * - the archive heading: `.page-header` / `.page-title` (centred, primary, clamp size);
 * - buttons: theme.json `elements.button` (primary, base text, pill radius, primary-dark on
 *   hover) with main.css `.wp-element-button:hover` (lift);
 * - fields: `.comment-form input` / `.wpcf7-form-control` (line border, 12px radius, 12px 16px
 *   padding, secondary focus ring);
 * - cards: `.itd-blog-card` (20px radius, 1.125rem primary title, secondary on hover);
 * - labels: `.itd-post-cats` (0.75rem, 700, 0.12em, uppercase, secondary);
 * - notices: `.wpcf7-response-output` (line border, 12px radius);
 * - tabs: the header menu's current item (secondary underline).
 *
 * It also dresses the "added to your cart" notice that assets/cart-toast.js shows (its own section,
 * before the phones').
 *
 * !important: none. The few WooCommerce rules that carry it (woocommerce.css: `.woocommerce
 * a.remove` colour, `.screen-reader-text`, notice `li` padding; woocommerce-smallscreen.css:
 * `clear:none` on every second product, `text-align:right` on responsive table cells) are left
 * alone: nothing here needs to override them.
 *
 * @package InTouchDesign_Companion
 */

/* WooCommerce's own custom properties, pointed at the palette (read by its buttons, badges,
   fields and forms wherever a rule below does not set the value itself). */
:root {
	--wc-primary: var( --wp--preset--color--primary );
	--wc-primary-text: var( --wp--preset--color--base );
	--wc-secondary: var( --itd-cream );
	--wc-secondary-text: var( --wp--preset--color--primary );
	--wc-highlight: var( --wp--preset--color--secondary );
	--wc-highligh-text: var( --wp--preset--color--base );
	--wc-content-bg: var( --wp--preset--color--base );
	--wc-subtext: var( --wp--preset--color--muted );
	--wc-form-border-color: var( --itd-border );
	--wc-form-border-radius: 12px;
	--wc-form-color-background: var( --wp--preset--color--base );
	--wc-form-color-text: var( --wp--preset--color--primary );
	--wc-separator-color: var( --itd-border );
}

/* ---- The container: WooCommerce's templates (shop, category, product) ---------------------- */

.itd-shop {
	max-width: var( --wp--style--global--wide-size, 1300px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--30 );
	padding-block: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--70 );
}

.itd-shop::after {
	content: "";
	display: table;
	clear: both;
}

/* The store's pages built from page.php (cart, checkout, my account): the title lines up with the
   content below it (centred on the cart and the checkout, like the shop's), and the content keeps
   the theme's gutter on a phone. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
	max-width: calc( var( --wp--style--global--wide-size, 1300px ) + 2 * var( --wp--preset--spacing--30 ) );
	text-align: center;
}

.woocommerce-account .entry-header {
	max-width: calc( var( --wp--style--global--content-size, 720px ) + 2 * var( --wp--preset--spacing--30 ) );
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	padding-inline: var( --wp--preset--spacing--30 );
}

/* The cart and checkout blocks end on their own margin; the account's form does not. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	padding-block-end: var( --wp--preset--spacing--40 );
}

.woocommerce-account .entry-content {
	padding-block-end: var( --wp--preset--spacing--50 );
}

/* ---- Breadcrumb, heading, count and ordering --------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 var( --wp--preset--spacing--20 );
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
}

.woocommerce .woocommerce-breadcrumb a {
	color: var( --wp--preset--color--muted );
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var( --wp--preset--color--secondary );
}

.woocommerce-products-header {
	max-width: var( --wp--style--global--content-size, 720px );
	margin-inline: auto;
	padding-block: var( --wp--preset--spacing--40 );
	text-align: center;
}

.woocommerce-products-header .page-title {
	margin: 0;
}

.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description {
	margin-top: var( --wp--preset--spacing--20 );
	color: var( --wp--preset--color--muted );
}

.woocommerce .woocommerce-result-count {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
	line-height: 2.75rem;
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 var( --wp--preset--spacing--40 );
}

/* ---- Fields (theme: .comment-form input, .wpcf7-form-control) ----------------------------- */

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select,
.woocommerce .quantity .qty {
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --itd-border );
	border-radius: 12px;
	padding: 12px 16px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selects keep WooCommerce's room for the arrow. */
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select {
	padding-inline-end: 3em;
	cursor: pointer;
}

.woocommerce .quantity .qty {
	width: 4.5em;
	padding-inline: 8px;
	text-align: center;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce .woocommerce-ordering select:focus,
.woocommerce .quantity .qty:focus {
	outline: none;
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --wp--preset--color--secondary ) 15%, transparent );
}

.woocommerce form .form-row label {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: var( --wp--preset--spacing--40 ) 0 0;
	padding: var( --wp--preset--spacing--40 );
	border: 1px solid var( --itd-border );
	border-radius: 20px;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	margin-block: var( --wp--preset--spacing--20 );
	line-height: 2.75rem;
}

/* ---- Buttons (theme.json elements.button + main.css .wp-element-button:hover) -------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-height: 2.75rem;
	margin: 0;
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--primary );
	border: 0;
	border-radius: 9999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: inherit;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	color: var( --wp--preset--color--base );
	background-color: var( --itd-primary-dark );
	transform: translateY( -1px );
}

.woocommerce #respond input#submit:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 2px;
}

/* Disabled: WooCommerce also resets the padding here, with a longer selector than the one above. */
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled[disabled]:hover {
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--primary );
	opacity: 0.5;
	transform: none;
}

.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: var( --wp--preset--spacing--20 );
	color: var( --wp--preset--color--secondary );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	text-decoration: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce #respond input#submit,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		transition: none;
	}

	.woocommerce #respond input#submit:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover {
		transform: none;
	}
}

/* ---- Product grid (theme: .itd-blog-grid, .itd-blog-card) ---------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--40 );
	clear: both;
	margin: 0 0 var( --wp--preset--spacing--50 );
	padding: 0;
}

/* The catalogue's last row ends on the container's own padding (no pagination below it). */
.itd-shop > ul.products:last-child {
	margin-bottom: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products.columns-1 {
	grid-template-columns: minmax( 0, 1fr );
}

.woocommerce ul.products.columns-2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.woocommerce ul.products.columns-4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.woocommerce ul.products.columns-5 {
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
}

.woocommerce ul.products.columns-6 {
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
}

@media ( max-width: 1024px ) {
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 782px ) {
	.woocommerce ul.products[class*="columns-"]:not( .columns-1 ) {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 var( --wp--preset--spacing--30 );
	border-radius: 20px;
	background-color: var( --itd-border );
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	margin: 0 0 var( --wp--preset--spacing--20 );
	padding: 0;
	color: var( --wp--preset--color--primary );
	font-size: 1.125rem;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	color: var( --wp--preset--color--secondary );
}

.woocommerce ul.products li.product .price {
	margin: 0 0 var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--primary );
	font-size: 1rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	display: inline-flex;
	align-self: flex-start;
	margin-top: auto;
}

/* ---- Prices, sale label, stars --------------------------------------------------------------- */

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --wp--preset--color--primary );
	font-size: 1.5rem;
	font-weight: 600;
}

.woocommerce .price del,
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var( --wp--preset--color--muted );
	font-weight: 500;
	opacity: 1;
}

.woocommerce .price ins,
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	background: none;
	text-decoration: none;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	top: var( --wp--preset--spacing--30 );
	right: auto;
	left: var( --wp--preset--spacing--30 );
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.45em 0.9em;
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--secondary );
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.woocommerce .star-rating::before {
	color: var( --itd-border );
}

.woocommerce p.stars a {
	color: var( --wp--preset--color--muted );
}

.woocommerce .star-rating span::before,
.woocommerce p.stars:hover a,
.woocommerce p.stars.selected a {
	color: var( --wp--preset--color--secondary );
}

/* ---- Single product ----------------------------------------------------------------------- */

.woocommerce div.product {
	margin-top: var( --wp--preset--spacing--30 );
}

.woocommerce div.product div.images {
	margin-bottom: var( --wp--preset--spacing--50 );
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport {
	border-radius: 20px;
	overflow: hidden;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--20 );
	margin-top: var( --wp--preset--spacing--20 );
}

.woocommerce div.product div.images .flex-control-thumbs::before,
.woocommerce div.product div.images .flex-control-thumbs::after {
	content: none;
	display: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: auto;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: 12px;
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
	background-color: var( --wp--preset--color--base );
}

.woocommerce div.product .product_title {
	margin: 0 0 var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--primary );
	font-size: clamp( 1.75rem, 1.75rem + 1vw, 2.5rem );
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-block: var( --wp--preset--spacing--30 );
}

.woocommerce div.product form.cart {
	margin-block: var( --wp--preset--spacing--40 );
}

.woocommerce div.product form.cart:not( .variations_form ):not( .grouped_form ),
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var( --wp--preset--spacing--20 );
}

.woocommerce div.product form.cart:not( .variations_form ):not( .grouped_form )::before,
.woocommerce div.product form.cart:not( .variations_form ):not( .grouped_form )::after {
	content: none;
	display: none;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce div.product form.cart .button {
	float: none;
	padding-inline: var( --wp--preset--spacing--50 );
}

.woocommerce div.product .stock {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
}

.woocommerce div.product .product_meta {
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --itd-border );
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 0.25em;
}

/* Tabs: a row of labels on a line, the current one underlined like the header's current item. */
.woocommerce div.product .woocommerce-tabs {
	clear: both;
	padding-top: var( --wp--preset--spacing--30 );
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	margin: 0 0 var( --wp--preset--spacing--40 );
	padding: 0;
	border-bottom: 1px solid var( --itd-border );
	overflow: visible;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	margin-bottom: -1px;
	padding: var( --wp--preset--spacing--20 ) 0;
	color: var( --wp--preset--color--muted );
	font-weight: 600;
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var( --wp--preset--color--primary );
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --wp--preset--color--primary );
	border-bottom-color: var( --wp--preset--color--secondary );
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var( --wp--style--global--content-size, 720px );
	margin: 0 0 var( --wp--preset--spacing--50 );
}

.woocommerce div.product .woocommerce-tabs .panel > * {
	max-width: none;
	margin-inline: 0;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	font-size: var( --wp--preset--font-size--large );
}

.woocommerce #reviews #comments h2,
.woocommerce #review_form #respond .comment-reply-title {
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--large );
}

.woocommerce .related,
.woocommerce .upsells,
.woocommerce-page .related,
.woocommerce-page .upsells {
	clear: both;
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --itd-border );
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--large );
}

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	margin-bottom: 0;
}

/* ---- Notices (theme: .wpcf7-response-output) ---------------------------------------------- */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	margin: 0 0 var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--contrast );
	background-color: var( --wp--preset--color--tertiary );
	border: 1px solid var( --itd-border );
	border-radius: 12px;
}

/* WooCommerce moves the focus to a notice it prints; the ring is the theme's, not the browser's. */
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-message:focus {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 2px;
}

.woocommerce-message::before {
	color: var( --wp--preset--color--primary );
}

.woocommerce-info::before {
	color: var( --wp--preset--color--secondary );
}

/* An error stands apart from the info and success notices by its border, in the palette's accent. */
.woocommerce-error {
	border-color: var( --wp--preset--color--accent );
}

.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
	margin-inline-start: var( --wp--preset--spacing--30 );
}

/* ---- Tables (my account, order details) --------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var( --itd-border );
	border-radius: 12px;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	border-top-color: var( --itd-border );
}

.woocommerce table.shop_table th {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
}

/* ---- My account (logged in) --------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 var( --wp--preset--spacing--40 );
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --itd-border );
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var( --itd-border );
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var( --wp--preset--spacing--20 ) 0;
	color: var( --wp--preset--color--primary );
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var( --wp--preset--color--secondary );
}

/* ---- Cart and checkout blocks (.wc-block-*) ----------------------------------------------- */

.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-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-form .wc-block-components-text-input input[type="password"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-textarea {
	color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --itd-border );
	border-radius: 12px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var( --wp--preset--color--secondary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --wp--preset--color--secondary ) 15%, transparent );
	outline: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
	color: var( --wp--preset--color--muted );
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: var( --itd-border );
	border-radius: 6px;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var( --wp--preset--color--base );
}

/* A field in error keeps a border that says so. The `line` border above weighs as much as
   WooCommerce's own `.has-error` red, or more, and comes later, so without this rule a field in
   error would end up lighter than a valid one (1.29:1 on `base`). The colour is the theme's form
   error colour (main.css, `.wpcf7-not-valid`), one of the few literals the palette rules allow:
   5.4:1 on white. It also holds while the field has the focus. */
.wc-block-components-text-input.has-error input[type="email"],
.wc-block-components-text-input.has-error input[type="number"],
.wc-block-components-text-input.has-error input[type="password"],
.wc-block-components-text-input.has-error input[type="tel"],
.wc-block-components-text-input.has-error input[type="text"],
.wc-block-components-text-input.has-error input[type="url"],
.wc-block-components-form .wc-block-components-text-input.has-error input[type="email"],
.wc-block-components-form .wc-block-components-text-input.has-error input[type="number"],
.wc-block-components-form .wc-block-components-text-input.has-error input[type="password"],
.wc-block-components-form .wc-block-components-text-input.has-error input[type="tel"],
.wc-block-components-form .wc-block-components-text-input.has-error input[type="text"],
.wc-block-components-form .wc-block-components-text-input.has-error input[type="url"],
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"],
.has-error .wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: #c0392b;
}

.wc-block-components-title.wc-block-components-title,
.wc-block-components-checkout-step__title {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
}

.wc-block-components-quantity-selector {
	border-radius: 12px;
}

.wc-block-components-quantity-selector::after {
	border-color: var( --itd-border );
	border-radius: 12px;
}

.wc-block-cart .wc-block-cart__totals-title,
.wc-block-cart table.wc-block-cart-items th {
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
	letter-spacing: 0.12em;
}

.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	color: var( --wp--preset--color--primary );
	font-weight: 600;
	text-decoration: none;
}

.wc-block-cart-items .wc-block-cart-item__image img,
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	border-radius: 12px;
}

/* A cart line on a phone. WooCommerce lays it out on one row: an 80px photo, a fixed 132px column
   for the name (its quantity and remove button on one line under it, about 160px together), and the
   line's total, price over "Save" badge, beside them. Below about 375px that row is wider than the
   cart, by 38-44px at 320px and by 4px at 360px with a long badge, and the whole page scrolls
   sideways. The rules below change nothing at 375px and wider.
   - Under 360px the total goes under the name (the row is the photo and one column).
   - From 360 to 374px the layout stays, but the name column may be narrower than 132px and the
     remove button goes under the quantity when the line has no room for both.
   `tr` and `td` keep these rules one element above WooCommerce's, whatever order the stylesheets
   load in, and below a demo's own `:root` rules. */
@media ( max-width: 359px ) {
	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row {
		grid-template-columns: 80px minmax( 0, 1fr );
	}

	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product {
		grid-column: 2 / 3;
	}

	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total {
		grid-column: 2 / 3;
		grid-row-start: 2;
		justify-self: start;
		padding-top: 0.75rem;
	}

	.wc-block-cart-items td.wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 0.6rem;
	}
}

@media ( min-width: 360px ) and ( max-width: 374px ) {
	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row {
		grid-template-columns: 80px minmax( 0, 132px );
	}

	.is-mobile table.wc-block-cart-items td.wc-block-cart-item__product .wc-block-cart-item__quantity,
	.is-small table.wc-block-cart-items td.wc-block-cart-item__product .wc-block-cart-item__quantity {
		flex-wrap: wrap;
	}
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--base );
}

.wc-block-components-sale-badge {
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--secondary );
	border: 0;
	border-radius: 9999px;
}

.wc-block-components-product-price__value.is-discounted,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var( --wp--preset--color--primary );
}

.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
	color: var( --wp--preset--color--muted );
}

.wp-block-woocommerce-checkout-order-summary-block {
	border-color: var( --itd-border );
	border-radius: 20px;
	overflow: hidden;
}

.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart .wc-block-cart__totals-title {
	border-color: var( --itd-border );
}

.wc-block-components-notice-banner {
	border-radius: 12px;
}

.wc-block-components-notice-banner.is-info {
	background-color: var( --itd-accent-tint );
	border-color: var( --wp--preset--color--secondary );
}

.wc-block-components-notice-banner.is-info > svg {
	background-color: var( --wp--preset--color--secondary );
}

.wc-block-components-notice-banner.is-success {
	background-color: var( --wp--preset--color--tertiary );
	border-color: var( --wp--preset--color--primary );
}

.wc-block-components-notice-banner.is-success > svg {
	background-color: var( --wp--preset--color--primary );
}

.wc-block-components-button:not( .is-link ).wp-element-button {
	border-radius: 9999px;
}

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	font-size: 1rem;
	font-weight: 600;
}

.wc-block-components-address-card,
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-color: var( --itd-border );
}

.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
	color: var( --wp--preset--color--primary );
}

/* ---- "Added to your cart" (assets/cart-toast.js) ------------------------------------------ */

/* The live region: in the page from the script's start, empty and click-through until a notice
   enters it. Top right, under the admin bar when there is one; z-index 1000 is over the theme's
   sticky header (100) and its sub-menus (110), under the admin bar (99999) and the product
   gallery's lightbox (1500). The script checks for position: fixed before it shows anything. */
.itd-cart-toast {
	position: fixed;
	top: calc( var( --wp-admin--admin-bar--height, 0px ) + var( --wp--preset--spacing--30 ) );
	right: var( --wp--preset--spacing--30 );
	z-index: 1000;
	width: min( 25rem, calc( 100vw - 2 * var( --wp--preset--spacing--30 ) ) );
	pointer-events: none;
}

/* WooCommerce's own "added" notice on a page that comes back from a product's form: hidden from
   the first paint while the toast takes over (the class comes from a one-line script in <head>,
   printed only then, and goes away as soon as cart-toast.js has run, or on `load` if it never
   did). No class, no rule: without JavaScript the notice stays. */
.itd-cart-toast-js .woocommerce-message:has( .itd-cart-added ) {
	display: none;
}

/* The notice: a card in the theme's notice language (line border, 12px radius) with the header's
   sub-menu shadow, a check in `primary`, the message in `contrast`. */
.itd-cart-toast__panel {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"icon message close"
		". actions actions";
	align-items: start;
	gap: var( --wp--preset--spacing--30 ) 0.75rem;
	box-sizing: border-box;
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--contrast );
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --itd-border );
	border-radius: 12px;
	box-shadow: 0 12px 32px -8px color-mix( in srgb, var( --wp--preset--color--primary ) 22%, transparent );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	pointer-events: auto;
	opacity: 0;
	transform: translateY( -0.75rem );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.itd-cart-toast__panel.is-visible {
	opacity: 1;
	transform: none;
}

/* On its way out: no longer clickable nor focusable while it fades. */
.itd-cart-toast__panel.is-leaving {
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.itd-cart-toast__icon {
	grid-area: icon;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.2rem;
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--primary );
	border-radius: 9999px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.itd-cart-toast__message {
	grid-area: message;
	margin: 0;
	padding-top: 0.0625rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.itd-cart-toast__actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
	padding-inline-end: var( --wp--preset--spacing--20 );
}

/* The theme's buttons (theme.json elements.button: pill, 600, primary-dark on hover), small:
   "View cart" outlined in `primary`, "Checkout" filled. */
.itd-cart-toast__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.5rem;
	padding: 0.5rem 1.15rem;
	color: var( --wp--preset--color--primary );
	background-color: transparent;
	border: 1.5px solid var( --wp--preset--color--primary );
	border-radius: 9999px;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.itd-cart-toast__button:hover {
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.itd-cart-toast__button--primary {
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--primary );
}

.itd-cart-toast__button--primary:hover {
	color: var( --wp--preset--color--base );
	background-color: var( --itd-primary-dark );
	border-color: var( --itd-primary-dark );
}

.itd-cart-toast__close {
	grid-area: close;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: -0.375rem 0 0;
	padding: 0;
	color: var( --wp--preset--color--muted );
	background-color: transparent;
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.itd-cart-toast__close:hover {
	color: var( --wp--preset--color--contrast );
	background-color: var( --itd-cream );
}

.itd-cart-toast__x {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.itd-cart-toast__button:focus-visible,
.itd-cart-toast__close:focus-visible {
	outline: 2px solid var( --wp--preset--color--secondary );
	outline-offset: 2px;
}

/* A phone: as wide as the screen less the theme's gutter on each side. */
@media ( max-width: 600px ) {
	.itd-cart-toast {
		left: var( --wp--preset--spacing--30 );
		width: auto;
	}
}

/* No slide: the notice appears and goes in place. */
@media ( prefers-reduced-motion: reduce ) {
	.itd-cart-toast__panel,
	.itd-cart-toast__panel.is-leaving,
	.itd-cart-toast__button,
	.itd-cart-toast__close {
		transition: none;
	}

	.itd-cart-toast__panel {
		transform: none;
	}
}

/* ---- Phones ------------------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		margin-bottom: var( --wp--preset--spacing--20 );
	}

	.woocommerce .woocommerce-ordering {
		margin-bottom: var( --wp--preset--spacing--40 );
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		margin-bottom: var( --wp--preset--spacing--40 );
	}
}