/**
 * M M Sanidaz — Single Product
 * ------------------------------------------------------------------
 * Gallery + buy box, then product information, then related products.
 * Markup: WooCommerce / OceanWP's own single-product templates plus the
 * pieces added in inc/single-product.php (price-row discount from MM
 * Sanidaz Core, size guide link + dialog, quantity buttons, highlights,
 * information sections). Interactions: assets/js/single-product.js.
 * Related Products are the Shop's own cards (product-card.css,
 * body.mmsc-cards) — only their grid is set here.
 *
 * Scope: everything targets `#content div.product` (the main product),
 * so OceanWP's quick-view modal — which also renders a div.product,
 * outside #content — is never affected. The ID also out-ranks OceanWP's
 * WooCommerce CSS and Customizer output (which load after this file)
 * without !important; the few !important declarations below each answer
 * a legacy Additional CSS rule that itself uses !important.
 *
 * Breakpoints: mobile ≤767px · tablet 768–1079px · desktop 1080px+
 * (1080 is where OceanWP's own single-product layout switches).
 */

/* =================================================================
   Page rhythm
   ================================================================= */

/* The fixed header is 88px tall on desktop over a body offset of 80px,
   and 103px from OceanWP's mobile-menu breakpoint (959px) down. OceanWP
   pads `#main #content-wrap` by 50px, hence the matching ID pair. */
body.single-product #main #content-wrap {
	padding-top: var(--mmsc-space-6);
	padding-bottom: var(--mmsc-space-8);
}

@media (max-width: 959px) {
	body.single-product #main #content-wrap {
		padding-top: 40px;
	}
}

body.single-product #content .woocommerce-notices-wrapper:empty {
	display: none;
}

/* The legacy OceanWP body weight for phones is 900 (Customizer
   typography, ≤480px), which turned every paragraph bold. Product-page
   body copy returns to the regular weight; headings keep their own. */
@media (max-width: 480px) {
	body.single-product {
		font-weight: 400;
	}
}

/* =================================================================
   Layout — gallery + buy box, then full-width sections
   ================================================================= */

/* The legacy Additional CSS gives every `.status-publish` element (so
   every published product) `margin-top: 80px !important` — the same rule
   product-card.css neutralises on cards. */
#content div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--mmsc-space-5);
	margin: 0;
	margin-top: 0 !important;
	max-width: 100%;
}

/* Every direct child spans full width by default — tabs, related
   products, and anything a plugin prints here — and only the gallery
   and summary are placed side by side, so nothing can land in (or push
   around) the two-column row. Found via live measurement: OceanWP's
   prev/next nav auto-placed into the first cell below 1080px and broke
   the tablet layout (that nav is now removed in inc/single-product.php). */
#content div.product > * {
	grid-column: 1 / -1;
	min-width: 0;
}

#content div.product > .clear-after-summary {
	display: none;
}

/* Single column: the row gap keeps the buy box close to the photo; the
   sections after it get more air. */
@media (max-width: 767px) {
	#content div.product > .mmsc-info {
		margin-top: var(--mmsc-space-4);
	}

	#content div.product > .related.products {
		margin-top: var(--mmsc-space-6);
	}
}

@media (min-width: 768px) {
	#content div.product {
		/* The buy box never drops below 300px, so size buttons and the
		   purchase row stay comfortable at 768px. */
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
		column-gap: var(--mmsc-space-6);
		row-gap: var(--mmsc-space-8);
		align-items: start;
	}

	#content div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
	}

	#content div.product > .summary {
		grid-column: 2;
		grid-row: 1;
	}

	#content div.product > .related.products {
		margin-top: 0;
	}
}

@media (min-width: 1080px) {
	#content div.product {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--mmsc-space-8);
	}
}

/* =================================================================
   Gallery — WooCommerce's own slider, zoom and lightbox, restyled
   ================================================================= */

#content div.product > .woocommerce-product-gallery {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mmsc-space-3);
	width: auto;
	margin: 0;
	float: none;
}

#content .woocommerce-product-gallery > .flex-viewport,
#content .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--mmsc-radius-md);
	background: var(--mmsc-color-border);
}

#content .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* Until WooCommerce's gallery script initialises (it moves the slides
   into .flex-viewport), only the first photo takes up space — otherwise
   every slide stacks into one tall invisible block (found via live
   measurement: ~3,100px for four photos) and the page jumps once the
   slider starts. */
#content .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}

/* WooCommerce hides the gallery (inline `opacity: 0`) until its script
   reveals it; without JavaScript that never happens. */
body.woocommerce-no-js #content .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* The product photography is 4:5 — shown uncropped at that ratio. */
#content .woocommerce-product-gallery__image > a > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Full-screen trigger — WooCommerce prints a 🔍 emoji inside it; the
   icon is drawn here instead so it matches the rest of the UI. */
#content .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--mmsc-space-3);
	right: var(--mmsc-space-3);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mmsc-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--mmsc-shadow-sm);
	color: var(--mmsc-color-text);
	font-size: 0;
	text-indent: 0;
	transition: background var(--mmsc-transition-fast);
}

#content .woocommerce-product-gallery__trigger > *,
#content .woocommerce-product-gallery__trigger::before,
#content .woocommerce-product-gallery__trigger::after {
	display: none;
}

#content .woocommerce-product-gallery__trigger {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2623' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px;
}

#content .woocommerce-product-gallery__trigger .screen-reader-text {
	display: block;
}

#content .woocommerce-product-gallery__trigger:hover {
	background-color: var(--mmsc-color-surface);
}

#content .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Thumbnails (built by WooCommerce's gallery script): a horizontal strip
   under the photo on mobile and tablet. */
#content .woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	gap: var(--mmsc-space-2);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

#content .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

#content .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 64px;
	width: 64px;
	margin: 0;
	padding: 0;
	float: none;
}

#content .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--mmsc-radius-sm);
	opacity: 0.5;
	cursor: pointer;
	transition: opacity var(--mmsc-transition-fast);
}

#content .woocommerce-product-gallery .flex-control-thumbs img:hover,
#content .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
}

#content .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	outline: 1px solid var(--mmsc-color-text);
	outline-offset: -1px;
}

@media (max-width: 767px) {
	#content .woocommerce-product-gallery .flex-control-thumbs li {
		flex-basis: 56px;
		width: 56px;
	}
}

/* Desktop: a vertical thumbnail rail beside a large photo. `contain:
   size` keeps the rail from setting the row height — it takes the
   photo's height and scrolls if a product has more thumbnails than fit.
   Only when there are thumbnails (a single-image product keeps the
   photo full width). */
@media (min-width: 1080px) {
	#content div.product > .woocommerce-product-gallery:has(> .flex-control-thumbs) {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: var(--mmsc-space-4);
	}

	#content .woocommerce-product-gallery:has(> .flex-control-thumbs) > .flex-viewport {
		grid-column: 2;
	}

	#content .woocommerce-product-gallery:has(> .flex-control-thumbs) .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		contain: size;
	}

	#content .woocommerce-product-gallery:has(> .flex-control-thumbs) .flex-control-thumbs li {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* =================================================================
   Buy box
   ================================================================= */

#content div.product > .summary {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	float: none;
	font-family: var(--mmsc-font-body);
	color: var(--mmsc-color-text) !important;
}

/* The legacy Additional CSS has `.page-id-253 p, div { color: black
   !important }` — the stray comma applies it to every <div> sitewide
   (e.g. the swatch label inside a selected, espresso-filled size button
   would be black on espresso). Inside the buy box, the information
   sections and the size guide, divs inherit the designed colours again.
   The related-product cards are left exactly as on the Shop. */
#content div.product > .summary div,
#content .mmsc-info div,
#content .mmsc-size-guide div {
	color: inherit !important;
}

/* Title — the page's one <h1>. The legacy Additional CSS sets
   `h1 { font-family: poppins !important }` sitewide (Poppins isn't loaded,
   so it falls back to a default serif) — hence the !important. */
#content div.product .summary .product_title {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--mmsc-font-heading) !important;
	font-size: var(--mmsc-text-xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--mmsc-color-text);
}

@media (min-width: 1080px) {
	#content div.product .summary .product_title {
		font-size: var(--mmsc-text-2xl);
	}
}

#content div.product .summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--mmsc-space-2);
	margin: var(--mmsc-space-2) 0 0;
}

#content div.product .summary .star-rating {
	font-size: var(--mmsc-text-rating);
}

#content div.product .summary .star-rating span::before {
	color: var(--mmsc-color-accent);
}

#content div.product .summary .woocommerce-review-link {
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-text-muted);
}

/* Price row: selling price, MRP, discount. WooCommerce prints the MRP
   (<del>) first; the selling price leads visually. Sizes sit on .amount
   itself because the legacy Customizer CSS sizes `.amount` directly, and
   the direction/alignment are set because the legacy Additional CSS
   stacks and centres every `.price`. */
#content div.product .summary p.price,
#content div.product .summary .woocommerce-variation-price .price {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--mmsc-space-1) var(--mmsc-space-3);
	margin: 0;
	font-family: var(--mmsc-font-body);
	line-height: 1.3;
	color: var(--mmsc-color-text);
}

#content div.product .summary > p.price {
	margin-top: var(--mmsc-space-4);
}

#content div.product .summary .price ins {
	order: 1;
	text-decoration: none;
}

#content div.product .summary .price del {
	order: 2;
	opacity: 1;
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .price .amount,
#content div.product .summary .price .amount bdi,
#content div.product .summary .price .amount .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

#content div.product .summary .price > .amount,
#content div.product .summary .price ins .amount {
	font-size: var(--mmsc-text-xl);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--mmsc-color-text);
}

#content div.product .summary .price del .amount {
	font-size: var(--mmsc-text-base);
	font-weight: 400;
	color: var(--mmsc-color-text-muted);
}

/* "MRP" label ahead of the struck-through price (the <del> itself is
   aria-hidden; WooCommerce's screen-reader text already announces it). */
#content div.product .summary .price del::before {
	content: "MRP";
	display: inline-block;
	margin-right: var(--mmsc-space-1);
	font-size: var(--mmsc-text-xs);
	letter-spacing: 0.06em;
	text-decoration: none;
}

/* Discount — MM Sanidaz Core's real percentage, the same tinted tag the
   product cards use beside their price. */
#content div.product .summary .price .mmsc-discount-percent {
	order: 3;
	display: inline-flex;
	align-items: center;
	padding: 3px var(--mmsc-space-2);
	border-radius: var(--mmsc-radius-sm);
	background: rgba(169, 101, 111, 0.12);
	color: var(--mmsc-color-sale);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---- Variation form: WooCommerce's table, laid out as stacked groups ---- */

/* OceanWP draws rules above and below the title and the form. The
   legacy Additional CSS makes every `.cart` a 20px-gap grid, in which the
   form's clearfix ::after becomes an extra empty row. */
#content div.product .summary form.cart {
	display: block;
	margin: var(--mmsc-space-6) 0 0;
	padding: 0;
	border: 0;
}

#content div.product .summary form.cart::before,
#content div.product .summary form.cart::after {
	display: none;
}

#content div.product .summary table.variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

#content div.product .summary table.variations tbody,
#content div.product .summary table.variations tr,
#content div.product .summary table.variations th,
#content div.product .summary table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	line-height: 1.4;
}

#content div.product .summary table.variations tr {
	position: relative;
	margin: 0 0 var(--mmsc-space-5);
}

/* The swatches plugin makes the value cell the positioning context; the
   Size Guide link below is placed against the whole row instead. */
#content div.product .summary table.variations td.value {
	position: static;
}

#content div.product .summary table.variations th.label {
	/* Room on the right for the Size Guide link on the same line. */
	padding: 0 110px var(--mmsc-space-3) 0;
}

#content div.product .summary table.variations th.label label {
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mmsc-color-text);
}

/* The swatches plugin appends the chosen value to the heading. */
#content div.product .summary table.variations .woo-selected-variation-item-name {
	margin-left: var(--mmsc-space-1);
	font-size: var(--mmsc-text-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mmsc-color-text-muted);
}

/* Size Guide link — printed after the Age/Size options (so it works
   without JS), placed on the heading's line. */
#content div.product .summary .mmsc-size-guide-link {
	position: absolute;
	top: -2px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--mmsc-color-text);
	text-decoration: underline;
	text-decoration-color: var(--mmsc-color-border);
	text-underline-offset: 4px;
	transition: color var(--mmsc-transition-fast), text-decoration-color var(--mmsc-transition-fast);
}

#content div.product .summary .mmsc-size-guide-link:hover {
	color: var(--mmsc-color-sale);
	text-decoration-color: currentColor;
}

#content div.product .summary .mmsc-size-guide-link:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Swatches (Variation Swatches for WooCommerce markup, unchanged). */
#content div.product .summary .variable-items-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

#content div.product .summary .button-variable-items-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: var(--mmsc-space-2);
}

#content div.product .summary .variable-items-wrapper .variable-item {
	margin: 0;
	padding: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background var(--mmsc-transition-fast), box-shadow var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#content div.product .summary .button-variable-items-wrapper .variable-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: 44px;
	padding: 0 var(--mmsc-space-2);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	box-shadow: inset 0 0 0 1px var(--mmsc-color-border);
	color: var(--mmsc-color-text);
}

#content div.product .summary .button-variable-items-wrapper .variable-item .variable-item-span {
	padding: 0;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

#content div.product .summary .button-variable-items-wrapper .variable-item:not(.disabled):hover {
	box-shadow: inset 0 0 0 1px var(--mmsc-color-text);
}

#content div.product .summary .button-variable-items-wrapper .variable-item.selected,
#content div.product .summary .button-variable-items-wrapper .variable-item.selected:hover {
	background: var(--mmsc-color-dark);
	box-shadow: inset 0 0 0 1px var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
}

#content div.product .summary .color-variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mmsc-space-3);
}

#content div.product .summary .color-variable-items-wrapper .variable-item {
	width: 38px;
	height: 38px;
	padding: 4px;
	border-radius: var(--mmsc-radius-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px transparent;
}

#content div.product .summary .color-variable-items-wrapper .variable-item .variable-item-contents,
#content div.product .summary .color-variable-items-wrapper .variable-item .variable-item-span-color {
	width: 100%;
	height: 100%;
	border-radius: var(--mmsc-radius-pill);
}

/* Hairline so a pale swatch (Ivory) is visible on the ivory page. */
#content div.product .summary .color-variable-items-wrapper .variable-item .variable-item-span-color {
	box-shadow: inset 0 0 0 1px rgba(45, 38, 35, 0.15);
}

#content div.product .summary .color-variable-items-wrapper .variable-item:not(.disabled):hover {
	box-shadow: inset 0 0 0 1px var(--mmsc-color-text-muted);
}

#content div.product .summary .color-variable-items-wrapper .variable-item.selected,
#content div.product .summary .color-variable-items-wrapper .variable-item.selected:hover {
	box-shadow: inset 0 0 0 1.5px var(--mmsc-color-dark);
}

/* The plugin's own check-mark over a selected colour — the ring says it. */
#content div.product .summary .color-variable-items-wrapper .variable-item .variable-item-contents::before {
	display: none;
}

#content div.product .summary .variable-items-wrapper .variable-item:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Unavailable options (out of stock, or no variation for them with the
   current choice — MM Sanidaz Core, class-variation-availability.php):
   still listed, plainly not choosable. Muted, struck through, no hover —
   the same treatment as the Quick Add chooser. The swatches plugin's red
   "blur" cross and 40% fade read as broken (and failed contrast). */
#content div.product .summary .variable-items-wrapper .variable-item.disabled,
#content div.product .summary .variable-items-wrapper .variable-item.disabled:hover {
	opacity: 1;
	cursor: not-allowed;
}

#content div.product .summary .variable-items-wrapper .variable-item.disabled .variable-item-contents::before {
	background-image: none;
}

#content div.product .summary .button-variable-items-wrapper .variable-item.disabled,
#content div.product .summary .button-variable-items-wrapper .variable-item.disabled:hover {
	background: var(--mmsc-color-bg);
	box-shadow: inset 0 0 0 1px var(--mmsc-color-border);
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .button-variable-items-wrapper .variable-item.disabled .variable-item-span {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* A colour that can't be had: faded swatch with a fine diagonal stroke. */
#content div.product .summary .color-variable-items-wrapper .variable-item.disabled .variable-item-span-color {
	opacity: 0.4;
}

#content div.product .summary .color-variable-items-wrapper .variable-item.disabled .variable-item-contents {
	position: relative;
}

#content div.product .summary .color-variable-items-wrapper .variable-item.disabled .variable-item-contents::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 8%;
	width: 84%;
	height: 1.5px;
	background: var(--mmsc-color-text-muted);
	transform: rotate(-45deg);
}

/* "Crossed-out sizes are unavailable" — under a list that has any. */
#content div.product .summary .mmsc-variation-note {
	margin: var(--mmsc-space-2) 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .mmsc-variation-note[hidden] {
	display: none;
}

/* Clear selection — OceanWP draws it as a boxed button with a red icon. */
#content div.product .summary .reset_variations {
	display: inline-flex;
	margin: var(--mmsc-space-3) 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--mmsc-color-text-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

#content div.product .summary .reset_variations::before {
	display: none;
}

#content div.product .summary .reset_variations:hover {
	color: var(--mmsc-color-text);
}

/* ---- Selected-variation details: price (only when variations differ),
   description, stock ---- */

#content div.product .summary .single_variation_wrap {
	margin: 0;
}

#content div.product .summary .woocommerce-variation.single_variation > div:not(:empty) {
	margin: 0 0 var(--mmsc-space-4);
}

#content div.product .summary .woocommerce-variation-description {
	font-size: var(--mmsc-text-sm);
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .woocommerce-variation-description p {
	margin: 0;
}

#content div.product .summary p.stock {
	display: inline-flex;
	align-items: center;
	gap: var(--mmsc-space-2);
	margin: 0;
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary p.stock::before {
	content: "";
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-success);
}

#content div.product .summary p.stock.out-of-stock::before {
	background: var(--mmsc-color-sale);
}

#content div.product .summary p.stock.available-on-backorder::before {
	background: var(--mmsc-color-accent);
}

#content div.product .summary > p.stock {
	margin-top: var(--mmsc-space-5);
}

/* ---- Purchase row:  [ − 1 + ] [ Add to Cart ] [ ♡ ]
                       [ Buy Now                   ] ---- */

#content div.product .summary .woocommerce-variation-add-to-cart,
#content div.product .summary form.cart:not(.variations_form) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--mmsc-space-2);
	align-items: stretch;
}

#content div.product .summary .woocommerce-variation-add-to-cart .quantity,
#content div.product .summary form.cart:not(.variations_form) .quantity {
	grid-column: 1;
	grid-row: 1;
}

#content div.product .summary .single_add_to_cart_button:not(.mmsc-buy-now-button) {
	grid-column: 2;
	grid-row: 1;
}

#content div.product .summary .tinv-wraper {
	grid-column: 3;
	grid-row: 1;
}

#content div.product .summary .mmsc-buy-now-button {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* A narrow buy box (tablet columns, small phones) leaves Add to Cart too
   little room beside quantity and wishlist, so the wishlist moves down
   beside Buy Now:  [ − 1 + ][ Add to Cart    ]
                    [ Buy Now          ][ ♡ ]   */
#content div.product > .summary {
	container: mmsc-buybox / inline-size;
}

@container mmsc-buybox (max-width: 359px) {
	#content div.product .summary .single_add_to_cart_button:not(.mmsc-buy-now-button) {
		grid-column: 2 / -1;
	}

	#content div.product .summary .mmsc-buy-now-button {
		grid-column: 1 / 3;
	}

	#content div.product .summary .tinv-wraper {
		grid-row: 2;
	}
}

/* A quantity fixed at one (sold individually) hides WooCommerce's
   field; the Add to Cart button takes its place in the row. */
#content div.product .summary .quantity:has(input[type="hidden"]) {
	display: none !important;
}

#content div.product .summary .quantity:has(input[type="hidden"]) + .single_add_to_cart_button {
	grid-column: 1 / 3;
}

/* Quantity: − field + in one bordered control. The legacy Additional
   CSS forces `.quantity { justify-content: center !important;
   padding-top: 10px !important; color: black !important }` sitewide,
   hence the three !important overrides. */
#content div.product .summary .quantity {
	display: inline-flex;
	align-items: stretch;
	justify-content: flex-start !important;
	height: 52px;
	margin: 0;
	padding: 0 !important;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-text) !important;
	overflow: hidden;
}

#content div.product .summary .quantity:focus-within {
	border-color: var(--mmsc-color-text-muted);
}

/* OceanWP's JS-injected, unlabelled "-" / "+" links. */
#content div.product .summary .quantity > a.minus,
#content div.product .summary .quantity > a.plus {
	display: none;
}

#content div.product .summary .quantity .mmsc-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Full height of the 52px control and 44px wide: the whole segment is
	   the tap target (the icon alone measured 40×16 on phones). */
	flex: 0 0 44px;
	width: 44px;
	align-self: stretch;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mmsc-color-text);
	cursor: pointer;
	transition: background var(--mmsc-transition-fast), color var(--mmsc-transition-fast);
}

#content div.product .summary .quantity .mmsc-qty__btn:hover:not(:disabled) {
	background: var(--mmsc-color-bg);
}

#content div.product .summary .quantity .mmsc-qty__btn:disabled {
	color: var(--mmsc-color-border);
	cursor: default;
}

#content div.product .summary .quantity .mmsc-qty__btn:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: -2px;
}

#content div.product .summary .quantity .qty {
	width: 40px;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

#content div.product .summary .quantity .qty::-webkit-outer-spin-button,
#content div.product .summary .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

#content div.product .summary .quantity .qty:focus {
	outline: none;
}

/* Add to Cart (espresso, the one solid action) and Buy Now (rose). The
   legacy Additional CSS sets `.single_add_to_cart_button { color: #222
   !important }` — text colours need !important to win. */
#content div.product .summary .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	box-shadow: none;
	color: var(--mmsc-color-surface) !important;
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--mmsc-transition-fast), border-color var(--mmsc-transition-fast), color var(--mmsc-transition-fast), opacity var(--mmsc-transition-fast);
}

#content div.product .summary .single_add_to_cart_button:hover {
	border-color: var(--mmsc-color-dark-hover);
	background: var(--mmsc-color-dark-hover);
}

/* Buy Now: a soft rose tint with a rose outline and espresso text —
   clearly the rose-accent action beside the espresso one, and readable
   (rose text on ivory would be too low-contrast at this size). */
#content div.product .summary .single_add_to_cart_button.mmsc-buy-now-button {
	border-color: var(--mmsc-color-primary);
	background: rgba(185, 121, 132, 0.12);
	color: var(--mmsc-color-text) !important;
}

#content div.product .summary .single_add_to_cart_button.mmsc-buy-now-button:hover {
	border-color: var(--mmsc-color-primary);
	background: var(--mmsc-color-primary);
	color: var(--mmsc-color-surface) !important;
}

/* Until a size/colour combination is chosen (WooCommerce's own state). */
#content div.product .summary .single_add_to_cart_button.disabled,
#content div.product .summary .single_add_to_cart_button.disabled:hover {
	opacity: 0.4;
	cursor: not-allowed;
}

#content div.product .summary .single_add_to_cart_button.disabled:not(.mmsc-buy-now-button):hover {
	border-color: var(--mmsc-color-dark);
	background: var(--mmsc-color-dark);
}

#content div.product .summary .single_add_to_cart_button.mmsc-buy-now-button.disabled:hover {
	border-color: var(--mmsc-color-primary);
	background: rgba(185, 121, 132, 0.12);
	color: var(--mmsc-color-text) !important;
}

#content div.product .summary .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Add to Cart while WooCommerce confirms the add (single-product.js): the
   tap shows at once (label eases back), and a thin line runs along the
   bottom only if the answer takes a moment. The button keeps its width
   through every state, so nothing in the row moves. */
#content div.product .summary .single_add_to_cart_button:not(.mmsc-buy-now-button) {
	position: relative;
	overflow: hidden;
}

#content div.product .summary .single_add_to_cart_button.is-busy {
	cursor: progress;
	color: rgba(255, 255, 255, 0.72) !important; /* legacy `.single_add_to_cart_button { color }` !important */
}

#content div.product .summary .single_add_to_cart_button.is-busy::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40%;
	height: 2px;
	background: var(--mmsc-color-primary);
	opacity: 0;
	animation: mmsc-atc-progress 1.1s ease-in-out 220ms infinite;
}

@keyframes mmsc-atc-progress {
	0% {
		opacity: 1;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(250%);
	}
}

/* Confirmed: "✓ Added to Cart" for a moment, then back to Add to Cart. */
#content div.product .summary .single_add_to_cart_button.is-added {
	gap: var(--mmsc-space-2);
	animation: mmsc-atc-added 240ms ease;
}

#content div.product .summary .single_add_to_cart_button .mmsc-atc-check {
	flex: 0 0 auto;
}

@keyframes mmsc-atc-added {
	from {
		opacity: 0.72;
	}
	to {
		opacity: 1;
	}
}

/* Wishlist (TI WooCommerce Wishlist's own button): a square icon button
   in the purchase row. Its label stays in the accessible name. */
#content div.product .summary .tinv-wraper {
	display: flex;
	margin: 0;
}

#content div.product .summary .tinv-wraper .tinv-wishlist-clear,
#content div.product .summary .tinv-wraper .tinvwl-tooltip {
	display: none;
}

#content div.product .summary a.tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	color: var(--mmsc-color-primary) !important;
	text-decoration: none !important;
	transition: border-color var(--mmsc-transition-fast);
}

#content div.product .summary a.tinvwl_add_to_wishlist_button:hover {
	border-color: var(--mmsc-color-primary);
}

#content div.product .summary a.tinvwl_add_to_wishlist_button:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

/* Same heart as the product cards (product-card.css): an outline heart,
   filled rose once saved — in place of TI's icon-font "heart +" /
   "heart ✓" glyphs. */
#content div.product .summary a.tinvwl_add_to_wishlist_button::before {
	content: '' !important;
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background-color: var(--mmsc-color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color var(--mmsc-transition-fast);
}

#content div.product .summary a.tinvwl_add_to_wishlist_button:hover::before,
#content div.product .summary a.tinvwl_add_to_wishlist_button:focus-visible::before {
	background-color: var(--mmsc-color-sale);
}

#content div.product .summary a.tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before {
	background-color: var(--mmsc-color-sale);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20.4s-7.9-4.7-7.9-10.3A4.4 4.4 0 0 1 12 7.4a4.4 4.4 0 0 1 7.9 2.7c0 5.6-7.9 10.3-7.9 10.3Z'/%3E%3C/svg%3E");
}

#content div.product .summary .tinvwl_add_to_wishlist-text,
#content div.product .summary .tinvwl_remove_from_wishlist-text,
#content div.product .summary .tinvwl_already_on_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- After the purchase row: description, highlights, meta ---- */

#content div.product .summary .woocommerce-product-details__short-description {
	margin: var(--mmsc-space-6) 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mmsc-color-text-muted) !important; /* see the div colour note above */
}

#content div.product .summary .woocommerce-product-details__short-description p {
	margin: 0 0 var(--mmsc-space-3);
}

#content div.product .summary .woocommerce-product-details__short-description > :last-child,
#content div.product .summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

#content div.product .summary .mmsc-highlights {
	display: grid;
	gap: var(--mmsc-space-3);
	margin: var(--mmsc-space-5) 0 0;
	padding: var(--mmsc-space-5) 0 0;
	border-top: 1px solid var(--mmsc-color-border);
	list-style: none;
}

#content div.product .summary .mmsc-highlights__item {
	display: grid;
	grid-template-columns: 18px 64px minmax(0, 1fr);
	column-gap: var(--mmsc-space-3);
	align-items: start;
	margin: 0;
	font-size: var(--mmsc-text-sm);
	line-height: 1.5;
}

#content div.product .summary .mmsc-highlights__icon {
	margin-top: 1px;
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .mmsc-highlights__label {
	font-weight: 600;
	color: var(--mmsc-color-text);
}

#content div.product .summary .mmsc-highlights__value {
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .product_meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: var(--mmsc-space-5) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--mmsc-text-xs);
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

#content div.product .summary .product_meta > span {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

#content div.product .summary .product_meta a,
#content div.product .summary .product_meta .sku {
	color: var(--mmsc-color-text-muted);
	font-weight: 400;
	text-decoration: none;
}

#content div.product .summary .product_meta a:hover {
	color: var(--mmsc-color-sale);
}

@media (min-width: 768px) {
	/* The buy box starts level with the top of the photo. */
	#content div.product > .summary {
		padding-top: var(--mmsc-space-1);
	}
}

/* =================================================================
   Notices (e.g. "added to your cart" after Add to Cart)
   ================================================================= */

body.single-product #content .woocommerce-message,
body.single-product #content .woocommerce-info,
body.single-product #content .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mmsc-space-2) var(--mmsc-space-5);
	margin: 0 0 var(--mmsc-space-5);
	padding: var(--mmsc-space-3) var(--mmsc-space-4) var(--mmsc-space-3) 44px;
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-md);
	background: var(--mmsc-color-surface);
	box-shadow: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	line-height: 1.5;
	list-style: none;
	position: relative;
}

body.single-product #content .woocommerce-message::before,
body.single-product #content .woocommerce-info::before,
body.single-product #content .woocommerce-error::before {
	position: absolute;
	top: 50%;
	left: var(--mmsc-space-4);
	margin: 0;
	transform: translateY(-50%);
	color: var(--mmsc-color-success);
	font-size: 16px;
}

body.single-product #content .woocommerce-error::before {
	color: var(--mmsc-color-error);
}

body.single-product #content .woocommerce-error li {
	margin: 0;
}

body.single-product #content .woocommerce-message .button {
	order: 2;
	float: none;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin: 0;
	padding: 0 var(--mmsc-space-4);
	border: 1px solid var(--mmsc-color-dark);
	border-radius: var(--mmsc-radius-sm);
	background: transparent;
	color: var(--mmsc-color-text) !important;
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

body.single-product #content .woocommerce-message .button:hover {
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface) !important;
}

/* =================================================================
   Product information — accordions (mobile / no JS), tabs from 768px
   ================================================================= */

#content .mmsc-info {
	margin: 0;
	font-family: var(--mmsc-font-body);
	color: var(--mmsc-color-text);
}

#content .mmsc-info__section {
	border-top: 1px solid var(--mmsc-color-border);
}

#content .mmsc-info__section:last-child {
	border-bottom: 1px solid var(--mmsc-color-border);
}

#content .mmsc-info__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

#content .mmsc-info__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mmsc-space-4);
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: var(--mmsc-space-4) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

#content .mmsc-info__toggle:hover {
	background: transparent;
	color: var(--mmsc-color-sale);
}

#content .mmsc-info__toggle:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: -2px;
}

/* No chevron until the section can actually collapse (JS). */
#content .mmsc-info__chevron {
	display: none;
	flex: 0 0 auto;
	color: var(--mmsc-color-text-muted);
	transition: transform var(--mmsc-transition-base);
}

#content .mmsc-info.is-enhanced .mmsc-info__chevron {
	display: block;
}

#content .mmsc-info__toggle[aria-expanded="true"] .mmsc-info__chevron {
	transform: rotate(180deg);
}

#content .mmsc-info:not(.is-enhanced) .mmsc-info__toggle {
	cursor: default;
}

#content .mmsc-info__panel {
	padding: 0 0 var(--mmsc-space-6);
	font-size: 15px;
	line-height: 1.75;
	color: var(--mmsc-color-text);
}

#content .mmsc-info__panel[hidden] {
	display: none;
}

#content .mmsc-info__panel > :first-child {
	margin-top: 0;
}

#content .mmsc-info__panel > :last-child,
#content .mmsc-info__panel > div > :last-child {
	margin-bottom: 0;
}

#content .mmsc-info__panel p {
	margin: 0 0 var(--mmsc-space-3);
}

/* Tabs (from 768px, set by single-product.js). */
#content .mmsc-info__tabs {
	display: flex;
	justify-content: center;
	gap: var(--mmsc-space-6);
	margin: 0 0 var(--mmsc-space-6);
	padding: 0;
	border-bottom: 1px solid var(--mmsc-color-border);
	overflow-x: auto;
	scrollbar-width: none;
}

#content .mmsc-info__tabs[hidden] {
	display: none;
}

#content .mmsc-info__tab {
	flex: 0 0 auto;
	margin: 0 0 -1px;
	padding: var(--mmsc-space-4) 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mmsc-color-text-muted);
	font-family: var(--mmsc-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--mmsc-transition-fast), border-color var(--mmsc-transition-fast);
}

#content .mmsc-info__tab:hover {
	background: transparent;
	color: var(--mmsc-color-text);
}

#content .mmsc-info__tab[aria-selected="true"] {
	border-bottom-color: var(--mmsc-color-primary);
	color: var(--mmsc-color-text);
}

#content .mmsc-info__tab:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

#content .mmsc-info.is-tabs .mmsc-info__section {
	border: 0;
}

#content .mmsc-info.is-tabs .mmsc-info__heading {
	display: none;
}

#content .mmsc-info.is-tabs .mmsc-info__panel {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
}

/* ---- Section content ---- */

#content .mmsc-product-tab--fabric-care {
	display: grid;
	gap: var(--mmsc-space-4);
	margin: 0;
}

#content .mmsc-product-tab__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--mmsc-space-4);
}

#content .mmsc-product-tab--fabric-care dt {
	margin: 0;
	font-size: var(--mmsc-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 2.1;
	text-transform: uppercase;
}

#content .mmsc-product-tab--fabric-care dd {
	margin: 0;
}

#content .mmsc-product-tab--fabric-care dd p:last-child {
	margin-bottom: 0;
}

/* Size guide table — shared by the section and the dialog (the dialog
   shows the same markup). Fits a phone screen (below); a wider table
   scrolls sideways inside its own box, first column pinned. */
.mmsc-product-tab--size-guide {
	overflow-x: auto;
	font-family: var(--mmsc-font-body);
}

.mmsc-product-tab--size-guide > p {
	margin: 0 0 var(--mmsc-space-4);
	font-size: 13px;
	line-height: 1.6;
	color: var(--mmsc-color-text-muted);
}

.mmsc-product-tab--size-guide table {
	width: 100%;
	min-width: 520px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--mmsc-text-sm);
	line-height: 1.4;
	color: var(--mmsc-color-text);
}

.mmsc-product-tab--size-guide th,
.mmsc-product-tab--size-guide td {
	padding: var(--mmsc-space-3) var(--mmsc-space-3);
	border: 0;
	border-bottom: 1px solid var(--mmsc-color-border);
	background: var(--mmsc-color-surface);
	text-align: left;
	white-space: nowrap;
}

.mmsc-product-tab--size-guide thead th {
	background: var(--mmsc-color-bg);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mmsc-color-text-muted);
}

.mmsc-product-tab--size-guide th:first-child,
.mmsc-product-tab--size-guide td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	font-weight: 600;
}

.mmsc-product-tab--size-guide tbody tr:hover td {
	background: var(--mmsc-color-bg);
}

/* Comparing sizes: measurements centred in equal-width figures so a
   column reads straight down; every other age tinted; "cm" stated once
   under each heading (MMSC_Product_Fields::present_size_guide()). */
.mmsc-product-tab--size-guide .mmsc-size-guide-unit {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mmsc-color-text-muted);
}

.mmsc-product-tab--size-guide th:not(:first-child),
.mmsc-product-tab--size-guide td:not(:first-child) {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mmsc-product-tab--size-guide tbody tr:nth-child(even) td {
	background: var(--mmsc-color-bg);
}

/* The size chosen on the page (single-product.js): a soft rose band and
   a dark bar at its start — visible without relying on colour. */
.mmsc-product-tab--size-guide tbody tr.is-chosen td,
.mmsc-product-tab--size-guide tbody tr.is-chosen:hover td {
	background: #f5e9ea;
	font-weight: 600;
}

.mmsc-product-tab--size-guide tbody tr.is-chosen td:first-child {
	box-shadow: inset 3px 0 0 var(--mmsc-color-dark);
}

/* Phones: the whole comparison on one screen — compact cells, headings
   allowed to wrap ("Dress / length"), no sideways scrolling for the
   standard six columns (a wider table still scrolls, first column held). */
@media (max-width: 600px) {
	.mmsc-product-tab--size-guide table {
		min-width: 0;
		font-size: 13px;
	}

	.mmsc-product-tab--size-guide th,
	.mmsc-product-tab--size-guide td {
		padding: 10px 5px;
	}

	.mmsc-product-tab--size-guide th:first-child,
	.mmsc-product-tab--size-guide td:first-child {
		padding-left: 8px;
	}

	.mmsc-product-tab--size-guide thead th {
		font-size: 10px;
		letter-spacing: 0.02em;
		line-height: 1.25;
		white-space: normal;
		vertical-align: bottom;
	}

	.mmsc-product-tab--size-guide thead th:first-child {
		white-space: nowrap;
	}
}

/* The narrowest phones (360px): a little less air so six columns fit. */
@media (max-width: 400px) {
	.mmsc-product-tab--size-guide th,
	.mmsc-product-tab--size-guide td {
		padding-right: 3px;
		padding-left: 3px;
	}

	.mmsc-product-tab--size-guide th:first-child,
	.mmsc-product-tab--size-guide td:first-child {
		padding-left: 6px;
	}

	.mmsc-product-tab--size-guide thead th {
		letter-spacing: 0;
	}
}

/* ---- Reviews (WooCommerce's own template and comment form) ---- */

#content .mmsc-info .woocommerce-Reviews-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#content .mmsc-info .woocommerce-noreviews {
	margin: 0 0 var(--mmsc-space-5);
	color: var(--mmsc-color-text-muted);
}

#content .mmsc-info .commentlist {
	margin: 0 0 var(--mmsc-space-6);
	padding: 0;
	list-style: none;
}

#content .mmsc-info #review_form_wrapper {
	max-width: 640px;
}

#content .mmsc-info .comment-reply-title {
	display: block;
	margin: 0 0 var(--mmsc-space-2);
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--mmsc-color-text);
}

#content .mmsc-info .comment-notes {
	margin: 0 0 var(--mmsc-space-4);
	font-size: 13px;
	color: var(--mmsc-color-text-muted);
}

#content .mmsc-info .comment-form > p,
#content .mmsc-info .comment-form-rating {
	margin: 0 0 var(--mmsc-space-4);
}

#content .mmsc-info .comment-form label {
	display: block;
	margin: 0 0 var(--mmsc-space-1);
	font-size: 13px;
	font-weight: 600;
	color: var(--mmsc-color-text);
}

#content .mmsc-info .comment-form input[type="text"],
#content .mmsc-info .comment-form input[type="email"],
#content .mmsc-info .comment-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: var(--mmsc-space-3);
	border: 1px solid var(--mmsc-color-border);
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-surface);
	box-shadow: none;
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	font-size: 15px;
	font-weight: 400;
}

#content .mmsc-info .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

#content .mmsc-info .comment-form input:focus,
#content .mmsc-info .comment-form textarea:focus {
	border-color: var(--mmsc-color-text-muted);
	outline: none;
}

#content .mmsc-info .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--mmsc-space-2);
}

#content .mmsc-info .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--mmsc-color-text-muted);
}

#content .mmsc-info p.stars a {
	color: var(--mmsc-color-accent);
}

#content .mmsc-info .form-submit input[type="submit"] {
	min-height: 48px;
	padding: 0 var(--mmsc-space-6);
	border: 0;
	border-radius: var(--mmsc-radius-sm);
	background: var(--mmsc-color-dark);
	color: var(--mmsc-color-surface);
	font-family: var(--mmsc-font-body);
	font-size: var(--mmsc-text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

#content .mmsc-info .form-submit input[type="submit"]:hover {
	background: var(--mmsc-color-dark-hover);
}

/* =================================================================
   Size Guide dialog (native <dialog>, filled by single-product.js)
   ================================================================= */

html.mmsc-scroll-lock {
	overflow-y: hidden;
	scrollbar-gutter: stable;
}

#content .mmsc-size-guide {
	width: min(720px, calc(100vw - 2 * var(--mmsc-space-4)));
	max-width: none;
	max-height: min(85vh, 760px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--mmsc-radius-lg);
	background: var(--mmsc-color-surface);
	box-shadow: 0 24px 64px rgba(45, 38, 35, 0.18);
	color: var(--mmsc-color-text);
	font-family: var(--mmsc-font-body);
	overflow: hidden;
}

#content .mmsc-size-guide[open] {
	display: flex;
	flex-direction: column;
	animation: mmsc-dialog-in var(--mmsc-transition-base);
}

#content .mmsc-size-guide::backdrop {
	background: rgba(45, 38, 35, 0.5);
	animation: mmsc-backdrop-in var(--mmsc-transition-base);
}

/* Closing (single-product.js holds the dialog open for this long). */
#content .mmsc-size-guide.is-closing {
	animation: mmsc-dialog-out 180ms ease forwards;
}

#content .mmsc-size-guide.is-closing::backdrop {
	animation: mmsc-backdrop-out 180ms ease forwards;
}

#content .mmsc-size-guide__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mmsc-space-4);
	padding: var(--mmsc-space-5) var(--mmsc-space-5) var(--mmsc-space-4);
	border-bottom: 1px solid var(--mmsc-color-border);
}

#content .mmsc-size-guide__title {
	margin: 0;
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--mmsc-color-text);
}

#content .mmsc-size-guide__product {
	margin: var(--mmsc-space-1) 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--mmsc-color-text-muted);
}

#content .mmsc-size-guide__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: -4px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--mmsc-radius-pill);
	background: var(--mmsc-color-bg);
	box-shadow: none;
	color: var(--mmsc-color-text);
	cursor: pointer;
	transition: background var(--mmsc-transition-fast);
}

#content .mmsc-size-guide__close:hover {
	background: var(--mmsc-color-border);
	color: var(--mmsc-color-text);
}

#content .mmsc-size-guide__close:focus-visible {
	outline: 2px solid var(--mmsc-color-accent);
	outline-offset: 2px;
}

#content .mmsc-size-guide__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--mmsc-space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Phones: a bottom sheet, full width, within the visible viewport. */
@media (max-width: 767px) {
	#content .mmsc-size-guide {
		width: 100%;
		max-height: 88vh;
		max-height: 88dvh;
		margin: auto 0 0;
		border-radius: var(--mmsc-radius-lg) var(--mmsc-radius-lg) 0 0;
	}

	#content .mmsc-size-guide__header {
		padding: var(--mmsc-space-4);
	}

	#content .mmsc-size-guide__body {
		padding: var(--mmsc-space-4) var(--mmsc-space-4) calc(var(--mmsc-space-5) + env(safe-area-inset-bottom, 0px));
	}

	#content .mmsc-size-guide[open] {
		animation-name: mmsc-sheet-in;
	}

	#content .mmsc-size-guide.is-closing {
		animation-name: mmsc-sheet-out;
	}
}

@keyframes mmsc-dialog-out {
	to {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes mmsc-sheet-out {
	to {
		opacity: 0;
		transform: translateY(24px);
	}
}

@keyframes mmsc-backdrop-in {
	from {
		opacity: 0;
	}
}

@keyframes mmsc-backdrop-out {
	to {
		opacity: 0;
	}
}

@keyframes mmsc-dialog-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mmsc-sheet-in {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

/* =================================================================
   Related products — the Shop's cards (product-card.css,
   body.mmsc-cards); only the section and its grid are set here.
   ================================================================= */

#content div.product > .related.products {
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	border: 0;
}

#content div.product > .related.products > h2 {
	margin: 0 0 var(--mmsc-space-5);
	font-family: var(--mmsc-font-heading);
	font-size: var(--mmsc-text-xl);
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	color: var(--mmsc-color-text);
}

/* Four products: two across on phones, one row of four from 768px. */
body.mmsc-cards #content .related.products ul.products.oceanwp-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	body.mmsc-cards #content .related.products ul.products.oceanwp-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--mmsc-space-4);
	}
}

@media (min-width: 1080px) {
	#content div.product > .related.products > h2 {
		font-size: var(--mmsc-text-2xl);
	}

	body.mmsc-cards #content .related.products ul.products.oceanwp-row {
		column-gap: var(--mmsc-space-5);
	}
}

/* =================================================================
   Reduced motion
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
	#content div.product .summary .single_add_to_cart_button,
	#content div.product .summary .variable-items-wrapper .variable-item,
	#content .woocommerce-product-gallery .flex-control-thumbs img,
	#content .mmsc-info__chevron,
	#content .mmsc-info__tab {
		transition: none;
	}

	#content .mmsc-size-guide[open],
	#content .mmsc-size-guide::backdrop,
	#content div.product .summary .single_add_to_cart_button.is-added {
		animation: none;
	}

	#content div.product .summary .single_add_to_cart_button.is-busy::after {
		animation: none;
		opacity: 1;
		width: 100%;
	}
}