/* ============================================================
   V3S BURGER - eshop (objedname)
   company 597 / factory 763
   URL: https://objedname.eu/v3sburger-cz#home
   Web klienta: https://v3sburger.cz/delivery (eshop je na proklik,
   ladi se k nemu)

   BRAND - cernobila + antracit, tmavy rezim jako jejich web
     navbar, paticka     #111111
     podklad stranky     #1C1C1C  (presne barva webu)
     karty, panely       #262626
     pole, vyvysene      #2F2F2F
     linky               #3A3A3A
     akcent = antracit   #4A4A4A  (aktivni plochy, vedlejsi tlacitka)
     text                #FFFFFF, tlumeny #A6A6A6
     hlavni akce         BILE tlacitko s cernym textem (jako "Prijmout"
                         na jejich webu) - kosik, objednat, "+" na karte
     pismo               Rubik 400-700 (Google Fonts, stejne jako web)
     zaobleni            8px

   Sablona je postavena na kostre bistro-strec.css (stejna verze
   zakladniho CSS - overeno bajt po bajtu) a tmave plochy prebira
   z bowling-bar.css.

   ------------------------------------------------------------
   JAK FUNGUJE TMAVY REZIM
   ------------------------------------------------------------
   1) :root - sedou skalu zakladu otacime (gray-100 = tmava,
      gray-900 = svetla). Zaklad ji pouziva na hover plochy, linky a
      barvu textu v polich, takze se prebarvi sama.
   2) --color-white NEMENIME. Zaklad ji ma na 27 plochach (bile
      panely), ale i jako barvu textu a ikon na tlacitkach - otoceni by
      zhaslo popisky. Bile plochy proto prepisujeme jmenovite
      (sekce 9 a 10, seznam vytazeny ze zakladu).
   3) Vsech 41 sedych ikon (--icon-*-gray) presmerovano na bile
      varianty ze /ui/system/icons/white/ - vsechny existuji (overeno
      curl, image/svg+xml; neexistujici soubor vraci 404).
   4) --color-primary-* = antracit. Zaklad z nej dela gradient vsech
      .gradient-btn s BILYM textem i ikonami, takze zustavaji citelne.
      Zamerne tu NENI blanketni pravidlo na .gradient-btn (past z
      Strece - zhasinalo ikony tlacitek), hlavni akce se stylujou
      jmenovite.
      POZOR: primary pouziva zaklad i jako BARVU TEXTU (gradientovy
      text nadpisu sekci, body uctu, alergeny, casovac QR platby) -
      antracit na tmavem by byl necitelny, proto jsou prebarvene.

   ------------------------------------------------------------
   PLATFORMA
   ------------------------------------------------------------
   - diff jde na KONEC zakladniho style.css -> @import se ignoruje,
     font je proto pres @font-face primo tady
   - clamp()/min()/max() platforma zahazuje - cela deklarace zmizi
   - fotku polozky kresli ::before pres background-image: inherit, coz
     iOS Safari (26.2) na pseudo-elementu nekresli. Pojistka ma DVE
     casti a patri k sobe:
       JS  v3s-burger.js (vlastni JS v adminu) - blok "iOS 26.2 Safari
           BUG" nastavi kazde .item-photo-content inline --item-bg,
       CSS @supports (-webkit-touch-callout: none) bloky nize ji na
           Apple zarizenich pouziji.
     Bez JS by CSS blok fotky na iPhonu SMAZAL (var() bez hodnoty).
     Stejne je to nasazene na Strecu i Bowlingu (overeno v scripts.js).
   - kategorie "Tydenni menu" ma v adminu ikonu denniho menu ->
     data-food-type*="daily_menu" a zaklad polozkam vypne fotku.
     Oprava je v sekci 6 (stejna jako na Bowlingu).
   - LOGO je cerne PNG na pruhlednem pozadi -> na tmavem navbaru
     neviditelne. Invertujeme ho na bile (sekce 4). Kdyby klient
     nahral svetle/barevne logo, filtr SMAZAT.
   ============================================================ */


/* ============================================================
   1. FONTY - Rubik z Google Fonts
   Jeden variabilni soubor na sadu znaku (osa 300-900), proto
   font-weight jako rozsah. latin-ext nese ceske znaky.
   ============================================================ */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   2. PROMENNE
   ============================================================ */

:root {
  /* vlastni tokeny sablony */
  --v3s-black: #111111;
  --v3s-bg: #1C1C1C;
  --v3s-card: #262626;
  --v3s-raised: #2F2F2F;
  --v3s-line: #3A3A3A;
  --v3s-accent: #4A4A4A;
  --v3s-accent-hover: #5A5A5A;
  --v3s-white: #FFFFFF;
  --v3s-muted: #A6A6A6;
  --v3s-radius: 8px;

  /* akcent = antracit (gradient .gradient-btn jde z 500 do 600) */
  --color-primary-500: #4A4A4A;
  --color-primary-600: #3A3A3A;
  /* zaklad ho pouziva u .sticker-timed, ale nedefinuje */
  --color-brand-500: #4A4A4A;
  /* focus poli a jejich popisku */
  --color-info-500: #FFFFFF;

  /* otocena seda skala */
  --color-gray-100: #262626;
  --color-gray-200: #2F2F2F;
  --color-gray-300: #3A3A3A;
  --color-gray-400: #444444;
  --color-gray-500: #6B6B6B;
  --color-gray-600: #A6A6A6;
  --color-gray-700: #D4D4D4;
  /* gray-800 ma zaklad jen jako pozadi prekladace v navbaru - drzime tmave */
  --color-gray-800: #2F2F2F;
  --color-gray-900: #F2F2F2;

  /* navbar (.toppanel::before) a paticka */
  --color-dark-800: #111111;
  --color-dark-900: #111111;

  /* zaobleni 8px; --border-radius-max (pilulka prepinacu) a
     --border-radius-rounded (kolecka) nechavame */
  --border-radius-sm: 8px;
  --border-radius-md: 8px;
  --border-radius-lg: 8px;
  --border-radius-xl: 8px;

  /* sede ikony -> bile */
  --icon-arrow_bottom-gray: url('/ui/system/icons/white/arrow_bottom.svg');
  --icon-arrow_left-gray: url('/ui/system/icons/white/arrow_left.svg');
  --icon-attachments-gray: url('/ui/system/icons/white/attachments.svg');
  --icon-calculator-gray: url('/ui/system/icons/white/calculator.svg');
  --icon-calendar-gray: url('/ui/system/icons/white/calendar.svg');
  --icon-card-gray: url('/ui/system/icons/white/credit_card.svg');
  --icon-cart-gray: url('/ui/system/icons/white/cart.svg');
  --icon-cart_empty-gray: url('/ui/system/icons/white/cart_empty.svg');
  --icon-cash-gray: url('/ui/system/icons/white/cash.svg');
  --icon-cheese-gray: url('/ui/system/icons/white/cheese.svg');
  --icon-coupons-gray: url('/ui/system/icons/white/cupons.svg');
  --icon-current-location-gray: url('/ui/system/icons/white/current-location.svg');
  --icon-customer-gray: url('/ui/system/icons/white/customer.svg');
  --icon-delete-gray: url('/ui/system/icons/white/delete.svg');
  --icon-email-gray: url('/ui/system/icons/white/email.svg');
  --icon-fish-gray: url('/ui/system/icons/white/fish.svg');
  --icon-fruits-gray: url('/ui/system/icons/white/fruits.svg');
  --icon-heart-gray: url('/ui/system/icons/white/heart.svg');
  --icon-heart_active-gray: url('/ui/system/icons/white/heart_active.svg');
  --icon-information-gray: url('/ui/system/icons/white/information.svg');
  --icon-magnify-gray: url('/ui/system/icons/white/magnify.svg');
  --icon-meat-gray: url('/ui/system/icons/white/meat.svg');
  --icon-minus-gray: url('/ui/system/icons/white/minus.svg');
  --icon-mobile-gray: url('/ui/system/icons/white/mobile.svg');
  --icon-order_new-gray: url('/ui/system/icons/white/order_new.svg');
  --icon-orders-gray: url('/ui/system/icons/white/orders.svg');
  --icon-package-gray: url('/ui/system/icons/white/package.svg');
  --icon-pencil-gray: url('/ui/system/icons/white/pencil.svg');
  --icon-pizza_base-gray: url('/ui/system/icons/white/base.svg');
  --icon-plus-gray: url('/ui/system/icons/white/plus.svg');
  --icon-pointer-gray: url('/ui/system/icons/white/pointer.svg');
  --icon-points-gray: url('/ui/system/icons/white/points.svg');
  --icon-repeat-arrow: url('/ui/system/icons/white/repeat_arrow.svg');
  --icon-star-gray: url('/ui/system/icons/white/star.svg');
  --icon-time-gray: url('/ui/system/icons/white/time.svg');
  --icon-training-gray: url('/ui/system/icons/white/training.svg');
  --icon-transport-gray: url('/ui/system/icons/white/transport.svg');
  --icon-vegetable-gray: url('/ui/system/icons/white/vegetable.svg');
  --icon-wallet-gray: url('/ui/system/icons/white/wallet.svg');
  --icon-weight-gray: url('/ui/system/icons/white/weight.svg');
  --icon-wheat-gray: url('/ui/system/icons/white/wheat.svg');

  /* hvezdicky hodnoceni - zaklad je ma zelene */
  --icon-star-green: url('/ui/system/icons/white/star.svg');
  --icon-star_active-green: url('/ui/system/icons/white/star_active.svg');
}


/* ============================================================
   3. ZAKLADNI TYPOGRAFIE A PODKLAD
   ============================================================ */

html,
body {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--v3s-bg);
}

body {
  color: var(--v3s-white);
}

/* zaklad ma na mape vlastni 'Primary' natvrdo */
.map-container a.back-btn.js-back-to-contact {
  font-family: 'Rubik', sans-serif;
}

h1, h2, h3, h5 {
  font-weight: 700;
}

/* nacitaci obrazovka - jinak pred nactenim blikne bila */
.loading {
  background-color: var(--v3s-bg);
}


/* ============================================================
   4. HLAVICKA + STAVOVY PRUH
   Pozadi navbaru nese .toppanel::before v --color-dark-800
   (nastaveno v :root). Ikony jsou v zakladu bile.
   ============================================================ */

.toppanel {
  border-bottom: 1px solid var(--v3s-black);
}

/* Logo je cerne PNG na pruhlednem pozadi. invert(1) z cerne udela
   bilou, pruhlednost zustane. Kdyby klient nahral svetle logo, SMAZAT. */
.toppanel .js-home-button img,
.toppanel > a > img {
  filter: invert(1);
}

/* pruh "Mame zavreno, oteviram opet za ..." - zaklad bily */
.notification-box {
  background-color: var(--v3s-card);
  color: var(--v3s-white);
}

.notification-box::before {
  border-bottom-color: var(--v3s-line);
}

.notification-box .notf-inform,
.notification-box .notf-info,
.notification-box .notf-wrong,
.notification-box > div {
  color: var(--v3s-white);
}

/* spodni lista na mobilu (historie, oblibene, ucet, kosik) -
   zaklad ji ma bilou s 90% kryti, ikony uz jsou bile pres :root */
.bottom-panel::before {
  background-color: var(--v3s-black);
  opacity: 1;
}

.bottom-panel .bottom-btn-cart::before {
  background-color: var(--v3s-black);
}

/* body uctu v liste - zaklad primary (antracit) */
.bottom-panel .bottom-btn.points .bottom-btn-center > h4 {
  color: var(--v3s-white);
}


/* ============================================================
   5. NAVIGACE KATEGORII + VYHLEDAVANI
   Aktivni kategorie jako na webu klienta: bily text a bila linka.
   ============================================================ */

/* Padding 0.75rem misto 1rem: Rubik je sirsi nez puvodni OpenSans Light
   a 8 kategorii by se na desktopu zalomilo do dvou radku.
   Aktivni kategorie ZAMERNE bez tucneho rezu - zmena sirky by pri
   kliknuti posunula celou radu. */
.extended-menu .food-types .food-type-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  color: var(--v3s-muted);
  font-weight: 500;
  transition: color 0.18s ease;
}

.extended-menu .food-types .food-type-button:hover,
.extended-menu .food-types .food-type-button.active {
  color: var(--v3s-white);
}

.extended-menu .food-types .food-type-button::before {
  background-color: var(--v3s-white);
  height: 2px;
}

/* ikony kategorii jsou cerna SVG (/svg/000000/...) - na bile.
   Neaktivni tlumime spolu s textem. */
.extended-menu .food-types .food-type-button > img {
  filter: invert(1);
  opacity: 0.65;
  transition: opacity 0.18s ease;
}

.extended-menu .food-types .food-type-button:hover > img,
.extended-menu .food-types .food-type-button.active > img {
  opacity: 1;
}

/* lupa - ikona uz je bila pres :root, jen ramecek */
button.filter-products-btn {
  border-color: var(--v3s-line);
}

button.filter-products-btn:hover {
  background-color: var(--v3s-raised);
}



/* ============================================================
   6. KARTY POLOZEK
   Pattern overeny na strec/bowling/sklep-bistro:
     - karta ma vlastni padding a REZERVU DOLE,
     - cena i tlacitko sedi absolutne u spodni hrany,
     - zaklad ma na .item jen padding-bottom: 1rem, ale .item-buy-now
       je position: absolute; bottom: 0 - bez rezervy lezi pres cenu.
   ============================================================ */

/* Nadpis sekce ("Burgery") - zaklad ho kresli GRADIENTOVYM TEXTEM
   z primary (background-clip: text + text-fill transparent). Primary je
   ted antracit, tedy na tmavem neviditelny. Vracime plnou bilou.
   Linky vedle nadpisu (::before/::after) zustavaji antracitove. */
.items .items-title h2,
.items .daily-menu-day {
  color: var(--v3s-white);
  -webkit-text-fill-color: var(--v3s-white);
  background-image: none;
  font-weight: 700;
  font-size: 1.75rem;
}

.items .items-title > h2::before,
.items .items-title > h2::after,
.items .daily-menu-day::before,
.items .daily-menu-day::after {
  background-image: none;
  background-color: var(--v3s-line);
  height: 1px;
}

.items .items-title p {
  color: var(--v3s-muted);
}

.items,
.favorite-items-container {
  align-items: stretch;
}

.items .item,
.favorite-items-container .item {
  position: relative;
  padding: 0.75rem;
  padding-bottom: 4.5rem;
  background-color: var(--v3s-card);
  border-radius: var(--v3s-radius);
  outline: 1px solid transparent;
  transition: outline-color 0.18s ease;
}

.items .item:hover,
.favorite-items-container .item:hover {
  outline-color: var(--v3s-accent-hover);
}

/* --- FOTKA ---
   Zoom na hover zvetsuje POZADI uvnitr ::before (background-size),
   ne cely box - transform: scale udelal na Strecu hranate spodni rohy.
   "auto 100%" misto cover, protoze cover se neumi plynule animovat;
   fotky jsou na platforme ctverce 1024x1024, takze je to totez. */
.items .item .item-photo-content,
.favorite-items-container .item .item-photo-content {
  position: relative;
  width: 100%;
}

.items .item .item-photo-content::before,
.favorite-items-container .item .item-photo-content::before {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--v3s-raised);
  border-radius: var(--v3s-radius);
  transition: background-size 0.45s ease;
}

.items .item:hover .item-photo-content::before,
.favorite-items-container .item:hover .item-photo-content::before {
  background-size: auto 106%;
}

/* iOS Safari neumi background-image: inherit na pseudo-elementu.
   --item-bg plni vlastni JS (v3s-burger.js, blok "iOS 26.2 Safari BUG"). */
@supports (-webkit-touch-callout: none) {
  .items .item .item-photo-content::before,
  .favorite-items-container .item .item-photo-content::before {
    background-image: var(--item-bg);
  }
}

/* CHYBEJICI FOTKA - zaklad nasadi default_thumb.jpg, coz je ciste
   bily ctverec 520x520 (overeno). Na tmave karte sviti. Poznat jde
   podle inline stylu. Tlumena ikona priboru na antracitu. */
.items .item .item-photo-content[style*="default_thumb"]::before,
.favorite-items-container .item .item-photo-content[style*="default_thumb"]::before,
.cart-items .item .item-photo-content[style*="default_thumb"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2 2 2 0 0 0 2-2V2'/%3E%3Cpath d='M5 2v20'/%3E%3Cpath d='M19 2v20M16 2c0 3.5 0 6.5 3 7'/%3E%3C/svg%3E");
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--v3s-raised);
}

.items .item:hover .item-photo-content[style*="default_thumb"]::before,
.favorite-items-container .item:hover .item-photo-content[style*="default_thumb"]::before {
  background-size: 30%;
}

/* --- DENNI MENU S FOTKOU (kategorie Tydenni menu) ---
   Kategorie s ikonou "denni menu" dostane data-food-type*="daily_menu"
   a zaklad polozkam fotku vypne (::before { content: unset }).
   Vracime bezne kartu jen polozkam s realnou fotkou; bez fotky je
   v inline stylu default_thumb a ty si textovy vzhled nechaji.
   Specificita (0,5,0) prebije zaklad (0,4,0) bez !important. */
.items .item[data-food-type*="daily_menu"] .item-photo-content:not([style*="default_thumb"]) {
  display: block;
}

.items .item[data-food-type*="daily_menu"] .item-photo-content:not([style*="default_thumb"])::before {
  content: "";
}

.items .item[data-food-type*="daily_menu"] .item-photo-content:not([style*="default_thumb"]) .stickers-content {
  display: flex;
}

.items .item[data-food-type*="daily_menu"] .item-photo-content:not([style*="default_thumb"]) .item-photo-content-bottom {
  margin-top: 0.5rem;
}

/* --- NAZEV A POPIS --- */
.items .item .item-photo-content-bottom,
.favorite-items-container .item .item-photo-content-bottom {
  margin: 0.75rem 0 0 0;
}

.items .item .item-photo-content-bottom > h4,
.favorite-items-container .item .item-photo-content-bottom > h4 {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--v3s-white);
}

.items .item .item-photo-content-bottom > p,
.favorite-items-container .item .item-photo-content-bottom > p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--v3s-muted);
  opacity: 1;
}

/* --- CENA ---
   Dole vlevo, protejsek tlacitka. height: auto - zaklad ma pevnych 1.5rem. */
.items .item .item-info-panel .item-info-btn:nth-child(2),
.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(2) {
  position: absolute;
  left: 0.75rem;
  /* stred cisla = stred tlacitka "+" (3rem vysoke, 0.75rem od spodu) */
  bottom: 1.65rem;
  height: auto;
}

.items .item .item-info-panel .item-info-btn:nth-child(2) > h4,
.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(2) > h4 {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--v3s-white);
}

/* vyber varianty na karte */
.items .item .item-info-panel .item-info-btn:nth-child(1) > select {
  border-color: var(--v3s-line);
}

/* --- ODLISNOSTI SEKCE "OBLIBENE" --- */
.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(1) {
  min-height: 0;
}

/* srdce pro odebrani - zaklad bile kolecko */
.favorite-items-container .item-info-panel .item-info-btn:nth-child(3) {
  background-color: var(--v3s-raised);
}

.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(3) {
  top: 1.25rem;
  right: 1.25rem;
}

.stickers-content .sticker {
  font-weight: 600;
  letter-spacing: 0.03em;
}


/* ============================================================
   7. TLACITKA
   Bezna .gradient-btn = antracit s bilym textem (z :root).
   Hlavni akce = BILA s cernym textem, jako CTA na webu klienta.
   ============================================================ */

input[type='submit'],
input[type='button'],
a.gradient-btn,
.cart-back-btn > a,
.cart-pay-btn > a,
.set-coupon-btn {
  font-weight: 600;
}

/* Hover bezneho antracitoveho tlacitka - o stupen svetlejsi.
   NESMI menit background-image: .gradient-btn nesou i ikonova
   tlacitka (lupa, Zpet, krizek, navigace), ktera maji ikonu PRAVE
   v background-image. Gradient ji na hover prepsal a diky jejich
   background-size/position z nej zbyl svetly pruh (bug 2026-09-17).
   Vnitrni stin se kresli NAD pozadim (barvou i ikonou) a POD textem,
   takze zesvetli plochu a ikonu necha. */
.gradient-btn:hover {
  box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1);
}

/* doporuceny produkt: .recomend-product-hover je pruhledny overlay
   pres celou dlazdici - ten zesvetlovat nechceme */
.recomend-product-hover.gradient-btn:hover {
  box-shadow: none;
}

/* --- HLAVNI AKCE: pokracovat / objednat, vlozit do kosiku ---
   Zaklad je kresli gradientem pres background-image, proto
   background-image: none a barvu primo. */
.cart-sum .cart-bottom-btns .cart-pay-btn > a,
.cart-pay-btn a,
.add-cart-column .add-to-cart {
  background-image: none;
  background-color: var(--v3s-white);
  color: var(--v3s-black);
  transition: background-color 0.18s ease;
}

.cart-sum .cart-bottom-btns .cart-pay-btn > a:hover,
.cart-pay-btn a:hover,
.add-cart-column .add-to-cart:hover {
  background-image: none;
  background-color: #DADADA;
  color: var(--v3s-black);
}

/* sekundarni akce (Zpet) - bily obrys, jako vedlejsi tlacitka na webu */
.cart-sum .cart-bottom-btns .cart-back-btn > a,
.cart-back-btn > a,
.overlay-enhancement-content .cart-back-btn a {
  background-color: transparent;
  color: var(--v3s-white);
  border: 1px solid var(--v3s-white);
}

.cart-sum .cart-bottom-btns .cart-back-btn > a:hover,
.cart-back-btn > a:hover,
.overlay-enhancement-content .cart-back-btn a:hover {
  background-color: var(--v3s-white);
  color: var(--v3s-black);
}

/* obecne tlacitko "zpet" (detail, mapa) - zaklad bile */
a.back-btn {
  background-color: var(--v3s-raised);
  color: var(--v3s-white);
  border-color: var(--v3s-line);
}

a.back-btn:hover {
  background-color: var(--v3s-accent);
}

/* --- TLACITKO "+" NA KARTE ---
   Dve pasti zakladu:
   1) od 470px ho roztahne (width: auto) a da mu ::after
      'Pridat do kosiku' -> vracime ctverec s "+";
   2) barevnou plochu nese ::before se z-index: -1, ktery se schova pod
      pozadi karty -> barva primo na tlacitku, ::before/::after pryc.
   .item-buy-btn nestylujeme - zaklad ho ma display: none. */
.items .item .item-buy-now,
.favorite-items-container .item .item-buy-now {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--v3s-radius);
  background-color: var(--v3s-white);
  background-image: none;
  color: var(--v3s-black);
  overflow: hidden;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.items .item .item-buy-now::before,
.items .item .item-buy-now::after,
.favorite-items-container .item .item-buy-now::before,
.favorite-items-container .item .item-buy-now::after {
  content: none;
}

/* Ikona "+" ze dvou car v currentColor (cerna, na hover bila).
   NE textovy znak '+': glyf sedi na matematicke ose pisma, ne ve
   stredu radku, takze byl opticky mimo stred - a na Androidu (bez
   Arialu) i jinak nez na iPhonu. NE --icon-plus-white: natvrdo bile
   SVG, na bilem tlacitku neviditelne. Cary jsou geometricky na stredu. */
.items .item .item-buy-now .item-buy-now-icon,
.favorite-items-container .item .item-buy-now .item-buy-now-icon {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  background-image: none;
}

.items .item .item-buy-now .item-buy-now-icon::before,
.items .item .item-buy-now .item-buy-now-icon::after,
.favorite-items-container .item .item-buy-now .item-buy-now-icon::before,
.favorite-items-container .item .item-buy-now .item-buy-now-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

.items .item .item-buy-now .item-buy-now-icon::after,
.favorite-items-container .item .item-buy-now .item-buy-now-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.items .item .item-buy-now:hover,
.favorite-items-container .item .item-buy-now:hover {
  background-color: var(--v3s-accent);
  color: var(--v3s-white);
}

@media (min-width: 470px) {
  .items .item .item-buy-now,
  .favorite-items-container .item .item-buy-now {
    width: 3rem !important;
    height: 3rem !important;
    bottom: 0.75rem !important;
    padding: 0 !important;
    border-radius: var(--v3s-radius) !important;
    background-image: none !important;
  }
  .items .item .item-buy-now::after,
  .favorite-items-container .item .item-buy-now::after {
    content: none !important;
  }
}


/* ============================================================
   8. DETAIL POLOZKY
   Phoenix detail je CSS grid; fotku kresli ::before v grid-area
   'photo'. Opravy desktopu prevzate ze Strece (overene na produkci):
   radek 1fr presunuty z 'add-to-cart' na 'social' a ctvercova fotka
   v pevnem sloupci - zadna diru, zadny nahodny orez.
   ============================================================ */

.item-detail-name {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--v3s-white);
}

.item-detail-price h4,
.content-detail .item-info-panel .item-info-btn.inked h4,
#item-detail .js-item-variation-price {
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--v3s-white);
}

/* --- FOTKA --- */
.item-detail-photo-content::before {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--v3s-card);
  border-radius: var(--v3s-radius);
}

/* chybejici fotka: default_detail.jpg je bily ctverec pres pul obrazovky */
.item-detail-photo-content[style*="default_detail"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2 2 2 0 0 0 2-2V2'/%3E%3Cpath d='M5 2v20'/%3E%3Cpath d='M19 2v20M16 2c0 3.5 0 6.5 3 7'/%3E%3C/svg%3E");
  background-size: 22%;
  background-position: center;
  background-color: var(--v3s-card);
  cursor: default;
}

/* srdce "oblibene" na detailu - zaklad bile kolecko */
.favorite-food-box button {
  background-color: var(--v3s-raised);
  border-color: var(--v3s-line);
}

.favorite-food-box button:hover {
  background-color: var(--v3s-accent);
}

/* alergeny - zaklad je ma v primary (antracit = necitelne) */
.alergen-content > h1,
.alergen-content > h3 {
  color: var(--v3s-white);
}

.alergen-content > h1::before {
  border-color: var(--v3s-line);
}

.item-detail-label.item-detail-alergens .alergen-type::before {
  border-color: var(--v3s-line);
}

/* --- VARIANTY / PRIDAVKY --- */
.extended-menu-taste .ingredient-type-button {
  color: var(--v3s-muted);
}

.extended-menu-taste .ingredient-type-button:hover {
  color: var(--v3s-white);
}

.extended-menu-taste .ingredient-type-button.active {
  background-color: var(--v3s-accent);
  color: var(--v3s-white);
}

/* --- VLOZIT DO KOSIKU --- */
.add-cart-column .add-to-cart {
  height: 3.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

/* nedostupne / casove omezene - zaklad sede pres !important */
input[type="button"].add-to-cart-unavailable {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--v3s-muted) !important;
  border: 1px solid var(--v3s-line) !important;
  height: 3.5rem;
}

/* --- DOPORUCENE PRODUKTY --- */
.recomend-product::before {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--v3s-card);
  border-radius: var(--v3s-radius);
}

/* --- RECENZE --- */
.item-reviews-box {
  border-top: 1px solid var(--v3s-line);
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.review {
  background-color: var(--v3s-card);
}

.item-review-plogin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--v3s-card);
  border-radius: var(--v3s-radius);
}

.item-review-plogin-text {
  flex: 1 1 auto;
}

.reviews-info-column .tooltip {
  border-bottom-color: var(--v3s-white);
}

/* --- DESKTOP: dvousloupec, ctvercova fotka, zadna prazdna dira --- */
@media (min-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr 22rem;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    column-gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .item-detail-photo-content::before {
    aspect-ratio: 1/1;
    align-self: start;
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    margin: 0;
  }

  .item-reviews-box {
    max-width: 1200px;
    margin: 2rem auto 0 auto;
  }
}

@media (min-width: 1280px) {
  .product-detail {
    grid-template-columns: 1fr 26rem;
  }
}


/* ============================================================
   9. KOSIK A POKLADNA
   Bile plochy zakladu jmenovite (stejne selektory = stejna
   specificita, diff je pozdeji, takze vyhrava).
   ============================================================ */

#cart .cart-box > h4,
#cartOverlay-2 .cart-box > h4,
#cartOverlay-3 .cart-box > h4,
#cartOverlay-2 .select-content-box > h4,
#cartOverlay-3 .select-content-box > h4 {
  font-weight: 700;
  color: var(--v3s-white);
}

.cart-right-box {
  background-color: var(--v3s-bg);
}

.cart-sum {
  background-color: var(--v3s-card);
  border: 1px solid var(--v3s-line);
  border-radius: var(--v3s-radius);
}

/* zaklad od 1024px: .cart-sum .cart-price-column .cart-col-name
   { color: var(--color-black) } - "Cena za dopravu" byla cerna na tmavem.
   Selektor musi mit stejnou specificitu. */
.cart-sum .cart-col-name,
.cart-sum .cart-price-column .cart-col-name {
  color: var(--v3s-white);
}

/* kupon - zaklad ma tlacitko "Uplatnit" zelene (--color-success-500) */
.cart-sum .coupon-content > .set-coupon-btn {
  background-image: none;
  background-color: var(--v3s-white);
  color: var(--v3s-black);
}

.cart-sum .coupon-content > .set-coupon-btn:hover {
  background-color: #DADADA;
}

/* Prazdny box doporucenych produktu - zaklad mu od 1024px da ramecek
   i kdyz nic nedoporucuje (nadpis ma pak inline display: none).
   :has() - kdyby ho platforma zahodila, zustane jen prazdny ramecek
   jako v zakladu. */
.cart-box .cart-recomend-box:has(> h4[style*="display: none"]) {
  border-color: transparent;
}

.cart-sum .cart-price-column.cart-price .cart-col-name,
.cart-sum .cart-price-column.cart-price .cart-col-value {
  font-weight: 700;
  color: var(--v3s-white);
}

.cart-sum .actions-container .cart-price-column:first-child {
  border-top-color: var(--v3s-line);
}

.cart-sum .actions-container .coupon-delete-btn {
  background-color: var(--v3s-raised);
}

/* --- BOXY "VYBER DOPRAVY" A "VYBER PLATBY" --- */
#cartOverlay-2 .select-content-box,
#cartOverlay-3 .select-content-box {
  background-color: var(--v3s-card);
  border-color: var(--v3s-line);
}

/* --- PREPINACE (doprava, platba, souhlasy) ---
   Zapnuto: zaklad zelene (--color-success-500) s bilou fajfkou.
   Drzime cernobile: bila plocha, tmavy knob, seda fajfka. */
.toggle .toggle-control {
  border-color: var(--v3s-accent-hover);
  background-color: var(--v3s-raised);
}

.toggle .toggle-control::after {
  background-color: var(--v3s-white);
}

.toggle input:checked + .toggle-control {
  background-color: var(--v3s-white);
  border-color: var(--v3s-white);
  background-image: url('/ui/system/icons/gray/correct.svg');
}

.toggle input:checked + .toggle-control::after {
  background-color: var(--v3s-black);
}

/* --- RADEK POLOZKY V KOSIKU --- */
.cart-items .item {
  padding: 0.75rem;
  background-color: var(--v3s-card);
  border-radius: var(--v3s-radius);
}

.cart-items .item .item-photo-content::before {
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--v3s-radius);
}

/* iOS Safari - --item-bg plni v3s-burger.js */
@supports (-webkit-touch-callout: none) {
  .cart-items .item .item-photo-content::before {
    background-image: var(--item-bg);
  }
}

.cart-items .item .item-photo-content-bottom > h4 {
  font-weight: 600;
  color: var(--v3s-white);
}

.cart-items .item .item-info-btn:nth-child(1),
.cart-items .item .item-info-btn:nth-child(3) {
  color: var(--v3s-muted);
}

.cart-items .item .item-info-btn:nth-child(2) {
  font-weight: 700;
  color: var(--v3s-white);
}

.cart-items .item .stickers-content {
  top: 0.75rem;
  left: 0.75rem;
}

/* smazat polozku - ikona uz je bila pres :root */
.cart-items .item .product-delete-btn {
  top: 0.75rem;
  right: 0.75rem;
  background-color: var(--v3s-raised);
}

.cart-items .item .product-delete-btn:hover {
  background-color: var(--v3s-accent);
}

/* mnozstvi (+ / -) - zaklad bily obal */
.cart-items .item-change-btn {
  background-color: var(--v3s-raised);
  border-color: var(--v3s-line);
}

.cart-items .item-change-btn > span {
  font-weight: 700;
  color: var(--v3s-white);
}

.cart-items .item-change-btn .change-btn:hover {
  background-color: var(--v3s-accent);
}

/* pridane / odebrane suroviny - zaklad zelene a cervene, drzime
   cernobile (text uz nese +1x / -1x) */
.cart-items .item-taste-box .ing-plus {
  color: var(--v3s-white);
}

.cart-items .item-taste-box .ing-minus {
  color: var(--v3s-muted);
}

/* Formularova pole: zaklad je kresli jako linku dole s plovoucim
   popiskem (.field > label) a pozadi nechava na prohlizeci, tedy
   BILE - na bile strance to vypadalo jako pruhledne. Na tmave by
   z nich byly bile pruhy s neviditelnym bilym textem.
   Vyplnena tmava plocha tu nejde: popisek sedi 8px nad textem pole
   a v plne plose by lezel na horni hrane. Proto pruhledne + linka. */
input[type='text'],
input[type='number'],
input[type='tel'],
input[type='email'],
input[type='password'],
input[type='time'],
input[type='date'],
select,
textarea {
  background-color: transparent;
  color: var(--v3s-white);
  border-bottom-color: var(--color-gray-500);
}

/* nativni rozbaleni selectu - bez toho je seznam bily s bilym textem */
option {
  background-color: var(--v3s-bg);
  color: var(--v3s-white);
}

/* autofill v Chrome jinak prebarvi pole na svetle modrou */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--v3s-white) !important;
  box-shadow: inset 0 0 20px 20px var(--v3s-raised) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* --- OBJEDNAVKA NA CAS --- */
.timed-order-wrapper .time-select-container .time-select {
  background-color: var(--v3s-raised);
  color: var(--v3s-white);
}

/* vybrany cas - zaklad antracit z primary, na tmavem malo videt */
.timed-order-wrapper .time-select-container .time-select:hover:not(:disabled),
.timed-order-wrapper .time-select-container .time-select.active,
.timed-order-wrapper > .day-select-row > .day-select-row > .day.active {
  background-image: none;
  background-color: var(--v3s-white);
  color: var(--v3s-black);
}

/* --- SPROPITNE --- */
#cartOverlay-2 .cart-tringel-select-btn {
  border-color: var(--v3s-line);
  color: var(--v3s-white);
}

#cartOverlay-2 .cart-tringel-select-btn.active {
  background-color: var(--v3s-white);
  border-color: var(--v3s-white);
  color: var(--v3s-black);
}

/* --- BONUSOVE BODY --- */
#cartOverlay-2 .bonus-points-controll-panel {
  background-color: var(--v3s-card);
}

.cart-sum .cart-price-column.cart-bonus,
.cart-sum .cart-price-column.cart-bonus .cart-col-name,
.cart-sum .cart-price-column.js-cart-bonus-payment,
.cart-sum .cart-price-column.js-cart-bonus-payment .cart-col-name {
  color: var(--v3s-white);
}

/* --- UPRESNENI ADRESY + NASEPTAVAC --- */
.overlay-specify-address-content,
.overlay-specify-address-content .specify-address-header,
.overlay-specify-address-content .set-user-location-button,
.overlay-specify-address-content .save-specific-address-button-wrapper {
  background-color: var(--v3s-card);
  color: var(--v3s-white);
}

.overlay-specify-address-content > input[type='text'] {
  border-color: var(--v3s-line);
}

.ui-autocomplete {
  background-color: var(--v3s-card);
  border-color: var(--v3s-line);
}

.ui-autocomplete .ui-menu-item-wrapper {
  color: var(--v3s-white);
}

.ui-state-hover,
.ui-state-active {
  background-color: var(--v3s-accent);
}


/* ============================================================
   10. OVERLAYE, UCET, KONTAKT
   ============================================================ */

/* --- "VYLEPSETE SI" + KONFIGURATOR --- */
.overlay-enhancement-content,
.configurator-render-box,
.configurator-render-box .configurator-item-price::before,
.configurator-render-box .configurator-contain-ingredients::before {
  background-color: var(--v3s-card);
  color: var(--v3s-white);
}

.overlay-enhancement-content .ingredient-types {
  border-bottom-color: var(--v3s-line);
}

.overlay-enhancement-content .ingredient-type-button {
  color: var(--v3s-muted);
}

.overlay-enhancement-content .ingredient-type-button:hover {
  background-color: var(--v3s-raised);
  color: var(--v3s-white);
}

.overlay-enhancement-content .ingredient-type-button.active {
  background-color: var(--v3s-accent);
  color: var(--v3s-white);
}

.overlay-enhancement-content .extended-title {
  color: var(--v3s-white);
}

.overlay-enhancement-content .extended-price {
  font-weight: 600;
  color: var(--v3s-muted);
}

.overlay-enhancement-content .extended-quantity {
  color: var(--v3s-white);
  border-top-color: var(--v3s-line);
  border-bottom-color: var(--v3s-line);
}

.overlay-enhancement-content .extend-qantity-btn {
  background-color: var(--v3s-raised);
  border-color: var(--v3s-line);
}

.overlay-enhancement-content .extend-qantity-btn:hover {
  background-color: var(--v3s-accent);
}

.configurator-layout .overlay-enhancement-content,
.configurator-layout .extended-menu-taste {
  border-right-color: var(--v3s-line);
}

.configurator-render-box .contain-ingredient {
  border-bottom-color: var(--v3s-line);
}

/* --- QR PLATBA --- */
.overlay-qr-payment-content {
  background-color: var(--v3s-card);
}

.overlay-qr-payment-timer {
  color: var(--v3s-white);
}

/* --- NOVINKY / BANNER --- */
.news-content,
.new-content {
  background-color: var(--v3s-card);
  color: var(--v3s-white);
}

/* --- UCET: body ---
   Cislo bodu je gradientovy text z primary (antracit) - vracime bilou. */
.account-info-center {
  color: var(--v3s-white);
  -webkit-text-fill-color: var(--v3s-white);
  background-image: none;
}

.account-info-center::after {
  background-color: var(--v3s-bg);
}

/* --- SLEDOVANI OBJEDNAVKY --- */
.order-tracking-content {
  background-color: var(--v3s-card);
}

.order-tracking-box .order-tracking-daily-id {
  color: var(--v3s-white);
}

/* --- KONTAKT + MAPA --- */
.map-info-box {
  background-color: var(--v3s-bg);
}

#legend::before {
  background-color: var(--v3s-bg);
}

#legend > h3 {
  color: var(--v3s-white);
}


/* ============================================================
   11. PATICKA
   Pozadi #111 nese --color-dark-900 z :root.
   ============================================================ */

footer {
  border-top: 1px solid var(--v3s-line);
}

footer h4 {
  font-weight: 700;
  color: var(--v3s-white);
}

footer a:hover {
  color: var(--v3s-muted);
}

/* LOGO V PATICCE - ORIZLE SE
   Zaklad ma ram loga 16rem x 12rem (od 1280px 20rem x 12rem) a kresli
   ho pres "background-size: 100% auto", tedy sirku na 100 % a vysku
   dopocitanou. Logo je ctverec 512x512, takze vyslo 256x256 do ramu
   vysokeho 192 - horni "SINCE 1978" i spodni "STEAK & BURGER" se
   odrizly (hlaseno 2026-09-21 z mobilu, stejne to bylo i na desktopu).
   "contain" vepse cely obrazek do ramu a drzi jeho pomer stran, takze
   se nic neorizne ani kdyz klient nahraje logo na sirku. */
footer .footer-logo {
  background-size: contain;
}

footer .open-hours-content {
  max-width: none;
  gap: 1.5rem;
}

footer .open-hours-content .open-hours-D,
footer .open-hours-content .open-hours-H {
  white-space: nowrap;
}

/* zaklad od 1280px necha nadpis vlevo a text pod nim na stredu */
@media (min-width: 1280px) {
  footer .footer-33-col > h4,
  footer .footer-33-col > p,
  footer .footer-33-col {
    text-align: start;
  }

  footer .footer-33-col > p {
    align-self: stretch;
  }
}


/* ============================================================
   12. DROBNOSTI
   ============================================================ */

::selection {
  background-color: var(--v3s-white);
  color: var(--v3s-black);
}

/* Cookie listu na Apple skryvame - standard sablon (kopirovat beze zmeny) */
@supports (-webkit-touch-callout: none) {
  #cc-main {
    display: none;
  }
}

/* Cookie lista (CookieConsent v3) se theme-uje pres --cc-* promenne.
   Zaklad je svetla, tlacitka nastavuje na #cc-main .pm__btn. */
#cc-main {
  --cc-bg: #262626;
  --cc-primary-color: #FFFFFF;
  --cc-secondary-color: #A6A6A6;
  --cc-link-color: #FFFFFF;
  --cc-cookie-category-block-bg: #2F2F2F;
  --cc-cookie-category-block-border: #3A3A3A;
  --cc-cookie-category-block-hover-bg: #3A3A3A;
  --cc-cookie-category-block-hover-border: #4A4A4A;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #3A3A3A;
  --cc-section-category-border: #3A3A3A;
  --cc-separator-border-color: #3A3A3A;
  --cc-toggle-off-bg: #6B6B6B;
  --cc-toggle-on-bg: #FFFFFF;
  --cc-toggle-readonly-bg: #A6A6A6;
  --cc-toggle-on-knob-bg: #111111;
  --cc-toggle-off-knob-bg: #FFFFFF;
  --cc-toggle-readonly-knob-bg: #FFFFFF;
  --cc-toggle-enabled-icon-color: #FFFFFF;
  --cc-toggle-disabled-icon-color: #6B6B6B;
  --cc-toggle-readonly-knob-icon-color: #A6A6A6;
  --cc-footer-bg: #1C1C1C;
  --cc-footer-color: #A6A6A6;
  --cc-footer-border-color: #3A3A3A;
  --cc-overlay-bg: rgba(0, 0, 0, 0.75);
  --cc-webkit-scrollbar-bg: #3A3A3A;
}

#cc-main .pm__btn {
  --cc-btn-primary-bg: #FFFFFF;
  --cc-btn-primary-color: #111111;
  --cc-btn-primary-border-color: #FFFFFF;
  --cc-btn-primary-hover-bg: #DADADA;
  --cc-btn-primary-hover-color: #111111;
  --cc-btn-primary-hover-border-color: #DADADA;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #FFFFFF;
  --cc-btn-secondary-border-color: #FFFFFF;
  --cc-btn-secondary-hover-bg: #FFFFFF;
  --cc-btn-secondary-hover-color: #111111;
  --cc-btn-secondary-hover-border-color: #FFFFFF;
}

/* na dotyku hover neexistuje - zoom fotky by po klepnuti zustal */
@media (hover: none) {
  .items .item:hover .item-photo-content::before,
  .favorite-items-container .item:hover .item-photo-content::before {
    background-size: auto 100%;
  }
}