/* 80-responsive.css - mobile nav + comprehensive responsive fixes */

/* ─────────────────────────────────────────────
   GLOBAL - brak poziomego przewijania na każdej stronie
   ───────────────────────────────────────────── */

/* overflow-x:clip (zamiast hidden) - nie tworzy nowego scroll containera,
   więc nie psuje position:sticky na .kn-header.
   .site (#page) MUSI być nadpisane: Storefront ustawia .site{overflow-x:hidden},
   co czyni #page scroll containerem i odkleja sticky header (przewija się z treścią). */
html,
body,
.site {
	overflow-x: clip;
}

/* Hero images: na narrow viewportach - kontener dopasowany do proporcji zdjęcia */
@media (max-width: 600px) {
	/* Roses/secondary hero (2048x1204) - kontener = proporcje zdjęcia, brak pustej przestrzeni */
	.kn-hero--secondary {
		height: auto !important;
		min-height: unset !important;
		padding-block: 0 !important;
		aspect-ratio: 2048 / 1204;
	}
	.kn-hero__media--roses {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}

	/* Portrait hero (hero-portret.jpg 1373x2048): cover bez powtarzania */
	.kn-hero--portrait {
		height: auto !important;
		min-height: unset !important;
		padding-block: 0 !important;
		aspect-ratio: 1373 / 2048;
	}
	.kn-hero__media--portrait {
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center 15% !important;
	}

	/* Wspomnienia hero (Wspomnienia.jpeg 1024x1024): kwadrat - brak przycinania */
	.kn-wspomnienia__hero {
		min-height: unset !important;
		aspect-ratio: 1 / 1;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
	}
}

/* ─────────────────────────────────────────────
   HAMBURGER BUTTON
   ───────────────────────────────────────────── */

.kn-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	border-radius: var(--kn-radius-md);
	cursor: pointer;
	padding: 8px;
	flex-shrink: 0;
	transition: background var(--kn-dur) var(--kn-ease);
}

.kn-nav-toggle:hover { background: var(--kn-cream-100); }

.kn-nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--kn-ink-900);
	border-radius: 2px;
	transition: transform 280ms var(--kn-ease), opacity 280ms var(--kn-ease);
	transform-origin: center;
}

.kn-nav-toggle.is-active .kn-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kn-nav-toggle.is-active .kn-nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kn-nav-toggle.is-active .kn-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────────────────────────────────────────
   MOBILE NAV PANEL
   ───────────────────────────────────────────── */

.kn-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 49;
	background: var(--kn-paper);
	padding: 80px var(--kn-gutter) max(2rem, env(safe-area-inset-bottom));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--kn-dur) var(--kn-ease), transform var(--kn-dur) var(--kn-ease);
	pointer-events: none;
}

/* Dynamic viewport height - uwzględnia chowający się pasek URL na mobile */
@supports (height: 100dvh) {
	.kn-mobile-nav {
		height: 100dvh;
	}
}

.kn-mobile-nav.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.kn-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kn-mobile-menu__list > li {
	border-bottom: 1px solid var(--kn-border);
}

.kn-mobile-menu__list > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .9rem 0;
	font-family: var(--kn-font-heading);
	font-weight: var(--kn-fw-light);
	font-size: 1.25rem;
	color: var(--kn-ink-900);
	letter-spacing: .01em;
}

.kn-mobile-menu__list > li > a:hover { color: var(--kn-accent-dark); }

/* Strzałka w mobile menu - większa strefa kliknięcia, po prawej krawędzi */
.kn-mobile-menu__list .kn-menu__chev {
	width: 20px;
	height: 20px;
	margin-left: auto;
	padding: 10px;
	box-sizing: content-box;
	color: var(--kn-ink-700);
	flex-shrink: 0;
}

/* Submenu zwinięte domyślnie, rozwija się gdy li ma klasę .is-open */
.kn-mobile-menu__list .sub-menu {
	list-style: none;
	padding: 0 0 0 1rem;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height var(--kn-dur) var(--kn-ease), opacity var(--kn-dur) var(--kn-ease), padding-bottom var(--kn-dur) var(--kn-ease);
}

.kn-mobile-menu__list > li.is-open > .sub-menu {
	max-height: 800px;
	opacity: 1;
	padding-bottom: .75rem;
}

.kn-mobile-menu__list > li.is-open > a .kn-menu__chev {
	transform: rotate(180deg);
}

.kn-mobile-menu__list .sub-menu li { border: none; }

.kn-mobile-menu__list .sub-menu li a {
	display: block;
	padding: .45rem 0;
	font-size: var(--kn-fs-base);
	color: var(--kn-ink-700);
}

.kn-mobile-menu__list .sub-menu li a:hover { color: var(--kn-accent-dark); }

html.kn-nav-open,
html:has(body.kn-nav-open) { overflow: hidden; }
body.kn-nav-open { overflow: hidden; overscroll-behavior: contain; touch-action: none; }

/* Stopka menu mobilnego - konto + koszyk */
.kn-mobile-nav__footer {
	display: flex;
	gap: 1rem;
	padding-top: 1.5rem;
	margin-top: .5rem;
}

.kn-mobile-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px 10px 14px;
	border: 1.5px solid var(--kn-border);
	border-radius: var(--kn-radius-pill);
	font-family: var(--kn-font-body);
	font-size: var(--kn-fs-sm);
	font-weight: var(--kn-fw-medium);
	color: var(--kn-ink-800);
	text-decoration: none;
	transition: background var(--kn-dur) var(--kn-ease), border-color var(--kn-dur) var(--kn-ease);
}

.kn-mobile-nav__link svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.kn-mobile-nav__link:hover {
	background: var(--kn-cream-100);
	border-color: var(--kn-accent);
	color: var(--kn-accent-dark);
}

.kn-mobile-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--kn-accent);
	color: var(--kn-paper);
	font-size: 11px;
	font-weight: var(--kn-fw-semibold);
	line-height: 1;
}

/* ─────────────────────────────────────────────
   PONIŻEJ MENU (<= 900px) - pokaz hamburger
   ───────────────────────────────────────────── */

@media (max-width: 900px) {
	.kn-nav-toggle { display: flex; }
	.kn-mobile-nav { display: block; }

	.kn-header__inner {
		grid-template-columns: auto 1fr auto !important;
		justify-content: space-between;
	}

	.kn-header__nav { display: none !important; }
	.kn-header__tools { gap: 6px; }
}

/* ─────────────────────────────────────────────
   TABLET (<= 768px)
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
	/* Single product: stack */
	.single-product div.product {
		grid-template-columns: 1fr !important;
	}

	/* Galeria produktu - agresywne ograniczenie wysokości (belt + suspenders) */
	.single-product div.product .woocommerce-product-gallery,
	.woocommerce-product-gallery {
		max-height: 52vh !important;
		overflow: hidden !important;
	}
	/* FlexSlider viewport: JS ustawia height inline - nadpisz */
	.woocommerce-product-gallery .flex-viewport {
		max-height: 52vh !important;
		overflow: hidden !important;
	}
	.single-product div.product .woocommerce-product-gallery img,
	.woocommerce-product-gallery img {
		max-height: 50vh !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		background: var(--kn-cream-50);
		margin: 0 auto !important;
		display: block !important;
	}

	/* WC account: stack */
	.woocommerce-account .u-columns.col2-set,
	.woocommerce-account .col2-set {
		grid-template-columns: 1fr !important;
	}

	/* Wspomnienia form smaller padding */
	.kn-form { padding: 1.25rem; }

	/* WC content area padding */
	.woocommerce-page .site-content,
	.post-type-archive-product .site-content,
	.tax-product_cat .site-content,
	.single-product .site-content {
		padding-inline: 1rem;
	}

	/* Cat grid 2 col */
	.kn-categories__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
	.kn-category--tall { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* ─────────────────────────────────────────────
   MOBILE (<= 600px)
   ───────────────────────────────────────────── */

@media (max-width: 600px) {
	/* iOS zoom prevention on form fields */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px !important;
	}

	/* Benefits: 2 cols, ostatni wyśrodkowany gdy samotny */
	.kn-benefits__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.25rem;
	}
	.kn-benefit:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 200px;
		margin: 0 auto;
	}

	/* Section head: stack */
	.kn-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	/* Inspire: stack */
	.kn-inspire__layout {
		grid-template-columns: 1fr !important;
	}

	.kn-inspire__media { aspect-ratio: 4 / 3; }

	/* Pills grid: 1 col */
	.kn-inspire__grid { grid-template-columns: 1fr 1fr; gap: .75rem; }

	/* WC content area: no radius, less padding */
	.woocommerce-page .content-area,
	.post-type-archive-product .content-area,
	.tax-product_cat .content-area,
	.single-product .content-area {
		padding: 1.25rem !important;
		border-radius: var(--kn-radius-md) !important;
	}

	/* WC product grid: 2 cols on phone */
	.woocommerce ul.products,
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem clamp(.75rem, 3vw, 1.25rem) !important;
	}

	/* WC category hero smaller */
	.woocommerce-products-header {
		min-height: 180px !important;
		padding: 1.25rem !important;
	}

	.woocommerce-products-header__title.page-title {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
	}

	/* Breadcrumb word-wrap */
	.woocommerce-breadcrumb {
		word-break: break-word;
		white-space: normal;
	}

	/* Bottom tiles height */
	.kn-bottom-tile__link { aspect-ratio: 3 / 2; }

	/* Logo smaller */
	.kn-logo__img { height: 44px; width: 44px; }
	.kn-logo__img--circle { height: 54px; width: 54px; }

	/* Wspomnienia hero - aspect-ratio:1/1 (linia 41) już kontroluje wysokość */

	/* Cat grid: 2 cols (still) */
	.kn-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }

	/* Zdjęcia produktów: zmień 1:1 → 4:3 by nie były za wysokie na wąskich ekranach */
	.kn-product-card__media img {
		aspect-ratio: 4 / 3 !important;
	}
	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
		aspect-ratio: 4 / 3 !important;
	}

	/* Tiles kategorii: 1:1 → 3:2 by nie wypełniały całego ekranu */
	.kn-cat-tile__media {
		aspect-ratio: 3 / 2 !important;
	}

	/* Homepage produkty tabs: zawsze 2 kolumny na mobile */
	.kn-products__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ─────────────────────────────────────────────
   VERY SMALL (<= 400px)
   ───────────────────────────────────────────── */

@media (max-width: 400px) {
	/* WC product grid: zachowaj 2 kolumny nawet na bardzo małych */
	.woocommerce ul.products,
	ul.products.columns-3,
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: .75rem clamp(.5rem, 2vw, .75rem) !important;
	}

	/* Cat grid: 2 col zawsze (1 col robiło kafelki 358x358px = cały ekran) */
	.kn-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; }

	/* Bottom tiles: 1 col (są wide landscape, ok) */
	.kn-bottom-tiles { grid-template-columns: 1fr !important; }

	/* Benefits: 2 cols (2×2) — równo dla 4 pozycji nawet na małych telefonach */
	.kn-benefits__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.kn-benefit:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 200px;
		margin: 0 auto;
	}

	/* Hero text */
	.kn-hero__title { font-size: clamp(2rem, 10vw, 3rem); }
}

/* ─────────────────────────────────────────────
   ZWYKŁE STRONY WORDPRESS (page, blog, single, archive)
   Cream background + karta-content z białym tłem
   ───────────────────────────────────────────── */

/* Cream background na całej stronie dla nie-WC, nie-home stron */
.page:not(.home) .site-content,
.blog .site-content,
.single .site-content,
.archive .site-content,
.error404 .site-content {
	background: var(--kn-cream-50, #fbf7f1);
}

/* Karta zawartości (biała, z zaokrągleniami) w środku cream tła */
.page:not(.home) .content-area,
.blog .content-area,
.single .content-area,
.archive .content-area,
.error404 .content-area {
	background: var(--kn-paper, #fff);
	max-width: var(--kn-container-narrow, 1080px);
	margin-inline: auto;
	margin-block: 2rem;
	padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: var(--kn-radius-lg, 18px);
	box-shadow: 0 4px 24px rgba(31,29,26,.06);
}

/* Tytuł strony z odpowiednim marginesem */
.page:not(.home) .entry-title,
.single .entry-title {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kn-cream-200, #efe8db);
}

/* Breadcrumb - mały margines nad content-area */
.woocommerce-breadcrumb {
	margin-bottom: .5rem;
}

/* Zawartość wpisu/strony - czytelne odstępy */
.entry-content p,
.entry-content ul,
.entry-content ol {
	line-height: 1.65;
	margin-bottom: 1.25rem;
	color: var(--kn-ink-700, #4a4641);
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2rem;
	margin-bottom: 1rem;
}

/* 404 - elegancki komunikat */
.error-404 .page-header {
	text-align: center;
	padding: 2rem 0;
}

/* ─────────────────────────────────────────────
   PHOTOSWIPE - zawsze widoczny przycisk X na mobile
   ───────────────────────────────────────────── */

/* Nie chowaj top-baru w trybie idle - na mobile użytkownik nie wie że trzeba tapnąć */
.pswp__ui--idle .pswp__top-bar {
	opacity: 1 !important;
	transition: none !important;
}
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
	opacity: 0 !important;
}

/* Ciemne tło top-baru żeby X był widoczny na jasnych zdjęciach */
.pswp__top-bar {
	background: rgba(0, 0, 0, 0.72) !important;
	height: 52px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 8px !important;
}

/* Większy / bardziej widoczny przycisk zamknięcia */
.pswp__button--close {
	opacity: 1 !important;
	width: 44px !important;
	height: 44px !important;
}

/* Podpowiedź "dotknij aby zamknąć" w napisie podpisu */
.pswp__caption__center::after {
	content: "Dotknij × aby zamknąć";
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: rgba(255,255,255,.6);
	text-align: center;
}

/* ─────────────────────────────────────────────
   Formularz komentarzy - czyszczenie floatów Storefronta
   (Storefront daje .comment-form-author/email float:left;width:29.4%
   - bez clearu cookies-consent wciska się w wolne ~29% z prawej)
   ───────────────────────────────────────────── */

.comment-form-cookies-consent {
	clear: both;
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	width: 100%;
	margin: .75rem 0;
}

.comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.comment-form-cookies-consent label {
	font-size: var(--kn-fs-sm, .9rem);
	line-height: 1.45;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.form-submit {
	clear: both;
}

/* ─────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────── */

@media print {
	.kn-header,
	.kn-footer,
	.kn-nav-toggle,
	.kn-mobile-nav,
	.kn-benefits,
	.kn-carousel__nav {
		display: none !important;
	}
}