/*
 * Karta produktu z bloków (od wersji 2.3).
 * Wygląd sekcji daje dawny arkusz (legacy/global.css, klasy sp-*); tu są dopasowania do budowy bloków:
 * galeria i zakładki (ps-sklep), lista „Instant download / Secure checkout”, FAQ (blok Szczegóły),
 * „You may also like” (Kolekcja produktów WooCommerce), baner klubu (przycisk, obrazek), lista życzeń.
 * Ładowane na karcie produktu i w edytorze.
 */

/* ---------- odstępy: zerowanie domyślnych odstępów bloków jest w style.css (musi być przed arkuszem sp-*) ---------- */
.wp-site-blocks > .strefa-product { margin-block-start: 0; }

/* ---------- okruszki, tytuł, ocena ---------- */
.sp-breadcrumb .wc-block-breadcrumbs { font-size: inherit; }
.strefa-product .sp-rating:empty { display: none; }
.strefa-product .sp-title a { color: inherit; text-decoration: none; }

/* ---------- galeria (blok „Galeria wykroju”): zaznaczona miniatura → duże zdjęcie (do 12 zdjęć) ---------- */
.sp-gallery-inner > .sp-gal-radio:nth-of-type(1):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(1),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(2):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(2),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(3):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(3),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(4):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(4),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(5):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(5),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(6):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(6),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(7):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(7),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(8):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(8),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(9):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(9),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(10):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(10),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(11):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(11),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(12):checked ~ .sp-gallery-main > .sp-gal-slide:nth-child(12) { display: block; }
.sp-gallery-inner > .sp-gal-radio:nth-of-type(1):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(1),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(2):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(2),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(3):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(3),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(4):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(4),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(5):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(5),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(6):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(6),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(7):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(7),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(8):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(8),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(9):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(9),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(10):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(10),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(11):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(11),
.sp-gallery-inner > .sp-gal-radio:nth-of-type(12):checked ~ .sp-gallery-thumbs > .sp-gal-thumb:nth-child(12) { opacity: 1; border-color: var(--color-coral); }
/* układ „jedno pod drugim” i „jedzie z ekranem” (ustawienie bloku) */
@media (min-width: 981px) {
	.sp-gallery-inner--stack .sp-gallery-thumbs { display: none; }
	.sp-gallery-inner--stack .sp-gal-slide { display: block !important; }
	.sp-gallery-inner--stack .sp-gal-slide + .sp-gal-slide { margin-top: 16px; }
	.sp-gallery:has(> .sp-gallery-inner--sticky) { position: sticky; top: 24px; }
}

/* ---------- pole zakupu (wygląd listy życzeń: ps-sklep/bloki/lista-zyczen.css) ---------- */
.ps-opcje-zakupu > .sp-buy { margin: 0; }

/* ---------- „Instant download / Secure checkout”: ikona (obrazek) + pogrubiony nagłówek + tekst ---------- */
.sp-buy-trust li { display: block; position: relative; padding-left: 31px; font-size: 11.5px; line-height: 1.35; color: var(--color-muted); }
.sp-buy-trust li > .sp-buy-trust-ico { position: absolute; left: 0; top: 0; width: 22px; height: 22px; }
.sp-buy-trust li > strong { display: block; }

/* ---------- zakładki (blok „Zakładki”): zaznaczona etykieta → panel (do 8 zakładek) ---------- */
.sp-tabs > .sp-tab-radio:nth-of-type(1):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(1),
.sp-tabs > .sp-tab-radio:nth-of-type(2):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(2),
.sp-tabs > .sp-tab-radio:nth-of-type(3):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(3),
.sp-tabs > .sp-tab-radio:nth-of-type(4):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(4),
.sp-tabs > .sp-tab-radio:nth-of-type(5):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(5),
.sp-tabs > .sp-tab-radio:nth-of-type(6):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(6),
.sp-tabs > .sp-tab-radio:nth-of-type(7):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(7),
.sp-tabs > .sp-tab-radio:nth-of-type(8):checked ~ .sp-tab-panels > .sp-tab-panel:nth-child(8) { display: block; }
.sp-tabs > .sp-tab-radio:nth-of-type(1):checked ~ .sp-tab-labels > label:nth-child(1),
.sp-tabs > .sp-tab-radio:nth-of-type(2):checked ~ .sp-tab-labels > label:nth-child(2),
.sp-tabs > .sp-tab-radio:nth-of-type(3):checked ~ .sp-tab-labels > label:nth-child(3),
.sp-tabs > .sp-tab-radio:nth-of-type(4):checked ~ .sp-tab-labels > label:nth-child(4),
.sp-tabs > .sp-tab-radio:nth-of-type(5):checked ~ .sp-tab-labels > label:nth-child(5),
.sp-tabs > .sp-tab-radio:nth-of-type(6):checked ~ .sp-tab-labels > label:nth-child(6),
.sp-tabs > .sp-tab-radio:nth-of-type(7):checked ~ .sp-tab-labels > label:nth-child(7),
.sp-tabs > .sp-tab-radio:nth-of-type(8):checked ~ .sp-tab-labels > label:nth-child(8) { color: var(--color-text); border-bottom-color: var(--color-coral); }
.sp-tabs > .sp-tab-radio:focus-visible ~ .sp-tab-labels { outline: none; }
/* FAQ = blok „Szczegóły” (dawniej odpowiedź w osobnym div) */
.sp-faq-item > summary ~ * { padding-bottom: 14px; }
.wp-block-details.sp-faq-item summary { cursor: pointer; }
/* opis jedną kolumną, gdy obok nie ma ramki „As a member” */
.sp-desc-grid:not(:has(> .sp-after)) { grid-template-columns: minmax(0, 880px); }
@media (max-width: 980px) { .sp-desc-grid:not(:has(> .sp-after)) { grid-template-columns: 1fr; } }

/* ---------- ramka „As a member you will receive” (produkt klubu) ---------- */
.sp-after li::before { content: "\2713"; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--color-coral); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sp-after .sp-after-cta { margin: 0; }
.sp-after .sp-after-cta a { display: inline-block; font-size: 13px; font-weight: 700; color: var(--color-coral) !important; text-decoration: none !important; }

/* ---------- „You may also like” (Kolekcja produktów – produkty powiązane) ---------- */
.sp-related .wc-block-product-template.sp-related-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sp-related .wc-block-product-template > li.wc-block-product { position: relative; width: auto; margin: 0; padding: 0; text-align: left; }
.sp-related .sp-rel-img .wc-block-components-product-image { margin: 0; }
.sp-related .sp-rel-img .wc-block-components-product-image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-surface); display: block; transition: transform 0.3s ease; }
.sp-related .wc-block-product:hover .sp-rel-img img { transform: scale(1.04); }
.sp-related .sp-rel-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--color-green, #2A8A50); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.sp-related .sp-rel-badge.product-badge--sale { background: var(--color-coral); color: #fff; }
.sp-related .sp-rel-body h3 a { color: inherit; text-decoration: none; }
.sp-related .sp-rel-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* cała karta klikalna, jak dawniej */
.sp-related .wc-block-product:hover .sp-rel-body h3 { color: var(--color-coral); }
.sp-related .sp-rel-price { text-align: left; }
@media (max-width: 980px) { .sp-related .wc-block-product-template.sp-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sp-related .wc-block-product-template.sp-related-grid { grid-template-columns: 1fr; } }

/* ---------- baner klubu ---------- */
.sp-club-form .wp-block-buttons { margin: 0; }
.sp-club-banner-btn.wp-block-button { flex-shrink: 0; }
.sp-club-banner-btn .wp-block-button__link { display: inline-flex; align-items: center; padding: 13px 26px; background: var(--color-text); color: #fff !important; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none !important; transition: transform 0.15s; }
.sp-club-banner-btn .wp-block-button__link:hover { transform: translateY(-2px); }
.sp-club-banner-media .wp-block-image { margin: 0; height: 100%; }

/* ---------- WooCommerce owija cały szablon w div.product – dawniej tę klasę miała tylko ramka produktu (.sp-wrap),
   a stary arkusz daje div.product odstępy na tablecie i telefonie: odstępy wracają na .sp-wrap ---------- */
body.single-product.woocommerce div.product.wp-block-group:has(> .strefa-product) { padding: 0; }
@media (max-width: 1024px) { body.single-product .strefa-product .sp-wrap { padding: 16px 20px; } }
@media (max-width: 480px) { body.single-product .strefa-product .sp-wrap { padding: 12px 16px; } }
.sp-club-banner-btn .wp-block-button__link { font-family: inherit; line-height: inherit; letter-spacing: inherit; }
/* stary arkusz styluje klasę sp-club-banner-btn – w bloku Przycisk ma ją ramka, a wygląd przycisku idzie na link */
.sp-club-form .wp-block-button.sp-club-banner-btn { padding: 0; background: none; border-radius: 0; display: block; }
/* karta „You may also like”: WooCommerce daje elementom karty odstępy z boków – w starej karcie ich nie było */
.sp-related .wc-block-product > .sp-rel-img { margin: 0 0 10px; }
.sp-related .wc-block-product > .sp-rel-body { margin: 0; }
/* ostatni blok w grupie traci dolny margines (zasada bloków) – tu wracają marginesy ze starego arkusza */
.strefa-product .sp-summary > .sp-buy-trust { margin-bottom: 4px; }
.strefa-product .sp-club-banner-media { margin-bottom: -30px; }
.strefa-product > .sp-club-banner { margin-bottom: 40px; }
.sp-related .wp-block-woocommerce-product-collection { margin: 0; }
.sp-related .wc-block-product-template > li.wc-block-product { border: 0; }
@media (min-width: 981px) { /* niżej zdjęcie banera jest ukryte (stary arkusz) */
	.sp-club-banner-media { display: flex; }
	.sp-club-banner-media .wp-block-image { flex: 1 1 auto; }
	.sp-club-banner-media .wp-block-image img { height: 100%; }
}
/* WooCommerce owija szablon w div.woocommerce – stara reguła „.single-product .woocommerce button.button.alt” (16 px)
   zaczęła działać także na telefonie, gdzie dawniej był 15 px */
@media (max-width: 480px) {
	body.single-product .strefa-product form.cart button.single_add_to_cart_button.button { min-height: 50px; font-size: 15px !important; }
}
.strefa-product > .sp-club-banner { margin-top: 8px; }
/* ostatni akapit opisu traci dolny margines (zasada bloków) – jak dawniej 14 px */
.strefa-product .sp-tab-panel .wp-block-woocommerce-product-description > p:last-child { margin-bottom: 14px; }