/* GENERATED from preview/pd-products.src.css by preview/pair.py — every selector
   carries its "#top #wrap_all" twin. Edit the source and re-run. */
/* ==========================================================================
   Prestige Detailing — products view (pd-products)
   Figma: desktop 179:6137 (1408: submenu 64 tall, 4 x 343 cards, gap 12, button 57 below),
          mobile 204:6302 (2 x 170 cards, gap 4, button 48 below).
   SELF-CONTAINED: its own copy of the shared tokens and the .pd-nav-t cap trim, of the
   pd-woo card rules and of the pd-button rules, all scoped to .pd-prods.
   Longhands only. No !important.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-prods,
#top #wrap_all .pd-prods {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-prods-ink: #fff;
	--pd-prods-dark: #161414;
	--pd-prods-red: #d60c0c;
	--pd-prods-green: #51952f;
	--pd-prods-line: rgba(255, 255, 255, 0.08);

	/* Layout — desktop */
	--pd-prods-cols: 4;
	--pd-prods-gap: 12px;
	--pd-prods-more: 57px;

	/* Card — desktop */
	--pd-prods-pad-y: 32px;
	--pd-prods-pad-x: 24px;
	--pd-prods-body-gap: 28px;
	--pd-prods-name-fs: 18px;
	--pd-prods-name-lh: 24px;
	--pd-prods-price-fs: 22px;
	--pd-prods-price-lh: 32px;
	--pd-prods-tag-at: 20px;
	--pd-prods-tag-pad: 6px;
	--pd-prods-tag-fs: 14px;
	--pd-prods-tag-lh: 20px;

	/* Submenu — desktop */
	--pd-prods-sub-h: 64px;
	--pd-prods-sub-px: 64px;
	--pd-prods-sub-gap: 32px;
	--pd-prods-sub-fs: 22px;
	--pd-prods-sub-lh: 32px;

	/* Margins: inline --pd-prods-mt / --pd-prods-mb from the panel; the ramp only writes -now */
	--pd-prods-mt-now: var(--pd-prods-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-prods.pd-prods--scale,
#top #wrap_all .pd-prods.pd-prods--scale { --pd-prods-mt-now: calc(var(--pd-prods-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-prods.pd-prods--scale,
#top #wrap_all .pd-prods.pd-prods--scale { --pd-prods-mt-now: calc(var(--pd-prods-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-prods .pd-nav-t,
#top #wrap_all .pd-prods .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-prods,
#top #wrap_all .pd-prods { --pd-fb: 1; }
}

/* ---------- Root ---------- */
.pd-prods,
#top #wrap_all .pd-prods {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-prods-more);
	width: 100%;
	margin-top: var(--pd-prods-mt-f, var(--pd-prods-mt-now));
	margin-bottom: var(--pd-prods-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	color: var(--pd-prods-ink);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.pd-prods *,
.pd-prods *::before,
.pd-prods *::after,
#top #wrap_all .pd-prods *,
#top #wrap_all .pd-prods *::before,
#top #wrap_all .pd-prods *::after {
	box-sizing: border-box;
}

.pd-prods .pd-prods__top,
#top #wrap_all .pd-prods .pd-prods__top {
	display: flex;
	flex-direction: column;
	row-gap: var(--pd-prods-gap);
	margin-top: 0;
	margin-bottom: 0;
}

/* Lists: margin, padding and list-style only */
.pd-prods .pd-prods__grid,
.pd-prods .pd-prods__sub-list,
.pd-prods .pd-prods__item,
.pd-prods .pd-prods__sub-item,
#top #wrap_all .pd-prods .pd-prods__grid,
#top #wrap_all .pd-prods .pd-prods__sub-list,
#top #wrap_all .pd-prods .pd-prods__item,
#top #wrap_all .pd-prods .pd-prods__sub-item {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style: none;
	background-image: none;
}

.pd-prods .pd-woo-card__media,
.pd-prods .pd-woo-card__body,
.pd-prods .pd-woo-card__clamp,
.pd-prods .pd-prods__price-row,
.pd-prods .pd-prods__tags,
#top #wrap_all .pd-prods .pd-woo-card__media,
#top #wrap_all .pd-prods .pd-woo-card__body,
#top #wrap_all .pd-prods .pd-woo-card__clamp,
#top #wrap_all .pd-prods .pd-prods__price-row,
#top #wrap_all .pd-prods .pd-prods__tags {
	color: inherit;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

.pd-prods a,
.pd-prods a:hover,
.pd-prods a:focus,
#top #wrap_all .pd-prods a,
#top #wrap_all .pd-prods a:hover,
#top #wrap_all .pd-prods a:focus {
	text-decoration: none;
	border-bottom-width: 0;
}

/* ==========================================================================
   Submenu — same links as the Shop page's (Figma 317:3206, 1408 x 64, white)
   ========================================================================== */
.pd-prods .pd-prods__sub,
#top #wrap_all .pd-prods .pd-prods__sub {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pd-prods-sub-h);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: var(--pd-prods-sub-px);
	padding-right: var(--pd-prods-sub-px);
	background-color: #fff;
	color: var(--pd-prods-dark);
	text-align: center;
}

.pd-prods .pd-prods__sub-list,
#top #wrap_all .pd-prods .pd-prods__sub-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: var(--pd-prods-sub-gap);
	row-gap: 16px;
}

.pd-prods .pd-prods__sub-link,
.pd-prods .pd-prods__sub-t,
#top #wrap_all .pd-prods .pd-prods__sub-link,
#top #wrap_all .pd-prods .pd-prods__sub-t {
	display: block;
	color: var(--pd-prods-dark);
}

.pd-prods .pd-prods__sub-t,
#top #wrap_all .pd-prods .pd-prods__sub-t {
	--fs: var(--pd-prods-sub-fs);
	--lh: var(--pd-prods-sub-lh);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.pd-prods .pd-prods__sub-link,
#top #wrap_all .pd-prods .pd-prods__sub-link {
	transition: color 0.2s ease;
}

.pd-prods .pd-prods__sub-link:hover,
.pd-prods .pd-prods__sub-link:focus-visible,
.pd-prods .pd-prods__sub-link:hover .pd-prods__sub-t,
.pd-prods .pd-prods__sub-link:focus-visible .pd-prods__sub-t,
#top #wrap_all .pd-prods .pd-prods__sub-link:hover,
#top #wrap_all .pd-prods .pd-prods__sub-link:focus-visible,
#top #wrap_all .pd-prods .pd-prods__sub-link:hover .pd-prods__sub-t,
#top #wrap_all .pd-prods .pd-prods__sub-link:focus-visible .pd-prods__sub-t {
	color: var(--pd-prods-red);
}

.pd-prods .pd-prods__sub-link:focus-visible,
#top #wrap_all .pd-prods .pd-prods__sub-link:focus-visible {
	outline: 2px solid var(--pd-prods-red);
	outline-offset: 4px;
}

/* ==========================================================================
   Grid + card (pd-woo card markup; Figma 178:3907)
   ========================================================================== */
.pd-prods .pd-prods__grid,
#top #wrap_all .pd-prods .pd-prods__grid {
	display: grid;
	grid-template-columns: repeat(var(--pd-prods-cols), minmax(0, 1fr));
	column-gap: var(--pd-prods-gap);
	row-gap: var(--pd-prods-gap);
}

.pd-prods .pd-woo-card,
#top #wrap_all .pd-prods .pd-woo-card {
	display: flex;
	min-width: 0;
}

.pd-prods .pd-woo-card__link,
#top #wrap_all .pd-prods .pd-woo-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--pd-prods-ink);
	transition: color 0.3s ease;
}

.pd-prods .pd-woo-card__media,
#top #wrap_all .pd-prods .pd-woo-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var(--pd-prods-dark);
	overflow: hidden;
	transition: background-color 0.3s ease;
}

.pd-prods .pd-woo-card__media img,
#top #wrap_all .pd-prods .pd-woo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	padding-top: 6%;
	padding-bottom: 6%;
	padding-left: 6%;
	padding-right: 6%;
	margin-top: 0;
	margin-bottom: 0;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	box-shadow: none;
	transition: transform 0.5s ease;
}

.pd-prods .pd-woo-card__link:hover .pd-woo-card__media img,
#top #wrap_all .pd-prods .pd-woo-card__link:hover .pd-woo-card__media img {
	transform: scale(1.04);
}

.pd-prods .pd-woo-card__body,
#top #wrap_all .pd-prods .pd-woo-card__body {
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: var(--pd-prods-body-gap);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	padding-top: var(--pd-prods-pad-y);
	padding-bottom: var(--pd-prods-pad-y);
	padding-left: var(--pd-prods-pad-x);
	padding-right: var(--pd-prods-pad-x);
	background-color: var(--pd-prods-dark);
	box-shadow: inset 0 1px 0 0 var(--pd-prods-line);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.pd-prods .pd-woo-card__name,
#top #wrap_all .pd-prods .pd-woo-card__name {
	--fs: var(--pd-prods-name-fs);
	--lh: var(--pd-prods-name-lh);
	/* clamped to 2 lines: Chrome drops text-box trim on line-clamp boxes, so this
	   one always uses the metric margins (same numbers as the trim) */
	--pd-fb: 1;
	text-box-trim: none;
	text-box: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* two lines always reserved (Figma: "GYEON Q2M WetCoat" + an empty line) */
	min-height: calc(2 * var(--lh));
	color: inherit;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 0.72;
	overflow-wrap: anywhere;
	transition: opacity 0.25s ease;
}

.pd-prods .pd-woo-card__clamp,
#top #wrap_all .pd-prods .pd-woo-card__clamp {
	display: inline;
	color: inherit;
}

.pd-prods .pd-prods__price-row,
#top #wrap_all .pd-prods .pd-prods__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: end;
	column-gap: 8px;
	row-gap: 8px;
}

.pd-prods .pd-woo-card__price,
#top #wrap_all .pd-prods .pd-woo-card__price {
	--fs: var(--pd-prods-price-fs);
	--lh: var(--pd-prods-price-lh);
	color: inherit;
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
}

.pd-prods .pd-prods__now,
.pd-prods .pd-woo-card__price .woocommerce-Price-amount,
.pd-prods .pd-woo-card__price bdi,
.pd-prods .pd-woo-card__price span,
#top #wrap_all .pd-prods .pd-prods__now,
#top #wrap_all .pd-prods .pd-woo-card__price .woocommerce-Price-amount,
#top #wrap_all .pd-prods .pd-woo-card__price bdi,
#top #wrap_all .pd-prods .pd-woo-card__price span {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

.pd-prods .pd-woo-card__price del,
.pd-prods .pd-prods__was,
#top #wrap_all .pd-prods .pd-woo-card__price del,
#top #wrap_all .pd-prods .pd-prods__was {
	margin-left: 8px;
	color: inherit;
	font-weight: 400;
	opacity: 0.72;
	text-decoration: line-through;
	text-decoration-thickness: from-font;
	text-decoration-skip-ink: none;
}

.pd-prods .pd-prods__now del,
#top #wrap_all .pd-prods .pd-prods__now del {
	margin-left: 0;
	margin-right: 8px;
}

.pd-prods .pd-woo-card__price ins,
#top #wrap_all .pd-prods .pd-woo-card__price ins {
	text-decoration: none;
	background-color: transparent;
	color: inherit;
}

/* Hover — the shop card's white state */
.pd-prods .pd-woo-card__link:hover,
#top #wrap_all .pd-prods .pd-woo-card__link:hover {
	color: var(--pd-prods-dark);
}

.pd-prods .pd-woo-card__link:hover .pd-woo-card__media,
.pd-prods .pd-woo-card__link:hover .pd-woo-card__body,
#top #wrap_all .pd-prods .pd-woo-card__link:hover .pd-woo-card__media,
#top #wrap_all .pd-prods .pd-woo-card__link:hover .pd-woo-card__body {
	background-color: var(--pd-prods-ink);
}

.pd-prods .pd-woo-card__link:hover .pd-woo-card__body,
#top #wrap_all .pd-prods .pd-woo-card__link:hover .pd-woo-card__body {
	box-shadow: inset 0 1px 0 0 rgba(22, 20, 20, 0.08);
}

.pd-prods .pd-woo-card__link:focus-visible,
#top #wrap_all .pd-prods .pd-woo-card__link:focus-visible {
	outline: 2px solid var(--pd-prods-ink);
	outline-offset: 3px;
}

/* ---------- Badges: New Arrival (red) on the picture; Save % (green) after the price ---------- */
.pd-prods .pd-prods__tags,
#top #wrap_all .pd-prods .pd-prods__tags {
	position: absolute;
	top: var(--pd-prods-tag-at);
	left: var(--pd-prods-tag-at);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 4px;
	pointer-events: none;
}

.pd-prods .pd-prods__tag,
#top #wrap_all .pd-prods .pd-prods__tag {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--pd-prods-tag-pad);
	padding-bottom: var(--pd-prods-tag-pad);
	padding-left: var(--pd-prods-tag-pad);
	padding-right: var(--pd-prods-tag-pad);
	background-color: var(--pd-prods-red);
	color: #fff;
}

.pd-prods .pd-prods__tag--save,
#top #wrap_all .pd-prods .pd-prods__tag--save {
	background-color: var(--pd-prods-green);
}

.pd-prods .pd-prods__tag-t,
#top #wrap_all .pd-prods .pd-prods__tag-t {
	--fs: var(--pd-prods-tag-fs);
	--lh: var(--pd-prods-tag-lh);
	color: #fff;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pd-prods .pd-prods__tag--m,
#top #wrap_all .pd-prods .pd-prods__tag--m {
	display: none;
}

/* Beside the price the badge must not grow the row (Figma: it is absolute, 3px above) */
.pd-prods .pd-prods__tag--d,
#top #wrap_all .pd-prods .pd-prods__tag--d {
	margin-top: calc((var(--pd-cap) * var(--pd-prods-price-fs) - var(--pd-cap) * var(--pd-prods-tag-fs)) / 2 - var(--pd-prods-tag-pad));
	margin-bottom: calc((var(--pd-cap) * var(--pd-prods-price-fs) - var(--pd-cap) * var(--pd-prods-tag-fs)) / 2 - var(--pd-prods-tag-pad));
}

/* ==========================================================================
   Button (pd-button markup, Dark style; Figma 178:3891)
   ========================================================================== */
.pd-prods .pd-prods__more,
#top #wrap_all .pd-prods .pd-prods__more {
	--pd-btn-ink: 255, 255, 255;
	--pd-btn-fs: 16px;
	--pd-btn-lh: 24px;
	--pd-btn-ls: 0.03em;
	--pd-btn-py: 24px;
	--pd-btn-px: 32px;
	--pd-btn-arm: 8px;
	--pd-btn-bar: 2px;
	--pd-btn-fill: 0.08;
	--pd-btn-fill-on: 0.16;
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.pd-prods .pd-btn__link,
#top #wrap_all .pd-prods .pd-btn__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-btn-py);
	padding-bottom: var(--pd-btn-py);
	padding-left: var(--pd-btn-px);
	padding-right: var(--pd-btn-px);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	color: rgb(var(--pd-btn-ink));
	background-color: rgba(var(--pd-btn-ink), var(--pd-btn-fill));
	background-image:
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink)));
	background-size:
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-btn-fs);
	font-weight: 400;
	font-style: normal;
	letter-spacing: var(--pd-btn-ls);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease;
}

.pd-prods .pd-btn__link:hover,
.pd-prods .pd-btn__link:focus-visible,
#top #wrap_all .pd-prods .pd-btn__link:hover,
#top #wrap_all .pd-prods .pd-btn__link:focus-visible {
	color: rgb(var(--pd-btn-ink));
	background-color: rgba(var(--pd-btn-ink), var(--pd-btn-fill-on));
	text-decoration: none;
}

.pd-prods .pd-btn__link:focus,
#top #wrap_all .pd-prods .pd-btn__link:focus {
	outline-style: none;
}

.pd-prods .pd-btn__link:focus-visible,
#top #wrap_all .pd-prods .pd-btn__link:focus-visible {
	outline: 2px solid rgb(var(--pd-btn-ink));
	outline-offset: 4px;
}

.pd-prods .pd-btn__link--nolink,
#top #wrap_all .pd-prods .pd-btn__link--nolink {
	cursor: default;
}

.pd-prods .pd-btn__label,
#top #wrap_all .pd-prods .pd-btn__label {
	--fs: var(--pd-btn-fs);
	--lh: var(--pd-btn-lh);
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media only screen and (max-width: 1023px) {
	.pd-prods,
#top #wrap_all .pd-prods {
		--pd-prods-cols: 3;
		--pd-prods-gap: 8px;
		--pd-prods-more: 48px;
		--pd-prods-name-fs: 16px;
		--pd-prods-name-lh: 22px;
		--pd-prods-price-fs: 18px;
		--pd-prods-price-lh: 28px;
		--pd-prods-pad-y: 24px;
		--pd-prods-pad-x: 20px;
		--pd-prods-body-gap: 24px;
		--pd-prods-tag-at: 12px;
		--pd-prods-tag-fs: 12px;
		--pd-prods-tag-lh: 16px;
		--pd-prods-tag-pad: 5px;
	}

	/* Narrow cards: the saving moves onto the picture (Figma mobile 204:6233) */
	.pd-prods .pd-prods__tag--d,
#top #wrap_all .pd-prods .pd-prods__tag--d {
		display: none;
	}

	.pd-prods .pd-prods__tag--m,
#top #wrap_all .pd-prods .pd-prods__tag--m {
		display: flex;
	}
}

@media only screen and (max-width: 989px) {
	.pd-prods,
#top #wrap_all .pd-prods {
		--pd-prods-sub-h: 60px;
		--pd-prods-sub-gap: 24px;
		--pd-prods-sub-fs: 18px;
		--pd-prods-sub-lh: 26px;
	}

	.pd-prods .pd-prods__sub,
#top #wrap_all .pd-prods .pd-prods__sub {
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

/* Phones — Figma 204:6302 */
@media only screen and (max-width: 767px) {
	.pd-prods,
#top #wrap_all .pd-prods {
		--pd-prods-cols: 2;
		--pd-prods-gap: 4px;
		--pd-prods-more: 48px;
		--pd-prods-pad-y: 20px;
		--pd-prods-pad-x: 16px;
		--pd-prods-body-gap: 20px;
		--pd-prods-name-fs: 14px;
		--pd-prods-name-lh: 18px;
		--pd-prods-price-fs: 16px;
		--pd-prods-price-lh: 24px;
		--pd-prods-tag-at: 8px;
		--pd-prods-tag-pad: 4px;
		--pd-prods-tag-fs: 10px;
		--pd-prods-tag-lh: 12px;
		--pd-prods-sub-px: 16px;
	}

	.pd-prods .pd-prods__price-row,
#top #wrap_all .pd-prods .pd-prods__price-row {
		column-gap: 6px;
	}

	.pd-prods .pd-woo-card__price del,
.pd-prods .pd-prods__was,
#top #wrap_all .pd-prods .pd-woo-card__price del,
#top #wrap_all .pd-prods .pd-prods__was {
		margin-left: 6px;
	}

	.pd-prods .pd-btn__link,
#top #wrap_all .pd-prods .pd-btn__link {
		width: 100%;
		white-space: normal;
	}

	/* No white menu bar on phones (Figma 204:6302) */
	.pd-prods .pd-prods__sub,
#top #wrap_all .pd-prods .pd-prods__sub {
		display: none;
	}

	.pd-prods.pd-prods--m2 .pd-prods__item:nth-child(n+3),
.pd-prods.pd-prods--m4 .pd-prods__item:nth-child(n+5),
.pd-prods.pd-prods--m6 .pd-prods__item:nth-child(n+7),
.pd-prods.pd-prods--m8 .pd-prods__item:nth-child(n+9),
.pd-prods.pd-prods--m10 .pd-prods__item:nth-child(n+11),
.pd-prods.pd-prods--m12 .pd-prods__item:nth-child(n+13),
#top #wrap_all .pd-prods.pd-prods--m2 .pd-prods__item:nth-child(n+3),
#top #wrap_all .pd-prods.pd-prods--m4 .pd-prods__item:nth-child(n+5),
#top #wrap_all .pd-prods.pd-prods--m6 .pd-prods__item:nth-child(n+7),
#top #wrap_all .pd-prods.pd-prods--m8 .pd-prods__item:nth-child(n+9),
#top #wrap_all .pd-prods.pd-prods--m10 .pd-prods__item:nth-child(n+11),
#top #wrap_all .pd-prods.pd-prods--m12 .pd-prods__item:nth-child(n+13) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-prods .pd-woo-card__media img,
.pd-prods .pd-btn__link,
#top #wrap_all .pd-prods .pd-woo-card__media img,
#top #wrap_all .pd-prods .pd-btn__link {
		transition: none;
	}

	.pd-prods .pd-woo-card__link:hover .pd-woo-card__media img,
#top #wrap_all .pd-prods .pd-woo-card__link:hover .pd-woo-card__media img {
		transform: none;
	}
}