/* =====================================================================================
   Pracownia Psiej Miski — karta produktu (/produkt/). Izolowany arkusz: wszystkie klasy z prefiksem ppm-,
   nie dotyka strony głównej.
   ===================================================================================== */
:root{
  --ppm-bg:#FAF7F1;
  --ppm-surface:#F3EDE3;
  --ppm-surface-2:#EFE7DA;
  --ppm-line:#E4DACB;
  --ppm-burgundy:#5A1F2B;
  --ppm-burgundy-deep:#481722; --ppm-wine:#7B1825; /* burgund marki — ten sam co --burgundy na stronie głównej */
  --ppm-gold:#B99455;
  --ppm-gold-soft:#D9C49C;
  --ppm-gold-ink:#8A6B35;          /* złoto w tekście — czytelne na jasnym tle */
  --ppm-neutral:#8A8178;
  --ppm-ink:#33282A;
  --ppm-ink-soft:#5C5150;
  --ppm-on-burgundy:#F6EFE4;
  --ppm-serif:'Cormorant Garamond', 'Times New Roman', serif;
  --ppm-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ppm-radius:18px;
  --ppm-radius-sm:12px;
  --ppm-wrap:1200px;
  --ppm-gutter:clamp(16px, 4vw, 40px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ppm-bg); color:var(--ppm-ink);
  font-family:var(--ppm-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ppm-gold); outline-offset:3px; border-radius:6px; }
[hidden]{ display:none !important; }
.ppm-wrap{ max-width:var(--ppm-wrap); margin:0 auto; padding:0 var(--ppm-gutter); }
.ppm-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ppm-skip{ position:absolute; left:-9999px; top:8px; background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); padding:8px 14px; border-radius:10px; z-index:50; }
.ppm-skip:focus{ left:12px; }

/* ---------- Nagłówek (minimalny) ---------- */
.ppm-top{ border-bottom:1px solid var(--ppm-line); background:var(--ppm-bg); }
.ppm-top__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:72px; }
.ppm-top__back{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--ppm-ink-soft); text-decoration:none; justify-self:start; padding:8px 0; }
.ppm-top__back:hover{ color:var(--ppm-burgundy); }
.ppm-top__back svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ppm-top__logo img{ width:56px; height:56px; border-radius:50%; object-fit:cover; mix-blend-mode:multiply; }
.ppm-top__cart{ justify-self:end; position:relative; background:none; border:0; padding:10px; cursor:pointer; color:var(--ppm-ink); }
.ppm-top__cart svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.ppm-top__count{ position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); font-size:11px; font-weight:600; line-height:18px; text-align:center; }

/* ---------- Ładowanie / brak produktu ---------- */
.ppm-loading{ padding:120px 0; text-align:center; color:var(--ppm-neutral); }
.ppm-empty{ padding:96px 0 120px; text-align:center; }
.ppm-empty h1{ font-family:var(--ppm-serif); font-weight:500; font-size:40px; margin:0 0 12px; color:var(--ppm-burgundy); }
.ppm-empty p{ color:var(--ppm-ink-soft); margin:0 0 28px; }

/* ---------- Okruszki ---------- */
.ppm-crumbs{ padding-top:22px; font-size:13px; color:var(--ppm-neutral); }
.ppm-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ppm-crumbs li+li::before{ content:"/"; margin-right:8px; color:var(--ppm-line); }
.ppm-crumbs a{ text-decoration:none; }
.ppm-crumbs a:hover{ color:var(--ppm-burgundy); }

/* ---------- 1. Buy box ---------- */
.ppm-buy{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); padding-top:28px; padding-bottom:88px; align-items:start; }

/* Galeria */
.ppm-gallery{ position:sticky; top:24px; min-width:0; }
.ppm-gallery__stage{ position:relative; background:var(--ppm-surface); border-radius:var(--ppm-radius); overflow:hidden; aspect-ratio:1 / 1.08; }
.ppm-gallery__track{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.ppm-gallery__track::-webkit-scrollbar{ display:none; }
.ppm-gallery__slide{ flex:0 0 100%; height:100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center; }
.ppm-gallery__slide img{ width:100%; height:100%; }
.ppm-gallery__slide--contain img{ object-fit:contain; padding:7% 10%; }
.ppm-gallery__slide--cover img{ object-fit:cover; }
.ppm-gallery__ph{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ppm-neutral); font-size:13px; text-align:center; padding:24px; }
.ppm-gallery__ph svg{ width:44px; height:44px; fill:none; stroke:var(--ppm-gold); stroke-width:1.2; }
.ppm-gallery__nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--ppm-line); background:rgba(250,247,241,.88); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.ppm-gallery__nav:hover{ background:var(--ppm-bg); }
.ppm-gallery__nav svg{ width:18px; height:18px; fill:none; stroke:var(--ppm-ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ppm-gallery__nav--prev{ left:14px; } .ppm-gallery__nav--next{ right:14px; }
.ppm-gallery__nav:disabled{ opacity:0; pointer-events:none; }
.ppm-gallery__dots{ display:none; justify-content:center; gap:8px; margin-top:14px; }
.ppm-gallery__dots span{ width:6px; height:6px; border-radius:50%; background:var(--ppm-line); transition:background .2s, width .2s; }
.ppm-gallery__dots span.is-on{ background:var(--ppm-burgundy); width:18px; border-radius:3px; }
.ppm-thumbs{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.ppm-thumb{ width:80px; height:88px; padding:0; border:1px solid transparent; border-radius:var(--ppm-radius-sm); background:var(--ppm-surface); overflow:hidden; cursor:pointer; transition:border-color .2s; }
.ppm-thumb img{ width:100%; height:100%; }
.ppm-thumb--contain img{ object-fit:contain; padding:8px; }
.ppm-thumb--cover img{ object-fit:cover; }
.ppm-thumb[aria-current="true"]{ border-color:var(--ppm-gold); }
.ppm-thumb:hover{ border-color:var(--ppm-gold-soft); }

/* Informacje + zakup */
.ppm-info{ min-width:0; padding-top:8px; }
.ppm-brand{ font-size:12px; letter-spacing:.24em; color:var(--ppm-neutral); margin:0 0 18px; }
.ppm-title{ font-family:var(--ppm-serif); font-weight:500; color:var(--ppm-burgundy); font-size:clamp(40px,4.6vw,60px); line-height:1.02; margin:0; letter-spacing:-.005em; }
.ppm-subtitle{ display:block; font-style:italic; font-weight:500; font-size:clamp(24px,2.4vw,30px); color:var(--ppm-ink-soft); margin-top:8px; line-height:1.2; }
.ppm-rule{ display:flex; align-items:center; gap:12px; margin:24px 0 20px; max-width:340px; }
.ppm-rule::before,.ppm-rule::after{ content:""; flex:1; height:1px; background:var(--ppm-line); }
.ppm-rule svg{ width:13px; height:13px; fill:var(--ppm-gold); flex:none; }
.ppm-audience{ font-size:14px; color:var(--ppm-neutral); margin:0 0 6px; }
.ppm-lead{ color:var(--ppm-ink-soft); margin:0; max-width:46ch; }

.ppm-price{ margin:30px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.ppm-price__value{ font-family:var(--ppm-serif); font-weight:600; font-size:44px; line-height:1; color:var(--ppm-ink); font-variant-numeric:lining-nums; }
/* (2026-10-20) nazwa smaku i cena w burgundzie marki: nazwa nieco większa, wersalikami z delikatnym światłem liter (jak w pokazie
   receptur na stronie głównej); podtytuł bez zmian treści — tylko mała pierwsza litera, by czytał się jako dopowiedzenie nazwy */
.ppm-title{ color:var(--ppm-wine); font-weight:600; text-transform:uppercase; letter-spacing:.035em; font-size:clamp(42px,4.4vw,58px); line-height:1.04; }
.ppm-subtitle{ text-transform:none; letter-spacing:0; }
.ppm-subtitle::first-letter{ text-transform:lowercase; }
.ppm-price__value{ color:var(--ppm-wine); }
.ppm-price__meta{ font-size:13px; color:var(--ppm-neutral); }
.ppm-price__extra{ width:100%; font-size:13px; color:var(--ppm-burgundy); }

.ppm-config{ margin-top:36px; padding-top:30px; border-top:1px solid var(--ppm-line); }
.ppm-config__h{ font-family:var(--ppm-serif); font-weight:500; font-size:28px; line-height:1.15; margin:0; color:var(--ppm-ink); }
.ppm-config__sub{ margin:4px 0 0; color:var(--ppm-neutral); font-size:14px; }
.ppm-group{ border:0; margin:26px 0 0; padding:0; min-width:0; }
.ppm-group__label{ font-size:13px; font-weight:500; color:var(--ppm-ink-soft); margin:0 0 12px; padding:0; }

/* Kafelki gramatury */
.ppm-weights{ display:grid; grid-template-columns:repeat(auto-fit, minmax(104px,1fr)); gap:10px; }
.ppm-opt{ position:relative; display:block; cursor:pointer; }
.ppm-opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.ppm-opt__box{ display:flex; flex-direction:column; gap:2px; height:100%; padding:14px 14px 13px; border:1px solid var(--ppm-line); border-radius:14px; background:transparent; transition:border-color .2s, background .2s; }
.ppm-opt__main{ font-weight:600; font-size:16px; color:var(--ppm-ink); }
.ppm-opt__sub{ font-size:12.5px; color:var(--ppm-neutral); }
.ppm-opt__sub--lapki{ color:var(--ppm-gold-ink); font-weight:500; white-space:nowrap; }
.ppm-lapki-note{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--ppm-neutral); }
.ppm-opt:hover .ppm-opt__box{ border-color:var(--ppm-gold-soft); }
.ppm-opt input:checked + .ppm-opt__box{ border-color:var(--ppm-burgundy); background:rgba(90,31,43,.035); box-shadow:inset 0 -2px 0 var(--ppm-gold); }
.ppm-opt input:checked + .ppm-opt__box .ppm-opt__main{ color:var(--ppm-burgundy); }
.ppm-opt input:focus-visible + .ppm-opt__box{ outline:2px solid var(--ppm-gold); outline-offset:2px; }
.ppm-opt input:disabled + .ppm-opt__box{ opacity:.5; cursor:not-allowed; }
.ppm-opt input:disabled{ cursor:not-allowed; }
.ppm-opt__stock{ font-size:11.5px; color:var(--ppm-burgundy); margin-top:2px; }

/* Personalizacja */
.ppm-persos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ppm-persos .ppm-opt__box{ flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:12px 16px 12px 14px; }
.ppm-perso__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ppm-tag{ font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--ppm-gold-ink); white-space:nowrap; }

/* Miniatury „polaroid” przy opcjach personalizacji */
.ppm-polaroid{ position:relative; flex:none; width:44px; height:52px; margin:2px 4px 2px 0; }
.ppm-polaroid__photo{ position:absolute; inset:0; display:block; padding:3px 3px 10px; background:#FFFDF9; border-radius:2px;
  box-shadow:0 1px 2px rgba(51,40,42,.10), 0 5px 12px -4px rgba(51,40,42,.18); transform:rotate(-4deg); }
.ppm-polaroid--pet .ppm-polaroid__photo{ transform:rotate(3deg); }
.ppm-polaroid__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; background:var(--ppm-surface); display:block; }
.ppm-polaroid__ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--ppm-surface); }
.ppm-polaroid__ph svg{ width:15px; height:19px; fill:none; stroke:var(--ppm-gold); stroke-width:1.2; stroke-linejoin:round; }
.ppm-polaroid__bag{ position:absolute; right:-9px; bottom:-5px; width:20px; height:32px; transform:rotate(-6deg); filter:drop-shadow(0 2px 3px rgba(51,40,42,.22)); }
.ppm-polaroid__bag img{ width:100%; height:100%; object-fit:contain; }
.ppm-perso-note{ display:flex; gap:12px; align-items:flex-start; margin:12px 0 0; padding:14px 16px; border-left:2px solid var(--ppm-gold); background:rgba(185,148,85,.07); border-radius:0 12px 12px 0; font-size:14px; color:var(--ppm-ink-soft); }
.ppm-perso-note svg{ width:18px; height:18px; flex:none; margin-top:2px; fill:none; stroke:var(--ppm-gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Ilość + CTA */
.ppm-buyrow{ display:flex; gap:12px; margin-top:30px; }
.ppm-qty{ display:flex; align-items:center; border:1px solid var(--ppm-line); border-radius:var(--ppm-radius); height:58px; flex:none; }
.ppm-qty button{ width:46px; height:100%; border:0; background:none; cursor:pointer; font-size:20px; color:var(--ppm-ink-soft); border-radius:var(--ppm-radius); }
.ppm-qty button:hover{ color:var(--ppm-burgundy); }
.ppm-qty button:disabled{ opacity:.35; cursor:not-allowed; }
.ppm-qty input{ width:36px; border:0; background:none; text-align:center; font:inherit; font-weight:600; color:var(--ppm-ink); -moz-appearance:textfield; appearance:textfield; }
.ppm-qty input::-webkit-outer-spin-button,.ppm-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ppm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:0 28px; border:0; border-radius:var(--ppm-radius); background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); font-weight:500; font-size:16px; letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:background .2s; }
.ppm-btn:hover{ background:var(--ppm-burgundy-deep); }
.ppm-btn:disabled{ background:#A99C99; cursor:not-allowed; }
.ppm-btn--wide{ flex:1; }
/* „Kup teraz” po kliknięciu: przejście do Shopera trwa — cienka złota linia zamiast dużego spinnera, bez zmiany rozmiaru */
.ppm-btn.is-going{ position:relative; overflow:hidden; cursor:progress; background:var(--ppm-burgundy-deep); }
.ppm-btn.is-going::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:40%; background:linear-gradient(90deg, rgba(201,169,110,0), var(--ppm-gold), rgba(201,169,110,0)); animation:ppmGoing 1.1s ease-in-out infinite; }
@keyframes ppmGoing{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
@media (prefers-reduced-motion: reduce){ .ppm-btn.is-going::after{ animation:none; width:100%; opacity:.7; } }
.ppm-btn--ghost{ background:transparent; color:var(--ppm-burgundy); border:1px solid var(--ppm-line); }
.ppm-btn--ghost:hover{ background:var(--ppm-surface); }
.ppm-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ppm-msg{ min-height:20px; margin:10px 0 0; font-size:13.5px; color:var(--ppm-burgundy); }
/* Most do Shopera: subtelna informacja pod „Kup teraz”, tylko przy wybranym portrecie. */
.ppm-bridge-note{ margin:8px 0 0; font-size:12.5px; line-height:1.4; color:var(--ppm-neutral); }
.ppm-bridge-note[hidden]{ display:none; }
.ppm-trust{ margin:14px 0 0; font-size:13px; color:var(--ppm-neutral); text-align:center; }
.ppm-pay{ display:flex; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.ppm-pay__slot{ width:52px; height:30px; border:1px dashed var(--ppm-line); border-radius:6px; }
.ppm-pay img{ height:24px; width:auto; opacity:.85; }
/* Pasek logotypów płatności i dostawy pod „Kup teraz” (2026-10-20): jeden rząd, równe odstępy, bez ramek, tła i kafelków.
   Logo w oryginalnych kolorach i proporcjach (wysokość z konfiguracji, szerokość automatyczna). Telefon: przewija się sam pasek. */
.ppm-paybar{ margin:16px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ppm-paybar::-webkit-scrollbar{ display:none; }
.ppm-paybar ul{ display:flex; align-items:center; flex-wrap:nowrap; gap:26px; width:max-content; margin:0 auto; padding:4px 2px; list-style:none; }
.ppm-paybar__item{ display:flex; align-items:center; flex:none; height:26px; margin:0; }
.ppm-paybar__item img{ display:block; width:auto; max-width:none; }
@media (max-width:640px){ .ppm-paybar ul{ gap:20px; } }
.ppm-highlights{ list-style:none; margin:30px 0 0; padding:24px 0 0; border-top:1px solid var(--ppm-line); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.ppm-highlights li{ display:flex; gap:12px; align-items:center; margin:0; padding:12px 14px; min-height:62px; border:1px solid var(--ppm-line); border-radius:var(--ppm-radius-sm); background:rgba(255,255,255,.45); }
/* Pozycja z doprecyzowaniem („w tym …”) i kafelek bez pary zajmują cały wiersz — podpis nie łamie się na wąskie wiersze. */
.ppm-highlights li.is-wide{ grid-column:1 / -1; }
.ppm-highlights__ico{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--ppm-surface); box-shadow:inset 0 0 0 1px var(--ppm-gold-soft); display:flex; align-items:center; justify-content:center; }
.ppm-highlights__ico svg{ width:18px; height:18px; fill:none; stroke:var(--ppm-gold-ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ppm-highlights__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ppm-highlights__txt b{ font-size:14px; line-height:1.3; font-weight:500; color:var(--ppm-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.ppm-highlights__txt small{ font-size:12px; line-height:1.35; color:var(--ppm-neutral); text-wrap:balance; }

/* ---------- Sekcje wspólne ---------- */
.ppm-sec{ padding:88px 0; border-top:1px solid var(--ppm-line); }
.ppm-h2{ font-family:var(--ppm-serif); font-weight:500; font-size:clamp(32px,3.4vw,44px); line-height:1.1; margin:0; color:var(--ppm-ink); }
.ppm-sec__lead{ margin:10px 0 0; color:var(--ppm-ink-soft); max-width:56ch; }
.ppm-sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; }

/* ---------- 2. Polecane ---------- */
/* Lekki moduł rekomendacji: nagłówek NAD kafelkami, 4 małe pionowe karty. Wysokość ok. 50% wcześniejszej. */
.ppm-sec.ppm-reco{ border-top:0; padding:18px 0 22px; }
.ppm-reco .ppm-sec__head{ max-width:720px; margin-left:auto; margin-right:auto; justify-content:center; text-align:center; }
.ppm-reco .ppm-sec__lead{ margin-left:auto; margin-right:auto; }
/* Strzałki po bokach, kafelki pośrodku — cały moduł wyśrodkowany w kontenerze. */
.ppm-reco__stage{ display:grid; grid-template-columns:32px minmax(0,720px) 32px; justify-content:center; align-items:start; gap:0 18px; }
.ppm-reco__arrow{ margin-top:41px; }
.ppm-reco .ppm-sec__head{ align-items:flex-end; margin-bottom:12px; gap:16px; }
.ppm-reco .ppm-h2{ font-size:clamp(21px,1.7vw,24px); line-height:1.15; color:var(--ppm-burgundy); }
.ppm-reco .ppm-sec__lead{ margin-top:3px; font-size:13px; }
.ppm-round{ width:44px; height:44px; border-radius:50%; border:1px solid var(--ppm-line); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ppm-round:hover{ border-color:var(--ppm-gold); }
.ppm-round:disabled{ opacity:.35; cursor:default; border-color:var(--ppm-line); }
.ppm-round svg{ width:18px; height:18px; fill:none; stroke:var(--ppm-ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ppm-reco .ppm-round{ width:32px; height:32px; }
.ppm-reco .ppm-round svg{ width:14px; height:14px; }
.ppm-reco__track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * 14px) / 4); gap:14px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px; }
.ppm-reco__track::-webkit-scrollbar{ display:none; }
/* Kafelek: zdjęcie → nazwa → opis → cena → „Dodaj” (wszystko pod zdjęciem). */
.ppm-card{ scroll-snap-align:start; min-width:0; display:flex; flex-direction:column; padding:8px 8px 10px; border:1px solid rgba(185,148,85,.24); border-radius:16px; background:rgba(255,255,255,.32); box-shadow:0 1px 3px rgba(51,40,42,.03); }
.ppm-card__img{ position:relative; width:100%; aspect-ratio:3 / 2; border-radius:10px; overflow:hidden; background:var(--ppm-surface); }
.ppm-card__img img{ width:100%; height:100%; object-fit:cover; }
.ppm-card--food .ppm-card__img{ background:var(--ppm-surface); }
.ppm-card--food .ppm-card__img img{ object-fit:contain; padding:6px; }
.ppm-card__body{ display:flex; flex-direction:column; flex:1; min-width:0; padding:8px 3px 0; }
.ppm-card__name{ font-family:var(--ppm-serif); font-weight:600; font-size:14px; line-height:1.2; margin:0 0 2px; color:var(--ppm-ink); }
.ppm-card__fn{ font-size:11px; line-height:1.35; color:var(--ppm-neutral); margin:0; }
.ppm-card__buy{ display:flex; flex-direction:column; align-items:stretch; gap:7px; margin-top:auto; padding-top:7px; }
.ppm-card .ppm-mini{ justify-content:center; }
/* Best Seller: mała burgundowa kapsułka z cienkim złotym obrysem i gwiazdką (tylko produkty oznaczone w danych). */
.ppm-badge{ position:absolute; top:7px; left:7px; z-index:1; display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 7px; border-radius:999px; background:#5A1F2B; color:var(--ppm-on-burgundy); font-family:var(--ppm-sans); font-size:8.5px; font-weight:600; line-height:1.2; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(217,196,156,.6), 0 2px 6px -3px rgba(51,40,42,.4); pointer-events:none; }
.ppm-badge__star{ color:var(--ppm-gold-soft); font-size:8px; letter-spacing:0; }
.ppm-card__price{ font-weight:600; font-size:13px; margin:0; color:var(--ppm-ink); white-space:nowrap; }
.ppm-mini{ text-decoration:none; display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 10px; border-radius:8px; border:0; background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); font-size:12px; font-weight:500; cursor:pointer; transition:background .2s; flex:none; }
.ppm-mini:hover{ background:var(--ppm-burgundy-deep); }
.ppm-mini:disabled{ background:#A99C99; cursor:default; }
.ppm-mini.is-done{ background:var(--ppm-burgundy-deep); }
.ppm-mini svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* ---------- Nagłówek sekcji z logo (Łap Gang, Ciepła Buda) ---------- */
.ppm-brandhead{ display:flex; align-items:center; gap:22px; margin:0 0 22px; }
.ppm-brandhead__logo{ margin:0; line-height:0; flex:none; }
.ppm-brandhead__logo img{ display:block; width:auto; height:72px; max-width:100%; object-fit:contain; }
.ppm-brandhead__logo.is-text{ line-height:1.2; font-family:var(--ppm-serif); font-weight:500; font-size:clamp(27px,2.3vw,32px); color:var(--ppm-burgundy); }
.ppm-brandhead__text{ min-width:0; }
.ppm-brandhead__tag{ margin:0; font-family:var(--ppm-serif); font-size:19px; line-height:1.3; color:var(--ppm-burgundy); text-wrap:balance; max-width:26ch; }
/* Łap Gang: poziome logo z lewej, podtytuł obok, oddzielony cienką złotą kreską. */
.ppm-brandhead--gang .ppm-brandhead__text{ padding-left:22px; border-left:1px solid rgba(185,148,85,.45); }
/* Ciepła Buda: pionowe logo z lewej, podtytuł i opis obok — w osi kolumny treści. */
.ppm-brandhead--help{ margin-bottom:18px; }
.ppm-brandhead--help .ppm-brandhead__logo img{ height:108px; }
.ppm-brandhead--help .ppm-brandhead__tag{ max-width:none; }
.ppm-brandhead--help .ppm-sec__lead{ margin-top:6px; }

/* ---------- 3. Łap Gang ---------- */
/* Separator marki: cienka złota linia — serce — linia (mniejsze marginesy pionowe) */
.ppm-divider{ display:flex; align-items:center; gap:14px; padding-top:2px; padding-bottom:2px; }
.ppm-divider span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--ppm-gold) 18%, var(--ppm-gold) 82%, transparent); opacity:.75; }
.ppm-divider svg{ width:12px; height:12px; fill:var(--ppm-gold); flex:none; }
.ppm-sec.ppm-gang{ background:transparent; border-top:0; padding-top:36px; padding-bottom:38px; }
/* Treść po lewej, plakat po prawej (pełne proporcje 1122×1402, bez ucinania). */
.ppm-gang__grid{ display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:52px; align-items:center; }
.ppm-paw{ fill:currentColor; }
.ppm-gang__title{ margin:0; font-family:var(--ppm-serif); font-weight:500; font-size:clamp(27px,2.3vw,32px); line-height:1.2; color:var(--ppm-burgundy); text-wrap:balance; }
.ppm-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:step; }
.ppm-steps li{ position:relative; padding:0 22px 0 0; counter-increment:step; }
.ppm-steps li::before{ content:counter(step, decimal-leading-zero); display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--ppm-gold); color:var(--ppm-gold-ink); font-family:var(--ppm-serif); font-size:17px; font-weight:600; font-variant-numeric:lining-nums; margin-bottom:11px; background:var(--ppm-bg); position:relative; z-index:1; }
.ppm-steps li:not(:last-child)::after{ content:""; position:absolute; top:19px; left:38px; right:0; height:1px; background:linear-gradient(90deg, var(--ppm-gold), var(--ppm-gold-soft)); }
.ppm-steps b{ display:block; font-family:var(--ppm-serif); font-weight:600; font-size:20px; line-height:1.15; color:var(--ppm-ink); }
.ppm-steps span{ display:block; font-size:13.5px; line-height:1.45; color:var(--ppm-ink-soft); margin-top:4px; padding-right:4px; }
.ppm-path{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; margin:20px 0 0; font-family:var(--ppm-serif); font-variant-numeric:lining-nums; }
.ppm-path__node{ font-size:18px; font-weight:600; color:var(--ppm-burgundy); white-space:nowrap; }
.ppm-path__node--goal{ padding:3px 13px; border-radius:999px; background:var(--ppm-bg); box-shadow:inset 0 0 0 1px var(--ppm-gold-soft); }
.ppm-path__link{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:56px; height:20px; margin:0 6px; }
.ppm-path__link::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--ppm-gold); }
.ppm-path__link .ppm-paw{ position:relative; width:13px; height:13px; color:var(--ppm-gold); background:var(--ppm-surface); padding:0 3px; box-sizing:content-box; }
.ppm-gang__note{ display:flex; align-items:center; gap:10px; margin:16px 0 0; padding-top:13px; border-top:1px solid var(--ppm-line); font-size:13px; color:var(--ppm-neutral); }
.ppm-gang__note .ppm-paw{ width:15px; height:15px; color:var(--ppm-gold); flex:none; }
.ppm-gang__cta{ margin-top:16px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; }
.ppm-gang__cta .ppm-btn{ min-height:46px; height:46px; padding:0 22px; font-size:15px; border-radius:13px; gap:9px; }
.ppm-gang__cta .ppm-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.ppm-gang__cta .ppm-btn:hover svg{ transform:translateX(3px); }
.ppm-gang__hint{ font-size:13px; color:var(--ppm-neutral); margin:0; }
/* Kontener ma dokładnie proporcje plakatu (1122×1402) — nic nie jest ucinane, logo ŁapGang widać w całości. */
.ppm-gang__visual{ position:relative; margin:0; border-radius:18px; overflow:hidden; aspect-ratio:1122 / 1402; width:100%; background:var(--ppm-surface-2); box-shadow:0 24px 46px -32px rgba(51,40,42,.55); }
.ppm-gang__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Ekipa Łap Gangu */
.ppm-crew{ margin-top:24px; padding-top:20px; border-top:1px solid var(--ppm-line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.6fr); gap:36px; align-items:center; }
.ppm-gang__crew-h{ font-family:var(--ppm-serif); font-weight:500; font-size:24px; line-height:1.15; margin:0; color:var(--ppm-burgundy); }
.ppm-gang__crew-sub{ margin:5px 0 0; font-size:13px; color:var(--ppm-neutral); max-width:28ch; }
.ppm-crew__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px; }
.ppm-crew__item figure{ margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ppm-crew__ring{ position:relative; width:76px; max-width:100%; aspect-ratio:1; border-radius:50%; padding:3px; background:var(--ppm-bg); box-shadow:0 0 0 1px var(--ppm-gold-soft), 0 12px 22px -16px rgba(51,40,42,.5); }
.ppm-crew__ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.ppm-crew__badge{ position:absolute; right:-1px; bottom:2px; width:22px; height:22px; border-radius:50%; background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--ppm-surface); }
.ppm-crew__badge .ppm-paw{ width:12px; height:12px; }
.ppm-crew__item figcaption{ margin-top:8px; display:flex; flex-direction:column; gap:1px; }
.ppm-crew__item figcaption b{ font-family:var(--ppm-serif); font-size:18px; font-weight:600; color:var(--ppm-ink); line-height:1.15; }
.ppm-crew__item figcaption span{ font-size:11.5px; color:var(--ppm-neutral); }

/* ---------- 4. Pomoc psom — „Ciepła Łapa na Zimę” ---------- */
.ppm-sec.ppm-help{ border-top:0; padding-top:36px; padding-bottom:40px; }
/* Dwie kolumny: plakat (pełne proporcje) | treść; wysokości zbliżone. */
.ppm-help__grid{ display:grid; grid-template-columns:336px minmax(0,1fr); gap:52px; align-items:center; }
.ppm-help__visual{ position:relative; margin:0; border-radius:18px; overflow:hidden; aspect-ratio:1122 / 1402; width:100%; background:var(--ppm-surface-2); box-shadow:0 24px 46px -32px rgba(51,40,42,.55); }
.ppm-help__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ppm-help__content{ min-width:0; }
.ppm-help .ppm-help__title{ font-size:clamp(27px,2.3vw,32px); line-height:1.2; color:var(--ppm-burgundy); }
.ppm-help__title span{ display:inline; }
.ppm-help .ppm-sec__lead{ margin-top:0; font-size:14.5px; max-width:none; }
.ppm-campaign{ margin:0; padding:20px 24px; border-radius:18px; background:#FFFDF9; border:1px solid var(--ppm-line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:0 26px; }
.ppm-campaign__info{ min-width:0; }
.ppm-campaign__results{ min-width:0; padding-left:26px; border-left:1px solid var(--ppm-line); }
.ppm-campaign__head{ display:flex; gap:13px; align-items:flex-start; }
.ppm-campaign__icon{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ppm-surface); color:var(--ppm-gold); box-shadow:inset 0 0 0 1px var(--ppm-gold-soft); }
.ppm-campaign__icon .ppm-paw{ width:20px; height:20px; }
.ppm-campaign__kicker{ margin:0; font-size:12px; color:var(--ppm-neutral); }
.ppm-campaign__name{ margin:2px 0 0; font-family:var(--ppm-serif); font-size:24px; font-weight:600; line-height:1.1; color:var(--ppm-burgundy); }
.ppm-campaign__period{ margin:4px 0 0; font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--ppm-gold-ink); }
.ppm-campaign__desc{ margin:11px 0 0; font-size:14px; line-height:1.5; color:var(--ppm-ink-soft); }
.ppm-campaign__note{ margin:7px 0 0; font-family:var(--ppm-serif); font-style:italic; font-size:17px; color:var(--ppm-burgundy); }
/* Wspólne wyniki */
.ppm-stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); gap:10px; }
.ppm-stats li{ display:flex; flex-direction:column; gap:5px; align-items:flex-start; padding:0 2px 0 0; min-width:0; }
.ppm-stats li + li{ padding-left:12px; border-left:1px solid var(--ppm-line); }
.ppm-stats__icon{ flex:none; width:18px; height:18px; margin-top:0; color:var(--ppm-gold); }
.ppm-stats__icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.ppm-stats strong{ display:block; font-family:var(--ppm-serif); font-size:23px; font-weight:600; line-height:1.1; color:var(--ppm-burgundy); font-variant-numeric:lining-nums tabular-nums; overflow-wrap:anywhere; }
.ppm-stats small{ display:block; margin-top:3px; font-size:12.5px; line-height:1.35; color:var(--ppm-ink-soft); hyphens:auto; }
/* Ścieżka aktualnej budy: START → łapki → Buda #N (procent tylko z panelu) */
.ppm-trail-wrap{ margin-top:14px; padding-top:14px; border-top:1px solid var(--ppm-line); }
.ppm-trail__title{ margin:0; text-align:center; font-family:var(--ppm-serif); font-size:18px; font-weight:600; color:var(--ppm-burgundy); }
.ppm-trail{ --p:0; position:relative; list-style:none; margin:11px 0 0; padding:0; display:flex; justify-content:space-between; align-items:flex-start; }
.ppm-trail::before{ content:""; position:absolute; left:15px; right:15px; top:15px; height:1px; background:var(--ppm-gold-soft); }
.ppm-trail.has-progress::after{ content:""; position:absolute; left:15px; top:14px; height:3px; width:calc((100% - 30px) * var(--p) / 100); background:linear-gradient(90deg, var(--ppm-burgundy), var(--ppm-gold)); border-radius:2px; }
.ppm-trail li{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.ppm-trail__dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#FFFDF9; }
.ppm-trail__start .ppm-trail__dot{ background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); }
.ppm-trail__start .ppm-paw{ width:15px; height:15px; }
.ppm-trail__goal .ppm-trail__dot{ box-shadow:inset 0 0 0 1px var(--ppm-gold); }
.ppm-trail__goal svg{ width:17px; height:17px; fill:rgba(90,31,43,.06); stroke:var(--ppm-burgundy); stroke-width:1.4; stroke-linejoin:round; }
.ppm-trail__paw{ margin-top:8px; padding:0 4px; background:#FFFDF9; }
.ppm-trail__paw .ppm-paw{ width:14px; height:14px; color:var(--ppm-gold-soft); display:block; }
.ppm-trail__paw.is-on .ppm-paw{ color:var(--ppm-burgundy); }
.ppm-trail__lbl{ font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--ppm-ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ppm-trail__note{ display:flex; justify-content:center; align-items:center; gap:7px; margin:9px 0 0; font-family:var(--ppm-serif); font-style:italic; font-size:15px; color:var(--ppm-ink-soft); text-align:center; }
.ppm-trail__note .ppm-paw{ width:13px; height:13px; color:var(--ppm-gold); flex:none; }
.ppm-help__cta{ display:inline-block; margin-top:13px; font-size:14px; font-weight:500; color:var(--ppm-burgundy); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 5. Szczegóły: zakładki (desktop) / akordeon (mobile) ---------- */
.ppm-tabs__list{ display:flex; gap:4px 28px; flex-wrap:wrap; border-bottom:1px solid var(--ppm-line); margin-top:28px; }
.ppm-tabs__tab{ background:none; border:0; padding:14px 0; margin-bottom:-1px; border-bottom:2px solid transparent; cursor:pointer; color:var(--ppm-neutral); font-size:15px; font-weight:500; }
.ppm-tabs__tab:hover{ color:var(--ppm-ink); }
.ppm-tabs__tab[aria-selected="true"]{ color:var(--ppm-burgundy); border-bottom-color:var(--ppm-burgundy); }
.ppm-acc__btn{ display:none; }
.ppm-panel{ padding:36px 0 0; max-width:760px; color:var(--ppm-ink-soft); }
.ppm-panel[data-hidden="true"]{ display:none; }
.ppm-panel h3{ font-family:var(--ppm-serif); font-weight:500; font-size:24px; color:var(--ppm-ink); margin:0 0 10px; }
.ppm-panel p{ margin:0 0 14px; }
.ppm-panel ul{ margin:0 0 14px; padding-left:20px; }
.ppm-panel li{ margin-bottom:6px; }
.ppm-ings{ display:flex; gap:22px; flex-wrap:wrap; margin:6px 0 22px; padding:0; list-style:none; }
.ppm-ings li{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:14px; color:var(--ppm-ink); margin:0; }
.ppm-ings img{ width:76px; height:76px; object-fit:contain; }
/* Główne składniki (2026-10-20): ikony z karuzeli karm — okrągły kadr, zdjęcie „cover”, jednakowa wielkość i szerokość
   pozycji, równe odstępy, całość wyśrodkowana; podpis wersalikami jak w karuzeli (ciemniejsze złoto — czytelność na jasnym tle) */
.ppm-ings--icons{ justify-content:center; align-items:flex-start; gap:18px 14px; margin:10px 0 26px; }
.ppm-ings--icons li{ width:104px; gap:10px; text-align:center; }
.ppm-ing__ico{ display:block; width:88px; height:88px; border-radius:50%; overflow:hidden; flex:none; }
.ppm-ings--icons .ppm-ing__ico img{ display:block; width:100%; height:100%; object-fit:cover; }
.ppm-ing__lbl{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; line-height:1.3; color:var(--ppm-gold-ink); }
@media (max-width:640px){
  .ppm-ings--icons{ gap:14px 6px; }
  .ppm-ings--icons li{ width:64px; gap:7px; }
  .ppm-ing__ico{ width:58px; height:58px; }
  .ppm-ing__lbl{ font-size:9.5px; letter-spacing:.03em; }
}
.ppm-pending{ padding:16px 18px; border:1px dashed var(--ppm-line); border-radius:var(--ppm-radius-sm); font-size:14px; color:var(--ppm-neutral); }
.ppm-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.ppm-table th,.ppm-table td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--ppm-line); font-weight:400; }
.ppm-table td{ text-align:right; color:var(--ppm-ink); font-weight:500; }
/* Receptury (2026-10-20): tytuł opisu i tabele dawkowania z nagłówkiem kolumn; szeroka tabela szczeniąt przewija się poziomo na telefonie */
.ppm-recipe-title{ font-family:var(--ppm-serif); font-size:19px; line-height:1.35; color:var(--ppm-ink); }
.ppm-recipe-title strong{ font-weight:500; }
.ppm-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; }
.ppm-table caption{ caption-side:top; text-align:left; font-size:13.5px; color:var(--ppm-neutral); padding:0 0 8px; }
.ppm-table thead th{ font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ppm-neutral); padding-top:0; }
.ppm-table thead th:not(:first-child){ text-align:right; }
.ppm-table--grid td{ padding-left:14px; white-space:nowrap; }
.ppm-table--grid.is-multi{ min-width:520px; font-size:13.5px; }
.ppm-table--grid th{ white-space:nowrap; }
.ppm-table--grid.is-multi th:first-child{ position:sticky; left:0; z-index:1; background:var(--ppm-bg); padding-right:12px; }

/* ---------- Stopka ---------- */
.ppm-foot{ border-top:1px solid var(--ppm-line); padding:28px 0; font-size:13px; color:var(--ppm-neutral); }
.ppm-foot__in{ display:flex; justify-content:space-between; gap:16px; }
.ppm-foot a{ text-decoration:none; } .ppm-foot a:hover{ color:var(--ppm-burgundy); }

/* ---------- Potwierdzenie dodania ---------- */
.ppm-added{ position:fixed; inset:auto 24px 24px auto; z-index:40; width:min(380px, calc(100vw - 32px)); }
.ppm-added__card{ position:relative; background:var(--ppm-bg); border:1px solid var(--ppm-line); border-radius:var(--ppm-radius); padding:22px; box-shadow:0 18px 40px rgba(51,40,42,.12); }
.ppm-added__x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; background:none; font-size:22px; color:var(--ppm-neutral); cursor:pointer; }
.ppm-added__title{ font-family:var(--ppm-serif); font-size:24px; font-weight:600; color:var(--ppm-burgundy); margin:0 0 14px; }
.ppm-added__item{ display:flex; gap:14px; align-items:center; font-size:14px; }
.ppm-added__item img{ width:60px; height:66px; object-fit:contain; background:var(--ppm-surface); border-radius:10px; padding:4px; }
.ppm-added__item b{ display:block; color:var(--ppm-ink); font-weight:600; }
.ppm-added__item span{ color:var(--ppm-neutral); font-size:13px; }
.ppm-added__ship{ font-size:13px; color:var(--ppm-ink-soft); margin:14px 0 0; }
.ppm-added__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.ppm-added__actions .ppm-btn{ min-height:46px; padding:0 12px; font-size:14px; border-radius:14px; }

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .ppm-buy{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; }
  .ppm-persos{ grid-template-columns:1fr; }
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .ppm-top__in{ min-height:60px; }
  .ppm-top__back span{ display:none; }
  .ppm-top__logo img{ width:46px; height:46px; }
  .ppm-crumbs{ display:none; }
  .ppm-buy{ grid-template-columns:1fr; gap:26px; padding-top:16px; padding-bottom:56px; }
  .ppm-gallery{ position:static; margin:0 calc(-1 * var(--ppm-gutter)); }
  .ppm-gallery__stage{ border-radius:0; aspect-ratio:1 / 1.02; }
  .ppm-gallery__nav{ display:none; }
  .ppm-gallery__dots{ display:flex; }
  .ppm-thumbs{ display:none; }
  .ppm-info{ padding-top:0; }
  .ppm-brand{ margin-bottom:12px; }
  .ppm-price__value{ font-size:38px; }
  .ppm-weights{ grid-template-columns:repeat(auto-fit, minmax(88px,1fr)); }
  .ppm-buyrow{ gap:10px; }
  .ppm-qty button{ width:40px; }
  .ppm-btn{ padding:0 18px; }
  .ppm-sec{ padding:60px 0; }
  .ppm-sec__head{ margin-bottom:24px; }
  .ppm-sec.ppm-reco{ padding:44px 0 48px; }
  .ppm-highlights{ grid-template-columns:1fr; gap:8px; }
  .ppm-highlights li{ min-height:0; padding:11px 14px; }
  .ppm-polaroid{ width:40px; height:48px; }

  /* akordeon */
  .ppm-tabs__list{ display:none; }
  .ppm-tabs{ margin-top:20px; border-top:1px solid var(--ppm-line); }
  .ppm-acc__btn{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; background:none; border:0; border-bottom:1px solid var(--ppm-line); cursor:pointer; text-align:left; font-size:16px; font-weight:500; color:var(--ppm-ink); }
  .ppm-acc__btn svg{ width:18px; height:18px; fill:none; stroke:var(--ppm-neutral); stroke-width:1.6; stroke-linecap:round; transition:transform .25s; flex:none; }
  .ppm-acc__btn[aria-expanded="true"] svg{ transform:rotate(45deg); }
  .ppm-panel{ padding:18px 0 22px; border-bottom:1px solid var(--ppm-line); }
  .ppm-panel[data-hidden="true"]{ display:block; }
  .ppm-panel[data-collapsed="true"]{ display:none; }

  .ppm-added{ inset:auto 16px 16px 16px; width:auto; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------- Kompaktowe sekcje dolne: tablet i telefon ---------- */
@media (max-width:1024px){
  .ppm-gang__grid{ grid-template-columns:minmax(0,1fr) 260px; gap:34px; }
  .ppm-help__grid{ grid-template-columns:260px minmax(0,1fr); gap:34px; }
  .ppm-crew{ grid-template-columns:1fr; gap:12px; }
}
@media (max-width:900px){
  .ppm-campaign{ grid-template-columns:1fr; }
  .ppm-campaign__results{ padding-left:0; border-left:0; margin-top:10px; padding-top:10px; border-top:1px solid var(--ppm-line); }
}
@media (max-width:767px){
  .ppm-sec.ppm-reco{ padding:26px 0 28px; }
  .ppm-reco__arrow{ display:none; }
  .ppm-reco__stage{ display:block; }
  .ppm-reco__track{ grid-auto-columns:40%; gap:12px; margin:0 calc(-1 * var(--ppm-gutter)); padding:0 var(--ppm-gutter); scroll-padding:0 var(--ppm-gutter); }
  .ppm-sec.ppm-gang, .ppm-sec.ppm-help{ padding-top:26px; padding-bottom:28px; }
  /* Telefon: logo + podtytuł na samej górze sekcji (wyśrodkowane), pod nimi plakat, potem treść. */
  .ppm-gang__main, .ppm-help__content{ display:contents; }
  .ppm-gang__grid, .ppm-help__grid{ gap:0; }
  .ppm-brandhead{ order:-2; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:18px; }
  .ppm-brandhead--gang .ppm-brandhead__text{ padding-left:0; border-left:0; }
  .ppm-brandhead__tag{ max-width:30ch; margin-left:auto; margin-right:auto; }
  .ppm-gang__visual, .ppm-help__visual{ order:-1; margin-bottom:22px; }
  .ppm-brandhead__logo img{ height:60px; }
  .ppm-brandhead--help{ gap:14px; }
  .ppm-brandhead--help .ppm-brandhead__logo img{ height:96px; }
  .ppm-brandhead__tag{ font-size:17px; }
  .ppm-gang__grid, .ppm-help__grid{ grid-template-columns:1fr; gap:18px; }
  .ppm-gang__visual, .ppm-help__visual{ width:min(286px, 78%); justify-self:center; }
  .ppm-steps{ grid-template-columns:1fr; gap:12px; }
  .ppm-steps li{ padding:0 0 0 42px; min-height:30px; }
  .ppm-steps li::before{ position:absolute; left:0; top:0; margin:0; }
  .ppm-steps li:not(:last-child)::after{ top:30px; bottom:-12px; left:15px; right:auto; width:1px; height:auto; background:var(--ppm-gold-soft); }
  .ppm-path__link{ width:30px; }
  .ppm-crew__list{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 10px; }
  .ppm-stats{ grid-template-columns:1fr; gap:6px; }
  .ppm-stats li{ flex-direction:row; align-items:center; gap:9px; }
  .ppm-stats li + li{ padding-left:0; border-left:0; padding-top:6px; border-top:1px solid var(--ppm-line); }
}

/* ---------- Świąteczna informacja o personalizacji (w miejscu wyboru personalizacji) ----------
   Ecru + subtelne złoto + burgund. Kod tylko do zapamiętania / skopiowania — nie jest stosowany automatycznie. */
.ppm-gift{ position:relative; margin:28px 0 0; padding:24px 22px 18px; border-radius:var(--ppm-radius); text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, #FFFBF3 0%, #F5ECDC 70%, #F0E4CF 100%);
  border:1px solid var(--ppm-gold-soft); box-shadow:0 18px 36px -28px rgba(72,23,34,.45); }
.ppm-gift::before{ content:''; position:absolute; inset:6px; border:1px solid rgba(185,148,85,.32); border-radius:13px; pointer-events:none; }
.ppm-gift__kicker{ margin:0; font-family:var(--ppm-serif); font-style:italic; font-size:17px; line-height:1.3; color:var(--ppm-gold-ink); }
.ppm-gift__title{ margin:4px 0 0; font-family:var(--ppm-serif); font-weight:600; font-size:clamp(27px,2.5vw,32px); line-height:1.08; color:var(--ppm-burgundy); letter-spacing:.005em; }
.ppm-gift__lead{ margin:8px auto 0; max-width:36ch; font-size:14.5px; line-height:1.5; color:var(--ppm-ink-soft); }
.ppm-gift__code{ position:relative; display:flex; align-items:stretch; max-width:360px; margin:18px auto 0; border-radius:12px; overflow:hidden;
  background:linear-gradient(155deg, var(--ppm-burgundy) 0%, var(--ppm-burgundy-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(217,196,156,.55), 0 12px 24px -16px rgba(72,23,34,.7); }
.ppm-gift__code-label{ display:flex; align-items:center; padding:0 14px 0 16px; font-size:12.5px; font-weight:500; color:var(--ppm-gold-soft);
  border-right:1px dashed rgba(217,196,156,.5); }
.ppm-gift__code-value{ flex:1; display:flex; align-items:center; justify-content:center; padding:12px 6px; min-width:0;
  font-family:var(--ppm-serif); font-weight:600; font-size:24px; line-height:1; letter-spacing:.2em; color:var(--ppm-on-burgundy);
  -webkit-user-select:all; user-select:all; font-variant-numeric:lining-nums; }
.ppm-gift__copy{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; padding:0 18px; min-width:104px; justify-content:center;
  font-family:var(--ppm-sans); font-size:13px; font-weight:600; color:var(--ppm-burgundy-deep);
  background:linear-gradient(180deg, #E6D3AE 0%, var(--ppm-gold-soft) 100%); transition:filter .2s ease; }
.ppm-gift__copy:hover{ filter:brightness(1.05); }
.ppm-gift__copy:focus-visible{ outline:2px solid var(--ppm-on-burgundy); outline-offset:-4px; border-radius:8px; }
.ppm-gift__status{ min-height:0; margin:0; font-size:12.5px; color:var(--ppm-gold-ink); }
.ppm-gift__status:empty{ display:none; }
.ppm-gift__status:not(:empty){ margin-top:8px; }
.ppm-gift__note{ margin:12px 0 0; font-family:var(--ppm-serif); font-style:italic; font-size:16px; color:var(--ppm-ink-soft); }
/* Świąteczna dekoracja w prawym górnym narożniku (bombka zawieszona na krawędzi karty). Plik: /images/swieta/bombka.webp —
   pokazywana dopiero po wczytaniu pliku; tekst nagłówka dostaje wtedy odstęp, żeby dekoracja go nie zasłaniała. */
.ppm-gift__deco{ position:absolute; z-index:1; top:-20px; right:22px; width:60px; height:auto; pointer-events:none;
  filter:drop-shadow(0 10px 12px rgba(72,23,34,.22)); }
.ppm-gift__deco[hidden]{ display:none; }
.ppm-gift--deco .ppm-gift__kicker{ padding:0 64px; }
@media (max-width:420px){
  .ppm-gift{ padding:22px 16px 16px; }
  .ppm-gift__code-label{ padding:0 10px 0 12px; }
  .ppm-gift__code-value{ font-size:21px; letter-spacing:.14em; }
  .ppm-gift__copy{ min-width:88px; padding:0 12px; }
  .ppm-gift__deco{ width:46px; right:12px; top:-16px; }
  .ppm-gift--deco .ppm-gift__kicker{ padding:0 44px; }
}
.ppm-details{ scroll-margin-top:12px; }

/* ---------- Akcja psich bud: wspólny licznik (/odpowiedzialnosc/licznik.json) — tylko liczba bud i data ---------- */
.ppm-houses{ display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; justify-content:center; padding:4px 0; }
.ppm-houses__icon{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--ppm-gold); }
.ppm-houses__icon svg{ width:17px; height:17px; fill:rgba(90,31,43,.06); stroke:var(--ppm-burgundy); stroke-width:1.4; stroke-linejoin:round; }
.ppm-houses__num{ margin:8px 0 0; min-height:48px; display:flex; align-items:baseline; justify-content:center; gap:8px; }
.ppm-houses__num strong{ font-family:var(--ppm-serif); font-weight:600; font-size:46px; line-height:1; color:var(--ppm-burgundy); font-variant-numeric:lining-nums; }
.ppm-houses__num span{ font-family:var(--ppm-serif); font-size:22px; font-weight:600; color:var(--ppm-ink); }
.ppm-houses__lbl{ margin:4px 0 0; max-width:30ch; font-size:13.5px; line-height:1.45; color:var(--ppm-ink-soft); }
.ppm-houses__date{ margin:8px 0 0; font-size:12.5px; color:var(--ppm-neutral); }
.ppm-houses .ppm-trail__note{ margin-top:12px; }
.ppm-help__cta--btn{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:11px 22px; border-radius:999px; text-decoration:none;
  background:var(--ppm-burgundy); color:var(--ppm-on-burgundy); font-weight:600; box-shadow:inset 0 0 0 1px rgba(217,196,156,.5); transition:filter .2s ease; }
.ppm-help__cta--btn:hover{ filter:brightness(1.08); }
.ppm-help__cta--btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* =====================================================================================
   „Ciepła Łapa na Zimę” — dopracowanie premium (kierunek filmowy). Tylko wygląd; logika i dane bez zmian.
   ===================================================================================== */
.ppm-sec.ppm-help{ padding-top:64px; padding-bottom:72px;
  background:radial-gradient(60% 80% at 22% 50%, rgba(236,207,171,.28) 0%, rgba(236,207,171,0) 70%), linear-gradient(180deg, var(--ppm-bg) 0%, #F6EFE4 100%); }
.ppm-help__grid{ grid-template-columns:minmax(300px, 400px) minmax(0,1fr); gap:clamp(40px, 5vw, 80px); }
.ppm-help__visual{ border-radius:22px; box-shadow:0 40px 70px -40px rgba(76,19,32,.6), 0 0 0 1px rgba(185,148,85,.25); }
.ppm-help__visual::after{ content:''; position:absolute; inset:10px; border:1px solid rgba(240,222,186,.55); border-radius:15px; pointer-events:none; }
.ppm-brandhead--help .ppm-brandhead__tag{ font-size:clamp(24px, 2.2vw, 30px); line-height:1.2; font-weight:500; }
.ppm-campaign{ padding:28px 0 0; border:0; border-top:1px solid rgba(185,148,85,.35); border-radius:0; background:transparent; gap:0 40px; align-items:center; }
.ppm-campaign__results{ padding-left:40px; border-left:1px solid rgba(185,148,85,.3); }
.ppm-campaign__icon{ width:46px; height:46px; background:#FFFBF4; }
.ppm-campaign__kicker{ font-size:12.5px; letter-spacing:.04em; }
.ppm-campaign__name{ font-size:clamp(28px, 2.4vw, 34px); font-weight:500; margin-top:4px; }
.ppm-campaign__period{ margin-top:6px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.ppm-campaign__desc{ margin-top:16px; font-size:15.5px; line-height:1.7; color:var(--ppm-ink); }
.ppm-campaign__note{ margin-top:12px; font-size:19px; }
/* licznik bud — w łuku, jak na stronie /odpowiedzialnosc/ */
.ppm-houses{ position:relative; padding:26px 18px 20px; }
.ppm-houses::before{ content:''; position:absolute; inset:0; border:1px solid rgba(185,148,85,.4); border-radius:180px 180px 18px 18px; pointer-events:none; }
.ppm-houses__icon{ background:#FFFBF4; }
.ppm-houses__num{ margin-top:10px; min-height:70px; gap:10px; }
.ppm-houses__num strong{ font-size:72px; font-weight:500; background:linear-gradient(180deg, #D8B87C 0%, #B99455 55%, #8A6B35 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ppm-houses__num span{ font-size:22px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.ppm-houses__lbl{ font-size:14px; }
.ppm-help__cta--btn{ margin-top:28px; padding:14px 28px; font-family:var(--ppm-serif); font-size:18px; font-weight:600;
  background:linear-gradient(160deg, #7E2235 0%, var(--ppm-burgundy) 50%, var(--ppm-burgundy-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(217,196,156,.55), 0 16px 30px -18px rgba(72,23,34,.75); }
@media (max-width:1024px){
  .ppm-help__grid{ grid-template-columns:280px minmax(0,1fr); gap:40px; }
  .ppm-campaign{ grid-template-columns:1fr; }
  .ppm-campaign__results{ padding-left:0; border-left:0; margin-top:22px; padding-top:0; border-top:0; }
  .ppm-houses{ max-width:360px; margin:0 auto; }
}
@media (max-width:767px){
  .ppm-sec.ppm-help{ padding-top:40px; padding-bottom:48px; }
  .ppm-help__grid{ grid-template-columns:1fr; gap:0; }
  .ppm-help__visual{ width:min(300px, 80%); justify-self:center; margin-bottom:28px; }
  .ppm-brandhead--help .ppm-brandhead__tag{ font-size:24px; }
  .ppm-campaign{ padding-top:22px; }
  .ppm-campaign__head{ justify-content:center; text-align:left; }
  .ppm-campaign__desc, .ppm-campaign__note{ text-align:center; }
  .ppm-help__cta--btn{ align-self:center; justify-content:center; margin-left:auto; margin-right:auto; }
}

/* ===== Personalizacja: świąteczna ilustracja przy wyborze (2026-10-19) — bombka z polaroidem, wyłącznie wygląd ===== */
/* Świąteczny polaroid w szklanej bombce — wspólny wzór (strona główna i karta karmy). Rozmiar: --xp-size. */
.xp{ --xp-size:300px; --xp-burgundy:#6E1A28; --xp-burgundy-deep:#4A0F1A; --xp-gold:#C9A46A; --xp-gold-soft:#E9D5A8; --xp-ecru:#FBF6EC;
  position:relative; width:var(--xp-size); aspect-ratio:300/370; margin:0; flex:0 0 auto; }
.xp *{ box-sizing:border-box; }
.xp-thread{ position:absolute; left:50%; top:0; width:1px; height:13%; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(201,164,106,0), var(--xp-gold) 60%); }
.xp-cap{ position:absolute; left:50%; top:11.5%; width:15%; height:6.5%; transform:translateX(-50%); border-radius:3px 3px 6px 6px;
  background:linear-gradient(90deg, #8A6A35 0%, #E9D5A8 28%, #B48A4E 55%, #F3E3BF 72%, #8A6A35 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 2px 4px rgba(60,30,20,.25); }
.xp-cap::before{ content:''; position:absolute; left:50%; top:-38%; width:34%; height:52%; transform:translateX(-50%);
  border:1.5px solid var(--xp-gold); border-bottom:0; border-radius:50% 50% 0 0; }
.xp-ball{ position:absolute; left:2%; right:2%; top:16.5%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.55) 0, rgba(255,255,255,.12) 9%, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 70% 82%, rgba(233,213,168,.30) 0, rgba(233,213,168,0) 30%),
    radial-gradient(circle at 50% 55%, rgba(255,248,236,.10) 0, rgba(255,248,236,.04) 55%, rgba(120,70,40,.16) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(233,213,168,.65), inset 0 0 0 3px rgba(255,255,255,.08), inset 0 -18px 40px rgba(110,26,40,.10), inset 0 10px 30px rgba(255,255,255,.18),
    0 18px 40px -18px rgba(60,25,20,.45);
  backdrop-filter:blur(.5px); }
/* drobne światełka w szkle */
.xp-ball::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 20% 64%, rgba(255,226,170,.9) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 80% 40%, rgba(255,226,170,.8) 0 1px, transparent 2.2px),
    radial-gradient(circle at 74% 70%, rgba(255,255,255,.9) 0 .9px, transparent 2px),
    radial-gradient(circle at 28% 40%, rgba(255,255,255,.7) 0 .8px, transparent 1.8px),
    radial-gradient(ellipse at 50% 100%, rgba(255,240,215,.35) 0, transparent 45%); }
.xp-shine{ position:absolute; left:17%; top:24%; width:18%; height:26%; border-radius:50%; transform:rotate(28deg);
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); filter:blur(1px); z-index:3; pointer-events:none; }
.xp-polaroid{ position:absolute; left:50%; top:52%; width:54%; transform:translate(-50%,-50%) rotate(-5deg); z-index:2;
  padding:5.5% 5.5% 0; background:#FFFDF8; border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 6px 14px rgba(50,25,15,.28), 0 1px 3px rgba(50,25,15,.2); }
.xp-photo{ position:relative; aspect-ratio:1; overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #F2DFC0 0, #D9B98C 45%, #9C7350 100%); }
.xp-photo::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 18% 22%, rgba(255,240,205,.8) 0 2px, transparent 5px), radial-gradient(circle at 84% 18%, rgba(255,240,205,.7) 0 2px, transparent 6px),
             radial-gradient(circle at 72% 34%, rgba(255,240,205,.5) 0 1.5px, transparent 4px); }
.xp-photo img{ position:absolute; left:50%; top:7%; width:118%; max-width:none; height:auto; transform:translateX(-50%); display:block; filter:sepia(.12) saturate(.95); }
.xp-photo::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(60,35,20,.12), inset 0 -20px 30px rgba(90,50,25,.25); }
.xp-caption{ display:flex; align-items:center; justify-content:center; gap:.3em; height:calc(var(--xp-size) * .085); 
  font-family:'Alex Brush', 'Brush Script MT', cursive; font-size:calc(var(--xp-size) * .07); line-height:1; color:#5A3A2A; white-space:nowrap; }
.xp-caption svg{ width:.55em; height:.55em; fill:var(--xp-burgundy); flex:0 0 auto; }
.xp-bow{ position:absolute; left:50%; top:8%; width:46%; transform:translateX(-50%); z-index:4; filter:drop-shadow(0 3px 4px rgba(60,15,20,.35)); }
.xp-bow svg{ display:block; width:100%; height:auto; }
/* na jasnym tle (karta karmy): cieplejsze szkło, bez szarego cienia */
.xp--light .xp-ball{ background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0, rgba(255,255,255,.35) 10%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 55%, rgba(255,250,240,.75) 0, rgba(246,234,214,.65) 60%, rgba(214,186,140,.55) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(201,164,106,.75), inset 0 -14px 30px rgba(110,26,40,.08), 0 14px 26px -16px rgba(90,40,30,.35); }
.xp--light .xp-ball::after{ opacity:.9; }
.ppm-perso-art{ display:flex; align-items:center; gap:18px; margin:0 0 14px; padding:10px 16px 10px 8px; border-radius:var(--ppm-radius-sm);
  background:linear-gradient(135deg, rgba(246,239,228,.9), rgba(250,247,241,.4)); border:1px solid rgba(185,148,85,.28); }
.ppm-perso-art .xp{ --xp-size:118px; }
.ppm-perso-art__text{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ppm-ink-soft); }
.ppm-perso-art__title{ display:block; margin-bottom:3px; font-family:var(--ppm-serif); font-weight:600; font-size:19px; line-height:1.2; color:var(--ppm-burgundy); }
@media (max-width:600px){
  .ppm-perso-art{ gap:12px; padding:8px 12px 8px 4px; }
  .ppm-perso-art .xp{ --xp-size:92px; }
  .ppm-perso-art__text{ font-size:12.5px; }
  .ppm-perso-art__title{ font-size:17px; }
}

/* ===== Ramka z kodem: świąteczna bombka z polaroidem w górnym narożniku ===== */
.ppm-gift--xmas{ overflow:visible; }
.ppm-gift__bauble{ position:absolute; z-index:1; top:-26px; right:14px; pointer-events:none; }
.ppm-gift__bauble .xp{ --xp-size:78px; }
.ppm-gift--xmas .ppm-gift__kicker{ padding:0 78px; }
.ppm-gift__detail{ margin:8px auto 0; max-width:38ch; font-size:13px; line-height:1.5; font-weight:500; color:var(--ppm-burgundy); }
@media (max-width:600px){
  .ppm-gift__bauble{ top:-20px; right:6px; }
  .ppm-gift__bauble .xp{ --xp-size:60px; }
  .ppm-gift--xmas .ppm-gift__kicker{ padding:0 56px; }
}
@media (min-width:601px){ .ppm-gift--xmas .ppm-gift__title{ padding:0 64px; } }

/* ===== Galeria: 2. slajd „Wielkość granulki” (2026-10-19) — cała grafika, wyśrodkowana, bez dodatkowego marginesu worka ===== */
.ppm-gallery__slide--contain img[src*="/images/granulki/"]{ padding:2.5%; }
.ppm-thumb--contain img[src*="/images/granulki/"]{ padding:4px; }

/* ===== Polaroid (2026-10-19, v2): świąteczne zdjęcie psa z kampanii — kadr na cały polaroid, naturalne kolory ===== */
.xp-photo{ background:#2a1810; }
.xp-photo::before{ display:none; }
.xp-photo img{ position:absolute; inset:0; left:0; top:0; width:100%; height:100%; transform:none; object-fit:cover; object-position:50% 40%; filter:none; }
.xp-photo::after{ box-shadow:inset 0 0 0 1px rgba(60,35,20,.18), inset 0 -10px 18px rgba(40,20,10,.18); }
.xp-polaroid{ top:57%; }
.xp-photo img{ object-position:55% 30%; }

/* ===== Personalizacja v3 (2026-10-20): dwa kafelki premium, pasek korzyści, świąteczny kod =====
   Wyłącznie wygląd — ukryte pola radio name="ppm-perso" i ich obsługa bez zmian. */
.ppm-perso2__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.ppm-pc{ position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ppm-pc input{ position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.ppm-pc__box{ position:relative; display:flex; align-items:center; gap:14px; height:100%; min-height:108px; padding:14px 34px 14px 14px;
  border-radius:16px; border:1px solid #E5D7BF; background:linear-gradient(160deg,#FFFDF8 0%,#F7F0E3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px -18px rgba(80,45,25,.45);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease; }
.ppm-pc:hover .ppm-pc__box{ border-color:#D3B985; transform:translateY(-1px); }
.ppm-pc input:checked + .ppm-pc__box{ border-color:var(--ppm-burgundy);
  background:linear-gradient(160deg,#FFFBF3 0%,#F6EBD8 100%);
  box-shadow:inset 0 0 0 1px var(--ppm-burgundy), inset 0 0 0 4px rgba(201,164,106,.22), 0 14px 30px -18px rgba(90,31,43,.5); }
.ppm-pc input:focus-visible + .ppm-pc__box{ outline:2px solid var(--ppm-gold); outline-offset:3px; }
.ppm-pc__check{ position:absolute; top:10px; right:10px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  border:1px solid #D3B985; background:#FFFDF8; color:transparent; transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.ppm-pc__check svg{ width:14px; height:14px; transform:scale(.4); opacity:0; transition:transform .25s ease, opacity .2s ease; }
.ppm-pc input:checked + .ppm-pc__box .ppm-pc__check{ background:var(--ppm-burgundy); border-color:var(--ppm-burgundy); color:#FFF8EE; }
.ppm-pc input:checked + .ppm-pc__box .ppm-pc__check svg{ transform:scale(1); opacity:1; }
.ppm-pc__art{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:58px; height:70px; }
.ppm-pc__bag{ width:50px; height:auto; filter:drop-shadow(0 6px 8px rgba(110,80,40,.18)); }
.ppm-pc__art--photo{ width:70px; }
.ppm-pc__polaroid{ display:block; width:64px; padding:4px 4px 13px; background:#FFFEFB; border-radius:2px; transform:rotate(-6deg);
  box-shadow:0 6px 14px -6px rgba(60,30,20,.45), 0 1px 2px rgba(60,30,20,.2); transition:transform .3s ease; }
.ppm-pc__polaroid img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:55% 30%; }
.ppm-pc input:checked + .ppm-pc__box .ppm-pc__polaroid{ transform:rotate(-3deg) scale(1.03); }
.ppm-pc__heart{ position:absolute; right:-2px; top:-4px; width:16px; height:16px; color:var(--ppm-burgundy); }
.ppm-pc__heart svg{ width:100%; height:100%; fill:currentColor; filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)); }
.ppm-pc__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ppm-pc__title{ font-family:var(--ppm-serif); font-weight:600; font-size:18px; line-height:1.12; color:var(--ppm-ink); }
.ppm-pc--portrait .ppm-pc__title{ color:var(--ppm-burgundy); }
.ppm-pc__sub{ font-size:12.5px; line-height:1.3; color:var(--ppm-ink-soft); }
.ppm-pc--portrait .ppm-pc__sub{ font-family:var(--ppm-serif); font-weight:600; font-size:19px; color:var(--ppm-burgundy); }

.ppm-perks{ display:flex; justify-content:space-between; gap:6px; margin:12px 0 0; padding:0; list-style:none; }
.ppm-perks li{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; padding:2px 4px;
  font-family:var(--ppm-serif); font-size:15px; line-height:1.15; color:var(--ppm-ink); text-align:left; }
.ppm-perks li + li{ border-left:1px solid #E5D7BF; }
.ppm-perks svg{ flex:0 0 auto; width:17px; height:17px; fill:var(--ppm-burgundy); color:var(--ppm-burgundy); }

.ppm-promo{ position:relative; display:flex; align-items:center; gap:14px; margin:16px 0 0; padding:12px 16px 12px 12px; border-radius:14px; overflow:hidden;
  background:linear-gradient(115deg,#FBF4E8 0%,#F5EAD8 100%); border:1px solid rgba(201,164,106,.6);
  box-shadow:inset 0 0 0 3px rgba(255,251,243,.7), inset 0 0 0 4px rgba(201,164,106,.25), 0 10px 24px -20px rgba(80,45,25,.5); }
.ppm-promo__gift{ flex:0 0 auto; width:46px; height:46px; filter:drop-shadow(0 4px 6px rgba(110,60,30,.2)); }
.ppm-promo__body{ min-width:0; flex:1 1 auto; }
.ppm-promo__title{ margin:0; font-family:var(--ppm-serif); font-weight:600; font-size:18px; line-height:1.15; color:var(--ppm-burgundy); }
.ppm-promo__row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:7px; }
.ppm-promo__label{ font-size:13px; color:var(--ppm-ink-soft); }
.ppm-promo__code{ padding:5px 10px; border:1px dashed rgba(138,107,53,.7); border-radius:8px; background:rgba(255,253,248,.75);
  font-family:var(--ppm-serif); font-weight:700; font-size:16px; letter-spacing:.12em; color:var(--ppm-burgundy); }
.ppm-promo__copy{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:9px;
  font-family:var(--ppm-sans); font-size:13px; font-weight:600; color:#3E2A16;
  background:linear-gradient(180deg,#EED9AE 0%,#D9B97F 100%); border:1px solid #C9A46A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px -6px rgba(120,80,30,.6); transition:filter .2s ease, transform .2s ease; }
.ppm-promo__copy svg{ width:15px; height:15px; }
.ppm-promo__copy:hover{ filter:brightness(1.04); }
.ppm-promo__copy:active{ transform:translateY(1px); }
.ppm-promo__copy:focus-visible{ outline:2px solid var(--ppm-burgundy); outline-offset:2px; }
.ppm-promo__copy.is-done{ background:linear-gradient(180deg,#F5E6C6 0%,#E3C995 100%); color:var(--ppm-burgundy); }
.ppm-promo__note{ margin:6px 0 0; font-size:12px; line-height:1.4; color:var(--ppm-ink-soft); }
.ppm-promo__status{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .ppm-pc__box, .ppm-pc__check, .ppm-pc__check svg, .ppm-pc__polaroid{ transition:none; } }

/* wąskie ekrany i wąska kolumna: kafelki dalej w jednym rzędzie, treść pod ilustracją */
@media (max-width:600px){
  .ppm-perso2__grid{ gap:10px; }
  .ppm-pc__box{ flex-direction:column; justify-content:flex-start; gap:8px; min-height:0; padding:14px 10px 13px; text-align:center; }
  .ppm-pc__check{ top:8px; right:8px; width:20px; height:20px; }
  .ppm-pc__art{ height:66px; }
  .ppm-pc__text{ align-items:center; }
  .ppm-pc__title{ font-size:16px; }
  .ppm-pc--portrait .ppm-pc__sub{ font-size:17px; }
  .ppm-perks li{ flex-direction:column; gap:4px; font-size:12.5px; text-align:center; }
  .ppm-promo{ gap:10px; padding:11px 12px 11px 10px; }
  .ppm-promo__gift{ width:38px; height:38px; align-self:flex-start; margin-top:2px; }
  .ppm-promo__title{ font-size:16px; }
  .ppm-promo__code{ font-size:15px; letter-spacing:.1em; }
}
@media (max-width:380px){
  .ppm-promo__row{ gap:6px; }
  .ppm-promo__code{ padding:5px 7px; font-size:14px; letter-spacing:.06em; }
  .ppm-promo__copy{ padding:6px 10px; }
}

/* ===== Personalizacja v3.1 (2026-10-20): kafelki z dostarczonymi polaroidami ===== */
.ppm-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ppm-pc__box{ flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; min-height:0; padding:10px 10px 12px; text-align:center; }
.ppm-pc__pol{ position:relative; display:block; width:100%; max-width:210px; aspect-ratio:1; margin:0 auto; transition:transform .3s ease; }
.ppm-pc__pol-frame{ display:block; width:100%; height:100%; filter:drop-shadow(0 8px 12px rgba(70,40,25,.18)); }
/* obszar zdjęcia w ramce „Bez personalizacji” (zmierzony na dostarczonej grafice: obrót −4,1°) */
.ppm-pc__pol-photo{ position:absolute; left:18.54%; top:14.64%; width:63.4%; height:65.85%; transform:rotate(-4.11deg); }
.ppm-pc__pol-photo img{ display:block; width:100%; height:100%; object-fit:contain; padding:2% 5%; box-sizing:border-box; }
.ppm-pc input:checked + .ppm-pc__box .ppm-pc__pol{ transform:scale(1.03); }
.ppm-pc__text{ align-items:center; }
.ppm-pc__sub, .ppm-pc--portrait .ppm-pc__sub{ font-family:var(--ppm-serif); font-weight:600; font-size:18px; color:var(--ppm-burgundy); }
.ppm-pc:not(.ppm-pc--portrait) .ppm-pc__sub{ font-family:var(--ppm-sans); font-weight:500; font-size:13px; color:var(--ppm-ink-soft); padding-top:3px; }
@media (max-width:600px){
  .ppm-pc__box{ padding:8px 6px 10px; gap:2px; }
  .ppm-pc__pol{ max-width:none; }
  .ppm-pc__sub, .ppm-pc--portrait .ppm-pc__sub{ font-size:17px; }
}
@media (prefers-reduced-motion: reduce){ .ppm-pc__pol{ transition:none; } }

/* ===== Zasady personalizacji (2026-10-24): delikatny moduł pod promocją, tylko przy „Portret pupila” =====
   Bez ramek i zdjęć: ecru, złoty ornament, burgund jako akcent. Ukryty = brak w układzie (atrybut hidden). */
.ppm-rules{ display:grid; grid-template-rows:0fr; opacity:0; margin-top:0;
  transition:grid-template-rows .34s ease, opacity .28s ease, margin-top .34s ease; }
.ppm-rules.is-open{ grid-template-rows:1fr; opacity:1; margin-top:20px; }
.ppm-rules[hidden]{ display:none; }
.ppm-rules__in{ min-height:0; overflow:hidden; padding:0 2px; text-align:center; }
.ppm-rules__orn{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 10px; max-width:260px; color:var(--ppm-gold); }
.ppm-rules__orn span{ flex:1 1 0; height:1px; background:linear-gradient(90deg, transparent, var(--ppm-gold-soft)); }
.ppm-rules__orn span:last-child{ background:linear-gradient(90deg, var(--ppm-gold-soft), transparent); }
.ppm-rules__orn svg{ width:11px; height:11px; fill:currentColor; flex:0 0 auto; }
.ppm-rules__title{ margin:0; font-family:var(--ppm-serif); font-weight:500; font-style:italic; font-size:21px; line-height:1.2; color:var(--ppm-burgundy); }
.ppm-rules__text{ margin:6px auto 0; max-width:54ch; font-size:13.5px; line-height:1.6; color:var(--ppm-ink-soft); }
.ppm-rules__note{ margin:6px auto 0; max-width:54ch; font-size:12px; line-height:1.55; color:var(--ppm-neutral); }
.ppm-rules__check{ position:relative; margin:14px auto 0; max-width:54ch; text-align:left; }
.ppm-rules__check input{ position:absolute; opacity:0; width:22px; height:22px; margin:0; left:0; top:1px; }
.ppm-rules__check label{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:13px; line-height:1.55; color:var(--ppm-ink); }
.ppm-rules__box{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--ppm-gold); background:#FFFDF9; color:transparent; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.ppm-rules__box svg{ width:14px; height:14px; }
.ppm-rules__check input:checked + label .ppm-rules__box{ background:var(--ppm-wine); border-color:var(--ppm-wine); color:#F6EFE4; }
.ppm-rules__check input:focus-visible + label .ppm-rules__box{ outline:2px solid var(--ppm-wine); outline-offset:2px; }
.ppm-rules__label a, .ppm-rules__links a{ color:var(--ppm-wine); text-decoration:underline; text-decoration-color:rgba(123,24,37,.35); text-underline-offset:3px; }
.ppm-rules__label a:hover, .ppm-rules__links a:hover{ text-decoration-color:currentColor; }
.ppm-rules__links{ margin:6px auto 0; max-width:54ch; padding-left:31px; text-align:left; font-size:12px; }
.ppm-rules__links a{ color:var(--ppm-neutral); }
.ppm-rules__err{ margin:6px auto 0; max-width:54ch; padding-left:31px; text-align:left; font-size:12.5px; line-height:1.45; color:#A3261E; }
.ppm-rules__err:empty{ display:none; }
.ppm-rules.is-invalid .ppm-rules__box{ border-color:#A3261E; box-shadow:0 0 0 3px rgba(163,38,30,.12); }
@media (max-width:600px){
  .ppm-rules.is-open{ margin-top:16px; }
  .ppm-rules__title{ font-size:19px; }
  .ppm-rules__text{ font-size:13px; }
  .ppm-rules__check label{ font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){ .ppm-rules, .ppm-rules__box{ transition:none; } }