/**
 * Product gallery box: photographs by default, dimensioned plan on request.
 *
 * Loaded after style.css so these rules settle the specificity ties with
 * WooCommerce's own stylesheet.
 */

/* WooCommerce pins its gallery to 48% of the container, and its selector
   carries #content — an id, so it outranks any number of classes. Matching
   that id is the only way to win without !important. Here the photograph IS
   the sales pitch, so it takes the whole column. */
.woocommerce #content div.product .mc-gallery div.images,
.woocommerce div.product .mc-gallery div.images,
.mc-gallery .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
	opacity: 1;
}

.mc-gallery .woocommerce-product-gallery__image img,
.mc-gallery .woocommerce-product-gallery__wrapper img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--surface-2);
}

/* Thumbnail strip under the main photograph. */
.mc-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
}
/* FlexSlider sizes these to a quarter of the row and wins on specificity;
   we only restyle them rather than fight it. */
.mc-gallery .flex-control-thumbs li {
	margin: 0;
	list-style: none;
}
.mc-gallery .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	cursor: pointer;
	opacity: .6;
	transition: opacity .15s ease, border-color .15s ease;
}
.mc-gallery .flex-control-thumbs img:hover,
.mc-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--brand);
}

.mc-gallery .woocommerce-product-gallery__trigger { z-index: 5; }

/* ---- Photos / plan, one at a time in the same box ---- */
.mc-viewswitch {
	display: inline-flex;
	gap: .25rem;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .22rem;
	margin-bottom: .9rem;
}
.mc-viewswitch button {
	border: 0;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-size: .74rem;
	letter-spacing: .05em;
	padding: .38rem .95rem;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}
.mc-viewswitch button:hover { color: var(--text); }
.mc-viewswitch button.is-on {
	background: var(--brand);
	color: var(--brand-contrast);
	font-weight: 600;
}

.mc-view { display: none; }
.mc-view.is-on { display: block; }

/* The plan is a drawing, not a photo: it needs breathing room, not a frame
   that competes with the product shots. */
.mc-view[data-mc-view="plan"] .mc-plate {
	box-shadow: none;
	padding: 1.2rem;
}