/* Este Salon 2.0 - system wizualny (kierunek C + D, 09.2026).
   Zrodlo: prototypes/minimal-b2b (audyt FAZA 5: 8,4/10, AA). Kolejnosc sekcji ma znaczenie:
   baza -> komponenty -> strony -> standard mobilny -> warstwa WordPress/WooCommerce. */

/* ===== 1. baza (este-min) ===== */
/* Este Salon - minimalizm użytkowy B2B
   Wspólny system dla wariantów A-D. Linia scandi / soft premium,
   bez warstwy ozdobników z v1.7.0 (kursywa szeryfowa, marquee, gradienty, cienie). */

@font-face { font-family: "Grift"; src: url("../fonts/grift-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Grift"; src: url("../fonts/grift-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Grift"; src: url("../fonts/grift-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Monolith"; src: url("../fonts/monolith-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Monolith"; src: url("../fonts/monolith-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
	/* neutralne - Brandbook 2026, str. 13-14 */
	--paper: #ffffff;
	--pearl: #f7f7f5;
	--beige: #e9e3db;
	--sand: #dcd6cc;
	--line: #e6e4df;
	--line-strong: #c7c9c5;
	--line-field: #8a8c89; /* obramowanie pól i kart wyboru: 3:1 na białym (WCAG 1.4.11) */
	--muted: #626765; /* AA 4.5:1 na paper, pearl, beige i t100 */
	--graphite: #2b2b2b;
	--ink: #14181a;

	/* turkus - jedna barwa, używana oszczędnie */
	--t100: #dcf3f2;
	--t200: #85d6d2;
	--t300: #50c4be;
	--t400: #2c6c69;
	--t500: #1c4543;

	--f-display: "Grift", "Hanken Grotesk", sans-serif;
	--f-body: "Monolith", "Hanken Grotesk", sans-serif;

	/* dwa promienie, żadnych cieni */
	--r: 8px;
	--r-btn: 10px;

	--wrap: 1320px;
	--gutter: 40px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.75 var(--f-body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 400; }
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* typografia - hierarchia skalą, nie kolorem */
.h1 { font: 300 48px/1.08 var(--f-display); letter-spacing: -0.01em; }
.h1--xl { font-size: 64px; line-height: 1.02; letter-spacing: -0.02em; }
.h2 { font: 400 28px/1.2 var(--f-display); letter-spacing: 0.02em; }
.h3 { font: 500 18px/1.3 var(--f-display); letter-spacing: 0.04em; }
.lead { font: 400 18px/1.6 var(--f-body); color: var(--graphite); max-width: 34em; }
.meta { font: 400 13px/1.4 var(--f-body); color: var(--muted); }
.small { font-size: 13px; }
.num { font-feature-settings: "tnum" 1; }

/* górna linia i nagłówek */
.topline { border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.topline .wrap { display: flex; justify-content: space-between; height: 36px; align-items: center; }
.topline span + span::before { content: "·"; margin: 0 10px; color: var(--line-strong); }

.hdr { border-bottom: 1px solid var(--line); background: var(--paper); }
.hdr .wrap { display: grid; grid-template-columns: 200px 1fr auto; gap: 32px; align-items: center; height: 76px; }
.hdr__logo img { height: 34px; width: auto; }
.hdr__tools { display: flex; gap: 22px; font-size: 14px; color: var(--graphite); align-items: center; }
.hdr__tools b { font-weight: 400; color: var(--ink); }
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; gap: 30px; height: 48px; align-items: center; font-size: 15px; color: var(--graphite); }
.nav a:hover { color: var(--ink); }
.nav .nav__right { margin-left: auto; color: var(--t400); }

/* pola i przyciski */
.field { display: flex; align-items: center; height: 46px; border: 1px solid var(--line-field); border-radius: var(--r-btn); padding: 0 16px; background: var(--paper); color: var(--muted); font-size: 15px; gap: 12px; }
.field--lg { height: 60px; font-size: 17px; padding: 0 22px; }
.field kbd { margin-left: auto; font: 400 12px var(--f-body); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--r-btn); font: 400 15px var(--f-body); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn--primary { background: var(--t400); color: #fff; }
.btn--primary:hover { background: var(--t500); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link--arrow::after { content: " →"; }

/* sekcje - oddziela je margines, nie tło */
.sec { padding: 88px 0; }
.sec--tight { padding: 56px 0; }
.sec__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; gap: 24px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* fakty zamiast kafelków z ikonami */
.facts { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14px; color: var(--graphite); }
.facts li { list-style: none; }
.facts li + li::before { content: "·"; margin: 0 12px; color: var(--line-strong); }
ul.facts { margin: 0; padding: 0; }

/* karta produktu */
.grid { display: grid; gap: 40px 24px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.pcard { display: flex; flex-direction: column; gap: 10px; }
.pcard__img { aspect-ratio: 4 / 5; background: var(--pearl); border-radius: var(--r); display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; }
.pcard__img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard__brand { font-size: 13px; color: var(--muted); }
.pcard__name { font: 400 15px/1.4 var(--f-display); color: var(--ink); min-height: 2.8em; }
.pcard__row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; gap: 8px; }
.pcard__price { font: 500 16px var(--f-display); }
.pcard__price small { font: 400 12px var(--f-body); color: var(--muted); margin-left: 4px; }
.pcard__add { font-size: 13px; color: var(--t400); border-bottom: 1px solid currentColor; line-height: 1.3; }
.pcard__tag { font-size: 12px; color: var(--t400); }

/* stopka */
.ftr { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 13px; color: var(--graphite); }
.ftr .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.ftr .wrap + .wrap { display: block; }
.ftr h4 { font: 500 13px var(--f-display); color: var(--ink); margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr__bottom { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 20px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; }

/* etykieta wariantu - tylko w prototypie */

/* ===== 3. strona glowna: marki (C), korzysci (B), konto PRO (D) ===== */

.c-hero{padding:72px 0 44px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.c-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.c-brand{position:relative;overflow:hidden;background:var(--pearl);border-radius:var(--r);padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-height:380px}
.c-brand--lg{grid-column:span 6;min-height:480px}
.c-brand--sm{grid-column:span 3}
.c-brand__logo{height:44px;width:auto;max-width:220px;object-fit:contain;object-position:left;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.c-brand__logo--dark{filter:grayscale(1) brightness(.35)}
.c-word{font:500 26px var(--f-display);letter-spacing:.14em;color:var(--ink)}
.c-brand__img{position:absolute;right:28px;bottom:28px;height:58%;max-width:52%;object-fit:contain;mix-blend-mode:multiply}
.c-brand--sm .c-brand__img{position:static;height:170px;max-width:100%;margin:12px auto;align-self:center}
.c-brand__txt{max-width:22em;color:var(--graphite);margin-top:16px;font-size:15px}
.c-brand__foot{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;position:relative}
.c-edu{grid-column:span 12;display:grid;grid-template-columns:1fr 2fr auto;gap:40px;align-items:center;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.b-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:660px;border-bottom:1px solid var(--line)}
.b-hero__text{padding:80px 72px 80px max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));display:flex;flex-direction:column;justify-content:center;gap:22px}
.b-hero__img{background-size:cover;background-position:center}
.b-actions{display:flex;gap:28px;align-items:center;margin-top:10px}
.b-duo{display:grid;grid-template-columns:5fr 7fr;gap:24px}
.b-duo div{height:560px;background-size:cover;background-position:center;border-radius:var(--r)}
.b-duo-note{max-width:34em;margin:28px 0 0}
.b-rows{list-style:none;margin:0;padding:0}
.b-rows li{display:grid;grid-template-columns:72px 1fr 1.25fr;gap:24px;padding:30px 0;border-top:1px solid var(--line);align-items:baseline}
.b-rows li:last-child{border-bottom:1px solid var(--line)}
.b-rows .n{font:300 15px var(--f-display);color:var(--muted)}
.b-rows h3{font:300 26px/1.2 var(--f-display)}
.b-rows p{color:var(--graphite);max-width:32em}

.d-top{display:flex;justify-content:space-between;align-items:end;padding:44px 0 30px;border-bottom:1px solid var(--line);gap:40px}
.d-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding:40px 0 88px}
.d-table{width:100%;border-collapse:collapse;font-size:14px}
.d-table th{font:400 13px var(--f-body);color:var(--muted);text-align:left;padding:0 14px 12px 0;border-bottom:1px solid var(--ink)}
.d-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.d-prod{display:flex;gap:14px;align-items:center}
.d-thumb{width:54px;height:54px;flex:none;background:var(--pearl);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:6px}
.d-thumb img{max-height:100%;mix-blend-mode:multiply}
.d-qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-btn);height:36px}
.d-qty span{width:34px;text-align:center;color:var(--muted)} .d-qty b{font-weight:400;width:30px;text-align:center}
.d-box{border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:20px}
.d-box h3{margin-bottom:14px}
.d-box ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.d-box li{display:flex;justify-content:space-between;gap:12px}
.d-box li span{color:var(--muted)}
.d-sum{display:flex;justify-content:space-between;align-items:center;margin-top:22px}

/* ===== 2. dostepnosc, pola, karuzela (este-cd) ===== */
/* Este Salon - kierunek C + D, warstwa budowy (faza 3).
   Linkowany PO stylach wariantu, żeby media queries wygrywały kolejnością. */

/* dostępność */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r); z-index: 100; }
.skip:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--t400); outline-offset: 2px; }

/* prawdziwe pola zamiast atrap */
button { font: inherit; cursor: pointer; }
input.field { width: 100%; font: 400 15px var(--f-body); color: var(--ink); }
input.field::placeholder { color: var(--muted); }
input.field:focus { border-color: var(--t400); }
.search { position: relative; }
form.search input { padding-right: 52px; }
.search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 12px var(--f-body); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }

/* nagłówek: tekst na desktopie, ikony na telefonie */
.tool { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: inherit; }
.tool svg { width: 20px; height: 20px; flex: none; }
.tool .cnt { font-weight: 400; color: var(--ink); }
.tool--menu { display: none; }

/* karta produktu dla gościa - bez ceny */
.pcard__login { font-size: 13px; color: var(--muted); }
.pcard__login .link { color: var(--t400); }

.hero-actions { display: flex; gap: 24px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.pro-note { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

/* szybkie zamówienie po SKU */
.qo { display: flex; align-items: center; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.qo__label { font: 500 15px var(--f-display); margin-right: 8px; white-space: nowrap; }
.qo .field { height: 40px; max-width: 240px; }
.qo .qo__qty { max-width: 90px; }
.qo .link { margin-left: auto; }

.d-qty button { width: 34px; height: 34px; background: none; border: 0; color: var(--muted); }
.d-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--t400); }

/* tablet */
@media (max-width: 1100px) {
	.grid--5 { grid-template-columns: repeat(3, 1fr); }
	.c-hero { grid-template-columns: 1fr; gap: 20px; }
	.c-brand--sm { grid-column: span 6; }
	.d-layout { grid-template-columns: 1fr; }
	.ftr .wrap { grid-template-columns: 1fr 1fr; }
	.ftr .wrap + .wrap { display: block; }
}

/* tablet, tylko nagłówek (audyt 26.09.2026, P-07): przy 761-1100 px nazwa firmy i koszyk wypychały
   nagłówek poza ekran, a wyszukiwarka miała ~70 px. Układ jak na telefonie, ale z paskiem kategorii. */
@media (min-width: 761px) and (max-width: 1100px) {
	.topline .wrap > div:first-child { display: none; }
	.topline .wrap { justify-content: center; }
	.hdr .wrap { grid-template-columns: auto 1fr; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px 24px; }
	.hdr .search { grid-column: 1 / -1; order: 3; }
	.hdr .wrap > * { min-width: 0; }
	.hdr__tools { justify-self: end; gap: 22px; }
	.tool span { display: none; }
	.nav .wrap { overflow-x: auto; white-space: nowrap; gap: 24px; scrollbar-width: none; }
	.nav .nav__right { margin-left: 0; }
}

/* telefon */
@media (max-width: 760px) {
	:root { --gutter: 20px; }
	.topline .wrap > div:first-child, .topline span:not(:last-child) { display: none; }
	.topline span + span::before { content: none; }
	.topline .wrap { justify-content: center; }

	.hdr .wrap { grid-template-columns: 1fr auto; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
	.hdr .search { grid-column: 1 / -1; order: 3; }
	.hdr .wrap > * { min-width: 0; }
	.hdr__tools { gap: 18px; min-width: 0; flex-wrap: nowrap; }
	.tool span { display: none; }
	.tool--menu { display: inline-flex; }
	.nav .wrap { overflow-x: auto; white-space: nowrap; gap: 22px; scrollbar-width: none; }
	.nav .nav__right { margin-left: 0; }

	.h1 { font-size: 34px; }
	.h2 { font-size: 24px; }
	.lead { font-size: 16px; }
	.sec { padding: 56px 0; }
	.sec__head { flex-wrap: wrap; }
	.grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
	.pcard__img { padding: 14px; }
	.pcard__row { flex-wrap: wrap; }

	.c-hero { padding: 36px 0 28px; }
	.c-grid { gap: 14px; }
	.c-brand--lg, .c-brand--sm { grid-column: span 12; min-height: 0; }
	.c-brand { padding: 24px; }
	.c-brand__img, .c-brand--sm .c-brand__img { position: static; height: 190px; max-width: 100%; margin: 18px auto 14px; }
	.c-edu { grid-template-columns: 1fr; gap: 10px; }

	.b-rows li { grid-template-columns: 40px 1fr; gap: 6px 12px; padding: 22px 0; }
	.b-rows li p { grid-column: 2; }
	.b-rows h3 { font-size: 21px; }
	.b-duo { grid-template-columns: 1fr; }
	.b-duo div { height: 300px; }

	.qo { flex-wrap: wrap; }
	.qo .field { max-width: none; flex: 1 1 55%; }
	.qo .qo__qty { flex: 0 0 90px; }
	.qo .link { margin-left: 0; }

	.d-top { flex-direction: column; align-items: flex-start; gap: 14px; }
	.d-table thead { display: none; }
	.d-table tr { display: grid; grid-template-columns: 26px 1fr auto; grid-template-areas: "chk prod prod" ". price qty"; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
	.d-table td { border: 0; padding: 0; }
	.d-table .c-chk { grid-area: chk; }
	.d-table .c-prod { grid-area: prod; }
	.d-table .c-price { grid-area: price; align-self: center; }
	.d-table .c-qty { grid-area: qty; }
	.d-table .c-sku, .d-table .c-last, .d-table .c-add { display: none; }
	.d-sum { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
	.d-sum .btn { width: 100%; }

	.ftr .wrap { grid-template-columns: 1fr; }
	.ftr__bottom { flex-direction: column; gap: 8px; }

	/* dotyk: bez skrótu klawiszowego, fakty bez osieroconych separatorów */
	.search kbd { display: none; }
	form.search input { padding-right: 16px; }
	.facts { gap: 4px 18px; }
	.facts li + li::before { content: none; }
	.qo__label { flex: 1 1 100%; }
}

/* karuzela promocji - tła tonalne zamiast gradientów, jedna linia postępu */
.promo { margin: 32px 0 8px; }
.promo__viewport { overflow: hidden; border-radius: var(--r); touch-action: pan-y; }
.promo__track { display: flex; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.promo__slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; background: var(--pearl); }
.promo--beige { background: var(--beige); }
.promo--t100 { background: var(--t100); }
.promo__text { padding: 56px 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.promo__eyebrow { color: var(--graphite); }
.promo__title { font: 300 40px/1.08 var(--f-display); letter-spacing: -0.01em; max-width: 14em; }
.promo__lead { color: var(--graphite); max-width: 30em; font-size: 16px; }
.promo__tiers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; border-top: 1px solid rgba(20, 24, 26, .14); }
.promo__tiers li { flex: 1; padding: 14px 16px 0 0; display: grid; gap: 4px; }
.promo__tiers li + li { padding-left: 16px; border-left: 1px solid rgba(20, 24, 26, .14); }
.promo__tiers b { font: 300 32px/1 var(--f-display); }
.promo__tiers span { font-size: 13px; color: var(--graphite); }
.promo__price { font: 500 20px var(--f-display); }
.promo__price small { font: 400 13px var(--f-body); color: var(--graphite); margin-left: 4px; }
.promo__price--login { font: 400 14px var(--f-body); color: var(--graphite); }
.promo__cta { margin-top: 10px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.promo__media { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 40px 32px 32px; overflow: hidden; }
.promo__packs { display: flex; align-items: flex-end; justify-content: center; gap: 18px; width: 100%; }
.promo__packs img { max-height: 310px; max-width: 31%; object-fit: contain; mix-blend-mode: multiply; }
.promo__photo { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }

.promo__bar { display: flex; align-items: center; gap: 18px; padding: 14px 2px 0; }
.promo__count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.promo__count b { font-weight: 400; color: var(--ink); }
.promo__progress { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.promo__progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.promo.is-playing .promo__progress i { animation: promo-fill var(--promo-ms, 6000ms) linear forwards; }
@keyframes promo-fill { to { transform: scaleX(1); } }
.promo__ctrl { display: flex; gap: 6px; }
.promo__btn { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); padding: 0; }
.promo__btn svg { width: 16px; height: 16px; }

.promo--compact .promo__slide { min-height: 300px; }
.promo--compact .promo__text { padding: 36px 40px; }
.promo--compact .promo__title { font-size: 30px; }
.promo--compact .promo__packs img { max-height: 220px; }

@media (prefers-reduced-motion: reduce) {
	.promo__track { transition: none; }
	.promo.is-playing .promo__progress i { animation: none; }
}

@media (max-width: 760px) {
	.promo { margin-top: 20px; }
	.promo__slide { grid-template-columns: 1fr; min-height: 0; }
	.promo__media { order: -1; height: 220px; padding: 20px; }
	.promo__text, .promo--compact .promo__text { padding: 24px; }
	.promo__title, .promo--compact .promo__title { font-size: 28px; }
	.promo__packs img, .promo--compact .promo__packs img { max-height: 180px; }
	.promo__tiers b { font-size: 24px; }
}

/* korzyści konta PRO: zwykła lista, bez numeracji, bo to nie jest sekwencja */
.b-rows--plain li { grid-template-columns: 1fr 1.25fr; }

@media (max-width: 760px) {
	.b-rows--plain li { grid-template-columns: 1fr; gap: 6px; }
	.b-rows--plain li p { grid-column: auto; }
	/* marki na telefonie: dwie główne na całą szerokość, cztery pozostałe w dwóch kolumnach */
	.c-brand--sm { grid-column: span 6; padding: 18px; }
	.c-brand--sm .c-brand__img { height: 120px; margin: 12px auto 10px; }
	.c-brand--sm .c-brand__logo { height: 32px; max-width: 100%; }
	.c-brand--sm .c-brand__txt { font-size: 13px; margin-top: 10px; }
	.c-brand--sm .c-brand__foot { flex-direction: column; gap: 2px; }
	.c-brand--lg .c-brand__img { height: 160px; }
	/* rząd kategorii przewija się w bok: wygaszenie przy krawędzi pokazuje, że jest dalej */
	.nav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}

/* ===== 4. sklep, zakup, konto, strony informacyjne ===== */

.crumbs{font-size:13px;color:var(--muted);padding:18px 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs a{color:var(--graphite)}
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;padding-bottom:48px}
.pdp__gal{position:sticky;top:20px}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r);background:var(--pearl);scrollbar-width:none}
.gal img{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:contain;padding:56px;mix-blend-mode:multiply}
.pdp__info{display:flex;flex-direction:column;gap:18px}
.pdp__title{font:300 34px/1.12 var(--f-display);letter-spacing:-.01em}
.pdp__fav{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--graphite);min-height:44px}
.pdp__fav svg{width:20px;height:20px}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--t500)}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--t300)}
.pricebox{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:6px}
.pricebox__net{font:400 34px/1 var(--f-display);font-feature-settings:"tnum" 1}
.pricebox__net small{font:400 14px var(--f-body);color:var(--muted);margin-left:6px}
.pricebox__gross{font-size:14px;color:var(--graphite)}
.buy{display:flex;gap:12px;align-items:center}
.buy .btn{flex:1;height:48px;font-size:15.5px}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;color:var(--graphite)}
.perks li{display:flex;gap:12px;align-items:center}
.perks svg{width:20px;height:20px;flex:none;color:var(--ink)}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th{text-align:left;font-weight:400;color:var(--muted);padding:11px 16px 11px 0;width:42%}
.spec td{padding:11px 0}
.spec tr+tr th,.spec tr+tr td{border-top:1px solid var(--line)}
.acc__body p+p{margin-top:10px}
.acc__body ul{margin:0;padding-left:18px}
.acc__body .tags{color:var(--t500);font-size:14px}
.acc__body .ing{margin-top:12px;color:var(--muted)}
.acc__body .ing b{font-weight:500;color:var(--ink)}
.pdf{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-top:1px solid var(--line);color:var(--ink)}
.pdf span{font-size:13px;color:var(--muted)}
.rel{list-style:none;margin:0;padding:0}
.rel li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.rel li:last-child{border-bottom:1px solid var(--line)}
.thumb{background:var(--pearl);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:6px}
.thumb img{max-height:100%;mix-blend-mode:multiply}
.rel .thumb{width:64px;height:64px}
.rel__name{font:400 15px/1.35 var(--f-display)}
.rel__price{font-size:13px;color:var(--graphite);margin-top:2px}
.addmini{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink)}
.help{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;background:var(--pearl);border-radius:var(--r);flex-wrap:wrap;margin-top:8px}
.help b{font:400 18px var(--f-display);display:block;margin-bottom:4px;font-weight:400}

.flow{display:flex;align-items:center;margin:26px 0 6px;padding:0;font-size:13px;color:var(--muted)}
.flow li{list-style:none;display:flex;align-items:center;gap:8px;white-space:nowrap;flex:1}
.flow li:first-child{flex:0 0 auto}
.flow li+li::before{content:"";flex:1;min-width:20px;height:1px;background:var(--line-strong);margin:0 12px}
.flow .n{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.flow .n svg{width:16px;height:16px}
.flow .is-done{color:var(--graphite)}
.flow .is-done .n{background:var(--t400);border-color:var(--t400);color:#fff}
.flow .is-on{color:var(--ink)}
.flow .is-on .n{border-color:var(--ink);color:var(--ink)}

.cart:not(form),.co{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;padding:0 0 72px}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:26px 0 12px}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.lines .line:last-child{border-bottom:1px solid var(--line)}
.line .thumb{width:96px;height:96px;padding:10px}
.line__name{font:400 16px/1.35 var(--f-display)}
.line__meta{font-size:13px;color:var(--muted);margin-top:3px}
.line__unit{font-size:14px;color:var(--graphite);margin-top:6px;font-feature-settings:"tnum" 1}
.line__ctrl{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap}
.line__total{text-align:right;font:500 17px var(--f-display);font-feature-settings:"tnum" 1;white-space:nowrap}
.line__total small{display:block;font:400 13px var(--f-body);color:var(--muted);margin-top:2px}
.linkbtn{background:none;border:0;padding:0;color:var(--graphite);text-decoration:underline;text-underline-offset:4px;font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.linkbtn svg{width:18px;height:18px}
.cart__tools{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-top:6px}
.addsku{margin-top:14px}
.addsku summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:15px;color:var(--t400)}
.addsku summary::-webkit-details-marker{display:none}
.addsku .qo{border:0;padding:4px 0 0}

.summary{background:var(--pearl);border-radius:var(--r);padding:24px;position:sticky;top:20px}
.summary h2{font:400 20px var(--f-display);margin-bottom:16px}
.eta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line-strong);font-size:14px;color:var(--graphite)}
.eta b{display:block;font-weight:400;color:var(--ink);font-size:15px}
.eta svg{width:22px;height:22px;color:var(--ink);flex:none}
.coupon{border-bottom:1px solid var(--line-strong)}
.coupon summary{list-style:none;cursor:pointer;min-height:48px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--graphite)}
.coupon summary::-webkit-details-marker{display:none}
.coupon summary span{color:var(--t400);text-decoration:underline;text-underline-offset:4px}
.coupon .form-inline{display:flex;gap:8px;padding-bottom:14px}
.sumrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:15px;color:var(--graphite)}
.sumrow b{font-weight:400;color:var(--ink);font-feature-settings:"tnum" 1}
.sumrow--first{padding-top:14px}
.sumrow--total{border-top:1px solid var(--line-strong);margin-top:8px;padding-top:16px;align-items:baseline}
.sumrow--total b{font:500 26px var(--f-display)}
.sumrow--total span small{display:block;font-size:13px;color:var(--muted)}
.summary .btn--go{width:100%;height:52px;font-size:16px;margin-top:16px}
.express{margin-top:16px;display:grid;gap:8px}
.express p{font-size:13px;color:var(--muted);text-align:center}
.paybtn{height:48px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;gap:6px;font:600 16px -apple-system,system-ui,sans-serif;border:1px solid var(--ink)}
.paybtn--apple{background:#000;color:#fff}
.paybtn--google{background:#fff;color:#1f1f1f;border-color:#c7c9c5}
.infos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.info{padding:18px;border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--graphite);display:flex;gap:14px}
.info svg{width:22px;height:22px;flex:none;color:var(--ink)}
.info b{display:block;font-weight:400;color:var(--ink);margin-bottom:4px}
.trust{margin-top:28px;font-size:13px;color:var(--muted);max-width:52em;line-height:1.7}
.trust a{color:var(--graphite);text-decoration:underline;text-underline-offset:3px}

.co-hdr{border-bottom:1px solid var(--line)}
.co-hdr .wrap{display:flex;justify-content:space-between;align-items:center;height:68px}
.co-hdr .secure{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--graphite)}
.co-hdr .secure svg{width:18px;height:18px}
.co-sec{padding:26px 0;border-top:1px solid var(--line)}
.co-sec:first-of-type{border-top:0;padding-top:12px}
.co-sec h2{font:400 21px var(--f-display);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.co-sec h2 .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:400 13px var(--f-body);display:inline-flex;align-items:center;justify-content:center}
.card{border:1px solid var(--line-strong);border-radius:var(--r-btn);padding:16px;font-size:15px;line-height:1.6;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.card .src{font-size:13px;color:var(--t500);margin-top:6px;display:flex;align-items:center;gap:6px}
.card .src svg{width:14px;height:14px}
.blik{display:none;padding:12px 4px 4px}
.opt:has(input:checked)+.blik{display:block}
.blik .field-lg{letter-spacing:.45em;font-size:22px;text-align:center;max-width:240px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;padding:6px 0}
.check input{width:22px;height:22px;margin:0;accent-color:var(--t400);flex:none}
.check a{text-decoration:underline;text-underline-offset:3px}
.mini{list-style:none;margin:0 0 6px;padding:0}
.mini li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:8px 0;font-size:14px}
.mini .thumb{width:48px;height:48px;padding:4px}
.mini small{color:var(--muted);display:block}
.sum-toggle{display:none}

.ty{max-width:640px;margin:0 auto;padding:40px 0 88px}
.ty__mark{width:60px;height:60px;border-radius:50%;background:var(--t100);color:var(--t400);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.ty__mark svg{width:30px;height:30px}
.ty h1{font:300 36px/1.12 var(--f-display);letter-spacing:-.01em}
.ty .lead{margin-top:12px}
.ty__box{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:24px}
.ty__box .sumrow{padding:8px 0}
.ty__acts{display:grid;gap:10px;margin-top:24px}
.ty__acts .btn{height:52px;font-size:16px}
.ty__next{margin-top:28px;padding:0;list-style:none;display:grid;gap:14px;font-size:15px;color:var(--graphite)}
.ty__next li{display:flex;gap:12px}
.ty__next svg{width:20px;height:20px;flex:none;color:var(--ink);margin-top:2px}

@media (max-width:760px){
 .pdp{grid-template-columns:1fr;gap:18px}
 .pdp__gal{position:static;margin:0 calc(-1 * var(--gutter))}
 .gal{border-radius:0}
 .gal img{padding:32px}
 .pdp__title{font-size:27px}
 .pdp .buy{display:none}
 .cart:not(form),.co{grid-template-columns:minmax(0,1fr);gap:20px;padding-bottom:40px}
 .summary{position:static;padding:20px}
 .summary .btn--go{display:none}
 .line{grid-template-columns:76px 1fr;gap:14px}
 .line .thumb{width:76px;height:76px}
 .line__total{grid-column:2;text-align:left}
 .line__total small{display:inline;margin-left:4px}
 .flow{font-size:13px;margin-top:18px}
 .flow .t{display:none}
 .flow .is-on .t{display:inline}
 .infos{grid-template-columns:1fr}
 .co-sec{padding:22px 0}
 .sum-toggle{display:block}
 .co .summary--desk{display:none}
 .ty{padding-top:28px}
 .ty h1{font-size:28px}
}

.pcard__imgwrap{position:relative}
.pcard__img{display:flex}
.qadd{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:var(--r-btn);background:var(--paper);border:1px solid var(--line-strong);font-size:22px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.pcard__low{font-size:13px;color:#8a5a12}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.toolbar .btn{height:44px}
.toolbar__l{display:flex;gap:10px;align-items:center}
.sortsel{height:44px;border:1px solid var(--line-strong);border-radius:var(--r-btn);padding:0 36px 0 14px;font:400 15px var(--f-body);color:var(--ink);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181a' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/18px;appearance:none}
.active{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 20px}
.active .chip{height:36px}
.cat{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start;padding:4px 0 72px}
.filters{position:sticky;top:20px}
.fgroup{border-bottom:1px solid var(--line);padding:16px 0 18px}
.fgroup__title{margin:0}
.fgroup__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:32px;padding:0;border:0;background:none;font:500 13px/1.3 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:left;cursor:pointer}
.fgroup__toggle::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat}
.fgroup__toggle[aria-expanded="true"]::after{background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat}
.fgroup__toggle:focus-visible{outline:2px solid var(--t400);outline-offset:4px}
.fgroup__body{padding-top:10px}
.fcheck{display:flex;align-items:flex-start;gap:10px;min-height:32px;padding:6px 0;font-size:14px;line-height:1.4;color:var(--graphite);cursor:pointer}
.fcheck__txt{min-width:0}
.fcheck input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:2px 0 0;flex:none;border:1px solid var(--line-field);border-radius:2px;background:var(--paper) center/12px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.fcheck input:checked{background-color:var(--t400);border-color:var(--t400);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.fcheck input:focus-visible{outline:2px solid var(--t400);outline-offset:2px}
.fcheck:hover input:not(:checked){border-color:var(--ink)}
.fcheck:hover .fcheck__name{color:var(--ink)}
.fcheck small{margin-left:6px;color:var(--muted);font-size:12px;white-space:nowrap;font-feature-settings:"tnum" 1}
.fcheck small::before{content:"("}
.fcheck small::after{content:")"}
.fsearch{position:relative;margin:0 0 10px}
.fsearch .fsearch__input{width:100%;height:38px;margin:0;padding:0 38px 0 12px;border:1px solid var(--line-field);border-radius:4px;font:400 14px var(--f-body);color:var(--ink);background:var(--paper)}
.fsearch .fsearch__input::placeholder{color:var(--muted)}
.fsearch .fsearch__input:focus{outline:none;border-color:var(--t400);box-shadow:0 0 0 1px var(--t400)}
.fsearch svg{position:absolute;right:10px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--graphite);pointer-events:none}
.fsearch__none{margin:2px 0 0;font-size:13px;color:var(--muted)}
.fmore{display:inline-flex;align-items:center;min-height:28px;margin-top:6px;padding:0;border:0;background:none;font:400 13px var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fmore:hover{color:var(--t400)}
.frange{display:grid;grid-template-columns:1fr 12px 1fr;gap:8px;align-items:center}
.frange__sep{text-align:center;color:var(--muted)}
.fapply{display:inline-flex;align-items:center;min-height:32px;margin-top:10px;padding:0;border:0;background:none;font:500 12px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.fapply:hover{color:var(--t400)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:40px;font-size:13px;color:var(--muted)}
.more .meter{width:220px}
.sheet__head{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-bottom:4px}
.sheet__head h2{font:400 20px var(--f-display)}
.sheet__foot{position:sticky;bottom:calc(-16px - var(--safe));background:var(--paper);display:flex;gap:10px;padding:12px 0 calc(16px + var(--safe));border-top:1px solid var(--line);margin-top:8px}
.sheet__foot .btn{height:52px;font-size:16px}
.sheet__foot .btn--primary{flex:1}
.filters-m{display:none}
.chips--wrap{margin:4px 0 18px}

.skuhit{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:20px;border:1px solid var(--ink);border-radius:var(--r);align-items:center;margin-bottom:28px}
.skuhit .thumb{width:120px;height:120px;padding:10px}
.skuhit .buy{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.skuhit .buy .btn{height:48px}
.hitlabel{font-size:13px;color:var(--t500);display:inline-flex;align-items:center;gap:6px}
.hitlabel svg{width:14px;height:14px}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 26px}

.bhero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:30px 0 10px}
.bhero__word{font:500 54px var(--f-display);letter-spacing:.16em;line-height:1}
.bhero__img{aspect-ratio:4/3;border-radius:var(--r);background-size:cover;background-position:center}
.bhero .facts{margin-top:20px}
.linesgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ltile{background:var(--pearl);border-radius:var(--r);padding:16px 18px;min-height:92px;display:flex;flex-direction:column;justify-content:space-between}
.ltile b{font:400 16.5px var(--f-display)}
.ltile span{font-size:13px;color:var(--muted)}
.callout{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);flex-wrap:wrap;margin-top:28px}
.callout b{display:block;font:400 18px var(--f-display);margin-bottom:4px}

.gal--photos{position:relative}
.gal--photos img{object-fit:cover;padding:0;mix-blend-mode:normal;aspect-ratio:4/3}
.galcount{position:absolute;right:12px;bottom:12px;background:rgba(20,24,26,.72);color:#fff;font-size:13px;padding:4px 10px;border-radius:999px;display:none}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.thumbs img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);border:1px solid transparent}
.thumbs img:first-child{border-color:var(--ink)}
.buy2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.buy2 .btn{height:48px}

.facts2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts2 div{background:var(--paper);padding:14px 16px;font-size:15px}
.facts2 small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:6px 12px;border-radius:999px;background:#faf1e4;color:#6b4a14;width:fit-content}
.pill{display:inline-flex;align-items:center;font-size:13px;padding:3px 10px;border-radius:999px;background:var(--pearl);color:var(--graphite);white-space:nowrap}
.pill--ok{background:var(--t100);color:var(--t500)}
.pill--go{background:#faf1e4;color:#6b4a14}

.auth{max-width:460px;margin:0 auto;padding:30px 0 72px}
.auth h1{font:300 32px/1.12 var(--f-display);letter-spacing:-.01em}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--pearl);border-radius:var(--r-btn);padding:4px;margin:20px 0 24px}
.seg a{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:15px;color:var(--graphite);text-align:center;padding:0 8px}
.seg a[aria-current]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.pw{position:relative}
.pw .field-lg{padding-right:76px}
.pw button{position:absolute;right:6px;top:4px;height:44px;padding:0 12px;background:none;border:0;color:var(--t400);font-size:14px}
.nipbox{display:grid;grid-template-columns:1fr auto;gap:8px}
.nipbox .btn{height:52px}
.upload{border:1px dashed var(--line-strong);border-radius:var(--r-btn);padding:18px;text-align:center;color:var(--graphite);font-size:15px;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.auth .btn--submit{height:52px;font-size:16px;width:100%;margin-top:8px}
.auth .alt{text-align:center;font-size:15px;color:var(--graphite);margin-top:22px}
.legend{font:500 15px var(--f-display);margin:22px 0 12px}

.acct-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:26px 0 12px}
.ord{border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px}
.ord+.ord{margin-top:12px}
.ord__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ord__top b{font:400 16.5px var(--f-display);display:block}
.ord__mid{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ord__thumbs{display:flex;gap:6px;align-items:center}
.ord__thumbs .thumb{width:48px;height:48px;padding:4px}
.ord__thumbs span{font-size:13px;color:var(--muted);margin-left:4px}
.ord__sum{font:500 18px var(--f-display);font-feature-settings:"tnum" 1;white-space:nowrap}
.ord__acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ord__acts .btn{height:44px}
.lst{border:1px solid var(--line);border-radius:var(--r);padding:0 18px}
.lst+.lst{margin-top:12px}
.lst>summary{list-style:none;cursor:pointer;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lst>summary::-webkit-details-marker{display:none}
.lst>summary b{font:400 17px var(--f-display);display:block}
.lst>summary small{font-size:13px;color:var(--muted)}
.lst>summary::after{content:"+";font:300 22px var(--f-display);color:var(--graphite)}
.lst[open]>summary::after{content:"-"}
.lst .rel li{grid-template-columns:56px 1fr auto}
.lst .rel .thumb{width:56px;height:56px}
.lst__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 18px;flex-wrap:wrap}
.lst__foot .btn{height:48px}

@media (max-width:1100px){.grid--3{grid-template-columns:repeat(2,1fr)}.linesgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
 .cat{grid-template-columns:minmax(0,1fr);gap:0}
 .filters{display:none}
 .filters-m{display:flex}
 .toolbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);margin:0 calc(-1 * var(--gutter)) 16px;padding:10px var(--gutter)}
 .toolbar .meta{display:none}
 .grid--3{grid-template-columns:repeat(2,1fr);gap:28px 14px}
 .skuhit{grid-template-columns:88px 1fr;padding:16px;gap:14px}
 .skuhit .thumb{width:88px;height:88px}
 .skuhit .buy{grid-column:1/-1}
 .skuhit .buy .btn{flex:1}
 .bhero{grid-template-columns:1fr;gap:20px;padding-top:18px}
 .bhero__img{order:-1;margin:0 calc(-1 * var(--gutter));border-radius:0;aspect-ratio:16/11}
 .bhero__word{font-size:36px}
 .linesgrid{grid-template-columns:repeat(2,1fr);gap:10px}
 .galcount{display:block}
 .thumbs{display:none}
 .device .buy2{display:none}
 .facts2{grid-template-columns:1fr 1fr}
 .auth{padding-top:18px}
 .auth h1{font-size:28px}
 .ord__mid{flex-wrap:wrap}
 .lst .rel li{grid-template-columns:56px minmax(0,1fr);row-gap:10px}
 .lst .rel li .stepper{grid-column:2;justify-self:start}
}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:6px 0 80px;align-items:start}
.cbig{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--line);border-radius:var(--r);min-height:84px;color:var(--ink)}
.cbig+.cbig{margin-top:12px}
.cbig svg{width:24px;height:24px;flex:none}
.cbig b{display:block;font:400 21px var(--f-display);font-feature-settings:"tnum" 1}
.cbig small{font-size:13px;color:var(--muted)}
.todo{border:1px dashed var(--line-strong);border-radius:var(--r);padding:14px 16px;color:var(--muted);font-size:14px;line-height:1.6}
.cform{background:var(--pearl);border-radius:var(--r);padding:26px}
.cform h2{font:400 22px var(--f-display);margin-bottom:6px}
.cform textarea.field-lg{height:auto;padding:14px 16px}
.e404{max-width:560px;margin:0 auto;padding:56px 0 88px}
.e404__n{font:300 96px/1 var(--f-display);color:var(--t200);letter-spacing:-.02em}
.e404 h1{font:300 32px/1.12 var(--f-display);margin:14px 0 10px}
.e404 .search{margin:24px 0 22px}
.e404 .chips{flex-wrap:wrap}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding:6px 0 88px;align-items:start}
.toc{position:sticky;top:20px;font-size:14px}
.toc p{font:500 13px var(--f-display);color:var(--ink);margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:flex;min-height:40px;align-items:center;color:var(--graphite);border-bottom:1px solid var(--line)}
.legal article{max-width:68ch}
.legal h2{font:400 22px var(--f-display);margin:36px 0 12px;scroll-margin-top:20px}
.legal article > h2:first-of-type{margin-top:8px}
.toc-m{display:none}
@media (max-width:760px){
 .contact{grid-template-columns:1fr;gap:28px}
 .cform{padding:20px}
 .legal{grid-template-columns:minmax(0,1fr);gap:0}
 .toc{display:none}
 .toc-m{display:block;margin-bottom:8px}
 .e404{padding-top:28px}
 .e404__n{font-size:72px}
 .e404 h1{font-size:27px}
}

/* ===== 5. standard mobilny (este-mobile, ostatni z prototypu) ===== */
/* Este Salon - standard mobilny (90% zamówień z telefonu).
   Linkowany jako ostatni. Zasady:
   - każdy cel dotyku min. 48 px, odstęp min. 8 px
   - pola 16 px (iOS nie powiększa ekranu przy wpisywaniu), właściwe klawiatury i autouzupełnianie
   - jedna główna akcja na ekran, przyklejona nisko, w zasięgu kciuka, z marginesem na pasek systemowy
   - nic nie zależy od najechania kursorem
   - filtry i wybory w arkuszu wysuwanym z dołu */

html { -webkit-tap-highlight-color: rgba(44, 108, 105, .12); }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

:root {
	--tap: 48px;
	--bar-h: 64px;
	--safe: env(safe-area-inset-bottom, 0px);
}

/* pola i przyciski przyjazne dla palca */
.field-lg { height: 52px; font: 400 16px var(--f-body); color: var(--ink); border: 1px solid var(--line-field); border-radius: var(--r-btn); padding: 0 16px; width: 100%; background: var(--paper); }
.field-lg:focus { border-color: var(--t400); outline: none; box-shadow: 0 0 0 3px rgba(44, 108, 105, .15); }
.field-lg::placeholder { color: var(--muted); }
.label { display: block; font: 400 13px var(--f-body); color: var(--graphite); margin: 0 0 6px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.form-row { margin-bottom: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn--block { width: 100%; }
.btn--lg { height: 52px; font-size: 16px; padding: 0 24px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* przełącznik ilości 48 px */
.stepper { display: inline-grid; grid-template-columns: var(--tap) 44px var(--tap); align-items: center; border: 1px solid var(--line-field); border-radius: var(--r-btn); height: var(--tap); background: var(--paper); }
.stepper button { height: 100%; background: none; border: 0; font-size: 20px; color: var(--graphite); }
.stepper output { text-align: center; font: 400 16px var(--f-body); font-feature-settings: "tnum" 1; }

/* przyklejony pasek akcji (karta, koszyk, zamówienie) */
/* na desktopie akcja siedzi w treści strony; pasek pojawia się tylko na telefonie */
.actionbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); padding: 12px var(--gutter) calc(12px + var(--safe)); align-items: center; gap: 14px; }
.actionbar__sum { display: grid; line-height: 1.25; min-width: 0; }
.actionbar__sum b { font: 500 18px var(--f-display); font-feature-settings: "tnum" 1; }
.actionbar__sum span { font-size: 13px; color: var(--muted); }
.actionbar .btn { flex: 1; height: 52px; font-size: 16px; }

/* dolny pasek nawigacji - tylko telefon */
.tabbar { display: none; }

/* poziomy przewijany rząd chipów */
.chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--graphite); background: var(--paper); white-space: nowrap; }
.chip[aria-pressed="true"], .chip.is-on { border-color: var(--ink); color: var(--ink); background: var(--pearl); }
.chip small { color: var(--muted); font-size: 12px; }

/* karty wyboru (dostawa, płatność) */
.opt { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; min-height: 60px; padding: 14px 16px; border: 1px solid var(--line-field); border-radius: var(--r-btn); background: var(--paper); cursor: pointer; }
.opt + .opt { margin-top: 8px; }
.opt input { width: 20px; height: 20px; accent-color: var(--t400); margin: 0; }
.opt b { font-weight: 400; color: var(--ink); display: block; }
.opt small { color: var(--muted); font-size: 13px; }
.opt .opt__side { font-size: 14px; color: var(--ink); font-feature-settings: "tnum" 1; text-align: right; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt--off { opacity: .55; }
.mark { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 44px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 5px; font: 600 11px var(--f-body); letter-spacing: .02em; color: var(--ink); background: var(--paper); }

/* akordeon */
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc > summary { list-style: none; min-height: 56px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font: 400 16px var(--f-display); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; font: 300 22px var(--f-display); color: var(--graphite); }
.acc[open] > summary::after { content: "-"; }
.acc__body { padding: 0 0 20px; color: var(--graphite); font-size: 15px; line-height: 1.7; }

/* pasek postępu (darmowa dostawa, próg rabatu) */
.meter { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 8px 0 6px; }
.meter i { display: block; height: 100%; background: var(--t400); border-radius: 2px; }

/* komunikaty */
.notice { padding: 14px 16px; border-radius: var(--r-btn); background: var(--pearl); font-size: 14px; color: var(--graphite); }
.notice--ok { background: var(--t100); color: var(--t500); }
.notice--warn { background: #faf1e4; color: #6b4a14; }

/* arkusz wysuwany z dołu (filtry, sortowanie) */
.sheet { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--paper); border-radius: 12px 12px 0 0; max-height: 86vh; overflow: auto; padding: 8px var(--gutter) calc(16px + var(--safe)); transform: translateY(100%); overscroll-behavior: contain; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.sheet.is-open { transform: none; }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto 12px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(20, 24, 26, .35); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* kroki zamówienia */
.steps { display: flex; gap: 6px; font-size: 13px; color: var(--muted); }
.steps li { list-style: none; display: flex; align-items: center; gap: 6px; }
.steps li + li::before { content: ""; width: 18px; height: 1px; background: var(--line-strong); }
.steps .is-on { color: var(--ink); }
ul.steps { margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
	.sheet, .scrim { transition: none; }
}

/* ─── telefon ─── */
@media (max-width: 760px) {
	body { font-size: 16px; }
	input.field, .field, .qo .field { font-size: 16px; height: var(--tap); }
	.btn { min-height: var(--tap); }
	.btn--sm { height: 44px; }
	.promo__btn { width: 44px; height: 44px; }
	.d-qty button { width: var(--tap); height: var(--tap); }
	.tool { min-width: 44px; min-height: 44px; justify-content: center; }
	.nav a { display: inline-flex; align-items: center; min-height: 44px; }
	.pcard__add { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }

	/* dolny pasek nawigacji w zasięgu kciuka */
	.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--bar-h) + var(--safe)); padding-bottom: var(--safe); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
	.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--graphite); position: relative; }
	.tabbar a[aria-current="page"] { color: var(--t400); }
	.tabbar svg { width: 22px; height: 22px; }
	.tabbar .badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--t400); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
	body.has-tabbar { padding-bottom: calc(var(--bar-h) + var(--safe)); }
	body.has-actionbar .tabbar { display: none; }

	.form-2 { grid-template-columns: 1fr; gap: 0; }
	.actionbar { display: flex; padding-left: 16px; padding-right: 16px; }
	body.has-actionbar { padding-bottom: calc(84px + var(--safe)); }
	/* w trakcie zakupu bez rzędu kategorii: są w menu i w dolnym pasku */
	body.has-actionbar .nav { display: none; }
	/* bez dublowania: listy, koszyk i logowanie są w dolnym pasku */
	body.has-tabbar .tool--dup { display: none; }
	/* rząd kategorii tylko na stronie głównej, dalej prowadzą okruszki i dolny pasek */
	body:not(.is-home) .nav { display: none; }
	.topline .wrap { height: 30px; }
}

/* zadanie 02 (audyt 2026-09-20): nagłówek na 320 px — ikony ciaśniej, logo nie wymusza szerokości */
@media (max-width: 360px) {
	.hdr .wrap { gap: 8px; }
	.hdr__tools { gap: 8px; }
	.hdr .wrap > :first-child { max-width: 42%; }
	.hdr .wrap > :first-child img, .hdr .wrap > :first-child svg { max-width: 100%; height: auto; }
	.search { min-width: 0; }
}

/* zadanie 02 (audyt 2026-09-20): tabele „Zamów ponownie" / zamówienia — nazwa produktu łamie się w komórce */
.d-table, .d-table tr, .d-table td, .d-table th, .d-prod, .d-prod > div, .c-prod { min-width: 0; max-width: 100%; }
.d-prod > div, .d-prod a, .d-prod .meta, .c-prod { overflow-wrap: anywhere; }