/* ⛔ SELEKTORY OBEJMUJA DWA POJEMNIKI, nie jeden:
     `.product-price-group`  — cena motywu (gdy nasza karta decyzji jest wyłączona)
     `.md-decyzja-cena`      — nasza karta decyzji (moduł product_page)
   Powód: nasza karta NIE MOZE nosic klasy motywu, bo razem z tymi rezerwami przyszloby
   jej `display:flex !important`, ktore ustawia cene, VAT, dostepnosc i termin w jednym
   rzedzie (zmierzone 17.08.2026 — nasze `gap:0` wchodzilo, `display:block` nie).
   Kopiowanie zmierzonych liczb do drugiego pliku rozjechaloby sie przy pierwszej
   zmianie, wiec zostaja TUTAJ i obsluguja oba przypadki. */

/* ==========================================================================
   Cena, podatek i termin wysyłki na stronie produktu
   ==========================================================================
   Treść dociąga skrypt (`md_product_price.js`), bo stawka zależy od kraju gościa,
   a strony produktów są cache'owane. Arkusz odpowiada za dwie rzeczy: rezerwę
   miejsca na czas doczytywania i za to, żeby termin wysyłki wyglądał tak samo
   jak na liście części.

   ⛔ Wartości rezerw są ZMIERZONE na gotowej stronie, nie dobrane na oko:
     cena          28 px + 32 px marginesu z motywu = 60 px
     linia podatku 30,8 px
     termin        24 px pigułki + 8 px odstępu     = 32 px
   Rezerwa o złej wysokości jest gorsza niż jej brak — zamiast jednego skoku
   przy wypełnieniu daje dwa: przy pojawieniu szkieletu i przy jego zdjęciu. */

/* ⛔ Motyw zmienia stopień pisma ceny I jej margines na progach — rezerwa musi iść
   za tym, inaczej na wąskim ekranie trzyma o 28 px za dużo i blok kurczy się po
   doczytaniu. Zmierzone na gotowej stronie:
     do 575 px   24 px pisma + 8 px marginesu  = 32 px
     576–1023 px 24 px pisma + 32 px marginesu = 56 px
     od 992 px   28 px pisma + 32 px marginesu = 60 px */.product-price-group .md-price, .md-decyzja-cena .md-price{--md-cena:24px;--md-cena-mt:8px}
@media (min-width:576px){.product-price-group .md-price{--md-cena-mt:32px}}
@media (min-width:992px){.product-price-group .md-price{--md-cena:28px}}

/* Napis „sprawdzam cenę" zostaje w treści dla czytników ekranu — mówi, czemu
   w tym miejscu jeszcze nic nie ma. Rysować go nie ma po co, skoro stoi tam pasek. */.product-price-group .md-sr, .md-decyzja-cena .md-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes md-szkielet{from{background-position:100% 0}to{background-position:-100% 0}}

/* ⚠️ Szkielet powtarza PUDŁO ceny, nie tylko jej wysokość: ten sam margines górny,
   więc blok zajmuje dokładnie tyle, ile zajmie gotowa cena. */.product-price-group .price-check, .md-decyzja-cena .price-check{display:block;margin-top:var(--md-cena-mt)}.product-price-group .price-check::before, .md-decyzja-cena .price-check::before{
  content:"";display:block;border-radius:4px;
  height:calc(var(--md-cena) * .78);
  margin:calc(var(--md-cena) * .11) 0;
  width:calc(var(--md-cena) * 4.2);
  background:linear-gradient(90deg,#f3f4f6 30%,#e5e7eb 50%,#f3f4f6 70%);
  background-size:200% 100%;
  /* Skończona liczba przebiegów: gdy odpowiedź nigdy nie dojdzie, pasek przestaje
     migotać zamiast pulsować w nieskończoność nad martwym miejscem. */
  animation:md-szkielet 1.4s ease-in-out 12}

/* Linia o podatku — to samo brzmienie i ta sama waga co na liście części.
   ⛔ `min-height` trzyma ją także wtedy, gdy cena NIE przyjdzie: pudło bez rezerwy
   zapadłoby się do zera, a skok w dół liczy się tak samo jak w górę. */.product-price-group .md-tax, .md-decyzja-cena .md-tax{font-size:12px;color:#6b7280;white-space:nowrap;min-height:32.1px}

/* Termin wysyłki. Pudło trzyma miejsce ZAWSZE — także dla pozycji, którym termin
   się nie należy, bo strona przy renderowaniu nie wie, co leży na półce.
   Pigułkę rysujemy dopiero, gdy jest co w niej napisać. */.product-price-group .md-ship, .md-decyzja-cena .md-ship{min-height:24px;margin-top:8px}.product-price-group .md-ship-pill, .md-decyzja-cena .md-ship-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  line-height:1.5;color:#374151;background:#f9fafb;border:1px solid #e5e7eb;
  border-radius:5px;padding:2px 8px}
/* ⛔ `[hidden]` MUSI mieć własną regułę: `[hidden]{display:none}` z arkusza
   przeglądarki ma siłę selektora typu i przegrywa z naszym `display` po klasie.
   Bez tego wisiałaby pusta pigułka bez daty. */.product-price-group .md-ship-pill[hidden], .md-decyzja-cena .md-ship-pill[hidden]{display:none}.product-price-group .md-ship-pill::before, .md-decyzja-cena .md-ship-pill::before{content:"\f0d1";font-family:FontAwesome;font-size:11px;color:#9ca3af}.product-price-group .md-ship-label, .md-decyzja-cena .md-ship-label{color:#6b7280}.product-price-group .md-ship-label::after, .md-decyzja-cena .md-ship-label::after{content:":"}.product-price-group .md-ship-value, .md-decyzja-cena .md-ship-value{font-weight:700;color:#1f2937}.product-price-group .md-ship-pill.kind-today, .md-decyzja-cena .md-ship-pill.kind-today{background:#f0fdf4;border-color:#bbf7d0}
.product-price-group .md-ship-pill.kind-today .md-ship-value,.product-price-group .md-ship-pill.kind-today::before, .md-decyzja-cena .md-ship-pill.kind-today::before{color:#15803d}

/* ⛔ Ruch wyłączony dla tych, którzy sobie tego życzą w ustawieniach systemu.
   Miejsce zostaje zarezerwowane tak samo — znika samo migotanie. */
@media (prefers-reduced-motion:reduce){.product-price-group .price-check::before, .md-decyzja-cena .price-check::before{animation:none}
}