/* The kit's shared layer · TT-5911 B1
 *
 * ONE stylesheet for the `.st-*` classes the storefront kit builds every
 * section from, ported once from titan-storefront `src/styles/tailwind.css`
 * (the `@layer components` block and the column counts under it, lines
 * 170-592; not the `@theme`, not the breakpoints). The siblings scaffolded
 * from tailwind-components-library (docs/kit-reskin/PLAN.md §4, B3-B7) land on
 * these classes instead of each bringing its own grid, which is the thing the
 * kit's own import test refuses.
 *
 * Enqueued on every page, after `assets/floor-tokens.css` and after the child
 * stylesheet (inc/floor-tokens.php). Every value is a floor token: the kit
 * already reads the same `--wp--custom--*` names the theme prints, so the port
 * is the rules as they are. The only rewrites:
 *
 *   - the kit's `--ease-floor` / `--ease-image` are Tailwind `@theme` values
 *     the theme does not print, so their two curves are written in place;
 *   - `--color-canvas` is the store's `ti-bg` palette slug;
 *   - the kit's `.st-rail` is `.st-kit-rail` here. The theme already has a
 *     `.st-rail` — the use-case slider (style.css) and the product page's two
 *     rails (inc/product-rails.php) both print it — and the kit's
 *     `display: grid; grid-auto-flow: column` on that class would have folded
 *     both into one sideways row. tools/kit-pattern.mjs (B3) maps the kit's
 *     `st-rail` to this name.
 *
 * The fragments of this layer that already existed are MOVED here, not copied
 * (Diego, 2026-09-30: modify what dictates a value, never write on top of it):
 * the flat card (was assets/st-card-flat.css, whole), the footer grid (was
 * style.css, "The footer reflows"), and the product page's two rails (was
 * assets/st-product-detail.css, "the two rails"). Each keeps its own comment.
 *
 * Media queries: the floor's widths only (600 / 782 / 1024 / 1280 / 1536, a
 * `max-width` one hundredth under the same step where a moved rule was written
 * that way), plus `hover`, `prefers-reduced-motion` and the sticky panel's
 * `min-height`.
 */

/* ── Containers and the measure ─────────────────────────────────────────── */

/*
 * FLOOR (a) containers: no fixed pixel width, ever.
 *   max-width: min(maxWidth, 100% - 2 * gutter)
 */
.st-container {
	inline-size: 100%;
	max-inline-size: min(
		var(--wp--custom--max-width),
		calc(100% - 2 * var(--wp--custom--st-gutter))
	);
	margin-inline: auto;
}

/* FLOOR (g): the measure. Every paragraph, every description. */
.st-prose {
	max-inline-size: var(--wp--custom--max-width-prose);
}

/* FLOOR (g): uppercase labels are tracked; body text never is. */
.st-label {
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--st-track);
}

/* ── Grids ──────────────────────────────────────────────────────────────── */

/*
 * FLOOR (c) grids. One mechanism for every section type:
 *   repeat(auto-fill, minmax(<the kind's min>, 1fr))
 * capped by the kind's column count with a max-width on the grid, so a card
 * can never fall under its minimum whatever the rail beside it does, and a
 * very wide container can never exceed the table's count.
 *
 * `--st-cols` and `--st-min` are set per section type below; the cap is
 * cols * (min + gap) - gap. `--st-cap` is the escape hatch for one column,
 * where the cap would be the minimum itself and shrink the section instead of
 * capping it.
 */
.st-grid {
	display: grid;
	gap: var(--st-gap-y, var(--wp--custom--st-card-gap-row)) var(--st-gap-x, var(--wp--custom--st-card-gap));
	grid-template-columns: repeat(auto-fill, minmax(min(var(--st-min), 100%), 1fr));
	max-inline-size: var(
		--st-cap,
		calc(
			var(--st-cols) * (var(--st-min) + var(--st-gap-x, var(--wp--custom--st-card-gap))) -
				var(--st-gap-x, var(--wp--custom--st-card-gap))
		)
	);
}

/*
 * The catalog carries one cap, the floor's `wide` count of 5, and nothing
 * else: the stepped minimum (150 / 200 / 220, assets/floor-tokens.css) decides
 * every width below it.
 */
.st-grid-catalog {
	--st-min: var(--wp--custom--st-card-min);
	--st-cols: 5;
}

.st-grid-tiles {
	--st-min: 140px;
	--st-cols: 4;
	--st-gap-x: 1rem;
	--st-gap-y: 1rem;
}

.st-grid-footer {
	--st-min: var(--wp--custom--st-footer-col-min);
	--st-cols: 1;
	/* Below 600 the footer is ONE column (FLOOR (c)) and it fills the phone. */
	--st-cap: 100%;
	--st-gap-x: 1.5rem;
	--st-gap-y: 2rem;
}

/* A header dropdown's own columns: a twelve-child menu drops to two columns
   and then one rather than squeezing twelve 60px links. */
.st-grid-menu {
	--st-min: 200px;
	--st-cols: 3;
	--st-gap-x: 1.5rem;
	--st-gap-y: 0.25rem;
}

/* FLOOR (c) "You may also like": 200px minimum, 2 / 2 / 3 / 4 / 4. */
.st-grid-rail {
	--st-min: 200px;
	--st-cols: 2;
}

/* FLOOR (c) "Goes well with": the same counts, a wider card — 280px. */
.st-grid-rail-companion {
	--st-min: 280px;
	--st-cols: 2;
}

/* ── The product page ───────────────────────────────────────────────────── */

/*
 * FLOOR (d). One column below desktop, two above it, with the panel at the
 * floor's own widths — 24rem / 27rem / 30rem at desktop / desktop-wide / wide.
 */
.st-product-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

/*
 * FLOOR (d): below desktop the image box is 4/5, capped at 70vh LESS the
 * sticky header, so the product name is on the first screen with the image.
 */
.st-product-image {
	position: relative;
	aspect-ratio: 4 / 5;
	max-block-size: calc(70vh - var(--wp--custom--st-header-height));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--wp--custom--st-panel);
	border-radius: var(--wp--custom--st-radius);
}

.st-product-image img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

/*
 * FLOOR (e) the sticky rule. The panel sticks under the header inside the
 * product grid; under 700px of viewport height it does not, because a panel
 * taller than the viewport would pin its top and hide the CTA.
 */
.st-panel-sticky {
	align-self: start;
}

@media (min-width: 1024px) and (min-height: 700px) {
	.st-panel-sticky {
		position: sticky;
		top: calc(var(--wp--custom--st-header-height) + 16px);
	}
}

/*
 * FLOOR (e), below desktop: the row holding price + primary CTA sticks under
 * the header inside the product section only. Sticky, never fixed: it stops at
 * the panel's own bottom edge and can never become a bottom bar.
 */
.st-panel-offer {
	position: sticky;
	top: var(--wp--custom--st-header-height);
	z-index: 1;
	background: var(--wp--preset--color--ti-bg);
}

/* FLOOR (g), the measure, inside the panel. */
.st-panel-sticky p {
	max-inline-size: var(--wp--custom--max-width-prose);
}

@media (min-width: 1024px) {
	/* From desktop the WHOLE panel is sticky instead; this row is inert. */
	.st-panel-offer {
		position: static;
		background: transparent;
	}
}

/* ── The kit's rail (the kit's `.st-rail`, renamed: see the header) ─────── */

/*
 * FLOOR (c) rails. Below the first breakpoint a rail scrolls sideways with a
 * fraction of the next item visible, so the buyer can see there is more.
 */
.st-kit-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--st-rail-gap, 1rem)) / var(--st-rail-visible, 3.5));
	gap: var(--st-rail-gap, 1rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.st-kit-rail::-webkit-scrollbar {
	display: none;
}

.st-kit-rail > * {
	scroll-snap-align: start;
}

/* ── Controls ───────────────────────────────────────────────────────────── */

/* FLOOR (g): 44x44 minimum on every control. One class, used everywhere. */
.st-target {
	min-block-size: 44px;
	min-inline-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * FLOOR (d): the accordion opens by grid-template-rows, 200ms ease-out.
 * `visibility` takes a collapsed panel's links out of the tab order and its
 * text away from a screen reader; the delay lets the close finish first.
 * (The theme's own `.st-accordion > .wp-block-details` in style.css is a
 * different markup and none of these selectors reach it.)
 */
.st-accordion-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease-out;
}

.st-accordion-body > div {
	overflow: hidden;
	visibility: hidden;
	transition: visibility 0s linear 200ms;
}

.st-accordion[data-open='true'] .st-accordion-body > div {
	visibility: visible;
	transition-delay: 0s;
}

.st-accordion[data-open='true'] .st-accordion-body {
	grid-template-rows: 1fr;
}

.st-accordion[data-open='true'] .st-accordion-chevron {
	transform: rotate(180deg);
}

.st-accordion-chevron {
	transition: transform 200ms ease-out;
}

/* ── The card ───────────────────────────────────────────────────────────── */

/* FLOOR (c) card image: the aspect token, contain, over the store's panel. */
.st-card-image {
	aspect-ratio: var(--wp--custom--st-card-aspect);
	background: var(--wp--custom--st-panel);
	overflow: hidden;
	border-radius: var(--wp--custom--st-radius);
}

.st-card-image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	transition: transform 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.st-card:hover .st-card-image img {
	transform: scale(1.02);
}

/* FLOOR (c): the hover pill fades and rises 4px in 280ms. */
.st-card-pill {
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.st-card:hover .st-card-pill,
.st-card:focus-within .st-card-pill {
	opacity: 1;
	transform: translateY(0);
}

/* Touch devices have no hover, so the pill is always there. */
@media (hover: none) {
	.st-card-pill {
		opacity: 1;
		transform: none;
	}
}

/* FLOOR (c): the card name is two lines, then an ellipsis. */
.st-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ── Column counts at the floor's widths ────────────────────────────────── */

/*
 * FLOOR (c) counts for the sections whose count IS the rule: tiles
 * (4 / 6 / 8 / 8), footer columns and the related rails. The catalog is not
 * here: its counts are what the minimum renders.
 */
@media (min-width: 600px) {
	.st-grid-tiles {
		--st-cols: 4;
	}
	.st-grid-footer {
		--st-cols: 2;
		/* From two columns up the count IS the rule again, so the cap is back. */
		--st-cap: initial;
	}
}

@media (min-width: 782px) {
	.st-grid-tiles {
		--st-cols: 6;
	}
	.st-grid-footer {
		--st-cols: 3;
	}
	.st-grid-rail,
	.st-grid-rail-companion {
		--st-cols: 3;
	}
}

@media (min-width: 1024px) {
	.st-grid-tiles {
		--st-cols: 8;
	}
	.st-grid-footer {
		--st-cols: 4;
	}
	.st-grid-rail,
	.st-grid-rail-companion {
		--st-cols: 4;
	}
	/* FLOOR (d): the image takes 61% of the content width at desktop. */
	.st-product-grid {
		grid-template-columns: minmax(0, 1fr) 24rem;
	}
	/* Two columns, so the image box is no longer capped at 70vh. */
	.st-product-image {
		max-block-size: none;
	}
}

@media (min-width: 1280px) {
	.st-product-grid {
		grid-template-columns: minmax(0, 1fr) 27rem;
	}
}

@media (min-width: 1536px) {
	.st-grid-footer {
		--st-cols: 6;
	}
	.st-product-grid {
		grid-template-columns: minmax(0, 1fr) 30rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-card-image img,
	.st-card-pill,
	.st-accordion-body,
	.st-accordion-body > div,
	.st-accordion-chevron {
		transition: none;
	}
}

/* ══ MOVED HERE: the flat catalog card, was assets/st-card-flat.css (whole) ══ */

/* The flat catalog card · TT-5911
 *
 * The kit's card, on every grid and rail that prints one: the garment on the
 * store's own panel, then the category, the minimum and days, the colour dots,
 * the name and the price. No box inside a box. It was scoped to the shop archive
 * (assets/st-catalog.css) and the home page's "What people order most" rail
 * still wore the old boxed card, so the same product looked like two products.
 *
 * `body ul.products li.dtla_product.product` is the specificity needed to beat
 * the scoped legacy sheet; the `!important`s are where it already used one.
 * Every value is a token.
 */
body ul.products li.dtla_product.product{background:transparent !important;border-radius:0 !important;padding:0 !important}
body ul.products li.dtla_product.product .product_thumbnail_wrapper{border:0 !important;background:var(--wp--custom--st-panel) !important;border-radius:var(--wp--custom--st-radius) !important}
body ul.products li.dtla_product.product .product_thumbnail_wrapper__container{background:transparent !important;border-radius:0 !important}
body ul.products li.dtla_product.product > .woocommerce-loop-product__title,
body ul.products li.dtla_product.product > .price,
body ul.products li.dtla_product.product > .dtla-meta-box,
body ul.products li.dtla_product.product > .dtla-color-box{padding-inline:0 !important}
/* The kit's card, top to bottom (titan-storefront product-card.tsx, TT-5911):
   photo → facts → dots + `+N` → category → name → style number → `From $`.
   The category and the style number are the two B2B lines the kit leaves out. */
body ul.products li.dtla_product.product{display:flex !important;flex-direction:column !important}
body ul.products li.dtla_product.product > a{order:1 !important}
body ul.products li.dtla_product.product > .st-card-facts{order:2 !important;margin:.5rem 0 0 !important}
body ul.products li.dtla_product.product > .dtla-color-box{order:3 !important}
body ul.products li.dtla_product.product > .st-catalog-card__category{order:4 !important}
body ul.products li.dtla_product.product > .woocommerce-loop-product__title{order:5 !important}
body ul.products li.dtla_product.product > .dtla-meta-box{order:6 !important}
body ul.products li.dtla_product.product > .price{order:7 !important}

/* The facts line. Inside the photo, on the store's ground at 85%, from 768px
   up; under the photo below that. inc/st-card-facts.php prints both copies and
   one is always display:none, so a screen reader hears the line once.
   TOP-left, where the kit has it bottom-left: measured 2026-10-06, the line is
   196px on a 222–231px ThreadGhost card and the Design pill sits bottom-centre
   (shown 768–1279, rising on hover from 1280), so bottom-left covered the pill
   at every width. A card with a sale badge (top-left) keeps the line under the
   photo. The dots go on their own row under it: the line alone wraps on the
   158px card at 375, so it cannot share a row with them there. */
body ul.products li.dtla_product.product .product_thumbnail_wrapper{position:relative !important}

/* The photo box on EVERY surface that prints the card, not only the archives:
   assets/st-catalog.css (enqueued on WooCommerce pages only) is where it lived,
   so the home page's grid and the product-page rails kept each photograph's own
   height and every row went ragged (measured on the R2 home grid, 2026-10-06).
   Same box and the same fit as the archive — `cover` is Diego's call of
   2026-10-02, recorded in st-catalog.css — so one product is one card wherever
   it appears. */
body ul.products li.dtla_product.product .product_thumbnail_wrapper,
body ul.products li.dtla_product.product .product_thumbnail_wrapper__container{width:100% !important;aspect-ratio:var(--wp--custom--st-card-aspect) !important;overflow:hidden !important}
body ul.products li.dtla_product.product .product_thumbnail_wrapper__container img,
body ul.products li.dtla_product.product img.kover2{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important}
body ul.products li.dtla_product.product .st-card-facts--over{display:none;position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:1;max-inline-size:calc(100% - 1rem);margin:0;padding:.125rem .375rem;font-size:.7rem;line-height:1.4;background:color-mix(in srgb,var(--wp--preset--color--ti-bg) 85%,transparent);border-radius:var(--wp--custom--st-radius);pointer-events:none}
@media (min-width:768px){
	body ul.products li.dtla_product.product:not(:has(.onsale)) .st-card-facts--over{display:block}
	body ul.products li.dtla_product.product:not(:has(.onsale)):has(.st-card-facts--over) > .st-card-facts--below{display:none !important}
}

/* The dots: five 12px circles on a hairline, then `+N` (the kit's Swatches).
   Restyled only — the radios and changeCardImage are untouched. */
body ul.products li.dtla_product.product > .dtla-color-box{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:.25rem !important;margin:.5rem 0 0 !important;padding:0 !important;max-height:none !important;overflow:visible !important}
body ul.products li.dtla_product.product .dtla-color-box .kcolor_box__wrapper{inline-size:.75rem !important;block-size:.75rem !important;padding:0 !important;flex:0 0 auto}
body ul.products li.dtla_product.product .dtla-color-box .kcolor_box__wrapper .kcolor_box{padding:0 !important;border:1px solid color-mix(in srgb,var(--wp--preset--color--ti-fg) 20%,transparent) !important}
body ul.products li.dtla_product.product .dtla-color-box input:checked + .kcolor_box__wrapper > .kcolor_box{border-color:var(--wp--preset--color--ti-fg) !important}
body ul.products li.dtla_product.product .dtla-color-box .kcolor_box_plus{margin:0 0 0 .125rem !important;font-size:.75rem !important;line-height:1 !important;color:var(--wp--preset--color--ti-accent-secondary) !important;text-decoration:none}

/* The style number: the supplier's, small and mono under the name. */
body ul.products li.dtla_product.product > .dtla-meta-box{margin:.125rem 0 0 !important}
body ul.products li.dtla_product.product .dtla-sku-box{font-family:var(--wp--preset--font-family--space-mono,inherit) !important;font-size:.7rem !important;line-height:1.3 !important;letter-spacing:var(--wp--custom--st-track) !important;color:var(--wp--preset--color--ti-accent-secondary) !important}

/* st-best-sellers-kit: the [products] grid inside `.st-grid-catalog` takes the
   catalog's cap of 5 (FLOOR (c) `wide`). The class sits on the
   .dtla-legacy-scope wrapper, which is `display: contents`, so it cannot be the
   grid itself; the cap goes on the shortcode's own list. The track minimum is
   the larger of the floor's card minimum and a fifth of the row, so a wide
   container never fits a sixth card and a narrow one still steps down. */
.st-product-loop.st-grid-catalog ul.products{grid-template-columns:repeat(auto-fill,minmax(max(min(var(--wp--custom--st-card-min),100%),calc((100% - 4 * var(--wp--custom--st-card-gap)) / 5)),1fr)) !important}

/* `From $<lowest>`, the range in its title. */
body ul.products li.dtla_product.product > .price{margin:.25rem 0 0 !important}
body ul.products li.dtla_product.product > .price .st-price-from{font-weight:400}

/* The text of the card, moved here from st-catalog.css so the home rail reads the same as the shop. */
.st-catalog-card__category {
	margin: 0.75rem 0 0.25rem;
	font-family: var(--wp--preset--font-family--space-mono, inherit);
	font-size: var(--wp--preset--font-size--small, 0.8rem);
	/* stTrack, not a second copy of its value. */
	letter-spacing: var(--wp--custom--st-track);
	text-transform: var(--wp--custom--st-case);
	color: var(--wp--preset--color--ti-accent-secondary, inherit);
}


/* FLOOR (c): the card name is two lines, then an ellipsis — so one long product
   title cannot set the height of every card in its row. The kit's `.st-clamp-2`,
   ported onto the two title selectors WooCommerce actually emits. */
ul.products li.product .woocommerce-loop-product__title,
.st-catalog-grid[class*="is-style-catalog-"] .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


/* ── The minimum and the days, on every card ────────────────────────────────
 * Rendered by inc/st-card-facts.php from the store's own facts. A store that has
 * answered neither gets no line at all rather than a guess — the same rule the
 * rest of the Site Settings seam follows.
 */
.st-card-facts {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--space-mono, inherit);
	font-size: var(--wp--preset--font-size--small, 0.8rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ti-accent-secondary, inherit);
}
.st-card-facts__sep {
	opacity: 0.5;
	padding: 0 0.35rem;
}

/* Hover is the kit's: the image takes a slight zoom and the pill rises, and
   nothing else moves. The legacy sheet lifted the whole card 4px and gave it a
   16px drop shadow (style.css, "Card behaviour"). The card has no padding of its
   own, so the shadowed edge sat flush against the text and read as cramped
   (Diego, 2026-10-02). The ID selector is the legacy sheet's own; the same
   weight is needed to beat it. */
body#dtla_body_id.dtla__body ul.products li.dtla_product.product:hover{transform:none !important;box-shadow:none !important}
body#dtla_body_id.dtla__body ul.products li.dtla_product.product:hover .product_thumbnail_wrapper__container img{transform:scale(1.02) !important}

/* ══ MOVED HERE: the footer grid, was style.css ══ */

/* ── The footer reflows, and every link stays visible · WB-251 · WB-252 ──────
   Michael, V1 22:50: *"even I think responsiveness on the footer."* 22:54:
   *"they want you to always see this contact us button, which makes sense."*
   V3 14:02: *"why is terms and conditions cut off… we have like a black on
   black, right? …It's covering the terms."*

   The footer is authored as six `wp:columns`, and core stacks columns to one at
   781px and keeps all six side by side above it. Six columns in a 782px viewport
   is about 110px each, so the last one runs off the right edge and Terms and
   Privacy — which live in the row underneath, pushed right by
   `justify-content: space-between` — end up under the chat bubble.

   A grid with a minimum column width reflows instead of shrinking: six across
   at the shell width, then 3 / 2 / 1. `auto-fit` means the count follows the
   space rather than a breakpoint guess, and the explicit steps below pin it.   */
.wp-site-blocks > .wp-block-group:last-child .wp-block-columns,
/* THE FOOTER GRID, DECLARED ONCE — the kit's `.st-grid-footer`, ported.
 *
 * WHAT WAS HERE, and what it rendered. One `auto-fit` declaration at the token
 * minimum, then FOUR media queries overriding it with fixed counts — 6 from
 * 1280, 3 from 1024, 2 from 600, 1 below — which is the second rule FLOOR (c)
 * forbids ("every grid is repeat(auto-fill, minmax(…, 1fr)), declared once with
 * no media query"), and its counts were 1 / 2 / 3 / 6 against the floor's
 * 1 / 2 / 3 / 4 / 6. None of it was drawn. Measured on threadghost.com
 * 2026-09-30, `footerColumns` from the eyes: SIX columns at every width, at
 * 58.7 / 122.9 / 90 / 128.1 / 100.5 / 103.4 px at 1024 and
 * 68.5 / 143.4 / 105 / 149.4 / 117.3 / 120.6 at 1536 — ragged, and every one of
 * them under the 190px minimum this file already named.
 *
 * WHY none of it was drawn: `.st-footer__cols` is ONE class and core's layout
 * support prints `.wp-container-core-columns-is-layout-<hash>{display:flex}`,
 * also one class, in an inline <style> in the head — after this stylesheet. A
 * tie on specificity is decided by source order, and the inline block wins, so
 * the columns were core's flex row all along and the `flex-grow: 0` rule below
 * is what made them size to their own content.
 *
 * THE FIX IS THE EXISTING RULE, MODIFIED — Diego, 2026-09-30 recording 06:10:
 * "if something's already dictating what a particular rule or element should
 * be, then hopefully we would be modifying that instead of writing it on top of
 * it." So: the selector gains the block's own class (two classes beats core's
 * one), `auto-fit` becomes `auto-fill` (auto-fit collapses an empty track and
 * stretches the rest past the cap), the four overrides are DELETED, and the cap
 * is the floor's own `wide` count of 6 so a 1920 container cannot run ten. The
 * count at a width is now an outcome of the 190px token, which is the whole
 * point of having the token.
 *
 * `--st-cap: 100%` below the first breakpoint for the kit's own measured
 * reason: at one column the cap is the minimum itself, so a 375px phone renders
 * the footer in a 190px strip with 153px of dead space beside it. */
.wp-block-columns.st-footer__cols {
	--st-footer-cols: 6;
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(var(--wp--custom--st-footer-col-min), 100%), 1fr)
	);
	gap: 2.5rem 2rem;
	align-items: start;
	max-inline-size: var(
		--st-footer-cap,
		calc(var(--st-footer-cols) * (var(--wp--custom--st-footer-col-min) + 2rem) - 2rem)
	);
}

@media (max-width: 599.98px) {
	.wp-block-columns.st-footer__cols {
		--st-footer-cap: 100%;
	}
}

/* Core's own column widths and flex behaviour, retired inside the grid. Two
   classes here too, for the same reason as above. */
.wp-site-blocks > .wp-block-group:last-child .wp-block-columns > .wp-block-column,
.wp-block-columns.st-footer__cols > .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	min-width: 0;
}

/* ══ MOVED HERE: the product page's two rails, was assets/st-product-detail.css ══ */

/* ---------------------------------------------------------- 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.
 *
 * `clear: both` because on tabs / stacked / two-column the legacy sheet floats
 * the gallery left and the summary right inside a .product__content that does
 * not contain them. A flex box is a new formatting context, so instead of
 * dropping below the floats it shrank into the 60px gap between them: the rails
 * rendered one letter per line with 6px cards from 2026-09-26 (#36) until this.
 * kit and builder never showed it because they make div.product a flex column
 * (st-product-detail-kit.css), and nothing floats at phone width.
 */
.st-rails {
	clear: both;
	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);
	}
}

/* ── The rails are ONE row of the kit's small cards · TT-5911 ───────────────
 * Diego, 2026-10-02: "the rest of the page beneath the configurator is out of
 * order and does not match the vercel site." Measured on the AS Colour 5001 at
 * 1280: each rail 1,839px tall, the first card starting in the SECOND column.
 *
 *   1. WooCommerce's clearfix (`ul.products::before` / `::after`, `content:" ";
 *      display:table`) is a box, and in a grid a box is a cell: the first slot
 *      of every rail was an empty one.
 *   2. Eight products at four stretched columns is two-plus rows of 274px
 *      cards. The kit shows four, at the rail's own minimum (200 / 280), in one
 *      row. From 600 up the rail shows as many as fit one row and no more; the
 *      phone rail still scrolls all eight.
 *   3. assets/st-catalog.css states the catalog grid's columns with
 *      `!important` for `ul.products` (it has to beat the legacy sheet), which
 *      outranked the rail's own columns above. `.st-rails` in front and an
 *      `!important` here put the rail back in charge of its own grid.
 */
.st-rails .st-rail__list.products::before,
.st-rails .st-rail__list.products::after { content: none !important; display: none !important; }
@media (min-width: 600px) {
	.st-rails .st-rail__list.products { justify-content: start; max-inline-size: none !important; }
}
@media (min-width: 1024px) {
	.st-rails .st-rail__list.products { grid-template-columns: repeat(4, minmax(0, var(--st-rail-min))) !important; }
	.st-rails .st-rail__list.products > li.product:nth-child(n+5) { display: none !important; }
}
@media (min-width: 782px) and (max-width: 1023.98px) {
	.st-rails .st-rail__list.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.st-rails .st-rail__list.products > li.product:nth-child(n+4) { display: none !important; }
}
@media (min-width: 600px) and (max-width: 781.98px) {
	.st-rails .st-rail__list.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.st-rails .st-rail__list.products > li.product:nth-child(n+3) { display: none !important; }
}