/**
 * MeasureMade — WooCommerce styling (original, written for this theme).
 *
 * Covers the catalog grid, product cards, the single-product parity
 * layout (centred head, full-width gallery, Options/Description split), price
 * and sale styling, notices, and the shop toolbar with its Filter
 * button. Plugin-owned UI (configurator canvas, attribute swatches,
 * gallery enhancements, form add-ons, advanced reviews) brings its own
 * stylesheets; nothing here targets their internals beyond layout.
 */

/* Catalog layout ---------------------------------------------------------- */

.woocommerce .measuremade-shop-toolbar {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	margin-bottom: 1.2em;
}

.woocommerce .measuremade-shop-toolbar .woocommerce-result-count {
	margin: 0;
	float: none;
}

.woocommerce .measuremade-shop-toolbar .woocommerce-ordering {
	margin: 0 0 0 auto;
	float: none;
}

.woocommerce .measuremade-filter-toggle {
	margin: 0;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.8em 1.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce core's float-era clearfix must not generate boxes
   in this grid (fix round 30 — the phantom first shop cell).
   woocommerce-layout.css, which the theme does not dequeue,
   still carries the classic float clearfix
   .woocommerce ul.products::before/::after
   { content: " "; display: table } (plus clear: both on
   ::after). In core's float layout those boxes are invisible.
   In this CSS grid a generated box is a grid item: ::before
   auto-placed into the first cell of row 1 and pushed every
   product one cell along — an empty top-left cell on /shop/
   that is not a product, not in the query, and carries no card
   styling (the white-card rule targets li.product elements
   only), so it read as bare page background. ::after trailed
   the last product the same way, hidden among the row's
   natural empty cells. Neither pseudo has a job in a grid —
   there are no floats to clear — so no box is generated at
   all and the list holds only product items. Same selector
   shape as core's own rule; this sheet prints later. */
.woocommerce ul.products::before {
	content: none;
}

.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	text-align: center;
}

/* WooCommerce core's float-era catalog widths must never size a
   card in this grid (fix round 27). The theme dequeues none of
   core's stylesheets, and core's rules —
   .woocommerce ul.products.columns-N li.product { width: 30.75% }
   in woocommerce-layout.css and the <=768px
   ul.products[class*=columns-] li.product { width: 48% } in
   woocommerce-smallscreen.css — are MORE specific (0,4,2) than
   the width:auto reset above (0,3,2), so they silently clamped
   every card to a fraction of its grid track: skinny one-word-
   per-line strips on the shop page, half-width cards at phone
   widths, dead space beside every card. This selector matches
   core's own specificity and prints later, so the card always
   fills its track. */
.woocommerce ul.products[class*="columns-"] li.product {
	float: none;
	width: auto;
	margin: 0;
}

/* Card internals are a flex column (fix round 27): the product
   link stretches, the image sits in a uniform aspect box, and
   the price is pinned to the card's bottom edge, so prices and
   buttons share one baseline across a row no matter how many
   lines a title wraps to or whether a rating is present. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.woocommerce ul.products li.product a {
	color: var(--measuremade-ink);
}

.woocommerce ul.products li.product a:hover {
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	padding: 0.4em 0 0.1em;
}

.woocommerce ul.products li.product .price {
	color: var(--measuremade-ink);
	font-weight: 700;
	font-size: 0.98rem;
	margin-top: auto;
	padding-top: 0.35em;
}

.woocommerce ul.products li.product .button {
	margin-top: 0.6em;
	white-space: nowrap;
}

/* Loop star rating centred on its line (fix round 33): the card
   centres its title and price, but WooCommerce's .star-rating is
   a fixed-width (5.4em) overflow-hidden box, so text-align alone
   never moved it and the stars sat at the card's left edge. Auto
   inline margins centre the box itself — inside the flex-column
   product link they centre it as a flex item. The same rule
   centres the theme's empty-star placeholder for unrated
   products, which is the same .star-rating box at 0% fill, so
   rated and unrated cards carry the identical star row in the
   identical place. */
.woocommerce ul.products li.product .star-rating {
	margin-inline: auto;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--measuremade-sale);
	color: #ffffff;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	line-height: 1.3;
	padding: 0.3em 0.8em;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	top: 0.6em;
	left: 0.6em;
	right: auto;
}

/* Launch mode "Sold out" loop badge (fix round 34): printed by
   the plugin (MM_Launch::loop_badge) on the loop item title hook
   while launch mode is on. Same pill metrics as the sale flash,
   in ink rather than sale red — sold out is a state, not an
   offer — and in the opposite corner, so the two badges can
   never collide on a card that carries both. */
.woocommerce ul.products li.product .mm-launch-badge {
	position: absolute;
	background: var(--measuremade-ink);
	color: #ffffff;
	border-radius: 999px;
	line-height: 1.3;
	padding: 0.3em 0.8em;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	top: 0.6em;
	right: 0.6em;
	left: auto;
	z-index: 2;
}

.woocommerce .price del {
	color: var(--measuremade-muted);
	font-weight: 400;
}

.woocommerce .price ins {
	background: none;
	color: var(--measuremade-sale);
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 2em;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0 2px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--measuremade-line);
	border-radius: var(--measuremade-radius);
	padding: 0.45em 0.8em;
	color: var(--measuremade-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--measuremade-primary);
	border-color: var(--measuremade-primary);
	color: #ffffff;
}

/* Single product — parity layout -------------------------------------------
   Centred head (breadcrumbs + title), full-width gallery row, then the
   Options / Description two-column split (see content-single-product.php).
   Brand primary is the shared token --measuremade-primary (#bb5c80). */

.woocommerce div.product {
	position: relative;
}

.mm-product-head {
	text-align: center;
	padding-top: var(--measuremade-space-6, 2rem);
	margin-bottom: var(--measuremade-space-5, 1.5rem);
}

.mm-product-head .woocommerce-breadcrumb {
	text-align: center;
	margin-bottom: var(--measuremade-space-3, 0.75rem);
}

.woocommerce div.product .mm-product-head .product_title {
	/* Centring is declared on the title itself, not inherited from
	   .mm-product-head: any element-level text-align rule on the h1
	   from another stylesheet on the stack silently defeats the
	   inherited value (staging fix pass, item 4). */
	text-align: center;
	font-size: 1.9rem;
	text-transform: uppercase;
	margin-bottom: 0;
}

.mm-product-gallery-row {
	margin-bottom: 2em;
}

.woocommerce div.product .mm-product-gallery-row div.images {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

.mm-product-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5em;
	clear: both;
}

.mm-product-column-heading {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1rem;
	border-bottom: 2px solid var(--measuremade-primary);
	padding-bottom: 0.4em;
	margin-bottom: 1em;
}

.mm-configurator-mount {
	min-width: 0;
}

/* PatternMade feature panel — the top entry point to the measuring
 * overlay, printed directly under the price in the Options column on
 * MeasureMade-configurable product pages (content-single-product.php).
 * A brand-accented card so the integration reads as a headline feature
 * of the product; its button mirrors the configurator's own
 * .mm-patternmade-open pill so both entry points look like one action. */
.mm-patternmade-panel {
	display: grid;
	gap: 0.55em;
	border: 1px solid var(--measuremade-primary);
	border-left: 4px solid var(--measuremade-primary);
	border-radius: 12px;
	background: #fbf4f7;
	padding: 1em 1.1em;
	margin-bottom: 1.2em;
}

.mm-patternmade-panel-kicker {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--measuremade-primary);
}

.mm-patternmade-panel-text {
	margin: 0;
}

.mm-patternmade-panel-button {
	justify-self: start;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--measuremade-primary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mm-patternmade-panel-button:hover {
	filter: brightness(1.07);
}

.woocommerce div.product .product_title {
	font-size: 1.9rem;
	margin-bottom: 0.3em;
}

.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: 0.8em;
}

.woocommerce div.product .star-rating,
.woocommerce .star-rating {
	color: var(--measuremade-primary);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--measuremade-ink);
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 0.7em;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 1.2em;
}

.woocommerce div.product form.cart {
	margin-bottom: 1.4em;
}

.woocommerce div.product form.cart .button {
	float: none;
}

.woocommerce .quantity .qty {
	width: 4.2em;
	text-align: center;
	padding: 0.55em 0.3em;
}

.woocommerce div.product .product_meta {
	font-size: 0.88rem;
	color: var(--measuremade-muted);
	border-top: 1px solid var(--measuremade-line);
	padding-top: 1em;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 0.3em;
}

/* Variation form — the swatch plugin replaces the <select> elements it
   manages; the layout below keeps the fallback selects tidy. */
.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 1em;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 0.3em 0.6em 0.3em 0;
	vertical-align: middle;
	text-align: left;
}

/* Tabs, up-sells, related ----------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
	clear: both;
	padding-top: 1.5em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	text-align: center;
	padding: 0;
	margin: 0 0 1.4em;
	border-bottom: 1px solid var(--measuremade-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 0.4em;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--measuremade-muted);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	padding: 0.7em 0.4em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--measuremade-primary);
	box-shadow: inset 0 -2px 0 var(--measuremade-primary);
}

.woocommerce .upsells,
.woocommerce .related {
	clear: both;
	padding-top: 1.5em;
}

.woocommerce .upsells > h2,
.woocommerce .related > h2 {
	text-align: center;
	margin-bottom: 1.2em;
}

/* Gallery — core Woo gallery with slider/zoom/lightbox supports on.
   The flex-viewport + thumbnail column give the vertical-thumbnail
   look the store uses; WooThumbs layers its own UI on top. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 0.6em;
	padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: 72px;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	opacity: 0.55;
	cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
}

/* Notices --------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--measuremade-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--measuremade-primary);
}

.woocommerce-error {
	border-top-color: var(--measuremade-alert);
}

/* Cart / checkout / account basics ---------------------------------------------- */

.woocommerce table.shop_table {
	border-color: var(--measuremade-line);
	border-radius: var(--measuremade-radius);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--measuremade-primary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--measuremade-primary-dark);
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--measuremade-line);
	padding: 0.5em 0;
}

/* Responsive ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		float: none;
		width: 100%;
	}

	.mm-product-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5em;
	}
}

@media (max-width: 520px) {
	/* Two columns at phone width (fix round 27). The one-column
	   rule squeezed nothing — it wasted the width: full-width
	   cards stacked into a long scroll of mostly-white image
	   boxes while the owner flagged dead space. Two columns at
	   a ~390px viewport give ~165px cards: titles wrap as
	   phrases (never one word per line), "ADD TO CART" fits on
	   one line, and the rhythm matches the homepage's two-up
	   browse grid. Gaps and card padding tighten at this size
	   so the width goes to the products, not the gutters. */
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1em 0.7em;
	}

	.woocommerce ul.products li.product {
		padding: 10px 10px 12px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.92rem;
	}

	.woocommerce ul.products li.product .price {
		font-size: 0.92rem;
	}

	.woocommerce ul.products li.product .button {
		padding-left: 0.6em;
		padding-right: 0.6em;
		font-size: 0.85rem;
	}
}

@media (max-width: 340px) {
	/* Below ~340px two columns would drop under ~145px per
	   card and titles would start squeezing again — one
	   full-width column is the floor. */
	.woocommerce ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Homepage "Browse products" row — the previous theme's product
   slider spec (2 visible, sales order ascending, no price, no
   rating, no add-to-cart, no quick view, zoom on hover, large
   titles), scoped to this section only so shop/category loops
   keep their full chrome. Rendered as a scroll-snap row in place
   of a JS slider: same visible spec, natively scrollable.
   Scoping note (fix round 4): selectors key off .measuremade-browse
   alone — the [products] shortcode injects its own .woocommerce
   wrapper INSIDE the section, so the old ".woocommerce
   .measuremade-browse" chain (browse inside woocommerce) never
   matched. Core price/rating/add-to-cart are now also suppressed
   at the template level (template-parts/front/browse-products.php
   unhooks them for the section's render); the display:none rules
   below remain as a backstop for plugin-injected extras such as
   quick view. */
.measuremade-browse ul.products {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1.9em;
	padding-bottom: 0.6em;
}

.measuremade-browse ul.products li.product {
	flex: 0 0 calc(50% - 0.95em);
	scroll-snap-align: start;
}

.measuremade-browse ul.products li.product .price,
.measuremade-browse ul.products li.product .star-rating,
.measuremade-browse ul.products li.product .button,
.measuremade-browse ul.products li.product .quick-view,
.measuremade-browse ul.products li.product a.quick-view-button {
	display: none;
}

.measuremade-browse ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.3rem;
	/* Pin the title to the card's bottom edge (fix round 27):
	   with the uniform image box above it and the row's cards
	   stretched to one height, a one-line title ("Snood") would
	   otherwise float mid-card with dead space beneath while a
	   two-line title sits at the bottom. margin-top:auto inside
	   the flex-column link puts every title on one baseline. */
	margin-top: auto;
}

.measuremade-browse ul.products li.product .woocommerce-LoopProduct-link {
	overflow: hidden;
}

.measuremade-browse ul.products li.product img {
	transition: transform 0.5s ease;
}

.measuremade-browse ul.products li.product:hover img {
	transform: scale(1.06);
}

@media (max-width: 700px) {
	.measuremade-browse ul.products li.product {
		flex-basis: 82%;
	}
}

/* ---------------------------------------------------------------------------
   Single product — the PatternMade look (configurable products only).

   Applied by woocommerce/content-single-product-patternmade.php, which
   the wc_get_template_part filter selects for MeasureMade-configurable
   products; every rule here is scoped to .mm-pm-product, so parity
   product pages are untouched. The look is defined in
   PRODUCT-PAGE-LOOK.md: full-bleed #f5f5f7 ground, a centred 820px
   stack of white cards (card 0 header + the configurator's cards,
   which the plugin styles), #0071e3 primary action, Description /
   Reviews as segmented tabs over a white card, and — at phone
   widths — the configurator's Total card fused with the add-to-cart
   button into a sticky bottom buy bar. Tokens mirror the
   PatternMade app's own stylesheet.
   --------------------------------------------------------------------------- */

.woocommerce div.product.mm-pm-product {
	--pm-bg: #f5f5f7;
	--pm-card: #ffffff;
	--pm-ink: #1d1d1f;
	--pm-grey: #6e6e73;
	--pm-accent: #0071e3;
	--pm-accent-dark: #0060c9;
	--pm-track: #e8e8ed;
	--pm-shadow: 0 2px 20px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .02);
	background: var(--pm-bg);
	color: var(--pm-ink);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
	/* Full-bleed ground: the product div spans the viewport while
	   the stack inside stays centred at content width. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 26px 20px 56px;
}

.mm-pm-stack {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	gap: 20px;
}

.mm-pm-crumbs .woocommerce-breadcrumb {
	margin: 0;
	padding: 0 6px;
	font-size: 13px;
	color: var(--pm-grey);
}

/* Card 0 — header. */
.mm-pm-head {
	position: relative;
	background: var(--pm-card);
	border-radius: 20px;
	box-shadow: var(--pm-shadow);
	padding: 28px;
}

.woocommerce div.product.mm-pm-product .mm-pm-head .product_title {
	font-size: clamp(26px, 4.5vw, 34px);
	line-height: 1.12;
	letter-spacing: -.025em;
	font-weight: 700;
	margin: 0 0 8px;
}

/* SKU line directly under the title (fix round 32): small and
   muted, in the breadcrumbs' scale. Renders only when the
   product has an SKU (the template guards it), so there is
   never an empty line. */
.woocommerce div.product.mm-pm-product .mm-pm-head .mm-pm-sku {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pm-grey);
}

/* Card 0's rating line centred (fix round 33): the whole rating
   — stars plus the review-count link — centres as one unit, the
   way the loop cards centre theirs. Core floats the star box
   left inside this wrapper, where auto margins are inert, so the
   wrapper becomes a centred flex row and the float comes off;
   the star box itself keeps core's dimensions. Title, SKU line,
   price and promise line keep their approved alignment — only
   the rating joins the centred treatment. Both look templates
   share this .mm-pm-head scope, so one rule serves both. */
.woocommerce div.product.mm-pm-product .mm-pm-head .woocommerce-product-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 6px;
}

.woocommerce div.product.mm-pm-product .mm-pm-head .woocommerce-product-rating .star-rating {
	float: none;
	margin: 0;
}

.woocommerce div.product.mm-pm-product .mm-pm-head span.onsale {
	left: auto;
	right: 18px;
	top: 18px;
}

.mm-pm-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 2px 0 10px;
}

.mm-pm-price-from {
	color: var(--pm-grey);
	font-size: 15px;
	font-weight: 500;
}

.woocommerce div.product.mm-pm-product .mm-pm-head p.price {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--pm-ink);
}

.woocommerce div.product.mm-pm-product .mm-pm-head .woocommerce-product-details__short-description {
	margin: 0;
	color: var(--pm-grey);
	font-size: 16px;
	line-height: 1.5;
}

.woocommerce div.product.mm-pm-product .mm-pm-head .woocommerce-product-details__short-description p {
	margin: 0;
}

/* Buy block — the configurator cards render inside this form. */
.woocommerce div.product.mm-pm-product .mm-pm-buy form.cart {
	display: grid;
	gap: 14px;
	margin: 0;
}

.woocommerce div.product.mm-pm-product form.cart .stock {
	margin: 0;
	text-align: center;
	color: var(--pm-grey);
	font-size: 14px;
}

.woocommerce div.product.mm-pm-product form.cart .quantity {
	justify-self: center;
	float: none;
	margin: 0;
}

.woocommerce div.product.mm-pm-product form.cart .single_add_to_cart_button {
	width: 100%;
	min-height: 54px;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--pm-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	float: none;
}

.woocommerce div.product.mm-pm-product form.cart .single_add_to_cart_button:hover {
	background: var(--pm-accent-dark);
}

/* Sharing under the buy block. (The product meta block no
   longer renders on look pages — fix round 32 moved the SKU
   into Card 0 and dropped categories/tags from the page.) */
.woocommerce div.product.mm-pm-product .mm-pm-meta .wc-social-sharing {
	padding: 0 6px;
}

/* Below the stack — tabs as a segmented control over a white card;
   upsells / related aligned to the same measure. */
.woocommerce div.product.mm-pm-product .woocommerce-tabs,
.woocommerce div.product.mm-pm-product .upsells,
.woocommerce div.product.mm-pm-product .related {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce div.product.mm-pm-product .woocommerce-tabs {
	padding-top: 24px;
}

.woocommerce div.product.mm-pm-product .woocommerce-tabs ul.tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 18px;
	padding: 4px;
	background: var(--pm-track);
	border: 0;
	border-radius: 999px;
}

.woocommerce div.product.mm-pm-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	background: none;
}

.woocommerce div.product.mm-pm-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 9px 18px;
	border-radius: 999px;
	color: var(--pm-grey);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce div.product.mm-pm-product .woocommerce-tabs ul.tabs li.active a {
	background: #fff;
	color: var(--pm-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.woocommerce div.product.mm-pm-product .woocommerce-Tabs-panel {
	background: var(--pm-card);
	border-radius: 20px;
	box-shadow: var(--pm-shadow);
	padding: 28px;
	margin: 0;
}

/* Phone widths — sticky bottom buy bar: the configurator's Total
   card pins to the viewport bottom as a blurred bar showing just
   the total, and the add-to-cart button (a sibling inside the same
   form) pins beside it. The card stays in normal flow on desktop.
   Caveat: position:fixed anchors to the viewport only while no
   ancestor carries a transform/filter — none does in this theme's
   content chain; staging is the smoke test. */
@media (max-width: 720px) {
	.woocommerce div.product.mm-pm-product {
		padding-bottom: 118px;
	}

	.woocommerce div.product.mm-pm-product .mm-card-total {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: block;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .88);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
		border-radius: 0;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
	}

	.woocommerce div.product.mm-pm-product .mm-card-total .mm-card-title,
	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-rows,
	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-hint {
		display: none;
	}

	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-total {
		background: transparent;
		color: var(--pm-ink);
		margin: 0;
		padding: 8px 188px 8px 2px;
		border-radius: 0;
		font-size: 15px;
	}

	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-total strong {
		font-size: 20px;
	}

	.woocommerce div.product.mm-pm-product form.cart .single_add_to_cart_button {
		position: fixed;
		right: 16px;
		bottom: calc(14px + env(safe-area-inset-bottom));
		z-index: 901;
		width: auto;
		min-width: 168px;
		min-height: 50px;
		box-shadow: 0 4px 16px rgba(0, 113, 227, .28);
	}
}

/* ---------------------------------------------------------------------------
   Single product — the PatternMade look for standard products
   (fix round 22).

   Applied by woocommerce/content-single-product-look.php, which the
   wc_get_template_part filter selects for every product that is not
   MeasureMade-configurable (the owner approved propagating the look
   to all products, 2026-11-04). The wrapper carries .mm-pm-product,
   so the ground, stack, Card 0, tabs, meta and buy-button rules
   above apply unchanged; everything below is scoped to
   .mm-pm-standard and covers only what a standard product adds:
   the card surface, the contained gallery, and the Total row.
   --------------------------------------------------------------------------- */

/* Card surface shared by the standard template's cards. */
.mm-pm-card {
	background: var(--pm-card);
	border-radius: 20px;
	box-shadow: var(--pm-shadow);
	padding: 26px 28px;
}

/* Image card — the gallery at card size, never a hero: the gallery
   column WooCommerce normally floats at half width is centred and
   capped at the look's 420px contained-visual measure, with the
   thumbnail strip as a row inside the card. */
.woocommerce div.product.mm-pm-standard .mm-pm-media .woocommerce-product-gallery {
	float: none;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.woocommerce div.product.mm-pm-standard .mm-pm-media .woocommerce-product-gallery figure {
	margin: 0;
}

.woocommerce div.product.mm-pm-standard .mm-pm-media .woocommerce-product-gallery img {
	border-radius: 16px;
}

.woocommerce div.product.mm-pm-standard .mm-pm-media .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}

.woocommerce div.product.mm-pm-standard .mm-pm-media .flex-control-thumbs li {
	float: none;
	width: 64px;
	margin: 0;
}

.woocommerce div.product.mm-pm-standard .mm-pm-media .flex-control-thumbs img {
	border-radius: 10px;
}

/* Buy card — the add-to-cart form keeps WooCommerce's own layout
   inside the form (variation table included); the shared
   .mm-pm-buy form rules above centre the stock line, quantity and
   button. The Total row mirrors the configurator's dark total
   bar (plugin .mm-price-total): ink surface, white text, the
   value right-aligned. */
.woocommerce div.product.mm-pm-standard .mm-pm-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--pm-ink);
	color: #fff;
	border-radius: 14px;
	font-size: 16px;
}

.woocommerce div.product.mm-pm-standard .mm-pm-total strong {
	font-size: 22px;
	font-weight: 700;
}

/* Phone widths — the Total row pins as the sticky buy bar, with
   the same blurred treatment and button clearance as the
   configurator's Total card above; the add-to-cart button itself
   is pinned by the shared .mm-pm-product rule in that block. */
@media (max-width: 720px) {
	.woocommerce div.product.mm-pm-standard .mm-pm-total {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		margin: 0;
		padding: 16px 188px calc(16px + env(safe-area-inset-bottom)) 18px;
		background: rgba(255, 255, 255, .88);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
		border-radius: 0;
		box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
		color: var(--pm-ink);
		font-size: 15px;
	}

	.woocommerce div.product.mm-pm-standard .mm-pm-total strong {
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------------
   Catalog archives in the look (fix round 22): the shop and
   product-category/tag archives sit on the #f5f5f7 ground inside
   the theme's centred measure, and loop products are white cards.
   Display only — prices, ordering and the loop hooks are
   untouched. The same tile card serves the homepage browse row
   (ul.products is shared markup) and product-page upsells /
   related rows.
   --------------------------------------------------------------------------- */

body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary {
	background: #f5f5f7;
}

body.post-type-archive-product #main,
body.tax-product_cat #main,
body.tax-product_tag #main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 26px 20px 56px;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
	color: #1d1d1f;
}

.woocommerce ul.products li.product {
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .02);
	padding: 14px 14px 18px;
	display: flex;
	flex-direction: column;
}

/* One uniform image box in every loop context (fix round 27):
   the catalog mixes square product photography with the
   components' 768x632 renders, and left at natural size the
   images ended at different heights, so the titles under them
   landed on different baselines. A fixed 5/4 box with the
   image contained on the card's white ground gives every card
   the same image footprint — nothing is cropped. */
.woocommerce ul.products li.product img {
	border-radius: 12px;
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: contain;
	background: #ffffff;
}