/*
 * Wersja C „Jasna”: sklep, kategorie i karta nosidła.
 * Lista: wyśrodkowany nagłówek i pigułki, trzy duże kafle 4:5 na szarym tle (na telefonie jeden pod drugim).
 * Karta: duża galeria z miniaturami pionowo z lewej (na telefonie przewijany rząd pod zdjęciem), panel najmu
 * z prawej w białej karcie z cienką linią, opis i parametry pod kartą jako akordeon, czysty pasek „Dodaj do koszyka”
 * na dole telefonu (wn-pasek z wtyczki najmu).
 */

/* Lista nosideł */
.wyglad-jasna .shop__inner { padding-top: 24px; }
.wyglad-jasna .woocommerce-products-header { align-items: center; max-width: none; padding: 24px 0 8px; text-align: center; }
.wyglad-jasna .woocommerce-products-header__title.page-title { font-size: 40px; }
.wyglad-jasna .woocommerce-products-header .term-description,
.wyglad-jasna .woocommerce-products-header .page-description { max-width: 36rem; font-size: 16px; }
.wyglad-jasna .chips { justify-content: center; padding: 16px 0 32px; }
@media (max-width: 639.98px) {
	.wyglad-jasna .chips { flex-wrap: nowrap; justify-content: flex-start; max-width: calc(100% + var(--gutter-l) + var(--gutter-r)); margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter-l) var(--gutter-r); overflow-x: auto; scrollbar-width: none; }
	.wyglad-jasna .chip { flex: 0 0 auto; }
	.wyglad-jasna .woocommerce-products-header { align-self: stretch; }
}
.wyglad-jasna .chip { min-height: 44px; padding-inline: 18px; border-color: transparent; background: var(--c-soft); color: var(--c-ink); font-weight: 500; }
.wyglad-jasna .chip:hover { border-color: var(--c-ink); }
.wyglad-jasna .chip.is-active { border-color: var(--c-ink); background: var(--c-ink); color: #FFFFFF; }
.wyglad-jasna.woocommerce .woocommerce-result-count { margin-bottom: 16px; font-size: 14px; }
.wyglad-jasna.woocommerce .woocommerce-ordering { margin-bottom: 16px; }
@media (max-width: 639.98px) {
	.wyglad-jasna.woocommerce .woocommerce-result-count { display: none; }
	.wyglad-jasna.woocommerce .woocommerce-ordering { float: none; display: flex; justify-content: center; }
}
.wyglad-jasna.woocommerce .woocommerce-ordering select { min-height: 44px; border-color: transparent; border-radius: 9999px; background-color: var(--c-soft); font-size: 14px; }
@media (min-width: 1024px) {
	.wyglad-jasna .woocommerce-products-header { padding-top: 40px; }
	.wyglad-jasna .woocommerce-products-header__title.page-title { font-size: 56px; }
}

.wyglad-jasna.woocommerce ul.products,
.wyglad-jasna .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); gap: 40px 24px; }
/* WooCommerce daje li.product szerokość w procentach dla ul.columns-3 (selektor [class*=columns-]); w siatce to zbędne. */
.wyglad-jasna :is(.woocommerce, .woocommerce-page) ul.products[class*="columns-"] li.product,
.wyglad-jasna.woocommerce ul.products[class*="columns-"] li.product { float: none; width: auto; margin: 0; clear: none; }
.wyglad-jasna.woocommerce ul.products li.product,
.wyglad-jasna .woocommerce ul.products li.product { gap: 12px; text-align: center; align-items: center; }
.wyglad-jasna.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { align-items: center; width: 100%; gap: 10px; }
/* Zdjęcia produktów mają białe tło: contain z marginesem i lekki filtr, żeby kafel wyglądał jak szare pole #F5F3F0. */
.wyglad-jasna.woocommerce ul.products li.product a img,
.wyglad-jasna .woocommerce ul.products li.product a img { width: 100%; margin-bottom: 8px; padding: 8%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--radius-xl); background: #FFFFFF; filter: brightness(.965) sepia(.05); }
.wyglad-jasna.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wyglad-jasna .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 500 !important; font-size: 22px; letter-spacing: -.02em; }
.wyglad-jasna.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--c-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.wyglad-jasna.woocommerce ul.products li.product .price { font-size: 16px; }
.wyglad-jasna.woocommerce ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; align-self: center; min-height: 44px; padding: 0 22px; border: 1px solid var(--c-ink); background: transparent; color: var(--c-ink); line-height: 1.2; }
.wyglad-jasna.woocommerce ul.products li.product .button:hover { background: var(--c-ink); color: #FFFFFF; }
@media (min-width: 560px) {
	.wyglad-jasna.woocommerce ul.products,
	.wyglad-jasna .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Komputer: do trzech kafli po najwyżej 440 px, wyśrodkowane (przy jednym albo dwóch nosidłach duże kafle bez pustej kolumny). */
@media (min-width: 1024px) {
	.wyglad-jasna.woocommerce ul.products,
	.wyglad-jasna .woocommerce ul.products { grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); justify-content: center; gap: 56px 40px; }
}
.wyglad-jasna .term-seo-text { max-width: 44rem; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 15px; text-align: center; }

/* Karta nosidła: galeria 7/12 z lewej, panel najmu 5/12 z prawej, reszta pod spodem na całą szerokość */
body.wyglad-jasna #content div.product :is(div.images, div.summary) { float: none; width: auto; margin: 0; }
.wyglad-jasna.woocommerce div.product { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
	.wyglad-jasna.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 64px; align-items: start; }
	.wyglad-jasna.woocommerce div.product > * { grid-column: 1 / -1; }
	.wyglad-jasna.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
	.wyglad-jasna.woocommerce div.product > .summary { grid-column: 2; grid-row: 1; }
}

/* Galeria: duże zdjęcie na szarym tle, miniatury pionowo z lewej (komputer) albo przewijany rząd (telefon) */
.wyglad-jasna.woocommerce div.product div.images { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Zdjęcia mają białe tło: białe pole 4:5 z lekkim filtrem daje ciepłą szarość jak #F5F3F0 (jak kafle listy).
   Bez mix-blend-mode: w przesuwanym wrapperze z transform Chromium gubił je na zrzutach całej strony. */
.wyglad-jasna.woocommerce div.product div.images .flex-viewport { overflow: hidden; border-radius: var(--radius-xl); }
.wyglad-jasna.woocommerce div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child { overflow: hidden; border-radius: var(--radius-xl); }
.wyglad-jasna.woocommerce div.product div.images .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 0; background: #FFFFFF; filter: brightness(.965) sepia(.05); }
.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 64px; width: 64px; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--c-soft); }
.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs li img { aspect-ratio: 1; object-fit: cover; border-radius: 0; background: #FFFFFF; filter: brightness(.965) sepia(.05); opacity: .6; transition: opacity .2s ease; }
.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { opacity: 1; }
.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active) { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.wyglad-jasna.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	top: 16px; right: 16px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; box-shadow: none;
}
@media (min-width: 1024px) {
	/* Galeria przyklejona przy przewijaniu wysokiego panelu najmu (po regule z position: relative wyżej). */
	.wyglad-jasna.woocommerce div.product div.images.woocommerce-product-gallery { position: sticky; top: calc(var(--admin-bar, 0px) + var(--header-h) + var(--nav-h) + 24px); }
	.wyglad-jasna.woocommerce div.product div.images:has(.flex-control-thumbs) { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
	.wyglad-jasna.woocommerce div.product div.images:has(.flex-control-thumbs) .flex-viewport { grid-column: 2; grid-row: 1; }
	.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; max-height: 640px; padding: 0; overflow: hidden auto; }
	.wyglad-jasna.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 auto; width: 84px; }
}

/* Panel po prawej: marka kapitalikami, nazwa, krótki opis, cena */
.wyglad-jasna.woocommerce div.product .product-title__marka { margin-bottom: 8px; color: var(--c-muted); font-size: 15px; font-weight: 600; letter-spacing: .08em; font-variant-caps: all-small-caps; font-synthesis-small-caps: auto; }
.wyglad-jasna.woocommerce div.product .product_title { margin-bottom: 12px; font-size: 36px; }
.wyglad-jasna.woocommerce div.product .woocommerce-product-details__short-description { font-size: 16px; }
.wyglad-jasna.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 12px; }
.wyglad-jasna.woocommerce div.product p.price { margin: 0 0 12px; font-size: 17px; color: var(--c-ink); }
.wyglad-jasna .wn-egzemplarze__pigulka { border-color: transparent; background: var(--c-roz); color: var(--c-ink); font-weight: 500; }
@media (min-width: 1024px) {
	.wyglad-jasna.woocommerce div.product .summary { padding-top: 8px; }
	.wyglad-jasna.woocommerce div.product .product_title { font-size: 48px; }
}

/* Panel najmu: biała karta z cienką linią, pakiety na szarym tle, wybrane dni czarne, zakres pudrowy */
.wyglad-jasna .wn-najem__karta { gap: 22px; padding: 22px; border: 1px solid var(--c-line); border-radius: var(--radius-xl); background: #FFFFFF; }
.wyglad-jasna .wn-najem__tytul { font-weight: 500; }
.wyglad-jasna .wn-najem__znak { background: var(--c-ink); }
.wyglad-jasna .wn-najem__etykieta { font-weight: 600; }
.wyglad-jasna .wn-najem__podpowiedz { color: var(--c-muted); }
.wyglad-jasna .wn-pakiet { border: 1px solid transparent; border-radius: var(--radius); background: var(--c-soft); }
.wyglad-jasna .wn-pakiet:hover { border-color: var(--c-ink); }
.wyglad-jasna .wn-pakiet[aria-pressed="true"] { border-color: var(--c-ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--c-ink); }
.wyglad-jasna .wn-pakiet__nazwa { font-weight: 600; }
.wyglad-jasna .wn-pakiet__dni { color: var(--c-muted); }
/* S4d, telefon: przy 3 pakietach i „Własnych datach” pakiety w rzędzie po 3, „Własne daty” pod nimi na całą szerokość
   (4 w rzędzie po ok. 72 px: „Weekend” dotykał ramki). Tekst min. 8 px od ramki, cel dotyku min. 44 px. */
@media (max-width: 479.98px) {
	.wyglad-jasna .wn-pakiet { padding-inline: 8px; }
	.wyglad-jasna .wn-pakiety:has(> .wn-pakiet--wlasne:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wyglad-jasna .wn-pakiet--wlasne:nth-child(4):last-child { grid-column: 1 / -1; flex-flow: row wrap; align-content: center; align-items: baseline; column-gap: 8px; min-height: 52px; }
}
.wyglad-jasna .wn-kal__strzalka { width: 44px; height: 44px; border-color: var(--c-line); }
.wyglad-jasna .wn-kal__strzalka:hover { border-color: var(--c-ink); }
.wyglad-jasna .wn-kal__miesiac { font-weight: 500; }
.wyglad-jasna .wn-kal__tydzien { color: var(--c-muted); }
.wyglad-jasna .wn-dzien { height: 44px; }
.wyglad-jasna .wn-dzien[data-stan="free"]:hover { background: var(--c-soft); }
.wyglad-jasna .wn-dzien[data-stan="busy"] { color: var(--c-muted); background: repeating-linear-gradient(135deg, #FFFFFF 0 4px, var(--c-soft) 4px 8px); }
.wyglad-jasna .wn-dzien[data-stan="in-range"] { background: var(--c-roz); color: var(--c-ink); }
.wyglad-jasna .wn-dzien[data-stan="edge"] { background: var(--c-ink); color: #FFFFFF; font-weight: 600; }
.wyglad-jasna .wn-kal__probka--wybrane { background: var(--c-ink); }
.wyglad-jasna .wn-kal__legenda { color: var(--c-muted); }
.wyglad-jasna .wn-podsumowanie { border-top-color: var(--c-line); }
.wyglad-jasna .wn-podsumowanie dt { color: var(--c-muted); }
.wyglad-jasna .wn-najem__suma { font-family: var(--font-display); font-weight: 500; letter-spacing: -.03em; }
.wyglad-jasna .wn-najem__info,
.wyglad-jasna .wn-najem__wysylka,
.wyglad-jasna .wn-najem__zmiana { border-radius: var(--radius); background: var(--c-soft); color: var(--c-ink); }
.wyglad-jasna .wn-najem__info { color: var(--c-muted); }
.wyglad-jasna .wn-najem__zmiana a { color: var(--c-ink); }
.wyglad-jasna .wn-najem__dodaj { min-height: 52px; }
@media (min-width: 640px) { .wyglad-jasna .wn-najem__karta { padding: 28px; } }

/* Powiadom mnie: szara karta, pole jak w kasie */
.wyglad-jasna .wn-powiadom { gap: 10px; padding: 20px; border: 0; border-radius: var(--radius-lg); background: var(--c-soft); }
.wyglad-jasna .wn-powiadom__tytul { font-weight: 600; }
.wyglad-jasna .wn-powiadom__wiersz input { min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 9999px; background: #FFFFFF; }
.wyglad-jasna .wn-powiadom__wiersz input:focus { border-color: var(--c-ink); outline: none; }

/* Zalety pod panelem: drobne wiersze z ikoną, oddzielone linią */
.wyglad-jasna .wyp-zalety { gap: 0; margin: 8px 0 0; border-top: 1px solid var(--c-line); font-size: 15px; }
.wyglad-jasna .wyp-zalety__pozycja { min-height: 52px; border-bottom: 1px solid var(--c-line); }
.wyglad-jasna .wyp-zalety__ikona { color: var(--c-ink); }

/* Pasek „Dodaj do koszyka” na dole telefonu: biały, z cieniem zamiast linii, czarna pigułka */
@media (max-width: 1023px) {
	.wyglad-jasna .wn-pasek { gap: 16px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 0; background: #FFFFFF; box-shadow: 0 -8px 24px rgba(17, 18, 20, .08); }
	.wyglad-jasna .wn-pasek__termin { color: var(--c-muted); font-size: 13px; }
	.wyglad-jasna .wn-pasek__suma { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
	.wyglad-jasna .wn-pasek__dodaj { min-height: 48px; padding-inline: 24px; }
}

/* Pod kartą: akordeon na całą szerokość, nagłówek sekcji i cienkie linie */
.wyglad-jasna .j-akordeon { width: 100%; max-width: 880px; margin: 48px auto 0; }
.wyglad-jasna .j-akordeon__naglowek { margin: 0 0 20px; font-size: 30px; text-align: center; }
.wyglad-jasna .j-akordeon__sekcja { border-top: 1px solid var(--c-ink-20); }
.wyglad-jasna .j-akordeon__sekcja:last-of-type { border-bottom: 1px solid var(--c-ink-20); }
.wyglad-jasna .j-akordeon__tytul { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; font-size: 18px; font-weight: 500; list-style: none; cursor: pointer; }
.wyglad-jasna .j-akordeon__tytul::-webkit-details-marker { display: none; }
.wyglad-jasna .j-akordeon__znak { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--c-soft); }
.wyglad-jasna .j-akordeon__znak::before,
.wyglad-jasna .j-akordeon__znak::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: var(--c-ink); transform: translate(-50%, -50%); transition: transform .2s ease; }
.wyglad-jasna .j-akordeon__znak::after { transform: translate(-50%, -50%) rotate(90deg); }
.wyglad-jasna .j-akordeon__sekcja[open] .j-akordeon__znak::after { transform: translate(-50%, -50%) rotate(0deg); }
.wyglad-jasna .j-akordeon__tytul:hover .j-akordeon__znak { background: var(--c-roz); }
.wyglad-jasna .j-akordeon__tresc { padding: 0 0 28px; color: var(--c-ink); font-size: 16px; }
.wyglad-jasna .j-akordeon__tresc > :first-child { margin-top: 0; }
.wyglad-jasna .j-akordeon__tresc p { max-width: 44rem; }
.wyglad-jasna .j-akordeon__tresc table { width: 100%; border: 0; border-collapse: collapse; }
.wyglad-jasna .j-akordeon__tresc :is(th, td) { padding: 12px 0; border: 0; border-bottom: 1px solid var(--c-line); background: transparent; text-align: left; vertical-align: top; }
.wyglad-jasna .j-akordeon__tresc th { width: 40%; padding-right: 16px; color: var(--c-muted); font-weight: 500; }
.wyglad-jasna .j-akordeon__tresc td p { margin: 0; }
.wyglad-jasna .j-akordeon__tresc table.shop_attributes tr :is(th, td) { background: transparent !important; font-style: normal; }
.wyglad-jasna .j-akordeon__tresc table.shop_attributes th { font-weight: 500; }
.wyglad-jasna .j-dostawa { display: grid; gap: 0; margin: 0 0 16px; }
.wyglad-jasna .j-dostawa__wiersz { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.wyglad-jasna .j-dostawa dt { font-weight: 600; }
.wyglad-jasna .j-dostawa dd { margin: 0; color: var(--c-muted); }
.wyglad-jasna .j-dostawa__pranie { color: var(--c-muted); }
.wyglad-jasna .j-dostawa__pranie strong { color: var(--c-ink); }
@media (min-width: 640px) {
	.wyglad-jasna .j-dostawa__wiersz { grid-template-columns: 40% minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
	.wyglad-jasna .j-akordeon { margin-top: 96px; }
	.wyglad-jasna .j-akordeon__naglowek { margin-bottom: 28px; font-size: 40px; }
}

/* Podobne nosidła (gdyby były włączone) */
.wyglad-jasna.woocommerce div.product :is(.related, .upsells) > h2 { margin: 80px 0 32px; font-size: 36px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.wyglad-jasna .j-akordeon__znak::after { transition: none; }
}