/* =====================================================================
   Treetale Home — Product Detail Page (PDP) "V3"
   Documented exception to CLAUDE.md <5KB rule (same as plp.css): the V3
   product-detail design (sticky info panel, material→colour picker,
   drawers, magazine gallery, blueprint, delivery) cannot be expressed in
   theme.json alone. Scoped to `body.single-product` (added by WooCommerce).

   Loaded only on is_product() (functions.php), AFTER custom.css so the
   page-scoped look wins. Mirrors product-final.css from the design bundle,
   retargeted to the real msf/* + treetale/* block markup.

   Sections:
     0. Tokens
     1. Shared primitives (section head, links, buttons)
     2. Hero layout + gallery
     3. Info panel (eyebrow, title, rating, badges, price)
     4. Material → colour picker            (appended by product-variants rework)
     5. Picker drawers                      (appended by drawers task)
     6. Sample row / basket                 (appended by samples task)
     7. Mattress upsell
     8. Accordion
     9. Below-fold sections                 (why / z bliska / dims / related /
        editorial / delivery — appended by sections task)
    10. Reviews + FAQ
    11. Responsive
   ===================================================================== */

/* ── 0. Tokens ─────────────────────────────────────────────────────── */
body.single-product {
	--cream:        #FAF8F5;
	--ivory:        #F5F0EB;
	--sand:         #EDE8E1;
	--white:        #FFFFFF;
	--ink:          #1A1A1A;
	--graphite:     #4A4A4A;
	--stone:        #6E6A5F;
	--border:       #E2DDD6;
	--border-light: #EDEBE7;
	--star:         #D4A853;
	--success:      #4A7A5B;

	--tr-tightest:  -0.02em;
	--tr-tight:     -0.01em;
	--tr-editorial: 0.08em;
	--tr-wide:      0.12em;
	--tr-widest:    0.16em;

	--dur-fast:     150ms;
	--dur-base:     200ms;
	--dur-slow:     500ms;
	--ease-brand:   cubic-bezier(0.22, 0.61, 0.36, 1);

	--rule-soft:    1px solid rgba(26, 26, 26, 0.1);
	--rule-ink:     1px solid rgba(26, 26, 26, 0.85);
	/* Match the product-listing (PLP) container: 80px → 48px → 20px. */
	--pdp-pad:      80px;

	background: var(--cream);
}
@media (max-width: 1200px) { body.single-product { --pdp-pad: 48px; } }
@media (max-width: 768px)  { body.single-product { --pdp-pad: 20px; } }

/* Breadcrumb — same look + padding as the PLP (.plp-crumbs). */
body.single-product .pdp-crumbs { padding-left: var(--pdp-pad); padding-right: var(--pdp-pad); padding-bottom: 16px !important; }
body.single-product .pdp-crumbs .wc-block-breadcrumbs,
body.single-product .pdp-crumbs .woocommerce-breadcrumb {
	font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-wide);
	color: var(--stone); font-weight: 400;
}
body.single-product .pdp-crumbs a { color: var(--stone); text-decoration: none; }
body.single-product .pdp-crumbs a:hover { color: var(--ink); }

/* Kill default WP spacing on the PDP main column (mirrors .single-product
   resets in custom.css, scoped here so nested groups stay flush). */
body.single-product main.pdp-main { padding: 0; }
body.single-product .pdp-main > * { margin-block: 0; }

/* ── 1. Shared primitives ──────────────────────────────────────────── */
body.single-product .pdp-section {
	border-top: var(--rule-soft);
	padding: 64px var(--pdp-pad);
}
body.single-product .pdp-section--ivory { background: var(--ivory); }

body.single-product .pdp-sec-head { margin-bottom: 28px; }
body.single-product .pdp-sec-head.is-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
body.single-product .pdp-sec-head .eyebrow {
	display: block; margin: 0 0 10px;
	font-size: 11px; font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-widest); color: var(--stone);
}
body.single-product .pdp-sec-head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 1.75rem); font-weight: 400;
	letter-spacing: var(--tr-tight); line-height: 1.15; color: var(--ink);
	text-transform: none;
}

/* Underlined editorial link (e.g. "Zobacz całą kolekcję →") */
body.single-product .pdp-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-wide); color: var(--ink);
	text-decoration: none; white-space: nowrap;
	border-bottom: 1px solid rgba(26, 26, 26, 0.25); padding-bottom: 3px;
	transition: border-color var(--dur-base);
}
body.single-product .pdp-link:hover { border-bottom-color: var(--ink); }
body.single-product .pdp-link svg { width: 14px; height: 14px; color: var(--stone); }

/* ── 2. Hero layout + gallery ──────────────────────────────────────── */
body.single-product .pdp-hero {
	max-width: none; align-items: flex-start;
	/* full-width with the PLP container padding (override the template inline) */
	padding-left: var(--pdp-pad) !important; padding-right: var(--pdp-pad) !important;
}
/* Two-column hero + sticky info only on desktop (≥1081px). Below that the
   hero stacks (matches the design, which goes single-column at ≤1080px and
   avoids a cramped tablet split). */
@media (min-width: 1081px) {
	body.single-product .pdp-info-col { align-self: flex-start; }
	/* Sticky info panel. Intentionally NO overflow/max-height here: the
	   picker's position:fixed drawers are descendants, and an overflow
	   ancestor would clip them to the panel instead of the viewport.

	   z-index: position:sticky ALWAYS creates a stacking context, so the
	   picker's position:fixed drawers (.tvar-drawer-stage, z:9999) are trapped
	   inside THIS panel's context — they can only paint above the sticky header
	   (effective z:100, set by Ollie's `header:has(>.is-position-sticky)` rule)
	   if .pdp-info itself sits above the header.

	   Previously .pdp-info was pinned at z:101 (> header) so the drawers could
	   cover the navbar — but that also made the panel's own text scroll OVER the
	   navbar (bug). Fix: in the resting state keep .pdp-info BELOW the header
	   (z:1) so the navbar always wins; only WHILE a drawer is open lift the panel
	   above the header (:has(.tvar-drawer-stage.is-open)) so the trapped fixed
	   drawer can still cover the full viewport incl. the navbar. The header is
	   raised to z:102 here (PDP-scoped, !important to beat Ollie's :has rule). */
	body.single-product .pdp-info { position: sticky; top: 88px; z-index: 1; }
	body.single-product .site-header { z-index: 102 !important; }
	body.single-product .pdp-info:has(.tvar-drawer-stage.is-open) { z-index: 10000; }
}

/* Gallery — keep the existing msf/product-gallery markup; only tune the
   grid gap + caption to the design (enhance, not rebuild). */
body.single-product .msf-gallery-desktop [data-gallery-grid],
body.single-product .msf-gallery-desktop [data-gallery-thumbs-row] { gap: 8px !important; }
body.single-product .msf-gallery-desktop [data-gallery-thumbs-row] { margin-top: 8px !important; }
body.single-product .msf-gallery-slot { border-radius: 2px; cursor: zoom-in; }
body.single-product .msf-gallery-slot img,
body.single-product .msf-gallery-slot video {
	transition: transform 600ms var(--ease-brand);
}
body.single-product .product-gallery-image:hover img { transform: scale(1.03); }

/* Gallery lightbox (gallery.js) — fullscreen, above header + drawers. */
body.single-product .msf-lightbox {
	position: fixed; inset: 0; z-index: 10002;
	background: rgba(20, 19, 17, 0.93);
	visibility: hidden; opacity: 0; pointer-events: none;
	transition: opacity var(--dur-base), visibility var(--dur-base);
}
body.single-product .msf-lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
body.single-product .msf-lightbox__stage {
	position: absolute; inset: clamp(16px, 5vh, 56px) clamp(16px, 6vw, 72px);
	display: flex; align-items: center; justify-content: center;
}
body.single-product .msf-lightbox__stage img,
body.single-product .msf-lightbox__stage video {
	max-width: 100%; max-height: 100%; object-fit: contain; cursor: default;
}
body.single-product .msf-lightbox__close,
body.single-product .msf-lightbox__nav {
	position: absolute; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: none; border: 1px solid rgba(250, 248, 245, 0.35);
	border-radius: 50%; color: var(--cream); cursor: pointer;
	transition: border-color var(--dur-base), background var(--dur-base);
}
body.single-product .msf-lightbox__close:hover,
body.single-product .msf-lightbox__nav:hover { border-color: var(--cream); background: rgba(250, 248, 245, 0.08); }
body.single-product .msf-lightbox__close { top: 18px; right: 18px; }
body.single-product .msf-lightbox__nav--prev { left: 14px; top: 50%; transform: translateY(-50%); }
body.single-product .msf-lightbox__nav--next { right: 14px; top: 50%; transform: translateY(-50%); }
body.single-product .msf-lightbox__count {
	position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
	font-size: 12px; letter-spacing: 0.08em; color: rgba(250, 248, 245, 0.8);
}
@media (max-width: 600px) {
	body.single-product .msf-lightbox__stage { inset: 56px 8px; }
	body.single-product .msf-lightbox__nav--prev { left: 6px; }
	body.single-product .msf-lightbox__nav--next { right: 6px; }
}

/* ── 3. Info panel ─────────────────────────────────────────────────── */
/* The panel uses WP's constrained layout (declared in the template) for
   vertical flow + blockGap. We must NOT also make it display:flex — a flex
   item with the constrained layout's margin-inline:auto would shrink to
   content and centre itself (e.g. the eyebrow). Keep it block-flow. */
body.single-product .pdp-info { text-align: left; }
body.single-product .pdp-info > * { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }

/* Eyebrow (product category) */
body.single-product .pdp-eyebrow,
body.single-product .pdp-eyebrow a {
	color: var(--stone) !important; text-decoration: none;
	font-size: 11px; font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-widest);
}
body.single-product .pdp-eyebrow a:hover { color: var(--ink) !important; }

/* Title */
body.single-product .pdp-title {
	color: var(--ink);
	font-weight: 400; letter-spacing: var(--tr-tight); line-height: 1.1;
	text-transform: none;
	font-size: clamp(1.5rem, 2.4vw, 1.75rem) !important;
	margin-bottom: 16px !important;
}

/* Rating stars */
body.single-product .pdp-rating { margin: 0; }
body.single-product .pdp-rating .wc-block-components-product-rating__stars,
body.single-product .pdp-rating .star-rating { color: var(--star); }

/* Badges row — restyle the msf/product-badges output to the hairline row.
   The block emits inline styles; override layout here, neutralise its
   inline margin-bottom. */
body.single-product .msf-badges {
	display: flex !important; flex-wrap: wrap; gap: 8px 28px !important;
	margin: 2px 0 0 !important; padding: 14px 0 !important;
	border-top: var(--rule-soft); border-bottom: var(--rule-soft);
	font-size: 12px;
}
body.single-product .msf-badges > div {
	display: flex; flex-direction: column; gap: 3px;
}
/* group header voice (small caps stone, cf. the upsell legend) over a
   sentence-case ink value — caps reduction applies to values only */
body.single-product .msf-badges > div > span:first-child {
	font-size: 10px !important; letter-spacing: var(--tr-widest) !important;
	text-transform: uppercase !important;
	color: var(--stone) !important; font-weight: 500 !important;
}
body.single-product .msf-badges > div > span:last-child {
	margin-left: 0 !important;
	font-size: 13px !important; letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--ink) !important; font-weight: 500 !important;
}

/* Static price (simple products). Hidden for variable products — the
   picker owns a reactive price row (Phase E "owns the price element"). */
body.single-product .pdp-static-price {
	font-weight: 500; letter-spacing: var(--tr-tightest); color: var(--ink);
}
body.single-product.pdp-has-variants .pdp-static-price { display: none; }

/* WC add-to-cart CTA: custom.css already inks it full-width; nudge to the
   design's taller, wider-tracked button. */
body.single-product .wc-block-add-to-cart-with-options .wp-element-button,
body.single-product .wc-block-add-to-cart-with-options .wc-block-components-product-button__button {
	height: 52px !important; letter-spacing: var(--tr-widest) !important;
	font-weight: 500 !important;
}
/* the stepper wrapper carries the border — the inner input must not
   double it; centre the digits */
body.single-product .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	border: 0 !important; height: 100% !important; text-align: center;
}

/* The D₂ picker replaces WC's native variation UI (we visually suppress it).
   Collapse that suppressed area + WC's default 32px internal margins so the
   "Dodaj do koszyka" button sits directly under the price — no empty gap. */
body.single-product .wp-block-add-to-cart-with-options [class*="variation-selector"],
body.single-product .wp-block-add-to-cart-with-options .single_variation_wrap {
	height: 0 !important; min-height: 0 !important; overflow: hidden !important;
	margin: 0 !important; padding: 0 !important;
}
/* qty + Add-to-cart row: drop WC's 32px top margin */
body.single-product .wp-block-add-to-cart-with-options form .wp-block-group.is-layout-flex { margin-top: 0 !important; }
/* the add-to-cart block itself sits tight under the picker's price row */
body.single-product .pdp-info > .wc-block-components-notices,
body.single-product .pdp-info > .wp-block-add-to-cart-with-options { margin-top: 6px !important; }

/* ── 7. Mattress upsell (treetale/upsell-bundle) — quiet rows, no divider
   (the sample button above already closes the buy box visually). ─ */
body.single-product .treetale-upsell-bundle {
	border: 0 !important;
	margin: 4px 0 0 !important; padding: 14px 0 4px !important;
}
body.single-product .treetale-upsell-bundle__legend {
	float: none; width: auto; padding: 0; margin: 0 0 10px;
	font-size: 10px; font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-widest); color: var(--stone);
	display: flex; align-items: center; gap: 10px;
}
body.single-product .treetale-upsell-bundle__discount-badge {
	color: var(--success); font-weight: 500; letter-spacing: var(--tr-wide);
}
body.single-product .treetale-upsell-bundle__list {
	list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
body.single-product .treetale-upsell-bundle__row {
	display: flex; align-items: center; gap: 14px;
}
body.single-product .treetale-upsell-bundle__thumb {
	width: 52px; height: 52px; flex: 0 0 auto; object-fit: cover;
	border-radius: 3px; background: var(--ivory);
}
/* products without a photo yet: keep the miniature slot, quiet icon */
body.single-product .treetale-upsell-bundle__thumb--ph {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--stone); border: 1px solid rgba(26, 26, 26, 0.08);
}
body.single-product .treetale-upsell-bundle__copy {
	flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
body.single-product .treetale-upsell-bundle__name {
	font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink);
}
body.single-product .treetale-upsell-bundle__sublabel,
body.single-product .treetale-upsell-bundle__compat {
	font-size: 11px; letter-spacing: 0.03em; color: var(--stone);
}
body.single-product .treetale-upsell-bundle__aside {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
body.single-product .treetale-upsell-bundle__price {
	font-size: 13px; font-weight: 500; color: var(--ink);
	letter-spacing: var(--tr-tight); white-space: nowrap;
}
body.single-product .treetale-upsell-bundle__add {
	background: none; border: 0; padding: 0 0 1px; cursor: pointer; font-family: inherit;
	font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide);
	color: var(--ink); font-weight: 500;
	border-bottom: 1px solid rgba(26, 26, 26, 0.3);
	transition: border-color var(--dur-base), color var(--dur-base);
}
body.single-product .treetale-upsell-bundle__add:hover { border-bottom-color: var(--ink); }
body.single-product .treetale-upsell-bundle__add[disabled] { opacity: 0.4; cursor: default; }

/* ════════════════════════════════════════════════════════════════════
   4. UNIFIED-STEPS CONFIGURATOR  (treetale/product-variants)
   Numbered step heads (1. Rozmiar / 2. Tkanina / 3. Kolor) with COMPACT
   controls (client feedback, Westwing/Zara reference): only size keeps a
   thin pill border; fabric = small bare swatches, colour = bare dots.
   Deliberately sentence-case — uppercase stays on tiny eyebrows only.
   ════════════════════════════════════════════════════════════════════ */
body.single-product .treetale-product-variants { gap: 14px; }

body.single-product .tvar-step { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
body.single-product .tvar-step:last-of-type { margin-bottom: 0; }

/* step head: ① number · label ……… selected value */
body.single-product .tvar-step__head {
	display: flex; align-items: center; gap: 9px;
	width: 100%; padding: 0 0 8px; margin: 0; float: none;
}
body.single-product .tvar-step__num {
	flex: none; width: 18px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(110, 106, 95, 0.55); border-radius: 50%;
	font-size: 10px; font-weight: 500; color: var(--stone); line-height: 1;
}
/* group header — same voice as the "Dobierz w komplecie" legend */
body.single-product .tvar-step__lbl {
	font-size: 10px; font-weight: 500; letter-spacing: var(--tr-widest);
	color: var(--stone); text-transform: uppercase;
}
body.single-product .tvar-step__val {
	margin-left: auto; min-width: 0;
	font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink);
	text-align: right; text-transform: none;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* tile lists */
body.single-product .tvar-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* one row on desktop (wraps by itself on narrow screens) — the sublabel
   moves into the step-head caption to keep the tiles single-line */
body.single-product .tvar-tiles--size { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
body.single-product .tvar-tiles--size .tvar-tile { align-items: center; justify-content: center; text-align: center; padding: 9px 6px; }
body.single-product .tvar-tiles--size .tvar-tile__l1 { white-space: nowrap; font-size: 11.5px; }
body.single-product .tvar-tiles--size .tvar-tile__l2 { display: none; }
body.single-product .tvar-tiles--material { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 8px; }
body.single-product .tvar-tiles--color { display: flex; flex-wrap: wrap; gap: 9px; }

/* SIZE — the only bordered control: compact two-line pill */
body.single-product .tvar-tile {
	display: flex; flex-direction: column; gap: 1px; height: 100%; box-sizing: border-box;
	padding: 7px 10px; background: none;
	border: 1px solid rgba(26, 26, 26, 0.14); border-radius: 2px;
	cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
body.single-product .tvar-tile:hover { border-color: rgba(26, 26, 26, 0.5); }
body.single-product .tvar-tile.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.single-product .tvar-tile.is-disabled { opacity: 0.35; }
body.single-product .tvar-tile.is-out-of-stock .tvar-tile__l1 { text-decoration: line-through; color: var(--stone); }
body.single-product .tvar-tile__l1 {
	font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3;
	color: var(--ink); text-transform: none;
}
body.single-product .tvar-tile__l2 {
	font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.3;
	color: var(--stone); text-transform: none;
}

/* FABRIC — small bare swatch, name under, ink ring when selected */
body.single-product .tvar-swatch-tile {
	display: flex; flex-direction: column; gap: 6px;
	padding: 0; background: none; border: 0; cursor: pointer;
}
body.single-product .tvar-swatch {
	width: 100%; height: 38px; border-radius: 2px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	background-color: var(--sand); background-size: cover; background-position: center;
	transition: box-shadow var(--dur-fast);
}
body.single-product .tvar-swatch-tile:hover .tvar-swatch { box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.4); }
body.single-product .tvar-swatch-tile.is-selected .tvar-swatch { box-shadow: 0 0 0 1.5px var(--ink); border-color: var(--ink); }
body.single-product .tvar-swatch-tile.is-disabled { opacity: 0.35; }
body.single-product .tvar-swatch-tile__name {
	font-size: 10.5px; line-height: 1.3; letter-spacing: 0.02em;
	color: var(--graphite); font-weight: 400; text-transform: none;
}
body.single-product .tvar-swatch-tile.is-selected .tvar-swatch-tile__name { color: var(--ink); font-weight: 500; }

/* COLOUR — bare dots, outline ring when selected (name in the step head) */
body.single-product .tvar-dot-tile {
	display: inline-flex; padding: 2px; background: none; border: 0; cursor: pointer;
}
body.single-product .treetale-product-variants__dot {
	position: relative; width: 26px; height: 26px; border-radius: 50%;
	background: var(--treetale-dot-color, #ccc);
	border: 1px solid rgba(26, 26, 26, 0.12);
	outline: 1px solid transparent; outline-offset: 3px;
	transition: outline-color var(--dur-fast);
}
body.single-product .tvar-dot-tile:hover .treetale-product-variants__dot { outline-color: var(--stone); }
body.single-product .tvar-dot-tile.is-selected .treetale-product-variants__dot { outline-color: var(--ink); }
body.single-product .tvar-dot-tile.is-disabled { opacity: 0.35; }
body.single-product .tvar-dot-tile.is-out-of-stock .treetale-product-variants__dot::after {
	content: ""; position: absolute; left: -3px; right: -3px; top: 50%;
	height: 1.5px; background: rgba(26, 26, 26, 0.55); transform: rotate(-45deg);
}

/* step foot: link affordances + counts */
body.single-product .tvar-step__foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: 8px;
}
body.single-product .tvar-step__count { font-size: 11px; letter-spacing: 0.02em; color: var(--stone); text-transform: none; }

/* CSS texture fallbacks (when a material term has no swatch image yet).
   Keyed by the real pa_material slugs from the client's fabric list. */
body.single-product .tvar-swatch[data-mat="baloo"] {
	background-image:
		radial-gradient(circle at 25% 25%, rgba(26,26,26,0.18) 1.4px, transparent 2px),
		radial-gradient(circle at 75% 65%, rgba(26,26,26,0.14) 1.6px, transparent 2.2px),
		radial-gradient(circle at 45% 80%, rgba(26,26,26,0.16) 1.2px, transparent 2px);
	background-size: 7px 7px, 6px 6px, 8px 8px; background-color: #E8DFD0;
}
body.single-product .tvar-swatch[data-mat="bella"] {
	background-image:
		repeating-linear-gradient(90deg, rgba(26,26,26,0.10) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(0deg, rgba(26,26,26,0.08) 0 1px, transparent 1px 5px);
	background-color: #C4B5A0;
}
body.single-product .tvar-swatch[data-mat="velutto"] {
	background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18));
	background-color: #8A7B68;
}
body.single-product .tvar-swatch[data-mat="glam"] {
	background-image: repeating-linear-gradient(90deg, rgba(26,26,26,0.18) 0 1.5px, rgba(255,255,255,0.06) 1.5px 4px);
	background-color: #C8B697;
}

/* "Więcej o tkaninie" / "Zobacz wszystkie" links — quiet, sentence case */
body.single-product .tvar-matinfo,
body.single-product .tvar-all {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	padding: 2px 0 3px; background: none; border: 0;
	border-bottom: 1px solid rgba(26, 26, 26, 0.3);
	font-family: inherit; font-size: 12px; text-transform: none;
	letter-spacing: 0.01em; color: var(--graphite); font-weight: 400; cursor: pointer;
	transition: color var(--dur-base), border-color var(--dur-base);
}
body.single-product .tvar-matinfo:hover,
body.single-product .tvar-all:hover { color: var(--ink); border-bottom-color: var(--ink); }
body.single-product .tvar-matinfo b { color: var(--ink); font-weight: 600; }
body.single-product .tvar-matinfo svg,
body.single-product .tvar-all svg { color: var(--stone); }

/* ── 6. Free-sample trigger (appended below the add-to-cart button) ── */
body.single-product .tvar-sample {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
	margin-top: 10px; padding: 12px 14px; background: none; border: 1px solid rgba(26, 26, 26, 0.16);
	border-radius: 2px;
	font-family: inherit; cursor: pointer; transition: background var(--dur-base), border-color var(--dur-base);
}
body.single-product .tvar-sample:hover { background: rgba(26, 26, 26, 0.03); border-color: rgba(26, 26, 26, 0.4); }
body.single-product .tvar-sample__ic {
	width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	background: var(--ivory); color: var(--ink);
}
body.single-product .tvar-sample__copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
body.single-product .tvar-sample__ttl { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--ink); }
body.single-product .tvar-sample__sub { font-size: 11px; letter-spacing: 0.02em; color: var(--stone); }
body.single-product .tvar-sample__arrow { color: var(--stone); display: flex; }
/* sample link inside the accordion "Materiały" section */
body.single-product .msf-accordion [data-treetale-sample-open] {
	background: none; border: 0; padding: 0 0 2px; cursor: pointer; font-family: inherit;
	font-size: 13px; color: var(--ink); font-weight: 400;
	border-bottom: 1px solid rgba(26, 26, 26, 0.3);
}
body.single-product .msf-accordion [data-treetale-sample-open]:hover { border-bottom-color: var(--ink); }

/* ── Reactive price row ── */
body.single-product .tvar-price {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	border-top: var(--rule-soft); padding-top: 16px; margin-top: 2px;
}
body.single-product .tvar-price__amount { font-size: 28px; font-weight: 500; letter-spacing: var(--tr-tightest); color: var(--ink); }
body.single-product .tvar-price__hint { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone); }

/* ── Twardość (firmness) link-row — sibling firmness/height products as a chip
   row near the configurator. Active = filled ink (current product); the rest
   are outline links to the sibling PDPs (firmness is NOT a variant axis). */
body.single-product .pdp-firmness { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 2px; }
body.single-product .pdp-firmness__label { flex: 0 0 auto; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-widest); color: var(--stone); }
body.single-product .pdp-firmness__opts { display: flex; flex-wrap: wrap; gap: 8px; }
body.single-product .pdp-firmness__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 7px 13px; border: 1px solid rgba(26, 26, 26, 0.2); border-radius: 2px; background: none; color: var(--graphite); font-family: inherit; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-wide); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
body.single-product a.pdp-firmness__opt:hover { border-color: var(--ink); color: var(--ink); }
body.single-product .pdp-firmness__opt.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); cursor: default; }

/* ════════════════════════════════════════════════════════════════════
   5. PICKER DRAWERS — all-materials + per-material info
   ════════════════════════════════════════════════════════════════════ */
body.single-product .tvar-drawer-stage {
	position: fixed; inset: 0; z-index: 9999;
	visibility: hidden; opacity: 0; pointer-events: none;
	transition: opacity var(--dur-base), visibility var(--dur-base);
}
body.single-product .tvar-drawer-stage.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
body.single-product .tvar-scrim { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.32); }
body.single-product .tvar-drawer {
	position: absolute; right: 0; top: 0; bottom: 0; width: min(540px, 92vw);
	display: flex; flex-direction: column; background: var(--cream);
	border-left: 1px solid rgba(26, 26, 26, 0.08); box-shadow: 0 0 60px rgba(26, 26, 26, 0.15);
	transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-brand);
}
body.single-product .tvar-drawer--matinfo { width: min(480px, 92vw); }
body.single-product .tvar-drawer-stage.is-open .tvar-drawer { transform: translateX(0); }

body.single-product .tvar-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 24px 28px; border-bottom: var(--rule-soft); flex: 0 0 auto;
}
body.single-product .tvar-drawer__head .eb { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-widest); color: var(--stone); font-weight: 500; }
body.single-product .tvar-drawer__head .ttl { margin: 4px 0 0; font-size: 22px; font-weight: 400; letter-spacing: -0.005em; color: var(--ink); }
body.single-product .tvar-drawer__close {
	width: 36px; height: 36px; flex: 0 0 auto; background: none; border: 1px solid rgba(26, 26, 26, 0.15);
	display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
body.single-product .tvar-drawer__meta {
	display: flex; align-items: center; gap: 18px; padding: 12px 28px; background: var(--ivory);
	border-bottom: 1px solid rgba(26, 26, 26, 0.06);
	font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--graphite);
}
body.single-product .tvar-drawer__meta b { color: var(--ink); font-weight: 500; }
body.single-product .tvar-drawer__body { flex: 1; min-height: 0; overflow-y: auto; }
body.single-product .tvar-drawer__foot {
	flex: 0 0 auto; display: flex; align-items: center; gap: 10px; justify-content: space-between;
	padding: 18px 28px; border-top: var(--rule-soft); background: var(--cream);
}
body.single-product .tvar-drawer__foot .left { display: flex; flex-direction: column; gap: 2px; }
body.single-product .tvar-drawer__foot .left .k { font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-widest); color: var(--stone); }
body.single-product .tvar-drawer__foot .left .v { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0.04em; }
body.single-product .tvar-drawer__cta {
	display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
	height: 44px; padding: 0 22px; background: var(--ink); color: var(--cream); border: 0;
	font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-wide); font-weight: 500; cursor: pointer;
	transition: background var(--dur-base);
}
body.single-product .tvar-drawer__cta:hover { background: var(--graphite); }
body.single-product .tvar-drawer__cta[disabled] { opacity: 0.4; cursor: default; }
body.single-product .tvar-drawer__cta--ghost { margin-left: 0; background: none; color: var(--ink); border: 1px solid rgba(26, 26, 26, 0.2); }
body.single-product .tvar-drawer__cta--ghost:hover { background: var(--ink); color: var(--cream); }

/* samples foot — count + CTA row with a quiet through-the-cart note */
body.single-product .tvar-drawer__foot--samples { flex-direction: column; align-items: stretch; gap: 10px; }
body.single-product .tvar-drawer__foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.single-product .tvar-drawer__foot-note { margin: 0; font-size: 11px; letter-spacing: 0.02em; color: var(--stone); }

/* all-materials blocks */
body.single-product .tvar-matblock { padding: 22px 28px 24px; border-bottom: 1px solid rgba(26, 26, 26, 0.08); }
body.single-product .tvar-matblock__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
body.single-product .tvar-matblock__head .nm { font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0.01em; color: var(--ink); }
body.single-product .tvar-matblock__head .feel { font-size: 11px; color: var(--stone); letter-spacing: 0.04em; }
body.single-product .tvar-matblock__props { display: flex; gap: 14px; margin-bottom: 14px; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-editorial); color: var(--stone); }
body.single-product .tvar-matblock__props b { color: var(--ink); font-weight: 500; }
body.single-product .tvar-swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
body.single-product .tvar-sw-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px; background: none; border: 0; cursor: pointer; font-family: inherit; }
body.single-product .tvar-sw-card .chip { width: 36px; height: 36px; border-radius: 50%; background: var(--sand); border: 1px solid rgba(26, 26, 26, 0.08); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color var(--dur-base); }
body.single-product .tvar-sw-card:hover .chip { outline-color: var(--stone); }
body.single-product .tvar-sw-card.in-basket .chip { outline-color: var(--ink); }
body.single-product .tvar-sw-card .nm { font-size: 10.5px; text-transform: none; letter-spacing: 0.02em; color: var(--graphite); text-align: center; line-height: 1.3; }
body.single-product .tvar-sw-card .check {
	position: absolute; top: -2px; right: 8px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--ink); color: var(--cream); display: inline-flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity var(--dur-fast);
}
body.single-product .tvar-sw-card.in-basket .check { opacity: 1; }

/* material-info drawer */
body.single-product .tvar-mi-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-bottom: var(--rule-soft); background: var(--ivory); flex: 0 0 auto; }
body.single-product .tvar-mi-tab {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 14px 6px; background: none; border: 0; border-right: 1px solid rgba(26, 26, 26, 0.06); cursor: pointer;
	font-family: inherit; font-size: 11px; text-transform: none; letter-spacing: 0.02em; color: var(--stone); font-weight: 400;
}
body.single-product .tvar-mi-tab:last-child { border-right: 0; }
body.single-product .tvar-mi-tab .tvar-swatch { width: 26px; height: 26px; border-radius: 50%; }
body.single-product .tvar-mi-tab.is-on { color: var(--ink); font-weight: 500; background: var(--cream); }
body.single-product .tvar-mi-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
body.single-product .tvar-mi-panel { padding: 24px 28px 28px; }
body.single-product .tvar-mi-hero { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(26, 26, 26, 0.08); margin-bottom: 20px; }
body.single-product .tvar-mi-tex { width: 84px; height: 84px; flex: 0 0 auto; border-radius: 4px; }
body.single-product .tvar-mi-hero .feel { font-size: 18px; font-weight: 400; letter-spacing: -0.005em; color: var(--ink); }
body.single-product .tvar-mi-long { font-size: 13px; line-height: 1.7; color: var(--graphite); font-weight: 400; margin: 0 0 22px; }
body.single-product .tvar-mi-specs { display: flex; flex-direction: column; border-top: 1px solid rgba(26, 26, 26, 0.08); margin-bottom: 22px; }
body.single-product .tvar-mi-specs .row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.08); }
body.single-product .tvar-mi-specs .k { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone); }
body.single-product .tvar-mi-specs .v { font-size: 13px; color: var(--ink); font-weight: 400; text-align: right; }
body.single-product .tvar-mi-pc { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule-soft); }
body.single-product .tvar-mi-pc .col { padding: 16px 18px; }
body.single-product .tvar-mi-pc .col.plus { border-right: var(--rule-soft); }
body.single-product .tvar-mi-pc .h { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide); font-weight: 500; color: var(--ink); margin-bottom: 10px; }
body.single-product .tvar-mi-pc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
body.single-product .tvar-mi-pc li { position: relative; padding-left: 16px; font-size: 12px; line-height: 1.4; color: var(--graphite); font-weight: 400; }
body.single-product .tvar-mi-pc .plus li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
body.single-product .tvar-mi-pc .minus li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1.5px; background: var(--stone); }

/* drawers slide up from the bottom on mobile */
@media (max-width: 600px) {
	body.single-product .tvar-drawer,
	body.single-product .tvar-drawer--matinfo {
		width: 100%; right: 0; left: 0; top: auto; max-height: 90vh; border-left: 0;
		transform: translateY(100%); border-radius: 16px 16px 0 0;
	}
	body.single-product .tvar-drawer-stage.is-open .tvar-drawer { transform: translateY(0); }
	body.single-product .tvar-swatch-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── 8. Accordion (msf/product-accordion) — restyle typography/spacing ─ */
body.single-product .msf-accordion { margin-top: 12px; }
body.single-product .msf-accordion-trigger {
	padding: 18px 0 !important;
	font-size: 13px !important; letter-spacing: 0.01em !important;
	text-transform: none !important;
	font-weight: 500 !important; color: var(--ink) !important;
}
body.single-product .msf-accordion-trigger:hover { color: var(--graphite) !important; }
body.single-product .msf-accordion-trigger > span:last-child {
	font-size: 18px !important; font-weight: 300 !important; color: var(--ink) !important;
}
body.single-product .accordion-content > div { padding-bottom: 22px !important; }
body.single-product .accordion-content {
	font-size: 13px; color: var(--graphite); line-height: 1.75; font-weight: 400;
}

/* "Dostawa i montaż" inside the accordion (richDelivery — moved here from the
   standalone delivery section, client feedback). */
body.single-product .msf-acc-del { margin-bottom: 18px; }
body.single-product .msf-acc-del__h {
	margin: 0 0 8px; font-size: 11px; font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone);
}
body.single-product .msf-acc-del__pkgs,
body.single-product .msf-acc-del__opts { list-style: none; margin: 0 0 16px; padding: 0; }
body.single-product .msf-acc-del__pkgs li {
	display: flex; align-items: baseline; gap: 10px;
	padding: 8px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.07);
}
body.single-product .msf-acc-del__pkgs .nm { flex: 1; color: var(--ink); font-weight: 400; }
body.single-product .msf-acc-del__pkgs .dims { font-size: 12px; color: var(--stone); letter-spacing: 0.04em; }
body.single-product .msf-acc-del__pkgs .kg { font-size: 12px; color: var(--ink); font-weight: 500; white-space: nowrap; }
body.single-product .msf-acc-del__opts li {
	display: flex; flex-direction: column; gap: 3px;
	padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgba(26, 26, 26, 0.14);
}
body.single-product .msf-acc-del__opts li.on { border-color: var(--ink); }
body.single-product .msf-acc-del__opts .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.single-product .msf-acc-del__opts b { color: var(--ink); font-weight: 500; }
body.single-product .msf-acc-del__opts .pr { color: var(--ink); font-weight: 500; white-space: nowrap; }
body.single-product .msf-acc-del__opts .s { font-size: 12px; line-height: 1.5; }
body.single-product .msf-acc-del__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-top: var(--rule-soft); }
body.single-product .msf-acc-del__meta > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.06); }
body.single-product .msf-acc-del__meta .k { font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone); }
body.single-product .msf-acc-del__meta .v { font-size: 13px; color: var(--ink); font-weight: 500; }

/* ════════════════════════════════════════════════════════════════════
   9. BELOW-FOLD SECTIONS
   ════════════════════════════════════════════════════════════════════ */

/* ── 9a. "Dlaczego" icon strip (msf/product-why) ──
   auto-fit so the items always stretch across the full row, also with
   2-3 items (client feedback #9: "Sekcja DLACZEGO rozciągnąć"). */
body.single-product .pdp-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px; }
body.single-product .pdp-why-item { display: flex; flex-direction: column; gap: 10px; }
body.single-product .pdp-why-item .ic {
	width: 48px; height: 48px; margin-bottom: 6px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(26, 26, 26, 0.18); color: var(--ink);
}
body.single-product .pdp-why-item .t { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
body.single-product .pdp-why-item .s { font-size: 13px; line-height: 1.65; color: var(--graphite); font-weight: 400; }

/* ── 9b. "Z bliska" magazine grid (msf/product-features) ── */
body.single-product .pdp-galgrid-rows { display: flex; flex-direction: column; gap: 48px; }
body.single-product .pdp-galrow { display: grid; grid-template-columns: 1.85fr 1fr; gap: 40px; align-items: start; }
body.single-product .pdp-galrow.rev { grid-template-columns: 1fr 1.85fr; }
body.single-product .pdp-galtile { display: flex; flex-direction: column; }
body.single-product .pdp-galtile-img { overflow: hidden; background: var(--ivory); border-radius: 2px; }
/* Desktop: both images in a row share ONE height (widths still differ for the
   magazine feel) so the tile headings start on the same line (feedback #10).
   Below 1081px the rows stack and the 3/2 responsive override applies. */
@media (min-width: 1081px) {
	body.single-product .pdp-galrow .pdp-galtile .pdp-galtile-img { height: clamp(340px, 36vw, 540px); aspect-ratio: auto; }
}
body.single-product .pdp-galtile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-brand); }
body.single-product .pdp-galtile:hover .pdp-galtile-img img { transform: scale(1.04); }
body.single-product .pdp-galtile-copy { display: flex; flex-direction: column; padding: 20px 0 0; }
body.single-product .pdp-galtile-copy .ix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--stone); margin-bottom: 12px; }
body.single-product .pdp-galtile-copy .t { font-size: 19px; font-weight: 300; letter-spacing: var(--tr-tight); line-height: 1.25; color: var(--ink); margin-bottom: 10px; text-wrap: balance; }
body.single-product .pdp-galtile-copy .s { font-size: 13px; line-height: 1.7; color: var(--graphite); font-weight: 400; max-width: 440px; }

/* ── 9c. "Wymiary" (msf/product-dimensions) ──
   Editorial list (client feedback): no white card — label ↔ value rows
   with ink hairlines (the accordion's divider voice), photo 3:2 beside,
   list vertically centred. Keeps the section short and breathable. */
body.single-product .pdp-dims-grid { display: grid; grid-template-columns: 58fr 42fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
body.single-product .pdp-dims-photo { position: relative; overflow: hidden; background: var(--cream); aspect-ratio: 3/2; }
body.single-product .pdp-dims-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.single-product .pdp-dims-photo .tag {
	position: absolute; left: 14px; bottom: 14px; background: rgba(244, 239, 231, 0.92); color: var(--ink);
	font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide); padding: 6px 10px;
}
body.single-product .pdp-dims-aside { min-width: 0; }
body.single-product .pdp-dims-aside .pdp-sec-head { margin-bottom: 22px; }
body.single-product .pdp-dims-list { margin: 0; border-top: 1px solid rgba(26, 26, 26, 0.8); }
body.single-product .pdp-dims-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
	padding: 15px 2px; border-bottom: 1px solid rgba(26, 26, 26, 0.8);
	transition: border-color var(--dur-base);
}
body.single-product .pdp-dims-row:hover { border-bottom-color: var(--ink); }
/* magazine row: mono running index (cf. "Z bliska") + small-caps label … big light value */
body.single-product .pdp-dims-row dt { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
body.single-product .pdp-dims-row dt .ix {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px; letter-spacing: 0.18em; color: var(--stone);
	transition: color var(--dur-base);
}
body.single-product .pdp-dims-row:hover dt .ix { color: var(--ink); }
body.single-product .pdp-dims-row dt .lbl {
	font-size: 10.5px; font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-wide); color: var(--stone);
	transition: color var(--dur-base);
}
body.single-product .pdp-dims-row:hover dt .lbl { color: var(--ink); }
body.single-product .pdp-dims-row dd {
	margin: 0; font-size: clamp(16px, 1.4vw, 18px); font-weight: 400;
	letter-spacing: var(--tr-tight); color: var(--ink); text-align: right;
	white-space: nowrap; transition: transform var(--dur-base);
}
body.single-product .pdp-dims-row:hover dd { transform: translateX(-3px); }

/* ── 9c-bis. Pokrowiec (msf/product-cover) — dedicated cover section:
   eyebrow + heading, intro, a feature accordion, and a photo beside. The
   feature rows reuse .msf-accordion-trigger + .accordion-content (accordion.js +
   custom.css max-height), so no new JS — only section chrome here. */
body.single-product .pdp-cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: start; }
body.single-product .pdp-cover-grid.is-solo { grid-template-columns: 1fr; max-width: 760px; }
body.single-product .pdp-cover-photo { overflow: hidden; background: var(--ivory); border-radius: 2px; aspect-ratio: 4/5; }
body.single-product .pdp-cover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.single-product .pdp-cover-intro { margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: var(--graphite); font-weight: 400; max-width: 52ch; }
body.single-product .pdp-cover-feat { border-top: 1px solid rgba(26, 26, 26, 0.8); }
body.single-product .pdp-cover-item { border-bottom: 1px solid rgba(26, 26, 26, 0.8); }
body.single-product .pdp-cover-feat .msf-accordion-trigger { display: flex !important; align-items: center; gap: 14px; width: 100%; padding: 16px 2px !important; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0.01em !important; color: var(--ink) !important; transition: color var(--dur-base); }
body.single-product .pdp-cover-feat .msf-accordion-trigger:hover { color: var(--graphite) !important; }
body.single-product .pdp-cover-ic { flex: 0 0 auto; color: var(--ink); }
body.single-product .pdp-cover-feat .msf-accordion-trigger > span:last-child { margin-left: auto; }
body.single-product .pdp-cover-feat .accordion-content > div { padding: 0 0 18px 38px !important; font-size: 13px; line-height: 1.7; color: var(--graphite); font-weight: 400; }

/* ── 9d. "Dobierz do kompletu" related (msf/cross-sell) ── */
body.single-product .pdp-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
body.single-product .pdp-pc { display: flex; flex-direction: column; text-decoration: none; }
body.single-product .pdp-pc-img { aspect-ratio: 4/5; background: var(--ivory); overflow: hidden; margin-bottom: 14px; }
body.single-product .pdp-pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-brand); }
body.single-product .pdp-pc:hover .pdp-pc-img img { transform: scale(1.03); }
body.single-product .pdp-pc-name { font-size: 14px; font-weight: 500; letter-spacing: 0.03em; color: var(--ink); margin-bottom: 4px; }
body.single-product .pdp-pc-meta { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-editorial); color: var(--stone); margin-bottom: 8px; }
body.single-product .pdp-pc-price { font-size: 15px; font-weight: 400; color: var(--ink); }
body.single-product .pdp-pc-price ins { text-decoration: none; }
body.single-product .pdp-pc-price del { color: var(--stone); margin-right: 6px; }

/* ── 9e. Editorial (msf/product-editorial) — constrained like other sections ── */
body.single-product .pdp-ed-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
body.single-product .pdp-ed-img { aspect-ratio: 5/4; overflow: hidden; background: var(--ivory); border-radius: 2px; }
body.single-product .pdp-ed-img img { width: 100%; height: 100%; object-fit: cover; }

/* arrangement slider (client feedback #12 — bed in several interiors) */
body.single-product .pdp-ed-slider {
	position: relative; aspect-ratio: 5/4; overflow: hidden;
	background: var(--ivory); border-radius: 2px;
}
body.single-product .pdp-ed-slider__track {
	display: flex; height: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
body.single-product .pdp-ed-slide { flex: 0 0 100%; min-width: 100%; height: 100%; scroll-snap-align: start; }
body.single-product .pdp-ed-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.single-product .pdp-ed-slider__nav {
	position: absolute; bottom: 14px; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0;
	background: rgba(250, 248, 245, 0.92); border: 0; color: var(--ink); cursor: pointer;
	transition: background var(--dur-base);
}
body.single-product .pdp-ed-slider__nav:hover { background: var(--cream); }
body.single-product .pdp-ed-slider__nav--prev { right: 55px; }
body.single-product .pdp-ed-slider__nav--next { right: 14px; }
body.single-product .pdp-ed-slider__count {
	position: absolute; left: 14px; bottom: 14px; z-index: 1;
	background: rgba(250, 248, 245, 0.92); padding: 7px 10px;
	font-size: 11px; letter-spacing: 0.08em; color: var(--ink);
}
body.single-product .pdp-ed-body { display: flex; flex-direction: column; gap: 16px; align-self: center; }
body.single-product .pdp-ed-body .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-widest); color: var(--stone); font-weight: 500; }
body.single-product .pdp-ed-body h2 { margin: 0; font-size: clamp(1.625rem, 2.6vw, 1.875rem); font-weight: 400; letter-spacing: var(--tr-tight); color: var(--ink); text-transform: none; }
body.single-product .pdp-ed-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.8; color: var(--graphite); font-weight: 400; max-width: 460px; }
body.single-product .pdp-ed-links { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ── 9f. Delivery (msf/product-delivery) ── */
body.single-product .pdp-del-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
body.single-product .pdp-del-col { background: var(--white); border: 1px solid rgba(26, 26, 26, 0.12); padding: 24px 26px 26px; display: flex; flex-direction: column; }
body.single-product .pdp-del-colhead { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: var(--rule-soft); }
body.single-product .pdp-del-colhead .k { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--ink); font-weight: 500; }
body.single-product .pdp-del-colhead .v { font-size: 12px; color: var(--stone); letter-spacing: 0.04em; }
body.single-product .pdp-packages { display: flex; flex-direction: column; }
body.single-product .pdp-pkg { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(26, 26, 26, 0.07); }
body.single-product .pdp-pkg:first-child { padding-top: 0; }
body.single-product .pdp-pkg-ic { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(26, 26, 26, 0.16); color: var(--ink); }
body.single-product .pdp-pkg-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
body.single-product .pdp-pkg-body .nm { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0.02em; }
body.single-product .pdp-pkg-body .dims { font-size: 12px; color: var(--stone); letter-spacing: 0.06em; }
body.single-product .pdp-pkg-kg { font-size: 13px; color: var(--ink); font-weight: 500; }
body.single-product .pdp-ship-opts { display: flex; flex-direction: column; gap: 10px; }
body.single-product .pdp-ship { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(26, 26, 26, 0.14); }
body.single-product .pdp-ship.on { border-color: var(--ink); }
body.single-product .pdp-ship .radio { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px; border: 1px solid rgba(26, 26, 26, 0.35); position: relative; }
body.single-product .pdp-ship.on .radio { border-color: var(--ink); }
body.single-product .pdp-ship.on .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
body.single-product .pdp-ship .body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
body.single-product .pdp-ship .row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body.single-product .pdp-ship .nm { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
body.single-product .pdp-ship .pr { font-size: 13px; color: var(--ink); font-weight: 500; }
body.single-product .pdp-ship .s { font-size: 12px; color: var(--graphite); font-weight: 400; line-height: 1.5; }
body.single-product .pdp-del-meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: var(--rule-soft); }
body.single-product .pdp-del-meta > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; }
body.single-product .pdp-del-meta > div:nth-child(odd) { padding-right: 16px; }
body.single-product .pdp-del-meta > div:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(26, 26, 26, 0.06); }
body.single-product .pdp-del-meta .k { font-size: 9px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone); }
body.single-product .pdp-del-meta .v { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0.02em; }

/* below-fold responsive */
@media (max-width: 1080px) {
	body.single-product .pdp-why-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	body.single-product .pdp-pgrid { grid-template-columns: 1fr 1fr; gap: 20px; }
	body.single-product .pdp-galrow,
	body.single-product .pdp-galrow.rev { grid-template-columns: 1fr; gap: 28px; }
	body.single-product .pdp-galrow .pdp-galtile .pdp-galtile-img,
	body.single-product .pdp-galrow.rev .pdp-galtile .pdp-galtile-img { aspect-ratio: 3/2; }
	body.single-product .pdp-dims-grid { grid-template-columns: 1fr; gap: 24px; }
	body.single-product .pdp-dims-photo { aspect-ratio: 3/2; order: 2; }
	body.single-product .pdp-dims-aside { order: 1; }
	body.single-product .pdp-ed-grid { grid-template-columns: 1fr; gap: 28px; }
	body.single-product .pdp-cover-grid { grid-template-columns: 1fr; gap: 28px; }
	body.single-product .pdp-cover-photo { aspect-ratio: 3/2; }
	body.single-product .pdp-del-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
	body.single-product .pdp-why-grid { grid-template-columns: 1fr; }
	body.single-product .pdp-pgrid { grid-template-columns: 1fr 1fr; }

	/* upsell rows ("Dobierz w komplecie"): photo + copy on top, price +
	   Dodaj in their own line beneath, indented to the copy's left edge —
	   the aside no longer squeezes the thumbnail */
	body.single-product .treetale-upsell-bundle__row { flex-wrap: wrap; }
	body.single-product .treetale-upsell-bundle__aside {
		/* basis + margin must sum to 100% — a plain 100% basis pushed the
		   line 66px past the container (horizontal scroll) */
		flex: 0 0 calc(100% - 66px); margin-left: 66px; /* 52px thumb + 14px gap */
		flex-direction: row; align-items: baseline; justify-content: space-between;
		min-width: 0;
	}

	/* dims rows: long values get their own line under the label */
	body.single-product .pdp-dims-row { flex-direction: column; align-items: flex-start; gap: 7px; }
	body.single-product .pdp-dims-row dd { text-align: left; white-space: normal; }
	/* portrait photo on phones */
	body.single-product .pdp-dims-photo { aspect-ratio: 4/5; }

	/* section heads with a side link ("Dobierz do kompletu · Zobacz całą
	   kolekcję"): title gets the full line, link drops beneath */
	body.single-product .pdp-sec-head.is-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── 10. Reviews + FAQ — light restyle of the existing blocks ──────── */
/* Normalize their self-contained markup to the standard section container
   (64px vertical, var(--pdp-pad) horizontal, full-width) so every section
   on the page shares one container width. */
body.single-product .wp-block-msf-product-reviews,
body.single-product .wp-block-msf-product-faq {
	padding-top: 64px !important; padding-bottom: 64px !important;
}
body.single-product .wp-block-msf-product-reviews > div,
body.single-product .wp-block-msf-product-faq > div {
	max-width: none !important;
	padding-left: var(--pdp-pad) !important; padding-right: var(--pdp-pad) !important;
}
body.single-product .msf-reviews-grid h2,
body.single-product .msf-faq-grid h2 {
	letter-spacing: var(--tr-editorial); color: var(--ink);
}
body.single-product .msf-reviews-toggle,
body.single-product .msf-faq-trigger { letter-spacing: var(--tr-editorial); }

/* ── 11. Responsive ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	body.single-product .pdp-section { padding: 44px 20px; }
}
@media (max-width: 1080px) {
	/* Override WP's flex columns so the hero stacks on tablet + mobile. */
	body.single-product .pdp-hero { display: block; }
	body.single-product .pdp-gallery-col,
	body.single-product .pdp-info-col { width: 100% !important; flex-basis: 100% !important; max-width: 100% !important; }
	body.single-product .pdp-info-col { margin-top: 28px; }
	body.single-product .pdp-info { position: static; max-height: none; }
}
@media (max-width: 768px) {
	/* Gallery spans the full viewport width on phones (QA). Mobile has no
	   persistent scrollbar, so 100vw is exactly the viewport — no overflow. */
	body.single-product .pdp-gallery-col {
		position: relative;
		/* !important to beat the ≤1080px stack rule (width/max-width:100% !important). */
		width: 100vw !important;
		max-width: 100vw !important;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
}

/* ── 12. Mattress template (single-product-materace) ───────────────────
   Sections specific to the mattress PDP: the buy-box delivery bar, the
   construction cross-section block (msf/product-construction) and the trust
   pattern (theme/mattress-trust). Reuses .pdp-section / .pdp-sec-head. */

/* Buy-box delivery reassurance bar (static, in the info panel). */
body.single-product .pdp-delbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 2px 0;
	padding: 16px 0;
	border-top: var(--rule-soft);
	border-bottom: var(--rule-soft);
}
body.single-product .pdp-delbar__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--graphite);
}
body.single-product .pdp-delbar__item svg { flex: none; color: var(--ink); }

/* Construction — cross-section photo (left, sticky) + numbered layers (right). */
body.single-product .pdp-cx-grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
body.single-product .pdp-cx-grid.is-solo { grid-template-columns: 1fr; max-width: 820px; }
body.single-product .pdp-cx-media { position: sticky; top: 96px; overflow: hidden; background: var(--sand); border-radius: 2px; aspect-ratio: 4/5; }
body.single-product .pdp-cx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.single-product .pdp-cx { list-style: none; margin: 0; padding: 0; }
body.single-product .pdp-cx-layer {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 22px 0;
	border-top: var(--rule-soft);
}
body.single-product .pdp-cx-layer:first-child { border-top: 0; padding-top: 0; }
body.single-product .pdp-cx-num {
	flex: none; width: 24px;
	font-size: 12px; font-weight: 500; letter-spacing: var(--tr-wide);
	color: var(--stone); font-variant-numeric: tabular-nums;
}
body.single-product .pdp-cx-fig { flex: none; width: 64px; aspect-ratio: 1; overflow: hidden; background: var(--sand); align-self: flex-start; }
body.single-product .pdp-cx-main { flex: 1; min-width: 0; }
body.single-product .pdp-cx-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
body.single-product .pdp-cx-title {
	margin: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.01em;
	line-height: 1.3; color: var(--ink); text-transform: none;
}
body.single-product .pdp-cx-spec {
	font-size: 11px; font-weight: 500; letter-spacing: var(--tr-wide); text-transform: uppercase;
	color: var(--stone); border: 1px solid var(--border); padding: 3px 8px; white-space: nowrap;
}
body.single-product .pdp-cx-desc {
	margin: 8px 0 0; max-width: 54ch;
	font-size: 13px; font-weight: 400; line-height: 1.65; color: var(--graphite);
}

/* Trust band — certifications + responsible-entity / warranty info box. */
body.single-product .pdp-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
body.single-product .pdp-trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
body.single-product .pdp-cert {
	display: inline-flex; align-items: center;
	padding: 8px 14px; background: var(--white); border: 1px solid var(--border);
	font-size: 11px; font-weight: 500; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink);
}
body.single-product .pdp-trust-eco { margin: 0; max-width: 46ch; font-size: 13px; font-weight: 400; line-height: 1.7; color: var(--graphite); }
body.single-product .pdp-trust-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 22px; }
body.single-product .pdp-trust-meta > div { padding: 12px 0; border-top: var(--rule-soft); }
body.single-product .pdp-trust-meta dt { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone); }
body.single-product .pdp-trust-meta dd { margin: 4px 0 0; font-size: 15px; font-weight: 400; color: var(--ink); }
body.single-product .pdp-trust-entity { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.7; color: var(--graphite); }
body.single-product .pdp-trust-entity strong {
	display: block; margin-bottom: 6px;
	font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--stone);
}
body.single-product .pdp-trust-entity a { color: var(--ink); }

@media (max-width: 1080px) {
	body.single-product .pdp-trust-grid { grid-template-columns: 1fr; gap: 32px; }
	body.single-product .pdp-cx-grid { grid-template-columns: 1fr; gap: 32px; }
	body.single-product .pdp-cx-media { position: static; aspect-ratio: 3/2; max-width: 560px; }
}
@media (max-width: 600px) {
	body.single-product .pdp-delbar { flex-direction: column; gap: 12px; }
	body.single-product .pdp-cx-layer { gap: 14px; padding: 18px 0; }
	body.single-product .pdp-cx-fig { width: 56px; }
	body.single-product .pdp-cx-media { aspect-ratio: 4/3; }
	body.single-product .pdp-trust-meta { grid-template-columns: 1fr; }
}