/*
Theme Name: TLC Theme
Theme URI: https://github.com/eliaskieser/tlc-theme
Author: Elias Kieser
Author URI: https://eliaskieser.de/
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.35
Text Domain: tlc-theme
Domain Path: /languages
Update URI: https://github.com/eliaskieser/tlc-theme
*/

/* ==========================================================================
   Forms
   ========================================================================== */

/* WooCommerce's classic form fields (.form-row .input-text, selects,
 * select2) and extensions rendering the same markup (e.g. Gift Cards)
 * read these tokens; WooCommerce defines them 4px/gray on :root. The
 * cart/checkout block components hardcode their values instead and are
 * squared selector by selector in the sections below. On body rather
 * than :root so this wins the tie against WooCommerce's own :root
 * definition regardless of stylesheet order. */
body {
	--wc-form-border-color: var(--wp--preset--color--line);
	--wc-form-border-radius: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* The search toggle is a 40px button with a centered 24px icon. Pull it
 * left so the icon, not the button, sits on the header edge. On the button,
 * not the block: core resets the margin of flex layout children. */
.tlc-header-search .tlc-search-toggle__button {
	margin-left: -8px;
}

/* The header group sits inside the template part wrapper, which is only as
 * tall as the header itself, so the wrapper is what has to stick. Its top is
 * pulled up by the top bar's height, so the top bar scrolls away and the rows
 * below stick, offset by the admin bar when it is shown. */
.wp-block-template-part:has(> .tlc-header) {
	--tlc-top-bar-height: 40px;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--tlc-top-bar-height));
	z-index: 100;
}

/* Below 600px the admin bar is absolute and scrolls away with the page, so
 * there is nothing to offset by. */
@media screen and (max-width: 600px) {
	.wp-block-template-part:has(> .tlc-header) {
		top: calc(-1 * var(--tlc-top-bar-height));
	}
}

/* The sticky wrapper is a stacking context, which traps the navigation
 * overlay (z-index 100000) beneath the admin bar (99999). Lift the whole
 * header while the overlay is open so it covers the admin bar again. */
.has-modal-open .wp-block-template-part:has(> .tlc-header) {
	z-index: 100000;
}

/* Fixed height, single line, so the sticky offset above always matches. */
.tlc-header__top-bar {
	box-sizing: border-box;
	height: var(--tlc-top-bar-height);
	overflow: hidden;
}

.tlc-header__top-bar p {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Linguise language switcher in the top bar. The separator to the secondary
 * navigation sits on the switcher itself, so it disappears with it. The
 * switcher stretches to the full bar height so the line does too; the
 * padding matches the row gap so the line sits centred. */
.tlc-header__top-bar .linguise_switcher_root {
	align-items: center;
	align-self: stretch;
	border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	display: flex;
	padding-left: var(--wp--preset--spacing--30);
}

/* The secondary navigation is hidden on mobile, so the separator is too. */
@media (width <= 480px) {
	.tlc-header__top-bar .linguise_switcher_root {
		border-left: 0;
		padding-left: 0;
	}
}

.linguise_lang_name,
.linguise_lang_name:hover {
	color: var(--wp--preset--color--white) !important;
	margin-right: 5px;
}

.linguise_switcher a {
	font-weight: inherit;
}

/* On mobile, equal thirds leave the logo about 105px and squeeze the icons
 * into it. The side columns shrink to their icons and the logo column takes
 * the rest, so the logo sits slightly off-centre. */
@media (width <= 480px) {
	.wp-block-columns.tlc-header__main-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex: 0 0 auto;
		width: min-content;
	}

	.wp-block-columns.tlc-header__main-columns.is-not-stacked-on-mobile > .wp-block-column:nth-child(2) {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Centre both count badges on the top edge of their icon. The Mini-Cart
 * badge has no top of its own and lands wherever the line box puts it; the
 * wishlist badge's 0.5em resolves against its smaller font size, so it
 * misses the link's 0.5em padding. */
.tlc-header .wc-block-mini-cart__badge {
	top: 0;
}

.tlc-header .tlc-wishlist-counter__badge {
	top: 8px;
}

/* Tighter header icons on mobile: 32px tap areas instead of 40px and
 * smaller count badges. Badge sizes and offsets are em-based, so the font
 * size scales the whole badge. */
@media (width <= 480px) {
	.tlc-header .wc-block-customer-account__link,
	.tlc-header .tlc-wishlist-counter__link,
	.tlc-header .wc-block-mini-cart__button {
		padding: 4px;
	}

	.tlc-header .tlc-wishlist-counter__badge,
	.tlc-header .wc-block-mini-cart__badge {
		font-size: 10px;
	}

	.tlc-header .tlc-wishlist-counter__badge {
		top: 4px;
	}
}

/* ==========================================================================
   Category tile (core/cover block style)
   ========================================================================== */

/* The tile's first link is stretched over the whole tile. For its ::after
 * to reach the cover's edges, the inner container must not be positioned,
 * so the image and overlay drop below the content inside an isolated
 * stacking context instead of the content being lifted above them. */
.wp-block-cover.is-style-category-tile {
	isolation: isolate;
	overflow: hidden;
}

.wp-block-cover.is-style-category-tile .wp-block-cover__image-background,
.wp-block-cover.is-style-category-tile .wp-block-cover__background {
	z-index: -1;
}

.wp-block-cover.is-style-category-tile .wp-block-cover__inner-container {
	position: static;
}

.wp-block-cover.is-style-category-tile .wp-block-heading {
	margin: 0;
	font-size: clamp(var(--wp--preset--font-size--xx-large), 3.5vw, 3.25rem);
	line-height: 1.05;
}

.wp-block-cover.is-style-category-tile .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-cover.is-style-category-tile .wp-block-cover__image-background {
	transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.wp-block-cover.is-style-category-tile .wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Front end only: in the editor the overlay would swallow block selection. */
body:not(.editor-styles-wrapper) .wp-block-cover.is-style-category-tile .wp-block-button:first-child .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-cover.is-style-category-tile .wp-block-button__link:focus-visible {
	outline: none;
}

.wp-block-cover.is-style-category-tile:has(.wp-block-button__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -6px;
}

@media (hover: hover) {

	.wp-block-cover.is-style-category-tile:hover .wp-block-cover__image-background {
		transform: scale(1.04);
	}
}

/* The button's white text comes from a preset color class, which is
 * !important, so the hover color has to be as well. */
.wp-block-cover.is-style-category-tile:hover .wp-block-button__link,
.wp-block-cover.is-style-category-tile:has(.wp-block-button__link:focus-visible) .wp-block-button__link {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy) !important;
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-cover.is-style-category-tile .wp-block-cover__image-background {
		transition: none;
		transform: none !important;
	}
}

/* ==========================================================================
   Button — Link with chevron
   ========================================================================== */

.wp-block-button.is-style-chevron-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.125em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline color-mix(in srgb, currentColor 30%, transparent);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s;
}

.wp-block-button.is-style-chevron-link .wp-block-button__link:hover {
	background: none;
	text-decoration-color: currentColor;
}

.wp-block-button.is-style-chevron-link .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	mask: url(assets/images/icon-chevron.svg) center / contain no-repeat;
	transition: transform 0.2s;
}

.wp-block-button.is-style-chevron-link .wp-block-button__link:hover::after {
	transform: translateX(0.1875em);
}

/* ==========================================================================
   Floating contact (core/group block style)
   ========================================================================== */

/* Pinned to the bottom right corner, below the mini cart drawer (9999)
 * and the store notice (9998). Each pill is a group with an icon and a
 * linked paragraph; the link is stretched over the whole pill. */
.wp-block-group.is-style-floating-contact {
	position: fixed;
	right: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	z-index: 9000;
	margin: 0;
	transition: transform 0.4s ease, visibility 0s;
}

/* Set by floating-contact.js at the end of the page, so the pills don't
 * cover the legal links in the footer. */
.wp-block-group.is-style-floating-contact.is-hidden {
	visibility: hidden;
	transform: translateX(calc(100% + var(--wp--preset--spacing--20)));
	transition: transform 0.4s ease, visibility 0s 0.4s;
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-group.is-style-floating-contact,
	.wp-block-group.is-style-floating-contact.is-hidden {
		transition: none;
	}
}

.is-style-floating-contact > .wp-block-group {
	position: relative;
	transition: border-color 0.2s;
}

/* The pill's border color is an inline style from the editor. */
.is-style-floating-contact > .wp-block-group:hover {
	border-color: var(--wp--preset--color--navy) !important;
}

.is-style-floating-contact p {
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.is-style-floating-contact a {
	text-decoration: none;
}

.is-style-floating-contact a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

.is-style-floating-contact a:focus-visible {
	outline: none;
}

.is-style-floating-contact a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}

/* ==========================================================================
   WooCommerce — Mini cart
   ========================================================================== */

/* WooCommerce's outlined component buttons (e.g. the mini cart "View cart")
 * use currentColor and a hardcoded #1e1e1e hover; align them with the
 * theme's outline button style. The doubled class outranks WooCommerce's
 * own rules regardless of stylesheet order. */
.wc-block-components-button.wc-block-components-button:not(.is-link).outlined,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline {
	color: var(--wp--custom--outline-button-color);
}

.wc-block-components-button.wc-block-components-button:not(.is-link).outlined:hover,
.wc-block-components-button.wc-block-components-button:not(.is-link).outlined:focus,
.wc-block-components-button.wc-block-components-button:not(.is-link).outlined:active,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline:hover,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline:focus,
.wc-block-components-button.wc-block-components-button:not(.is-link).is-style-outline:active {
	background-color: color-mix(in srgb, currentColor 5%, transparent);
	color: var(--wp--custom--outline-button-color);
}

/* ==========================================================================
   WooCommerce — Cart & Checkout
   ========================================================================== */

/* Styles for WooCommerce blocks that can't be styled via the editor yet. */
/* https://github.com/woocommerce/woocommerce/issues/59322 */

.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-order-summary__title,
.wc-block-components-totals-coupon,
.wc-block-components-totals-item {
	color: var(--wp--preset--color--navy);
}

.wp-block-woocommerce-checkout .wc-block-components-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.18;
}

.wc-block-components-form .wc-block-components-checkout-step {
	margin-bottom: var(--wp--preset--spacing--50);
}

.wc-block-components-checkout-step__heading-container {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 0;
}

/* Cart scope covers the shipping calculator fields, which reuse the same
 * components as the checkout form. */
.wp-block-woocommerce-cart .wc-block-components-text-input:not(.has-error) input,
.wp-block-woocommerce-cart .wc-block-components-textarea:not(.has-error),
.wp-block-woocommerce-cart .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__container,
.wp-block-woocommerce-cart .wc-block-components-checkbox__input[type="checkbox"],
.wp-block-woocommerce-checkout .wc-block-components-text-input:not(.has-error) input,
.wp-block-woocommerce-checkout .wc-block-components-textarea:not(.has-error),
.wp-block-woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__container,
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: var(--wp--preset--color--line);
	border-radius: 0;
}

.wp-block-woocommerce-cart .wc-block-components-text-input:not(.has-error) input:focus,
.wp-block-woocommerce-cart .wc-block-components-textarea:not(.has-error):focus,
.wp-block-woocommerce-cart .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input:not(.has-error) input:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:not(.has-error):focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--navy-muted);
	box-shadow: 0 0 0 0.5px var(--wp--preset--color--navy-muted);
}

/* Coupon and gift card fields sit in the order summary, where WooCommerce's
 * component styles tie the generic override above on specificity and load
 * later, keeping their rounded corners. The doubled component class wins
 * the tie; the cart block and extension fields that reuse the text-input
 * component (e.g. Gift Cards) get the same treatment. */
.wp-block-woocommerce-cart .wc-block-components-text-input.wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input.wc-block-components-text-input input {
	border-radius: 0;
}

/* The Gift Cards extension's cart/checkout panel ships its own text input
 * component with a hardcoded 4px radius; its classic product-page fields
 * read --wc-form-border-radius and need no override. */
.wc-gift-cards-text-input input {
	border-color: var(--wp--preset--color--line);
	border-radius: 0;
}

/* WooCommerce Payments hardcodes a 5px radius and gray border on the
 * WooPay save-details phone input; match the other checkout fields. */
.woopay-save-new-user-container .save-details-form.form-row .phone-input.phone-input {
	border-color: var(--wp--preset--color--line);
	border-radius: 0;
}

/* Square the remaining cart/checkout components WooCommerce rounds with
 * hardcoded 4px values (no variable, no editor UI). Doubled classes beat
 * WooCommerce's specificity ties regardless of stylesheet order. Radio
 * inputs keep their 50% radius; circular radios are intentional. The
 * express payment box outline is drawn in three pieces: two title-row
 * pseudo-elements hold its top corners and the content box its bottom
 * ones; the branded express buttons keep their own rounding. */
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content.wc-block-components-express-payment__content,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option:first-child::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option:last-child::after,
.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-address-card.wc-block-components-address-card,
.wc-block-components-local-pickup-select--multiple.wc-block-components-local-pickup-select--multiple,
.wc-block-components-address-autocomplete-suggestions.wc-block-components-address-autocomplete-suggestions {
	border-radius: 0;
}

/* WooCommerce rings the selected shipping/payment option with an inset
 * box-shadow. Theme-6 carries 20% alpha in every palette, so any ring
 * painted with it composites over the group's own border (same color)
 * and darkens the shared pixels. Drop the ring; the group border is the
 * outline and the filled radio dot carries the selected state. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: none;
}

/* WooCommerce strips the group border's top or bottom edge when the
 * first or last option is the selected one, expecting the ring to draw
 * that edge; with the ring gone, restore the sides and their margin
 * nudges so the box stays fully outlined. */
.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked--first-selected::after {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 0;
}

.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked--last-selected::after {
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-bottom: 0;
}

/* The boxes around these components are WooCommerce ::after overlays and
 * component borders drawn at 20% ink (or a hardcoded gray) instead of
 * the line color the fields beside them use; align them all. */
.wc-block-components-radio-control--highlight-checked.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container.wc-block-components-express-payment__title-container::after,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content.wc-block-components-express-payment__content,
.wc-block-components-address-card.wc-block-components-address-card,
.wc-block-components-local-pickup-select--multiple.wc-block-components-local-pickup-select--multiple,
.wc-block-components-address-autocomplete-suggestions.wc-block-components-address-autocomplete-suggestions {
	border-color: var(--wp--preset--color--line);
}

/* The separator lines between unselected options are 1px ::after
 * overlays painted with a 20% ink background, not a border. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option::after {
	background: var(--wp--preset--color--line);
}

/* ==========================================================================
   WooCommerce — My Account
   ========================================================================== */

/* My Account — classic shortcode UI; https://github.com/woocommerce/woocommerce/issues/59391 */
.woocommerce-account .entry-content > .woocommerce {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--90);
}

.woocommerce-account form .form-row:not(.woocommerce-invalid) .input-text,
.woocommerce-account form .form-row:not(.woocommerce-invalid) select,
.woocommerce-account form .form-row:not(.woocommerce-invalid) textarea,
.woocommerce-account .woocommerce-Input:not([type="hidden"]),
.woocommerce-account .select2-container .select2-selection {
	border-color: var(--wp--preset--color--line);
	border-radius: 0;
}

.woocommerce-account form .form-row:not(.woocommerce-invalid) .input-text:focus,
.woocommerce-account form .form-row:not(.woocommerce-invalid) select:focus,
.woocommerce-account form .form-row:not(.woocommerce-invalid) textarea:focus,
.woocommerce-account .woocommerce-Input:not([type="hidden"]):focus,
.woocommerce-account .select2-container--open .select2-selection,
.woocommerce-account .select2-container--focus .select2-selection {
	border-color: var(--wp--preset--color--line);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: none;
	padding: 0;
}

.woocommerce form .form-row {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.woocommerce form .form-row label:not(:has(input[type="checkbox"])) {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.71;
	margin-bottom: 5px;
}

.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.woocommerce-form-login .form-row .woocommerce-form-login__rememberme {
	margin: 0;
}

.woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
	order: -1;
}

.woocommerce-account h2:has(+ .woocommerce-form-login) {
	margin-block: var(--wp--preset--spacing--30);
}

.woocommerce-LostPassword.lost_password {
	margin-bottom: 0;
	margin-top: var(--wp--preset--spacing--50);
}

/* WOOPRD-1561: My Account address styles. */
.woocommerce-account .addresses .title .edit {
	float: none;
}

.woocommerce-account .addresses address {
	font-style: normal;
}

/* ==========================================================================
   WooCommerce — Catalog
   @todo remove once https://github.com/woocommerce/woocommerce/pull/68024 ships.
   ========================================================================== */
.woocommerce.wc-block-catalog-sorting,
.woocommerce.wc-block-catalog-sorting .components-disabled,
.woocommerce.wc-block-catalog-sorting form.woocommerce-ordering {
	align-items: center;
	display: flex;
	gap: 0.3em;
	margin-bottom: 0;
}
.woocommerce.wc-block-catalog-sorting label,
.woocommerce.wc-block-catalog-sorting.wc-block-catalog-sorting label.orderby-label {
	margin: 0;
}

/* ==========================================================================
   WooCommerce — Product card title
   ========================================================================== */

/* Long product titles are cut to two lines with an ellipsis. Core makes the
 * title link inline-block, which line clamping can't break into lines. */
.wc-block-product-template .wp-block-post-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.wc-block-product-template .wp-block-post-title a {
	display: inline;
}

/* ==========================================================================
   WooCommerce — Product card out of stock
   ========================================================================== */

.wc-block-product.outofstock .wc-block-components-product-image img {
	filter: grayscale(0.5);
	opacity: 0.55;
}

.wc-block-components-product-image .tlc-sold-out-label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.71;
	text-align: center;
}

/* ==========================================================================
   WooCommerce — Product card add to cart
   ========================================================================== */

.wc-block-product .wc-block-components-product-button {
	flex-shrink: 0;
}

.wc-block-product .wc-block-components-product-button__button.wc-block-components-product-button__button {
	position: relative;
	align-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.wc-block-product .wc-block-components-product-button__button.wc-block-components-product-button__button:hover {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--white);
}

.wc-block-product .wc-block-components-product-button__button.wc-block-components-product-button__button.is-in-cart {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.wc-block-product .wc-block-components-product-button__button::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	mask: url(assets/images/icon-cart.svg) center / contain no-repeat;
}

.wc-block-product .wc-block-components-product-button__button:not(.ajax_add_to_cart)::before {
	mask-image: url(assets/images/icon-arrow.svg);
}

.wc-block-product .wc-block-components-product-button__button.is-in-cart::before {
	mask-image: url(assets/images/icon-check.svg);
}

/* Hide the label but keep it as the accessible name. The front end wraps
 * it in a span, the editor renders it as a bare text node, so zero the
 * button's font size instead of hiding the span. */
.wc-block-product .wc-block-components-product-button__button.wc-block-components-product-button__button {
	font-size: 0;
}

.wc-block-product .wc-block-components-product-button > span {
	display: none;
}

/* ==========================================================================
   Wishlist — Product card button
   ========================================================================== */

.wc-block-product .tlc-add-to-wishlist__button.tlc-add-to-wishlist__button {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.wc-block-product .tlc-add-to-wishlist__button.tlc-add-to-wishlist__button:hover {
	border-color: var(--wp--preset--color--navy);
}

.wc-block-product .tlc-add-to-wishlist__button.tlc-add-to-wishlist__button.is-active {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.wc-block-product .tlc-add-to-wishlist__button.tlc-add-to-wishlist__button .tlc-wishlist-heart {
	width: 1.5rem;
	height: 1.5rem;
	transform: none;
}

/* Smaller card buttons on mobile. */
@media (max-width: 782px) {
	.wc-block-product .wc-block-components-product-button__button.wc-block-components-product-button__button,
	.wc-block-product .tlc-add-to-wishlist__button.tlc-add-to-wishlist__button {
		width: 2.25rem;
		height: 2.25rem;
	}

	.wc-block-product .wc-block-components-product-button__button::before,
	.wc-block-product .tlc-add-to-wishlist__button.tlc-add-to-wishlist__button .tlc-wishlist-heart {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* ==========================================================================
   WooCommerce — Product carousel next/previous buttons
   ========================================================================== */

/* Same round outline style as the product card cart and wishlist buttons. */
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons {
	gap: var(--wp--preset--spacing--10);
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s;
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):hover {
	border-color: var(--wp--preset--color--navy);
}

.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__icon {
	padding: 0;
}

/* ==========================================================================
   WooCommerce — Single product
   ========================================================================== */

.wp-block-product-specifications-item__value p {
	margin: 0
}

/* Attribute archive links (enabled on live) should read as plain text. */
.wp-block-product-specifications-item__value a,
.wp-block-product-specifications-item__value a:hover,
.wp-block-product-specifications-item__value a:focus {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* Checkbox alignment for reviews form
 * @todo remove once https://github.com/woocommerce/woocommerce/pull/68696 ships.
 */
.wp-block-woocommerce-product-review-form .comment-form-cookies-consent {
	align-items: flex-start;
}

:where(.wc-block-product-filter-chips__items) {
	gap: var(--wp--preset--spacing--10);
}

/* Active filter chips as pills. WooCommerce's chip rules outweigh the
 * :where()-wrapped block CSS from theme.json, hence here. */
.wp-block-woocommerce-product-filter-removable-chips .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
	padding: 0.375rem 0.875rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--line-muted);
}

/* Filter checkbox lists: larger checkboxes, one row per option divided by
 * a line, the whole row clickable. */
.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item {
	padding-block: 0.625rem;
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item + .wc-block-product-filter-checkbox-list__item {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item:first-child {
	padding-top: 0;
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item:last-child {
	padding-bottom: 0;
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__label {
	display: flex;
}

/* Subcategories indented as a tree; data-depth is added in functions.php.
 * One step is a checkbox wide, so a child's checkbox starts where its
 * parent's ends. Padding, not margin, keeps the row lines full width. */
.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item {
	--tlc-filter-indent: 1.25rem;
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item[data-depth="1"] {
	padding-inline-start: var(--tlc-filter-indent);
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item[data-depth="2"] {
	padding-inline-start: calc(2 * var(--tlc-filter-indent));
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__item[data-depth="3"] {
	padding-inline-start: calc(3 * var(--tlc-filter-indent));
}

.wc-block-product-filter-checkbox-list input[type="checkbox"].wc-block-product-filter-checkbox-list__input,
.wc-block-product-filter-checkbox-list svg.wc-block-product-filter-checkbox-list__mark {
	width: 1.25rem;
	height: 1.25rem;
}

.wc-block-product-filter-checkbox-list svg.wc-block-product-filter-checkbox-list__mark {
	padding: 0.25rem;
}

/* Option counts at the end of the row, muted. WooCommerce prints the
 * brackets as bare text around the number, so they are hidden by zeroing
 * the font size and only the number is sized back. */
.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__text-wrapper {
	flex-grow: 1;
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__count {
	margin-inline-start: auto;
	padding-inline-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--navy-muted);
	font-size: 0;
}

.wc-block-product-filter-checkbox-list .wc-block-product-filter-checkbox-list__count > span {
	font-size: var(--wp--preset--font-size--small);
}

/* Product Filters "Horizontal" block style: the filters sit side by side,
 * active filters wrap onto their own line below. Up to 782px WooCommerce
 * shows them in the mobile overlay, stacked as usual. In the editor the
 * filters sit in an extra inner blocks wrapper, so that one is the row. */
@media (min-width: 783px) {
	.wc-block-product-filters.is-style-horizontal .wc-block-product-filters__overlay-content,
	.wc-block-product-filters.is-style-horizontal .wc-block-product-filters__content,
	.wc-block-product-filters.is-style-horizontal .wc-block-product-filters__overlay-content > .block-editor-inner-blocks > .block-editor-block-list__layout,
	.wc-block-product-filters.is-style-horizontal .wc-block-product-filters__content > .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	}

	/* In a wrapping row (e.g. next to the sorting), the filters claim the
	 * width of their buttons; the active filters below shouldn't add to it. */
	.wc-block-product-filters.is-style-horizontal .wp-block-woocommerce-product-filter-active {
		contain: inline-size;
		flex-basis: 100%;
	}
}

/* Closed accordion panels are server-rendered without [hidden] (the
 * Interactivity API only applies it after hydration), so they flash open
 * on load. Collapse them from first paint via the server-rendered
 * aria-expanded state. Scoped to scripting: enabled so no-JS visitors
 * keep the all-panels-open fallback. */
@media (scripting: enabled) {
	.wp-block-accordion-heading:has([aria-expanded="false"]) + .wp-block-accordion-panel {
		height: 0;
		overflow: visible clip;
	}
}

.wp-block-woocommerce-product-gallery-large-image-next-previous-is-layout-flex {
	gap: 0;
}

.wp-block-woocommerce-add-to-cart-with-options .wp-block-tlc-add-to-wishlist {
	display: flex;
	justify-content: center;
}

.wc-block-components-product-stock-indicator {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.wc-block-components-product-stock-indicator::before {
	background-color: currentColor;
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: 0.5em;
	width: 0.5em;
}

.wc-block-components-product-stock-indicator--in-stock {
	color: var(--wp--preset--color--success);
}

.wp-block-woocommerce-product-specifications tbody {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-product-specifications tr {
	border-top: 1px solid var(--wp--preset--color--line-muted);
	padding: 10px 0;
}

.wp-block-woocommerce-product-specifications th,
.wp-block-woocommerce-product-specifications td {
	border: none;
	display: block;
	padding: 0;
}

.wp-block-woocommerce-product-specifications th {
	color: var(--wp--preset--color--navy-muted);
	font-weight: inherit;
}

/* ==========================================================================
   WooCommerce — Cart
   ========================================================================== */

.wp-block-woocommerce-cart-order-summary-heading-block textarea {
	padding-inline-start: 0;
}

.wc-block-cart-item__quantity {
	margin-top: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   WooCommerce — Store notice
   ========================================================================== */

/* WooCommerce prints the notice first thing in the body and pins it to the
 * bottom (woocommerce-blocktheme.css) or the top (woocommerce.css) of the
 * viewport. Put it back into the flow instead, so it sits above the header
 * and scrolls away, and stays clear of the floating contact pills. */
.woocommerce-store-notice,
p.demo_store {
	position: static;
	box-shadow: none;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
}

.woocommerce-store-notice a,
p.demo_store a {
	color: var(--wp--preset--color--navy);
}

@media (max-width: 782px) {
	.woocommerce-store-notice,
	p.demo_store {
		font-size: var(--wp--preset--font-size--x-small);
	}
}