/*
 * WooCommerce.
 *
 * Loaded only when WooCommerce is active. The classes below come from the
 * shop templates that ship with Takt (archive-product, taxonomy-product_cat,
 * single-product): takt-shop, takt-products, takt-product.
 */

/* Avoid a blank product-media column while WooCommerce initializes its gallery. */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* WooCommerce fixes variation selects at 42px while its own inherited line
 * height and padding can exceed that box. Keep the chosen value fully visible
 * without changing the native variation form or its keyboard behaviour. */
.single-product table.variations select {
	height: auto;
	line-height: 1.3;
	min-height: 3rem;
	padding-block: .7rem;
}

/* Catalog toolbar and cards: quiet, aligned with the type system. */
.takt-shop__toolbar {
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-bottom: var(--wp--preset--spacing--40);
}
.takt-shop .woocommerce-result-count,
.takt-shop .wc-block-product-results-count p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--secondary);
}
.takt-shop__title,
.takt-shop-page__title {
	max-width: 14ch;
	font-size: clamp(2.5rem, 5vw, 4.75rem);
	letter-spacing: -0.045em;
	line-height: 0.95;
}
.takt-shop .wc-block-catalog-sorting select,
.takt-shop .woocommerce-ordering select {
	font-size: 0.95rem;
	min-height: 2.75rem;
	padding: 0.6rem 2rem 0.6rem 0.75rem;
	border-radius: var(--wp--custom--radius--small);
}
.takt-products .wc-block-components-product-image {
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--tint);
}
.takt-products .wc-block-components-product-image img {
	border-radius: inherit;
	transition: transform 300ms ease;
}
.takt-products li:hover .wc-block-components-product-image img { transform: scale(1.03); }
.takt-products .wc-block-components-product-image { overflow: hidden; }
.takt-products .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.takt-products .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.wc-block-components-product-price ins { text-decoration: none; }
/* Outline and width are native block settings in the catalog templates.
   Do not force them on filled buttons or override a customer's editor colors. */
.wc-block-components-product-button .wp-block-button__link {
	min-height: 2.75rem;
}
.wc-block-components-product-button.is-style-outline .wp-block-button__link:not(.has-background):hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}
.wc-block-components-product-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover {
	color: inherit;
}
.takt-products .wc-block-components-product-button .added_to_cart {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
}

/* Product cards: equal height, button pinned to the bottom, category as kicker. */
.takt-products .wc-block-product,
.takt-products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.takt-products .wc-block-components-product-button { margin-top: auto; }
.takt-products__kicker,
.takt-products__kicker a,
.takt-product__kicker a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.takt-products .wp-block-post-title { margin-top: 0; }

/* ---------- Single product ---------- */
.takt-product .wp-block-woocommerce-product-image-gallery img { border-radius: 6px; }
.takt-product .wp-block-add-to-cart-form .quantity .input-text {
	width: 5rem;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
}
.takt-product .wp-block-add-to-cart-form .single_add_to_cart_button {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.75rem 1.5rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	cursor: pointer;
}
.takt-product .wp-block-add-to-cart-form .single_add_to_cart_button:hover { background: var(--wp--preset--color--contrast); }
.takt-product .wp-block-add-to-cart-form form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.takt-product__meta { margin-top: var(--wp--preset--spacing--40); font-size: 0.85rem; color: var(--wp--preset--color--secondary); }

/* Product details share the product's wide axis. Each description keeps a
   readable measure; native reviews have room for feedback beside the form. */
html body .takt-product .wp-block-woocommerce-product-details {
	container: takt-product-details / inline-size;
	width: 100%;
	max-width: none;
}
/* Legacy Product Details still powers existing self-closing blocks. Keep its
   real tabs and match WooCommerce's minimal-style specificity. */
html body .takt-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.5rem, 4vw, 3rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	padding: 0;
	list-style: none;
}
html body .takt-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li {
	border-width: 0 0 3px;
	margin: 0 0 -1px;
	opacity: 1;
	color: var(--wp--preset--color--secondary);
}
html body .takt-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 3.25rem;
	padding: 0.65rem 0.125rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
html body .takt-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:is(.active, :hover, :focus-within) {
	color: var(--wp--preset--color--primary);
	border-color: currentColor;
}
.takt-product .wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
	margin-block: 0;
	padding: 0;
	line-height: 1.7;
}
.takt-product .wp-block-woocommerce-product-details .woocommerce-Tabs-panel--description {
	max-width: 72ch;
	font-size: 1.05rem;
}
.takt-product .wp-block-woocommerce-product-details .woocommerce-Tabs-panel--description > :first-child { margin-block-start: 0; }
.takt-product .wp-block-woocommerce-product-details .woocommerce-Tabs-panel--description > :last-child { margin-block-end: 0; }
.takt-product .wp-block-woocommerce-product-details .woocommerce-Tabs-panel--description :is(h2, h3, h4) {
	max-width: 32ch;
	margin-block: 1.5em 0.6em;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.3;
}
.takt-product .takt-product-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-block: 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.takt-product .takt-product-facts dt {
	margin-bottom: 0.45rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary);
}
.takt-product .takt-product-facts dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
}
.takt-product .takt-product-demo-note { color: var(--wp--preset--color--secondary); font-size: 0.9rem; }

/* Review text, native rating radios and the comment form keep their semantics
   and validation. Layout alone distinguishes reading from writing a review. */
.takt-product .wp-block-woocommerce-product-details #reviews {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	max-width: 72ch;
}
.takt-product .wp-block-woocommerce-product-details #reviews > .clear:empty { display: none; }
.takt-product .wp-block-woocommerce-product-details #reviews :is(#comments, #review_form_wrapper) { min-width: 0; }
.takt-product .wp-block-woocommerce-product-details #reviews .woocommerce-noreviews {
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--secondary);
}
.takt-product .wp-block-woocommerce-product-details #reviews #review_form_wrapper {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block-start: var(--wp--preset--spacing--50);
}
.takt-product .wp-block-woocommerce-product-details #reviews #reply-title {
	display: block;
	max-width: 34ch;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.35;
}
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-block-start: var(--wp--preset--spacing--40);
}
.takt-product .wp-block-woocommerce-product-details #reviews #respond p,
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form-rating { margin: 0; }
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form > * { grid-column: 1 / -1; }
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form :is(.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-rating) > label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
}
.takt-product .wp-block-woocommerce-product-details #reviews :is(input[type="text"], input[type="email"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1.5;
}
.takt-product .wp-block-woocommerce-product-details #reviews #comment { height: 11rem; min-height: 11rem; resize: vertical; }
.takt-product .wp-block-woocommerce-product-details #reviews .comment-notes { font-size: 0.875rem; color: var(--wp--preset--color--secondary); }
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form-cookies-consent {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: 0.65rem;
	align-items: start;
	font-size: 0.875rem;
	line-height: 1.6;
}
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form-cookies-consent input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--preset--color--primary);
}
.takt-product .wp-block-woocommerce-product-details #reviews .comment-form-cookies-consent label { cursor: pointer; }
.takt-product .wp-block-woocommerce-product-details #reviews #submit {
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.takt-product .wp-block-woocommerce-product-details #reviews #submit:hover { background: var(--wp--preset--color--contrast); }
.takt-product .wp-block-woocommerce-product-details #reviews p.stars > span { display: inline-flex; gap: 0.125rem; }
.takt-product .wp-block-woocommerce-product-details #reviews p.stars a {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--primary);
}
.takt-product .wp-block-woocommerce-product-details #reviews p.stars a::before { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.takt-product .wp-block-woocommerce-product-details #reviews p.stars a:hover { background: var(--wp--preset--color--tint); }
.takt-product .wp-block-woocommerce-product-details :is(input, select, textarea, .stars a, [role="tab"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.takt-product .wp-block-woocommerce-product-details #reviews #comments ol.commentlist { padding: 0; }
.takt-product .wp-block-woocommerce-product-details #reviews #comments ol.commentlist > li {
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.takt-product .wp-block-woocommerce-product-details #reviews .comment_container { display: flex; gap: 1rem; align-items: start; }
.takt-product .wp-block-woocommerce-product-details #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: none;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
}
.takt-product .wp-block-woocommerce-product-details #reviews #comments ol.commentlist li .comment-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.takt-product .wp-block-woocommerce-product-details #reviews #comments ol.commentlist li .comment-text p.meta { font-size: 0.875rem; color: var(--wp--preset--color--secondary); }
.takt-product .wp-block-woocommerce-product-details #reviews .star-rating { color: var(--wp--preset--color--primary); }
@container takt-product-details (min-width: 50rem) {
	.takt-product .wp-block-woocommerce-product-details #reviews:has(.commentlist > li):has(> #review_form_wrapper) {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		max-width: none;
	}
	.takt-product .wp-block-woocommerce-product-details #reviews:has(.commentlist > li) #review_form_wrapper {
		border-block-start: 0;
		border-inline-start: 1px solid var(--wp--preset--color--line);
		padding-block-start: 0;
		padding-inline-start: clamp(1.5rem, 4vw, 3rem);
	}
	.takt-product .wp-block-woocommerce-product-details #reviews .comment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.takt-product .wp-block-woocommerce-product-details #reviews .comment-form :is(.comment-form-author, .comment-form-email) { grid-column: auto; }
}
.takt-product .woocommerce-notices-wrapper { max-width: 80rem; margin: 0 auto; }

/* Cart and checkout: remove buttons and quantity steppers reach 44px. */
.wc-block-cart-item__remove-link,
.woocommerce-cart-form .product-remove a.remove {
	min-width: 2.75rem;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--secondary);
}
.wc-block-cart-item__remove-link:hover,
.woocommerce-cart-form .product-remove a.remove:hover { color: var(--wp--preset--color--primary); }

/* Related products reuse the catalog card styles. */
.takt-product .wc-block-grid__products,
.takt-product .related.products ul.products { list-style: none; padding: 0; }
.takt-product .related.products h2,
.takt-product .wp-block-woocommerce-related-products h2 { font-size: var(--wp--preset--font-size--x-large); }
.takt-product .related.products .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	color: var(--wp--preset--color--contrast);
}
.takt-product .related.products .price {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}
.takt-product .related.products .button {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.takt-product .related.products .button:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.takt-product .related.products img { border-radius: 6px; }

/* ============================================================
 * Cart, checkout and account
 *
 * WooCommerce brings its own markup; these rules put it on the
 * theme's grid, type scale and colors instead of letting the
 * plugin's default look through.
 * ============================================================ */

/* Block cart and checkout inherit the theme; WooCommerce owns their layout
   and responsive behavior. Component hooks below are documented by WooCommerce
   (cart-and-checkout theming), rather than tied to a nested DOM structure. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	--wc-separator-color: var(--wp--preset--color--line);
	--wc-form-color-text: var(--wp--preset--color--contrast);
}

/* Keep sticky summaries 20px below the header; its measured height excludes
   the admin toolbar. A non-sticky header contributes no permanent offset. */
.wp-site-blocks {
	--takt-checkout-sticky-top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks:has(> .wp-block-template-part .takt-header--sticky) {
	--takt-checkout-sticky-top: calc(20px + var(--takt-header-h) + var(--wp-admin--admin-bar--height, 0px));
}
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar.is-sticky {
	top: var(--takt-checkout-sticky-top, 20px);
}
/* The compact introduction already supplies the checkout's top spacing. */
.takt-checkout-intro ~ .wp-block-post-content .wp-block-woocommerce-checkout {
	padding-block-start: 0;
}

/* Native country/region selects have a separate white container in WooCommerce.
   Keep its label, selected value and arrow on the same palette as text fields. */
body .wc-blocks-components-select .wc-blocks-components-select__container {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
body .wc-blocks-components-select .wc-blocks-components-select__select {
	color: var(--wp--preset--color--contrast);
}
body .wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--wp--preset--color--secondary);
}
body .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--wp--preset--color--contrast);
}

.wc-block-cart__submit-container {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.wc-block-cart__submit-container::before { color: var(--wp--preset--color--line); }

.wc-block-components-order-summary-item__quantity {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

.wc-block-components-button:not(.is-link) {
	font: inherit;
	font-weight: 600;
	min-height: 44px;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}
.wc-block-components-button:not(.is-link):not(:disabled):hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}
.wc-block-components-button:not(.is-link):disabled { opacity: 0.55; cursor: not-allowed; }

/* WooCommerce's block theme stylesheet caps cart, checkout and account at
   1000px. Takt sets the width in the template, so the cap has to go; the
   class is doubled to outweigh `.woocommerce-cart main .woocommerce`. */
.takt-shop-page.takt-shop-page .woocommerce { max-width: none; }

.takt-shop-page .woocommerce { display: grid; gap: var(--wp--preset--spacing--50); align-items: start; }
.takt-shop-page .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* An empty notice area still costs a grid gap and the height of the block
   wrapper, which left a hole above the cart on every quiet page load. */
.takt-shop-page .woocommerce-notices-wrapper:empty { display: none; }
.takt-shop-page .wc-block-store-notices:has(.woocommerce-notices-wrapper:empty) { display: none; }

/* ---------- Cart ---------- */

@media (min-width: 900px) {
	.takt-shop-page--cart .woocommerce {
		grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
		column-gap: var(--wp--preset--spacing--60);
	}
	.takt-shop-page--cart .woocommerce-cart-form { grid-column: 1; grid-row: 2; }
	.takt-shop-page--cart .cart-collaterals { grid-column: 2; grid-row: 2; }
}
/* WooCommerce styles its tables itself, so these need the same weight. */
.takt-shop-page .woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 0;
}
.takt-shop-page .woocommerce table.shop_table td,
.takt-shop-page .woocommerce table.shop_table th { border-left: 0; border-right: 0; }
.takt-shop-page .shop_table th {
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--secondary);
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.takt-shop-page .shop_table td {
	padding: 1rem 0.75rem 1rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	vertical-align: middle;
	background: none;
}
.takt-shop-page .shop_table tr:first-child td { border-top: 0; }
.takt-shop-page .woocommerce table.cart img,
.takt-shop-page .woocommerce table.cart td.product-thumbnail img {
	width: 4.5rem;
	height: 4.5rem;
	max-width: none;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--medium);
	display: block;
	background: var(--wp--preset--color--tint);
	box-shadow: none;
}
.takt-shop-page .cart .product-name a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.takt-shop-page .cart .product-name a:hover { color: var(--wp--preset--color--primary); }
.takt-shop-page .cart .product-price,
.takt-shop-page .cart .product-subtotal { font-variant-numeric: tabular-nums; }
.takt-shop-page .cart .quantity .qty { width: 4.5rem; text-align: center; }

.takt-shop-page .woocommerce table.cart td.product-thumbnail { width: 6rem; }
.takt-shop-page .woocommerce table.cart td.product-remove { width: 3rem; text-align: center; }
.takt-shop-page .woocommerce table.cart td.product-name { width: 40%; }

/* Coupon row: field and button on one line, update button quiet and to the right.
   The cell stays a table cell, otherwise it loses the width of its colspan. */
.takt-shop-page .woocommerce table.cart td.actions { padding-top: var(--wp--preset--spacing--40); }
.takt-shop-page .woocommerce table.cart td.actions::after { content: ""; display: block; clear: both; }
.takt-shop-page .woocommerce table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	float: left;
	padding: 0;
	width: auto;
}
.takt-shop-page .woocommerce table.cart td.actions .coupon .input-text { width: min(16rem, 100%); }
/* Float clearfix boxes otherwise become empty items in the coupon flex row. */
.takt-shop-page .woocommerce table.cart td.actions .coupon::before,
.takt-shop-page .woocommerce table.cart td.actions .coupon::after { display: none; }
.takt-shop-page .woocommerce table.cart td.actions .button {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--wp--custom--radius--small);
	padding: 0.7rem 1.2rem;
	cursor: pointer;
}
.takt-shop-page .woocommerce table.cart td.actions button[name="update_cart"] {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 2px solid currentColor;
	float: right;
}
/* A disabled button still has to be readable; it loses its border, not its text. */
.takt-shop-page .woocommerce table.cart td.actions button[name="update_cart"]:disabled {
	opacity: 1;
	color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--line);
	cursor: default;
}

/* On a phone the two float halves would each be too narrow to read, so the
   coupon and the update button stack at full width. */
@media (max-width: 599px) {
	.takt-shop-page .woocommerce table.cart td.actions .coupon { float: none; width: 100%; }
	/* WooCommerce's block-theme sheet sizes this field through its ID. */
	.takt-shop-page .woocommerce table.cart td.actions .coupon #coupon_code { width: 100%; margin: 0; }
	.takt-shop-page .woocommerce table.cart td.actions .coupon .button,
	.takt-shop-page .woocommerce table.cart td.actions .button { width: 100%; }
	.takt-shop-page .woocommerce table.cart td.actions button[name="update_cart"] { float: none; margin-top: 0.5rem; }
}

/* WooCommerce puts a truck from its own icon font next to the shipping
   calculator; Takt does not use that font anywhere else. */
.takt-shop-page .shipping-calculator-button::after { display: none; }

/* WooCommerce's small-screen sheet right-aligns every cell with !important,
   which turns the shipping sentence into a ragged block. */
@media (max-width: 768px) {
	.takt-shop-page .cart_totals .woocommerce-shipping-totals td,
	.takt-shop-page .cart_totals .shipping td { text-align: left !important; }
	/* Keep the mobile shipping label separate from the method description. */
	.takt-shop-page .cart_totals .woocommerce-shipping-totals td::before,
	.takt-shop-page .cart_totals .shipping td::before { float: none; display: block; margin-bottom: 0.35rem; }
	/* The label and the amount sit on one line there and would touch. */
	.takt-shop-page .cart_totals .shop_table th { padding-right: 0.5rem !important; }
}

/* The summary is a card and follows the page while the list scrolls. */
.takt-shop-page .cart-collaterals,
.takt-shop-page #order_review {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
	width: auto;
	float: none;
}
/* Beat WooCommerce's later-loaded 48% floated totals inside our summary card. */
.takt-shop-page .woocommerce .cart-collaterals .cart_totals { width: auto; float: none; }
.takt-shop-page .cart-collaterals h2,
.takt-shop-page #order_review_heading {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.takt-shop-page .cart_totals .shop_table th { border-bottom: 0; padding: 0.6rem 0.75rem 0.6rem 0; text-transform: none; font-size: 0.95rem; color: var(--wp--preset--color--contrast); }
.takt-shop-page .cart_totals .shop_table td { padding: 0.6rem 0; text-align: right; }
/* Only amounts are right aligned; sentences stay left. */
.takt-shop-page .cart_totals .woocommerce-shipping-totals td,
.takt-shop-page .cart_totals .shipping td,
.takt-shop-page #order_review .woocommerce-shipping-totals td,
.takt-shop-page #order_review .shipping td { text-align: left; }
.takt-shop-page .woocommerce-shipping-destination,
.takt-shop-page .shipping-calculator-button { display: block; margin-top: 0.35rem; font-size: 0.9rem; }
.takt-shop-page .cart_totals .order-total th,
.takt-shop-page .cart_totals .order-total td { font-size: 1.1rem; font-weight: 700; }
.takt-shop-page .wc-proceed-to-checkout { padding: var(--wp--preset--spacing--30) 0 0; }
.takt-shop-page .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.9rem 1.25rem;
	border-radius: var(--wp--custom--radius--small);
}
@media (min-width: 900px) {
	.takt-shop-page .cart-collaterals { position: sticky; top: calc(var(--takt-header-h) + 1.5rem); }
}

/* ---------- Checkout ---------- */

.takt-shop-page--checkout form.checkout { display: grid; gap: var(--wp--preset--spacing--50); align-items: start; }
@media (min-width: 1000px) {
	.takt-shop-page--checkout form.checkout {
		grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 1fr);
		/* The first row is only as tall as the heading; the tall form column must
		   not stretch it, otherwise the summary card drifts down the page. */
		grid-template-rows: min-content 1fr;
		column-gap: var(--wp--preset--spacing--60);
	}
	.takt-shop-page--checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.takt-shop-page--checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
	.takt-shop-page--checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: var(--takt-checkout-sticky-top, 20px);
	}
}
/* WooCommerce clears its float layout with ::before and ::after on .woocommerce
   and on .col2-set. In a grid those two turn into grid items and take the first
   cells, which pushes the real columns one place along. */
.takt-shop-page .entry-content > .woocommerce::before,
.takt-shop-page .entry-content > .woocommerce::after,
.takt-shop-page .woocommerce .col2-set::before,
.takt-shop-page .woocommerce .col2-set::after { content: none; }

/* The left column is narrow, so billing and the delivery note stack. */
.takt-shop-page--checkout .col2-set { display: grid; gap: var(--wp--preset--spacing--50); }
/* WooCommerce's classic checkout stylesheet loads after the theme and gives
   both columns width: 48%. Keep each section at the full width of Takt's grid. */
.takt-shop-page--checkout .woocommerce .col2-set .col-1,
.takt-shop-page--checkout .woocommerce .col2-set .col-2 { width: 100%; float: none; }
.takt-shop-page--checkout h3 { font-size: var(--wp--preset--font-size--large); }
.takt-shop-page--checkout .woocommerce-billing-fields__field-wrapper,
.takt-shop-page--checkout .woocommerce-shipping-fields__field-wrapper,
.takt-shop-page--checkout .woocommerce-additional-fields__field-wrapper { display: grid; gap: var(--wp--preset--spacing--30); }
.takt-shop-page .woocommerce form .form-row { margin: 0; padding: 0; }
.takt-shop-page .woocommerce form .form-row label { display: block; font-weight: 600; font-size: 0.95em; margin-bottom: 0.35rem; }
.takt-shop-page--checkout .form-row .required { color: var(--wp--preset--color--primary); text-decoration: none; }
.takt-shop-page .woocommerce form .form-row-first,
.takt-shop-page .woocommerce form .form-row-last,
.takt-shop-page .woocommerce form .form-row-wide { width: auto; float: none; }
.takt-shop-page .woocommerce form .form-row input.input-text,
.takt-shop-page .woocommerce form .form-row textarea,
.takt-shop-page .woocommerce form .form-row select,
.takt-shop-page .woocommerce-input-wrapper .select2-container { width: 100%; box-sizing: border-box; }
.takt-shop-page--checkout .woocommerce form .form-row textarea {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}
@media (min-width: 600px) {
	.takt-shop-page--checkout .woocommerce-billing-fields__field-wrapper,
	.takt-shop-page--checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
	.takt-shop-page--checkout .form-row-wide,
	.takt-shop-page--checkout .notes { grid-column: 1 / -1; }
}
.takt-shop-page--checkout .select2-container .select2-selection--single,
.takt-shop-page--checkout .woocommerce-input-wrapper .select2-selection {
	height: auto;
	padding: 0.35rem 0.4rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
}
.takt-shop-page--checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--contrast);
}
.takt-shop-page--checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--wp--preset--color--secondary);
}
.takt-shop-page--checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--wp--preset--color--contrast) transparent transparent;
}
.takt-shop-page--checkout #order_review table.shop_table td,
.takt-shop-page--checkout #order_review table.shop_table th { border-top: 0; }
.takt-shop-page--checkout #order_review table.shop_table tfoot th,
.takt-shop-page--checkout #order_review table.shop_table tfoot td { border-top: 1px solid var(--wp--preset--color--line); }
.takt-shop-page--checkout #order_review table.shop_table th { text-transform: none; font-size: 0.95rem; color: var(--wp--preset--color--contrast); border-bottom: 0; padding: 0.6rem 0.75rem 0.6rem 0; }
.takt-shop-page--checkout #order_review table.shop_table td { padding: 0.6rem 0; text-align: right; }
.takt-shop-page--checkout #order_review .order-total th,
.takt-shop-page--checkout #order_review .order-total td { font-size: 1.1rem; font-weight: 700; }
.takt-shop-page--checkout .woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: var(--wp--preset--spacing--30);
}
.takt-shop-page--checkout .woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.takt-shop-page--checkout .woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 0.5rem; }
.takt-shop-page--checkout .woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	margin: 0.5rem 0 0;
	padding: 0.85rem 1rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--secondary);
}
.takt-shop-page--checkout .woocommerce-checkout #payment div.payment_box::before { display: none; }
.takt-shop-page--checkout #place_order {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.9rem 1.25rem;
	border-radius: var(--wp--custom--radius--small);
	cursor: pointer;
}
.takt-shop-page--checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--wp--preset--spacing--30); font-size: 0.95rem; }

/* "Ein Konto erstellen?" and "Lieferung an eine andere Adresse?" arrive as a
   bare checkbox next to a label, the second one wrapped in an h3. Both become
   one readable row with a target big enough for a thumb. */
.takt-shop-page--checkout h3#ship-to-different-address { font-size: 1rem; margin: 0; }
.takt-shop-page--checkout h3#ship-to-different-address .woocommerce-form__label,
.takt-shop-page--checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
}
.takt-shop-page--checkout .woocommerce-form__input-checkbox {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	flex: none;
	accent-color: var(--wp--preset--color--primary);
}

/* Include status specificity: WooCommerce can load its pale status backgrounds
   after the theme stylesheet, which otherwise leaves light text on light. */
body .wc-block-components-notice-banner,
body .wc-block-components-notice-banner:is(.is-success, .is-info, .is-error, .is-warning),
.takt-shop-page .woocommerce-message,
.takt-shop-page .woocommerce-error,
.takt-shop-page .woocommerce-info {
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}
body .wc-block-components-notice-banner.is-error,
.takt-shop-page .woocommerce-error { border-color: var(--wp--preset--color--primary); }
.takt-shop-page .wc-block-components-notice-banner > svg { fill: currentColor; }

/* WooCommerce pins both actions to a dark color with !important. Their text
   must instead follow the banner's contrasting foreground in either scheme. */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
body .wc-block-components-notice-banner > .wc-block-components-button {
	color: inherit !important;
	opacity: 1;
}

/* Login and coupon toggles at the top of the checkout read as quiet notes.
   WooCommerce gives every banner 16px of padding with !important and a
   coloured circle behind the icon (blue for info, green for success); two of
   them stacked above the form were louder than the form itself. */
.takt-shop-page .woocommerce-form-login-toggle .woocommerce-info,
.takt-shop-page .woocommerce-form-coupon-toggle .woocommerce-info,
.takt-shop-page .wc-block-components-notice-banner.is-info {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast);
}
.takt-shop-page .wc-block-components-notice-banner {
	margin: 0;
	padding: 0.8rem 1rem !important;
	font-size: 0.95rem;
	gap: 0.6rem;
	align-items: center;
}
.takt-shop-page .wc-block-components-notice-banner > svg {
	width: 20px;
	height: 20px;
	align-self: center;
	fill: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
}
.takt-shop-page .wc-block-components-notice-banner.is-error > svg { background-color: var(--wp--preset--color--primary); }

/* The two toggles belong together, so they sit close; the form below keeps
   the full section distance. */
.takt-shop-page--checkout .entry-content > .woocommerce { gap: var(--wp--preset--spacing--30); }
.takt-shop-page--checkout form.checkout { margin-top: var(--wp--preset--spacing--40); }

/* ---------- Account ---------- */

/* Two columns only once there is a navigation to put in the first one. A
   logged-out visitor gets the login and register forms instead, and those
   bring their own pair of columns. Browsers without :has() stack everything,
   which is the mobile layout and reads fine. */
@media (min-width: 900px) {
	.takt-shop-page--account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
		column-gap: var(--wp--preset--spacing--60);
	}
}

/* Login and register: two cards side by side, stacked on a phone. */
.takt-shop-page--account #customer_login { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 900px) {
	.takt-shop-page--account #customer_login {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--60);
	}
}
.takt-shop-page--account #customer_login .u-column1,
.takt-shop-page--account #customer_login .u-column2 { width: auto; float: none; }
.takt-shop-page--account #customer_login h2 { font-size: var(--wp--preset--font-size--large); margin: 0 0 var(--wp--preset--spacing--30); }
.takt-shop-page--account #customer_login form {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}
.takt-shop-page--account #customer_login form .form-row { margin: 0; }
.takt-shop-page--account .woocommerce-form-login__rememberme,
.takt-shop-page--account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	font-weight: 600;
}
.takt-shop-page--account .woocommerce-form__input-checkbox {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	flex: none;
	accent-color: var(--wp--preset--color--primary);
}
/* The columns come from the grid, not from WooCommerce's floats. */
.takt-shop-page--account .woocommerce .woocommerce-MyAccount-navigation,
.takt-shop-page--account .woocommerce .woocommerce-MyAccount-content { float: none; width: auto; }
.takt-shop-page--account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.takt-shop-page--account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--wp--preset--color--line); }
.takt-shop-page--account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.7rem 0;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.takt-shop-page--account .woocommerce-MyAccount-navigation li.is-active a,
.takt-shop-page--account .woocommerce-MyAccount-navigation a:hover { color: var(--wp--preset--color--primary); }
.takt-shop-page--account .woocommerce-MyAccount-content > p { max-width: 48rem; }

/* Orders table: one rule per row, and an action button that is a button, not a
   band across the cell. */
.takt-shop-page--account .woocommerce-orders-table td { border-bottom: 0; }
.takt-shop-page--account .woocommerce-orders-table__cell-order-actions a {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border-radius: var(--wp--custom--radius--small);
}

/* Addresses: WooCommerce floats the edit link to the right of a heading that is
   sized like a page title. Both belong in the normal reading order. */
.takt-shop-page--account .addresses .title h2,
.takt-shop-page--account .addresses .title h3 { font-size: var(--wp--preset--font-size--large); margin: 0 0 0.35rem; }
.takt-shop-page--account .addresses .title .edit { float: none; display: inline-block; margin: 0; }
.takt-shop-page--account .woocommerce-Address address { font-style: normal; margin-top: var(--wp--preset--spacing--30); }

/* ---------- Order confirmation ---------- */

/* The confirmation blocks bring their own grey boxes and full table borders.
   Same treatment as the cart: tint cards, rules instead of boxes. */
.takt-shop-page--confirmation .wc-block-order-confirmation-summary {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--30) 0;
}
.takt-shop-page--confirmation .wc-block-order-confirmation-summary-list-item__key {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}
.takt-shop-page--confirmation .wc-block-order-confirmation-create-account,
.takt-shop-page--confirmation .wc-block-order-confirmation-billing-address,
.takt-shop-page--confirmation .wc-block-order-confirmation-shipping-address {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
	font-style: normal;
}
/* The address block is the card; the address inside it stays plain. */
.takt-shop-page--confirmation .wc-block-order-confirmation-billing-address address,
.takt-shop-page--confirmation .wc-block-order-confirmation-shipping-address address {
	background: none;
	border: 0;
	padding: 0;
}
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__table th,
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__table td {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 1rem 0.75rem 1rem 0;
	background: none;
}
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__table thead th {
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0 0.75rem 0.75rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--secondary);
}
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__table td:last-child,
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__table th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-right: 0;
}
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__total td,
.takt-shop-page--confirmation .wc-block-order-confirmation-totals__total th { font-weight: 700; font-size: 1.1rem; }

/*
 * Product photos sit on a surface of their own instead of directly on the
 * page. Nine of Radys' sixteen products are shot on white, and on a dark shop
 * those read as lit rectangles rather than as a catalogue — the grid looked
 * like a string of lights. A quiet tint behind every image evens that out, and
 * it does no harm in light mode.
 */
.takt-shop-page ul.products li.product a img,
.takt-shop-page .wc-block-grid__product-image img,
.takt-shop-page .wp-block-woocommerce-product-image img {
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--medium);
}

/*
 * Sign in and register stand side by side and are the same kind of thing, so
 * they end on the same line. They fell under neither of the card rules in
 * style.css and ended 47px apart.
 */
@media (min-width: 900px) {
	.takt-shop-page--account .u-columns.col2-set {
		align-items: stretch;
	}
	.takt-shop-page--account .u-columns.col2-set > .u-column1,
	.takt-shop-page--account .u-columns.col2-set > .u-column2,
	.takt-shop-page--account .u-columns.col2-set form.login,
	.takt-shop-page--account .u-columns.col2-set form.register {
		height: 100%;
	}
}

/* Respect the editor's column count while keeping responsive cards readable.
   Only the shrinking grid uses this minimum; fixed, list and carousel layouts
   retain WooCommerce's own layout rules. */
.takt-products .wc-block-product-template__responsive.wc-block-product-template {
	--takt-product-columns: 1;
	--takt-product-gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(max(min(16rem, 100%), calc((100% - (var(--takt-product-columns) - 1) * var(--takt-product-gap)) / var(--takt-product-columns))), 1fr));
	gap: var(--takt-product-gap);
}
.takt-products .wc-block-product-template__responsive.columns-2 { --takt-product-columns: 2; }
.takt-products .wc-block-product-template__responsive.columns-3 { --takt-product-columns: 3; }
.takt-products .wc-block-product-template__responsive.columns-4 { --takt-product-columns: 4; }
.takt-products .wc-block-product-template__responsive.columns-5 { --takt-product-columns: 5; }
.takt-products .wc-block-product-template__responsive.columns-6 { --takt-product-columns: 6; }

/* Native Product Filters (WooCommerce 11.1). Defaults live on the blocks, where
   the editor's inline custom properties can override them. Keep overlay color
   fallbacks intact so custom filter backgrounds also reach the mobile drawer. */
.wc-block-product-filters {
	--takt-filter-focus: var(--wp--preset--color--primary);
	--wc-product-filters-background-color: var(--wp--preset--color--base);
	--wc-product-filters-text-color: var(--wp--preset--color--contrast);
}
/* WooCommerce snapshots computed colors into inline defaults at hydration.
   Uncustomized drawers need live tokens when the visitor changes scheme.
   Explicit block colors continue through WooCommerce's normal fallback. */
.wc-block-product-filters:not(.has-background) {
	--wc-product-filters-overlay-background-color: var(--wp--preset--color--base);
}
.wc-block-product-filters:not(.has-text-color) {
	--wc-product-filters-overlay-text-color: var(--wp--preset--color--contrast);
}
.wc-block-product-filter-checkbox-list {
	--wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--base);
	--wc-product-filter-checkbox-list-option-element-border: var(--wp--preset--color--secondary);
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--primary);
}
.wc-block-product-filter-checkbox-list__label {
	min-height: 2.75rem;
	cursor: pointer;
}
.wc-block-product-filter-chips {
	--wc-product-filter-chips-selected-text: var(--wp--preset--color--base);
	--wc-product-filter-chips-selected-background: var(--wp--preset--color--primary);
	--wc-product-filter-chips-selected-border: var(--wp--preset--color--primary);
}
.wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
	min-height: 2.75rem;
	border-radius: var(--wp--custom--radius--small);
}
.wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item:not([aria-checked="true"]) {
	border-color: var(--wc-product-filter-chips-border, var(--wp--preset--color--secondary));
}
.wc-block-product-filter-price-slider {
	--wc-product-filter-price-slider: var(--wp--preset--color--primary);
	--wc-product-filter-price-slider-handle: var(--wp--preset--color--base);
	--wc-product-filter-price-slider-handle-border: var(--wp--preset--color--primary);
}
.wc-block-product-filter-price-slider .text input[type="text"] {
	min-height: 2.75rem;
	max-width: 7rem;
	border-color: var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--small);
}
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	margin-top: -10px;
}
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
}
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range input[type="range"]:is(:hover, :focus-visible)::-webkit-slider-thumb {
	background: var(--wc-product-filter-price-slider-handle);
	border-color: var(--wc-product-filter-price-slider-handle-border);
	outline: 2px solid var(--wc-product-filter-price-slider-handle-border);
	outline-offset: 2px;
}
.wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__range input[type="range"]:is(:hover, :focus-visible)::-moz-range-thumb {
	background: var(--wc-product-filter-price-slider-handle);
	border-color: var(--wc-product-filter-price-slider-handle-border);
	outline: 2px solid var(--wc-product-filter-price-slider-handle-border);
	outline-offset: 2px;
}
.wc-block-product-filters .wc-block-product-filters__open-overlay,
.wc-block-product-filters .wc-block-product-filters__close-overlay,
.wc-block-product-filter__show-more {
	min-height: 2.75rem;
	font-family: inherit;
}
.wc-block-product-filters :is(button, input):focus-visible {
	outline: 2px solid var(--takt-filter-focus);
	outline-offset: 2px;
}