/*
 * Product listings (category, brand, new, specials, repurchase and search pages) and the variant popup.
 * Loaded on every page by templates/main_page.tpl.php, after stylesheet.css.
 *
 * Markup: includes/modules/product_listing.php (product boxes, list rows, pagination),
 * includes/functions/product_listing_ui.php (toolbar parts), templates/content/browse.tpl.php (filters)
 * and ajax_productinfo.php (popup). Everything is scoped, because foundation.min.css and stylesheet.css
 * also style headings, labels, inputs, buttons and .pagination.
 */

.pl,
.pl-results,
.pl-empty,
#product_popup,
#cart_toast,
#fast_cart {
	--pl-ink: #17181A;
	--pl-text: #3A3C40;
	--pl-muted: #55585E;
	--pl-subtle: #6B6E74;
	--pl-page: #F3F2EF;
	--pl-card: #FFFFFF;
	--pl-border: #E2E0DB;
	--pl-border-hover: #B9B5AE;
	--pl-divider: #ECEAE6;
	--pl-field-border: #D9D6D0;
	--pl-hover: #FAF9F7;
	--pl-placeholder: #F7F6F3;
	--pl-red: #9E1B13;
	--pl-red-dark: #6E120C;
	--pl-green: #1E7B45;
	--pl-green-tint: #E8F4EC;
	--pl-yellow: #DEDE08; /* images/stock_yellow.gif, used for "on its way" in the variant popup */
	--pl-grey-dot: #8E8A82;

	font-family: 'Archivo', 'Segoe UI', Verdana, sans-serif;
	color: var(--pl-ink);
	line-height: 1.45;
}

.pl *,
.pl *::before,
.pl *::after,
.pl-results *,
.pl-results *::before,
.pl-results *::after,
#product_popup *,
#product_popup *::before,
#product_popup *::after,
#cart_toast *,
#cart_toast *::before,
#cart_toast *::after,
#fast_cart *,
#fast_cart *::before,
#fast_cart *::after {
	box-sizing: border-box;
}

/* stylesheet.css sets Verdana directly on every div, span and a ("* div,span,a"), so they would not inherit Archivo */
.pl div,
.pl span,
.pl a,
.pl-results div,
.pl-results span,
.pl-results a,
#product_popup div,
#product_popup span,
#product_popup a,
#cart_toast div,
#cart_toast span,
#cart_toast a,
#fast_cart div,
#fast_cart span,
#fast_cart a {
	font-family: inherit;
}

.pl :focus-visible,
.pl-results :focus-visible,
#product_popup :focus-visible,
#cart_toast :focus-visible {
	outline: 2px solid var(--pl-ink);
	outline-offset: 2px;
}

.pl-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* ---------- Page (category and brand pages) ---------- */

.pl-browse {
	background: var(--pl-page);
	font-size: 15px;
	padding: 24px 0 56px;
}

/* When product_listing.js stretches .content_container on a short page, the grey page fills it instead of white */
.content_container:has(> .pl-browse),
.content_container:has(> .lg-page),
.content_container:has(> .acc) {
	display: flex;
	flex-direction: column;
}

.content_container > .pl-browse,
.content_container > .lg-page,
.content_container > .acc {
	flex: 1 0 auto;
}

.pl-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
}

.pl a {
	color: var(--pl-red);
	text-decoration: none;
}

.pl a:hover,
.pl a:focus {
	color: var(--pl-red-dark);
	text-decoration: underline;
}

.pl h1,
.pl h2 {
	font-family: inherit;
	font-style: normal;
	color: var(--pl-ink);
	margin: 0;
	padding: 0;
	line-height: 1.15;
}

.pl h1 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pl p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 6px;
}

.pl .pl-subhead {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--pl-muted);
}

.pl-brandhead {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 14px;
	color: var(--pl-text);
}

.pl-brandhead-logo {
	flex: 0 0 auto;
	max-width: 180px;
}

.pl-brandhead-logo img {
	display: block;
	max-height: 75px;
	max-width: 100%;
}

.pl-brandhead-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pl-brandhead-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pl-brandhead-links img {
	height: 30px;
}

/* Brand description from admin: its own paragraphs, cut to two lines until "Læs mere" (browse.tpl.php) */
.pl-brandhead-descr {
	line-height: 1.5;
}

/* The id beats stylesheet.css's own #manufacturers_description p */
#manufacturers_description.pl-brandhead-descr p {
	margin: 0 0 8px;
	font-size: inherit;
	line-height: inherit;
}

#manufacturers_description.pl-brandhead-descr p:empty {
	display: none;
}

#manufacturers_description.pl-brandhead-descr > :last-child {
	margin-bottom: 0;
}

.pl-brandhead-descr.is-clamped {
	max-height: 3em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 50%, transparent);
	mask-image: linear-gradient(#000 50%, transparent);
}

.pl-descr-toggle {
	align-self: flex-start;
}

.pl-linkbtn {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--pl-red);
	cursor: pointer;
}

.pl-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin-top: 20px;
}

.pl-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---------- Filter sidebar ---------- */

.pl-side {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pl-side-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Header and footer of the full-screen filter sheet on narrow screens */
.pl-side-head,
.pl-side-foot {
	display: none;
}

.pl-panel {
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	padding: 14px 16px;
}

.pl .pl-panel h2 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pl-muted);
	margin-bottom: 6px;
}

.pl-tree,
.pl-tree-sub,
.pl-brand-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pl-tree-sub {
	padding-left: 28px;
}

.pl-tree-sub[hidden] {
	display: none;
}

.pl-tree-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.pl .pl-check {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: var(--pl-text);
	cursor: pointer;
}

.pl .pl-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--pl-red);
	cursor: pointer;
}

.pl-tree-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--pl-muted);
	cursor: pointer;
}

.pl-tree-toggle:hover {
	background: var(--pl-page);
}

.pl-tree-toggle .pl-icon {
	transition: transform 120ms ease;
}

.pl-tree-toggle[aria-expanded="true"] .pl-icon {
	transform: rotate(180deg);
}

.pl-brand-list {
	max-height: 324px;
	overflow-y: auto;
}

/* ---------- Toolbar ---------- */

.pl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
}

.pl-count {
	color: var(--pl-muted);
	font-weight: 600;
}

.pl-spacer {
	flex: 1 1 auto;
}

.pl .pl-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: var(--pl-muted);
}

.pl .pl-sort select {
	width: auto;
	height: 40px;
	margin: 0;
	padding: 0 30px 0 10px;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	background-color: var(--pl-card);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-ink);
	cursor: pointer;
}

.pl-view-toggle {
	display: inline-flex;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	overflow: hidden;
}

.pl-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 38px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: var(--pl-card);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--pl-text);
	cursor: pointer;
}

.pl-view-btn + .pl-view-btn {
	border-left: 1px solid var(--pl-field-border);
}

.pl-view-btn.is-active {
	background: var(--pl-ink);
	color: #FFFFFF;
}

.pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	background: var(--pl-card);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--pl-ink);
	cursor: pointer;
}

.pl a.pl-btn {
	color: var(--pl-ink);
	text-decoration: none;
}

.pl a.pl-btn-primary,
.pl a.pl-btn-primary:hover {
	color: #FFFFFF;
}

.pl-btn:hover {
	border-color: var(--pl-ink);
}

.pl-btn-primary {
	height: 44px;
	background: var(--pl-red);
	border-color: var(--pl-red);
	color: #FFFFFF;
	font-size: 15px;
}

.pl-btn-primary:hover {
	background: var(--pl-red-dark);
	border-color: var(--pl-red-dark);
}

.pl-filters-btn,
.pl-only-narrow {
	display: none;
}

/* On/off filter buttons inside the toolbar (specials page) */
.pl-filter-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pl-filter-toggle {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--pl-field-border);
	border-radius: 999px;
	background: var(--pl-card);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-ink);
	white-space: nowrap;
	cursor: pointer;
}

.pl-filter-toggle:hover {
	border-color: var(--pl-ink);
}

.pl-filter-toggle.is-active {
	background: var(--pl-ink);
	border-color: var(--pl-ink);
	color: #FFFFFF;
}

/* ---------- Active filter chips ---------- */

.pl-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pl-chips[hidden] {
	display: none;
}

.pl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	margin: 0;
	padding: 0 8px 0 12px;
	border: 1px solid var(--pl-field-border);
	border-radius: 999px;
	background: var(--pl-card);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--pl-ink);
	cursor: pointer;
}

.pl-chip:hover {
	border-color: var(--pl-ink);
}

.pl-chip .pl-icon {
	color: var(--pl-subtle);
}

.pl-chips-clear {
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--pl-red);
	cursor: pointer;
}

/* ---------- Product boxes (grid view, the default) ---------- */

.pl-results {
	font-size: 15px;
}

.pl-items {
	display: grid;
	/* 210px keeps the stock text and the variant button side by side in the box footer */
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
}

.pl-head {
	display: none;
}

.pl-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 120ms ease;
	container-type: inline-size;
}

.pl-item:hover {
	border-color: var(--pl-border-hover);
}

.pl-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: #FFFFFF;
	color: var(--pl-grey-dot);
}

/* Positioned, so tall images cannot stretch the square and push the text below out of line */
.pl-media img {
	position: absolute;
	inset: 14px;
	display: block;
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	object-fit: contain;
}

.pl-info {
	padding: 12px 14px 0;
}

.pl-brand {
	min-height: 1.45em;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pl-subtle);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Always exactly two lines (longer names end in "…"), so the prices below start at the same height in every box */
.pl-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;
	height: 2.7em;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pl-ink);
}

.pl-prices {
	padding: 10px 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}

.pl-cost {
	font-size: 17px;
	font-weight: 800;
	color: var(--pl-ink);
}

.pl-srp {
	font-size: 13px;
	color: var(--pl-muted);
}

.pl-nocost .pl-srp {
	font-size: 17px;
	font-weight: 800;
	color: var(--pl-ink);
}

.pl-nocost .pl-srp-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--pl-muted);
}

/*
 * Ranges stay on one line: the main price shrinks to fit the box. 100cqi is the .pl-item width, 28px its side
 * padding, --pl-len the number of characters (set by product_listing_range_attributes()), 0.6em about one character.
 */
.pl-cost.pl-range,
.pl-nocost .pl-srp.pl-range {
	white-space: nowrap;
	font-size: clamp(11px, calc((100cqi - 28px) / (var(--pl-len, 18) * 0.6)), 17px);
}

.pl-login {
	font-size: 13px;
	color: var(--pl-muted);
}

/* One line: the stock text gives way (ending in "…") before the button would wrap below it */
.pl-foot {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: auto 14px 14px;
	padding-top: 10px;
	border-top: 1px solid var(--pl-divider);
	font-size: 13px;
}

.pl-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: var(--pl-text);
	white-space: nowrap;
}

.pl-stock-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pl-foot .pl-choose {
	flex-shrink: 0;
}

.pl-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--pl-green);
}

.pl-stock-incoming .pl-dot {
	background: var(--pl-yellow);
}

.pl-stock-out .pl-dot {
	background: var(--pl-red);
}

.pl-choose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 6px;
	background: var(--pl-page);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--pl-ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.pl-item:hover .pl-choose,
.pl-choose:hover,
.pl-choose:focus-visible {
	background: var(--pl-ink);
	color: #FFFFFF;
}

/* ---------- List view (#productList.pl-view-list, set by product_listing.js) ---------- */

/* The list's own width decides between table rows and stacked rows (see "Narrow lists" below), not the window:
   next to the filter sidebar on a tablet the list is much narrower than the screen. */
#productList {
	container: pl-list / inline-size;
}

.pl-view-list .pl-items {
	display: block;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	overflow: hidden;
}

.pl-view-list .pl-head,
.pl-view-list .pl-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 110px 175px 165px 120px;
	column-gap: 14px;
	align-items: center;
	padding: 10px 18px;
}

.pl-view-list .pl-nocost .pl-head,
.pl-view-list .pl-nocost .pl-item,
.pl-view-list .pl-guest .pl-head,
.pl-view-list .pl-guest .pl-item {
	grid-template-columns: 52px minmax(0, 1fr) 110px 175px 120px;
}

.pl-view-list .pl-cost,
.pl-view-list .pl-srp {
	white-space: nowrap;
}

/* The list columns are sized for the longest ranges at this size */
.pl-view-list .pl-cost.pl-range,
.pl-view-list .pl-nocost .pl-srp.pl-range {
	font-size: 14px;
}

.pl-view-list .pl-head {
	background: var(--pl-hover);
	border-bottom: 1px solid var(--pl-divider);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pl-muted);
}

.pl-view-list .pl-head-product { grid-column: 1 / 3; }
.pl-view-list .pl-head-stock { grid-column: 3; }
.pl-view-list .pl-head-cost { grid-column: 4; text-align: right; }
.pl-view-list .pl-head-srp { grid-column: 5; text-align: right; }
.pl-view-list .pl-nocost .pl-head-srp { grid-column: 4; }

.pl-view-list .pl-item {
	border: 0;
	border-bottom: 1px solid var(--pl-divider);
	border-radius: 0;
}

.pl-view-list .pl-item:last-child {
	border-bottom: 0;
}

.pl-view-list .pl-item:hover {
	background: var(--pl-hover);
}

.pl-view-list .pl-media {
	grid-column: 1;
	grid-row: 1;
	width: 52px;
	height: 52px;
	border: 1px solid var(--pl-divider);
	border-radius: 8px;
}

.pl-view-list .pl-media img {
	inset: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
}

.pl-view-list .pl-info {
	grid-column: 2;
	grid-row: 1;
	padding: 0;
}

.pl-view-list .pl-brand {
	min-height: 0;
}

.pl-view-list .pl-name {
	height: auto;
	font-weight: 700;
}

.pl-view-list .pl-prices,
.pl-view-list .pl-foot {
	display: contents;
}

.pl-view-list .pl-stock { grid-column: 3; grid-row: 1; }
.pl-view-list .pl-cost { grid-column: 4; grid-row: 1; text-align: right; font-size: 15px; }
.pl-view-list .pl-srp { grid-column: 5; grid-row: 1; text-align: right; }
.pl-view-list .pl-choose { grid-column: 6; grid-row: 1; justify-self: end; }
.pl-view-list .pl-srp-label { display: none; }

.pl-view-list .pl-nocost .pl-srp { grid-column: 4; font-size: 15px; }
.pl-view-list .pl-nocost .pl-choose,
.pl-view-list .pl-guest .pl-choose { grid-column: 5; }
.pl-view-list .pl-guest .pl-login { grid-column: 4; grid-row: 1; text-align: right; }

/* ---------- Pagination ---------- */

.pl-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 18px;
	font-size: 14px;
	color: var(--pl-muted);
}

.pl-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pl-pagination .pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	background: var(--pl-card);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--pl-ink);
	cursor: pointer;
}

.pl-pagination .pagination:hover {
	border-color: var(--pl-ink);
	color: var(--pl-ink);
}

.pl-pagination .pagination_selected,
.pl-pagination .pagination_selected:hover {
	background: var(--pl-ink);
	border-color: var(--pl-ink);
	color: #FFFFFF;
	font-weight: 700;
}

.pl-page-gap {
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
}

.pl-empty {
	background: var(--pl-card);
	border: 1px dashed var(--pl-field-border);
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	font-size: 15px;
	color: var(--pl-muted);
}

/* CSS spinner instead of design/loading/loading.gif, whose white background shows on the grey page */
.pl-loading {
	display: flex;
	justify-content: center;
	padding: 80px 0;
}

.pl-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--pl-border);
	border-top-color: var(--pl-red);
	border-radius: 50%;
	animation: pl-spin 0.8s linear infinite;
}

@keyframes pl-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pl-spinner {
		animation-duration: 2.4s;
	}
}

/* ---------- Narrow screens ---------- */

/* Narrow lists: the table columns need about 730px before the name gets any room */
@container pl-list (max-width: 920px) {
	/* List rows stack: image left, name / prices / stock and button on the right */
	.pl-view-list .pl-head {
		display: none;
	}

	.pl-view-list .pl-item,
	.pl-view-list .pl-nocost .pl-item,
	.pl-view-list .pl-guest .pl-item {
		grid-template-columns: 52px minmax(0, 1fr);
		row-gap: 8px;
		align-items: start;
		padding: 12px 14px;
	}

	.pl-view-list .pl-media {
		grid-row: 1 / span 3;
	}

	.pl-view-list .pl-prices {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 10px;
		grid-column: 2;
		grid-row: 2;
		padding: 0;
	}

	.pl-view-list .pl-srp-label {
		display: inline;
	}

	.pl-view-list .pl-foot {
		display: flex;
		grid-column: 2;
		grid-row: 3;
		margin: 0;
		padding: 0;
		border: 0;
	}
}

@media (max-width: 860px) {
	.pl-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.pl-side {
		display: none;
		flex: none;
		width: 100%;
	}

	/* The filters as a full-screen sheet: fixed header, scrolling filters, fixed buttons at the bottom.
	   Below the mobile menu drawer (z-index 2000), above everything else. */
	.pl-side.is-open {
		position: fixed;
		inset: 0;
		z-index: 1900;
		display: flex;
		gap: 0;
		width: auto;
		background: var(--pl-page);
	}

	html.pl-sheet-open,
	html.pl-sheet-open body {
		overflow: hidden;
	}

	.pl-side.is-open .pl-side-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-shrink: 0;
		padding: 10px 10px 10px 16px;
		background: var(--pl-card);
		border-bottom: 1px solid var(--pl-border);
	}

	.pl .pl-side-head h2 {
		margin: 0;
		font-size: 20px;
		font-weight: 800;
	}

	.pl-side-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: none;
		color: var(--pl-ink);
		cursor: pointer;
	}

	.pl-side-close:hover {
		background: var(--pl-page);
	}

	.pl-side.is-open .pl-side-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 16px;
	}

	/* One scroll area in the sheet, not a second one inside the brand panel */
	.pl-side.is-open .pl-brand-list {
		max-height: none;
		overflow: visible;
	}

	.pl-side.is-open .pl-side-foot {
		display: flex;
		gap: 10px;
		flex-shrink: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--pl-card);
		border-top: 1px solid var(--pl-border);
	}

	.pl-side-foot .pl-btn {
		height: 48px;
	}

	.pl-side-foot .pl-side-clear:disabled {
		opacity: 0.45;
		cursor: default;
	}

	.pl-side-foot .pl-side-show {
		flex: 1 1 auto;
	}

	.pl-filters-btn,
	.pl-only-narrow {
		display: inline-flex;
	}
}

@media (max-width: 600px) {
	.pl-browse {
		padding-top: 16px;
	}

	.pl h1 {
		font-size: 26px;
	}

	.pl-hide-sm {
		display: none !important;
	}

	.pl-brandhead {
		flex-direction: column;
	}

	.pl-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* The list view's own .pl-view-list .pl-media img rule is more specific and keeps its 4px */
	.pl-media img {
		inset: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}

	.pl-info {
		padding: 10px 10px 0;
	}

	.pl-prices {
		padding: 8px 10px;
	}

	.pl-cost:not(.pl-range),
	.pl-nocost .pl-srp:not(.pl-range) {
		font-size: 15px;
	}

	/* Two boxes per row are too narrow for one line: the stock goes on top, a full-width button below */
	.pl-foot {
		flex-wrap: wrap;
		margin: auto 10px 10px;
	}

	.pl-foot .pl-choose {
		flex: 1 1 100%;
	}

	.pl-view-list .pl-foot {
		flex-wrap: nowrap;
	}

	.pl-view-list .pl-foot .pl-choose {
		flex: 0 0 auto;
	}

	.pl-pagination {
		justify-content: center;
	}

	/* Toolbar in fixed rows: filters, count and view toggle on top, then the full-width controls */
	.pl-toolbar {
		gap: 10px;
		padding: 10px;
	}

	.pl-toolbar .pl-spacer {
		display: none;
	}

	.pl-toolbar .pl-filters-btn {
		order: 1;
	}

	.pl-toolbar .pl-count {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}

	.pl-toolbar .pl-view-toggle,
	.pl-toolbar #collapse_all_button,
	.pl-toolbar #expand_all_button {
		order: 3;
		margin-left: auto;
	}

	.pl-toolbar .pl-filter-toggles {
		order: 4;
		flex: 1 1 100%;
		flex-wrap: nowrap;
	}

	.pl-toolbar .pl-filter-toggles .pl-filter-toggle {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		height: 40px;
	}

	.pl-toolbar .pl-sort,
	.pl-toolbar .pl-btn-primary {
		order: 5;
		flex: 1 1 100%;
	}

	.pl .pl-toolbar .pl-sort select {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* ---------- Frontpage for logged-in dealers (templates/content/index.tpl.php) ---------- */

/* Products on the left, active orders and brands on the right; on phones the right column comes first */
.fp-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	grid-template-areas: "main side";
	gap: 24px;
	align-items: start;
}

.fp-main {
	grid-area: main;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.fp-side {
	grid-area: side;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pl .fp-title {
	margin-bottom: 14px;
	font-size: 22px;
	font-weight: 800;
}

.fp-main .fp-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pl .fp-more {
	width: 100%;
	margin-top: 14px;
}

.fp-card {
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	overflow: hidden;
}

.fp-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--pl-divider);
}

.pl .fp-card-head h2 {
	font-size: 15px;
	font-weight: 800;
}

.pl .fp-card-head a {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* Active orders (ajax_misc.php?action=get_order_history_widget) */
.fp-orders {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-order {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--pl-divider);
	font-size: 13px;
}

.fp-order:last-child {
	border-bottom: 0;
}

.fp-order-text {
	flex: 1 1 auto;
	min-width: 0;
}

.fp-order-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.pl a.fp-order-number {
	font-weight: 700;
	color: var(--pl-ink);
}

.fp-order-status {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--pl-page);
	font-size: 12px;
	font-weight: 600;
	color: var(--pl-text);
}

.fp-order-meta {
	margin-top: 2px;
	color: var(--pl-muted);
	font-variant-numeric: tabular-nums;
}

.fp-order-meta strong {
	color: var(--pl-ink);
}

.pl a.fp-order-view {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pl-ink);
	text-decoration: none;
}

.pl a.fp-order-view:hover {
	border-color: var(--pl-ink);
	color: var(--pl-ink);
	text-decoration: none;
}

.fp-orders-empty {
	padding: 14px 16px;
	font-size: 13px;
	color: var(--pl-muted);
}

/* Brands */
.fp-brands {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.pl a.fp-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	padding: 12px;
	border: 1px solid var(--pl-border);
	border-radius: 10px;
	background: var(--pl-card);
	transition: border-color 120ms ease;
}

.pl a.fp-brand:hover {
	border-color: var(--pl-border-hover);
}

.fp-brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Category slider, phones only */
.fp-slider {
	display: none;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.fp-slider img {
	display: block;
	width: 100%;
}

.fp-slider-buttons {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: center;
	gap: 8px;
	padding: 16px;
}

.fp-slider-buttons > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pl a.fp-slider-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.94);
	font-size: 14px;
	font-weight: 700;
	color: var(--pl-ink);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pl a.fp-slider-btn-dark {
	background: var(--pl-ink);
	color: #FFFFFF;
}

.fp-slider .slick-dots {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-slider .slick-dots li {
	margin: 0;
}

.fp-slider .slick-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	font-size: 0;
	cursor: pointer;
}

.fp-slider .slick-dots .slick-active button {
	background: #FFFFFF;
}

@media (max-width: 1100px) {
	.fp-main .fp-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.fp-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "side" "main";
	}

	/* As before the redesign: the slider replaces the brand logos on phones */
	.fp-slider {
		display: block;
	}

	.fp-side-brands {
		display: none;
	}
}

/* ---------- Frontpage for guests (templates/content/index.tpl.php) ---------- */

/* Slider within the page width; reuses the .fp-slider dots and buttons, which are shown on all screen sizes here */
.gp {
	background: var(--pl-page);
}

.gp-hero-wrap {
	padding-top: 24px;
}

.gp .gp-hero.fp-slider {
	display: block;
	border-radius: 12px;
}

.gp-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* Brand group buttons over the slider, phones only (as before the redesign) */
.gp-hero-mobile {
	display: none;
	position: absolute;
	inset: 0;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 16px;
}

.gp-hero-mobile .fp-slider-buttons {
	position: static;
	padding: 0;
}

.gp-hero-badge {
	align-self: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(23, 24, 26, 0.82);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #FFFFFF;
}

.gp-body {
	padding-top: 40px;
}

.gp-intro {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
	grid-template-areas: "about offer";
	gap: 24px;
	align-items: stretch;
}

.gp-about {
	grid-area: about;
	min-width: 0;
	padding: 24px 28px;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pl-text);
}

.pl .gp-about h1,
.pl .gp-about h2,
.pl .gp-about h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 800;
}

.pl .gp-about p {
	margin: 0 0 12px;
}

.gp-offer {
	grid-area: offer;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
}

/* The tilted black sign from the old frontpage, hanging over the card's corner */
.pl .gp-offer h2 {
	align-self: flex-start;
	margin: -38px 0 6px -36px;
	padding: 2px 12px;
	background: var(--pl-ink);
	color: #fff;
	font-size: 24px;
	font-style: italic;
	font-weight: 800;
	line-height: 1.3;
	box-shadow: 0 0 2px #000;
	transform: rotate(-5deg);
}

@media screen and (max-width: 63.99875em) {
	.pl .gp-offer h2 {
		font-size: 20px;
	}
}

.gp-offer .lg-benefits {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-ink);
}

.gp-offer .lg-benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gp-offer .lg-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pl-green-tint);
	color: var(--pl-green);
}

.gp-offer .pl-btn {
	width: 100%;
	margin-top: auto;
}

.gp-brands,
.gp-instagram {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 40px;
}

.pl .gp-brands .fp-title,
.pl .gp-instagram .fp-title {
	margin-bottom: 0;
}

.gp-instagram .fp-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gp-instagram .fp-title img {
	width: 26px;
	height: 26px;
}

@media (max-width: 860px) {
	.gp-intro {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "offer" "about";
	}
}

@media screen and (max-width: 39.99875em) {
	.gp-hero-mobile {
		display: flex;
	}

	.gp-body {
		padding-top: 36px;
	}

	.gp-hero-wrap {
		padding-top: 16px;
	}

	.gp-about {
		padding: 18px;
	}
}

/* ---------- Text pages: about_us, shipping, privacy_policy (texts written in admin) ---------- */

.ip-card {
	padding: 28px 32px;
	background: var(--pl-card);
	border: 1px solid var(--pl-border);
	border-radius: 12px;
}

.ip-narrow {
	max-width: 860px;
	margin: 0 auto;
}

.ip-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 36px;
}

.pl .ip-section .fp-title {
	margin-bottom: 0;
}

.ip-instagram-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ip-instagram-title img {
	width: 26px;
	height: 26px;
}

/* Typography for HTML from the admin editor */
.ip-text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--pl-text);
	overflow-wrap: anywhere;
}

.pl .ip-text h1 {
	margin: 0 0 16px;
	font-size: 30px;
}

.pl .ip-text h2,
.pl .ip-text h3,
.pl .ip-text h4 {
	margin: 24px 0 8px;
	font-family: inherit;
	font-style: normal;
	font-weight: 800;
	line-height: 1.25;
	color: var(--pl-ink);
}

.pl .ip-text h2 { font-size: 22px; }
.pl .ip-text h3 { font-size: 18px; }
.pl .ip-text h4 { font-size: 16px; }

.pl .ip-text > :first-child {
	margin-top: 0;
}

.pl .ip-text p,
.pl .ip-text ul,
.pl .ip-text ol {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.65;
}

.pl .ip-text ul,
.pl .ip-text ol {
	padding-left: 22px;
}

.pl .ip-text li {
	margin-bottom: 4px;
}

.pl .ip-text a {
	text-decoration: underline;
}

.pl .ip-text table {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
	border: 1px solid var(--pl-border);
	font-size: 14px;
}

.pl .ip-text table tbody,
.pl .ip-text table tr {
	border: 0;
	background: none;
}

.pl .ip-text table tr:nth-child(even) {
	background: var(--pl-hover);
}

.pl .ip-text th,
.pl .ip-text td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--pl-divider);
	text-align: left;
	vertical-align: top;
}

.pl .ip-text img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.ip-card {
		padding: 20px 18px;
	}

	.pl .ip-text h1 {
		font-size: 24px;
	}

	.ip-text table {
		display: block;
		overflow-x: auto;
	}
}

/* Short message pages: create_account_success, create_rider_success, logoff, error404 */

.ip-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 20px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pl-text);
}

.pl .ip-message h1 {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pl-ink);
}

.pl .ip-message p {
	margin: 0;
}

.pl .ip-message a:not(.pl-btn) {
	color: var(--pl-ink);
	text-decoration: underline;
}

.ip-message-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--pl-page);
	color: var(--pl-ink);
}

.ip-message-icon.is-success {
	background: var(--pl-green-tint);
	color: var(--pl-green);
}

.ip-message-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 6px;
}

.ip-message-actions .pl-btn {
	min-width: 180px;
}

/* ---------- Brands page (templates/content/brands.tpl.php) ---------- */

.br-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.pl .br-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 240px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	background: var(--pl-card);
	color: var(--pl-muted);
	cursor: text;
}

.pl .br-search:focus-within {
	border-color: var(--pl-ink);
}

.pl .br-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	color: var(--pl-ink);
}

.pl .br-search input:focus {
	outline: none;
	box-shadow: none;
}

.pl .br-count {
	margin: 0;
	font-size: 14px;
}

.br-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

.br-grid[hidden],
.br-none[hidden] {
	display: none;
}

.pl a.br-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pl-border);
	border-radius: 12px;
	background: var(--pl-card);
	color: var(--pl-ink);
	text-decoration: none;
	transition: border-color 120ms ease;
}

.pl a.br-tile:hover {
	border-color: var(--pl-border-hover);
	color: var(--pl-ink);
	text-decoration: none;
}

.br-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	padding: 14px 16px;
}

.br-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.br-name {
	padding: 8px 10px;
	border-top: 1px solid var(--pl-divider);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 760px) {
	/* Group tabs scroll sideways, the search gets its own line */
	.br-tabs {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.br-tabs::-webkit-scrollbar {
		display: none;
	}

	.pl .br-search {
		flex: 1 1 100%;
		width: auto;
	}

	.br-toolbar .pl-spacer {
		display: none;
	}
}

@media (max-width: 600px) {
	.br-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.br-logo {
		height: 80px;
	}
}

/* ---------- Variant popup (#product_popup, built by open_product_box() in script.js) ---------- */

#product_popup.reveal {
	max-width: 880px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	overflow: visible;
	font-size: 15px;
}

#product_popup #popup_nav_container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 8px 0 12px;
	background: var(--pl-card);
	border-bottom: 1px solid var(--pl-divider);
	border-radius: 14px 14px 0 0;
}

#product_popup #left_popup_nav {
	display: flex;
	gap: 4px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-x: auto;
	float: none;
}

#product_popup #left_popup_nav button {
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--pl-muted);
	white-space: nowrap;
	cursor: pointer;
}

#product_popup #left_popup_nav button:hover {
	color: var(--pl-ink);
}

#product_popup #left_popup_nav button.selected {
	color: var(--pl-ink);
	border-bottom-color: var(--pl-red);
}

#product_popup #close_nav {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--pl-page);
	color: var(--pl-ink);
	cursor: pointer;
}

#product_popup #close_nav:hover {
	background: var(--pl-border);
}

/* flow-root contains the floated Foundation columns on the description, specs and packaging tabs */
#product_popup #popup_content_container {
	display: flow-root;
	background: var(--pl-card);
	border: 0;
	border-radius: 0 0 14px 14px;
}

#product_popup #description_content,
#product_popup #spec_content,
#product_popup #packaging_content {
	padding: 4px 8px 12px;
	font-size: 14px;
	color: var(--pl-text);
}

#product_popup .pp-head {
	padding: 18px 20px 4px;
}

#product_popup .pp-head-brand {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pl-subtle);
}

#product_popup .pp-head-brand span {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

#product_popup h2.pp-title,
#product_popup h3.pp-group-title {
	font-family: inherit;
	font-style: normal;
	color: var(--pl-ink);
	padding: 0;
}

#product_popup h2.pp-title {
	margin: 2px 0 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}

#product_popup .pp-pricing {
	margin: 12px 20px 0;
	padding: 12px 14px;
	background: var(--pl-hover);
	border: 1px solid var(--pl-divider);
	border-radius: 10px;
	font-size: 13px;
	color: var(--pl-text);
}

/* product::get_price_html() brings Foundation rows and a grey inline box; the panel above replaces both */
#product_popup .pp-pricing .row,
#product_popup .pp-pricing .columns {
	margin: 0;
	padding: 0;
	max-width: none;
}

#product_popup .pp-pricing .columns > div {
	padding: 0 !important;
	background: none !important;
	font-size: 13px !important;
}

#product_popup .pp-pricing table {
	width: auto;
	margin: 0;
	border: 0;
	background: none;
}

#product_popup .pp-pricing table tbody,
#product_popup .pp-pricing table tr {
	border: 0;
	background: none;
}

#product_popup .pp-pricing td,
#product_popup .pp-pricing th {
	padding: 2px 12px 2px 0;
}

#product_popup .pp-group {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 20px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--pl-divider);
}

#product_popup .pp-zoom {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--pl-divider);
	border-radius: 10px;
	background: #FFFFFF;
	cursor: zoom-in;
}

#product_popup .pp-zoom img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#product_popup .pp-zoom-icon {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--pl-text);
}

#product_popup h3.pp-group-title {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 700;
}

#product_popup .pp-variant {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 6px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pl-divider);
}

#product_popup .pp-variant:last-child {
	border-bottom: 0;
}

#product_popup .pp-variant.pp-highlight {
	margin: 0 -10px;
	padding: 12px 10px;
	border-radius: 8px;
	background: #FFF4D6;
}

#product_popup .pp-variant-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--pl-ink);
}

#product_popup .pp-variant-meta {
	font-size: 12px;
	color: var(--pl-subtle);
}

#product_popup .pp-status {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pl-text);
}

/* Stock lines with the same dots as the product lists (product::get_stock_levels_text() with $dots) */
#product_popup .pl-stock-line {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

#product_popup .pl-stock-line .pl-dot {
	margin-top: calc(0.75em - 4px);
}

#product_popup .pp-variant-price {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#product_popup .pp-cost {
	font-size: 15px;
	font-weight: 800;
	color: var(--pl-ink);
}

#product_popup .pp-srp {
	font-size: 12px;
	color: var(--pl-muted);
}

#product_popup .pp-srp s {
	color: var(--pl-subtle);
}

#product_popup .pp-srp-special {
	font-weight: 700;
	color: var(--pl-red);
}

#product_popup .pp-marker {
	display: inline-block;
	padding: 0 4px;
	border-radius: 4px;
	background: var(--pl-red);
	font-size: 11px;
	font-weight: 700;
	color: #FFFFFF;
}

#product_popup #listing_content .pp-qty {
	display: inline-flex;
	align-items: center;
	width: auto;
	border: 1px solid var(--pl-field-border);
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
}

#product_popup #listing_content .pp-qty button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #FFFFFF;
	color: var(--pl-text);
	cursor: pointer;
}

#product_popup #listing_content .pp-qty button:hover {
	background: var(--pl-page);
}

#product_popup #listing_content .pp-qty input {
	width: 46px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--pl-divider);
	border-right: 1px solid var(--pl-divider);
	border-radius: 0;
	box-shadow: none;
	background: #FFFFFF;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

#product_popup .pp-variant .warning {
	grid-column: 1 / -1;
	padding: 8px 10px;
	border-radius: 8px;
	background: #FFF4D6;
	font-size: 12px;
	text-align: left;
	color: #7A4E00;
}

#product_popup #add_to_cart_container.pp-footer {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 14px 20px;
	background: var(--pl-hover);
	border: 0;
	border-top: 1px solid var(--pl-divider);
	border-radius: 0 0 14px 14px;
	text-align: left;
}

#product_popup #add_to_cart_container .pp-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 auto 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--pl-muted);
	font-variant-numeric: tabular-nums;
}

#product_popup #add_to_cart_container .pp-total strong {
	color: var(--pl-ink);
}

#product_popup #add_to_cart_container .pp-submit {
	height: 44px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--pl-red);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #FFFFFF;
	white-space: nowrap;
	cursor: pointer;
}

#product_popup #add_to_cart_container .pp-submit:hover {
	background: var(--pl-red-dark);
}

#product_popup #add_to_cart_container .pp-submit:disabled {
	background: var(--pl-border);
	color: var(--pl-subtle);
	cursor: not-allowed;
}

/* Foundation shows the reveal full screen on small screens */
@media screen and (max-width: 39.99875em) {
	#product_popup.reveal,
	#product_popup #popup_nav_container,
	#product_popup #popup_content_container,
	#product_popup #add_to_cart_container.pp-footer {
		border-radius: 0;
	}

	#product_popup #popup_content_container {
		min-height: calc(100vh - 53px);
	}

	#product_popup .pp-head {
		padding: 14px 16px 2px;
	}

	#product_popup .pp-group {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 14px 16px;
	}

	#product_popup .pp-group-media {
		max-width: 140px;
	}

	#product_popup .pp-variant {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	#product_popup .pp-variant-info {
		grid-column: 1 / -1;
	}

	#product_popup .pp-variant-price {
		text-align: left;
	}

	#product_popup #add_to_cart_container.pp-footer {
		padding: 12px 16px;
	}

	#product_popup #add_to_cart_container .pp-submit {
		flex: 1 1 100%;
	}
}

/* ---------- "Added to cart" toast (#cart_toast, includes/header.php; shown by show_cart_toast()) ---------- */

/* A small dark notice at the top of the window, above the popups, that never blocks the page */
.pl-toast-region {
	position: fixed;
	top: 12px;
	left: 0;
	right: 0;
	z-index: 1010;
	display: flex;
	justify-content: center;
	padding: 0 12px;
	pointer-events: none;
}

.pl-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	min-width: 0;
	padding: 10px 10px 10px 14px;
	border-radius: 12px;
	background: var(--pl-ink);
	box-shadow: 0 8px 24px rgba(23, 24, 26, 0.25);
	font-size: 14px;
	line-height: 1.35;
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(-16px);
	transition: opacity 160ms ease, transform 160ms ease;
	visibility: hidden;
}

.pl-toast.is-shown {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
}

.pl-toast-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pl-green);
	color: #FFFFFF;
}

.pl-toast-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	min-width: 0;
}

.pl-toast-text strong {
	font-weight: 800;
}

#cart_toast .pl-toast-item {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.85);
}

#cart_toast .pl-toast-more {
	color: rgba(255, 255, 255, 0.65);
	white-space: nowrap;
}

/* The cart lowered the quantity to the stock available */
#cart_toast .pl-toast-note {
	flex-basis: 100%;
	color: var(--pl-yellow);
}

.pl-toast.is-warning .pl-toast-check {
	background: var(--pl-yellow);
	color: var(--pl-ink);
}

#cart_toast a.pl-toast-link {
	flex-shrink: 0;
	margin-left: auto;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	font-weight: 700;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

#cart_toast a.pl-toast-link:hover {
	background: rgba(255, 255, 255, 0.22);
}

#cart_toast a.pl-toast-link:focus-visible {
	outline-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.pl-toast {
		transition: none;
	}
}

/* ---------- Image viewer (#zoom_popup.zp, open_zoom_box() in script.js) ---------- */

/* A white card with a bar on top, the image in the middle and thumbnails at the bottom.
   The ids beat stylesheet.css's own #zoom_popup rules from the old viewer. */
#zoom_popup.zp {
	--pl-ink: #17181A;
	--pl-muted: #55585E;
	--pl-border: #E2E0DB;
	--pl-divider: #ECEAE6;
	--pl-page: #F3F2EF;

	position: relative;
	top: 4vh !important;
	left: 0;
	display: none;
	flex-direction: column;
	width: min(1100px, calc(100vw - 48px));
	max-width: none;
	height: min(860px, 92vh);
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px rgba(23, 24, 26, 0.3);
	font-family: 'Archivo', 'Segoe UI', Verdana, sans-serif;
	color: var(--pl-ink);
}

#zoom_popup.zp[style*="display: block"] {
	display: flex !important;
}

#zoom_popup.zp *,
#zoom_popup.zp *::before,
#zoom_popup.zp *::after {
	box-sizing: border-box;
}

#zoom_popup.zp .zp-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	height: 60px;
	padding: 0 10px 0 18px;
	border-bottom: 1px solid var(--pl-divider);
}

#zoom_popup.zp .zp-counter {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-muted);
	font-variant-numeric: tabular-nums;
}

#zoom_popup.zp .zp-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

#zoom_popup.zp .zp-zoom {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--pl-border);
	border-radius: 8px;
}

#zoom_popup.zp .zp-btn {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 0;
	color: var(--pl-ink);
	cursor: pointer;
}

#zoom_popup.zp .zp-zoom .zp-btn {
	border-radius: 0;
}

#zoom_popup.zp .zp-zoom .zp-btn + .zp-btn {
	border-left: 1px solid var(--pl-border);
}

#zoom_popup.zp .zp-btn:hover:not(:disabled) {
	background: var(--pl-page);
}

#zoom_popup.zp .zp-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

#zoom_popup.zp a.zp-download {
	color: var(--pl-ink);
	text-decoration: none;
}

#zoom_popup.zp .zp-close {
	width: 44px;
	height: 44px;
}

#zoom_popup.zp .zp-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 24px 72px;
	background: #FFFFFF;
	cursor: zoom-in;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

#zoom_popup.zp.is-zoomed .zp-stage {
	cursor: grab;
}

#zoom_popup.zp.is-dragging .zp-stage {
	cursor: grabbing;
}

#zoom_popup.zp .zp-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	transform-origin: center;
	pointer-events: none;
}

#zoom_popup.zp .zp-image.is-animated {
	transition: transform 180ms ease;
}

#zoom_popup.zp .zp-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 1px solid var(--pl-border);
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(23, 24, 26, 0.12);
	color: var(--pl-ink);
	cursor: pointer;
}

#zoom_popup.zp .zp-nav:hover {
	border-color: var(--pl-ink);
}

#zoom_popup.zp .zp-prev {
	left: 16px;
}

#zoom_popup.zp .zp-next {
	right: 16px;
}

/* Out of the way while looking closely at a zoomed image */
#zoom_popup.zp.is-zoomed .zp-nav {
	opacity: 0;
	pointer-events: none;
}

#zoom_popup.zp .zp-thumbs {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	padding: 12px 16px;
	overflow-x: auto;
	border-top: 1px solid var(--pl-divider);
	scrollbar-width: thin;
}

#zoom_popup.zp .zp-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--pl-border);
	border-radius: 8px;
	background: #FFFFFF;
	cursor: pointer;
}

#zoom_popup.zp .zp-thumb:hover {
	border-color: var(--pl-muted);
}

#zoom_popup.zp .zp-thumb[aria-current="true"] {
	border: 2px solid var(--pl-ink);
	padding: 3px;
}

#zoom_popup.zp .zp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#zoom_popup.zp :focus-visible {
	outline: 2px solid var(--pl-ink);
	outline-offset: 2px;
}

/* Phones: the whole screen, swipe between images */
@media screen and (max-width: 39.99875em) {
	#zoom_popup.zp {
		top: 0 !important;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}

	#zoom_popup.zp .zp-stage {
		padding: 12px;
	}

	#zoom_popup.zp .zp-nav {
		display: none;
	}

	#zoom_popup.zp .zp-thumbs {
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	}

	#zoom_popup.zp .zp-thumb {
		width: 56px;
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#zoom_popup.zp .zp-image.is-animated {
		transition: none;
	}
}