/* The `kit` product-detail layout · TT-5911
 *
 * The configurator, dressed as the titan-storefront kit. The PHP is
 * inc/product-detail-kit.php; the runtime it shares with `floor` is
 * assets/st-product-detail.js. Everything here is under the kit attribute, so
 * the other layouts never see a rule of it.
 *
 * `builder` (inc/product-detail-builder.php) wears this same dress and adds
 * assets/st-product-detail-builder.css on top, so every rule is scoped to both
 * values with `:is()`. `:is()` takes its most specific argument, and both are
 * one attribute selector, so kit's specificity is exactly what it was.
 *
 * What it does NOT do: change what the configurator does. Every node it hides is
 * hidden with CSS and stays in the DOM, because the configurator bundle queries
 * and writes to them (the second Add to cart, the totals card, the delivery
 * card). Nothing here is a colour literal or a font name; the store's palette and
 * fonts arrive through the theme tokens.
 *
 * The legacy layer floats the gallery at a literal 557px with `!important`
 * (src/scss/woocommerce/single.scss), so the two-region grid has to say
 * `!important` back, exactly as `floor` does.
 */

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) {
	--st-kit-panel: 26rem;
	--st-kit-gap: 40px;
	--st-kit-control: 44px;
	--st-kit-cta: 48px;
	--st-kit-rule: var(--wp--preset--color--ti-line, currentColor);
	--st-kit-mono: var(--wp--preset--font-family--space-mono, ui-monospace, monospace);
	--st-kit-radius: var(--wp--custom--st-radius, 2px);
}

@media (min-width: 1280px) {
	html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) {
		--st-kit-panel: 28rem;
	}
}

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

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

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

@media (max-width: 1023.98px) {
	html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .product__content {
		display: flex !important;
		flex-direction: column;
		row-gap: 24px;
	}

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

	html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .product__content > .summary {
		order: 2;
		width: 100% !important;
	}
}

/* ── The panel, in the kit's order ─────────────────────────────────────────
   The configurator prints before the summary hooks (woocommerce/
   content-single-product.php), so the order is set here rather than in markup. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-floor__eyebrow { order: 1; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-floor__name { order: 2; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-kit__price { order: 3; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-floor__facts { order: 4; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .configurator { order: 5; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-floor__trust { order: 6; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-floor__description { order: 7; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .st-floor__accordions { order: 8; }

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-floor__eyebrow {
	font-family: var(--st-kit-mono);
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-floor__facts {
	font-family: var(--st-kit-mono);
	text-transform: var(--wp--custom--st-case, uppercase);
	letter-spacing: var(--wp--custom--st-track, 0.08em);
}

/* ── The price, by the name ────────────────────────────────────────────────
   Before a piece is entered, the product's range. After, the configurator's own
   live block, moved here by st-product-detail.js: total, pieces @ per-piece,
   delivery, Rush, then a full-width Add to cart. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__price {
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	padding-block: 16px;
	border-block: 1px solid var(--st-kit-rule);
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__from {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5rem;
	margin: 0;
	font-family: var(--st-kit-mono);
	font-size: 1.5rem;
	line-height: 1.2;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__from .woocommerce-Price-amount {
	font-weight: 400;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__from-unit {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* The range stands in only while nothing is configured. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary:not(.st-kit--empty) .st-kit__price:has(.has-configurator-cta) .st-kit__from {
	display: none;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .st-product-cta {
	position: static;
	inset: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 8px;
	inline-size: 100%;
	padding: 0;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__right__left,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__right__right {
	display: contents;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__price { order: 1; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__total { order: 2; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__delivery { order: 3; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__rush { order: 4; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__add_to_cart { order: 5; }

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__price,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__price_total {
	color: var(--wp--preset--color--ti-fg, currentColor) !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__price_total {
	font-family: var(--st-kit-mono);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.1;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__total,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__delivery,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__rush {
	margin: 0;
	font-family: var(--st-kit-mono);
	font-size: 0.8125rem;
	line-height: 1.4;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__rush {
	cursor: pointer;
	inline-size: fit-content;
}

/* The legacy bar hid the pieces line on phones, right-aligned the total and drew
   a divider beside it (build/css/main-style.scoped.css). Here they are one
   left-aligned column at every width. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__total {
	display: block !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__price {
	text-align: left !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__price::before {
	content: none !important;
}

/* While nothing is configured the live total reads $0.00; the range above says
   it better, so the zeros step aside. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary.st-kit--empty .st-kit__cta .productInfoHeader__price,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary.st-kit--empty .st-kit__cta .productInfoHeader__total {
	display: none !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-kit__cta .productInfoHeader__add_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: var(--st-kit-cta);
	margin-block-start: 8px;
	padding: 0 1rem;
	font-family: var(--st-kit-mono);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ti-bg, #fff);
	background: var(--wp--preset--color--ti-fg, currentColor);
	border: 1px solid var(--wp--preset--color--ti-fg, currentColor);
	border-radius: var(--st-kit-radius);
}

/* ── The configurator, dressed ─────────────────────────────────────────────
   Square corners from the store's radius token, hairline rules, mono labels,
   one black primary button. Behaviour is untouched. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .summary > .configurator {
	margin: 0;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .order__container {
	padding: 0;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .step__header,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .step__header * {
	font-family: var(--st-kit-mono);
	font-size: 0.8125rem;
	text-transform: var(--wp--custom--st-case, uppercase);
	letter-spacing: var(--wp--custom--st-track, 0.08em);
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .dropdown,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .dropdown-btn,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator select,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator input[type='number'],
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator textarea {
	border-radius: var(--st-kit-radius) !important;
	border-color: var(--st-kit-rule) !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .next-btn,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .artwork-generation {
	inline-size: 100%;
	max-inline-size: none !important;
	min-block-size: var(--st-kit-cta);
	font-family: var(--st-kit-mono);
	font-weight: 700;
	border-radius: var(--st-kit-radius) !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .next-btn {
	color: var(--wp--preset--color--ti-bg, #fff) !important;
	background: var(--wp--preset--color--ti-fg, currentColor) !important;
	border: 1px solid var(--wp--preset--color--ti-fg, currentColor) !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .artwork-generation {
	color: inherit !important;
	background: transparent !important;
	border: 1px solid currentColor !important;
}

/* The totals card would say the price a second time, under the one by the name.
   What it alone says is the next break ("Order 9 more and reduce price to …"),
   so that line stays and the rest of the card steps aside. The delivery card
   repeats the delivery line by the name. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .block-price .card:not(.estimated) .price__bottom_header,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .block-price .card:not(.estimated) .card-content--top,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .block-price .card.estimated {
	display: none !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .block-price .card {
	padding: 12px 0;
	background: transparent !important;
	border: 0 !important;
	border-block-start: 1px solid var(--st-kit-rule) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 0.8125rem;
}

/* One Add to cart: the one by the name. This one stays in the DOM because the
   bundle binds to it. "Bulk price breaks" becomes a quiet text link. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .btns-order .btn__top {
	display: none !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .btns-order .bulk_pricing-modal_button {
	min-block-size: 0;
	padding: 0;
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .st-floor__accordions {
	margin-block-start: 8px;
}

/* The colour layout switch (List / Dropdown): the kit's segmented control. A
   hairline box, mono labels, the chosen side filled with the store's ink. The
   radios themselves are untouched, so the configurator's onchange handlers
   still fire. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .segmentedControl__wrapper {
	display: inline-flex;
	padding: 0;
	gap: 0;
	background: transparent !important;
	border: 1px solid var(--st-kit-rule);
	border-radius: var(--st-kit-radius) !important;
	overflow: hidden;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .segmentedControl__wrapper label {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	margin: 0;
	padding: 0 14px;
	font-family: var(--st-kit-mono);
	font-size: 0.75rem;
	text-transform: var(--wp--custom--st-case, uppercase);
	letter-spacing: var(--wp--custom--st-track, 0.08em);
	color: inherit !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .segmentedControl__wrapper input:checked + label {
	color: var(--wp--preset--color--ti-bg, #fff) !important;
	background: var(--wp--preset--color--ti-fg, currentColor) !important;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .segmentedControl__wrapper input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--ti-fg, currentColor);
	outline-offset: -4px;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .segmentedControl__wrapper + * ,
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .flex.items-center.gap-2 > p {
	font-family: var(--st-kit-mono);
	font-size: 0.75rem;
	text-transform: var(--wp--custom--st-case, uppercase);
	letter-spacing: var(--wp--custom--st-track, 0.08em);
}

/* The label and the switch share one row where they fit, and the switch drops
   under the label where they do not: at 375 the pair is wider than the panel
   and the switch was clipped mid-word. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .flex.items-center.gap-2:has(> .segmentedControl__wrapper) {
	flex-wrap: wrap;
	row-gap: 8px;
}

html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .configurator .segmentedControl__wrapper {
	flex-shrink: 0;
}

/* ── Under the panel: the kit's order ───────────────────────────────────────
   The product grid carries a 60px row gap and two empty implicit rows, which
   was 120px of nothing between the accordions and the next section. And the
   kit goes from the accordions straight to the two rails; the store's
   "Know your <category>" interlinking box (ST-79) is not in the kit, so it
   keeps its place on the page but after the rails. Order only: the box, its
   copy and its link are untouched. */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) .product .product__content { row-gap: 0 !important; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) div.product { display: flex; flex-direction: column; }
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) div.product > .st-rails { order: 1; }
/* A flex column shrinks a box with auto margins to its content and drops the
   space under the last child; the box keeps its full width and its gap. It only
   renders on a store that names an education page (inc/education-links.php). */
html:is([data-st-product-detail-style='kit'], [data-st-product-detail-style='builder']) div.product > .st-know-your { order: 2; inline-size: 100%; margin-block-end: var(--wp--preset--spacing--60, 48px); }