/* ============================================================
   HOSTINEC U FRANZE JOSEPHA - eshop (objedname)
   company 603 / factory 771, Trinec
   URL: https://objedname.eu/hostinecufranzjosepha-cz#home
   Web klienta: https://www.hostinecufranzjosepha.cz/

   BRAND - "cerna a kremova, drevo a zlate oblozeni, cerne co nejmene"
     podklad stranky     #F4EDE0  krema (stary papir, mapy na stene)
     karty, panely       #FFFCF6  teply papir
     jemne plochy        #EFE6D4  hover, placeholder
     linky               #E2D5BE
     text                #2B2119  espresso misto cerne
     tlumeny text        #6E5F50
     drevo               #3A2A1F  navbar, paticka, hover tlacitek
     zlato (dekor)       #B8924F  linky, obrysy, aktivni stavy
     zlato (text)        #8A6832  nadpisy sekci, ceny
     tlacitka            mosazny gradient #9A7640 -> #7F5F2E, bily text
                         (kontrast 4.0-6.0 : 1)
     pismo               Libre Baskerville (nadpisy, nazvy jidel)
                         + Montserrat (vse ostatni) - stejne jako web
     zaobleni            4px (--hfj-radius)

   Sablona je postavena na kostre v3s-burger.css / bistro-strec.css
   (stejna verze zakladniho CSS - overeno bajt po bajtu 2026-09-18).

   ------------------------------------------------------------
   JAK TO FUNGUJE
   ------------------------------------------------------------
   1) :root - zaklad kresli vetsinu eshopu z promennych, takze primary
      (tlacitka), success (prepinace, kupon), seda skala (linky, hover)
      a dark (navbar, paticka) prebarvi pul eshopu samy.
   2) --color-white NEMENIME - zaklad ji ma i jako barvu textu a ikon
      na tlacitkach. Bile plochy, ktere maji byt papir, jsou jmenovite.
   3) Zamerne tu NENI blanketni pravidlo na .gradient-btn. Tridu nesou
      i ikonova tlacitka (lupa, Zpet, krizek, navigace), ktera maji
      ikonu v background-image - blanketni pravidlo by ji zhaslo.

   ------------------------------------------------------------
   PLATFORMA
   ------------------------------------------------------------
   - diff jde na KONEC zakladniho style.css -> @import se ignoruje,
     fonty jsou proto pres @font-face primo tady
   - clamp()/min()/max() platforma zahazuje - cela deklarace zmizi
   - :has() platforma necha (overeno v kompilovanem CSS V3S)
   - 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  hostinec-franz-josepha.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).
   - POLOZKY BEZ FOTKY (2026-09-18 jich je 100 %): misto velkeho
     placeholderu je karta textova jako v jidelnim listku (sekce 6).
     Jakmile se k polozce nahraje fotka, karta ji ukaze sama.
   ============================================================ */


/* ============================================================
   1. FONTY - Google Fonts
   Oba soubory jsou variabilni (osa vahy), proto font-weight jako
   rozsah. latin-ext nese ceske znaky.
   ============================================================ */

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNXaxMICA.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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNZaxM.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;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wdhyzbi.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: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUSjIg1_i6t8kCHKm459Wlhyw.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 */
  --hfj-cream: #F4EDE0;
  --hfj-paper: #FFFCF6;
  --hfj-tint: #EFE6D4;
  --hfj-line: #E2D5BE;
  --hfj-ink: #2B2119;
  --hfj-muted: #6E5F50;
  --hfj-wood: #3A2A1F;
  --hfj-gold: #B8924F;
  --hfj-gold-dark: #8A6832;
  --hfj-radius: 4px;
  --hfj-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --hfj-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* tlacitka: zaklad kresli .gradient-btn gradientem z 500 do 600
     s BILYM textem -> mosaz, dost tmava na bily text */
  --color-primary-500: #9A7640;
  --color-primary-600: #7F5F2E;
  /* casove omezene polozky, tecky slideru banneru */
  --color-brand-500: #9A7640;
  /* focus poli a jejich popisku, informacni hlasky */
  --color-info-500: #8A6832;
  /* Zaklad ma success zelene: zapnute prepinace, tlacitko kuponu,
     pridane suroviny, bonusove body, potvrzena objednavka. Zelena je
     na tomhle brandu cizi, drzime tmave zlato (bily text 6 : 1). */
  --color-success-500: #7F5F2E;

  /* teple sede - linky, hover plochy a text v polich ladi s kremou */
  --color-gray-100: #F8F3EA;
  --color-gray-200: #EDE4D4;
  --color-gray-300: #E2D5BE;
  --color-gray-400: #D2C2A6;
  --color-gray-500: #A8977D;
  --color-gray-600: #7A6A58;
  --color-gray-700: #5A4B3D;
  --color-gray-800: #3A2F26;
  --color-gray-900: #2B2119;
  /* "cerna" zakladu (souhrn kosiku, tooltipy, zatemneni overlayu) */
  --color-black: #2B2119;

  /* navbar (.toppanel::before) a paticka = tmave drevo */
  --color-dark-800: #3A2A1F;
  --color-dark-900: #3A2A1F;

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

  /* hvezdicky hodnoceni - zaklad zelene; oranzova sada platformy
     je zlata #D9A239 */
  --icon-star-green: url('/ui/system/icons/orange/star.svg');
  --icon-star_active-green: url('/ui/system/icons/orange/star_active.svg');
}


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

html,
body {
  font-family: var(--hfj-sans);
  background-color: var(--hfj-cream);
}

body {
  color: var(--hfj-ink);
}

/* zaklad ma na mape vlastni 'Primary' natvrdo */
.map-container a.back-btn.js-back-to-contact {
  font-family: var(--hfj-sans);
}

h1, h2, h3, h5 {
  font-family: var(--hfj-serif);
  font-weight: 700;
}

/* nadpisy stranek - zaklad je dela jako h4, srovnavame s Kosikem */
.news-box > h4,
.alergens-box > h4,
.orders-history-box > h4,
.favorite-items-box > h4.favorite-title {
  font-family: var(--hfj-serif);
  font-weight: 700;
  color: var(--hfj-ink);
}

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


/* ============================================================
   4. HLAVICKA + STAVOVY PRUH
   Pozadi navbaru nese .toppanel::before (pevny pruh 300vw) v
   --color-dark-800 = drevo. Ikony jsou v zakladu bile.
   ============================================================ */

/* zlata linka pod navbarem pres celou sirku okna - kresli ji ::before,
   protoze sam .toppanel je jen vycentrovany */
.toppanel::before {
  box-shadow: inset 0 -2px 0 var(--hfj-gold);
}

/* pruh "Mame zavreno, oteviram opet za ..." */
.notification-box {
  background-color: var(--hfj-tint);
  color: var(--hfj-ink);
  font-weight: 600;
}

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

/* spodni lista na mobilu (historie, oblibene, ucet, kosik) - zaklad
   bila s 90% kryti, na kreme papir */
.bottom-panel::before {
  background-color: var(--hfj-paper);
  opacity: 0.95;
  box-shadow: 0 -1px 0 var(--hfj-line);
}

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


/* ============================================================
   5. NAVIGACE KATEGORII + VYHLEDAVANI
   ============================================================ */

/* 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(--hfj-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(--hfj-ink);
}

/* podtrzeni aktivni kategorie - zaklad primary, dame svetle zlato */
.extended-menu .food-types .food-type-button::before {
  background-color: var(--hfj-gold);
  height: 2px;
}

/* Na telefonu je rada kategorii vodorovny scroller (26 kategorii) a
   pod aktivni kategorii prosvital sedy jezdec scrollbaru. Posouva se
   prstem, jezdec neni potreba. */
.extended-menu .food-types {
  scrollbar-width: none;
}

.extended-menu .food-types::-webkit-scrollbar {
  display: none;
}

/* ikony kategorii jsou cerna SVG (/svg/000000/...) - neaktivni tlumime
   spolu s textem */
.extended-menu .food-types .food-type-button > img {
  opacity: 0.6;
  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 */
button.filter-products-btn {
  background-color: var(--hfj-paper);
  border-color: var(--hfj-line);
}

button.filter-products-btn:hover {
  background-color: var(--hfj-tint);
  border-color: var(--hfj-gold);
}


/* ============================================================
   6. KARTY POLOZEK
   Pattern overeny na strec/bowling/v3s:
     - 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 - zaklad ho kresli GRADIENTOVYM TEXTEM z primary
   (background-clip: text). Drzime plne tmave zlato v patkovem pismu. */
.items .items-title h2,
.items .daily-menu-day {
  font-family: var(--hfj-serif);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--hfj-gold-dark);
  -webkit-text-fill-color: var(--hfj-gold-dark);
  background-image: none;
}

/* linky vedle nadpisu - tenke zlato jako oblozeni */
.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(--hfj-gold);
  height: 1px;
  opacity: 0.7;
}

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

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

.items .item,
.favorite-items-container .item {
  position: relative;
  padding: 1rem;
  padding-bottom: 4.75rem;
  background-color: var(--hfj-paper);
  border: 1px solid var(--hfj-line);
  border-radius: var(--hfj-radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.items .item:hover,
.favorite-items-container .item:hover {
  border-color: var(--hfj-gold);
  box-shadow: 0 6px 18px -10px rgba(58, 42, 31, 0.35);
}

/* --- 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(--hfj-tint);
  border-radius: var(--hfj-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 (hostinec-franz-josepha.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);
  }
}

/* --- POLOZKA BEZ FOTKY = TEXTOVA KARTA JAKO V JIDELNIM LISTKU ---
   Zaklad nasadi default_thumb.jpg (bily ctverec s ikonou fotaku).
   Poznat to jde podle inline stylu. Misto ctverce kreslime z ::before
   kratkou zlatou linku nad nazvem. Selektor s [style*=] ma vyssi
   specificitu nez Safari blok vyse, takze plati i na iPhonu.
   Az klient nahraje fotku, v inline stylu uz default_thumb neni a
   karta fotku ukaze sama. */
.items .item .item-photo-content[style*="default_thumb"]::before,
.favorite-items-container .item .item-photo-content[style*="default_thumb"]::before {
  width: 2rem;
  height: 2px;
  aspect-ratio: auto;
  margin-bottom: 0.9rem;
  background-image: none;
  background-color: var(--hfj-gold);
  border-radius: 1px;
}

.items .item .item-photo-content[style*="default_thumb"] .item-photo-content-bottom,
.favorite-items-container .item .item-photo-content[style*="default_thumb"] .item-photo-content-bottom {
  margin-top: 0;
}

/* stickery u textove karty nesmi viset pres nazev - radime je do toku */
.items .item .item-photo-content[style*="default_thumb"] .stickers-content,
.favorite-items-container .item .item-photo-content[style*="default_thumb"] .stickers-content {
  position: static;
  justify-content: flex-start;
  padding: 0 0 0.5rem 0;
}

.items .item .item-photo-content[style*="default_thumb"] .stickers-content:empty,
.favorite-items-container .item .item-photo-content[style*="default_thumb"] .stickers-content:empty {
  display: none;
}

/* --- DENNI MENU S FOTKOU ---
   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.9rem 0 0 0;
}

.items .item .item-photo-content-bottom > h4,
.favorite-items-container .item .item-photo-content-bottom > h4 {
  font-family: var(--hfj-serif);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--hfj-ink);
}

.items .item .item-photo-content-bottom > p,
.favorite-items-container .item .item-photo-content-bottom > p {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--hfj-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: 1rem;
  /* stred cisla = stred tlacitka "+" (3rem vysoke, 1rem od spodu) */
  bottom: 1.95rem;
  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(--hfj-gold-dark);
}

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

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

.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(3) {
  top: 1.25rem;
  right: 1.25rem;
  background-color: var(--hfj-paper);
  border: 1px solid var(--hfj-line);
}

.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(3):hover {
  background-color: var(--hfj-tint);
}

/* u textove karty (bez fotky) lezi srdce v radku nazvu - dlouhy nazev
   by pod nej zajel */
.favorite-items-container .item .item-photo-content[style*="default_thumb"] .item-photo-content-bottom {
  padding-right: 2.75rem;
}

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

/* sticker bez barevne tridy (zaklad ho nebarvi) - drevo se zlatym textem */
.stickers-content .sticker:not([class*="sticker-"]) {
  background-color: var(--hfj-wood);
  color: #E9D3A6;
}


/* ============================================================
   7. TLACITKA
   Bezna .gradient-btn = mosazny gradient s bilym textem (z :root).
   ============================================================ */

input[type='submit'],
input[type='button'],
a.gradient-btn,
a.back-btn,
.cart-back-btn > a,
.cart-pay-btn > a,
.set-coupon-btn {
  font-family: var(--hfj-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hover - ztmaveni. NESMI menit background-image: .gradient-btn nesou
   i ikonova tlacitka (lupa, Zpet, krizek, navigace), ktera maji ikonu
   PRAVE v background-image (bug V3S 2026-09-17). Vnitrni stin se
   kresli NAD pozadim (barvou i ikonou) a POD textem. */
.gradient-btn:hover {
  box-shadow: inset 0 0 0 100vmax rgba(43, 33, 25, 0.2);
}

/* doporuceny produkt: .recomend-product-hover je pruhledny overlay
   pres celou dlazdici - ten ztmavovat nechceme.
   Svetla ikonova tlacitka (lupa, Zpet) maji vlastni hover plochou -
   tmavy stin by z papiru udelal kalne sedohnede pole. */
.recomend-product-hover.gradient-btn:hover,
button.filter-products-btn.gradient-btn:hover,
a.back-btn.gradient-btn:hover {
  box-shadow: none;
}

/* sekundarni akce (Zpet v kosiku a v overlayi) - zlaty obrys */
.cart-sum .cart-bottom-btns .cart-back-btn > a,
.cart-back-btn > a,
.overlay-enhancement-content .cart-back-btn a {
  background-color: transparent;
  background-image: none;
  color: var(--hfj-gold-dark);
  border: 1px solid var(--hfj-gold);
}

.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(--hfj-tint);
  color: var(--hfj-ink);
}

/* obecne tlacitko "zpet" (mapa) - zaklad bile se sedym obrysem */
a.back-btn {
  background-color: var(--hfj-paper);
  color: var(--hfj-ink);
  border-color: var(--hfj-line);
}

a.back-btn:hover {
  background-color: var(--hfj-tint);
}

/* --- 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: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--hfj-radius);
  background-color: var(--color-primary-500);
  background-image: linear-gradient(to top right, var(--color-primary-500), var(--color-primary-600));
  /* zaklad ma na tlacitku background-size: 60% pro puvodni ikonu -
     gradient by pokryl jen stred a po stranach by zbyl pruh */
  background-size: 100% 100%;
  background-position: center;
  color: #FFFFFF;
  overflow: hidden;
  transition: background-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. NE textovy znak '+': glyf sedi
   na matematicke ose pisma, ne ve stredu radku, takze je opticky mimo
   stred (V3S 2026-09-17). 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);
}

/* hover: drevo (gradient se neumi plynule prolnout, proto ho vypiname) */
.items .item .item-buy-now:hover,
.favorite-items-container .item .item-buy-now:hover {
  background-image: none;
  background-color: var(--hfj-wood);
}

@media (min-width: 470px) {
  .items .item .item-buy-now,
  .favorite-items-container .item .item-buy-now {
    width: 3rem !important;
    height: 3rem !important;
    bottom: 1rem !important;
    padding: 0 !important;
    border-radius: var(--hfj-radius) !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 dira, zadny nahodny orez.
   ============================================================ */

.item-detail-name {
  font-family: var(--hfj-serif);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--hfj-ink);
}

.product-detail h1,
.product-detail h2,
#item-detail .product-detail > h4 {
  font-family: var(--hfj-serif);
  color: var(--hfj-ink);
}

.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(--hfj-gold-dark);
}

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

/* Chybejici fotka: default_detail.jpg je bily ctverec pres pul
   obrazovky. Tlumena zlata ikona priboru na kremove plose. */
.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='%23B8924F' stroke-width='1.2' 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(--hfj-tint);
  cursor: default;
}

/* Na telefonu je fotka pres celou sirku jako ctverec - bez fotky by
   prazdny placeholder odsunul nazev i "Vlozit do kosiku" pod okraj
   obrazovky. Snizujeme ho na pruh; tlacitka Zpet a srdce v nem porad
   sedi nahore. Skutecna fotka zustava ctvercova. */
@media (max-width: 767px) {
  .item-detail-photo-content[style*="default_detail"]::before {
    aspect-ratio: 16/7;
    background-size: auto 45%;
  }
}

/* Popisky detailu (obal, popis, alergeny) jdou v zakladu pres celou
   sirku s odsazenim jen zleva - na telefonu popis narazel do praveho
   okraje obrazovky. */
.product-detail .item-detail-label {
  padding-right: 1rem;
}

/* srdce "oblibene" na detailu */
.favorite-food-box button {
  background-color: var(--hfj-paper);
  border-color: var(--hfj-line);
}

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

/* alergeny - zaklad je ma v primary */
.alergen-content > h1,
.alergen-content > h3 {
  color: var(--hfj-gold-dark);
}

.alergen-content > h1::before,
.item-detail-label.item-detail-alergens .alergen-type::before {
  border-color: var(--hfj-gold);
}

/* dlazdice na strance Seznam alergenu - papir jako karty jidel */
.alergens-box .alergen-content {
  background-color: var(--hfj-paper);
  border-color: var(--hfj-line);
  border-radius: var(--hfj-radius);
}

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

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

.extended-menu-taste .ingredient-type-button.active {
  background-color: var(--hfj-wood);
  color: var(--hfj-paper);
}

/* --- 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(--hfj-muted) !important;
  border: 1px solid var(--hfj-line) !important;
  height: 3.5rem;
}

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

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

.review {
  background-color: var(--hfj-paper);
}

.item-review-plogin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--hfj-paper);
  border: 1px solid var(--hfj-line);
  border-radius: var(--hfj-radius);
}

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

/* --- 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
   ============================================================ */

#cart .cart-box > h4,
#cartOverlay-2 .cart-box > h4,
#cartOverlay-3 .cart-box > h4,
#cartOverlay-2 .cart-items > h4,
#cartOverlay-2 .bonus-points-head > h4,
#cartOverlay-2 .select-content-box > h4,
#cartOverlay-3 .select-content-box > h4 {
  font-family: var(--hfj-serif);
  font-weight: 700;
  color: var(--hfj-ink);
}

/* "Dokonceni objednavky" - v gridu pokladny lezi hned pod textem
   "Pro uplatneni se prosim prihlaste" bez mezery */
#cartOverlay-3 .cart-box > h4 {
  margin-top: 1.5rem;
}

.cart-right-box {
  background-color: var(--hfj-cream);
}

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

.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(--hfj-ink);
}

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

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

/* --- BOXY "VYBER DOPRAVY" A "VYBER PLATBY" ---
   Zaklad jim dava jen ramecek, pozadi prosvita - na kreme papir. */
#cartOverlay-2 .select-content-box,
#cartOverlay-3 .select-content-box {
  background-color: var(--hfj-paper);
  border-color: var(--hfj-line);
}

/* --- RADEK POLOZKY V KOSIKU --- */
.cart-items .item {
  padding: 0.75rem;
  background-color: var(--hfj-paper);
  border: 1px solid var(--hfj-line);
  border-radius: var(--hfj-radius);
}

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

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

/* polozka bez fotky - v radku kosiku drzi misto ctverec, jen misto
   bileho default_thumb tlumena zlata ikona priboru */
.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='%23B8924F' 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: 40%;
  background-position: center;
  background-color: var(--hfj-tint);
}

.cart-items .item .item-photo-content-bottom > h4 {
  font-family: var(--hfj-serif);
  font-weight: 700;
  color: var(--hfj-ink);
}

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

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

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

.cart-items .item .product-delete-btn {
  top: 0.75rem;
  right: 0.75rem;
  background-color: var(--hfj-paper);
  border: 1px solid var(--hfj-line);
}

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

/* mnozstvi (+ / -) */
.cart-items .item-change-btn {
  background-color: var(--hfj-paper);
  border-color: var(--hfj-line);
}

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

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

/* odebrane suroviny - zaklad cervene (pridane jsou pres success zlate) */
.cart-items .item-taste-box .ing-minus {
  color: var(--hfj-muted);
}

/* formularova pole - zaklad je nechava bez pozadi prohlizece (bile);
   na kreme by pusobila jako bile pruhy */
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(--hfj-ink);
}

/* 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(--hfj-ink) !important;
  box-shadow: inset 0 0 20px 20px var(--hfj-tint) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* --- OBJEDNAVKA NA CAS --- */
.timed-order-wrapper .time-select-container .time-select {
  background-color: var(--hfj-paper);
  color: var(--hfj-ink);
}

/* --- SPROPITNE --- */
#cartOverlay-2 .cart-tringel-select-btn {
  border-color: var(--hfj-gold);
  color: var(--hfj-gold-dark);
}

#cartOverlay-2 .cart-tringel-select-btn.active {
  color: #FFFFFF;
}

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

/* --- 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(--hfj-paper);
}

.ui-autocomplete {
  background-color: var(--hfj-paper);
  border-color: var(--hfj-line);
}


/* ============================================================
   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(--hfj-paper);
}

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

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

.overlay-enhancement-content .ingredient-type-button:hover {
  background-color: var(--hfj-tint);
  color: var(--hfj-ink);
}

.overlay-enhancement-content .ingredient-type-button.active {
  background-color: var(--hfj-wood);
  color: var(--hfj-paper);
}

.overlay-enhancement-content .extended-title {
  color: var(--hfj-ink);
}

.overlay-enhancement-content .extended-price {
  font-weight: 600;
  color: var(--hfj-gold-dark);
}

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

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

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

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

/* --- NOVINKY --- */
.news-content,
.new-content {
  background-color: var(--hfj-paper);
}

/* --- UCET: body --- cislo bodu je gradientovy text z primary */
.account-info-center {
  color: var(--hfj-gold-dark);
  -webkit-text-fill-color: var(--hfj-gold-dark);
  background-image: none;
}

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

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

/* nadpisy kontaktu jsou h4 - srovnavame s ostatnimi nadpisy (patkove) */
.map-info-box > h4,
.open-hours-box > h4,
.contact-form-container > h4,
.map-content-title > h4 {
  font-family: var(--hfj-serif);
  font-weight: 700;
}

/* Telefon je <h3 class="js-contact-telephone"> a chytil by ho patkovy
   rez pro h3. Cisla drzime VZDY v Montserratu - stejne jako ceny,
   hodiny a telefon v paticce (poucka ze Strece). */
h3.js-contact-telephone {
  font-family: var(--hfj-sans);
  font-weight: 600;
}

#legend::before {
  background-color: var(--hfj-cream);
}


/* ============================================================
   11. PATICKA
   Pozadi = drevo (--color-dark-900 z :root), text krema, nadpisy zlate.
   ============================================================ */

footer {
  color: var(--hfj-cream);
  border-top: 2px solid var(--hfj-gold);
}

/* LOGO V PATICCE - ORIZLE SE
   Zaklad ma ram loga 16rem x 12rem (od 1280px 20rem x 12rem), tedy 4:3,
   a kresli ho pres "background-size: 100% auto" - sirka na 100 %, vyska
   dopocitana. Logo provozovny (logo_ver_white.png) je ctverec 1254x1254,
   takze by prerostlo ram a orizlo se nahore i dole (stejna chyba jako
   u V3S a Strece, 2026-09-21). "contain" vepse cely obrazek do ramu. */
footer .footer-logo {
  background-size: contain;
}

footer h4 {
  font-family: var(--hfj-serif);
  font-weight: 700;
  color: #D9BE86;
}

footer a:hover {
  color: #D9BE86;
}

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(--hfj-gold);
  color: #FFFFFF;
}

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

/* cookie lista (CookieConsent v3) - tlacitka bere zaklad z primary,
   pozadi dame papir */
#cc-main {
  --cc-bg: #FFFCF6;
  --cc-primary-color: #2B2119;
  --cc-secondary-color: #6E5F50;
  --cc-cookie-category-block-bg: #F8F3EA;
  --cc-cookie-category-block-border: #E2D5BE;
  --cc-cookie-category-block-hover-bg: #EFE6D4;
  --cc-cookie-category-block-hover-border: #D2C2A6;
  --cc-section-category-border: #E2D5BE;
  --cc-separator-border-color: #E2D5BE;
  --cc-footer-bg: #F4EDE0;
  --cc-footer-color: #6E5F50;
  --cc-footer-border-color: #E2D5BE;
}

/* 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%;
  }
}