/*
 * Product page (inc/ProductPage.php, woocommerce/single-product*): page skeleton, gallery and lightbox,
 * tags, info column, buy form with the quantity control, payment block, sections under the product.
 * Tokens and components only, see tokens.css and base.css. Colours of text and controls read the colour
 * roles (--pg-ink, --pg-text-2, --pg-muted…), so the blocks also work inside a dark section.
 *
 * Components:
 *   .pg-gallery   photos: strip with scroll-snap, thumbnails (desktop), arrows, counter, progress (phone)
 *   .pg-lightbox  full screen photos: the lightbox of the site (lightbox.js, lightbox.css)
 *   tags          the one tag chip of the site (.pg-tag, base.css), placed here on the photo and under the title
 *   .pg-qty       quantity with minus and plus: the control of the site (base.css)
 *   .pg-buy       quantity, Do košíka and Kúpiť ihneď
 *   .pg-pay       payment block
 */

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

/* Notices (WooCommerce) only take space when there is one. */
.pg-pdp .woocommerce-notices-wrapper:empty { display: none; }

.pg-pdp__info { min-width: 0; container: pg-pdp-info / inline-size; }

/* In a narrow info column (small desktop) the three USP items go under each other instead of three
   squeezed columns; phones keep the two columns of usp.css. */
@container pg-pdp-info (max-width: 34rem) {
	.pg-usp { --pg-usp-cols: 1; }
}

/* Zobraziť produkt of Odporúčaný produkt of the home page (ProductPage::feature()): the last thing of the block, under
   the campaign banner; in the middle on a phone (zadanie 11, pripomienka 4). */
.pg-pdp__to-product { margin: 0; }

@media (max-width: 767px) {
	.pg-pdp__to-product { display: flex; justify-content: center; }
}

/* Gallery and info 50/50 (.pg-split--half) only on the desktop: .pg-split stacks them up to 1024 px, so phones
   and tablets get one column (Jaroslav 6. 11.). */

/* ---------- Gallery ---------- */

.pg-gallery {
	display: grid;
	grid-template-columns: var(--pg-gallery-thumb) minmax(0, 1fr);
	grid-template-areas: "nav stage";
	gap: var(--pg-gap-el);
	color: var(--pg-text);
}

.pg-gallery--single {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage";
}

.pg-gallery__stage {
	grid-area: stage;
	position: relative;
	min-width: 0;
}

.pg-gallery__track {
	display: flex;
	gap: var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pg-gallery__track::-webkit-scrollbar { display: none; }


/* A square frame on every photo: the page does not move while photos load, any shape fits inside. */
.pg-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--pg-surface-card);
	scroll-snap-align: start;
}

.pg-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.pg-gallery__link:focus-visible {
	outline: 2px solid var(--pg-focus-color);
	outline-offset: calc(-1 * var(--pg-space-4)); /* inside: the strip clips anything outside the photo */
}

.pg-gallery__img,
.pg-gallery__slide > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Tags on the first photo (and in the lightbox): the list of chips (.pg-tags) over the photo. */
.pg-gallery__badges {
	position: absolute;
	top: var(--pg-space-12);
	right: var(--pg-space-12);
	left: var(--pg-space-12);
	z-index: var(--pg-z-raised);
	pointer-events: none;
}

/* Arrows on the photo: desktop, on hover or keyboard focus. The weight of three classes keeps an arrow that
   is off (first or last photo) hidden too: .pg-btn[aria-disabled="true"] of base.css would show it at .45. */
.pg-gallery .pg-gallery__stage .pg-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: var(--pg-z-raised-2);
	translate: 0 -50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pg-dur-fast) var(--pg-ease), background-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-gallery__arrow--prev { left: var(--pg-space-12); }
.pg-gallery__arrow--next { right: var(--pg-space-12); }

.pg-gallery.is-ready .pg-gallery__stage:hover .pg-gallery__arrow,
.pg-gallery.is-ready .pg-gallery__arrow:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Off (one photo): it catches its click and does nothing, the photo under it does not open (Jaroslav 10. 11.). */
.pg-gallery.is-ready .pg-gallery__stage:hover .pg-gallery__arrow[aria-disabled="true"] {
	opacity: var(--pg-opacity-off);
	pointer-events: auto;
	cursor: default;
}

/* Counter "2 / 7" on the photo (desktop), with the progress bar under the strip (phone, tablet). */
.pg-gallery__meta {
	position: absolute;
	right: var(--pg-space-12);
	bottom: var(--pg-space-12);
	z-index: var(--pg-z-raised);
	display: flex;
	align-items: center;
	gap: var(--pg-gap-el);
}

.pg-gallery:not(.is-ready) .pg-gallery__meta { visibility: hidden; } /* place kept, no jump when the script starts */

.pg-gallery__count {
	padding: var(--pg-space-2) var(--pg-space-8);
	border-radius: var(--pg-radius-s);
	background: var(--pg-white);
	color: var(--pg-text);
	font-size: var(--pg-text-xs);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
	font-variant-numeric: tabular-nums;
}

.pg-gallery__progress {
	display: none;
	position: relative;
	flex: 1;
	height: var(--pg-space-2);
	overflow: hidden;
	background: var(--pg-line);
}

.pg-gallery__bar {
	position: absolute;
	inset-block: 0;
	left: 0;
	background: var(--pg-ink);
	transition: transform var(--pg-dur-fast) linear;
}

/* Thumbnails: a column exactly as high as the photo, faded edge and arrows where more are hidden. */
.pg-gallery__nav {
	grid-area: nav;
	position: relative;
	min-height: 0;
	--pg-fade-start: 0px;
	--pg-fade-end: 0px;
}

.pg-gallery__nav.is-more-start { --pg-fade-start: var(--pg-space-48); }
.pg-gallery__nav.is-more-end { --pg-fade-end: var(--pg-space-48); }

.pg-gallery__thumbs {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, currentColor var(--pg-fade-start), currentColor calc(100% - var(--pg-fade-end)), transparent);
	mask-image: linear-gradient(to bottom, transparent, currentColor var(--pg-fade-start), currentColor calc(100% - var(--pg-fade-end)), transparent);
}

.pg-gallery__thumbs::-webkit-scrollbar { display: none; }

.pg-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius-s);
	background: var(--pg-surface-card);
	cursor: pointer;
	transition: border-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pg-gallery__thumb:hover { border-color: var(--pg-muted); }

.pg-gallery__thumb[aria-current="true"] {
	border-color: var(--pg-ink);
	box-shadow: inset 0 0 0 1px var(--pg-ink);
}

.pg-gallery__scroll {
	position: absolute;
	left: 50%;
	z-index: var(--pg-z-raised);
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--pg-icon-btn);
	height: calc(var(--pg-icon-btn) / 1.5);
	padding: 0;
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius-s);
	background: var(--pg-white);
	color: var(--pg-text);
	translate: -50% 0;
	cursor: pointer;
}

.pg-gallery__scroll svg { width: var(--pg-space-20); height: var(--pg-space-20); }
.pg-gallery__scroll--up { top: 0; }
.pg-gallery__scroll--down { bottom: 0; }
/* With more thumbnails than fit both buttons, always: they go round, down at the end back to the start (gallery.js). */
.pg-gallery__nav.has-overflow .pg-gallery__scroll { display: flex; }

/* Phone and tablet: one column, the next photo peeks in, progress bar and counter under the strip. */
@media (max-width: 1024px) {
	.pg-gallery {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage";
	}

	.pg-gallery__nav,
	.pg-gallery__arrow { display: none; }

	.pg-gallery:not(.pg-gallery--single) .pg-gallery__slide { flex-basis: var(--pg-gallery-peek); }

	.pg-gallery__meta {
		position: static;
		margin-block-start: var(--pg-space-12);
	}

	.pg-gallery__progress { display: block; }

	.pg-gallery__count {
		padding: 0;
		background: none;
		color: var(--pg-ink);
	}
}

@media (hover: none) {
	.pg-gallery__arrow { display: none; }
}

/* Phone: product tags past the third tag leave the photo (ProductPage::PHOTO_TAGS_PHONE), system tags stay. */
@media (max-width: 767px) {
	.pg-gallery__badges .is-extra { display: none; }
}

/* ---------- Info column ---------- */

.pg-pdp__cat {
	align-self: flex-start;
	text-decoration-color: transparent;
}

.pg-pdp__cat:hover { text-decoration-color: currentColor; }

.pg-pdp__tags { gap: var(--pg-space-8); }

/* Short description: three lines and a fade, "Zobraziť viac" opens the rest. */
.pg-pdp__desc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pg-space-8);
	color: var(--pg-text-2);
}

.pg-pdp__desc-text.is-folded {
	max-height: calc(3em * var(--pg-lh-body));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, currentColor 45%, transparent);
	mask-image: linear-gradient(to bottom, currentColor 45%, transparent);
}

.pg-pdp__desc-text.is-open {
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}

/* Without JS the button would do nothing: the whole text, no button. */
@media (scripting: none) {
	.pg-pdp__desc-text.is-folded {
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pg-pdp__more { display: none; }
}

.pg-pdp__more,
.pg-pdp__reset {
	min-height: var(--pg-space-24);
	padding: 0;
	border: 0;
	background: none;
	color: var(--pg-ink);
	font-weight: var(--pg-fw-bold);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.pg-pdp__more:hover,
.pg-pdp__reset:hover { color: var(--pg-accent-text-hover); }

/* Price: with VAT large, without VAT next to it; a sale shows the struck price first. */
.pg-pdp__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pg-space-4) var(--pg-space-12);
}

.pg-pdp__now {
	font-size: var(--pg-h2);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-tight);
	font-variant-numeric: tabular-nums;
}

.pg-pdp__now del {
	margin-inline-end: var(--pg-space-8);
	color: var(--pg-muted);
	font-size: var(--pg-text-m);
	font-weight: normal;
}

.pg-pdp__now ins {
	background: none;
	text-decoration: none;
}

/* "Ušetríte 2,40 €" on its own line under the prices (Product::saving_html(), the red of a sale). */
.pg-pdp__save {
	flex-basis: 100%;
	font-size: var(--pg-text-s);
}

.pg-pdp__now .woocommerce-price-suffix,
.pg-pdp__excl {
	color: var(--pg-muted);
	font-size: var(--pg-text-s);
	font-weight: normal;
}

/* Variants: label above the select, the reset button appears once a variant is chosen. */
.pg-pdp__variants {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pg-gap-el);
}

.pg-pdp__variant { width: 100%; }

/* WooCommerce's woocommerce.css styles ".variations select" with its own arrow and right padding, at a weight
   the select of the site (.pg-select, base.css) does not reach: its arrow and padding come back here. Its
   margin, minimal width and inline display would push the select out of the column. */
.woocommerce div.product form.cart .variations.pg-pdp__variants { margin: 0; }

.woocommerce div.product form.cart .variations select.pg-select {
	display: block;
	min-width: 0;
	margin: 0;
	padding-inline-end: var(--pg-select-pad);
	background: var(--pg-select-bg);
}
.pg-pdp__reset { visibility: hidden; font-size: var(--pg-text-s); }

/* Price and stock of the variant are in the price block and the delivery box, WooCommerce's copies go. */
.pg-buy-form .woocommerce-variation-price,
.pg-buy-form .woocommerce-variation-availability { display: none; }

/* WooCommerce's box of the chosen variant takes space only when it says something (its description, the
   "not available" message); empty, it adds no second gap above the quantity (its wrapper has no gap). */
.pg-buy-form .single_variation:has(.woocommerce-variation-description:not(:empty), > p[role="alert"]) { margin-block-end: var(--pg-gap-block); }

.pg-buy-form .woocommerce-variation-description { color: var(--pg-text-2); font-size: var(--pg-text-s); }

.pg-buy-form .wc-no-matching-variations,
.pg-pdp__soldout {
	color: var(--pg-danger-text);
	font-weight: var(--pg-fw-bold);
}

/* ---------- Buy form ---------- */

/* The order of the live page: variants, quantity, price, then Do košíka and Kúpiť ihneď side by side. */
.pg-buy-form,
.pg-buy {
	display: flex;
	flex-direction: column;
	gap: var(--pg-gap-block);
}

.pg-buy-form .single_variation_wrap {
	display: flex;
	flex-direction: column;
}

/* WooCommerce's woocommerce.css gives the form a bottom margin and a clearfix (its pseudo elements would
   take part in the flex gap); same selector shape so this file, loaded later, wins. */
.woocommerce div.product form.cart.pg-buy-form { margin: 0; }
.woocommerce div.product form.cart.pg-buy-form::before,
.woocommerce div.product form.cart.pg-buy-form::after { display: none; }

.pg-buy__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-gap-el);
}

.pg-buy__row > .pg-btn { flex: 1 1 14rem; } /* two halves, one under the other when the column is narrow (phone) */

.pg-buy__sum { font-variant-numeric: tabular-nums; }

/* WooCommerce marks the buttons with .disabled until a variant is chosen (its script then explains why). */
.pg-buy .single_add_to_cart_button.disabled {
	opacity: var(--pg-opacity-off);
	cursor: not-allowed;
}

.pg-buy__add.is-loading { cursor: progress; opacity: var(--pg-opacity-busy); }

/* Quantity: the control of the site (.pg-qty, base.css). Sold individually: WooCommerce renders no field. */
.pg-buy .pg-qty:has(input[type="hidden"]) { display: none; }

/* ---------- Payment ---------- */

.pg-pay {
	padding: var(--pg-space-20);
	border: 1px solid var(--pg-line);
}

.pg-pay p { color: var(--pg-text-2); }

.pg-pay__methods {
	--pg-cluster-gap: var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-pay__method {
	display: inline-flex;
	align-items: center;
	gap: var(--pg-space-4);
	min-height: var(--pg-control-h-s);
	padding: var(--pg-space-4) var(--pg-space-12);
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius-s);
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-bold);
}

.pg-pay__method img {
	width: auto;
	max-height: var(--pg-space-24);
}

/* Card logos (Payments::ICONS): each SVG has its own white frame, as on the live page. */
.pg-pay__method--logo {
	min-height: 0;
	padding: 0;
	border: 0;
}

.pg-pay__method--logo .pg-pay__logo {
	display: block;
	width: auto;
	height: var(--pg-space-32);
	max-height: none;
}

/* ---------- Under the product ----------
 * Obľúbené produkty is the product rail of the site (.pg-rail, layout.css).
 * Podobné produkty (ProductPage::RELATED, 10) show whole rows only: where their count does not fill the last row
 * (4 + 4 + 2 on a small desktop, 3 + 3 + 3 + 1 on a tablet), its cards are hidden, a single row stays whole. The
 * columns of .pg-grid--5 (layout.css): 5, 4 up to 1279 px, 3 up to 1024 px, 2 on a phone. A card that starts a row
 * among the last (columns - 1) cards starts an incomplete one: it and the cards after it are hidden. */
@media (min-width: 1280px) {
	.pg-pdp__related .pg-grid > :nth-child(5n + 1):not(:first-child):nth-last-child(-n + 4),
	.pg-pdp__related .pg-grid > :nth-child(5n + 1):not(:first-child):nth-last-child(-n + 4) ~ * { display: none; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.pg-pdp__related .pg-grid > :nth-child(4n + 1):not(:first-child):nth-last-child(-n + 3),
	.pg-pdp__related .pg-grid > :nth-child(4n + 1):not(:first-child):nth-last-child(-n + 3) ~ * { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.pg-pdp__related .pg-grid > :nth-child(3n + 1):not(:first-child):nth-last-child(-n + 2),
	.pg-pdp__related .pg-grid > :nth-child(3n + 1):not(:first-child):nth-last-child(-n + 2) ~ * { display: none; }
}

@media (max-width: 767px) {
	.pg-pdp__related .pg-grid > :nth-child(2n + 1):not(:first-child):last-child { display: none; }
}

/* Tags of the first photo in the lightbox (lightbox.css, decorate() of gallery.js): inside its gutters. */
.pg-lightbox__slide .pg-gallery__badges { left: var(--pg-gutter); right: var(--pg-gutter); }

/* ---------- Floating buy bar ----------
 * BuyBar (inc/BuyBar.php), assets/js/buybar.js; Jaroslav 12. 11. A white band fixed to the bottom edge of the window on
 * a phone and on a desktop (the header sticks to the top, so the two never make a double band), on while the main Do
 * košíka is out of view (.is-on). Under every layer of the site (--pg-z-sticky: the header, the menus, the side cart,
 * the consent bar are above) and gone under one: the page locked by pgLock (body.pg-locked) or the lightbox open.
 * Its height is known without measuring (--pg-buybar-h: one control, its padding and its line), so the footer has the
 * room from the start (html.pg-has-buybar, --pg-buybar-room) and nothing moves when the bar comes and goes; the same
 * room is the scroll-padding-bottom of the page, for good, so the browser never scrolls a focused element into the
 * place of the bar (WCAG 2.4.11). It slides in and out quietly (--pg-dur), at once with reduced motion (the token is
 * 0s) and on a page load (.is-instant). Printed with [hidden]: without JavaScript it never shows.
 * No bar and no room for it in a window lower than 30rem (a phone on its side, a zoom of 400 %: the sticky header and
 * the bar would take about half of it; buybar.js asks the same query) and on paper (a fixed box prints on every page).
 * No safe area of an iPhone: the page has no viewport-fit=cover (header.php), so env(safe-area-inset-*) is 0 and the
 * browser keeps the page out of the unsafe parts by itself.
 *   phone     name | button, under the name the price and the chosen variant
 *   tablet    photo, name with the variant and the stock under it, price, button
 *   desktop   the same with the quantity before the button (from 1025 px)
 */
:root { --pg-buybar-h: calc(var(--pg-control-h) + 2 * var(--pg-space-8) + 1px); }

.pg-buybar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--pg-z-sticky);
	border-block-start: 1px solid var(--pg-line-control);
	background: var(--pg-white);
	color: var(--pg-text);
	box-shadow: var(--pg-shadow-pop);
	visibility: hidden;
	opacity: 0;
	transform: translateY(100%);
	transition: transform var(--pg-dur) var(--pg-ease), opacity var(--pg-dur) var(--pg-ease), visibility 0s linear var(--pg-dur);
}

.pg-buybar[hidden] { display: none; }

html:not(.pg-lightbox-open) body:not(.pg-locked) .pg-buybar.is-on {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.pg-buybar.is-instant { transition: none; }

.pg-buybar__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto;
	grid-template-rows: auto auto;
	column-gap: var(--pg-space-16);
	align-items: center;
	box-sizing: border-box;
	max-width: var(--pg-container);
	min-height: calc(var(--pg-control-h) + 2 * var(--pg-space-8));
	margin-inline: auto;
	padding: var(--pg-space-8) var(--pg-gutter);
}

.pg-buybar__inner > [hidden] { display: none; }

.pg-buybar__thumb {
	grid-area: 1 / 1 / 3 / 2;
	display: block;
	width: var(--pg-control-h);
	height: var(--pg-control-h);
	overflow: hidden;
	border-radius: var(--pg-radius-s);
	background: var(--pg-surface-card);
}

.pg-buybar__thumb:empty { display: none; }
.pg-buybar__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pg-buybar__name,
.pg-buybar__meta {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pg-buybar__name {
	grid-row: 1;
	align-self: end;
	font-size: var(--pg-text-m);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
}

.pg-buybar__meta:has(> [hidden]:first-child + [hidden]) { display: none; }

/* Nothing under the name (no stock line, no variant): the name alone in the middle. */
.pg-buybar__name:has(+ .pg-buybar__meta > [hidden]:first-child + [hidden]) { grid-row: 1 / 3; align-self: center; }

.pg-buybar__meta {
	grid-row: 2;
	align-self: start;
	color: var(--pg-text-2);
	font-size: var(--pg-text-s);
	line-height: var(--pg-lh-snug);
}

.pg-buybar__meta > [hidden] { display: none; }
/* The stock line of the delivery box in one word, the dot of its state before it (the dot also parts it from the variant). */
.pg-buybar__variant:not([hidden]) + .pg-buybar__stock { margin-inline-start: var(--pg-space-12); }
.pg-buybar__stock { --pg-dot: var(--pg-accent); }
.pg-buybar__stock.is-low,
.pg-buybar__stock.is-last,
.pg-buybar__stock.is-backorder { --pg-dot: var(--pg-warning); }
.pg-buybar__stock.is-out { --pg-dot: var(--pg-danger); }

.pg-buybar__stock::before {
	content: "";
	display: inline-block;
	width: var(--pg-space-8);
	height: var(--pg-space-8);
	margin-inline-end: var(--pg-space-8);
	border-radius: 50%;
	background: var(--pg-dot);
}

/* Sold out: the state stands where the button was, not twice. */
.pg-buybar[data-state="out"] .pg-buybar__stock { display: none; }

.pg-buybar__price {
	grid-area: 1 / 3 / 3 / 4;
	margin: 0;
	white-space: nowrap;
}

.pg-buybar__price .pg-pdp__now {
	font-size: var(--pg-fs-18);
	line-height: var(--pg-lh-snug);
}

.pg-buybar__price .pg-pdp__now del { font-size: var(--pg-text-s); }

.pg-buybar__qty {
	grid-area: 1 / 4 / 3 / 5;
	align-self: center;
	height: var(--pg-control-h);
}

.pg-buybar__qty[hidden] { display: none; }

.pg-buybar__count {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pg-space-48);
	border-inline: 1px solid var(--pg-line-control);
	font-size: var(--pg-text-m);
	font-weight: var(--pg-fw-bold);
	font-variant-numeric: tabular-nums;
}

.pg-buybar__btn,
.pg-buybar__state { grid-area: 1 / 5 / 3 / 6; }

.pg-buybar__btn[hidden] { display: none; }
.pg-buybar__btn.is-loading { cursor: progress; opacity: var(--pg-opacity-busy); }
.pg-buybar[data-state="choose"] .pg-buybar__btn svg { display: none; }

.pg-buybar__state {
	margin: 0;
	color: var(--pg-danger-text);
	font-size: var(--pg-text-s);
	font-weight: var(--pg-fw-bold);
	white-space: nowrap;
}

/* Room for the bar, from the start and for good: the footer ends this much lower, and the browser never scrolls a
   focused element into the place of the bar (also before the bar is there). */
html.pg-has-buybar {
	--pg-buybar-room: var(--pg-buybar-h);
	scroll-padding-bottom: var(--pg-buybar-room);
}

html.pg-has-buybar .pg-footer__main { padding-block-end: calc(var(--pg-gap-head) + var(--pg-buybar-room)); }

/* A window too low for a header and a bar, and paper: no bar, no room for it. */
@media print, (max-height: 30rem) {
	.pg-buybar { display: none; }
	html.pg-has-buybar { --pg-buybar-room: 0px; }
}

@media (max-width: 1024px) {
	.pg-buybar__qty { display: none; }
}

@media (max-width: 767px) {
	.pg-buybar__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: var(--pg-space-12);
	}

	.pg-buybar__thumb,
	.pg-buybar__stock { display: none; }

	.pg-buybar__name {
		grid-area: 1 / 1 / 2 / 3;
		font-size: var(--pg-text-s);
	}

	.pg-buybar__name:has(+ .pg-buybar__meta > [hidden]:first-child + [hidden]) { grid-row: 1; align-self: end; }

	.pg-buybar__price {
		grid-area: 2 / 1 / 3 / 2;
		align-self: start;
	}

	.pg-buybar__price .pg-pdp__now { font-size: var(--pg-text-m); }

	.pg-buybar__meta {
		grid-area: 2 / 2 / 3 / 3;
		align-self: baseline;
	}

	.pg-buybar__meta:has(> .pg-buybar__variant[hidden]) { display: none; }
	.pg-buybar__variant::before { content: "· "; }
	.pg-buybar__price { align-self: baseline; }

	.pg-buybar__btn,
	.pg-buybar__state { grid-area: 1 / 3 / 3 / 4; }
}