/*
 * Layout primitives. Pages are built only from these, components never set
 * their own outer margins: the parent decides the gap, the child fills it.
 *
 *   .pg-main      the page: sections in a column, --pg-gap-section between them
 *   .pg-layout    page grid with three tracks: content (default), narrow, full width
 *   .pg-section   one band of the page, optionally with a background (tone)
 *   .pg-hero      the page hero: eyebrow and h1 on a photo (Template::hero()); the slides of the home page: home.css
 *   .pg-stack     vertical list with an even gap
 *   .pg-cluster   horizontal row that wraps (buttons, badges, filters)
 *   .pg-grid      responsive card grid
 *   .pg-split     two columns (product page, text + image)
 *   .pg-rail      a row of product cards that scrolls sideways (Template::product_rail())
 *   .pg-pagination, .pg-empty, .pg-box  pagination, empty state and light panel of the site
 *   .pg-breadcrumbs                     the breadcrumbs of every page that has them (action pg_breadcrumbs)
 *   .woocommerce-message, -info, -error the notices of WooCommerce (the checkout has its own)
 */

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

.pg-main {
	display: flex;
	flex-direction: column;
	gap: var(--pg-gap-section);
	padding-block: var(--pg-gap-head) var(--pg-gap-section);
}

/* A section with background touching the header or footer has no extra white strip. */
.pg-main > .pg-section--tone:first-child { margin-block-start: calc(-1 * var(--pg-gap-head)); }
.pg-main > .pg-section--tone:last-child  { margin-block-end: calc(-1 * var(--pg-gap-section)); flex-grow: 1; } /* short page: no white strip above the footer */

/* ---------- Page grid ----------
 * Children sit in the content track (max --pg-content, centred, gutters on the sides).
 *   .is-full    edge to edge (photo, banner, background band)
 *   .is-bleed   from the content edge to the right edge of the screen (carousels)
 *   .is-narrow  centred text column (--pg-narrow)
 * A full width child that is itself .pg-layout puts its own children back on the content track.
 */
.pg-layout {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--pg-gutter), 1fr)
		[content-start] min(100% - 2 * var(--pg-gutter), var(--pg-content)) [content-end]
		minmax(var(--pg-gutter), 1fr) [full-end];
	align-content: start;
}

.pg-layout > *          { grid-column: content; min-width: 0; }
.pg-layout > .is-full   { grid-column: full; }
.pg-layout > .is-bleed  { grid-column: content-start / full-end; }
.pg-layout > .is-narrow { justify-self: center; width: 100%; max-width: var(--pg-narrow); }

/* ---------- Section ---------- */

/* row-gap only: as a .pg-layout grid a column gap would widen the page tracks. */
.pg-section {
	display: flex;
	flex-direction: column;
	row-gap: var(--pg-gap-head);
}

.pg-section.pg-layout { display: grid; }

.pg-section--tone {
	padding-block: var(--pg-section-pad);
	background: var(--pg-section-bg, var(--pg-surface-light));
}

.pg-section--light { --pg-section-bg: var(--pg-surface-light); }
.pg-section--beige { --pg-section-bg: var(--pg-beige); }
/* The colour roles switch to their on-dark values: the light green button gets dark text, the secondary
   button turns into its inverse (transparent, white line and text, white on hover). A light surface inside
   takes the values for white back (tokens.css). */
.pg-section--dark {
	--pg-section-bg: var(--pg-green-dark);
	--pg-focus-color: var(--pg-white);
	--pg-focus: 0 0 0 2px var(--pg-green-dark), 0 0 0 4px var(--pg-accent-on-dark);
	--pg-accent-text: var(--pg-accent-on-dark);
	--pg-accent-text-hover: var(--pg-accent-on-dark-hover);
	--pg-text-2: var(--pg-text-2-on-dark);
	--pg-muted: var(--pg-muted-on-dark);
	--pg-on-accent: var(--pg-green-dark);
	--pg-ink: var(--pg-white);
	--pg-ink-inverse: var(--pg-green-dark);
	--pg-ink-paper: transparent;
	--pg-ghost-hover-bg: var(--pg-white);
	--pg-ghost-hover-fg: var(--pg-green-dark);
	color: var(--pg-white);
}

/* The primary button is the one of the site on a dark section too (Jaroslav 10. 11.; --pg-primary with the white
   label, zadanie 11, base.css): it does not read the colour roles, so nothing switches here. Not on the green
   bands (#47843B): --pg-primary on them has 1.3:1, the button would vanish, there it is white with green text. */
.pg-section--green .pg-btn--primary {
	--pg-btn-bg: var(--pg-accent-text);
	--pg-btn-fg: var(--pg-on-accent);
	--pg-btn-line: var(--pg-accent-text);
}

.pg-section--green .pg-btn--primary:hover {
	--pg-btn-bg: var(--pg-accent-text-hover);
	--pg-btn-fg: var(--pg-on-accent);
	--pg-btn-line: var(--pg-accent-text-hover);
}

/* The green bands Kde nás nájdete and Za rok sme nasadili (Jaroslav 10. 11.): a dark section on --pg-green with every
   text pure white (eyebrow, title, lead, numbers, links, lines; white on it is 4.5:1, so nothing lighter or
   transparent), the secondary button inverse as on dark green (white on hover with green text), focus white. */
.pg-section--green {
	--pg-section-bg: var(--pg-green);
	--pg-focus: 0 0 0 2px var(--pg-green), 0 0 0 4px var(--pg-white);
	--pg-accent-text: var(--pg-white);
	--pg-accent-text-hover: var(--pg-white);
	--pg-text-2: var(--pg-white);
	--pg-muted: var(--pg-white);
	--pg-on-accent: var(--pg-green);
	--pg-ink-inverse: var(--pg-green);
	--pg-ghost-hover-fg: var(--pg-green);
}

/* A light surface inside a dark section: its own text colour, the roles come from tokens.css. */
.pg-on-light { background: var(--pg-white); }
.pg-on-light,
.pg-section--dark .pg-card,
.pg-section--dark .pg-buybox__box,
.pg-section--dark .pg-bundle,
.pg-section--dark .pg-usp__item { color: var(--pg-text); }

/* ---------- Hero (Template::hero()) ----------
 * The one page hero of the site, the band of the live site with an eyebrow and the h1 on a photo: a dark
 * section, the photo under --pg-scrim (white text keeps 4.7:1 even over a white photo), centred text.
 *   (default)  blog, Realizácie: --pg-hero-min-h (the live band, 210 to 290 px)
 *   --compact  catalogue and search: --pg-banner-min-h with less padding (the live banner, about 200 px)
 *   --tall     article: --pg-hero-tall
 * Without a photo the same band in dark green.
 */
.pg-hero {
	position: relative;
	isolation: isolate;
	align-content: center;
	min-block-size: var(--pg-hero-min-h);
	text-align: center;
}

.pg-hero--compact {
	min-block-size: var(--pg-banner-min-h);
	padding-block: var(--pg-gap-head);
}

.pg-hero--tall { min-block-size: var(--pg-hero-tall); }

/* A hero at the top of the page touches the header, as a tone section does (above): also as the first
   child of the first section (an article, the search of the whole site). The catalogue moves its whole
   column (shop.css). */
.pg-main > .pg-entry:first-child > .pg-hero:first-child,
.pg-main > .pg-search-results:first-child > .pg-hero:first-child { margin-block-start: calc(-1 * var(--pg-gap-head)); }

/* The photo fills the band behind the text; the band's own size comes from its content (no shift).
   grid-column auto: an absolutely positioned grid child without a placement takes the padding box of the
   band, edge to edge (.pg-layout would put it on the content track). Photo and scrim share one layer behind
   the text (the hero isolates it): the scrim is the last box (::after), so it paints over the photo. */
.pg-hero > .pg-hero__media,
.pg-hero__picture > .pg-hero__media {
	grid-column: auto;
	position: absolute;
	inset: 0;
	z-index: var(--pg-z-below);
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* With a photo for phones the image sits in a <picture> without a box of its own: it stays the layer behind the band. */
.pg-hero__picture { display: contents; }

.pg-hero.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--pg-z-below);
	background: var(--pg-scrim);
}

/* ---------- The header of a page (Template::hero() with crumbs and intro; Jaroslav 10. 11.) ----------
 * The breadcrumbs are its first row, at the top on the left, the rest in the middle of the band under them. White on the
 * scrim: the links underlined, the current page bold (4.5:1 on the darkest scrim over a white photo), the focus white.
 * The compact header (catalogue, search) has its eyebrow and title on the left and the description of the category on
 * the right from 1025 px, under each other below, all on the photo under the darker --pg-scrim-banner. */
.pg-hero.has-crumbs {
	grid-template-rows: auto minmax(0, 1fr);
	align-content: stretch;
	row-gap: var(--pg-gap-el);
	padding-block-start: var(--pg-gap-el);
}

.pg-hero.has-crumbs > .pg-hero__inner,
.pg-hero.has-crumbs > .pg-hero__body { align-self: center; }

.pg-hero__crumbs {
	align-self: start;
	text-align: start;
}

.pg-hero .pg-breadcrumbs,
.pg-hero .pg-breadcrumbs a,
.pg-hero .pg-breadcrumbs a:hover,
.pg-hero .pg-breadcrumbs [aria-current="page"],
.pg-hero .pg-breadcrumbs__item + .pg-breadcrumbs__item::before { color: var(--pg-white); }

.pg-hero .pg-breadcrumbs a:hover { text-decoration-thickness: 2px; }
.pg-hero .pg-breadcrumbs [aria-current="page"] { font-weight: var(--pg-fw-bold); }

.pg-hero--compact.has-image::after { background: var(--pg-scrim-banner); }

.pg-hero--compact {
	text-align: start;
	row-gap: var(--pg-gap-el);
}

.pg-hero--compact .pg-hero__inner {
	justify-self: stretch;
	align-items: flex-start;
	max-width: none;
}

.pg-hero__body {
	display: grid;
	gap: var(--pg-gap-el) var(--pg-gap-pdp);
	align-items: center;
}

.pg-hero__intro:empty { display: none; }

.pg-hero__intro-text { color: inherit; }
.pg-hero__intro-text :is(p, li) { color: inherit; }
.pg-hero__intro-text a { color: inherit; text-decoration-color: currentColor; }

/* A long description is folded to a few lines with Zobraziť viac (Template::hero(), shop.js opens it and hides the button
   where the text fits). Without JavaScript the whole text and no button. */
@media (scripting: enabled) {
	.pg-hero__intro.is-folded .pg-hero__intro-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--pg-hero-intro-lines);
		overflow: hidden;
	}
}

@media (scripting: none) {
	.pg-hero__more { display: none; }
}

.pg-hero__more {
	margin-block-start: var(--pg-space-4);
	padding: var(--pg-space-4) 0;
	border: 0;
	background: none;
	color: var(--pg-white);
	font: inherit;
	font-weight: var(--pg-fw-bold);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.pg-hero__more:hover { text-decoration-thickness: 2px; }

@media (min-width: 1025px) {
	.pg-hero__body:has(> .pg-hero__intro:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.pg-hero__inner {
	justify-self: center;
	align-items: center;
	width: 100%;
	max-width: var(--pg-narrow);
}

.pg-hero--compact .pg-hero__inner { max-width: none; }

/* White as on the live site: the green eyebrow of a dark section would not reach 4.5:1 on a photo. The words
   of a search can be one long word: they wrap instead of widening the page. */
.pg-hero .pg-eyebrow,
.pg-hero__meta,
.pg-hero__lead { color: inherit; }
.pg-hero__title { color: inherit; overflow-wrap: anywhere; }
.pg-hero__actions { justify-content: center; } /* buttons on two lines: each line in the middle */

/* Heading row of a section: title on the left, link "Zobraziť všetko" or arrows on the right. */
.pg-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--pg-gap-el) var(--pg-gap-block);
}

.pg-section__head > :first-child { max-width: var(--pg-measure); }

.pg-section__intro {
	display: flex;
	flex-direction: column;
	gap: var(--pg-gap-el);
}

/* Button under the content ("Zobraziť všetky produkty"). */
.pg-section__foot {
	display: flex;
	justify-content: center;
}

/* A phone (zadanie 11, pripomienky 6, 8 a 13): the link of a section ("Zobraziť všetko", "Všetky články", "Všetky
   realizácie", the link of a row of products) stands under the content of the section, in the middle. The head gives up
   its own box, so its title and its link are items of the section: the link goes last (order), the title stays first.
   One link in the markup, right after the title: a screen reader reads it once and the keyboard reaches it before the
   cards, as on a desktop. */
@media (max-width: 767px) {
	.pg-section > .pg-section__head.has-more { display: contents; }

	.pg-section > .pg-section__head.has-more > * {
		grid-column: content;
		min-width: 0;
	}

	.pg-section > .pg-section__head.has-more > .pg-section__more {
		order: 1;
		justify-self: center;
		align-self: center;
		max-width: 100%;
	}
}

/* ---------- Stack ---------- */

.pg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--pg-stack-gap, var(--pg-gap-block));
}

.pg-stack--el    { --pg-stack-gap: var(--pg-gap-el); }
.pg-stack--block { --pg-stack-gap: var(--pg-gap-block); }
.pg-stack--head  { --pg-stack-gap: var(--pg-gap-head); }
.pg-stack--section { --pg-stack-gap: var(--pg-gap-section); }

/* ---------- Cluster ---------- */

.pg-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pg-cluster-gap, var(--pg-gap-el));
}

.pg-cluster--between { justify-content: space-between; }

/* ---------- Grid ----------
 * Default: as many columns as fit, each at least --pg-grid-min wide.
 * Fixed counts: .pg-grid--2/3/4/5 (desktop), phones get 2 for 3 and more, 1 for 2 (and for .pg-grid--stack).
 * Product cards (ProductCard::grid(), the catalogue): 5 in the content of a desktop, 4 on a small desktop
 * (1025 to 1279 px, a card of 5 would be about 180 px there and its price and tags would not fit), 3 on a
 * tablet. Beside the filters the catalogue has 4 and 3 on a small desktop (shop.css).
 */
.pg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--pg-grid-min, var(--pg-card-min)), 100%), 1fr));
	gap: var(--pg-gap-grid-row) var(--pg-gap-grid);
}

.pg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1279px) {
	.pg-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.pg-grid--4,
	.pg-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.pg-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.pg-grid--3,
	.pg-grid--4,
	.pg-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* One card in a row on a phone: the cards of Realizácie (zadanie 11, pripomienka 13). */
	.pg-grid--3.pg-grid--stack { grid-template-columns: minmax(0, 1fr); }
}

/* The product grid of the site (ProductCard::grid()): a list, each card fills its cell (rows end on one line). */
.pg-grid__item {
	display: flex;
	min-width: 0;
}

.pg-grid__item > * {
	flex: 1 1 auto;
	width: 100%;
}

/* ---------- Product rail (.pg-rail, Template::product_rail(), assets/js/rail.js) ----------
 * Product sections of the home page and Obľúbené produkty on the product page, as on the old e-shop (Jaroslav 7. 11.).
 * A card is as wide as a card of the grid of 5 of the catalogue (5 in the content of a desktop, 4 on a small desktop,
 * 1025 to 1279 px, 3 on a tablet, 1.7 on a phone; container query units of the section, not of the screen), the row
 * snaps to the cards and runs to the right edge of the screen on every width (.is-bleed: the cards pass under the
 * edge, not under the white gutter).
 *   from 1025 px  the head on the left in the first column of that grid (--pg-rail-head: one card and its gap): the
 *                 eyebrow, the title and the link under it, in the middle of the height of the cards; the cards stand
 *                 on the columns 2 to 5 and only they scroll;
 *   up to 1024 px the head over the row as before (the title left, the link right).
 * Predchádzajúce and Ďalšie lie over the edges of the row (the first card, the end of the content) in the middle of
 * the photos, always shown, inactive where there is nowhere to go (aria-disabled, the look of an inactive button of the
 * site, rail.js; hidden without JavaScript, they would do nothing). An inactive one lets a tap and a click through to the
 * card under it (the keyboard still reaches it); over an active one a sideways wheel or swipe moves the row (rail.js).
 * The bar under the row (.pg-rail__bar, rail.js) ends where the content ends, not at the edge of the screen: the thumb
 * in the green of text (--pg-accent-text; not the lighter fill of the primary button) on a light track (4.4:1, WCAG 1.4.11 needs 3:1), 4 px, 16 px under the cards.
 * With JavaScript on the scroll bar of the system is hidden from the start (it belongs to the row that runs to the edge
 * of the screen and cannot be shorter) and the room of the bar is kept from the start, shown once rail.js knows the row
 * scrolls: the height never changes while the page loads, also with an overlay scroll bar (skeptik 6, web 8). Without
 * JavaScript (scripting: none) no bar, the scroll bar of the system: 4 px in Chrome and Safari, "thin" in Firefox.
 */
.pg-rail,
.pg-article__aside {
	--pg-rail-thumb: var(--pg-accent-text);
	--pg-rail-bar: var(--pg-line);
	--pg-rail-bar-h: var(--pg-space-4);
}

.pg-rail {
	--pg-rail-cols: 5;
	/* For the elements inside the section (container query units of the section): its content and a card of the grid. */
	--pg-rail-content: min(100cqi - 2 * var(--pg-gutter), var(--pg-content));
	--pg-rail-card: calc((var(--pg-rail-content) - (var(--pg-rail-cols) - 1) * var(--pg-gap-grid)) / var(--pg-rail-cols));
	--pg-rail-end: calc((100cqi - var(--pg-rail-content)) / 2); /* from the end of the content to the edge of the screen */
	container-type: inline-size;
}

/* From 1025 px: the head in the first column of the grid, the row from the second column to the edge of the screen. The
   section is the container of its cards, so its own columns take its width in % (100 % = 100cqi inside it). */
@media (min-width: 1025px) {
	.pg-rail {
		--pg-rail-head: calc((min(100% - 2 * var(--pg-gutter), var(--pg-content)) - (var(--pg-rail-cols) - 1) * var(--pg-gap-grid)) / var(--pg-rail-cols) + var(--pg-gap-grid));
		grid-template-columns:
			[full-start] minmax(var(--pg-gutter), 1fr)
			[content-start] var(--pg-rail-head)
			[rail-start] calc(min(100% - 2 * var(--pg-gutter), var(--pg-content)) - var(--pg-rail-head)) [content-end]
			minmax(var(--pg-gutter), 1fr) [full-end];
	}

	.pg-rail > .pg-rail__head {
		grid-column: content-start / rail-start;
		grid-row: 1;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		align-self: center;
		gap: var(--pg-gap-block);
		padding-inline-end: var(--pg-gap-grid);
	}

	.pg-rail > .pg-rail__view {
		grid-column: rail-start / full-end;
		grid-row: 1;
	}
}

/* A long word of the title wraps in the narrow column instead of running under the cards. */
.pg-rail__head .pg-h2 { overflow-wrap: break-word; hyphens: auto; }

.pg-rail__view {
	position: relative;
	min-width: 0;
}

/* Two classes: the list reset of base.css (ul[role="list"]) would take the padding away. */
.pg-rail .pg-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--pg-rail-card);
	gap: var(--pg-gap-grid);
	margin: 0;
	/* Room for a focus ring above, the bar 16 px under the cards; at the end the last card stops one gutter before the edge. */
	padding: var(--pg-space-4) var(--pg-gutter) var(--pg-space-16) 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

/* With JavaScript the bar of rail.js: no scroll bar of the system, from the start. */
.pg-rail .pg-rail__track { scrollbar-width: none; }
.pg-rail .pg-rail__track::-webkit-scrollbar { display: none; }

/* The room of the bar from the start, the bar shown once rail.js runs and the row scrolls. */
.pg-rail__bar {
	position: relative;
	height: var(--pg-rail-bar-h);
	margin-inline-end: var(--pg-rail-end);
	background: var(--pg-rail-bar);
	visibility: hidden;
}

.pg-rail.has-bar.is-scrollable .pg-rail__bar { visibility: visible; }

/* Without JavaScript the scroll bar of the system and no bar: in Chrome and Safari its pseudo elements (Chrome ignores
   them unless scrollbar-width is auto and scrollbar-color is not set), in Firefox "thin". */
@media (scripting: none) {
	.pg-rail .pg-rail__track { scrollbar-width: auto; }
	.pg-rail .pg-rail__track::-webkit-scrollbar { display: block; height: var(--pg-rail-bar-h); }
	.pg-rail .pg-rail__track::-webkit-scrollbar-track { background: var(--pg-rail-bar); }
	.pg-rail .pg-rail__track::-webkit-scrollbar-thumb { background: var(--pg-rail-thumb); border-radius: var(--pg-radius-pill); }
	.pg-rail__bar { display: none; }

	@supports not selector(::-webkit-scrollbar) {
		.pg-rail .pg-rail__track {
			scrollbar-width: thin;
			scrollbar-color: var(--pg-rail-thumb) var(--pg-rail-bar);
		}
	}
}

/* The thumb takes a finger and a mouse in a taller strip than its 4 px (::before). */
.pg-rail__thumb {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	border-radius: var(--pg-radius-pill);
	background: var(--pg-rail-thumb);
	cursor: grab;
	touch-action: none;
}

.pg-rail__thumb::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--pg-space-12)) 0;
}

.pg-rail.is-dragging .pg-rail__thumb { cursor: grabbing; }

/* Predchádzajúce at the first card, Ďalšie at the end of the content, in the middle of the photo (a square under the
   focus room of the track and the edge of the card). */
.pg-rail__view > .pg-rail__btn {
	position: absolute;
	inset-block-start: calc(var(--pg-space-4) + var(--pg-rail-card) / 2);
	z-index: var(--pg-z-raised-2);
	translate: 0 -50%;
}

.pg-rail__view > [data-pg-rail-prev] { inset-inline-start: 0; }
.pg-rail__view > [data-pg-rail-next] { inset-inline-end: var(--pg-rail-end); }

/* An active button takes a sideways swipe of a finger itself (rail.js moves the row by it), the page scrolls up and
   down as usual. An inactive one keeps its white fill and catches a tap and a click itself, doing nothing (Jaroslav 10. 11.:
   a click through it opened the card under it; the arrow of the site, not a pointer); the keyboard still reaches it. */
.pg-rail__view > .pg-rail__btn { touch-action: pan-y; }

.pg-rail__view > .pg-rail__btn[aria-disabled="true"] {
	--pg-btn-bg: var(--pg-ink-paper);
	--pg-btn-fg: var(--pg-ink);
	--pg-btn-line: var(--pg-ink);
	pointer-events: auto;
	cursor: default;
}

/* Hover of the name and the "+" button in the cards: one duration and one curve for colour, background and
   edge. The buttons of the row and its link are .pg-btn and keep the transition of the button system (base.css:
   the fill and the line fade, the label switches half way). */
.pg-rail .pg-card .pg-card__name,
.pg-rail button.pg-add-btn,
.pg-rail a.pg-add-btn {
	transition: color var(--pg-dur-fast) var(--pg-ease), background-color var(--pg-dur-fast) var(--pg-ease), border-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-rail__item {
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

.pg-rail__item > * {
	flex: 1 1 auto;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.pg-rail__track { scroll-behavior: smooth; }
}

@media (max-width: 1279px) {
	.pg-rail { --pg-rail-cols: 4; }
}

@media (max-width: 1024px) {
	.pg-rail { --pg-rail-cols: 3; }
}

@media (max-width: 767px) {
	.pg-rail { --pg-rail-cols: 1.7; }
}

.pg-rail__btn { flex: none; }

/* ---------- Pagination (.pg-pagination, Template::pagination()) ----------
 * Numbers in a list, arrows with a text for screen readers: catalogue, blog, Realizácie, search. */

.pg-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pg-control-h-s);
	min-height: var(--pg-control-h-s);
	padding: 0 var(--pg-space-12);
	border: 1px solid var(--pg-line);
	color: var(--pg-text);
	font-weight: var(--pg-fw-bold);
	text-decoration: none;
	transition: border-color var(--pg-dur-fast) var(--pg-ease), background-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-pagination a.page-numbers:hover {
	border-color: var(--pg-ink);
	color: var(--pg-text);
}

.pg-pagination .page-numbers.current {
	border-color: var(--pg-text);
	background: var(--pg-text);
	color: var(--pg-white);
}

.pg-pagination .page-numbers.dots { border-color: transparent; }

.pg-pagination .page-numbers svg {
	width: var(--pg-space-20);
	height: var(--pg-space-20);
}

/* ---------- Empty state (.pg-empty) ----------
 * What happened and the way on: icon, title, text, actions, centred. Cart, catalogue, search, blog.
 * --framed: in a frame with the padding of a section (catalogue, search, blog lists).
 */
.pg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pg-gap-block);
	padding-block: var(--pg-space-48);
	text-align: center;
}

.pg-empty--framed {
	padding: var(--pg-section-pad) var(--pg-gap-block);
	border: 1px solid var(--pg-line);
}

.pg-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pg-space-64);
	height: var(--pg-space-64);
	color: var(--pg-text);
}

.pg-empty__icon svg { width: var(--pg-space-48); height: var(--pg-space-48); }
.pg-empty__title { max-width: 24ch; }
.pg-empty__text { max-width: var(--pg-measure); color: var(--pg-muted); }

.pg-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pg-space-12);
}

/* ---------- Breadcrumbs (.pg-breadcrumbs, action pg_breadcrumbs) ----------
 * One component for the catalogue, the product, articles, Realizácie and Môj účet (it was in shop.css, which
 * articles and Realizácie do not load: their breadcrumbs stood under each other without the slashes).
 */

.pg-breadcrumbs {
	font-size: var(--pg-text-s);
	line-height: var(--pg-lh-snug);
}

.pg-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--pg-space-8);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The slash is decoration: the alternative text after "/" keeps it out of screen readers. */
.pg-breadcrumbs__item + .pg-breadcrumbs__item::before {
	content: "/";
	content: "/" / "";
	color: var(--pg-muted);
}

/* 26 px tall targets (WCAG 2.5.8), underlined so they differ from the current page without colour. */
.pg-breadcrumbs a {
	padding-block: var(--pg-space-4);
	color: var(--pg-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.pg-breadcrumbs a:hover { color: var(--pg-accent-text-hover); }

.pg-breadcrumbs [aria-current="page"] { color: var(--pg-text-2); }


/* ---------- Panel (.pg-box) ----------
 * The light panel of the site: table of contents, lead and facts of an article or project, cart summary.
 */
.pg-box {
	padding: var(--pg-gap-block);
	background: var(--pg-surface-light);
}

/* ---------- Notices of WooCommerce (.woocommerce-message, .woocommerce-info, .woocommerce-error) ----------
 * The one look of WooCommerce's notices on the theme (Môj účet, cart, product page; the checkout .pg-co draws its
 * own): a light panel with a line in the colour of its state on the start edge, the text of the site, a button of
 * the notice ("Zobraziť košík") at the end of its line, under the text on a phone. Errors on red, a success on green, an
 * info on grey (every text 4.5:1). woocommerce.css draws a purple top line and an icon font.
 * The text of a notice is one flow: WooCommerce prints it straight into the panel with its links (Vrátiť späť?) and
 * <strong>, so the panel is no flex box (each piece would be an item of its own, a link pushed to the edge); the
 * button floats at the end of the first line, centred on it.
 * Quieter (Jaroslav 10. 11. večer, zadanie 10, bod 8: "decentnejšie"): small text in the dark grey of the site, a thin edge
 * in a light tint of the state and a thin line of its colour at the start, the title of a list of errors in the red
 * of the state (5.9:1), its links in the colour of the text, not bold. Every text at least 4.5:1. The checkout (.pg-co)
 * has the same look now (its notices were the grey panels of woocommerce.css with an icon); checkout.css keeps only
 * their place and size.
 */
.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	--pg-notice-line: var(--pg-line-control);
	--pg-notice-edge: var(--pg-line);
	--pg-notice-bg: var(--pg-surface-light);
	--pg-notice-fg: var(--pg-text-2);
	--pg-notice-title: var(--pg-text);
	display: flow-root;
	padding: var(--pg-space-12) var(--pg-space-16);
	border: 1px solid var(--pg-notice-edge);
	border-inline-start: var(--pg-notice-line-w) solid var(--pg-notice-line);
	border-radius: var(--pg-radius);
	background: var(--pg-notice-bg);
	color: var(--pg-notice-fg);
	font-size: var(--pg-text-s);
	line-height: var(--pg-lh-snug);
	list-style: none;
}

/* The gap under a notice instead of woocommerce.css's 2em, as light as its rule: a wrapper of notices that sets
   its own gap (the cart page) keeps it. */
.pg-theme :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0 0 var(--pg-gap-block); }

.pg-theme .woocommerce-message { --pg-notice-line: var(--pg-success); --pg-notice-edge: var(--pg-success-line); --pg-notice-bg: var(--pg-success-bg); }

.pg-theme .woocommerce-error {
	--pg-notice-line: var(--pg-danger);
	--pg-notice-edge: var(--pg-danger-line);
	--pg-notice-bg: var(--pg-danger-bg);
	--pg-notice-title: var(--pg-danger-text);
}

.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after { content: none; }

.pg-theme .woocommerce-error li { margin: 0; }
.pg-theme .woocommerce-error li + li { margin-block-start: var(--pg-space-4); }

/* A link in a notice (Vrátiť späť?, a field of a list of errors): the colour of the text, underlined thinly, not bold. */
.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
	color: inherit;
	font-weight: var(--pg-fw-medium);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button):hover { color: var(--pg-text); }

.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(a, button).button {
	float: inline-end;
	/* centred on the first line of the text: as much above and below it as the button is taller */
	margin-block: calc((var(--pg-text-s) * var(--pg-lh-snug) - var(--pg-control-h-s)) / 2);
	margin-inline: var(--pg-space-16) 0;
}

@media (max-width: 767px) {
	.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) :is(a, button).button {
		float: none;
		display: flex;
		width: fit-content;
		margin: var(--pg-space-8) 0 0;
	}
}

/* The button of a notice: :is(a, button) keeps these rules over the buttons of WooCommerce of base.css (0,3,1), which the
   :not(.pg-co *) used to do before the checkout took this look (zadanie 10, bod 8). */

/* WooCommerce moves the focus to a list of errors (the checkout, the login) to have it read: no frame around the panel for
   a click of the mouse, the frame of the site for the keyboard. */
.pg-theme :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus:not(:focus-visible) { outline: none; }

/* ---------- Split ----------
 * Two columns with --pg-gap-pdp between them. --pg-split sets the ratio (default 55/45; --half 50/50,
 * the product page and the footer band). Under 1025px the columns stack. .pg-split__sticky keeps a column
 * in view while the other scrolls.
 */
.pg-split {
	display: grid;
	grid-template-columns: var(--pg-split, minmax(0, 11fr) minmax(0, 9fr));
	gap: var(--pg-gap-pdp);
	align-items: start;
}

.pg-split--half { --pg-split: minmax(0, 1fr) minmax(0, 1fr); }

.pg-split__sticky {
	position: sticky;
	top: var(--pg-sticky-top);
}

/* A column that may be taller than the window (the form of Kontakt with its errors): it sticks only while it fits
   under the header (.is-fit, measured by site.js when it or the window changes size, not on scroll); else, and without
   JavaScript, it scrolls with the page, so its end is always within reach. */
.pg-split__sticky[data-pg-sticky-fit]:not(.is-fit) { position: static; }

@media (max-width: 1024px) {
	.pg-split { grid-template-columns: minmax(0, 1fr); }
	.pg-split__sticky,
	.pg-split__sticky[data-pg-sticky-fit] { position: static; }
}