/**
 * WooCommerce storefront. Only loaded while WooCommerce is active.
 *
 * Maps WooCommerce markup onto the theme's design tokens. Nothing here sets its own
 * colours, so Midnight and the colour presets apply to the store automatically.
 * Higher-specificity selectors are there because they have to beat WooCommerce's.
 *
 * Contents
 * 1. Header icons
 * 2. Product cards
 * 3. Price, badges, rating
 * 4. Shop layout and filters
 * 5. Single product
 * 6. Buttons
 * 7. Form fields
 * 8. Cart and checkout
 * 9. Mini-cart drawer
 * 10. My account and notices
 * 11. User preferences
 */

/* 1. Header icons
   ======================================================================== */

.site-header__store {
	flex: none;
}

.wc-block-mini-cart__button,
.wp-block-woocommerce-customer-account a {
	align-items: center;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.wc-block-mini-cart__button:hover,
.wp-block-woocommerce-customer-account a:hover {
	color: var(--wp--preset--color--accent);
	opacity: 1 !important;
}

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
}

/* 2. Product cards
   ======================================================================== */

.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	text-align: start;
}

.wc-block-product .wc-block-components-product-image {
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--wp--custom--radius--large);
	margin-block-end: var(--wp--preset--spacing--10);
	overflow: hidden;
}

.wc-block-product .wc-block-components-product-image img {
	display: block;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-out);
	width: 100%;
}

@media (hover: hover) {

	.wc-block-product .wc-block-components-product-image a:hover img {
		transform: scale(1.02);
	}
}

.wc-block-product .wp-block-post-title {
	font-weight: 600;
	letter-spacing: -0.016em;
	line-height: 1.3;
	margin: 0;
}

.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wp-block-woocommerce-product-button {
	margin: 0;
	text-align: start;
}

.wc-block-product .wp-block-woocommerce-product-button {
	align-items: flex-start;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--10);
}

.wc-block-product .added_to_cart {
	font-size: var(--wp--preset--font-size--small);
	padding-block: 0.625rem;
}

/* The category name is the link, stretched so the whole card responds. */
.shop-category-card {
	position: relative;
	transition: box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.shop-category-card:hover {
	box-shadow: var(--wp--preset--shadow--floating);
}

.shop-category-card a {
	color: var(--wp--preset--color--contrast);
}

.shop-category-card a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* The second product photo fades in on hover, with touch screens keeping the first. */
.wc-block-product .wc-block-components-product-image a {
	display: block;
	position: relative;
}

.wc-block-product .wb-product-alt {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	transition: opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease-out);
	width: 100%;
}

@media (hover: hover) {

	.wc-block-product .wc-block-components-product-image a:hover .wb-product-alt {
		opacity: 1;
	}
}

/* Products on a dark section, as on the Noir landing page. */
.is-style-section-contrast :is(.wc-block-components-product-price, .wc-block-product .wp-block-post-title a) {
	color: var(--wp--preset--color--base);
}

.is-style-section-contrast .wc-block-components-product-price del {
	color: var(--wp--preset--color--muted-inverse);
}

.is-style-section-contrast .wc-block-product .wc-block-components-product-button .wp-block-button__link {
	border-color: var(--wp--preset--color--muted-inverse);
	color: var(--wp--preset--color--base);
}

.is-style-section-contrast .wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.is-style-section-contrast .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* 3. Price, badges, rating
   ======================================================================== */

.wc-block-components-product-price,
.woocommerce div.product .price,
.woocommerce div.product p.price {
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}

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

.wc-block-components-product-price ins,
.woocommerce div.product .price ins {
	background: none;
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-sale-badge,
.woocommerce span.onsale {
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
	padding: 0.25rem 0.625rem;
	text-transform: none;
}

.woocommerce div.product span.onsale {
	inset: 0.75rem auto auto 0.75rem;
	margin: 0;
	z-index: 2;
}

.star-rating,
.wc-block-components-product-rating__stars {
	color: var(--wp--preset--color--contrast);
}

/* 4. Shop layout and filters
   ======================================================================== */

.shop-toolbar {
	margin-block-end: var(--wp--preset--spacing--40);
}

.woocommerce-result-count,
.wc-block-product-results-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 !important;
}

.woocommerce-breadcrumb,
.wc-block-breadcrumbs,
.wp-block-woocommerce-breadcrumbs {
	color: var(--wp--preset--color--muted) !important;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 !important;
}

.wp-block-woocommerce-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--muted) !important;
}

.wc-block-product-filter-price-slider input:where([type="text"], .text) {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-product-filters .wp-block-heading {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.wp-block-woocommerce-product-filters :is(.wp-block-woocommerce-product-filter-taxonomy, .wp-block-woocommerce-product-filter-price, .wp-block-woocommerce-product-filter-attribute, .wp-block-woocommerce-product-filter-status) {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block-start: var(--wp--preset--spacing--30);
}

/* 5. Single product
   ======================================================================== */

@media (min-width: 782px) {

	.product-layout__summary {
		align-self: flex-start;
		position: sticky;
		top: 5rem;
	}
}

/* WooCommerce caps the gallery at 512px and floats it at half width. */
.product-layout .wp-block-woocommerce-product-image-gallery {
	max-width: none;
	width: 100%;
}

.woocommerce .product-layout div.product div.images,
.woocommerce .product-layout .woocommerce-product-gallery,
.product-layout .woocommerce-product-gallery {
	float: none;
	margin-block-end: 0;
	width: 100%;
}

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

.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img {
	border-radius: var(--wp--custom--radius--large);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	margin-block-start: var(--wp--preset--spacing--10);
}

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

.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--wp--custom--radius--small);
}

.woocommerce div.product form.cart,
.wp-block-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
}

.woocommerce div.product form.variations_form {
	display: block;
}

.woocommerce div.product form.cart .variations {
	border: 0;
	margin-block-end: var(--wp--preset--spacing--20);
	width: 100%;
}

.woocommerce div.product form.cart .variations :is(th, td) {
	display: block;
	line-height: 1.4;
	padding: 0;
	text-align: start;
}

.woocommerce div.product form.cart .variations th {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding-block-end: 0.25rem;
}

.woocommerce div.product form.cart .variations td {
	padding-block-end: var(--wp--preset--spacing--20);
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.woocommerce div.product .stock {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-product-meta,
.wp-block-woocommerce-product-sku,
.wp-block-woocommerce-product-meta .wp-block-post-terms {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-product-details {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* WooCommerce restyles these below 768px with an "html body" selector, so this
   has to match it. A long row of tabs scrolls sideways instead of stacking. */
html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs {
	border-block-end: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-flow: row nowrap;
	gap: 0 var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
	overflow-x: auto;
	padding: 0;
	scrollbar-width: none;
}

html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs::before,
html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs li::before,
html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs li::after {
	display: none;
}

html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	flex: none;
	margin: 0;
	opacity: 1; /* WooCommerce fades inactive tabs below readable contrast. */
	padding: 0;
	width: auto;
}

html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs li a {
	color: var(--wp--preset--color--muted);
	display: inline-block;
	font-weight: 500;
	padding: 0.75rem 0;
	white-space: nowrap;
}

html body .wp-block-woocommerce-product-details.is-style-minimal .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* The tab already names the panel, so its heading stays modest. */
.woocommerce-Tabs-panel > h2,
.woocommerce-Reviews-title {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* 6. Buttons
   Every WooCommerce button family shares the theme's pill and press feedback.
   ======================================================================== */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	align-items: center;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--on-accent);
	display: inline-flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.12em;
	line-height: 1.3;
	min-height: 2.75rem;
	padding: 0.875rem 1.75rem;
	text-transform: uppercase;
	transition:
		background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard),
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-out);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--on-accent);
}

.woocommerce .button:active,
.woocommerce button.button:active,
.wc-block-components-button:not(.is-link):active {
	transform: scale(var(--wp--custom--motion--press));
}

/* WooCommerce fades the button until a variation is chosen, which leaves it unreadable. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Grid buttons are a quieter outline, so a page of products is not a wall of blue. */
.wc-block-product .wc-block-components-product-button .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	text-transform: uppercase;
	transition: border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
	width: auto;
}

.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-grid__product .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* 7. Form fields
   ======================================================================== */

.woocommerce .quantity .qty {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--contrast);
	min-height: 2.75rem;
	padding: 0.5rem;
	text-align: center;
	width: 4.5rem;
}

.woocommerce-ordering select,
.wc-block-catalog-sorting select,
.woocommerce div.product form.cart .variations select {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	width: 100%;
}

.woocommerce-ordering {
	margin: 0 !important;
}

/* Small controls still need a comfortable tap area. */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	min-height: 1.5rem;
	padding-block: 0.25rem;
}

.woocommerce form .show-password-input {
	height: 2rem;
	width: 2rem;
}

.woocommerce-ordering select {
	width: auto;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-address-form input {
	background: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--medium) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* The select's wrapper paints its own square background behind the rounded field. */
.wc-blocks-components-select__container {
	background: transparent;
	border-radius: var(--wp--custom--radius--medium);
}

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

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent) !important;
	outline: 0;
}

/* 8. Cart and checkout
   ======================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	padding-block-start: 0;
}

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--wp--custom--radius--small);
}

.wc-block-components-quantity-selector {
	border-radius: var(--wp--custom--radius--control);
	height: 2.75rem;
	width: 8rem;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--contrast);
	min-width: 2.75rem;
}

.wc-block-components-quantity-selector::after {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--control);
	opacity: 1;
}

/* The stepper draws its own box, so the input inside it must not draw another. */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--contrast);
	height: 100%;
	min-height: 0;
	padding: 0;
}

.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option::after {
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
}

.wc-block-components-radio-control--highlight-checked,
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--accent);
}

.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-cart-items td,
.wc-block-cart-items th {
	border-color: var(--wp--preset--color--border) !important;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-weight: 600;
	letter-spacing: -0.016em;
}

/* 9. Mini-cart drawer
   ======================================================================== */

.wc-block-components-drawer,
.wc-block-mini-cart__drawer {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* WooCommerce only sets aria-hidden on the closed drawer, so its buttons stay
   reachable by keyboard while invisible. The delay lets the slide-out finish. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
	transition: visibility 0s linear var(--wp--custom--motion--base);
	visibility: hidden;
}

.wc-block-mini-cart__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.wc-block-mini-cart__footer {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

/* 10. My account and notices
   ======================================================================== */

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	color: var(--wp--preset--color--muted);
	display: inline-block;
	padding-block: 0.625rem;
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast);
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--wp--preset--color--base-alt);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

/* 11. User preferences
   ======================================================================== */

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

	.wc-block-product .wc-block-components-product-image img,
	.woocommerce .button,
	.wc-block-components-button:not(.is-link) {
		transition: none;
	}

	.wc-block-product .wc-block-components-product-image a:hover img,
	.woocommerce .button:active,
	.wc-block-components-button:not(.is-link):active {
		transform: none;
	}
}