/**
 * Product Detail (PDP). Loaded only on is_product() (see
 * includes/class-assets.php). Reuses .k-section, .k-heading- variants,
 * .k-label variants, .k-btn variants and .k-serif from base/components.css
 * plus base/typography.css, and .k-product-card variants from
 * components/product-card.css, rather than redefining them here.
 *
 * The purchase panel (.k-pdp-panel) restyles WooCommerce's own real markup
 * (product_title, price, stock html, the variations form, the quantity
 * input, product_meta) rather than replacing it — those class names
 * (.variations, .single_variation_wrap, .quantity, .product_meta, …) are
 * WooCommerce's own, not invented here.
 */

/* -- breadcrumb ------------------------------------------------------------*/

/* Shared breadcrumb rhythm (padding-top, margin-bottom, label styling, link
   colors) now lives once in base/layout.css as .k-crumbs / .k-crumbs__nav —
   see that file's docblock. .k-pdp-crumbs itself carries no page-specific
   override at this time. */

/* -- top: gallery + purchase panel ------------------------------------------*/

.k-pdp-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
	padding-top: clamp(18px, 2.4vw, 28px);
	padding-bottom: clamp(50px, 7vw, 100px);
}

@media (min-width: 900px) {
	.k-pdp-top {
		grid-template-columns: 1.35fr 1fr;
	}
}

/* -- gallery -----------------------------------------------------------------*/

.k-pdp-gallery {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.4vw, 18px);
	min-width: 0;
}

.k-pdp-gallery__frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--k-color-surface-light);
}

.k-pdp-gallery__hero .k-pdp-gallery__frame {
	aspect-ratio: 4 / 5;
}

.k-pdp-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(10px, 1.4vw, 18px);
}

.k-pdp-gallery__grid .k-pdp-gallery__frame {
	aspect-ratio: 1 / 1;
}

.k-pdp-gallery__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.k-pdp-gallery__position {
	position: absolute;
	left: 12px;
	bottom: 12px;
	font-size: var(--k-text-label);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--k-color-text);
	text-shadow: 0 1px 12px rgba(10, 10, 9, .7);
}

.k-pdp-gallery__caption {
	position: absolute;
	right: 12px;
	bottom: 12px;
	max-width: 60%;
	font-size: var(--k-text-label);
	letter-spacing: .1em;
	text-align: right;
	color: var(--k-color-text);
	text-shadow: 0 1px 12px rgba(10, 10, 9, .7);
}

/* -- purchase panel ----------------------------------------------------------*/

.k-pdp-panel {
	min-width: 0;
}

@media (min-width: 900px) {
	.k-pdp-panel {
		position: sticky;
		top: calc(var(--k-header-height) + 24px);
	}
}

.k-pdp-panel .product_title {
	font-family: var(--k-font-serif);
	font-weight: 400;
	font-size: var(--k-text-display-sm);
	line-height: 1.03;
	margin: 12px 0 0;
}

.k-pdp-panel .woocommerce-product-details__short-description {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--k-color-muted-1);
}

/* Visual Polish 2.2: price now sits directly under the title (moved in
   purchase-panel.php) instead of in its own bordered band further down —
   tight spacing, no divider, so it reads as part of the title moment
   rather than a separate "status" section. Class name kept as-is
   (renaming would also require updating the found_variation/reset_data
   selector in assets/js/product.js, which this ticket doesn't touch). */
.k-pdp-panel__status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-top: 10px;
}

.k-pdp-panel__status .price,
.k-pdp-panel .woocommerce-variation-price .price {
	font-family: var(--k-font-serif);
	/* Heading-md, not a fixed 27px: stays fluidly subordinate to the
	   display-sm title (clamp 26-50px) at every viewport, including the
	   narrow end where a fixed 27px could equal or exceed the title. */
	font-size: var(--k-text-heading-md);
	font-weight: 400;
	color: var(--k-color-text);
	margin: 0;
	line-height: 1.3;
}

.k-pdp-panel .price del {
	font-size: .65em;
	color: var(--k-color-muted-2);
	margin-inline-end: .5em;
}

.k-pdp-panel .price ins {
	text-decoration: none;
	background: transparent;
	/* Same restrained gold used for a sale price in the search results
	   dropdown (components/search.css) — one consistent "this is the
	   current price" accent instead of a separate SALE badge. */
	color: var(--k-color-accent);
}

/* assets/js/product.js mirrors the selected variation's real price_html
   into .k-pdp-panel__status .price in place (found_variation/reset_data),
   so the native .woocommerce-variation-price copy WooCommerce renders down
   by the buy row would otherwise duplicate it there instead. Hide that
   copy only once JS confirms it's actually doing the mirroring (the
   has-mirrored-price class is added right before the listeners are
   attached) — without JS neither happens, so both stay visible exactly as
   plain WooCommerce would render them, same no-JS fallback this theme
   already uses for the variation pills. */
.k-pdp-panel.has-mirrored-price .woocommerce-variation-price {
	display: none;
}

/* De-emphasized on purpose (Visual Polish 2.2): still the real
   wc_get_stock_html()/variation availability text and count, just quieter
   — smallest label-tier size, faintest muted tone (same role footer/meta
   text uses). Out-of-stock stays on the accent tone since that state is
   functionally important, not just ambient detail. */
.k-pdp-panel__buy .stock {
	font-size: var(--k-text-label);
	line-height: 1.5;
	margin: 0;
	color: var(--k-color-muted-3);
}

.k-pdp-panel__buy .stock.in-stock {
	color: var(--k-color-muted-3);
}

.k-pdp-panel__buy .stock.out-of-stock {
	color: var(--k-color-accent);
}

/* -- real WooCommerce variations form / add-to-cart, restyled --------------*/

.k-pdp-panel .variations {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.k-pdp-panel .variations tr {
	display: grid;
	grid-template-columns: minmax(70px, 100px) minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--k-border-hairline);
}

.k-pdp-panel .variations th,
.k-pdp-panel .variations td {
	min-width: 0;
	padding: 0;
	text-align: start;
}

.k-pdp-panel .variations tr:first-child {
	border-top: 0;
}

.k-pdp-panel .variations label {
	display: block;
	margin: 6px 0 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--k-color-muted-2);
}

.k-pdp-panel .variations select {
	width: 100%;
	max-width: 320px;
	padding: 13px 16px;
	background: var(--k-color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C6A15B'/%3E%3C/svg%3E") no-repeat right 16px center;
	border: 1px solid var(--k-border-cta);
	color: var(--k-color-text);
	font: inherit;
	font-size: 13px;
	appearance: none;
}

.k-pdp-panel .variations select:focus-visible {
	outline: 1px solid var(--k-color-accent);
	outline-offset: 2px;
}

/* Pill enhancement (assets/js/product.js, initVariationPills()) — built only
 * from the real <select>'s own real <option> text/value; the select itself
 * gets .k-visually-hidden (see assets/css/base/layout.css) added by that
 * same script, once pills exist for it, rather than display:none, so it
 * stays in the tab order and fully operable for keyboard/AT users. Without
 * JS this class is never added and the native select above (still fully
 * visible and usable) is the only control. No color is ever rendered here —
 * there is no verified per-term color metadata, so every pill is a plain
 * text label (KARATAKI_MASTER.md: don't invent color hex values). */
.k-pdp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.k-pdp-pill {
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 10px 16px;
	font-size: 12px;
	letter-spacing: .04em;
	background: transparent;
	border: 1px solid var(--k-border-cta);
	color: var(--k-color-text);
	cursor: pointer;
}

.k-pdp-pill:hover {
	border-color: var(--k-color-accent);
}

.k-pdp-pill:focus-visible {
	outline: 1px solid var(--k-color-accent);
	outline-offset: 2px;
}

.k-pdp-pill[aria-pressed="true"] {
	background: var(--k-color-surface-light);
	border-color: var(--k-color-accent);
	color: var(--k-color-accent);
}

.k-pdp-pill:disabled {
	border-color: var(--k-border-hairline);
	color: var(--k-color-muted-3);
	opacity: .5;
	cursor: not-allowed;
}

/* .reset_variations ("Clear") is the last thing WooCommerce prints inside
   the last attribute row's real <td class="value"> (same cell as the
   select/pills, not its own row) — assets/js/product.js's pill group is a
   block-level flex container inserted right after the select, so in plain
   block flow "Clear" was forced onto its own line below it with real extra
   space. Making the cell itself a flex row (below) puts it back next to
   the pills instead; margin-top is no longer needed once it's a flex
   sibling with its own gap. */
.k-pdp-panel .variations td.value {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.k-pdp-panel .reset_variations {
	display: inline-block;
	margin-top: 0;
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--k-color-muted-2);
}

.k-pdp-panel .woocommerce-variation-availability {
	margin-top: 10px;
}

.k-pdp-panel .single_variation_wrap {
	margin-top: 10px;
}

/* Real, existing wc_get_stock_html() text inside the variation's own
   availability node — more readable than the shared simple-product .stock
   treatment below (10px/muted-3), since here it follows a compact
   variations block rather than sitting right under the title. Higher
   specificity than .k-pdp-panel__buy .stock so it overrides it without
   touching that shared rule (simple-product layout stays exactly as is). */
.k-pdp-panel .woocommerce-variation-availability .stock {
	font-size: var(--k-text-body-sm);
	color: var(--k-color-muted-2);
}

.k-pdp-panel form.cart,
.k-pdp-panel .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--k-border-hairline-strong);
	flex-wrap: nowrap;
	min-width: 0;
}

.k-pdp-panel form.variations_form {
	display: block;
}

.k-pdp-panel form.cart > input[type="hidden"],
.k-pdp-panel .woocommerce-variation-add-to-cart > input[type="hidden"] {
	display: none;
}

.k-pdp-panel .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--k-border-cta);
}

.k-pdp-panel .quantity .qty {
	width: 44px;
	height: 48px;
	border: 0;
	background: transparent;
	color: var(--k-color-text);
	text-align: center;
	font: inherit;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
}

/* Real <input type="number"> — the +/- stepper in assets/js/product.js only
   changes this input's value and dispatches its own change event; it never
   evaluates stock/price itself. Hidden default number-input spinners since
   the stepper buttons replace them visually. */
.k-pdp-panel .quantity .qty::-webkit-inner-spin-button,
.k-pdp-panel .quantity .qty::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}

.k-pdp-panel .quantity__step {
	width: 40px;
	height: 48px;
	flex: none;
	background: transparent;
	border: 0;
	color: var(--k-color-text);
	cursor: pointer;
	font-size: 16px;
}

.k-pdp-panel .single_add_to_cart_button {
	flex: 1;
	min-width: 0;
	padding: 0 18px;
	min-height: 50px;
	white-space: normal;
	overflow-wrap: anywhere;
	background: var(--k-color-text);
	color: var(--k-color-bg);
	border: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--k-duration-base);
}

.k-pdp-panel .single_add_to_cart_button:hover,
.k-pdp-panel .single_add_to_cart_button:focus-visible {
	background: var(--k-color-accent);
}

.k-pdp-panel .single_add_to_cart_button.disabled {
	background: var(--k-color-disabled-surface);
	color: var(--k-color-muted-2);
	cursor: not-allowed;
}

/* Wishlist toggle (Phase 10B) next to the real add-to-cart control — same
   working button as .k-product-card__wishlist, variation-aware here (see
   assets/js/wishlist.js's data-wishlist-variation-aware handling). Desktop
   positioning (>=900px) is set below, near .k-pdp-panel__buy, where the
   simple/variable DOM difference that drives it is explained; the mobile
   fixed-bar positioning (<=899px) further down is untouched by this rule. */
.k-pdp-panel__wishlist {
	width: 50px;
	min-height: 50px;
	background: transparent;
	border: 1px solid var(--k-border-cta);
	color: var(--k-color-text);
	cursor: pointer;
	transition: color 200ms, border-color 200ms;
}

.k-pdp-panel__wishlist span::before {
	content: "\2661";
	font-size: 17px;
}

.k-pdp-panel__wishlist[aria-pressed="true"] {
	color: var(--k-color-accent);
	border-color: var(--k-color-accent);
}

.k-pdp-panel__wishlist[aria-pressed="true"] span::before {
	content: "\2665";
}

/* Core's stock paragraph precedes the form in normal block flow.
   The wishlist is rendered by the native after-add-to-cart-button hook,
   which fires after the real <form> closes for BOTH product types — so in
   the real DOM the wishlist button is always a sibling AFTER the form, not
   a child inside its own quantity/button row. That row is the form itself
   for a simple product, but for a variable product it's
   .woocommerce-variation-add-to-cart, nested two levels deeper inside the
   form (table.variations + .single_variation_wrap come first) — the two
   markups differ enough that flexing them into one shared row isn't
   possible without matching nesting depth. Anchoring the wishlist button
   to the bottom-right corner of this shared, always-last-in-flow-child
   wrapper sidesteps that: the wrapper's own auto height always ends
   exactly where the last real content (the button row) ends, for both
   product types, so bottom:0 lines it up with that row regardless of how
   tall the variations table above it is. */
/* Divider moved here from the old price band (Visual Polish 2.2) — now
   separates description from variations/availability instead of sitting
   between title and price. First child is the real stock text for a
   simple product, or the real variations table for a variable one. */
.k-pdp-panel__buy {
	display: block;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--k-border-hairline-strong);
}

/* Visual Polish 2.4: that same divider read as a redundant empty band
   right before a variable product's own compact variations block (which
   already opens with its own hairline row borders) — simple products keep
   the divider above untouched, this only overrides it when the real
   variations_form is present. */
.k-pdp-panel__buy:has(.variations_form) {
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
}

@media (min-width: 900px) {
	.k-pdp-panel__buy {
		position: relative;
	}

	/* Reserve room (wishlist's own 50px + an 18px gap) on the right of
	   whichever element is the real button row so its own flex:1 Add to
	   Cart button doesn't extend underneath the absolutely-positioned
	   wishlist button placed in that space below. :not(.variations_form)
	   keeps this off the outer variable-product form — form.cart also
	   matches it (class="variations_form cart"), and it would otherwise
	   waste 68px down the whole variations table for no reason; that outer
	   form is already reset to display:block below regardless. */
	.k-pdp-panel form.cart:not(.variations_form),
	.k-pdp-panel .woocommerce-variation-add-to-cart {
		padding-right: 68px;
	}

	.k-pdp-panel__wishlist {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

@media (max-width: 599px) {
	.k-pdp-panel form.cart,
	.k-pdp-panel .woocommerce-variation-add-to-cart {
		gap: 8px;
	}
	.k-pdp-panel .quantity__step { width: 26px; }
	.k-pdp-panel .quantity .qty { width: 34px; }
	.k-pdp-panel__wishlist { width: 40px; }
	.k-pdp-panel .single_add_to_cart_button {
		padding: 10px 8px;
		letter-spacing: .08em;
	}
}

.k-pdp-panel .product_meta {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--k-border-hairline);
	line-height: 1.6;
	overflow-wrap: anywhere;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 11px;
	color: var(--k-color-muted-2);
}

.k-pdp-panel .product_meta > span {
	display: block;
}

.k-pdp-panel .product_meta a {
	color: var(--k-color-muted-2);
}

.k-pdp-panel .product_meta a:hover {
	color: var(--k-color-accent);
}

/* -- scroll-driven story -----------------------------------------------------*/

.k-pdp-story__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 2vw, 40px);
	margin-top: clamp(24px, 3vw, 44px);
}

@media (min-width: 900px) {
	.k-pdp-story__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.k-pdp-story__frames {
	position: relative;
}

@media (min-width: 900px) {
	.k-pdp-story__frames {
		position: sticky;
		top: calc(var(--k-header-height) + 24px);
	}
}

.k-pdp-story__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--k-duration-slow) ease;
}

.k-pdp-story__frame:first-child {
	position: relative;
}

.k-pdp-story__frame.is-active {
	opacity: 1;
}

.k-pdp-story__steps {
	display: flex;
	flex-direction: column;
}

.k-pdp-story__step {
	min-height: min(52vh, 420px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.k-pdp-story__copy {
	margin-top: 16px;
	max-width: 420px;
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--k-color-muted-1);
}

.k-pdp-story__copy p {
	margin: 0 0 1em;
}

.k-pdp-story__copy p:last-child {
	margin-bottom: 0;
}

/* -- info accordion -----------------------------------------------------------*/

.k-pdp-accordion {
	max-width: 820px;
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--k-border-hairline);
}

.k-pdp-accordion__row {
	border-bottom: 1px solid var(--k-border-hairline);
}

.k-pdp-accordion__row summary {
	list-style: none;
	cursor: pointer;
}

.k-pdp-accordion__row summary::-webkit-details-marker {
	display: none;
}

.k-pdp-accordion__trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.k-pdp-accordion__mark {
	font-family: var(--k-font-serif);
	font-size: 18px;
}

.k-pdp-accordion__mark::before {
	content: "+";
}

.k-pdp-accordion__row[open] .k-pdp-accordion__mark::before {
	content: "\2013";
}

.k-pdp-accordion__panel {
	padding: 0 0 16px;
	max-width: 460px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--k-color-muted-1);
}

.k-pdp-accordion__panel table {
	width: 100%;
	border-collapse: collapse;
}

.k-pdp-accordion__panel th,
.k-pdp-accordion__panel td {
	padding: 6px 10px 6px 0;
	text-align: left;
	font-size: 13px;
	border-bottom: 1px solid var(--k-border-hairline);
}

/* -- "Styled together" / "You may also like" ----------------------------------*/

.k-pdp-related {
	border-top: 1px solid var(--k-border-hairline);
}

.k-pdp-related__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(12px, 1.8vw, 24px);
	margin-top: clamp(20px, 2.6vw, 32px);
}

@media (min-width: 700px) {
	.k-pdp-related__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -- mobile: fixed bottom buy bar --------------------------------------------
 *
 * Only the quantity+button action row is pinned to the bottom of the
 * viewport on mobile — never the real attribute <select>s/pills
 * (.variations), which stay in normal page flow above so they're never
 * hidden inside a cramped fixed bar. For a simple product form.cart *is*
 * just the quantity+button (no .variations table exists), so the whole form
 * is pinned; for a variable product only WooCommerce's own inner
 * .woocommerce-variation-add-to-cart row is pinned — the surrounding
 * .variations_form/.variations table stays static. Both are real
 * WooCommerce-rendered elements; this only repositions them visually
 * (position:fixed) — nothing is duplicated or moved in the DOM, so there is
 * exactly one real add-to-cart form/button on the page at all times.
 *
 * --k-pdp-safe-bottom reads the real device inset (requires
 * viewport-fit=cover on the <meta name="viewport"> tag, set in header.php;
 * it's 0px on a device without a home-indicator/gesture-bar cutout) so the
 * bar — and the page-bottom reserve that keeps it from covering content —
 * both grow together on notched devices instead of the bar sitting under
 * the home indicator.
 */

@media (max-width: 899px) {
	:root {
		--k-pdp-safe-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* Reserve space for the fixed bar across the *whole* page, not just
	   .k-pdp — the real site footer (template-parts/footer/site-footer.php)
	   renders after .k-pdp, and without this the bar would sit on top of
	   the footer's own content/links once scrolled all the way down.
	   body.single-product is WooCommerce's own real body_class() output
	   (added whenever is_singular('product') is true) — used here instead
	   of a :has(.k-pdp) lookup since the real, always-present WC class
	   already identifies this template with no selector cost. */
	body.single-product {
		padding-bottom: calc(84px + var(--k-pdp-safe-bottom));
	}

	/* Real .stock/.woocommerce-variation-availability text scrolls in normal
	   flow underneath these fixed-position controls; on first load the
	   short top section puts it directly behind them. Each control already
	   has its own opaque background, but the gap BETWEEN them (left
	   gutter+68px reserved for the wishlist button) had none, so a sliver
	   of that in-flow text showed through the gap. This full-width fixed
	   backdrop — generated content, not a duplicate control, purely
	   decorative — closes that gap; it paints behind both real controls
	   (they come later in source order at the same stacking level, so they
	   stay on top and stay the only clickable elements). */
	.k-pdp-panel__buy::before {
		content: "";
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(74px + var(--k-pdp-safe-bottom));
		background: var(--k-color-bg);
		z-index: var(--k-z-filter-bar);
	}

	.k-pdp-panel__wishlist {
		position: fixed;
		left: var(--k-gutter);
		bottom: calc(12px + var(--k-pdp-safe-bottom));
		z-index: var(--k-z-filter-bar);
		height: 50px;
		background: var(--k-color-bg);
		/* Spacing from the cart row comes from that row's own `left` offset
		   at this width (see below), not from margin — cancel the base
		   desktop-row margin-left so it doesn't also shift this
		   independently-positioned fixed element. */
		margin-left: 0;
	}

	/* left = gutter + wishlist's own 50px width + 18px clear gap, so the
	   two fixed controls read as separate actions instead of touching (was
	   +60px = only a 10px gap at this width; QA flagged it as "wishlist
	   feels attached to quantity", since the quantity stepper is the first
	   thing inside this row). */
	.k-pdp-panel form.cart:not(:has(.variations)),
	.k-pdp-panel .woocommerce-variation-add-to-cart {
		position: fixed;
		left: calc(var(--k-gutter) + 68px);
		right: var(--k-gutter);
		bottom: calc(12px + var(--k-pdp-safe-bottom));
		z-index: var(--k-z-filter-bar);
		margin: 0 !important;
		padding: 0 !important;
		border-top: 0 !important;
		background: var(--k-color-bg);
	}

	/* Once form.cart/.woocommerce-variation-add-to-cart go position:fixed
	   they stop occupying space in normal flow, so whatever used to sit
	   right above them (the real stock paragraph for a simple product; the
	   real .woocommerce-variation-availability text for a variable one)
	   collapses down to wherever the page happens to be scrolled — which on
	   first load sits directly under the fixed bar and visually overlaps
	   it. Reserve the same ~74px the fixed bar occupies right after each of
	   those real elements so they always clear it. */
	.k-pdp-panel__buy .stock,
	.k-pdp-panel .single_variation_wrap {
		margin-bottom: calc(74px + var(--k-pdp-safe-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-pdp-story__frame {
		transition: none;
	}
}