/* Vitamin Shop - karta.css
   Karta produktu w petli - siatka, widok listy, karuzele.
   Ladowany wszedzie, gdzie moze pojawic sie karta produktu.
   Zrodlo: wizualizacja sklepu (assets/css/style.css). */

/* ---------- 15. KARTA PRODUKTU ---------- */
/* auto-fill zamiast sztywnych 3/4 kolumn: przy 1024 px dochodzi panel filtrow
   i karta kurczyla sie z 314 do 207 px mimo SZERSZEGO ekranu. */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){
  .prod-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
}

.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease)}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--sh-2)}
.card__media{position:relative;aspect-ratio:1/1;background:var(--surface);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-3) var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__badges{position:absolute;z-index:2;top:8px;left:8px;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start;max-width:calc(100% - 60px)}
/* Warstwy karty. Nakladka .card__title a::after ma z-index 1 i przykrywa CALA
   kafelke - to ona robi z karty jeden duzy cel klikniecia. Wszystko, co ma byc
   klikalne osobno (serce, przycisk zakupu), musi wiec stac WYZEJ. Bez tego
   klikniecie w koszyk przenosi na karte produktu zamiast dodac do koszyka. */
.card__fav{position:absolute;z-index:2;top:8px;right:8px;width:44px;height:44px;border-radius:50%;box-shadow:var(--sh-1);
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--slate);
  transition:color var(--dur-1),background var(--dur-1)}
/* Kolor tla serca jest wpisany na sztywno (przezroczysta biel), wiec ciemna
   wersja musi objac tez ustawienie systemowe. Przy samym warunku [data-theme]
   uzytkownik z ciemnym systemem, ktory nie dotknal przelacznika, dostaje bialy
   krazek na ciemnej karcie. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card__fav{background:rgba(22,27,33,.94)}
}
:root[data-theme="dark"] .card__fav{background:rgba(22,27,33,.94)}
.card__fav:hover{color:var(--hot)}
.card__fav[aria-pressed="true"]{color:var(--hot)}
.card__fav[aria-pressed="true"] svg{fill:currentColor}
.card__body{padding:14px;display:flex;flex-direction:column;gap:var(--s2);flex:1}
@media(min-width:768px){.card__body{padding:var(--pad-card)}}
.card__brand{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.3;
  font-weight:700;color:var(--brand-ink)}
.card__title{font-family:'Barlow',sans-serif;font-size:.875rem;font-weight:600;
  line-height:1.35;text-transform:none;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.card__meta{font-size:.75rem;color:var(--slate)}
.card__foot{margin-top:auto;padding-top:8px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:8px}
/* stara cena wchodzi w linie ceny — karta z promocja i bez maja tyle samo wierszy;
   wczesniej ceny w jednym rzedzie stoja na dwoch roznych wysokosciach */
.card__prices{line-height:1.15;display:grid;grid-template-columns:auto auto;
  justify-content:start;align-items:baseline;column-gap:7px}
.card__prices .price{grid-column:1}
.card__prices .strike{grid-column:2}
.card__prices .card__unit{grid-column:1/-1;margin-top:3px}
.price{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.375rem;
  letter-spacing:-.01em;color:var(--ink);display:block;line-height:1.1}
.price--hot{color:var(--hot)}
.card__unit{font-size:.75rem;color:var(--slate-2);display:block;margin-top:2px;
  line-height:1.3;white-space:nowrap}
.card__add{position:relative;z-index:2;width:44px;height:44px;border-radius:var(--r-sm);background:var(--brand);
  color:#0B0F0B;display:grid;place-items:center;flex:none;
  transition:background var(--dur-1)}
.card__add:hover{background:#0BB715}
.card__add:active{transform:scale(.92)}
.card__add.is-done{background:var(--ink);color:var(--brand)}
/* stopien MUSI zostac na 11 px — przy 12 px "Dostepny — wysylka 24 h" zawija sie na kazdym telefonie */
.card__stock{display:flex;align-items:center;gap:5px;font-size:.6875rem;font-weight:600;
  color:var(--ok);line-height:1.3}
.card__stock i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.card__stock--low{color:var(--warn)}
/* --warn nie ma wersji ciemnej w tokenach, a #B45309 na ciemnej karcie daje
   3,0:1. Podmiana musi dzialac w obu drogach do trybu ciemnego. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card__stock--low{color:#FBBF24}
}
:root[data-theme="dark"] .card__stock--low{color:#FBBF24}

/* Widok listy (archiwum) */
.prod-grid.is-list{grid-template-columns:1fr;gap:var(--s3)}
.prod-grid.is-list .card{flex-direction:row}
.prod-grid.is-list .card__media{width:118px;flex:none;aspect-ratio:1/1}
@media(min-width:768px){.prod-grid.is-list .card__media{width:180px}}
.prod-grid.is-list .card__title{-webkit-line-clamp:3;line-clamp:3;font-size:.9375rem}
.prod-grid.is-list .card__desc{display:none;font-size:.8125rem;color:var(--slate)}
@media(min-width:768px){.prod-grid.is-list .card__desc{display:block}}

/* Karuzela z przyciąganiem (mobile = jak w aplikacji) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  scrollbar-width:thin;overscroll-behavior-x:contain;
  margin-inline:-16px;padding-inline:16px}
.rail{scroll-padding-inline:16px}
.rail>*{scroll-snap-align:start}
.rail>*:last-child{scroll-snap-align:end}
@media(min-width:768px){
  .rail{grid-auto-columns:minmax(220px,1fr);gap:16px;margin-inline:0;padding-inline:0;
    scroll-padding-inline:0}
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rail-nav{display:none;gap:6px}
@media(min-width:1024px){.rail-nav{display:flex}}
.rail-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:all var(--dur-1)}
.rail-nav button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rail-nav button[disabled]{opacity:.3;pointer-events:none}


/* ---------- Zszycie z markupem WooCommerce ---------- */
/* Ocene na karcie rysuje vs_gwiazdki() tym samym SVG, co wtyczki, wiec styl
   niesie wspolna regula .stars z baza.css. Gdyby jakas wtyczka wypisala
   jednak ikonograficzny star-rating WooCommerce, ponizsza regula nadaje mu
   ten sam kolor - float i margines znikaja, bo .rating jest kontenerem flex. */
.rating .star-rating{color:#F5A524;float:none;margin:0}

/* Plakietka promocji WooCommerce ma klase .onsale i domyslnie jest pozycjonowana
   absolutnie w rogu. U nas plakietki stoja w kolumnie w lewym gornym rogu media,
   wiec przepisujemy ja na ten sam jezyk co .badge. */
.card__media .onsale{position:absolute;top:8px;left:8px;z-index:2;
  display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;
  background:var(--hot);color:var(--on-hot);font-size:.6875rem;font-weight:700;
  letter-spacing:.02em;margin:0;line-height:1}
/* Gdy wtyczka konwersji rysuje wlasny stos plakietek, plakietka WooCommerce
   znika. Stos jest pozycjonowany absolutnie, wiec zadne przelozenie plakietki
   do normalnego przeplywu nie odsunie jej spod stosu - a poza tym stos ma juz
   plakietke promocji z konkretnym procentem. Dwie plakietki o tym samym
   znaczeniu to szum, nie informacja. */
.card__media .card__badges~.onsale{display:none}

/* Przycisk zakupu z WooCommerce: a.add_to_cart_button albo a.button. */
.card__foot .button,
.card__foot .add_to_cart_button{position:relative;z-index:2;width:44px;height:44px;padding:0;border-radius:var(--r-sm);
  background:var(--brand);color:#0B0F0B;display:inline-grid;place-items:center;flex:none;
  font-size:0;text-decoration:none;transition:background var(--dur-1),transform var(--dur-1)}
.card__foot .button::before{content:"+";font-size:1.5rem;font-weight:700;line-height:1}
.card__foot .button:hover{background:#0BB715}
.card__foot .button:active{transform:scale(.92)}
.card__foot .added_to_cart{display:none}

/* Cena z WooCommerce przychodzi jako span.price z zagniezdzonym bdi. */
.card__prices .price{font-weight:800;font-size:1.0625rem;color:var(--ink)}
.card__prices .price del{font-weight:600;font-size:.8125rem;color:var(--slate-2);margin-right:6px}
.card__prices .price ins{text-decoration:none;color:var(--hot)}


/* ==========================================================================
   PIERWSZENSTWO NAD ARKUSZAMI SKLEPU

   Arkusze woocommerce-layout.css i woocommerce.css trafiaja w liste produktow
   selektorami .woocommerce ul.products li.product, czyli o swoistosci 0,3,1
   i 0,3,2. Nasze klasy .prod-grid i .card maja 0,1,0 i 0,2,0, wiec przegrywaja
   z nimi NIEZALEZNIE od kolejnosci arkuszy - a arkusze sklepu sa zawsze
   kolejkowane, bo motyw ich nie zdejmuje.

   Bez ponizszych regul dzieje sie na zywym sklepie dokladnie to:
     - karta dostaje float:left i width:22.05%, wiec przy naszej siatce grid
       zwezaja sie do jednej czwartej sciezki i miedzy nimi robia sie dziury,
     - cena wraca do zieleni #77a464 i rozmiaru 0,857em,
     - tytul h3 dostaje padding .5em 0 i font-size 1em,
     - plakietka promocji wraca w prawy gorny rog jako fioletowe kolo.

   Ten sam mechanizm dotyczy arkusza sklepowego motywu nadrzednego, ktory liczbe
   kolumn bierze z Customizera GeneratePress. Dlatego siatke deklarujemy tu
   jeszcze raz, z ta sama trescia co wyzej.
   ========================================================================== */
.woocommerce ul.products.prod-grid,
ul.products.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin:0;padding:0;list-style:none}
@media(min-width:768px){
  .woocommerce ul.products.prod-grid,
  ul.products.prod-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
}
/* Widok listy z wtyczki filtrow musi wygrac z siatka powyzej, wiec potrzebuje
   tej samej swoistosci - sama klasa .is-list juz by nie wystarczyla. */
.woocommerce ul.products.prod-grid.is-list,
ul.products.prod-grid.is-list{grid-template-columns:1fr;gap:var(--s3)}

.woocommerce ul.products li.product.card,
ul.products li.product.card{float:none;clear:none;width:auto;margin:0;padding:0;
  text-align:left;position:relative}

.woocommerce ul.products li.product.card .card__title,
ul.products li.product.card .card__title{margin:0;padding:0;font-size:.875rem;
  font-weight:600;line-height:1.35;text-transform:none;letter-spacing:0}
.woocommerce ul.products.prod-grid.is-list li.product.card .card__title,
ul.products.prod-grid.is-list li.product.card .card__title{font-size:.9375rem}

.woocommerce ul.products li.product.card .price,
ul.products li.product.card .price{color:var(--ink);font-size:1.0625rem;
  font-weight:800;margin:0;display:block;line-height:1.1}
.woocommerce ul.products li.product.card .price ins,
ul.products li.product.card .price ins{text-decoration:none;color:var(--hot)}
.woocommerce ul.products li.product.card .price del,
ul.products li.product.card .price del{color:var(--slate-2);font-size:.8125rem;
  font-weight:600;opacity:1}

.woocommerce ul.products li.product.card .button,
ul.products li.product.card .button{margin:0}
.woocommerce ul.products li.product.card .star-rating,
ul.products li.product.card .star-rating{float:none;margin:0;color:#F5A524}

.woocommerce ul.products li.product.card .onsale,
ul.products li.product.card .onsale{top:8px;left:8px;right:auto;margin:0;
  padding:0 9px;min-width:0;min-height:22px;line-height:1;border-radius:999px;
  font-size:.6875rem;background:var(--hot);color:var(--on-hot);z-index:2}