/* Playfair z WLASNEGO pliku (ten sam, ktorego uzywa landing kalendarza).
   Zestaw Adobe serwowany przez strone nie zawiera drugiego kompletu cyfr - zmierzone:
   napis „652" ma identyczna szerokosc przy `lining-nums`, `oldstyle-nums` i domyslnie,
   wiec przelacznik nie mial czego wlaczyc i piatka schodzila pod linie. Plik Google jest
   zmienny (400-700) i ma cyfry pelnej wysokosci. */
@font-face {
    font-family: 'PP Playfair';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/fonts/lp-kalendarz/PlayfairDisplay-normal-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'PP Playfair';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/fonts/lp-kalendarz/PlayfairDisplay-normal-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* PP Reels — kafelki i odtwarzacz.
   Zmienne na górze, żeby motyw mógł je nadpisać bez ruszania reszty. */

.pp-reels {
    --pp-accent: #e6007e;
    --pp-ring: linear-gradient(135deg, #e6007e, #ff8bc4);
    --pp-tile: 76px;
    --pp-gap: 18px;
}

/* ---------- kafelki ---------- */

.pp-reels__tiles {
    display: flex;
    gap: var(--pp-gap);
    margin: 0;
    padding: 4px 0 10px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pp-reels__tiles::-webkit-scrollbar { display: none; }

/* Pasek przewijania jest ukryty, wiec przy wiekszej liczbie kafelkow nic nie
   sygnalizowaloby, ze rzad jedzie dalej. Gasnaca krawedz to pokazuje. */
.pp-reels { position: relative; }
.pp-reels::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 10px;
    width: 46px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
}
.pp-reels.is-overflowing:not(.is-at-end)::after { opacity: 1; }
.pp-reels__tile { flex: 0 0 auto; }

/* Desktop: kafelki o ~35% wieksze (76 -> 103 px) i rozlozone rownomiernie.
   space-around wlaczamy TYLKO gdy rzad sie miesci. Przy przepelnieniu flex
   z rozkladem wysrodkowanym wypycha pierwsze kafelki poza lewa krawedz,
   do ktorej nie da sie przewinac — wtedy wracamy do wyrownania od lewej.
   Klase .is-overflowing ustawia front.js. */
@media (min-width: 1024px) {
    .pp-reels {
        --pp-tile: 103px;
        --pp-gap: 12px;
    }
    .pp-reels__name { font-size: 13px; }
    .pp-reels:not(.is-overflowing) .pp-reels__tiles { justify-content: space-around; }
}

.pp-reels__open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: calc(var(--pp-tile) + 14px);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.pp-reels__open:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; border-radius: 10px; }

.pp-reels__ring {
    display: grid;
    place-items: center;
    width: var(--pp-tile);
    height: var(--pp-tile);
    border-radius: 50%;
    background: var(--pp-ring);
    padding: 3px;
}
.pp-reels__thumb {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 2px #fff inset;
}
.pp-reels__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.pp-reels__name {
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    word-break: break-word;
}

/* ---------- popup ---------- */

.pp-reels-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    background: rgba(12, 8, 14, .82);
    backdrop-filter: blur(3px);
    padding: 16px;
}
.pp-reels-modal[hidden] { display: none !important; }

/* Atrybut `hidden` przegrywa z jawnym `display` w regule klasy — a prawie kazdy
   element kadru takie ma. Bez tego ukrywanie ceny, nadpisu, podnazwy i przycisku
   koszyka po prostu nie dzialalo: film bez produktu pokazywal "Dodaj do koszyka". */
.pp-reels-modal [hidden] { display: none !important; }

.pp-reels-stage {
    position: relative;
    /* Szerokosc ustala flex, nie procent: wewnatrz .pp-reels-wrap o szerokosci
       automatycznej "100%" odwolywaloby sie do rodzica zaleznego od dziecka
       i kadr zapadal sie do zera. */
    flex: 1 1 auto;
    min-width: 0;
    /* Druga skladowa pilnuje, zeby kadr o proporcji 9:16 nie byl wyzszy niz okno:
       przy niskim oknie zwezamy go, zamiast pozwolic mu wyjsc poza ekran. */
    max-width: min(462px, calc((100vh - 32px) * 9 / 16));
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.pp-reels-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}

/* pasek segmentowy */
.pp-reels-bars {
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    display: flex;
    gap: 4px;
    /* Nad nakladka opisowa — inaczej rozciagnieta do gory nakrywa pasek. */
    z-index: 8;
}
.pp-reels-bar {
    position: relative;
    flex: 1;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
    overflow: visible;
    cursor: pointer;
}
/* Pasek ma 3 px wysokosci — bez powiekszonego pola trafienia byloby to
   nie do klikniecia, a na dotyku nie do trafienia w ogole. */
.pp-reels-bar::after {
    content: '';
    position: absolute;
    inset: -10px -2px;
}
.pp-reels-bar:hover { background: rgba(255, 255, 255, .55); }
.pp-reels-bar:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.pp-reels-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
}
.pp-reels-bar i {
    width: 0;
    background: #fff;
}
.pp-reels-bar.is-done i { width: 100%; }

/* górny rząd sterowania — widoczny zawsze */
.pp-reels-top {
    position: absolute;
    top: 22px; left: 10px; right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9;
    pointer-events: none;
}
.pp-reels-top button { pointer-events: auto; }

.pp-reels-icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Makieta ma sam znak, bez wypelnionego kolka - zostaje lekki cien dla czytelnosci. */
    background: none;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
    cursor: pointer;
    line-height: 1;
}
.pp-reels-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-reels-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* strefy przewijania */
.pp-reels-edge {
    position: absolute;
    top: 56px; bottom: 96px;
    width: 26%;
    z-index: 3;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.pp-reels-edge--prev { left: 0; }
.pp-reels-edge--next { right: 0; }
.pp-reels-edge:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* nakładki ujawniane przy interakcji */
.pp-reels-overlay {
    position: absolute;
    left: 0; right: 0;
    z-index: 5;
    /* Nakladki sa dekoracja + tekstem; klikalne elementy wlaczaja wskaznik
       z powrotem u siebie. Bez tego blok opisowy zjadal klikniecia w kadr,
       w pasek postepu i w sterowanie pod nim. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease;
}
.pp-reels-stage.is-revealed .pp-reels-overlay { opacity: 1; visibility: visible; }

.pp-reels-head {
    top: 0;
    /* Zaczynamy przy samej krawedzi, a tresc spychamy paddingiem pod pasek
       postepu i ikony — inaczej gora kadru zostawala nieprzyciemniona. */
    padding: 62px 18px 18px;
    text-align: center;
    color: #fff;
    transform: translateY(-6px);
    background: linear-gradient(rgba(0,0,0,.72) 38%, rgba(0,0,0,0));
}
.pp-reels-stage.is-revealed .pp-reels-head { transform: none; }
.pp-reels-eyebrow { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
/* Nazwa zapachu - ten sam krój co w ramce produktu i co w reszcie serwisu:
   playfair-display, bez pogrubienia. Georgia byla wstawiona z palca i nie
   wystepuje nigdzie indziej na stronie. */
.pp-reels-title {
    display: block;
    font-family: 'PP Playfair', playfair-display, serif;
    /* Zmierzone na wzorze: nazwa u gory jest ~25% wieksza od naszej, a marka
       nad nia mniejsza. Cyfry lining (lnum) - wzor ma je pelnej wysokosci,
       nasze domyslne byly medievalne (piatka schodzila pod linie). */
    font-size: 24px;
    font-weight: 400;
    font-variant-numeric: lining-nums;
    font-feature-settings: 'lnum' 1;
    margin-top: 2px;
}
.pp-reels-subtitle { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
.pp-reels-price {
    display: inline-block;
    margin-top: 9px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-weight: 700;
    font-size: 14px;
}

.pp-reels-foot {
    bottom: 0;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    transform: translateY(8px);
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.62));
}
.pp-reels-stage.is-revealed .pp-reels-foot { transform: none; }

.pp-reels-add,
.pp-reels-more { pointer-events: auto; }

.pp-reels-add {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 210px;
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--pp-accent);
    color: #fff;
    font-size: 14px;
    /* Wzor nie ma tu pogrubienia ani wysrodkowanego napisu. */
    font-weight: 400;
    cursor: pointer;
}
.pp-reels-add[disabled] { opacity: .75; cursor: default; }
.pp-reels-add.is-done {
    background: #2c6a4c;
    /* Komunikat jest dluzszy niz „Dodaj do koszyka" - w pigulce musi moc sie zlamac,
       inaczej wychodzi poza panel. */
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}
.pp-reels-add:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pp-reels-more {
    color: #fff;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* kupon — pojawia się w zadanej sekundzie, niezależnie od nakładek */
.pp-reels-coupon {
    position: absolute;
    left: 50%;
    bottom: 108px;
    transform: translate(-50%, 10px);
    /* Nad nakladkami i nad wideo — kupon musi byc pewnym celem dotyku. */
    z-index: 10;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* 44 px to minimalny sensowny cel palca; wczesniej kupon mial ok. 40 px
       razem z obramowaniem i dotkniecie latwo lądowalo obok, czyli na wideo. */
    min-height: 46px;
    padding: 12px 24px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border: 2px dashed #fff;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease;
}
.pp-reels-coupon.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.pp-reels-coupon.is-copied { border-style: solid; background: #2c6a4c; }

.pp-reels-status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 7;
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, .45);
    text-align: center;
    padding: 24px;
}
.pp-reels-status[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .pp-reels-overlay,
    .pp-reels-coupon { transition: none; }
}

/* ---------- strzałki na desktopie ---------- */

.pp-reels-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    /* 462 px kadru + dwie strzalki po 44 px + dwa odstepy po 16 px = 582 px.
       Bez podniesienia limitu strzalki zabieralyby szerokosc kadrowi. */
    max-width: 600px;
}

.pp-reels-arrow {
    flex: 0 0 auto;
    display: none;              /* pokazujemy tylko tam, gdzie jest kursor */
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .97);
    color: #111;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: transform .15s ease, opacity .15s ease;
}
.pp-reels-arrow:hover { transform: scale(1.06); }
.pp-reels-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pp-reels-arrow[disabled] { opacity: .3; cursor: default; transform: none; }
.pp-reels-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) and (min-width: 620px) {
    .pp-reels-arrow { display: grid; }
    /* Przy widocznych strzałkach niewidzialne strefy przy krawędziach
       tylko przeszkadzałyby — na dotyku zostają. */
    .pp-reels-edge { display: none; }
}

/* ---------- głośność ---------- */

.pp-reels-sound {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 0;
    border-radius: 999px;
    /* Makieta nie ma tu ciemnej pigulki; suwak ma wlasne tlo, wiec zostaje widoczny. */
    background: none;
}
.pp-reels-sound .pp-reels-icon { background: none; }

.pp-reels-volume {
    width: 0;
    opacity: 0;
    height: 4px;
    margin: 0;
    padding: 0;
    appearance: none;
    background: rgba(255, 255, 255, .4);
    border-radius: 2px;
    cursor: pointer;
    transition: width .18s ease, opacity .18s ease;
}
.pp-reels-sound:hover .pp-reels-volume,
.pp-reels-sound:focus-within .pp-reels-volume { width: 76px; opacity: 1; }

@media (hover: none) {
    /* Bez kursora nie ma czym najechać — suwak zostaje widoczny. */
    .pp-reels-volume { width: 64px; opacity: 1; }
}

.pp-reels-volume::-webkit-slider-thumb {
    appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
}
.pp-reels-volume::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
}
.pp-reels-volume:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .pp-reels-arrow,
    .pp-reels-volume { transition: none; }
}

/* ============================================================================
   RAMKA PRODUKTU I STALY PRZYCISK (zlecenie klientki 26.10)
   ----------------------------------------------------------------------------
   Klientka: „przez calosc trwania sam bordowy przycisk z cena i koszykiem",
   a na 8 s przed koncem pelna ramka produktu. Gorna cena zdjeta - jest na przycisku.
   Swiadomie NIE przenosimy ze zrzutu: serduszka listy zyczen (nie ma jej na tej
   stronie - slowa klientki), udostepniania, przycisku „…" ani paska „Wiecej
   produktow" (jeden film promuje JEDEN produkt - ustalenie z poczatku projektu).
   ========================================================================== */

/* Zmienne motywu zyja na `.pp-reels` (rzad kafelkow na stronie), a odtwarzacz jest
   doklejany do <body> - WIEC ICH NIE DZIEDZICZYL. Skutek: `background: var(--pp-accent)`
   na przycisku „Dodaj do koszyka" rozwiazywalo sie do niczego i przycisk byl od poczatku
   przezroczysty (zmierzone 26.10: `rgba(0,0,0,0)`). Defekt zastany, nie skutek tej zmiany -
   widac go dopiero teraz, gdy przycisk ma byc widoczny przez caly film.
   Kolor bordowy jak wstazka sklepu, bo klientka prosila o „bordowy przycisk"; rozowy akcent
   kafelkow na stronie zostaje nietkniety. */
.pp-reels-modal {
    --pp-accent: #8a0014;
}

/* Stopka z przyciskiem przestaje czekac na najechanie: ma byc widoczna caly film. */
.pp-reels-foot.pp-reels-overlay { opacity: 1; visibility: visible; }

/* To samo z gora. Bez tego przez caly film widac sam przycisk „Dodaj do koszyka",
   a nie widac CZEGO dotyczy (zgloszenie 26.10). Nazwa i marka sa w tej nakladce i byly
   poprawne - tylko niewidoczne do czasu najechania albo pauzy. Cena zostaje schowana,
   zgodnie z wczesniejsza prosba: na gorze ma byc sam numer. */
.pp-reels-head.pp-reels-overlay { opacity: 1; visibility: visible; }

.pp-reels-add { width: 100%; max-width: 420px; justify-content: space-between; }
.pp-reels-add { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.pp-reels-add__tekst { text-align: left; }
.pp-reels-add__cena { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 400; white-space: nowrap; }
.pp-reels-add__ikona { width: 18px; height: 18px; flex: 0 0 auto; }
.pp-reels-foot.ma-karte .pp-reels-add__ikona { width: 26px; height: 26px; }

/* Stopka jest PANELEM: przez wiekszosc filmu przezroczysta (widac sam przycisk),
   a w ostatnich sekundach bieleje i obejmuje ramke razem z przyciskiem - jak na makiecie. */
/* Gdy ramka produktu wchodzi, naglowek kadru ustepuje - marka i nazwa sa juz w ramce. */
.pp-reels-head { transition: opacity 1.2s ease; }
.pp-reels-head.ma-karte { opacity: 0; pointer-events: none; }

.pp-reels-foot.ma-karte .pp-reels-panel {
    width: 100%;
    margin: 0 0 2px;
    /* Wzor trzyma przycisk blizej krawedzi panelu niz pierwsza wersja. */
    padding: 12px;
    border-radius: 24px;
    /* Efekt szkla z makiety: panel przepuszcza kadr, zamiast go zakrywac.
       Bez `backdrop-filter` (starsze przegladarki) zostaje czytelne, prawie biale tlo. */
    background: rgba(252, 249, 245, .97);
    background-image: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pp-reels-foot.ma-karte .pp-reels-panel {
        /* Krycie .58 robilo z panelu przeswit: probki koloru dawaly 171-180 na kanal,
           a wzor klientki ma 243-249 - przez panel bylo widac wlosy i kadr. Szklo daje
           tu ROZMYCIE, nie przezroczystosc. */
        background: rgba(252, 250, 247, .93);
        -webkit-backdrop-filter: blur(24px) saturate(1.25);
        backdrop-filter: blur(24px) saturate(1.25);
    }
}
.pp-reels-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Bialy panel pojawial sie natychmiast, razem z klasa - teraz naplywa. */
    transition: background-color 1.4s ease, box-shadow 1.4s ease,
                padding 1.5s cubic-bezier(.22, .61, .36, 1),
                border-radius 1.4s ease;
}
.pp-reels-foot.ma-karte { padding: 18px 10px 14px; }
.pp-reels-foot.ma-karte .pp-reels-more { color: #1c252a; }

.pp-reels-karta {
    width: 100%;
    color: #1c252a;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.2s ease, transform 1.5s cubic-bezier(.22, .61, .36, 1);
}
.pp-reels-karta.is-visible { opacity: 1; transform: none; }

/* Panel nie wyskakuje: opakowanie ramki rosnie od 0fr do 1fr, wiec bialy obszar
   rozwija sie razem z nia. Samego `display:none` nie da sie animowac - stad
   wczesniejszy przeskok z 0 na 100 w jednej chwili. */
.pp-reels-karta-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.5s cubic-bezier(.22, .61, .36, 1);
}
.pp-reels-karta-wrap > * { overflow: hidden; min-height: 0; }
.pp-reels-karta-wrap[hidden] { display: none; }
.pp-reels-foot.ma-karte .pp-reels-karta-wrap { grid-template-rows: 1fr; }

.pp-reels-karta__gora {
    display: grid;
    position: relative;
    grid-template-columns: 96px 1fr;
    align-items: start;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}
.pp-reels-karta__foto {
    width: 96px; height: 96px;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    /* Podmiana przy wyborze pojemnosci ma byc plynna, nie skokowa. */
    transition: opacity .16s ease;
}
.pp-reels-karta__foto.is-zmiana { opacity: 0; }
.pp-reels-karta__opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-reels-karta__nazwa,
.pp-reels-karta__marka,
.pp-reels-karta__ocena { padding-right: 46px; }
/* Nazwa szeryfowa i wieksza - tak jest na makiecie. */
.pp-reels-karta__nazwa {
    /* Zmierzone na wzorze: nazwa w ramce ma tam szerokosc 51 px wobec naszych
       76 px przy tym samym napisie - czyli 30 px bylo o polowe za duzo. */
    font-size: 20px;
    font-family: 'PP Playfair', playfair-display, serif;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    font-feature-settings: 'lnum' 1;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: #15171a;
}
.pp-reels-karta__marka { font-size: 12px; color: #000; opacity: 1; }
.pp-reels-karta__ocena {
    display: flex; align-items: center; gap: 6px;
    margin-top: 2px;
    font-size: 13px;
    white-space: nowrap;
}
.pp-reels-karta__ocena-wartosc { font-weight: 600; }
.pp-reels-karta__ocena-tekst { opacity: .75; }
.pp-reels-karta__ocena-strzalka { display: inline-flex; align-items: center; opacity: .45; }
.pp-reels-karta__ocena-ikona { width: 12px; height: 12px; }
.pp-reels-karta__strzalka {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 0;
    width: 26px; height: 26px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    border-radius: 50%;
    color: #1c252a;
}
.pp-reels-karta__strzalka-ikona { width: 13px; height: 13px; }
.pp-reels-karta__tagi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-reels-karta__tag {
    padding: 4px 11px;
    font-size: 12px;
    /* Makieta: biala pigulka z miekkim cieniem, bez obwodki. */
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    border-radius: 999px;
    white-space: nowrap;
}
.pp-reels-karta__warianty {
    display: grid;
    /* Kolumny rowne, zeby ceny ustawily sie w jednej linii niezaleznie od dlugosci etykiet. */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.pp-reels-karta__wariant {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Makieta ma kafelki wyzsze i bardziej zaokraglone niz pierwsza wersja. */
    min-height: 58px;
    padding: 10px 6px;
    border: 1px solid transparent;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-radius: 14px;
    /* „Mleczne": jasniejsze i bardziej matowe niz szklo panelu - zmierzone na
       wzorze, gdzie kafelek jest neutralniejszy od rozowawego tla panelu. */
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.pp-reels-karta__wariant.is-wybrany {
    border-color: var(--pp-accent);
    box-shadow: inset 0 0 0 1px var(--pp-accent);
    /* Wybrany kafelek ma na makiecie delikatne rozowe wypelnienie, nie samo obramowanie. */
    background: rgba(255, 249, 250, .98);
}
.pp-reels-karta__wariant.is-wybrany .pp-reels-karta__wariant-cena { color: var(--pp-accent); font-weight: 700; }
.pp-reels-karta__wariant-nazwa { font-size: 12px; color: rgba(28,37,42,.62); }
.pp-reels-karta__wariant-cena { font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Kafelek z kodem rabatowym: cena po rabacie, a pod nia zwykla - przekreslona. */
.pp-reels-karta__wariant-ceny { display: flex; flex-direction: column; align-items: center; gap: 0; }
.pp-reels-karta__wariant-cena.is-rabat { color: var(--pp-accent); }
.pp-reels-karta__wariant-cena-stara {
    font-size: 11px;
    text-decoration-thickness: 1px;
    opacity: .5;
    white-space: nowrap;
}

/* Probka: wezszy kafelek z miniatura fiolek i podpisem w trzech wierszach. */
.pp-reels-karta__wariant.is-probka { gap: 0; padding: 8px 5px; }
.pp-reels-karta__wariant.is-probka .pp-reels-karta__wariant-nazwa { font-size: 10px; line-height: 1.25; }
.pp-reels-karta__wariant.is-probka .pp-reels-karta__wariant-cena { font-size: 11px; }
.pp-reels-karta__wariant-foto { width: 26px; height: 26px; object-fit: contain; }

/* Przycisk w panelu: ikona koszyka z lewej, nazwa na srodku, cena ze strzalka z prawej. */
.pp-reels-foot.ma-karte .pp-reels-add { margin-top: 14px; padding: 9px 20px; border-radius: 999px; }
.pp-reels-add__strzalka { display: inline-flex; align-items: center; margin-left: 4px; opacity: .9; }
.pp-reels-add__strzalka-ikona { width: 18px; height: 18px; }

/* Na niskich ekranach ramka nie moze zjesc calego kadru.
   `bottom`/`padding` zniknely razem z pozycjonowaniem absolutnym - karta siedzi
   teraz w stopce i to ona trzyma marginesy. Zostaje samo zwezenie zdjecia. */
@media (max-height: 640px) {
    .pp-reels-karta__foto { width: 68px; height: 68px; }
    .pp-reels-karta__nazwa { font-size: 16px; }
}

/* Ikony przy prawej krawedzi kadru (makieta). Bez serduszka - sklep nie ma listy zyczen. */
.pp-reels-boczne {
    position: absolute;
    right: 8px;
    /* Przy GORNEJ krawedzi, pod paskiem z dzwiekiem i krzyzykiem - tak jak na wzorze. */
    top: 64px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
}
.pp-reels-boczne__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    /* Makieta: sam kontur, srodek przezroczysty. */
    background: none;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
    cursor: pointer;
}
.pp-reels-boczne__btn.is-zrobione { background: rgba(255, 255, 255, .9); color: #1c252a; }
.pp-reels-boczne__ikona { width: 19px; height: 19px; }

/* Pasek pod panelem. Na makiecie ze strzalka w gore. */
.pp-reels-wiecej {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    margin-top: 0;
    padding: 4px 0 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    pointer-events: auto;
}
/* Odnosnik stoi pod panelem, na wideo - zostaje bialy jak na makiecie. */

/* Kafelek probki: miniatura obok opisu (makieta), nie jedno pod drugim. */
.pp-reels-karta__wariant.is-probka {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pp-reels-karta__probka-opis { display: flex; flex-direction: column; align-items: flex-start; }
.pp-reels-karta__wariant.is-probka .pp-reels-karta__wariant-foto { width: 26px; height: 36px; }

.pp-reels-wiecej__strzalka { display: inline-flex; align-items: center; justify-content: center; }
.pp-reels-wiecej__ikona { width: 16px; height: 16px; }