/**
 * Modern UX for WooCommerce — catalogue.
 *
 * Product grid, cards, archive toolbar, filters, categories, carousel.
 * Scoped to `.mw` so it never leaks into unrelated theme markup.
 */

/* ==========================================================================
   1. Grid
   ========================================================================== */

/* Only the product LIST is a grid. WooCommerce also puts `products` on the
   wrapping <section> for related products, up-sells and cross-sells
   (`<section class="related products">`), so a bare `.products` selector turns
   that whole section into a grid — heading in column one, the entire product
   list crushed into column two. Always qualify with `ul`. */
.mw ul.products,
.mw .mw-grid {
	display: grid;
	grid-template-columns: repeat(var(--mw-cols), minmax(0, 1fr));
	gap: var(--mw-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Neutralise the float/percentage widths WooCommerce core applies to columns. */
.mw ul.products li.product,
.mw .mw-grid li.product {
	width: auto !important; /* WooCommerce sets inline-ish percentage widths. */
	margin: 0 !important; /* Grid gap replaces the legacy 3.8% margins. */
	float: none !important;
	clear: none !important;
}

.mw ul.products::before,
.mw ul.products::after {
	content: none;
}

@media (max-width: 1024px) {
	.mw ul.products,
	.mw .mw-grid {
		grid-template-columns: repeat(var(--mw-cols-tablet), minmax(0, 1fr));
		gap: calc(var(--mw-grid-gap) * 0.75);
	}
}

@media (max-width: 640px) {
	.mw ul.products,
	.mw .mw-grid {
		grid-template-columns: repeat(var(--mw-cols-mobile), minmax(0, 1fr));
		gap: var(--mw-grid-gap-sm);
	}
}

/* ==========================================================================
   2. Product card
   ========================================================================== */

.mw .mw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: left;
}

.mw .mw-card--center {
	text-align: center;
	align-items: center;
}

.mw-card-soft .mw-card {
	padding: 12px;
	border-radius: var(--mw-radius-lg);
	background: var(--mw-surface);
}

.mw-card-outline .mw-card {
	padding: 12px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-lg);
}

.mw .mw-card__media {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
	aspect-ratio: var(--mw-image-ratio);
}

/* The link is a stretched flex item rather than `height: 100%`. A percentage
   height resolved against an aspect-ratio box is unreliable — it worked on the
   main grid but left the related-products images short, with dead space under
   each one. Flex stretch gives the link a definite height in both cases, and
   still collapses correctly when the ratio is set to "Natural (no crop)". */
.mw .mw-card__link {
	display: block;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	text-decoration: none;
}

.mw .mw-card__img,
.mw .mw-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mw-image-fit);
	object-position: center;
	transition: opacity var(--mw-dur) var(--mw-ease), transform 600ms var(--mw-ease);
}

/* WooCommerce core ships `.woocommerce ul.products li.product a img { height:
   auto }` at specificity 0,3,4, which outranks the rule above and leaves the
   image at its natural height inside the aspect-ratio box — dead space under
   every card whose image is not already the configured ratio. Matching the
   loop structure gets us to 0,4,3, which wins on class count without needing
   `!important`. */
.mw ul.products li.product .mw-card__media img,
.mw ul.products li.product .mw-card__link img {
	width: 100%;
	height: 100%;
	object-fit: var(--mw-image-fit);
	object-position: center;
}

/* With the "Natural (no crop)" ratio the media box has no fixed height, so
   `height: 100%` resolves back to auto on its own — no extra rule needed. */

.mw .mw-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.mw .mw-card--has-alt:hover .mw-card__img--alt,
.mw .mw-card--has-alt:focus-within .mw-card__img--alt {
	opacity: 1;
}

.mw .mw-card--zoom:hover .mw-card__img,
.mw .mw-card--zoom:focus-within .mw-card__img {
	transform: scale(1.03);
}

.mw .mw-card--oos .mw-card__media {
	opacity: 0.72;
}

/* Hover actions (quick view, wishlist slot). */
.mw .mw-card__actions {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--mw-dur-fast) var(--mw-ease), transform var(--mw-dur-fast) var(--mw-ease);
}

.mw .mw-card:hover .mw-card__actions,
.mw .mw-card:focus-within .mw-card__actions {
	opacity: 1;
	transform: none;
}

.mw .mw-card__actions .mw-iconbtn {
	width: 36px;
	height: 36px;
	background: var(--mw-background);
	box-shadow: var(--mw-shadow-sm);
	color: var(--mw-text);
}

/* Touch devices: never hide an action behind hover. */
@media (hover: none) {
	.mw .mw-card__actions {
		opacity: 1;
		transform: none;
	}
}

/* Card text. */
.mw .mw-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 5px;
	min-width: 0;
}

.mw .mw-card__eyebrow {
	color: var(--mw-muted);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mw .mw-card__title,
.mw .products .mw-card__title {
	margin: 0;
	padding: 0;
	font-family: var(--mw-font-heading);
	font-size: 0.9375rem;
	font-weight: 550;
	line-height: 1.4;
	letter-spacing: var(--mw-tracking);
}

.mw .mw-card__titlelink {
	color: var(--mw-text);
	text-decoration: none;
}

.mw .mw-card__titlelink::after {
	/* Full-card click target that keeps the accessible name on the link. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mw .mw-card__excerpt {
	margin: 0;
	color: var(--mw-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.mw .mw-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
}

.mw .mw-card__rating .star-rating {
	font-size: 0.75em;
	margin: 0;
	color: var(--mw-text);
}

.mw .mw-card__price,
.mw .mw-card__price .price {
	color: var(--mw-text);
	font-size: 0.9375rem;
	font-weight: 550;
	font-variant-numeric: tabular-nums;
}

.mw .mw-card__price del {
	margin-right: 6px;
	color: var(--mw-muted);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

.mw .mw-card__price ins {
	background: none;
	color: var(--mw-sale);
	text-decoration: none;
}

/* Add to cart. */
/* Bottom-aligned so every add-to-cart in a row sits on the same line, however
   many lines the titles above them run to. */
.mw .mw-card__cta {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: 4px;
}

/* The card CTA is the primary action on the whole grid, so it is sized and
   weighted to read as a button at a glance rather than as small print. */
.mw .mw-card__cta .button,
.mw .mw-card__cta .mw-btn {
	width: 100%;
	min-height: 44px;
	padding: 11px 18px;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* "Reveal on hover" still keeps the button legible at rest. Fading it to
   nothing hides the only call to action on the card, which reads as a broken
   grid -- especially on trackpads and touch-capable laptops where a hover may
   never happen. It de-emphasises, it does not disappear. */
.mw .mw-card__cta--hover {
	opacity: 0.72;
	transition: opacity var(--mw-dur-fast) var(--mw-ease), transform var(--mw-dur-fast) var(--mw-ease);
}

.mw .mw-card:hover .mw-card__cta--hover,
.mw .mw-card:focus-within .mw-card__cta--hover {
	opacity: 1;
	transform: none;
}

@media (hover: none), (max-width: 640px) {
	.mw .mw-card__cta--hover {
		opacity: 1;
		transform: none;
	}
}

/* Outline CTAs need a real border to be visible against the card.
   `mw-btn-outline` and `mw` are both body classes, so they compound. */
.mw-btn-outline.mw .mw-card__cta .button,
.mw-btn-outline.mw .mw-card__cta .mw-btn,
.mw .mw-card__cta .mw-btn--outline {
	border-color: var(--mw-text);
}

/* WooCommerce's own "View cart" link after an AJAX add. */
.mw .mw-card__cta .added_to_cart {
	display: block;
	margin-top: 6px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	text-align: center;
}

/* WooCommerce loading states on loop buttons. */
.mw .mw-card__cta .button.loading {
	opacity: 0.6;
	pointer-events: none;
}

.mw .mw-card__cta .button.added::after {
	content: none;
}

/* ==========================================================================
   3. Archive toolbar
   ========================================================================== */

.mw .mw-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--mw-border);
}

.mw .mw-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--mw-muted);
	font-size: 0.875rem;
}

.mw .mw-toolbar .woocommerce-ordering {
	margin: 0;
}

.mw .mw-toolbar select,
.mw .woocommerce-ordering select {
	min-height: 42px;
	padding: 8px 34px 8px 12px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-btn-radius);
	background-color: var(--mw-background);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 0.875rem;
	appearance: none;
	cursor: pointer;
}

/* Shop page header. */
.mw-shop .woocommerce-products-header {
	margin-bottom: clamp(20px, 4vw, 40px);
}

.mw-shop .woocommerce-products-header__title {
	font-family: var(--mw-font-heading);
	letter-spacing: var(--mw-tracking);
}

.mw-shop .term-description {
	max-width: 62ch;
	color: var(--mw-muted);
}

/* ==========================================================================
   4. Pagination / load more
   ========================================================================== */

.mw .woocommerce-pagination,
.mw .mw-pagination {
	margin-top: clamp(28px, 4vw, 48px);
}

.mw .woocommerce-pagination ul,
.mw .mw-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.mw .woocommerce-pagination ul li,
.mw .mw-pagination ul li {
	border: 0;
	margin: 0;
}

.mw .woocommerce-pagination .page-numbers,
.mw .mw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: var(--mw-btn-radius);
	color: var(--mw-muted);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color var(--mw-dur-fast) var(--mw-ease), color var(--mw-dur-fast) var(--mw-ease);
}

.mw .woocommerce-pagination .page-numbers:hover,
.mw .mw-pagination .page-numbers:hover {
	border-color: var(--mw-border);
	color: var(--mw-text);
	background: transparent;
}

.mw .woocommerce-pagination .page-numbers.current,
.mw .mw-pagination .page-numbers.current {
	border-color: var(--mw-primary);
	background: transparent;
	color: var(--mw-text);
	font-weight: 600;
}

.mw .mw-loadmore {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 4vw, 48px);
}

.mw .mw-loadmore[data-mode="infinite"] .mw-btn {
	visibility: hidden;
}

.mw .mw-loadmore.is-done {
	display: none;
}

/* ==========================================================================
   5. Filters
   ========================================================================== */

.mw .mw-filters {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mw .mw-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mw .mw-filters__title {
	margin: 0;
	font-family: var(--mw-font-heading);
	font-size: 1rem;
	font-weight: 600;
}

.mw .mw-filters__reset {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mw .mw-filters__group {
	margin: 0;
	padding: 0 0 20px;
	border: 0;
	border-bottom: 1px solid var(--mw-border);
}

.mw .mw-filters__group:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.mw .mw-filters__legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--mw-text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mw .mw-filters__options {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 240px;
	overflow-y: auto;
}

.mw .mw-filters__price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mw .mw-filters__dash {
	color: var(--mw-muted);
}

.mw .mw-filters.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Two-column shop layout when filters are placed beside the grid. */
.mw .mw-shoplayout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 900px) {
	.mw .mw-shoplayout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mw .mw-grid.is-busy {
	opacity: 0.5;
	transition: opacity var(--mw-dur-fast) var(--mw-ease);
}

/* ==========================================================================
   6. Collections (shortcodes / blocks)
   ========================================================================== */

.mw .mw-collection {
	margin-block: var(--mw-section-space);
}

.mw .mw-collection__head {
	margin-bottom: clamp(20px, 3vw, 32px);
}

.mw .mw-collection__title {
	margin: 0 0 6px;
	font-family: var(--mw-font-heading);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 600;
	letter-spacing: var(--mw-tracking);
}

.mw .mw-collection__sub {
	margin: 0;
	max-width: 60ch;
	color: var(--mw-muted);
}

/* Carousel. */
.mw .mw-carousel {
	position: relative;
}

/* Qualified with `ul.products` because the base grid rule matches this element
   through `.mw ul.products` (0,2,1), which outranks a plain
   `.mw .mw-grid--carousel` (0,2,0). Without the extra weight the explicit
   column tracks survive and the first N items collapse to zero width — the
   first four products in the carousel simply vanish. */
.mw ul.products.mw-grid--carousel,
.mw .mw-grid--carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mw-cols) - 1) * var(--mw-grid-gap)) / var(--mw-cols));
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.mw .mw-grid--carousel::-webkit-scrollbar {
	display: none;
}

.mw .mw-grid--carousel > li {
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.mw ul.products.mw-grid--carousel,
	.mw .mw-grid--carousel {
		grid-template-columns: none;
		grid-auto-columns: calc((100% - (var(--mw-cols-tablet) - 1) * var(--mw-grid-gap-sm)) / var(--mw-cols-tablet));
	}
}

@media (max-width: 640px) {
	.mw ul.products.mw-grid--carousel,
	.mw .mw-grid--carousel {
		grid-template-columns: none;
		grid-auto-columns: 68%;
	}
}

.mw .mw-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 12px;
}

.mw .mw-carousel__nav .mw-iconbtn {
	border: 1px solid var(--mw-border);
}

.mw .mw-carousel__nav .mw-iconbtn[disabled] {
	opacity: 0.35;
	pointer-events: none;
}

/* ==========================================================================
   7. Category cards
   ========================================================================== */

.mw .mw-catgrid {
	display: grid;
	grid-template-columns: repeat(var(--mw-cols), minmax(0, 1fr));
	gap: var(--mw-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 900px) {
	.mw .mw-catgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mw-grid-gap-sm);
	}
}

.mw .mw-catcard__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--mw-text);
	text-decoration: none;
}

.mw .mw-catcard__media {
	display: block;
	overflow: hidden;
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
	aspect-ratio: 4/3;
}

.mw .mw-catcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--mw-ease);
}

.mw .mw-catcard__link:hover .mw-catcard__img {
	transform: scale(1.03);
}

.mw .mw-catcard__name {
	display: block;
	font-weight: 550;
	font-size: 0.9375rem;
}

.mw .mw-catcard__count {
	display: block;
	color: var(--mw-muted);
	font-size: 0.8125rem;
}

/* ==========================================================================
   8. Inline search form
   ========================================================================== */

.mw .mw-searchform {
	position: relative;
	display: flex;
	align-items: center;
}

.mw .mw-searchform__icon {
	position: absolute;
	left: 12px;
	color: var(--mw-muted);
	display: flex;
	pointer-events: none;
}

.mw .mw-searchform__input {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px 10px 40px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-btn-radius);
	background: var(--mw-background);
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 0.9375rem;
}

.mw .mw-searchform__input:focus {
	outline: none;
	border-color: var(--mw-primary);
	box-shadow: var(--mw-ring);
}

/* ==========================================================================
   9. Block-rendered product grids (Product Collection / Product Template)
   --------------------------------------------------------------------------
   Block themes render the shop archive with WooCommerce's own blocks. The
   plugin never injects its card there (see Compat::in_block_loop), and it must
   not touch layout either: WooCommerce's responsive grid derives its column
   count from its own `gap` and `grid-template-columns`, so overriding either
   silently changes how many products per row the merchant gets.

   Everything below is therefore surface polish only — colour, type, radius and
   one hover transform. No sizing, no spacing, no grid properties.
   ========================================================================== */

.mw .wc-block-product .wc-block-components-product-image {
	overflow: hidden;
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
}

.mw .wc-block-product .wc-block-components-product-image img {
	transition: transform 600ms var(--mw-ease);
}

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

.mw .wc-block-product .wp-block-post-title,
.mw .wc-block-product .wc-block-components-product-title {
	font-family: var(--mw-font-heading);
	font-weight: 550;
	letter-spacing: var(--mw-tracking);
}

.mw .wc-block-product .wp-block-post-title a,
.mw .wc-block-product .wc-block-components-product-title a {
	color: var(--mw-text);
	text-decoration: none;
}

.mw .wc-block-product .wc-block-components-product-price {
	font-weight: 550;
	font-variant-numeric: tabular-nums;
}

.mw .wc-block-product .wc-block-components-product-price del {
	color: var(--mw-muted);
	font-weight: 400;
}

.mw .wc-block-product .wc-block-components-product-price ins {
	background: none;
	color: var(--mw-sale);
	text-decoration: none;
}

.mw .wc-block-product .wc-block-components-product-sale-badge {
	border: 0;
	border-radius: var(--mw-radius-sm);
	background: var(--mw-sale);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mw .wc-block-product .wc-block-components-product-button .wp-block-button__link {
	border-radius: var(--mw-btn-radius);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-family: var(--mw-font);
	font-weight: 550;
}

@media (prefers-reduced-motion: reduce) {
	.mw .wc-block-product .wc-block-components-product-image img {
		transition: none;
	}
}

/* ==========================================================================
   10. Third-party card actions (wishlist / compare)
   --------------------------------------------------------------------------
   Wishlist and compare plugins hook the standard loop actions, so their
   buttons land inside our card. Their default styling is a full-width themed
   button, which in a minimal card reads as two heavy black slabs under the
   price. These rules only calm them down inside `.mw-card` — the buttons keep
   their own markup, classes and behaviour, and are untouched everywhere else.
   ========================================================================== */

.mw .mw-card__body .woosc-btn,
.mw .mw-card__body .woosw-btn,
.mw .mw-card__body .yith-wcwl-add-to-wishlist,
.mw .mw-card__body .tinvwl_add_to_wishlist_button,
.mw .mw-card__body .compare {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mw-muted);
	font-family: var(--mw-font);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--mw-dur-fast) var(--mw-ease);
}

.mw .mw-card__body .woosc-btn:hover,
.mw .mw-card__body .woosw-btn:hover,
.mw .mw-card__body .yith-wcwl-add-to-wishlist:hover,
.mw .mw-card__body .tinvwl_add_to_wishlist_button:hover,
.mw .mw-card__body .compare:hover {
	background: none;
	color: var(--mw-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sit them on one quiet row rather than stacking full width. */
.mw .mw-card__body {
	position: relative;
}

.mw .mw-card__body > .woosc-btn,
.mw .mw-card__body > .woosw-btn {
	align-self: flex-start;
}

.mw .mw-card--center .mw-card__body > .woosc-btn,
.mw .mw-card--center .mw-card__body > .woosw-btn {
	align-self: center;
}