/**
 * 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), deep-rose 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: var(--measuremade-action);
	--pm-accent-dark: var(--measuremade-action-dark);
	--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;
	/* Ground: the product div spans its container while the stack
	   inside stays centred at content width. Fix round 65 retired
	   the old viewport-width + negative-margin breakout: a vw-based
	   width includes the scrollbar width and the negative margins
	   assume a perfectly centred parent, so on phones the ground
	   could land wider than the screen and drag the whole page into
	   horizontal overflow. A percentage width cannot exceed the
	   container, so it cannot widen the page. */
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	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;
	text-align: center;
	margin: 0 0 8px;
}

/* Meta row (fix round 41): the SKU and the rating share ONE
   centred line directly under the centred title, replacing
   round 32's standalone SKU line and round 33's separate
   rating line. The row is a centred flex unit; the template
   renders it only when at least one of its items exists, so
   there is never an empty line. The SKU keeps round 32's
   treatment — small (13px) and muted, in the breadcrumbs'
   scale — and renders only when the product has one (the
   template guards it by WooCommerce's own SKU rules). */
.woocommerce div.product.mm-pm-product .mm-pm-head .mm-pm-metarow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 8px;
}

.woocommerce div.product.mm-pm-product .mm-pm-head .mm-pm-metarow .mm-pm-sku {
	font-size: 13px;
	line-height: 1.45;
	color: var(--pm-grey);
}

.woocommerce div.product.mm-pm-product .mm-pm-head .mm-pm-metarow .mm-pm-metarow-sep {
	font-size: 13px;
	line-height: 1.45;
	color: var(--pm-grey);
}

/* Card 0's rating inside the meta row (fix rounds 33 + 41):
   the rating — stars plus the review-count link — stays
   grouped as one unit; round 33 centred it as its own line,
   round 41 moves it into the shared meta row, whose flex
   centring now centres the whole row. Core floats the star
   box left inside this wrapper, where auto margins are
   inert, so the wrapper is a flex row and the float comes
   off; the star box itself keeps core's dimensions. 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;
}

.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.

   Fix round 62 — the bar's two fixed layers are now sized as ONE
   budget. The button is the form's own .single_add_to_cart_button
   in both modes (launch mode changes only its label, via the
   plugin's woocommerce_product_single_add_to_cart_text filter,
   plus a JS-added .mm-disabled fade until the configuration
   prices — the element, and this rule's match, never change).
   The old numbers coupled three independent widths: the button
   was width:auto (its label's max-content, uncapped), the Total
   reserved a hard-coded 188px for it, and the button carried a
   168px min-width — a chain that only just closed for the short
   "Add to cart" label (168 + 16 offset + 4px slack). The launch
   label "Save this configuration" runs ~260px of max-content at
   this size (uppercase + letter-spacing from style.css's generic
   button rule, never reset here), ~75px past the reserve, and
   with the two layers in independent fixed boxes and no shared
   layout to arbitrate, the excess ran off the bar's right edge —
   the owner's phone showed the button clipped mid-label at the
   viewport edge. Construction now: the button's width is capped
   relative to the viewport, its label may wrap to two lines, the
   168px floor is gone, and the Total's right reserve is the SAME
   cap plus the offset and a gap, so total + button fit at every
   width by arithmetic. A ≤480px step after the standard-product
   block tightens both sides once more. */
@media (max-width: 720px) {
	.woocommerce div.product.mm-pm-product {
		padding-bottom: 136px;
	}

	.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 calc(min(48vw, 264px) + 28px) 8px 2px;
		border-radius: 0;
		font-size: 14px;
		gap: .5rem;
	}

	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-total strong {
		font-size: 18px;
		white-space: nowrap;
	}

	.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: 0;
		max-width: min(48vw, 264px);
		min-height: 50px;
		padding: 12px 20px;
		font-size: 15px;
		line-height: 1.3;
		white-space: normal;
		text-align: center;
		box-shadow: 0 4px 16px rgba(156, 61, 99, .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. The
   right reserve follows the round-62 budget (the button's capped
   width + its offset + a gap), not the old fixed 188px. */
@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 calc(min(48vw, 264px) + 28px) 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;
	}
}

/* Narrow phones (fix round 62): below 480px the buy-bar budget
   tightens once more — the button caps at 42vw with a smaller
   face, so its two-line worst case (the launch-mode "Save this
   configuration") still fits beside the total, and both bars'
   reserves follow the same cap. */
@media (max-width: 480px) {
	.woocommerce div.product.mm-pm-product form.cart .single_add_to_cart_button {
		max-width: 42vw;
		padding: 10px 14px;
		font-size: 14px;
	}

	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-total {
		padding-right: calc(42vw + 28px);
		font-size: 13px;
	}

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

	.woocommerce div.product.mm-pm-standard .mm-pm-total {
		padding-right: calc(42vw + 28px);
	}
}

/* The narrowest phones (fix round 62): one more step down so the
   total row and the button's longest word still fit whole. */
@media (max-width: 380px) {
	.woocommerce div.product.mm-pm-product form.cart .single_add_to_cart_button {
		font-size: 13px;
	}

	.woocommerce div.product.mm-pm-product .mm-card-total .mm-price-total {
		font-size: 12px;
		gap: .4rem;
	}

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

/* ---------------------------------------------------------------------------
   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;
}

/* Cart line thumbnails at phone width (fix round 40):
   WooCommerce core's woocommerce-smallscreen.css hides the
   classic cart's thumbnail cell outright at <= 768px —
   ".woocommerce table.cart .product-thumbnail { display:
   none }" — long-standing core behaviour, live on this stack
   (the sheet is enqueued, never dequeued by this theme). The
   cell IS printed by core's cart template and the MeasureMade
   plugin fills it with the configured line's own image (the
   Griffin neck/body composite, a component's recoloured
   render, or the default product image), but on a phone the
   whole cell was display:none, so configured cart lines
   showed no image at all. Every earlier staging proof of the
   cart composites ran at desktop width, where the core rule
   does not apply — which is why this survived to the owner's
   phone. Restore the cell inside core's own breakpoint: a
   block like its sibling stacked cells (the extra .shop_table
   class lifts specificity past core's hide rule regardless of
   print order), centred (the responsive table right-aligns
   cells, hence the !important), with the cell's empty
   data-title label suppressed (the thumbnail cell carries no
   data-title, so core's generic td::before would print a
   stray ": ") and the image capped at a thumbnail size.
   Desktop widths are untouched — core only hides the cell
   inside this breakpoint. Append this block verbatim to the
   END of measuremade/assets/css/woocommerce.css. */
@media (max-width: 768px) {
	.woocommerce table.shop_table.cart .product-thumbnail {
		display: block;
		text-align: center !important;
	}

	.woocommerce-page table.shop_table.cart .product-thumbnail {
		display: block;
		text-align: center !important;
	}

	.woocommerce table.shop_table.cart .product-thumbnail::before {
		display: none;
	}

	.woocommerce-page table.shop_table.cart .product-thumbnail::before {
		display: none;
	}

	.woocommerce table.shop_table.cart .product-thumbnail img {
		width: 120px;
		height: auto;
	}

	.woocommerce-page table.shop_table.cart .product-thumbnail img {
		width: 120px;
		height: auto;
	}
}

/* Card 0 title on ONE line at phone widths (fix round 41,
   owner 2026-11-05: "we don't want the word coat on a
   separate line by itself"). At <=768px the title may not
   wrap, so it scales with the viewport instead. The vw
   coefficient is sized against the longest current product
   titles at 360px and 390px viewports — the Card 0 measure
   there is 264px / 294px (viewport minus the 20px page
   gutter and the card's 28px padding, each side) and the
   width model in FIXES round 41 puts the ceiling at ~18.2px
   / ~20.3px; 4.7vw lands ~16.9px at 360px and ~18.3px at
   390px, under both with slack to spare for the model's
   error bars. The 26px cap hands back to the base rule's
   size as soon as the viewport fits it; above 768px the
   base clamp is untouched, and the desktop title is not
   shrunk. No ellipsis, no overflow trick — the whole title
   always prints, on one line. */
@media (max-width: 768px) {
	.woocommerce div.product.mm-pm-product .mm-pm-head .product_title {
		white-space: nowrap;
		font-size: clamp(15px, 4.7vw, 26px);
	}
}

/* ---------------------------------------------------------------------------
   Cart + checkout — the Apple treatment (fix round 62, owner
   directive 2026-11-06: "the checkout section needs the same
   treatment for the apple aesthetic. Rounded buttons, clean and
   minimalistic").

   CSS only — no template, markup or behaviour changes. EVERY
   selector is scoped under body.woocommerce-cart or
   body.woocommerce-checkout, so shop, product and account pages
   cannot be affected. Values are the site's own Apple-look
   tokens from style.css's :root block — --mm-site-card /
   --mm-site-radius / --mm-site-shadow are the same card recipe
   as the product pages' --pm-* tokens (the --pm-* set is scoped
   to the product wrapper and does not resolve here), and the
   primary action is the shared deep rose (--measuremade-action
   / --measuremade-action-dark). The #f5f5f7 ground already
   comes from the site layer (.site-content carries
   --mm-site-bg on these pages); it is re-asserted on the body
   scope so the two pages keep it regardless.
   --------------------------------------------------------------------------- */

body.woocommerce-cart,
body.woocommerce-checkout {
	background: var(--mm-site-bg);
}

/* The blocks become the product pages' white cards. */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart_totals {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
}

body.woocommerce-checkout #customer_details {
	display: flow-root;
	padding: 28px;
	margin-bottom: 20px;
}

body.woocommerce-checkout #order_review {
	padding: 28px;
}

body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login {
	border: 0;
	padding: 22px 28px;
	margin: 0 0 20px;
	text-align: left;
}

body.woocommerce-cart .woocommerce-cart-form {
	padding: 12px 28px 28px;
	margin-bottom: 20px;
}

body.woocommerce-cart .cart_totals {
	padding: 28px;
}

/* Headings inside the cards: quiet ink, no Woo defaults. */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-cart .cart_totals h2,
body.woocommerce-cart .cross-sells h2 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mm-site-ink);
}

body.woocommerce-checkout #customer_details h3 {
	margin: 0 0 14px;
}

body.woocommerce-checkout #order_review_heading {
	margin: 6px 0 12px;
	padding: 0 4px;
}

body.woocommerce-cart .cart_totals h2 {
	margin: 0 0 10px;
}

/* Fields: 12px radius, hairline border, deep-rose focus ring;
   labels quiet. (The shipping calculator's fields ride along.) */
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-cart .woocommerce form .form-row label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mm-site-ink);
}

body.woocommerce-checkout .woocommerce form .form-row .required,
body.woocommerce-cart .woocommerce form .form-row .required {
	color: var(--measuremade-alert);
	text-decoration: none;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea.input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-cart .woocommerce .coupon input.input-text,
body.woocommerce-cart .woocommerce .quantity .qty,
body.woocommerce-cart .shipping-calculator-form input.input-text,
body.woocommerce-cart .shipping-calculator-form select {
	border: 1px solid var(--mm-site-hair);
	border-radius: 12px;
	background: #fff;
	min-height: 48px;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--mm-site-ink);
	box-shadow: none;
}

body.woocommerce-cart .woocommerce .quantity .qty {
	width: 68px;
	text-align: center;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-cart .woocommerce .coupon input.input-text:focus,
body.woocommerce-cart .woocommerce .quantity .qty:focus,
body.woocommerce-cart .shipping-calculator-form input.input-text:focus,
body.woocommerce-cart .shipping-calculator-form select:focus {
	border-color: var(--measuremade-action);
	box-shadow: 0 0 0 3px rgba(156, 61, 99, .15);
	outline: none;
}

/* Select2 (country / state) in the same field system. */
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-cart .select2-container--default .select2-selection--single {
	border: 1px solid var(--mm-site-hair);
	border-radius: 12px;
	background: #fff;
	height: 48px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 14px;
	font-size: 15px;
	color: var(--mm-site-ink);
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
body.woocommerce-cart .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body.woocommerce-cart .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-cart .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--measuremade-action);
	box-shadow: 0 0 0 3px rgba(156, 61, 99, .15);
}

/* Tables: hairline row separators only — no heavy borders, no
   grey header bands; the totals row carries the emphasis. */
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
}

body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table th,
body.woocommerce-checkout .woocommerce table.shop_table td {
	border: 0;
	border-top: 1px solid var(--mm-site-track);
	padding: 14px 8px;
	vertical-align: middle;
}

body.woocommerce-cart .woocommerce table.shop_table thead th,
body.woocommerce-checkout .woocommerce table.shop_table thead th {
	border-top: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--mm-site-grey);
}

body.woocommerce-cart .woocommerce table.shop_table .product-name a,
body.woocommerce-checkout .woocommerce table.shop_table .product-name {
	color: var(--mm-site-ink);
	text-decoration: none;
}

body.woocommerce-cart .woocommerce table.shop_table .product-thumbnail img {
	border-radius: 12px;
}

/* Woo core colours the remove link red with !important; the
   quiet treatment needs the same weight to land. */
body.woocommerce-cart .woocommerce a.remove {
	background: var(--mm-site-bg);
	color: var(--mm-site-grey) !important;
}

body.woocommerce-cart .woocommerce a.remove:hover {
	background: #fff;
	color: var(--measuremade-action) !important;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-checkout #order_review tfoot th {
	font-weight: 500;
	color: var(--mm-site-grey);
	text-align: left;
}

body.woocommerce-cart .cart_totals table td,
body.woocommerce-checkout #order_review tfoot td {
	text-align: right;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td {
	border-top: 1px solid var(--mm-site-hair);
	font-size: 18px;
	font-weight: 700;
	color: var(--mm-site-ink);
}

/* Primary actions: full pill in the deep-rose action colour,
   full-width (place order stays in flow — pinned nowhere). */
body.woocommerce-checkout #payment #place_order,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	float: none;
	width: 100%;
	min-height: 52px;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--measuremade-action);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--measuremade-action-dark);
	color: #fff;
}

/* Secondary actions: quiet rounded ghost — apply coupon, update
   cart, the coupon/login form submits, the shipping calculator,
   notice buttons, return to shop. No boxy grey Woo defaults.
   (Product loop buttons keep their own treatment.) */
body.woocommerce-cart .woocommerce .button:not(.checkout-button):not(.add_to_cart_button),
body.woocommerce-checkout .woocommerce .button:not(#place_order) {
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--mm-site-hair);
	color: var(--measuremade-action);
	min-height: 48px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}

body.woocommerce-cart .woocommerce .button:not(.checkout-button):not(.add_to_cart_button):hover,
body.woocommerce-checkout .woocommerce .button:not(#place_order):hover {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--measuremade-action);
	color: var(--measuremade-action);
}

/* The payment panel sits inside the order-review card: methods
   separated by hairlines, the chosen method's box in the ground
   tone instead of Woo's grey. */
body.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-top: 22px;
}

body.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--mm-site-track);
	padding: 0 0 8px;
}

body.woocommerce-checkout #payment ul.payment_methods li {
	padding: 8px 0;
	line-height: 1.5;
}

body.woocommerce-checkout #payment div.payment_box {
	background: var(--mm-site-bg);
	border-radius: 12px;
	color: var(--mm-site-grey);
}

body.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--mm-site-bg);
}

body.woocommerce-checkout #payment .form-row.place-order {
	padding: 18px 0 0;
	margin: 0;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 14px;
	color: var(--mm-site-grey);
}

/* Notices on these pages: soft tinted panels, rounded, with the
   icon carrying the meaning — no default Woo clash. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
	border: 0;
	border-radius: 12px;
	box-shadow: none;
	color: var(--mm-site-ink);
	padding: 14px 18px 14px 48px;
	margin-bottom: 18px;
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message {
	background: #fbf4f7;
}

body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info {
	background: var(--mm-site-bg);
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
	background: #fdf3f3;
}

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

body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before {
	color: var(--measuremade-alert);
}

/* The returning-customer and coupon toggles are not notices:
   strip the box, keep a minimal brand-pink text link. The forms
   they reveal are the cards at the top of this section. */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border-radius: 0;
	padding: 0;
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--mm-site-grey);
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--measuremade-primary);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
	text-decoration: underline;
}

/* Change-address / shipping-calculator links take the same
   minimal pink-link treatment. */
body.woocommerce-cart .shipping-calculator-button,
body.woocommerce-checkout .woocommerce-shipping-methods a {
	color: var(--measuremade-primary);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-cart .shipping-calculator-button:hover,
body.woocommerce-checkout .woocommerce-shipping-methods a:hover {
	text-decoration: underline;
}

/* Phone widths: single column, cards tighten to the standard
   page padding, the coupon row stacks. Place order remains a
   full-width in-flow button (see the primary rule above). */
@media (max-width: 720px) {
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout #order_review {
		padding: 20px;
	}

	body.woocommerce-checkout form.checkout_coupon,
	body.woocommerce-checkout form.woocommerce-form-login {
		padding: 18px 20px;
	}

	body.woocommerce-cart .woocommerce-cart-form {
		padding: 8px 16px 20px;
	}

	body.woocommerce-cart .cart_totals {
		padding: 20px;
	}

	body.woocommerce-cart .woocommerce table.shop_table th,
	body.woocommerce-cart .woocommerce table.shop_table td,
	body.woocommerce-checkout .woocommerce table.shop_table th,
	body.woocommerce-checkout .woocommerce table.shop_table td {
		padding: 12px 4px;
	}

	body.woocommerce-cart .woocommerce-cart-form td.actions .coupon {
		float: none;
		display: grid;
		gap: 10px;
		margin-bottom: 10px;
	}

	body.woocommerce-cart .woocommerce-cart-form td.actions .coupon .input-text {
		float: none;
		width: 100%;
		margin: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form td.actions .button {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Notices everywhere + My Account — the Apple treatment
   (fix round 64, owner directive 2026-11-06 with a phone
   screenshot of the My Account "Lost password" page: "All boxes
   need the same rounded corners for the apple aesthetic." The
   page's white card was correctly rounded, but the WooCommerce
   success notice inside it kept core's box — a heavy dark frame,
   tight corners and a contrasting 3px top stripe.)

   CSS only — no template, markup or behaviour changes. Two
   scopes, both Woo-only:
   1. Notices: .woocommerce / .woocommerce-page chains, which
      match Woo core's own selector weight and win on enqueue
      order — while staying BELOW round 62's body.woocommerce-
      cart / body.woocommerce-checkout rules (0,2,1), so the
      cart and checkout keep round 62's notice recipe exactly
      as shipped. Everywhere else (shop, product, account),
      notices take this round's recipe.
   2. My Account: body.woocommerce-account only — cart,
      checkout, shop and product pages cannot be affected.
   Values are the same site tokens round 62 used (--mm-site-*,
   --measuremade-action / -dark / -primary / -alert); the tints
   are soft literals in round 62's style (#fdf3f3 is its error
   tint verbatim).
   --------------------------------------------------------------------------- */

/* --- 1. Notices, site-wide ------------------------------------ */

/* One soft panel for all three: 16px radius, a single hairline
   frame (the shorthand also resets core's 3px coloured top
   stripe and the old border-top-color rule above), ink text.
   The 48px left padding keeps clearance for the ::before icon,
   as round 62's notice rule does. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;
	box-shadow: none;
	color: var(--mm-site-ink);
	font-size: 15px;
	line-height: 1.5;
	padding: 14px 18px 14px 48px;
}

/* Soft tints carry the meaning; the frame stays the hairline. */
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
	background: #f1f8ef;
}

.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
	background: var(--mm-site-bg);
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
	background: #fdf3f3;
}

/* Icons keep their accent colour: a green check on success
   (a readable deepening of --measuremade-success #81d742),
   brand pink on info, alert red on error. */
.woocommerce .woocommerce-message::before,
.woocommerce-page .woocommerce-message::before {
	color: #58913f;
}

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

.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-error::before {
	color: var(--measuremade-alert);
}

/* Links inside notices: brand pink, underline on hover. */
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-error a,
.woocommerce-page .woocommerce-message a,
.woocommerce-page .woocommerce-info a,
.woocommerce-page .woocommerce-error a {
	color: var(--measuremade-primary);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce .woocommerce-message a:hover,
.woocommerce .woocommerce-info a:hover,
.woocommerce .woocommerce-error a:hover,
.woocommerce-page .woocommerce-message a:hover,
.woocommerce-page .woocommerce-info a:hover,
.woocommerce-page .woocommerce-error a:hover {
	text-decoration: underline;
}

/* Notice buttons ("View cart", "Undo", …): small ghost pills,
   not core's boxy grey .button. Core floats them right; the
   float stays, the look changes. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-error .button {
	float: right;
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--mm-site-hair);
	color: var(--measuremade-action);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	padding: 7px 16px;
	margin: 0 0 4px 14px;
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-error .button:hover,
.woocommerce-page .woocommerce-message .button:hover,
.woocommerce-page .woocommerce-info .button:hover,
.woocommerce-page .woocommerce-error .button:hover {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--measuremade-action);
	color: var(--measuremade-action);
}

/* --- 2. My Account --------------------------------------------- */

body.woocommerce-account {
	background: var(--mm-site-bg);
}

/* Fields, matching round 62: 12px radius, hairline border,
   deep-rose focus ring; labels quiet. Covers login, register,
   lost / reset password, edit account and edit address — every
   account form rows its fields the same way. */
body.woocommerce-account .woocommerce form .form-row label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mm-site-ink);
}

body.woocommerce-account .woocommerce form .form-row .required {
	color: var(--measuremade-alert);
	text-decoration: none;
}

body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form .form-row textarea.input-text,
body.woocommerce-account .woocommerce form .form-row select {
	border: 1px solid var(--mm-site-hair);
	border-radius: 12px;
	background: #fff;
	min-height: 48px;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--mm-site-ink);
	box-shadow: none;
}

body.woocommerce-account .woocommerce form .form-row input.input-text:focus,
body.woocommerce-account .woocommerce form .form-row textarea.input-text:focus,
body.woocommerce-account .woocommerce form .form-row select:focus {
	border-color: var(--measuremade-action);
	box-shadow: 0 0 0 3px rgba(156, 61, 99, .15);
	outline: none;
}

/* Select2 (country / state on the address form) rides along,
   same recipe as round 62. */
body.woocommerce-account .select2-container--default .select2-selection--single {
	border: 1px solid var(--mm-site-hair);
	border-radius: 12px;
	background: #fff;
	height: 48px;
}

body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 14px;
	font-size: 15px;
	color: var(--mm-site-ink);
}

body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

body.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--measuremade-action);
	box-shadow: 0 0 0 3px rgba(156, 61, 99, .15);
}

/* Primary submits: deep-rose pills (login, register, save
   address / account, password resets). .button.alt is included
   because the old basics rule above paints .alt brand pink —
   on account pages the action colour wins. The site layer's
   uppercase + letter-spacing on generic buttons is reset, as
   round 62 resets it. */
body.woocommerce-account .woocommerce button[type="submit"].button,
body.woocommerce-account .woocommerce input[type="submit"].button,
body.woocommerce-account .woocommerce .button.alt {
	display: inline-block;
	min-height: 50px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--measuremade-action);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

body.woocommerce-account .woocommerce button[type="submit"].button:hover,
body.woocommerce-account .woocommerce input[type="submit"].button:hover,
body.woocommerce-account .woocommerce .button.alt:hover {
	background: var(--measuremade-action-dark);
	color: #fff;
}

/* Secondary link-buttons (View order, downloads, pagination):
   compact ghost pills. */
body.woocommerce-account .woocommerce a.button:not(.alt) {
	display: inline-block;
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--mm-site-hair);
	color: var(--measuremade-action);
	min-height: 40px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}

body.woocommerce-account .woocommerce a.button:not(.alt):hover {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--measuremade-action);
	color: var(--measuremade-action);
}

/* "Lost your password?" and friends: minimal pink links. */
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text a {
	color: var(--measuremade-primary);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-LostPassword a:hover,
body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text a:hover {
	text-decoration: underline;
}

body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--mm-site-grey);
}

/* The account navigation as one clean white card: hairline row
   separators, ink links, the current endpoint in brand pink. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 10px 0;
	margin-bottom: 22px;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--mm-site-track);
	padding: 0;
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 22px;
	font-size: 15px;
	color: var(--mm-site-ink);
	text-decoration: none;
	box-shadow: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--measuremade-primary);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--measuremade-primary);
	font-weight: 600;
}

/* Orders / downloads tables: the table itself is the rounded
   card; rows separated by hairlines only, no header band. */
body.woocommerce-account .woocommerce table.shop_table {
	border: 0;
	border-radius: var(--mm-site-radius);
	background: var(--mm-site-card);
	box-shadow: var(--mm-site-shadow);
	margin-bottom: 22px;
}

body.woocommerce-account .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table td {
	border: 0;
	border-top: 1px solid var(--mm-site-track);
	padding: 14px 16px;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce table.shop_table thead th {
	border-top: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--mm-site-grey);
}

/* Address boxes ("Billing address" / "Shipping address"): white
   cards with a quiet header; the Edit link in brand pink. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 24px 26px;
}

body.woocommerce-account .woocommerce-Address .woocommerce-Address-title h3 {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mm-site-ink);
	margin: 0 0 10px;
}

body.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
	color: var(--measuremade-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit:hover {
	text-decoration: underline;
}

body.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--mm-site-ink);
}

/* Phone widths: the nav card stacks above the content (core
   handles the stacking); paddings tighten to the page rhythm. */
@media (max-width: 720px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 12px 18px;
	}

	body.woocommerce-account .woocommerce table.shop_table th,
	body.woocommerce-account .woocommerce table.shop_table td {
		padding: 12px;
	}

	body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
		padding: 20px;
	}
}