/* shop.css — style specyficzne dla sklepu: header/footer, pasek kategorii,
   siatka i karta produktu. Atomy (kolory, przyciski, hover) pochodzą z tokens.css. */

/* ---------- header ---------- */
/* markup skopiowany 1:1 z Grodziski Rzeznik.dc.html (.gr-header) — style tu ograniczają
   się do progresywnego zwężania desktop->hamburger i plakietki licznika koszyka;
   reszta wyglądu to inline style + atomy z tokens.css. */
/* .shop-nav-dropdown ma inline display w markupie tylko poprzez natywny atrybut
   [hidden] (bez konfliktu z inline style), więc jego widoczność nie potrzebuje
   tu żadnej reguły — [hidden] wystarcza. .shop-header-mobile-actions ma inline
   display:flex w markupie, więc jego bazowe ukrycie wymaga !important. */
.shop-header-mobile-actions{display:none !important}

/* Progresywne zwężanie nagłówka — te same dwa progi co na głównej stronie
   (index.html, komentarz przy <nav> w headerze), zmierzone empirycznie po dodaniu
   7. pozycji menu ("Piekarz"). KROK 1 (>=1211px, <=1280px): przełącznik motywu
   traci tekst i staje się identyczną ikoną 44x44 jak wariant mobilny niżej —
   reszta (nav/telefon/social/koszyk) zostaje bez zmian. KROK 2 (<=1210px): pełny
   tryb hamburger — próg podniesiony z dawnych 1024px, bo dodatkowa pozycja menu
   przesunęła punkt załamania wyżej (bez tego "O nas" łamałoby się na dwie linie
   albo header wyjeżdżał poza szerokość strony, dokładnie tak jak na głównej
   stronie przed tą poprawką). */
@media (max-width:1280px){
  .shop-header-desktop-actions .gr-themebtn .theme-toggle-text{display:none}
  .shop-header-desktop-actions .gr-themebtn{width:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:12px;border-color:rgba(198,161,94,.4);background:transparent}
}
@media (max-width:1210px){
  .shop-nav-desktop, .shop-header-desktop-actions{display:none !important}
  .shop-header-mobile-actions{display:flex !important}
}
.shop-cart-badge{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 5px;display:flex;align-items:center;justify-content:center;background:#C6A15E;color:#17100B;border-radius:999px;font-size:12px;font-weight:800}
.shop-cart-badge[hidden]{display:none}

/* ---------- modal "zamówienia online wstrzymane" ---------- */
/* Zastępuje dawny pełnoszerokościowy .store-status-banner (usunięty — dublował
   informację z kafelków statusu w hero, patrz #shop-status-panel). Ten modal
   pokazuje się wyłącznie w MOMENCIE próby zakupu (Dodaj do koszyka, zwiększenie
   ilości w koszyku, ?add=ID) gdy onlineOrderingOpen===false — przeglądanie
   produktów nie jest w żaden sposób blokowane. Ta sama "szklana karta" stylistyka
   co .cart-drawer/.shop-status-card (var(--card2), złota ramka), wyśrodkowany
   overlay zamiast browserowego alert(). Zbudowany raz przez status-modal.js,
   z-index wyższy niż .cart-drawer (91), żeby modal był widoczny nawet gdy koszyk
   jest akurat otwarty (próba zwiększenia ilości w koszyku). */
.status-modal-overlay{position:fixed;inset:0;z-index:120;background:rgba(8,5,3,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;animation:gr-fade .2s ease}
.status-modal-overlay[hidden]{display:none}
.status-modal{width:min(400px,100%);background:var(--card2);border:1px solid rgba(198,161,94,.35);border-radius:18px;padding:28px 26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);text-align:center;animation:gr-slidein .3s ease}
.status-modal-title{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;color:var(--fg-strong);margin:0 0 12px}
.status-modal-text{font-size:14px;line-height:1.6;color:var(--fg-body);margin:0 0 22px}
.status-modal-btn{background:#872B2F;color:var(--on-accent);border:1px solid rgba(198,161,94,.5);border-radius:999px;padding:11px 30px;font-weight:700;font-size:13.5px;cursor:pointer;min-height:44px}
.status-modal-btn:hover{background:#9c3236}

/* added-to-cart-modal.js — potwierdzenie po UDANYM dodaniu do koszyka. Ta sama
   nakładka/karta co .status-modal-overlay/.status-modal (spójny "premium" look),
   tylko dodatkowa ikona sukcesu, opcjonalna miniatura/nazwa produktu i dwa
   przyciski (secondary/primary) zamiast jednego "Rozumiem". */
.added-modal{width:min(420px,100%);padding-top:30px}
.added-modal-icon{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:rgba(107,158,110,.16);border:1px solid rgba(107,158,110,.5);color:#8FCB93;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.added-modal-product{display:flex;align-items:center;gap:12px;justify-content:center;margin:4px 0 22px;text-align:left}
.added-modal-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none;background:#17100B}
.added-modal-thumb[hidden]{display:none}
.added-modal-name{font-size:14px;line-height:1.5;color:var(--fg-body);margin:0}
.added-modal-actions{display:flex;flex-direction:column;gap:10px}
.added-modal-btn{border-radius:999px;padding:13px 16px;font-weight:700;font-size:13px;letter-spacing:.1px;white-space:nowrap;cursor:pointer;min-height:44px;width:100%;box-sizing:border-box}
.added-modal-btn-primary{background:#872B2F;color:var(--on-accent);border:1px solid rgba(198,161,94,.5)}
.added-modal-btn-primary:hover{background:#9c3236}
.added-modal-btn-secondary{background:transparent;color:var(--fg-strong);border:1px solid rgba(198,161,94,.4)}
.added-modal-btn-secondary:hover{background:rgba(198,161,94,.1)}
@media (min-width:420px){
  .added-modal-actions{flex-direction:row}
  .added-modal-btn{width:auto;flex:1}
}

/* ---------- footer ---------- */
/* markup skopiowany 1:1 z Grodziski Rzeznik.dc.html (<footer>) — czysty inline style
   + klasy .gr-flink/.gr-hoverbrass z tokens.css, bez własnych reguł tutaj. */

/* ---------- hero ---------- */
/* dokładnie ta sama technika i te same proporcje co #start na głównej stronie:
   zdjęcie w tle (absolute, cover) + gradient-veil (absolute, te same wartości
   liczbowe co .gr-hero-veil) + treść na wierzchu (z-index). min-height:88vh
   i wewnętrzna anatomia (badge -> h1 -> kursywa -> opis -> 2 CTA) skopiowane
   z .gr-hero-copy. Tekst zawsze jasny/złoty niezależnie od motywu strony, bo
   zawsze siedzi na tym samym ciemnym zdjęciu (tak jak na głównej stronie w
   trybie ciemnym, i tak jak wymuszony override w trybie jasnym). */
.shop-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--bg-4)}
.shop-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center right}
.shop-hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,5,.92) 0%,rgba(12,8,5,.6) 42%,rgba(12,8,5,.1) 74%,rgba(12,8,5,.2) 100%)}
.shop-hero-copy{position:relative;z-index:3;max-width:1280px;margin:0 auto;padding:80px 24px;width:100%}
.shop-hero-inner{max-width:640px;animation:gr-fade .8s ease both}
.shop-hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border:1px solid rgba(198,161,94,.4);border-radius:999px;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:#C6A15E;font-weight:700;margin-bottom:26px}
.shop-hero-h1{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(48px,7vw,86px);line-height:.98;margin:0 0 20px;color:#C6A15E;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.shop-hero-sub{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(20px,2.6vw,27px);color:#C6A15E;margin:0 0 18px;font-weight:500}
.shop-hero-desc{font-size:clamp(15px,1.7vw,18px);line-height:1.65;color:#D9CDB8;max-width:520px;margin:0 0 26px}
.shop-hero-cta{display:flex;flex-wrap:wrap;gap:14px}
/* Dolny pas hero — DWIE kolumny NA TEJ SAMEJ WYSOKOŚCI (nie status cards pod
   informacjami): lewa = ocena/godziny/adres (auto, wąska), prawa = panel statusu
   (minmax — dwie karty obok siebie potrzebują więcej miejsca niż lewa kolumna,
   ale nie mają rosnąć w nieskończoność na bardzo szerokich ekranach). Sibling
   .shop-hero-inner (nie w środku) — może być szerszy niż jego 640px. Poniżej
   860px zjeżdża do jednej kolumny (prawa część, czyli panel statusu, spada POD
   lewą — dokładnie tak jak dla tabletu w briefie), .shop-status-panel dalej sam
   decyduje auto-fitem czy pokazać 2 karty obok siebie czy jedna pod drugą. */
/* Obie kolumny na max-content (nie auto, nie 1fr) + justify-content:start —
   to razem robi siatkę "shrink-to-fit" zamiast "stretch-to-container". Z samym
   auto (bez justify-content:start) domyślne justify-content:normal ROZCIĄGA
   auto-tracki na wolne miejsce w kontenerze (do max-width:900px), więc prawa
   kolumna z kartami lądowała daleko od treści zamiast zaraz obok — to był
   faktyczny mechanizm winny, nie sam rozmiar gap. max-content + justify-content:
   start usuwa to rozciąganie: obie kolumny mają szerokość dokładnie tyle, ile
   potrzebuje ich treść, i stoją zaraz obok siebie od lewej. */
.shop-hero-bottom{display:grid;grid-template-columns:max-content max-content;justify-content:start;column-gap:28px;row-gap:20px;align-items:start;max-width:900px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(198,161,94,.22)}
/* pasek zaufania — 1:1 treść .gr-trust z hero głównej strony (gwiazdki+ocena,
   godziny, adres), teraz w pionowym stosie (kolumna, nie wiersz) zamiast poziomego
   paska z kropkami-separatorami — kolory na sztywno (nie var(--fg-*)) bo to hero
   zawsze siedzi na tym samym ciemnym zdjęciu niezależnie od motywu strony — tak samo
   jak reszta tekstu w tym hero (.shop-hero-sub/.shop-hero-desc też ma stałe kolory) */
.shop-hero-trust{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13.5px;color:#EFE3CE}
.shop-hero-trust-rating{display:inline-flex;align-items:center;gap:7px}
.shop-hero-trust-rating strong{color:#F5ECDD}
.shop-hero-trust-stars{color:#C6A15E;letter-spacing:1px}
.shop-hero-trust-link{color:#EFE3CE}
/* Panel statusu hero — DWIE karty (sklep stacjonarny / zamówienia online),
   patrz renderStatusPanel() w product-list.js. Zastępuje dawną jednolinijkową
   pigułkę .shop-hero-status-pill/.shop-hero-status-dot (usunięte, martwy kod —
   ten sam getPillVisuals() z store-status.js dalej dostarcza kolory, tylko teraz
   per-kanał zamiast jednej wspólnej wartości). Karty "szklane" (tło+blur) na
   ciemnym zdjęciu hero, tak jak .shop-hero-badge — spójnie z resztą hero, nie z
   jasnymi/ciemnymi motywami reszty strony (to zdjęcie zawsze ciemne, kolory na
   sztywno jak reszta .shop-hero-*). auto-fit -> 2 kolumny gdy jest miejsce, 1 na
   wąskim ekranie, bez dodatkowej media query (ten sam wzorzec co siatka produktów). */
/* min-width:374px (2x180px karta + 14px gap) — bez tego, jako dziecko grida z
   grid-template-columns:max-content na .shop-hero-bottom, przeglądarka liczy
   max-content contribution tego panelu w sposób niejednoznaczny dla zagnieżdżonego
   auto-fit i potrafi go zwinąć do JEDNEJ kolumny (karty spadają jedna pod drugą
   zamiast obok siebie) zamiast dwóch. Jawny min-width wymusza dostępną szerokość
   >= dwóch kart, więc auto-fit poprawnie renderuje je obok siebie. */
.shop-status-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;min-width:374px}
.shop-status-card{padding:16px 18px;border-radius:16px;background:rgba(20,14,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(198,161,94,.28);display:flex;flex-direction:column;gap:8px}
.shop-status-card-title{font-family:'Playfair Display',serif;font-weight:700;font-size:14.5px;color:#F5ECDD}
.shop-status-card-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-weight:700;font-size:13px;width:fit-content}
.shop-status-card-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.shop-status-card-hint{font-size:12.5px;line-height:1.45;color:#D9CDB8}
/* <860px: brakuje miejsca na dwie kolumny obok siebie (lewa+prawa) bez ściskania —
   panel statusu zjeżdża pod informacje, tak jak dla tabletu w briefie. */
@media (max-width:860px){
  .shop-hero-bottom{grid-template-columns:1fr}
  .shop-status-panel{min-width:0}
}
@media (max-width:600px){
  .shop-hero-bg{background-position:70% center}
  .shop-status-panel{max-width:none}
}

/* ---------- pasek kategorii ---------- */
/* wyśrodkowany, w tym samym tle co reszta sekcji — ten sam wzorzec co .gr-tabs
   (filtry galerii) na głównej stronie: justify-content:center, wewnątrz tej samej
   kolorowej sekcji, bez osobnego "białego" pasa między hero a siatką produktów. */
.category-bar{max-width:1200px;margin:0 auto;padding:48px 24px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* Bez tego [hidden] (ustawiane w JS przy global 0 produktów) nic by nie robił —
   display:flex ustawiony wyżej ma tę samą specyficzność co atrybut [hidden] i by
   wygrywał, zostawiając pusty, ale wciąż zajmujący 48px padingu pasek. Ten sam
   wzorzec co .cart-drawer[hidden]/.status-modal-overlay[hidden] niżej w tym pliku. */
.category-bar[hidden]{display:none}
.category-pill{border:1px solid rgba(198,161,94,.35);background:transparent;color:var(--fg-body);border-radius:999px;padding:10px 20px;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;min-height:44px}
.category-pill:hover{border-color:var(--gold-text);color:var(--fg-strong)}
.category-pill.is-active{background:#872B2F;border-color:#872B2F;color:var(--on-accent)}

/* ---------- sekcja produktów ---------- */
.shop-products-section{border-top:1px solid rgba(198,161,94,.18)}

/* ---------- pasek sortowania ---------- */
.product-sort-row{max-width:1200px;margin:0 auto;padding:14px 24px 0;display:flex;justify-content:flex-end}
.product-sort-row[hidden]{display:none}
.product-sort-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--fg-body)}
.product-sort-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:auto;background:var(--field-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7"><path d="M1 1l4 4 4-4" fill="none" stroke="%23C6A15E" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;background-size:10px 7px;border:1px solid var(--field-bd);border-radius:10px;padding:9px 32px 9px 15px;color:var(--fg-strong);font-size:13px;font-weight:600;cursor:pointer;outline:none;min-height:44px;transition:border-color .2s ease,box-shadow .2s ease}
.product-sort-select:hover{border-color:rgba(198,161,94,.55)}
.product-sort-select:focus{border-color:var(--gold-text);box-shadow:0 0 0 3px rgba(198,161,94,.16)}
[data-theme="light"] .product-sort-select{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7"><path d="M1 1l4 4 4-4" fill="none" stroke="%236F5322" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
[data-theme="light"] .product-sort-select:hover{border-color:rgba(150,110,45,.7)}
[data-theme="light"] .product-sort-select:focus{box-shadow:0 0 0 3px rgba(150,110,45,.14)}
.product-sort-select::-ms-expand{display:none}

/* ---------- siatka produktów ---------- */
.product-grid{max-width:1200px;margin:0 auto;padding:24px 24px 90px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;align-items:stretch}
/* Global 0 produktów: siatka jest jawnie chowana w JS (grid.hidden=true), nie tylko
   czyszczona z zawartości — bez tej reguły zostałaby jako pusty grid z własnym
   paddingiem (24px+90px), czyli spora, niepotrzebna, pusta przestrzeń nad kartą. */
.product-grid[hidden]{display:none}
/* karty w tym samym rzędzie mają identyczną wysokość (grid align-items:stretch na
   kontenerze), a wewnątrz karty cena+przycisk zawsze przypięte do dołu niezależnie
   od długości nazwy/opisu — .product-card-link rośnie, footer ma margin-top:auto */
.product-card{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid rgba(198,161,94,.24);border-radius:18px;overflow:hidden;box-shadow:0 20px 44px -22px rgba(0,0,0,.8);cursor:pointer}
.product-card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.product-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#17100B}
.product-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-card-body{padding:18px 20px 4px}
.product-card-name{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;margin:0 0 4px;color:var(--fg-strong)}
.product-card-desc{font-size:13px;color:var(--fg-muted)}
/* produkt wagowy — zakres wagi w miejscu opisu, ten sam rozmiar/kolor co zwykły
   opis (żeby wysokość karty się nie zmieniała), tylko trochę mocniejsza waga
   fontu, żeby czytać się jak krótka specyfikacja, nie zdanie */
.product-card-desc-weight{font-weight:600;color:var(--fg-muted)}
.product-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px 20px;margin-top:auto}
.product-card-price{font-family:'Playfair Display',serif;font-weight:700;font-size:17px;color:var(--price);white-space:nowrap;flex:none}
.product-card-add{background:#872B2F;color:var(--on-accent);border:1px solid rgba(198,161,94,.5);border-radius:999px;padding:9px 14px;font-weight:700;font-size:12px;line-height:1.25;text-align:center;cursor:pointer;min-height:44px;flex:0 1 auto}
.product-card-add[disabled]{opacity:.6;cursor:default}
.product-card-add.is-added{background:#3E6B3E;border-color:#3E6B3E}

/* produkty wagowe (grodziski_weight, patrz weight-pricing.js) — zakres ceny +
   subtelna cena/kg, prawa strona footera karty, ten sam slot co .product-card-price
   (zakres wagi jest wyżej, w miejscu opisu — patrz .product-card-desc-weight) */
.product-card-price-weighted{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;flex:none}
.product-card-price-range{font-family:'Playfair Display',serif;font-weight:700;font-size:15px;color:var(--price);white-space:nowrap}
.product-card-per-kg{font-size:10px;color:var(--fg-faint);white-space:nowrap}

.shop-state{max-width:1200px;margin:0 auto;padding:40px 24px;text-align:center;color:var(--fg-muted);font-size:15px}
.shop-state.is-error{color:#C77}

/* Global empty state — CAŁY sklep ma 0 produktów (patrz isStoreGloballyEmpty() w
   product-list.js), odróżnione od zwykłego "Brak produktów w tej kategorii" (ten sam
   .shop-state, zwykły tekst, bez karty). Te same tokeny/wzorzec karty co reszta
   /zamow/ (var(--card), rgba(198,161,94,.24) obramowanie, ten sam cień co .gr-card) —
   zero nowej palety.
   .shop-empty-wrap to JEDYNE miejsce, które odpowiada za odstęp od hero (product-
   list.js nadaje ten wrapper zamiast .shop-state, więc jego 40px paddingu nie dokłada
   się do marginesu karty niżej — bez tego rozdzielenia oba się sumowały, stąd za duża
   luka, którą ten patch naprawia). Karta sama w sobie ma margin:0 — cały odstęp od
   góry/dołu sekcji świadomie w jednym miejscu (wrap), żeby nie zgadywać, gdzie
   policzyć ile odstępu faktycznie jest. */
.shop-empty-wrap{padding-block:clamp(32px,5vw,64px)}
.shop-empty-global{max-width:720px;margin:0 auto;padding:52px 40px;text-align:center;background:var(--card);border:1px solid rgba(198,161,94,.24);border-radius:22px;box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
[data-theme="light"] .shop-empty-global{box-shadow:0 16px 38px -20px rgba(74,48,20,.3)}
.shop-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(198,161,94,.12);border:1px solid rgba(198,161,94,.3);color:var(--gold-text);margin-bottom:22px}
.shop-empty-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(24px,3.4vw,30px);color:var(--fg-strong);margin:0 0 14px}
.shop-empty-text{font-size:16px;line-height:1.65;color:var(--fg-body);margin:0 auto 10px;max-width:520px}
.shop-empty-hint{font-size:14.5px;line-height:1.6;color:var(--fg-muted);margin:0 0 30px}
.shop-empty-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:22px}
.shop-empty-hours{font-size:13px;color:var(--fg-faint)}
@media (max-width:480px){
  .shop-empty-global{padding:40px 22px}
  .shop-empty-cta-row{flex-direction:column}
  .shop-empty-cta-row .gr-cta-btn{width:100%;justify-content:center}
}

/* ---------- podstrona produktu ---------- */
.product-detail-wrap{max-width:1100px;margin:0 auto;padding:32px 24px 100px}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--fg-body);margin-bottom:28px}
.back-link:hover{color:var(--gold-text)}
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:800px){
  .product-detail-grid{grid-template-columns:1fr;gap:28px}
}

.product-gallery-main{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#17100B;border:1px solid rgba(198,161,94,.24);box-shadow:0 20px 44px -22px rgba(0,0,0,.8)}
.product-gallery-main img{width:100%;height:100%;object-fit:cover;display:block}
.product-gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.product-gallery-thumb{width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#17100B}
.product-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-gallery-thumb.is-active{border-color:var(--gold-text)}

.product-info-category{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-text);font-weight:700;margin-bottom:12px}
.product-info-name{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(28px,3.6vw,38px);margin:0 0 8px;color:var(--fg-strong)}
.product-info-weight{font-size:14px;color:var(--fg-muted);margin-bottom:16px}
.product-info-price{font-family:'Playfair Display',serif;font-weight:700;font-size:30px;color:var(--price);margin-bottom:10px}
.product-info-stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#6FBF6F;margin-bottom:22px}
.product-info-stock.is-out{color:#C77}
.product-info-stock-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.product-info-desc{font-size:15.5px;line-height:1.7;color:var(--fg-body);margin-bottom:30px}
.product-info-desc p{margin:0 0 12px}

/* produkt wagowy (grodziski_weight) — zastępuje .product-info-price/.product-info-stock
   dla produktów z isWeightBased=true; "elegancko i naturalnie", nie jak alert */
.product-weight-block{background:linear-gradient(165deg,rgba(240,231,216,.04),rgba(240,231,216,.015));border:1px solid rgba(198,161,94,.22);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.product-weight-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0}
.product-weight-label{font-size:13.5px;color:var(--fg-muted)}
.product-weight-value{font-weight:700;font-size:16px;color:var(--fg-strong);text-align:right}
.product-weight-value-price{font-family:'Playfair Display',serif;color:var(--price);font-size:19px}
.product-weight-perkg{text-align:right;font-size:12px;color:var(--fg-faint);margin-top:2px}
.product-weight-disclaimer{font-size:12.5px;line-height:1.6;color:var(--fg-faint);font-style:italic;margin:0 0 24px}

.product-qty-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.qty-stepper{display:flex;align-items:center;gap:2px;border:1px solid rgba(198,161,94,.35);border-radius:10px;overflow:hidden;flex:none}
.qty-stepper button{width:44px;height:48px;flex:none;background:transparent;border:none;color:var(--gold-text);font-size:18px;cursor:pointer}
.qty-stepper button:hover{background:rgba(198,161,94,.14)}
.qty-stepper span{min-width:36px;text-align:center;font-weight:700;font-size:15px;color:var(--fg-strong)}
.product-add-btn{background:#872B2F;color:var(--on-accent);border:1px solid rgba(198,161,94,.5);border-radius:999px;padding:14px 30px;font-weight:700;font-size:15px;cursor:pointer;min-height:48px;box-shadow:0 12px 26px -12px rgba(135,43,47,.8)}
.product-add-btn[disabled]{opacity:.6;cursor:default}
.product-add-btn.is-added{background:#3E6B3E;border-color:#3E6B3E}

/* ---------- panel koszyka (drawer) ---------- */
/* ten sam wzorzec co CART PANEL na głównej stronie: overlay + aside wysuwany z prawej,
   te same wartości blur/box-shadow/animacja (gr-slidein z tokens.css). */
.cart-drawer-overlay{position:fixed;inset:0;z-index:90;background:rgba(8,5,3,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:gr-fade .3s ease}
.cart-drawer-overlay[hidden]{display:none}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(420px,92vw);background:var(--card2);border-left:1px solid rgba(198,161,94,.3);box-shadow:-30px 0 60px -20px rgba(0,0,0,.8);display:flex;flex-direction:column;animation:gr-slidein .35s ease}
.cart-drawer[hidden]{display:none}
.cart-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(198,161,94,.2)}
.cart-drawer-header h3{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;margin:0;color:var(--fg-strong)}
.cart-drawer-close{width:44px;height:44px;border-radius:10px;border:1px solid rgba(198,161,94,.3);background:transparent;color:var(--gold-text);font-size:20px;cursor:pointer}
.cart-drawer-close:hover{background:rgba(198,161,94,.12)}
.cart-drawer-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}

.cart-drawer-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;gap:16px}
.cart-drawer-empty-icon{color:rgba(198,161,94,.55)}
.cart-drawer-empty p{color:var(--fg-muted);font-size:15px;margin:0}
.cart-drawer-shop-btn{background:#872B2F;color:var(--on-accent);padding:13px 26px;border-radius:999px;font-weight:700;font-size:14px;border:none;cursor:pointer}

.cart-drawer-items{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.cart-drawer-item{display:flex;gap:14px;background:var(--chat-bot-bg);border:1px solid var(--field-bd);border-radius:14px;padding:12px}
.cart-drawer-item-img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:#17100B}
.cart-drawer-item-body{flex:1;min-width:0}
.cart-drawer-item-name{font-weight:700;font-size:14px;color:var(--fg-strong);line-height:1.25}
.cart-drawer-item-meta{font-size:12px;color:var(--fg-muted);margin:2px 0 8px}
.cart-drawer-item-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qty-stepper-sm button{width:44px;height:44px;font-size:16px}
.qty-stepper-sm span{font-size:14px;min-width:22px}
.cart-drawer-remove{margin-left:auto;background:transparent;border:none;color:var(--fg-faint);font-size:12px;cursor:pointer;text-decoration:underline}
.cart-drawer-remove:hover{color:#C77}
.cart-drawer-item-note{font-size:11.5px;font-weight:600;color:#C77;margin:6px 0 0;line-height:1.4}
.cart-drawer-item-note[hidden]{display:none}
.cart-drawer-item-total{font-weight:800;font-size:14px;color:var(--gold-text);white-space:nowrap}
.cart-drawer-item-total[hidden]{display:none}

/* produkt wagowy w koszyku (grodziski_weight) — zamiast .cart-drawer-item-total
   (jedna sztywna cena) pokazujemy zakres wagi/ceny wprost w treści pozycji */
.cart-drawer-item-weight{font-size:12px;line-height:1.6;color:var(--fg-body);margin-top:2px}
.cart-drawer-item-weight strong{color:var(--gold-text);font-weight:700}

/* pasek z zakresem wartości koszyka/checkoutu, gdy w środku są produkty wagowe */
.order-summary-weight-note,.cart-drawer-weight-note{font-size:12px;line-height:1.55;color:var(--fg-faint);font-style:italic;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(198,161,94,.14)}

.cart-drawer-footer{padding:20px 24px;border-top:1px solid rgba(198,161,94,.2);background:var(--card2)}
.cart-drawer-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.cart-drawer-total-row span:first-child{font-size:15px;color:var(--fg-body)}
.cart-drawer-total{font-family:'Playfair Display',serif;font-weight:700;font-size:26px;color:var(--fg-strong)}
.cart-drawer-checkout-btn{display:block;width:100%;box-sizing:border-box;text-align:center;background:#872B2F;color:var(--on-accent);border:none;border-radius:12px;padding:16px;font-weight:700;font-size:15.5px;cursor:pointer;box-shadow:0 12px 28px -12px rgba(135,43,47,.9);transition:transform .2s,background .25s}
.cart-drawer-checkout-btn:hover{transform:translateY(-2px);background:#9C343A;color:var(--on-accent)}
.cart-drawer-checkout-btn[disabled]{opacity:.55;cursor:default;box-shadow:none}
.cart-drawer-checkout-btn[disabled]:hover{transform:none;background:#872B2F}
.cart-drawer-closed-note{text-align:center;font-size:12.5px;font-weight:600;color:#C77;margin:10px 0 0;line-height:1.5}
.cart-drawer-note{text-align:center;font-size:12px;color:var(--fg-faint);margin:12px 0 0}

/* ---------- checkout ---------- */
.checkout-wrap{max-width:1200px;margin:0 auto;padding:32px 24px 100px}
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
@media (max-width:860px){
  .checkout-grid{grid-template-columns:1fr}
}

.checkout-form-card{background:var(--card-form);border:1px solid rgba(198,161,94,.24);border-radius:20px;padding:clamp(24px,4vw,36px);box-shadow:0 24px 50px -24px rgba(0,0,0,.85)}
.checkout-section-title{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;color:var(--fg-strong);margin:0 0 18px}
.checkout-section + .checkout-section{margin-top:30px;padding-top:30px;border-top:1px solid rgba(198,161,94,.14)}
.checkout-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:16px}
.checkout-form-row:last-child{margin-bottom:0}
.checkout-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--fg-body)}
.gr-field:focus{border-color:var(--gold-text) !important;outline:2px solid var(--gold-text) !important;outline-offset:1px}
.gr-field.is-invalid{border-color:#B5464B !important}
.field-error{font-size:12px;font-weight:600;color:#C77;margin-top:2px}
.phone-input-group{display:flex;gap:8px}
.phone-country-select{flex:none;width:104px;padding-left:10px;padding-right:6px;cursor:pointer}
.phone-number-input{flex:1;min-width:0}

/* ---------- termin odbioru (grodziski-store/v1/fulfilment-time) ---------- */
.pickup-tomorrow-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;margin-bottom:20px;background:linear-gradient(165deg,rgba(198,161,94,.14),rgba(198,161,94,.05));border:1px solid rgba(198,161,94,.35);border-radius:14px}
.pickup-tomorrow-badge{flex:none;display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:#872B2F;color:var(--on-accent);font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.pickup-tomorrow-date{font-family:'Playfair Display',serif;font-weight:700;font-size:17px;color:var(--fg-strong)}
.pickup-tomorrow-date::first-letter{text-transform:uppercase}
.pickup-slot-label{font-size:13px;font-weight:600;color:var(--fg-body);margin-bottom:10px}
.pickup-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.pickup-slot-btn{min-height:48px;padding:10px 8px;border-radius:12px;border:1px solid rgba(198,161,94,.3);background:var(--field-bg);color:var(--fg-strong);font-weight:700;font-size:15px;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.pickup-slot-btn:hover{border-color:var(--gold-text)}
.pickup-slot-btn.is-selected{background:#872B2F;border-color:#872B2F;color:var(--on-accent)}
.pickup-slot-btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.pickup-slot-grid.is-invalid .pickup-slot-btn{border-color:#B5464B}
.pickup-slot-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.pickup-slot-skeleton span{height:48px;border-radius:12px;background:rgba(240,231,216,.06);animation:pickup-skeleton-pulse 1.4s ease-in-out infinite}
@keyframes pickup-skeleton-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.pickup-error-banner{padding:14px 18px;border-radius:12px;background:rgba(181,70,75,.12);border:1px solid rgba(181,70,75,.4);color:#E39FA2;font-size:13.5px;line-height:1.55}

/* ---------- faktura VAT (checkbox + pola + autouzupełnianie po NIP) ---------- */
.checkout-invoice-toggle{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;font-weight:600;color:var(--fg-strong);cursor:pointer;margin:18px 0;padding:8px;margin-left:-8px;border-radius:10px}
.checkout-invoice-toggle input{margin-top:2px;width:17px;height:17px;accent-color:#872B2F;flex:none}
/* ten sam mechanizm płynnego rozwijania co akordeon FAQ na głównej stronie
   (max-height+opacity, klasa .is-open) — spójna technika w obu miejscach */
.checkout-invoice-fields{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s ease,opacity .45s ease}
.checkout-invoice-fields.is-open{max-height:900px;opacity:1;transition:max-height .55s ease,opacity .45s ease .05s}
.checkout-invoice-fields-inner{padding-top:4px}
.nip-input-wrap{position:relative}
.nip-input-wrap input{width:100%;box-sizing:border-box;padding-right:40px}
.nip-spinner{position:absolute;top:50%;right:13px;width:16px;height:16px;margin-top:-8px;border:2px solid rgba(198,161,94,.3);border-top-color:#C6A15E;border-radius:50%;animation:nip-spin .7s linear infinite}
@keyframes nip-spin{to{transform:rotate(360deg)}}
.field-hint{font-size:12px;font-weight:600;margin-top:2px}
.field-hint.is-success{color:#6FBF6F}
.field-hint.is-muted{color:var(--fg-muted)}
.checkout-company-address-fields{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease}
.checkout-company-address-fields.is-open{max-height:300px;opacity:1;transition:max-height .45s ease,opacity .35s ease .05s}

.shipping-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(198,161,94,.28);border-radius:12px;cursor:pointer;margin-bottom:10px}
.shipping-option:last-child{margin-bottom:0}
.shipping-option input{width:18px;height:18px;accent-color:#872B2F;flex:none}
.shipping-option-name{flex:1;font-size:14.5px;color:var(--fg-strong);font-weight:600}
.shipping-option-price{font-weight:700;color:var(--price);font-size:14.5px}

.payment-method-display{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(198,161,94,.28);border-radius:12px;background:rgba(198,161,94,.06);font-size:14.5px;color:var(--fg-strong);font-weight:600}

.checkout-consent{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;line-height:1.5;color:var(--fg-muted);cursor:pointer;margin-top:22px;padding:8px;margin-left:-8px;border-radius:10px;border:1px solid transparent}
.checkout-consent input{margin-top:2px;width:17px;height:17px;accent-color:#872B2F;flex:none}
.checkout-consent a{color:var(--gold-text)}
.checkout-consent.is-invalid{border-color:#B5464B;background:rgba(181,70,75,.06)}
#terms-error{display:block;margin-top:4px}

.checkout-error{margin-top:18px;padding:12px 14px;border:1px solid rgba(135,43,47,.35);border-radius:12px;background:rgba(135,43,47,.08);color:var(--fg-strong);font-size:13.5px;line-height:1.5}
.checkout-submit-btn{margin-top:24px;width:100%;background:#872B2F;color:var(--on-accent);border:none;border-radius:12px;padding:17px;font-weight:700;font-size:15.5px;cursor:pointer;box-shadow:0 12px 28px -12px rgba(135,43,47,.9);transition:transform .2s,background .25s}
.checkout-submit-btn:hover{transform:translateY(-2px);background:#9C343A}
.checkout-submit-btn[disabled]{opacity:.65;cursor:default;transform:none}

.order-summary-card{background:var(--card2);border:1px solid rgba(198,161,94,.22);border-radius:18px;padding:26px 28px;position:sticky;top:96px}
.order-summary-title{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;color:var(--fg-strong);margin:0 0 18px}
.order-summary-item{display:flex;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(198,161,94,.14)}
.order-summary-item-img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none;background:#17100B}
.order-summary-item-body{flex:1;min-width:0;font-size:13.5px;color:var(--fg-strong)}
.order-summary-item-qty{color:var(--fg-muted);font-size:12.5px}
.order-summary-item-total{font-weight:700;color:var(--gold-text);font-size:13.5px;white-space:nowrap}
.order-summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--fg-body);padding:6px 0}
.order-summary-row.order-summary-pickup{align-items:flex-start;gap:12px}
.order-summary-row.order-summary-pickup span:last-child{text-align:right;font-weight:700;color:var(--fg-strong)}
.order-summary-row.is-total{border-top:1px solid rgba(198,161,94,.2);margin-top:10px;padding-top:14px;font-size:16px;color:var(--fg-strong);font-weight:700}
.order-summary-row.is-total .order-summary-total-value{font-family:'Playfair Display',serif;font-size:24px;color:var(--fg-strong)}

/* ---------- potwierdzenie zamówienia ---------- */
.confirmation-wrap{max-width:560px;margin:0 auto;padding:80px 24px 120px;text-align:center}
.confirmation-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(198,161,94,.14);border:1px solid rgba(198,161,94,.4);color:var(--gold-text);font-size:28px;margin-bottom:22px}
.confirmation-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(26px,3.6vw,34px);margin:0 0 16px;color:var(--fg-strong)}
.confirmation-order-number{font-size:16px;color:var(--fg-strong);margin:0 0 18px}
.confirmation-text{font-size:15px;line-height:1.65;color:var(--fg-body);margin:0 0 14px}
.confirmation-btn{display:inline-block;margin-top:18px;background:#872B2F;color:var(--on-accent);padding:15px 32px;border-radius:999px;font-weight:700;font-size:15px}