/* =====================================================================
   OrderUp — Widget zamawiania (ekran klienta). Korzysta z ../assets/theme.css
   ===================================================================== */

/* ---- TELEFON: ekran zamawiania ma stać w miejscu ----
   1) iOS Safari SAM przybliża stronę po kliknięciu w pole, gdy jego font < 16px
      (i po zamknięciu klawiatury zostawia ekran przesunięty). 16px = zoom nie startuje.
      Skala zostaje 1:1, więc pola nie wyglądają większe — Safari po prostu ich nie powiększa.
   2) touch-action:manipulation wyłącza zoom po dwukrotnym stuknięciu. Safari to RESPEKTUJE,
      w odróżnieniu od `user-scalable=no` w meta viewport, które ignoruje od iOS 10. */
html, body{ touch-action:manipulation; overscroll-behavior-y:contain; }   /* bez „pociągnij, aby odświeżyć”: na Androidzie przeładowywało zamawiarkę w trakcie zamawiania (25.10.2026) */
@media (max-width:720px){
  .input, .select, textarea.input{ font-size:16px; }
}

.wg-top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:14px 22px; background:var(--topbar-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.wg-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.wg-brand .mark{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:18px; flex:0 0 auto; }
.wg-brand b{ font-size:17px; letter-spacing:-.01em; display:block; line-height:1.15; }
.wg-brand small{ font-size:12px; color:var(--muted); }
.wg-open{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text); border:1px solid rgba(47,192,140,.3); background:rgba(47,192,140,.08); padding:6px 12px; border-radius:100px; white-space:nowrap; }
.wg-open .d{ width:7px; height:7px; border-radius:50%; background:var(--ready); }   /* kolor stanu zostaje w kropce, napis w kolorze tekstu (zasada Franka 23.10.2026) */
.wg-themebtn{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text); cursor:pointer; flex:0 0 auto; }
.wg-themebtn:hover{ border-color:var(--accent); color:var(--accent); }

.wg-wrap{ max-width:1320px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
.wg-main{ min-width:0; padding:22px 0 120px; }
.wg-hero{ margin-bottom:18px; }
.wg-hero h1{ font-size:clamp(1.5rem,3.5vw,2.1rem); letter-spacing:-.02em; }
.wg-hero p{ color:var(--muted); margin:6px 0 0; font-size:14px; }
/* Zdjęcie w nagłówku menu (panel admina, „Dane restauracji"). Bez wgranego zdjęcia żadna z tych reguł nie działa.
   Wysokość wynika z paddingu, więc wczytujący się obraz nie przesuwa układu. Napis biały na ciemnym gradiencie. */
.wg-hero-img{ position:relative; overflow:hidden; border-radius:14px; padding:clamp(84px,20vw,170px) 20px 18px; background:#222; color:#fff; }
.wg-hero-img .wg-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.wg-hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.2) 80%, rgba(0,0,0,0) 100%); pointer-events:none; }
.wg-hero-img > :not(.wg-hero-bg){ position:relative; z-index:1; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.wg-hero-img h1, .wg-hero-img .wg-mode-line, .wg-hero-img .wg-mode-line b, .wg-hero-img .wg-mode-line .lnk{ color:#fff; }
.wg-hero-img .wg-hero-tag{ margin:0 0 4px; font-size:14px; font-weight:500; font-style:italic; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); }
/* Hasło stoi już na zdjęciu, więc w górnym pasku go nie powtarzamy (na telefonie pasek i tak je chowa). */
.wg-has-hero-tag #wgTagline{ display:none; }

/* Kategorie i koszyk przyklejają się pod nagłówkiem. --wg-top-h to jego zmierzona wysokość (widget.js, measureTop),
   bo zależy od tenanta: logo, hasło, telefony, plakietka demo. Wartość po przecinku to zapas, zanim JS ją ustawi. */
/* kategorie — sticky pasek */
.wg-cats{ position:sticky; top:var(--wg-top-h,67px); z-index:20; display:flex; gap:8px; overflow-x:auto; padding:12px 0; margin-bottom:6px; background:linear-gradient(var(--bg),var(--bg) 70%,transparent); scrollbar-width:none; }
.wg-cats::-webkit-scrollbar{ display:none; }
.wg-cat{ flex:0 0 auto; padding:9px 16px; border-radius:100px; border:1px solid var(--line-2); background:var(--surface); color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; transition:.14s; }
.wg-cat:hover{ color:var(--text); }
.wg-cat.active{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }

/* sekcje menu */
.wg-section{ margin-bottom:30px; scroll-margin-top:130px; }
.wg-section > h2{ font-size:16px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px; }
/* siatka kafelków: telefon 1 / tablet 2 / desktop 3 — bez rozjeżdżania (równe kolumny) */
.wg-items{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:600px){ .wg-items{ grid-template-columns:1fr 1fr; } }
@media(min-width:1280px){ .wg-items{ grid-template-columns:repeat(3,1fr); } }

.wg-item{ position:relative; display:flex; gap:14px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); cursor:pointer; transition:.14s; }
.wg-item:hover{ border-color:var(--accent); transform:translateY(-2px); }
/* zdjęcie pozycji — KWADRAT, 40% szerokości po lewej; definiuje wysokość kafelka (równe bloczki) */
.wg-thumb{ flex:0 0 40%; aspect-ratio:1; align-self:flex-start; border-radius:11px; border:1px solid var(--line); background:var(--surface-2) center/cover no-repeat; }
.wg-thumb-ph{ display:grid; place-items:center; color:var(--text); font-weight:800; font-size:28px; }
.wg-it-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
/* dół kafelka: cena po lewej, „+” po prawej, na jednej wysokości */
.wg-it-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; }
/* nazwa: górna linia (do 2 linii jeśli długa) */
.wg-it-name{ font-size:15.5px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wg-it-tag{ display:inline-block; vertical-align:middle; font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 7px; border-radius:6px; background:var(--accent-soft); color:var(--text); }
.wg-it-badges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:5px; }
.wg-addr-conf{ font-size:12.5px; color:var(--muted); margin:-2px 0 2px 2px; }
.wg-addr-conf::before{ content:'\2713  '; color:#1f9d55; font-weight:700; }
.wg-map{ margin-top:12px; }
.wg-map-frame{ width:100%; height:190px; border:0; border-radius:12px; display:block; background:var(--surface-2); }
.wg-map-route{ margin-top:8px; }
.wg-it-tag.hot{ background:rgba(196,41,53,.12); color:var(--text); }
/* cena: linijka niżej, do prawej; promocja = stara przekreślona + nowa czerwona */
.wg-price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; flex:1 1 auto; min-width:0; }   /* promo (2 ceny) może się zawinąć/zwęzić — plusik nigdy nie wypada poza kafelek */
.wg-price-old{ font-size:14.5px; font-weight:600; color:var(--text); white-space:nowrap; text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; }
.wg-price-now{ font-weight:800; font-size:15.5px; white-space:nowrap; }
.wg-price-now.promo{ color:var(--accent); }
.wg-it-desc{ font-size:13px; font-weight:500; color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-right:42px; }
.wg-add{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; border:none; background:var(--accent); color:var(--accent-ink); font-size:22px; font-weight:700; cursor:pointer; display:grid; place-items:center; line-height:1; box-shadow:0 4px 12px -4px rgba(0,0,0,.3); }
.wg-add:hover{ filter:brightness(1.06); }
.wg-add.is-added{ background:#1f9d55; color:#fff; font-size:18px; pointer-events:none; }
.wg-add-wrap{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.wg-add-n{ font-weight:800; font-size:14px; color:var(--accent); white-space:nowrap; }
.wg-modal-ft .btn-primary[disabled]{ opacity:.45; cursor:not-allowed; }

/* ===== KOSZYK (desktop, sticky) ===== */
.wg-cart{ position:sticky; top:calc(var(--wg-top-h,67px) + 22px); margin-top:22px; border:1px solid var(--line-2); border-radius:14px; background:var(--surface); overflow:hidden; }
.wg-cart h2{ font-size:15px; padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.wg-cart h2 .cnt{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--muted); }
.wg-cart-body{ max-height:46vh; overflow-y:auto; padding:8px 0; }
.wg-empty{ padding:34px 18px; text-align:center; color:var(--faint); font-size:13.5px; }
.wg-line{ display:flex; gap:10px; padding:11px 18px; align-items:flex-start; }
.wg-line .li-main{ flex:1; min-width:0; }
.wg-line .li-main strong{ font-size:14px; }
.wg-line .li-opt{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }
.wg-line .li-price{ font-family:var(--mono); font-size:13.5px; white-space:nowrap; }
.wg-cart-foot{ border-top:1px solid var(--line); padding:16px 18px; }
/* uchwyt szufladki koszyka (tylko mobile) — strzałka + czerwony licznik pozycji; na desktopie ukryty */
.wg-cart-handle{ display:none; width:100%; align-items:center; justify-content:center; gap:8px; padding:10px 0 7px; border:none; background:none; cursor:pointer; color:var(--muted); }
.wg-cart-handle .wg-ch-arrow{ display:grid; place-items:center; transition:transform .18s; }
.wg-cart.open .wg-ch-arrow{ transform:rotate(180deg); }
.wg-cart-handle .wg-ch-n{ min-width:20px; height:20px; padding:0 6px; border-radius:100px; background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-size:12px; font-weight:700; display:grid; place-items:center; }
/* wariant górny: strzałka zwijania w nagłówku rozwiniętej szufladki (między „Twoje zamówienie" a licznikiem) */
.wg-cart-handle.wg-ch-top{ width:auto; margin:0 auto; padding:2px 12px; }
.wg-go-amt{ display:none; font-family:var(--mono); font-weight:600; }   /* kwota w CTA — tylko zwinięty koszyk mobile */
.wg-sum{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); margin-bottom:6px; }
.wg-sum.total{ color:var(--text); font-size:16px; font-weight:700; margin:10px 0 14px; }
.wg-sum.total b{ font-family:var(--mono); }
/* brakująca kwota do minimum przy dostawie: czerwona i pogrubiona, żeby rzucała się w oczy (testy terenowe 2026-09-14) */
.wg-minwarn{ font-size:15px; font-weight:800; line-height:1.35; color:var(--alert); margin-bottom:10px; }
/* przycisk do kasy poniżej minimum: wygląda na nieaktywny, ale przyjmuje kliknięcie (pokazuje komunikat) */
#wgGo.is-blocked{ opacity:.5; cursor:not-allowed; }
#wgGo.is-blocked:hover{ background:var(--accent); }

/* stepper ilości */
.qty{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.qty button{ width:28px; height:28px; background:var(--surface-2); border:none; color:var(--text); font-size:16px; cursor:pointer; display:grid; place-items:center; }
.qty button:hover{ color:var(--accent); }
.qty span{ min-width:26px; text-align:center; font-family:var(--mono); font-size:13px; }

/* ===== pasek koszyka (mobile) ===== */
.wg-bar{ position:fixed; bottom:0; left:0; right:0; z-index:35; display:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--topbar-bg); backdrop-filter:blur(12px); border-top:1px solid var(--line-2); }
.wg-bar button{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 18px; border:none; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-size:15px; font-weight:700; cursor:pointer; }
.wg-bar .bcount{ background:rgba(0,0,0,.18); border-radius:100px; padding:2px 10px; font-family:var(--mono); font-size:13px; }
.wg-bar .btot{ margin-left:auto; font-family:var(--mono); }

/* ===== widoki pełne (checkout / success) ===== */
.wg-view{ max-width:760px; margin:0 auto; padding:22px 22px 120px; }
.wg-back{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:var(--muted); font-size:13.5px; cursor:pointer; padding:6px 0; margin-bottom:10px; }
.wg-back:hover{ color:var(--text); }
.wg-view h1{ font-size:22px; letter-spacing:-.02em; margin-bottom:6px; }
.wg-block{ border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:18px; margin-top:16px; }
.wg-block > h3{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:14px; }

.wg-seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wg-seg button{ padding:14px; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); font-size:14px; font-weight:600; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
.wg-seg button small{ font-size:11.5px; color:var(--muted); font-weight:500; }
.wg-seg button.sel{ border-color:var(--accent); background:var(--accent-soft); }

.wg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.wg-field{ display:block; }
.wg-block > .wg-field, .wg-block > .wg-grid2{ margin-top:14px; }
.wg-field > span{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.wg-field .req{ color:var(--alert); }
.wg-field.wg-invalid > span{ color:var(--alert); }
.wg-field.wg-invalid .req{ font-size:1.2em; }
.wg-field.wg-invalid .input{ border-color:var(--alert); box-shadow:0 0 0 3px rgba(220,53,69,.16); }
.wg-field.wg-invalid::after{ content:attr(data-err); display:block; color:var(--alert); font-size:12px; font-weight:600; margin-top:6px; }
.wg-field.wg-ok .input{ border-color:#1f9d55; box-shadow:0 0 0 3px rgba(31,157,85,.14); }   /* adres wybrany z listy = potwierdzony */
.wg-field > span.wg-phone{ display:flex; gap:8px; margin-bottom:0; }   /* wyższa specyficzność niż .wg-field > span{display:block} — prefiks i numer w JEDNEJ linii */
.wg-phone .wg-pfx{ flex:0 0 auto; width:118px; min-width:118px; padding-left:8px; padding-right:4px; text-overflow:ellipsis; }
.wg-phone > input{ flex:1; min-width:0; }
.wg-consent{ font-size:12px; color:var(--muted); text-align:center; margin:10px 6px 0; line-height:1.5; }
.wg-consent a{ color:var(--accent); font-weight:600; text-decoration:underline; }
.wg-foot{ text-align:center; padding:18px 12px 4px; font-size:12px; color:var(--muted); }
.wg-foot a{ color:var(--accent); margin:0 6px; font-weight:600; text-decoration:underline; }
.wg-tk-eta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0; padding:12px 14px; border-radius:12px; background:var(--accent-soft); color:var(--text); font-size:14px; font-weight:600; }
.wg-tk-eta .min{ font-size:19px; font-weight:800; }
.wg-err:empty{ display:none; }
.wg-err{ margin-top:12px; padding:11px 13px; border-radius:10px; background:rgba(220,53,69,.10); border:1px solid var(--alert); color:var(--text); font-size:13px; font-weight:600; }
/* koszyk, którego żaden lokal nie wykona w całości: rzędy pozycji do usunięcia (nazwy łamią się w swojej kolumnie, przycisk nigdy nie jest przykryty) */
.wg-combo-head{ margin:0 0 8px; line-height:1.45; }
.wg-combo-row{ display:flex; align-items:center; gap:10px; padding:8px 0 0; margin-top:8px; border-top:1px solid rgba(220,53,69,.25); }
.wg-combo-names{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word; line-height:1.4; font-weight:700; }
.wg-combo-del{ flex:0 0 auto; padding:7px 14px; border-radius:8px; border:1px solid var(--alert); background:var(--surface); color:var(--text); font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.wg-combo-del:hover{ background:var(--alert); color:#fff; }

/* opcje płatności */
.wg-pay{ display:flex; flex-direction:column; gap:9px; }
.wg-pay label{ display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line-2); border-radius:10px; cursor:pointer; transition:.14s; }
.wg-pay label:hover{ border-color:var(--accent); }
.wg-pay label.sel{ border-color:var(--accent); background:var(--accent-soft); }
.wg-pay input{ accent-color:var(--accent); width:18px; height:18px; }
/* Znaki marek płatności: WSZYSTKIE tej samej wysokości (24 px) i z równym pustym polem dookoła.
   Wytyczne Google: znaku Google Pay nie wolno pokazywać w rozmiarze INNYM ani mniejszym niż pozostałe
   opcje płatności, a puste pole wokół wyeksponowanych znaków marek ma być równe. Wcześniej BLIK miał 22 px,
   karty 17 px, a portfele 24 px, przez co Google odrzucał zgłoszenie (marketing review 22 i 24.09.2026). */
.wg-pay .pm-ic{ width:104px; height:44px; display:flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto; }
/* Znaki BLIK, Visa i Mastercard: pliki marek bez przeróbek, więc BEZ zaokrągleń, ramek i cieni od nas.
   Wysokości dobrane tak, żeby sama grafika miała 24 px jak portfele: plik Mastercard ma pole ochronne
   w środku (grafika = 2/3 płótna), plik BLIK-a jest przycięty do samego znaku. Visa w pliku agenta jest
   o połowę niższa od kółek Mastercard i tę proporcję zostawiamy.
   ⚠️ Klasy znaków zaczynają się od mk-, a NIE od pm-: cały wiersz metody dostaje klasę `pm-<id metody>`
   (`pm-blik`, `pm-card`…), więc `.pm-blik` na obrazku spłaszczyłoby wiersz BLIK-a do 24 px. */
.wg-pay .mk-blik{ height:24px; width:auto; display:block; }
/* Dwa kafelki + odstęp muszą zmieścić się w slocie 104 px (50 + 4 + 50). Przy 52 + 6 + 52 para wystawała
   o 3 px z każdej strony i Visa wjeżdżała w kolumnę z tekstem (audyt 01.10.2026). */
.wg-pay .pm-tile{ display:inline-flex; align-items:center; justify-content:center; width:50px; height:34px;
  background:#fff; border:1px solid #e7ebf1; border-radius:5px; flex:0 0 auto; }
.wg-pay .pm-tile img{ height:32px; width:auto; display:block; }
.wg-pay .pm-cards{ display:flex; align-items:center; gap:4px; }
/* oficjalny znak Google Pay: plik ma margines ochronny, ramka pokazuje sam znak (plik bez zmian) */
/* Znak Google Pay: CAŁY plik od Google, bez przycinania. Wytyczne marki wymagają pustego pola wokół znaku
   (0,5 wysokości dużego G z każdej strony) i zakazują zmniejszania go poniżej innych logo w kasie, dlatego
   wysokość 44 px daje sam znaczek ~24 px, czyli tyle co BLIK i Apple Pay obok. Wcześniejsze kadrowanie ramką
   zjadało pole ochronne i Google odrzucił przez to zgłoszenie (marketing review 22.09.2026). */
.wg-pay .pm-gpay{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.wg-pay .pm-gpay img{ height:44px; width:auto; max-width:none; display:block; }
/* oficjalny przycisk Google Pay (createButton, tryb fill) w miejscu naszego „Zamawiam i płacę” */
.wg-gpay-btn{ height:54px; width:100%; }
.wg-gpay-btn > div, .wg-gpay-btn button{ width:100% !important; height:100% !important; }
/* oficjalny znak Apple Pay: plik Apple bez zmian, bez cienia i bez zaokrągleń od nas */
.wg-pay .pm-apay{ height:24px; width:auto; display:block; flex:0 0 auto; }
/* oficjalny przycisk Apple Pay rysowany przez Safari (tylko na urządzeniach z Apple Pay) */
.wg-apay-btn{ display:block; width:100%; height:54px; border:0; padding:0; cursor:pointer; border-radius:12px;
  -webkit-appearance:-apple-pay-button; -apple-pay-button-type:order; -apple-pay-button-style:black; }
.wg-apay-btn.on-dark{ -apple-pay-button-style:white; }   /* ciemna kasa: biały przycisk, jak każą wytyczne Apple */
.wg-pay .pm-cash{ display:flex; color:var(--muted); }
.wg-pay .pm-cash svg{ width:24px; height:24px; }
.wg-pay .pm-main{ flex:1; }
.wg-pay .pm-main strong{ font-size:14px; display:block; }
.wg-pay .pm-main small{ font-size:12px; color:var(--faint); }

.wg-deliveryfee{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-top:12px; padding:11px 14px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line); }
.wg-deliveryfee svg{ color:var(--text); flex:0 0 auto; }

.wg-cta{ position:sticky; bottom:0; padding:16px 0 4px; background:linear-gradient(transparent,var(--bg) 30%); margin-top:18px; }

/* ===== sukces ===== */
.wg-success{ text-align:center; padding-top:30px; }
.wg-success .ok{ width:70px; height:70px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:rgba(47,192,140,.12); border:1px solid rgba(47,192,140,.4); color:var(--text); }
.wg-success h1{ margin-bottom:8px; }
.wg-success .code{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--accent); margin:14px 0; }
.wg-success p{ color:var(--muted); max-width:46ch; margin:8px auto; font-size:14px; }

/* ===== modal produktu ===== */
.wg-modal-back{ position:fixed; inset:0; z-index:60; background:rgba(3,7,13,.72); backdrop-filter:blur(4px); display:grid; place-items:center; padding:18px; animation:fade .15s; overflow:hidden; touch-action:none; overscroll-behavior:contain; }
.wg-modal{ width:100%; max-width:460px; max-height:88vh; overflow-y:auto; overflow-x:hidden; touch-action:pan-y; overscroll-behavior:contain; border-radius:16px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow); }
.wg-modal-hd{ padding:20px 20px 4px; }
.wg-modal-hd{ position:relative; }
.wg-modal-hd h3{ font-size:19px; padding-right:40px; }
.wg-modal-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:var(--surface-2); color:var(--muted); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2; transition:.14s; }
.wg-modal-x:hover{ background:var(--surface-3); color:var(--text); }
.wg-modal-hd p{ margin:6px 0 0; font-size:13.5px; color:var(--muted); }
.wg-mgroup{ padding:16px 20px; border-top:1px solid var(--line); }
.wg-mgroup h4{ font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.wg-mgroup .gtag{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line-2); padding:2px 7px; border-radius:5px; }
.wg-opt{ display:flex; align-items:center; gap:11px; padding:10px 0; cursor:pointer; }
.wg-opt input{ accent-color:var(--accent); width:18px; height:18px; }
.wg-opt .o-name{ flex:1; font-size:14px; }
.wg-opt .o-price{ font-family:var(--mono); font-size:13px; color:var(--muted); }
.wg-opt-step{ cursor:default; }
.o-step{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
.o-step .o-sb{ width:30px; height:30px; border:1px solid var(--line-2); background:var(--surface); color:var(--text); border-radius:8px; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.o-step .o-sb:hover{ border-color:var(--accent); }
.o-step .o-qn{ min-width:32px; text-align:center; font-family:var(--mono); font-size:14px; font-weight:700; }
.wg-modal-ft{ position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:14px 20px; display:flex; align-items:center; gap:12px; }
.wg-modal-ft .qty{ flex:0 0 auto; }
.wg-modal-ft .btn{ flex:1; min-width:0; }
/* CTA modalu: na wąskim ekranie skróć „Dodaj do koszyka · kwota" -> „Dodaj · kwota", żeby przycisk się mieścił */
.wg-cta-short{ display:none; }
@media(max-width:560px){ .wg-modal-ft .wg-cta-full{ display:none; } .wg-modal-ft .wg-cta-short{ display:inline; } }
/* Zabezpieczenie: przycisk NIGDY nie wychodzi poza okno — gdy za ciasno obok steppera,
   przeskakuje do własnego, pełnego wiersza (zamiast się przycinać). */
.wg-modal-ft{ flex-wrap:wrap; }
.wg-modal-ft .btn{ min-width:180px; white-space:nowrap; }

/* tryb osadzenia (iframe na cudzej stronie / w apce) — bez własnego nagłówka
   (PRZED blokiem mobile, żeby mobilne top:auto wygrywało z desktopowym top:18px) */
.embed .wg-top{ display:none; }
.embed .wg-cats{ position:static; }   /* w apce kategorie NIE wiszą nad menu — przewijają się z treścią (miejsce dla pozycji) */
.embed .wg-cart{ top:18px; margin-top:18px; }   /* ten sam odstęp od góry co menu (.embed .wg-main) */
.embed .wg-main{ padding-top:18px; }

/* ===== responsywność =====
   Mobile (strona i apka = to samo): koszyk to SZUFLADKA przyklejona do dołu.
   Zwinięta (domyślnie): uchwyt (strzałka + czerwony licznik pozycji) + suma + CTA.
   Rozwinięta: lista pozycji wysuwa się NAD linią oddzielającą (granicą szufladki jest
   linia między pozycjami a częścią z ceną — część z ceną widoczna zawsze). */
@media(max-width:900px){
  .wg-wrap{ grid-template-columns:1fr; padding:0 16px; }
  .wg-main{ padding-bottom:24px; }
  .wg-cats{ top:var(--wg-top-h,65px); }
  .wg-bar{ display:none !important; }    /* stary pływający pasek zastąpiony szufladką */

  .wg-cart{
    display:block; position:fixed; top:auto; left:0; right:0; bottom:0; z-index:40;
    margin:0; border:none; border-top:1px solid var(--line-2);
    border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(10,10,10,.18);
    padding-bottom:env(safe-area-inset-bottom);
    touch-action:none;                            /* palec na koszyku NIE przewija menu pod spodem (tapy działają) */
  }
  .embed .wg-cart{ top:auto; margin:0; }          /* nadpisuje desktopowe .embed top i odstęp */
  .wg-cart.wg-cart-empty{ display:none; }         /* pusty koszyk nie zasłania menu */
  .wg-cart-drawer{ display:none; }                /* szufladka (nagłówek + pozycje) domyślnie schowana */
  .wg-cart.open .wg-cart-drawer{ display:block; }
  .wg-cart-body{ max-height:34vh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }   /* rozwinięta lista przewija się normalnie */
  .wg-cart-handle{ display:flex; padding:6px 0 4px; }
  /* ZWINIĘTY koszyk = maksymalnie niski (najważniejsze są pozycje menu):
     tylko uchwyt + CTA z kwotą; Produkty/Dostawa/Razem widać po rozwinięciu (ostrzeżenie o minimum zawsze) */
  .wg-cart:not(.open) .wg-sum{ display:none; }
  .wg-cart:not(.open) .wg-cart-foot{ padding:8px 14px 12px; border-top:none; }   /* linia zbędna, gdy nad CTA jest tylko uchwyt */
  .wg-cart:not(.open) .wg-go-amt{ display:inline; }   /* zwinięty: kwota w przycisku (rozwinięty ma „Razem", desktop ma pełne sumy) */
  body.wg-cart-on .wg-main{ padding-bottom:150px; }   /* prześwit: ostatnie pozycje menu nie chowają się pod (niskim) zwiniętym koszykiem */
}

@media(max-width:560px){
  .wg-top{ padding:12px 16px; }
  .wg-brand small{ display:none; }
  .wg-open{ display:none; }                 /* ukryj badge „Otwarte" na wąskim ekranie -> nazwa mieści się w 1 linii */
  .wg-brand b{ font-size:15.5px; }
  .wg-grid2{ grid-template-columns:1fr; }
  .wg-item{ gap:12px; padding:12px; }
  .wg-view{ padding:16px 16px 110px; }
}

/* ===== ekran startowy: dostawa / odbiór, potem lokal (wybór PRZED menu) ===== */
.wg-start{ max-width:560px; margin:0 auto; padding:34px 22px 120px; }
.wg-start h1{ font-size:24px; letter-spacing:-.02em; text-align:center; margin-bottom:22px; }
.wg-start .wg-start-sub{ text-align:center; color:var(--muted); font-size:14px; margin:-12px 0 20px; }
.wg-start-opts{ display:grid; gap:12px; }
.wg-start-opt{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:18px; border:1.5px solid var(--line-2); border-radius:16px; background:var(--surface); color:var(--text); cursor:pointer; box-shadow:var(--shadow); transition:.14s; font-family:inherit; }
.wg-start-opt:hover{ border-color:var(--accent); transform:translateY(-1px); }
.wg-start-opt .ic{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--text); flex:0 0 auto; }
.wg-start-opt .ic svg{ width:26px; height:26px; }
.wg-start-opt .tx{ flex:1; min-width:0; }
.wg-start-opt b{ display:block; font-size:17px; line-height:1.2; }
.wg-start-opt small{ display:block; color:var(--muted); font-size:13px; margin-top:4px; line-height:1.35; }
.wg-start-opt .chev{ color:var(--faint); flex:0 0 auto; display:grid; place-items:center; }
.wg-start-opt[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.wg-start-opt .tag-closed{ display:inline-block; margin-top:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--alert); }
/* przewoźnik wstrzymał dostawy: czerwona maska z białym napisem na kafelku dostawy (kafelek pod spodem trzyma wysokość) */
.wg-start-opt.is-paused{ position:relative; overflow:hidden; }
.wg-start-opt.is-paused[disabled]{ opacity:1; }
.wg-start-mask{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px 18px; background:#c62828; color:#fff; font-size:14.5px; font-weight:700; line-height:1.3; }
/* ekran „nie ma kto przywieźć zamówienia": czerwony kafelek z informacją, „lub", kafelek odbioru */
.wg-start-opt.wg-nocourier{ justify-content:center; text-align:center; background:#c62828; border-color:#c62828; color:#fff; font-size:15.5px; font-weight:700; line-height:1.35; padding:22px 20px; }
.wg-start-opt.wg-nocourier:hover{ border-color:#c62828; }
.wg-start-or{ text-align:center; font-size:13px; color:var(--text); }
/* pod nagłówkiem menu: wybrana forma + „Zmień" */
.wg-mode-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); margin:6px 0 0; font-size:14px; }
.wg-mode-line b{ color:var(--text); }
.wg-mode-line .lnk{ background:none; border:none; color:var(--accent); font-weight:700; font-size:13px; cursor:pointer; padding:0; text-decoration:underline; font-family:inherit; }
/* kasa: blok „Sposób odbioru" */
.wg-fulsum{ display:flex; align-items:center; gap:12px; }
.wg-fulsum .fs-main{ flex:1; min-width:0; }
.wg-fulsum .fs-main b{ display:block; font-size:15px; }
.wg-fulsum .fs-main small{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.wg-fulsum .btn{ flex:0 0 auto; padding:8px 14px; font-size:13px; white-space:nowrap; }
.wg-pick-problem{ margin-top:12px; padding:11px 13px; border-radius:10px; background:rgba(220,53,69,.10); border:1px solid var(--alert); color:var(--text); font-size:13px; font-weight:600; }
/* komunikat na środku ekranu (znika sam) */
.wg-toast{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:80; width:max-content; max-width:min(92vw,420px); padding:16px 20px; border-radius:14px; background:rgba(20,20,20,.94); color:#fff; font-size:15px; font-weight:700; text-align:center; line-height:1.4; box-shadow:0 18px 50px rgba(0,0,0,.35); animation:wgToastIn .18s; pointer-events:none; }
.wg-toast.warn{ background:rgba(176,28,40,.96); }
@keyframes wgToastIn{ from{ opacity:0; transform:translate(-50%,-46%); } to{ opacity:1; transform:translate(-50%,-50%); } }
/* „pierwszy gratis": dodatek bez dopłaty */
.wg-opt .o-price.free, .wg-line .li-opt .free{ color:#1f9d55; font-weight:700; }

/* ===== kupon rabatowy ===== */
.wg-coupon{ display:flex; gap:8px; margin-top:12px; }
.wg-coupon .input{ flex:1; }
.wg-coupon .btn{ flex:0 0 auto; white-space:nowrap; }
.wg-coupon-msg{ font-size:12.5px; margin-top:6px; }
.wg-coupon-msg.err{ color:var(--alert); }
.wg-sum.wg-sum-disc{ color:var(--ready); }
.wg-sum-disc span:first-child{ display:flex; align-items:center; gap:8px; }
.wg-sum-disc button{ background:none; border:none; color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer; padding:0; }

/* ===== BLIK na stronie ===== */
.wg-blik{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.wg-blik .wg-blik-l{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.wg-blik .input{ letter-spacing:5px; font-size:18px; max-width:210px; font-family:var(--mono); }
.wg-blik small{ display:block; font-size:12px; color:var(--faint); margin-top:7px; }

/* karta on-site + portfele (Apple/Google Pay) */
.wg-card{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.wg-card .wg-field{ margin-bottom:10px; }
.wg-card .input{ font-family:var(--mono); letter-spacing:1px; }
.wg-card .wg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wg-cardno{ position:relative; display:block; }
/* Miejsce na dwa kafelki logo po prawej (10 + 36 + 4 + 36 px) plus 10 px oddechu, inaczej pełny numer karty
   wchodził pod logo Visy (audyt 01.10.2026). */
.wg-cardno .input{ width:100%; padding-right:96px; }
.wg-cardno-brands{ position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:4px; pointer-events:none; }
.wg-cardno-brands .pm-tile{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:24px;
  background:#fff; border:1px solid #e7ebf1; border-radius:4px; }
.wg-cardno-brands .pm-tile img{ height:24px; width:auto; display:block; }
/* Najwęższe telefony: pełny numer karty nie mieści się obok logo, a te same znaki są tuż wyżej w wierszu
   „Karta online", więc w polu numeru je chowamy i oddajemy miejsce cyfrom (audyt 01.10.2026). */
@media (max-width: 360px){ .wg-cardno-brands{ display:none; } .wg-cardno .input{ padding-right:14px; } }

/* ===== śledzenie zamówienia ===== */
.wg-track h1{ margin-bottom:14px; }
.wg-tk-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.wg-tk-head .lbl{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.wg-tk-head .code{ font-family:var(--mono); font-size:21px; font-weight:700; letter-spacing:.5px; color:var(--accent); }
.wg-tk-head .eta{ text-align:right; flex:0 0 auto; }
.wg-tk-head .eta span{ display:block; font-size:11px; color:var(--muted); }
.wg-tk-head .eta b{ font-size:15px; }
.wg-tk-steps{ margin:16px 0; padding:18px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.tk-step{ display:flex; gap:14px; }
.tk-rail{ display:flex; flex-direction:column; align-items:center; width:28px; flex:0 0 auto; }
.tk-dot{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--bg-2); border:2px solid var(--line-2); color:#fff; }
.tk-line{ width:2px; flex:1; min-height:22px; background:var(--line-2); margin:3px 0; }
.tk-step.done .tk-dot{ background:var(--ready); border-color:var(--ready); }
.tk-step.done .tk-line{ background:var(--ready); }
.tk-step.active .tk-dot{ background:var(--accent); border-color:var(--accent); position:relative; }
.tk-step.active .tk-dot::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent); animation:tkpulse 1.6s ease-out infinite; }
@keyframes tkpulse{ 0%{ transform:scale(.85); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } }
.tk-body{ padding-bottom:18px; }
.tk-step:last-child .tk-body{ padding-bottom:0; }
.tk-t{ font-size:14.5px; font-weight:600; }
.tk-step.todo .tk-t{ color:var(--muted); font-weight:500; }
.tk-s{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.wg-tk-done{ font-size:12.5px; color:var(--muted); padding:11px 14px; background:var(--bg-2); border-radius:9px; }
.wg-tk-done{ color:var(--text); font-weight:600; }
.wg-tk-foot{ margin-top:18px; }
.wg-tk-fail{ text-align:center; padding:26px 18px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.wg-tk-fail .ic{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; background:rgba(229,72,77,.12); color:var(--text); }
.wg-tk-fail h2{ font-size:18px; }
.wg-tk-fail .code{ font-family:var(--mono); font-size:17px; font-weight:700; margin:8px 0; color:var(--muted); }
.wg-tk-fail p{ font-size:13.5px; color:var(--muted); max-width:42ch; margin:8px auto 0; }

/* ===== overlay potwierdzenia BLIK ===== */
.wg-ov{ position:fixed; inset:0; z-index:80; background:rgba(3,7,13,.6); display:flex; align-items:center; justify-content:center; padding:20px; animation:fade .15s; }
.wg-ov-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:16px; padding:28px 24px; max-width:340px; text-align:center; }
.wg-ov-card h3{ font-size:17px; margin:14px 0 6px; }
.wg-ov-card p{ font-size:13.5px; color:var(--muted); }
/* instancja pokazowa: plakietka w nagłówku i okno symulowanego portfela */
.wg-demo{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.1em; padding:5px 10px; border-radius:100px; background:var(--text); color:var(--bg); white-space:nowrap; }
.wg-demo + .wg-open{ margin-left:8px; }
.wg-demo-sheet{ width:100%; }
.wg-demo-sheet h3{ font-size:26px; margin:2px 0 18px; }
.wg-demo-mark{ display:flex; justify-content:center; margin-bottom:10px; }
.wg-demo-sheet .btn + .btn{ margin-top:8px; }
.wg-ov-spin{ width:38px; height:38px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--accent); margin:0 auto; animation:tkspin .8s linear infinite; }
@keyframes tkspin{ to{ transform:rotate(360deg); } }

/* ===== autopodpowiedzi adresu ===== */
.wg-ac{ position:relative; display:block; }
.wg-suggest{ position:absolute; top:100%; left:0; right:0; z-index:40; margin-top:4px; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 12px 30px -10px rgba(0,0,0,.4); max-height:240px; overflow-y:auto; }
.wg-suggest:empty{ display:none; }
.wg-suggest button{ display:block; width:100%; text-align:left; padding:10px 13px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--text); font:inherit; font-size:13.5px; cursor:pointer; }
.wg-suggest button:last-child{ border-bottom:0; }
.wg-suggest button:hover{ background:var(--surface-2); }

/* ===== telefony lokali (nagłówek) + kontakt na ekranie statusu ===== */
.wg-phones{ display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
.wg-phones a{ color:var(--accent); text-decoration:none; font-weight:600; }
.wg-tk-contact{ margin-top:14px; padding:11px 14px; background:var(--surface-2); border-radius:10px; font-size:13.5px; color:var(--muted); text-align:center; }
.wg-tk-contact a{ color:var(--text); font-weight:700; text-decoration:underline; text-underline-offset:2px; }   /* link w ramce: czarny i podkreślony (zasada Franka 23.10.2026) */

/* ===== badge stanu (Otwarte / Zamknięte / Chwilowo) ===== */
.wg-open.is-closed{ color:var(--faint); border-color:var(--line-2); background:var(--surface-2); }
.wg-open.is-closed .d{ background:var(--faint); }
.wg-open.is-pause .d{ background:var(--prep); }
.wg-open.is-pause{ color:var(--text); border-color:rgba(217,154,54,.32); background:rgba(217,154,54,.09); }

/* ===== pozycja chwilowo niedostępna (wyszarzona) ===== */
.wg-item-off{ opacity:.58; cursor:default; box-shadow:none; }
.wg-item-off:hover{ border-color:var(--line); transform:none; }
.wg-item-off .wg-thumb{ filter:grayscale(.75); }
.wg-it-off{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:6px; background:var(--surface-2); color:var(--faint); border:1px solid var(--line-2); }

/* ===== nakładka: zamknięte / nie przyjmujemy zamówień ===== */
.wg-gate{ position:fixed; inset:0; z-index:90; background:rgba(3,7,13,.55); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:22px; animation:fade .15s; }
.wg-gate-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:18px; padding:30px 26px; max-width:360px; text-align:center; box-shadow:var(--shadow); }
.wg-gate-ic{ width:60px; height:60px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text); }
.wg-gate-card h3{ font-size:19px; margin-bottom:8px; }
.wg-gate-card p{ font-size:14px; color:var(--muted); line-height:1.55; }
.wg-gate-card p b{ color:var(--text); }

/* checkboxy kasy (faktura / priorytet) — custom, nowoczesne (zaokrąglone, akcent brandu, animowany ptaszek) */
.wg-inv{ display:flex; align-items:center; gap:10px; font-size:14px; margin:0 0 10px; cursor:pointer; color:var(--text); -webkit-tap-highlight-color:transparent; user-select:none; }
.wg-inv input{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:22px; height:22px; margin:0; border:2px solid var(--line-2); border-radius:7px; background:var(--surface); cursor:pointer; transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .1s ease; }
.wg-inv input:hover{ border-color:var(--accent); }
.wg-inv input:active{ transform:scale(.92); }
.wg-inv input:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--line-2); }
.wg-inv input:checked{ background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.4 3.4L13 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat; border-color:var(--accent); }
.wg-inv > span{ line-height:1.35; }
.wg-seg button:disabled{ opacity:.45; cursor:not-allowed; }

/* menu tylko z serwera: ekran oczekiwania i ekran bledu (nigdy nie pokazujemy pozycji z pliku zapasowego) */
.wg-gate-wait{ padding:70px 16px; text-align:center; color:var(--muted); font-size:14px; }
.wg-gate-wait .wg-ov-spin{ margin-bottom:16px; }
.wg-gate-err{ max-width:460px; margin:56px auto; padding:0 16px; text-align:center; }
.wg-gate-err h1{ font-size:22px; letter-spacing:-.02em; margin-bottom:10px; }
.wg-gate-err p{ color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:16px; }
.wg-gate-tels{ margin:-6px 0 16px; font-weight:600; }
.wg-gate-tels a{ color:var(--accent); text-decoration:none; }

/* podpowiedź samej ulicy (bez numeru domu) - wygląda inaczej niż gotowy adres */
.wg-suggest button.is-street{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.wg-suggest button.is-street small{ color:var(--muted); font-size:11.5px; white-space:nowrap; }