/*
 * The product detail block, in three layouts.
 *
 * Michael, 2026-09-23 Zoom with Diego, 27:13, on Safety's product page:
 *   "we need different variations from this. This looks like the same from our
 *    original DTLA Print one. So we need these restyled with a different CSS,
 *    that an agent can choose from a predefined pattern."
 *
 * ONE template renders all three -- woocommerce/single-product/tabs/tabs.php,
 * unchanged. The layout is chosen on the store record
 * (`design.product_detail_style`), lands as html[data-st-product-detail-style],
 * and this file plus assets/st-product-detail.js are the whole difference.
 * Forking the Woo template three ways would be three files to keep in step with
 * WooCommerce's own version bumps, and the sections, their order and their copy
 * are identical in all three -- only the geometry differs, which is what CSS is.
 *
 * ── Tokens only ───────────────────────────────────────────────────────────────
 *
 * No colour, no font family, no store name. The rail's divider and the stacked
 * layout's rules are currentColor at low alpha, so they are the store's own
 * text colour on every store. Spacing comes from the tokens declared once below.
 *
 * ── The interlinking block stays inside every variant ─────────────────────────
 *
 * `.st-know-your` (the "know your <category>" block) renders after the panels
 * and is NOT a panel, so none of the three hides it. Stated as a rule at the
 * bottom of this file rather than left to luck, because `stacked` works by
 * unhiding `.wc-tab` and a future selector that unhid "everything in the
 * wrapper" would have swallowed it.
 */

:root {
	--st-pd-gap: 32px;
	--st-pd-rail-width: 220px;
	--st-pd-rule: color-mix(in srgb, currentColor 14%, transparent);
}

/* ------------------------------------------------------------------- 1. tabs
 *
 * The default, and what every store renders today: a horizontal tab list, one
 * panel at a time, driven by WooCommerce's own tabs script. Nothing here changes
 * it -- the rules below only give it the same outer rhythm as the other two, so
 * the three are variants of one block rather than one block and two new ones.
 */
html[data-st-product-detail-style='tabs'] .woocommerce-tabs {
	margin-block-start: var(--st-pd-gap);
}

html[data-st-product-detail-style='tabs'] .woocommerce-tabs > ul.tabs {
	border-block-end: 1px solid var(--st-pd-rule);
}

/* ---------------------------------------------------------------- 2. stacked
 *
 * Every section open, in the order the store declared them, each under its own
 * heading. For a buyer who reads rather than clicks -- a uniform programme
 * decision is made on specification, and specification behind a tab is
 * specification nobody read.
 *
 * assets/st-product-detail.js puts the heading inside each panel and drops the
 * tab roles; without it this would be a wall of unlabelled prose, which is why
 * the CSS keys off .st-pd--stacked (the class the shim adds) and not off the
 * attribute alone. A build where the script did not load stays on tabs.
 */
.woocommerce-tabs.st-pd--stacked > ul.tabs {
	display: none;
}

.woocommerce-tabs.st-pd--stacked {
	display: flex;
	flex-direction: column;
	row-gap: var(--st-pd-gap);
	margin-block-start: var(--st-pd-gap);
}

.woocommerce-tabs.st-pd--stacked > .wc-tab {
	display: block;
	padding-block-start: var(--st-pd-gap);
	border-block-start: 1px solid var(--st-pd-rule);
}

.woocommerce-tabs.st-pd--stacked > .wc-tab:first-of-type {
	padding-block-start: 0;
	border-block-start: 0;
}

.woocommerce-tabs.st-pd--stacked .st-pd__heading {
	margin-block: 0 1rem;
}

/* ------------------------------------------------------------- 3. two-column
 *
 * The tab list becomes a rail beside the content instead of a strip above it,
 * and it sticks: on a long specification the buyer can still see the other
 * sections. Still one panel at a time, still WooCommerce's own script -- this
 * variant is geometry only, which is why it needs no shim.
 */
@media (min-width: 900px) {
	html[data-st-product-detail-style='two-column'] .woocommerce-tabs:not(.st-pd--stacked) {
		display: grid;
		grid-template-columns: var(--st-pd-rail-width) minmax(0, 1fr);
		column-gap: var(--st-pd-gap);
		margin-block-start: var(--st-pd-gap);
	}

	html[data-st-product-detail-style='two-column'] .woocommerce-tabs:not(.st-pd--stacked) > ul.tabs {
		grid-column: 1;
		grid-row: 1 / -1;
		display: flex;
		flex-direction: column;
		row-gap: 0.25rem;
		margin: 0;
		padding: 0;
		border-block-end: 0;
		border-inline-end: 1px solid var(--st-pd-rule);
		position: sticky;
		top: var(--st-pd-gap);
		align-self: start;
	}

	html[data-st-product-detail-style='two-column'] .woocommerce-tabs:not(.st-pd--stacked) > ul.tabs > li {
		margin: 0;
		border: 0;
		background: none;
	}

	html[data-st-product-detail-style='two-column'] .woocommerce-tabs:not(.st-pd--stacked) > ul.tabs > li > a {
		display: block;
		padding: 0.6rem 0.9rem;
	}

	/* The active row is marked by an inline edge rather than a fill, so a loud
	   palette and a quiet one read the same -- the lesson already learned on the
	   filter rail (root CLAUDE.md, "Weight is not difference"). */
	html[data-st-product-detail-style='two-column'] .woocommerce-tabs:not(.st-pd--stacked) > ul.tabs > li.active > a {
		box-shadow: inset 2px 0 0 0 currentColor;
	}

	html[data-st-product-detail-style='two-column'] .woocommerce-tabs:not(.st-pd--stacked) > .wc-tab {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ------------------------------------------------- the interlink, in all three
 *
 * "know your <category>" (the 🛍️ workstream's block) links the product at the
 * store's own classification page -- Michael 27:41, "interlinking on these pages
 * can be very beneficial". It renders after the panels and belongs to none of
 * them, so it is visible whichever layout the store chose.
 */
.woocommerce-tabs ~ .st-know-your,
.woocommerce-tabs .st-know-your {
	display: block;
	margin-block-start: var(--st-pd-gap);
}

/* ── The measure, in all three layouts · WB-254 ──────────────────────────────
 * Michael, 2026-09-25 (V1 20:15), on the product panel:
 *   "so intention. The way that this is written with the line all messed up,
 *    this is on the right."
 * 20:41: *"Just keep it simple. Show them what they need. Very, very cleanly, a
 * little bit of formatting."*
 *
 * The panels had no measure at all, so a description ran the full width of its
 * column — 120+ characters a line at desktop, and breaking in the wrong places
 * at tablet where the column is narrower than the words are long.
 *
 * One token, in characters rather than pixels, so it holds at every size the
 * fluid type scale produces. This is a PROPERTY the three layouts read, not a
 * fourth layout and not an edit to any of them: `tabs`, `stacked` and
 * `two-column` each keep their own geometry and all three get the measure.
 */
.wc-tab p,
.wc-tab li,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
	max-width: var(--wp--custom--st-measure, 68ch);
}

/* A table or a spec grid inside a panel is data, not prose, and a measure on it
   would squeeze columns rather than help anybody read them. */
.wc-tab table,
.woocommerce-Tabs-panel table,
.wc-tab table p,
.woocommerce-Tabs-panel table p {
	max-width: none;
}

/* ------------------------------------------------------------------- 4. floor
 *
 * Monday Merch's anatomy on our tokens — shoptitan-core docs/FLOOR.md (d) and
 * (e). Michael, 2026-09-25 (V1 09:07): *"create one variation … based off of
 * this product page of simplicity and let's test that ourselves."*
 *
 * inc/product-detail-floor.php renders the panel's parts in the floor's order
 * inside `.summary`; this section is their geometry, and the two-region grid
 * around them. assets/st-product-detail.js moves the lifted CTA and the tabs
 * into their slots. Nothing here is a colour or a font: the accent is the
 * store's `ti-accent`, every gap is a token, the rules are currentColor.
 *
 * The legacy layer (src/scss/woocommerce/single.scss) floats the gallery at a
 * literal 557px and the panel beside it with `!important`, so the floor's grid
 * has to say `!important` back. That is the one place this file raises its
 * voice, and only under the floor attribute.
 */
:root {
	--st-floor-panel: 24rem;
	--st-floor-gap: 32px;
	--st-floor-control: 40px;
	--st-floor-cta: 48px;
	--st-floor-header: var(--wp--custom--st-header-height, 64px);
}

@media (min-width: 1280px) {
	:root {
		--st-floor-panel: 27rem;
	}
}

@media (min-width: 1536px) {
	:root {
		--st-floor-panel: 30rem;
	}
}

/* Two regions from `desktop` up: the image left, the panel right. */
@media (min-width: 1024px) {
	html[data-st-product-detail-style='floor'] .product .product__content {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) var(--st-floor-panel);
		column-gap: var(--st-floor-gap);
		align-items: start;
	}

	html[data-st-product-detail-style='floor'] .product__content > .woo-woocommerce-product-gallery {
		float: none !important;
		width: auto !important;
		max-width: none;
		grid-column: 1;
		grid-row: 1;
	}

	html[data-st-product-detail-style='floor'] .product__content > .summary {
		float: none !important;
		width: auto !important;
		max-width: none !important;
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}
}

/* (e) The panel is sticky inside the product grid, so it stops at the grid's
   bottom edge and can never reach the rails or the footer. Not on a short
   viewport: a panel taller than the screen would pin its top and hide the
   button it exists to show. */
@media (min-width: 1024px) and (min-height: 700px) {
	html[data-st-product-detail-style='floor'] .product__content > .summary {
		position: sticky;
		top: calc(var(--st-floor-header) + 16px);
		align-self: start;
	}
}

/* Below `desktop`: one column, the image then the panel. The gallery box keeps
   a height cap, so the panel's first line is still on the first screen of a
   phone. */
@media (max-width: 1023.98px) {
	html[data-st-product-detail-style='floor'] .product__content {
		display: flex !important;
		flex-direction: column;
		row-gap: var(--wp--preset--spacing--50, 24px);
	}

	html[data-st-product-detail-style='floor'] .product__content > .woo-woocommerce-product-gallery {
		order: 1;
		width: 100% !important;
		max-height: 70vh;
	}

	html[data-st-product-detail-style='floor'] .product__content > .summary {
		order: 2;
	}
}

/* The panel's own rhythm. */
html[data-st-product-detail-style='floor'] .summary {
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--40, 16px);
}

/* The configurator (colours, sizes, artwork) stays in the panel but folds until
   the buyer asks for it — FLOOR.md (d): "the panel sells; the configurator
   configures". Height, not display: its canvases measure their width on load,
   and a `display: none` box measures zero. */
html[data-st-product-detail-style='floor'] .summary > .configurator {
	order: 90;
	height: 0;
	overflow: hidden;
	margin: 0;
}

html[data-st-product-detail-style='floor'] .summary.st-floor--configuring > .configurator {
	height: auto;
	overflow: visible;
	padding-block-start: var(--st-floor-gap);
	border-block-start: 1px solid var(--st-pd-rule);
}

/* 1. eyebrow · 2. name */
.st-floor__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.2;
	text-transform: var(--wp--custom--st-case, uppercase);
	letter-spacing: var(--wp--custom--st-track, 0.12em);
	opacity: 0.72;
}

.st-floor__name .product_title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.15;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1023.98px) {
	.st-floor__name .product_title {
		font-size: 1.25rem;
	}
}

.st-floor__sku {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	opacity: 0.6;
}

/* Labels: the small line above a control ("Colours Stone", "Quantity 27 pcs"). */
.st-floor__label {
	display: block;
	font-size: 0.75rem;
	line-height: 1.4;
	opacity: 0.72;
	margin-block-end: 0.5rem;
}

.st-floor__label b {
	font-weight: 600;
	opacity: 1;
}

/* 3. swatches — 20px dots inside 44px hit areas, the selected one ringed. */
.st-floor__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.st-floor__dot {
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.st-floor__dot span {
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: var(--st-swatch, currentColor);
	box-shadow: 0 0 0 1px var(--st-pd-rule);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.st-floor__dot:hover span,
.st-floor__dot:focus-visible span {
	transform: scale(1.15);
}

.st-floor__dot.is-selected span {
	box-shadow: 0 0 0 2px var(--wp--preset--color--ti-bg, #fff), 0 0 0 3px currentColor;
}

/* 4. quantity chips — 40px tall in 44px hit areas, they wrap, they never scroll. */
.st-floor__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.st-floor__chip,
.st-floor__pill {
	min-inline-size: 44px;
	block-size: var(--st-floor-control);
	padding: 0 0.85rem;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: 1px solid var(--st-pd-rule);
	border-radius: var(--wp--custom--st-radius, 2px);
	cursor: pointer;
	transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.st-floor__chip:hover,
.st-floor__pill:hover,
.st-floor__chip:focus-visible,
.st-floor__pill:focus-visible {
	border-color: currentColor;
}

.st-floor__chip.is-selected,
.st-floor__pill.is-selected {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
}

.st-floor__chip--custom {
	opacity: 0.8;
}

/* 5. delivery — two options side by side, 50/50 on phones. */
.st-floor__delivery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
}

.st-floor__pill {
	block-size: auto;
	min-block-size: 44px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	row-gap: 2px;
	padding: 0.5rem 0.85rem;
	text-align: left;
}

.st-floor__pill b {
	font-weight: 600;
}

.st-floor__pill span {
	font-size: 0.75rem;
	opacity: 0.72;
}

/* 6. price — the total at 24px, the per-piece under it, a Save chip beside. */
.st-floor__price {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: 'total save' 'per save';
	column-gap: 0.75rem;
	align-items: center;
}

.st-floor__total {
	grid-area: total;
	font-size: 1.5rem;
	line-height: 1.1;
	font-weight: 600;
}

.st-floor__per {
	grid-area: per;
	font-size: 0.8125rem;
	opacity: 0.72;
}

.st-floor__save {
	grid-area: save;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--wp--custom--st-radius, 2px);
	background: color-mix(in srgb, var(--wp--preset--color--ti-accent, currentColor) 14%, transparent);
}

.st-floor__save[hidden] {
	display: none;
}

/* 7. facts — the card's own line, in the panel. */
.st-floor__facts {
	margin: 0;
	font-size: 0.75rem;
	opacity: 0.72;
}

/* 8. primary · 9. secondary — full width, 48px, the accent, then the outline. */
.st-floor__button {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--st-floor-cta);
	padding: 0 1rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--wp--custom--st-radius, 2px);
	cursor: pointer;
	transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.st-floor__button--primary {
	color: var(--wp--preset--color--ti-bg, #fff);
	background: var(--wp--preset--color--ti-accent, currentColor);
	border: 1px solid var(--wp--preset--color--ti-accent, currentColor);
}

.st-floor__button--secondary {
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
}

.st-floor__button:hover,
.st-floor__button:focus-visible {
	opacity: 0.9;
}

/* The lifted configurator CTA (WB-250) lands in the slot and becomes the
   primary button: full width, the store's accent, no rule above it, and the
   fallback button under it retires. At `desktop` the panel itself is sticky,
   so the row is static; below it the row keeps its own sticky range under the
   header, inside the product section only. */
.st-floor__cta .st-product-cta {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	justify-content: stretch;
}

.st-floor__cta .st-product-cta .productInfoHeader__right {
	inline-size: 100%;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 0.5rem;
}

.st-floor__cta .st-product-cta .productInfoHeader__right__right {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.75rem;
}

.st-floor__cta .st-product-cta .productInfoHeader__add_to_cart {
	min-block-size: var(--st-floor-cta);
	inline-size: 100%;
	font-weight: 600;
	color: var(--wp--preset--color--ti-bg, #fff);
	background: var(--wp--preset--color--ti-accent, currentColor);
	border: 1px solid var(--wp--preset--color--ti-accent, currentColor);
	border-radius: var(--wp--custom--st-radius, 2px);
}

.st-floor__cta.has-configurator-cta > [data-st-open-configurator] {
	display: none;
}

@media (max-width: 1023.98px) {
	.st-floor__cta .st-product-cta {
		position: sticky;
		top: var(--st-floor-header);
		z-index: 40;
		background: var(--wp--preset--color--ti-bg, transparent);
		padding-block: 0.5rem;
	}
}

.st-floor__secondary {
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--40, 16px);
}

/* 10. trust — only when the widget rendered something. */
.st-floor__trust:empty,
.st-floor__trust:has(.klaviyo-star-rating-widget:empty) {
	display: none;
}

/* 11. description — at the measure. */
.st-floor__description p {
	margin: 0;
	max-width: var(--wp--custom--st-measure, 68ch);
}

/* 12. accordions — 48px rows, chevron right, one open at a time, the height
   animates through grid rows (FLOOR.md (j)). */
.st-floor__accordions:empty {
	display: none;
}

.st-floor__accordions {
	border-block-start: 1px solid var(--st-pd-rule);
}

.st-floor__accordions .woocommerce-tabs > ul.tabs {
	display: none;
}

.st-floor__accordions .st-floor__accordion {
	border-block-end: 1px solid var(--st-pd-rule);
}

.st-floor__accordions .st-floor__accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: 48px;
	padding: 0.5rem 0;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	list-style: none;
}

.st-floor__accordions .st-floor__accordion > summary::-webkit-details-marker {
	display: none;
}

.st-floor__accordions .st-floor__accordion > summary::after {
	content: '';
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease-out;
	margin-inline-end: 0.25rem;
}

.st-floor__accordions .st-floor__accordion[open] > summary::after {
	transform: rotate(225deg);
}

.st-floor__accordions .st-floor__accordion > .st-floor__accordion-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease-out;
}

.st-floor__accordions .st-floor__accordion[open] > .st-floor__accordion-body {
	grid-template-rows: 1fr;
}

.st-floor__accordions .st-floor__accordion-body > div {
	overflow: hidden;
}

.st-floor__accordions .wc-tab {
	display: block !important;
	padding: 0 0 1rem;
}

.st-floor__accordions .wc-tab > h2:first-child,
.st-floor__accordions .st-pd__heading {
	display: none;
}

.st-floor__accordions .st-floor__accordion-links {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.875rem;
}

/* The tabs wrapper travels into the panel; the section it left keeps its gap. */
html[data-st-product-detail-style='floor'] .woocommerce-tabs.st-pd--floor {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.st-floor__dot span,
	.st-floor__chip,
	.st-floor__pill,
	.st-floor__button,
	.st-floor__accordions .st-floor__accordion > summary::after,
	.st-floor__accordions .st-floor__accordion > .st-floor__accordion-body {
		transition: none;
	}
}

/* ---------------------------------------------------------- the two rails
 *
 * "You may also like these other <category>" and "Goes well with", on every
 * layout — FLOOR.md (c), the rail rows: a scroll rail below 600 (2.2 and 1.6
 * cards visible), then 2 / 3 / 4 columns off a minimum card width, never a
 * fixed column count with 1fr. The cards are the catalog's own.
 */
.st-rails {
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--60, 48px);
	margin-block-start: var(--wp--preset--spacing--60, 48px);
}

.st-rail__heading {
	margin: 0 0 var(--wp--preset--spacing--40, 16px);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.15;
}

.st-rail__list.products {
	--st-rail-min: 200px;
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--st-rail-min), 1fr));
	gap: var(--wp--custom--st-card-gap, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-rail--goes-well-with .st-rail__list.products {
	--st-rail-min: 280px;
}

.st-rail__list.products > li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

@media (min-width: 1024px) {
	.st-rail__list.products {
		grid-template-columns: repeat(4, minmax(var(--st-rail-min), 1fr));
	}
}

@media (min-width: 782px) and (max-width: 1023.98px) {
	.st-rail__list.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 600px) and (max-width: 781.98px) {
	.st-rail__list.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.st-rail__list.products {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--wp--preset--spacing--30, 12px);
		padding-block-end: 0.5rem;
	}

	.st-rail__list.products > li.product {
		flex: 0 0 calc((100% - var(--wp--preset--spacing--30, 12px)) / 2.2);
		scroll-snap-align: start;
	}

	.st-rail--goes-well-with .st-rail__list.products > li.product {
		flex-basis: calc((100% - var(--wp--preset--spacing--30, 12px)) / 1.6);
	}
}