/*
 * OnlyCat storefront: the WooCommerce shop page, in sections.
 *
 * Loaded only on the shop page (inc/storefront.php) and scoped under
 * body.onlycat-storefront, so category and tag archives are untouched. It
 * styles stock WooCommerce loop markup — the same content-product.php cards
 * every archive renders — plus the section wrappers the theme adds. If this
 * file fails to load the page is WooCommerce's own list, grouped.
 *
 * Tokens mirror assets/product.css so the storefront and the product pages
 * read as one place.
 */

body.onlycat-storefront {
	--oc-ink: #101b24;
	--oc-ink-soft: #35464f;
	--oc-paper: #fcfaf6;
	--oc-oat: #f4efe6;
	--oc-blue: #1597ce;
	--oc-blue-deep: #0e7bab;
	--oc-blue-tint: #e3f3fa;
	--oc-line: #d7d2c9;
	--oc-white: #ffffff;
	--oc-radius: 10px;
	--oc-sans: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	background: var(--oc-paper);
	color: var(--oc-ink);
	font-family: var(--oc-sans);
}

/* ---- Frame ---------------------------------------------------------- */

body.onlycat-storefront #main {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px 3.5rem;
}

body.onlycat-storefront .woocommerce-breadcrumb {
	font-size: 0.82rem;
	color: var(--oc-ink-soft);
	margin: 1.2rem 0 1.2rem;
}

body.onlycat-storefront .woocommerce-breadcrumb a {
	color: var(--oc-ink-soft);
}

/* ---- Page header: title and the page's own copy -------------------- */

body.onlycat-storefront .woocommerce-products-header {
	margin: 0.5rem 0 2.5rem;
	max-width: 720px;
}

body.onlycat-storefront .woocommerce-products-header__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 0.9rem;
	color: var(--oc-ink);
}

body.onlycat-storefront .page-description p {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--oc-ink-soft);
	margin: 0 0 0.8rem;
}

body.onlycat-storefront .page-description .onlycat-storefront__tagline {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.25;
	font-weight: 600;
	color: var(--oc-blue-deep);
	margin-bottom: 0.9rem;
}

body.onlycat-storefront .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ---- Sections -------------------------------------------------------- */

body.onlycat-storefront .onlycat-storefront__section {
	margin: 0 0 3.25rem;
}

body.onlycat-storefront .onlycat-storefront__heading {
	font-size: 1.35rem;
	line-height: 1.2;
	margin: 0 0 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--oc-line);
	color: var(--oc-ink);
}

/* ---- Product grid: replaces Woo's floats with a grid ---------------- */

body.onlycat-storefront ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo's clearfix pseudo-elements would become grid cells. */
body.onlycat-storefront ul.products::before,
body.onlycat-storefront ul.products::after {
	content: none;
	display: none;
}

body.onlycat-storefront ul.products li.product,
body.onlycat-storefront ul.products[class*="columns-"] li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	text-align: left;
}

body.onlycat-storefront ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

body.onlycat-storefront ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	margin: 0 0 0.85rem;
	background: var(--oc-oat);
}

body.onlycat-storefront ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 0.35rem;
	padding: 0;
	color: var(--oc-ink);
}

body.onlycat-storefront ul.products li.product .price {
	font-size: 1rem;
	color: var(--oc-ink);
	margin: 0 0 0.9rem;
	display: block;
}

body.onlycat-storefront ul.products li.product .price del {
	color: var(--oc-ink-soft);
	opacity: 0.8;
}

body.onlycat-storefront ul.products li.product .star-rating {
	margin: 0 0 0.5rem;
}

/* Woo positions the badge from the right on loop items (right: -0.5em); with a
   left offset as well it would stretch across the card, so the right is released. */
body.onlycat-storefront ul.products li.product .onsale {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	right: auto;
	bottom: auto;
	margin: 0;
	width: auto;
	background: var(--oc-blue-deep);
	color: var(--oc-white);
	border-radius: 999px;
	padding: 0.2em 0.8em;
	font-size: 0.8rem;
	line-height: 1.6;
	min-height: 0;
	min-width: 0;
}

/* The add-to-cart button sits at the bottom of the card whatever the title length. */
body.onlycat-storefront ul.products li.product a.button,
body.onlycat-storefront ul.products li.product a.button.alt {
	margin-top: auto;
	display: block;
	text-align: center;
	background: var(--oc-blue);
	color: var(--oc-white);
	border: 0;
	border-radius: 8px;
	padding: 0.7em 1em;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	transition: background 0.15s ease;
}

body.onlycat-storefront ul.products li.product a.button:hover,
body.onlycat-storefront ul.products li.product a.button:focus-visible {
	background: var(--oc-blue-deep);
	color: var(--oc-white);
}

body.onlycat-storefront ul.products li.product a.button.loading {
	opacity: 0.6;
}

body.onlycat-storefront ul.products li.product a.added_to_cart {
	display: block;
	text-align: center;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: var(--oc-blue-deep);
}

/* ---- The lead: the flap, one card, image beside the text ------------ */

body.onlycat-storefront .onlycat-storefront__section--lead {
	margin-top: -0.5rem;
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products {
	grid-template-columns: minmax(0, 1fr);
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	grid-template-rows: auto auto auto;
	column-gap: 2.5rem;
	align-items: center;
	padding: 1.5rem;
	background: var(--oc-blue-tint);
	border-color: transparent;
}

/* The link wraps image, title and price; let those place themselves on the grid. */
body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product a.woocommerce-LoopProduct-link {
	display: contents;
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product img {
	grid-column: 1;
	grid-row: 1 / span 3;
	margin: 0;
	background: var(--oc-white);
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .onsale {
	grid-column: 1;
	grid-row: 1;
	top: 2rem;
	left: 2rem;
	right: auto;
	justify-self: start;
	align-self: start;
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .woocommerce-loop-product__title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	line-height: 1.15;
	margin-bottom: 0.6rem;
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .star-rating,
body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .price {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	font-size: 1.15rem;
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .star-rating {
	margin-top: 0.15rem;
	justify-self: end;
}

body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product a.button {
	grid-column: 2;
	grid-row: 3;
	align-self: start;
	justify-self: start;
	margin-top: 0.25rem;
	padding: 0.8em 1.6em;
	font-size: 1rem;
}

/* display: contents drops the link's own focus ring; put one on its title. */
body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product a.woocommerce-LoopProduct-link:focus-visible .woocommerce-loop-product__title {
	outline: 2px solid var(--oc-blue-deep);
	outline-offset: 4px;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 980px) {
	body.onlycat-storefront ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	body.onlycat-storefront ul.products,
	body.onlycat-storefront ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 0.75rem;
	}

	body.onlycat-storefront ul.products li.product,
	body.onlycat-storefront ul.products[class*="columns-"] li.product {
		padding: 0.75rem;
	}

	body.onlycat-storefront ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.95rem;
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products,
	body.onlycat-storefront .onlycat-storefront__section--lead ul.products[class*="columns-"] {
		grid-template-columns: minmax(0, 1fr);
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		padding: 1rem;
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product img,
	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .onsale,
	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .woocommerce-loop-product__title,
	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .star-rating,
	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .price,
	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product a.button {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product img {
		margin-bottom: 1rem;
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .onsale {
		top: 1.5rem;
		left: 1.5rem;
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product .star-rating {
		justify-self: start;
	}

	body.onlycat-storefront .onlycat-storefront__section--lead ul.products li.product a.button {
		text-align: center;
	}
}