/* ==========================================================================
   PARADISO — arkusz stylow sklepu
   Konwencja pod przeniesienie 1:1 na WordPress + Elementor Pro:
   - kolory i fonty trzymane w zmiennych o NAZWACH ELEMENTORA (--e-global-*),
     wiec po ustawieniu Site Settings -> Global Colors / Global Fonts
     ten sam CSS dziala bez zmian,
   - kazdy blok ma prefiks .pd-* i jest samowystarczalny => wklejalny
     jako widzet HTML albo odwzorowywalny kontenerem Elementora,
   - ikony: Font Awesome 5 (te same nazwy klas co w bibliotece Elementora).
   ========================================================================== */

:root {
  /* Sklep ma JEDEN, jasny motyw. Bez tej deklaracji Chrome/Android z wlaczonym
     "auto dark mode" sam odwraca kolory strony i nagłowek robi sie brudno-brazowy. */
  color-scheme: light dark;

  /* --- Global Colors (Elementor: Ustawienia witryny -> Kolory globalne) --- */
  --e-global-color-primary: #241C1A;    /* atrament (tekst, pasek gorny, stopka) */
  --e-global-color-secondary: #2F6E66;  /* retro teal - potwierdzenia, badge */
  --e-global-color-text: #6B5C57;       /* tekst pomocniczy */
  --e-global-color-accent: #C9524F;     /* KORAL z logo klienta (CTA) */
  /* --- kolory dodatkowe (Elementor: kolory niestandardowe) --- */
  --e-global-color-cream: #FBF4F0;      /* tlo strony - jak tlo logo na FB */
  --e-global-color-paper: #FFFFFF;      /* karty */
  --e-global-color-line: #EDE0DA;       /* linie */
  --e-global-color-oxblood: #9A3B3B;    /* promocje / outlet */
  --e-global-color-neon: #E8827E;       /* jasny koral - poswiata neonu */
  --e-global-color-neonred: #E8332A;    /* czerwien neonu z wybranego logo ("neonowa rurka") */
  --e-global-color-neonink: #A81E17;    /* obrys rurki neonowej */

  /* --- Global Fonts (Elementor: Czcionki globalne) --- */
  --e-global-typography-primary-font-family: 'Instrument Serif';
  --e-global-typography-secondary-font-family: 'Instrument Serif';
  --e-global-typography-text-font-family: 'Space Grotesk';
  --e-global-typography-accent-font-family: 'Space Grotesk';

  --pd-serif: var(--e-global-typography-primary-font-family), 'Times New Roman', Georgia, serif;
  /* font logo - odwzorowanie skryptowego napisu z Facebooka klienta */
  --pd-script: 'Pacifico', 'Brush Script MT', cursive;
  --pd-sans: var(--e-global-typography-text-font-family), 'Segoe UI', Helvetica, Arial, sans-serif;

  --pd-wrap: 1280px;
  --pd-radius: 4px;
  --pd-shadow: 0 1px 2px rgba(27, 21, 18, .05), 0 8px 24px -16px rgba(27, 21, 18, .3);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; position: relative;   /* punkt odniesienia dla szyldow w marginesach */
  /* Tlo: sam kolor kremu, bez tekstury (decyzja klienta 19.09.2026 — tekstury papieru,
     sciany itd. wstrzymane; warianty nadal do podgladu przez ?tlo=nazwa).
     W Elementorze: Site Settings → Background. */
  background-color: var(--e-global-color-cream);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--e-global-color-primary);
  font-family: var(--pd-sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .1px;
}

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(--pd-serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -.2px;
}

.pd-wrap { width: 100%; max-width: var(--pd-wrap); margin: 0 auto; padding: 0 24px; }
.pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* eyebrow + naglowek sekcji ------------------------------------------------ */
.pd-eyebrow {
  font-family: var(--pd-sans);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--e-global-color-accent);
  font-weight: 600;
  margin: 0 0 8px;
}
.pd-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.pd-shead h2 { font-size: 38px; }
.pd-shead p { margin: 6px 0 0; color: var(--e-global-color-text); max-width: 60ch; font-size: 14px; }
.pd-shead .pd-more { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; border-bottom: 1px solid var(--e-global-color-accent); padding-bottom: 3px; white-space: nowrap; }
.pd-shead .pd-more:hover { color: var(--e-global-color-accent); }

/* przyciski ---------------------------------------------------------------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border: 1px solid transparent; border-radius: var(--pd-radius);
  font-family: var(--pd-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.pd-btn--primary { background: var(--e-global-color-accent); color: #fff; }
.pd-btn--primary:hover { background: #a83f3d; }
.pd-btn--dark { background: var(--e-global-color-primary); color: var(--e-global-color-cream); }
.pd-btn--dark:hover { background: #2d231d; }
.pd-btn--ghost { background: transparent; color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); }
.pd-btn--ghost:hover { background: var(--e-global-color-primary); color: var(--e-global-color-cream); }
.pd-btn--light { background: transparent; color: var(--e-global-color-cream); border-color: rgba(247, 239, 227, .45); }
.pd-btn--light:hover { background: rgba(247, 239, 227, .12); }
.pd-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   NAGLOWEK  (Elementor: szablon Header)
   ========================================================================== */
.pd-topbar {
  background: var(--e-global-color-primary);
  color: rgba(247, 239, 227, .78);
  font-size: 12px;
  letter-spacing: .3px;
}
.pd-topbar .pd-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.pd-topbar ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.pd-topbar i { color: var(--e-global-color-neon); margin-right: 7px; }
.pd-topbar a:hover { color: #fff; }


/* przelacznik jezyka w pasku gornym */
.pd-lang { display: flex; align-items: center; gap: 6px; }
.pd-lang button {
  background: transparent; border: 0; cursor: pointer; padding: 2px 4px;
  color: rgba(251, 244, 240, .6); font-size: 12px; font-weight: 600; letter-spacing: .6px;
}
.pd-lang button:hover { color: #fff; }
.pd-lang button.is-on { color: var(--e-global-color-neon); }
.pd-lang span { color: rgba(251, 244, 240, .28); font-size: 11px; }

.pd-header { background: var(--e-global-color-paper); border-bottom: 1px solid var(--e-global-color-line); position: sticky; top: 0; z-index: 60; }
/* bialy pognieciony papier w pasku z logo (propozycja 19.09.2026) — ta sama faktura co tlo
   strony, tylko jasniejsza i slabsza; pole wyszukiwania zostaje gladko biale dla czytelnosci */
.pd-header { background: #FAF9F8 url('../img/tlo-flow-bialy.jpg') center / cover no-repeat; }
.pd-header .pd-search input { background: #fff; }
.pd-header .pd-wrap { display: flex; align-items: center; gap: 26px; min-height: 88px; }

/* ==========================================================================
   LOGO — odwzorowanie znaku klienta z Facebooka:
   skryptowy, „neonowy" napis Paradiso w koralowej czerwieni, podkreslony
   recznym pociagnieciem, pod spodem pasek rysunkowych ikon asortymentu.
   ========================================================================== */
.pd-logo { display: inline-flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.pd-logo__name {
  position: relative; display: block;
  font-family: var(--pd-script); font-size: 33px; line-height: 1;
  color: var(--e-global-color-neonred);
  -webkit-text-stroke: 1px var(--e-global-color-neonink);
  text-shadow: 0 0 1px #FF6B5E, 0 0 10px rgba(232, 51, 42, .28);
  letter-spacing: .5px; padding: 0 5px 2px;
}
/* rurka neonu pod napisem — element rozpoznawczy wybranego znaku */
.pd-logo__swash { display: block; width: 100%; height: 9px; margin-top: -3px; overflow: visible; }
.pd-logo__swash path { fill: none; stroke: var(--e-global-color-neonred); stroke-width: 3.4; stroke-linecap: round; }

/* --- papier w tle (wybor 19.09.2026: flow-mocny) --------------------------------------
   Lezy na przypietej warstwie body::before zamiast background-attachment: fixed — iPhone
   i czesc Androidow ignoruja „fixed” i rozciagaja obraz na cala dlugosc strony.
   Podglad innego papieru: ?tlo=nazwa (ustawia zmienna --pd-tlo). */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--pd-tlo, url('../img/tlo-flow-mocny.jpg')) center / cover no-repeat; }

/* --- szyldy w stylu Route 66 — rozklad liczy assets/js/szyldy.js (samodzielny modul) --
   Warstwa za trescia (z-index -1): tablice wystaja zza kart, niczego nie zaslaniaja. */
.pd-szyldy { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.pd-szyld { position: absolute; display: block; height: auto;
  filter: drop-shadow(2px 5px 5px rgba(60, 38, 30, .30)) drop-shadow(0 1px 1px rgba(60, 38, 30, .25)); }

/* pas szyldow nad stopka — tylko tam, gdzie nie ma marginesow (tablet, telefon, maly laptop);
   na komputerze szyldy schodza w marginesach az do stopki */
@media (min-width: 1360px) { .pd-szyldy-pas { display: none; } }
.pd-szyldy-pas { padding: 34px 0 44px; overflow: hidden; pointer-events: none; }
.pd-szyldy-pas__in { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 26px; }
.pd-szyldy-pas__s { display: block; height: auto; flex: 0 0 auto; width: calc(var(--w) * .82);
  transform: rotate(var(--r));
  filter: drop-shadow(2px 5px 5px rgba(60, 38, 30, .30)) drop-shadow(0 1px 1px rgba(60, 38, 30, .25)); }
/* ile tablic miesci sie w pasie: komputer 7, laptop 5, tablet 4, telefon 3 */
.pd-szyldy-pas__s:nth-child(n+8) { display: none; }
@media (max-width: 1359px) { .pd-szyldy-pas__s:nth-child(n+6) { display: none; } }
@media (max-width: 1023px) { .pd-szyldy-pas__s:nth-child(n+5) { display: none; }
  .pd-szyldy-pas__s { width: calc(var(--w) * .7); } .pd-szyldy-pas__in { gap: 18px; } }
@media (max-width: 767px) { .pd-szyldy-pas { padding: 6px 0 30px; }
  .pd-szyldy-pas__s:nth-child(n+4) { display: none; }
  .pd-szyldy-pas__s { width: calc((100vw - 28px - 2 * 12px) / 3); }
  .pd-szyldy-pas__in { gap: 12px; } }

/* --- diament w logo (CFG.logoDiament) ---------------------------------------
   Ten sam rysunek co w kaflu „Unikaty”. Wszystkie warianty korzystaja z tej samej
   ikony, rozni je tylko miejsce i rozmiar. */
.pd-logo { position: relative; }
.pd-logo__rzad { display: flex; align-items: center; gap: 9px; }
.pd-logo__srodek { display: flex; flex-direction: column; align-items: center; }
.pd-logo__podkr { position: relative; display: block; width: 100%; }
.pd-logo__gem { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
.pd-logo__gem * { fill: none; stroke: var(--e-global-color-neonred); stroke-width: 5;
  stroke-linejoin: round; stroke-linecap: round; }
/* obok napisu */
.pd-logo__gem--lewo, .pd-logo__gem--prawo { width: 26px; height: 26px; }
/* nad napisem */
.pd-logo__gem--nad { width: 19px; height: 19px; margin: 0 auto 2px; }
/* zamiast kropki nad „i” */
.pd-logo__i { position: relative; }
.pd-logo__gem--kropka { position: absolute; left: 50%; bottom: 100%;
  width: 15px; height: 15px; transform: translate(-50%, 58%); }
.pd-logo__gem--kropka * { stroke-width: 6.4; }
/* wpiety w przerwe w rurce neonu */
.pd-logo__gem--podkreslenie { position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; transform: translate(-50%, -52%); }
/* na prawym koncu rurki */
.pd-logo__gem--koniec { position: absolute; right: -6px; top: 50%;
  width: 17px; height: 17px; transform: translate(50%, -46%); }
/* duzy znak wodny za napisem */
.pd-logo__gem--tlo { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px;
  transform: translate(-50%, -54%); opacity: .16; z-index: 0; }
.pd-logo__gem--tlo * { stroke-width: 3.4; }
.pd-logo--gem-tlo .pd-logo__rzad { position: relative; z-index: 1; }

.pd-search { flex: 1 1 auto; position: relative; max-width: 560px; }
.pd-search input {
  width: 100%; padding: 12px 46px 12px 16px; border: 2px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); background: var(--e-global-color-cream); font-size: 14px; outline: none;
}
.pd-search input:focus { border-color: var(--e-global-color-accent); background: #fff; }
.pd-search button {
  position: absolute; right: 5px; top: 5px; width: 38px; height: 38px;
  border: 0; border-radius: 3px; background: var(--e-global-color-accent); color: #fff; cursor: pointer;
}
.pd-search__hint { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow); z-index: 30; display: none; max-height: 340px; overflow: auto; }
.pd-search__hint.is-open { display: block; }
.pd-search__hint a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--e-global-color-line); font-size: 13px; }
.pd-search__hint a:last-child { border-bottom: 0; }
.pd-search__hint a:hover { background: var(--e-global-color-cream); }
.pd-search__hint img { width: 38px; height: 38px; object-fit: contain; }

.pd-hicons { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pd-hicon { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--pd-radius); font-size: 17px; color: var(--e-global-color-primary); }
.pd-hicon:hover { background: var(--e-global-color-cream); }
.pd-hicon__b {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--e-global-color-accent); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; display: none; place-items: center; line-height: 18px; text-align: center;
}
.pd-hicon__b.is-on { display: grid; }
.pd-burger { display: none; }

/* pasek kategorii — biale tlo jak menu witryny sprzedawcy na Allegro (17.09.2026):
   ciemny tekst, cienka linia u dolu, aktywna i wskazana zakladka podkreslona koralem */
.pd-catnav { background: var(--e-global-color-paper); border-top: 1px solid var(--e-global-color-line);
  border-bottom: 1px solid var(--e-global-color-line); }
.pd-catnav .pd-wrap { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pd-catnav .pd-wrap::-webkit-scrollbar { display: none; }
.pd-catnav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px;
  color: var(--e-global-color-primary); font-size: 13px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase;
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.pd-catnav__in { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pd-catnav__in::-webkit-scrollbar { display: none; }
.pd-catnav a i { color: var(--e-global-color-text); }
.pd-catnav a:hover { color: var(--e-global-color-accent); border-bottom-color: var(--e-global-color-accent); }
.pd-catnav a:hover i { color: var(--e-global-color-accent); }
.pd-catnav a.is-active { color: var(--e-global-color-accent); border-bottom-color: var(--e-global-color-accent); }
.pd-catnav a.is-active i { color: var(--e-global-color-accent); }
/* „Wszystkie produkty” bez czerwonego tla (klient 17.09.2026) — zwykla zakladka */
.pd-catnav a.pd-catnav__all { background: transparent; }
.pd-catnav a.pd-catnav__gift, .pd-catnav a.pd-catnav__gift i { color: var(--e-global-color-accent); }
/* --- pasek jako zakladki doklejone do banera (strona glowna) ---------------
   Wzor: witryna sprzedawcy na Allegro — pod banerem biala listwa tej samej
   szerokosci, mniejszy tekst bez pogrubienia (ikony zostaja — klient 17.09), aktywna zakladka
   z kolorowym napisem i podkresleniem. Baner i listwa to jeden blok. */
body.pd-front .pd-sfhead { background: transparent; border-bottom: 0; }
body.pd-front .pd-sfhead .pd-wrap { padding-top: 0; padding-bottom: 0; }
/* A: baner przylega do naglowka bez odstepu (jak na Allegro) */
/* BANER (wybor klienta 20.09.2026: grafika 1 — perfumy, bizuteria i kosmetyki na kremie).
   Zdjecie lezy w prawej czesci w CALOSCI (bez przycinania): ma wysokosc baneru, a szerokosc
   z proporcji --baner-proporcja; po lewej gasnie maska, wiec nie widac jego krawedzi.
   Tlo baneru = kolor tla zdjecia (#F6EDE4), dlatego przejscia nie widac.
   Logo jest odsuniete od prawej o szerokosc przedmiotow na zdjeciu (ok. 40 % jego szerokosci),
   zeby stalo na pustym polu, a nie na flakonie. */
body.pd-front .pd-sfart {
  --baner-h: 252px;              /* wysokosc baneru — od niej liczy sie szerokosc zdjecia */
  --baner-proporcja: 2.721;      /* 1524 x 560 px */
  --baner-przedmioty: .4;        /* jaka czesc zdjecia po prawej zajmuja przedmioty */
  position: relative; min-height: var(--baner-h);
  background: #F6EDE4; border: 1px solid var(--e-global-color-line); border-bottom: 0;
  border-radius: var(--pd-radius) var(--pd-radius) 0 0;
  box-shadow: 0 8px 22px -14px rgba(36, 28, 26, .35);
  padding: 26px; overflow: hidden; }
body.pd-front .pd-sfhead .pd-wrap { padding-top: 14px; }
body.pd-front .pd-sfart::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1524 / 560;
  background: url('../img/baner.jpg') right center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
body.pd-front .pd-sfart > * { position: relative; z-index: 1; }
body.pd-front .pd-sfart__logo { padding: 0;
  margin-right: calc(var(--baner-h) * var(--baner-proporcja) * var(--baner-przedmioty)); }
body.pd-front .pd-logo--baner .pd-logo__name { font-size: 54px; }
body.pd-front .pd-logo--baner .pd-logo__swash { height: 12px; margin-top: -6px; }
body.pd-front .pd-logo--baner .pd-logo__gem--podkreslenie { width: 30px; height: 30px; }
/* hasla ciasniej — mieszcza sie w jednej-dwoch liniach obok zdjecia */
body.pd-front .pd-sfhasla { gap: 12px 22px; }
body.pd-front .pd-sfhasla li { font-size: 13.5px; gap: 10px; line-height: 1.3; }
body.pd-front .pd-sfhasla svg { flex: 0 0 30px; width: 30px; height: 30px; }
/* bez logo (ponizej 1080 px) zdjecie zabiera za duzo miejsca haslom — zostaje sam krem */
@media (max-width: 1080px) {
  body.pd-front .pd-sfart { min-height: 0; }
  body.pd-front .pd-sfart::after { display: none; }
}
#pd-catnav-slot { margin-bottom: 0; }
/* B: mniejszy odstep miedzy banerem a trescia (jak na Allegro) */
body.pd-front .pd-sf { padding-top: 16px; }
.pd-catnav--baner { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-top: 0; box-shadow: 0 8px 22px -14px rgba(36, 28, 26, .35); border-radius: 0 0 var(--pd-radius) var(--pd-radius);
  box-shadow: 0 2px 6px rgba(36, 28, 26, .05); padding: 0 18px; }
/* 20.09.2026: zakladek jest dziewiec (doszly karty podarunkowe, wrocily ciekawostki),
   a pasek ma tylko szerokosc baneru — ciasniejsze odstepy trzymaja calosc w jednym
   rzedzie, bez chowania ostatnich pozycji pod przewijaniem.
   Podwojna klasa w selektorze jest potrzebna: nizej (.pd-catnav a) siedzi pozniejsza
   regula o tej samej wadze, ktora inaczej wygrywa i przywraca szersze odstepy. */
.pd-catnav.pd-catnav--baner a { padding: 11px 9px 9px; font-size: 12px; font-weight: 400;
  letter-spacing: .4px; border-bottom-width: 2px; }
.pd-catnav--baner a { gap: 6px; }
.pd-catnav--baner a i { font-size: 11px; }


/* ==========================================================================
   HERO — jasny, „papierowy" retro: kremowe tlo, delikatna koralowa poswiata
   i cienkie promienie ledwie widoczne (klient prosil o proste, jasne strony).
   ========================================================================== */
.pd-hero { position: relative; overflow: hidden; background: var(--e-global-color-cream); color: var(--e-global-color-primary); border-bottom: 1px solid var(--e-global-color-line); }
.pd-hero::before {
  content: ''; position: absolute; left: 50%; top: -46%; width: 1180px; height: 1180px; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(201, 82, 79, .045) 0deg 5deg, transparent 5deg 10deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 66%);
  pointer-events: none;
}
.pd-hero::after {
  content: ''; position: absolute; right: -140px; top: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 130, 126, .18), transparent 68%); pointer-events: none;
}
.pd-hero .pd-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding-top: 74px; padding-bottom: 74px; }
.pd-hero__pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; margin-bottom: 24px;
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: 999px;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--e-global-color-text);
  box-shadow: 0 1px 2px rgba(36, 28, 26, .04);
}
.pd-hero__pill i { color: var(--e-global-color-accent); }
.pd-hero h1 { font-size: 64px; line-height: 1.03; }
.pd-hero h1 em { font-family: var(--pd-script); font-style: normal; color: var(--e-global-color-accent); font-size: 1.06em; padding-right: 6px; }
.pd-hero p { margin: 22px 0 30px; font-size: 16px; color: var(--e-global-color-text); max-width: 52ch; }
.pd-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pd-hero__stats { display: flex; gap: 40px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--e-global-color-line); }
.pd-hero__stats b { display: block; font-family: var(--pd-serif); font-size: 32px; color: var(--e-global-color-accent); }
.pd-hero__stats span { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--e-global-color-text); }

.pd-hero__card {
  position: relative; background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); padding: 30px 30px 28px;
  box-shadow: 0 20px 50px -34px rgba(36, 28, 26, .5);
}
.pd-hero__card::before {
  content: ''; position: absolute; inset: 7px; border: 1px solid var(--e-global-color-line); border-radius: 2px; pointer-events: none;
}
.pd-hero__card > * { position: relative; }
.pd-hero__card h3 { font-size: 25px; margin-bottom: 18px; }
.pd-hero__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pd-hero__card li { display: flex; gap: 11px; font-size: 14px; color: var(--e-global-color-text); }
.pd-hero__card li b { color: var(--e-global-color-primary); }
.pd-hero__card i { color: var(--e-global-color-accent); margin-top: 3px; }

/* pasek zaufania ----------------------------------------------------------- */
.pd-trust { background: var(--e-global-color-paper); border-bottom: 1px solid var(--e-global-color-line); }
.pd-trust .pd-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 24px; padding-bottom: 24px; }
.pd-trust__i { display: flex; gap: 13px; align-items: center; }
.pd-trust__i .ic { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(200, 121, 43, .1); color: var(--e-global-color-accent); }
.pd-trust__i b { display: block; font-size: 13.5px; }
.pd-trust__i span { font-size: 12px; color: var(--e-global-color-text); }

/* sekcje ------------------------------------------------------------------- */
.pd-sec { padding: 64px 0; }
.pd-sec--paper { background: var(--e-global-color-paper); border-top: 1px solid var(--e-global-color-line); border-bottom: 1px solid var(--e-global-color-line); }

/* kafle kategorii ---------------------------------------------------------- */
.pd-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pd-cat {
  position: relative; display: block; padding: 26px 20px 22px; background: var(--e-global-color-paper);
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pd-cat:hover { transform: translateY(-3px); box-shadow: var(--pd-shadow); border-color: var(--pd-accent, var(--e-global-color-accent)); }
.pd-cat .ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; margin-bottom: 16px; color: #fff; background: var(--pd-accent, var(--e-global-color-accent)); }
.pd-cat h3 { font-size: 21px; margin-bottom: 6px; }
.pd-cat p { margin: 0 0 14px; font-size: 12.5px; color: var(--e-global-color-text); }
.pd-cat__n { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pd-accent, var(--e-global-color-accent)); font-weight: 600; }


/* ==========================================================================
   ZAKLADKI + KARUZELA (strona glowna) — odpowiednik przewijanych sekcji,
   ktore klient zna z platnych sklepow sprzedawcow na Allegro.
   W Elementorze: pasek zakladek jako widzet HTML, tor jako Loop Grid
   z ustawionym `overflow-x: auto` na kontenerze.
   ========================================================================== */
.pd-tabsbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pd-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-tab {
  padding: 9px 16px; border: 1px solid var(--e-global-color-line); border-radius: 999px;
  background: var(--e-global-color-paper); color: var(--e-global-color-text);
  font-size: 12.5px; font-weight: 600; letter-spacing: .4px; cursor: pointer; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s;
}
.pd-tab:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-tab.is-active { background: var(--e-global-color-accent); border-color: var(--e-global-color-accent); color: #fff; }
.pd-carousel__nav { display: flex; gap: 6px; }
.pd-carousel__nav button {
  width: 38px; height: 38px; border: 1px solid var(--e-global-color-line); border-radius: 50%;
  background: var(--e-global-color-paper); cursor: pointer; color: var(--e-global-color-primary);
}
.pd-carousel__nav button:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
  gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 8px; scrollbar-width: thin;
}
.pd-carousel > * { scroll-snap-align: start; }
.pd-carousel::-webkit-scrollbar { height: 8px; }
.pd-carousel::-webkit-scrollbar-thumb { background: var(--e-global-color-line); border-radius: 4px; }
@media (max-width: 720px) {
  .pd-carousel { grid-auto-columns: minmax(168px, 1fr); gap: 12px; }
  .pd-carousel__nav { display: none; }
}

/* pasek informujacy o opoznionej wysylce / urlopie */
.pd-delaybar {
  background: var(--e-global-color-oxblood); color: #fff; text-align: center;
  font-size: 13px; padding: 9px 18px; letter-spacing: .2px;
}
.pd-delaybar i { margin-right: 7px; }

/* ==========================================================================
   KARTA PRODUKTU  (Elementor: Loop Item)
   ========================================================================== */
.pd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pd-grid--3 { grid-template-columns: repeat(3, 1fr); }

.pd-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.pd-card:hover { box-shadow: var(--pd-shadow); transform: translateY(-2px); border-color: #d8c6ae; }
/* min-height:0 + flex:0 0 auto sa KONIECZNE: karta jest flexem w kolumnie,
   a domyslne min-height:auto pozwalalo zdjeciu o duzej naturalnej wysokosci
   rozepchac kafel i rozjechac siatke (widoczne dopiero po zaladowaniu zdjec) */
.pd-card__media {
  position: relative; display: block; flex: 0 0 auto; min-height: 0;
  aspect-ratio: 1 / 1; background: #fff; padding: 14px; overflow: hidden;
  border-bottom: 1px solid var(--e-global-color-line);
}
.pd-card__media img { width: 100%; height: 100%; object-fit: contain; }
.pd-card__badges { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.pd-badge {
  display: inline-block; padding: 4px 9px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: #fff; background: var(--e-global-color-primary); border-radius: 2px;
}
.pd-badge--best { background: var(--e-global-color-accent); }
.pd-badge--set { background: var(--e-global-color-secondary); }
.pd-badge--sale { background: var(--e-global-color-oxblood); }
.pd-badge--steel { background: #46606B; }
.pd-card__fav {
  position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; z-index: 2;
  border: 1px solid var(--e-global-color-line); border-radius: 50%; background: rgba(255, 252, 247, .94);
  color: var(--e-global-color-text); cursor: pointer; display: grid; place-items: center; font-size: 13px;
}
.pd-card__fav:hover, .pd-card__fav.is-on { color: var(--e-global-color-oxblood); border-color: var(--e-global-color-oxblood); }
.pd-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pd-card__brand { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--e-global-color-accent); font-weight: 600; margin-bottom: 6px; }
.pd-card__title { font-family: var(--pd-serif); font-size: 18px; line-height: 1.22; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; }
.pd-card__title a:hover { color: var(--e-global-color-accent); }
.pd-card__meta { font-size: 11.5px; color: var(--e-global-color-text); margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.pd-card__meta span { white-space: nowrap; }
.pd-rate { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--e-global-color-text); }
.pd-rate i { color: var(--e-global-color-neon); font-size: 10.5px; }
.pd-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pd-price { font-family: var(--pd-sans); font-size: 20px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.pd-price small { display: block; font-size: 11px; font-weight: 400; color: var(--e-global-color-text); letter-spacing: 0; margin-top: 2px; }
.pd-price del { font-size: 13px; font-weight: 400; color: var(--e-global-color-text); margin-right: 6px; }
.pd-card__add {
  width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: var(--pd-radius);
  background: var(--e-global-color-accent); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center;
}
.pd-card__add:hover { background: var(--e-global-color-primary); }

/* banner ------------------------------------------------------------------- */
.pd-banner {
  position: relative; overflow: hidden; border-radius: var(--pd-radius);
  background: linear-gradient(120deg, #241C1A 0%, #332623 58%, #6B2E2C 140%);
  color: var(--e-global-color-cream); padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.pd-banner::after {
  content: ''; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 130, 126, .30), transparent 68%);
}
.pd-banner h3 { font-size: 34px; margin-bottom: 8px; position: relative; }
.pd-banner p { margin: 0; color: rgba(247, 239, 227, .76); max-width: 58ch; position: relative; font-size: 14px; }
.pd-banner .pd-btn { position: relative; }

/* ==========================================================================
   SKLEP (archiwum): filtry + toolbar + paginacja
   ========================================================================== */
.pd-page { padding: 34px 0 64px; }
.pd-crumbs { font-size: 12px; color: var(--e-global-color-text); padding: 14px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pd-crumbs a:hover { color: var(--e-global-color-accent); }
.pd-crumbs span.sep { opacity: .5; }

.pd-phead { padding: 28px 0 26px; border-bottom: 1px solid var(--e-global-color-line); margin-bottom: 26px; }
.pd-phead h1 { font-size: 44px; }
.pd-phead p { margin: 10px 0 0; color: var(--e-global-color-text); max-width: 78ch; font-size: 14.5px; }

.pd-shop { display: flex; gap: 28px; align-items: flex-start; }
.pd-side { flex: 0 0 262px; position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 4px; }
.pd-side::-webkit-scrollbar { width: 6px; }
.pd-side::-webkit-scrollbar-thumb { background: var(--e-global-color-line); border-radius: 3px; }
.pd-fbox { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 18px; margin-bottom: 14px; }
.pd-fbox h4 { font-family: var(--pd-sans); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--e-global-color-text); margin: 0 0 12px; font-weight: 700; }
.pd-fbox label { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.pd-fbox label:hover { color: var(--e-global-color-accent); }
.pd-fbox input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--e-global-color-accent); }
.pd-fbox .n { margin-left: auto; font-size: 11.5px; color: var(--e-global-color-text); }
.pd-fbox__range { display: flex; align-items: center; gap: 8px; }
.pd-fbox__range input { width: 100%; padding: 9px 10px; border: 1px solid var(--e-global-color-line); border-radius: 3px; background: #fff; font-size: 13px; }
.pd-fclear { width: 100%; margin-top: 4px; }

.pd-filters-toggle { display: none; width: 100%; margin-bottom: 14px; }
.pd-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--e-global-color-line); flex-wrap: wrap; }
.pd-toolbar__n { font-size: 13.5px; color: var(--e-global-color-text); }
.pd-toolbar__n b { color: var(--e-global-color-primary); }
.pd-toolbar select { padding: 9px 12px; border: 1px solid var(--e-global-color-line); border-radius: 3px; background: var(--e-global-color-paper); font-size: 13px; }
.pd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pd-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: 999px; font-size: 12px; cursor: pointer; }
.pd-chip i { font-size: 10px; color: var(--e-global-color-text); }
.pd-chip:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }

.pd-pager { display: flex; gap: 6px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
/* przyciski w demie, linki <a>/<span> w WordPressie (stronicowanie po stronie serwera) */
.pd-pager button, .pd-pager a, .pd-pager span {
  min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--e-global-color-line);
  background: var(--e-global-color-paper); border-radius: 3px; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none;
}
.pd-pager button:hover, .pd-pager a:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-pager button.is-active, .pd-pager span.is-active { background: var(--e-global-color-primary); color: var(--e-global-color-cream); border-color: var(--e-global-color-primary); cursor: default; }
.pd-pager button[disabled], .pd-pager span.is-off { opacity: .4; cursor: not-allowed; }
.pd-empty { padding: 60px 20px; text-align: center; color: var(--e-global-color-text); }
.pd-empty i { font-size: 34px; color: var(--e-global-color-line); display: block; margin-bottom: 14px; }

/* ==========================================================================
   STRONA PRODUKTU
   ========================================================================== */
.pd-prod { display: grid; grid-template-columns: 52% 1fr; gap: 44px; align-items: start; }
.pd-gal__main { position: relative; background: #fff; border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; padding: 26px; cursor: zoom-in; }
/* width:auto => zdjecie nigdy nie jest rozciagane ponad swoj naturalny rozmiar
   (miniatury z listingu Allegro bywaja male; pelne galerie wypelniaja kadr) */
.pd-gal__main img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .25s; }
.pd-gal__main.is-zoom img { transform: scale(1.9); cursor: zoom-out; }
.pd-gal__badges { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pd-gal__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pd-gal__thumbs button { padding: 6px; background: #fff; border: 1px solid var(--e-global-color-line); border-radius: 3px; cursor: pointer; aspect-ratio: 1 / 1; }
.pd-gal__thumbs button.is-active { border-color: var(--e-global-color-accent); }
.pd-gal__thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* galeria z jednym zdjeciem (oferta bez pobranej pelnej galerii) — kadr sie
   dopasowuje, zeby male zdjecie nie plywalo w pustym, duzym polu */
.pd-gal--single .pd-gal__main { max-width: 430px; aspect-ratio: 4 / 5; margin: 0 auto; }

.pd-buy__brand { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--e-global-color-accent); font-weight: 600; }
.pd-buy h1 { font-size: 38px; margin: 10px 0 12px; }
.pd-buy__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--e-global-color-text); margin-bottom: 18px; }
.pd-buy__box { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 22px; margin-bottom: 18px; }
.pd-buy__price { font-size: 38px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.pd-buy__price del { font-size: 20px; font-weight: 400; color: var(--e-global-color-text); margin-right: 10px; }
.pd-buy__unit { font-size: 12.5px; color: var(--e-global-color-text); margin-top: 6px; }
.pd-buy__omni { font-size: 11.5px; color: var(--e-global-color-text); margin-top: 4px; font-style: italic; }
.pd-buy__qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--e-global-color-line); border-radius: 3px; overflow: hidden; background: #fff; }
.pd-buy__qty button { width: 42px; height: 46px; border: 0; background: transparent; font-size: 16px; cursor: pointer; }
.pd-buy__qty input { width: 46px; height: 46px; border: 0; text-align: center; font-weight: 600; }
.pd-buy__actions { display: flex; gap: 10px; margin-top: 18px; }
.pd-buy__actions .pd-btn { flex: 1 1 auto; }
.pd-buy__fav { width: 50px; flex: 0 0 50px; border: 1px solid var(--e-global-color-line); background: #fff; border-radius: var(--pd-radius); cursor: pointer; color: var(--e-global-color-text); }
.pd-buy__fav.is-on { color: var(--e-global-color-oxblood); border-color: var(--e-global-color-oxblood); }
.pd-buy__ship { display: grid; gap: 10px; margin-top: 16px; font-size: 13px; }
.pd-buy__ship div { display: flex; gap: 10px; align-items: flex-start; }
.pd-buy__ship i { color: var(--e-global-color-secondary); margin-top: 3px; width: 16px; text-align: center; }
.pd-guarantee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.pd-guarantee div { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--e-global-color-line); border-radius: 3px; background: var(--e-global-color-paper); font-size: 12.5px; }
.pd-guarantee i { color: var(--e-global-color-accent); }

.pd-acc { margin-top: 46px; border-top: 1px solid var(--e-global-color-line); }
.pd-acc__i { border-bottom: 1px solid var(--e-global-color-line); }
.pd-acc__h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; background: transparent; border: 0; cursor: pointer; font-family: var(--pd-serif); font-size: 23px; text-align: left; }
.pd-acc__h i { font-size: 14px; color: var(--e-global-color-accent); transition: transform .2s; }
.pd-acc__i.is-open .pd-acc__h i { transform: rotate(180deg); }
.pd-acc__c { display: none; padding: 0 4px 26px; max-width: 90ch; font-size: 14.5px; color: var(--e-global-color-text); }
.pd-acc__i.is-open .pd-acc__c { display: block; }
.pd-acc__c p { margin: 0 0 12px; }
.pd-ptable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-ptable td { padding: 10px 12px; border-bottom: 1px solid var(--e-global-color-line); }
.pd-ptable td:first-child { width: 42%; color: var(--e-global-color-text); }
.pd-ptable tr:nth-child(odd) { background: var(--e-global-color-paper); }

/* ==========================================================================
   KOSZYK (drawer) + KASA
   ========================================================================== */
.pd-ovl { position: fixed; inset: 0; background: rgba(27, 21, 18, .5); opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 90; }
.pd-ovl.is-open { opacity: 1; pointer-events: auto; }
.pd-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; z-index: 95;
  background: var(--e-global-color-cream); transform: translateX(102%); transition: transform .26s ease;
  display: flex; flex-direction: column;
}
.pd-drawer.is-open { transform: none; }
.pd-drawer__h { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--e-global-color-line); }
.pd-drawer__h h3 { font-size: 24px; }
.pd-drawer__h button { background: transparent; border: 0; font-size: 18px; cursor: pointer; }
.pd-drawer__b { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; }
.pd-drawer__f { border-top: 1px solid var(--e-global-color-line); padding: 18px 22px; background: var(--e-global-color-paper); }
.pd-drawer__f .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.pd-drawer__f .row.total { font-size: 20px; font-weight: 700; }
.pd-li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--e-global-color-line); }
.pd-li img { width: 66px; height: 66px; object-fit: contain; background: #fff; border: 1px solid var(--e-global-color-line); border-radius: 3px; padding: 4px; }
.pd-li__t { font-size: 13.5px; line-height: 1.35; margin-bottom: 4px; }
.pd-li__m { font-size: 12px; color: var(--e-global-color-text); }
.pd-li__x { margin-left: auto; background: transparent; border: 0; color: var(--e-global-color-text); cursor: pointer; font-size: 13px; }
.pd-li__x:hover { color: var(--e-global-color-oxblood); }
.pd-li__q { display: inline-flex; align-items: center; border: 1px solid var(--e-global-color-line); border-radius: 3px; margin-top: 6px; background: #fff; }
.pd-li__q button { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.pd-li__q span { min-width: 26px; text-align: center; font-size: 13px; }

.pd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 120;
  background: var(--e-global-color-primary); color: var(--e-global-color-cream);
  padding: 13px 22px; border-radius: var(--pd-radius); font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--pd-shadow);
}
.pd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pd-toast i { color: var(--e-global-color-neon); margin-right: 8px; }

/* kasa */
.pd-steps { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.pd-step { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--e-global-color-line); border-radius: 999px; font-size: 12.5px; color: var(--e-global-color-text); background: var(--e-global-color-paper); }
.pd-step b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--e-global-color-line); color: var(--e-global-color-primary); font-size: 11.5px; }
.pd-step.is-active { border-color: var(--e-global-color-accent); color: var(--e-global-color-primary); }
.pd-step.is-active b { background: var(--e-global-color-accent); color: #fff; }
.pd-step.is-done b { background: var(--e-global-color-secondary); color: #fff; }

.pd-co { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.pd-form { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 26px; }
.pd-form h2 { font-size: 27px; margin-bottom: 20px; }
.pd-f { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-f label { display: block; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--e-global-color-text); margin-bottom: 6px; font-weight: 600; }
.pd-f .full { grid-column: 1 / -1; }
.pd-f input, .pd-f textarea, .pd-f select { width: 100%; padding: 12px 13px; border: 1px solid var(--e-global-color-line); border-radius: 3px; background: #fff; font-size: 14px; outline: none; }
.pd-f input:focus, .pd-f textarea:focus, .pd-f select:focus { border-color: var(--e-global-color-accent); }
.pd-f .err { border-color: var(--e-global-color-oxblood); background: #fdf5f4; }
.pd-f small.msg { color: var(--e-global-color-oxblood); font-size: 11.5px; display: none; }
.pd-f .err + small.msg { display: block; }
.pd-opt { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border: 1px solid var(--e-global-color-line); border-radius: 3px; background: #fff; cursor: pointer; margin-bottom: 10px; }
.pd-opt.is-sel { border-color: var(--e-global-color-accent); box-shadow: inset 0 0 0 1px var(--e-global-color-accent); }
.pd-opt input { margin-top: 4px; accent-color: var(--e-global-color-accent); }
.pd-opt b { display: block; font-size: 14px; }
.pd-opt span { font-size: 12.5px; color: var(--e-global-color-text); }
.pd-opt .p { margin-left: auto; font-weight: 700; white-space: nowrap; }
.pd-sum { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 22px; position: sticky; top: 104px; }
.pd-sum h3 { font-size: 22px; margin-bottom: 16px; }
.pd-sum .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 9px; }
.pd-sum .row.total { border-top: 1px solid var(--e-global-color-line); margin-top: 14px; padding-top: 14px; font-size: 21px; font-weight: 700; }
.pd-promo { display: flex; gap: 8px; margin: 14px 0; }
.pd-promo input { flex: 1 1 auto; padding: 11px 12px; border: 1px solid var(--e-global-color-line); border-radius: 3px; font-size: 13px; }
.pd-ok { text-align: center; padding: 56px 20px; }
.pd-ok .ic { width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 85, 78, .12); color: var(--e-global-color-secondary); font-size: 30px; }
.pd-ok h1 { font-size: 42px; margin-bottom: 12px; }
.pd-ok__no { display: inline-block; margin: 18px 0 26px; padding: 12px 22px; border: 1px dashed var(--e-global-color-accent); border-radius: 3px; font-size: 18px; font-weight: 700; letter-spacing: 1px; }


/* zacheta do zalozenia konta z rabatem na pierwsze zakupy */
.pd-welcome {
  position: fixed; right: 18px; bottom: 18px; z-index: 125; width: 330px; max-width: calc(100vw - 36px);
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-top: 3px solid var(--e-global-color-accent); border-radius: var(--pd-radius);
  padding: 20px 20px 18px; box-shadow: 0 20px 50px -22px rgba(36, 28, 26, .45);
  display: grid; gap: 10px;
}
.pd-welcome b { font-family: var(--pd-serif); font-size: 20px; font-weight: 400; line-height: 1.2; }
.pd-welcome span { font-size: 13px; color: var(--e-global-color-text); line-height: 1.5; }
.pd-welcome span b { font-family: var(--pd-sans); font-size: 13px; font-weight: 700; color: var(--e-global-color-accent); }
.pd-welcome .pd-btn { width: 100%; }
.pd-welcome__x {
  position: absolute; right: 8px; top: 8px; width: 30px; height: 30px;
  border: 0; background: transparent; color: var(--e-global-color-text); cursor: pointer; font-size: 13px;
}
.pd-welcome__x:hover { color: var(--e-global-color-primary); }
@media (max-width: 480px) { .pd-welcome { right: 12px; left: 12px; bottom: 12px; width: auto; } }
/* Gdy na ekranie jest baner zgod, okienko z rabatem podnosi sie nad niego;
   na waskich ekranach czeka na decyzje, bo oba naraz zaslonilyby sklep. */
.pd-has-cmp .pd-welcome { bottom: 200px; }
@media (max-width: 760px) { .pd-has-cmp .pd-welcome { display: none; } }

/* dokumenty (regulamin itp.) ---------------------------------------------- */
.pd-doc { max-width: 84ch; }
.pd-doc h2 { font-size: 28px; margin: 34px 0 12px; }
.pd-doc h3 { font-size: 20px; margin: 22px 0 8px; }
.pd-doc p, .pd-doc li { font-size: 14.5px; color: var(--e-global-color-text); }
.pd-doc ul, .pd-doc ol { padding-left: 20px; }
.pd-note { background: rgba(200, 121, 43, .09); border-left: 3px solid var(--e-global-color-accent); padding: 16px 18px; border-radius: 3px; margin: 22px 0; font-size: 13.5px; }
.pd-note b { color: var(--e-global-color-primary); }

/* ==========================================================================
   STOPKA
   ========================================================================== */
.pd-footer { background: var(--e-global-color-primary); color: rgba(247, 239, 227, .72); padding: 56px 0 0; margin-top: 64px; }
.pd-footer__g { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; padding-bottom: 40px; }
.pd-footer h4 { font-family: var(--pd-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--e-global-color-neon); margin: 0 0 16px; font-weight: 700; }
.pd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.pd-footer a:hover { color: #fff; }
.pd-footer p { font-size: 13.5px; margin: 0 0 16px; max-width: 42ch; }
.pd-footer .pd-logo__name { color: var(--e-global-color-cream); }
.pd-social { display: flex; gap: 10px; margin-top: 6px; }
.pd-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(247, 239, 227, .22); border-radius: 50%; }
.pd-social a:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-footer__c { display: grid; gap: 10px; font-size: 13.5px; }
.pd-footer__c div { display: flex; gap: 10px; }
.pd-footer__c i { color: var(--e-global-color-accent); width: 15px; text-align: center; margin-top: 3px; }
.pd-footer__b { border-top: 1px solid rgba(247, 239, 227, .14); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.pd-pay { display: flex; gap: 7px; flex-wrap: wrap; }
.pd-pay span { padding: 5px 10px; border: 1px solid rgba(247, 239, 227, .2); border-radius: 3px; font-size: 10.5px; letter-spacing: .8px; }

/* ==========================================================================
   RESPONSYWNOSC
   ========================================================================== */
@media (max-width: 1080px) {
  .pd-cats { grid-template-columns: repeat(3, 1fr); }
  .pd-grid { grid-template-columns: repeat(3, 1fr); }
  .pd-co { grid-template-columns: 1fr; }
  .pd-sum { position: static; }
}
@media (max-width: 900px) {
  .pd-hero .pd-wrap { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; }
  .pd-hero h1 { font-size: 46px; }
  .pd-prod { grid-template-columns: minmax(0, 1fr); gap: 26px; }   /* minmax: miniatury nie rozpychają kolumny na telefonie */
  .pd-trust .pd-wrap { grid-template-columns: 1fr 1fr; }
  .pd-footer__g { grid-template-columns: 1fr 1fr; }
  .pd-shop { flex-direction: column; }
  /* na mobile filtry sa schowane za przyciskiem — inaczej trzeba przewinac
     przez piec paneli filtrow, zanim zobaczy sie pierwszy produkt */
  .pd-filters-toggle { display: inline-flex; }
  .pd-side { position: static; max-height: none; flex: 1 1 100%; display: none; order: 2; }
  .pd-side.is-open { display: block; }
  .pd-topbar ul.pd-hide-sm { display: none; }
}
@media (max-width: 720px) {
  .pd-header .pd-wrap { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .pd-search { order: 3; flex: 1 1 100%; max-width: none; }
  .pd-burger { display: grid; }
  .pd-grid, .pd-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pd-cats { grid-template-columns: repeat(2, 1fr); }
  .pd-sec { padding: 44px 0; }
  .pd-shead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pd-shead h2 { font-size: 30px; }
  .pd-phead h1 { font-size: 32px; }
  .pd-hero h1 { font-size: 38px; }
  .pd-hero__stats { gap: 20px; }
  .pd-banner { padding: 30px 24px; }
  .pd-banner h3 { font-size: 26px; }
  .pd-f { grid-template-columns: 1fr; }
  .pd-gal__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pd-buy h1 { font-size: 28px; }
  .pd-card__title { font-size: 15.5px; min-height: 38px; }
  .pd-footer__g { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .pd-wrap { padding: 0 14px; }
  .pd-grid, .pd-grid--3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pd-price { font-size: 17px; }
}

/* ==========================================================================
   Tryb ciemny systemu: sklep ma jeden, jasny motyw i sam go utrzymuje.
   Ten blok jest po to, zeby Chrome/Android NIE odwracal kolorow automatycznie
   (auto dark mode psul nagłowek i karty na brudny braz).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --e-global-color-primary: #241C1A;
    --e-global-color-secondary: #2F6E66;
    --e-global-color-text: #6B5C57;
    --e-global-color-accent: #C9524F;
    --e-global-color-cream: #FBF4F0;
    --e-global-color-paper: #FFFFFF;
    --e-global-color-line: #EDE0DA;
    --e-global-color-oxblood: #9A3B3B;
    --e-global-color-neon: #E8827E;
    --e-global-color-neonred: #E8332A;
    --e-global-color-neonink: #A81E17;
  }
  body { background-color: var(--e-global-color-cream); color: var(--e-global-color-primary); }
}

/* ==========================================================================
   WARSTWA „JAK NA ALLEGRO”
   Klient poprosil, zeby sklep wygladal jak jego strona sprzedawcy na Allegro.
   Odwzorowane sa: pasek sklepu z zakladkami, wyszukiwarka z zakresem i duzym
   przyciskiem, kolumna filtrow z podkategoriami i licznikami, pasek narzedzi
   (liczba ofert / sortowanie / przelacznik widoku) oraz — najwazniejsze —
   LISTOWY widok oferty: miniatura, parametry, a po prawej blok zakupowy.
   Kolory zostaja nasze (koral + atrament + krem), pomaranczu Allegro nie ma.
   W Elementorze: pasek sklepu = druga sekcja szablonu Header, wiersz oferty =
   Loop Item w ukladzie poziomym, filtry = widzet WooCommerce Layered Nav.
   ========================================================================== */
.pd-footer .pd-logo__name { color: var(--e-global-color-neonred); }

/* --- wyszukiwarka z zakresem (jak pole „Szukaj” na Allegro) ---------------- */
.pd-search { display: flex; align-items: stretch; max-width: 620px; background: #fff; border: 2px solid var(--e-global-color-line); border-radius: var(--pd-radius); overflow: hidden; }
.pd-search input { flex: 1 1 auto; width: auto; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; }
.pd-search input:focus { background: transparent; }
.pd-search select { flex: 0 0 auto; border: 0; border-left: 1px solid var(--e-global-color-line); background: #fff; font-size: 13px; padding: 0 10px; color: var(--e-global-color-text); cursor: pointer; max-width: 170px; }
.pd-search button { position: static; width: auto; height: auto; padding: 0 24px; border-radius: 0; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.pd-search:focus-within { border-color: var(--e-global-color-accent); }
.pd-search__hint { top: calc(100% + 8px); }
/* overflow: hidden (zaokrąglone rogi pola) obcinał podpowiedzi — zdejmujemy go tylko, gdy są otwarte */
.pd-search:has(.pd-search__hint.is-open) { overflow: visible; }
.pd-search:has(.pd-search__hint.is-open) > button { border-radius: 0 2px 2px 0; }

/* --- pasek sklepu: nazwa, dane sprzedawcy, zakladki ------------------------ */
.pd-idbar { background: var(--e-global-color-paper); border-bottom: 1px solid var(--e-global-color-line); }
.pd-idbar .pd-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 0; }
.pd-idbar__name { font-family: var(--pd-serif); font-size: 26px; line-height: 1; }
.pd-idbar__meta { font-size: 12.5px; color: var(--e-global-color-text); padding-bottom: 3px; }
.pd-idbar__meta b { color: var(--e-global-color-primary); }
.pd-idbar__tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border: 1px solid var(--e-global-color-line); border-radius: 2px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.pd-idbar__tabs { display: flex; gap: 26px; margin-left: auto; align-self: flex-end; }
.pd-idbar__tabs a { display: block; padding: 12px 0 11px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--e-global-color-text); border-bottom: 3px solid transparent; }
.pd-idbar__tabs a:hover { color: var(--e-global-color-primary); }
.pd-idbar__tabs a.is-on { color: var(--e-global-color-primary); border-bottom-color: var(--e-global-color-accent); }

/* --- kolumna filtrow ------------------------------------------------------- */
.pd-fbox h4 { font-family: var(--pd-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .2px; text-transform: none; color: var(--e-global-color-primary); margin-bottom: 10px; }
.pd-fbox label { font-size: 13px; }
.pd-fbox .n { color: var(--e-global-color-text); font-size: 11.5px; }
.pd-subcats { display: grid; gap: 2px; }
.pd-subcats a { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.pd-subcats a:hover { color: var(--e-global-color-accent); text-decoration: underline; }
.pd-subcats a.is-on { font-weight: 700; color: var(--e-global-color-accent); }
.pd-subcats span { margin-left: auto; font-size: 11.5px; color: var(--e-global-color-text); }
.pd-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-tagcloud a { padding: 4px 10px; border: 1px solid var(--e-global-color-line); border-radius: 999px; font-size: 12px; color: var(--e-global-color-text); background: #fff; }
.pd-tagcloud a:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }

/* --- pasek narzedzi nad wynikami ------------------------------------------ */
.pd-toolbar { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 9px 14px; margin-bottom: 14px; }
.pd-toolbar__n { font-size: 13px; }
.pd-toolbar select { font-size: 13px; }
.pd-toolbar__r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-view { display: inline-flex; border: 1px solid var(--e-global-color-line); border-radius: 3px; overflow: hidden; }
.pd-view button { width: 36px; height: 34px; border: 0; background: #fff; color: var(--e-global-color-text); cursor: pointer; font-size: 13px; }
.pd-view button + button { border-left: 1px solid var(--e-global-color-line); }
.pd-view button.is-on { background: var(--e-global-color-primary); color: #fff; }

/* --- WIDOK LISTY (domyslny na Allegro) ------------------------------------ */
.pd-list { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); }
.pd-row { display: grid; grid-template-columns: 172px minmax(0, 1fr) 246px; gap: 18px; padding: 16px; border-bottom: 1px solid var(--e-global-color-line); }
.pd-row:last-child { border-bottom: 0; }
.pd-row:hover { background: #FFFCFB; }
.pd-row__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--e-global-color-line); border-radius: 3px; padding: 10px; overflow: hidden; }
.pd-row__media img { width: 100%; height: 100%; object-fit: contain; }
.pd-row__badges { position: absolute; left: 6px; top: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.pd-row__t { font-family: var(--pd-sans); font-size: 16.5px; font-weight: 500; line-height: 1.36; margin: 0 0 6px; letter-spacing: 0; }
.pd-row__t a:hover { text-decoration: underline; }
.pd-row__rate { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--e-global-color-text); margin-bottom: 8px; flex-wrap: wrap; }
.pd-row__stars { color: var(--e-global-color-accent); font-size: 11px; letter-spacing: 1px; }
.pd-row__rate b { color: var(--e-global-color-primary); }
.pd-row__params { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12.5px; color: var(--e-global-color-text); }
.pd-row__params b { color: var(--e-global-color-primary); font-weight: 600; }
.pd-row__note { margin-top: 10px; font-size: 12.5px; color: var(--e-global-color-text); display: flex; gap: 14px; flex-wrap: wrap; }
.pd-row__note i { color: var(--e-global-color-accent); margin-right: 5px; }
.pd-row__buy { border-left: 1px solid var(--e-global-color-line); padding-left: 18px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pd-row__price { font-size: 25px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; white-space: nowrap; }
.pd-row__price del { display: block; font-size: 13px; font-weight: 400; color: var(--e-global-color-text); letter-spacing: 0; }
.pd-row__unit { font-size: 11.5px; color: var(--e-global-color-text); margin-top: 2px; }
.pd-row__ship { font-size: 12.5px; color: var(--e-global-color-text); margin-top: 6px; }
.pd-row__eta { font-size: 12.5px; font-weight: 600; color: var(--e-global-color-secondary); margin-top: 6px; }
.pd-row__act { display: flex; gap: 8px; width: 100%; margin-top: auto; padding-top: 12px; }
.pd-row__act .pd-btn { flex: 1 1 auto; padding: 11px 14px; font-size: 12px; }
.pd-row__fav { width: 42px; flex: 0 0 42px; border: 1px solid var(--e-global-color-line); background: #fff; border-radius: var(--pd-radius); cursor: pointer; color: var(--e-global-color-text); }
.pd-row__fav.is-on { color: var(--e-global-color-oxblood); border-color: var(--e-global-color-oxblood); }

/* --- karta w widoku galerii: dolozony termin dostawy i pelny przycisk ------ */
.pd-card__title { font-family: var(--pd-sans); font-size: 15px; font-weight: 500; line-height: 1.35; min-height: 40px; letter-spacing: 0; }
.pd-card__eta { font-size: 12px; font-weight: 600; color: var(--e-global-color-secondary); margin: 8px 0 10px; }
.pd-card__foot { flex-direction: column; align-items: stretch; gap: 10px; }
.pd-card__foot .pd-price { font-size: 22px; }
.pd-card__cta { width: 100%; padding: 11px 14px; font-size: 12px; }

@media (max-width: 900px) {
  .pd-row { grid-template-columns: 120px minmax(0, 1fr); }
  .pd-row__buy { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--e-global-color-line); padding: 12px 0 0; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .pd-row__act { width: auto; margin-left: auto; padding-top: 0; }
  .pd-idbar__tabs { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
  .pd-search { order: 3; flex: 1 1 100%; max-width: none; }
  .pd-search select { display: none; }
  .pd-idbar .pd-wrap { padding-top: 10px; }
  .pd-idbar__name { font-size: 21px; }
}

/* naglowek archiwum: zwarty, zeby lista ofert zaczynala sie wysoko — tak jak
   na stronie sprzedawcy na Allegro, gdzie nad wynikami jest tylko okruszek */
.pd-phead { padding: 14px 0 16px; margin-bottom: 18px; }
.pd-phead h1 { font-size: 27px; }
.pd-phead p { font-size: 13px; margin-top: 6px; max-width: 96ch; }
.pd-crumbs { padding: 10px 0 6px; }

/* oznaczenia oferty w linii z ocena (odpowiednik flag Allegro przy gwiazdkach) */
.pd-flag { display: inline-block; padding: 2px 8px; border: 1px solid var(--e-global-color-accent); border-radius: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--e-global-color-accent); }

/* karta sprzedawcy na stronie oferty (jak blok "Sprzedawca" na Allegro) */
.pd-seller { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 16px 18px; margin-bottom: 18px; }
.pd-seller__n { font-family: var(--pd-serif); font-size: 21px; display: flex; align-items: center; gap: 9px; }
.pd-seller__n span { font-family: var(--pd-sans); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--e-global-color-line); border-radius: 2px; padding: 2px 7px; color: var(--e-global-color-text); }
.pd-seller__m { font-size: 12.5px; color: var(--e-global-color-text); margin-top: 5px; }
.pd-seller__m b { color: var(--e-global-color-primary); }
.pd-seller__a { display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--e-global-color-accent); }
.pd-seller__a:hover { text-decoration: underline; }

/* pasek sklepu ma miescic sie w jednym wierszu — inaczej zakladki spadaja
   pod spod i zostaje pusta przestrzen */
.pd-idbar .pd-wrap { flex-wrap: nowrap; }
.pd-idbar__meta { flex: 1 1 auto; min-width: 0; }
.pd-idbar__tabs { gap: 20px; flex: 0 0 auto; }
.pd-idbar__tabs a { font-size: 11.5px; letter-spacing: .9px; }
@media (max-width: 1080px) {
  .pd-idbar .pd-wrap { flex-wrap: wrap; }
  .pd-idbar__meta { flex: 1 1 100%; order: 3; padding-bottom: 8px; }
}

/* --- drobne poprawki na telefon ------------------------------------------ */
.pd-search input { min-width: 0; }
@media (max-width: 720px) {
  .pd-search button { padding: 0 16px; letter-spacing: .8px; }
  .pd-idbar .pd-wrap { flex-wrap: wrap; }
  .pd-idbar__tabs { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 16px; }
  .pd-idbar__tabs::-webkit-scrollbar { display: none; }
  .pd-idbar__meta { order: 3; flex: 1 1 100%; }
  .pd-row__t { font-size: 15px; }
  .pd-row { padding: 12px; gap: 12px; }
}

/* ==========================================================================
   WITRYNA SPRZEDAWCY — układ zakładki „SKLEP” z Allegro
   Klient pokazał wprost, że tak ma wyglądać strona główna: baner z kartą
   sprzedawcy i zakładkami, po lewej drzewo kategorii z licznikami, po prawej
   poziome sekcje (kafel graficzny + przewijany pas ofert + „zobacz więcej”).
   W Elementorze: baner = kontener z tłem, drzewo = widżet Menu kategorii,
   sekcja = Loop Grid w trybie karuzeli.
   ========================================================================== */
body.pd-front .pd-idbar { display: none; }   /* kartę sklepu niesie baner */

/* --- baner witryny + karta sprzedawcy ------------------------------------- */
.pd-sfhead { background: var(--e-global-color-paper); border-bottom: 1px solid var(--e-global-color-line); }
.pd-sfhead .pd-wrap { padding-top: 18px; padding-bottom: 18px; }
.pd-sfbanner { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: stretch; }

.pd-sfcard { background: var(--e-global-color-cream); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 18px 20px; }
.pd-sfcard h1 { font-size: 30px; margin-bottom: 10px; }
.pd-sfcard__r { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--e-global-color-text); margin-bottom: 6px; }
.pd-sfcard__r i { color: var(--e-global-color-secondary); width: 15px; text-align: center; }
.pd-sfcard__r b { color: var(--e-global-color-primary); }
.pd-sfcard .pd-btn { width: 100%; margin-top: 12px; padding: 11px 14px; font-size: 12px; }

.pd-sfart { position: relative; overflow: hidden; border-radius: var(--pd-radius);
  background: linear-gradient(120deg, var(--e-global-color-cream) 0%, #F6E7E2 62%, #F1DAD4 100%);
  border: 1px solid var(--e-global-color-line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 22px 26px; }
.pd-sfart h2 { font-size: 34px; line-height: 1.08; }
.pd-sfart h2 em { font-family: var(--pd-script); font-style: normal; color: var(--e-global-color-neonred); font-size: .92em; }
.pd-sfart p { margin: 8px 0 0; font-size: 14px; color: var(--e-global-color-text); max-width: 44ch; }
/* C: hasla sklepu z ikonami (lewa strona banera) */
/* kolejnosc z gory na dol: 4 hasla w lewej kolumnie, 3 w prawej */
.pd-sfhasla { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto);
  grid-auto-flow: column; gap: 16px 34px; align-content: center; }
.pd-sfhasla li { display: flex; align-items: center; gap: 13px; font-size: 15px; line-height: 1.35;
  color: var(--e-global-color-primary); }
.pd-sfhasla svg { flex: 0 0 36px; width: 36px; height: 36px; color: var(--e-global-color-accent); }
.pd-sfhasla svg text { fill: currentColor; stroke: none; }
/* B: duze logo (prawa strona banera) */
.pd-sfart__logo { display: flex; align-items: center; justify-content: center; padding: 0 18px 0 34px; }
.pd-logo--baner .pd-logo__name { font-size: 78px; -webkit-text-stroke: 1.6px var(--e-global-color-neonink);
  text-shadow: 0 0 2px #FF6B5E, 0 0 22px rgba(232, 51, 42, .30); padding: 0 14px 6px; }
.pd-logo--baner .pd-logo__swash { height: 16px; margin-top: -8px; }
.pd-logo--baner .pd-logo__swash path { stroke-width: 4.2; }
/* diament w duzym logo z baneru — te same proporcje, wieksza skala */
.pd-logo--baner .pd-logo__rzad { gap: 20px; }
.pd-logo--baner .pd-logo__gem--lewo, .pd-logo--baner .pd-logo__gem--prawo { width: 58px; height: 58px; }
.pd-logo--baner .pd-logo__gem--nad { width: 44px; height: 44px; margin-bottom: 6px; }
.pd-logo--baner .pd-logo__gem--kropka { width: 34px; height: 34px; }
.pd-logo--baner .pd-logo__gem--podkreslenie { width: 42px; height: 42px; }
.pd-logo--baner .pd-logo__gem--koniec { width: 36px; height: 36px; right: -12px; }
.pd-logo--baner .pd-logo__gem--tlo { width: 176px; height: 176px; }

.pd-sftabs { display: none; }   /* zakladki zdjete — nawigacja jest w naglowku */
.pd-sftabs--nieuzywane { display: flex; gap: 28px; margin-top: 14px; }
.pd-sftabs a { padding: 12px 0 11px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--e-global-color-text); border-bottom: 3px solid transparent; }
.pd-sftabs a:hover { color: var(--e-global-color-primary); }
.pd-sftabs a.is-on { color: var(--e-global-color-primary); border-bottom-color: var(--e-global-color-accent); }

/* --- układ dwukolumnowy witryny ------------------------------------------- */
.pd-sf { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 22px; }

/* drzewo kategorii z licznikami */
.pd-tree { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 14px 16px; margin-bottom: 14px; }
.pd-tree h4 { font-family: var(--pd-sans); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--e-global-color-text); margin: 0 0 10px; font-weight: 700; }
.pd-tree__g + .pd-tree__g { margin-top: 12px; }
.pd-tree__h { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; padding: 7px 0; cursor: pointer;
  font-size: 14px; font-weight: 600; text-align: left; color: var(--e-global-color-primary); }
.pd-tree__h span { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--e-global-color-text); }
.pd-tree__h i { font-size: 11px; color: var(--e-global-color-text); transition: transform .18s; }
.pd-tree__g.is-open .pd-tree__h i { transform: rotate(180deg); }
.pd-tree__l { display: none; padding: 2px 0 6px 4px; }
.pd-tree__g.is-open .pd-tree__l { display: block; }
.pd-tree__l a { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--e-global-color-text); }
.pd-tree__l a:hover { color: var(--e-global-color-accent); text-decoration: underline; }
.pd-tree__l a span { margin-left: auto; font-size: 11.5px; }

/* okazja w kolumnie bocznej (na Allegro to blok „Okazje”) */
.pd-okazja { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 14px 16px; margin-bottom: 14px; }
.pd-okazja h4 { font-family: var(--pd-sans); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--e-global-color-text); margin: 0 0 10px; font-weight: 700; }
.pd-okazja__f { display: block; aspect-ratio: 1/1; background: #fff; border: 1px solid var(--e-global-color-line); border-radius: 3px; padding: 12px; }
.pd-okazja__f img { width: 100%; height: 100%; object-fit: contain; }
.pd-okazja__c { font-size: 22px; font-weight: 700; margin-top: 10px; }
.pd-okazja__t { font-size: 13px; line-height: 1.35; color: var(--e-global-color-text); margin-top: 4px; }

/* --- sekcja pozioma: kafel + przewijany pas ofert ------------------------- */
.pd-sec2 { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 16px 18px 12px; margin-bottom: 16px; }
.pd-sec2__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pd-sec2__h h2 { font-size: 26px; }
.pd-sec2__h span { font-size: 12px; color: var(--e-global-color-text); }
.pd-sec2__row { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pd-sec2__track { display: grid; grid-auto-flow: column; grid-auto-columns: 176px; gap: 14px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; }
.pd-sec2__track::-webkit-scrollbar { height: 7px; }
.pd-sec2__track::-webkit-scrollbar-thumb { background: var(--e-global-color-line); border-radius: 4px; }
.pd-more { display: block; text-align: center; margin-top: 10px; padding: 10px; font-size: 12px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--e-global-color-accent); border-top: 1px solid var(--e-global-color-line); }
.pd-more:hover { background: var(--e-global-color-cream); }

/* kafel graficzny sekcji — odpowiednik banerka, który klient ma na Allegro */
.pd-tile { position: relative; overflow: hidden; border-radius: 3px; padding: 18px 16px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; min-height: 100%; }
.pd-tile b { font-family: var(--pd-serif); font-size: 31px; line-height: 1.02; font-weight: 400; }
.pd-tile span { font-size: 12px; opacity: .82; margin-top: 6px; }
.pd-tile::after { content: ''; position: absolute; right: -34px; top: -34px; width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
/* Kafle sekcji: JEDEN kolor — dokladnie ten sam co przyciski (koral z logo),
   ikona u gory, nazwa i opis na dole. Decyzja klienta 16.09.2026 (zdjecia
   mu nie pasowaly). W Elementorze: kontener z kolorem tla z palety globalnej
   (accent), widzet HTML z ikona SVG, naglowek i tekst. */
.pd-tile { background: var(--e-global-color-accent); justify-content: space-between; gap: 18px;
  transition: background .18s; }
.pd-tile:hover { background: #a83f3d; }
.pd-tile::after { display: none; }
.pd-tile__ic { display: block; width: 96px; height: 96px; margin: 4px 0 0 -4px; color: #fff; flex: 0 0 auto;
  transition: transform .25s; }
.pd-tile:hover .pd-tile__ic { transform: translateY(-2px) scale(1.04); }
.pd-tile b { margin-top: auto; }
.pd-tile span { opacity: .92; }
.pd-tile--tanie b { font-family: var(--pd-sans); font-size: 40px; font-weight: 700; letter-spacing: -1px; }

/* mała karta oferty w pasie sekcji */
.pd-mini { display: flex; flex-direction: column; }
.pd-mini__f { display: block; aspect-ratio: 1/1; flex: 0 0 auto; min-height: 0; background: #fff; border: 1px solid var(--e-global-color-line); border-radius: 3px; padding: 10px; overflow: hidden; }
.pd-mini__f img { width: 100%; height: 100%; object-fit: contain; }
.pd-mini__c { font-size: 19px; font-weight: 700; margin-top: 9px; letter-spacing: -.3px; }
.pd-mini__z { font-size: 11.5px; color: var(--e-global-color-text); }
.pd-mini__t { font-size: 12.5px; line-height: 1.35; margin: 6px 0 0; font-family: var(--pd-sans); font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-mini__t a:hover { text-decoration: underline; }
.pd-mini__e { font-size: 11.5px; color: var(--e-global-color-secondary); font-weight: 600; margin-top: 6px; }
.pd-mini__cta { margin-top: auto; padding: 10px 0 2px; background: transparent; border: 0; cursor: pointer; text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--e-global-color-accent); }
.pd-mini__cta:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .pd-sf { grid-template-columns: 1fr; }
  .pd-sfbanner { grid-template-columns: 1fr; }
  .pd-sfart__logo { display: none; }
}
@media (max-width: 720px) {
  .pd-sec2__row { grid-template-columns: 1fr; }
  .pd-tile { min-height: 96px; }
  .pd-tile__ic { width: 52px; height: 52px; margin: 0; }
  .pd-sec2__h h2 { font-size: 21px; }
  .pd-sfart h2 { font-size: 25px; }
}

/* zamkniecie witryny — odpowiednik "wszystkie przedmioty sprzedajacego" */
.pd-sfall { display: block; text-align: center; padding: 16px; margin-bottom: 8px;
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--e-global-color-primary); }
.pd-sfall:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-sfall i { margin-left: 8px; color: var(--e-global-color-accent); }

/* kolejne okazje w kolumnie bocznej — zwarte wiersze pod pierwsza, duza oferta */
.pd-okazja__i { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--e-global-color-line); }
.pd-okazja__i:hover b { color: var(--e-global-color-accent); }
.pd-okazja__m { flex: 0 0 52px; width: 52px; height: 52px; background: #fff; border: 1px solid var(--e-global-color-line);
  border-radius: 3px; padding: 4px; display: grid; place-items: center; }
.pd-okazja__m img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-okazja__i span:last-child { font-size: 12px; line-height: 1.3; color: var(--e-global-color-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pd-okazja__i b { display: block; font-size: 14.5px; color: var(--e-global-color-primary); margin-bottom: 2px; }
.pd-okazja__w { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--e-global-color-line);
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--e-global-color-accent); }
.pd-okazja__w:hover { text-decoration: underline; }

/* --- baner witryny na calej szerokosci + pas korzysci ---------------------
   Zastepuje pionowa karte sprzedawcy: przycisk powielal pozycje z nawigacji,
   a liczba ofert i oceny sa argumentem dla wlasciciela, nie dla kupujacego. */
.pd-sfbanner { display: block; }
.pd-sfart { padding: 30px 34px; }
.pd-sfart h2 { font-size: 42px; }
.pd-sfart p { font-size: 15.5px; max-width: 58ch; }
@media (max-width: 720px) { .pd-sfhasla { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 12px; } }

@media (max-width: 720px) {
  .pd-sfart { padding: 22px 20px; }
  .pd-sfart h2 { font-size: 27px; }
}

/* --- kategoria w tej samej skorze co witryna ------------------------------ */
.pd-side .pd-tree__h.is-on { color: var(--e-global-color-accent); }
.pd-side .pd-tree__l a.is-on { color: var(--e-global-color-accent); font-weight: 700; }
/* Kolumna kategorii przewija sie razem ze strona — po dolozeniu drzewa,
   okazji i rysunkow wlasny scroll w srodku chowal polowe zawartosci. */
.pd-side { position: static; max-height: none; overflow: visible; }

/* --- przewijany pasek hasel w gornej belce -------------------------------
   Tresc jest zdublowana i jedzie w lewo o dokladnie polowe szerokosci toru,
   wiec petla nie ma szwu. Zatrzymuje sie pod kursorem (mozna doczytac) i
   przy systemowym ograniczeniu animacji. */
.pd-ticker { flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
.pd-ticker__t { display: flex; width: max-content; animation: pd-ticker 68s linear infinite; }
.pd-ticker ul { flex: 0 0 auto; padding: 0 13px; }
.pd-ticker li { white-space: nowrap; }
.pd-ticker:hover .pd-ticker__t { animation-play-state: paused; }
@keyframes pd-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pd-ticker__t { animation: none; } }
@media (max-width: 720px) {
  .pd-topbar .pd-wrap { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
  .pd-topbar .pd-wrap > ul { order: 1; width: 100%; justify-content: center; }
  .pd-ticker { order: 2; flex: 1 1 100%; border-top: 1px solid rgba(251, 244, 240, .12); padding-top: 5px; }
  .pd-ticker ul { gap: 16px; padding: 0 8px; }
  .pd-topbar { font-size: 11.5px; }
}
/* prawa strona belki (telefon, Facebook, jezyk) nie moze sie kurczyc pod
   naporem przewijanych hasel — inaczej numer lamie sie na dwie linie */
.pd-topbar .pd-wrap > ul { flex: 0 0 auto; white-space: nowrap; }
.pd-topbar .pd-wrap { gap: 22px; }

/* ==========================================================================
   LICYTACJE — lista, pojedyncza aukcja, konto, panel wlasciciela
   Te same klocki co reszta sklepu (.pd-btn, .pd-form, .pd-ptable), wiec przy
   przenoszeniu na WordPressa nie dochodzi zaden nowy system stylow.
   ========================================================================== */
.pd-akcjapasek { background: var(--e-global-color-primary); color: rgba(251, 244, 240, .82); font-size: 12.5px; }
.pd-akcjapasek .pd-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.pd-akcjapasek i { color: var(--e-global-color-neon); margin-right: 7px; }
.pd-akcjapasek__l { display: flex; gap: 18px; align-items: center; }
.pd-akcjapasek a:hover { color: #fff; text-decoration: underline; }
.pd-akcjapasek button { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 12.5px; padding: 0; }
.pd-akcjapasek button:hover { color: #fff; text-decoration: underline; }
.pd-rola { color: var(--e-global-color-neon); font-weight: 700; margin-left: 6px; }

.pd-aukcje { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pd-aukcja { display: flex; flex-direction: column; background: var(--e-global-color-paper);
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); overflow: hidden; }
.pd-aukcja.is-koniec { opacity: .72; }
.pd-aukcja__f { position: relative; display: block; flex: 0 0 auto; min-height: 0; aspect-ratio: 1 / 1;
  background: #fff; padding: 14px; overflow: hidden; border-bottom: 1px solid var(--e-global-color-line); }
.pd-aukcja__f img { width: 100%; height: 100%; object-fit: contain; }
.pd-aukcja__z { position: absolute; left: 10px; top: 10px; background: var(--e-global-color-primary); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; }
.pd-aukcja__b { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.pd-aukcja__b h3 { font-family: var(--pd-sans); font-size: 14.5px; font-weight: 500; line-height: 1.35; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.pd-aukcja__c { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.pd-aukcja__m { font-size: 12px; color: var(--e-global-color-text); margin-top: 2px; }
.pd-aukcja__t { font-size: 12.5px; color: var(--e-global-color-secondary); font-weight: 600; margin: 8px 0 12px; }
.pd-aukcja__t.is-pilne { color: var(--e-global-color-oxblood); }
.pd-aukcja__b .pd-btn { margin-top: auto; width: 100%; padding: 11px 14px; font-size: 12px; }

.pd-licstan { display: inline-block; background: var(--e-global-color-cream); border: 1px solid var(--e-global-color-line);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--e-global-color-secondary); margin-bottom: 14px; }
.pd-licstan.is-pilne { color: #fff; background: var(--e-global-color-oxblood); border-color: var(--e-global-color-oxblood); }
.pd-licmoja { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--e-global-color-secondary); }
.pd-licform { margin-top: 16px; }
.pd-licform label { display: block; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--e-global-color-text); font-weight: 600; margin-bottom: 6px; }
.pd-licform__r { display: flex; gap: 10px; }
.pd-licform__r input { flex: 1 1 auto; padding: 13px; border: 1px solid var(--e-global-color-line);
  border-radius: 3px; background: #fff; font-size: 17px; font-weight: 700; }
.pd-licform__i { font-size: 12px; color: var(--e-global-color-text); margin: 10px 0 0; }
.pd-lider { color: var(--e-global-color-secondary); }
.pd-przebito { color: var(--e-global-color-oxblood); }

.pd-konto { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.pd-panellista { display: grid; gap: 12px; }
.pd-panelrow { display: grid; grid-template-columns: 78px minmax(0, 1fr) 200px; gap: 14px; align-items: center;
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 12px; background: #fff; }
.pd-panelrow__f { width: 78px; height: 78px; background: #fff; border: 1px solid var(--e-global-color-line);
  border-radius: 3px; padding: 6px; display: grid; place-items: center; }
.pd-panelrow__f img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-panelrow h3 { font-family: var(--pd-sans); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.pd-panelrow__m { font-size: 12px; color: var(--e-global-color-text); }
.pd-panelrow__o { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--e-global-color-text); margin-top: 6px; }
.pd-panelrow__a { text-align: right; display: grid; gap: 6px; justify-items: end; }
.pd-panelrow__c { font-size: 19px; font-weight: 700; }
.pd-panelrow__a .pd-btn { padding: 8px 12px; font-size: 11px; }
.pd-panelrow__s { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 2px; background: var(--e-global-color-cream); color: var(--e-global-color-text); }
.pd-panelrow__s--aktywna { background: var(--e-global-color-secondary); color: #fff; }
.pd-panelrow__s--sprzedana { background: var(--e-global-color-accent); color: #fff; }

@media (max-width: 1080px) { .pd-aukcje { grid-template-columns: repeat(3, 1fr); } .pd-konto { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pd-aukcje { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pd-panelrow { grid-template-columns: 60px minmax(0, 1fr); }
  .pd-panelrow--zazn { grid-template-columns: 24px 60px minmax(0, 1fr); }
  .pd-panelrow__a { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
}
/* po dolozeniu \"Licytacje\" pasek kategorii ledwo miescil sie w 1440 px */
/* 20.09.2026: dziewiec pozycji w pasku — ciasniejsze odstepy, zeby na podstronach
   tez miescil sie w jednym rzedzie (szerokosc tresci to 1280 px) */
.pd-catnav a { padding: 14px 9px; letter-spacing: .5px; }
/* Zakladki rozkladaja sie na CALA szerokosc paska (klient 20.09.2026: po prawej stronie
   zostawalo puste miejsce). `space-between` zachowuje naturalna szerokosc napisow i rozdziela
   sam zapas — rowne `flex: 1` scisneloby dlugie nazwy i rozciagnelo krotkie. Gdy pozycje
   przestaja sie miescic (waski ekran), pasek wraca do przewijania w poziomie. */
.pd-catnav .pd-wrap, .pd-catnav__in { gap: 2px; justify-content: space-between; }

/* pasek wlasciciela na stronie aukcji — front wyglada tak samo dla wszystkich,
   ten pasek to jedyna widoczna roznica (odpowiednik paska admina w WP) */
.pd-adminbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--e-global-color-primary); color: rgba(251, 244, 240, .86);
  border-radius: var(--pd-radius); padding: 10px 16px; margin-bottom: 18px; font-size: 12.5px; }
.pd-adminbar i { color: var(--e-global-color-neon); margin-right: 7px; }
.pd-adminbar b { color: #fff; }
.pd-adminbar__a { display: flex; gap: 10px; align-items: center; }
.pd-adminbar__a button, .pd-adminbar__a a { background: transparent; border: 1px solid rgba(251, 244, 240, .32);
  color: inherit; border-radius: 3px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.pd-adminbar__a button:hover, .pd-adminbar__a a:hover { background: rgba(251, 244, 240, .12); color: #fff; }

/* ==========================================================================
   KOSZYK Z USLUGAMI, PROG DARMOWEJ DOSTAWY, PROGRAM LOJALNOSCIOWY
   ========================================================================== */
/* pasek postepu — ile brakuje do darmowej dostawy albo do kolejnej karty */
.pd-freebar { background: var(--e-global-color-cream); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); padding: 12px 14px; margin-bottom: 12px; }
.pd-freebar__t { font-size: 12.5px; color: var(--e-global-color-text); margin-bottom: 8px; }
.pd-freebar__t b { color: var(--e-global-color-primary); }
.pd-freebar__r { height: 7px; background: var(--e-global-color-line); border-radius: 4px; overflow: hidden; }
.pd-freebar__r span { display: block; height: 100%; background: var(--e-global-color-accent); border-radius: 4px; transition: width .3s; }
.pd-freebar.is-ok { border-color: var(--e-global-color-secondary); }
.pd-freebar.is-ok .pd-freebar__t { color: var(--e-global-color-secondary); }
.pd-freebar.is-ok .pd-freebar__r span { background: var(--e-global-color-secondary); }
.pd-freebar__l { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--e-global-color-accent); }

/* uslugi przy pozycji koszyka */
.pd-li__o { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--e-global-color-text); margin-top: 5px; cursor: pointer; }
.pd-li__o input { width: 14px; height: 14px; accent-color: var(--e-global-color-accent); }
.pd-li__o b { color: var(--e-global-color-primary); }
.pd-li__s { font-size: 14px; font-weight: 700; margin-top: 10px; white-space: nowrap; }

/* uslugi na stronie produktu */
.pd-uslugi { display: grid; gap: 8px; margin: 16px 0 4px; }
.pd-usluga { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--e-global-color-line); border-radius: 3px; background: #fff; }
.pd-usluga:hover { border-color: var(--e-global-color-accent); }
.pd-usluga input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--e-global-color-accent); }
.pd-usluga b { display: block; font-size: 14px; }
.pd-usluga span { font-size: 12.5px; color: var(--e-global-color-text); }
.pd-usluga .p { margin-left: auto; font-weight: 700; white-space: nowrap; color: var(--e-global-color-primary); }

/* dwa przyciski na karcie produktu */
.pd-card__akcje { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pd-card__akcje .pd-btn { padding: 10px 6px; font-size: 11px; letter-spacing: .8px; }

/* program lojalnosciowy */
.pd-lojal { background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); padding: 18px 20px; }
.pd-lojal--gosc b { display: block; font-family: var(--pd-serif); font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.pd-lojal--gosc span { font-size: 13.5px; color: var(--e-global-color-text); }
.pd-lojal__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 16px; }
.pd-lojal__l { display: block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--e-global-color-text); }
.pd-lojal__g b { font-family: var(--pd-serif); font-size: 26px; font-weight: 400; }
.pd-lojal--ok { border-color: var(--e-global-color-secondary); margin-top: 18px; text-align: left; }
.pd-lojal--ok b { color: var(--e-global-color-secondary); font-size: 16px; }
.pd-lojal--ok span { display: block; font-size: 13px; color: var(--e-global-color-text); margin-top: 6px; }
.pd-zasady { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-zasady b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.pd-zasady span { font-size: 13px; color: var(--e-global-color-text); }
@media (max-width: 760px) {
  .pd-lojal__g { grid-template-columns: 1fr; gap: 10px; }
  .pd-zasady { grid-template-columns: 1fr; }
  .pd-card__akcje { grid-template-columns: 1fr; }
}

/* --- wskaznik terminu dostawy (jak \"dostawa jutro — kup do 15:00\" na Allegro) */
.pd-eta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--e-global-color-secondary); }
.pd-eta i.fas { font-size: 11px; }
.pd-eta b { color: var(--e-global-color-secondary); }
.pd-eta__k { font-weight: 400; color: var(--e-global-color-text); }
.pd-eta--s { font-size: 11.5px; }
.pd-buy__eta { margin: 10px 0 4px; }
/* ikona \"i\" z dymkiem — termin jest przewidywany, nie gwarantowany */
.pd-info { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%; border: 1px solid currentColor;
  background: transparent; color: var(--e-global-color-text); font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; padding: 0; position: relative; font-family: var(--pd-sans); }
.pd-info:hover, .pd-info:focus-visible { color: var(--e-global-color-accent); outline: none; }
.pd-info::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); width: 268px; background: var(--e-global-color-primary); color: rgba(251, 244, 240, .94);
  font-size: 11.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-align: left; text-transform: none;
  padding: 10px 12px; border-radius: 4px; box-shadow: 0 12px 30px -14px rgba(36, 28, 26, .7);
  pointer-events: none; z-index: 40; display: none; }
/* dymek istnieje tylko po najechaniu — ukryty przez opacity nadal zajmowal miejsce i przy
   prawej krawedzi (lista produktow na laptopie) wypychal strone w bok o ~90 px */
.pd-info:hover::after, .pd-info:focus-visible::after { display: block; }
@media (max-width: 720px) { .pd-info::after { width: 220px; left: auto; right: -8px; transform: none; } }

/* --- wgrywanie zdjec do aukcji (odpowiednik Biblioteki Mediow w WP) ------- */
.pd-upload { display: grid; place-items: center; gap: 6px; text-align: center; padding: 24px 18px;
  border: 2px dashed var(--e-global-color-line); border-radius: var(--pd-radius); background: var(--e-global-color-cream);
  transition: border-color .16s, background .16s; }
.pd-upload.is-nad { border-color: var(--e-global-color-accent); background: #fff; }
.pd-upload i { font-size: 24px; color: var(--e-global-color-accent); }
.pd-upload b { font-size: 14px; font-weight: 600; }
.pd-upload span { font-size: 12px; color: var(--e-global-color-text); }
.pd-upload__b { color: var(--e-global-color-accent); text-decoration: underline; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 600; margin: 0; }
.pd-upload__b input { display: none; }
.pd-mini-galeria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pd-mini-galeria__i { position: relative; width: 86px; height: 86px; margin: 0; padding: 5px; background: #fff;
  border: 1px solid var(--e-global-color-line); border-radius: 3px; display: grid; place-items: center; }
.pd-mini-galeria__i img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-mini-galeria__i button { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--e-global-color-oxblood); color: #fff; font-size: 10px; cursor: pointer; }

/* ==========================================================================
   WIADOMOSCI — komunikator klient <-> sklep
   Uklad znany z Messengera: lista rozmow po lewej, dymki po prawej, pole
   pisania na dole. Ten sam komponent obsluguje klienta i wlasciciela.
   ========================================================================== */
.pd-czat { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 520px;
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); overflow: hidden; }
.pd-czat__lista { border-right: 1px solid var(--e-global-color-line); background: var(--e-global-color-cream);
  max-height: 620px; overflow-y: auto; }
.pd-czat__h { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--e-global-color-text); border-bottom: 1px solid var(--e-global-color-line); }
/* przycisk nowej wiadomosci — pelna szerokosc i podpis, zeby bylo jasne, gdzie kliknac */
.pd-czat__akcja { padding: 10px 12px; border-bottom: 1px solid var(--e-global-color-line); }
.pd-czat__akcja .pd-btn { width: 100%; padding: 11px 12px; font-size: 11px; letter-spacing: 1px; }
.pd-czat__akcja .pd-btn.is-on { background: var(--e-global-color-primary); }
.pd-czat__w { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--e-global-color-line); }
.pd-czat__w:hover { background: #fff; }
.pd-czat__w.is-on { background: #fff; box-shadow: inset 3px 0 0 var(--e-global-color-accent); }
.pd-czat__aw { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--e-global-color-accent); color: #fff; font-family: var(--pd-serif); font-size: 17px; }
.pd-czat__t { flex: 1 1 auto; min-width: 0; }
.pd-czat__t b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-czat__t span { display: block; font-size: 12px; color: var(--e-global-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-czat__m { flex: 0 0 auto; text-align: right; font-size: 10.5px; color: var(--e-global-color-text); }
.pd-czat__b { display: inline-block; min-width: 18px; padding: 1px 6px; margin-top: 4px; border-radius: 9px;
  background: var(--e-global-color-accent); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }

.pd-czat__okno { display: flex; flex-direction: column; min-height: 520px; }
.pd-czat__gora { padding: 14px 18px; border-bottom: 1px solid var(--e-global-color-line); }
.pd-czat__gora b { display: block; font-size: 15px; }
.pd-czat__gora span { font-size: 12.5px; color: var(--e-global-color-text); }
.pd-czat__kontekst { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: var(--e-global-color-cream); border-bottom: 1px solid var(--e-global-color-line); font-size: 12.5px; }
.pd-czat__kontekst img { width: 40px; height: 40px; object-fit: contain; background: #fff;
  border: 1px solid var(--e-global-color-line); border-radius: 3px; padding: 3px; }
.pd-czat__kontekst b { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--e-global-color-accent); }
.pd-czat__kontekst .c { margin-left: auto; font-weight: 700; }
.pd-czat__tresc { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px;
  max-height: 420px; background: linear-gradient(180deg, #fff, var(--e-global-color-cream)); }
.pd-dymek { max-width: 74%; align-self: flex-start; }
.pd-dymek__t { background: #fff; border: 1px solid var(--e-global-color-line); border-radius: 14px 14px 14px 4px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.5; }
.pd-dymek__c { font-size: 10.5px; color: var(--e-global-color-text); margin: 4px 0 0 6px; }
.pd-dymek.is-moja { align-self: flex-end; }
.pd-dymek.is-moja .pd-dymek__t { background: var(--e-global-color-accent); border-color: var(--e-global-color-accent);
  color: #fff; border-radius: 14px 14px 4px 14px; }
.pd-dymek.is-moja .pd-dymek__c { text-align: right; margin: 4px 6px 0 0; }
.pd-czat__pisz { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--e-global-color-line); }
.pd-czat__pisz textarea { flex: 1 1 auto; padding: 11px 13px; border: 1px solid var(--e-global-color-line);
  border-radius: 18px; background: #fff; font-size: 13.5px; resize: none; }
.pd-czat__pisz textarea:focus { border-color: var(--e-global-color-accent); outline: none; }
.pd-czat__pisz .pd-btn { align-self: flex-end; padding: 12px 18px; font-size: 11.5px; }
.pd-czat__info { margin: 0; padding: 0 16px 14px; font-size: 11.5px; color: var(--e-global-color-text); }
.pd-czat__info i { color: var(--e-global-color-accent); margin-right: 6px; }
.pd-czat__anuluj { border: 0; background: none; padding: 0; margin-left: 8px; cursor: pointer;
  font: inherit; color: var(--e-global-color-accent); text-decoration: underline; }

/* pisanie nowej wiadomosci — formularz siedzi w oknie czatu, nie w okienku przegladarki */
.pd-czat__start { margin: auto; max-width: 380px; text-align: center; color: var(--e-global-color-text); }
.pd-czat__start i { font-size: 30px; color: var(--e-global-color-accent); opacity: .5; }
.pd-czat__start b { display: block; margin: 12px 0 6px; font-family: var(--pd-serif); font-size: 20px;
  color: var(--e-global-color-primary); }
.pd-czat__start span { display: block; font-size: 13px; line-height: 1.55; }
.pd-czat__pisz--nowa { flex-wrap: wrap; }
.pd-czat__temat { flex: 1 1 100%; padding: 10px 14px; border: 1px solid var(--e-global-color-line);
  border-radius: 18px; background: #fff; font-family: var(--pd-sans); font-size: 13px;
  color: var(--e-global-color-primary); }
.pd-czat__temat:focus { border-color: var(--e-global-color-accent); outline: none; }

@media (max-width: 900px) {
  .pd-czat { grid-template-columns: 1fr; }
  .pd-czat__lista { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--e-global-color-line); }
  .pd-dymek { max-width: 88%; }
}

/* ==========================================================================
   PANEL SKLEPU — menu po lewej, jeden ekran na raz (uklad jak wp-admin)
   ========================================================================== */
.pd-panel { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.pd-panelmenu { background: var(--e-global-color-primary); border-radius: var(--pd-radius); overflow: hidden;
  position: sticky; top: 104px; }
.pd-panelmenu__h { padding: 14px 16px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(251, 244, 240, .55); border-bottom: 1px solid rgba(251, 244, 240, .12); }
.pd-panelmenu__i { display: flex; align-items: center; gap: 11px; padding: 13px 16px; font-size: 13.5px;
  color: rgba(251, 244, 240, .82); border-bottom: 1px solid rgba(251, 244, 240, .08); }
.pd-panelmenu__i i { width: 17px; text-align: center; font-size: 13px; color: var(--e-global-color-neon); }
.pd-panelmenu__i span { flex: 1 1 auto; }
.pd-panelmenu__i b { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--e-global-color-accent);
  color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.pd-panelmenu__i:hover { background: rgba(251, 244, 240, .08); color: #fff; }
.pd-panelmenu__i.is-on { background: var(--e-global-color-accent); color: #fff; }
.pd-panelmenu__i.is-on i { color: #fff; }
.pd-panelmenu__i.is-on b { background: rgba(0, 0, 0, .25); }
.pd-panelmenu__i--out { border-bottom: 0; color: rgba(251, 244, 240, .55); }

.pd-panelnag { margin-bottom: 16px; }
.pd-panelnag h2 { font-size: 30px; }
.pd-panelnag span { font-size: 13.5px; color: var(--e-global-color-text); }

.pd-staty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.pd-statkafel { display: block; background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); padding: 16px 18px; }
.pd-statkafel:hover { border-color: var(--e-global-color-accent); }
.pd-statkafel i { font-size: 15px; color: var(--e-global-color-accent); }
.pd-statkafel b { display: block; font-family: var(--pd-serif); font-size: 32px; line-height: 1.1; margin-top: 6px; }
.pd-statkafel span { font-size: 12.5px; color: var(--e-global-color-text); }

@media (max-width: 900px) {
  .pd-panel { grid-template-columns: 1fr; }
  .pd-panelmenu { position: static; display: flex; overflow-x: auto; }
  .pd-panelmenu__h { display: none; }
  .pd-panelmenu__i { border-bottom: 0; border-right: 1px solid rgba(251, 244, 240, .08); white-space: nowrap; }
  .pd-staty { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   CIEKAWOSTKI I HISTORIA — blog sklepu
   Wpisy dodaje wlasciciel z poziomu strony. Uklad: kafelki na liscie,
   jedna kolumna czytelnego tekstu we wpisie.
   W WordPressie: archiwum kategorii + single.php, te same klasy.
   ========================================================================== */
.pd-wpisy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
.pd-wpis { display: flex; flex-direction: column; background: var(--e-global-color-paper);
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); overflow: hidden; }
.pd-wpis:hover { border-color: var(--e-global-color-accent); }
.pd-wpis__f { display: block; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.pd-wpis__f img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s; }
.pd-wpis:hover .pd-wpis__f img { transform: scale(1.04); }
.pd-wpis__brak { display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--e-global-color-cream); color: var(--e-global-color-line); font-size: 30px; }
.pd-wpis__b { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.pd-wpis__m { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--e-global-color-accent); }
.pd-wpis__b h3 { margin: 8px 0 0; font-family: var(--pd-serif); font-size: 21px; line-height: 1.25; }
.pd-wpis__b h3 a:hover { color: var(--e-global-color-accent); }
.pd-wpis__b p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--e-global-color-text); }
.pd-wpis__w { margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 600;
  color: var(--e-global-color-accent); }
.pd-wpis__w i { font-size: 10px; margin-left: 4px; }
.pd-wpis__usun { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--e-global-color-line);
  font-size: 12.5px; color: var(--e-global-color-text); }
.pd-wpis__usun button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--e-global-color-text); text-decoration: underline; }
.pd-wpis__usun button:hover { color: var(--e-global-color-oxblood); }
.pd-wpis__usun.is-pyta { color: var(--e-global-color-oxblood); }
.pd-wpis__usun.is-pyta button { margin-left: 8px; font-weight: 600; }
.pd-wpis__usun.is-pyta button.tak { color: var(--e-global-color-oxblood); }

.pd-wpisy--panel { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.pd-wpisform { margin-bottom: 26px; }
.pd-wpisform__i { margin: -4px 0 16px; font-size: 13px; color: var(--e-global-color-text); }

.pd-artykul { max-width: 74ch; margin: 0 auto; }
.pd-artykul__f { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--pd-radius);
  border: 1px solid var(--e-global-color-line); background: #fff; }
.pd-artykul__t { margin-top: 24px; }
.pd-artykul__t p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; }
.pd-artykul__inne { margin: 40px 0 26px; }
.pd-artykul__inne h2 { font-size: 26px; margin-bottom: 16px; }

@media (max-width: 900px) {
  .pd-wpisy, .pd-wpisy--panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pd-wpisy, .pd-wpisy--panel { grid-template-columns: 1fr; }
  .pd-artykul__t p { font-size: 15px; }
}

/* ==========================================================================
   MARKI — klient chce je widziec od razu (blok w kolumnie witryny) oraz jako
   pierwszy, wygodny filtr na liscie produktow.
   W WooCommerce: atrybut globalny `pa_marka` + widzet filtrowania po atrybucie.
   ========================================================================== */
.pd-marki__i { display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--e-global-color-line); }
.pd-marki__i:last-of-type { border-bottom: 0; }
.pd-marki__i:hover { color: var(--e-global-color-accent); }
.pd-marki__i span { margin-left: auto; font-size: 11.5px; color: var(--e-global-color-text); }
.pd-marki__w { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--e-global-color-accent); }

.pd-fbox--marki h4 { display: flex; align-items: center; gap: 8px; }
.pd-fbox__n { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--e-global-color-cream);
  color: var(--e-global-color-text); font-size: 11px; font-weight: 700; letter-spacing: 0; text-align: center; }
.pd-fbox__szukaj { width: 100%; padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--e-global-color-line);
  border-radius: 3px; background: #fff; font-family: var(--pd-sans); font-size: 13px; }
.pd-fbox__szukaj:focus { border-color: var(--e-global-color-accent); outline: none; }
.pd-fbox--marki:not(.is-rozwiniete) .pd-fbox__lista label.is-nadmiar { display: none; }
.pd-fbox--marki.is-rozwiniete .pd-fbox__lista { max-height: 320px; overflow-y: auto; }
.pd-fbox--marki .pd-fbox__lista label.is-schowana { display: none; }
.pd-fbox__wiecej { margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--pd-sans); font-size: 12.5px; font-weight: 600; color: var(--e-global-color-accent); }
.pd-fbox__wiecej:hover { text-decoration: underline; }

/* --- operacje masowe na liscie aukcji (odpowiednik "Akcji zbiorczych" w WP) -- */
.pd-tabs--staty { margin: 0 0 14px; }
.pd-tabs--staty .pd-tab span { margin-left: 6px; opacity: .65; font-size: 11.5px; }
.pd-masowe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px;
  background: var(--e-global-color-cream); border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); }
.pd-masowe__all { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.pd-masowe__all input { width: 15px; height: 15px; accent-color: var(--e-global-color-accent); }
.pd-masowe__n { font-size: 12.5px; color: var(--e-global-color-text); }
.pd-masowe select, .pd-masowe input[type="text"], .pd-masowe input[type="number"], .pd-masowe__t {
  padding: 9px 11px; border: 1px solid var(--e-global-color-line); border-radius: 3px; background: #fff;
  font-family: var(--pd-sans); font-size: 13px; }
.pd-masowe__t { flex: 1 1 200px; min-width: 0; }
.pd-masowe__d { width: 86px; }
.pd-masowe .pd-btn { padding: 10px 18px; font-size: 11.5px; }
.pd-panelrow--zazn { grid-template-columns: 24px 78px minmax(0, 1fr) 200px; }
.pd-panelrow__z { display: flex; align-items: center; padding-right: 2px; }
.pd-panelrow__z input { width: 16px; height: 16px; accent-color: var(--e-global-color-accent); cursor: pointer; }


/* ==========================================================================
   KARTY PODARUNKOWE (20.09.2026)
   Uklad: po lewej podglad karty (przykleja sie przy przewijaniu), po prawej
   wybor nominalu i dedykacja. Elementor: kontener 2-kolumnowy + widzet HTML.
   ========================================================================== */
.pd-kartasklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.pd-kartapodglad { margin: 0; position: sticky; top: 104px; }
.pd-kartapodglad img { width: 100%; height: auto; display: block; border-radius: var(--pd-radius);
  box-shadow: 0 2px 4px rgba(36, 28, 26, .10), 0 18px 40px -22px rgba(36, 28, 26, .55); }
.pd-kartapodglad__d { margin-top: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.6;
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); color: var(--e-global-color-primary); }
.pd-kartapodglad__d--pusto { color: var(--e-global-color-text); font-style: italic; }

.pd-kartaform__grp { margin-bottom: 26px; }
.pd-kartaform__grp h3 { font-family: var(--pd-sans); font-size: 12px; letter-spacing: 1.6px;
  text-transform: uppercase; font-weight: 700; margin: 0 0 12px; color: var(--e-global-color-primary); }
.pd-kartaform__grp h3 span { letter-spacing: .4px; text-transform: none; font-weight: 400;
  color: var(--e-global-color-text); }

/* 20 nominalow — siatka, nie lista rozwijana: kwoty widac naraz */
.pd-nominaly { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pd-nominal { font-family: var(--pd-sans); font-size: 13.5px; font-weight: 600; padding: 11px 4px;
  background: var(--e-global-color-paper); color: var(--e-global-color-primary); cursor: pointer;
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); transition: .15s; }
.pd-nominal:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-nominal.is-on { background: var(--e-global-color-accent); border-color: var(--e-global-color-accent); color: #fff; }

.pd-formy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-forma { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: center;
  padding: 13px 14px; cursor: pointer; background: var(--e-global-color-paper);
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); }
.pd-forma.is-on { border-color: var(--e-global-color-accent); box-shadow: inset 0 0 0 1px var(--e-global-color-accent); }
.pd-forma input { grid-row: 1 / 3; width: 16px; height: 16px; accent-color: var(--e-global-color-accent); }
.pd-forma i { display: none; }
.pd-forma b { font-family: var(--pd-sans); font-size: 14px; }
.pd-forma span { grid-column: 2; font-size: 12.5px; line-height: 1.5; color: var(--e-global-color-text); }

.pd-kartapola { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-kartapola label { display: flex; flex-direction: column; gap: 5px; font-family: var(--pd-sans);
  font-size: 12px; font-weight: 600; color: var(--e-global-color-primary); }
.pd-kartapola__full { grid-column: 1 / -1; }
.pd-kartapola input, .pd-kartapola textarea { font: inherit; font-weight: 400; font-size: 14px;
  padding: 10px 12px; background: var(--e-global-color-paper); color: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); resize: vertical; }
.pd-kartapola input:focus, .pd-kartapola textarea:focus { outline: 2px solid var(--e-global-color-accent); outline-offset: -1px; }
.pd-kartapola__licz { font-weight: 400; font-size: 11.5px; color: var(--e-global-color-text); }

.pd-kartakup { padding: 18px; background: var(--e-global-color-cream);
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); }
.pd-kartakup__c { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.pd-kartakup__c span { font-family: var(--pd-sans); font-size: 12.5px; color: var(--e-global-color-text); }
.pd-kartakup__c b { font-family: var(--pd-serif); font-size: 32px; color: var(--e-global-color-primary); }
.pd-kartakup__b { display: flex; gap: 10px; }
.pd-kartakup__b .pd-btn { flex: 1; }
.pd-kartakup__i { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--e-global-color-text); }

.pd-kartajak { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--e-global-color-line); }
.pd-kartajak h2 { font-size: 30px; margin: 0 0 16px; }
.pd-kartajak ol { margin: 0 0 22px; padding-left: 20px; max-width: 78ch; }
.pd-kartajak li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.65; }
.pd-kartazasady { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
.pd-kartazasady li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
  color: var(--e-global-color-text); }
.pd-kartazasady i { color: var(--e-global-color-secondary); margin-top: 3px; }

/* opis opcji pozycji w koszyku tam, gdzie nie ma pakowania na prezent (karta) */
.pd-li__o--txt { font-size: 12px; color: var(--e-global-color-text); line-height: 1.5; }

@media (max-width: 980px) {
  .pd-kartasklad { grid-template-columns: 1fr; gap: 24px; }
  .pd-kartapodglad { position: static; max-width: 520px; }
  .pd-kartazasady { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pd-nominaly { grid-template-columns: repeat(4, 1fr); }
  .pd-formy, .pd-kartapola { grid-template-columns: 1fr; }
  .pd-kartakup__b { flex-direction: column; }
}

/* pasek kart podarunkowych na stronie glownej */
.pd-seckarta__r { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: center;
  background: var(--e-global-color-paper); border: 1px solid var(--e-global-color-line);
  border-radius: var(--pd-radius); padding: 18px; }
.pd-seckarta__i img { width: 100%; height: auto; display: block; border-radius: var(--pd-radius);
  box-shadow: 0 1px 3px rgba(36, 28, 26, .12), 0 12px 26px -18px rgba(36, 28, 26, .5); }
.pd-seckarta__c p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; max-width: 62ch; }
.pd-seckarta__k { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-seckarta__k a { font-family: var(--pd-sans); font-size: 13.5px; font-weight: 600; padding: 9px 14px;
  border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius);
  color: var(--e-global-color-primary); transition: .15s; }
.pd-seckarta__k a:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }
.pd-seckarta__w { border-color: transparent !important; color: var(--e-global-color-accent) !important; }
@media (max-width: 760px) { .pd-seckarta__r { grid-template-columns: 1fr; } }

/* --- podglad wyslanych powiadomien e-mail (panel sklepu, 20.09.2026) ------- */
.pd-maile { display: flex; flex-direction: column; gap: 8px; }
.pd-mail { border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); background: #fff; }
.pd-mail > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
  font-size: 13.5px; list-style: none; }
.pd-mail > summary::-webkit-details-marker { display: none; }
.pd-mail > summary i { color: var(--e-global-color-secondary); width: 16px; text-align: center; }
.pd-mail__t { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-mail__d, .pd-mail__c { font-size: 12px; color: var(--e-global-color-text); white-space: nowrap; }
.pd-mail[open] > summary { border-bottom: 1px solid var(--e-global-color-line); }
.pd-mail__b { margin: 0; padding: 14px; font-family: var(--pd-sans); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; color: var(--e-global-color-primary); background: var(--e-global-color-cream); }
.pd-mail__l { display: inline-block; padding: 10px 14px; font-size: 12.5px; color: var(--e-global-color-accent); }
@media (max-width: 760px) { .pd-mail__d { display: none; } }

/* zgody na powiadomienia w koncie klienta */
.pd-zgody { display: flex; flex-direction: column; gap: 10px; }
.pd-zgody label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.pd-zgody input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--e-global-color-accent); }

/* --- anulowanie zamowienia w 15 minut (24.09.2026) --------------------------- */
.pd-anul { display: flex; align-items: center; gap: 14px; margin: 18px auto 0; max-width: 720px;
  padding: 14px 16px; text-align: left; background: var(--e-global-color-cream);
  border: 1px solid var(--e-global-color-line); border-left: 3px solid var(--e-global-color-accent);
  border-radius: var(--pd-radius); }
.pd-anul > i { font-size: 20px; color: var(--e-global-color-accent); flex: 0 0 auto; }
.pd-anul__t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; }
.pd-anul__t span { font-size: 12.5px; color: var(--e-global-color-text); }
.pd-anul__c { font-variant-numeric: tabular-nums; color: var(--e-global-color-accent); }
.pd-anul__q { color: var(--e-global-color-primary) !important; font-weight: 600; }
.pd-anul .pd-btn { flex: 0 0 auto; white-space: nowrap; }
.pd-anul--ok { border-left-color: var(--e-global-color-secondary); font-size: 14px; line-height: 1.55; }
.pd-anul--ok > i { color: var(--e-global-color-secondary); }
.pd-anul--info { border-left-color: var(--e-global-color-line); font-size: 14px; line-height: 1.55; }
.pd-anul--info > i { color: var(--e-global-color-text); }
@media (max-width: 640px) { .pd-anul { flex-wrap: wrap; } .pd-anul .pd-btn { width: 100%; } }

/* „Moje zamowienia” w koncie */
.pd-zamlista { display: flex; flex-direction: column; gap: 10px; }
.pd-zam { border: 1px solid var(--e-global-color-line); border-radius: var(--pd-radius); padding: 12px 14px; background: #fff; }
.pd-zam__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; }
.pd-zam__h span { color: var(--e-global-color-text); font-size: 12.5px; }
.pd-zam__k { margin-left: auto; }
.pd-zam__s { padding: 2px 8px; border-radius: 2px; font-size: 11.5px !important; font-weight: 600;
  background: var(--e-global-color-cream); }
.pd-zam__s--oczekuje { color: var(--e-global-color-accent) !important; }
.pd-zam__s--anulowane { color: var(--e-global-color-text) !important; text-decoration: line-through; }
.pd-zam__s--realizacja { color: var(--e-global-color-secondary) !important; }
.pd-zam .pd-anul { margin: 10px 0 0; max-width: none; }