/* ================================================
   OLD MAN'S — Shoptet Disco — Custom CSS v5.72
   GitHub: serbus-create/oldmans-shoptet
   Cil: vizualne sedet na oldmans.cz (WordPress)
   ================================================ */

/* Font pro menu kategorií (30. 7. 2026, na žádost klienta — zaoblený,
   "friendly" styl podle referenčního screenshotu). Na webu dosud nebyl
   načtený žádný podobný font (jen nativní Shoptet "Source Sans 3"),
   proto dotažen přes Google Fonts. @import MUSÍ být úplně první
   pravidlo v souboru, jinak ho prohlížeč ignoruje. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');


/* ──────────────────────────────────────────────
   SKRYTI RUSIVYCH SHOPTET PRVKU
────────────────────────────────────────────── */
/* Shoptet horni navigacni lista (Jak nakupovat | CZK | Prihlaseni) */
.top-navigation-bar { display: none !important; }

/* "Vitejte v nasem obchode" uvitaci text */
.welcome-wrapper { display: none !important; }

/* Puvodni Shoptet header — cely wrapper, ne jen jeho podcasti (i s
   prazdnymi .header-top/.header-bottom zustaval wrapper #header
   zabirat misto vlastnim paddingem/vyskou, na mobilu to delalo
   velkou prazdnou mezeru na zacatku stranky) */
#header { display: none !important; }

/* .overall-wrapper mel padding-top:50px — rezerva mista pro puvodni
   nativni (fixed) header Shoptetu, ktery uz nepouzivame (mame vlastni
   sticky header). Bez tohohle zruseni zustavala na zacatku stranky
   velka prazdna mezera. */
.overall-wrapper { padding-top: 0 !important; }

/* ── OBSAH – normalni kontejner (odsazeni po stranach) ── */
#content-wrapper.container,
#content-wrapper {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
.content-wrapper-in,
#content.content.wide,
#content.content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── BANNER – "prorazi" do plne sirky i uvnitr kontejneru ── */
.banners-row, .row.banners-row {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
}
.wide-carousel {
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; border-radius: 0 !important;
}
.wide-carousel img, #carousel img {
  width: 100% !important; max-width: 100% !important;
  height: auto !important; display: block !important;
  border-radius: 0 !important;
}

.om-section { max-width: 100%; }

/* Hero banner na mobilu — mírné odsazení od okrajů + zaoblené rohy
   (bez čtverce, přirozený poměr stran zůstává) */
@media (max-width: 768px) {
  .banners-row, .row.banners-row {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .wide-carousel,
  .wide-carousel img,
  #carousel img {
    border-radius: 16px !important;
  }
}

/* Shoptetí benefit lišta (Jsme 100% česká značka / Vyrobíme do 24h / ...) — viditelná pod hero bannerem na homepage, na detailu produktu schovaná */
.benefitBanner,
.benefitBanner.position--benefitHomepage {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 25px 20px !important;
  box-sizing: border-box !important;
}
body.type-product .benefitBanner,
body.type-product .benefitBanner.position--benefitHomepage,
body.type-category .benefitBanner,
body.type-category .benefitBanner.position--benefitHomepage {
  display: none !important;
}
.benefitBanner__item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.benefitBanner__picture { flex-shrink: 0 !important; }
.benefitBanner__img { width: 64px !important; height: auto !important; }
.benefitBanner__content { min-width: 0 !important; }
.benefitBanner__title {
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-bottom: 2px !important;
}
.benefitBanner__data {
  font-size: 16px !important;
  color: #555 !important;
  line-height: 1.3 !important;
}
@media (max-width: 900px) {
  .benefitBanner,
  .benefitBanner.position--benefitHomepage {
    flex-wrap: wrap !important;
  }
  .benefitBanner__item { flex: 1 1 45% !important; }
}
@media (max-width: 480px) {
  .benefitBanner,
  .benefitBanner.position--benefitHomepage { gap: 5px !important; }
  .benefitBanner__item {
    flex: 1 1 100% !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }
  .benefitBanner__img { width: 48px !important; }
  .benefitBanner__title { font-size: 17px !important; }
  .benefitBanner__data { font-size: 14px !important; }
}
/* Nativní Shoptet wrapper kolem USP (section.usp) má vlastní velký
   padding-bottom, který dělal velkou mezeru před nadpisem Bestsellery */
@media (max-width: 768px) {
  section.usp { padding-bottom: 10px !important; }
  .benefitBanner,
  .benefitBanner.position--benefitHomepage { padding-bottom: 4px !important; }
}
.container { max-width: 1400px !important; padding-left: 20px !important; padding-right: 20px !important; }

/* ──────────────────────────────────────────────
   TOP BAR
────────────────────────────────────────────── */
#om-topbar {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #666;
  padding: 6px 0;
}
#om-topbar .om-topbar-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
#om-topbar a { color: #666; text-decoration: none; }
#om-topbar a:hover { color: #000; }

/* ──────────────────────────────────────────────
   HEADER
────────────────────────────────────────────── */
#om-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  position: sticky;
  top: 0;
  /* Shoptet zatemňovací clona při aktivním vyhledávání má z-index:1002
     (fixed, přes celou stránku). #om-header sám o sobě vytváří stacking
     context (position:sticky + z-index), takže i kdyby měl dropdown
     .searchWhisperer uvnitř vyšší z-index, platí to jen VNITŘ hlavičky
     — celá hlavička jako celek se porovnává s clonou podle SVÉHO
     vlastního z-indexu. Proto musí být z-index hlavičky vyšší než
     clona, jinak se přes ni dropdown ani neproklikne (29. 7. 2026). */
  z-index: 1010;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
#om-header .om-header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
#om-header .om-logo img { height: 55px; width: auto; display: block; }

/* Kontakt */
#om-header .om-contact { display: flex; align-items: center; gap: 16px; color: #000; text-decoration: none; flex-shrink: 0; }
#om-header .om-contact-icon { width: 44px; height: 44px; }
#om-header .om-contact-icon img { width: 100%; height: 100%; }
#om-header .om-contact-numb { font-weight: 600; color: #11c65d; font-size: 16px; line-height: 1.5; margin-bottom: -5px; }
#om-header .om-contact-text { color: #999; font-size: 13px; }
#om-header .om-contact:hover .om-contact-numb { text-decoration: underline; }

/* Vyhledavani */
#om-header .om-search {
  flex: 1; max-width: 848px; margin: 0 16px; position: relative;
  /* Musí být nad Shoptet zatemňovací clonou (z-index:1002 při aktivním
     vyhledávání, viz .searchWhisperer níže) — jinak zešedne i samotné
     pole, ne jen dropdown pod ním. 29. 7. 2026, na žádost klienta. */
  z-index: 1010;
}
#om-header .om-search form {
  display: flex; align-items: center; background: #f3f3f4;
  border-radius: 50px; padding: 4px 4px 4px 0; height: 52px;
  transition: box-shadow .3s; position: relative;
}

/* Dropdown s návrhy vyhledávání (nativní Shoptet .searchWhisperer,
   29. 7. 2026, na žádost klienta) — JS ho přesunul dovnitř tohohle
   boxu (#om-header .om-search), takže potřebuje absolutní pozici
   vůči němu, ne vůči původnímu (skrytému) nativnímu headeru.
   Viditelnost/skrývání (třída .active) řídí dál sám nativní Shoptet
   JS beze změny — tady jen pozicujeme a stylujeme rámeček. */
.searchWhisperer {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  /* Shoptet při aktivním vyhledávání (body.search-focused) vykresluje
     černou zatemňovací clonu (fixed, z-index:1002) přes celou stránku
     — náš dropdown musí být NAD ní, jinak je pod ní vidět jen šedě
     a navíc nejde proklikat na produkty (clona zachytává kliky).
     29. 7. 2026, na žádost klienta. */
  z-index: 1010 !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16) !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  /* Bez tohohle se na iOS Safari uvnitř dropdownu nedalo scrollovat —
     dotykové gesto "propadlo" na rodičovský scrollující kontejner
     (.om-mobile-drawer), místo aby se scrolloval samotný dropdown.
     -webkit-overflow-scrolling zapíná plynulé (momentum) scrollování
     na iOS, overscroll-behavior zabrání "přelití" scrollu na rodiče,
     jakmile dropdown dojede na svůj konec (29. 7. 2026). */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}
#om-header .om-search input:focus { outline: none !important; box-shadow: none !important; }
#om-header .om-search form:hover { box-shadow: 0 0 0 2px #f7c91b; }
#om-header .om-search form:focus-within { box-shadow: 0 0 0 2px #f7c91b !important; }
#om-header .om-search input,
#om-header .om-search input:focus,
#om-header .om-search input:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
#om-header .om-search input {
  flex: 1; border: none; background: transparent;
  padding: 0 8px 0 50px; font-size: 15px; color: #000;
  outline: none; height: 100%;
}
#om-header .om-search form:before {
  content: "🔍"; position: absolute; left: 18px;
  font-size: 16px; pointer-events: none;
}
#om-header .om-search button {
  background: #000; color: #fff; border: none; border-radius: 50px;
  padding: 0 22px; height: 44px; font-size: 15px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: .3s;
}
#om-header .om-search button:hover { background: #9f1400; }

/* Nav */
#om-header .om-nav { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
#om-header .om-nav a {
  color: #666; font-size: 15px; padding: 17px 13px;
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; white-space: nowrap; transition: .3s;
}
#om-header .om-nav a:hover { color: #000; background: rgba(247,201,27,.1); border-radius: 5px; }

/* Ikony */
#om-header .om-icons { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
#om-header .om-login a { font-size: 24px; color: #000; text-decoration: none; display: flex; transition: .3s; }
#om-header .om-login a:hover { color: #f7c91b; }

/* Kosik */
#om-header .om-cart a {
  display: flex; align-items: center; column-gap: 12px;
  background: #f3f3f4; border-radius: 50px;
  padding: 4px 20px 4px 4px; height: 52px;
  font-weight: 600; color: #000; font-size: 15px;
  text-decoration: none; transition: .3s;
  min-width: 160px; white-space: nowrap; overflow: hidden;
}
#om-header .om-cart-icon {
  display: flex; width: 44px; height: 44px;
  background: #f7c91b; border-radius: 50px;
  align-items: center; justify-content: center;
  flex-shrink: 0; color: #1a1a1a;
}
#om-header .om-cart-icon svg { width: 20px; height: 20px; display: block; }
#om-header .om-cart a:hover { background: #ebebeb; }

/* ──────────────────────────────────────────────
   KATEGORIE MENU
────────────────────────────────────────────── */
#om-cat-menu {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
}
#om-cat-menu .om-cat-menu-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
}
.om-cat-list {
  display: flex; flex-wrap: nowrap; list-style: none;
  margin: 0; padding: 0; align-items: center;
  overflow: visible; position: relative;
}
.om-cat-list > li {
  display: inline-flex; white-space: nowrap;
  font-size: 17px; font-weight: 700; border-radius: 5px;
  transition: .3s; align-items: center;
  /* Zaoblený "friendly" font podle klientovy reference (30. 7. 2026) —
     dřív jen nativní Shoptet font, teď Baloo 2 (viz @import na začátku
     souboru), větší a tučnější, ať je čitelný v tomhle stylu písma. */
  font-family: 'Baloo 2', sans-serif;
}
.om-cat-list > li > a {
  color: #000; padding: 14px 13px;
  display: flex; align-items: center; gap: 5px;
  text-decoration: none;
}
.om-cat-list > li:hover { background: rgba(247,201,27,.1); }
.om-cat-list .cat-favorite > a { color: #79b530; }
.om-cat-list .cat-sale > a { color: #E74E1B; }
.om-cat-list .cat-favorite:hover { background: rgba(121,181,48,.1) !important; }
.om-cat-list .cat-sale:hover { background: rgba(231,78,27,.1) !important; }

/* Více dropdown */
.om-more-btn { margin-left: auto; position: relative; cursor: pointer; }
.om-more-btn > span { padding: 14px 13px; display: flex; align-items: center; color: #000; }
.om-more-submenu {
  display: none; position: absolute; right: 0; top: 100%;
  background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 10px; border-radius: 0 0 10px 10px;
  min-width: 200px; z-index: 1001; list-style: none;
}
.om-more-submenu li { display: flex !important; padding: 8px 12px; }
.om-more-submenu li a { color: #000; text-decoration: none; }

/* ──────────────────────────────────────────────
   ZVÝRAZNĚNÍ NATIVNÍ KATEGORIE "OBCHOD"
   (30. 7. 2026, na žádost klienta, podle reference webu Fermat)
   "Obchod" je existující nativní Shoptet kategorie (/kategorie/obchod/),
   která se v liště zobrazuje jako běžná položka (li.om-cat-dynamic,
   ověřeno konzolí) — NEVYTVÁŘÍME nový prvek, jen tenhle existující
   zeleně zvýrazníme a přidáme mu po najetí myší rozbalovací mřížku
   všech kategorií (stejné ikony/URL jako homepage sekce "Kategorie").
   Ostatní kategorie v liště zůstávají úplně beze změny.
────────────────────────────────────────────── */
li.om-cat-dynamic.om-obchod-enhanced {
  position: relative;
}
/* OPRAVA (3. 8. 2026, na žádost klienta) — barva změněna ze zelené
   na žlutou (stejný odstín jako zbytek žlutých prvků na webu,
   #f7c91b) a tvar z kulaté pilulky (50px) na lehké zaoblení (6px,
   stejné jako tlačítka v košíku/checkoutu). Text/šipka přebarveny na
   tmavou (#1a1a1a) — na žlutém pozadí je to čitelnější a odpovídá
   zavedené konvenci webu (žluté prvky mají všude tmavý text, viz
   .om-btn-primary, .om-footer-ig, ikona košíku v hlavičce). */
li.om-cat-dynamic.om-obchod-enhanced > a.om-obchod-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #f7c91b !important;
  color: #1a1a1a !important;
  padding: 9px 18px !important;
  margin: 8px 0 !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
li.om-cat-dynamic.om-obchod-enhanced:hover > a.om-obchod-btn {
  background: #e6b800 !important;
}
.om-obchod-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  transform: rotate(45deg);
  margin-top: -4px;
  margin-left: 2px;
  transition: transform .2s;
  display: inline-block;
}
li.om-cat-dynamic.om-obchod-enhanced:hover .om-obchod-chevron {
  transform: rotate(225deg);
  margin-top: 4px;
}
.om-obchod-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  /* OPRAVA (30. 7. 2026) — 4. sloupec (delší názvy jako "Omáčky a
     majonézy", "Česká klasika") přetékal MIMO bílý box — grid sloupce
     se defaultně nedovolí zmenšit pod šířku svého obsahu, takže box
     zůstal 720px, ale obsah reálně potřeboval víc a vylil se ven bez
     bílého pozadí za sebou (stejná chyba, jakou jsme řešili u karet
     množstevní slevy — viz min-width:0 na .om-obchod-dropdown-item
     níže). Širší box (880px) dá čtyřem sloupcům dost místa. */
  width: 880px;
  max-width: 92vw;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1002;
}
li.om-cat-dynamic.om-obchod-enhanced:hover .om-obchod-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.om-obchod-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: border-color .2s, background .2s !important;
  /* KRITICKÉ — bez tohohle grid sloupec s "1fr" nejde zmenšit pod
     šířku textu (browser default min-width:auto), takže delší název
     roztáhne svůj sloupec přes hranici boxu (stejná lekce jako u
     karet množstevní slevy na detailu produktu). */
  min-width: 0 !important;
}
.om-obchod-dropdown-item:hover {
  border-color: #79b530 !important;
  background: #f9fdf5 !important;
}
.om-obchod-dropdown-item img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.om-obchod-dropdown-item .om-obchod-arrow {
  margin-left: auto !important;
  color: #79b530 !important;
  font-weight: 800 !important;
}
@media (max-width: 992px) {
  .om-obchod-dropdown {
    width: 90vw;
  }
}

/* ──────────────────────────────────────────────
   PRODUKTY
────────────────────────────────────────────── */
.product-item {
  border-radius: 10px !important;
  border: 1px solid #cbcbcb !important;
  background: #fff !important;
  transition: border-color .3s, box-shadow .3s !important;
}
.product-item:hover {
  border-color: #000 !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.08) !important;
}
.product-item [class*="price"] { font-weight: 600 !important; }
.product-item [class*="price--sale"],
.product-item ins .price,
.product-item .price ins { color: #9f1400 !important; font-weight: 700 !important; }
.product-item [class*="buy"],
.product-item [class*="add-to-cart"],
.product-item .to-cart-button {
  background: #79b530 !important; color: #fff !important;
  border: none !important; border-radius: 3px !important;
  transition: .3s !important;
}
.product-item [class*="buy"]:hover,
.product-item .to-cart-button:hover { background: #000 !important; }

/* Stitky */
.product-item .bool-sale { background: #fb5f2b !important; color: #fff !important; border-radius: 4px !important; }
.product-item .bool-new { background: #9f1400 !important; color: #fff !important; border-radius: 4px !important; }

/* ──────────────────────────────────────────────
   HOMEPAGE SEKCE – spolecne
────────────────────────────────────────────── */
.om-section {
  padding: 55px 0;
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}
.om-section-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.om-section-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 12px;
}
.om-section-header h2, .om-section > .om-section-inner > h2 {
  font-size: 22px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 1px !important;
  color: #000 !important; margin: 0 0 20px !important;
}
.om-section-header h2 { margin: 0 !important; }
.om-subtitle { color: #666; font-size: 14px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }

/* Tlacitka */
.om-btn-more {
  color: #000; border: 1px solid #000; border-radius: 5px;
  padding: 7px 18px; font-size: 13px; text-decoration: none;
  text-transform: uppercase; transition: .3s; white-space: nowrap;
}
.om-btn-more:hover { background: #000; color: #fff; }
.om-btn-red {
  display: inline-block; background: #9f1400; color: #fff !important;
  border-radius: 5px; padding: 12px 28px; font-weight: 600;
  font-size: 15px; text-decoration: none !important; transition: .3s; margin-top: 15px;
}
.om-btn-red:hover { background: #7a0f00; color: #fff !important; }
.om-btn-primary {
  display: inline-block; background: #f7c91b; color: #000 !important;
  border-radius: 5px; padding: 12px 28px; font-weight: 700;
  text-decoration: none !important; transition: .3s; margin-top: 15px;
}
.om-btn-primary:hover { background: #e6b800; }

/* ──────────────────────────────────────────────
   PARTNEŘI – scrollujici pas
────────────────────────────────────────────── */
.om-partners { background: #f9f9f9; overflow: hidden; }
.om-partners h3 { font-size: 20px; font-weight: 700; margin-bottom: 25px; }
.om-partners-track { overflow: hidden; }
.om-partners-list {
  display: flex; align-items: center; gap: 50px;
  animation: om-scroll 30s linear infinite; width: max-content;
}
.om-partners-list img { height: 55px; width: auto; object-fit: contain; filter: grayscale(20%); transition: .3s; }
.om-partners-list img:hover { filter: none; }
@keyframes om-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ──────────────────────────────────────────────
   O NAS
────────────────────────────────────────────── */
.om-about { background: #fff; }
.om-about-inner { display: flex; align-items: center; gap: 60px; }
.om-about-text { flex: 1; }
.om-about-text h2 { font-size: 42px !important; font-weight: 800 !important; color: #9f1400 !important; text-transform: uppercase !important; line-height: 1.2 !important; }
.om-about-text p { color: #444; line-height: 1.8; margin-bottom: 14px; font-size: 18px; }
.om-about-img { flex-shrink: 0; }
.om-about-img img { max-width: 280px; width: 280px; }
@media (max-width: 768px) {
  .om-about-inner { flex-direction: column; }
  .om-about-img { display: none; }
}

/* ──────────────────────────────────────────────
   KATEGORIE
────────────────────────────────────────────── */
.om-categories { background: #f5f5f5; }
.om-categories h2 span { color: #9f1400; }
.om-categories h2 { color: #f0c944; }
.om-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.om-cat-item {
  background: #fff; border: 1px solid #e1e1e1; border-radius: 10px;
  padding: 16px 18px; text-decoration: none; color: #000;
  font-weight: 500; font-size: 14px; transition: .3s;
  display: flex; align-items: center; gap: 10px;
}
.om-cat-item img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.om-cat-item:hover { border-color: #9f1400; background: #9f1400; color: #fff !important; }
.om-cat-item:hover img { filter: brightness(10); }

/* ──────────────────────────────────────────────
   APETIT / NAPSALI O NAS
────────────────────────────────────────────── */
.om-apetit { background: #fff; padding-bottom: 8.4px !important; }
.om-apetit-inner { display: flex; align-items: center; gap: 50px; }
.om-apetit-img { flex-shrink: 0; }
.om-apetit-img img { border-radius: 12px; max-width: 280px; width: 100%; }
.om-apetit-text { flex: 1; }
.om-apetit-logo { max-width: 70px; margin-bottom: 14px; }
.om-apetit-text h2 { font-size: 42px !important; font-weight: 800 !important; color: #9f1400 !important; text-transform: uppercase !important; margin-bottom: 16px !important; }
.om-apetit-text p { color: #444; line-height: 1.8; margin-bottom: 12px; font-size: 18px; }
@media (max-width: 768px) {
  .om-apetit-inner { flex-direction: column; }
  .om-apetit-img { order: -1; }
  .om-apetit-img img { max-width: 100%; }
}

/* ──────────────────────────────────────────────
   RECEPTY S OBRAZKY — posuvný pás jako Bestsellery
────────────────────────────────────────────── */
.om-recipes { background: #f9f9f9; }
.om-recipes-wrapper { position: relative; }
.om-recipes .om-recipes-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 10px;
  margin: -4px -4px 0;
  scrollbar-width: none;
}
.om-recipes .om-recipes-grid::-webkit-scrollbar { display: none; }
.om-recipes .om-recipe-item {
  flex: 0 0 auto;
  width: 270px;
  scroll-snap-align: start;
  background: #fff; border-radius: 16px;
  border: 1px solid #ececec; overflow: hidden;
  text-decoration: none; color: #000;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  display: block;
}
.om-recipes .om-recipe-item:hover {
  border-color: #ddd;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  transform: translateY(-4px);
}
.om-recipes .om-recipe-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.om-recipes .om-recipe-title {
  padding: 16px; font-size: 16px; font-weight: 700;
  line-height: 1.35; color: #1a1a1a;
}

/* Šipky */
.om-recipe-nav {
  position: absolute;
  top: 135px;
  transform: translateY(-50%);
  background: #f0c944 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #fff !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
.om-recipe-nav svg { width: 20px; height: 20px; display: block; }
.om-recipe-nav:hover { background: #e6b800 !important; transform: translateY(-50%) scale(1.05); }
.om-recipe-nav:focus { outline: none !important; box-shadow: none !important; }
.om-recipe-nav-prev { left: -20px; }
.om-recipe-nav-next { right: -20px; }
@media (max-width: 600px) {
  .om-recipes .om-recipe-item { width: 220px; }
  .om-recipe-nav { top: 110px; }
  .om-recipe-nav-prev { left: 0; }
  .om-recipe-nav-next { right: 0; }
}

/* ──────────────────────────────────────────────
   INSTAGRAM
────────────────────────────────────────────── */
.om-instagram { background: #f5f5f5; }
.om-insta-inner {
  display: flex; align-items: center;
  gap: 50px; justify-content: space-between;
}
.om-insta-text { flex: 1; }
.om-instagram h2 { font-size: 56px !important; font-weight: 800 !important; text-transform: uppercase !important; margin: 4px 0 16px !important; line-height: 1.05 !important; }
.om-insta-na { color: #9f1400 !important; }
.om-insta-word { color: #f0c344 !important; }
.om-instagram .om-subtitle { color: #1a1a1a; font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; }
.om-instagram p { color: #333; margin-bottom: 10px; font-size: 17px; }
.om-instagram .om-btn-primary {
  display: inline-block !important;
  background: #9f1400 !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 18px 32px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin-top: 10px !important;
}
.om-instagram .om-btn-primary:hover { background: #7d1000 !important; }
.om-insta-grid {
  flex-shrink: 0; display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; max-width: 380px; width: 100%;
}
.om-insta-grid a img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; display: block; transition: opacity .3s;
}
.om-insta-grid a:hover img { opacity: .75; }
@media (max-width: 992px) {
  .om-insta-inner { flex-direction: column; text-align: center; }
  .om-insta-grid { max-width: 100%; }
}

/* ──────────────────────────────────────────────
   PATICKA — světlé pozadí místo černé čáry
────────────────────────────────────────────── */
#footer, footer.footer {
  background: #f0f0f0 !important;
  background-color: #f0f0f0 !important;
  color: #555 !important;
  border-top: 1px solid #ddd !important;
}
#footer *, footer.footer * { color: #555 !important; }
#footer a, footer.footer a { color: #555 !important; text-decoration: none !important; }
#footer a:hover, footer.footer a:hover { color: #9f1400 !important; }

/* ──────────────────────────────────────────────
   SWIPER TECKICKY
────────────────────────────────────────────── */
.swiper-pagination-bullet { background: #fff !important; opacity: .5 !important; }
.swiper-pagination-bullet-active {
  background: #f7c91b !important; opacity: 1 !important;
  width: 30px !important; border-radius: 5px !important;
}

/* ──────────────────────────────────────────────
   RESPONZIVITA
────────────────────────────────────────────── */
@media (max-width: 1399px) { #om-header .om-contact { display: none; } }
@media (max-width: 1199px) { #om-header .om-cart a { font-size: 0; padding-inline: 3px; } }
@media (max-width: 992px) {
  #om-header .om-nav { display: none; }
  #om-header .om-search { margin-inline: 0; max-width: 100%; }
}
@media (max-width: 768px) {
  .om-cats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────
   SHOPTET PRODUKTOVÉ SEKCE (Bestsellery, Slevy)
   Přesné třídy dle DevTools inspekce
────────────────────────────────────────────── */

/* Wrapper sekce — správné odsazení */
.homepage-products-heading-1,
.homepage-products-heading-2,
.product-slider-holder {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Nadpisy — styl jako na originálu */
.homepage-group-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #000 !important;
  padding: 6.72px 20px 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-bottom: 2px solid #f0f0f0 !important;
  margin-bottom: 0 !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.homepage-products-heading-1:before { content: "❤️"; }
.homepage-products-heading-2:before { content: "🏷️"; }

/* KLÍČOVÁ OPRAVA — Shoptet slider track se lámal do 2 řádků (flex-wrap:wrap),
   proto vznikala obrovská mezera a špatná výška kontejneru.
   POZOR: musí být scoped jen na slidery (product-slider-holder / products-alternative),
   NE globálně — jinak to rozbije mřížku produktů na stránce kategorie! */
.product-slider-holder .products-block,
.products-alternative .products-block {
  flex-wrap: nowrap !important;
}

/* Tlačítko "Ukázat všechny" — DESKTOP: v nadpisu vpravo (jako dřív),
   MOBIL: pod sliderem vycentrované (podle originálu oldmans.cz).
   Obě varianty existují v DOM zároveň, přepínají se přes media query. */
.om-show-all-btn {
  margin-left: auto !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  background: #fff !important;
  white-space: nowrap !important;
  transition: background .2s, border-color .2s !important;
}
.om-show-all-btn:hover {
  background: #f5f5f5 !important;
  border-color: #bbb !important;
}
.om-show-all-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;
  box-sizing: border-box;
}
.om-show-all-wrap .om-btn-more {
  display: inline-block;
}
/* Uvnitř .om-section-inner (recepty) by se padding/max-width zdvojil —
   tam už odsazení řeší rodič, tady stačí jen mezera dole */
.om-section-inner .om-show-all-wrap {
  max-width: none;
  padding: 0 0 10px;
}
/* Nad 768px (desktop/tablet) — tlačítko pod sliderem schované,
   platí jen to v nadpisu */
@media (min-width: 769px) {
  .om-show-all-wrap { display: none !important; }
}
/* Do 768px (mobil) — tlačítko v nadpisu schované, platí jen to pod
   sliderem */
@media (max-width: 768px) {
  .om-show-all-btn { display: none !important; }
}

/* Slider — přebij inline width: 428px na kartách */
.product-slider-holder { overflow: hidden !important; padding-bottom: 40px !important; }
.products-block .product { width: 270px !important; min-width: 270px !important; max-width: 270px !important; }

/* Karta — styl */
.products-block .product .p { border-radius: 10px !important; border: 1px solid #e0e0e0 !important; overflow: hidden !important; background: #fff !important; transition: border-color .3s, box-shadow .3s !important; height: 100% !important; }
.products-block .product .p:hover { border-color: #000 !important; box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; }

/* Skrýt popisky produktů */
.products-block .p-in .item-description,
.products-block .p-in [class*="description"],
.products-block .p-code { display: none !important; }

/* Cena */
.products-block [class*="price"] { font-weight: 700 !important; font-size: 15px !important; }
.products-block .price-final { color: #000 !important; }
.products-block .price-before { color: #999 !important; text-decoration: line-through !important; font-size: 12px !important; }

/* Skrýt popisky, kód a +/- quantity (hvězdičky uvnitř ratings-wrapper řeší nový blok níž) */
.products-block .p-desc,
.products-block .p-code { display: none !important; }

.products-block .quantity { display: none !important; }

/* ── Tlačítko "Do košíku" v slideru (homepage) — bílý text + ikona ── */
.products-block .add-to-cart-button,
.products-block .btn-cart,
.product-slider .add-to-cart-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #79b530 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background .25s, transform .15s, box-shadow .25s !important;
}
.products-block .add-to-cart-button:before,
.products-block .btn-cart:before,
.product-slider .add-to-cart-button:before {
  content: "🛒" !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.products-block .add-to-cart-button:hover,
.products-block .btn-cart:hover,
.product-slider .add-to-cart-button:hover {
  background: #6aa028 !important;
  box-shadow: 0 4px 12px rgba(121,181,48,.30) !important;
  transform: translateY(-1px) !important;
}
/* Pojistka — i vnitřní text/span bílý */
.products-block .add-to-cart-button *,
.products-block .btn-cart * {
  color: #fff !important;
}


/* Šipky — žluté pozadí, bílá ikona, zaoblené rohy (jako na vzoru) */
.product-slider-navigation {
  background: #f0c944 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #fff !important;
  width: 52px !important;
  height: 52px !important;
  opacity: 1 !important;
  transition: background .2s !important;
  /* Skrýt původní textový obsah "prev"/"next" (bez overflow:hidden, které deformovalo box-shadow) */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-slider-navigation:hover { background: #e6b800 !important; }
.product-slider-navigation { margin-top: -92px !important; }

/* Vlastní tučná šipka (border-chevron) — stejný vzhled jako u "Vybrané recepty" */
.product-slider-navigation:before {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 3px solid #fff !important;
  border-right: 3px solid #fff !important;
  border-radius: 2px !important;
  box-sizing: border-box !important;
}
.product-slider-navigation.navigation-next:before {
  transform: rotate(45deg);
  margin-left: -4px;
}
.product-slider-navigation.navigation-prev:before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

/* ──────────────────────────────────────────────
   ČERVENÁ USP LIŠTA
────────────────────────────────────────────── */
.om-usp-bar {
  background: #9f1400;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  padding: 30px 0 !important;
  box-sizing: border-box;
}
.om-usp-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}
.om-usp-item {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 16px;
  border-right: 1px solid rgba(255,255,255,.2);
  padding-right: 20px;
}
.om-usp-item:last-child { border-right: none; }
.om-usp-icon { font-size: 32px; flex-shrink: 0; }
.om-usp-text strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.om-usp-text span { color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.4; }
@media (max-width: 768px) {
  .om-usp-inner { grid-template-columns: repeat(2, 1fr); }
  .om-usp-item { border-right: none; }
}
@media (max-width: 480px) {
  .om-usp-inner { grid-template-columns: 1fr; gap: 18px; }
  .om-usp-item { padding-right: 0; }
  .om-usp-icon { font-size: 26px; }
  .om-usp-text strong { font-size: 14px; }
  .om-usp-text span { font-size: 12px; }
}

/* ──────────────────────────────────────────────
   CUSTOM FOOTER
────────────────────────────────────────────── */
.om-custom-footer {
  background: #f5f5f5 !important;
  padding: 56px 0 36px;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  box-sizing: border-box;
}
.om-custom-footer * { color: #555 !important; }
.om-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  box-sizing: border-box;
}
.om-custom-footer .om-footer-col h4 {
  font-size: 17px;
  font-weight: 800;
  color: #111 !important;
  margin-bottom: 22px;
  letter-spacing: 0;
}
.om-custom-footer .om-footer-col p { color: #444 !important; font-size: 15px; line-height: 1.75; margin-bottom: 6px; }
.om-custom-footer .om-footer-col p strong { color: #111 !important; }
.om-custom-footer .om-footer-col a { color: #444 !important; text-decoration: none; transition: color .3s; }
.om-custom-footer .om-footer-col a:hover { color: #9f1400 !important; }
.om-footer-col ul { list-style: none; padding: 0; margin: 0; }
.om-footer-col ul li { margin-bottom: 13px; font-size: 15px; color: #444 !important; }
.om-footer-col ul li a { color: #444 !important; }
/* Pokračování sloupce Kategorie (bez vlastní h4) — neviditelný nadpis stejné výšky
   zajistí přesné zarovnání s "Marinády" na jakékoliv šířce obrazovky */
.om-footer-cat-spacer { visibility: hidden; }
.om-custom-footer .om-footer-ig-label { margin-top: 20px !important; margin-bottom: 10px !important; }
.om-custom-footer .om-footer-ig {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #f7c91b !important;
  color: #000 !important;
  border-radius: 50px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  transition: background .3s;
  white-space: nowrap;
}
.om-custom-footer .om-footer-ig:hover { background: #e6b800 !important; color: #000 !important; }
@media (max-width: 1200px) {
  .om-footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .om-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 0 24px; }

  /* ── Sloupec "Kontaktní údaje" — na mobilu vycentrovaný, podle
     originálu. Zbytek patičky (Menu/Kategorie/Informace) beze změny. ── */
  .om-footer-inner > .om-footer-col:first-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  .om-footer-inner > .om-footer-col:first-child .om-footer-ig-label {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin-top: 24px !important;
  }
  .om-footer-inner > .om-footer-col:first-child .om-footer-ig {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 14px auto 0 !important;
    padding: 17px 24px !important;
    font-size: 15px !important;
    letter-spacing: .5px !important;
  }
}



/* ──────────────────────────────────────────────
   SPODNÍ COPYRIGHT LIŠTA — text vlevo, loga plateb vpravo
   (loga jako jeden obrázek "comgate-footer-logos.png" nahraný na GitHubu,
   zobrazený v KAŽDÉ patičce webu — viz customizeFooterCopyright() v JS)
────────────────────────────────────────────── */
.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 20px 40px !important;
  box-sizing: border-box !important;
  /* Transparentní — splyne přímo s pozadím #footer (#f0f0f0), ať
     nevzniknou dva různé odstíny šedé vedle sebe (22. 7. 2026, na
     žádost klienta — dřív mělo vlastní #f5f5f5, mírně odlišné od
     zbytku patičky). */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Uvnitř .footer-bottom je nativní Shoptetí .container div (obaluje
   text copyrightu) — koliduje s naším OBECNÝM pravidlem `.container`
   (max-width:1400px + padding) definovaným výše v souboru pro běžný
   obsah stránky. Tenhle vnitřní container tak zabíral skoro celou
   šířku řádku sám o sobě, a logům plateb nezbylo místo vedle textu —
   zalomily se na nový řádek. Reset na "jen tak široký, jak potřebuje
   obsah", ať sdílí řádek s obrázkem log. */
.footer-bottom .container {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
}
.om-footer-payments {
  height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px 24px !important;
  }
}



/* ══════════════════════════════════════════════
   STRÁNKA KATEGORIE — designový redesign karet
   v3.4 — selektory dle skutečného DOM
   ══════════════════════════════════════════════ */

/* ── Nadpis kategorie — červený, verzálky ── */
h1.category-title {
  color: #9f1400 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ── Podkategorie s obrázkem (u kategorií, které mají vlastní
   podkategorie, např. /kategorie/obchod/) — 4. 8. 2026, na žádost
   klienta. Struktura ověřená přes DevTools (screenshot klienta):
     ul.subcategories.with-image
       li.col-xs-6.col-sm-6.col-lg-3.col-xl-3
         a[href]  ← obsah uvnitř (ikona/text/šipka) neznámý, screenshot
                     ho měl sbalený, takže NESAHÁME na vnitřní
                     rozložení (display/align-items) — jen orámujeme
                     bordrem/paddingem, podobně jako homepage sekce
                     "Kategorie" (.om-cat-item). Platí obecně pro
                     VŠECHNY kategorie s tímhle markupem, ne jen
                     Obchod.
   OPRAVA (4. 8. 2026, druhé kolo, na žádost klienta):
   — zvýraznění při najetí myší přebarveno ze zelené... počkat, z
     ČERVENÉ na ZELENOU (#79b530, stejný odstín jako zbytek zelené na
     webu — tlačítko Do košíku, dropdown Obchod apod.) + jemné světle
     zelené pozadí, stejný vzorec jako .om-obchod-dropdown-item:hover.
   — mezera mezi kartami (`gap` na flex kontejneru `ul`, funguje jak
     mezi sloupci, tak mezi řádky zároveň) — nahrazuje dřívější
     margin-bottom na `li`, čistší řešení pro flex layout.
   — zelená šipka: nevíme přesnou třídu/element (obsah `a` jsme
     neviděli rozbalený), zkoušíme obecné selektory (svg, [class*=
     "arrow"/"icon"]) — pokud by nesedělo přesně, pošli outerHTML
     toho <a> a doladíme na míru. */
ul.subcategories.with-image > li {
  box-sizing: border-box !important;
}
ul.subcategories.with-image > li > a {
  background: #fff !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  /* OPRAVA (4. 8. 2026, třetí kolo, na žádost klienta) — `gap` na
     flex kontejneru `ul` se sčítal s procentuální šířkou sloupců
     (Bootstrap col-xl-3 = 25 % atd.), takže se řádek přestal vejít a
     4. karta spadla na nový řádek — vznikla velká prázdná mezera
     vpravo. Řešení: mezeru neděláme na kontejneru, ale zmenšením
     samotné karty uvnitř své buňky přes `margin` — šířka `li` (a tedy
     počet sloupců v řádku) zůstává nedotčená, jen karta uvnitř má
     menší "obsah" a vznikne tak rovnoměrná mezera na všech stranách. */
  margin: 6px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: border-color .25s, background .25s, box-shadow .25s !important;
}
ul.subcategories.with-image > li > a:hover {
  border-color: #79b530 !important;
  background: #f9fdf5 !important;
  box-shadow: 0 4px 12px rgba(121, 181, 48, .15) !important;
}
ul.subcategories.with-image > li > a svg,
ul.subcategories.with-image > li > a [class*="arrow"],
ul.subcategories.with-image > li > a [class*="icon-arrow"] {
  color: #79b530 !important;
  fill: #79b530 !important;
  stroke: #79b530 !important;
}

/* ── Grid: 5 produktů v řadě, konzistentní mezery ── */
body.type-category .products.products-page {
  gap: 0 !important;
}
body.type-category .products.products-page .product {
  width: 20% !important;
  max-width: 20% !important;
  flex: 0 0 20% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
@media (max-width: 1199px) {
  body.type-category .products.products-page .product {
    width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important;
  }
}
@media (max-width: 768px) {
  body.type-category .products.products-page .product {
    width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
  }
}
@media (max-width: 480px) {
  body.type-category .products.products-page .product {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}

/* ── Karta — bílá, zaoblená, hover lift ── */
body.type-category .products.products-page .product .p {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 16px !important;
  border: 1px solid #ececec !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
body.type-category .products.products-page .product .p:hover {
  border-color: #ddd !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
  transform: translateY(-4px) !important;
}

/* ── Obrázek — čtverec, jednotné šedé pozadí, foto contain ── */
body.type-category .products.products-page .product .image,
body.type-category .products.products-page .product a.image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f6f6f6 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.type-category .products.products-page .product .p-image {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.type-category .products.products-page .product .image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  display: block !important;
}

/* ── Vnitřní obsah karty — sloupec, jednotný padding ── */
body.type-category .products.products-page .product .p-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
body.type-category .products.products-page .product .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px !important;
  gap: 0 !important;
}

/* ── Název — tučný, vlevo, místo na 2 řádky ── */
body.type-category .products.products-page .product .name {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 44px !important;
  text-align: left !important;
}
body.type-category .products.products-page .product .name,
body.type-category .products.products-page .product .name span,
body.type-category .products.products-page .product .name a {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Dostupnost — vlevo, barevná, prostor pod ── */
body.type-category .products.products-page .product .ratings-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-align: left !important;
}
body.type-category .products.products-page .product .stars-placeholder,
body.type-category .products.products-page .product .ratings-wrapper .stars,
body.type-category .products.products-page .product .ratings-wrapper [class*="star"],
body.type-category .products.products-page .product .ratings-wrapper .number-ratings,
body.type-category .products.products-page .product .ratings-wrapper .show-add-review {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.type-category .products.products-page .product .availability {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* ── Spodní lišta: cena vlevo + tlačítko vpravo na jednom řádku ──
   Struktura: .p-bottom > div(bez třídy) > .prices + .p-tools + .p-desc
────────────────────────────────────────────── */
body.type-category .products.products-page .product .p-bottom {
  margin-top: auto !important;
  padding: 0 !important;
}
body.type-category .products.products-page .product .p-bottom > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 4px 0 0 !important;
  margin: 0 !important;
}
body.type-category .products.products-page .product .p-bottom .prices {
  margin: 0 !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}
body.type-category .products.products-page .product .price-final {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
body.type-category .products.products-page .product .price-before {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #aaa !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
body.type-category .products.products-page .product .price-final.price--sale,
body.type-category .products.products-page .product ins .price {
  color: #9f1400 !important;
}

/* ── Tlačítko — vpravo, kompaktní, s ikonou košíku ── */
body.type-category .products.products-page .product .p-tools {
  margin: 0 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
}
body.type-category .products.products-page .product .pr-action {
  margin: 0 !important;
  width: auto !important;
  display: inline-block !important;
}
body.type-category .products.products-page .product .add-to-cart-button,
body.type-category .products.products-page .product .to-cart-button,
body.type-category .products.products-page .product [class*="buy"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #79b530 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background .25s, transform .15s, box-shadow .25s !important;
}
body.type-category .products.products-page .product .add-to-cart-button:before,
body.type-category .products.products-page .product .to-cart-button:before {
  content: "🛒" !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
body.type-category .products.products-page .product .add-to-cart-button:hover,
body.type-category .products.products-page .product .to-cart-button:hover {
  background: #6aa028 !important;
  box-shadow: 0 4px 12px rgba(121,181,48,.30) !important;
  transform: translateY(-1px) !important;
}

/* ── Skrýt popisky, kód, quantity ── */
body.type-category .products.products-page .product .p-desc,
body.type-category .products.products-page .product .p-code,
body.type-category .products.products-page .product .quantity {
  display: none !important;
}

/* ══════════════════════════════════════════════
   "Podobné produkty" slider na detailu produktu
   Stejná struktura tříd jako karty na kategorii (.p, .p-in, .p-in-in...),
   jen jiný obalový kontejner (.products-alternative místo .products-page)
   NEsaháme na šířku/grid karet — tu řídí Shoptetí JS slider (data-columns)
   ══════════════════════════════════════════════ */
.products-alternative .product .p {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 16px !important;
  border: 1px solid #ececec !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
.products-alternative .product .p:hover {
  border-color: #ddd !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
  transform: translateY(-4px) !important;
}
.products-alternative .product .image,
.products-alternative .product a.image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f6f6f6 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.products-alternative .product .p-image {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.products-alternative .product .image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  display: block !important;
}
.products-alternative .product .p-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.products-alternative .product .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px !important;
  gap: 0 !important;
}
.products-alternative .product .name {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 44px !important;
  text-align: left !important;
}
.products-alternative .product .name,
.products-alternative .product .name span,
.products-alternative .product .name a {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.products-alternative .product .ratings-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-align: left !important;
}
.products-alternative .product .stars-placeholder,
.products-alternative .product .ratings-wrapper .stars,
.products-alternative .product .ratings-wrapper [class*="star"],
.products-alternative .product .ratings-wrapper .number-ratings,
.products-alternative .product .ratings-wrapper .show-add-review {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.products-alternative .product .availability {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin: 0 !important;
}
.products-alternative .product .p-bottom {
  margin-top: auto !important;
  padding: 0 !important;
}
.products-alternative .product .p-bottom > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 4px 0 0 !important;
  margin: 0 !important;
}
.products-alternative .product .p-bottom .prices {
  margin: 0 !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}
.products-alternative .product .price-final {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
.products-alternative .product .price-before {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #aaa !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.products-alternative .product .price-final.price--sale,
.products-alternative .product ins .price {
  color: #9f1400 !important;
}
/* Tlačítko Do košíku — nativně schované třídou .no-buttons, odkrýt */
.products-alternative .product .p-bottom.no-buttons .p-tools,
.products-alternative .product .p-tools {
  display: inline-flex !important;
  margin: 0 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
}
.products-alternative .product .pr-action {
  margin: 0 !important;
  width: auto !important;
  display: inline-block !important;
}
.products-alternative .product .add-to-cart-button,
.products-alternative .product .to-cart-button,
.products-alternative .product [class*="buy"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #79b530 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background .25s, transform .15s, box-shadow .25s !important;
}
.products-alternative .product .add-to-cart-button:before,
.products-alternative .product .to-cart-button:before {
  content: "🛒" !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.products-alternative .product .add-to-cart-button:hover,
.products-alternative .product .to-cart-button:hover {
  background: #6aa028 !important;
  box-shadow: 0 4px 12px rgba(121,181,48,.30) !important;
  transform: translateY(-1px) !important;
}
.products-alternative .product .p-desc,
.products-alternative .product .p-code,
.products-alternative .product .quantity {
  display: none !important;
}

/* Nadpis "Produkty, které by vás mohli zajímat" — doleva, blíž ke kartám */
h2.products-alternative-header {
  text-align: left !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}


/* Stejný vylepšený styl karet i pro homepage Bestsellery / Omáčky ve slevě slider */
.product-slider-holder .product .p {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 16px !important;
  border: 1px solid #ececec !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
.product-slider-holder .product .p:hover {
  border-color: #ddd !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
  transform: translateY(-4px) !important;
}
.product-slider-holder .product .image,
.product-slider-holder .product a.image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f6f6f6 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.product-slider-holder .product .p-image {
  position: absolute !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.product-slider-holder .product .image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  display: block !important;
}
.product-slider-holder .product .p-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.product-slider-holder .product .p-in-in {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px !important;
  gap: 0 !important;
}
.product-slider-holder .product .name {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  min-height: 44px !important;
  text-align: left !important;
}
.product-slider-holder .product .name,
.product-slider-holder .product .name span,
.product-slider-holder .product .name a {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  justify-content: flex-start !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
.product-slider-holder .product .ratings-wrapper {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-align: left !important;
}
.product-slider-holder .product .stars-placeholder,
.product-slider-holder .product .ratings-wrapper .stars,
.product-slider-holder .product .ratings-wrapper [class*="star"],
.product-slider-holder .product .ratings-wrapper .number-ratings,
.product-slider-holder .product .ratings-wrapper .show-add-review {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-slider-holder .product .availability {
  display: block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin: 0 !important;
}
.product-slider-holder .product .p-bottom {
  margin-top: auto !important;
  padding: 0 !important;
}
.product-slider-holder .product .p-bottom > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 4px 0 0 !important;
  margin: 0 !important;
}
.product-slider-holder .product .p-bottom .prices {
  margin: 0 !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}
.product-slider-holder .product .price-final {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}
.product-slider-holder .product .price-before {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #aaa !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.product-slider-holder .product .price-final.price--sale,
.product-slider-holder .product ins .price {
  color: #9f1400 !important;
}
/* Tlačítko Do košíku — nativně schované třídou .no-buttons, odkrýt */
.product-slider-holder .product .p-bottom.no-buttons .p-tools,
.product-slider-holder .product .p-tools {
  display: inline-flex !important;
  margin: 0 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: auto !important;
}
.product-slider-holder .product .pr-action {
  margin: 0 !important;
  width: auto !important;
  display: inline-block !important;
}
.product-slider-holder .product .add-to-cart-button,
.product-slider-holder .product .to-cart-button,
.product-slider-holder .product [class*="buy"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #79b530 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background .25s, transform .15s, box-shadow .25s !important;
}
.product-slider-holder .product .add-to-cart-button:before,
.product-slider-holder .product .to-cart-button:before {
  content: "🛒" !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.product-slider-holder .product .add-to-cart-button:hover,
.product-slider-holder .product .to-cart-button:hover {
  background: #6aa028 !important;
  box-shadow: 0 4px 12px rgba(121,181,48,.30) !important;
  transform: translateY(-1px) !important;
}
.product-slider-holder .product .p-desc,
.product-slider-holder .product .p-code,
.product-slider-holder .product .quantity {
  display: none !important;
}

/* Nadpis "Produkty, které by vás mohli zajímat" — doleva, blíž ke kartám */
h2.product-slider-holder-header {
  text-align: left !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

/* ── Skrýt "Nejprodávanější" blok — ne sorting tabs ── */
.products-inline.products-top { display: none !important; }
.toggle-top-products { display: none !important; }
h2.products-top-header { display: none !important; }

/* ══════════════════════════════════════════════
   ŘAZENÍ — dropdown přebudovaný na taby (jako originál)
   ══════════════════════════════════════════════ */
body.type-category .listSorting.listSorting--dropdown {
  display: block !important;
  position: static !important;
  width: 100% !important;
}
/* Schovat toggle "Řadit podle: ..." */
body.type-category .listSorting .sortingToggle {
  display: none !important;
}
/* Rozbalit menu s odkazy do vodorovného řádku tabů */
body.type-category .listSorting #listSortingControls,
body.type-category .listSorting .listSorting__controls {
  display: flex !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: #f5f5f5 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}
/* Jednotlivé taby */
body.type-category .listSorting .listSorting__control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  width: auto !important;
  text-align: center !important;
  transition: background .2s, color .2s !important;
}
body.type-category .listSorting .listSorting__control:hover {
  background: rgba(0,0,0,.05) !important;
}
/* Aktivní tab — žlutý jako originál */
body.type-category .listSorting .listSorting__control--current {
  background: #f7c91b !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

/* Na mobilu — 2sloupcová mřížka místo flex-wrap, ať taby vyplní celou
   šířku rovnoměrně a nezůstává prázdné místo vpravo (delší popisky
   jako "Nejprodávanější" dřív vynucovaly zalomení jen po dvou kusech
   do řádku, ale zbytek řádku zůstával prázdný) */
@media (max-width: 768px) {
  body.type-category .listSorting #listSortingControls,
  body.type-category .listSorting .listSorting__controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body.type-category .listSorting .listSorting__control {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════
   STRÁNKA RECEPTY — galerie karet (jako originál)
   ══════════════════════════════════════════════ */

/* Zrušit úzký režim a sidebar na stránce s recepty */
body.type-posts-listing .content.narrow,
body.in-recepty .content.narrow {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* Schovat sidebar na stránce recepty */
body.type-posts-listing .sidebar,
body.type-posts-listing .sidebar-left,
body.in-recepty .sidebar,
body.in-recepty .sidebar-left {
  display: none !important;
}

/* Nadpis stránky */
body.type-posts-listing h1,
body.in-recepty h1 {
  color: #9f1400 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* Grid 4 sloupce */
.news-wrapper.om-recipes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}
@media (max-width: 1100px) {
  .news-wrapper.om-recipes-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .news-wrapper.om-recipes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .news-wrapper.om-recipes-grid { grid-template-columns: 1fr !important; }
}

/* Jednotlivá položka — zruší původní styl Shoptetu */
.news-wrapper.om-recipes-grid .news-item.om-recipe-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  float: none !important;
}

/* Karta receptu */
.om-recipe-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border-radius: 16px !important;
  border: 1px solid #ececec !important;
  background: #fff !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .25s, box-shadow .25s, transform .25s !important;
}
.om-recipe-card:hover {
  border-color: #ddd !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
  transform: translateY(-4px) !important;
}

/* Foto — čtvercové, cover */
.om-recipe-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #f6f6f6 !important;
}

/* Nadpis */
.om-recipe-title {
  padding: 16px 18px 20px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #1a1a1a !important;
  text-align: left !important;
}
.om-recipe-card:hover .om-recipe-title {
  color: #9f1400 !important;
}

/* ══════════════════════════════════════════════
   STRÁNKA KONTAKT + STATICKÉ STRÁNKY
   ══════════════════════════════════════════════ */

/* Plná šířka — skrýt sidebar na statických stránkách */
/* Plná šířka — skrýt sidebar na všech statických stránkách */
body.type-article .sidebar,
body.type-article .sidebar-left,
body.in-o-nas .sidebar,
body.in-o-nas .sidebar-left,
body.in-obchodni-podminky .sidebar,
body.in-obchodni-podminky .sidebar-left,
body.in-podminky-ochrany-osobnich-udaju .sidebar,
body.in-podminky-ochrany-osobnich-udaju .sidebar-left {
  display: none !important;
}
body.type-article .content.narrow,
body.in-o-nas .content.narrow,
body.in-obchodni-podminky .content.narrow,
body.in-podminky-ochrany-osobnich-udaju .content.narrow {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Skrýt diskuzi / komentáře na všech stránkách */
.article-discussion,
.discussion-wrapper,
.comments-wrapper,
.article-comments,
#article-discussion,
.disqus-wrapper,
#disqus_thread {
  display: none !important;
}

/* ══════════════════════════════════════════════
   DETAIL PRODUKTU — trust badges
   ══════════════════════════════════════════════ */
#om-trust-badges,
#om-trust-badges-mobile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 22px;
  width: 100%;
}
#om-trust-badges .om-badge,
#om-trust-badges-mobile .om-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
#om-trust-badges .om-badge img,
#om-trust-badges-mobile .om-badge img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
#om-trust-badges .om-badge div,
#om-trust-badges-mobile .om-badge div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#om-trust-badges .om-badge strong,
#om-trust-badges-mobile .om-badge strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
#om-trust-badges .om-badge span,
#om-trust-badges-mobile .om-badge span {
  font-size: 11px;
  color: #777;
  white-space: normal;
  line-height: 1.3;
}
/* Na desktopu (širší 460px sloupec) — o něco větší ikony a písmo, ať to
   nevypadá stísněně; pořád 3 sloupce vedle sebe místo předchozího
   nevyváženého řádku 2+1. */
@media (min-width: 992px) {
  #om-trust-badges .om-badge strong { font-size: 14px; }
  #om-trust-badges .om-badge span { font-size: 12.5px; }
  #om-trust-badges .om-badge img { width: 36px; height: 36px; }
}

/* Mobilní kopie trust badges (28. 7. 2026, podle klientova zadání) —
   samostatný blok NA JINÉM MÍSTĚ na stránce (mezi odkazem "Pro firmy"
   a boxem s hodnocením/zákazníky, viz JS enhanceProductDetail krok 3),
   protože klient na mobilu nahoře pod nadpisem badge nevidí (JS je
   vkládá jen jednou do DOM, nezávisle na velikosti obrazovky — tenhle
   druhý blok je proto samostatná kopie na jiném místě v DOM, ne jen
   CSS přesun stejného elementu). Nahoře pod nadpisem (#om-trust-badges)
   zůstává JEN pro desktop, ať nedojde ke zdvojení. */
#om-trust-badges-mobile {
  display: none;
  margin: 4px 0 4px;
}
@media (max-width: 768px) {
  #om-trust-badges {
    display: none !important;
  }
  #om-trust-badges-mobile {
    display: grid !important;
  }
}

/* Kompaktní layout (bez velkého šedého boxu) — dostupnost, cena, počítadlo a tlačítko */
.p-to-cart-block.om-price-box {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 10px 0 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 460px !important;
}
.om-price-box .price-final,
.om-price-box strong.price-final {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
}
/* Řádek ceny — cena, přeškrtnutá původní cena a "Ušetříte" pohromadě */
.om-price-row {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
}
/* Původní (přeškrtnutá) cena při množstevní slevě — viz JS enhanceQuantityPriceSync */
.om-price-orig {
  display: none;
  font-size: 14px !important;
  color: #999 !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
}
.om-buy-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  /* OPRAVA (29. 7. 2026) — s "wrap" se tlačítko (po přidání ikony
     košíku) na úzkých mobilech nevešlo vedle počítadla kusů, zalomilo
     se na vlastní řádek a roztáhlo přes celou šířku (flex:1 1 auto
     u osamocené položky na řádku). "nowrap" nutí zůstat na jednom
     řádku vždy — tlačítko se místo zalomení jen zúží (viz min-width:0
     níže, aby se opravdu mohlo zmenšit pod svou přirozenou šířku). */
  flex-wrap: nowrap;
  width: 100% !important;
}
/* Tlačítko Do košíku vyplní zbytek šířky vedle počítadla kusů, ať
   nezůstává bílá mezera do konce 460px sloupce (počítadlo má pevnou
   velikost, tlačítko se roztáhne přes zbytek prostoru).
   POZOR: .om-buy-row samo o sobě potřebovalo width:100% výše — rodič
   .om-price-box má align-items:flex-start, takže bez explicitní šířky
   se řádek nenatáhne na celý sloupec a flex-grow tlačítka nemá co
   vyplňovat (18. 7. 2026 — tlačítko bylo pořád úzké). */
.om-buy-row .add-to-cart-button,
.om-buy-row .om-cart-btn-white {
  flex: 1 1 auto !important;
  /* Bez tohohle flexbox nedovolí zmenšit tlačítko pod jeho přirozenou
     (obsahem danou) šířku — s ikonou + textem "Přidat do košíku" by
     na úzkém mobilu i tak přetékalo přes okraj řádku (29. 7. 2026). */
  min-width: 0 !important;
}
.om-buy-row .add-to-cart {
  /* Počítadlo kusů nesmí flexboxem zmenšit — musí si držet svou
     přirozenou šířku, ať zbyde tlačítku maximum prostoru (29. 7. 2026). */
  flex-shrink: 0 !important;
}
/* "Dárek ZDARMA ke každé objednávce" (29. 7. 2026, na žádost klienta)
   — teď VŽDY (desktop i mobil, rozšířeno z původní desktop-only
   verze). DOM pozice (uvnitř .p-to-cart-block, jako první prvek —
   viz JS krok 3a) ho automaticky řadí mezi ukazatel dopravy zdarma
   a "SKLADEM", stejně na obou velikostech obrazovky — klient potvrdil
   na desktop screenshotu, že přesně tahle pozice sedí i pro mobil,
   žádná zvláštní mobilní varianta pozice není potřeba. */
#om-free-gift {
  display: block;
  margin: 0 0 14px;
}
.om-free-gift-label {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  /* Na úzkém mobilu se text se stejnou velikostí jako na desktopu
     zalomil na dva řádky (29. 7. 2026, klient chtěl jeden řádek).
     OPRAVA — klient chtěl popisek vizuálně stejně dlouhý jako pruh
     SKLADEM pod ním, ale BEZ roztahování mezer mezi slovy (radši
     větší písmo). Zvýšený `vw` koeficient v clamp() ať se přiblíží
     šířce SKLADEM pruhu. Pojistka pro extrémně úzké telefony, kde by
     se i tak nevešlo: `overflow:hidden` + `text-overflow:ellipsis`
     ořízne text (nikdy nezalomí na 2. řádek, jak klient výslovně
     nechce). */
  .om-free-gift-label {
    font-size: clamp(12px, 5.2vw, 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Vycentrováno, ať je odsazení od levého i pravého okraje stejné
       (29. 7. 2026, na žádost klienta). */
    text-align: center;
  }
}
.om-free-gift-box {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  border: 2px dashed #f0c944;
  border-radius: 14px;
  background: #fffbea;
  padding: 16px 20px;
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
  /* Není to odkaz (klient chce jen informační box, ne prokliknutí),
     ale hover efekt zůstává i na obyčejném divu — cursor:default,
     ne pointer, ať nevypadá klikatelně (29. 7. 2026). */
  cursor: default;
}
.om-free-gift-box:hover {
  background: #fdf3c9;
  border-color: #e6b800;
}
.om-free-gift-box img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  flex-shrink: 0;
}
.om-free-gift-box span {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}
.om-price-box .om-availability-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: #eef8e4;
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
}
.om-price-box .om-availability-line:before {
  content: "✓";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4a9b3f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.om-price-box .om-availability-line,
.om-price-box .om-availability-line span,
.om-price-box .om-availability-line * {
  color: #4a9b3f !important;
}
.om-price-box .om-availability-line.om-sold-out {
  background: #fdecea;
}
.om-price-box .om-availability-line.om-sold-out:before {
  content: "✕";
  background: #c0392b;
}
.om-price-box .om-availability-line.om-sold-out,
.om-price-box .om-availability-line.om-sold-out span,
.om-price-box .om-availability-line.om-sold-out * {
  color: #c0392b !important;
}

/* ──────────────────────────────────────────────
   MNOŽSTEVNÍ SLEVA — nativní Shoptet widget
   (JS enhanceQuantityDiscounts rozdělí každý řádek na
   .qd-badge + .qd-body > .qd-qty + .quantity-discounts__price-wrapper)
────────────────────────────────────────────── */
.quantity-discounts {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  box-sizing: border-box !important;
  max-width: 460px !important;
}
.quantity-discounts__headline {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin-bottom: 6px !important;
}
.quantity-discounts__table {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  /* Samostatné kartičky s mezerou mezi nimi místo jedné spojené
     tabulky (na žádost klienta, podle vzoru s odděleným "buttony").
     Container už nenese vlastní rámeček/zaoblení — to teď má každá
     kartička (.quantity-discounts__item) zvlášť. */
  gap: 10px !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.quantity-discounts__item {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: #fff !important;
  /* Vlastní rámeček + zaoblení na KAŽDÉ kartičce (dřív jen border-right
     dělítko mezi buňkami uvnitř jedné spojené tabulky). overflow:hidden
     ořízne horní barevný štítek (qd-badge) do stejného zaoblení jako
     zbytek kartičky. */
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: background .2s, border-color .2s !important;
  /* Skutečný čtverec (šířka = výška), ne odhadovaný padding — funguje
     bez ohledu na šířku kontejneru/obrazovky. */
  aspect-ratio: 1 / 1 !important;
  /* KRITICKÉ: bez tohohle grid sloupce s "1fr" nejsou opravdu stejně
     velké, pokud obsahují text s white-space:nowrap — prohlížeč defaultně
     nedovolí grid buňce zmenšit se pod šířku jejího obsahu (min-width:auto),
     takže nejdelší text (např. "181,09 Kč / ks") roztáhne JEN svůj sloupec
     a rozhodí zarovnání i zvýraznění. min-width:0 tohle vynutí zrušit. */
  min-width: 0 !important;
}
.qd-badge {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14.3px !important;
  letter-spacing: .1px !important;
  text-transform: uppercase !important;
  padding: 10px 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.qd-badge--none { background: #a3a3a3 !important; }
.qd-badge--discount { background: #e6b800 !important; }
.qd-body {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 4px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.qd-qty {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #e6b800 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.qd-body .quantity-discounts__price-wrapper {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.qd-body .quantity-discounts__price {
  font-weight: 800 !important;
}
/* Mobil — 2×2 mřížka místo 4 kartiček v řadě (na úzké obrazovce by se
   text ceny jinak usekával). Podle klientova vzoru kartičky NEJSOU
   čtvercové jako na desktopu — jsou širší/obdélníkové, s velkorysejším
   odsazením a větším písmem, ať vyniknou na velké dotykové ploše. */
@media (max-width: 640px) {
  .quantity-discounts__table {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    /* Explicitní stretch — bez aspect-ratio (zrušeno výše, viz
       .quantity-discounts__item) se kartičky ve stejné řadě mřížky
       normálně mají srovnat na výšku nejvyšší z nich samy, ale
       spoléhat na výchozí chování se neosvědčilo (20. 7. 2026 —
       "6 a více ks" a "3 - 5 ks" vyšly různě vysoké). Vynucujeme to
       explicitně. */
    align-items: stretch !important;
  }
  .quantity-discounts__item {
    aspect-ratio: auto !important;
    height: 100% !important;
  }
  .qd-badge {
    font-size: 14px !important;
    padding: 12px 6px !important;
  }
  .qd-body {
    padding: 20px 8px !important;
    gap: 10px !important;
  }
  .qd-qty {
    font-size: 18px !important;
  }
  .qd-body .quantity-discounts__price-wrapper {
    font-size: 17px !important;
  }
}
/* Aktuálně platná hladina slevy — jemné žluté pozadí + barevný akcentní
   rámeček (teď když má KAŽDÁ kartička vlastní rámeček — viz přestavba
   na samostatné kartičky výše — "žádný rámeček" by vypadalo divně,
   proto zvýrazněná kartička dostává rámeček v akcentní barvě místo
   výchozí šedé).
   POZOR: Shoptet má na .quantity-discounts__item--highlighted VLASTNÍ
   nativní zelený vzhled (outline a/nebo box-shadow) — proto vynucujeme
   "žádný outline/stín" ze všech úhlů, jen border necháváme naše. */
.quantity-discounts__item.quantity-discounts__item--highlighted {
  border: 2px solid #e6b800 !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 1;
  position: relative;
}
.quantity-discounts__item.quantity-discounts__item--highlighted::before,
.quantity-discounts__item.quantity-discounts__item--highlighted::after {
  display: none !important;
  content: none !important;
}
.quantity-discounts__item--highlighted .qd-body {
  background: #fdf6d9 !important;
}
/* "Ušetříte X Kč" — přesunuto JS vedle ceny (viz .om-price-row), zelený štítek */
.quantity-discounts__save {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  background: #eef8e4 !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a8f22 !important;
  white-space: nowrap !important;
}
.quantity-discounts__saved-amount {
  color: #4a8f22 !important;
  font-weight: 800 !important;
  margin-left: 4px !important;
}

/* ══════════════════════════════════════════════
   MNOŽSTEVNÍ SLEVA — VLASTNÍ GRAFIKA (karty s pilulkami)
   (28. 7. 2026, mobil; 28. 7. 2026, rozšířeno na desktop)
   Nativní Shoptet widget (.quantity-discounts__table, žluté pruhy
   z kroku 7 JS) je teď VŽDY schovaný — nahrazuje ho VŠUDE tahle
   vlastní sada karet (.qd-mobile-grid, vytváří JS krok 7b).
   DESKTOP: 4 kompaktní kartičky v jednom řádku (jako původní
   nativní rozložení), stejná grafika (velké číslo, pilulky
   Vybráno/Nejprodávanější/Největší úspora nahoře, zelený štítek
   "ušetříte"), jen zmenšená, ať se vejde do užšího sloupce.
   MOBIL (do 768px): stejné jako doteď — velké karty 2×2. ══════ */

/* Nativní widget schovaný VŽDY (nahrazen na obou velikostech) */
.quantity-discounts__table {
  display: none !important;
}

/* Nadpis — na žádost klienta (28. 7. 2026) dlouhá varianta "Množstevní
   sleva — víc kusů, nižší cena za kus" VŽDY, i na desktopu (dřív jen
   na mobilu; krátká "Množství" byla jen pro desktop). */
.qd-headline-desktop { display: none; }
.qd-headline-mobile { display: inline; }
.qd-mobile-subtitle {
  font-weight: 400;
  color: #888;
  font-size: 0.75em;
}

/* ── DESKTOP (výchozí) — kompaktní řádek po 4 ── */
.qd-mobile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  /* Extra prostor nahoře na první řádek — pilulky přesahují přes
     horní okraj karty, potřebují místo, ať nic neuřežou. */
  margin-top: 22px;
  max-width: 460px;
}
.qd-mobile-item {
  position: relative;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px 6px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s;
}
.qd-mobile-item--selected {
  border-color: #9f1400;
}
.qd-mobile-pill-slot {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 130px;
  z-index: 2;
}
.qd-mobile-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.qd-mobile-pill--selected {
  background: #9f1400;
  color: #fff;
}
.qd-mobile-pill--popular {
  background: #e0a83c;
  color: #fff;
}
.qd-mobile-pill--savings {
  background: #fff;
  border: 1.5px solid #4a9b3f;
  color: #4a9b3f;
}
.qd-mobile-item:has(.qd-mobile-pill--popular) {
  border-color: #e0a83c;
}
.qd-mobile-qty {
  font-size: 23px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
  margin: 8px 0 6px;
}
.qd-mobile-price {
  font-size: 14px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.3;
  /* Bez white-space:nowrap — text "199 Kč / ks 199" se u větších
     fontů sám přirozeně zalomí na druhý řádek místo přetečení mimo
     kartu (karta je jen ~100px široká, viz .qd-mobile-grid 4 sloupce). */
}
.qd-mobile-unit {
  font-size: 10.5px;
  font-weight: 500;
  color: #888;
}
.qd-mobile-orig {
  font-size: 10.5px;
  font-weight: 500;
  color: #aaa;
  text-decoration: line-through;
  margin-left: 1px;
}
.qd-mobile-save {
  display: inline-block;
  padding: 3px 7px;
  background: #eef8e4;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  color: #4a8f22;
  /* Bez white-space:nowrap ze stejného důvodu jako .qd-mobile-price
     výše — u větších fontů se text zalomí, místo aby přetekl přes
     okraj kartičky. */
  white-space: normal;
  line-height: 1.25;
}
.qd-mobile-save--big {
  background: #4a9b3f;
  color: #fff;
}

/* Ukazatel dopravy zdarma — na desktopu i mobilu */
.qd-mobile-shipping {
  display: block;
  max-width: 460px;
  margin: 18px 0 0;
}
.qd-mobile-shipping-bar {
  width: 100%;
  height: 8px;
  background: #ebebeb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.qd-mobile-shipping-fill {
  height: 100%;
  width: 0%;
  background: #4a9b3f;
  border-radius: 10px;
  transition: width .3s ease;
}
.qd-mobile-shipping-text {
  font-size: 14px;
  font-weight: 600;
  color: #4a9b3f;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── MOBIL (do 768px) — beze změny oproti dřívější verzi: velké
   karty 2×2 místo kompaktního řádku po 4 (na úzké obrazovce by se
   4 sloupce nevešly čitelně) ── */
@media (max-width: 768px) {
  .qd-mobile-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
  }
  .qd-mobile-item {
    border-radius: 14px;
    padding: 18px 14px 16px;
  }
  .qd-mobile-pill-slot {
    top: -14px;
    max-width: none;
  }
  .qd-mobile-pill {
    padding: 5px 12px;
    font-size: 11px;
    white-space: nowrap;
  }
  .qd-mobile-qty {
    font-size: 34px;
    margin: 10px 0 8px;
  }
  .qd-mobile-price {
    font-size: 17px;
    margin-bottom: 8px;
  }
  .qd-mobile-unit {
    font-size: 13px;
  }
  .qd-mobile-orig {
    font-size: 13px;
    margin-left: 2px;
  }
  .qd-mobile-save {
    padding: 4px 10px;
    font-size: 12px;
  }
}


/* Tlačítko Do košíku na detailu produktu — červená (podle návrhu klienta) */
.btn.btn-conversion.add-to-cart-button.om-cart-btn-white,
.om-cart-btn-white {
  background: #9f1400 !important;
  border-color: #9f1400 !important;
  border-radius: 8px !important;
  /* Ikona košíku napravo od textu (28. 7. 2026, na žádost klienta) —
     barva tlačítka zůstává beze změny, jen se přidává ikona. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.btn.btn-conversion.add-to-cart-button.om-cart-btn-white:after,
.om-cart-btn-white:after {
  content: "";
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  /* Bílá obrysová SVG ikona košíku (stejná jako v hlavičce, viz JS
     #om-header .om-cart-icon svg) — 28. 7. 2026, na žádost klienta:
     emoji 🛒 nešlo přebarvit na bílo (emoji mají vlastní pevné barvy,
     CSS `color` na ně nepůsobí), takže bylo na červeném pozadí špatně
     vidět. SVG jako background-image s natvrdo bílým stroke řeší to
     stejně spolehlivě jako CSS `mask`, bez nutnosti fallbacku. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%22%3E%3C/path%3E%3Cpath%20d%3D%22M3%206h18%22%3E%3C/path%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.btn.btn-conversion.add-to-cart-button.om-cart-btn-white:hover,
.om-cart-btn-white:hover {
  background: #7a0f00 !important;
  border-color: #7a0f00 !important;
}
.btn.btn-conversion.add-to-cart-button.om-cart-btn-white,
.btn.btn-conversion.add-to-cart-button.om-cart-btn-white *,
.om-cart-btn-white,
.om-cart-btn-white * {
  color: #fff !important;
}

/* Odkaz Pro firmy (uvnitř boxu) */
.om-pro-firmy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a !important;
  text-decoration: none !important;
  font-size: 16px;
  margin-top: 4px;
}
.om-pro-firmy img { width: 28px; height: 28px; object-fit: contain; }
.om-pro-firmy strong { text-decoration: underline; }
.om-pro-firmy:hover strong { color: #9f1400 !important; }

/* Box hodnocení + box spokojených zákazníků — pod tlačítkem Do košíku */
.om-summary-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 12px !important;
  width: 100%;
}
.om-rating-box,
.om-customers-box {
  flex: 1 !important;
  background: #f7f7f7 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}
.om-rating-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background .2s !important;
}
.om-rating-box:hover {
  background: #efefef !important;
}
.om-rating-top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.om-rating-stars {
  color: #f0c944 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
}
.om-rating-value {
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
}
.om-rating-count {
  font-size: 12px !important;
  color: #777 !important;
}
.om-customers-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.om-customers-icon { font-size: 20px !important; flex-shrink: 0 !important; }
.om-customers-text {
  display: flex !important;
  flex-direction: column !important;
  font-size: 12px !important;
  color: #555 !important;
  line-height: 1.35 !important;
}
.om-customers-text strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
}

/* Drobná poznámka pod boxy hodnocení/zákazníků (DPH, výpočet slevy) */
.om-pricing-note {
  font-size: 13px !important;
  color: #888 !important;
  line-height: 1.5 !important;
  margin-top: 12px !important;
}

/* Mobil — rozvržení podle klientova vzoru: boxy Hodnocení a Zákazníci
   pod sebou přes celou šířku (místo vedle sebe na půl), box hodnocení
   vodorovně v jedné řadě (hvězdy + číslo + pomlčka + počet recenzí)
   místo dvou řádků nad sebou. */
@media (max-width: 768px) {
  .om-summary-row {
    flex-direction: column !important;
  }
  .om-rating-box {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 16px 12px !important;
  }
  .om-rating-count {
    margin: 0 !important;
  }
  .om-rating-count:before {
    content: "-  ";
  }
  .om-customers-box {
    justify-content: center !important;
    padding: 16px 12px !important;
  }
}

/* Příznaky produktu (Novinka / Tip / Akce / Chlazené / Více za méně) na
   detailu produktu — kompaktní pilulky NAD nadpisem, v jednom řádku
   (podle klientova návrhu — rozložení, barvy zůstávají naše).
   Barvu pro "Více za méně" (flag-quantity-discount) máme ověřenou;
   ostatní typy mají obecný šedý styl.
   POZOR: cíleno JEN na .om-flags-relocated (třída, kterou JS přidá
   POUZE hlavnímu přesunutému elementu) — NE obecně na
   body.type-product .flags.flags-default, protože tahle třída se na
   stejné stránce (body.type-product) objevuje i u kartiček ve slideru
   "Produkty, které by vás mohli zajímat" (.products-alternative) —
   ty musí zůstat v původním nativním stylu Shoptetu, nedotčené. */
.flags.flags-default.om-flags-relocated {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
}
.flags.flags-default.om-flags-relocated .flag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.flags.flags-default.om-flags-relocated .flag-quantity-discount {
  background: #79b530 !important;
  color: #fff !important;
}
.flags.flags-default.om-flags-relocated .flag-action {
  background: #e6b800 !important;
  color: #fff !important;
}
.flags.flags-default.om-flags-relocated .flag-bestseller {
  background: #9f1400 !important;
  color: #fff !important;
}
.flags.flags-default.om-flags-relocated .flag-custom2 {
  background: #3b5bdb !important;
  color: #fff !important;
}

/* Stejné barvy příznaků VŠUDE na e-shopu (kartičky v kategorii, sliderech
   na homepage i "Produkty, které by vás mohli zajímat") — cíleno jen na
   barvu pozadí/textu, NE na pozici/tvar/padding, aby se nerozbilo nativní
   pozicování příznaků na kartách (viz lekce o position/transform u
   nativních Shoptet prvků). Vyšší specificita než inline styl Shoptetu
   díky !important. */
.flag-action { background: #e6b800 !important; color: #fff !important; }
.flag-bestseller { background: #9f1400 !important; color: #fff !important; }
.flag-custom2 { background: #3b5bdb !important; color: #fff !important; }
.flag-quantity-discount { background: #79b530 !important; color: #fff !important; }

/* Kompaktní zarovnání na stejnou šířku jako tabulka Množství — název,
   USP badges (.p-detail-inner-header), popisek (.p-short-description),
   cenový box a zelený pruh Skladem, viz max-width: 460px u příslušných
   pravidel. */
body.type-product .p-detail-inner-header {
  max-width: 460px !important;
}
body.type-product .p-short-description {
  max-width: 460px !important;
}

/* Fotka produktu VĚTŠÍ + celý pravý sloupec posunutý víc doprava —
   řeší prázdné bílé místo vpravo od kompaktního (460px) obsahu tím, že
   obrázek vyplní víc prostoru, místo aby se roztahoval text.
   Nativní sloupce mají poměr 50/50 (Bootstrap col-lg-6) — přepsáno na
   58/42, ať je fotka větší a pravý sloupec začíná dál doprava. */
/* ZMĚNA LOGIKY SLOUPCŮ (18. 7. 2026, na žádost klienta) — dřív procentní
   poměr 55/45 + gap, ale to nechávalo velkou prázdnou bílou plochu vpravo
   od kompaktního 460px obsahu (obsah byl zarovnaný vlevo uvnitř širšího
   sloupce). Klient chtěl mezeru vpravo ÚPLNĚ eliminovat a 460px kompaktní
   šířku obsahu ZACHOVAT. Řešení: pravý sloupec má PEVNOU šířku 460px
   (přesně na míru obsahu, žádné volné místo uvnitř) a fotka vlevo pružně
   (flex: 1) vyplní celý zbytek řádku — flexbox tak pravý sloupec přirozeně
   dotlačí až k pravému okraji kontejneru. Padding Bootstrap sloupce vynulován,
   aby 460px byla čistá šířka obsahu, ne obsah + padding.
   POZOR: scoped na min-width: 992px — pevných 460px by na mobilu (obrazovka
   užší než sloupec, flex-shrink: 0) přeteklo mimo viewport; pod 992px se
   nechává nativní Shoptet chování (sloupce pod sebou).
   OPRAVA (19. 7. 2026) — tenhle blok se od 18. 7. NIKDY NEAPLIKOVAL!
   Selektory `.row.product-top` a `.p-info-wrapper` na stránce vůbec
   neexistují (ověřeno přes konzoli) — skutečný flex rodič obou sloupců
   má třídu `.p-detail-inner` a pravý sloupec `.p-data-wrapper` (ne
   `.p-info-wrapper`), ani jeden z nich navíc nemá `.col-lg-6`. Proto byl
   celou dobu živý nativní Shoptet poměr 50/50 (680px/680px), i když
   diff proti nahranému souboru vždy vycházel čistě — CSS bylo v pořádku
   nasazené, jen mířilo na neexistující elementy. */
@media (min-width: 992px) {
  body.type-product .p-detail-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 60px !important;
  }
  body.type-product .p-image-wrapper {
    width: auto !important;
    max-width: none !important;
    /* flex-basis 0 (ne "auto") — jinak prohlížeč pro rozhodnutí "vejde
       se to vedle sebe?" počítal s PŘIROZENOU (plnou) šířkou fotky, a
       protože ta + 460px sloupec + gap přesahovaly šířku řádku, sloupce
       se zalomily na dva řádky, i když měla fotka flex-shrink:1 a mohla
       se zmenšit (19. 7. 2026 — objeveno po prvním nasazení opravy
       selektorů, kdy se konečně poprvé reálně vykreslila). S basis:0
       fotka nemá žádnou vlastní "požadovanou" šířku, takže se vždy jen
       zmenší na dostupné místo, nikdy nezpůsobí zalomení. */
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  body.type-product .p-data-wrapper {
    width: 460px !important;
    max-width: 460px !important;
    flex: 0 0 460px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Zvětšené náhledy fotek pod hlavní fotkou (28. 7. 2026, na žádost
     klienta) — pomáhá vyplnit prázdné místo pod fotkou, protože pravý
     sloupec (cena, badge, karty množstevní slevy...) je teď o dost
     vyšší než levý. Ověřeno v konzoli — je to jednoduchý float layout
     (ne JS transform-pozicované položky jako homepage slider), takže
     zvětšení přes CSS je bezpečné. */
  .p-thumbnails {
    height: 140px !important;
  }
  .p-thumbnail {
    width: 140px !important;
    height: 140px !important;
  }
  .p-thumbnail img {
    width: 140px !important;
    height: 140px !important;
  }

  /* Posun náhledů dolů (28. 7. 2026, na žádost klienta) — vytvoří
     menší mezeru mezi hlavní fotkou a náhledy, ale zvětší celkovou
     výšku levého sloupce, čímž se zmenší mezera POD náhledy (levý
     sloupec je stále kratší než pravý — cena, badge, karty množstevní
     slevy...). `.row` je přímý rodič `.p-thumbnails-wrapper` uvnitř
     `.p-image-wrapper` (viz konzole 28. 7. 2026). Nejdřív 50px,
     klient chtěl ještě víc — zdvojnásobeno na 100px. */
  .p-image-wrapper .row {
    margin-top: 100px !important;
  }
}
/* Fotka produktu — "sticky", ať sjíždí s obsahem místo prázdného místa pod sebou
   (nabídka je delší než fotka kvůli kartám množstevní slevy) */
.p-image-wrapper {
  position: sticky !important;
  top: 96px !important;
  align-self: start !important;
}

/* Loga partnerů pod hlavní fotkou produktu */
#om-product-partners {
  margin-top: -14px;
  width: 100%;
  max-width: 460px;
  grid-column: 1 / -1;
  display: block;
}
.om-product-partners-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #1a1a1a;
  margin-bottom: 14px;
}
.om-product-partners-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: start;
  gap: 22px;
}
.om-product-partners-logos img {
  height: 50px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Tabulka Specifikace na detailu produktu — styl podle oldmans.cz */
.om-specs-wrap {
  padding: 20px 0 !important;
}
table.om-specs-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
table.om-specs-table tr:nth-child(odd) {
  background: #f2f2f2 !important;
}
table.om-specs-table tr:nth-child(even) {
  background: #ffffff !important;
}
table.om-specs-table th,
table.om-specs-table td {
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  border: none !important;
}
table.om-specs-table th {
  width: 30% !important;
  white-space: nowrap !important;
}
table.om-specs-table .row-header-label-colon {
  display: none !important;
}
table.om-specs-table th,
table.om-specs-table td,
table.om-specs-table .row-header-label {
  background: none !important;
  background-image: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
table.om-specs-table th:before,
table.om-specs-table th:after,
table.om-specs-table td:before,
table.om-specs-table td:after,
table.om-specs-table .row-header-label:before,
table.om-specs-table .row-header-label:after {
  display: none !important;
  content: none !important;
}
table.om-specs-table a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}
.shp-tabs-row {
  border-bottom: 1px solid #e2e2e2 !important;
  padding-left: 0 !important;
}
.shp-tabs #p-detail-tabs,
#p-detail-tabs.shp-tabs {
  border-bottom: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.shp-tabs-holder {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.shp-tab-link {
  padding: 10px 18px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  border-radius: 6px 6px 0 0 !important;
  display: inline-block !important;
  background: transparent !important;
}
#p-detail-tabs > li:first-child .shp-tab-link {
  padding-left: 4px !important;
}
.shp-tab.active .shp-tab-link {
  border-color: #c7d7f5 !important;
  border-bottom-color: #fff !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: -1px !important;
  background: #fff !important;
}
/* Diskuze — úplně skrýt tab i obsah */
li[data-testid="tabDiscussion"],
#productDiscussion {
  display: none !important;
}
/* Duplicitní hodnocení (hvězdičky) uvnitř záložky Popis — má teď vlastní tab "Hodnocení" */
.rate-wrapper-in-description {
  display: none !important;
}
.breadcrumbs.navigation-home-icon-wrapper {
  justify-content: flex-start !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 24px 0 16px 0 !important;
  padding-left: 0 !important;
}
.breadcrumbs.navigation-home-icon-wrapper,
.breadcrumbs.navigation-home-icon-wrapper * {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}
.breadcrumbs.navigation-home-icon-wrapper a {
  text-decoration: none !important;
}
.breadcrumbs.navigation-home-icon-wrapper a:hover {
  text-decoration: underline !important;
}
.breadcrumbs.navigation-home-icon-wrapper svg,
.breadcrumbs.navigation-home-icon-wrapper .separator,
.breadcrumbs.navigation-home-icon-wrapper .icon-arrow-right {
  color: #9a9a9a !important;
  fill: #9a9a9a !important;
}

/* ══════════════════════════════════════════════
   MOBILNÍ RESPONZIVITA — souhrnné opravy
   ══════════════════════════════════════════════ */

/* Hamburger menu / drawer / backdrop jsou určené jen pro mobil — bez
   téhle výchozí hodnoty (mimo @media) se na desktopu vykreslovaly jako
   nestylovaný obsah úplně dole na stránce (žádné pravidlo pro ně mimo
   mobilní media query neplatilo, prohlížeč je bral jako obyčejné divy) */
.om-mobile-menu-btn,
.om-mobile-backdrop,
.om-mobile-drawer {
  display: none;
}

/* Stránka se nesmí posouvat do stran (100vw sekce + přetékající prvky
   způsobovaly vodorovný scroll a "rozházený" vzhled celého mobilu) */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {

  /* ── Top bar — na mobilu úplně schovaný (viz vzor oldmans.cz,
     mobilní header je minimalistický: jen logo + ikony) ── */
  #om-topbar { display: none !important; }

  /* ── Hlavní header — jen logo vlevo + ikony vpravo, jeden řádek ── */
  #om-header .om-header-inner {
    flex-wrap: nowrap;
    gap: 10px;
  }
  #om-header .om-logo { order: 1; }
  #om-header .om-logo img { height: 40px; }
  #om-header .om-icons { order: 2; margin-left: auto; gap: 14px; }

  /* Hledání, vodorovná navigace (Recepty/B2B) a lišta kategorií —
     na mobilu schované, přesunuté do rozbalovacího menu (hamburger) */
  #om-header .om-search,
  #om-header .om-nav,
  #om-cat-menu {
    display: none !important;
  }

  /* Košík — kulaté žluté tlačítko jen s ikonou + odznak s počtem kusů,
     stejně jako na originálu (text ceny se na mobilu neukazuje).
     POZOR: základní (desktopové) pravidlo má overflow:hidden — na mobilu
     ho musíme přebít na visible, jinak se odznak useknou. */
  #om-header .om-cart a {
    position: relative !important;
    min-width: 0 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    column-gap: 0 !important;
    background: #f7c91b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 1;
  }
  #om-header .om-cart-icon {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    color: #1a1a1a;
  }
  #om-header .om-cart-icon svg { width: 20px !important; height: 20px !important; }
  #om-header .om-cart .cart-price { display: none !important; }
  .om-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #000;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
  }

  /* Hamburger tlačítko — vidět jen na mobilu */
  .om-mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
    height: 22px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }
  .om-mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: #000;
    border-radius: 2px;
  }

  /* Rozbalovací menu (drawer) — postranní panel zprava, přes celou výšku */
  .om-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 998;
  }
  body.om-mobile-menu-open .om-mobile-backdrop { display: block; }

  .om-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88%;
    max-width: 420px;
    background: #fff;
    /* Stejný důvod jako u #om-header — Shoptet zatemňovací clona při
       aktivním vyhledávání má z-index:1002, drawer musí být nad ní,
       jinak by dropdown s návrhy uvnitř nešel proklikat (29. 7. 2026). */
    z-index: 1010;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 30px rgba(0,0,0,.15);
    padding: 70px 24px 30px;
    box-sizing: border-box;
  }
  body.om-mobile-menu-open .om-mobile-drawer { display: block; }

  .om-mobile-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 18px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .om-mobile-search {
    display: flex;
    align-items: center;
    background: #f3f3f4;
    border-radius: 50px;
    padding: 4px 4px 4px 16px;
    margin-bottom: 22px;
    /* Kotva pro absolutně pozicovaný dropdown s návrhy (.searchWhisperer,
       viz JS relocateWhisperer) — 29. 7. 2026. */
    position: relative;
  }
  .om-mobile-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 6px;
    font-size: 15px;
    outline: none;
  }
  .om-mobile-search button {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
  }

  /* Seznam kategorií — hned pod hledáním, plná šířka, oddělovací linky */
  .om-mobile-cats {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
  }
  .om-mobile-cats li { border-bottom: 1px solid #f0f0f0; }
  .om-mobile-cats li a {
    display: block;
    padding: 17px 2px;
    font-size: 19px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
  }
  .om-mobile-cats li.cat-favorite a { color: #79b530 !important; font-weight: 700; }
  .om-mobile-cats li.cat-sale a { color: #E74E1B !important; font-weight: 700; }
  /* V mobilním seznamu kategorií nepotřebujeme tlačítko "Více" ani
     zdvojené položky z jeho rozbalovacího submenu */
  .om-mobile-cats .om-more-btn { display: none !important; }

  /* Recepty / B2B — box se dvěma odkazy vedle sebe, pod kategoriemi */
  .om-mobile-quicklinks {
    display: flex;
    background: #f5f5f5;
    border-radius: 14px;
    padding: 18px 10px;
    margin-bottom: 24px;
    gap: 10px;
  }
  .om-mobile-quicklink {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
  }

  /* Kontakt — ikona + e-mail + podtext, na konci panelu */
  .om-mobile-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
  }
  .om-mobile-contact-icon { font-size: 30px; flex-shrink: 0; }
  .om-mobile-contact-text { display: flex; flex-direction: column; }
  .om-mobile-contact-email { color: #79b530; font-weight: 700; font-size: 17px; }
  .om-mobile-contact-sub { color: #999; font-size: 14px; }

  /* ── Detail produktu ── */
  /* Trust badges (Vyrobeno v ČR / Ruční výroba / Vždy čerstvé) — grid
     3 sloupce se stará o rozložení samo (viz #om-trust-badges výše),
     na mobilu žádná speciální úprava potřeba. */

  /* Sticky fotka produktu na mobilu nedává smysl (sloupce jsou pod sebou) */
  .p-image-wrapper {
    position: static !important;
  }

  /* Hlavní fotka produktu — full width přes celou šířku obrazovky
     (na žádost klienta, 28. 7. 2026, podle referenčního vzoru).
     OPRAVA (28. 7. 2026) — první verze používala stejný trik jako
     hero banner (position:relative; left:50%; margin-left:-50vw), ale
     ten je na mobilu nespolehlivý: `left: 50%` se počítá procentuálně
     vůči ŠÍŘCE RODIČE (užší, kvůli bočnímu paddingu stránky), zatímco
     `margin-left: -50vw` se počítá vůči CELÉ OBRAZOVCE — ty dvě
     hodnoty spolu nesedí, vznikla mezera přesně o velikost bočního
     paddingu stránky (ověřeno v konzoli i na screenshotu). Spolehlivá
     varianta (funguje bez ohledu na padding rodiče): `margin: calc(50%
     - 50vw)` — "50%" se tu počítá jako margin, tedy taky vůči šířce
     rodiče, takže se s "-50vw" složí do přesně správného posunu. Bez
     position/left/right, čistě přes margin. */
  .p-image {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .p-image img {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Loga partnerů na detailu — menší, ať se vejdou */
  .om-product-partners-logos img { height: 38px !important; max-width: 100px !important; }

  /* ── Homepage sekce — menší nadpisy, menší odsazení ── */
  .om-section { padding: 35px 0; }
  .om-about-text h2, .om-apetit-text h2 { font-size: 30px !important; }
  .om-instagram h2 { font-size: 38px !important; }

  /* ── Nadpisy sekcí na mobilu vycentrované (Bestsellery, Omáčky ve
     slevě, Recepty, Naše omáčky najdete, Old Man's: omáčky na míru,
     Vyberte si dle vaší chuti / Kategorie omáček, ...) ── */
  .homepage-group-title,
  .om-section-header {
    justify-content: center !important;
  }
  .homepage-group-title,
  .om-section-header h2,
  .om-partners h3,
  .om-about-text h2,
  .om-apetit-text h2,
  .om-categories h2,
  .om-categories .om-subtitle {
    text-align: center !important;
  }

  /* ── Produktové slidery (Bestsellery/Omáčky ve slevě) a Vybrané
     recepty — na mobilu podle vzoru originálu oldmans.cz: jedna karta
     přes většinu šířky obrazovky (s kouskem další karty jako náznak,
     že se dá klikat/posouvat dál) + viditelné žluté šipky přes fotku. ── */
  .products-block .product {
    width: 84vw !important;
    min-width: 84vw !important;
    max-width: 84vw !important;
  }
  .product-slider-navigation {
    width: 44px !important;
    height: 44px !important;
    /* Opraveno podle reálného screenshotu (šipky seděly moc vysoko,
       přes štítky místo přes fotku) — přepočítáno z naměřených pixelů,
       ne odvozeno z desktopového poměru (nativní startovní pozice
       Shoptet slideru se neškáluje stejně jako šířka karty) */
    margin-top: 58px !important;
  }
  .product-slider-navigation:before {
    width: 10px !important;
    height: 10px !important;
    border-width: 2px !important;
  }

  .om-recipes .om-recipe-item { width: 84vw !important; }
  .om-recipe-nav {
    width: 44px !important;
    height: 44px !important;
    /* Fotka receptu je čtvercová = výška rovná šířce karty, střed fotky
       je tedy v polovině šířky karty */
    top: calc(84vw / 2) !important;
  }
  .om-recipe-nav-prev { left: 4px; }
  .om-recipe-nav-next { right: 4px; }
}

/* ══════════════════════════════════════════════
   CHECKOUT — Rekapitulace objednávky přilepená (sticky)
   (/objednavka/krok-1/ a /objednavka/krok-2/, 22. 7. 2026)
   Struktura ověřená přes konzoli:
     .row.cart-row (display:block nativně — Bootstrap float grid, NE flex)
       ├─ .col-md-8 (formulář — dlouhý, adresa/doprava/platba...)
       └─ .col-md-4 > .cart-content
            ├─ .order-summary > .order-summary-inner (karta)
            └─ .next-step.next-step--step-1 (tlačítko Pokračovat —
                 SOUROZENEC .order-summary, NE uvnitř ní!)
   OPRAVA (22. 7. 2026, TŘETÍ kolo):
     1. kolo — sticky na .order-summary: nezahrnovalo tlačítko
        Pokračovat (to je mimo kartu), takže tlačítko dál odjíždělo.
     2. kolo — sticky na .cart-content (obaluje kartu i tlačítko):
        tlačítko teď JEZDÍ SPOLU s kartou, ale pořád obojí zmizelo
        pod červenou USP lištou. Příčina: `.row.cart-row` je nativně
        `display:block` (starý Bootstrap float grid, NE flex) — pravý
        sloupec (.col-md-4) se proto NEROZTÁHNE na výšku levého
        sloupce s dlouhým formulářem (.col-md-8), zůstává jen tak
        vysoký jako jeho vlastní krátký obsah. Sticky element má
        "kam šplhat" jen v rámci výšky SVÉHO rodičovského kontejneru
        — když je ten kontejner krátký, sticky se odlepí hned po pár
        stovkách pixelů scrollu a pak normálně "uteče" pryč, přesně
        jak bylo vidět na screenshotech.
     3. kolo (tahle verze) — vynutit `.row.cart-row` na `display:flex`.
        Flex řádek default (`align-items: stretch`) automaticky
        natáhne KRATŠÍ sloupec (.col-md-4) na výšku DELŠÍHO sloupce
        (.col-md-8), takže .cart-content uvnitř má konečně dost
        prostoru pro sticky "šplhání" po celou dobu scrollování
        formuláře — odlepí se teprve těsně u konce formuláře, ne
        hned po pár řádcích. Stejný princip jako starší oprava
        `.p-detail-inner` na detailu produktu (display:flex kvůli
        stejné výšce sloupců, viz komentář tam).
     4. kolo — display:flex fungoval (`.col-md-4` se skutečně
        natáhlo na výšku `.col-md-8`, ověřeno konzolí: obě 840px),
        ALE `.cart-content` se natáhlo TAKY na 840px — vyzkoušeno
        `height: fit-content` i `height: auto`, obojí bez efektu.
     5. kolo (tahle verze, KOŘEN PROBLÉMU nalezen) — `.cart-content`
        NENÍ unikátní třída jen pro pravý sloupec se souhrnem!
        Existuje STEJNOJMENNÁ třída i uvnitř `.col-md-8` (levý
        sloupec, obaluje celý formulář). Selektor `.cart-content`
        (bez omezení na rodiče) tak omylem cílil na OBA sloupce
        současně — a diagnostika přes `document.querySelector
        ('.cart-content')` (bere jen PRVNÍ shodu v DOM) navíc celou
        dobu měřila ten ŠPATNÝ, levý element (jehož výška 840
        logicky odpovídá výšce celého formuláře — nebyl to bug,
        jen jsme se dívali na jiný box, než jsme mysleli).
        Opraveno na `.col-md-4 > .cart-content` — cílí VÝHRADNĚ na
        pravý sloupec se souhrnem, levý sloupec (formulář) už tímhle
        pravidlem není vůbec dotčen.
     6. kolo (tahle verze) — i po opravě z 5. kola se karta v reálném
        prohlížeči (potvrzeno screenshotem v normálním okně, ne jen
        v úzkém DevTools výřezu) odlepovala/končila o kousek dřív,
        než levý sloupec doběhl na konec, takže spodek karty (Cena
        bez DPH + tlačítko Pokračovat) mizel nad viditelnou oblastí
        dřív, než se objevila červená USP lišta — vypadalo to jako
        "překryv". Přesná matematika sticky containing-block
        (kde přesně se karta "odlepí") se v tomhle prohlížeči/
        rozlišení neshodovala s tím, co ukazovaly rect souřadnice v
        konzoli. Místo dalšího doladění přesných čísel — přidána
        VELKORYSÁ rezervní mezera (100px) mezi celým checkout řádkem
        a čímkoliv, co následuje (USP lišta atd.), aby i s drobnou
        nepřesností v odlepení sticky zůstal vždycky dostatek
        prostoru a nic se nepřekrývalo. Pragmatické řešení místo
        honění posledního pixelu přesnosti. */
/* ZMĚNA (29. 7. 2026, na žádost klienta) — pravý sloupec se souhrnem
   má být ÚPLNĚ STATICKÝ: sedí na svém místě vedle formuláře a
   scrolluje s ním jako běžný obsah stránky. Žádné `sticky` (jelo to
   s oknem a odlepovalo se na konci formuláře), žádné `fixed`
   (zůstávalo přilepené k oknu při scrollování). Prostě normální
   sloupec ve flex řádku — proto se všechna dřívější pozicovací
   pravidla ruší zpět na výchozí hodnoty. Historii předchozích pokusů
   (6 kol ladění sticky varianty, 22. 7. 2026) viz komentář výše. */
.row.cart-row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 100px !important;
}
.col-md-4 > .cart-content {
  position: static !important;
  align-self: flex-start !important;
  height: auto !important;
}
/* KLÍČOVÉ (29. 7. 2026) — Shoptet má na `.col-md-4` VLASTNÍ JS sticky
   implementaci, která sloupci nastavuje INLINE styl
   `position: relative; top: 584.43px` (hodnota se mění při scrollování,
   ověřeno v konzoli — nekulaté číslo = počítáno JS, ne z CSS). Tohle
   způsobovalo, že pravý sloupec "ujížděl" dolů a jeho spodek (Celkem
   k úhradě + tlačítko Pokračovat) končil schovaný pod červenou USP
   lištou. Inline styl jde přebít jedině přes `!important` — to má
   v CSS kaskádě přednost i nad inline stylem, takže JS sice hodnotu
   dál přepisuje, ale vizuálně se neprojeví. */
.row.cart-row > .col-md-4 {
  position: static !important;
  top: auto !important;
}
@media (max-width: 900px) {
  .row.cart-row {
    display: block !important;
    margin-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════
   MOBILNÍ VLASTNÍ SLIDER — homepage produkty
   (Bestsellery, V akci) — 23. 7. 2026
   Nativní Shoptet slider posouvá karty přes JS transform
   (translate3d), NE přes opravdové scrollování — na mobilu
   se při tažení prstem nepřichytával na celé karty (bez ohledu
   na CSS scroll-snap, protože to není nativní scroll container).
   Řešení: na mobilu nativní slider schováme (viz media query
   níže) a zobrazíme VLASTNÍ klon karet s opravdovým
   overflow-x:auto + scroll-snap — stejný princip jako už
   funkční slider "Vybrané recepty". Desktop je beze změny,
   tam nativní slider funguje správně. */
.om-mobile-product-slider {
  display: none;
}
@media (max-width: 768px) {
  /* Nativní Shoptet slider (identifikovaný přes data-columns,
     ověřeno konzolí) — na mobilu schovaný */
  .product-slider-holder > .product-slider[data-columns] {
    display: none !important;
  }
  /* Nativní šipky Shoptet slideru (.product-slider-navigation) — NEJSOU
     potomkem [data-columns] elementu výše (jsou jeho sourozenec), takže
     schování [data-columns] je samo o sobě neschovávalo. Zůstávaly
     viditelné přes naše vlastní šipky (viz screenshot 23. 7. 2026).
     Scoped jen na .product-slider-holder — netýká se slideru "Podobné
     produkty" na detailu produktu (.products-alternative), ten má
     jinou strukturu a v tomhle kole úprav se ho nedotýkáme. */
  .product-slider-holder > .product-slider-navigation {
    display: none !important;
  }
  /* Nativní puntíky/pagination Shoptet slideru (.product-slider-pagination)
     — už ztratily smysl, náš vlastní slider se neposouvá po "stránkách"
     synchronizovaných s nimi (23. 7. 2026). Stejný scoping jako výše. */
  .product-slider-holder > .product-slider-pagination {
    display: none !important;
  }
  .om-mobile-product-slider {
    display: block;
    position: relative;
  }
  /* Přebíjí základní .product-slider-holder pravidlo (overflow:hidden;
     padding-bottom:40px) vyšší specificitou dvou tříd — nechceme to
     tady, potřebujeme viditelné šipky přesahující přes okraj a žádný
     extra padding navíc. */
  .om-mobile-product-slider.product-slider-holder {
    overflow: visible !important;
    padding-bottom: 10px !important;
  }
  .om-mobile-product-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 10px;
    margin: -4px -4px 0;
    scrollbar-width: none;
  }
  .om-mobile-product-slider-track::-webkit-scrollbar { display: none; }
  .om-mobile-product-slider-track .product {
    /* OPRAVA (23. 7. 2026, na žádost klienta) — dřív 84vw (84 % CELÉ
       obrazovky), ale kontejner slideru (.product-slider-holder) má
       vlastní boční padding (20px každá strana), takže karta počítaná
       vůči celé obrazovce byla širší, než kolik reálně zbývalo místa
       uvnitř — kartička byla vpravo useknutá (viz screenshot). Teď
       100 % VLASTNÍHO KONTEJNERU (track), ne celé obrazovky — karta
       se tak vždy přesně vejde do dostupného prostoru, ať je padding
       jakýkoliv, a zabírá celou obrazovku bez "nakukování" další
       karty (jak si klient přál). */
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
  }
  .om-mobile-slider-nav {
    position: absolute;
    /* Přesná svislá pozice (odpovídající výšce obrázku karty) se teď
       dopočítává přes JS po vykreslení (viz om-mobile-slider-nav-top
       inline style) — 84vw už neplatí jako spolehlivý odhad výšky,
       protože šířka karty už není vw, ale % kontejneru. Tahle hodnota
       je jen záložní/výchozí, než JS doběhne. */
    top: 150px;
    transform: translateY(-50%);
    background: #f0c944 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    color: #fff !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
  }
  .om-mobile-slider-nav svg { width: 18px; height: 18px; display: block; }
  .om-mobile-slider-nav:hover { background: #e6b800 !important; }
  .om-mobile-slider-nav:focus { outline: none !important; box-shadow: none !important; }
  .om-mobile-slider-nav-prev { left: 4px; }
  .om-mobile-slider-nav-next { right: 4px; }

  /* Kompaktnější rozložení karty (23. 7. 2026, na žádost klienta) —
     nativní pravidlo `.p-bottom { margin-top: auto !important; }`
     (sdílené s desktop kartami) tlačí cenu+tlačítko úplně dolů ke
     kraji karty. Na krátké desktopové kartě (270px) to nevadí, ale
     na vysoké mobilní kartě (obrázek skoro přes celou šířku
     obrazovky) to mezi popiskem a cenou vytváří velkou prázdnou
     mezeru (viz screenshot). Scoped JEN na náš mobilní slider —
     desktop a ostatní slidery (kategorie, "Podobné produkty") mají
     jinou výšku karty a tam je to zarovnání žádoucí, necháváme ho
     beze změny. */
  .om-mobile-product-slider-track .product .p-bottom {
    margin-top: 20px !important;
  }
  /* Větší vnitřní odsazení karty (23. 7. 2026, na žádost klienta) —
     nativní padding 16px (sdílený s malou desktop kartou) na téhle
     velké mobilní kartě působil stísněně — cena a tlačítko "Do
     košíku"/"Detail" seděly skoro nalepené na zaoblený okraj karty
     (viz detailní screenshoty). Scoped jen na náš mobilní slider. */
  .om-mobile-product-slider-track .product .p-in-in {
    padding: 20px !important;
  }
  .om-mobile-product-slider-track .product .p-bottom > div {
    padding-right: 0 !important;
  }
  /* Jemné doladění pozice ceny a tlačítka (23. 7. 2026, na žádost
     klienta, přesně v px) — cena o 10px doprava a 14px nahoru
     (4px + dalších 10px na žádost), tlačítko Do košíku o 10px
     doleva a 14px nahoru (stejně). Scoped jen na náš mobilní
     slider, position:relative + top/left offset nezasahuje do
     layoutu (prvek zůstává na svém místě v toku, jen se vizuálně
     posune). */
  .om-mobile-product-slider-track .product .p-bottom .prices {
    position: relative !important;
    left: 10px !important;
    top: -14px !important;
  }
  .om-mobile-product-slider-track .product .p-tools {
    position: relative !important;
    left: -10px !important;
    top: -14px !important;
  }
}

/* ══════════════════════════════════════════════
   MOBILNÍ STICKY CTA LIŠTA (28. 7. 2026, na žádost klienta)
   Přilepená lišta dole s počítadlem kusů + tlačítkem Přidat do košíku,
   aktivuje se JEN když hlavní CTA řádek (.om-buy-row) není vidět —
   viz IntersectionObserver v JS (enhanceProductDetail). Karty
   množstevní slevy se na sticky liště NEZOBRAZUJÍ, jen počet a
   tlačítko — přepočet cen/slev ale funguje beze změny, protože sticky
   tlačítka jen proklikávají nativní +/- a nativní tlačítko Do košíku.
   ══════════════════════════════════════════════ */
#om-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  #om-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    /* Skrytá mimo obrazovku dole, dokud JS nepřidá
       .om-sticky-cta-visible (hlavní CTA odscrollováno pryč) */
    transform: translateY(100%);
    transition: transform .3s ease;
  }
  #om-sticky-cta.om-sticky-cta-visible {
    transform: translateY(0);
  }
  .om-sticky-cta-inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .om-sticky-cta-qty {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .om-sticky-cta-minus,
  .om-sticky-cta-plus {
    width: 42px;
    height: 44px;
    background: #f7f7f7;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .om-sticky-cta-minus:active,
  .om-sticky-cta-plus:active {
    background: #ececec;
  }
  .om-sticky-cta-count {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
  }
  .om-sticky-cta-btn {
    flex: 1 1 auto;
    height: 44px;
    background: #9f1400;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    padding: 0 14px;
  }
  .om-sticky-cta-btn:active {
    background: #7a0f00;
  }
  /* Stejná bílá SVG ikona košíku jako na hlavním tlačítku Přidat do
     košíku (viz .om-cart-btn-white:after výše) — konzistentní vzhled. */
  .om-sticky-cta-btn:after {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%22%3E%3C/path%3E%3Cpath%20d%3D%22M3%206h18%22%3E%3C/path%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

/* ══════════════════════════════════════════════
   "HLÍDAT DOSTUPNOST" U VYPRODANÝCH PRODUKTŮ
   (29. 7. 2026, na žádost klienta)
   .sold-out-wrapper existuje v DOM jen když je produkt nedostupný —
   JS (krok 9 v enhanceProductDetail) do něj přesune odkaz .watchdog
   a přidá třídu .om-watchdog-cta.
   ══════════════════════════════════════════════ */
.sold-out-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.om-watchdog-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #4a9b3f !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.om-watchdog-cta:hover {
  color: #3a7a30 !important;
  text-decoration: underline !important;
}

/* Mobil — méně místa než na desktopu, "Položka byla vyprodána…" +
   "Hlídat dostupnost" se s výchozí velikostí nevešly vedle sebe a
   zalomilo se to na dva řádky (29. 7. 2026 — klient chtěl stejnou
   strukturu jako na desktopu, tedy v jednom řádku). Zmenšené písmo +
   ikona + zákaz zalomení. */
@media (max-width: 768px) {
  .sold-out-wrapper {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .sold-out-wrapper .sold-out {
    font-size: 14px !important;
  }
  .om-watchdog-cta {
    font-size: 12px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }
  .om-watchdog-cta svg,
  .om-watchdog-cta img {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ──────────────────────────────────────────────
   TLAČÍTKA "ZPĚT DO OBCHODU" + "POKRAČOVAT" NA STRÁNCE KOŠÍK
   (3. 8. 2026, na žádost klienta)
   Selektory ověřeny konzolí — obě tlačítka jsou sourozenci uvnitř
   .next-step.next-step--cart, unikátní pro košík:
     a.next-step-back    = "Zpět do obchodu"
     a.next-step-forward = "Pokračovat" (zelené, nativní barva
       necháváme)
   OPRAVA (3. 8. 2026, jedenácté kolo, na žádost klienta) — stejné
   finální zadání jako u horního klonu (.om-cart-top-actions): "Zpět
   do obchodu" jen obrys + podtržený černý text (žádné vyplněné
   pozadí), "Pokračovat" zelené pozadí + ČERNÝ text + šipka ">".
   Rohy hranaté (ne kulaté), stejně jako u horního klonu.
────────────────────────────────────────────── */
.next-step.next-step--cart a.next-step-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
  /* OPRAVA (3. 8. 2026, čtrnácté kolo, na žádost klienta) — dvanácté
     kolo dalo úplně ostré rohy (0), ale klient se nakonec vrátil
     k mírnému zaoblení (6px) — "ať to neděláš". */
  border-radius: 6px !important;
  padding: 12px 24px !important;
  margin-right: 16px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  /* OPRAVA (3. 8. 2026, na žádost klienta) — velká písmena, stejně
     jako "Pokračovat" (to je uppercase přirozeně už z nativního
     textu, "Zpět do obchodu" potřebovalo CSS text-transform). */
  text-transform: uppercase !important;
  /* OPRAVA (4. 8. 2026, šesté kolo, na žádost klienta) — nalezeno
     přes konzoli: "Zpět do obchodu" (font 16px/700, padding 12px 24px,
     border 1.5px) vychází na 63px, "Pokračovat" (nativní font 20px/900,
     padding 10px 20px, border 1px) na 58px — čistě proto, že mají
     navzájem jiné nativní rozměry. Sjednoceno napevno na stejnou
     výšku, box-sizing:border-box zaručí, že se do ní vejde obojí bez
     ohledu na padding/font. */
  box-sizing: border-box !important;
  height: 60px !important;
  transition: background .2s !important;
}
.next-step.next-step--cart a.next-step-back:hover {
  background: rgba(0, 0, 0, .05) !important;
}
.next-step.next-step--cart a.next-step-back .continue-shopping {
  color: inherit !important;
}
.next-step.next-step--cart a.next-step-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 6px !important;
  color: #1a1a1a !important;
  box-sizing: border-box !important;
  height: 60px !important;
}
.next-step.next-step--cart a.next-step-forward .order-button-text {
  color: inherit !important;
}
/* OPRAVA (3. 8. 2026, třinácté kolo, na žádost klienta) — nativní
   šipka Shoptetu vypadala jinak než referenční obrázek (silná
   dvoulinková šipka). Schovaná a nahrazená stejnou vlastní šipkou
   jako u horního klonu tlačítek (.om-cart-top-actions), ať je vzhled
   konzistentní na celé stránce. */
.next-step.next-step--cart a.next-step-forward svg,
.next-step.next-step--cart a.next-step-forward [class*="icon"] {
  display: none !important;
}
.next-step.next-step--cart a.next-step-forward:after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1.5px;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────
   TLAČÍTKA "POKRAČOVAT" / "OBJEDNAT" NA CHECKOUTU
   (3. 8. 2026, na žádost klienta — stejný styl jako v košíku)
   Selektory ověřeny konzolí — na krok-1 je to <button>, ne <a>
   (jiné než v košíku), na krok-2 má jiné jméno třídy i dva textové
   spany (název + podtext "s povinností platby"):
     /objednavka/krok-1/ → button.next-step-forward
       uvnitř .next-step.next-step--step-1
     /objednavka/krok-2/ → button.next-step-finish
       uvnitř .next-step.next-step--step-2
   OPRAVA (3. 8. 2026, dvanácté kolo, na žádost klienta) — ostré rohy
   (border-radius:0, stejně jako zbytek košíku/checkoutu) a teď i
   ČERNÝ text (dřív bílý) — klient chtěl "Pokračovat"/"Objednat"
   sjednotit barevně se zbytkem procesu.
────────────────────────────────────────────── */
.next-step.next-step--step-1 button.next-step-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 6px !important;
  color: #1a1a1a !important;
}
.next-step.next-step--step-2 button.next-step-finish {
  border-radius: 6px !important;
  color: #1a1a1a !important;
}
.next-step.next-step--step-1 button.next-step-forward .order-button-text,
.next-step.next-step--step-2 button.next-step-finish .order-button-text,
.next-step.next-step--step-2 button.next-step-finish .order-button-suffix {
  color: inherit !important;
}
/* OPRAVA (3. 8. 2026, třinácté kolo, na žádost klienta) — krok-1 má
   jednořádkový text (jako "Pokračovat" v košíku), takže tam nasazujeme
   stejnou vlastní silnou šipku pro vizuální konzistenci. Krok-2 má
   DVA řádky textu (název + podtext "s povinností platby") — bez
   živého ověření struktury tam radši neměníme layout na flex/vlastní
   šipku (riziko rozbití zalomení), necháváme jen pojistku na barvu
   nativní ikony (fill/stroke currentColor). */
.next-step.next-step--step-1 button.next-step-forward svg,
.next-step.next-step--step-1 button.next-step-forward [class*="icon"] {
  display: none !important;
}
.next-step.next-step--step-1 button.next-step-forward:after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1.5px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.next-step.next-step--step-2 button.next-step-finish svg,
.next-step.next-step--step-2 button.next-step-finish svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ──────────────────────────────────────────────
   MOBIL — tlačítka "Pokračovat"/"Objednat" + "Zpět do obchodu"
   se pod sebou (na úzké obrazovce) lepila bez mezery a nebyla
   stejně velká (3. 8. 2026, na žádost klienta). Sjednocena šířka
   na 100 % a přidána svislá mezera mezi nimi. Platí pro košík
   i oba kroky checkoutu — stejná trojice selektorů jako výše,
   jen boční margin (pro vedle sebe na desktopu) nahrazen dolním
   (pro pod sebou na mobilu). */
@media (max-width: 768px) {
  .next-step.next-step--cart a.next-step-back,
  .next-step.next-step--step-1 button.next-step-forward,
  .next-step.next-step--step-2 button.next-step-finish,
  .next-step.next-step--cart a.next-step-forward {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .next-step.next-step--cart a.next-step-back {
    margin-right: 0 !important;
    margin-top: 12px !important;
  }
}

/* ──────────────────────────────────────────────
   DUPLIKÁT TLAČÍTEK NAHOŘE V KOŠÍKU
   (3. 8. 2026, na žádost klienta, podle mockupu) — klon "Zpět do
   obchodu" + "Pokračovat" (viz JS duplicateCartTopButtons), malý,
   zarovnaný vpravo nahoře vedle kroků. DOPLŇUJE, nenahrazuje
   stávající dvojici dole. Vlastní, kompaktní styl — klon NENÍ uvnitř
   .next-step.next-step--cart, takže nesdílí velký styl tlačítek
   z předchozí sekce, potřebuje vlastní pravidla.
────────────────────────────────────────────── */
.om-cart-top-actions {
  /* OPRAVA (3. 8. 2026, osmé kolo) — vycentrováno (width:100% +
     justify-content:center, ať se řádek se dvěma tlačítky zarovná
     na střed dostupné šířky, ne jen zleva). */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  margin: 50px 0 16px;
}
.om-cart-top-actions a.next-step-back,
.om-cart-top-actions a.next-step-forward {
  /* OPRAVA (4. 8. 2026, na žádost klienta, třetí kolo) — dřív
     systémový font stack (kvůli tomu, že "Pokračovat" nativně táhlo
     jiný font přes třídu .btn-conversion než "Zpět do obchodu" —
     mezi sebou nesourodé). Teď natvrdo stejný font jako spodní hlavní
     dvojice tlačítek ("Source Sans 3", nativní font webu) — obě horní
     tlačítka tak budou konzistentní jak mezi sebou, tak se zbytkem
     stránky. */
  font-family: "Source Sans 3", sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 160px !important;
  box-sizing: border-box !important;
  padding: 6px 26px !important;
  /* OPRAVA (3. 8. 2026, čtrnácté kolo, na žádost klienta) — dvanácté
     kolo dalo úplně ostré rohy (0), ale klient se nakonec vrátil
     k mírnému zaoblení (6px), stejně jako spodní hlavní dvojice
     tlačítek a checkout. */
  border-radius: 6px !important;
  font-size: 13px !important;
  /* OPRAVA (4. 8. 2026, na žádost klienta, druhé kolo) — nalezeno přes
     konzoli (getComputedStyle): tlačítko bylo VYŠŠÍ (74px) než spodní
     hlavní dvojice (58px), i přes menší font-size (13px vs. nativních
     20px dole) — příčina byl zděděný velký `line-height` z nativního
     Shoptet stylu tlačítka (nikdy jsme ho tu explicitně nenastavili,
     takže se "táhl" odjinud). Vynucen normální poměr. */
  line-height: 1.3 !important;
  /* OPRAVA (4. 8. 2026, páté kolo, na žádost klienta) — nalezeno přes
     konzoli: spodní tlačítka mají font-weight 900, horní klon jen
     700 — vypadal tak méně tučně. Sjednoceno. */
  font-weight: 900 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  /* OPRAVA (4. 8. 2026, na žádost klienta, DESKTOP) — bez tohohle se
     flex položka (výchozí flex-shrink:1) mohla zmenšit pod přirozenou
     šířku obsahu, pokud byl dostupný prostor v řádku těsný — text se
     pak zalomil na 2 řádky a tlačítko bylo znatelně vyšší než to
     druhé (přesně tenhle rozdíl byl vidět na screenshotu). Zákaz
     zalomení + zákaz zmenšení pod přirozenou šířku obsahu zaručí
     stejnou výšku obou tlačítek bez ohledu na dostupnou šířku. */
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  /* OPRAVA (4. 8. 2026, šesté kolo, na žádost klienta) — nalezeno
     přes konzoli: "Zpět do obchodu" vycházel na 31.9px (přesně podle
     padding+line-height+border), ale "Pokračovat" na 35.4px — nejde
     dopočítat odkud těch +6.5px navíc bere (stejná záhada jako dřív
     na mobilu u stejného tlačítka). Řešení stejné jako u spodní
     dvojice — výška napevno, box-sizing:border-box zaručí, že se do
     ní obsah vejde bez ohledu na to, co jinak její výšku ovlivňuje. */
  height: 32px !important;
  transition: background .2s, border-color .2s !important;
}
/* OPRAVA (3. 8. 2026, desáté kolo, finální zadání klienta podle
   mockupu se dvěma popiskami):
   — "Pokračovat": zůstává zelené pozadí jako nativní, ale ČERNÝ text
     (dřív bílý) + šipka ">" napravo.
   — "Zpět do obchodu": zůstává jako hypertext (odkaz), ale vizuálně
     jen OBRYS tlačítka (žádné vyplněné pozadí) + černý PODTRŽENÝ
     text uvnitř — žádná ikona/šipka u něj klient nechtěl.
   Nativní šipka Shoptetu u "Pokračovat" (SVG/ikona, ne naše třída)
   schovaná a nahrazená naší vlastní ">" (přes :after), ať máme jistou
   kontrolu nad vzhledem/barvou. */
.om-cart-top-actions a.next-step-forward svg,
.om-cart-top-actions a.next-step-forward [class*="icon"] {
  display: none !important;
}
/* OPRAVA (3. 8. 2026, třinácté kolo, na žádost klienta) — typografický
   znak "›" vypadal jinak než "silná" dvoulinková šipka používaná jinde
   na webu (viz stejná technika u .product-slider-navigation:before,
   .om-recipe-nav svg apod.) — nahrazeno stejnou border-chevron
   technikou pro vizuální konzistenci s referenčním obrázkem klienta. */
.om-cart-top-actions a.next-step-forward:after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  border-radius: 1.5px;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 2px;
}
/* "Zpět do obchodu" — jen obrys (border), bez vyplněného pozadí,
   černý podtržený text. */
.om-cart-top-actions a.next-step-back {
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
  text-decoration: underline !important;
  margin: 0 !important;
}
.om-cart-top-actions a.next-step-back:hover {
  background: rgba(0, 0, 0, .05) !important;
}
/* "Pokračovat" — zelené pozadí (beze změny), teď černý text místo bílého. */
.om-cart-top-actions a.next-step-forward {
  background: #79b530 !important;
  color: #1a1a1a !important;
  border: none !important;
}
.om-cart-top-actions a.next-step-forward:hover {
  background: #6aa028 !important;
}
/* MOBIL (3. 8. 2026, na žádost klienta, podle vzoru — Pokračovat
   nahoře, Zpět do obchodu pod ním, obě přes celou šířku) — dřív tu
   byly malé vycentrované pilulky vedle sebe, teď stejný "pod sebou"
   vzhled jako u spodní hlavní dvojice tlačítek v košíku. Pořadí
   v DOM je JS klonem vždy "Zpět do obchodu" → "Pokračovat" (viz JS
   duplicateCartTopButtons), takže obrácené pořadí řešíme přes
   `order`, ne přepisováním DOM. */
@media (max-width: 768px) {
  .om-cart-top-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 20px 0 16px !important;
    /* OPRAVA (4. 8. 2026, páté kolo, na žádost klienta) — nalezeno
       přes konzoli: horní klon byl o 40px širší (390px) než spodní
       hlavní dvojice (350px) — rozdíl přesně odpovídá dvojnásobku
       standardního bočního odsazení stránky (2× 20px). Horní klon je
       vložený JS přímo do #cart-wrapper (viz duplicateCartTopButtons)
       a zjevně obchází běžný padding obsahu, který mají spodní
       tlačítka automaticky od svého rodiče. Doplněno ručně. */
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  .om-cart-top-actions a.next-step-back,
  .om-cart-top-actions a.next-step-forward {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 24px !important;
    font-size: 13px !important;
    /* OPRAVA (4. 8. 2026, čtvrté kolo, na žádost klienta) — přes
       shodný padding/font-size/line-height zůstal rozdíl ve výšce
       (47.4px vs. 58px u spodní dvojice, ověřeno konzolí), zdroj
       rozdílu se nepodařilo dohledat analyticky (nejspíš nativní
       min-height nebo metrika fontu mimo naši kontrolu). Řešení:
       výšku vynucujeme napevno na stejnou hodnotu (58px), ať to sedí
       bez ohledu na to, co ji jinak ovlivňuje. */
    height: 58px !important;
  }
  .om-cart-top-actions a.next-step-forward {
    order: 1 !important;
  }
  .om-cart-top-actions a.next-step-back {
    order: 2 !important;
  }
}

/* ──────────────────────────────────────────────
   SLOUPEC "SLEVA" V KOŠÍKU — odkrytí
   (4. 8. 2026, na žádost klienta)
   Shoptet má ve VLASTNÍM nativním CSS pravidlo, které sloupec
   s procentem slevy natvrdo schovává:
     .cart-table .inline.delete-cart-item,
     .cart-table .p-discount,
     .cart-table .product-table-name-footer { display: none; }
   Data (procento slevy, tooltip s rozpisem) v HTML JSOU (ověřeno
   přes DevTools — <td class="p-discount p-cell"><span class="p-label">
   Sleva</span><span class="show-tooltip acronym">9 %</span></td>),
   jen jsou vizuálně schované. Stačí přebít `display` zpátky na
   `table-cell` (přirozená hodnota pro <td>), ať se sloupec (hlavička
   i hodnoty u jednotlivých produktů) zase zobrazí. Platí to samo o
   sobě pro VŠECHNY produkty v košíku, ne jen pro jeden konkrétní —
   Shoptet vyplňuje hodnotu (i "0 %", pokud sleva neplatí) automaticky
   sám, žádná další logika na naší straně není potřeba.
────────────────────────────────────────────── */
.cart-table .p-discount {
  display: table-cell !important;
}
/* OPRAVA (4. 8. 2026, čtvrté kolo, na žádost klienta — "předešlá verze
   byla lepší") — vráceno na variantu display:flex + width:100%. Na
   mobilu (pod 767px) Shoptet mění celý řádek `<tr>` na flexbox
   (kartové rozložení) — `display: table-cell` tomu odporuje, proto
   flex. Rozložení uvnitř karty (pozice vůči obrázku) není ještě
   dokonalé — klient to bude ladit dál, případně přes Computed panel
   v DevTools zjistíme `order`/`flex` hodnoty sousedních buněk. */
@media (max-width: 767px) {
  .cart-table .p-discount {
    display: flex !important;
    width: 100% !important;
  }
}