/* ==========================================================================
   PARADISO — wygląd na TELEFONIE (26.09.2026, prośba Macieja: „jak Allegro na telefonie,
   zachowując ducha strony; komputer bez zmian”).

   Zasada: wszystko, co zmienia wygląd, siedzi w @media (max-width: 760px). Poza nim są tylko
   reguły CHOWAJĄCE nowe elementy telefonu (dolny pasek, arkusz kategorii, pasek zakupu…),
   więc komputer i tablet wyglądają dokładnie jak wcześniej (sprawdza to test
   wordpress/testy/desktop-bez-zmian.py — porównanie zrzutów piksel w piksel).

   Wzorce z Allegro: kompaktowy nagłówek (logo po lewej, ikony po prawej) z wyszukiwarką, która
   zostaje przyklejona u góry; paski przewijane w bok z widoczną podpowiedzią „jest dalej”;
   dolny pasek nawigacji; filtry jako pełnoekranowy arkusz; zdjęcia przesuwane palcem z kropkami;
   przyklejony pasek zakupu na karcie produktu; zwinięta stopka.
   Znaczniki: WordPress — inc/telefon.php, wp/sklep.js; demo — assets/js/store.js (PD.renderTelefon).
   ========================================================================== */

.pd-bnav, .pd-msheet, .pd-msheet__ovl, .pd-mbar, .pd-side__m, .pd-side__pokaz,
.pd-catnav__dalej, .pd-hicon--tel, .pd-gal__dots { display: none; }

@media (max-width: 760px) {

  body { -webkit-tap-highlight-color: transparent; }
  body.pd-ma-bnav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  body.pd-lock { overflow: hidden; }
  /* 16 px w polach: iPhone nie powiększa wtedy strony przy wpisywaniu */
  input, select, textarea { font-size: 16px !important; }

  /* --- pasek górny: same hasła, jedna cienka linia ------------------------------------ */
  .pd-topbar { font-size: 11.5px; }
  .pd-topbar .pd-wrap { min-height: 30px; padding-top: 0; padding-bottom: 0; }
  .pd-topbar .pd-wrap > ul { display: none; }
  .pd-ticker { border-top: 0; padding-top: 0; }

  /* --- nagłówek: logo + ikony w jednym rzędzie, wyszukiwarka pod spodem ----------------
     #pd-header „znika” z układu (display: contents), żeby nagłówek mógł się przykleić
     do góry na całej długości strony; ujemny top chowa rząd z logo, zostaje wyszukiwarka. */
  #pd-header { display: contents; }
  .pd-header { position: sticky; top: -52px; z-index: 60; box-shadow: 0 6px 14px -12px rgba(36, 28, 26, .45); }
  .pd-header .pd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo ikony" "szukaj szukaj";
    align-items: center; gap: 4px 6px; min-height: 0; padding-top: 6px; padding-bottom: 10px; }
  .pd-header .pd-logo { grid-area: logo; justify-self: start; align-items: flex-start; margin-left: -4px; }
  .pd-header .pd-logo__name { font-size: 27px; }
  .pd-header .pd-logo__gem--podkreslenie { width: 16px; height: 16px; }
  .pd-hicons { grid-area: ikony; gap: 0; }
  .pd-hicon { width: 42px; height: 42px; font-size: 19px; }
  .pd-hicon--tel { display: grid; color: var(--e-global-color-accent); }
  /* konto, ulubione i koszyk są w dolnym pasku — w nagłówku zostaje telefon i wiadomości */
  .pd-hicons > .pd-hicon:nth-child(n+3) { display: none; }
  .pd-search { grid-area: szukaj; max-width: none; border-width: 1px; }
  .pd-search input { padding: 10px 12px; min-height: 44px; }
  .pd-search select { display: none; }
  .pd-search button { width: 48px; flex: 0 0 48px; padding: 0; font-size: 0; letter-spacing: 0; }
  .pd-search button::before { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 18px; }

  /* --- pasek kategorii: przewijany w bok, z cieniowaniem i strzałką „›” ---------------- */
  .pd-catnav { position: relative; }
  .pd-catnav a { padding: 12px 11px 11px; font-size: 12px; letter-spacing: .4px; gap: 7px; }
  .pd-catnav .pd-wrap, .pd-catnav__in { scroll-snap-type: x proximity; }
  .pd-catnav .pd-wrap > a, .pd-catnav__in > a { scroll-snap-align: start; }
  .pd-catnav::after, .pd-catnav::before { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 1; transition: opacity .2s; }
  .pd-catnav::after { right: 0; background: linear-gradient(90deg, rgba(251, 244, 240, 0), var(--e-global-color-paper) 62%); }
  .pd-catnav::before { left: 0; width: 34px; background: linear-gradient(270deg, rgba(251, 244, 240, 0), var(--e-global-color-paper) 80%); opacity: 0; }
  .pd-catnav:not(.is-poczatek)::before { opacity: 1; }
  .pd-catnav.is-koniec::after { opacity: 0; }
  .pd-catnav__dalej { display: grid; place-items: center; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--e-global-color-line); background: #fff; color: var(--e-global-color-accent);
    font-size: 12px; box-shadow: 0 2px 8px -3px rgba(36, 28, 26, .35); cursor: pointer; transition: opacity .2s; }
  .pd-catnav.is-koniec .pd-catnav__dalej { opacity: 0; pointer-events: none; }
  .pd-catnav--baner { padding: 0 6px; }

  /* --- pasek „Paradiso · firma · zakładki”: na telefonie te linki są w arkuszu Kategorie -- */
  .pd-idbar { display: none; }

  /* --- pasek konta licytacji: tylko przy licytacjach i niższy ------------------------- */
  .pd-akcjapasek--poza { display: none; }
  .pd-akcjapasek { font-size: 12px; }
  .pd-akcjapasek .pd-wrap { min-height: 0; padding-top: 7px; padding-bottom: 7px; gap: 4px 14px; }

  /* --- nagłówek strony (okruszki, tytuł, opis) --------------------------------------- */
  .pd-page h1[style] { font-size: 30px !important; line-height: 1.1; }
  .pd-crumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 12.5px; }
  .pd-crumbs::-webkit-scrollbar { display: none; }
  .pd-phead { padding-top: 18px; padding-bottom: 14px; }
  .pd-phead h1 { font-size: 28px; }
  .pd-phead p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }

  /* --- strona główna ---------------------------------------------------------------- */
  body.pd-front .pd-sfhead .pd-wrap { padding-top: 10px; }
  /* baner: zdjęcie (perfumy, biżuteria, kosmetyki) jako pasek u góry — na komputerze stoi po prawej */
  body.pd-front .pd-sfart { display: block; min-height: 0; padding: 150px 0 12px 12px; }
  body.pd-front .pd-sfart::after { display: block; left: 0; right: 0; bottom: auto; height: 150px; aspect-ratio: auto;
    background: url('../img/baner.jpg') 88% center / auto 100% no-repeat, #F6EDE4;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  /* hasła baneru: poziomy pasek kart zamiast wysokiej listy (jak kafle na starcie Allegro) */
  body.pd-front .pd-sfhasla { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-right: 12px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  body.pd-front .pd-sfhasla::-webkit-scrollbar { display: none; }
  body.pd-front .pd-sfhasla li { flex: 0 0 auto; width: 150px; min-height: 92px; scroll-snap-align: start; flex-direction: column; align-items: flex-start; gap: 7px;
    font-size: 12.5px; line-height: 1.3; background: rgba(255, 255, 255, .8); border: 1px solid var(--e-global-color-line);
    border-radius: var(--pd-radius); padding: 10px 11px; }
  body.pd-front .pd-sfhasla svg { flex: 0 0 24px; width: 24px; height: 24px; }
  /* drzewo kategorii jest w arkuszu „Kategorie”; marki, frazy i „Najtańsze” — pod ofertą */
  .pd-sf { display: flex; flex-direction: column; }
  #pd-sf-side { order: 2; }
  #pd-sf-side > .pd-tree:not(.pd-marki) { display: none; }

  /* --- lista produktów -------------------------------------------------------------- */
  .pd-shop > div:last-child { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  .pd-shop > div:last-child > * { flex: 1 1 100%; min-width: 0; }
  .pd-filters-toggle { flex: 0 0 auto !important; width: auto; margin: 0 0 12px; padding: 10px 13px; font-size: 12px; min-height: 42px; }
  /* „Filtry” zamiast „Filtry i sortowanie” — sortowanie stoi obok (jak na Allegro) */
  .pd-filters-toggle span { font-size: 0; letter-spacing: 0; }
  .pd-filters-toggle span::after { content: "Filtry"; font-size: 12px; letter-spacing: 1.2px; }
  .pd-toolbar { flex: 1 1 0 !important; margin-bottom: 12px; padding: 0; border: 0; background: none; gap: 8px; }
  .pd-toolbar__n { display: none; }
  .pd-toolbar__r { flex: 1 1 auto; display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; }
  .pd-view { flex: 0 0 auto; }
  .pd-view button { width: 42px; height: 42px; }
  .pd-toolbar__r label { flex: 1 1 auto; display: flex !important; min-width: 0; font-size: 0 !important; }
  .pd-toolbar__r select { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 42px; }
  /* oferta jak na Allegro: zdjęcie po lewej, nazwa, ocena, dwa parametry; cena i jeden przycisk */
  .pd-row { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pd-row__t { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pd-row__rate > span:not(.pd-row__stars):not(.pd-flag) { display: none; }
  .pd-row__params span:nth-child(n+3) { display: none; }
  .pd-row__note { display: none; }
  .pd-row__buy { gap: 4px 10px; }
  .pd-row__price { font-size: 22px; }
  .pd-row__act { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; width: 100%; margin-left: 0; }
  .pd-row__act .pd-btn--dark { display: none; }
  .pd-row__act .pd-btn { min-height: 44px; }
  /* filtry: pełnoekranowy arkusz z nagłówkiem i przyciskiem „Pokaż N ofert” */
  .pd-side.is-open:has(> .pd-side__m) { position: fixed; inset: 0; z-index: 140; background: var(--e-global-color-paper); overflow-y: auto;
    padding: 0 16px 96px; max-height: none; }
  .pd-side.is-open .pd-side__m { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2;
    margin: 0 -16px 12px; padding: 12px 8px 12px 16px; background: var(--e-global-color-paper); border-bottom: 1px solid var(--e-global-color-line); }
  .pd-side__m b { font-family: var(--pd-serif); font-size: 24px; font-weight: 400; }
  .pd-side__m button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
  .pd-side.is-open .pd-side__pokaz { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3; min-height: 48px; }

  /* --- karta produktu --------------------------------------------------------------- */
  .pd-prod { gap: 18px; }
  .pd-gal__main { margin: 0 -14px; border-left: 0; border-right: 0; border-radius: 0; }
  .pd-gal__thumbs { display: none; }
  .pd-gal--single .pd-gal__main { max-width: none; }
  .pd-gal__dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
  .pd-gal__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--e-global-color-line); transition: background .2s, transform .2s; }
  .pd-gal__dots span.is-on { background: var(--e-global-color-accent); transform: scale(1.25); }
  .pd-gal__badges { left: 12px; top: 12px; }
  .pd-gal__badges .pd-badge { font-size: 9.5px; padding: 4px 7px; }
  .pd-buy h1 { font-size: 24px; line-height: 1.2; }
  /* przyklejony pasek zakupu nad dolnym paskiem nawigacji */
  .pd-mbar { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 70;
    padding: 8px 12px; background: #fff; border-top: 1px solid var(--e-global-color-line); box-shadow: 0 -8px 18px -12px rgba(36, 28, 26, .4);
    transform: translateY(calc(100% + 70px)); transition: transform .22s ease; }
  .pd-mbar.is-on { transform: none; }
  .pd-mbar__c { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .pd-mbar__c b { font-size: 19px; }
  .pd-mbar__c del { font-size: 12px; color: var(--e-global-color-text); }
  .pd-mbar .pd-btn { flex: 0 0 auto; min-height: 44px; padding: 10px 13px; font-size: 11.5px; letter-spacing: .6px; }
  body.pd-ma-mbar .pd-toast { bottom: calc(136px + env(safe-area-inset-bottom)); }

  /* --- kasa: kroki jako pasek postępu w jednym rzędzie; bez paska kategorii (skupienie na zamówieniu) --- */
  body.woocommerce-checkout .pd-catnav { display: none; }
  .pd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 20px; }
  .pd-step { position: relative; flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 11.5px; text-align: center; }
  .pd-step b { position: relative; z-index: 1; width: 26px; height: 26px; }
  .pd-step::before { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 2px; background: var(--e-global-color-line); }
  .pd-step:first-child::before { display: none; }
  .pd-step.is-done::before, .pd-step.is-active::before { background: var(--e-global-color-secondary); }
  .pd-step.is-active { font-weight: 600; }

  /* --- dolny pasek nawigacji --------------------------------------------------------- */
  .pd-bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: #fff; border-top: 1px solid var(--e-global-color-line); padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 18px -12px rgba(36, 28, 26, .35); }
  .pd-bnav__i { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px;
    padding: 6px 0 5px; background: none; border: 0; color: var(--e-global-color-primary); font: 500 10.5px/1 var(--pd-sans); letter-spacing: .2px; cursor: pointer; }
  .pd-bnav__i i { font-size: 19px; color: var(--e-global-color-text); }
  .pd-bnav__i.is-on, .pd-bnav__i.is-on i { color: var(--e-global-color-accent); }
  .pd-bnav__b { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--e-global-color-accent); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
  .pd-bnav__b:empty { display: none; }

  /* --- arkusz „Kategorie” od dołu ---------------------------------------------------- */
  .pd-msheet__ovl { display: block; position: fixed; inset: 0; z-index: 118; background: rgba(27, 21, 18, .45); opacity: 0; pointer-events: none; transition: opacity .22s; }
  .pd-msheet__ovl:has(+ .pd-msheet.is-open) { opacity: 1; pointer-events: auto; }
  .pd-msheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 119; max-height: 86vh;
    background: var(--e-global-color-paper); border-radius: 16px 16px 0 0; transform: translateY(102%); transition: transform .26s ease;
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .5); }
  .pd-msheet.is-open { transform: none; }
  .pd-msheet__h { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--e-global-color-line); }
  .pd-msheet__h::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--e-global-color-line); }
  .pd-msheet__h b { font-family: var(--pd-serif); font-size: 24px; font-weight: 400; }
  .pd-msheet__h button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--e-global-color-primary); }
  .pd-msheet__b { overflow-y: auto; overscroll-behavior: contain; }
  .pd-msheet__l { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--e-global-color-line); font-size: 15px; color: var(--e-global-color-primary); }
  .pd-msheet__l > i:first-child { width: 20px; text-align: center; color: var(--e-global-color-accent); font-size: 16px; }
  .pd-msheet__l span { flex: 1 1 auto; }
  .pd-msheet__l em { font-style: normal; font-size: 12.5px; color: var(--e-global-color-text); }
  .pd-msheet__l > i:last-child { font-size: 11px; color: var(--e-global-color-text); }
  .pd-msheet__s { padding: 18px 18px 8px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--e-global-color-text); }
  .pd-msheet__tel { display: flex; gap: 14px; align-items: center; margin: 14px 18px 18px; padding: 14px 16px; border-radius: var(--pd-radius);
    background: var(--e-global-color-primary); color: rgba(247, 239, 227, .8); font-size: 12.5px; }
  .pd-msheet__tel i { color: var(--e-global-color-neon); font-size: 18px; }
  .pd-msheet__tel b { display: block; color: #fff; font-size: 17px; }

  /* --- szuflada koszyka, dymki, zgody: nad dolnym paskiem ----------------------------- */
  .pd-drawer { width: 100%; max-width: none; z-index: 130; }
  .pd-ovl { z-index: 125; }
  .pd-toast { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  body.pd-ma-bnav #pd-cmp { bottom: calc(70px + env(safe-area-inset-bottom)) !important; left: 10px !important; right: 10px !important; }
  body.pd-ma-bnav .pd-welcome { bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* --- stopka: nagłówki rozwijają listy (jak na Allegro) ------------------------------ */
  .pd-footer { margin-top: 40px; padding-top: 30px; }
  .pd-footer__g { gap: 0; padding-bottom: 18px; }
  .pd-footer__g > div:first-child { padding-bottom: 18px; }
  .pd-footer__g > div:not(:first-child) { border-top: 1px solid rgba(247, 239, 227, .13); }
  .pd-footer__g > div:not(:first-child) h4 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 16px 0; cursor: pointer; }
  .pd-footer__g > div:not(:first-child) h4::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; transition: transform .2s; }
  .pd-footer__g > div.is-open h4::after { transform: rotate(180deg); }
  .pd-footer__g > div:not(:first-child) > ul, .pd-footer__g > div:not(:first-child) > .pd-footer__c { display: none; padding-bottom: 16px; }
  .pd-footer__g > div.is-open > ul, .pd-footer__g > div.is-open > .pd-footer__c { display: grid; }
  .pd-footer ul { gap: 12px; font-size: 14px; }
}