/*
 * Simeoni - catalogue display
 *
 * Card sizing applies to every product list: the category/shop grid
 * (`ul.products.grid`) and the related-products slider on single product pages
 * (`ul.products.products-slider`). Only the column ladder and gaps are
 * grid-specific - the slider gets its columns from tiny-slider instead.
 *
 * Selectors carry three classes (`.products` + `.product-item` + `.product`) on
 * purpose: the theme sizes cards with `group-hover:h-[47rem]`, which compiles to
 * a three-class rule. Anything lighter loses on hover. No !important needed.
 */

ul.products {
	/* Single knob for catalogue density - product and category images use it. */
	--simeoni-img-h: 17rem;
}

/* ------------------------------------------------------------ grid only */

ul.products.grid {
	column-gap: 1.25rem;
	row-gap: 2.25rem;
}

/*
 * Denser column ladder. The theme went 1 / 2 (768) / 3 (1292) / 4 (1536), which
 * left a lot of empty space now that the cards are narrower. The container's own
 * max-width still caps the row, so cards never get too small.
 */
@media (min-width: 1024px) {
	ul.products.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1292px) {
	ul.products.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1600px) {
	ul.products.grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --------------------------------------- short related row (no carousel) */

/*
 * Used when a product has fewer related items than fit across. Cards keep the
 * same slot width as the carousel would give them, wrap on narrow screens, and
 * stay centred instead of hugging the left edge.
 */
ul.products.simeoni-static-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1.25rem;
	row-gap: 2.25rem;
}

ul.products.simeoni-static-row > li.product-item.product {
	flex: 0 0 auto;
	width: 100%;
}

@media (min-width: 768px) {
	ul.products.simeoni-static-row > li.product-item.product {
		width: calc((100% - 1.25rem) / 2);
		max-width: none;
	}
}

@media (min-width: 1024px) {
	ul.products.simeoni-static-row > li.product-item.product {
		width: calc((100% - 2.5rem) / 3);
	}
}

@media (min-width: 1292px) {
	ul.products.simeoni-static-row > li.product-item.product {
		width: calc((100% - 3.75rem) / 4);
	}
}

@media (min-width: 1600px) {
	ul.products.simeoni-static-row > li.product-item.product {
		width: calc((100% - 5rem) / 5);
	}
}

/* ------------------------------------------------- card (grid + slider) */

/*
 * Spacing in the slider belongs to tiny-slider (`gutter: 20`), not to CSS:
 * tns sizes items as container/items and cannot see a CSS gap, so leaving
 * `gap-x-5` here would push the last card out and leave a hole in the row.
 */
ul.products.products-slider {
	column-gap: 0;
}

/* Drop the fixed 47rem/43rem heights so the card hugs its content. */
ul.products > li.product-item.product {
	height: auto;
}

/*
 * The white box fills the whole cell, so cards stay level even when one has a
 * price range ("CHF 200.00 - CHF 500.00") that wraps onto a second line.
 */
ul.products > li.product-item.product > div,
ul.products > li.product-item.product:hover > div {
	height: 100%;
}

ul.products.grid > li.product-item.product {
	max-width: none;
}

ul.products > li.product-item.product > div > div:first-child {
	min-height: 0;
	max-height: none;
}

/* Shorter image: 504px -> 272px. */
ul.products > li.product-item.product img {
	height: var(--simeoni-img-h);
	width: 100%;
	object-fit: cover;
}

/* Tighter padding around the title / price block. */
ul.products > li.product-item.product > div > div:first-child > div.text-center {
	padding: 1rem 1.25rem 0.75rem;
}

/* ...and around the call to action. */
ul.products > li.product-item.product > div > div.text-center {
	padding: 0 1.25rem 1.125rem;
}

/*
 * The theme fades the button in on hover (bs:opacity-0 + group-hover:opacity-100)
 * but reserved its height anyway. Show it always - the space is paid for either
 * way, and a visible button needs no discovery.
 */
ul.products > li.product-item.product > div > div.text-center {
	opacity: 1;
}

/* The title reserves two lines; shrink it to match the smaller card. */
ul.products > li.product-item.product > div > div:first-child > div.text-center > div:first-child {
	margin-bottom: 0.75rem;
}

ul.products > li.product-item.product a.h4 {
	font-size: 1.125rem;
	height: 3rem;
}

/* Divider spacing. */
ul.products > li.product-item.product > div > div:first-child > div.text-center > div.h-px {
	margin-bottom: 0.625rem;
}

/* ------------------------------------------------- subcategory tiles */

/*
 * Category tiles share the grid with product cards. Their image is the tallest
 * thing in the row, so it drives the row height - it has to shrink too, or the
 * grid stays as tall as before.
 *
 * `contain` rather than `cover`: most tiles use the brand logo as their image
 * and cropping it looks broken. The theme's default is `fill`, which distorts.
 */
ul.products.grid > li.product-category > a > img {
	height: var(--simeoni-img-h);
	width: 100%;
	object-fit: contain;
	padding: 1.25rem;
}

/* ----------------------------------------------------------- stock badge */

.simeoni-stock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.simeoni-stock::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.simeoni-stock--in {
	color: #1c7c3d;
}

.simeoni-stock--backorder {
	color: #9a6b16;
}

.simeoni-stock--out {
	color: #8d8d8d;
}

/* ------------------------------- single product page: not available */

.simeoni-unavailable {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 1.25rem 0;
	padding: 0.75rem 1.25rem;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	background: #f6f6f6;
	color: #6f6f6f;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
}

.simeoni-unavailable::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* ------------------------------------------------- unavailable products */

/* Greyscale photo so an unavailable product reads at a glance. */
ul.products > li.product-item.product.outofstock img {
	filter: grayscale(1);
	opacity: 0.9;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Give a hint of colour back on hover - the product is still worth a look. */
ul.products > li.product-item.product.outofstock:hover img {
	filter: grayscale(0.55);
	opacity: 1;
}

/*
 * The card's button reads "Lire la suite" for anything that cannot be bought.
 * Keep the shape but drop it to a ghost button, so the solid terracotta stays
 * reserved for products that can actually be ordered.
 */
ul.products > li.product-item.product.outofstock a.btn {
	background-color: transparent;
	border-color: #dcdcdc;
	color: #8d8d8d;
	font-size: 1rem;
}

ul.products > li.product-item.product.outofstock a.btn:hover {
	background-color: #f3f3f3;
	border-color: #c9c9c9;
	color: #6f6f6f;
}