/*
 * Catalogue (inc/Shop.php, woocommerce/archive-product.php, templates/vsetky-kategorie.php): shop,
 * category, subcategory and tag pages, Všetky kategórie. Tokens and components only, see tokens.css,
 * base.css and layout.css. The product card and the tag chips come from profigarden-site
 * (modules/product-card, assets/css/cards.css).
 *
 * Components: the banner is the compact hero of the site (.pg-hero--compact, layout.css), .pg-shop-bar + .pg-shop-sort (toolbar);
 * the category tiles (.pg-tiles + .pg-cat-tile), breadcrumbs, pagination and the empty state are the site's (layout.css). Shown in the styleguide
 * (templates/styleguide-parts/katalog.php).
 */

/* ---------- Page ---------- */

/* The banner touches the header, as on the live site: the page starts with it. */
.pg-main > .pg-wc:first-child > .pg-shop:first-child,
.pg-main > .pg-shop:first-child {
	margin-block-start: calc(-1 * var(--pg-gap-head));
}

/* The banner, the tiles and the products a section apart, the gap of Tipy a triky between its header and the chips of
   the topics (Jaroslav 10. 11. večer, zadanie 10, bod 6: "neskutočne natesno"; it changes the fold of zadanie 9b, the
   first row of cards no longer whole above the fold of a MacBook, test-vzhlad.mjs measures where it is now); the button
   Zobraziť viac close under the tiles, the empty wrapper of the notices of WooCommerce without a gap of its own. */
.pg-shop { row-gap: var(--pg-gap-section); }
.pg-shop__subcats { row-gap: var(--pg-gap-el); }
.pg-shop__results > .woocommerce-notices-wrapper:empty { display: none; }

/* Filters on the left from 1025 px (the module renders into pg_shop_filters), under it one column:
   the module turns its panel into a drawer opened by its "Filtre" button (pg_shop_filters_toggle). */
.pg-shop__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pg-gap-block) var(--pg-gap-grid-row);
	align-items: start;
}

@media (min-width: 1025px) {
	.pg-shop__body.has-filters { grid-template-columns: var(--pg-shop-sidebar) minmax(0, 1fr); }

	/* The filters stay in view under the sticky header while the products scroll, down to the end of the
	   list (sticky in its column, Jaroslav 6. 11.). Below the WordPress admin bar for a logged in editor. A
	   panel taller than the window scrolls inside. Phones and tablets: the dialog of the module. */
	.pg-shop__filters {
		position: sticky;
		top: var(--pg-shop-filters-top);
		max-height: calc(100vh - var(--pg-shop-filters-top) - var(--pg-gap-el));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		/* Room for the focus ring of an option at the edge, which the scrolling box would clip; the column keeps its line. */
		margin-inline: calc(-1 * var(--pg-space-4));
		padding-inline: var(--pg-space-4);
	}
}

/* Beside the filters 4 cards in a row (Jaroslav 7. 11.), on a small desktop 3: 4 cards there would be 150 to
   205 px narrow and their price, tags and button would not fit (layout.css, Grid). */
@media (min-width: 1025px) and (max-width: 1279px) {
	.pg-shop__body.has-filters .pg-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pg-shop__filters,
.pg-shop__results { min-width: 0; }

/* Intro and tiles (swapped by the filters module): its children stay items of the page grid, in its
   content track like any child of .pg-layout (layout.css matches direct children only). */
.pg-shop__head { display: contents; }
.pg-shop__head > * { grid-column: content; min-width: 0; }

/* Cards fill their cell, so a row ends on one line. */
.pg-shop__item {
	display: flex;
	min-width: 0;
}

.pg-shop__item > .pg-card {
	flex: 1 1 auto;
	width: 100%;
}

/* ---------- Category tiles ----------
 * The tiles are a component of the site (layout.css: the catalogue, Všetky kategórie and the home page); here
 * only the button "Zobraziť viac" of the subcategories. */
.pg-tiles__more svg {
	transition: transform var(--pg-dur) var(--pg-ease);
}

.pg-tiles__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Toolbar (.pg-shop-bar): views, count, filters button, sort ---------- */

.pg-shop-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pg-gap-el) var(--pg-gap-block);
}

.pg-shop-bar__views .pg-cluster { --pg-cluster-gap: var(--pg-space-8); }

.pg-shop-bar__count {
	margin-inline-start: auto;
	font-size: var(--pg-text-s);
	color: var(--pg-muted);
}

.pg-shop-bar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pg-space-8);
}

/* A phone: the views, the count and the actions each on its own line. The actions take the whole line: Filter starts at
   the left edge of the page, under the views and the count (zadanie 11, pripomienka 10), the sort ends at the right one. */
@media (max-width: 767px) {
	.pg-shop-bar__views { flex: 1 1 100%; }
	.pg-shop-bar__count { margin-inline-start: 0; }
	.pg-shop-bar__actions { flex: 1 1 100%; }
	.pg-shop-bar__actions > .pg-shop-sort { margin-inline-start: auto; }
}

.pg-shop-sort {
	display: flex;
	align-items: center;
	gap: var(--pg-space-8);
}

.pg-shop-sort__label {
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-bold);
	white-space: nowrap;
}

/* With JavaScript (shop.js) a choice applies at once: the button is only for use without it. */
.pg-js .pg-shop-sort__go { display: none; }

/* The small select of the site (.pg-select--s, base.css). 16 px text: iOS zooms into smaller fields. */
.pg-shop-sort__select { width: auto; }