/*
 * Coastal Moms IV Hydration & Wellness Treatments — the pieces and the list.
 *
 * PHONE FIRST. The whole product ([cmiv_treatment]) is styled by Coastal Moms IV Hydration & Wellness's own
 * stylesheet, the same one as the booking card, printed beside it. This file
 * styles only the piece shortcodes and the grid, and inherits the site's fonts
 * and colors. Two variables to tune it from a theme:
 *   --cmiv-tr-accent   prices and small marks
 *   --cmiv-tr-line     hairlines and card borders
 */

.cmiv-tr-product,
.cmiv-tr-grid,
.cmiv-tr-addons,
.cmiv-tr-details,
.cmiv-tr-gallery {
	--cmiv-tr-accent: currentColor;
	--cmiv-tr-line: rgba(0, 0, 0, 0.12);
	--cmiv-tr-soft: rgba(0, 0, 0, 0.6);
	box-sizing: border-box;
}

/*
 * ⚠ THE PHOTOS ARE NOT THE THEME'S (2026-10-16). Coastal Moms IV Hydration & Wellness's gallery frames each
 * photo at 4:3 and fits it inside; a theme's own "img { height: auto }" — every
 * theme has one — undid that, and a square photo was cut off at the bottom.
 * Restated here, inside the product only, strongly enough to win.
 */
.cmiv-tr-product .g-main img {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
	object-fit: contain !important; margin: 0 !important;
}
.cmiv-tr-product .g-main[data-fit="cover"] img { object-fit: cover !important; }
.cmiv-tr-product .g-thumb img,
.cmiv-tr-product .pv-ao img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }

/*
 * THE WHOLE PAGE — [cmiv_treatment] (2026-10-16). Phone first, one column:
 * the product (Coastal Moms IV Hydration & Wellness's own product view, add-ons and all), then the booking
 * card. From 960px: the product on the left, the card on the right, staying
 * in view while the page scrolls.
 *
 * ⚠ "Staying in view" is position: sticky, which any ancestor with
 * overflow: hidden switches off. If the card scrolls away on a Breakdance
 * page, look for overflow on the section or container holding it.
 */
.cmiv-tr-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "side";
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.cmiv-tr-page * { box-sizing: border-box; }
.cmiv-tr-main { grid-area: main; min-width: 0; }
.cmiv-tr-side { grid-area: side; min-width: 0; scroll-margin-top: 90px; }
.cmiv-tr-card tami-widget { display: block; width: 100%; }

@media (min-width: 960px) {
	.cmiv-tr-page {
		grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr);
		grid-template-areas: "main side";
		gap: 28px 48px;
	}
	.cmiv-tr-side { position: sticky; top: 24px; align-self: start; }
}

/* The phone's Book now bar: only under 960px, hidden while the card is on screen. */
.cmiv-tr-bar { display: none; }
@media (max-width: 959px) {
	.cmiv-tr-bar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
		display: flex; align-items: center; gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--cmiv-tr-line, rgba(0, 0, 0, 0.12));
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;
	}
	.cmiv-tr-bar.is-hidden { transform: translateY(110%); }
	.cmiv-tr-bar-text { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
	.cmiv-tr-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.cmiv-tr-bar-btn {
		flex: 0 0 auto; padding: 11px 20px; border-radius: 999px;
		background: var(--tami-olive, #5c7c6b); color: #fff; font-weight: 600; text-decoration: none;
	}
}

.cmiv-tr-note { padding: 10px 12px; border: 1px dashed var(--cmiv-tr-line, #ccc); font-size: 14px; }

.cmiv-tr-price { font-weight: 600; color: var(--cmiv-tr-accent); }
.cmiv-tr-was { margin-left: 6px; font-weight: 400; opacity: 0.6; }
.cmiv-tr-summary { margin: 0; color: var(--cmiv-tr-soft); }

.cmiv-tr-image img { display: block; width: 100%; height: auto; border-radius: 12px; }

.cmiv-tr-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.cmiv-tr-shot { display: block; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--cmiv-tr-line); }
.cmiv-tr-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cmiv-tr-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.cmiv-tr-details dt { font-weight: 600; }
.cmiv-tr-details dd { margin: 0; }

.cmiv-tr-addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmiv-tr-addon { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--cmiv-tr-line); border-radius: 12px; }
.cmiv-tr-addon img,
.cmiv-tr-addon-blank { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: rgba(0, 0, 0, 0.05); }
.cmiv-tr-addon-text { display: grid; gap: 2px; min-width: 0; }
.cmiv-tr-addon-price { color: var(--cmiv-tr-accent); font-weight: 600; }
.cmiv-tr-addon-summary { color: var(--cmiv-tr-soft); font-size: 0.92em; }

/* The list: one column on a phone, two from 600px, up to columns="" from 960px. */
.cmiv-tr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 600px) { .cmiv-tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cmiv-tr-grid { grid-template-columns: repeat(var(--cmiv-tr-cols, 3), minmax(0, 1fr)); } }

.cmiv-tr-card { display: flex; flex-direction: column; border: 1px solid var(--cmiv-tr-line); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; background: #fff; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.cmiv-tr-card:hover,
.cmiv-tr-card:focus-visible { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.cmiv-tr-card-img { display: block; aspect-ratio: 4 / 3; background: rgba(0, 0, 0, 0.04); overflow: hidden; }
.cmiv-tr-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmiv-tr-card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }