/* Altar Shape Cutters — boxes over a native variable product (Nick 2026-10-24). */

/* Hide WooCommerce's default dropdown table; the selects stay in the DOM and keep
   driving everything, they are just not what the customer touches. */
.mwp-altar-form table.variations { display: none; }

.mwp-altar { margin: 0 0 1.1rem; }

.mwp-altar__preview {
	background: #fff;
	border: 1px solid #e3dacc;
	border-radius: 14px;
	padding: 0.75rem 1rem 0.9rem;
	margin-bottom: 1.1rem;
}

.mwp-altar__preview-label {
	margin: 0 0 0.4rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #7a6a5c;
}

.mwp-altar__preview-label em {
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #a89683;
}

/* min-height, not height: the page should not jump between a Mini and a Large, but a
   bundle can be six Larges (or twenty-four) and a fixed height made them spill out over
   the controls below. Wrapped rows stack instead. */
.mwp-altar__strip {
	display: flex;
	align-items: flex-end;     /* pieces share a base line, like objects on a table */
	align-content: center;     /* ...and the block of them sits in the middle of the panel */
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.9rem;
	min-height: 140px;
}

.mwp-altar__sp path {
	fill: #e8e2d6;
	stroke: #8a6a52;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.mwp-altar__group { margin-bottom: 1rem; }

.mwp-altar__label {
	margin: 0 0 0.45rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a6a52;
}

.mwp-altar__boxes {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mwp-altar__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 104px;
	padding: 0.7rem 0.4rem;
	border: 1.5px solid #e3dacc;
	border-radius: 12px;
	background: #fff;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.mwp-altar__box:hover { border-color: #c9a98c; }

.mwp-altar__box.is-on {
	border-color: #b5633a;
	background: #fbf1ea;
	box-shadow: 0 0 0 2px rgba(181, 99, 58, 0.16);
}

.mwp-altar__box:focus-visible { outline: 2px solid #b5633a; outline-offset: 2px; }

.mwp-altar__box.is-bundle { background: #fcf8f2; border-style: dashed; }
.mwp-altar__box.is-bundle.is-on { border-style: solid; }

.mwp-altar__name { font-size: 0.78rem; font-weight: 600; text-align: center; }

.mwp-altar__icon path { fill: #e8e2d6; stroke: #8a6a52; stroke-width: 3; }

.mwp-altar__mgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	place-items: center;
}

.mwp-altar__szart {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	height: 36px;
}

.mwp-altar__mini path {
	fill: #e8e2d6;
	stroke: #8a6a52;
	stroke-width: 4;
	vector-effect: non-scaling-stroke;
}

.mwp-altar__again {
	margin: 0.7rem 0 0;
	font-size: 0.78rem;
	color: #9a8876;
}

@media (max-width: 760px) {
	.mwp-altar__boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mwp-altar__strip { min-height: 112px; }
}

/* Sits after the cart form (see the hook in inc/altar-variations.php), so it just needs
   to be a plain full-width line. */
.mwp-altar__again {
	clear: both;
	width: 100%;
	margin: 0.7rem 0 0;
}

/* 3/4 renders in the preview (the size boxes keep the flat outlines — crisper at 34px). */
.mwp-altar__render {
	display: block;
	height: auto;
	max-width: 100%;
}

/* All shapes + all sizes: each shape's four sizes nest inside one another, concentric and
   sharing a base, rather than 24 cutters in a row. */
.mwp-altar__nest {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
}

.mwp-altar__nest .mwp-altar__render {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
/* Centre on centre, not bottom-aligned. Nesting cutters are concentric in plan, so in
   this 3/4 view their plan centres project to the same point — sharing a base line
   instead made the small ones sit in FRONT of the big one's near wall and read as a
   stack. They are scaled copies of one shape, so aligning bounding-box centres aligns
   the plan centres. */

/* Under the photo thumbnails in the image column (Nick 2026-10-27); hidden until a
   shape or size is picked. Room for a Large at the fixed preview scale. */
.mwp-altar__preview { margin: 1.25rem 0 0; }
.mwp-altar__preview.is-empty { display: none; }
.mwp-altar__preview .mwp-altar__strip { min-height: 240px; }

@media (max-width: 760px) {
	.mwp-altar__preview .mwp-altar__strip { min-height: 180px; }
}

/* All six shapes: 3 per row, so never more than 2 rows (Nick 2026-10-27).
   altar-swatches.js scales the renders down to fit a column. */
.mwp-altar__strip.is-grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-items: center;
	align-items: end;
	align-content: center;
}

/* The theme lays out form.variations_form as a wrapping flex row, so the picker was a
   flex item shrink-wrapping to its content — 282px inside a 507px column, which squeezed
   the boxes down to 64px each. Take the full row. */
.mwp-altar {
	flex: 0 0 100%;
	width: 100%;
}

/* The gallery and the preview share the image column. .mwp-altar-media takes the
   gallery's place in the float layout (52% left / summary 44% right), mirroring the
   theme's rule and its 1024px stacking breakpoint; the gallery inside it drops its own
   52% float (the theme sets that with !important, hence the !important here). */
.woocommerce div.product .mwp-altar-media {
	width: 52%;
	float: left;
}

.woocommerce div.product .mwp-altar-media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.woocommerce div.product .mwp-altar-media {
		width: 100%;
		float: none;
		margin-bottom: var(--space-xl);
	}
}