/* ============================================================
   Merinoshe - karta produktu (is_product)
   Layout: galeria pionowych zdjęć + sticky kolumna zakupowa,
   niżej sekcje pełną szerokością. Estetyka editorial: przestrzeń,
   cienkie linie, bez rzędów kart z cieniami.
   ============================================================ */

/* ---------- Layout dwóch kolumn ---------- */
.mshe-product { padding-top: 32px; }
.product-layout {
	max-width: var(--layout-wide); /* jedyny kontener na 1720 - decyzja Tomasza 25.08 */
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px 64px;
	/* uwaga: bez align-items:start - kolumna zakupowa musi się rozciągać,
	   żeby sticky .summary miał w czym "jechać" ze scrollem */
}

/* Reset klasycznych floatów Woo (woocommerce-layout.css) */
.woocommerce div.product .product-layout div.summary,
.woocommerce-page div.product .product-layout div.summary {
	float: none;
	width: 100%;
	margin: 0;
}

/* ---------- Galeria: jedno duże zdjęcie + kafelki-miniatury pod spodem ---------- */
.product-gallery { display: grid; gap: 14px; align-content: start; }
.product-gallery .product-photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
}
.gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}
.gallery-thumb {
	padding: 0;
	/* Delikatny obrys + tło - packshoty na jasnym tle zlewały się z kremem strony */
	border: 2px solid rgba(192, 173, 157, .35);
	border-radius: 8px;
	background: var(--c-card);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s ease, opacity .15s ease;
	opacity: .75;
}
.gallery-thumb img {
	display: block;
	width: 100%;
	height: auto; /* miniatury 200 px bez cięcia (inc/kadr.php) - object-position steruje kadrem */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
}
.gallery-thumbs[hidden] { display: none; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--c-accent-em); opacity: 1; }
.gallery-thumb:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Max 5 kafli w jednym rzędzie. Kafle 6+ zostają w DOM (lista dla lightboxa),
   piąty przy nadmiarze = "+N zdjęć": przygaszone, lekko rozmyte zdjęcie
   z licznikiem; klik otwiera pełną galerię (product.js 6). */
.gallery-thumbs > .gallery-thumb:nth-child(n+6) { display: none; }
.gallery-thumb { position: relative; }
.gallery-thumb[data-more] { opacity: 1; }
.gallery-thumb[data-more] img {
	filter: blur(1.5px) saturate(.85);
	transform: scale(1.08);
	transition: filter .2s ease, transform .2s ease;
}
.gallery-thumb[data-more]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 6px;
	background: rgba(51, 48, 48, .6);
	transition: background .2s ease;
}
.gallery-more {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--c-cream);
	font-family: var(--font-head);
	text-align: center;
	pointer-events: none;
}
.gallery-more b { font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; line-height: 1; letter-spacing: .01em; }
.gallery-more { text-shadow: 0 1px 3px rgba(23, 21, 20, .45); }
.gallery-more small { font-size: clamp(11px, .95vw, 12px); font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: .09em; opacity: .9; }
.gallery-thumb[data-more]:hover::before { background: rgba(51, 48, 48, .54); }
.gallery-thumb[data-more]:hover img { filter: blur(.8px) saturate(.95); transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
	.gallery-thumb[data-more] img, .gallery-thumb[data-more]::before { transition: none; }
}

/* ---------- Kolumna zakupowa - sticky (header ma 72px) ---------- */
.product-summary-col { align-self: stretch; }
.product-summary-col .summary {
	position: sticky;
	top: 88px; /* 72px sticky header + oddech */
}

/* Breadcrumbs */
.product-breadcrumbs,
.product-breadcrumbs .woocommerce-breadcrumb {
	font-family: var(--font-head);
	font-size: var(--fs-fine);
	letter-spacing: var(--ls-fine);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 18px;
}
.product-breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.product-breadcrumbs a:hover { color: var(--c-accent-em); }
.product-breadcrumbs .bc-sep { margin: 0 8px; color: var(--c-taupe); }

/* Nazwa + cena */
.summary .product_title {
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
	margin-bottom: 10px;
	text-wrap: balance;
}
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 26px;
	color: var(--c-accent-em);
	margin-bottom: 22px;
}
.woocommerce div.product .summary p.price del { opacity: .45; font-weight: 600; margin-right: 8px; }
.woocommerce div.product .summary p.price ins { text-decoration: none; }
.woocommerce div.product .summary p.price .omnibus,
.woocommerce div.product .woocommerce-variation-price .omnibus { margin-top: 6px; }
/* Sticky bar: pasek NIE informuje o obniżce - sama aktualna cena (Omnibus).
   Przekreślenie, teksty SR i linię wycina product.js (psbCena), nie CSS -
   patrz komentarz tam. Tu tylko bezpiecznik na wypadek braku JS. */
.pdp-sticky-bar .psb-price del,
.pdp-sticky-bar .psb-price .omnibus { display: none; }

/* Dostawa + PayPo pod ceną (21.10.2026, inc/karta-produktu.php
   merinoshe_product_dostawa_info) - cena oddaje dolny margines temu blokowi. */
.woocommerce div.product .summary p.price:has(+ .pdp-zakup-info) { margin-bottom: 10px; }
.pdp-zakup-info { margin: 0 0 22px; display: grid; gap: 6px; }
.pdp-zakup-info .pzi-row { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--c-muted); }
.pdp-zakup-info .pzi-row strong { color: var(--c-graphite); font-weight: 600; }
.pdp-zakup-info .pzi-ico { flex: 0 0 18px; width: 18px; height: 18px; color: var(--c-accent); }
.pdp-zakup-info .pzi-paypo-logo { flex: 0 0 auto; width: 46px; height: auto; display: block; }

.summary .woocommerce-product-rating { margin-bottom: 6px; }
.summary .star-rating { color: var(--c-accent); }

/* ---------- Baner "Odbierz kod" pod ceną + popup zapisu ----------
   Wariant C2 (21.09): jasna karta, owca z listem (poza 'list', ta sama co
   w newsletterze na home) wystaje ponad górną krawędź, przycisk outline -
   czerń zostaje tylko na "Dodaj do koszyka". Klientki po zakupie / z kodem
   nie widzą baneru: html.mshe-klientka (inc/klientka.php). */
.mshe-klientka .promo-code-box { display: none; }
.promo-code-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 36px 0 24px;
	padding: 15px 16px 15px 96px;
	min-height: 54px;
	background: #fff; /* biel = "list"; celowo nie --c-card, żeby oferta nie wyglądała jak trzecia notka .info-box (krytyk 21.09) */
	border: 1px solid rgba(184, 168, 153, .55); /* --c-taupe 55% */
	border-radius: 14px;
}
.promo-code-box .pcb-owca { position: absolute; left: 14px; bottom: 0; width: 62px; }
.promo-code-box .pcb-owca svg { width: 100%; height: auto; }
.pcb-text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.2;
	color: var(--c-plum);
	margin: 0;
}
.pcb-kicker {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-kicker);
	text-transform: uppercase;
	color: var(--c-accent-em);
	margin-bottom: 4px;
}
/* -10% (11.10.2026): procent mocniej, dopisek "za zapis do newslettera" drobniej pod spodem */
.pcb-proc { white-space: nowrap; color: var(--c-accent-em); font-weight: 700; }
.pcb-sub { display: block; margin-top: 3px; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--c-muted); }
.pcb-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	padding: 10px 18px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	color: var(--c-plum);
	background: transparent;
	border: 2px solid var(--c-plum);
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.pcb-arrow { width: 14px; height: 11px; flex: none; transition: transform .18s ease; }
.promo-code-box.is-done { outline: none; }
.promo-code-box.is-done:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pcb-btn:hover { background: var(--c-plum); color: var(--c-cream); transform: translateY(-1px); }
.pcb-btn:hover .pcb-arrow { transform: translateX(3px); }
.pcb-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Wąska kolumna (960-1260 px dwie kolumny, ale ciasno) i telefon: przycisk pod
   tekstem; owca większa, żeby nadal wystawała ponad wyższą kartę (krytyk 21.09). */
@media (max-width: 1260px) and (min-width: 961px), (max-width: 600px) {
	.promo-code-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px 16px 106px; }
	.promo-code-box .pcb-owca { left: 12px; width: 84px; }
	.pcb-text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pcb-btn, .pcb-arrow { transition: none; }
	.pcb-btn:hover, .pcb-btn:hover .pcb-arrow { transform: none; }
}

/* Popup „Odbierz kod” (.promo-modal, .pm-*) - assets/css/promo-kod.css (od 0.70.0 ładowany na każdej stronie) */

/* ---------- Formularz wariantów ---------- */
.woocommerce div.product form.cart { margin: 0 0 26px; }
.woocommerce div.product form.cart table.variations { margin: 0; border: 0; }
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
	line-height: 1.5;
}
.woocommerce div.product form.cart .variations tr { margin-bottom: 18px; }
.woocommerce div.product form.cart .variations th.label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
}
.woocommerce div.product form.cart .variations label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-plum);
	margin: 0;
}
.size-guide-link {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 13px;
	color: var(--c-accent-em);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.size-guide-link:hover { color: var(--c-accent); }

/* Selecty - eleganckie (fallback bez JS); z JS chowamy je pod chipy */
.woocommerce div.product form.cart .variations select {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--c-taupe);
	border-radius: 10px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--c-graphite);
	margin: 0;
}
.woocommerce div.product form.cart .variations select:focus { outline: none; border-color: var(--c-accent); }
/* Select zostaje w DOM (rządzi stanem formularza Woo), znika tylko wizualnie */
.woocommerce div.product form.cart .variations select.chips-enabled {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	padding: 0;
}

/* Chipy wariantów */
.variation-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.variation-chips .chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1.5px solid var(--c-taupe);
	border-radius: 999px;
	background: transparent;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-plum);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.variation-chips .chip:hover { border-color: var(--c-plum); transform: translateY(-1px); }
.variation-chips .chip.is-active { background: var(--c-plum); border-color: var(--c-plum); color: var(--c-cream); }
.variation-chips .chip.is-oos:not(.is-active) { color: rgba(51, 48, 48, .5); border-style: dashed; text-decoration: line-through; text-decoration-thickness: 1px; }
.variation-chips .chip.is-off { opacity: .35; cursor: not-allowed; border-style: dashed; transform: none; }
/* Rozmiar dziecięcy z wiekiem pod spodem (21.10.2026): dwie linie, ten sam
   kształt pigułki, tylko ciaśniejszy pion. */
.variation-chips .chip.has-age { flex-direction: column; gap: 1px; padding: 7px 16px 8px; line-height: 1.2; border-radius: 18px; }
.chip-age { font-family: var(--font-head); font-weight: 500; font-size: 12px; color: var(--c-muted); }
.chip.is-active .chip-age { color: rgba(244, 240, 237, .8); }
.chip.is-oos:not(.is-active) .chip-age { text-decoration: none; }
.chip-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(51,48,48,.25); flex: 0 0 auto; }
.chip.is-active .chip-dot { border-color: rgba(244,240,237,.6); }

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--c-muted);
}

.size-request-teaser {
	margin: 2px 0 16px;
	font-size: 14px;
	color: var(--c-muted);
}
.size-request-teaser a { color: var(--c-accent-em); font-family: var(--font-head); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Cena wariantu + dostępność */
.woocommerce div.product .woocommerce-variation-price .price { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--c-accent-em); }
.woocommerce-variation-availability { font-size: 14px; color: var(--c-muted); }
.woocommerce div.product .single_variation_wrap .woocommerce-variation { margin-bottom: 12px; }
/* „Na stanie” - linia startowa (.stan-start, variable.php) i dostępność
   wariantu wyglądają tak samo: kropka w zieleni z palety kolorów produktu
   zamiast oliwkowego tekstu Woo (22.10.2026) */
.woocommerce div.product form.cart p.stock.in-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-graphite);
}
.woocommerce div.product form.cart p.stock.in-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7C8A6E;
	flex: 0 0 auto;
}
.woocommerce div.product form.cart p.stan-start { margin-bottom: 12px; }
.woocommerce div.product form.cart p.stan-start[hidden] { display: none; }

/* Ilość + przycisk do koszyka */
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) { display: flex; gap: 12px; align-items: stretch; }
/* Stepper ilości −/+ (product.js owija input.qty w .qty-stepper; natywne
   strzałki number-inputa schowane - wyglądały obco przy pigułkach KV) */
.qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--c-taupe);
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}
.qty-stepper:focus-within { border-color: var(--c-accent); }
.qty-stepper .qty-btn {
	width: 40px;
	border: 0;
	background: transparent;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	color: var(--c-plum);
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
}
.qty-stepper .qty-btn:hover { color: var(--c-accent-em); background: var(--c-card); }
.qty-stepper .qty-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; border-radius: 999px; }
.woocommerce div.product form.cart .qty {
	width: 40px;
	padding: 12px 0;
	text-align: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-graphite);
	-moz-appearance: textfield;
	appearance: textfield;
}
.woocommerce div.product form.cart .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .qty:focus { outline: none; }
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1;
	padding: 15px 28px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .02em;
	color: var(--c-cream);
	background: var(--c-plum);
	border: 2px solid var(--c-plum);
	border-radius: 999px;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Bez wybranego koloru/rozmiaru przycisk wygląda na aktywny (22.10.2026) -
   szary czytał się jak "niedostępne"; klik pokazuje napis przy chipach (product.js). */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled.wc-variation-selection-needed { opacity: 1; cursor: pointer; }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled.wc-variation-selection-needed:hover { transform: translateY(-2px); }

/* „KOLOR: wybierz” / „KOLOR: Beż” przy nagłówku grupy (product.js sekcja 1) */
.label-wybor {
	margin-left: 6px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-accent-em);
}
.label-wybor::before { content: ":"; margin: 0 6px 0 -6px; color: var(--c-plum); }
.label-wybor.is-set { color: var(--c-graphite); font-weight: 500; }

/* Napis "Wybierz kolor/rozmiar" pod grupą chipów po kliku bez wyboru */
.chips-need {
	margin: 8px 0 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-accent-em);
}

/* Gdy JS pokazuje waitlist - chowamy niedostępny przycisk */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart.is-replaced { display: none; }

/* ---------- Waitlist (UI-placeholder) ---------- */
.waitlist-box {
	background: var(--c-card);
	border: 1px solid rgba(192,173,157,.45);
	border-radius: 12px;
	padding: 20px 22px;
	margin-top: 4px;
}
.waitlist-box[hidden] { display: none; }
.waitlist-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--c-plum); margin-bottom: 6px; }
.waitlist-sub { font-size: 14px; color: var(--c-muted); margin-bottom: 14px; }
.waitlist-form { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist-form input[type="email"] {
	flex: 1 1 180px;
	padding: 12px 18px;
	border: 1.5px solid var(--c-taupe);
	border-radius: 999px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--c-graphite);
}
.waitlist-form input[type="email"]:focus { outline: none; border-color: var(--c-accent); }
.waitlist-form .btn { padding: 12px 22px; font-size: 14px; }
.form-done { flex-basis: 100%; font-size: 14px; color: var(--c-accent-em); font-style: italic; }

/* ---------- Ikonki USP (2 kolumny, kreska) ---------- */
.product-usp {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
	margin: 26px 0 20px;
	padding: 22px 0;
	border-top: 1px solid rgba(132,127,118,.3);
	border-bottom: 1px solid rgba(132,127,118,.3);
}
.product-usp li { display: flex; align-items: center; gap: 12px; }
.product-usp svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--c-accent-em); }
.product-usp span { font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--c-plum); }

/* ---------- Boxy informacyjne ---------- */
.info-box {
	background: var(--c-card);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 10px;
}
.info-box p { font-size: 14px; color: var(--c-graphite); }
.info-box a { color: var(--c-accent-em); }

/* ---------- Sekcje pod kolumnami ----------
   Editorial grid na pełną szerokość .wrap (życzenie Tomasza 2026-08-19:
   "tak szeroko jak Ceny bez ściemy"): nagłówek sekcji w lewej kolumnie,
   treść/tabela w prawej - jak rzędy benefitów na home. Klasa .ps-narrow
   zostaje w markupie (nazwa historyczna), ale robi teraz grid, nie zwężenie. */
.product-sections { margin-top: 88px; }
/* Sekcje treściowe pod galerią węższe niż hero produktu (uwaga Tomasza 25.08:
   galeria na --layout-max "zajebista", ale sekcje niżej za rozciągnięte). */
.product-sections .wrap { max-width: var(--layout-content); }
.ps-section { padding: 72px 0; border-top: 1px solid rgba(132,127,118,.28); }
.ps-narrow {
	/* max-width dziedziczy z .wrap (1400px) - wcześniejsze max-width:none
	   zdejmowało limit całkiem i sekcje lały się na całą szerokość ekranu */
	display: grid;
	grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
	gap: 8px 72px;
	align-items: start;
}
.ps-narrow > h2 { grid-column: 1; grid-row: 1; }
.ps-narrow > *:not(h2) { grid-column: 2; }
.ps-section h2 { margin-bottom: 22px; font-size: var(--fs-h3); }
.ps-lead { color: var(--c-muted); font-size: var(--fs-body); max-width: 66ch; margin-bottom: 28px; }
.ps-prose p { margin-bottom: 16px; font-size: var(--fs-body); max-width: 68ch; }
.ps-prose p:last-child { margin-bottom: 0; }
.ps-prose em { color: var(--c-accent-em); }
.ps-note { font-size: 13px; color: var(--c-muted); font-style: italic; margin-top: 14px; }
.ps-note a { color: var(--c-accent-em); }

/* Zdjęcie w lewej kolumnie sekcji, pod nagłówkiem (audyt UX 2026-08-20).
   Pion ~4:5 jak reszta kadrów motywu; nadpisuje regułę *:not(h2) -> kol. 2.
   Element PO zdjęciu (jedyny blok treści w tych sekcjach) spina oba wiersze,
   żeby zdjęcie stało obok treści, a nie pod nią. */
.ps-narrow > .ps-photo { grid-column: 1; grid-row: 2; margin: 10px 0 0; position: relative; }
/* Treść wyśrodkowana w pionie względem zdjęcia (wariant B, wybór Tomasza
   25.08) - gdy rzędów jest mniej niż wysokości kadru, oddech rozkłada się
   równo nad i pod treścią zamiast zostawiać dziurę na dole. */
.ps-narrow > .ps-photo + * { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* Zdanie-lead per model w „Dlaczego merino" (SEO etap 2, 16.09.2026): kolumna
   treści, wiersz nagłówka - czyta się nad zdjęciem, które zostaje w wierszu 2.
   Rzędy ikon nie mogą już wtedy spinać obu wierszy, bo weszłyby na lead. */
.ps-opis .ps-narrow > .ps-lead--model { grid-column: 2; grid-row: 1; font-size: var(--fs-h5); color: var(--c-graphite); max-width: 48ch; } /* lead per model: większy stopień i graphite, żeby nie czytał się jak akapit rzędu (krytyk 16.09, P3-7) */
.ps-opis .ps-narrow > .ps-lead--model ~ .ps-photo + * { grid-row: 2; align-self: start; }
.ps-photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
}
@media (max-width: 960px) {
	.ps-photo { max-width: 420px; margin: 0 0 24px; }
	/* owca-naklejka wystaje 30px pod kadr - bez tego nachodziłaby na treść */
	.ps-pielegnacja .ps-photo, .ps-opis--owca .ps-photo { margin-bottom: 52px; }
}

/* Rzędy z rysowanymi ikonami w sekcjach karty (Dlaczego merino, Pielęgnacja) -
   ten sam język co benefity na home; animacja kreski: .ico-line w main.css. */
/* Kreski (audyt d1, quick-win): kontener bez border-top, ostatni rząd bez
   border-bottom - zostają tylko separatory MIĘDZY rzędami */
.ps-icorow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px 0; border-bottom: 1px solid rgba(132,127,118,.28); }
.ps-icorow:last-child { border-bottom: 0; }
.ps-ico { width: 40px; height: 40px; margin-top: 2px; transition: color .25s ease, transform .25s ease; }
.ps-icorow:hover .ps-ico { color: var(--c-accent-em); transform: rotate(-6deg) scale(1.06); }
.ps-icorow h3 { font-size: var(--fs-h5); font-weight: 600; margin-bottom: 8px; transition: color .18s ease; }
.ps-icorow:hover h3 { color: var(--c-accent-em); }
.ps-icorow p { font-size: var(--fs-body); color: var(--c-graphite); max-width: 66ch; margin-bottom: 0; }
.ps-icorow p em { color: var(--c-accent-em); }
.ps-icorow .ps-note { margin-top: 10px; }

/* Sekcja "Dziane z jednej nici" - sygnatura bezszwowości: jedna ciągła
   linia (kłębek → sweterek → luźna nić) rysuje się po wejściu w viewport. */
.ps-seamless { background: var(--c-card); }
.seamless-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.seamless-art svg { width: 100%; height: auto; overflow: visible; }
.sm-thread, .sm-accent { stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-visible .sm-thread { animation: sm-draw 3.2s cubic-bezier(.4, 0, .3, 1) forwards .2s; }
.is-visible .sm-accent { animation: sm-draw .8s ease forwards 2.9s; }
@keyframes sm-draw { to { stroke-dashoffset: 0; } }
.seamless-copy h2 { margin-bottom: 18px; }
.sm-lead { font-size: 17px; max-width: 52ch; }
.sm-lead em { color: var(--c-accent-em); }
.sm-points { list-style: none; margin: 22px 0 0; padding: 0; }
.sm-points li { position: relative; padding: 9px 0 9px 34px; color: var(--c-muted); font-size: var(--fs-body); border-top: 1px solid rgba(132,127,118,.25); }
/* Kreska tylko MIĘDZY punktami (audyt d1) - falka-bullet i tak otwiera listę */
.sm-points li:first-child { border-top: 0; }
.sm-points li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 18px; height: 8px; transform: translateY(-50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M2 8c4-5 7 3 11-2s7 1 9-2' fill='none' stroke='%239B566A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (max-width: 960px) {
	.ps-narrow { display: block; }
	.seamless-grid { grid-template-columns: 1fr; }
	.seamless-art { max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.sm-thread, .sm-accent { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
}

/* Rozmiarówka */
.table-scroll { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.size-table th {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-plum);
	text-align: left;
	padding: 10px 16px 10px 0;
	border-bottom: 2px solid var(--c-plum);
}
.size-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(132,127,118,.3); color: var(--c-graphite); }
.size-table td:first-child { font-family: var(--font-head); font-weight: 600; color: var(--c-plum); }

/* Akordeony obiekcji (kreski wg audytu d1: separatory tylko między pytaniami -
   kontener bez border-top, ostatnie pytanie bez border-bottom) */
.objections details { border-bottom: 1px solid rgba(132,127,118,.35); }
.objections details:last-child { border-bottom: 0; }
.objections summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 20px 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--c-plum);
	cursor: pointer;
	transition: color .18s ease;
}
.objections summary:hover { color: var(--c-accent-em); }
.objections summary::-webkit-details-marker { display: none; }
.objections summary::after {
	content: "+";
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: var(--c-accent-em);
	transition: transform .25s ease;
	flex: 0 0 auto;
}
.objections details[open] summary::after { transform: rotate(45deg); }
.objections .details-body { padding: 0 0 24px; }
.objections .details-body p { font-size: var(--fs-body); max-width: 62ch; color: var(--c-graphite); }

/* Akordeony w kolumnie zakupowej (pod ceną/USP) - wersja kompaktowa */
.summary-objections { margin-top: 22px; }
.summary-objections summary { font-size: 16px; padding: 15px 0; }
.summary-objections summary::after { font-size: 22px; }
.summary-objections .details-body { padding: 0 0 18px; }
.summary-objections .details-body p { font-size: var(--fs-support); color: var(--c-graphite); }
.summary-objections .size-request-form { margin-top: 6px; max-width: none; }

/* Style "nici ceny" (Ceny bez ściemy) przeniesione do main.css -
   sekcja renderuje się też na stronie Jak powstaje (2026-09-01). */

/* Opinie (Woo reviews w KV). Od 25.09.2026 bez formularza na karcie - opinie dodaje się z linku
   w mailu CusRev (inc/opinie.php, woocommerce/single-product-reviews.php). */
.ps-reviews .woocommerce-Reviews-title { display: none; } /* własny nagłówek sekcji */
.ps-reviews .reviews-note { font-size: var(--fs-body); line-height: 1.55; color: var(--c-muted); margin: 10px 0 24px; max-width: 62ch; }
.ps-reviews .reviews-note a { color: var(--c-accent); text-decoration: underline; }
.ps-reviews #reviews { margin: 0; max-width: 62ch; }
.ps-reviews .reviews-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 20px; }
.ps-reviews .reviews-summary + .commentlist { border-top: 1px solid rgba(132,127,118,.3); }
.ps-reviews .reviews-summary .star-rating { color: var(--c-accent); float: none; margin: 0; font-size: 20px; }
.ps-reviews .reviews-summary__txt { font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--c-graphite); }
.ps-reviews .commentlist { list-style: none; margin: 0 0 40px; padding: 0; }
.ps-reviews .commentlist li { border-bottom: 1px solid rgba(132,127,118,.3); padding: 24px 0; margin: 0; }
.ps-reviews .commentlist .comment_container { display: flex; gap: 18px; }
.ps-reviews .commentlist img.avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.ps-reviews .comment-text { flex: 1; }
/* Style woocommerce.css mają wyższą specyficzność (#reviews #comments) - stąd pełne selektory niżej:
   .comment-text bez wcięcia 50 px pod awatar i bez ramki (show_avatars = 0 od 25.09.2026), odstęp i kreska
   między opiniami, autor/etykieta/data 16 px w kolorze z kontrastem AA (Woo: 0.75em, #767676). */
.woocommerce .ps-reviews #reviews #comments ol.commentlist li { margin: 0; padding: 24px 0; border-bottom: 1px solid rgba(132,127,118,.3); }
.woocommerce .ps-reviews #reviews #comments ol.commentlist li:last-child { border-bottom: 0; }
.woocommerce .ps-reviews #reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; border-radius: 0; padding: 0; }
.woocommerce .ps-reviews #reviews #comments ol.commentlist li .comment-text p.meta,
.woocommerce .ps-reviews #reviews #comments ol.commentlist li .meta { font-family: var(--font-head); font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--c-muted); margin: 0 0 8px; }
.woocommerce .ps-reviews #reviews #comments ol.commentlist li .comment-text p.meta strong { color: var(--c-plum); }
.woocommerce .ps-reviews #reviews #comments ol.commentlist li .comment-text p.meta .verified { font-size: 16px; font-style: normal; color: var(--c-accent); }
.ps-reviews .comment-text .star-rating { color: var(--c-accent); float: none; margin-bottom: 6px; }
.ps-reviews .comment-text .meta { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--c-muted); margin-bottom: 8px; }
.ps-reviews .comment-text .meta strong { color: var(--c-plum); }
.ps-reviews .comment-text .meta .verified { font-style: normal; color: var(--c-accent); }
.ps-reviews .comment-text .description p { font-family: var(--font-body); font-style: italic; font-size: var(--fs-body); color: var(--c-graphite); }
.ps-reviews .woocommerce-noreviews { color: var(--c-muted); font-style: italic; font-size: var(--fs-body); margin-bottom: 24px; }
/* Zdjęcia i filmy z opinii (CusRev dopina je hakiem woocommerce_review_after_comment_text) */
.ps-reviews .cr-comment-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ps-reviews .iv-comment-image a { display: block; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; }
.ps-reviews .iv-comment-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-reviews .cr-comment-video video { display: block; width: 180px; max-width: 100%; border-radius: 12px; background: var(--c-card); }
.ps-reviews .cr-comment-videoicon,
.ps-reviews .cr-comment-video-close { display: none; }
/* Jak dodać opinię - zamiast formularza */
.ps-reviews .reviews-how { border-top: 1px solid rgba(132,127,118,.3); padding-top: 24px; max-width: 62ch; }
.ps-reviews .commentlist + .reviews-how,
.ps-reviews #comments + .reviews-how { margin-top: 0; }
.ps-reviews .reviews-how__title { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--c-graphite); margin: 0 0 10px; }
.ps-reviews .reviews-how p { font-size: var(--fs-body); line-height: 1.6; color: var(--c-graphite); margin: 0 0 10px; }
.ps-reviews .reviews-how a { color: var(--c-accent); text-decoration: underline; }

/* Dostawa i zwroty (kreski wg audytu d1: tylko separatory między rzędami) */
.delivery-row {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(132,127,118,.35);
	align-items: baseline;
}
.delivery-row:last-child { border-bottom: 0; }
.delivery-row dt { font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--c-plum); }
.delivery-row dd { font-size: var(--fs-support); color: var(--c-muted); margin: 0; }

/* Formularz size-request (kotwica #size-request) */
.size-request-form { max-width: 520px; display: grid; gap: 16px; }
.srf-row label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--c-plum); margin-bottom: 6px; }
.srf-row input, .srf-row textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--c-taupe);
	border-radius: 10px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--c-graphite);
}
.srf-row input:focus, .srf-row textarea:focus { outline: none; border-color: var(--c-accent); }
.size-request-form .btn { justify-self: start; }

/* Kotwice pod sticky headerem */
#rozmiarowka, #size-request, #opinie { scroll-margin-top: 88px; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
	.mshe-product { padding-top: 16px; }
	.product-layout { grid-template-columns: 1fr; gap: 28px; }
	.product-summary-col { position: static; }
	/* Galeria mobile: to samo co desktop (duże zdjęcie + miniatury),
	   tylko mniejsze odstępy */
	.product-gallery { gap: 10px; }
	.gallery-thumbs { gap: 8px; }
	.product-sections { margin-top: 56px; }
	.ps-section { padding: 52px 0; }
	.delivery-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   Inspiracje web-research (2026-08) - nowe elementy karty:
   zoom-frame (#7), crossfade wariantu (#6), sticky mini-CTA (#5/#16),
   popover rozmiaru (#8), tooltip cost-per-wear (#11), "✓ Dodano" (#12),
   focus-states + tap-targety (audyt W15/W18).
   ============================================================ */

/* ---------- Galeria w ramkach .zoom-frame (markup: content-single-product.php) ---------- */
.product-gallery .zoom-frame {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	margin: 0;
}
.product-gallery .zoom-frame .product-photo { display: block; border-radius: 0; }

/* Hover-zoom makro (desktop, klasa nadawana z product.js) */
.zoom-frame.zoom-enabled { cursor: zoom-in; }
.zoom-frame.zoom-enabled .product-photo { transition: transform .35s ease; will-change: transform; }
.zoom-frame.zoom-enabled.is-zooming .product-photo { transform: scale(1.8); }
.zoom-frame.tap-lightbox { cursor: zoom-in; }

/* Lightbox mobile (div tworzony w product.js, klik zamyka) */
.pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(51, 48, 48, .92);
	cursor: zoom-out;
}
.pdp-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	/* Natywny pinch-zoom na zdjęciu (tap w obraz NIE zamyka - product.js) */
	touch-action: pinch-zoom;
	cursor: default;
}
.plb-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(244, 240, 237, .16);
	color: var(--c-cream);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
body.plb-open { overflow: hidden; }

/* Lightbox jako galeria (>1 zdjęcie): strzałki po bokach, licznik na dole */
.pdp-lightbox.is-gallery { padding: 64px 76px; }
.plb-nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(244, 240, 237, .16);
	color: var(--c-cream);
	cursor: pointer;
	transition: background .15s ease;
}
.plb-nav svg { width: 22px; height: 22px; }
.plb-nav:hover { background: rgba(244, 240, 237, .3); }
.plb-prev { left: 16px; }
.plb-next { right: 16px; }
.plb-count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	color: var(--c-cream);
	font-family: var(--font-head);
	font-size: 14px;
	letter-spacing: .08em;
	opacity: .85;
	pointer-events: none;
}
/* Zdjęcie główne jako przycisk galerii (klawiatura) */
.product-gallery .gallery-main:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
/* Pasek "Do koszyka" nie przebija spod otwartej galerii */
body.plb-open .pdp-sticky-bar { visibility: hidden; }
@media (max-width: 640px) {
	/* Mobile: zdjęcie na całą szerokość, licznik u góry, strzałki nachodzą na krawędzie, swipe działa */
	.pdp-lightbox.is-gallery { padding: 64px 8px 24px; }
	.plb-count { top: 26px; bottom: auto; }
	.plb-nav { width: 44px; height: 44px; margin-top: -22px; background: rgba(51, 48, 48, .45); }
	.plb-prev { left: 6px; }
	.plb-next { right: 6px; }
}

/* Crossfade zdjęcia głównego przy wyborze koloru (#6) */
.gallery-fade-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.gallery-fade-layer.is-visible { opacity: 1; }
/* Delikatny flash, gdy wariant nie ma własnego zdjęcia */
@keyframes mshe-img-flash {
	0% { opacity: 1; }
	40% { opacity: .55; }
	100% { opacity: 1; }
}
.zoom-frame.img-flash .product-photo { animation: mshe-img-flash .4s ease; }

/* ---------- Sticky mini-CTA (#5 desktop / #16 mobile) ---------- */
.pdp-sticky-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	background: var(--c-cream);
	border-top: 1px solid rgba(132, 127, 118, .35);
	box-shadow: 0 -8px 28px rgba(51, 48, 48, .08);
	transform: translateY(102%);
	transition: transform .28s ease;
}
.pdp-sticky-bar.is-visible { transform: translateY(0); }
.pdp-sticky-bar[hidden] { display: none; }
.psb-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 10px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.psb-thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}
.psb-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.psb-name {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-plum);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.psb-price, .psb-price .price, .psb-price .woocommerce-Price-amount {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--c-accent-em);
}
.psb-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 12px 30px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	color: var(--c-cream);
	background: var(--c-plum);
	border: 2px solid var(--c-plum);
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.psb-btn:hover { background: var(--c-accent); border-color: var(--c-accent); }
@media (max-width: 960px) {
	.psb-thumb { display: none; }
	.psb-btn { flex: 1 1 auto; }
	.psb-info { flex: 0 1 auto; }
	.psb-name { font-size: 13px; }
}

/* Podświetlenie brakujących grup chipów (wskazBrakujace, product.js) */
@keyframes mshe-chips-attn {
	0%, 100% { box-shadow: 0 0 0 0 rgba(155, 86, 106, 0); }
	35% { box-shadow: 0 0 0 4px rgba(155, 86, 106, .45); }
	70% { box-shadow: 0 0 0 2px rgba(155, 86, 106, .3); }
}
.variation-chips.chips-attn { border-radius: 12px; animation: mshe-chips-attn 1.6s ease; }
.variation-chips.chips-attn .chip { border-color: var(--c-accent); }

/* ---------- Popover rozmiaru (#8, markup: variable.php) ---------- */
.woocommerce div.product form.cart .variations th.label { position: relative; }
.size-pop { position: relative; display: inline-block; }
.size-popover {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 40;
	width: max-content;
	max-width: 300px;
	background: var(--c-plum);
	color: var(--c-cream);
	border-radius: 10px;
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events: none;
	box-shadow: 0 10px 30px rgba(51, 48, 48, .22);
}
/* Niewidzialny mostek nad okienkiem - bez niego kursor jadący z linku do
   "pełna rozmiarówka" przecina 10px szczeliny, hover się zrywa i popover znika */
.size-popover::after {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
/* Strzałka */
.size-popover::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 22px;
	width: 10px;
	height: 10px;
	background: var(--c-plum);
	transform: rotate(45deg);
}
.size-pop:hover .size-popover,
.size-pop:focus-within .size-popover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.size-popover-rows { display: grid; gap: 5px; }
.spr-row { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; white-space: nowrap; }
.spr-row strong { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.spr-row span { opacity: .85; }
.size-popover-more {
	display: block;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(244, 240, 237, .25);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--c-cream);
}
/* Bez hovera (mobile) popover nie ma sensu - link i tak prowadzi na /rozmiarowka/ */
@media (hover: none) {
	.size-pop:hover .size-popover, .size-pop:focus-within .size-popover { opacity: 0; visibility: hidden; }
}

/* ---------- "✓ Dodano" z pętelką nici (#12) ---------- */
.woocommerce div.product form.cart .single_add_to_cart_button.is-added {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--c-accent-em);
	border-color: var(--c-accent-em);
	pointer-events: none;
}
.added-label { white-space: nowrap; }
.added-thread { width: 34px; height: 14px; flex: 0 0 auto; }
.added-thread path {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: mshe-thread-draw .9s ease-out .1s forwards;
}
@keyframes mshe-thread-draw {
	to { stroke-dashoffset: 0; }
}

/* ---------- Audyt W18: widoczne focus-states / W15: tap-targety ---------- */
.variation-chips .chip:focus-visible,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
.woocommerce div.product form.cart .qty:focus-visible,
.psb-btn:focus-visible,
.plb-close:focus-visible,
.plb-nav:focus-visible,
.waitlist-form .btn:focus-visible,
.size-request-form .btn:focus-visible,
.size-guide-link:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}
@media (max-width: 960px) {
	.variation-chips .chip { min-height: 44px; padding-block: 12px; }
	.size-guide-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Reduced motion: wyłącz animacje nowych elementów ---------- */
@media (prefers-reduced-motion: reduce) {
	.pdp-sticky-bar { transition: none; }
	.gallery-fade-layer { transition: none; }
	.zoom-frame.zoom-enabled .product-photo { transition: none; transform: none !important; }
	.zoom-frame.img-flash .product-photo { animation: none; }
	.variation-chips.chips-attn { animation: none; }
	.added-thread path { animation: none; stroke-dashoffset: 0; }
	.size-popover { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   AJAX koszyk (product.js sekcja 10): toast zamiast window.alert Woo
   + baner "Dodano do koszyka" (wzór surf.inc, w Key Visualu).
   -------------------------------------------------------------------------- */
.mshe-toast {
	position: fixed;
	left: 50%;
	/* Nad sticky mini-CTA (~68px) + home-indicator; bez sticky bara toast
	   po prostu wisi trochę wyżej - lepsze to niż kolizja z paskiem */
	bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 16px);
	z-index: 220;
	/* width: max-content - bez tego shrink-to-fit liczy szerokość od left:50%
	   i toast nigdy nie przekracza połowy viewportu (łamał się na 3 linie) */
	width: max-content;
	max-width: min(92vw, 520px);
	padding: 14px 22px;
	background: var(--c-plum);
	color: var(--c-cream);
	border-radius: 999px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 10px 30px rgba(51, 48, 48, .25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.mshe-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mshe-toast.is-error { background: var(--c-accent-em); }

.mshe-cart-modal { position: fixed; inset: 0; z-index: 240; }
.mcm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(51, 48, 48, .45);
}
.mcm-panel {
	position: absolute;
	top: 8vh;
	left: 50%;
	transform: translateX(-50%);
	width: min(92vw, 780px);
	background: var(--c-cream);
	border: 1.5px solid var(--c-taupe);
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(51, 48, 48, .3);
	overflow: hidden;
	/* Panel nie może wyjść poza ekran (landscape, małe Androidy):
	   head zostaje, scrolluje .mcm-body */
	display: flex;
	flex-direction: column;
	max-height: 84vh;
	max-height: 84dvh;
	animation: mcm-in .3s ease both;
}
@keyframes mcm-in {
	from { opacity: 0; transform: translateX(-50%) translateY(-14px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mcm-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(132, 127, 118, .25);
	background: var(--c-card);
}
.mcm-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-plum);
	color: var(--c-cream);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	flex: 0 0 auto;
}
.mcm-title {
	position: relative;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 18px;
	color: var(--c-plum);
}
.mcm-thread {
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 34px;
	height: 12px;
	color: var(--c-accent);
}
.mcm-close {
	/* margin-left:auto zdjęty (10.09): dwa auto w jednym flexie dzieliły luz po połowie i owca (.mcm-owca) lądowała w przypadkowym miejscu */
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--c-muted);
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 8px;
}
.mcm-close:hover { color: var(--c-plum); }
.mcm-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.mcm-body {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 26px;
	padding: 24px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mcm-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-right: 22px;
	border-right: 1px solid rgba(132, 127, 118, .25);
}
.mcm-img { flex: 0 0 96px; }
.mcm-img img {
	width: 96px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 10px;
	background: var(--c-card);
}
.mcm-name {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 17px;
	color: var(--c-plum);
	margin-bottom: 6px;
}
.mcm-meta { font-size: 14px; color: var(--c-muted); }
.mcm-count {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0 0 10px;
}
.mcm-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 16px;
	color: var(--c-graphite);
}
.mcm-row strong { font-family: var(--font-head); font-weight: 700; color: var(--c-plum); }
.mcm-ship { margin-bottom: 20px; }
.mcm-ship-text { margin: 0 0 8px; font-size: 14px; color: var(--c-graphite); }
.mcm-ship-text strong { color: var(--c-accent-em); }
.mcm-ship.is-done .mcm-ship-text { color: var(--c-accent-em); font-weight: 600; }
.mcm-track {
	height: 6px;
	border-radius: 999px;
	background: rgba(192, 173, 157, .4);
	overflow: hidden;
}
.mcm-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--c-accent);
	transition: width .5s ease;
}
.mcm-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mcm-actions .btn { padding: 12px 22px; font-size: 15px; text-align: center; }
.mcm-actions .mcm-checkout { flex: 1 1 auto; }
/* „Kontynuuj zakupy” jako link pod przyciskami (21.10.2026) - zamknięcie
   banera zostaje pod ręką, ale nie konkuruje z „Przejdź do kasy”. */
.mcm-continue {
	display: block;
	margin: 14px auto 0;
	padding: 6px 4px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 14px;
	color: var(--c-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.mcm-continue:hover { color: var(--c-plum); }
body.mcm-open { overflow: hidden; }

@media (max-width: 720px) {
	.mcm-panel {
		top: auto;
		bottom: 0;
		width: 100%;
		max-width: none;
		border-radius: 18px 18px 0 0;
		border-bottom: 0;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}
	@keyframes mcm-in {
		from { opacity: 0; transform: translateX(-50%) translateY(20px); }
		to { opacity: 1; transform: translateX(-50%) translateY(0); }
	}
	.mcm-body {
		grid-template-columns: 1fr;
		gap: 18px;
		/* Home-indicator iOS nie może nachodzić na przyciski bottom-sheeta */
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	}
	.mcm-item { padding-right: 0; border-right: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(132, 127, 118, .25); }
	.mcm-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.mcm-panel { animation: none; }
	.mshe-toast { transition: none; }
}

/* Owca-maskotka na PDP: sekcja Pielęgnacja (pod zdjęciem, rysuje się scrollem),
   nagłówek rozmiarówki oraz baner "Dodano do koszyka" (.mcm-owca) */
/* Owca-naklejka w Pielęgnacji (wariant B z makiety, wybór Tomasza 25.08):
   siedzi na dolnej krawędzi kadru, lekko poza nim - lewa kolumna kończy się
   zdjęciem, bez doklejonej pustki. Kremowy kafelek, bo kontur ginął na
   ciemnym zdjęciu. */
.ps-owca-badge {
	position: absolute;
	right: 14px;
	bottom: -30px;
	/* poza "pierze w misce" szersza niż wyższa - kafelek szerszy niż przy czytającej (118px) */
	/* zmienna, bo naklejka ze śpiącą owcą (leżąca, viewBox 3:2) potrzebuje więcej */
	width: var(--owca-badge-w, 132px);
	background: var(--c-cream);
	border: 1px solid rgba(132,127,118,.3);
	border-radius: 18px;
	padding: 8px 6px 4px;
	box-shadow: 0 6px 16px rgba(76,59,67,.14);
}
/* Owca w rozmiarówce: lewa kolumna pod nagłówkiem (jak owca w Pielęgnacji
   pod zdjęciem). Span na zapas wierszy + align-self, żeby jej wysokość nie
   rozpychała pojedynczego wiersza treści obok. */
.ps-narrow > .ps-owca-inline { grid-column: 1; grid-row: 2 / span 20; align-self: start; justify-self: start; }
/* 220px (Tomasz 01.09: "stanowczo za mała, a jest duże pole") - lewa kolumna
   grida ma 240-380px, owca wypełnia ją zamiast ginąć. */
.ps-owca-badge--spi { --owca-badge-w: 176px; padding: 10px 8px 6px; }
.ps-owca-inline { display: block; margin: 18px 0 16px; width: 220px; }
.ps-owca-inline.owca-kolor { width: 180px; }
.mcm-owca { width: 66px; margin-left: auto; }
/* Poza "wózek": większa i odsunięta od "×"; wjeżdża z prawej razem z banerem */
.mcm-owca.owca-kolor { width: 84px; margin-right: 40px; animation: owca-in .45s ease-out both; }
@keyframes owca-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .mcm-owca.owca-kolor { width: 64px; margin-right: 8px; } }
@media (prefers-reduced-motion: reduce) { .mcm-owca.owca-kolor { animation: none; } }

/* ============================================================
   Audyt mobile 2026-08 (raport m3/m6) - inputy bez auto-zoomu iOS.
   (Style formularza opinii usunięte 25.09.2026 - formularza na karcie już nie ma.)
   ============================================================ */

/* iOS: font-size < 16px w polu formularza = auto-zoom przy fokusie.
   Wszystkie inputy/selecty/textarea z zakresu product.css na >= 16px. */
@media (max-width: 720px) {
	.waitlist-form input[type="email"],
	.woocommerce div.product form.cart .variations select,
	.woocommerce div.product form.cart .qty,
	.srf-row input,
	.srf-row textarea {
		font-size: 16px;
	}
	/* .qty ma width 40px - 16px font nadal się mieści (3 cyfry) */
}