/* ============================================================
PIZZA ARDI, Letohrad (objedname, stary admin 623/795)
2026-11-03: stejny vzhled jako Pizzeria Miky (klienti/pizzeria-miky,
615/787), klient ho chtel 1:1. Zmenene jsou jen barvy: co je u Miky
zlute, je tu cervene z loga Ardi; tlacitka v odstinu loga.
LOGO ARDI (zmereno 2026-11-03): jedna cervena #E44C3C, razitko
s pizzou, PIZZA, ARDI vyrezane v cervenem policku mezi dvema
hvezdickami. Tmavy text v cervenem policku je tedy primo z loga.
BRAND SABLONY
podklad stranky #1B1A18 teple bridlicova (o stin tmavsi nez web)
hlavicka, paticka #121110
karta #24221F (kartu oddeluje jen ton plochy)
zvednuta plocha #2E2B27 pole, hover
linky #3B3732
text #F4EFE7 (13,9 : 1 na karte)
tlumeny text #B3AA9D (6,9 : 1 na karte)
akcent (--mk-accent) #E65B4C ceny, aktivni kategorie, hvezdicky,
focus (4,5 : 1 na karte); logo #E44C3C
zesvetlene jen kvuli kontrastu; text NA
akcentu je #1B1A18 (4,9 : 1)
cervena #CA3121 tlacitka (bily popisek 5,3 : 1)
cervena jako text #FF5A66 chyby (5,2 : 1 na karte)
pismo Barlow Condensed 600/700 (nadpisy, nazvy, ceny,
ma tnum) + Montserrat 400/600 (text)
zaobleni 16 px karty, 8 px fotka v karte (16 - padding 8),
10 px tlacitka a pole, kulate "+"
PODPISOVY PRVEK: z loga - hvezdicky po stranach (nadpisy sekci
"--- * PIZZA * ---") a cervena policka jako ARDI (aktivni
kategorie, pocet kusu v kosiku, pruh "mame zavreno").
Kostra (selektory Phoenixu) prevzata z cartel-pizza.css (overena
2026-10-12); tmavy rezim navic: prevracena seda skala zakladu
a ~30 ploch, ktere zaklad kresli --color-white natvrdo.
------------------------------------------------------------
PLATFORMA (_pipeline/knowledge/platform.md)
------------------------------------------------------------
- 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
- Zamerne tu NENI blanketni pravidlo na .gradient-btn (ikonova
tlacitka nesou ikonu v background-image).
- Safari fix ma DVE casti: pizza-ardi.js blok "iOS 26.2 Safari BUG"
+ CSS @supports (-webkit-touch-callout: none) bloky nize.
- --color-black ZUSTAVA tmava: zaklad z ni michá polopruhledne
prekryvy (menu, adresa, platba). Text, ktery ji pouziva, je
prebity zvlast.
============================================================ */
/* ============================================================
1. FONTY - Google Fonts (latin-ext nese ceske znaky)
============================================================ */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3jWuZEC.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuQ.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: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3jWuZEC.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.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;
}
/* Montserrat je variabilni - jeden soubor na sadu znaku nese 400 i 600 */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 600;
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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 600;
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 */
--mk-page: #1B1A18;
--mk-deep: #121110;
--mk-card: #24221F;
--mk-raised: #2E2B27;
--mk-line: #3B3732;
--mk-line-strong: #4D4841;
--mk-ink: #F4EFE7;
--mk-muted: #B3AA9D;
--mk-accent: #E65B4C;
--mk-accent-hover: #E96B5E;
--mk-on-accent: #1B1A18;
--mk-red: #CA3121;
--mk-red-hover: #B02A1C;
--mk-red-pressed: #962418;
--mk-red-text: #FF5A66;
--mk-radius: 16px;
--mk-radius-photo: 8px;
--mk-radius-btn: 10px;
--mk-pill: 999px;
--mk-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
--mk-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
/* peticipa hvezdicka z loga */
--mk-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E65B4C' d='M12 1.6l3.1 6.9 7.5.8-5.6 5 1.6 7.4L12 17.9l-6.6 3.8L7 14.3l-5.6-5 7.5-.8z'/%3E%3C/svg%3E");
/* tlacitka: zaklad kresli .gradient-btn gradientem z 500 do 600
s BILYM textem -> cervena jako na webu (popisek 6,4 a 7,6 : 1) */
--color-primary-500: #CA3121;
--color-primary-600: #B02A1C;
/* casove omezene polozky, tecky slideru banneru */
--color-brand-500: #E65B4C;
/* focus poli a jejich popisku, informacni hlasky */
--color-info-500: #E65B4C;
/* Zaklad ma success zelene (prepinace, kupon, pridane suroviny,
potvrzena objednavka). Zelena neni v brandu - cervena z loga (4,5 : 1). */
--color-success-500: #E65B4C;
--color-error-500: #FF5A66;
/* Seda skala zakladu je pro svetly rezim: 100-300 plochy a linky,
500-900 text. V tmavem rezimu prevracena. */
--color-gray-100: #2A2825;
--color-gray-200: #322F2B;
--color-gray-300: #3B3732;
--color-gray-400: #4D4841;
--color-gray-500: #7A7268;
--color-gray-600: #B3AA9D;
--color-gray-700: #D9D2C7;
--color-gray-800: #ECE6DC;
--color-gray-900: #F4EFE7;
--color-black: #0E0D0C;
/* hlavicka (.toppanel::before) a paticka */
--color-dark-800: #121110;
--color-dark-900: #121110;
/* zaobleni zakladu - boxy, pole, dlazdice */
--border-radius-sm: 6px;
--border-radius-md: 10px;
--border-radius-lg: 16px;
--border-radius-xl: 16px;
/* stickery - zaklad ma pastelove polopruhledne */
--color-sticker-red-bg: #CA3121;
--color-sticker-green-bg: #E65B4C;
--color-sticker-green-text: #1B1A18;
--color-sticker-yellow-bg: #E65B4C;
--color-sticker-yellow-text: #1B1A18;
--color-sticker-blue-bg: #F4EFE7;
--color-sticker-blue-text: #1B1A18;
/* Sede ikony zakladu (#505050) jsou kreslene na bilou - na tmavem by
zmizely. Vsechny maji na platforme bilou verzi. */
--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-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-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 zelene; cervena sada (#B84C4C) k logu */
--icon-star-green: url('/ui/system/icons/red/star.svg');
--icon-star_active-green: url('/ui/system/icons/red/star_active.svg');
}
/* ============================================================
3. ZAKLADNI TYPOGRAFIE A PODKLAD
Zaklad nema na body barvu ani pozadi (prohlizecova bila/cerna).
============================================================ */
html,
body {
font-family: var(--mk-sans);
background-color: var(--mk-page);
}
body {
color: var(--mk-ink);
-webkit-font-smoothing: antialiased;
color-scheme: dark;
}
/* zaklad ma na mape vlastni 'Primary' natvrdo */
.map-container a.back-btn.js-back-to-contact {
font-family: var(--mk-sans);
}
h1, h2, h3, h5 {
font-family: var(--mk-display);
font-weight: 700;
letter-spacing: 0.02em;
}
/* nadpisy stranek - zaklad je dela jako h4 */
.news-box > h4,
.alergens-box > h4,
.orders-history-box > h4,
.favorite-items-box > h4.favorite-title,
.gallery-box > h4,
.login-content > h3 {
font-family: var(--mk-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mk-ink);
}
.loading {
background-color: var(--mk-page);
}
a {
transition: color 0.18s ease;
}
/* ============================================================
4. HLAVICKA + SPODNI LISTA
Pozadi navbaru = .toppanel::before v --color-dark-800,
ikony zustavaji bile ze zakladu.
============================================================ */
.toppanel::before {
box-shadow: inset 0 -1px 0 var(--mk-line), 0 10px 24px -18px rgba(0, 0, 0, 0.9);
}
/* na telefonu je nad logem pruh prekladace v gray-800 (prevracena = svetla) */
.toppanel .translator-box {
background-color: var(--mk-deep);
}
.toppanel .goog-te-gadget select.goog-te-combo option {
background-color: var(--mk-card);
color: var(--mk-ink);
}
/* pruh "Mame zavreno, otevirame opet za ..." - cerveny, tmavy text
jako ARDI v logu */
.notification-box {
background-color: var(--mk-accent);
color: var(--mk-on-accent);
font-weight: 600;
}
.notification-box::before {
border-bottom-color: transparent;
}
/* na telefonu se pri 16 px lamal na dva radky */
@media (max-width: 469px) {
.notification-box {
font-size: 0.875rem;
}
}
.notification-box .notf-info,
.notification-box .notf-inform,
.notification-box .notf-success,
.notification-box .notf-wrong {
color: var(--mk-on-accent);
}
/* spodni lista na mobilu (historie, oblibene, ucet, kosik) */
.bottom-panel::before {
background-color: var(--mk-deep);
opacity: 1;
box-shadow: inset 0 1px 0 var(--mk-line);
}
/* kosik uprostred listy: cervene kolecko s bilou ikonou */
.bottom-panel .bottom-btn-cart::before {
background-color: var(--mk-red);
box-shadow: 0 0 0 4px var(--mk-deep);
}
.bottom-panel .bottom-btn-cart::after {
background-image: var(--icon-cart_empty-white);
background-size: 52%;
}
/* pocet kusu = cervene policko jako ARDI v logu. Zaklad kresli policko
jako ::before umistene vuci TLACITKU (ne vuci cislu) a cervenym
gradientem - jinym pismem cislo z policka vyjelo. Policko je tu
primo na h4, ::before pryc. */
.bottom-panel .bottom-btn-cart > h4 {
display: flex;
justify-content: center;
align-items: center;
min-width: 22px;
width: auto;
height: 22px;
padding: 0 5px;
font-family: var(--mk-display);
font-weight: 700;
font-size: 0.9375rem;
line-height: 1;
color: var(--mk-on-accent);
background-color: var(--mk-accent);
background-image: none;
border-radius: 4px;
font-variant-numeric: tabular-nums;
}
.bottom-panel .bottom-btn-cart > h4::before {
content: none;
}
.bottom-panel .bottom-btn.points .bottom-btn-center > h4 {
color: var(--mk-accent);
}
.bottom-panel .bottom-btn,
.bottom-panel .bottom-btn-cart,
.toppanel .toppanel-btn {
transition: opacity 0.18s ease, transform 0.18s var(--mk-ease);
}
.bottom-panel .bottom-btn:active,
.bottom-panel .bottom-btn-cart:active,
.toppanel .toppanel-btn:active {
transform: scale(0.92);
}
@media (hover: hover) {
.bottom-panel .bottom-btn:hover,
.bottom-panel .bottom-btn-cart:hover,
.toppanel .toppanel-btn:hover {
opacity: 0.72;
}
}
/* ============================================================
5. NAVIGACE KATEGORII + VYHLEDAVANI
Ikony kategorii jsou cerna SVG (/svg/000000/...) v ![]()
-
na tmavem je prevraci filtr.
============================================================ */
/* Aktivni kategorie = cervene policko jako ARDI v logu.
ZAMERNE bez zmeny rezu - zmena sirky by pri kliknuti posunula radu. */
.extended-menu .food-types .food-type-button {
margin: 0.25rem 0.125rem;
padding: 0.5rem 0.875rem;
color: var(--mk-muted);
font-family: var(--mk-display);
font-weight: 600;
font-size: 1.125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 6px;
transition: color 0.18s ease, background-color 0.18s ease;
}
.extended-menu .food-types .food-type-button:hover {
color: var(--mk-ink);
background-color: var(--mk-raised);
}
.extended-menu .food-types .food-type-button.active {
color: var(--mk-on-accent);
background-color: var(--mk-accent);
}
.extended-menu .food-types .food-type-button::before {
content: none;
}
.extended-menu .food-types {
scrollbar-width: none;
}
.extended-menu .food-types::-webkit-scrollbar {
display: none;
}
.extended-menu .food-types .food-type-button > img {
width: 1.5rem;
filter: invert(1);
opacity: 0.7;
transition: opacity 0.18s ease, filter 0.18s ease;
}
.extended-menu .food-types .food-type-button:hover > img {
opacity: 1;
}
/* na cervenem policku zustava ikona cerna */
.extended-menu .food-types .food-type-button.active > img {
filter: none;
opacity: 0.9;
}
/* lupa */
button.filter-products-btn {
background-color: var(--mk-card);
border-color: var(--mk-line-strong);
border-radius: var(--mk-radius-btn);
transition: border-color 0.18s ease, background-color 0.18s ease;
}
button.filter-products-btn:hover {
background-color: var(--mk-raised);
border-color: var(--mk-muted);
}
.filter-title {
color: var(--mk-muted);
}
/* ============================================================
6. KARTY POLOZEK
Karta ma vlastni padding a REZERVU DOLE, cena i tlacitko sedi
absolutne u spodni hrany (.item-buy-now je v zakladu absolute).
============================================================ */
/* Nadpis sekce - zaklad ho kresli GRADIENTOVYM TEXTEM z primary
(background-clip: text). Tady "--- * PIZZA (A) * ---": linky po
stranach zustavaji ze zakladu a na vnitrnim konci nesou hvezdicku
z loga. */
.items .items-title h2,
.items .daily-menu-day {
font-family: var(--mk-display);
font-weight: 700;
font-size: 2.5rem;
line-height: 1.1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mk-ink);
-webkit-text-fill-color: var(--mk-ink);
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.items .items-title > h2::before,
.items .items-title > h2::after,
.items .daily-menu-day::before,
.items .daily-menu-day::after {
height: 1rem;
border-radius: 0;
background-color: transparent;
transform: none;
}
.items .items-title > h2::before,
.items .daily-menu-day::before {
margin-right: 1rem;
background: var(--mk-star) right center / 1rem 1rem no-repeat,
linear-gradient(var(--mk-line-strong), var(--mk-line-strong)) left center / calc(100% - 1.75rem) 1px no-repeat;
}
.items .items-title > h2::after,
.items .daily-menu-day::after {
margin-left: 1rem;
background: var(--mk-star) left center / 1rem 1rem no-repeat,
linear-gradient(var(--mk-line-strong), var(--mk-line-strong)) right center / calc(100% - 1.75rem) 1px no-repeat;
}
@media (max-width: 767px) {
.items .items-title h2,
.items .daily-menu-day {
font-size: 2rem;
}
}
.items .items-title p {
color: var(--mk-muted);
}
.items,
.favorite-items-container {
align-items: stretch;
}
.items .item,
.favorite-items-container .item {
position: relative;
padding: 0.5rem;
padding-bottom: 4.5rem;
background-color: var(--mk-card);
border-radius: var(--mk-radius);
transition: background-color 0.2s ease;
}
@media (hover: hover) {
.items .item:hover,
.favorite-items-container .item:hover {
background-color: var(--mk-raised);
}
}
/* Tablet: zaklad ma kartu pevne 256 px - na 820 px dva sloupce a po
stranach prazdno. Tri sloupce. */
@media (min-width: 768px) and (max-width: 1023px) {
.items {
column-gap: 1rem;
}
.items .item {
width: calc((100% - 2rem) / 3);
max-width: none;
}
}
/* --- FOTKA ---
Fotky maji ruzny pomer (na vysku, na sirku, ctverec) - zaklad
je kreslil ruzne velke (2026-10-19 Salami vyssi nez ostatni).
Ctverec s cover = vsechny stejne. Zoom na hover zvetsuje POZADI
uvnitr ::before (background-size), ne kartu. */
.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 {
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--mk-deep);
border-radius: var(--mk-radius-photo);
transition: transform 0.5s var(--mk-ease);
}
.items .item .item-photo-content,
.favorite-items-container .item .item-photo-content {
overflow: hidden;
border-radius: var(--mk-radius-photo);
}
@media (hover: hover) {
.items .item:hover .item-photo-content::before,
.favorite-items-container .item:hover .item-photo-content::before {
transform: scale(1.04);
}
}
/* iOS Safari neumi background-image: inherit na pseudo-elementu.
--item-bg plni pizza-ardi.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 ---
Dnes (2026-10-19) maji fotku vsechny pizzy; napoje a pozdejsi
polozky bez fotky nedostanou bily ctverec default_thumb.jpg, ale
hvezdicku nad nazvem. Az fotku nahraji, karta ji ukaze sama. */
.items .item .item-photo-content[style*="default_thumb"],
.favorite-items-container .item .item-photo-content[style*="default_thumb"] {
overflow: visible;
}
.items .item .item-photo-content[style*="default_thumb"]::before,
.favorite-items-container .item .item-photo-content[style*="default_thumb"]::before {
width: 1.25rem;
height: 1.25rem;
aspect-ratio: auto;
padding-top: 0;
margin: 0.75rem 0 0 0.5rem;
background: var(--mk-star) center / contain no-repeat;
border-radius: 0;
}
.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.5rem;
}
.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.5rem 0.5rem 0 0.5rem;
}
.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 (zaklad polozkam daily_menu fotku vypne) --- */
.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;
}
/* --- NAZEV A POPIS --- */
.items .item .item-photo-content-bottom,
.favorite-items-container .item .item-photo-content-bottom {
margin: 0.875rem 0 0 0;
padding: 0 0.5rem;
}
.items .item .item-photo-content-bottom > h4,
.favorite-items-container .item .item-photo-content-bottom > h4 {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--mk-ink);
}
.items .item .item-photo-content-bottom > p,
.favorite-items-container .item .item-photo-content-bottom > p {
margin-top: 0.375rem;
font-family: var(--mk-sans);
font-size: 0.875rem;
line-height: 1.45;
color: var(--mk-muted);
text-align: left;
opacity: 1;
}
/* popisy bez mezer za carkami jsou jedno nezalomitelne slovo -
na telefonu by vytekly z karty (Cartel 2026-10-12) */
.items .item .item-photo-content-bottom > h4,
.items .item .item-photo-content-bottom > p,
.favorite-items-container .item .item-photo-content-bottom > h4,
.favorite-items-container .item .item-photo-content-bottom > p,
.cart-items .item .item-photo-content-bottom > h4,
.product-detail .item-detail-label {
overflow-wrap: anywhere;
}
@media (max-width: 469px) {
.items .item .item-photo-content-bottom > h4,
.favorite-items-container .item .item-photo-content-bottom > h4 {
font-size: 1.125rem;
}
}
@media (min-width: 768px) {
.items .item .item-photo-content-bottom > h4,
.favorite-items-container .item .item-photo-content-bottom > h4 {
font-size: 1.5rem;
}
}
.items .item .item-info-panel,
.favorite-items-container .item .item-info-panel {
padding-top: 0.75rem;
}
/* Velikost ("mala 33cm", "velka 40cm") - select nebo jen text */
.items .item .item-info-panel .item-info-btn:nth-child(1),
.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(1) {
justify-content: flex-start;
padding: 0 0.5rem;
font-family: var(--mk-sans);
font-size: 0.875rem;
color: var(--mk-muted);
}
/* --- CENA --- dole vlevo, protejsek tlacitka "+" */
.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 "+" (2.75rem vysoke, 0.875rem od spodu) */
bottom: 1.5rem;
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-family: var(--mk-display);
font-weight: 700;
font-size: 1.75rem;
line-height: 1;
letter-spacing: 0.01em;
color: var(--mk-accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* vyber varianty na karte */
.items .item .item-info-panel .item-info-btn:nth-child(1) > select,
.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(1) > select {
height: 2.75rem;
padding-left: 0.75rem;
background-color: var(--mk-raised);
background-size: 1rem;
background-position: right 0.75rem center;
background-repeat: no-repeat;
border: 1px solid var(--mk-line);
border-radius: var(--mk-radius-btn);
color: var(--mk-ink);
font-family: var(--mk-sans);
font-size: 0.875rem;
font-weight: 600;
transition: border-color 0.18s ease;
}
.items .item .item-info-panel .item-info-btn:nth-child(1) > select:hover,
.items .item .item-info-panel .item-info-btn:nth-child(1) > select:focus {
border-color: var(--mk-accent);
}
select option {
background-color: var(--mk-card);
color: var(--mk-ink);
}
/* --- 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: 1rem;
right: 1rem;
background-color: var(--mk-card);
border: 1px solid var(--mk-line);
}
.favorite-items-container .item .item-info-panel .item-info-btn:nth-child(3):hover {
background-color: var(--mk-raised);
}
.favorite-items-container .item .item-photo-content[style*="default_thumb"] .item-photo-content-bottom {
padding-right: 2.75rem;
}
/* --- STICKERY ("AKCE", "PALIVE", "NOVINKA") --- barvy jsou v :root */
.stickers-content .sticker {
font-family: var(--mk-display);
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 4px;
}
.stickers-content .sticker:not([class*="sticker-"]) {
background-color: var(--mk-accent);
color: var(--mk-on-accent);
}
/* ============================================================
7. TLACITKA
Bezna .gradient-btn = cervena (z :root), jako na jejich webu.
============================================================ */
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(--mk-sans);
font-weight: 600;
letter-spacing: 0.01em;
}
/* Hover - ztmaveni vrstvou, NE pres background-image (ikonova tlacitka
nesou ikonu prave tam). */
.gradient-btn {
transition: box-shadow 0.18s ease, transform 0.18s var(--mk-ease);
}
.gradient-btn:hover {
box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.18);
}
.gradient-btn:active {
transform: scale(0.97);
}
.recomend-product-hover.gradient-btn:hover,
button.filter-products-btn.gradient-btn:hover,
a.back-btn.gradient-btn:hover {
box-shadow: none;
}
.recomend-product-hover.gradient-btn:active {
transform: none;
}
.menu-btn.account-menu {
border-radius: var(--mk-radius-btn);
}
/* Textova CTA (Vlozit do kosiku, Odeslat) - verzalky Barlow jako nadpisy */
input[type='button'].gradient-btn,
input[type='submit'].gradient-btn,
.item-review-plogin a.gradient-btn {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--mk-radius-btn);
}
/* sekundarni akce (Zpet v kosiku a v overlayi) - svetly 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(--mk-ink);
border: 1.5px solid var(--mk-line-strong);
}
.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(--mk-raised);
border-color: var(--mk-muted);
}
a.back-btn {
background-color: var(--mk-card);
color: var(--mk-ink);
border-color: var(--mk-line-strong);
}
a.back-btn:hover {
background-color: var(--mk-raised);
}
.map-container a.back-btn.gradient-btn {
color: #FFFFFF;
border-color: transparent;
border-radius: var(--mk-radius-btn);
}
/* Kupon a odkaz na platbu maji pozadi ze success (= cervena), popisek
ze zakladu bily (2,0 : 1) -> tmavy. */
.cart-sum .coupon-content > .set-coupon-btn,
.online-payment-content a {
color: var(--mk-on-accent);
}
/* --- TLACITKO "+" NA KARTE ---
1) od 470px ho zaklad roztahne a da mu ::after 'Pridat do kosiku'
-> vracime kolecko s "+";
2) barevnou plochu nese ::before se z-index: -1 -> barva primo na
tlacitku, ::before/::after pryc. */
.items .item .item-buy-now,
.favorite-items-container .item .item-buy-now {
position: absolute;
right: 0.875rem;
bottom: 0.875rem;
width: 2.75rem;
height: 2.75rem;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--mk-pill);
background-color: var(--mk-red);
background-image: none;
background-size: 100% 100%;
color: #FFFFFF;
overflow: hidden;
transition: background-color 0.18s ease, transform 0.2s var(--mk-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;
}
/* "+" ze dvou car v currentColor (textovy znak sedi opticky mimo stred) */
.items .item .item-buy-now .item-buy-now-icon,
.favorite-items-container .item .item-buy-now .item-buy-now-icon {
position: relative;
width: 1rem;
height: 1rem;
background-image: none;
transition: transform 0.3s var(--mk-ease);
}
.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);
}
@media (hover: hover) {
.items .item .item-buy-now:hover,
.favorite-items-container .item .item-buy-now:hover {
background-color: var(--mk-red-hover);
}
.items .item .item-buy-now:hover .item-buy-now-icon,
.favorite-items-container .item .item-buy-now:hover .item-buy-now-icon {
transform: rotate(90deg);
}
}
.items .item .item-buy-now:active,
.favorite-items-container .item .item-buy-now:active {
background-color: var(--mk-red-pressed);
transform: scale(0.92);
}
@media (min-width: 470px) {
.items .item .item-buy-now,
.favorite-items-container .item .item-buy-now {
width: 2.75rem !important;
height: 2.75rem !important;
bottom: 0.875rem !important;
padding: 0 !important;
border-radius: var(--mk-pill) !important;
}
.items .item .item-buy-now::after,
.favorite-items-container .item .item-buy-now::after {
content: none !important;
}
}
/* ============================================================
8. BANNER NA UVODU
============================================================ */
.app-banner-content .swiper-pagination-bullet {
width: 0.625rem;
height: 0.625rem;
background-color: var(--mk-ink);
opacity: 0.35;
transition: opacity 0.2s ease, width 0.3s var(--mk-ease);
}
.app-banner-content .swiper-pagination-bullet-active {
width: 1.5rem;
border-radius: var(--mk-pill);
background-color: var(--mk-accent);
opacity: 1;
}
/* ============================================================
9. DETAIL POLOZKY
Phoenix detail je CSS grid; fotku kresli ::before v grid-area 'photo'.
============================================================ */
.item-detail-name {
font-family: var(--mk-display);
font-weight: 700;
font-size: 2.5rem;
line-height: 1.1;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--mk-ink);
}
.product-detail h1,
.product-detail h2,
#item-detail .product-detail > h4 {
font-family: var(--mk-display);
color: var(--mk-ink);
}
.item-detail-price h4,
.content-detail .item-info-panel .item-info-btn.inked h4,
#item-detail .js-item-variation-price {
font-family: var(--mk-display);
font-weight: 700;
font-size: 2rem;
color: var(--mk-accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.item-detail-photo-content::before {
background-size: cover;
background-repeat: no-repeat;
background-color: var(--mk-deep);
border-radius: var(--mk-radius);
}
/* Chybejici fotka: default_detail.jpg je bily ctverec pres pul obrazovky.
Misto nej hvezdicka na tmave plose. */
.item-detail-photo-content[style*="default_detail"]::before {
background: var(--mk-star) center / 2.5rem 2.5rem no-repeat, var(--mk-card);
cursor: default;
}
@media (max-width: 767px) {
.item-detail-photo-content[style*="default_detail"]::before {
aspect-ratio: 16/7;
}
}
.product-detail .item-detail-label {
padding-right: 1rem;
}
.favorite-food-box button {
background-color: var(--mk-card);
border-color: var(--mk-line-strong);
transition: background-color 0.18s ease, transform 0.2s var(--mk-ease);
}
.favorite-food-box button:hover {
background-color: var(--mk-raised);
}
.favorite-food-box button:active {
transform: scale(0.9);
}
/* alergeny - zaklad je ma v primary (cervena na tmavem 3,3 : 1) */
.alergen-content > h1,
.alergen-content > h3 {
color: var(--mk-accent);
}
.alergen-content > h1::before,
.item-detail-label.item-detail-alergens .alergen-type::before {
border-color: var(--mk-accent);
}
.alergens-box .alergen-content {
background-color: var(--mk-card);
border-color: var(--mk-line);
border-radius: var(--mk-radius);
}
/* --- VARIANTY / PRIDAVKY --- */
.extended-menu-taste .ingredient-type-button {
color: var(--mk-muted);
border-radius: 6px;
transition: background-color 0.18s ease, color 0.18s ease;
}
.extended-menu-taste .ingredient-type-button:hover {
color: var(--mk-ink);
}
.extended-menu-taste .ingredient-type-button.active {
background-color: var(--mk-accent);
color: var(--mk-on-accent);
}
/* --- VLOZIT DO KOSIKU --- input.add-to-cart BEZ .gradient-btn */
.add-cart-column .add-to-cart {
height: 3.5rem;
font-family: var(--mk-display);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: var(--mk-radius-btn);
}
@media (max-width: 767px) {
.item-detail-name {
margin-top: 1rem;
font-size: 2rem;
}
}
input[type="button"].add-to-cart-unavailable {
background-color: transparent !important;
background-image: none !important;
color: var(--mk-muted) !important;
border: 1px solid var(--mk-line-strong) !important;
height: 3.5rem;
border-radius: var(--mk-radius-btn);
}
/* --- DOPORUCENE PRODUKTY --- */
.recomend-product::before {
background-size: cover;
background-repeat: no-repeat;
background-color: var(--mk-card);
border-radius: var(--mk-radius-photo);
}
/* --- RECENZE --- */
.item-reviews-box {
border-top: 1px solid var(--mk-line);
margin-top: 1.5rem;
padding-top: 1rem;
}
.review {
background-color: var(--mk-card);
border-radius: var(--mk-radius);
}
.item-review-plogin {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1.25rem;
background-color: var(--mk-card);
border-radius: var(--mk-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;
}
}
/* ============================================================
10. 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(--mk-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mk-ink);
}
#cartOverlay-3 .cart-box > h4 {
margin-top: 1.5rem;
}
.cart-right-box {
background-color: var(--mk-page);
}
.cart-sum {
background-color: var(--mk-card);
border: 1px solid var(--mk-line);
border-radius: var(--mk-radius);
font-variant-numeric: tabular-nums;
}
.cart-sum .cart-col-name,
.cart-sum .cart-price-column .cart-col-name,
.cart-sum .actions-container .cart-price-column.cart-bonus .cart-col-name {
color: var(--mk-ink);
}
.cart-sum .cart-price-column.cart-price .cart-col-name,
.cart-sum .cart-price-column.cart-price .cart-col-value {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--mk-accent);
}
.cart-sum .actions-container .cart-price-column:first-child {
border-top-color: var(--mk-line);
}
.cart-sum .actions-container .coupon-delete-btn {
background-color: var(--mk-raised);
}
.cart-sum .cart-bottom-btns .cart-pay-btn > a,
.cart-sum .cart-bottom-btns .cart-back-btn > a,
.cart-pay-btn > a,
.cart-back-btn > a {
border-radius: var(--mk-radius-btn);
}
/* hlavni i vedlejsi tlacitko v kosiku a v okne pridavku stejnym pismem
(jinak vedle sebe Montserrat a Barlow v jine velikosti) */
.cart-pay-btn > a,
.cart-back-btn > a,
.overlay-enhancement-content .cart-bottom-btns a {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.15;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 767px) {
.cart-sum,
.item-review-plogin {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
/* "K nakupu doporucujeme" v kosiku i "Take doporucujeme" v detailu */
.cart-box .cart-recomend-box > h4,
#item-detail .cart-recomend-box > h4 {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mk-ink);
}
.cart-box .cart-recomend-box {
border-color: var(--mk-line);
}
.cart-box .cart-recomend-box:has(> h4[style*="display: none"]) {
border-color: transparent;
}
#cartOverlay-2 .select-content-box,
#cartOverlay-3 .select-content-box {
background-color: var(--mk-card);
border-color: var(--mk-line);
}
/* --- RADEK POLOZKY V KOSIKU --- */
.cart-items .item {
padding: 0.75rem;
background-color: var(--mk-card);
border-radius: var(--mk-radius);
}
.cart-items .item .item-photo-content::before {
background-size: cover;
background-repeat: no-repeat;
background-color: var(--mk-deep);
border-radius: var(--mk-radius-photo);
}
@supports (-webkit-touch-callout: none) {
.cart-items .item .item-photo-content::before {
background-image: var(--item-bg);
}
}
.cart-items .item .item-photo-content[style*="default_thumb"]::before {
background: var(--mk-star) center / 30% 30% no-repeat, var(--mk-raised);
}
.cart-items .item .item-photo-content-bottom > h4 {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--mk-ink);
}
.cart-items .item .item-info-btn:nth-child(1),
.cart-items .item .item-info-btn:nth-child(3) {
color: var(--mk-muted);
}
.cart-items .item .item-info-btn:nth-child(2) {
font-family: var(--mk-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--mk-accent);
font-variant-numeric: tabular-nums;
}
.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(--mk-raised);
border: 1px solid var(--mk-line);
}
.cart-items .item .product-delete-btn:hover {
background-color: var(--mk-line);
}
.cart-items .item-change-btn {
background-color: var(--mk-raised);
border-color: var(--mk-line);
border-radius: var(--mk-pill);
}
.cart-items .item-change-btn > span {
font-weight: 600;
color: var(--mk-ink);
font-variant-numeric: tabular-nums;
}
.cart-items .item-change-btn .change-btn:hover {
background-color: var(--mk-line);
}
.cart-items .item-taste-box .ing-minus {
color: var(--mk-muted);
}
/* formularova pole */
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(--mk-ink);
}
input::placeholder,
textarea::placeholder {
color: var(--mk-muted);
}
input[type='text']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(230, 91, 76, 0.18);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--mk-ink) !important;
box-shadow: inset 0 0 20px 20px var(--mk-raised) !important;
transition: background-color 5000s ease-in-out 0s;
}
/* vypinac - bily jezdec zustava, podklad z prevracene sede */
.toggle .toggle-control {
background-color: var(--mk-raised);
}
.timed-order-wrapper .time-select-container .time-select {
background-color: var(--mk-card);
color: var(--mk-ink);
}
#cartOverlay-2 .cart-tringel-select-btn {
border-color: var(--mk-line-strong);
color: var(--mk-ink);
}
#cartOverlay-2 .cart-tringel-select-btn:hover {
background-color: var(--mk-raised);
}
#cartOverlay-2 .cart-tringel-select-btn.active {
background-color: var(--mk-accent);
border-color: var(--mk-accent);
color: var(--mk-on-accent);
}
#cartOverlay-2 .bonus-points-controll-panel {
background-color: var(--mk-card);
}
.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(--mk-card);
color: var(--mk-ink);
}
.ui-autocomplete {
background-color: var(--mk-card);
border-color: var(--mk-line);
color: var(--mk-ink);
}
.ui-state-active {
background-color: var(--mk-raised);
}
/* kalendar data (foopicker) - zaklad bily natvrdo */
.foopicker {
background: var(--mk-card);
color: var(--mk-ink);
border-color: var(--mk-line);
}
.foopicker__header {
background: var(--mk-raised);
}
.foopicker__day--today {
background: var(--mk-line);
}
.foopicker__day:hover,
.foopicker__day--selected {
background: var(--mk-accent);
color: var(--mk-on-accent);
}
.foopicker__day--disabled,
.foopicker__day--disabled:hover {
background: transparent;
color: var(--mk-line-strong);
}
/* ============================================================
11. OVERLAYE, UCET, KONTAKT
============================================================ */
.overlay-enhancement-content,
.configurator-render-box,
.configurator-render-box .configurator-item-price::before,
.configurator-render-box .configurator-contain-ingredients::before {
background-color: var(--mk-card);
}
.overlay-enhancement-content .ingredient-types {
border-bottom-color: var(--mk-line);
}
.overlay-enhancement-content .ingredient-type-button {
color: var(--mk-muted);
border-radius: 6px;
}
.overlay-enhancement-content .ingredient-type-button:hover {
background-color: var(--mk-raised);
color: var(--mk-ink);
}
.overlay-enhancement-content .ingredient-type-button.active {
background-color: var(--mk-accent);
color: var(--mk-on-accent);
}
.overlay-enhancement-content .extended-title {
color: var(--mk-ink);
}
.overlay-enhancement-content .extended-price {
font-weight: 600;
color: var(--mk-accent);
font-variant-numeric: tabular-nums;
}
.overlay-enhancement-content .extended-quantity {
color: var(--mk-ink);
border-top-color: var(--mk-line);
border-bottom-color: var(--mk-line);
}
.configurator-layout .overlay-enhancement-content,
.configurator-layout .extended-menu-taste {
border-right-color: var(--mk-line);
}
.configurator-render-box .contain-ingredient {
border-bottom-color: var(--mk-line);
}
.overlay-qr-payment-content {
background-color: var(--mk-card);
color: var(--mk-ink);
}
.overlay-qr-payment-timer {
color: var(--mk-accent);
}
.news-content,
.new-content {
background-color: var(--mk-card);
border-radius: var(--mk-radius);
}
.new-box .new-column .delete-btn::before {
background-color: var(--mk-ink);
}
/* body na uctu - zaklad gradientovy text z primary */
.account-info-center {
color: var(--mk-accent);
-webkit-text-fill-color: var(--mk-accent);
background-image: none;
}
.account-info-center::after {
background-color: var(--mk-page);
}
.order-tracking-content {
background-color: var(--mk-card);
}
.order-tracking-box .order-tracking-daily-id {
color: var(--mk-ink);
}
.reviews-info-column .tooltiptext {
background-color: var(--mk-raised);
color: var(--mk-ink);
}
.map-info-box {
background-color: var(--mk-card);
}
.map-info-box > h4,
.open-hours-box > h4,
.contact-form-container > h4,
.map-content-title > h4 {
font-family: var(--mk-display);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mk-ink);
}
#contact .map-info-box h4,
#contact .map-container h3 {
font-weight: 700;
color: var(--mk-ink);
}
/* Telefon je