/**
 * Shop Kit · Product page — the page's components (markup: components.php; behaviour: product-page.js).
 *
 * Gallery · buy box · trust row · jump bar · sections · the phone's bottom bar. Loaded on product pages only, late
 * (after a theme's stylesheets), after the product-content stylesheet, whose base tokens it shares — ink, muted, line,
 * focus, measure, text-size, tracking and the H2 register (h2-size / -narrow, h2-weight, h2-leading, h2-gap): one design
 * language for the page and its blocks. The page's own tokens below are declared on :where(:root) — zero specificity —
 * so a store's :root mapping wins in any load order (Love Pharm: assets/css/pdp.css). Below the kit's desktop line
 * (993px) a value reads its --*-narrow twin.
 *
 * The register: square corners, hairlines (the jump bar's are box-shadows insets, no blur), no shadows, no fills but the
 * photo backdrop and the CTA; RTL through logical properties; the focus ring on :focus-visible only. A parent theme's
 * single-product rules on the WooCommerce classes the page keeps (.summary, .quantity, .qty, the button) are taken back
 * in themes/<theme>.css.
 */

:where(:root) {
	/* colour (the base four — ink, muted, line, focus — are product-content's) */
	--sk-pdp-hair: var(--sk-pdp-line);          /* the jump bar's two lines */
	--sk-pdp-paper: #ffffff;                    /* the bars' plates, the drawings' backdrop, the stepper */
	--sk-pdp-cta: var(--sk-pdp-ink);            /* the buttons: the buy box's, the stuck jump bar's, the phone bar's */
	--sk-pdp-cta-hover: #333333;
	--sk-pdp-cta-text: #ffffff;
	--sk-pdp-photo-bg: #f3f3f3;                 /* behind the product photos and their thumbs */
	--sk-pdp-star: var(--sk-pdp-ink);
	--sk-pdp-star-track: #dddddd;
	--sk-pdp-dot-track: rgba(26, 26, 26, 0.2);  /* the phone gallery's inactive dots */
	--sk-pdp-sale: #b12704;                     /* the sale price */

	/* grid: the content box inside the gutters */
	--sk-pdp-content: 1200px;
	--sk-pdp-gutter: 24px;
	--sk-pdp-gutter-narrow: var(--sk-pdp-gutter);
	--sk-pdp-top-gap: 56px;                     /* gallery | buy box (the phone: gallery over buy box) */
	--sk-pdp-top-gap-narrow: var(--sk-pdp-top-gap);
	--sk-pdp-gap: 64px;                         /* between sections; over the jump bar */
	--sk-pdp-gap-narrow: var(--sk-pdp-gap);
	--sk-pdp-jump-top-narrow: 48px;             /* the phone: the trust row → the jump bar */
	--sk-pdp-end-gap: 48px;                     /* under the last section (the related cards) */
	--sk-pdp-more-top: 36px;                    /* the overview's text blocks → the rest of the description */
	--sk-pdp-leading: 1.5;                      /* the page's own text */

	/* gallery */
	--sk-pdp-photo-ratio: 5 / 6;
	--sk-pdp-photo-inset: 14%;                  /* a photo that is not a processed card photo: the cards' inset */
	--sk-pdp-thumb: 72px;                       /* the desktop thumbs rail */
	--sk-pdp-thumb-inset: 8px;
	--sk-pdp-gal-gap: 12px;                     /* the image ↔ the rail */
	--sk-pdp-thumbs-gap: 8px;
	--sk-pdp-gal-max-narrow: 58vh;              /* the phone's frame cap: the H1 and the price in the first screen */
	--sk-pdp-dot: 6px;                          /* a square dot … */
	--sk-pdp-dot-tap: 24px;                     /* … in a 24px tap box */

	/* the buy box */
	--sk-pdp-eyebrow-size: 12px;
	--sk-pdp-eyebrow-weight: 600;
	--sk-pdp-eyebrow-tracking: 0.14em;
	--sk-pdp-eyebrow-gap: 10px;                 /* eyebrow → H1 */
	--sk-pdp-eyebrow-gap-narrow: 8px;
	--sk-pdp-title-size: 28px;                  /* the H1 */
	--sk-pdp-title-size-narrow: var(--sk-pdp-title-size);
	--sk-pdp-title-weight: 400;
	--sk-pdp-title-leading: 1.25;
	--sk-pdp-title-gap: 10px;                   /* H1 → promise */
	--sk-pdp-title-gap-narrow: 8px;
	--sk-pdp-promise-size: 16px;
	--sk-pdp-promise-gap: 14px;                 /* promise → stars */
	--sk-pdp-promise-gap-narrow: 12px;
	--sk-pdp-rating-size: 13px;
	--sk-pdp-rating-gap: 20px;                  /* stars → price */
	--sk-pdp-rating-gap-narrow: 16px;
	--sk-pdp-star-size: 14px;
	--sk-pdp-star-gap: 2px;
	--sk-pdp-price-size: 20px;
	--sk-pdp-price-weight: 500;
	--sk-pdp-price-gap: 22px;                   /* price → the CTA */
	--sk-pdp-cta-h: 50px;
	--sk-pdp-cta-size: 15px;
	--sk-pdp-cta-weight: 500;
	--sk-pdp-glyph: 20px;                       /* the trust row's line icons */
	--sk-pdp-trust-top: 24px;                   /* the CTA → the trust row's hairline */
	--sk-pdp-trust-pad: 14px;                   /* the hairline → the facts */
	--sk-pdp-trust-size: 13px;
	--sk-pdp-trust-size-narrow: 12px;
	--sk-pdp-trust-glyph-narrow: 22px;

	/* the jump bar and the phone's bottom bar */
	--sk-pdp-jump-h: 48px;
	--sk-pdp-jump-size: 14px;
	--sk-pdp-jump-size-narrow: 13px;
	--sk-pdp-jump-gap: 28px;                    /* between the labels */
	--sk-pdp-jump-gap-narrow: 12px;
	--sk-pdp-jump-z: 10;
	--sk-pdp-bar-h: 56px;
	--sk-pdp-toast-w: 360px;                    /* the add-to-cart error toast, desktop */
	--sk-pdp-toast-gap: 16px;                   /* its distance from the screen's edges (and above the phone's bottom bar) */
	--sk-pdp-toast-z: 40;                       /* over the bottom bar */
	--sk-pdp-bar-z: 30;
	--sk-pdp-stick-top: 0px;                    /* the pinned header's height: the jump bar sticks right under it */
	--sk-pdp-stick-top-narrow: var(--sk-pdp-stick-top);

	/* motion (0 with reduced motion, below) */
	--sk-pdp-bar-motion: 220ms;                 /* the bottom bar's slide, the buttons' hover */
	--sk-pdp-fade: 320ms;                       /* the stuck jump bar's buy group: fade + a 4px rise */
}

/* ---------- The page frame: the product element spans the viewport; every block sits on the grid — the content box
 * inside the gutters. */
.sk-pdp {
	color: var(--sk-pdp-ink);
	font-size: var(--sk-pdp-text-size);
	line-height: var(--sk-pdp-leading);
}
.sk-pdp *,
.sk-pdp *::before,
.sk-pdp *::after {
	box-sizing: border-box;
}
/* the page's own blocks read the page's tracking; the related cards and the reviews keep the site's */
.sk-pdp-top,
.sk-pdp-jump,
.sk-pdp-sec__title,
.sk-pdp-bar {
	letter-spacing: var(--sk-pdp-tracking);
}
.sk-pdp-wrap {
	max-width: calc(var(--sk-pdp-content) + 2 * var(--sk-pdp-gutter));
	margin-inline: auto;
	padding-inline: var(--sk-pdp-gutter);
}
.sk-pdp figure {
	margin: 0;
}
.sk-pdp :focus-visible,
.sk-pdp-bar :focus-visible {
	outline: 2px solid var(--sk-pdp-focus);
	outline-offset: 2px;
}
.sk-pdp :focus:not(:focus-visible),
.sk-pdp-bar :focus:not(:focus-visible) {
	outline: none;
}
.sk-pdp-glyph {
	width: var(--sk-pdp-glyph);
	height: var(--sk-pdp-glyph);
	flex: 0 0 auto;
	display: block;
}

/* ---------- Gallery + buy box */
.sk-pdp-top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sk-pdp-top-gap);
	align-items: start;
}

/* The gallery: the big image at the inline start (flush with the content edge), the thumbs rail at its inline end,
 * aligned to its top. One slide shows at a time on desktop; every image stays in the DOM. */
.sk-pdp-gal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sk-pdp-thumb);
	gap: var(--sk-pdp-gal-gap);
	align-items: start;
	min-width: 0;
}
.sk-pdp-gal__strip {
	display: grid;
	min-width: 0;
}
.sk-pdp-gal__slide {
	grid-area: 1 / 1;
	aspect-ratio: var(--sk-pdp-photo-ratio);
	max-width: 100%;
	background: var(--sk-pdp-photo-bg);
	display: none;
	position: relative;
	overflow: hidden;
}
.sk-pdp-gal__slide.is-active {
	display: block;
}
.sk-pdp-gal__slide--white {
	background: var(--sk-pdp-paper);             /* the dimension drawings: unframed */
}
.sk-pdp-gal__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	border-radius: 0;
}
.sk-pdp-gal__slide--inset img {
	padding: var(--sk-pdp-photo-inset);
}
.sk-pdp-gal__thumbs {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sk-pdp-thumbs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sk-pdp-gal__thumbs li {
	margin: 0;
}
.sk-pdp-gal__thumb {
	display: block;
	width: 100%;
	aspect-ratio: var(--sk-pdp-photo-ratio);
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--sk-pdp-photo-bg);
	overflow: hidden;
	cursor: pointer;
}
.sk-pdp-gal__thumb--white {
	background: var(--sk-pdp-paper);
}
.sk-pdp-gal__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}
.sk-pdp-gal__thumb--inset img {
	padding: var(--sk-pdp-thumb-inset);
}
.sk-pdp-gal__thumb[aria-current="true"] {
	border-color: var(--sk-pdp-ink);
}
.sk-pdp-gal__dots {
	display: none;
}

/* The buy box */
.sk-pdp .sk-pdp-buy {
	min-width: 0;
}
/* WooCommerce's own layout stylesheet floats the summary beside its gallery at 48% (a theme that loads it): the page's
 * grid places it. A theme with stronger rules of its own gets them taken back in its adapter (themes/<theme>.css). */
.woocommerce div.product.sk-pdp div.summary.sk-pdp-buy {
	float: none;
	width: auto;
}
.sk-pdp-eyebrow {
	margin: 0 0 var(--sk-pdp-eyebrow-gap);
	font-size: var(--sk-pdp-eyebrow-size);
	font-weight: var(--sk-pdp-eyebrow-weight);
	letter-spacing: var(--sk-pdp-eyebrow-tracking);
	line-height: 1.5;
	color: var(--sk-pdp-muted);
}
.sk-pdp .sk-pdp-title {
	margin: 0 0 var(--sk-pdp-title-gap);
	font-size: var(--sk-pdp-title-size);
	font-weight: var(--sk-pdp-title-weight);
	line-height: var(--sk-pdp-title-leading);
	letter-spacing: 0;
	color: var(--sk-pdp-ink);
	text-wrap: balance;
}
.sk-pdp-promise {
	margin: 0 0 var(--sk-pdp-promise-gap);
	font-size: var(--sk-pdp-promise-size);
	line-height: 1.45;
	color: var(--sk-pdp-muted);
}
.sk-pdp-promise p {
	margin: 0 0 .5em;
}
.sk-pdp-promise p:last-child {
	margin-bottom: 0;
}
.sk-pdp-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--sk-pdp-rating-gap);
	font-size: var(--sk-pdp-rating-size);
	font-weight: 500;
}
.sk-pdp-rating__link,
.sk-pdp-rating__link:visited {
	color: var(--sk-pdp-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.sk-pdp-rating__link:hover {
	color: var(--sk-pdp-muted);
}
.sk-pdp .sk-pdp-price {
	margin: 0 0 var(--sk-pdp-price-gap);
	font-size: var(--sk-pdp-price-size);
	font-weight: var(--sk-pdp-price-weight);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--sk-pdp-ink);
}
.sk-pdp .sk-pdp-price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.sk-pdp .sk-pdp-price del {
	color: var(--sk-pdp-muted);
	font-weight: 400;
	opacity: 1;
}
.sk-pdp .sk-pdp-price ins {
	color: var(--sk-pdp-sale);
	text-decoration: none;
	background: none;
}

/* Stars: a track row and an ink row clipped from the inline start (4.5 → four and a half) */
.sk-pdp-stars {
	position: relative;
	display: inline-flex;
	line-height: 0;
	vertical-align: middle;
}
.sk-pdp-stars__row {
	display: inline-flex;
	gap: var(--sk-pdp-star-gap);
	color: var(--sk-pdp-star-track);
	white-space: nowrap;
}
.sk-pdp-stars__row svg {
	width: var(--sk-pdp-star-size);
	height: var(--sk-pdp-star-size);
	flex: 0 0 auto;
	fill: currentColor;
}
.sk-pdp-stars__row--on {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--sk-pdp-star);
	width: calc(var(--sk-pdp-stars-full, 0) * (var(--sk-pdp-star-size) + var(--sk-pdp-star-gap)) + var(--sk-pdp-stars-frac, 0) * var(--sk-pdp-star-size));
}

/* The CTA: WooCommerce's form — the quiet stepper (a hairline box) beside the full-width button. A variable product's
 * selects sit above them, the variation's price under the selects. */
.sk-pdp-cta form.cart {
	margin: 0;
	padding: 0;
}
.sk-pdp-cta form.cart:not(.variations_form),
.sk-pdp-cta .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 12px;
}
.sk-pdp-cta .stock {
	margin: 0 0 12px;
	font-size: 14px;
}
.sk-pdp-cta .quantity {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	height: var(--sk-pdp-cta-h);
	margin: 0;
	padding: 0;
	border: 1px solid var(--sk-pdp-line);
	border-radius: 0;
	background: var(--sk-pdp-paper);
}
/* a quantity WooCommerce prints as a hidden input (one unit in stock, sold individually): no stepper, no box */
.sk-pdp-cta .quantity:not(:has(.qty:not([type="hidden"]))) {
	display: none;
}
.sk-pdp-cta .quantity .qty {
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--sk-pdp-ink);
	font: inherit;
	font-size: var(--sk-pdp-cta-size);
	font-variant-numeric: tabular-nums;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.sk-pdp-cta .quantity .qty::-webkit-inner-spin-button,
.sk-pdp-cta .quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
.sk-pdp-qty__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sk-pdp-ink);
	cursor: pointer;
}
.sk-pdp-qty__btn .sk-pdp-glyph {
	width: 16px;
	height: 16px;
}

/* The buttons: the buy box's (WooCommerce's), the stuck jump bar's, the phone bar's */
.sk-pdp .sk-pdp-cta .single_add_to_cart_button,
.sk-pdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3em;
	height: var(--sk-pdp-cta-h);
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--sk-pdp-cta);
	color: var(--sk-pdp-cta-text);
	font-family: inherit;
	font-size: var(--sk-pdp-cta-size);
	font-weight: var(--sk-pdp-cta-weight);
	line-height: 1;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--sk-pdp-bar-motion);
}
.sk-pdp .sk-pdp-cta .single_add_to_cart_button {
	flex: 1 1 auto;
	width: auto;
	float: none;
}
.sk-pdp .sk-pdp-cta .single_add_to_cart_button:hover,
.sk-pdp-btn:hover {
	background: var(--sk-pdp-cta-hover);
	color: var(--sk-pdp-cta-text);
}
.sk-pdp .sk-pdp-cta .single_add_to_cart_button.disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* The trust row: the facts on one hairline row, line icons, no fill */
.sk-pdp-trust {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: space-between;
	gap: 12px;
	margin: var(--sk-pdp-trust-top) 0 0;
	padding: var(--sk-pdp-trust-pad) 0 0;
	border-top: 1px solid var(--sk-pdp-line);
	list-style: none;
}
.sk-pdp-trust__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--sk-pdp-trust-size);
	line-height: 1.3;
	white-space: nowrap;
}

/* ---------- The jump bar: in the flow a strip between two full-width hairlines (the product element spans the
 * viewport); sticky right under the header; stuck, the bottom line only (product-page.js sets .is-stuck). */
.sk-pdp-jump {
	position: sticky;
	top: var(--sk-pdp-stick-top);
	z-index: var(--sk-pdp-jump-z);
	margin-top: var(--sk-pdp-gap);
	background: var(--sk-pdp-paper);
	box-shadow: inset 0 1px 0 var(--sk-pdp-hair), inset 0 -1px 0 var(--sk-pdp-hair);
}
.sk-pdp-jump.is-stuck {
	box-shadow: inset 0 -1px 0 var(--sk-pdp-hair);
}
.sk-pdp-jump__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.sk-pdp-jump__list {
	display: flex;
	align-items: stretch;
	gap: var(--sk-pdp-jump-gap);
	min-width: 0;
	height: var(--sk-pdp-jump-h);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.sk-pdp-jump__list::-webkit-scrollbar {
	display: none;
}
.sk-pdp-jump__list li {
	margin: 0;
}
.sk-pdp-jump__link,
.sk-pdp-jump__link:visited {
	display: flex;
	align-items: center;
	height: 100%;
	border-bottom: 1px solid transparent;
	color: var(--sk-pdp-muted);
	font-size: var(--sk-pdp-jump-size);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.sk-pdp-jump__link:hover {
	color: var(--sk-pdp-ink);
}
.sk-pdp-jump__link.is-active {
	color: var(--sk-pdp-ink);
	border-bottom-color: var(--sk-pdp-ink);       /* sits ON the bar's hairline */
}
/* Desktop, once stuck: "name · price" + a small add-to-cart, fading in with a 4px rise; its place is kept while hidden,
 * so nothing in the bar moves. */
.sk-pdp-jump__buy {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--sk-pdp-fade) ease-out, transform var(--sk-pdp-fade) ease-out, visibility 0s linear var(--sk-pdp-fade);
}
.sk-pdp-jump.is-stuck .sk-pdp-jump__buy {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--sk-pdp-fade) ease-out, transform var(--sk-pdp-fade) ease-out, visibility 0s;
}
.sk-pdp-jump__id {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	white-space: nowrap;
}
.sk-pdp-jump__name {
	font-weight: 600;
}
.sk-pdp-jump__dot {
	display: inline-block;
	color: var(--sk-pdp-muted);
	font-weight: 800;
	transform: scale(1.15);
}
.sk-pdp-jump__price {
	font-variant-numeric: tabular-nums;
}
.sk-pdp-btn--sm {
	height: 36px;
	padding-inline: 22px;
	font-size: 14px;
}

/* ---------- Sections: the H2 register shared with product-content (the hero's H2 is the overview's heading) */
.sk-pdp-sec {
	padding-top: var(--sk-pdp-gap);
	scroll-margin-top: calc(var(--sk-pdp-stick-top) + var(--sk-pdp-jump-h));
}
.sk-pdp .sk-pdp-sec__title,
.sk-pdp .sk-pdp-sec .sk-pdp-hero__title {
	margin: 0 0 var(--sk-pdp-h2-gap);
	padding: 0;
	font-size: var(--sk-pdp-h2-size);
	font-weight: var(--sk-pdp-h2-weight);
	line-height: var(--sk-pdp-h2-leading);
	letter-spacing: 0;
	color: var(--sk-pdp-ink);
	text-wrap: balance;
}
.sk-pdp-sec--related {
	padding-bottom: var(--sk-pdp-end-gap);
}
.sk-pdp-more {
	max-width: var(--sk-pdp-measure);
	margin-top: var(--sk-pdp-more-top);
	font-size: var(--sk-pdp-text-size);
	line-height: var(--sk-pdp-text-leading);
}
.sk-pdp-more:first-child {
	margin-top: 0;
}
.sk-pdp-more > :last-child {
	margin-bottom: 0;
}

/* ---------- The phone's bottom bar: a plate with a hairline on top, name + price at the start, the CTA at the end,
 * inside the gutter; up only after the main CTA has scrolled above the header (body.sk-pdp-atc-passed), down at the
 * footer (body.sk-pdp-at-footer) — a theme adapter also lowers it while the theme's side cart is open. */
.sk-pdp-bar {
	display: none;
}

@media (max-width: 992px) {
	.sk-pdp-wrap {
		max-width: calc(var(--sk-pdp-content) + 2 * var(--sk-pdp-gutter-narrow));
		padding-inline: var(--sk-pdp-gutter-narrow);
	}
	.sk-pdp-top {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sk-pdp-top-gap-narrow);
	}

	/* the phone's gallery: a swipeable strip, square dots on the image, the frame capped so the H1 and the price sit in
	 * the first screen */
	.sk-pdp-gal {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		position: relative;
	}
	.sk-pdp-gal__strip {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.sk-pdp-gal__strip::-webkit-scrollbar {
		display: none;
	}
	.sk-pdp-gal__slide {
		display: block;
		flex: 0 0 100%;
		max-height: var(--sk-pdp-gal-max-narrow);
		scroll-snap-align: start;
	}
	.sk-pdp-gal__thumbs {
		display: none;
	}
	.sk-pdp-gal__dots {
		position: absolute;
		inset-inline: 0;
		bottom: -1px;
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0;
		list-style: none;
		pointer-events: none;
	}
	.sk-pdp-gal__dots li {
		margin: 0;
		pointer-events: auto;
	}
	.sk-pdp-gal__dot {
		display: grid;
		place-items: center;
		width: var(--sk-pdp-dot-tap);
		height: var(--sk-pdp-dot-tap);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		cursor: pointer;
	}
	.sk-pdp-gal__dot::before {
		content: "";
		width: var(--sk-pdp-dot);
		height: var(--sk-pdp-dot);
		background: var(--sk-pdp-dot-track);
	}
	.sk-pdp-gal__dot[aria-current="true"]::before {
		background: var(--sk-pdp-ink);
	}

	.sk-pdp-eyebrow {
		margin-bottom: var(--sk-pdp-eyebrow-gap-narrow);
	}
	.sk-pdp .sk-pdp-title {
		margin-bottom: var(--sk-pdp-title-gap-narrow);
		font-size: var(--sk-pdp-title-size-narrow);
	}
	.sk-pdp-promise {
		margin-bottom: var(--sk-pdp-promise-gap-narrow);
	}
	.sk-pdp-rating {
		margin-bottom: var(--sk-pdp-rating-gap-narrow);
	}

	/* the trust row: ONE row of equal columns, the icon over the label, the hairline above it and none below */
	.sk-pdp-trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.sk-pdp-trust__item {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		font-size: var(--sk-pdp-trust-size-narrow);
		font-weight: 500;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
	.sk-pdp-trust__item .sk-pdp-glyph {
		width: var(--sk-pdp-trust-glyph-narrow);
		height: var(--sk-pdp-trust-glyph-narrow);
	}

	/* the jump bar: under the trust row; the labels across the width, a sideways scroll only when they do not fit; no
	 * buy group (the bottom bar is the phone's) */
	.sk-pdp-jump {
		top: var(--sk-pdp-stick-top-narrow);
		margin-top: var(--sk-pdp-jump-top-narrow);
	}
	.sk-pdp-jump__in {
		gap: 0;
	}
	.sk-pdp-jump__list {
		flex: 1 1 auto;
		justify-content: space-between;
		gap: var(--sk-pdp-jump-gap-narrow);
	}
	.sk-pdp-jump__link,
	.sk-pdp-jump__link:visited {
		font-size: var(--sk-pdp-jump-size-narrow);
	}
	.sk-pdp-jump__buy {
		display: none;
	}

	.sk-pdp-sec {
		padding-top: var(--sk-pdp-gap-narrow);
		scroll-margin-top: calc(var(--sk-pdp-stick-top-narrow) + var(--sk-pdp-jump-h));
	}
	.sk-pdp .sk-pdp-sec__title,
	.sk-pdp .sk-pdp-sec .sk-pdp-hero__title {
		font-size: var(--sk-pdp-h2-size-narrow);
	}

	.sk-pdp-bar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--sk-pdp-bar-z);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		box-sizing: border-box;
		height: calc(var(--sk-pdp-bar-h) + env(safe-area-inset-bottom, 0px));
		padding: 0 var(--sk-pdp-gutter-narrow) env(safe-area-inset-bottom, 0px);
		border-top: 1px solid var(--sk-pdp-line);
		background: var(--sk-pdp-paper);
		color: var(--sk-pdp-ink);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform var(--sk-pdp-bar-motion) ease-out, visibility 0s linear var(--sk-pdp-bar-motion);
	}
	body.sk-pdp-atc-passed:not(.sk-pdp-at-footer) .sk-pdp-bar {
		transform: none;
		visibility: visible;
		transition: transform var(--sk-pdp-bar-motion) ease-out, visibility 0s;
	}
	.sk-pdp-bar__txt {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.sk-pdp-bar__name {
		overflow: hidden;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.sk-pdp-bar__price {
		font-size: 13px;
		line-height: 1.4;
		font-variant-numeric: tabular-nums;
	}
	.sk-pdp-btn--bar {
		flex: 0 0 auto;
		height: 40px;
		padding-inline: 20px;
		font-size: 14px;
	}
}

/* Reduced motion: no slide, no fade — on the page's own elements, whatever a store's :root says */
@media (prefers-reduced-motion: reduce) {
	.sk-pdp,
	.sk-pdp-bar {
		--sk-pdp-bar-motion: 0ms;
		--sk-pdp-fade: 0ms;
	}
}

/* ---------- The add-to-cart error toast (product-page.js wraps the notice a theme's AJAX add appends to <body>): the
 * notice keeps the store's look; here only where it floats — above the phone's bottom bar across the width, at the
 * screen's bottom end corner on a desktop — and its close button. Shoptimizer's own placement of that notice
 * (`.pdp-ajax.single-product … .woocommerce-error`: fixed, 300px, 20px from the right) reaches (0,4,0), hence :root. */
.sk-pdp-toast {
	position: fixed;
	z-index: var(--sk-pdp-toast-z);
	bottom: var(--sk-pdp-toast-gap);
	inset-inline: auto var(--sk-pdp-toast-gap);
	width: min(var(--sk-pdp-toast-w), calc(100vw - 2 * var(--sk-pdp-toast-gap)));
	animation: sk-pdp-toast-in var(--sk-pdp-bar-motion) ease-out;
}
:root body.single-product .sk-pdp-toast > .woocommerce-error {
	position: static;
	inset: auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding-inline-end: 44px;
}
.sk-pdp-toast__close {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sk-pdp-ink);
	cursor: pointer;
}
.sk-pdp-toast__close svg {
	width: 18px;
	height: 18px;
}
.sk-pdp-toast__close:focus-visible {
	outline: 2px solid var(--sk-pdp-focus, currentColor);
	outline-offset: -4px;
}
@keyframes sk-pdp-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sk-pdp-toast {
		animation: none;
	}
}
@media (max-width: 992px) {
	.sk-pdp-toast {
		bottom: calc(var(--sk-pdp-bar-h) + env(safe-area-inset-bottom, 0px) + var(--sk-pdp-toast-gap));
		inset-inline: var(--sk-pdp-toast-gap);
		width: auto;
	}
}