/**
 * Produkty — the sortiment landing page.
 *
 * Owns only the layout around shared components: the category tile lives in
 * components/category-card.css, the product card in components/product-card.css.
 * The hero reuses .page-default__* from pages/page.css.
 */

/* ---------------------------------------------------------------
 * Jump links / subcategory chips
 * ------------------------------------------------------------- */

.produkty-jump {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-10 );
	margin-top: var( --space-26 );
}

.produkty-chip {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	padding: var( --space-9 ) var( --space-16 );
	border: 1px solid var( --c-cocoa-a08 );
	border-radius: var( --radius-pill );
	background: var( --surface-raised );
	font-size: var( --fs-15 );
	font-weight: var( --fw-bold );
	color: var( --color-heading );
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.produkty-chip:hover {
	transform: translateY( -2px );
	border-color: var( --c-honey-500 );
	box-shadow: var( --shadow-card );
}

.produkty-chip__count {
	min-width: var( --space-22 );
	padding: 0 var( --space-6 );
	border-radius: var( --radius-pill );
	background: var( --c-honey-100 );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-black );
	text-align: center;
}

/* ---------------------------------------------------------------
 * Category tiles
 * ------------------------------------------------------------- */

.produkty-tiles__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --space-26 );
}

.produkty-tiles .home-cat-card__title {
	font-size: var( --fs-22 );
}

/* ---------------------------------------------------------------
 * One section per category
 * ------------------------------------------------------------- */

.produkty-cat__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --space-30 );
	margin-bottom: var( --space-26 );
}

.produkty-cat__intro {
	max-width: 70ch;
}

.produkty-cat__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-widest );
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: .85;
}

.produkty-cat__eyebrow-dash {
	width: var( --space-26 );
	height: var( --space-8 );
	border-radius: var( --radius-8 );
	background: linear-gradient( 90deg, var( --c-honey-500 ), var( --c-honey-300 ) );
}

.produkty-cat__title {
	font-family: var( --font-display );
	font-size: var( --fs-d5 );
	line-height: var( --lh-tight );
	letter-spacing: var( --ls-tight );
	color: var( --color-heading );
}

.produkty-cat__title a {
	color: inherit;
	border-bottom: 2px solid transparent;
	transition: border-color .2s;
}

.produkty-cat__title a:hover {
	border-bottom-color: var( --c-honey-500 );
}

.produkty-cat__text {
	margin-top: var( --space-14 );
	font-size: var( --fs-17 );
	color: var( --color-text );
}

.produkty-cat__all {
	flex: none;
}

.produkty-cat__subs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-10 );
	margin-bottom: var( --space-30 );
}

/* WooCommerce prints its own <ul class="products …">; the grid lives on it. */
.produkty-cat__grid .products {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	align-items: stretch;
	gap: var( --space-26 );
}

.produkty-cat__grid .products > li {
	list-style: none;
}

.produkty-cat__more {
	margin-top: var( --space-34 );
	text-align: center;
}

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

@media ( max-width: 1024px ) {

	.produkty-tiles__grid,
	.produkty-cat__grid .products {
		grid-template-columns: repeat( 2, 1fr );
	}

	.produkty-cat__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( max-width: 640px ) {

	.produkty-tiles__grid {
		grid-template-columns: 1fr;
	}
}