/* =========================================================
   DOM DLA DUSZY – styl sklepu
   Kolory i czcionki wg "Specyfikacja marki" (5.08.2026)
   ========================================================= */
:root {
  --sage: #879A83;        /* Szałwiowa zieleń – kolor główny */
  --sage-dark: #5d6f5a;   /* do drobnego tekstu na białym (czytelność) */
  --sage-deep: #4a5a48;
  --sage-light: #eef1ec;
  --white: #ffffff;
  --beige: #dbcdbf;       /* kolor uzupełniający */
  --beige-light: #f5efe8;
  --brown: #79522f;       /* kolor uzupełniający */
  --ink: #2e352d;
  --muted: #6b7268;
  --line: #e2e4df;
  --danger: #a33a2c;
  --radius: 4px;
  --shadow: 0 10px 30px rgba(46, 53, 45, .12);
  --head: 'Marcellus', Georgia, serif;
  --body: 'Lato', system-ui, sans-serif;
  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(30px, 4vw, 46px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* ---------- Przyciski ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border: 1px solid var(--sage); background: var(--sage); color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: var(--radius); transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--sage-dark); border-color: var(--sage-dark); }
.btn.ghost { background: transparent; color: var(--sage-dark); }
.btn.ghost:hover { background: var(--sage); color: #fff; }
.btn.light { background: #fff; color: var(--sage-dark); border-color: #fff; }
.btn.light:hover { background: var(--beige-light); }
.btn.outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn.outline-light:hover { background: #fff; color: var(--sage-dark); }
.btn.block { width: 100%; }
/* długie słowa (np. niemieckie) nie mogą rozpychać przycisków i kolumn */
.btn { text-align: center; overflow-wrap: anywhere; }
body { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.auth > div, .cart > *, .product > *, .split > *, .account > *, .shop > * { min-width: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------- Pasek informacyjny (najwyżej) ---------- */
.notice { background: var(--sage-deep); color: #fff; text-align: center; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; padding: 8px 16px; }
.notice a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ---------- Cienki biały pasek ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--sage-dark); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar .contacts { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--sage-deep); }
.topbar .social { display: flex; gap: 14px; }
.icon { width: 18px; height: 18px; flex: none; }

/* ---------- Nagłówek szałwiowy ---------- */
#site-header { position: sticky; top: 0; z-index: 50; }
.header { background: var(--sage); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.header .bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 6px 0; }
.logo img { height: 74px; width: auto; }
.search { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.search input { width: 100%; height: 44px; border: 0; border-radius: 22px; padding: 0 48px 0 20px; background: #fff; color: var(--ink); outline: none; }
.search input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.search button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sage); color: #fff; cursor: pointer; display: grid; place-items: center; }
.search-results { position: absolute; top: 50px; left: 0; right: 0; background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 420px; overflow: auto; display: none; z-index: 70; }
.search-results.open { display: block; }
.search-results a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.search-results a:hover { background: var(--sage-light); }
.search-results .thumb { width: 44px; height: 44px; flex: none; }
.search-results .empty { padding: 16px; font-size: 14px; color: var(--muted); }

.actions { display: flex; align-items: center; gap: 6px; }
.act { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; background: none; border: 0; color: #fff; cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius); }
.act:hover { background: rgba(255,255,255,.12); }
.act .icon { width: 22px; height: 22px; }
.badge { position: absolute; top: 0; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--sage-deep); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.lang { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 4px 6px; font-size: 13px; cursor: pointer; }
.lang option { color: var(--ink); }
.catalog-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #fff; border-radius: 20px; background: transparent; color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.catalog-toggle .dot { width: 30px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.35); position: relative; transition: background .2s; }
.catalog-toggle .dot::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .2s; }
.catalog-toggle.on { background: #fff; color: var(--sage-deep); }
.catalog-toggle.on .dot { background: var(--sage); }
.catalog-toggle.on .dot::after { left: 16px; }

/* ---------- Menu ---------- */
.nav { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 4px 12px rgba(46,53,45,.06); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 4px; }
.nav > .wrap > ul > li > a, .nav > .wrap > ul > li > button { display: block; padding: 13px 20px; font-family: var(--head); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-dark); background: none; border: 0; cursor: pointer; position: relative; }
.nav > .wrap > ul > li > a:hover, .nav > .wrap > ul > li > button:hover { color: var(--sage-deep); }
.nav > .wrap > ul > li > a, .nav > .wrap > ul > li > button { white-space: nowrap; hyphens: none; }
@media (max-width: 1100px) and (min-width: 901px) {
  .nav > .wrap > ul > li > a, .nav > .wrap > ul > li > button { padding: 13px 12px; font-size: 15px; letter-spacing: .05em; }
  .nav > .wrap > ul > li > a::after, .nav > .wrap > ul > li > button::after { left: 12px; right: 12px; }
}
.nav > .wrap > ul > li > a::after, .nav > .wrap > ul > li > button::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 8px; height: 2px; background: var(--sage); transform: scaleX(0); transition: transform .25s; }
.nav > .wrap > ul > li:hover > a::after, .nav > .wrap > ul > li:hover > button::after, .nav a.active::after { transform: scaleX(1); }
.burger { display: none; }

/* Mega menu (białe tło, szałwiowe napisy) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--sage-dark); box-shadow: 0 18px 30px rgba(0,0,0,.12); border-top: 3px solid var(--sage); display: none; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .mega.open { display: block; }
@media (min-width: 901px) { .has-mega.force-close .mega { display: none; } }
.mega .inner { display: grid; grid-template-columns: 270px 1fr; min-height: 340px; }
.mega .cats { border-right: 1px solid var(--line); padding: 18px 0; }
.mega .cats a { display: flex; justify-content: space-between; align-items: center; padding: 9px 24px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.mega .cats a:hover, .mega .cats a.on { background: var(--sage-light); color: var(--sage-deep); }
.mega .cats a.on { text-decoration: underline; text-underline-offset: 4px; }
.mega .subs { padding: 24px 32px; }
.mega .subs h4 { font-size: 20px; color: var(--sage-deep); margin-bottom: 18px; }
.mega .subs .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 14px; }
/* „Wszystko” – bez panelu podkategorii: widoczna tylko lista kategorii */
@media (min-width: 901px) {
  .mega.no-subs { background: transparent; box-shadow: none; border-top-color: transparent; pointer-events: none; }
  .mega.no-subs .inner { min-height: 0; }
  .mega.no-subs .cats { background: #fff; pointer-events: auto; border-top: 3px solid var(--sage); margin-top: -3px; box-shadow: 0 18px 30px rgba(0,0,0,.12); border-right: 0; }
  .mega.no-subs .subs { display: none; }
}
.mega .see-all { margin-top: 22px; display: inline-block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

/* Kółka kategorii */
.circle { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-dark); line-height: 1.25; }
.circle .ring { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sage); padding: 3px; background: #fff; transition: transform .25s, box-shadow .25s; }
.circle .ring > * { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.circle:hover .ring { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(93,111,90,.25); }
.circle.on .ring { border-width: 3px; border-color: var(--sage-deep); box-shadow: 0 0 0 3px var(--sage-light); }
.circle.on > span { font-weight: 700; color: var(--sage-deep); text-decoration: underline; text-underline-offset: 4px; }
.circle .ph.all { background: var(--sage); }
.circle .ph.all span { display: block; position: static; color: #fff; font-size: 10.5px; letter-spacing: .04em; }
.circle.lg .ring { width: 150px; height: 150px; }
.circle.lg { font-size: 15px; }

/* Placeholder zdjęcia */
.ph { background: var(--sage-light); display: grid; place-items: center; position: relative; overflow: hidden; }
.ph img { width: 46% !important; height: auto !important; opacity: .55; border-radius: 0 !important; object-fit: contain !important; }
.ph span { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dark); }
.ph.dark { background: var(--sage); }
.circle .ph span, .search-results .ph span, .cart-item .ph span { display: none; }
.circle .ph img { width: 70% !important; }

/* ---------- Tryb katalogu ---------- */
.catalog-banner { background: var(--beige); color: var(--brown); text-align: center; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; }
.catalog-banner b { font-weight: 700; }

/* ---------- Hero / slider ---------- */
.hero { position: relative; height: clamp(420px, 62vh, 620px); overflow: hidden; background: var(--beige-light); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; display: grid; }
.slide.on { opacity: 1; z-index: 1; }
.slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(46,53,45,.62) 0%, rgba(46,53,45,.25) 55%, rgba(46,53,45,0) 100%); }
/* slajd z produktami: zieleń z tekstem po lewej, produkty w całości po prawej na jasnym tle */
.slide.trio { background: #f4f1ec; }
.slide.trio::after { background: linear-gradient(90deg, var(--sage) 0%, var(--sage) 34%, rgba(135,154,131,0) 52%); }
.slide.trio .pics { position: absolute; top: 0; bottom: 0; right: 0; left: 40%; display: flex; align-items: center; justify-content: center; gap: 1%; padding: 0 3%; z-index: 1; }
.slide.trio .pics img { height: 82%; width: auto; max-width: 27%; object-fit: contain; }
.slide .txt { position: relative; z-index: 2; color: #fff; align-self: center; max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 64px; }
.slide .txt > div { max-width: 520px; }
.slide h1, .slide h2 { font-size: clamp(32px, 4.5vw, 54px); color: #fff; }
.slide p { font-size: 18px; margin-bottom: 28px; opacity: .95; }
.hero .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hero .arrow:hover { background: rgba(255,255,255,.3); }
.hero .prev { left: 18px; } .hero .next { right: 18px; }
.dots { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 3; }
.dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; padding: 0; }
.dots button.on { background: #fff; }

/* Slajdy główne w stylu projektu Julii: zdjęcie na całą szerokość + zielona mgiełka + biały tekst.
   .bg – rozmyta kopia zdjęcia jako tło, .ph – ostre zdjęcie w całości po prawej, wtopione w tło. */
.hero:has(.photo) { height: clamp(460px, 72vh, 700px); background: var(--sage-deep); }
.slide.photo > img.bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(32px) saturate(.9); transform: scale(1.05); }
.slide.photo > img.ph { position: absolute; inset: 0 0 0 auto; left: auto; width: auto; max-width: 78%; height: 100%; object-fit: contain; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
/* zdjęcie poziome: wypełnia cały prawy obszar (bez jasnych pasów nad i pod zdjęciem) */
.slide.photo.wide > img.ph { width: 78%; object-fit: cover; object-position: 45% 60%; }
.slide.photo::after { z-index: 1; background: linear-gradient(90deg, rgba(110,128,101,.9) 0%, rgba(128,147,118,.72) 34%, rgba(128,147,118,.3) 60%, rgba(128,147,118,.08) 85%); }
.slide.photo > .wrap { position: relative; z-index: 2; height: 100%; width: 100%; display: flex; align-items: center; padding: 0 80px; }
.slide.photo .txt { padding: 0; margin: 0; max-width: 560px; color: #fff; }
.slide.photo .kicker { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.slide.photo .kicker::before { content: ''; width: 64px; height: 1px; background: rgba(255,255,255,.85); }
.slide.photo h1, .slide.photo h2 { color: #fff; font-size: clamp(32px, 4vw, 50px); margin-bottom: 16px; text-shadow: 0 1px 14px rgba(40,50,38,.25); }
.slide.photo p { color: #fff; font-size: 17px; opacity: .97; margin-bottom: 28px; }
.slide.photo .btn { background: #fff; border-color: #fff; color: var(--sage-deep); }
.slide.photo .btn:hover { background: var(--beige-light); border-color: var(--beige-light); }

/* Slajdy główne – jeden wspólny układ: tekst na jasnym tle + 3 wizualizacje w jednakowych ramkach */
.slide.scene { background: var(--beige-light); }
.slide.scene::after { display: none; }
.slide.scene > .wrap { position: relative; z-index: 2; height: 100%; width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; padding: 0 80px; }
.slide.scene .txt { padding: 0; margin: 0; color: var(--sage-deep); max-width: 470px; }
.slide.scene h1, .slide.scene h2 { color: var(--sage-deep); margin-bottom: 14px; }
.slide.scene p { color: var(--text, #3d3d3d); opacity: 1; }
.slide.scene .pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; }
.slide.scene figure { margin: 0; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(60, 50, 40, .16); background: #fff; }
.slide.scene figure:nth-child(2) { transform: translateY(-14px); }
.slide.scene figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero:has(.scene) .arrow { border-color: var(--sage); color: var(--sage-deep); background: rgba(255, 255, 255, .7); }
.hero:has(.scene) .arrow:hover { background: #fff; }
.hero:has(.scene) .dots button { border-color: var(--sage); }
.hero:has(.scene) .dots button.on { background: var(--sage); }

/* ---------- Sekcje ---------- */
.section { padding-block: 72px; }
.section.tight { padding-block: 48px; } /* padding-block: nie zeruje bocznego marginesu .wrap (np. zestaw mini urn) */
.band { background: var(--sage); color: #fff; text-align: center; padding: 14px 16px; font-family: var(--head); font-size: 24px; letter-spacing: .14em; text-transform: uppercase; }
.band.beige { background: var(--beige); color: var(--brown); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.sec-head h2 { margin: 0; }
.eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 8px; display: block; }
.bg-sage { background: var(--sage); color: #fff; }
.bg-sage h2, .bg-sage h3 { color: #fff; }
.bg-beige { background: var(--beige-light); }
.bg-mint { background: var(--sage-light); }

.cat-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 34px; margin: 0 auto; }
/* kółka o równej szerokości – kolumny wyrównane; liczbę kolumn wyrównuje balanceCircles() w app.js (np. 4 + 4 zamiast 6 + 2) */
.cat-circles > .circle { width: 112px; }
.cat-circles > .circle.lg { width: 168px; }

/* Karuzela */
.carousel { position: relative; }
.carousel .track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track > * { scroll-snap-align: start; }
.carousel .nav-btn { position: absolute; top: 38%; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--sage-dark); cursor: pointer; box-shadow: var(--shadow); z-index: 2; display: grid; place-items: center; }
.carousel .nav-btn.l { left: -18px; } .carousel .nav-btn.r { right: -18px; }

/* ---------- Karta produktu ---------- */
.grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; }
.card .media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #f4f1ec; border-radius: var(--radius); }
.card .media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .media > img { transform: scale(1.04); }
.card .media .ph { width: 100%; height: 100%; }
.card .tags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.tag { background: var(--sage); color: #fff; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; }
.tag.excl { background: var(--brown); color: #fff; }
.locked.excl { background: var(--beige-light); border-left-color: var(--brown); }
.tag.beige { background: var(--beige); color: var(--brown); }
.fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--sage-dark); display: grid; place-items: center; cursor: pointer; }
.fav.on { color: var(--danger); }
.fav.on svg { fill: currentColor; }
.card .body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .sku { font-size: 11.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.card h3 { font-size: 18px; margin: 0; }
.card .meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); display: inline-block; flex: none; }
.card .more-colors { font-size: 12px; color: var(--sage-dark); }
.card .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font-size: 18px; font-weight: 700; color: var(--ink); }
.price small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.price-lock { font-size: 13px; color: var(--sage-dark); display: inline-flex; align-items: center; gap: 6px; }
.add-mini { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sage); background: #fff; color: var(--sage-dark); cursor: pointer; display: grid; place-items: center; flex: none; }
.add-mini:hover { background: var(--sage); color: #fff; }

/* ---------- Strona kategorii ---------- */
.page-hero { position: relative; background: var(--sage); color: #fff; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 2; padding-top: 54px; padding-bottom: 54px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.page-hero h1 { color: #fff; }
.page-hero p { font-size: 17px; max-width: 560px; opacity: .95; }
/* zdjęcie wypełnia prawą część banera i płynnie przechodzi w zieleń */
.page-hero { min-height: 340px; display: flex; align-items: center; }
.page-hero .wrap { position: static; width: 100%; grid-template-columns: minmax(0, 560px); }
.page-hero .wrap > div:first-child { position: relative; z-index: 2; }
.page-hero .pic { position: absolute; top: 0; bottom: 0; right: 0; left: 38%; z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
.page-hero .pic img, .page-hero .pic .ph { width: 100%; height: 100%; object-fit: cover; }
/* trzy urny obok siebie – całe, bez przycinania */
.page-hero .pic.trio { background: #f4f1ec; display: flex; align-items: center; justify-content: center; gap: 2%; padding: 0 3% 0 20%; }
.page-hero .pic.trio img { width: auto; height: 96%; max-width: 32%; object-fit: contain; }
.page-hero.simple { min-height: 0; }
.page-hero.simple .wrap { grid-template-columns: 1fr; text-align: center; padding-top: 44px; padding-bottom: 44px; }
.page-hero.simple p { margin: 0 auto; }
.crumbs { font-size: 13px; color: var(--muted); padding: 16px 0; }
.crumbs a:hover { color: var(--sage-dark); text-decoration: underline; }
.crumbs span { margin: 0 8px; }
.page-hero .crumbs { color: rgba(255,255,255,.8); padding: 0 0 10px; }

.shop { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 32px 0 80px; }
.filters { align-self: start; position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow: auto; padding-right: 6px; }
.filters h3 { font-size: 20px; display: flex; justify-content: space-between; align-items: center; }
.fgroup { border-top: 1px solid var(--line); padding: 14px 0; }
.fgroup summary { cursor: pointer; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-deep); font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: '+'; font-weight: 400; }
.fgroup[open] summary::after { content: '–'; }
.fopts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fopts label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.fopts input { accent-color: var(--sage); width: 16px; height: 16px; }
.fopts .count { margin-left: auto; color: var(--muted); font-size: 12px; }
.fopts .subopts { padding-left: 26px; display: flex; flex-direction: column; gap: 6px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.toolbar select { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--sage-light); color: var(--sage-deep); border: 0; border-radius: 16px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.filters-btn { display: none; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

/* ---------- Strona produktu ---------- */
.product { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 8px 0 72px; }
.gallery .main { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: #f4f1ec; }
.gallery .main > img { width: 100%; height: 100%; object-fit: contain; } /* wizualizacje w całości, bez przycinania */
.gallery .main .ph { width: 100%; height: 100%; }
.gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery .thumbs button { width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: none; }
.gallery .thumbs button.on { border-color: var(--sage); }
.gallery .thumbs { flex-wrap: wrap; }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: contain; background: #f4f1ec; }
.pinfo .sku { font-size: 13px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.pinfo h1 { font-size: clamp(28px, 3vw, 40px); margin-top: 6px; }
.pinfo .price { font-size: 28px; margin: 10px 0 4px; }
.pinfo .price-note { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.locked { background: var(--sage-light); border-left: 3px solid var(--sage); padding: 16px 18px; border-radius: var(--radius); margin: 16px 0 24px; font-size: 15px; }
.locked .row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.variants h4 { font-family: var(--body); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; color: var(--sage-deep); }
.variants h4 b { font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; margin-left: 6px; font-size: 15px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.swatches a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); position: relative; transition: transform .15s; }
.swatches a:hover { transform: scale(1.08); }
.swatches a.on { outline: 2px solid var(--sage); outline-offset: 3px; }
.buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.qty button { width: 40px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--sage-dark); }
.qty input { width: 48px; text-align: center; border: 0; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy .btn { flex: 1; }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; margin: 18px 0; }
.specs th, .specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { width: 42%; font-weight: 400; color: var(--muted); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13.5px; color: var(--sage-deep); margin-top: 8px; }
.perks div { display: flex; gap: 8px; align-items: center; }

/* ---------- BIO SOUL ---------- */
.bs-hero { background: var(--sage); color: #fff; }
.bs-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.bs-hero .logo-bs { width: 150px; margin-bottom: 18px; }
.bs-hero h1 { color: #fff; }
.bs-hero .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bs-hero .pics img { border-radius: var(--radius); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.bs-hero .pics img:first-child { margin-top: 40px; }
.subnav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 133px; z-index: 30; }
.subnav .wrap { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.subnav a { padding-left: 14px; padding-right: 14px; }
.subnav a { padding: 14px 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dark); white-space: nowrap; }
.subnav a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 5px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; font-size: 15px; }
.feature .num { font-family: var(--head); font-size: 30px; color: var(--sage); line-height: 1; margin-bottom: 10px; }
.steps-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.steps-3 .st { padding: 26px; }
.steps-3 .st .ilu { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 50%; margin: 0 auto 18px; padding: 10px; }
.steps-3 .st .n { width: 64px; height: 64px; border-radius: 50%; border: 1px solid #fff; display: grid; place-items: center; margin: 0 auto 14px; font-family: var(--head); font-size: 28px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tabs button { border: 1px solid var(--sage); background: #fff; color: var(--sage-dark); padding: 9px 18px; border-radius: 20px; cursor: pointer; font-size: 14px; }
.tabs button.on { background: var(--sage); color: #fff; }
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; background: #fff; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); }
ol.steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-family: var(--head); }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-family: var(--head); font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--sage); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 12px 0 0; color: var(--muted); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.option { border-top: 2px solid var(--sage); padding-top: 14px; }
.option h4 { font-size: 19px; color: var(--sage-deep); }

/* ---------- Dwa kafle / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .pic img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split .pic.tall img { aspect-ratio: 4 / 5; } /* zdjęcie pionowe (np. Hera z mini urną) – całe, bez przycinania urny */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.why .it { padding: 28px; background: #fff; border-radius: var(--radius); }
.why .it .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--sage-light); color: var(--sage-dark); display: grid; place-items: center; margin-bottom: 16px; }

/* ---------- Formularze / panel ---------- */
.form { display: grid; gap: 14px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: 13px; letter-spacing: .06em; color: var(--sage-deep); margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cfd3cc; border-radius: var(--radius); padding: 11px 13px; background: #fff; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(135,154,131,.2); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.field .err { font-size: 12px; color: var(--danger); margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { accent-color: var(--sage); margin-top: 4px; }
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1000px; margin: 40px auto 80px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.auth > div { padding: 40px; }
.auth .side { background: var(--sage); color: #fff; }
.auth .side h2 { color: #fff; }
.auth .side ul { padding-left: 18px; }
.auth .side li { margin-bottom: 8px; }
.box { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; }
.box + .box { margin-top: 20px; }
.split > .box + .box { margin-top: 0; } /* ramki obok siebie – równo u góry */
.account { display: grid; grid-template-columns: 240px 1fr; gap: 36px; padding: 32px 0 80px; }
.account nav a { display: block; padding: 11px 14px; border-left: 2px solid transparent; font-size: 14px; letter-spacing: .06em; }
.account nav a.on, .account nav a:hover { border-color: var(--sage); background: var(--sage-light); color: var(--sage-deep); }
.radio-cards { display: grid; gap: 10px; }
.radio-cards label { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; }
.radio-cards label:has(input:checked) { border-color: var(--sage); background: var(--sage-light); }
.radio-cards input { accent-color: var(--sage); margin-top: 5px; width: auto; flex: none; }
.radio-cards b { display: block; }
.radio-cards small { color: var(--muted); }
.margin-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; font-size: 14px; }
.margin-preview div { background: var(--beige-light); padding: 12px; border-radius: var(--radius); text-align: center; }
.margin-preview b { display: block; font-size: 18px; color: var(--brown); }
table.orders { width: 100%; border-collapse: collapse; font-size: 14px; }
table.orders th, table.orders td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.orders th { color: var(--muted); font-weight: 400; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; background: var(--sage-light); color: var(--sage-deep); }

/* ---------- Koszyk ---------- */
.cart { display: grid; grid-template-columns: 1fr 360px; gap: 40px; padding: 24px 0 80px; align-items: start; }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item .thumb { width: 96px; height: 110px; border-radius: var(--radius); overflow: hidden; }
.cart-item .thumb > img, .cart-item .thumb .ph { width: 100%; height: 100%; object-fit: cover; }
.cart-item h4 { font-size: 17px; margin: 0 0 2px; }
.cart-item .qty { height: 40px; }
.cart-item .rm { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; margin-top: 4px; }
.summary { background: var(--beige-light); padding: 26px; border-radius: var(--radius); position: sticky; top: 150px; }
.summary .line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 15px; }
.summary .line.total { border-top: 1px solid var(--beige); margin-top: 8px; padding-top: 14px; font-size: 19px; font-weight: 700; }
.progress { height: 6px; background: #fff; border-radius: 3px; overflow: hidden; margin: 8px 0 4px; }
.progress div { height: 100%; background: var(--sage); }
.inpost { font-size: 13px; color: var(--muted); }
/* promocja 10 + 1 – wybór urny Gala za 1 zł */
.gift-box { margin-top: 22px; padding: 18px 20px; border: 1px dashed var(--sage); border-radius: var(--radius); background: var(--sage-light); }
.gift-box h3 { margin-bottom: 4px; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 10px; }
.gift-grid button { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; cursor: pointer; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gift-grid button:hover { border-color: var(--sage); box-shadow: var(--shadow); }
.gift-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.cart-item.gift { background: var(--beige-light); padding-left: 10px; padding-right: 10px; }

/* ---------- Mapa ---------- */
.map-box { position: relative; aspect-ratio: 16 / 8; background: var(--sage-light); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-box > svg { width: 100%; height: 100%; }
/* mapa dystrybutorów: lista + mapa Leaflet */
.map-info { max-width: 760px; margin: 40px auto 0; text-align: center; }
.map-info .box { margin: 0; }
/* zgłoszenie zakładu na mapę: rejestracja, panel „Na mapie”, admin */
.mp-yn { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-bottom: 6px; }
.mp-box { margin-bottom: 8px; }
.mp-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 10px; margin-bottom: 12px; background: #fcfbf9; }
.mp-row .row2 .field { margin-bottom: 10px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.mp-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: #f3ead8; color: #7a5a1e; }
.mp-st.widoczny { background: var(--sage-light); color: #3d4f3a; }
.mp-st.odrzucony, .mp-st.wstrzymany { background: #f6e3e1; color: #8a3a32; }
.mp-keep { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 4px; margin: 6px 0 16px; background: #fbfaf7; }
.mp-keep.off { border-color: #e7c4bf; background: #fdf6f5; }
.mp-keep-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; }
.mp-keep-h span { font-size: 13px; color: #6b6b6b; }
.mp-bar { height: 8px; border-radius: 99px; background: #ebe6dd; margin: 10px 0 8px; overflow: hidden; }
.mp-bar span { display: block; height: 100%; background: var(--sage); border-radius: 99px; }
.mp-keep.off .mp-bar span { background: #c9786d; }
.mp-rule { line-height: 2.4; }
.mp-rule input { display: inline-block; width: 58px; height: 32px; padding: 2px 6px; margin: 0 4px; text-align: center; font: inherit; border: 1px solid var(--line); border-radius: 6px; }
.mp-list td, .mp-list th { vertical-align: middle; }
.mp-list td.nowrap { white-space: nowrap; }
.mp-list .mp-fix-row td { padding: 0; border: 0; }
.mp-fix { padding: 6px 0 18px; }
.mp-fix-map { height: 320px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 0; }
.map-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.map-tools #map-q { flex: 1 1 280px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; }
.map-tools #map-near { display: inline-flex; align-items: center; gap: 6px; }
.map-tools #map-near svg { width: 16px; height: 16px; }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.map-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink, #333); }
.map-chips button.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.map-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: 620px; }
.map-layout .map-box { aspect-ratio: auto; height: 100%; z-index: 0; }
.map-list { overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.map-count { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; } /* nad przewijanymi pozycjami listy */
.map-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f0ece5; background: none; padding: 10px 14px; font: inherit; cursor: pointer; position: relative; }
.map-item:hover { background: var(--sage-light); }
.map-item b { display: block; font-size: 14px; padding-right: 54px; }
.map-item span { display: block; font-size: 12.5px; color: #6b6b6b; }
.map-item em { position: absolute; right: 14px; top: 11px; font-style: normal; font-size: 12px; color: var(--sage-dark, #5d6f58); font-weight: 700; }
.map-pin span { display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--sage-dark, #5d6f58); transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.map-pin span::after { content: ''; position: absolute; left: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.map-pop { font: 13px/1.45 Lato, sans-serif; min-width: 200px; }
.map-pop b { font-size: 14px; }
.map-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sage-light); font-size: 11px; }
.map-pop-a { display: flex; gap: 14px; margin-top: 8px; }
.map-pop-a a { color: var(--sage-dark, #5d6f58); font-weight: 700; }
.map-box .marker-cluster-small, .map-box .marker-cluster-medium, .map-box .marker-cluster-large { background: rgba(122, 143, 115, .35); }
.map-box .marker-cluster-small div, .map-box .marker-cluster-medium div, .map-box .marker-cluster-large div { background: rgba(93, 111, 88, .9); color: #fff; font-weight: 700; }
@media (max-width: 860px) {
  .map-layout { grid-template-columns: 1fr; height: auto; }
  .map-layout .map-box { height: 420px; order: -1; }
  .map-list { max-height: 420px; }
}
.pin { cursor: pointer; }

/* ---------- Stopka ---------- */
.footer { background: var(--sage); color: #fff; padding: 56px 0 0; font-size: 15px; }
.footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h4 { font-family: var(--head); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer .logo-f { width: 230px; margin-bottom: 14px; }
.footer .social { display: flex; gap: 12px; margin-top: 16px; }
.footer .social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center; }
.footer .social a:hover { background: #fff; color: var(--sage-dark); }
.footer .bottom { border-top: 1px solid rgba(255,255,255,.3); margin-top: 44px; padding: 18px 0; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: .9; }
.footer .bio-mini { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.footer .bio-mini img { width: 54px; }

/* ---------- Toast / modal ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 13px 22px; border-radius: var(--radius); font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(560px, calc(100vw - 32px)); }
.toast .nudge { background: var(--sage); color: #fff; font-weight: 700; padding: 8px 12px; border-radius: 6px; font-size: 14px; line-height: 1.4; }
.toast .nudge + .nudge { background: rgba(255,255,255,.12); font-weight: 400; }
/* Promocja 10 + 1 – znaczek na kartach, wąski pasek, informacja na stronie produktu */
.tag.promo { background: var(--sage-deep); color: #fff; letter-spacing: .06em; }
.badge10 { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--sage-deep); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.promo-strip { background: var(--sage-light); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--sage-deep); font-size: 14.5px; }
.promo-strip .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 11px; padding-bottom: 11px; text-align: left; }
/* Banery kategorii – wizualizacja jak na stronie głównej: rozmyte tło + całe zdjęcie po prawej + zielona mgiełka */
.page-hero.photo-hero { min-height: 400px; background: var(--sage-deep); }
.photo-hero > img.bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(32px) saturate(.9); z-index: 0; }
.photo-hero > img.ph { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 70%; object-fit: contain; object-position: right center; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.photo-hero.wide > img.ph { width: 70%; object-fit: cover; object-position: 50% 60%; }
.photo-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(110,128,101,.92) 0%, rgba(128,147,118,.78) 34%, rgba(128,147,118,.3) 60%, rgba(128,147,118,.06) 85%); }
.photo-hero .wrap { z-index: 2; }
.photo-hero h1 { text-shadow: 0 1px 14px rgba(40,50,38,.25); }
@media (max-width: 900px) {
  .page-hero.photo-hero { min-height: 520px; align-items: flex-start; }
  .photo-hero > img.ph, .photo-hero.wide > img.ph { top: auto; bottom: 0; left: 0; width: 100%; max-width: none; height: 52%; object-fit: cover; object-position: center 60%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
  .photo-hero::after { background: linear-gradient(180deg, rgba(110,128,101,.92) 0%, rgba(128,147,118,.75) 40%, rgba(128,147,118,.15) 60%, rgba(128,147,118,0) 75%); }
  .photo-hero .wrap { padding-top: 30px; padding-bottom: 30px; }
}
/* Katalog dla rodzin (link / kod QR) */
.kat-header .bar { grid-template-columns: auto 1fr auto; }
.kat-header .kat-firm { display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; gap: 2px; font-size: 15px; }
.kat-header .kat-firm b { font-family: var(--head); font-size: 20px; font-weight: 400; letter-spacing: .03em; }
.kat-header .kat-firm a { color: #fff; display: inline-flex; gap: 6px; align-items: center; opacity: .95; }
.kat-header .kat-firm svg { width: 15px; height: 15px; }
.kat-hero .eyebrow { margin-bottom: 6px; }
.kat-hero a.link { color: #fff; font-weight: 700; white-space: nowrap; }
.kat-contact { display: flex; gap: 10px; align-items: flex-start; background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 22px; color: var(--sage-deep); }
.kat-contact svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.kat-footer { padding: 26px 0; text-align: center; }
.kat-footer p { margin: 4px 0; }
.kat-link { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; }
.kat-link input { flex: 1 1 260px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; background: #fafaf8; }
.kat-qr { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.kat-qr #kat-qr { padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.kat-qr #kat-qr img, .kat-qr #kat-qr canvas { display: block; }
@media (max-width: 900px) { .kat-header .bar { grid-template-columns: auto 1fr auto; } .kat-header .kat-firm b { font-size: 16px; } }
/* Zestaw mini urn – komponowanie własnego mixu */
.mini-progress { background: var(--sage-light); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 24px; color: var(--sage-deep); position: sticky; top: 132px; z-index: 5; }
.mini-progress.done { background: var(--sage); color: #fff; border-color: var(--sage); }
.mini-progress.done .badge10 { background: #fff; color: var(--sage-deep); }
.mini-progress.done .badge10 svg { width: 14px; height: 14px; }
.mini-progress.done .progress div { background: #fff; }
.mini-progress .row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 10px; }
.mini-progress .progress { margin: 0; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.mini-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.mini-item .pic { display: block; aspect-ratio: 1 / 1; background: #f4f1ec; border-radius: 6px; overflow: hidden; }
.mini-item .pic img { width: 100%; height: 100%; object-fit: cover; }
.mini-item .nm { font-family: var(--head); font-size: 16px; color: var(--ink); }
.mini-item .meta { font-size: 12.5px; color: var(--muted, #6b6b6b); display: flex; gap: 6px; justify-content: center; align-items: center; }
.mini-item .qty { margin: 4px auto 0; }
.mini-bar { position: sticky; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border-top: 2px solid var(--sage); box-shadow: 0 -8px 20px rgba(0,0,0,.08); padding: 12px 18px; margin-top: 24px; }
.mini-bar:empty { display: none; }
.mini-bar .hint { color: #a5502b; }
.mini-gift-box { margin: 0 0 24px; }
.mini-gift-box .chosen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mini-gift-box .chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--sage); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; }
.mini-gift-box .chip button { border: 0; background: var(--sage-light); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; line-height: 1; }
@media (max-width: 900px) { .mini-progress { top: 112px; } .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* Dymek z wyjaśnieniem (np. przy „Emblemat”) */
.tip { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--sage); color: var(--sage-deep); font: italic 700 11px/1 Georgia, serif; text-transform: none; letter-spacing: 0; cursor: help; vertical-align: 1px; margin-left: 4px; }
.tip::before { content: 'i'; }
.tip-box { display: none; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px; background: var(--ink); color: #fff; font: 400 13px/1.45 var(--body, 'Lato', sans-serif); text-transform: none; letter-spacing: 0; padding: 10px 12px; border-radius: 6px; box-shadow: var(--shadow); z-index: 30; text-align: left; white-space: normal; }
.tip-box::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.tip:hover .tip-box, .tip:focus .tip-box { display: block; }
.fgroup .tip-box { left: 0; transform: none; }
.fgroup .tip-box::after { left: 14px; }
.promo-box { display: flex; gap: 12px; align-items: flex-start; background: var(--sage-light); border: 1px solid var(--line); border-left: 4px solid var(--sage-deep); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 20px; color: var(--sage-deep); font-size: 14.5px; line-height: 1.5; }
.promo-box .badge10 { margin-top: 2px; }
.perks .perk-promo { color: var(--sage-deep); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast a { text-decoration: underline; color: var(--beige); }
.proto { position: fixed; right: 14px; bottom: 14px; z-index: 150; background: var(--brown); color: #fff; font-size: 12px; padding: 8px 12px; border-radius: 20px; box-shadow: var(--shadow); cursor: pointer; border: 0; }
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 90; display: none; }
.drawer-bg.on { display: block; }

section[id] { scroll-margin-top: 200px; }
.legal { max-width: 860px; margin: 0 auto; padding: 40px 0 80px; }
.legal h2 { font-size: 22px; margin-top: 32px; color: var(--sage-deep); }
.legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 18px; }
.logo-box { width: 150px; height: 100px; background: #fff; border-radius: var(--radius); display: grid; place-items: center; padding: 12px; box-shadow: 0 2px 8px rgba(46,53,45,.06); }
.logo-box.wide { width: 320px; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.when-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.when-list li { background: var(--sage-light); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 4px; }
.when-list b { color: var(--sage-deep); }
.legal-note { background: var(--beige-light); border-left: 3px solid var(--brown); padding: 12px 16px; border-radius: var(--radius); font-size: 14px; }
.legal li ul { margin-top: 6px; padding-left: 20px; list-style: circle; }
.legal li ul li { margin-bottom: 4px; }
.legal ul { padding-left: 22px; }

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
  .page-hero .pic.trio { left: 48%; padding-left: 8%; }
  .slide.trio .pics { left: 46%; }
  .slide.scene > .wrap { gap: 28px; padding: 0 70px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .slide.scene .pics { gap: 10px; }
  .carousel .track { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .act .lbl { display: none; }
}
@media (max-width: 900px) {
  .header .bar { grid-template-columns: auto 1fr auto; gap: 10px; }
  .logo img { height: 56px; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-bottom: 8px; }
  .burger { display: inline-flex; }
  .nav { display: none; }
  .nav.open { display: block; position: fixed; inset: 0 20% 0 0; background: #fff; color: var(--sage-dark); z-index: 100; overflow: auto; border: 0; }
  .nav.open ul { flex-direction: column; gap: 0; }
  .nav.open > .wrap { padding: 0; }
  .nav.open > .wrap > ul > li > a, .nav.open > .wrap > ul > li > button { color: var(--sage-deep); border-bottom: 1px solid var(--line); width: 100%; text-align: left; padding: 16px 22px; }
  .nav.open .mega { position: static; box-shadow: none; border: 0; }
  .nav.open .has-mega:hover .mega { display: none; }
  .nav.open .mega.open { display: block; }
  .mega .inner { grid-template-columns: 1fr; min-height: 0; }
  .mega .subs { display: none; }
  .mega .cats { border: 0; padding: 0 0 10px 12px; }
  .catalog-toggle .txt { display: none; }
  .slide.trio .pics { left: 0; opacity: .35; }
  .slide.trio::after { background: rgba(135,154,131,.78); }
  .page-hero .pic.trio { left: 0; padding: 0 4%; }
  .page-hero .pic { left: 0; opacity: .28; -webkit-mask-image: none; mask-image: none; }
  .page-hero { min-height: 260px; }
  .bs-hero .wrap, .split, .product, .cart, .auth, .account { grid-template-columns: 1fr; }
  .shop { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); max-height: none; background: #fff; z-index: 100; padding: 22px; transform: translateX(100%); transition: transform .3s; top: 0; }
  .filters.open { transform: none; box-shadow: var(--shadow); }
  .filters-btn { display: inline-flex; }
  .why, .steps-3 { grid-template-columns: 1fr; }
  .carousel .track { grid-auto-columns: 62%; }
  .carousel .nav-btn { display: none; }
  .slide .txt { padding: 0 24px; }
  .hero .arrow { display: none; }
  /* Telefon: tekst na zdjęciu (u góry, na tle ściany/nieba), urna w całości niżej – jak na komputerze, tylko w pionie */
  .hero:has(.photo) { height: 640px; }
  .slide.photo > img.ph { inset: auto 0 0 0; max-width: none; width: 100%; height: 60%; object-fit: cover; object-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .slide.photo::after { background: linear-gradient(180deg, rgba(110,128,101,.9) 0%, rgba(128,147,118,.75) 38%, rgba(128,147,118,.2) 52%, rgba(128,147,118,0) 62%); }
  .slide.photo p { font-size: 14px; line-height: 1.5; }
  .slide.photo .txt { align-self: flex-start; }
  .slide.photo.wide > img.ph { width: 100%; object-position: center bottom; }
  .slide.photo > .wrap { padding: 34px 22px 50px; align-items: flex-start; }
  .slide.photo h1, .slide.photo h2 { font-size: 32px; margin-bottom: 10px; }
  .slide.photo .kicker { margin-bottom: 12px; }
  .slide.photo p { font-size: 15px; margin-bottom: 18px; }
  .hero:has(.scene) { height: auto; min-height: 0; }
  .slide.scene { position: absolute; }
  .slide.scene.on { position: relative; }
  .slide.scene > .wrap { grid-template-columns: 1fr; gap: 22px; padding: 34px 20px 54px; align-content: start; }
  .slide.scene .txt { max-width: none; }
  .slide.scene p { font-size: 16px; margin-bottom: 18px; }
  .slide.scene figure:nth-child(2) { transform: none; }
  .topbar .contacts a:first-child span { display: none; }
  .subnav { top: 118px; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .notice { font-size: 11px; letter-spacing: .08em; }
  .topbar .contacts { gap: 14px; }
  .topbar .contacts .mail { display: none; }
  .grid-products { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .card h3 { font-size: 16px; }
  .section { padding-block: 52px; }
  .form .row2 { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 76px 1fr; }
  .cart-item .thumb { width: 76px; height: 90px; }
  .auth > div { padding: 26px; }
  .margin-preview { grid-template-columns: 1fr; }
  .circle .ring { width: 72px; height: 72px; }
  .circle.lg .ring { width: 110px; height: 110px; }
  .cat-circles { gap: 20px 10px; }
  .cat-circles > .circle { width: 76px; font-size: 11px; letter-spacing: .03em; }
  .cat-circles > .circle.lg { width: 140px; }
  .act { padding: 6px; }
}

/* ---- Dokument WZ (wydanie zewnętrzne) – ekran i wydruk / PDF ---- */
.wz { max-width: 960px; padding: 32px 24px 80px; }
.wz-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.wz-doc { background: #fff; border: 1px solid var(--line, #e3ded5); border-radius: var(--radius); padding: 36px; }
.wz-head { display: flex; align-items: center; gap: 24px; border-bottom: 2px solid var(--sage); padding-bottom: 18px; margin-bottom: 20px; }
.wz-head img { height: 54px; width: auto; }
.wz-head h1 { font-size: 26px; margin: 0 0 4px; }
.wz-head p { margin: 0; color: #666; }
.wz-parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 22px; }
.wz-parties h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-dark); }
.wz-parties p { margin: 0; font-size: 14px; line-height: 1.5; }
.wz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wz-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #666; border-bottom: 1px solid #ccc; padding: 8px 6px; }
.wz-table td { border-bottom: 1px solid #eee; padding: 8px 6px; vertical-align: middle; }
.wz-table td img { width: 64px; height: 80px; object-fit: contain; background: #f4f1ec; border-radius: 6px; }
.wz-table .num { text-align: right; white-space: nowrap; font-weight: 600; }
.wz-table .nowrap { white-space: nowrap; }
.wz-table tfoot td { border-top: 2px solid #ccc; border-bottom: 0; font-weight: 700; }
.wz-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 70px; }
.wz-sign div { border-top: 1px solid #999; padding-top: 6px; text-align: center; font-size: 12px; color: #666; }
@media (max-width: 700px) { .wz-parties { grid-template-columns: 1fr; } .wz-doc { padding: 18px; } .wz-table td img { width: 44px; height: 56px; } }
@media print {
  #pre-header, #site-header, #site-footer, #proto, .no-print, .toast { display: none !important; }
  body { background: #fff; }
  .wz { padding: 0; max-width: none; }
  .wz-doc { border: 0; padding: 0; }
  .wz-table tr { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Zamówienie rozdzielone na kilka punktów dostawy ---- */
.split-toggle { margin-top: 16px; align-items: flex-start; }
.split-table-wrap { overflow-x: auto; margin-top: 14px; }
.split-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.split-table th { text-align: center; font-size: 11px; color: var(--sage-dark); padding: 6px 4px; border-bottom: 1px solid #ddd; max-width: 90px; line-height: 1.25; }
.split-table th:first-child { text-align: left; }
.split-table td { padding: 6px; border-bottom: 1px solid #eee; text-align: center; }
.split-table td:first-child { text-align: left; min-width: 130px; }
.split-table input { width: 46px; text-align: center; padding: 6px 2px; }
.split-table td.ok { color: var(--sage-deep); font-weight: 700; white-space: nowrap; }
.split-table td.bad { color: #b03a2e; font-weight: 700; white-space: nowrap; }
.add-point { margin-top: 12px; }
.add-point summary { cursor: pointer; color: var(--sage-dark); font-weight: 600; }
.wz-doc + .wz-doc { margin-top: 28px; }
@media print { .wz-doc + .wz-doc { margin-top: 0; break-before: page; } }

/* ---- Cennik hurtowy (#/cennik) i tabela zamówień ---- */
.pl-cat { margin: 26px 0 8px; font-size: 20px; color: var(--sage-deep); }
.wz-table.pl td img { width: 52px; height: 64px; }
.wz-table.pl .num { white-space: normal; text-align: right; }
.orders-wrap { overflow-x: auto; }
.orders td { vertical-align: top; }
.btn.small { padding: 7px 12px; font-size: 11px; white-space: nowrap; }
@media print { .wz-table.pl thead { display: table-header-group; } .pl-cat { break-after: avoid; } }
.order-card { border: 1px solid #e6e1d8; border-radius: var(--radius); padding: 16px 18px; margin-top: 14px; background: #fff; }
.oc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.oc-head .oc-sum { margin-left: auto; font-weight: 600; }
.oc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 12px; font-size: 14px; word-break: break-word; }
.oc-body .eyebrow { display: block; margin-bottom: 4px; }
.oc-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 600px) { .oc-body { grid-template-columns: 1fr; } .oc-head .oc-sum { margin-left: 0; } }

/* ---- Mój magazyn ---- */
.mag-pts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.mag-pts .chip { border: 1px solid var(--sage); background: #fff; color: var(--sage-dark); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.mag-pts .chip.on { background: var(--sage); color: #fff; }
.mag-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.mag-stats div { background: var(--beige, #f4efe8); border-radius: var(--radius); padding: 14px; text-align: center; }
.mag-stats b { display: block; font-size: 26px; color: var(--sage-deep); }
.mag-stats span { font-size: 12px; color: #666; }
.mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mag-card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; border: 1px solid #e6e1d8; border-radius: var(--radius); padding: 10px; background: #fff; }
.mag-card img { width: 64px; height: 80px; object-fit: contain; background: #f4f1ec; border-radius: 6px; }
.mag-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mag-qty { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.mag-qty > span { font-weight: 700; font-size: 16px; color: var(--sage-deep); }
@media (max-width: 600px) { .mag-stats b { font-size: 20px; } }
.mag-sold { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eee; }
.mag-sold img { width: 48px; height: 60px; object-fit: contain; background: #f4f1ec; border-radius: 6px; }
.mag-sold .btn { margin-left: auto; }
.mag-sold .mag-act { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; flex-shrink: 0; }
.mag-sold .btn { margin-left: 0; }
.ok-txt { color: var(--sage-deep); font-weight: 700; white-space: nowrap; }
.avg-row { margin: 4px 0; font-size: 13px; }
.inv-preview { margin-top: 12px; padding: 12px 14px; background: var(--beige, #f4efe8); border-radius: var(--radius); }
.inv-preview .eyebrow { display: block; margin-bottom: 6px; }
.inv-det { margin-top: 6px; }
.inv-det summary { cursor: pointer; color: var(--sage-dark); }
.wz-qr { width: 72px; }
.wz-qr img, .wz-qr canvas { width: 64px !important; height: 64px !important; background: none !important; }
.wz-head { position: relative; }
.wz-order-qr { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: #666; text-align: center; line-height: 1.2; }
.wz-order-qr .wz-qr { width: 72px; }
.order-card.hl { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-light, #dfe7dc); }
.oc-items { margin-top: 10px; }
.oc-items summary { cursor: pointer; color: var(--sage-dark); }
.oc-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0ece5; color: inherit; text-decoration: none; }
.oc-item img { width: 40px; height: 50px; object-fit: contain; background: #f4f1ec; border-radius: 6px; }
.oc-item > b { margin-left: auto; white-space: nowrap; }
.no-handles { margin: 6px 0 18px; padding: 12px 14px; border: 1px solid var(--sage); border-radius: var(--radius); background: #fff; }

/* ---- Druk: kartka zamówienia i etykiety 105×74 mm (A4, 8 szt.) ---- */
.print-wrap { max-width: 1000px; padding: 28px 24px 80px; }
.adm-print { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.po-doc { background: #fff; border: 1px solid #e3ded5; border-radius: var(--radius); padding: 28px; }
.po-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 2px solid #2f3a2d; padding-bottom: 12px; margin-bottom: 16px; }
.po-head h1 { font-size: 26px; margin: 0 0 4px; }
.po-head p { margin: 0; }
.po-head img { height: 48px; }
.po-pt { font-size: 16px; margin: 22px 0 6px; padding: 6px 10px; background: #f1ede6; border-radius: 6px; }
.po-table td.chk { font-size: 22px; width: 30px; text-align: center; }
.po-table td img { width: 48px; height: 60px; }
.po-bu { color: #b03a2e; font-size: 12px; letter-spacing: .04em; }
.po-sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -2px; }

.lbl-sheet { width: 210mm; height: 296mm; display: grid; grid-template-columns: 105mm 105mm; grid-template-rows: repeat(4, 74mm); background: #fff; margin: 0 auto 18px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
/* etykieta: zielony pasek z logo, zdjęcie na jasnym tle marki, nazwa pismem z logo (Marcellus), próbki kolorów, QR w ramce */
.etk { position: relative; width: 105mm; height: 74mm; box-sizing: border-box; overflow: hidden; outline: 1px dashed #d9d4cb; outline-offset: -1px;
  display: grid; grid-template-columns: 37mm 1fr; grid-template-rows: 13mm 1fr; color: #2f3a2d; font-family: var(--body); background: #fff; }
.etk.empty { background: repeating-linear-gradient(45deg, #faf8f5, #faf8f5 6px, #f1ede6 6px, #f1ede6 12px); }
.lbl-band { grid-column: 1 / -1; background: #eef1ec; border-bottom: .4mm solid #879A83; display: flex; align-items: center; justify-content: space-between; padding: 0 4mm 0 5mm; }
.lbl-band span { color: #5d6f5a; font-size: 6.5pt; letter-spacing: .18em; text-transform: uppercase; }
.lbl-band img { height: 10.5mm; width: auto; margin: 0; } /* logo przycięte do znaku (bez pustych brzegów) */
.lbl-photo { position: relative; margin: 3mm 0 4mm 4mm; border-radius: 3mm; background: #f7f5f1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lbl-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lbl-capb { position: absolute; left: 50%; bottom: 1.5mm; transform: translateX(-50%); background: rgba(255,255,255,.85); border-radius: 2mm; padding: .3mm 2mm; font-size: 7pt; font-weight: 700; color: #4a5a48; white-space: nowrap; }
.lbl-info { padding: 3.5mm 4mm 3mm 4.5mm; display: flex; flex-direction: column; min-width: 0; }
.lbl-title { font-family: var(--head); font-size: 19pt; line-height: 1; color: #2f3a2d; letter-spacing: .02em; }
.lbl-motif { font-family: var(--head); font-style: italic; font-size: 9pt; color: #6b7a68; margin-top: .8mm; }
.lbl-rule { width: 14mm; height: .7mm; border-radius: 1mm; margin: 2.2mm 0 2mm; }
.lbl-dl { display: grid; grid-template-columns: auto 1fr; gap: .8mm 2.5mm; margin: 0; align-items: center; padding-right: 22mm; }
.lbl-dl dt { font-size: 6.5pt; text-transform: uppercase; letter-spacing: .14em; color: #8a9787; }
.lbl-dl dd { margin: 0; font-size: 9.5pt; font-weight: 700; display: flex; align-items: center; gap: 1.5mm; white-space: nowrap; }
.lbl-dl dd.lbl-code { font-size: 12pt; letter-spacing: .06em; }
.lbl-sw { width: 3.6mm; height: 3.6mm; border-radius: 50%; border: .25mm solid rgba(0,0,0,.25); box-shadow: inset 0 0 0 .4mm rgba(255,255,255,.35); flex: 0 0 auto; }
.lbl-bu { margin-top: auto; align-self: flex-start; font-size: 6.8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #fff; background: #b03a2e; border-radius: 1.2mm; padding: .5mm 1.8mm; }
.lbl-qrbox { position: absolute; right: 4mm; bottom: 3.5mm; display: flex; flex-direction: column; align-items: center; gap: .6mm; padding: 1.4mm 1.4mm .8mm; background: #fff; border: .3mm solid #d9e0d6; border-radius: 2mm; }
.lbl-qrbox span { font-size: 5.5pt; letter-spacing: .16em; text-transform: uppercase; color: #6b7a68; }
.lbl-qr { width: 17mm; height: 17mm; }
.lbl-qr img, .lbl-qr canvas { width: 17mm !important; height: 17mm !important; }
@media print { .lbl-band, .lbl-photo, .lbl-bu, .lbl-sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }@page lbl { size: A4; margin: 0; }
@media print {
  body[data-print] #pre-header, body[data-print] #site-header, body[data-print] #site-footer, body[data-print] #proto { display: none !important; }
  .print-wrap { padding: 0; max-width: none; }
  .po-doc { border: 0; padding: 0; }
  .lbl-sheet { page: lbl; margin: 0; box-shadow: none; break-after: page; }
  .etk { outline: none; }
  .etk.empty { background: none; }
}
.lbl-title.long { font-size: 14pt; line-height: 1.1; }
/* etykieta dla hurtowni: tylko zdjęcie urny i kod (klienta lub nasz) */
.etk.lbl-h { grid-template-columns: 42mm 1fr; grid-template-rows: 1fr; align-items: center; }
.lbl-h-photo { margin: 5mm 0 5mm 5mm; height: calc(74mm - 10mm); border-radius: 3mm; background: #f7f5f1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lbl-h-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lbl-h-code { padding: 0 4mm; font-size: 26pt; font-weight: 700; letter-spacing: .02em; line-height: 1.15; text-align: center; white-space: nowrap; color: #1f2a1e; }
.lbl-h-code.long { font-size: 17pt; }
.lbl-h-code.xlong { font-size: 12pt; white-space: normal; overflow-wrap: anywhere; }
/* z marką hurtownika: kod u góry, na dole firma / telefon · e-mail / www + QR do jego strony */
.etk.lbl-h.brand { grid-template-rows: 1fr auto; }
.etk.lbl-h.brand .lbl-h-photo { grid-row: 1 / 3; }
.lbl-h-foot { align-self: end; margin: 0 4mm 4.5mm; padding: 2mm 19mm 0 0; min-height: 15mm; border-top: .3mm solid #d9e0d6; font-size: 7pt; line-height: 1.35; color: #3c463a; display: flex; flex-direction: column; justify-content: center; overflow-wrap: anywhere; }
.lbl-h-foot b { font-size: 8.5pt; color: #1f2a1e; }
.lbl-h-qr { position: absolute; right: 4mm; bottom: 4mm; width: 15mm; height: 15mm; }
.lbl-h-qr img, .lbl-h-qr canvas { width: 15mm !important; height: 15mm !important; }
/* generator etykiet w panelu hurtowni */
.lblgen-grid { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 24px; align-items: start; }
.lblgen-prev .etk { outline: 1px solid #d9d4cb; background: #fff; }
.lblgen-grid > * { min-width: 0; } .lblgen-prev { overflow-x: auto; }
@media (max-width: 1200px) { .lblgen-grid { grid-template-columns: 1fr; } }
/* moje kody (panel hurtowni) */
.codes-tools { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .codes-tools input { flex: 1; min-width: 200px; }
.codes-list { max-height: 520px; overflow: auto; border: 1px solid #eee; border-radius: var(--radius); }
.code-row { display: grid; grid-template-columns: 44px 1fr 170px; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #f0ece5; font-size: 13px; }
.code-row img { width: 40px; height: 50px; object-fit: contain; background: #f4f1ec; border-radius: 4px; }
.code-row input { padding: 6px 8px; font-weight: 700; }
@media (max-width: 600px) { .code-row { grid-template-columns: 40px 1fr; } .code-row input { grid-column: 1 / -1; } }

/* ---------- panel admina: zakładki + Statystyki ---------- */
.adm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }
.adm-tabs a { padding: 10px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--muted); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: -1px; }
.adm-tabs a.on { background: #fff; border-color: var(--line); color: var(--ink, #2f3a2d); font-weight: 700; }
.st-wrap { max-width: 1180px; padding: 40px 24px 90px; }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.st-head h1 { margin: 4px 0 6px; }
.st-filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 20px; }
.st-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.st-filters label.check { flex-direction: row; align-items: center; text-transform: none; font-size: 14px; color: inherit; letter-spacing: 0; padding-bottom: 8px; }
.st-filters select, .st-filters input[type=month], .st-box-h select, .st-rk-tools select, .st-rk-tools input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; text-transform: none; letter-spacing: 0; color: inherit; }
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.st-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.st-card .st-l { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.st-card b { font-size: 26px; font-weight: 700; color: #2f3a2d; }
.st-card .st-c, .st-card .st-n { font-size: 12.5px; }
.st-card .st-n input { width: 52px; padding: 2px 4px; margin: 0 2px; border: 1px solid var(--line); border-radius: 5px; font: inherit; }
.st-d { font-weight: 700; } .st-d.up { color: #3f7a3a; } .st-d.down { color: #b0473c; }
.st-box-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.st-box-h h3 { margin: 0; }
.st-chart { width: 100%; height: auto; display: block; }
.st-chart .st-bar { fill: #9fb39a; } .st-chart .st-bar:hover { fill: #5d6f58; }
.st-chart .st-line { fill: none; stroke: #c49a5a; stroke-width: 2.5; stroke-dasharray: 5 4; }
.st-chart .st-grid { stroke: #ece7de; } .st-chart .st-ax { font-size: 11px; fill: #8a8a8a; font-family: Lato, sans-serif; }
.st-legend { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.st-k { display: inline-block; width: 14px; height: 10px; margin-left: 10px; } .st-k.bar { background: #9fb39a; } .st-k.line { border-top: 3px dashed #c49a5a; height: 0; }
.st-scroll { overflow-x: auto; }
.st-table { width: 100%; font-size: 14px; border-collapse: collapse; } .st-table th, .st-table td { white-space: nowrap; padding: 9px 12px 9px 0; text-align: left; vertical-align: middle; }
.st-table.st-wrap-t th { white-space: normal; } .st-2 > * { min-width: 0; }
.st-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.st-table td.num { text-align: right; }
.st-rank td:nth-child(2) { white-space: normal; min-width: 220px; }
.st-rank select { max-width: 150px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.st-rank tr.st-ended td { opacity: .55; }
.st-s { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; }
.st-s.ok { background: var(--sage-light); color: #3d4f3a; } .st-s.sleep { background: #f3ead8; color: #7a5a1e; } .st-s.lost, .st-s.ended { background: #f6e3e1; color: #8a3a32; }
.st-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.st-2 > .box + .box { margin-top: 0; }
.st-hb { display: grid; grid-template-columns: 150px 1fr 54px; gap: 10px; align-items: center; font-size: 13.5px; margin: 6px 0; }
.st-hb div { background: #f1ede6; border-radius: 99px; height: 10px; overflow: hidden; } .st-hb i { display: block; height: 100%; background: #7d9277; border-radius: 99px; }
.st-hb b { text-align: right; }
.st-rk-tools { display: flex; gap: 8px; flex-wrap: wrap; } .st-rk-tools input { min-width: 220px; }
@media (max-width: 900px) { .st-cards { grid-template-columns: repeat(2, 1fr); } .st-2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .st-cards { grid-template-columns: 1fr; } .st-hb { grid-template-columns: 110px 1fr 44px; } .st-rk-tools input { min-width: 0; width: 100%; } }

/* ---------- pakiet start: stand z kodem QR (stand 10 × 15 cm → wkładka 100 × 150 mm) ---------- */
.stand { width: 100mm; height: 150mm; box-sizing: border-box; outline: 1px dashed #d9d4cb; outline-offset: -1px; background: #fff; }
.stand-img { width: 100%; height: 100%; display: block; }
.stand-in { height: 100%; box-sizing: border-box; border-radius: 4mm; background: #f4f6f1; border: .4mm solid #c9d3c3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6mm 6mm 4mm; }
.stand-name { font-family: Marcellus, serif; font-size: 13pt; letter-spacing: .06em; text-transform: uppercase; color: #3d4f3a; line-height: 1.2; }
.stand h3 { font-family: Marcellus, serif; font-weight: 400; font-size: 17pt; line-height: 1.2; margin: 3.5mm 0 3.5mm; color: #2f3a2d; }
.stand-qr { background: #fff; padding: 3mm; border-radius: 3mm; box-shadow: 0 .4mm 1.5mm rgba(0,0,0,.08); }
.stand-qr img, .stand-qr canvas { width: 50mm !important; height: 50mm !important; display: block; }
.stand-cta { margin: 3.5mm 0 1mm; font-weight: 700; font-size: 11pt; color: #2f3a2d; }
.stand-sub { margin: 0; font-size: 9pt; color: #55604f; line-height: 1.35; }
.stand-foot { margin-top: auto; font-size: 9.5pt; color: #2f3a2d; display: flex; flex-direction: column; gap: .8mm; }
.stand-brand { margin-top: 3mm; display: flex; flex-direction: column; align-items: center; gap: 1.2mm; }
.stand-brand img { height: 10mm; width: auto; opacity: .9; }
.stand-foot em { font-style: normal; font-size: 6.5pt; letter-spacing: .14em; text-transform: uppercase; color: #55604f; }
.uv-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; background: #f4f6f1; } .uv-box p { margin: 4px 0 10px; }
.stand-sheet { width: 210mm; min-height: 150mm; display: grid; grid-template-columns: 100mm 100mm; grid-auto-rows: 150mm; justify-content: center; align-content: start; break-after: page; background: #fff; margin: 0 auto 18px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.stand-box { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.stand-prev { width: calc(100mm * .62); height: calc(150mm * .62); overflow: hidden; }
.stand-prev > .stand { transform: scale(.62); transform-origin: top left; }
.stand-prev .stand { outline: 1px solid #e6e1d8; }
.stand-line { color: #3d4f3a; font-weight: 700; }
.po-stands { margin: 14px 0; padding: 10px 14px; border: 1px dashed #9fb39a; border-radius: 8px; background: #f4f6f1; }
.wz-stand td { background: #f4f6f1; }
@media (max-width: 760px) { .stand-box { grid-template-columns: 1fr; } }
@media print {
  .stand-sheet { page: lbl; margin: 0; box-shadow: none; break-after: page; }
  .stand { outline: .2mm dashed #cfcac0; }
  .stand-in, .stand-qr { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.adm-stand { margin: 10px 0 4px; padding: 10px 14px; border-radius: 8px; background: #fbf3e2; border: 1px solid #e3c98f; color: #6b4e14; }
.adm-stand b { color: #5a4110; }

/* ---------- program partnerski: wskaźnik ---------- */
.pt-card { display: grid; grid-template-columns: 130px 1fr; gap: 26px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px 18px; margin-bottom: 20px; background: linear-gradient(135deg, #fbfaf6 0%, #f3f5ef 100%); }
.pt-medal { position: relative; width: 130px; height: 130px; }
.pt-medal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-ring-bg { fill: none; stroke: #e7e2d8; stroke-width: 9; }
.pt-ring { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.pt-medal-in { position: absolute; inset: 17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, color-mix(in srgb, var(--c) 18%, #fff) 70%); border: 2px solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.pt-medal-in b { font-size: 26px; color: var(--c); line-height: 1; }
.pt-medal-in span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; margin-top: 4px; }
.pt-body h3 { margin: 0 0 4px; font-size: 22px; }
.pt-body > p { margin: 0 0 6px; }
.pt-track { position: relative; height: 10px; border-radius: 99px; background: #e7e2d8; margin: 18px 0 44px; }
.pt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .8s ease; }
.pt-step { position: absolute; top: -5px; transform: translateX(-50%); text-align: center; }
.pt-step i { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #d6cfc2; margin: 0 auto; }
.pt-step.on i { border-color: var(--c); background: var(--c); box-shadow: 0 0 0 3px #fff inset; }
.pt-step span { display: block; font-size: 11.5px; line-height: 1.25; color: #6b6b6b; margin-top: 4px; white-space: nowrap; }
.pt-step span b { color: var(--c); font-size: 12.5px; }
.pt-you { position: absolute; top: -30px; transform: translateX(-50%); }
.pt-you span { display: block; font-size: 11px; font-weight: 700; background: #2f3a2d; color: #fff; padding: 2px 8px; border-radius: 99px; white-space: nowrap; position: relative; }
.pt-you span::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: #2f3a2d; }
.pt-next { margin: 0 0 12px; font-size: 15px; }
.pt-keep { border-top: 1px dashed #d6cfc2; padding-top: 10px; font-size: 14px; }
.pt-keep.off { color: #8a3a32; }
.pt-kbar { height: 7px; border-radius: 99px; background: #e7e2d8; overflow: hidden; margin: 7px 0 6px; }
.pt-kbar i { display: block; height: 100%; border-radius: 99px; background: var(--sage); }
.pt-keep.off .pt-kbar i { background: #c9786d; }
.pt-cart { border: 1px solid #e3d6b4; background: #fdf8ec; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-size: 15px; }
.pt-cart-on { font-size: 13.5px; color: #3d4f3a; margin-bottom: 6px; }
.pt-disc span:last-child { color: #3f7a3a; font-weight: 700; }
.pt-rules td, .pt-rules th { padding: 8px 10px 8px 0; }
.ref-reward { border: 1px solid #e3c98f; background: #fbf3e2; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; color: #5a4110; }
.ref-box .btn { margin: 4px 0 14px; }
.ref-list { width: 100%; } .ref-list td, .ref-list th { padding: 8px 10px 8px 0; vertical-align: middle; }
.ref-code { font-family: monospace; font-size: 15px; letter-spacing: .06em; }
.ref-st { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; background: var(--sage-light); color: #3d4f3a; }
.ref-st.wait { background: #f3ead8; color: #7a5a1e; } .ref-st.done { background: #fbf3e2; color: #6b4e14; }
.ref-btn { background: #c39a3a; border-color: #c39a3a; }
.adm-hist { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .adm-hist input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; max-width: 150px; }
@media (max-width: 640px) { .pt-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px 16px; } .pt-body { width: 100%; text-align: left; } .pt-step span { font-size: 10.5px; } }

.pt-mystery i { display: grid !important; place-items: center; width: 26px !important; height: 26px !important; margin-top: -3px !important; border: 2px dashed #b9b1a3 !important; background: #fff !important; color: #8a8273; font-style: normal; font-weight: 700; font-size: 14px; }
.pt-mystery span { color: #a29a8c !important; } .pt-mystery span b { color: #a29a8c !important; }
.pt-hint { margin: -26px 0 10px; color: #7a7366; }
.pt-lock td { color: #a29a8c; }

/* ---------- oszczędności klienta: tabelka na szerokość ---------- */
.sv-bar { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--c); border-radius: var(--radius); background: color-mix(in srgb, var(--c) 9%, #fff); margin: 0 0 18px; overflow: hidden; }
.sv-bar > div { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; flex-wrap: wrap; }
.sv-bar > div + div { border-left: 1.5px solid var(--c); justify-content: flex-end; }
.sv-bar span { font-size: 14px; color: color-mix(in srgb, var(--c) 70%, #333); }
.sv-bar b { font-size: 20px; color: color-mix(in srgb, var(--c) 75%, #1a1a1a); }
@media (max-width: 560px) { .sv-bar { grid-template-columns: 1fr; } .sv-bar > div + div { border-left: 0; border-top: 1.5px solid var(--c); justify-content: flex-start; } }
.pg-save { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; padding: 8px 12px; border-radius: 8px; background: #f2f8ec; color: #3d5a2c; font-size: 14px; }
.pg-mini { font-size: 20px; }

/* koszyk: jeden komunikat (10 + 1, wysyłka, program partnerski) */
.cart-bar { border: 1px solid var(--line); background: #fbfaf6; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; font-size: 15px; }
.cart-bar-p { height: 7px; border-radius: 99px; background: #e7e2d8; overflow: hidden; margin: 10px 0 0; }
.cart-bar-p i { display: block; height: 100%; background: var(--sage); border-radius: 99px; }
.cart-bar-pt { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e0d9cc; font-size: 13.5px; color: #55604f; }

/* paczka bestsellerów */
.pack-box { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfaf6; padding: 16px 20px; }
.pack-imgs { display: grid; grid-template-columns: repeat(5, 62px); gap: 8px; align-items: center; } /* 10 urn = 2 rzędy po 5 */
.pack-imgs .pack-gala { grid-column: 1 / -1; padding: 6px 8px; }.pack-imgs span { position: relative; display: block; }
.pack-imgs img { width: 62px; height: 78px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid #ece7de; }
.pack-imgs b { position: absolute; right: -4px; bottom: -4px; background: var(--sage); color: #fff; font-size: 12px; border-radius: 99px; padding: 1px 7px; }
.pack-gala { font-size: 12px; line-height: 1.3; color: #6b4e14; background: #fbf3e2; border: 1px dashed #e3c98f; border-radius: 8px; padding: 10px 8px; text-align: center; }
.pack-txt { display: flex; flex-direction: column; gap: 6px; }
.pack-txt b { font-size: 18px; } .pack-txt span { font-size: 14px; color: #55604f; }
.pack-txt .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 760px) { .pack-box { grid-template-columns: 1fr; } .pack-imgs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pack-imgs img { width: 100%; } }

/* aktywacja przygotowanego konta (stali klienci z inFakt) */
.act-box h3 { margin: 0 0 6px; }
.act-row { display: flex; gap: 10px; flex-wrap: wrap; } .act-row input { flex: 1 1 180px; }
.act-ok { background: var(--sage-light); border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.proto-note { margin-top: 10px; font-size: 13px; }

/* panel admina: konta klientów */
.kl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 12px; }
.kl-tools input { flex: 1 1 240px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.kl-f { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.kl-f.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.kl-table td:first-child { white-space: normal; min-width: 220px; }
.kl-off td { opacity: .5; }
.kl-st { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; background: #f1ede6; color: #55604f; }
.kl-st.aktywne { background: var(--sage-light); color: #3d4f3a; } .kl-st.odrzucone { background: #f6e3e1; color: #8a3a32; }
.kl-rm { color: #8a3a32; }
.kl-table td.small { white-space: normal; max-width: 130px; }

.kl-st.spoza-branży { background: #eceaf3; color: #4f4a6b; }
.kl-st.Etsy { background: #f1ede6; color: #7a6a55; }

/* panel klienta: faktury */
.fv-table { width: 100%; font-size: 14px; } .fv-table th, .fv-table td { padding: 9px 10px 9px 0; vertical-align: middle; }
.fv-table td.num { text-align: right; }
.fv-st { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.fv-st.ok { background: var(--sage-light); color: #3d4f3a; } .fv-st.due { background: #f3ead8; color: #7a5a1e; } .fv-st.late { background: #f6e3e1; color: #8a3a32; }
.fv-table td.nowrap, .fv-table td.num { white-space: nowrap; }

/* panel admina: zamówienia */
.ord-card { border-left: 4px solid var(--line); }
.ord-card.st-nowe { border-left-color: #c9a640; } .ord-card.st-realizacja { border-left-color: var(--sage); } .ord-card.st-wyslane { border-left-color: #8d989f; } .ord-card.st-anulowane { opacity: .6; }
.ord-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.ord-client { font-size: 16px; font-weight: 700; }
.ord-head .ok, .ord-term .ok { color: #3f7a3a; }
.ord-st { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.ord-st select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: inherit; }
.ord-trk { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .ord-trk label { display: flex; flex-direction: column; gap: 3px; } .ord-trk input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 240px; }
.ord-term-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0ece5; font-size: 14px; }
.ord-term-row.late { color: #8a3a32; } .ord-term-row.late span:nth-child(3) { font-weight: 700; }
.ord-prep-t { width: 100%; font-size: 14px; } .ord-prep-t td, .ord-prep-t th { padding: 7px 10px 7px 0; }
@media (max-width: 700px) { .ord-term-row { grid-template-columns: 1fr; } }

/* personalizacja urn dla zwierząt (grawer) */
.pz-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; background: #fbfaf7; }
.pz-box h4 { margin: 0 0 10px; }
.pz-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; } .pz-opts label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.pz-box textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical; }
.pz-box p { margin: 6px 0 0; }
#pz-prev img { max-width: 160px; max-height: 160px; border-radius: 8px; margin-top: 8px; display: block; }
.pz-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; font-size: 13px; padding: 7px 9px; background: #f4f1ea; border-radius: 8px; max-width: 420px; }
.pz-line img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; flex: none; }
.pz-line.big img { width: 110px; height: 110px; }
.pz-text { white-space: pre-wrap; font-size: 14px; }
.pz-line.big .pz-text { font-size: 16px; font-weight: 600; }
.po-cod { display: inline-block; margin: 6px 0 0; padding: 6px 12px; border: 2px solid #8a3a32; color: #8a3a32; font-weight: 700; border-radius: 6px; }
.ord-pz { color: #6b4e1f; }

/* telefon: dokumenty i panel admina bez przewijania w poziomie (2026-10-10) */
@media (max-width: 600px) {
  .btn { max-width: 100%; white-space: normal; }
  .wz-head { flex-wrap: wrap; gap: 12px; }
  .wz-head > div { min-width: 0; flex: 1 1 180px; }
  .wz-head h1, .po-head h1 { font-size: 20px; overflow-wrap: anywhere; }
  .po-head { flex-wrap: wrap; } .po-head img { height: 36px; }
  .wz-table { font-size: 12px; } .wz-table td, .wz-table th { padding: 6px 3px; }
  .po-table td img { width: 36px; height: 46px; }
  .po-table td.chk { font-size: 18px; width: 22px; }
  .print-wrap { overflow-x: auto; }
}@media (max-width: 600px) {
  .wz-doc { padding: 12px; }
  .wz-table .wz-qr canvas, .wz-table .wz-qr img { width: 42px !important; height: 42px !important; }
  .wz-table td.wz-qr, .wz-table th:last-child { width: 46px; }
}
/* ---------- telefon: jak aplikacja (2026-10-10) ---------- */
#tabbar { display: none; }
@media (max-width: 700px) {
  .topbar { display: none; }                                   /* telefon/mail są w stopce i w menu */
  body.is-logged .notice { display: none; }                   /* informacja dla klientów prywatnych – zalogowanym niepotrzebna */
  .notice { font-size: 11px; letter-spacing: .08em; padding: 6px 12px; }
  #site-header { position: sticky; top: 0; z-index: 120; }
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0,0,0,.06); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  #tabbar:empty { display: none; }
  #tabbar a { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
    font-size: 11px; letter-spacing: .02em; color: #7a8077; text-decoration: none; border-radius: 10px; }
  #tabbar a .icon { width: 24px; height: 24px; }
  #tabbar a.on { color: var(--sage-deep); font-weight: 700; }
  #tabbar a.on .icon { stroke-width: 2.1; }
  #tabbar a:active { background: var(--sage-light); }
  #tabbar .tb-badge { position: absolute; top: 3px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brown, #8a5a3a); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-tabbar .proto { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-tabbar .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* panel klienta: zakładki jako przewijany pasek zamiast długiej listy */
  .account { grid-template-columns: 1fr; gap: 16px; padding-top: 12px; }
  .account nav { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 2px 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
    position: sticky; top: var(--hdr-h, 64px); z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
  .account nav::-webkit-scrollbar { display: none; }
  .account nav a { flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 20px; padding: 8px 14px; font-size: 13px; letter-spacing: .02em; }
  .account nav a.on { border-color: var(--sage); background: var(--sage-light); }
  /* przyciski wygodne dla palca */
  .btn { min-height: 46px; }
  .qty button { min-width: 40px; min-height: 40px; }
}
#buybar { display: none; }
@media (max-width: 700px) {
  #buybar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 139; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-top: 1px solid var(--line); padding: 8px 14px; box-shadow: 0 -4px 14px rgba(0,0,0,.05);
    transform: translateY(140%); transition: transform .2s; pointer-events: none; }
  #buybar.show { transform: none; pointer-events: auto; }
  #buybar .bb-price { font-family: var(--head, inherit); font-size: 20px; color: var(--sage-deep); white-space: nowrap; }
  #buybar .bb-price small { font-size: 12px; color: #888; margin-left: 4px; }
  #buybar .btn { flex: 0 0 auto; padding: 10px 18px; min-height: 44px; }
  #buybar .btn .icon { width: 18px; height: 18px; }
  body.has-tabbar #buybar.show ~ .proto { display: none; }
}@media (max-width: 700px) { body:has(#buybar.show) .proto { bottom: calc(136px + env(safe-area-inset-bottom)); } }@media (max-width: 700px) {
  .cart-item { row-gap: 10px; }
  .cart-item > .thumb { grid-row: 1; grid-column: 1; }
  .cart-item > div:not(.qty) { grid-row: 1; grid-column: 2; min-width: 0; }
  .cart-item > .qty { grid-row: 2; grid-column: 1 / 3; justify-self: start; width: auto; }
  .cart-item > b { grid-row: 2; grid-column: 2; justify-self: end; align-self: center; font-size: 17px; }
}@media (max-width: 700px) {
  /* telefon: konto i koszyk są na dolnym pasku – w nagłówku zostaje miejsce na logo w dobrych proporcjach */
  body.has-tabbar .header .actions a.act[href^="#/konto"], body.has-tabbar .header .actions a.act[href="#/logowanie"], body.has-tabbar .header .actions a.act[href="#/koszyk"] { display: none; }
  .header .logo { flex: none; }
  .header .logo img { height: auto; width: 108px; object-fit: contain; }
  body.has-tabbar .adm-tabs { display: none; }               /* panel admina: zakładki są na dolnym pasku */
}@media (max-width: 700px) { .header .logo img { width: 140px; } }
@media (max-width: 360px) { .header .logo img { width: 112px; } }
@media (max-width: 600px) {
  /* faktury na telefonie: każda faktura jako karta (numer + brutto, data + netto, status + PDF) */
  .fv-table thead { display: none; }
  .fv-table, .fv-table tbody { display: block; width: 100%; }
  .fv-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .fv-table td { padding: 0; border: 0; }
  .fv-table td:nth-child(1) { grid-row: 1; grid-column: 1; }
  .fv-table td:nth-child(4) { grid-row: 1; grid-column: 2; text-align: right; font-weight: 700; }
  .fv-table td:nth-child(2) { grid-row: 2; grid-column: 1; color: var(--muted); font-size: 13px; }
  .fv-table td:nth-child(3) { grid-row: 2; grid-column: 2; text-align: right; color: var(--muted); font-size: 13px; }
  .fv-table td:nth-child(3)::after { content: ' netto'; }
  .fv-table td:nth-child(5) { grid-row: 3; grid-column: 1; }
  .fv-table td:nth-child(6) { grid-row: 3; grid-column: 2; text-align: right; }
  .fv-table .fv-st { white-space: normal; }
  /* program partnerski: miejsce na dymek „Ty: … zł” nad paskiem */
  .pt-track { margin-top: 40px; }
}

/* ---------- telefon: dopracowanie układu (2026-10-10, przegląd ekran po ekranie) ---------- */
.act-row input { border: 1px solid #cfd3cc; border-radius: var(--radius); padding: 11px 13px; font: inherit; background: #fff; min-width: 0; }
@media (max-width: 700px) {
  /* odstępy sekcji i ramek – mniej pustego miejsca */
  .section { padding-block: 40px; }
  .section.tight { padding-block: 26px; }
  .box { padding: 16px; }
  .why { gap: 14px; }
  .why .it { padding: 18px; }
  .why .it .ic { width: 40px; height: 40px; margin-bottom: 8px; }
  /* przyciski: bez łamania liter, czytelne */
  .btn { letter-spacing: .07em; font-size: 13px; padding: 12px 16px; overflow-wrap: normal; word-break: normal; }
  .box .btn:not(.small):not(.ghost.small) { width: 100%; }
  /* nagłówki stron */
  .page-hero { min-height: 0; }
  .page-hero .wrap { padding-top: 26px; padding-bottom: 26px; }
  .page-hero p { font-size: 15px; }
  .page-hero.photo-hero { min-height: 300px; }
  .page-hero.photo-hero > img.ph { height: 46%; }
  .account h1 { font-size: 26px; line-height: 1.2; margin-bottom: 4px; }
  .account .eyebrow { display: none; }
  /* pasek promocji 10 + 1 */
  .promo-strip { font-size: 13px; }
  .promo-strip .wrap { padding-top: 8px; padding-bottom: 8px; gap: 10px; }
  /* karty produktów (2 w rzędzie) */
  .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .card h3 { font-size: 16px; line-height: 1.25; }
  .card .meta { font-size: 12px; gap: 6px; }
  .card .meta .sw { flex: none; }
  .card .more-colors { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .tags { align-items: flex-start; top: 8px; left: 8px; gap: 4px; }
  .tag { font-size: 10px; padding: 3px 7px; letter-spacing: .1em; }
  .card .foot .add-mini { width: 40px; height: 40px; flex: none; }
  .card .body { gap: 3px; padding-top: 10px; }
  /* strona produktu: ilość + DODAJ DO KOSZYKA + serduszko w jednym rzędzie */
  .buy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
  .buy .qty { height: 52px; }
  .buy .qty button { min-width: 34px; width: 34px; }
  .buy .qty input { width: 34px; }
  .buy #add-btn { white-space: nowrap; min-height: 52px; padding: 0 12px; letter-spacing: .05em; font-size: 12.5px; gap: 6px; }
  .buy #add-btn .icon { width: 18px; height: 18px; flex: none; }
  .buy .ref-btn { grid-column: 1 / -1; grid-row: 2; }
  .buy .fav-btn { width: 52px !important; height: 52px !important; }
  .perks { grid-template-columns: 1fr; gap: 6px; font-size: 13px; }
  .promo-box { font-size: 14px; padding: 12px 14px; gap: 10px; }
  /* koszyk i zamówienie */
  .cart-item > .thumb { align-self: start; }
  .summary { padding: 18px; position: static; }
  .summary .line { gap: 12px; align-items: baseline; }
  .summary .line > span:first-child { min-width: 0; }
  .summary .line > span:last-child { white-space: nowrap; text-align: right; flex: none; }
  .radio-cards label { padding: 12px; gap: 10px; }
  .radio-cards small { display: block; line-height: 1.45; margin-top: 2px; }
  .gift-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  /* skarbonka */
  .sv-bar > div { padding: 10px 14px; gap: 8px; }
  .sv-bar span { font-size: 12.5px; }
  .sv-bar b { font-size: 17px; }
  /* paczka bestsellerów */
  .pack-box { grid-template-columns: 1fr; padding: 14px; gap: 12px; }
  .pack-imgs { flex-wrap: wrap; }
  .pack-imgs img { width: 54px; height: 68px; }
  .pack-txt .btn { align-self: stretch; white-space: normal; }
  /* zestaw mini urn */
  .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mini-item .meta { font-size: 11.5px; }
  .mini-item .nm { font-size: 15px; }
  /* stopka – zwarta, bo nawigacja jest na dolnym pasku */
  .footer { padding-top: 32px; font-size: 14px; }
  .footer .cols { gap: 22px; }
  .footer .logo-f { width: 160px; }
  .footer ul { gap: 4px; }
  .footer h4 { font-size: 15px; margin-bottom: 8px; }
  .footer .bottom { margin-top: 24px; }
  /* przycisk prototypu – mały, żeby nie zasłaniał */
  .proto { font-size: 11px; padding: 5px 10px; opacity: .85; }
}
@media (max-width: 700px) {
  .product { gap: 18px; padding-bottom: 32px; }
  .gallery .main { aspect-ratio: 1 / 1; max-height: 58vh; margin: 0 auto; }
  .gallery .thumbs { margin-top: 8px; gap: 8px; }
  .gallery .thumbs button { width: 58px; height: 58px; }
  .pinfo h1 { font-size: 28px; margin-bottom: 10px; }
  .crumbs { font-size: 12.5px; padding-top: 10px; padding-bottom: 8px; }
}@media (max-width: 700px) {
  .page-hero.photo-hero { min-height: 250px; }
  .mini-item .meta { display: block; text-align: center; line-height: 1.4; }
  .mini-item .meta .sw { display: inline-block; vertical-align: -2px; margin-right: 4px; }
  .check > span { min-width: 0; }
  /* przycisk prototypu: u góry, pod nagłówkiem – nie zasłania przycisków na dole */
  body.has-tabbar .proto, body:has(#buybar.show) .proto { top: calc(var(--hdr-h, 120px) + 8px); bottom: auto; right: 8px; opacity: .75; }
}
@media (max-width: 600px) {
  /* panel admina → Do przygotowania: każda pozycja jako karta */
  .ord-prep-t thead { display: none; }
  .ord-prep-t, .ord-prep-t tbody { display: block; width: 100%; }
  .ord-prep-t tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ord-prep-t td { padding: 0 !important; border: 0; }
  .ord-prep-t td:nth-child(1) { grid-row: 1; grid-column: 1; font-size: 16px; }
  .ord-prep-t td:nth-child(4) { grid-row: 1; grid-column: 2; text-align: right; font-size: 18px; }
  .ord-prep-t td:nth-child(4)::after { content: ' szt.'; font-size: 13px; font-weight: 400; color: var(--muted); }
  .ord-prep-t td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .ord-prep-t td:nth-child(3) { grid-row: 3; grid-column: 1; }
  .ord-prep-t td:nth-child(5) { grid-row: 3; grid-column: 2; text-align: right; font-size: 12px; }
  .ord-prep-t .pz-line { max-width: none; }
  .ord-term-row { gap: 4px; }
  .ord-term-row .btn { margin-top: 6px; }
  .ord-head { gap: 8px; }
  .adm-print { display: flex; flex-wrap: wrap; gap: 8px; }
  .adm-print .btn { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .st-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-filters label { min-width: 0; }
  .st-filters select, .st-filters input[type=month] { width: 100%; min-width: 0; }
  .st-filters label.check { grid-column: 1 / -1; }
  .st-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-card { padding: 12px; }
  .st-card b { font-size: 20px; }
  .kl-table td:first-child { min-width: 170px; }
  .st-scroll { -webkit-overflow-scrolling: touch; }
}@media (max-width: 700px) {
  /* przycisk prototypu na telefonie: na samym dole strony, niczego nie zasłania */
  body.has-tabbar .proto, body:has(#buybar.show) .proto { position: static; display: block; margin: 12px auto 16px; opacity: .8; }
  .radio-cards label, .radio-cards label * { letter-spacing: normal; }
}@media (max-width: 700px) { .card .more-colors { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; } }
/* ---------- strona „Produkty” (wszystkie kategorie w kółkach) i menu na telefonie ---------- */
.nav-top, .nav-extra { display: none; }
.pk-wrap { padding-top: 20px; padding-bottom: 40px; }
.pk-title { font-size: 30px; margin: 0 0 14px; }
.pk-all, .pk-promo { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; font-size: 15px; color: var(--sage-deep); background: #fff; }
.pk-promo { background: var(--sage-light); justify-content: flex-start; }
.pk-promo span:last-child { margin-left: auto; }
.pk-all span, .pk-promo span:last-child { font-size: 18px; }
.pk-sec { margin-top: 26px; }
.pk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.pk-h h2 { font-size: 20px; margin: 0; }
.pk-h .link { font-size: 13px; white-space: nowrap; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 10px; }
.pk-grid .circle { text-align: center; }
@media (max-width: 700px) {
  .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
  .pk-grid .circle .ring { width: 92px; height: 92px; margin: 0 auto; }
  .pk-grid .circle span { font-size: 11.5px; letter-spacing: .04em; line-height: 1.3; display: block; margin-top: 6px; }
  /* menu (hamburger): na wierzchu, z nagłówkiem i przyciskiem zamknięcia */
  .nav.open { z-index: 170; inset: 0 14% 0 0; display: flex; flex-direction: column; box-shadow: 8px 0 30px rgba(0,0,0,.15); }
  .drawer-bg.on { z-index: 165; }
  .nav.open .nav-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--sage); color: #fff; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .nav.open .nav-top b { font-family: var(--head); font-size: 20px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
  .nav-x { background: none; border: 0; color: #fff; font-size: 22px; width: 40px; height: 40px; cursor: pointer; }
  .nav.open .mega { display: none !important; }        /* „Produkty” otwiera stronę z kółkami */
  .nav.open > .wrap > ul > li > a, .nav.open > .wrap > ul > li > button { font-size: 15px; letter-spacing: .08em; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
  .nav.open > .wrap > ul > li > a::after, .nav.open > .wrap > ul > li > button::after { content: '›'; font-size: 22px; line-height: 1; color: var(--sage); }
  .nav.open .nav-extra { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)); margin-top: 8px; }
  .nav-extra a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; font-size: 14px; color: var(--sage-deep); }
  .nav-extra a .icon { width: 18px; height: 18px; flex: none; }
}
@media (max-width: 700px) { body:has(#nav.open) #site-header { z-index: 200; } }.pk-more { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.pk-more a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 15px; color: var(--sage-deep); }
.pk-more a + a { border-top: 1px solid var(--line); }
.pk-more a span { font-size: 22px; line-height: 1; color: var(--sage); }
@media (max-width: 700px) {
  /* telefon: menu jest na dolnym pasku – bez ☰ przy logo */
  body.has-tabbar #burger { display: none; }
}
/* ---------- ZASADA: zdjęcia urn NIGDY nie są przycinane (2026-10-10) – zawsze cały produkt, tło dopełnia rozmyta kopia lub jasny kolor ---------- */
.slide.photo.wide > img.ph, .photo-hero.wide > img.ph { object-fit: contain; object-position: right center; }
.slide.scene figure img, .page-hero .pic img, .bs-hero .pics img, .split .pic img { object-fit: contain; background: #f4f1ec; }
.card .media > img, .cart-item .thumb > img, .mini-item .pic img, .pz-line img { object-fit: contain; background: #f4f1ec; }
@media (max-width: 900px) {
  /* nagłówek kategorii: tekst na górze, pod nim zdjęcie w całości (bez maski i przycięcia) */
  .page-hero.photo-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .photo-hero .wrap { order: 1; position: relative; z-index: 3; }
  .photo-hero > img.ph, .photo-hero.wide > img.ph { order: 2; position: relative; inset: auto; width: 100%; max-width: none; height: 240px; object-fit: contain; object-position: center bottom;
    -webkit-mask-image: none; mask-image: none; z-index: 2; }
  .photo-hero::after { background: linear-gradient(180deg, rgba(110,128,101,.92) 0%, rgba(128,147,118,.7) 45%, rgba(128,147,118,.15) 75%, rgba(128,147,118,0) 100%); }
  /* baner na stronie głównej: urna w całości */
  .slide.photo > img.ph, .slide.photo.wide > img.ph { object-fit: contain; object-position: center bottom; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 700px) {
  .page-hero.photo-hero { min-height: 0; }
}
@media (max-width: 900px) { .page-hero.photo-hero > img.ph, .page-hero.photo-hero.wide > img.ph { height: 250px; } }@media (max-width: 900px) {
  /* filtry na telefonie: panel NAD przyciemnieniem, przycisk „Pokaż produkty” zawsze widoczny na dole panelu */
  .filters { z-index: 180; padding-bottom: 0; }
  .filters #filters-close { position: sticky; bottom: 0; margin-top: 16px; margin-bottom: 0; z-index: 2; box-shadow: 0 -10px 16px #fff; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}@media (max-width: 900px) { .filters { align-self: auto; height: auto; overflow-y: auto; } }
/* ---------- telefon: banery jak na komputerze – tekst po lewej, zdjęcie w całości po prawej, niski pasek (2026-10-10) ---------- */
@media (max-width: 900px) {
  .page-hero.photo-hero { display: flex; flex-direction: row; align-items: center; min-height: 230px; }
  .page-hero.photo-hero .wrap { order: 0; position: relative; z-index: 3; padding-top: 22px; padding-bottom: 22px; }
  .page-hero.photo-hero .wrap > div:first-child { max-width: 60%; }
  .page-hero.photo-hero > img.ph, .page-hero.photo-hero.wide > img.ph { order: 0; position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 46%; height: 100%; max-width: none;
    object-fit: contain; object-position: right bottom; z-index: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .page-hero.photo-hero::after { background: linear-gradient(90deg, rgba(110,128,101,.92) 0%, rgba(128,147,118,.8) 50%, rgba(128,147,118,.2) 75%, rgba(128,147,118,0) 100%); }
  .page-hero.photo-hero h1 { font-size: 26px; margin-bottom: 6px; }
  .page-hero.photo-hero p { font-size: 13.5px; line-height: 1.45; margin-bottom: 0; }
  .page-hero.photo-hero p + p { display: none; }            /* drugi akapit tylko na komputerze */
  .page-hero.photo-hero .crumbs { font-size: 12px; padding-bottom: 6px; }
  /* baner na stronie głównej: tekst po lewej, urna w całości po prawej */
  .hero:has(.photo) { height: 380px; }
  .slide.photo > img.ph, .slide.photo.wide > img.ph { inset: 0 0 0 auto; width: 52%; height: 100%; max-width: none; object-fit: contain; object-position: right bottom;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); }
  .slide.photo::after { background: linear-gradient(90deg, rgba(110,128,101,.92) 0%, rgba(128,147,118,.78) 48%, rgba(128,147,118,.2) 72%, rgba(128,147,118,0) 100%); }
  .slide.photo > .wrap { padding: 26px 18px; align-items: center; }
  .slide.photo .txt { max-width: 60%; align-self: center; }
  .slide.photo h1, .slide.photo h2 { font-size: 24px; margin-bottom: 8px; }
  .slide.photo .kicker { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 8px; gap: 8px; }
  .slide.photo .kicker::before { width: 24px; }
  .slide.photo p { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
  .slide.photo .btn { font-size: 11.5px; padding: 10px 12px; letter-spacing: .06em; }
}

@media (max-width: 900px) {
  /* bez jasnej rozmytej kopii zdjęcia (robiła białe pasy) – nad zdjęciem zielone tło banera, krawędzie zdjęcia wtopione */
  .slide.photo > img.bg, .page-hero.photo-hero > img.bg { display: none; }
  .hero:has(.photo), .slide.photo, .page-hero.photo-hero { background: #7f9479; }
  .slide.photo > img.ph, .slide.photo.wide > img.ph, .page-hero.photo-hero > img.ph, .page-hero.photo-hero.wide > img.ph {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 22%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 22%); mask-composite: intersect; }
}
.slide.photo > img.ph, .page-hero.photo-hero > img.ph { background: transparent; display: block; }@media (max-width: 900px) { .hero:has(.photo) { height: 330px; } }@media (max-width: 900px) {
  /* miękkie krawędzie zdjęcia w banerach: zdjęcie płynnie przechodzi w zielone tło (bez ostrych linii u góry i z lewej) */
  .slide.photo > img.ph, .slide.photo.wide > img.ph, .page-hero.photo-hero > img.ph, .page-hero.photo-hero.wide > img.ph {
    -webkit-mask-image: radial-gradient(ellipse 120% 105% at 100% 100%, #000 58%, rgba(0,0,0,.6) 74%, transparent 96%);
    mask-image: radial-gradient(ellipse 120% 105% at 100% 100%, #000 58%, rgba(0,0,0,.6) 74%, transparent 96%);
    -webkit-mask-composite: source-over; mask-composite: add; }
}@media (max-width: 900px) {
  /* ramka = dokładnie zdjęcie (bez pustego pola), dzięki temu wygładzenie działa na prawdziwych krawędziach zdjęcia */
  .slide.photo > img.ph, .slide.photo.wide > img.ph, .page-hero.photo-hero > img.ph, .page-hero.photo-hero.wide > img.ph {
    inset: auto 0 0 auto; top: auto; left: auto; right: 0; bottom: 0; width: auto; height: auto; max-width: 58%; max-height: 100%; object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 30%);
    mask-composite: intersect; }
}
/* telefon w trybie ciemnym: pola, liczba sztuk i pola do zaznaczenia zawsze jasne (sklep ma jeden, jasny wygląd) */
:root, html, body { color-scheme: light only; }
input, select, textarea, button { color-scheme: light; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { background-color: #fff; color: var(--ink, #2f3a2d); }
.qty, .qty input, .qty button { background: #fff; color: var(--ink, #2f3a2d); }
input[type=checkbox], input[type=radio] { accent-color: var(--sage); background-color: #fff; }@media (max-width: 700px) {
  /* dymek „i” (np. Emblemat) na telefonie: zawsze w całości – jako chmurka nad dolnym paskiem, na całą szerokość */
  .tip-box, .fgroup .tip-box { position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; transform: none; z-index: 190; font-size: 14px; padding: 12px 14px; }
  .tip-box::after { display: none; }
}
/* baner „Wszystko”: 6 wizualizacji płynnie przechodzących jedna w drugą (pokaz 30 s, każde zdjęcie ok. 5 s, w całości) */
.photo-hero:has(.fade) { background: #7f9479; }
.photo-hero > img.ph.fade { opacity: 0; animation: heroFade 30s infinite; background: transparent; }
@keyframes heroFade { 0% { opacity: 0; } 4% { opacity: 1; } 17% { opacity: 1; } 21% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-hero > img.ph.fade { animation: none; } .photo-hero > img.ph.fade:first-of-type { opacity: 1; } }
/* bez dzielenia wyrazów myślnikiem (np. „zgo-dzie”) – wygląda nieprofesjonalnie */
body, h1, h2, h3, h4, p, .slide .txt, .page-hero { hyphens: manual; -webkit-hyphens: manual; }
/* komunikat (toast): mały, z krzyżykiem, znika sam (2026-10-10) */
.toast { padding: 10px 12px 10px 16px; gap: 6px; font-size: 14px; line-height: 1.4; width: max-content; }
.toast .t-row { display: flex; align-items: flex-start; gap: 10px; }
.toast .t-msg { flex: 1; min-width: 0; }
.toast .t-msg a { white-space: nowrap; font-weight: 700; }
.toast .t-x { flex: none; background: none; border: 0; color: #fff; opacity: .75; font-size: 20px; line-height: 1; width: 28px; height: 28px; margin: -4px -4px 0 0; cursor: pointer; border-radius: 50%; }
.toast .t-x:hover { opacity: 1; background: rgba(255,255,255,.12); }
.toast .t-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.toast .t-sub span { background: rgba(255,255,255,.12); border-radius: 99px; padding: 2px 10px; font-size: 12.5px; }
.toast .t-sub span:first-child { background: var(--sage); }
@media (max-width: 700px) { .toast { width: calc(100vw - 32px); font-size: 13.5px; } }

/* telefon: zakładki panelu klienta – wyraźne, aktywna wypełniona kolorem, strzałka „przewiń” z prawej (2026-10-10) */
@media (max-width: 700px) {
  .account nav { background: var(--sage-light); border-bottom: 1px solid #d5ddd2; padding-top: 10px; padding-bottom: 10px; gap: 8px; scroll-padding-left: 16px; }
  .account nav a { background: #fff; border: 1.5px solid #b9c6b5; color: var(--sage-deep); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .account nav a.on { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
  .account { position: relative; }
  .account nav::after { content: ''; flex: none; width: 1px; }
  .acc-nav-wrap { position: relative; }
  .acc-more { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px;
    background: linear-gradient(90deg, rgba(238,241,236,0), var(--sage-light) 60%); color: var(--sage-deep); font-size: 22px; pointer-events: none; z-index: 21; }
}@media (max-width: 700px) {
  .account nav { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .account nav.at-end { -webkit-mask-image: none; mask-image: none; }
}
/* pasek „Zainstaluj aplikację” (telefon) */
#instbar { position: fixed; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 210; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 10px 10px 12px; box-shadow: 0 8px 28px rgba(30,40,30,.22); border: 1px solid var(--line); }
#instbar img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
#instbar span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--ink); }
#instbar span b { display: block; font-size: 14px; } #instbar small { color: var(--muted); }
#instbar .ib-ok { flex: none; background: var(--sage-deep); color: #fff; border: 0; border-radius: 9px; padding: 9px 12px; font: 700 12.5px var(--body, Lato, sans-serif); }
#instbar .ib-x { flex: none; background: none; border: 0; font-size: 22px; color: #888; width: 30px; height: 30px; }
/* =============== TRYB APLIKACJI (telefon / zainstalowana aplikacja) – według makiety =============== */
body.app #pre-header, body.app #site-footer { display: none; }
body.app #site-header { position: sticky; top: 0; z-index: 120; }
.ap-hd { background: var(--sage); display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; min-height: 60px; color: #fff; }
.ap-logo img { height: 40px; width: auto; display: block; }
.ap-hd.ap-sub b { flex: 1; min-width: 0; font-family: var(--head); font-weight: 400; font-size: 19px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-hd:not(.ap-sub) .ap-logo { flex: 1; }
.ap-back { background: none; border: 0; color: #fff; width: 36px; height: 36px; display: grid; place-items: center; margin-left: -6px; cursor: pointer; }
.ap-back svg, .ap-bell svg { width: 24px; height: 24px; }
.ap-bell { position: relative; color: #fff; width: 36px; height: 36px; display: grid; place-items: center; }
.ap-bell i { position: absolute; top: 2px; right: 0; background: var(--brown, #8a5a3a); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 1px 5px; min-width: 17px; text-align: center; }
.ap-sp { width: 36px; }
.ap-wrap { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; }
.ap-hi { margin: 0; font-size: 13.5px; color: var(--muted); }
.ap-hi b { font-family: var(--head); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.25; }
.ap-card { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #fff; color: inherit; text-decoration: none; }
.ap-card small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ap-card b { font-size: 16px; }
.ap-row { display: flex; align-items: center; gap: 10px; }
.ap-again { background: #f6f2ea; border-color: #ece5d6; }
.ap-thumbs { display: flex; gap: 8px; margin: 12px 0; }
.ap-thumbs img, .ap-thumbs span { width: 50px; height: 58px; object-fit: contain; background: #fff; border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.ap-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; border-radius: 12px; background: var(--sage-deep); color: #fff; font: 700 14px var(--body, Lato, sans-serif); letter-spacing: .05em; padding: 13px; text-decoration: none; cursor: pointer; margin-top: 10px; }
.ap-btn.ap-ghost { background: #fff; color: var(--sage-deep); border: 1.5px solid var(--sage); }
.ap-promo { background: var(--sage-light); border-color: #d5ddd2; }
.ap-b10 { background: var(--sage-deep); color: #fff; font-weight: 700; font-size: 12px; border-radius: 99px; padding: 3px 9px; flex: none; }
.ap-bar { height: 8px; border-radius: 9px; background: #fff; margin: 10px 0 6px; overflow: hidden; }
.ap-bar i { display: block; height: 100%; border-radius: 9px; background: var(--sage); }
.ap-lvl { display: flex; gap: 12px; align-items: center; background: linear-gradient(90deg, #f3f5f6, #fff); }
.ap-medal { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 20px; flex: none; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.ap-fam { display: flex; gap: 12px; align-items: center; background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.ap-fam svg { width: 30px; height: 30px; flex: none; } .ap-fam svg:last-child { width: 20px; height: 20px; opacity: .8; }
.ap-fam div { flex: 1; } .ap-fam small { color: #dfe7dc; }
.ap-h { margin: 6px 0 0; font-family: var(--head); font-weight: 400; font-size: 19px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ap-h small { font: 400 12.5px var(--body, Lato, sans-serif); color: var(--muted); }
.ap-h svg { width: 22px; height: 22px; color: var(--sage-deep); }
.ap-list { display: flex; flex-direction: column; }
.ap-mine { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0ece5; }
.ap-mine img { width: 52px; height: 60px; object-fit: contain; background: #f4f1ec; border-radius: 10px; flex: none; }
.ap-mine > div { flex: 1; min-width: 0; } .ap-mine b { font-size: 14.5px; } .ap-mine small { display: block; font-size: 12.5px; color: var(--muted); }
.ap-qty { flex: none !important; display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 11px; padding: 2px; background: #fff; }
.ap-qty button { width: 34px; height: 34px; border: 0; background: none; font-size: 20px; color: var(--sage-deep); cursor: pointer; border-radius: 9px; }
.ap-qty button:active { background: var(--sage-light); }
.ap-qty b { min-width: 18px; text-align: center; }
.ap-q { color: var(--sage-deep); flex: none; }
.ap-gocart { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.ap-nt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; color: inherit; text-decoration: none; }
.ap-nt.new { background: var(--sage-light); }
.ap-ne { font-size: 20px; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ap-nt div { flex: 1; min-width: 0; } .ap-nt b { font-size: 14px; display: block; } .ap-nt small { font-size: 12.5px; color: var(--muted); }
.ap-nw { flex: none; font-size: 11.5px !important; }
.ap-hint { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 0 0; }
.ap-alert { display: flex; gap: 12px; align-items: flex-start; background: #fbf3e3; border-left: 4px solid var(--gold, #b08a43); border-radius: 12px; padding: 12px; font-size: 18px; color: inherit; text-decoration: none; }
.ap-alert b { font-size: 14px; display: block; } .ap-alert small { font-size: 12.5px; color: #6b4e1f; }
.ap-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-tile { border-radius: 14px; background: var(--sage-light); padding: 12px 14px; color: inherit; text-decoration: none; }
.ap-tile b { font-size: 28px; color: var(--sage-deep); display: block; line-height: 1.1; } .ap-tile small { font-size: 12.5px; color: var(--muted); }
.ap-tile.red { background: #f8ecea; } .ap-tile.red b { color: #8a3a32; }
.ap-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; padding: 4px 12px; margin: 0 0 14px; background: #fff; }
.ap-search svg { width: 20px; height: 20px; color: var(--muted); flex: none; } .ap-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 15px; padding: 10px 0; background: transparent; }
/* Rozmowa z rodziną – pełny ekran, bez nagłówka i paska sklepu */
body.fam-on #site-header, body.fam-on #tabbar, body.fam-on .proto, body.fam-on #instbar { display: none !important; }
body.fam-on { padding-bottom: 0 !important; background: #fff; }
.fam { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #fff; }
.fam-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px; }
.fam-h b { font-family: var(--head); font-weight: 400; font-size: 18px; display: block; } .fam-h small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .fam-h small svg { width: 14px; height: 14px; }
.fam-x { width: 40px; height: 40px; border-radius: 50%; background: var(--sage-light); border: 0; color: var(--sage-deep); display: grid; place-items: center; flex: none; cursor: pointer; } .fam-x svg { width: 18px; height: 18px; }
.fam-cats { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; } .fam-cats::-webkit-scrollbar { display: none; }
.fam-cats button { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 14px; font: 600 13px var(--body, Lato, sans-serif); color: var(--sage-deep); cursor: pointer; }
.fam-cats button.on { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.fam-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fam-track::-webkit-scrollbar { display: none; }
.fam-s { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; }
.fam-img { height: 52vh; background: #f4f1ec; display: grid; place-items: center; }
.fam-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fam-b { padding: 16px 20px 8px; text-align: center; }
.fam-b h2 { font-family: var(--head); font-weight: 400; font-size: 26px; margin: 0; line-height: 1.15; } .fam-b h2 span { display: block; font-size: 17px; color: var(--muted); margin-top: 2px; }
.fam-pr { font-size: 26px; font-weight: 700; margin: 10px 0 2px; color: var(--ink); } .fam-pr small { font-size: 13px; font-weight: 400; color: var(--muted); }
.fam-col { font-size: 13.5px; color: var(--muted); margin: 4px 0 10px; }
.fam-sw { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fam-sw button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cfc8bb; cursor: pointer; padding: 0; }
.fam-sw button.on { outline: 2px solid var(--sage); outline-offset: 3px; }
.fam-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.fam-cnt { text-align: center; font-size: 12.5px; color: var(--muted); margin: 6px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
.fam-img { display: block; height: 46vh; overflow: hidden; }
.ap-logo img { height: 46px; }/* aplikacja: karta urny bliżej makiety */
body.app .product > .gallery, body.app .gallery .main { margin-left: -16px; margin-right: -16px; border-radius: 0; }
body.app .gallery .thumbs { padding: 0 16px; margin-left: -16px; }
body.app .crumbs { display: none; }
body.app .pinfo h1 { font-size: 26px; margin: 2px 0 8px; }
body.app .promo-box { padding: 10px 12px; font-size: 13px; border-radius: 12px; }
body.app .promo-box br, body.app .promo-box span:not(.badge10) { display: none; }
body.app .promo-box b::after { content: ' – Gala za 1 zł przy 10 urnach'; font-weight: 400; }
/* aplikacja: śledzenie zamówienia, zdjęcie paczki, podpowiedź w magazynie */
.ap-trk { font-size: 30px; flex: none; }
.ap-tl { display: flex; flex-direction: column; padding: 4px 2px; }
.ap-tl div { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 16px; }
.ap-tl div:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #d7dcd4; }
.ap-tl div.done:not(:last-child)::before { background: var(--sage); }
.ap-tl i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #cfd6cc; background: #fff; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; font-size: 14px; }
.ap-tl .done i { background: var(--sage); border-color: var(--sage); }
.ap-tl .next i { border-color: var(--sage-deep); box-shadow: 0 0 0 4px var(--sage-light); }
.ap-tl b { font-size: 15px; display: block; } .ap-tl small { font-size: 12.5px; color: var(--muted); }
.ap-tl div:not(.done) b { color: var(--muted); font-weight: 600; }
.ap-photos { display: flex; gap: 8px; overflow-x: auto; } .ap-photos img { height: 150px; border-radius: 12px; flex: none; }
.ap-btn.ap-ghost + .ap-btn.ap-ghost { margin-top: 8px; }
.ord-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ord-ph { position: relative; } .ord-ph img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; display: block; }
.ord-ph button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #8a3a32; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.ord-ph-add { cursor: pointer; }
.mag-low { background: #fbf3e3; border-color: #efdcb3; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mag-low b { font-size: 16px; } .mag-low .btn { margin-top: 8px; }
.ap-track { margin-right: 8px; }
/* aplikacja: koszyk, magazyn, ekran powitalny, panel klienta (makieta) */
body.app .account > div > h1, body.app .account > div > .eyebrow { display: none; }
body.app .account { padding-top: 0; gap: 12px; }
.ap-qty.sm { display: inline-flex; margin-top: 6px; padding: 1px; } .ap-qty.sm button { width: 30px; height: 30px; font-size: 18px; }
.ap-gift { background: #faf6ec; border-radius: 12px; padding-left: 6px; padding-right: 6px; }
.ap-pz { color: #6b4e1f !important; }
.ap-link { background: none; border: 0; color: var(--sage-deep); text-decoration: underline; font: 600 12.5px var(--body, Lato, sans-serif); padding: 4px 0; cursor: pointer; }
.ap-galas b { display: block; margin-bottom: 8px; }
.ap-gala-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .ap-gala-row::-webkit-scrollbar { display: none; }
.ap-gala-row button { flex: none; width: 76px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; font-size: 11px; display: flex; flex-direction: column; gap: 4px; align-items: center; cursor: pointer; }
.ap-gala-row img { width: 60px; height: 70px; object-fit: contain; }
.ap-sum { background: #f6f2ea; border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; }
.ap-sum div { display: flex; justify-content: space-between; gap: 10px; } .ap-sum .gr { color: #3f7a3a; font-weight: 700; }
.ap-sum .tot { border-top: 1px solid #e3dccd; padding-top: 8px; margin-top: 3px; font-weight: 700; font-size: 16px; }
.ap-seg { display: flex; background: var(--sage-light); border-radius: 12px; padding: 3px; margin-bottom: 4px; }
.ap-seg button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 10px; font: 600 13px var(--body, Lato, sans-serif); color: var(--muted); cursor: pointer; }
.ap-seg button.on { background: #fff; color: var(--sage-deep); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ap-warn { background: #fbf3e3; border-color: #efdcb3; margin-bottom: 4px; } .ap-btn.sm { width: auto; display: inline-flex; padding: 9px 14px; font-size: 13px; }
.ap-stk { text-align: center; flex: none; width: 58px; } .ap-stk b { font-size: 20px; color: var(--sage-deep); display: block; } .ap-stk small { font-size: 10.5px !important; white-space: nowrap; }
.ap-sold { flex: none; border: 1.5px solid var(--sage); background: #fff; color: var(--sage-deep); border-radius: 10px; font: 700 12px var(--body, Lato, sans-serif); padding: 8px 9px; cursor: pointer; }
.ap-sold:active { background: var(--sage-light); }
.ap-ok { color: #3f7a3a; font-weight: 700; flex: none; }
.ap-auto { display: flex; gap: 12px; align-items: center; margin-top: 8px; cursor: pointer; } .ap-auto input { width: 22px; height: 22px; accent-color: var(--sage-deep); flex: none; }
#ap-splash { position: fixed; inset: 0; z-index: 999; background: var(--sage); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; transition: opacity .45s; }
#ap-splash img { width: 210px; } #ap-splash p { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
#ap-splash i { width: 90px; height: 3px; border-radius: 3px; margin-top: 26px; background: linear-gradient(90deg, #fff 45%, rgba(255,255,255,.3) 45%); }
#ap-splash.out { opacity: 0; pointer-events: none; }
/* Karta urny w aplikacji (makieta 5) */
body.pa-on #buybar { display: none !important; }
.ap-fav { border: 0; background: none; cursor: pointer; color: var(--ink); } .ap-fav.on { color: #b5524a; } .ap-fav.on svg { fill: currentColor; }
.pa { padding-bottom: 150px; }
.pa-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #f4f1ec; }
.pa-gal::-webkit-scrollbar { display: none; }
.pa-slide { flex: 0 0 100%; scroll-snap-align: start; height: 300px; display: flex; align-items: center; justify-content: center; }
.pa-slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pa-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; } .pa-dots i { width: 6px; height: 6px; border-radius: 3px; background: #d6d0c4; transition: width .2s; } .pa-dots i.on { width: 18px; background: var(--sage-deep); }
.pa-b { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.pa-sku { color: var(--muted, #7a756c); font-size: 11px; letter-spacing: .1em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pa-b h1 { font-size: 26px; margin: 0; line-height: 1.15; }
.pa-pr { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .pa-pr b { font-size: 22px; color: var(--sage-deep); } .pa-pr small { color: var(--muted, #7a756c); }
.pa-badge { align-self: center; background: #f6efe0; color: #8a5a3a; border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.pa-lbl { margin: 4px 0 0; font-size: 14px; color: var(--muted, #7a756c); } .pa-lbl b { color: var(--ink); font-weight: 600; }
.pa-sw { display: flex; flex-wrap: wrap; gap: 10px; } .pa-sw a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.pa-sw a.on { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.pa-sizes { display: flex; gap: 8px; flex-wrap: wrap; } .pa-sizes button { border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 11px; padding: 8px 12px; font: 600 14px var(--body, Lato, sans-serif); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.pa-sizes button small { font-weight: 400; font-size: 11px; color: var(--muted, #7a756c); } .pa-sizes button.on { border-color: var(--sage-deep); background: var(--sage-light); }
.pa-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; } .pa-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sage-deep); flex: none; } .pa-check small { display: block; color: var(--muted, #7a756c); }
.pa-pz { display: flex; flex-direction: column; gap: 8px; } .pa-pzo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .pa-pzo input { accent-color: var(--sage-deep); }
.pa-pz textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px; font: inherit; background: #fff; color: var(--ink); } #pa-prev img { max-height: 120px; border-radius: 8px; }
.pa-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pa-tiles span { background: #f6f2ea; border-radius: 12px; padding: 10px 8px; font-size: 11px; color: var(--muted, #7a756c); text-align: center; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa-tiles b { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.pa-desc { font-size: 13px; color: var(--muted, #7a756c); margin: 4px 0 0; }
.pa-buy { position: fixed; left: 0; right: 0; bottom: calc(53px + env(safe-area-inset-bottom, 0px)); z-index: 139; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 10px; align-items: center; box-shadow: 0 -4px 14px rgba(0,0,0,.05); }
.pa-buy .ap-btn { margin: 0; flex: 1; }.pa-file[hidden] { display: none !important; }

.pa-rel { padding: 22px 0 0; } .pa-rel h3 { margin: 0 16px 10px; font-size: 19px; }
.pa-rel-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; scrollbar-width: none; } .pa-rel-row::-webkit-scrollbar { display: none; }
.pa-rel-row a { flex: 0 0 140px; scroll-snap-align: start; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.pa-rel-img { height: 150px; border-radius: 12px; background: #f4f1ec; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pa-rel-img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pa-rel-row b { font-size: 13px; font-weight: 600; line-height: 1.25; } .pa-rel-row small { font-size: 12px; color: var(--sage-deep); font-weight: 700; }
.pa { padding-bottom: 140px; }
.pa-rel-row { scroll-padding-inline: 16px; } .pa-rel-row::after { content: ""; flex: 0 0 4px; }
.pa { padding-bottom: 84px; } body.pa-on #app { min-height: 0 !important; } .pa-rel { padding-bottom: 4px; }
body.pa-on .proto { display: none !important; } .pa { padding-bottom: 76px; }

/* Pokaż katalog rodzinie – przewijanie w dół, jedna urna na ekran */
.fam { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.fam-track { flex: 1 1 0; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
.fam-s { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; justify-content: center; }
.fam-s .fam-img { height: auto; flex: 1 1 0; min-height: 0; }
.fam-s .fam-b { flex: none; }

/* ===== Nowy Start, nagłówek z wyszukiwarką, pistacjowe menu, konto w kafelkach (makiety: start-final.png, konto-kafelki.png) ===== */
.ap-hd.ap-hd3 { flex-wrap: wrap; justify-content: center; position: relative; row-gap: 8px; padding-bottom: 12px; }
.ap-hd.ap-hd3 .ap-logo { flex: none; } .ap-hd.ap-hd3 .ap-logo img { height: 50px; }
.ap-hd.ap-hd3 .ap-bell { position: absolute; right: 12px; top: calc(16px + env(safe-area-inset-top, 0px)); }
.ap-find { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; height: 44px; padding: 0 5px 0 12px; color: var(--sage-deep); }
.ap-find > svg { width: 20px; height: 20px; flex: none; }
.ap-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 15px var(--body, Lato, sans-serif); color: var(--ink); -webkit-appearance: none; }
.ap-find input::placeholder { color: #8a867e; }
.ap-scan { flex: none; width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--sage-light); color: var(--sage-deep); display: grid; place-items: center; cursor: pointer; }
.ap-scan svg { width: 22px; height: 22px; }
.ap-start2 { gap: 10px; padding-top: 12px; }
.ap-lv2 { display: flex; gap: 12px; align-items: center; border-radius: 18px; padding: 11px 14px; background: linear-gradient(135deg, #f3f4f5, #e3e6e9); border: 1px solid #d9dde0; color: var(--ink); text-decoration: none; }
.ap-lv2 > div { flex: 1; min-width: 0; } .ap-lv2 small { display: block; font-size: 11.5px; color: var(--muted); } .ap-lv2 b { display: block; font-size: 16px; margin: 1px 0; }
.ap-medal2 { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), var(--mc) 70%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.ap-medal2 svg { width: 22px; height: 22px; }
.ap-lvbar { display: block; height: 6px; border-radius: 3px; background: #fff; margin: 5px 0 4px; overflow: hidden; } .ap-lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #c8a24a, #e0c06a); border-radius: 3px; }
.ap-ph { position: relative; display: flex; align-items: center; height: 108px; border-radius: 18px; overflow: hidden; padding: 0 16px; background: var(--sage); color: #fff; text-decoration: none; }
.ap-ph.two { background: #f6f2ea; color: var(--ink); }
.ap-ph img { position: absolute; right: 0; top: 0; width: 58%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.ap-ph > div { position: relative; z-index: 1; max-width: 62%; }
.ap-ph svg { width: 28px; height: 28px; display: block; margin-bottom: 3px; }
.ap-ph b { display: block; font-family: var(--head); font-weight: 400; font-size: 22px; line-height: 1.1; } .ap-ph small { display: block; font-size: 12px; opacity: .88; margin-top: 3px; }
.ap-tiles, .ap-atiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 78px; padding: 10px 12px; border-radius: 16px; background: var(--sage-light); color: var(--ink); text-decoration: none; }
.ap-tile.c, .ap-at.c { background: #f3ebe0; }
.ap-tile svg { width: 24px; height: 24px; color: var(--sage-deep); } .ap-tile b { display: block; font-size: 14.5px; line-height: 1.2; } .ap-tile small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.ap-tbd { position: absolute; top: 8px; right: 8px; background: var(--brown, #79522f); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 2px 7px; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-p10 { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; color: var(--ink); text-decoration: none; background: #fff; }
.ap-p10 > div { flex: 1; min-width: 0; } .ap-p10 b { font-size: 13.5px; font-weight: 400; } .ap-p10 .ap-bar { height: 5px; margin: 5px 0 0; background: #eee; }
/* menu na dole – ikony pistacjowe, aktywna w jasnej „pigułce” */
body.app #tabbar a { color: var(--sage); font-weight: 600; }
body.app #tabbar a .icon { stroke-width: 2; }
body.app #tabbar a.on { color: var(--sage-deep); font-weight: 700; }
body.app #tabbar a.on .icon { background: var(--sage-light); border-radius: 12px; padding: 3px 12px; width: 50px; height: 30px; box-sizing: border-box; }
/* konto w kafelkach */
body.app .account > nav { display: none !important; }
body.app .account > div > .eyebrow, body.app .account > div > h1 { display: none; }
.ap-acc { padding: 12px 2px 8px; gap: 10px; }
.ap-firm b { font-size: 15.5px; }
.ap-piggy { display: flex; justify-content: space-between; gap: 10px; background: #dfe8d9; border-radius: 16px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.ap-piggy small { display: block; font-size: 11.5px; color: var(--sage-deep); } .ap-piggy b { font-size: 18px; } .ap-piggy div:last-child { text-align: right; }
.ap-at { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border-radius: 16px; background: var(--sage-light); color: var(--ink); text-decoration: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.ap-at > svg { width: 24px; height: 24px; color: var(--sage-deep); flex: none; } .ap-at > div { min-width: 0; }
.ap-at b { display: block; font-size: 13.5px; line-height: 1.15; } .ap-at small { display: block; font-size: 10.5px; color: var(--muted); }
.ap-at .ap-tbd { top: -7px; right: 6px; }
.ap-at.ap-out { justify-content: center; background: #fff; border: 1px solid var(--line); color: #a0453a; font-weight: 700; font-size: 13.5px; }
/* skaner kodu QR */
#ap-scanner { position: fixed; inset: 0; z-index: 400; background: rgba(20,24,20,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); color: #fff; }
#ap-scanner .sc-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; cursor: pointer; }
#ap-scanner .sc-x svg { width: 22px; height: 22px; }
#ap-scanner .sc-in { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.sc-cam { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: #000; }
.sc-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.sc-err { padding: 40px 20px; margin: 0; font-size: 14px; line-height: 1.5; }
.sc-d { margin: 0; font-size: 14px; line-height: 1.45; opacity: .92; }
.sc-man { display: flex; gap: 8px; } .sc-man input { flex: 1; min-width: 0; border: 0; border-radius: 10px; padding: 0 12px; height: 42px; font: 15px var(--body, Lato, sans-serif); background: #fff; color: var(--ink); }
.sc-man .ap-btn { margin: 0; width: auto; padding: 0 16px; }
#ap-scanner.sheet { background: rgba(20,24,20,.6); justify-content: flex-end; }
#ap-scanner.sheet .sc-in { background: #fff; color: var(--ink); border-radius: 22px; padding: 18px 16px; max-width: 480px; gap: 4px; }
#ap-scanner.sheet .sc-d { opacity: 1; color: var(--muted); margin-bottom: 6px; }
.sc-img { width: 96px; height: 110px; object-fit: contain; margin: 0 auto; background: #f4f1ec; border-radius: 14px; }
.sc-t { margin: 6px 0 0; font-family: var(--head); font-size: 20px; } .sc-t small { font: 400 13px var(--body, Lato, sans-serif); color: var(--muted); }

/* Program partnerski: dalsze poziomy zamazane (widać tylko swój i jeden wyższy) */
.pt-blur { filter: blur(5px); user-select: none; pointer-events: none; }
tr.pt-blur td { color: #8b8578; }
.pt-step.pt-blur i { background: linear-gradient(135deg, #c8a24a, #8d989f); }

/* informacja dla klientów prywatnych – zalogowanym firmom niepotrzebna (także na komputerze) */
body.is-logged .notice { display: none; }

/* „Co wyróżnia nasze produkty?” – duże ikony bez kart, kolumny oddzielone cienką linią */
.why2-sec { background: #fff; }
.why2 { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin: 0 auto; }
.why2 .it { text-align: center; padding: 6px 40px; }
.why2 .it + .it { border-left: 1px solid var(--line); }
.why2 .ic { height: 112px; display: grid; place-items: center; color: var(--sage); }
.why2 .ic svg { width: 96px; height: 96px; }
.why2 .ic img { width: 110px; height: 110px; object-fit: contain; }
.why2 h3 { font-family: var(--head); font-weight: 400; font-size: 24px; color: var(--sage-deep); margin: 16px 0 10px; }
.why2 p { color: var(--muted); line-height: 1.65; margin: 0; }
@media (max-width: 760px) {
  .why2 { grid-template-columns: 1fr; gap: 34px; }
  .why2 .it { padding: 0 8px; }
  .why2 .it + .it { border-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
  .why2 .ic { height: 90px; } .why2 .ic svg { width: 78px; height: 78px; } .why2 .ic img { width: 92px; height: 92px; }
}

/* „Gdzie znajdziesz nasze produkty?” – zdjęcie w tle, zielona mgiełka, liczba punktów na mapie */
.map-band { position: relative; overflow: hidden; color: #fff; padding: 76px 0; }
.map-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-band::after { content: ""; position: absolute; inset: 0; background: rgba(79, 95, 75, .74); }
.map-band .wrap { position: relative; z-index: 1; max-width: 680px; }
.map-band .map-cnt { display: block; font-family: var(--head); font-size: 68px; line-height: 1; margin-bottom: 6px; }
.map-band .eyebrow { color: #eadfc4; }
.map-band h2 { color: #fff; margin: 8px 0 12px; }
.map-band p { color: #eef2ec; margin: 0 0 28px; }
.map-band .btn.white { background: #fff; color: var(--sage-deep); border-color: #fff; }
@media (max-width: 760px) { .map-band { padding: 56px 0; } .map-band .map-cnt { font-size: 54px; } }

/* „Ceny B2B po założeniu konta” (niezalogowani) – baner: zdjęcie na całą szerokość, kremowa mgiełka od lewej */
.b2b-band { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.b2b-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.b2b-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,242,234,.97) 0%, rgba(246,242,234,.93) 42%, rgba(246,242,234,0) 72%); }
.b2b-band .wrap { position: relative; z-index: 1; width: 100%; }
.b2b-band .b2b-txt { max-width: 560px; padding: 64px 0; }
.b2b-band h2 { margin: 8px 0 14px; }
.b2b-band p { margin: 0 0 24px; }
@media (max-width: 760px) {
  .b2b-band { min-height: 0; }
  .b2b-band::after { background: linear-gradient(180deg, rgba(246,242,234,.9) 0%, rgba(246,242,234,.96) 100%); }
  .b2b-band .b2b-txt { padding: 48px 0; }
}
/* zdjęcie w banerze B2B – całe, bez przycinania: po prawej, miękko wtopione w kremowe tło */
.b2b-band { background: #f6f2ea; min-height: 520px; }
.b2b-band > img { inset: 0 0 0 auto; width: auto; max-width: 58%; height: 100%; object-fit: contain; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.b2b-band::after { display: none; }
@media (max-width: 760px) { .b2b-band > img { position: relative; inset: auto; max-width: 100%; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); } .b2b-band { flex-direction: column; } }

/* ===== PODGLĄD planu kolorów strony głównej (body.plan, ?plan w adresie) – do akceptacji ===== */
body.plan .why2-sec { background: var(--beige-light); }
body.plan .why2 .it + .it { border-left-color: #e2d6c8; }
body.plan .b2b-band { background: #fff; }
body.plan .map-band { background: var(--sage); }
body.plan .map-band > img, body.plan .map-band::after { display: none; }
body.plan .map-band .eyebrow { color: #f3ead6; }
body.plan .band.memory { display: none; }
body.plan .footer { background: var(--sage); } /* stopka zostaje pistacjowa */
body.plan .footer-orn { display: flex; }
.footer-orn { display: none; align-items: center; justify-content: center; gap: 18px; padding: 30px 0 4px; }
.footer-orn i { height: 1px; flex: 0 1 360px; background: linear-gradient(90deg, transparent, #d9c08c); }
.footer-orn i:last-child { background: linear-gradient(90deg, #d9c08c, transparent); }
.footer-orn svg { width: 170px; height: 50px; fill: none; stroke: #d9c08c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.plan .footer { padding-top: 0; } .footer-orn { padding: 34px 0 30px; } body.plan .footer .logo-f { content: url(../assets/logo/ddd-naglowek-aplikacja.png); height: 64px; width: auto; }
/* warianty stopki do podglądu (?plan&f=1..3) */
body.plan.f1 .footer, body.plan.f2 .footer, body.plan.f3 .footer { color: #3f4a3b; }
body.plan.f1 .footer { background: var(--beige); }
body.plan.f2 .footer { background: var(--beige-light); }
body.plan.f3 .footer { background: #fff; border-top: 1px solid var(--line); }
body.plan.f1 .footer h4, body.plan.f2 .footer h4, body.plan.f3 .footer h4 { color: var(--brown); }
body.plan.f1 .footer a, body.plan.f2 .footer a, body.plan.f3 .footer a, body.plan.f1 .footer p, body.plan.f2 .footer p, body.plan.f3 .footer p, body.plan.f1 .footer li, body.plan.f2 .footer li, body.plan.f3 .footer li, body.plan.f1 .footer .bottom, body.plan.f2 .footer .bottom, body.plan.f3 .footer .bottom, body.plan.f1 .footer .small, body.plan.f2 .footer .small, body.plan.f3 .footer .small { color: #3f4a3b; }
body.plan.f1 .footer .logo-f, body.plan.f2 .footer .logo-f, body.plan.f3 .footer .logo-f { content: url(../assets/logo/ddd-stopka-zielone.png); height: 62px; width: auto; }
body.plan.f1 .footer-orn svg, body.plan.f2 .footer-orn svg, body.plan.f3 .footer-orn svg { stroke: var(--brown); }
body.plan.f1 .footer-orn i, body.plan.f2 .footer-orn i, body.plan.f3 .footer-orn i { background: linear-gradient(90deg, transparent, var(--brown)); }
body.plan.f1 .footer-orn i:last-child, body.plan.f2 .footer-orn i:last-child, body.plan.f3 .footer-orn i:last-child { background: linear-gradient(90deg, var(--brown), transparent); }
body.plan.f1 .footer .social a, body.plan.f2 .footer .social a, body.plan.f3 .footer .social a { border-color: #8d7a66; color: #3f4a3b; }
body.plan.f1 .footer .bottom, body.plan.f2 .footer .bottom, body.plan.f3 .footer .bottom { border-color: rgba(0,0,0,.12); }
body.plan.f1 .bio-mini img, body.plan.f2 .bio-mini img, body.plan.f3 .bio-mini img { content: url(../assets/logo/biosoul-kolor.png); }
body.plan .footer-orn { display: none !important; } body.plan .footer { padding-top: 56px; } /* bez ozdobnego szlaczka (decyzja 2026-10-12) */

/* dół strony głównej v2 (2026-10-12): białe „Co wyróżnia” → beżowe „Ceny B2B” → biały pasek mapy z pistacjowymi treściami → pistacjowa stopka */
body.plan .why2-sec { background: #fff; }
body.plan .why2 .it + .it { border-left-color: var(--line); }
body.plan .b2b-band { background: #f6f2ea; }
body.plan .map-band { background: #fff; color: var(--sage-dark); padding: 64px 0; border-top: 1px solid var(--line); }
body.plan .map-band h2 { color: var(--sage-deep); }
body.plan .map-band p { color: var(--sage-dark); }
body.plan .map-band .eyebrow { color: var(--sage); }

/* Stopka – uporządkowany układ (styl „2”, 2026-10-12): logo z lewej, 3 równe kolumny, BIO SOUL i dane w pasku na dole */
body.plan .footer { padding-top: 60px; }
.footer .cols { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 56px; align-items: start; }
.footer h4 { font-size: 15px; letter-spacing: .16em; color: #f3ead6; margin: 6px 0 18px; }
.footer ul { gap: 10px; line-height: 1.45; }
.footer .cols > div:first-child p { color: #f4f6f2; line-height: 1.6; max-width: 330px; margin: 18px 0 0; }
.footer .bottom { align-items: center; margin-top: 48px; padding: 20px 0 24px; line-height: 1.7; }
.footer .bottom .bio-mini { margin: 0; text-align: left; }
.footer .bottom .bio-mini img { width: 40px; }
@media (max-width: 900px) { .footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; } .footer .cols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer .cols { grid-template-columns: 1fr; } .footer .bottom { flex-direction: column; align-items: flex-start; } }
.footer h4 { color: #fff; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.75); } /* białe nagłówki oddzielone białą linią */

/* telefon (2026-10-13): goście widzą stopkę; zalogowani w aplikacji – bez stopki (mają dolne menu) */
body.app:not(.is-logged) #site-footer { display: block; }
body.app:not(.is-logged) .footer { padding-bottom: 70px; }
/* baner B2B na telefonie – zdjęcie niższe, całe, na środku */
@media (max-width: 760px) {
  .b2b-band > img { width: auto !important; max-width: 100%; height: 300px !important; margin: 24px auto 0; display: block; object-fit: contain; }
  .b2b-band .b2b-txt { padding: 24px 0 44px; }
  .b2b-band .eyebrow { font-size: 10.5px; }
}
@media (max-width: 560px) { .footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer .cols > div:first-child, .footer .cols > div:last-child { grid-column: 1 / -1; } } /* telefon: Sklep i Informacje obok siebie – krótsza stopka */
/* baner B2B na telefonie – jak na komputerze: zdjęcie po prawej, wtopione w beż, tekst po lewej (2026-10-13) */
@media (max-width: 760px) {
  .b2b-band { flex-direction: row !important; min-height: 0; }
  .b2b-band > img { position: absolute !important; inset: 0 0 0 auto !important; margin: 0 !important; height: 100% !important; width: auto !important; max-width: 72%; object-fit: contain; object-position: right bottom;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%) !important; mask-image: linear-gradient(90deg, transparent 0, #000 45%) !important; opacity: .55; }
  .b2b-band .b2b-txt { position: relative; z-index: 1; padding: 44px 0 46px; }
  .b2b-band .b2b-txt p { max-width: 92%; }
}
@media (max-width: 760px) {
  .b2b-band > img { max-width: 52% !important; opacity: 1 !important; object-position: right center !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%) !important; mask-image: linear-gradient(90deg, transparent 0, #000 40%) !important; }
  .b2b-band .b2b-txt { max-width: 62%; padding: 36px 0 38px; }
  .b2b-band .eyebrow { font-size: 9.5px; letter-spacing: .14em; }
  .b2b-band h2 { font-size: 24px; line-height: 1.15; }
  .b2b-band .b2b-txt p { font-size: 13.5px; line-height: 1.5; max-width: none; }
  .b2b-band .b2b-txt .btn { padding: 11px 14px; font-size: 11.5px; width: 100%; }
}
@media (max-width: 760px) { .b2b-band > img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%) !important; -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%) !important; mask-composite: intersect; } } /* miękkie krawędzie zdjęcia ze wszystkich stron */
@media (max-width: 760px) { .b2b-band > img { inset: 50% 0 auto auto !important; transform: translateY(-50%); width: 52% !important; max-width: none !important; height: auto !important; } } /* zdjęcie dokładnie swojej wielkości – maska zmiękcza jego krawędzie */

/* ===== Aplikacja: ekran powitalny dla niezalogowanych (wariant B, białe tło, 2026-10-13) ===== */
body.ap-welcome-on #site-header, body.ap-welcome-on #tabbar, body.ap-welcome-on .proto, body.ap-welcome-on #instbar, body.ap-welcome-on #site-footer { display: none !important; }
body.ap-welcome-on { padding-bottom: 0 !important; background: #fff; }
.ap-welcome { min-height: 100vh; min-height: 100dvh; background: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(28px + env(safe-area-inset-top, 0px)) 24px calc(22px + env(safe-area-inset-bottom, 0px)); }
.ap-w-logo { height: 64px; width: auto; }
.ap-w-photo { flex: 1 1 0; min-height: 180px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 8px 0; }
.ap-w-photo img { max-height: 100%; max-width: 78%; object-fit: contain; display: block; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 70%, transparent 100%); }
.ap-welcome h1 { font-family: var(--head); font-weight: 400; font-size: 27px; line-height: 1.2; color: var(--sage-deep); margin: 0 0 8px; }
.ap-welcome p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; max-width: 320px; }
.ap-w-btns { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.ap-w-btns .ap-btn { margin: 0; text-transform: uppercase; }
.ap-w-link { background: none; border: 0; color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; font: 14px var(--body, Lato, sans-serif); padding: 10px; cursor: pointer; }
/* logowanie / aktywacja w aplikacji – tylko potrzebna część formularza */
body.app.ap-login .auth { display: block; padding: 18px 0 30px; }
body.app.ap-login .auth .side, body.app.ap-login .auth > div > h2, body.app.ap-login .auth > div > .muted { display: none; }
body.app.ap-login:not(.ap-nip) .act-box { display: none; }
body.app.ap-login.ap-nip #login-form { display: none; }
body.app.ap-login.ap-nip .act-box { margin-top: 0 !important; }
body.app.ap-login #login-form .btn { width: 100%; }
.ap-w-photo { flex: 0 1 auto; height: 38vh; min-height: 200px; margin: 18px 0 22px; }
.ap-welcome { justify-content: center; }
body.app.ap-login #site-footer { display: none !important; }
body.app.ap-login .auth > div { border: 0; box-shadow: none; padding: 0; background: none; }
body.app.ap-login .act-box { border: 0; padding: 0; background: none; }
body.app.ap-login .act-box h3 { font-size: 24px; margin-top: 0; }
body.app.ap-login .auth > div > .box.bg-beige { margin-top: 34px !important; font-size: 13px; }
.ap-w-photo.two { gap: 10px; height: 36vh; } .ap-w-photo.two img { max-width: none; width: calc(50% - 5px); height: 100%; object-fit: cover; border-radius: 16px; -webkit-mask-image: none; mask-image: none; } /* dwa zdjęcia: urna dla ludzi + urna dla zwierząt */
.ap-w-photo.two { height: auto; align-items: flex-end; } .ap-w-photo.two img { height: auto; object-fit: contain; } /* zdjęcia całe, bez przycinania */
body.app.ap-login .auth { border: 0 !important; box-shadow: none !important; background: none !important; padding: 18px 4px 30px !important; }
/* ekran powitalny w pistacjowym kolorze logo (#879A83) */ .ap-welcome h1 { color: var(--sage); } .ap-welcome .ap-w-btns .ap-btn { background: var(--sage); border-color: var(--sage); } .ap-welcome .ap-w-btns .ap-btn.ap-ghost { background: #fff; color: var(--sage); border: 1.5px solid var(--sage); } .ap-w-link { color: var(--sage); }

/* 13.10.2026: BIO SOUL – zdjęcia w naturalnych proporcjach (bez jasnych pasów, bez przycinania) i ikony kroków jak na obecnej stronie (białe rysunki na szałwii) */
.bs-hero .pics img { aspect-ratio: auto; height: auto; background: none; }
.steps-3 .st .ilu.ikona { background: none; border-radius: 0; padding: 0; aspect-ratio: auto; max-width: 190px; height: 170px; object-fit: contain; }
/* BIO SOUL (13.10.2026): góra strony jak baner na głównej – zdjęcie z lasu wtopione w zielone tło; instrukcja – zdjęcie z miękkimi brzegami, kroki bez kafelków */
.bs-hero.photo-hero .wrap { display: block; position: relative; z-index: 2; }
.bs-hero.photo-hero .wrap > div:first-child { max-width: 560px; }
#instrukcja .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center !important; gap: 40px; }
#instrukcja .pic img { aspect-ratio: auto !important; height: auto; width: 100%; object-fit: contain; border-radius: 0; background: none; box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); }
#instrukcja .steps li { background: none; box-shadow: none; border: 0; border-bottom: 1px solid #dcd6cc; border-radius: 0; padding: 10px 0 10px 46px; margin: 0; font-size: 15px; }
#instrukcja .steps li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  #instrukcja .split { grid-template-columns: 1fr; }
  .bs-hero.photo-hero .wrap > div:first-child { max-width: 62%; }
  .bs-hero.photo-hero .logo-bs { max-width: 90px; }
}@media (max-width: 900px) {
  /* telefon: tekst na górze na całą szerokość, pod nim zdjęcie w całości, wtopione górną krawędzią w zielone tło */
  .page-hero.bs-hero.photo-hero { flex-direction: column; align-items: stretch; }
  .page-hero.bs-hero.photo-hero .wrap > div:first-child { max-width: none; }
  .page-hero.bs-hero.photo-hero p + p { display: block; }
  .page-hero.bs-hero.photo-hero > img.ph { order: 1; position: relative; inset: auto; width: 100%; max-width: none; max-height: none; height: auto; margin-top: -40px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); -webkit-mask-composite: source-over; mask-composite: add; }
  .page-hero.bs-hero.photo-hero::after { background: rgba(110,128,101,.25); }
}

/* ---------- BIO SOUL – „Gałęzie” (14.10.2026): jasne tło, gałęzie z liśćmi lekko kołyszą się na brzegach ekranu,
   pojedyncze liście powoli opadają; treść na białych, lekko przezroczystych kartach; ilustracje Klaudii Kusik ---------- */
.bs-page { position: relative; clip-path: inset(0); background: linear-gradient(180deg, #f6f3ea 0%, #eef1ea 45%, #f4f0e6 100%); }
.bs-forest { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bs-forest::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 85% 0%, rgba(255,226,160,.35), transparent 65%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(135,154,131,.18), transparent 70%); }
.bs-forest .gal { position: absolute; display: block; background: url(../assets/galeria/bs-galaz.svg) center / contain no-repeat; opacity: .38; animation: bsKolysz 9s ease-in-out infinite alternate; }
.bs-forest .g1 { width: 560px; height: 280px; top: 110px; right: -250px; transform: scaleX(-1); transform-origin: 50% 20%; animation-name: bsKolyszP; }
.bs-forest .g2 { width: 520px; height: 260px; bottom: -70px; left: -330px; transform: scaleY(-1); transform-origin: 0% 50%; animation-name: bsKolyszL2; animation-duration: 11s; }
@keyframes bsKolyszL2 { from { transform: scaleY(-1) rotate(-2deg); } to { transform: scaleY(-1) rotate(2.5deg); } }
.bs-forest .g3 { width: 460px; height: 230px; bottom: -40px; right: -80px; transform: scale(-1, -1); transform-origin: 50% 50%; animation-name: bsKolyszD; animation-duration: 10s; opacity: .7; }
.bs-forest .g4 { display: none; width: 380px; height: 190px; bottom: 60px; left: -110px; transform: scaleY(-1) rotate(-8deg); transform-origin: 0% 85%; animation-name: bsKolyszL; animation-duration: 12s; opacity: .55; }
@keyframes bsKolysz  { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }
@keyframes bsKolyszP { from { transform: scaleX(-1) rotate(-2deg); } to { transform: scaleX(-1) rotate(2.5deg); } }
@keyframes bsKolyszD { from { transform: scale(-1, -1) rotate(-2deg); } to { transform: scale(-1, -1) rotate(2deg); } }
@keyframes bsKolyszL { from { transform: scaleY(-1) rotate(-10deg); } to { transform: scaleY(-1) rotate(-5deg); } }
/* opadające liście */
.bs-forest i { position: absolute; top: -40px; width: 26px; height: 17px; background: url(../assets/galeria/bs-lisc.svg) center / contain no-repeat; opacity: 0; animation: bsLisc 18s linear infinite; filter: opacity(.55); }
.bs-forest i:nth-child(5)  { left: 6%;  animation-delay: 0s; }
.bs-forest i:nth-child(6)  { left: 17%; animation-delay: 6s;  animation-duration: 22s; }
.bs-forest i:nth-child(7)  { left: 29%; animation-delay: 12s; }
.bs-forest i:nth-child(8)  { left: 41%; animation-delay: 3s;  animation-duration: 24s; width: 20px; height: 13px; }
.bs-forest i:nth-child(9)  { left: 53%; animation-delay: 9s; }
.bs-forest i:nth-child(10) { left: 64%; animation-delay: 15s; animation-duration: 21s; }
.bs-forest i:nth-child(11) { left: 75%; animation-delay: 1.5s; width: 22px; height: 14px; }
.bs-forest i:nth-child(12) { left: 86%; animation-delay: 7.5s; animation-duration: 23s; }
.bs-forest i:nth-child(13) { left: 94%; animation-delay: 13.5s; }
.bs-forest i:nth-child(14) { left: 35%; animation-delay: 18s; animation-duration: 26s; width: 18px; height: 12px; }
.bs-forest i:nth-child(15) { left: 70%; animation-delay: 21s; animation-duration: 25s; }
.bs-forest i:nth-child(16) { left: 11%; animation-delay: 24s; animation-duration: 20s; width: 20px; height: 13px; }
.bs-forest i:nth-child(17) { left: 48%; animation-delay: 27s; }
.bs-forest i:nth-child(18) { left: 90%; animation-delay: 30s; animation-duration: 22s; }
@keyframes bsLisc { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: .75; } 25% { transform: translate(40px, 25vh) rotate(120deg); } 50% { transform: translate(-20px, 50vh) rotate(220deg); } 75% { transform: translate(35px, 75vh) rotate(330deg); } 92% { opacity: .6; } 100% { opacity: 0; transform: translate(0, 105vh) rotate(420deg); } }
@media (prefers-reduced-motion: reduce) { .bs-forest .gal, .bs-forest i { animation: none; } .bs-forest i { display: none; } }

.bs-page > section { position: relative; z-index: 1; }
.bs-page > nav.subnav { position: sticky; z-index: 5; }
.bs-page > section.section, .bs-page > section.bs-hero { background: transparent !important; }
.bs-page h1, .bs-page h2, .bs-page h3, .bs-page h4 { color: var(--sage-deep); }
.bs-page .subnav { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* góra strony: tekst + okrągła karta z animacją Klaudii Kusik */
.bs-hero-las { min-height: 600px; display: flex; align-items: center; color: var(--ink); }
.bs-hero-las .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-top: 70px; padding-bottom: 70px; }
.bs-hero-las h1 { font-size: 54px; line-height: 1.08; }
.bs-hero-las p { color: var(--ink); }
.bs-hero-las .logo-bs { max-width: 120px; content: url(../assets/logo/biosoul-kolor.png); }
.bs-hero-las .btn.light { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.bs-hero-las .btn.outline-light { background: transparent; color: var(--sage-deep); border-color: var(--sage-deep); }
.bs-medal { justify-self: center; width: min(400px, 100%); aspect-ratio: 1; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 12px rgba(135,154,131,.14), 0 24px 60px rgba(74,90,72,.18); display: grid; place-items: center; overflow: hidden; }
.bs-medal img { width: 74%; height: auto; }

/* karty z treścią – białe, lekko przezroczyste */
.bs-page .feature, .bs-page .option, .bs-page .when-list li, .bs-page .faq details, .bs-page #instrukcja .split > div:first-child {
  background: rgba(255,255,255,.8) !important; border: 1px solid rgba(135,154,131,.22) !important; border-radius: 16px; box-shadow: 0 10px 30px rgba(74,90,72,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bs-page .feature { padding: 22px; }
.bs-page .option { padding: 22px 24px !important; }
.bs-page #instrukcja .split > div:first-child { padding: 30px; }
.bs-page .faq details { margin-bottom: 10px; padding: 4px 18px; }

/* „Wybierz – Zasadź – Bądź”: ilustracje Klaudii Kusik */
.bs-page .steps-3 .st { background: #fff; border-radius: 18px; padding: 22px 22px 26px; box-shadow: 0 12px 34px rgba(74,90,72,.1); }
.bs-page .steps-3 .st h3 { color: var(--sage-deep) !important; }
.bs-page .steps-3 .st p { color: #4b5248 !important; }
.bs-page .steps-3 .st .n { background: var(--sage-deep) !important; color: #fff !important; border-color: var(--sage-deep) !important; width: 34px !important; height: 34px !important; font-size: 17px !important; line-height: 34px !important; margin: 8px auto 6px !important; }
.bs-page .steps-3 .st .ilu.kusik { width: 100%; height: 270px; object-fit: contain; background: none; border-radius: 0; aspect-ratio: auto; }

/* Kiedy sadzić */
.bs-page #kiedy .wrap { max-width: 980px !important; }
.bs-page #kiedy .when-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 28px 0; padding: 0; }
.bs-page #kiedy .when-list li { display: block; padding: 18px 20px; margin: 0; list-style: none; }

.bs-page #kiedy .when-list li b { display: block; font-family: var(--head); font-size: 19px; font-weight: 400; margin-bottom: 6px; color: var(--sage-deep); }

/* zakończenie */
.bs-page .bs-cta { background: transparent !important; padding: 80px 0 100px; }

@media (max-width: 900px) {
  .bs-forest .g1 { width: 320px; height: 160px; right: -150px; top: 70px; }
  .bs-forest .g2 { width: 300px; height: 150px; left: -200px; bottom: -40px; }
  .bs-forest .g3 { width: 280px; height: 140px; }
  .bs-forest .g4 { display: none; }
  .bs-hero-las { min-height: 0; }
  .bs-hero-las .wrap { grid-template-columns: 1fr; gap: 26px; padding-top: 70px; padding-bottom: 40px; }
  .bs-hero-las h1 { font-size: 34px; }
  .bs-medal { width: min(280px, 80%); }
  .bs-page #kiedy .when-list { grid-template-columns: 1fr; gap: 12px; }
  .bs-page #cechy .features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bs-page #cechy .feature { padding: 14px; font-size: 13.5px; margin: 0; }
  .bs-page #cechy .feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bs-page #instrukcja .split > div:first-child { padding: 20px 16px; }
  .bs-page .subnav .wrap { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 18px; justify-content: flex-start; scrollbar-width: none; }
  .bs-page .subnav .wrap a { flex: 0 0 auto; white-space: nowrap; }
  .bs-page .bs-cta { padding: 56px 0 70px; }
}.bs-page .bs-note { background: rgba(255,255,255,.8); border: 1px solid rgba(135,154,131,.22); border-radius: 16px; box-shadow: 0 10px 30px rgba(74,90,72,.08); padding: 18px 22px; margin: 0; }
/* ---------- BIO SOUL – animowana instrukcja sadzenia (js/bs-anim.js) ---------- */
.bsa { background: #fff; border-radius: 18px; padding: 14px 14px 16px; box-shadow: 0 12px 34px rgba(74,90,72,.12); }
.bsa-svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.bsa-svg text { font: 13px Lato, sans-serif; fill: #4a5a48; }
.bsa-hole { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.6s ease; }
.s1 .bsa-hole { transform: scaleY(1); }
.bsa-mound { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1.6s ease; }
.s1 .bsa-mound { transform: scaleY(1); } .s4 .bsa-mound { transform: scaleY(0); }
.bsa-fill { opacity: 0; transition: opacity 1.6s ease; } .s4 .bsa-fill { opacity: 1; }
.bsa-urn { transition: transform 1.8s cubic-bezier(.5,0,.3,1); } .s3 .bsa-urn { transform: translateY(202px); }
.bsa-bub { opacity: 0; transition: opacity .6s; } .s2 .bsa-bub { opacity: 1; } .s3 .bsa-bub { opacity: 0; } .s5 .bsa-top { opacity: 1; } .s9 .bsa-top { opacity: 0; }
.bsa-stk { transform-box: fill-box; transform-origin: 50% 50%; } .s2 .bsa-stk { animation: bsaPeel 1.5s .9s ease-in forwards; }
@keyframes bsaPeel { 0% { transform: none; opacity: 1; } 30% { transform: translate(4px,-6px) rotate(-8deg); opacity: 1; } 100% { transform: translate(70px,-90px) rotate(-60deg) scale(.6); opacity: 0; } }
.bsa-wet { opacity: 0; transition: opacity 1.4s 1.2s; } .s5 .bsa-wet { opacity: 1; }
.bsa-can { opacity: 0; transform-box: fill-box; transform-origin: 70% 60%; transition: opacity .5s, transform .9s; }
.s5 .bsa-can { opacity: 1; transform: rotate(-22deg); } .s6 .bsa-can { opacity: 0; transform: none; } .s8 .bsa-can { opacity: 1; transform: rotate(-14deg); } .s9 .bsa-can { opacity: 0; }
.bsa-drop { opacity: 0; }
.s5:not(.s6) .bsa-drop { animation: bsaDrop .9s .8s ease-in infinite; }
.s5:not(.s6) .bsa-drop.d1 { animation-delay: 1s; } .s5:not(.s6) .bsa-drop.d2 { animation-delay: 1.2s; } .s5:not(.s6) .bsa-drop.d3 { animation-delay: 1.4s; }
.s8:not(.s9) .bsa-drop.d1, .s8:not(.s9) .bsa-drop.d2 { animation: bsaDrop .9s .8s ease-in 2; } .s8:not(.s9) .bsa-drop.d2 { animation-delay: 1.2s; }
@keyframes bsaDrop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: .9; transform: translateY(118px); } }
.bsa-seed { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; } .s6:not(.s7) .bsa-seed { animation: bsaSeed 1.6s .3s ease-in forwards; }
@keyframes bsaSeed { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 15% { opacity: 1; } 85% { opacity: 1; transform: translateY(116px) rotate(200deg); } 100% { opacity: 0; transform: translateY(120px) rotate(220deg); } }
.bsa-bseed { opacity: 0; transition: opacity .6s 1.4s; } .s6 .bsa-bseed { opacity: 1; }
.bsa-sprinkle circle { opacity: 0; } .s7:not(.s8) .bsa-sprinkle circle { animation: bsaSpr 1.2s ease-in forwards; }
.s7:not(.s8) .bsa-sprinkle .p1 { animation-delay: .15s; } .s7:not(.s8) .bsa-sprinkle .p2 { animation-delay: .3s; } .s7:not(.s8) .bsa-sprinkle .p3 { animation-delay: .45s; } .s7:not(.s8) .bsa-sprinkle .p4 { animation-delay: .6s; }
@keyframes bsaSpr { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(90px); } }
.bsa-bsoil { opacity: 0; transition: opacity .8s 1s; } .s7 .bsa-bsoil { opacity: .85; }
.bsa-sprout { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; } .s9 .bsa-sprout { animation: bsaSprout 6s forwards; }
@keyframes bsaSprout { 0% { opacity: 1; transform: scale(0); } 22% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(1.05); } 52% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }
.bsa-tree { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; } .s9 .bsa-tree { animation: bsaTree 6s forwards; }
@keyframes bsaTree { 0%, 34% { opacity: 0; transform: scale(.08); } 44% { opacity: 1; transform: scale(.2); } 100% { opacity: 1; transform: scale(1); } }
.bsa-roots path { stroke-dasharray: 260; stroke-dashoffset: 260; } .s9 .bsa-roots path { animation: bsaRoot 3s 2.6s forwards; }
@keyframes bsaRoot { to { stroke-dashoffset: 0; } }
.bsa-cap { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 12px; min-height: 48px; }
.bsa-n { font: 700 11.5px Lato, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #879A83; white-space: nowrap; }
.bsa-t { font-family: var(--head); font-size: 18px; line-height: 1.35; color: var(--sage-deep); }
.bsa-dots { display: flex; gap: 7px; margin-top: 6px; }
.bsa-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: #d7dfd3; cursor: pointer; }
.bsa-dots button.on { background: var(--sage-deep); }
.bs-page #instrukcja .pic .bsa + img { display: none; }
@media (prefers-reduced-motion: reduce) { .bsa-svg * { animation: none !important; transition: none !important; } }
/* ---------- BIO SOUL – instrukcja: pokaz realistycznych zdjęć (płynne przejścia + powolne przybliżenie) ---------- */
.bsx-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #e9ede6; }
.bsx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; transform: scale(1.02); }
.bsx-img.on { opacity: 1; animation: bsxZoom 6s ease-out forwards; }
.bsx-img.alt.on { animation-name: bsxZoom2; }
@keyframes bsxZoom { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes bsxZoom2 { from { transform: scale(1.12) translate(1%, -1%); } to { transform: scale(1.02) translate(0, 0); } }
.bsx-num { position: absolute; left: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--sage-deep); font-family: var(--head); font-size: 20px; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.bsx-num:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .bsx-img.on { animation: none; } }
#instrukcja .pic .bsx-img { -webkit-mask-image: none !important; mask-image: none !important; aspect-ratio: auto !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }

/* Kiedy sadzic - naglowek i wstep wysrodkowane jak w pozostalych czesciach strony */
.bs-page #kiedy > .wrap > .eyebrow, .bs-page #kiedy > .wrap > h2, .bs-page #kiedy > .wrap > p { text-align: center; margin-left: auto; margin-right: auto; }
.bs-page #kiedy > .wrap > .eyebrow { display: block; }
.bs-page #kiedy > .wrap > p { max-width: 760px; }
/* BIO SOUL – baner jak wcześniej: zdjęcie urny w lesie wtopione w zielone tło (14.10.2026, na życzenie właścicielki) */
.bs-page > section.bs-hero.photo-hero { background: var(--sage-deep) !important; }
.bs-page .bs-hero.photo-hero h1, .bs-page .bs-hero.photo-hero p { color: #fff; }
/* telefon (widok aplikacji): menu strony BIO SOUL przyklejone tuz pod gornym paskiem */
body.app .bs-page > nav.subnav { top: 60px; }

/* pokaz instrukcji: strzałki (komputer) i przesuwanie palcem (telefon) */
.bsx-stage { touch-action: pan-y; }
.bsx-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--sage-deep);
  font-size: 30px; line-height: 40px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 2; padding: 0; opacity: .85; transition: opacity .2s; }
.bsx-arr:hover { opacity: 1; }
.bsx-arr.prev { left: 12px; } .bsx-arr.next { right: 12px; }
@media (max-width: 900px), (hover: none) { .bsx-arr { display: none; } }

@media (max-width: 900px) {
  /* telefon: niższy baner BIO SOUL – zdjęcie lasu jako tło, mniejsze logo i napisy, przyciski obok siebie */
  .page-hero.bs-hero.photo-hero { display: block; min-height: 0; position: relative; }
  .page-hero.bs-hero.photo-hero > img.ph, .page-hero.bs-hero.photo-hero > img.bg { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important;
    object-fit: cover !important; object-position: 70% 60% !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none; z-index: 0; }
  .page-hero.bs-hero.photo-hero > img.bg { display: none !important; }
  .page-hero.bs-hero.photo-hero::after { display: block; content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(60,74,58,.92) 0%, rgba(60,74,58,.8) 55%, rgba(60,74,58,.35) 100%) !important; }
  .page-hero.bs-hero.photo-hero .wrap { position: relative; z-index: 2; padding-top: 18px !important; padding-bottom: 20px !important; }
  .page-hero.bs-hero.photo-hero .wrap > div:first-child { max-width: none !important; }
  .page-hero.bs-hero.photo-hero .logo-bs { max-width: 54px; margin-bottom: 6px; }
  .page-hero.bs-hero.photo-hero h1 { font-size: 25px !important; margin: 0 0 8px; }
  .page-hero.bs-hero.photo-hero p { font-size: 13.5px !important; line-height: 1.5; margin: 0 0 10px; }
  .page-hero.bs-hero.photo-hero p[style*="var(--head)"] { font-size: 14px !important; letter-spacing: .05em; margin-bottom: 12px; }
  .page-hero.bs-hero.photo-hero .wrap > div > div[style*="flex"] { gap: 8px !important; flex-wrap: nowrap !important; }
  .page-hero.bs-hero.photo-hero .btn { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
  /* menu strony BIO SOUL: wszystkie pozycje widoczne naraz (2 rzędy po 3), bez przewijania */
  .bs-page .subnav .wrap { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; overflow: visible !important; padding-left: 8px; padding-right: 8px; }
  .bs-page .subnav .wrap a { white-space: nowrap; text-align: center; font-size: 11px; letter-spacing: .06em; padding: 9px 2px; }
}
/* karta produktu BIO SOUL: przycisk do strony o BIO SOUL */
.bs-more { display: inline-block; margin-top: 14px; }
@media (max-width: 900px) { .bs-more { display: block; text-align: center; margin: 14px 0 6px; } }
/* telefon: przyciski w banerze BIO SOUL dzielą szerokość po równo */
@media (max-width: 900px) { .page-hero.bs-hero.photo-hero .btn { flex: 1 1 0; white-space: normal; text-align: center; line-height: 1.3; padding: 10px 8px; } }@media (max-width: 900px) {
  /* menu strony BIO SOUL: dwa równe, wyśrodkowane rzędy */
  .bs-page .subnav .wrap { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0 18px !important; padding-top: 4px; padding-bottom: 4px; }
  .bs-page .subnav .wrap a { flex: 0 0 auto; padding: 8px 0; font-size: 11px; }
  .bs-page .subnav .wrap a:nth-child(4) { margin-left: 0; }
  /* baner: przyciski równej szerokości, mieszczą się na ekranie */
  .page-hero.bs-hero.photo-hero .wrap > div > div[style*="flex"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .page-hero.bs-hero.photo-hero .btn { width: 100%; min-width: 0; box-sizing: border-box; white-space: normal; text-align: center; line-height: 1.25; padding: 11px 6px; font-size: 10.5px; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; }
}
/* telefon: odstep miedzy banerem kategorii a paskiem Filtry / sortowanie */
@media (max-width: 900px) { .wrap.shop { padding-top: 16px; } }

/* telefon: przelacznik katalogu, jezyk i ikony przy prawej krawedzi; logo i wyszukiwarka z marginesem od brzegow ekranu */
@media (max-width: 900px) {
  .header .bar { padding-left: 16px; padding-right: 16px; }
  .header .actions { justify-self: end; justify-content: flex-end; }
}
/* strona www na telefonie: Konto jak w aplikacji – bez zakladek nad kafelkami */
body.www-tiles .account > nav { display: none; }

/* komputer: Konto jako kafelki (bez bocznego menu) */
body.www-tiles-desk .account { display: block; max-width: 1040px; }
body.www-tiles-desk .account > nav { display: none; }
body.www-tiles-desk .account .ap-p10 { margin: 16px 0 0; }
.ap-atiles.ap-atiles-desk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 40px; }
.ap-atiles-desk .ap-at { min-height: 86px; padding: 16px 18px; gap: 14px; border-radius: 18px; transition: transform .15s, box-shadow .15s; }
.ap-atiles-desk .ap-at:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(74,90,72,.12); }
.ap-atiles-desk .ap-at > svg { width: 28px; height: 28px; }
.ap-atiles-desk .ap-at b { font-size: 15.5px; } .ap-atiles-desk .ap-at small { font-size: 12.5px; margin-top: 2px; }
.ap-atiles-desk .ap-at.ap-out { font-size: 15px; }
@media (max-width: 1100px) { .ap-atiles.ap-atiles-desk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ap-atiles.ap-atiles-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }/* komputer: równa szachownica kolorów w 4 kolumnach */
.ap-atiles-desk .ap-at { background: var(--sage-light); }
.ap-atiles-desk .ap-at:nth-child(8n+2), .ap-atiles-desk .ap-at:nth-child(8n+4), .ap-atiles-desk .ap-at:nth-child(8n+5), .ap-atiles-desk .ap-at:nth-child(8n+7) { background: #f3ebe0; }
.ap-atiles-desk .ap-at.ap-out { background: #fff; }
/* komputer, podstrony Konta: menu po lewej w formie malych kafelkow */
.account > nav.ap-side-nav { display: block; }
.ap-side-back { display: block; font-size: 13px; color: var(--sage-deep); text-decoration: none; margin: 0 0 10px 4px; }
.ap-atiles.ap-side { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ap-side .ap-at { min-height: 0; padding: 10px 12px; border-radius: 14px; background: var(--sage-light); }
.ap-side .ap-at > svg { width: 20px; height: 20px; }
.ap-side .ap-at b { font-size: 13.5px; } .ap-side .ap-at small { font-size: 11px; }
.ap-side .ap-at.on { background: var(--sage-deep); } .ap-side .ap-at.on b, .ap-side .ap-at.on small, .ap-side .ap-at.on > svg { color: #fff; }
.ap-side .ap-at:hover:not(.on) { background: #e3e9df; }
.ap-side .ap-tbd { top: -6px; right: 8px; }.account > nav.ap-side-nav .ap-at { display: flex !important; flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px !important; margin: 0 !important; border: 0 !important; }
.account > nav.ap-side-nav .ap-at > div { display: block; }
.account > nav.ap-side-nav .ap-at.ap-out { justify-content: center; background: #fff; border: 1px solid var(--line) !important; }