/*
 * The catalog grid.
 *
 * Every value here is a theme token or a ratio. No hex, no store name, no font
 * name — the pattern rule (shoptitan-core/docs/PATTERN-RULE.md) applies to the
 * stylesheet a pattern depends on exactly as it applies to the pattern.
 *
 * What it fixes, from the 2026-09-18 Safety walk (frames at 20:10 and 37:25):
 * two cards per row, each about a viewport tall, with the image free to be any
 * shape it liked — so one row of the catalog filled the screen and the page
 * under it was "super constrained" (37:21). Three per row at desktop, two at
 * tablet, a fixed image box and equal-height cards.
 */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Core ships per-column width classes and floats. Both fight a grid. */
.woocommerce ul.products li.product,
ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* Equal height: the card is a column, the price is pushed to the bottom edge
   so every card in a row ends on the same line whatever its title wraps to. */
ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

ul.products li.product .price {
	margin-top: auto;
}

/* One fixed box for the image, so a tall product and a wide one occupy the
   same space and the row does not set its height from the worst photograph. */
ul.products li.product .product_thumbnail_wrapper,
ul.products li.product .product_thumbnail_wrapper__container {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

ul.products li.product .product_thumbnail_wrapper__container img,
ul.products li.product img.kover2,
ul.products li.product .attachment-woocommerce_thumbnail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.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);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ti-accent-secondary, inherit);
}

.st-catalog__blurb {
	max-width: var(--wp--style--global--content-size, 760px);
	margin: 0 0 2.5rem;
	color: var(--wp--preset--color--ti-accent-secondary, inherit);
}

/* Load more. The numbered pagination underneath is the no-JavaScript path and
   the crawlable next-page link, so it is hidden rather than removed — and it
   comes back the moment the button is not on the page. */
.st-catalog-more {
	display: flex;
	justify-content: center;
	margin: 3rem 0 1rem;
}

.st-catalog-more__button {
	padding: 0.9rem 2.5rem;
	border: 1px solid var(--wp--preset--color--ti-fg, currentColor);
	border-radius: 2px;
	background: var(--wp--preset--color--ti-accent, transparent);
	color: var(--wp--preset--color--ti-fg-alt, inherit);
	font-family: var(--wp--preset--font-family--space-mono, inherit);
	font-size: var(--wp--preset--font-size--small, 0.8rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.st-catalog-more__button[disabled] {
	opacity: 0.5;
	cursor: default;
}

.st-catalog-more + .woocommerce-pagination,
.st-catalog-more ~ .woocommerce-pagination {
	display: none;
}

@media (max-width: 1023.98px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── The card grid, from tokens · WB-249 ────────────────────────────────────
 * Michael + Diego, 2026-09-25, mondaymerch.com beside threadghost.com at
 * half-screen width. Diego, V1 06:28: *"this is very obviously an issue of not
 * optimizing for this screen size."* Michael, V1 06:43: *"This is great to show
 * the minimum and the days."*
 *
 * WHAT WAS WRONG, and it is not this file's fault. WooCommerce Blocks' own
 * product-collection emits per-instance widths for its `displayLayout.columns`
 * and its own two breakpoints:
 *
 *     .st-catalog-grid.is-style-catalog-editorial .wc-block-product-template > li
 *         { width: calc(25.0000% - 1.5000rem) !important }
 *     @media (max-width: 1023px) { … 50% … }
 *     @media (max-width:  599px) { … 100% … }
 *
 * Four up above 1023 and two up below it, with nothing in between. At 1024-1100
 * that is four cards inside ~900px of content — about 200px each — and at
 * 700-1023 it is two enormous ones. Neither reads as intentional, and no width
 * a card could be is expressed anywhere as a floor.
 *
 * THE FIX. The template becomes a grid and the block's `width` declarations go
 * inert (`width: auto`), so the steps are ours: 4 / 3 / 2 / 1 at 1280 / 1024 /
 * 600 / below, every column at least `--st-card-min` wide. `auto-fit` with that
 * minimum is what makes 700-1100px impossible to squish: the grid drops a column
 * before a card goes under the floor, whatever the container turns out to be.
 *
 * Specificity: the block's rule is two classes and `!important`; the attribute
 * selector here adds a third, so these win without a second `!important` war.
 * Every value is a theme token (PATTERN-RULE.md).
 */
.st-catalog-grid[class*="is-style-catalog-"] .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(var(--wp--custom--st-card-min, 248px), 1fr)
	);
	gap: var(--wp--custom--st-card-gap, 2rem);
	align-items: stretch;
}

/* The block's own per-instance widths and floats, retired. Without this the
   grid item is still 25% wide and the columns do not add up. */
.st-catalog-grid[class*="is-style-catalog-"] .wc-block-product-template > li {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

/* The explicit steps. `auto-fit` already refuses to squish; these pin the count
   so a 1280 window is four across and a 1040 one is three, rather than whatever
   the container happens to allow. */
@media (min-width: 1280px) {
	.st-catalog-grid[class*="is-style-catalog-"] .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(var(--wp--custom--st-card-min, 248px), 1fr));
	}
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.st-catalog-grid[class*="is-style-catalog-"] .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 600px) and (max-width: 1023.98px) {
	.st-catalog-grid[class*="is-style-catalog-"] .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599.98px) {
	.st-catalog-grid[class*="is-style-catalog-"] .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* One image box, whatever the photograph is. The six style variations each set
   their own aspect-ratio with !important, so this is the token they all agree on
   — a variation that wants a different shape overrides the token on itself, not
   the rule. */
.st-catalog-grid[class*="is-style-catalog-"] .wc-block-components-product-image img,
ul.products li.product .product_thumbnail_wrapper__container img {
	aspect-ratio: var(--wp--custom--st-card-aspect, 1 / 1);
}

/* The classic loop, same steps, so a store still rendering ul.products gets the
   same grid rather than the old fixed three. */
@media (min-width: 1280px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(4, minmax(var(--wp--custom--st-card-min, 248px), 1fr));
	}
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── 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;
}