/* =========================================================================
   PEPTAGEN LAB — Mobile: app-vibe + płynność i stabilność dotyku
   Dolna belka nawigacji, menu jako boczny drawer, chowany nagłówek,
   karuzele snap, cele dotykowe 44px+, brak zoomu na polach (iOS).
   ========================================================================= */

/* --- Płynność dotyku (globalnie, bezpieczne na desktopie) --------------- */
a, button, input, select, textarea, summary, label {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Panele przewijane: własny scroll bez „łańcucha" na body, momentum iOS */
.cart-drawer, .qv-modal, .mobile-menu, .search-panel {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Na ekranach dotykowych wyłącz „unoszenie" hover — zapobiega zacinającym
   się stanom hover po tapnięciu i podnosi płynność scrolla */
@media (hover: none) {
	.card:hover,
	.woocommerce ul.products li.product:hover,
	.rv-card:hover,
	.cat-card:hover,
	.btn:hover,
	a.promo-banner:hover { transform: none; box-shadow: none; }
	.card:hover, .woocommerce ul.products li.product:hover, .rv-card:hover { border-color: var(--color-line); }
}

/* --- Dolna belka nawigacji (app tab bar) --------------------------------- */
.bottom-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
	display: none;
	grid-auto-flow: column; grid-auto-columns: 1fr;
	align-items: stretch;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--color-line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Każda pozycja ma identyczną strukturę: slot ikony o stałej wysokości
   + podpis. Dzięki temu podpisy są w jednej linii niezależnie od tego,
   czy ikona ma badge (koszyk), czy nie. */
.bottom-nav__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px;
	min-height: 56px;
	padding: 6px 2px;
	background: none; border: 0; cursor: pointer;
	text-decoration: none;
	color: var(--color-text-muted);
	transition: color var(--dur) var(--ease);
}
.bottom-nav__icon {
	position: relative;
	display: grid; place-items: center;
	width: 26px; height: 26px;
	flex: none;
}
.bottom-nav__icon svg { width: 22px; height: 22px; display: block; }
.bottom-nav__label {
	font-family: var(--font-body);
	font-size: 10.5px; font-weight: var(--fw-medium);
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-align: center;
}
.bottom-nav__item:active { color: var(--color-text); }
.bottom-nav__item.is-active { color: var(--pep-ink); }
.bottom-nav__item.is-active svg { color: var(--pep-gold-700); }
/* Badge kotwiczony do slotu ikony, nie do całej pozycji */
.bottom-nav .header-cart__count { top: -5px; right: -7px; }

@media (max-width: 900px) {
	.bottom-nav { display: grid; }

	/* Miejsce na belkę — treść i stopka nie chowają się pod nią */
	body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

	/* Sticky „dodaj do koszyka" siedzi NAD belką */
	.sticky-atc {
		bottom: calc(56px + env(safe-area-inset-bottom, 0px));
		padding-bottom: var(--space-3);
	}

	/* Nagłówek chowa się przy scrollu w dół, wraca przy scrollu w górę */
	.site-header {
		transition: transform 260ms var(--ease), box-shadow var(--dur) var(--ease);
	}
	.site-header.nav-up { transform: translateY(-100%); }

	/* Ikony nagłówka: koszyk/konto zdubluwane w belce — chowamy koszyk,
	   zostawiamy konto i lupę (mniejszy tłok, większe cele) */
	.header-actions > .header-cart { display: none; }
	.header-actions .btn { display: none; }

	/* Nawigacja desktopowa nie pełni roli menu mobilnego — menu mobilne to
	   dedykowany drawer `.mobile-menu` (patrz niżej) */
	.main-nav { display: none !important; }

	/* --- Cele dotykowe i formularze -------------------------------------- */
	.btn { min-height: 44px; }
	.btn--sm { min-height: 40px; }
	.qty-step { width: 2.8em; min-height: 44px; }
	.quantity.has-steppers input.qty { min-height: 44px; }
	.nav-toggle { min-width: 44px; min-height: 44px; }
	.header-icon { padding: 10px; margin: -10px 0; }

	/* iOS nie przybliża pól z fontem >= 16px */
	input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
	input[type="password"], input[type="number"], select, textarea,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.search-panel__input { font-size: 16px !important; }

	/* Drawer koszyka i quick view na pełną wysokość/szerokość małego ekranu */
	.cart-drawer { width: min(400px, 100vw); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
	.qv-modal { width: 94vw; max-height: 86vh; padding: var(--space-5); }

	/* Banery i sekcje: ciaśniejsze odstępy, pełniejsza szerokość */
	.hero { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }
	.hero__meta { gap: var(--space-4); }
	.hero__meta div { min-width: 90px; }
	.banner { border-radius: var(--radius-lg); }
	.section { padding-block: var(--space-8); }

	/* Tabele Woo (koszyk itd.) przewijane w poziomie zamiast łamać layout */
	.woocommerce table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Karuzele produktów ze snapem (małe ekrany) --------------------------- */
@media (max-width: 719px) {
	#bestsellery ul.products,
	.related ul.products,
	.upsells ul.products,
	.cross-sells ul.products {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: 74%;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--space-4);
		scrollbar-width: none;
		padding-bottom: var(--space-2);
	}
	#bestsellery ul.products::-webkit-scrollbar,
	.related ul.products::-webkit-scrollbar,
	.upsells ul.products::-webkit-scrollbar,
	.cross-sells ul.products::-webkit-scrollbar { display: none; }

	#bestsellery ul.products li.product,
	.related ul.products li.product,
	.upsells ul.products li.product,
	.cross-sells ul.products li.product { scroll-snap-align: start; }
}

/* --- Bardzo małe ekrany ----------------------------------------------------- */
@media (max-width: 380px) {
	.bottom-nav__item span { font-size: 10px; }
	.hero h1 { font-size: 1.9rem; }
}

/* =========================================================================
   Dopracowanie mobile: koszyk, checkout, stopka, formularze
   ========================================================================= */
@media (max-width: 900px) {

	/* Koszyk i checkout: podsumowanie nie jest sticky (mało miejsca) */
	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout #order_review { position: static !important; }

	/* Tabele Woo nie przewijają się w poziomie tam, gdzie przerobiliśmy je
	   na karty — nadpisujemy wcześniejszą regułę */
	.woocommerce-cart table.cart,
	.woocommerce-cart .cart_totals table.shop_table,
	.woocommerce-checkout table.shop_table { display: table; overflow: visible; }
	.woocommerce-cart table.cart tbody { display: block; }
	.woocommerce-cart table.cart tbody tr.cart_item { display: grid; }

	/* --------------------------------------------------------------------
	   WooCommerce ładuje woocommerce-smallscreen.css z media max-width:768px
	   i przerabia tam tabele na listy: chowa nagłówki, wymusza display:block
	   na komórkach, dokleja etykiety `data-title` przez ::before, prążkuje
	   parzyste wiersze i UKRYWA miniaturę produktu.
	   Motyw robi z koszyka karty samodzielnie, więc tamten zestaw trzeba
	   wyłączyć — inaczej dostajemy zdublowane etykiety („Produkt:",
	   „Ilość:", „Kwota:"), pasiaste tło i brak zdjęć.
	   -------------------------------------------------------------------- */
	.woocommerce-cart table.shop_table_responsive tr td::before,
	.woocommerce-cart table.shop_table_responsive tr th::before,
	.woocommerce-checkout table.shop_table_responsive tr td::before,
	.woocommerce-checkout table.shop_table_responsive tr th::before {
		content: none !important;
		display: none !important;
	}
	.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td,
	.woocommerce-checkout table.shop_table_responsive tr:nth-child(2n) td {
		background-color: transparent;
	}
	/* Miniatura produktu ma zostać — to ona niesie rozpoznawalność karty. */
	.woocommerce-cart table.cart td.product-thumbnail,
	.woocommerce-cart table.cart .product-thumbnail { display: block; }
	/* Komórki podsumowania wracają do układu tabeli (etykieta | kwota). */
	.woocommerce-cart .cart_totals table.shop_table_responsive tr,
	.woocommerce-checkout #order_review table.shop_table_responsive tr { display: table-row; }
	.woocommerce-cart .cart_totals table.shop_table_responsive tbody th,
	.woocommerce-checkout #order_review table.shop_table_responsive tbody th,
	.woocommerce-checkout #order_review table.shop_table_responsive tfoot th { display: table-cell; }
	.woocommerce-cart .cart_totals table.shop_table_responsive td,
	.woocommerce-checkout #order_review table.shop_table_responsive td { display: table-cell; }
	/* Pozycje koszyka: cofamy tylko wymuszone `text-align: right`.
	   Świadomie NIE ustawiamy tu `display` — siatka karty i tak blokuje
	   elementy, a nadpisanie zdjęłoby ukrycie ceny jednostkowej
	   (`td.product-price`), która na karcie jest zdublowana z kwotą. */
	.woocommerce-cart table.cart.shop_table_responsive tr.cart_item td { text-align: left !important; }
	.woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-subtotal { text-align: right !important; }

	/* Kupon i „aktualizuj koszyk" pełną szerokością — łatwiej trafić */
	.woocommerce-cart table.cart td.actions { flex-direction: column; align-items: stretch; }
	.woocommerce-cart table.cart td.actions .coupon { width: 100%; }
	.woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1; width: auto !important; }
	.woocommerce-cart table.cart td.actions .button { width: 100%; justify-content: center; }

	/* Checkout: przycisk zamówienia zawsze wygodny do kliknięcia */
	.woocommerce-checkout #place_order { min-height: 52px; font-size: var(--fs-400); }

	/* Formularz kontaktowy: cieńsza rama, mniej marnowanego miejsca */
	.contact-form-card { padding: var(--space-2); }
	.contact-form-card__inner { padding: var(--space-5) var(--space-4); }

	/* Stopka: pasek zaufania w dwóch kolumnach, mniejsze odstępy */
	.footer-trust { padding: var(--space-5) 0; margin-bottom: var(--space-6); }
	.site-footer { padding-block: var(--space-8) var(--space-5); }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
	.footer-legal { gap: var(--space-2) var(--space-3); }

	/* Kafelki kontaktowe: pełna szerokość, wygodne cele dotykowe */
	.contact-tile { padding: var(--space-4); min-height: 64px; }

	/* Karta produktu: galeria i podsumowanie jedno pod drugim bez ścisku */
	.woocommerce div.product div.images { margin-bottom: var(--space-5); }
	.woocommerce div.product .summary form.cart { gap: var(--space-3); }
	.woocommerce div.product .summary form.cart .button { flex: 1; min-width: 60%; justify-content: center; }

	/* Moje konto: nawigacja jako przewijane pigułki */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static !important;
		border: 0; padding: 0; background: transparent;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex; gap: var(--space-2);
		overflow-x: auto; scrollbar-width: none;
		padding-bottom: var(--space-2);
		margin-bottom: var(--space-4);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		white-space: nowrap;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		padding: var(--space-2) var(--space-4);
	}
	.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
		background: var(--pep-ink); color: #fff; border-color: var(--pep-ink);
	}

	/* Zakładki produktu przewijane poziomo zamiast łamać się */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex; overflow-x: auto; scrollbar-width: none;
		gap: var(--space-4); white-space: nowrap;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li { flex: none; margin: 0; }
}

/* =========================================================================
   Mobilne menu i wyszukiwarka — dedykowane panele
   ========================================================================= */

/* Przyciemnienie tła pod drawerem menu.
   MUSI być poza media query — JS pokazuje ten element także na desktopie
   (menu mobilne jest tam ukryte, ale overlay służy też jako obszar
   „kliknij, aby zamknąć"). Bez stylów byłby to niewidoczny, pusty div. */
.nav-overlay {
	position: fixed; inset: 0; z-index: 201;
	background: rgba(22, 19, 15, 0.5);
	backdrop-filter: blur(2px);
}
.nav-overlay[hidden] { display: none; }

/* --- Menu mobilne (boczny drawer) --------------------------------------- */
.mobile-menu {
	position: fixed; z-index: 205;
	top: 0; left: 0; bottom: 0;
	width: min(330px, 86vw);
	background: #fff;
	box-shadow: var(--shadow-lg);
	transform: translateX(-105%);
	transition: transform 280ms var(--ease);
	display: flex; flex-direction: column;
	overflow: hidden;
	padding-top: env(safe-area-inset-top, 0px);
}
.mobile-menu.is-open { transform: translateX(0); }
@media (min-width: 901px) { .mobile-menu { display: none; } }

.mobile-menu__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-5);
	border-bottom: 1px solid var(--color-line);
}
.mobile-menu__head .site-brand { font-size: var(--fs-500); }
.mobile-menu__head img { max-height: 34px; width: auto; }
.mobile-menu__close {
	flex: none;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: var(--pep-beige-050); border: 0; cursor: pointer;
	border-radius: var(--radius-pill);
	font-size: 1.4rem; line-height: 1; color: var(--color-text);
}
.mobile-menu__close:hover { background: var(--pep-beige-100); }

.mobile-menu__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3); }
.mobile-menu__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mobile-menu__nav li { margin: 0; }
.mobile-menu__nav a {
	display: flex; align-items: center;
	min-height: 50px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-500);
	color: var(--color-text); text-decoration: none;
	transition: background var(--dur) var(--ease);
}
.mobile-menu__nav a:active,
.mobile-menu__nav .current-menu-item > a { background: var(--pep-beige-050); }
/* Podmenu */
.mobile-menu__nav .sub-menu { padding-left: var(--space-4); }
.mobile-menu__nav .sub-menu a { font-size: var(--fs-400); min-height: 44px; color: var(--color-text-soft); }

.mobile-menu__foot {
	padding: var(--space-4) var(--space-5);
	padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-line);
}

/* --- Panel wyszukiwarki ------------------------------------------------- */
.search-panel {
	position: fixed; inset: 0; z-index: 215;
	background: rgba(22, 19, 15, 0.35);
	opacity: 0; visibility: hidden;
	transition: opacity 200ms var(--ease), visibility 200ms;
	padding: var(--space-5);
	overflow-y: auto;
}
.search-panel.is-open { opacity: 1; visibility: visible; }
.search-panel__inner {
	max-width: 640px; margin: 0 auto;
	margin-top: calc(env(safe-area-inset-top, 0px) + 4vh);
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4);
	transform: translateY(-8px);
	transition: transform 220ms var(--ease);
}
.search-panel.is-open .search-panel__inner { transform: translateY(0); }
.search-panel form { display: flex; gap: var(--space-2); align-items: center; }
.search-panel__input {
	flex: 1; min-width: 0;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-md);
	padding: 0.85em 1em;
	font-family: var(--font-body); font-size: 16px;
}
.search-panel__input:focus { border-color: var(--pep-gold-500); box-shadow: var(--shadow-focus); outline: none; }
.search-panel__close {
	flex: none; width: 44px; height: 44px;
	display: grid; place-items: center;
	background: var(--pep-beige-050); border: 0; cursor: pointer;
	border-radius: var(--radius-pill);
	font-size: 1.4rem; line-height: 1; color: var(--color-text);
}
.search-panel__close:hover { background: var(--pep-beige-100); }
.search-panel__results { display: grid; }
.search-panel__results:not(:empty) { margin-top: var(--space-3); }
.search-panel__hint { padding: var(--space-3); font-size: var(--fs-300); color: var(--color-text-muted); }

/* Pozycje wyników (wspólne klasy) */
.hs-item {
	display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-3); align-items: center;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	color: var(--color-text); text-decoration: none;
	transition: background var(--dur) var(--ease);
}
.hs-item:hover { background: var(--pep-beige-050); color: var(--color-text); }
.hs-item img, .hs-item__ph { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: var(--pep-beige-050); }
.hs-item__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-400); }
.hs-item__price { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--color-text-soft); white-space: nowrap; }
.hs-more {
	display: block; text-align: center;
	padding: var(--space-3); margin-top: var(--space-1);
	border-top: 1px solid var(--color-line);
	font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-300);
	color: var(--pep-gold-700); text-decoration: none;
}

/* --- Ikony nagłówka: równe wyrównanie ----------------------------------- */
.header-actions { align-items: center; }
.header-icon {
	width: 44px; height: 44px;
	display: inline-grid !important; place-items: center;
	padding: 0 !important; margin: 0 !important;
}
.header-icon svg { display: block; }
/* Ikona ma box 44x44, a symbol 22px w środku — badge musi trzymać się
   rogu symbolu, nie rogu boxu (inaczej wychodzi poza nagłówek). */
.header-actions .header-cart__count { top: 6px; right: 4px; }

@media (max-width: 900px) {
	/* Lupa jest w dolnej belce — w nagłówku zbędna */
	.header-actions > .js-search-open { display: none !important; }
	/* Hamburger też, bo „Menu" jest w belce */
	.nav-toggle { display: none !important; }
}