/**
 * MM Store – WooCommerce components.
 *
 * Loaded only on pages that render a WooCommerce block (see
 * mm_store_woocommerce_styled_blocks()). Selectors are scoped to MM Store
 * classes or to WooCommerce block wrappers, one class deeper than
 * WooCommerce's own rules so load order never decides the result.
 *
 * This file never styles MM Side Cart (.mm-side-cart-*) or payment gateway
 * markup.
 *
 * @package MM_Store
 */

/* -------------------------------------------------------------------------- */
/* Shared tokens                                                              */
/* -------------------------------------------------------------------------- */

.mm-store-product-grid,
.mm-store-product-layout,
.wp-block-add-to-cart-form {
	--mm-store-control-size: 2.75rem;
	--mm-store-card-gap: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------- */
/* Shop header                                                                */
/* -------------------------------------------------------------------------- */

.mm-store-breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--30);
}

.mm-store-shop-header .wp-block-query-title {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.mm-store-shop-toolbar {
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--divider);
}

.mm-store-shop-toolbar .woocommerce-result-count {
	margin: 0;
}

.mm-store-shop-toolbar .woocommerce-ordering {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.mm-store-shop-toolbar .woocommerce-ordering select {
	min-block-size: var(--mm-store-control-size, 2.75rem);
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

/* -------------------------------------------------------------------------- */
/* Product grid and cards                                                     */
/* -------------------------------------------------------------------------- */

/*
 * Only the row gap changes: WooCommerce's column maths (auto-fill with a
 * 150px minimum) assumes its own 1.25em column gap, so a wider column gap
 * would drop a 4-column grid to 3 columns.
 */
.mm-store-product-grid .wc-block-product-template__responsive {
	row-gap: var(--wp--preset--spacing--60);
}

.mm-store-product-grid .wc-block-product-template {
	margin-block: 0;
	padding: 0;
	list-style: none;
}

/*
 * A card is a flex column in normal flow. Nothing is absolutely positioned,
 * so the badge can never cover the image, title, price or button, and the
 * button sits at the bottom of every card in a row.
 */
.mm-store-product-grid .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--mm-store-card-gap);
	min-inline-size: 0;
	text-align: start;
}

.mm-store-product-grid .wc-block-product > * {
	margin-block: 0;
}

.mm-store-product-grid .wc-block-components-product-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--surface);
	aspect-ratio: 1;
}

.mm-store-product-grid .wc-block-components-product-image a {
	display: block;
	block-size: 100%;
}

.mm-store-product-grid .wc-block-components-product-image img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The status row always takes one line, with or without a badge. */
.mm-store-card-status {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	min-block-size: 1.75rem;
}

.mm-store-card-status > * {
	margin: 0;
}

.mm-store-product-grid .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mm-store-product-grid .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--medium);
	font-variant-numeric: tabular-nums;
}

.mm-store-product-grid .wc-block-components-product-rating {
	font-size: var(--wp--preset--font-size--small);
}

.mm-store-product-grid .wp-block-woocommerce-product-button {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

.mm-store-product-grid .wp-block-button.wc-block-components-product-button {
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
}

.mm-store-product-grid .wp-block-button.wc-block-components-product-button .wp-block-button__link {
	inline-size: 100%;
	min-block-size: var(--mm-store-control-size);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.mm-store-product-grid .wp-block-button.wc-block-components-product-button .added_to_cart {
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

/* Out of stock: the image is quieter, the information stays readable. */
.mm-store-product-grid .wc-block-product.outofstock .wc-block-components-product-image img {
	opacity: 0.6;
}

/* -------------------------------------------------------------------------- */
/* Sale badge and stock                                                       */
/* -------------------------------------------------------------------------- */

/*
 * WooCommerce's badge stylesheet outranks the zero-specificity rules that
 * theme.json generates, so the badge is styled here. White on #7C3AED is
 * 5.7:1.
 */
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	position: static;
	padding: 0.1875rem 0.625rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
}

.wp-block-woocommerce-product-stock-indicator.wc-block-components-product-stock-indicator,
.wp-block-add-to-cart-form .stock {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

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

.wc-block-components-product-stock-indicator--out-of-stock,
.wp-block-add-to-cart-form .stock.out-of-stock {
	color: var(--wp--preset--color--danger);
}

.wc-block-components-product-stock-indicator--available-on-backorder,
.wc-block-components-product-stock-indicator--low-stock,
.wp-block-add-to-cart-form .stock.available-on-backorder {
	color: var(--wp--preset--color--muted);
}

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

/*
 * Core grid layout (set in the template): at most two columns, each at least
 * 22rem, so it is two columns on desktop and wide tablets and one column when
 * there is not room for two. The gap is set on the block, not here, because
 * core's column maths uses it.
 */
.mm-store-product-layout {
	align-items: start;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

.mm-store-product-layout > * {
	min-inline-size: 0;
}

.mm-store-product-media .wc-block-product-gallery {
	max-inline-size: 100%;
}

.mm-store-product-media .wc-block-product-gallery-large-image {
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--surface);
}

.mm-store-product-summary > * {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.mm-store-product-summary .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--30);
}

.mm-store-product-price-row {
	gap: var(--wp--preset--spacing--30);
}

.mm-store-product-price-row .wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
}

.mm-store-product-summary .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
}

.mm-store-product-meta {
	gap: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--divider);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------- */
/* Add-to-cart form                                                           */
/* -------------------------------------------------------------------------- */

.wp-block-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.wp-block-add-to-cart-form form.variations_form {
	display: block;
}

.wp-block-add-to-cart-form table.variations {
	inline-size: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	border: 0;
	border-collapse: collapse;
}

.wp-block-add-to-cart-form table.variations tr {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
}

.wp-block-add-to-cart-form table.variations th,
.wp-block-add-to-cart-form table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
	background: none;
}

.wp-block-add-to-cart-form table.variations th {
	margin-block-end: var(--wp--preset--spacing--20);
	font-weight: 600;
}

.wp-block-add-to-cart-form table.variations select {
	min-inline-size: min(100%, 16rem);
	min-block-size: var(--mm-store-control-size);
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wp-block-add-to-cart-form .reset_variations {
	display: inline-flex;
	align-items: center;
	min-block-size: 1.5rem;
	margin-block-start: var(--wp--preset--spacing--20);
	margin-inline-start: 0;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-add-to-cart-form .single_variation_wrap .woocommerce-variation {
	margin-block-end: var(--wp--preset--spacing--30);
}

.wp-block-add-to-cart-form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-add-to-cart-form .quantity {
	margin: 0;
}

.wp-block-add-to-cart-form .quantity .qty {
	inline-size: 5rem;
	min-block-size: var(--mm-store-control-size);
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	text-align: center;
}

.wp-block-add-to-cart-form .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-block-size: var(--mm-store-control-size);
	margin: 0;
}

/*
 * WooCommerce marks the button "disabled" with a class until a variation is
 * chosen. It keeps readable contrast (muted on surface, 6.6:1) instead of
 * fading, and a dashed border shows the state without relying on colour.
 */
.wp-block-add-to-cart-form form.cart button.single_add_to_cart_button.disabled,
.wp-block-add-to-cart-form form.cart button.single_add_to_cart_button.disabled:hover {
	border-style: dashed;
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
	opacity: 1;
}

.wp-block-add-to-cart-form .single_add_to_cart_button.mm-store-is-busy {
	cursor: progress;
	opacity: 0.75;
}

/* Status and error messages written by woocommerce.js. */
.mm-store-cart-feedback p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.mm-store-cart-feedback p:not(:empty) {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-inline-start: 4px solid var(--wp--preset--color--success);
	border-radius: var(--wp--preset--border-radius--small);
	background: var(--wp--preset--color--surface);
}

.mm-store-cart-feedback .mm-store-cart-feedback__error:not(:empty) {
	border-inline-start-color: var(--wp--preset--color--danger);
}

/* -------------------------------------------------------------------------- */
/* Variation swatches                                                         */
/* -------------------------------------------------------------------------- */

/* The select stays in the form for WooCommerce and as the no-JS fallback. */
.mm-store-swatch-source {
	display: none;
}

.mm-store-swatches {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.mm-store-swatches__current {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mm-store-swatches__current:empty {
	display: none;
}

.mm-store-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.mm-store-swatch {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

/*
 * The real radio stays in the accessibility tree and in the tab order; it is
 * only drawn invisibly over the visual so clicks and taps land on it.
 */
.mm-store-swatch__input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.mm-store-swatch__visual {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: var(--mm-store-control-size);
	block-size: var(--mm-store-control-size);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Text options: the text is inside the visual box. */
.mm-store-swatches--label .mm-store-swatch {
	align-items: center;
}

.mm-store-swatches--label .mm-store-swatch__visual {
	display: none;
}

.mm-store-swatches--label .mm-store-swatch__text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: var(--mm-store-control-size);
	min-block-size: var(--mm-store-control-size);
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Colour bubbles. The ring keeps light colours visible on white. */
.mm-store-swatches--color .mm-store-swatch__visual {
	inline-size: var(--mm-store-control-size);
	border-radius: 50%;
	background: var(--mm-store-swatch-color, transparent);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--base);
}

/* Image swatches. */
.mm-store-swatches--image .mm-store-swatch__visual {
	inline-size: 3.5rem;
	block-size: 3.5rem;
	padding: 2px;
	overflow: hidden;
}

.mm-store-swatches--image .mm-store-swatch__visual img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--wp--preset--border-radius--small);
	object-fit: cover;
}

/*
 * Selected: a thicker primary border plus a check mark, so the state is shown
 * by shape as well as colour (WCAG 1.4.1).
 */
.mm-store-swatch.is-selected .mm-store-swatch__visual,
.mm-store-swatches--label .mm-store-swatch.is-selected .mm-store-swatch__text {
	border: 3px solid var(--wp--preset--color--primary);
}

.mm-store-swatches--label .mm-store-swatch.is-selected .mm-store-swatch__text {
	background: var(--wp--preset--color--surface);
}

.mm-store-swatch.is-selected::after {
	position: absolute;
	inset-block-start: -0.375rem;
	inset-inline-end: -0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	border: 2px solid var(--wp--preset--color--base);
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	content: "\2713";
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

/* Keyboard focus on the hidden radio is drawn on its visual. */
.mm-store-swatch__input:focus-visible + .mm-store-swatch__visual,
.mm-store-swatches--label .mm-store-swatch__input:focus-visible ~ .mm-store-swatch__text {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.mm-store-swatch:hover .mm-store-swatch__visual,
.mm-store-swatches--label .mm-store-swatch:hover .mm-store-swatch__text {
	border-color: var(--wp--preset--color--primary);
}

/*
 * Unavailable. Colour and image swatches are dimmed and crossed out; text
 * swatches keep readable muted text, struck through, with a dashed border.
 * Each is also announced as "Unavailable".
 */
.mm-store-swatch.is-unavailable {
	cursor: not-allowed;
}

.mm-store-swatches--color .mm-store-swatch.is-unavailable .mm-store-swatch__visual,
.mm-store-swatches--image .mm-store-swatch.is-unavailable .mm-store-swatch__visual {
	opacity: 0.5;
}

.mm-store-swatches--image .mm-store-swatch.is-unavailable .mm-store-swatch__visual {
	position: relative;
}

/* Drawn over the thumbnail, which would hide a background. */
.mm-store-swatches--image .mm-store-swatch.is-unavailable .mm-store-swatch__visual::after {
	position: absolute;
	inset: 0;
	content: "";
	background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--wp--preset--color--contrast) calc(50% - 1px), var(--wp--preset--color--contrast) calc(50% + 1px), transparent calc(50% + 1px));
}

.mm-store-swatches--color .mm-store-swatch.is-unavailable .mm-store-swatch__visual {
	background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--wp--preset--color--contrast) calc(50% - 1px), var(--wp--preset--color--contrast) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(var(--mm-store-swatch-color, transparent), var(--mm-store-swatch-color, transparent));
}

.mm-store-swatches--label .mm-store-swatch.is-unavailable .mm-store-swatch__text {
	border-style: dashed;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}

/* -------------------------------------------------------------------------- */
/* Product details (Description / Additional information / Reviews)           */
/* -------------------------------------------------------------------------- */

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

.mm-store-product-details .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	border-block-end: 1px solid var(--wp--preset--color--divider);
	list-style: none;
}

.mm-store-product-details .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.mm-store-product-details .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mm-store-control-size, 2.75rem);
	padding-inline: var(--wp--preset--spacing--30);
	border-block-end: 3px solid transparent;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
}

.mm-store-product-details .woocommerce-tabs ul.tabs li.active a {
	border-block-end-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.mm-store-product-details .woocommerce-Tabs-panel {
	max-inline-size: 46rem;
}

.mm-store-product-details table.shop_attributes {
	inline-size: 100%;
	border-collapse: collapse;
}

.mm-store-product-details table.shop_attributes th,
.mm-store-product-details table.shop_attributes td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--divider);
	text-align: start;
}

/* -------------------------------------------------------------------------- */
/* Recommendations                                                            */
/* -------------------------------------------------------------------------- */

.mm-store-recommendations {
	margin-block: var(--wp--preset--spacing--70) 0;
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--divider);
}

.mm-store-recommendations > .wp-block-heading {
	margin-block: 0 var(--wp--preset--spacing--50);
}

/* -------------------------------------------------------------------------- */
/* Cart and checkout blocks                                                   */
/* -------------------------------------------------------------------------- */

/*
 * Deliberately minimal: the blocks carry their own accessible styles, and
 * payment gateway fields are left entirely to their providers.
 */
.mm-store-cart-main .wp-block-post-title,
.mm-store-checkout-main .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* Reduced motion is handled globally in style.css. */