/* =============================================================================
   Mueller's Collection Pages  -  single-product.css
   Version: 1.6.10

   Scoped entirely under body.mrp-prod-page.
   Never affects collection pages, homepage, or non-target product pages.
   Class prefix: mrp-prod-
   Custom property prefix: --mrp-prod-
   ============================================================================= */

/* -- Custom properties ------------------------------------------------------- */
:root {
	/* Page-width expansion tokens (used for body.mrp-prod-page overrides) */
	--mrp-prod-page-width:        98vw;
	--mrp-prod-page-max-width:    1920px;

	/* Two-column grid */
	--mrp-prod-col-gap:           clamp(1.25rem, 2.5vw, 3rem);
	--mrp-prod-gallery-ratio:     1.85fr;
	--mrp-prod-summary-ratio:     0.95fr;
	--mrp-prod-summary-min:       360px;
	--mrp-prod-page-gutter:       clamp(0.75rem, 1.25vw, 1.5rem);
	--mrp-prod-hero-top-gap:      clamp(1.25rem, 2.5vw, 2.5rem);

	/* Configuration navigator */
	--mrp-prod-config-rail-width: 72px;
	--mrp-prod-config-panel-min:  320px;

	--mrp-prod-color-bg:         #f7f7f5;
	--mrp-prod-color-text:       #1a1a1a;
	--mrp-prod-color-muted:      #5c5c5c;
	--mrp-prod-color-divider:    #e0dbd3;
	--mrp-prod-color-primary:    #1a1a1a;
	--mrp-prod-color-primary-fg: #fff;
	--mrp-prod-color-secondary:  transparent;
	--mrp-prod-color-secondary-bd: #1a1a1a;
	--mrp-prod-color-accent:     #7b6f5c;
	--mrp-prod-color-focus:      #1a6ef5;
	--mrp-prod-color-badge-bg:   #f0ece5;
	--mrp-prod-color-badge-text: #5c4a32;

	--mrp-prod-radius:           4px;
	--mrp-prod-radius-btn:       2px;
	--mrp-prod-type-body:        clamp(0.9375rem, 1.5vw, 1rem);
	--mrp-prod-type-h1:          clamp(1.5rem, 3vw, 2.25rem);
	--mrp-prod-type-h2:          clamp(1.125rem, 2.5vw, 1.5rem);
	--mrp-prod-type-small:       0.875rem;

	/* Header height for sticky and scroll-margin-top.
	   Set to the actual theme header height via wp_add_inline_style or
	   the theme's own custom property if available. */
	--mrp-header-height:         72px;
}

/* -- Accessibility utility --------------------------------------------------- */
.mrp-prod-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- Responsive product hero layout ----------------------------------------- */
/*
 * Confirmed block-theme structure:
 *
 *   .wp-site-blocks
 *   '-- .wp-block-group.woocommerce.product
 *       '-- main#wp--skip-link--target
 *           '-- .wp-block-columns
 *               +-- .wp-block-column
 *               |   '-- .wp-block-woocommerce-product-image-gallery
 *               |       '-- .woocommerce-product-gallery
 *               '-- .wp-block-column
 *                   '-- .summary.entry-summary
 *
 * The outer wrapper remains a normal block. The actual gallery/summary row is
 * the direct .wp-block-columns child of main and receives the two-column grid.
 */

/* Prevent the block theme from turning the outer product wrapper into a grid. */
body.mrp-prod-page .wp-site-blocks > .wp-block-group.woocommerce.product {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

/* Use nearly the full viewport, while retaining a small responsive gutter. */
body.mrp-prod-page main#wp--skip-link--target {
	width: min(var(--mrp-prod-page-width), var(--mrp-prod-page-max-width)) !important;
	max-width: none !important;
	margin-inline: auto !important;
	padding-inline: var(--mrp-prod-page-gutter) !important;
	box-sizing: border-box !important;
}

/*
 * Override WordPress's constrained-layout max-width and flex layout on the
 * actual product row. Fractional tracks consume all available horizontal space,
 * so the gallery and summary sit beside each other without a large empty gap.
 */
body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns {
	display: grid !important;
	grid-template-columns:
		minmax(0, var(--mrp-prod-gallery-ratio))
		minmax(var(--mrp-prod-summary-min), var(--mrp-prod-summary-ratio));
	gap: var(--mrp-prod-col-gap) !important;
	align-items: start !important;
	justify-content: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin: var(--mrp-prod-hero-top-gap) 0 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Neutralize the inline flex-basis and block-column sizing from the editor. */
body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns > .wp-block-column {
	display: block !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	justify-self: stretch !important;
	align-self: start !important;
	box-sizing: border-box !important;
}

/* Lock the two known columns into the intended tracks. */
body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns > .wp-block-column:first-child {
	grid-column: 1;
}

body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns > .wp-block-column:nth-child(2) {
	grid-column: 2;
}

/* The WooCommerce image-gallery block itself must stretch with its grid cell. */
body.mrp-prod-page .wp-block-woocommerce-product-image-gallery,
body.mrp-prod-page .woocommerce-product-gallery,
body.mrp-prod-page .wc-block-components-product-gallery {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

body.mrp-prod-page .woocommerce-product-gallery {
	background: var(--mrp-prod-color-bg);
	border-radius: var(--mrp-prod-radius);
	overflow: hidden;
}

/*
 * Gallery main stage — 2:1 aspect ratio.                          v1.6.2
 *
 * aspect-ratio: 2 / 1 governs the stage height so every uploaded image
 * (landscape, 4:3, square, portrait, cutout) is fully contained without
 * cropping and without a fixed pixel height that would break on narrow
 * viewports.
 *
 * height: auto !important overrides the explicit pixel height that
 * FlexSlider writes via JavaScript on initialisation, allowing the CSS
 * aspect-ratio to become the governing dimension.
 *
 * background: #f5f5f3 fills the letterbox areas for any image shape that
 * does not fill the full 2:1 frame.
 *
 * Note: whitespace baked into the uploaded image's own pixels cannot be
 * removed by CSS and will remain centred inside the neutral stage.
 * Only wrapper/layout whitespace is addressed by these rules.
 *
 * object-fit: contain is intentional — never change it to cover for
 * main product gallery images; the full table must remain visible.
 */
body.mrp-prod-page .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;       /* overrides FlexSlider JS inline height */
	aspect-ratio: 2 / 1 !important;
	background: #f5f5f3;
	overflow: hidden !important;
	margin: 0 !important;
}

/*
 * Wrapper and slide list-items must fill the full stage height so that
 * images can use height: 100% to fill the stage.
 * Do NOT override display, width, or transform — FlexSlider manages those.
 */
body.mrp-prod-page .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	height: 100% !important;
}

body.mrp-prod-page .woocommerce-product-gallery__image {
	height: 100% !important;
}

/* Link element wrapping each main image must fill its slide. */
body.mrp-prod-page .woocommerce-product-gallery__image > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

/*
 * Main gallery image: contain (never cover) within the 2:1 stage.
 * The complete product remains visible regardless of the image's own
 * aspect ratio. object-fit: cover is intentionally absent — do not add it.
 * .zoomImg is excluded: WooCommerce zoom controls its own size/position.
 */
body.mrp-prod-page .woocommerce-product-gallery__image img:not(.zoomImg) {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Summary fills the full right-hand track instead of shrinking to its content. */
body.mrp-prod-page .summary.entry-summary,
body.mrp-prod-page .mrp-prod-summary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Thumbnail strip remains native and sits directly beneath the large image. */
body.mrp-prod-page .flex-control-thumbs {
	display: flex;
	width: 100%;
	margin: 0.75rem 0 0 !important;
	padding: 0 0 0.25rem !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 0.5rem;
	list-style: none;
}

body.mrp-prod-page .flex-control-thumbs li {
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
	list-style: none;
}

body.mrp-prod-page .flex-control-thumbs li img {
	display: block;
	object-fit: cover;
	width: 72px;
	height: 72px;
}

/* -- Sticky summary panel (Amendment 6  -  progressive enhancement) ------------
   Base state: static.  JS adds mrp-prod-summary--can-stick only when the
   panel fits within the viewport.  No max-height, no overflow-y  -  the page
   is always the primary scroll container.
   ---------------------------------------------------------------------------- */
body.mrp-prod-page .summary.entry-summary {
	position: static;
}

body.mrp-prod-page .summary.entry-summary.mrp-prod-summary--can-stick {
	position: sticky;
	top: calc(var(--mrp-header-height, 72px) + 1.5rem);
	align-self: start;
}

/* Admin-bar offset: 32px on desktop */
body.admin-bar.mrp-prod-page .summary.entry-summary.mrp-prod-summary--can-stick {
	top: calc(var(--mrp-header-height, 72px) + 1.5rem + 32px);
}

/* Admin-bar offset: 46px when bar collapses to a narrow row (<= 782px viewport) */
@media screen and (max-width: 782px) {
	body.admin-bar.mrp-prod-page .summary.entry-summary.mrp-prod-summary--can-stick {
		top: calc(var(--mrp-header-height, 72px) + 1.5rem + 46px);
	}
}

/* -- Summary content --------------------------------------------------------- */
.mrp-prod-summary {
	font-size: var(--mrp-prod-type-body);
	color: var(--mrp-prod-color-text);
	line-height: 1.6;
}

.mrp-prod-summary__eyebrow {
	font-size: var(--mrp-prod-type-small);
	letter-spacing: 0.1em;
	color: var(--mrp-prod-color-accent);
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}

.mrp-prod-summary__title {
	font-size: var(--mrp-prod-type-h1);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.mrp-prod-summary__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.75rem;
}

.mrp-prod-summary__sku {
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
}

.mrp-prod-summary__badge {
	font-size: var(--mrp-prod-type-small);
	font-weight: 600;
	padding: 0.2em 0.65em;
	background: var(--mrp-prod-color-badge-bg);
	color: var(--mrp-prod-color-badge-text);
	border-radius: 2em;
}

.mrp-prod-summary__game-type {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--mrp-prod-type-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mrp-prod-color-accent);
}

.mrp-prod-summary__divider {
	border: none;
	border-top: 1px solid var(--mrp-prod-color-divider);
	margin: 1.25rem 0;
}

.mrp-prod-summary__headline {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.mrp-prod-summary__excerpt {
	margin-bottom: 1rem;
	color: var(--mrp-prod-color-muted);
}
.mrp-prod-summary__excerpt p { margin: 0 0 0.5rem; }
.mrp-prod-summary__excerpt p:last-child { margin-bottom: 0; }

.mrp-prod-summary__bullets {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}
.mrp-prod-summary__bullet {
	position: relative;
	padding-left: 1.25em;
	margin-bottom: 0.35em;
}
.mrp-prod-summary__bullet::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--mrp-prod-color-accent);
	font-weight: 700;
}

.mrp-prod-summary__price {
	margin-bottom: 1rem;
}
.mrp-prod-summary__price--starting .mrp-prod-summary__starting-label {
	display: block;
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	margin-bottom: 0.2em;
}

.mrp-prod-summary__availability {
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	margin: 0 0 0.75rem;
}

.mrp-prod-summary__pdfs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.mrp-prod-summary__warranty {
	margin-top: 1.25rem;
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
}

/* -- PDF download buttons ---------------------------------------------------- */
.mrp-prod-pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--mrp-prod-type-small);
	font-weight: 600;
	color: var(--mrp-prod-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}
.mrp-prod-pdf-btn::before {
	content: "↓";
	font-size: 1em;
}
.mrp-prod-pdf-btn:hover,
.mrp-prod-pdf-btn:focus {
	color: var(--mrp-prod-color-primary);
	text-decoration-thickness: 2px;
}

/* -- Customize section ------------------------------------------------------- */
.mrp-prod-customize {
	margin: 1.25rem 0;
}

.mrp-prod-customize__heading {
	font-size: var(--mrp-prod-type-h2);
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.mrp-prod-customize__intro {
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	margin: 0 0 1rem;
}

.mrp-prod-customize__groups {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* -- Configuration navigator (tab rail + panel)  -  v1.3.0 ---------------------- */

/*
 * Container: horizontal flex  -  [72px rail] | [panel area].
 * Without the mrp-prod-config-tabs-ready class (no JS), all panels render
 * in a stacked visible layout inside the panel column.
 */
.mrp-prod-config-nav {
	display: flex;
	flex-direction: row;
	margin-top: 1rem;
	border: 1px solid var(--mrp-prod-color-divider);
	border-radius: var(--mrp-prod-radius);
	overflow: hidden;
	background: #fff;
}

/* Vertical tab rail */
.mrp-prod-config-rail {
	width: var(--mrp-prod-config-rail-width);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--mrp-prod-color-divider);
	background: #fafaf8;
	overflow-y: auto;
}

/* Individual tab button */
.mrp-prod-config-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.2rem;
	padding: 0.65rem 0.2rem 0.5rem;
	width: 100%;
	min-height: 72px;
	border: none;
	border-left: 3px solid transparent;
	background: transparent;
	cursor: pointer;
	color: var(--mrp-prod-color-muted);
	font-size: 0.625rem;
	line-height: 1.2;
	text-align: center;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
	position: relative;
}

.mrp-prod-config-tab__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.mrp-prod-config-tab__label {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	max-width: 60px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Active tab */
.mrp-prod-config-tab--active,
.mrp-prod-config-tab[aria-selected="true"] {
	color: var(--mrp-prod-color-primary);
	background: #fff;
	border-left-color: var(--mrp-prod-color-primary);
}

.mrp-prod-config-tab:hover:not([aria-selected="true"]) {
	background: #f5f4f1;
	color: var(--mrp-prod-color-text);
}

.mrp-prod-config-tab:focus-visible {
	outline: 2px solid var(--mrp-prod-color-focus);
	outline-offset: -2px;
	z-index: 1;
}

/* Tab indicator badge  -  populated by JS on radio change */
.mrp-prod-config-tab__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--mrp-prod-radius);
	border: 1px solid var(--mrp-prod-color-divider);
	background: var(--mrp-prod-color-bg);
	overflow: hidden;
	font-size: 0.5625rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mrp-prod-color-text);
	flex-shrink: 0;
}

.mrp-prod-config-tab__indicator:empty {
	display: none;
}

.mrp-prod-config-tab__indicator-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrp-prod-config-tab__indicator-color {
	display: block;
	width: 100%;
	height: 100%;
}

/* Panel area */
.mrp-prod-config-panels {
	flex: 1 1 var(--mrp-prod-config-panel-min);
	min-width: 0;
	overflow: hidden;
}

/* Individual panel */
.mrp-prod-config-panel {
	padding: 1rem;
}

/*
 * No-JS: successive panels separated by a divider so they stack readably.
 * With JS (tabs-ready): only the active panel visible; the divider is moot.
 */
.mrp-prod-config-panel + .mrp-prod-config-panel {
	border-top: 1px solid var(--mrp-prod-color-divider);
}

.mrp-prod-config-tabs-ready .mrp-prod-config-panel + .mrp-prod-config-panel {
	border-top: none;
}

/* JS hides inactive panels via the [hidden] attribute */
.mrp-prod-config-tabs-ready .mrp-prod-config-panel[hidden] {
	display: none;
}

/* Panel info group (display-only, e.g., pa_finish) */
.mrp-prod-panel__info-group {
	margin-bottom: 1.25rem;
}

.mrp-prod-panel__info-label {
	font-size: var(--mrp-prod-type-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mrp-prod-color-text);
	margin: 0 0 0.4rem;
}

.mrp-prod-panel__info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.mrp-prod-panel__info-item {
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
}

.mrp-prod-panel__info-desc {
	display: block;
	font-size: 0.8125rem;
	color: var(--mrp-prod-color-muted);
	margin-top: 0.1em;
}

.mrp-prod-panel__note {
	margin-top: 0.75rem;
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	line-height: 1.5;
}

.mrp-prod-panel__pdf-link {
	margin-top: 0.75rem;
}

/* Option group  -  single attribute */
.mrp-prod-option-group {
	border: none;
	padding: 0;
	margin: 0;
}

.mrp-prod-option-group__label {
	display: block;
	font-size: var(--mrp-prod-type-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mrp-prod-color-text);
	margin-bottom: 0.5rem;
}

.mrp-prod-option-group__fixed-value {
	font-size: var(--mrp-prod-type-body);
	color: var(--mrp-prod-color-muted);
}

.mrp-prod-option-group__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Individual option button */
.mrp-prod-option {
	display: inline-flex;
	cursor: pointer;
}

.mrp-prod-option__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	padding: 0.45em 1.1em;
	font-size: var(--mrp-prod-type-small);
	font-weight: 500;
	border: 1.5px solid var(--mrp-prod-color-divider);
	border-radius: var(--mrp-prod-radius);
	background: #fff;
	color: var(--mrp-prod-color-text);
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
	user-select: none;
}

/* Selected state: CSS only via :checked + adjacent sibling selector */
.mrp-prod-option input[type="radio"]:checked + .mrp-prod-option__btn {
	background: var(--mrp-prod-color-primary);
	color: var(--mrp-prod-color-primary-fg);
	border-color: var(--mrp-prod-color-primary);
}

/* Hover  -  unselected */
.mrp-prod-option:hover .mrp-prod-option__btn {
	border-color: var(--mrp-prod-color-accent);
}

/* Focus-visible ring on the visible span */
.mrp-prod-option input[type="radio"]:focus-visible + .mrp-prod-option__btn {
	outline: 2px solid var(--mrp-prod-color-focus);
	outline-offset: 2px;
}

/* Config summary (live region, populated by JS) */
.mrp-prod-config-summary {
	margin-top: 1rem;
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
}
.mrp-prod-config-summary:empty {
	display: none;
}

/* -- CTA buttons ------------------------------------------------------------- */
.mrp-prod-ctas {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.mrp-prod-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.75em 2em;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--mrp-prod-radius-btn);
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	cursor: pointer;
}

.mrp-prod-cta-btn--primary {
	background: var(--mrp-prod-color-primary);
	color: var(--mrp-prod-color-primary-fg);
	border: 2px solid var(--mrp-prod-color-primary);
}
.mrp-prod-cta-btn--primary:hover,
.mrp-prod-cta-btn--primary:focus {
	background: #333;
	border-color: #333;
	color: #fff;
}

.mrp-prod-cta-btn--secondary {
	background: var(--mrp-prod-color-secondary);
	color: var(--mrp-prod-color-primary);
	border: 2px solid var(--mrp-prod-color-secondary-bd);
}
.mrp-prod-cta-btn--secondary:hover,
.mrp-prod-cta-btn--secondary:focus {
	background: #f0ece5;
	color: var(--mrp-prod-color-primary);
}

.mrp-prod-cta-btn:focus-visible {
	outline: 2px solid var(--mrp-prod-color-focus);
	outline-offset: 3px;
}

/* Add-to-cart wrapper: let WooCommerce style its button; constrain width */
.mrp-prod-ctas__add-to-cart .button,
.mrp-prod-ctas__add-to-cart .single_add_to_cart_button {
	display: flex;
	width: 100%;
	min-height: 52px;
	justify-content: center;
	align-items: center;
}

/* -- Product sections (below fold) ------------------------------------------ */
.mrp-prod-sections {
	margin-top: 3.5rem;
}

.mrp-prod-section {
	/* Offset for sticky header when jumping to anchor */
	scroll-margin-top: calc(var(--mrp-header-height, 72px) + 1rem);
	padding: 3rem 0;
	border-top: 1px solid var(--mrp-prod-color-divider);
}

.mrp-prod-section:first-child {
	border-top: none;
}

.mrp-prod-section__inner {
	max-width: 72ch;
}

.mrp-prod-section__heading {
	font-size: var(--mrp-prod-type-h2);
	font-weight: 700;
	margin: 0 0 1.25rem;
}

/* Lead paragraph  -  short description rendered as an intro above the body */
.mrp-prod-section__lead {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.65;
	color: var(--mrp-prod-color-text);
	max-width: 70ch;
	margin-bottom: 1.5rem;
}
.mrp-prod-section__lead p {
	margin: 0 0 0.75rem;
}
.mrp-prod-section__lead p:last-child {
	margin-bottom: 0;
}

.mrp-prod-section__body {
	color: var(--mrp-prod-color-muted);
	line-height: 1.7;
}

.mrp-prod-section__term-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrp-prod-section__term {
	font-size: var(--mrp-prod-type-body);
	color: var(--mrp-prod-color-muted);
}

.mrp-prod-section__term-desc {
	display: block;
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	margin-top: 0.15em;
}

/* Feature list */
.mrp-prod-section__feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.mrp-prod-section__feature {
	position: relative;
	padding-left: 1.35em;
	color: var(--mrp-prod-color-muted);
}

.mrp-prod-section__feature::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--mrp-prod-color-accent);
	font-weight: 700;
}

/* -- Mobile layout (single column) ------------------------------------------ */
@media (max-width: 59.9375rem) {
	body.mrp-prod-page main#wp--skip-link--target {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		padding-inline: 1rem !important;
	}

	body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.5rem !important;
		margin-top: 1rem !important;
	}

	body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns > .wp-block-column,
	body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns > .wp-block-column:first-child,
	body.mrp-prod-page main#wp--skip-link--target > .wp-block-columns > .wp-block-column:nth-child(2) {
		grid-column: 1 !important;
		width: 100% !important;
		max-width: none !important;
	}

	body.mrp-prod-page .flex-control-thumbs li img {
		width: 72px;
		height: 72px;
	}

	body.mrp-prod-page .summary.entry-summary,
	body.mrp-prod-page .summary.entry-summary.mrp-prod-summary--can-stick {
		position: static;
	}

	.mrp-prod-cta-btn {
		width: 100%;
	}

	.mrp-prod-option__btn {
		min-height: 44px;
	}

	.mrp-prod-section {
		padding: 2rem 0;
	}

	/* Config nav: stack vertically, rail becomes horizontal scrolling strip */
	.mrp-prod-config-nav {
		flex-direction: column;
	}

	.mrp-prod-config-rail {
		width: auto;
		flex-direction: row;
		flex-shrink: 0;
		border-right: none;
		border-bottom: 1px solid var(--mrp-prod-color-divider);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* Scrollbar hidden for aesthetics; keyboard-reachable */
		scrollbar-width: none;
	}

	.mrp-prod-config-rail::-webkit-scrollbar {
		display: none;
	}

	.mrp-prod-config-tab {
		flex-shrink: 0;
		min-width: var(--mrp-prod-config-rail-width);
		border-left: none;
		border-bottom: 3px solid transparent;
		padding-bottom: 0.65rem;
		scroll-snap-align: start;
	}

	.mrp-prod-config-tab--active,
	.mrp-prod-config-tab[aria-selected="true"] {
		border-bottom-color: var(--mrp-prod-color-primary);
		border-left-color: transparent;
	}

	.mrp-prod-config-panels {
		min-width: 0;
	}
}

/* -- Focus styles (global within scope) -------------------------------------- */
body.mrp-prod-page a:focus-visible,
body.mrp-prod-page button:focus-visible,
body.mrp-prod-page input:focus-visible,
body.mrp-prod-page select:focus-visible {
	outline: 2px solid var(--mrp-prod-color-focus);
	outline-offset: 2px;
}

/* -- Picture swatch options (pa_stain, pa_cloth, pa_pocket) ------------------ */

.mrp-prod-option-group--swatch .mrp-prod-option-group__options {
	flex-wrap: wrap;
	gap: 0.75rem 0.5rem;
}

/* Label wrapper  -  stacks visual + text label vertically */
.mrp-prod-option--swatch {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	cursor: pointer;
	/* 44px minimum touch target provided by the 88px swatch + label area */
}

/* Visual container: 88×88 square */
.mrp-prod-option__swatch-visual {
	position: relative;
	width: 88px;
	height: 88px;
	border-radius: var(--mrp-prod-radius);
	border: 2px solid var(--mrp-prod-color-divider);
	overflow: hidden;
	transition: border-color 0.12s ease, outline-color 0.12s ease;
	background: var(--mrp-prod-color-bg);
	flex-shrink: 0;
}

.mrp-prod-option__swatch-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrp-prod-option__swatch-color {
	display: block;
	width: 100%;
	height: 100%;
}

/* Checkmark badge  -  hidden until selected */
.mrp-prod-option__swatch-check {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(26, 26, 26, 0.78);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

/* Text label beneath the swatch */
.mrp-prod-option__swatch-label {
	font-size: 0.8125rem;
	text-align: center;
	max-width: 88px;
	overflow-wrap: break-word;
	line-height: 1.25;
	color: var(--mrp-prod-color-text);
}

/* Optional term description */
.mrp-prod-option__swatch-desc {
	font-size: 0.75rem;
	color: var(--mrp-prod-color-muted);
	text-align: center;
	max-width: 88px;
	overflow-wrap: break-word;
	line-height: 1.25;
}

/* -- Selected swatch state --------------------------------------------------- */
/* Uses border + outline + checkmark  -  not colour alone */

.mrp-prod-option--swatch input[type="radio"]:checked + .mrp-prod-option__swatch-visual {
	border-color: var(--mrp-prod-color-primary);
	border-width: 3px;
	outline: 2px solid var(--mrp-prod-color-primary);
	outline-offset: 1px;
}

.mrp-prod-option--swatch input[type="radio"]:checked + .mrp-prod-option__swatch-visual .mrp-prod-option__swatch-check {
	opacity: 1;
}

/* Hover  -  unselected */
.mrp-prod-option--swatch:hover .mrp-prod-option__swatch-visual {
	border-color: var(--mrp-prod-color-accent);
}

/* Focus-visible ring on the visual container */
.mrp-prod-option--swatch input[type="radio"]:focus-visible + .mrp-prod-option__swatch-visual {
	outline: 2px solid var(--mrp-prod-color-focus);
	outline-offset: 3px;
}

/* -- Fixed-spec visual (1 term) ---------------------------------------------- */

.mrp-prod-option-group--fixed-visual .mrp-prod-option-group__fixed-body {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

/* Smaller static swatch in the fixed spec row */
.mrp-prod-option__swatch-visual--static {
	width: 48px;
	height: 48px;
	border-radius: var(--mrp-prod-radius);
	border: 1px solid var(--mrp-prod-color-divider);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--mrp-prod-color-bg);
}

.mrp-prod-option-group__fixed-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.mrp-prod-option-group__fixed-desc {
	font-size: 0.8125rem;
	color: var(--mrp-prod-color-muted);
}


/* -- pa_stain portrait swatch overrides ------------------------------------- */

/*

 * Stain images are 444×543 px (portrait).  Override the default 88×88 square

 * so the full photograph is visible without cropping.

 * Scoped to [data-attribute="pa_stain"]  --  cloth and pocket swatches remain square.

 */



/* Interactive multi-term portrait swatches */

body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option__swatch-visual {

	width: 88px;

	height: 108px;

	aspect-ratio: 444 / 543;

}



body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option__swatch-img {

	object-fit: contain;

	object-position: center;

}



/* Labels sit below portrait swatches  --  allow a touch more width to wrap cleanly */

body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option__swatch-label,

body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option__swatch-desc {

	max-width: 96px;

}



/* Fixed single-term portrait swatch */

body.mrp-prod-page .mrp-prod-option-group--fixed-visual[data-attribute="pa_stain"] .mrp-prod-option__swatch-visual--static {

	width: 48px;

	height: 59px;

	aspect-ratio: 444 / 543;

}



body.mrp-prod-page .mrp-prod-option-group--fixed-visual[data-attribute="pa_stain"] .mrp-prod-option__swatch-img {

	object-fit: contain;

	object-position: center;

}

/* Top-align stain swatches so rows start flush regardless of label wrap —
   applied in the mobile breakpoint below, not globally. */


/* -- Stain swatch shared detail panel --------------------------------------- */
/*
 * Rendered in all viewports by PHP but hidden on desktop.
 * Revealed and used only at max-width: 48rem.
 * Per-swatch descriptions are visually hidden at 48rem via the mobile
 * breakpoint below and linked via aria-describedby for screen readers.
 */
.mrp-prod-swatch-detail {
	display: none; /* hidden on desktop; revealed at mobile breakpoint */
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--mrp-prod-color-bg);
	border: 1px solid var(--mrp-prod-color-divider);
	border-radius: var(--mrp-prod-radius);
	box-sizing: border-box;
}

.mrp-prod-swatch-detail__name {
	display: block;
	font-size: var(--mrp-prod-type-small);
	font-weight: 600;
	color: var(--mrp-prod-color-text);
	margin-bottom: 0.25rem;
}

.mrp-prod-swatch-detail__description {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--mrp-prod-color-muted);
	line-height: 1.5;
}

/* Placeholder italic style before any stain is hovered/selected */
.mrp-prod-swatch-detail--empty .mrp-prod-swatch-detail__description {
	font-style: italic;
}



/* -- Accessory package cards (pa_accessory-package) ---------------------------------- */



.mrp-prod-option-group--pkg .mrp-prod-option-group__options {

	display: flex;

	flex-wrap: wrap;

	gap: 1rem;

}



/* Each package label is a flex container so the card fills its width */

.mrp-prod-option--pkg {

	flex: 0 1 180px;

	min-width: 160px;

	max-width: 220px;

	display: flex;

	cursor: pointer;

}



/* Card shell */

.mrp-prod-option__pkg-card {

	display: flex;

	flex-direction: column;

	width: 100%;

	border: 2px solid var(--mrp-prod-color-divider);

	border-radius: var(--mrp-prod-radius);

	overflow: hidden;

	background: #fff;

	transition: border-color 0.12s ease;

}



/* 4:3 image area */

.mrp-prod-option__pkg-img-wrap {

	position: relative;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	background: var(--mrp-prod-color-bg);

	flex-shrink: 0;

}



.mrp-prod-option__pkg-img-wrap img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

}



/* Checkmark badge */

.mrp-prod-option__pkg-check {

	position: absolute;

	top: 6px;

	right: 6px;

	width: 26px;

	height: 26px;

	border-radius: 50%;

	background: rgba(26, 26, 26, 0.78);

	color: #fff;

	display: flex;

	align-items: center;

	justify-content: center;

	opacity: 0;

	transition: opacity 0.12s ease;

	pointer-events: none;

}



/* Package name and description */

.mrp-prod-option__pkg-name {

	font-size: var(--mrp-prod-type-small);

	font-weight: 600;

	padding: 0.5rem 0.65rem 0.1rem;

	line-height: 1.3;

}



.mrp-prod-option__pkg-desc {

	font-size: 0.8125rem;

	color: var(--mrp-prod-color-muted);

	padding: 0 0.65rem 0.65rem;

	line-height: 1.4;

}



/* -- Selected package state ------------------------------------------------------ */

/* Uses border + background + checkmark  --  not colour alone */



.mrp-prod-option--pkg input[type="radio"]:checked + .mrp-prod-option__pkg-card {

	border-color: var(--mrp-prod-color-primary);

	border-width: 3px;

	background: #fafaf8;

}



.mrp-prod-option--pkg input[type="radio"]:checked + .mrp-prod-option__pkg-card .mrp-prod-option__pkg-check {

	opacity: 1;

}



/* Hover  --  unselected */

.mrp-prod-option--pkg:hover .mrp-prod-option__pkg-card {

	border-color: var(--mrp-prod-color-accent);

}



/* Focus-visible ring on the card */

.mrp-prod-option--pkg input[type="radio"]:focus-visible + .mrp-prod-option__pkg-card {

	outline: 2px solid var(--mrp-prod-color-focus);

	outline-offset: 2px;

}



/* -- Accessory packages section (below fold) --------------------------------------------- */



.mrp-prod-section__pkg-list {

	list-style: none;

	margin: 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	gap: 0.9rem;

}



.mrp-prod-section__pkg-item {

	display: flex;

	flex-direction: column;

	gap: 0.15rem;

}



.mrp-prod-section__pkg-name {

	font-size: var(--mrp-prod-type-body);

	color: var(--mrp-prod-color-text);

}



.mrp-prod-section__pkg-desc {

	font-size: var(--mrp-prod-type-small);

	color: var(--mrp-prod-color-muted);

	line-height: 1.5;

}



/* -- Mobile adjustments for swatches and packages ----------------------------- */



@media (max-width: 59.9375rem) {

	/* Packages: two per row on narrow screens */

	.mrp-prod-option--pkg {

		flex: 0 1 calc(50% - 0.5rem);

		min-width: 140px;

	}



	/* Stain: reduced portrait on narrow screens; touch target stays ≥44px */

	body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option__swatch-visual {

		width: 72px;

		height: 88px;

	}

}

/* -- Mobile stain grid and detail panel (max-width: 48rem / 768px) ----------- */
/*
 * Scoped strictly to max-width: 48rem. Desktop (769px+) is not touched.
 *
 *   - stain swatch flex-wrap is replaced with a CSS grid;
 *   - per-swatch descriptions are sr-hidden, still accessible via
 *     aria-describedby and the inline data-swatch-desc attribute;
 *   - the shared detail panel is revealed below the stain grid.
 */
@media (max-width: 48rem) {

	/* Reveal the shared stain detail panel */
	.mrp-prod-swatch-detail {
		display: block;
	}

	/* Visually hide pa_stain per-swatch descriptions; keep in accessibility tree */
	.mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option__swatch-desc {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Stain option items fill their grid cell; image + name remain centered */
	.mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option--swatch {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		justify-content: center;
	}

	/* 3-column stain grid for 431px–768px */
	body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option-group__options {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.75rem 0.5rem;
		align-items: start;
	}

	/* ── Mobile summary compaction ───────────────────────────────────────── */

	/* Hide game-type badge and availability label on mobile */
	.mrp-prod-summary__game-type {
		display: none;
	}
	.mrp-prod-summary__availability {
		display: none;
	}
	/* Collapse the meta-row when it only contained the now-hidden game-type */
	.mrp-prod-summary__meta-row--game-type-only {
		display: none;
	}
	/* Tighten the divider between the price area and the Configure heading */
	.mrp-prod-summary__divider {
		margin: 0.625rem 0;
	}

	/* ── Compact thumbnail strip ─────────────────────────────────────────── */
	body.mrp-prod-page .flex-control-thumbs {
		margin-top: 0.375rem;
		gap: 0.375rem;
		padding-bottom: 0.125rem !important;
	}
	body.mrp-prod-page .flex-control-thumbs li img {
		width: 56px;
		height: 36px;
		object-fit: contain;
		object-position: center;
		background: #f5f5f3;
		box-sizing: border-box;
	}

	/* ── Compact horizontal tab rail ─────────────────────────────────────── */
	.mrp-prod-config-rail {
		width: 100%;
		scroll-snap-type: x proximity;
	}
	.mrp-prod-config-tab {
		flex: 1 0 72px;
		width: auto;
		min-width: 72px;
		min-height: 48px;
		padding: 0.35rem 0.45rem;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0.3rem;
	}
	.mrp-prod-config-tab__icon {
		width: 15px;
		height: 15px;
	}
	.mrp-prod-config-tab__label {
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		white-space: nowrap;
	}
	.mrp-prod-config-tab__indicator {
		width: 20px;
		height: 20px;
		font-size: 0.5rem;
		flex-shrink: 0;
	}

	/* ── Compact panel padding ───────────────────────────────────────────── */
	.mrp-prod-config-panel {
		padding: 0.875rem 1rem;
	}
}

/* 2-column stain grid + smaller thumbnails at 430px and below */
@media (max-width: 26.875rem) {
	body.mrp-prod-page .mrp-prod-option-group--swatch[data-attribute="pa_stain"] .mrp-prod-option-group__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.mrp-prod-page .flex-control-thumbs li img {
		width: 48px;
		height: 30px;
	}
}


/* -- Reduced motion -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mrp-prod-option__btn,

	.mrp-prod-cta-btn,

	.mrp-prod-pdf-btn,

	.mrp-prod-option__swatch-visual,

	.mrp-prod-option__swatch-check,

	.mrp-prod-option__pkg-card,

	.mrp-prod-option__pkg-check,

	.mrp-prod-config-tab {

		transition: none;

	}

}

/* -- Promotional pricing  -  single product page (v1.4.2) ----------------------- */
/*
   Applies to products with an eligible promotional brand (presidential-
   billiards 15%, olhausen 10%) in pool-tables or shuffleboards.
   Scoped under body.mrp-prod-page via the mrp-prod- prefix.
   No colour is used as the sole indicator of a discount.
*/
.mrp-prod-promotion {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid var(--mrp-prod-color-divider);
border-radius: var(--mrp-prod-radius);
background: #fafaf8;
}

/* Badge: uppercase dark pill  -  mirrors the Mueller brand voice */
.mrp-prod-promotion__badge {
display: inline-block;
padding: 0.25em 0.7em;
background: var(--mrp-prod-color-primary);
color: var(--mrp-prod-color-primary-fg);
font-size: var(--mrp-prod-type-small);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 2px;
align-self: flex-start;
}

/* Price pair: original (struck through) and promotional */
.mrp-prod-promotion__prices {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3em 0.75em;
}

.mrp-prod-promotion__regular {
font-size: var(--mrp-prod-type-body);
color: var(--mrp-prod-color-muted);
text-decoration: line-through;
font-style: normal;
}

.mrp-prod-promotion__current {
font-size: 1.375rem;
font-weight: 700;
color: var(--mrp-prod-color-text);
text-decoration: none;
font-style: normal;
}

/*
   Strip WooCommerce currency-wrapper styling that may otherwise override
   the font-size and font-weight inherited from del/ins.
*/
.mrp-prod-promotion__regular .woocommerce-Price-amount,
.mrp-prod-promotion__current .woocommerce-Price-amount {
font-size: inherit;
font-weight: inherit;
color: inherit;
}

/* Fallback note when no numeric price is available (quote-only product) */
.mrp-prod-promotion__note {
font-size: var(--mrp-prod-type-small);
color: var(--mrp-prod-color-muted);
margin: 0;
font-style: italic;
}

/* Fine-print disclaimer, visually separated from the price pair */
.mrp-prod-promotion__disclaimer {
font-size: 0.8125rem;
color: var(--mrp-prod-color-muted);
margin: 0;
line-height: 1.55;
padding-top: 0.5rem;
border-top: 1px solid var(--mrp-prod-color-divider);
}

/* Price-context label: rendered above the del/ins price pair */
.mrp-prod-promotion__price-label {
	display: block;
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	margin-bottom: 0.25rem;
	font-style: italic;
}

/* Source note: rendered below price pair when active WC sale wins */
.mrp-prod-promotion__source-note {
	font-size: var(--mrp-prod-type-small);
	color: var(--mrp-prod-color-muted);
	margin: 0.25rem 0 0;
	font-style: italic;
}