/* ================================================================
   Kavárna na cestě – sjednocený stylesheet (desktop & mobile)
   (produkty, košík, mega menu, promo lišta, desktop + mobil header)
   ================================================================ */

/* -------------------- ZÁKLAD -------------------- */
:root{
  --green: #43B047;
  --green-d: #388E3C;
  --text: #111;
  --muted: #555;
  --line: #e0e0e0;
  --bg: #f5f5f5;
  --bg-cream: #f9f8f5;

  /* pro mega menu (sjednoceno na brand zelenou) */
  --coffee-brown: var(--green-d);
  --coffee-light: #eaf7ea;

  /* focus ring */
  --focus-ring: 0 0 0 3px rgba(67,176,71,.22);

  /* výšky headeru (JS přepíná --headerH-current) */
  --headerH: 64px;
  --headerHcompact: 48px;
  --headerH-current: var(--headerH);

  /* výška promo lišty – JS ji přepíše; desktop fallback kvůli FOUC */
  --promo-h: 28px;
}

/* kompaktní režim (při scrollu) */
body.header-compact{ --headerH-current: var(--headerHcompact); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* univerzální skrytí aria-hidden/hidden (FOUC prevence) */
[hidden]{ display:none !important; }
.mega[aria-hidden="true"]{ display:none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.section   { padding: 2rem; display: block; }
.section.hidden { display: none; }

/* 📱 Na mobilu odebereme left/right padding z <main class="section"> –
   horizontální mezery zajišťuje .container (padding: 0 1rem).
   Zabrání tomu, aby byl zelený seo-infobox banner zbytečně úzký. */
@media (max-width: 768px) {
  main.section {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.4rem;
  }
}

header:not(.seo-infobox) { padding: 2rem 0 0; text-align: center; }
header.seo-infobox { text-align: left; }
.intro  { max-width: 600px; margin: 0 auto 2rem; font-size: 1.2rem; }

/* -------------------- IKONY NAVIGACE (DOMOVSKÁ) -------------------- */
.nav-icons{
  display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.nav-icon{
  text-align: center; cursor: pointer; transition: transform .3s ease, background-color .3s ease;
  padding: 1rem; border-radius: 1.05rem;
}
.nav-icon span{ display: block; margin-top: .5rem; }
.nav-icon img{ transition: transform .3s ease; }
.nav-icon:hover{ background-color: rgba(255,200,200,.3); transform: scale(1.05); }
.nav-icon:hover img{ transform: scale(1.1); }

/* -------------------- SEKCÍ BARVY -------------------- */
#automat        { background-color: rgba(190,235,200,.15); }
#paka           { background-color: rgba(200,220,255,.15); }
#filtr          { background-color: rgba(255,245,200,.15); }
#prislusenstvi  { background-color: rgba(245,210,255,.15); }

/* -------------------- PRODUKTY -------------------- */
.products{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(229px,1fr));
  gap: 2rem;
}
.product{
  border: 1px solid #eee; background: #fff;
  padding: 1rem; border-radius: 8px; text-align: center; cursor: pointer;
  transition: box-shadow .15s ease, transform .05s ease;
}
.product:hover{ box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.product img{ max-width: 100%; height: auto; border-radius: 4px; }
.product-name{ font-weight: 600; margin: .5rem 0; }
.product-description{
  font-size: .9rem; color: #555; margin-top: .5em; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-price{ color: #111; font-weight: 700; margin: .75rem 0 .25rem; font-size: 1.05rem; }

.product-stock{ font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
.in-stock{ color: var(--green); font-weight: 600; }
.out-of-stock{ color: #d32f2f; font-weight: 700; }
.out-of-stock-visual{ opacity: .6; }

.add-to-cart{
  background: linear-gradient(145deg, var(--green), var(--green-d));
  color: #fff; border: 0; padding: .5rem 1.2rem; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: background .3s ease, transform .1s ease, filter .1s ease;
}
.add-to-cart:hover{ background: linear-gradient(145deg, var(--green-d), #2e7031); transform: scale(1.03); }
.add-to-cart:disabled{ background: #e0e0e0; color: #777; cursor: not-allowed; opacity: .7; border: 1px solid #ccc; }

/* Obrázky na kartách – ořez + overlay */


.product .product-image-wrapper{
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  background: #fff;
  border-radius: 6px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product .product-image-wrapper img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  transform: none !important;
  transition: transform .25s ease;
  padding: 8px !important;
}
.product:hover .product-image-wrapper img{ transform: scale(1.05); }
.product .product-overlay{
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.08));
  color: #fff; font-weight: 700; letter-spacing: .02em; font-size: .95rem;
  opacity: 0; transition: opacity .2s ease;
}
.product:hover .product-overlay{ opacity: 1; }

/* -------------------- KOŠÍK (STRÁNKA) -------------------- */
.cart-section{
  padding: 2rem 2rem 10rem;
  text-align: left; max-width: 600px; margin: 0 auto;
}
.cart-section h2{
  text-align: left; margin-bottom: 1.5rem; font-size: 2rem; color: #333;
  border-bottom: 2px solid #eee; padding-bottom: .5rem;
}
.cart-items{
  list-style: none; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.cart-item-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0; transition: background-color .2s ease;
}
.cart-item-row:not(.cart-summary-row):last-of-type{ border-bottom: none; }
.cart-item-row:hover{ background: #f9f9f9; }
.cart-item-name{ flex-basis: 50%; font-weight: 500; color: #333; font-size: 1.05rem; }
.cart-item-price{ flex-basis: 20%; text-align: right; font-weight: 600; color: #3aa15b; font-size: 1.05rem; }
.cart-item-controls{ display: flex; align-items: center; gap: .75rem; flex-basis: 30%; justify-content: flex-end; }

.cart-item-row button{
  background: none; border: none; color: #000; font-size: 1.2rem; font-weight: 700; margin: 0 .3rem; cursor: pointer;
  padding: .2rem .4rem; transition: transform .1s ease;
}
.cart-item-row button:hover{ transform: scale(1.2); }
.cart-item-row .qty-minus, .cart-item-row .qty-plus{
  width: 36px; height: 36px; border-radius: 6px; background: #e8e8e8;
  font-size: 1.2rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  margin: 0 .2rem; padding: 0; color: #555; cursor: pointer;
  transition: background-color .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.cart-item-row .qty-minus:hover, .cart-item-row .qty-plus:hover{ background: #dcdcdc; transform: translateY(-1px); }
.cart-item-row .quantity{ font-size: 1.1rem; font-weight: 600; color: #444; min-width: 25px; text-align: center; }
.cart-item-row .remove-button{
  font-size: 1.5rem; color: #e74c3c; margin-left: 1rem; padding: .2rem; cursor: pointer;
  transition: color .2s ease, transform .1s ease;
}
.cart-item-row .remove-button:hover{ color: #c0392b; transform: scale(1.1); }

.cart-summary-row{
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 1.5rem 1.5rem 1rem; border-top: 2px dashed #eee; background: #fcfcfc;
  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.cart-summary-row .cart-summary{
  font-size: 1.5rem; font-weight: 700; color: #222; margin-bottom: .5rem; width: auto; text-align: right;
}
#free-shipping{
  font-size: 1.1rem; font-weight: 600; color: #27ae60; margin: 0;
  display: flex; align-items: center; gap: .5rem; width: auto; text-align: right; justify-content: flex-end;
}
#free-shipping::before{ content: none; }
#free-shipping.is-free::before{ content: '🎉'; font-size: 1.3rem; margin-right: .25rem; }

.checkout-button{
  margin: 1.5rem auto 0;
  background: linear-gradient(145deg, var(--green), var(--green-d));
  color: #fff; padding: 1rem 2rem; border: none; border-radius: 8px; font-size: 1.2rem;
  cursor: pointer; transition: background .3s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
  width: 100%; max-width: 400px; display: block;
}
.checkout-button:hover{ background: linear-gradient(145deg, var(--green-d), #2e7031); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }

/* Sticky banner košíku */
#cart-banner{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #d5f7d5; color: #111; display: none;
  justify-content: space-between; align-items: center;
  padding: 1rem 2rem; font-weight: 600; z-index: 3000; flex-wrap: wrap; gap: .8rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,.05); transition: transform .3s ease;
}
#cart-banner.visible{ display: flex; }
#cart-banner button{
  background: linear-gradient(145deg, var(--green), var(--green-d)); color: #fff; border: none; padding: .6rem 1.4rem;
  border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background .3s ease, transform .1s ease; box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
#cart-banner button:hover{ background: linear-gradient(145deg, var(--green-d), #2e7031); transform: scale(1.03); }
#cart-banner span{ color: #111; font-weight: 500; font-size: .95rem; }

/* -------------------- DETAIL PRODUKTU -------------------- */
.product-image img{ max-width: 100%; max-height: 400px; object-fit: contain; display: block; margin: 0 auto; }
@media (max-width: 768px){ .product-image img{ max-height: 250px; } }

.product-detail-container{
  display: flex; flex-direction: column; gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem;
}
.product-main-details{ display: flex; flex-direction: column; gap: 2rem; width: 100%; }
@media (min-width: 768px){ .product-main-details{ flex-direction: row; align-items: flex-start; gap: 3rem; } }

.product-detail-image{ flex: 1; text-align: center; }
.product-detail-image > #detail-img {
  display: block; width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
  background: #f8f8f8;
}
.product-detail-image img{
  max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.product-detail-info{ flex: 1; display: flex; flex-direction: column; gap: .8rem; }
.product-detail-title{ font-size: 2rem; font-weight: 600; margin: 0; }
.product-detail-flavor, .product-detail-extra{ font-size: 1rem; line-height: 1.4; white-space: pre-wrap; margin: 0; }
.product-detail-info p{ margin: 0; padding: 0; }
.product-detail-price{ font-size: 1.6rem; font-weight: 700; margin: .5rem 0; color: #111; }
.product-detail-vat{ font-size: .8rem; color: #666; }

.product-detail-size .section-label{ margin-bottom: .15rem; font-weight: 500; }
.product-detail-quantity{ display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.product-detail-quantity button{
  padding: .5rem 1rem; font-size: 1.2rem; border: none; background: #f0f0f0; cursor: pointer; border-radius: 6px;
}
.product-detail-quantity input{
  width: 60px; padding: .4rem; text-align: center; font-size: 1rem; border: 1px solid #ccc; border-radius: 6px;
}

/* CTA v detailu */
.product-detail-button{
  background: #4CAF50; color: #fff; padding: .8rem 1.5rem; font-size: 1rem; border: 0;
  border-radius: 6px; cursor: pointer; transition: background-color .3s ease; margin-top: .5rem;
}
.product-detail-button:hover{ background: #45a049; }

/* Tagy + extra info */
.tag{ display: inline-block; background: #f1f1f1; color: #333; padding: 4px 10px; margin: 3px 5px 3px 0; border-radius: 20px; font-size: .9em; }
.tag--link{ text-decoration: none; cursor: pointer; transition: background .15s; }
.tag--link:hover{ filter: brightness(.93); }

/* Příprava – podle metody */
.tag--prep-filtr{ background: #e0f0ff; }
.tag--prep-v60{ background: #e8faf0; }
.tag--prep-aeropress{ background: #fff3e0; }
.tag--prep-frenchpress{ background: #f5ede0; }
.tag--prep-automat{ background: #e8eeff; }
.tag--prep-paka{ background: #ffe8e8; }
.tag--prep-moka{ background: #fdf0e0; }
.tag--prep-kapsle{ background: #f0e8ff; }

/* Zpracování */
.tag--proc-naturalni{ background: #FFF0DC; }
.tag--proc-promyte{ background: #DCF0FF; }
.tag--proc-honey{ background: #FFF5C0; }
.tag--proc-anaerobni{ background: #F0DCFF; }
.tag--proc-karbonickamacerace{ background: #FFE0E8; }
.tag-container{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 0; padding-bottom: 0; }
.product-detail-row{ margin: .2rem 0 0 0; }
.product-detail-row.hidden{ margin-bottom: 0; }
.section-label{ margin-bottom: .5rem; font-weight: 500; }

#product-detail{
  background: #fff; margin: 20px 0; border-radius: 8px; padding: 20px;
}

/* Extra dvojice (info + obrázek) */
.product-extra-details{ display: flex; flex-direction: column; gap: 2rem; width: 100%; }
@media (min-width: 768px){
  .product-extra-details{ flex-direction: row; align-items: flex-start; }
  .product-extra-text-box, .product-spec-list, .product-extra-image-box{ flex: 1; }
}
/* Spec tabulka produktu (dl grid) */
.product-spec-list{
  display: grid !important;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  align-items: baseline;
  margin: 0; padding: 1.2rem;
  background: #f9f9f9; border-radius: 8px; border: 1px solid #e8e8e8;
  font-size: .95rem; line-height: 1.5;
}
.product-spec-list dt{
  font-weight: 600; color: #555; white-space: nowrap; margin: 0;
  display: block;
}
.product-spec-list dd{
  margin: 0; color: #111;
  display: block;
}
.product-extra-image-box{
  text-align: center; background: #fff; border-radius: 8px; border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,.05); padding: 1rem; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-extra-image-box img{ max-width: 100%; height: auto; display: block; border-radius: 6px; }

/* ── Nové prvky detailu produktu v2 ─────────────────────── */

/* 1) Pražírna badge pod názvem */
.detail-roaster-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 12px; padding: 5px 12px 5px 8px;
  background: #f5f0e8; border: 1px solid #e0d5c0; border-radius: 20px;
  font-size: .9rem; font-weight: 600; color: #5a3e1b;
  text-decoration: none; transition: background .15s;
}
.detail-roaster-link:hover { background: #ede5d0; }
.detail-roaster-link img {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: contain; background: #fff; border: 1px solid #ddd;
}

/* 2) Chuťový profil – ikony + labely v detailu */
.detail-flavour-icons {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px;
}
.detail-flavour-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 60px;
}
.detail-flavour-item img { width: 52px; height: 52px; object-fit: contain; }
.detail-flavour-item span { font-size: .75rem; color: #555; text-align: center; line-height: 1.2; }

/* 3) Trust blok */
.detail-trust-block {
  display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 14px; padding: 12px 14px;
  background: #f6faf6; border: 1px solid #c8e6c9; border-radius: 10px; font-size: .9rem;
}
.detail-trust-row { display: flex; align-items: center; gap: 8px; color: #2e6b30; font-weight: 500; }
.detail-trust-row--out { color: #b71c1c; }
.detail-trust-row.muted { color: #555; font-weight: 400; }
.detail-trust-icon { font-size: 1rem; flex-shrink: 0; }

/* Galerie miniatur pod hlavní fotkou */
.detail-gallery {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.detail-gallery__thumb {
  width: 60px; height: 60px; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, opacity .15s;
  background: #f5f5f5;
}
.detail-gallery__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.detail-gallery__thumb:hover { opacity: .85; }
.detail-gallery__thumb.is-active { border-color: var(--green); }

/* Dvě verze trust bloku: pod obrázkem (desktop) a pod tlačítkem (mobil) */
.detail-trust-block--img { display: none !important; margin: 12px 0 0; }
.detail-trust-block--btn { display: flex !important; order: 10; }
@media (min-width: 768px) {
  .detail-trust-block--img { display: flex !important; }
  .detail-trust-block--btn { display: none !important; }
}

/* 4) Množství + tlačítko na jednom řádku */
.detail-buy-row { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.detail-buy-row .product-detail-quantity { margin: 0; flex-shrink: 0; }
.detail-buy-row .product-detail-button { flex: 1; margin: 0; }

/* 5) Cupping badge u ceny */
.detail-cupping-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; margin: 0 0 10px;
  background: #fff8e1; border: 1px solid #ffe082; border-radius: 12px;
  font-size: .85rem; font-weight: 700; color: #8b6000;
}

/* 6) Komentář baristy */
.detail-barista-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0; padding: 12px 14px;
  background: #fdfaf5; border-left: 3px solid #c8a96e; border-radius: 0 8px 8px 0;
  font-size: .9rem; line-height: 1.5; color: #444;
}
.detail-barista-note__avatar { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.detail-barista-note__text { font-style: italic; }
.detail-barista-note__author {
  display: block; margin-top: 4px; font-style: normal; font-size: .8rem; font-weight: 600; color: #888;
}

/* Skrýt starý stock element (nahrazen trust blokem) */
.product-stock[data-stock-display] { display: none !important; }

/* Volby velikosti */
.size-options-container{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.size-option-button{
  background: #fff; border: 1px solid #ccc; color: #333; padding: .6rem 1rem; font-size: .95rem; font-weight: 500;
  cursor: pointer; border-radius: 4px; transition: background-color .2s, border-color .2s, color .2s, transform .1s; min-width: 70px; text-align: center;
}
.size-option-button:hover{ border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.size-option-button.active{
  background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
.size-option-button.active:hover{ background: var(--green-d); border-color: var(--green-d); }
.size-option-button[disabled]{ opacity: .5; cursor: not-allowed; background: #f5f5f5; border-color: #eee; color: #888; }
.size-option-button[disabled].active{ background: #aaa; border-color: #999; }

/* Skrytí šipek u number input */
.product-detail-quantity input[type="number"]::-webkit-outer-spin-button,
.product-detail-quantity input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.product-detail-quantity input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }

/* ─────────────── FOOD INFO TABS ──────────────────────────────── */
.food-info-section {
  margin: 28px 0 8px;
}

/* Pill segmented control */
.food-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.food-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .45rem 1.1rem;
  border: 1.5px solid #dde8dd;
  border-radius: 999px;
  background: #f4fbf4;
  font-size: .88rem;
  font-weight: 600;
  color: #2e6b30;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
}
.food-tab-btn:hover {
  background: #e8f5e9;
  border-color: var(--green, #43B047);
}
.food-tab-btn.is-active {
  background: var(--green, #43B047);
  border-color: var(--green, #43B047);
  color: #fff;
  box-shadow: 0 2px 8px rgba(67,176,71,.25);
}

/* Obsah tabu — karta */
.food-tabs-content {
  background: #fff;
  border: 1px solid #e4efea;
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.food-tab-panel { display: none; }
.food-tab-panel.is-active { display: block; }

/* Nadpisy sekcí uvnitř panelu */
.food-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green, #43B047);
  margin: 0 0 8px 0;
}
.food-section-title:not(:first-child) { margin-top: 22px; }

.ingredients-text {
  font-size: .92rem;
  line-height: 1.7;
  color: #333;
  margin: 0;
}
.allergens-list {
  font-size: .92rem;
  line-height: 1.65;
  color: #333;
  margin: 0;
  padding: 10px 14px;
  background: #fff8e1;
  border-left: 3px solid #f9a825;
  border-radius: 0 8px 8px 0;
}

/* Výživová tabulka */
.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.nutrition-table caption {
  caption-side: top;
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--green, #43B047);
  padding-bottom: 10px;
}
.nutrition-table td {
  padding: 9px 6px;
  border-bottom: 1px solid #f0f5f0;
  color: #444;
  vertical-align: middle;
}
.nutrition-table tr:first-child td { font-weight: 700; color: #111; }
.nutrition-table tr:last-child td  { border-bottom: none; }
.nutrition-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}
.nutrition-table tr:nth-child(even) td { background: #f9fcf9; }

/* Výrobce — info list */
.food-info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  font-size: .92rem;
  margin: 0;
}
.food-info-list dt {
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.food-info-list dd {
  margin: 0;
  color: #111;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .food-tab-btn      { font-size: .82rem; padding: .4rem .9rem; }
  .food-tabs-content { padding: 16px 18px; }
  .food-info-list    { grid-template-columns: 1fr; gap: 2px 0; }
  .food-info-list dt { margin-top: 12px; color: var(--green, #43B047); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
  .food-info-list dt:first-child { margin-top: 0; }
}

/* -------------------- SOUVISEJÍCÍ PRODUKTY -------------------- */
.related-products-section{ margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #ddd; }
.related-products-section h3{ font-size: 1.4rem; margin-bottom: 1rem; color: #111; }
.related-products{
  display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.related-products::-webkit-scrollbar{ height: 8px; }
.related-products::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 4px; }
.related-products::-webkit-scrollbar-track{ background: transparent; }
.related-products .product{
  flex: 0 0 auto; width: 200px; scroll-snap-align: start; border: 1px solid #eee; border-radius: 6px;
  background: #fff; padding: 1rem; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s;
}
.related-products .product:hover{ transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.related-products-wrapper{ position: relative; }
.scroll-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.95); border: 1px solid #ddd; border-radius: 50%;
  width: 45px; height: 45px; font-size: 24px; line-height: 43px; text-align: center; color: var(--green);
  cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: all .2s; opacity: .9;
}
.scroll-btn:hover{ background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,.2); opacity: 1; }
.scroll-btn.left{ left: -25px; }
.scroll-btn.right{ right: -25px; }
@media (max-width: 768px){
  .scroll-btn{ width: 30px; height: 30px; font-size: 18px; line-height: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.08); opacity: .8; }
  .scroll-btn.left{ left: -15px; }
  .scroll-btn.right{ right: -15px; }
  .scroll-btn:hover{ transform: translateY(-50%) scale(1.05); }
}

/* Odkaz v košíku */
.cart-item-link{ color: inherit; text-decoration: none; transition: text-decoration .3s ease; }
.cart-item-link:hover{ text-decoration: underline; }

/* -------------------- COOKIE BANNER -------------------- */
#cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid #ddd;
  padding: 14px 16px; text-align: center; font: 14px/1.5 'Inter', sans-serif; color: #111;
  z-index: 5000; box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
#cookie-banner[hidden]{ display: none !important; }
#cookie-banner a{ color: var(--green); text-decoration: underline; }
#cookie-banner button{
  padding: .6rem 1.2rem; margin-left: 10px; border-radius: 6px; font-weight: 600;
  cursor: pointer; transition: transform .1s ease, background .2s ease, box-shadow .2s ease;
  border: 0;
}
#cookie-decline{ background: #eee; border: 1px solid #ccc; color: #333; }
#cookie-accept{
  background: linear-gradient(145deg, var(--green), var(--green-d)); color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
#cookie-accept:hover{ background: linear-gradient(145deg, var(--green-d), #2e7031); transform: translateY(-1px); }

/* Pokud je cookie banner otevřený, posuň košíkový banner výš */
body.cookie-open #cart-banner{ bottom: 72px !important; }

/* -------------------- PROMO TOPBAR -------------------- */
/* ponech jen POSLEDNÍ (spodní) instanci, kdyby byly dvě */
.promo-topbar:not(:last-of-type){ display:none !important; }

.promo-topbar{
  display: block;
  background: #CCEACA; color: #396839; text-decoration: none;
  font: 500 14px/1.4 'Inter', system-ui, -apple-system, sans-serif;

  /* drž se nad headerem; JS nastaví --promo-h */
  position: sticky; top: 0; z-index: 1100;

  /* autohide pohyb (při .is-collapsed) */
  will-change: transform, opacity;
  transition: transform .28s ease, opacity .28s ease;
}
/* autohide třída – přidává/odebírá JS */
.promo-topbar.is-collapsed{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.promo-topbar:focus-visible{ outline: 2px solid #1b5e20; outline-offset: 2px; }
.promo-topbar + .top-nav{ border-top: 1px solid rgba(0,0,0,.04); }

.promo-topbar-row{
  max-width: 1100px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 20px;
}
.promo-desktop{ justify-content: space-between; }
.promo-mobile{ display: flex; justify-content: center; }

.promo-item, .promo-slide{
  color: #396839; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.promo-icon{
  width: 18px; height: 18px; display: inline-block; object-fit: contain; vertical-align: middle;
  filter: invert(23%) sepia(14%) saturate(1191%) hue-rotate(76deg) brightness(93%) contrast(85%);
}

/* Rotátor – mobil (fade + slide – jemný přechod) */
.promo-rotator{
  position: relative; height: 20px; min-height: 22px; width: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.promo-slide{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .36s ease, transform .36s ease;
}
.promo-slide.is-active{ opacity: 1; transform: translateY(0); }

/* Desktop / mobil přepínání řádků */
.promo-desktop{ display: none; }
.promo-mobile{ display: flex; }
@media (min-width: 900px){
  .promo-desktop{ display: flex; }
  .promo-mobile{ display: none; }
}

/* Fallback bez JS – plynulé cyklování */
@keyframes promoCycle{
  0%{opacity:1; transform: translateY(0);}
  27%{opacity:1; transform: translateY(0);}
  33%{opacity:0; transform: translateY(-6px);}
  94%{opacity:0; transform: translateY(6px);}
  100%{opacity:1; transform: translateY(0);}
}
.promo-mobile .promo-rotator.css-fallback .promo-slide{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px);
}
.promo-mobile .promo-rotator.css-fallback .promo-slide:first-child{ opacity: 1; transform: translateY(0); }
.promo-mobile .promo-rotator.css-fallback .promo-slide:nth-child(1){ animation: promoCycle 9s infinite; }
.promo-mobile .promo-rotator.css-fallback .promo-slide:nth-child(2){ animation: promoCycle 9s infinite 3s; }
.promo-mobile .promo-rotator.css-fallback .promo-slide:nth-child(3){ animation: promoCycle 9s infinite 6s; }
@media (prefers-reduced-motion: reduce){
  .promo-mobile .promo-rotator.css-fallback .promo-slide{ animation: none !important; }
  .promo-slide{ transition: none !important; }
}

/* -------------------- DESKTOP HEADER -------------------- */
.r-header{
  position: sticky; top: var(--promo-h, 28px); z-index: 1200;
  background: #fff;
  padding: 16px 24px;
  border-bottom: none; box-shadow: none;
  display: flex; align-items: center; gap: 24px; width: 100%;
  transition: all .25s ease;
}
.r-header-inner{
  width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding-inline: 16px;
  transition: all .25s ease;
}

/* posun subnav k logu (inline varianta) */
.subnav-inline{
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; flex: 0 1 auto;
}
.subnav-inline .r-subnav__link{ padding: 8px 10px; border-radius: 6px; }
.subnav-inline .r-subnav__link[aria-expanded="true"]{ background: var(--coffee-light); color: var(--coffee-brown); }

/* Logo */
.r-header-logo img{ display: block; height: 40px; width: auto; }

/* Vyhledávání + buttony */
.r-header-search{
  flex: 1 1 600px; min-width: 220px; display: flex; align-items: stretch; position: relative;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: box-shadow .2s;
}
.r-header-search:focus-within{
  box-shadow: 0 2px 16px rgba(67,176,71,.18);
}
.r-header-search input[type="search"]{
  width: 100%; height: 44px;
  border: 2px solid var(--green); border-right: none;
  border-radius: 999px 0 0 999px; padding: 0 20px; font-size: 15px; background: #fff;
  transition: border-color .2s;
}
.r-header-search input[type="search"]:focus{
  outline: 0; border-color: var(--green-d);
}
.btn-primary{
  background: linear-gradient(145deg, var(--green), var(--green-d));
  color: #fff; border: none; padding: .8rem 1.1rem; border-radius: 10px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: background .3s ease, transform .1s ease, box-shadow .2s ease;
}
.btn-primary:hover{ background: linear-gradient(145deg, var(--green-d), #2e7031); transform: translateY(-1px); }
.btn-primary.btn-search{
  height: 44px; border-radius: 0 999px 999px 0; border: 2px solid transparent; border-left: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; line-height: 1;
}
.r-header-search .search-icon{ width: 20px; height: 20px; filter: brightness(0) invert(1); }

.btn-primary-ghost{
  background: linear-gradient(145deg, var(--green), var(--green-d));
  border: none; color: #fff; padding: .8rem 1.2rem; border-radius: 8px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.1); transition: background .3s, transform .1s;
}
.btn-primary-ghost:hover{ background: linear-gradient(145deg, var(--green-d), #2e7031); transform: scale(1.03); }
.btn-quiet{ background: #f5f5f5; border: 1px solid #e6e6e6; color: #111; padding: .8rem 1rem; border-radius: 10px; cursor: pointer; }
.btn-quiet:hover{ background: #eee; }

/* Pravá navigace + CTA */
.r-header-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.r-nav-link{
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #333;
  font-weight: 600; font-size: 15px; white-space: nowrap; padding: 8px; border-radius: 6px; transition: background-color .2s;
}
.r-nav-link:hover{ background: #f0f0f0; }
.r-nav-link .r-icon{ width: 24px; height: 24px; }
.r-header .r-nav-link.login{
  background-color: #eaf7ea; border: 1px solid #cde7cd; border-radius: 6px; padding: 6px 12px; transition: background-color .2s ease;
}
.r-header .r-nav-link.login:hover{ background-color: #d6f0d6; }

/* Košík v liště */
.r-cart {
  display: inline-flex; align-items: center; gap: .5rem; padding: 6px 12px;
  height: 40px; border: 2px solid var(--green); color: var(--green); background: transparent;
  border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease; line-height: 1;
}
.r-cart:hover { background: #e9f9e9; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.r-cart.bump{ animation: cart-bump .30s ease; }
@keyframes cart-bump{ 0%{transform:scale(1)} 30%{transform:scale(1.2)} 60%{transform:scale(.95)} 100%{transform:scale(1)} }
.r-cart-badge { font-weight: 700; }

/* Ikony v menu */
.order-cafe-logo { height: 24px; width: auto; display: inline-block; vertical-align: middle; margin-left: 6px; }
.r-header .r-nav-link .nav-img-icon { height: 18px; width: auto; display: inline-block; vertical-align: middle; margin-left: 6px; flex-shrink: 0; }

/* větší obrazovky */
@media (min-width: 1200px) {
  .r-header .r-header-inner { padding-inline: 32px; gap: 16px; }
  .r-header .r-header-search { max-width: 980px; }
}

/* -------------------- SUBNAV + MEGA MENU -------------------- */
.r-subnav{
  position: sticky; top: var(--headerH-current); z-index: 1100;
  background:#fff; border-bottom: 1px solid var(--line); margin-top: 0; padding: 10px 0;
  font: 600 15px/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #333; transition: all .25s ease;
}
@media (max-width: 1024px){ .r-subnav{ top: var(--headerH-current); } }

.r-subnav__inner{
  position: relative;
  max-width: none; display:flex; align-items:center;
  gap: 24px; padding: 8px 16px; margin-left: 48px;
}

/* subnav „u loga“ – menší mezery */
.r-header .r-subnav__inner, .subnav-inline .r-subnav__inner {
  margin-left: 8px; padding-left: 0; gap: 16px;
}
.subnav-inline { margin-left: 4px; }

.r-subnav__link{
  font: inherit; color:#333; background:transparent; border:0; padding:10px 12px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border-radius:6px; white-space:nowrap;
  transition: background .2s ease, color .2s ease, transform .1s ease;
}
.r-subnav__link:hover{ background: #f0f0f0; color: #333; transform:none; }
.r-subnav__link[aria-expanded="true"]{
  background: var(--coffee-light); color: var(--coffee-brown);
  border-radius: 6px 6px 0 0; position: relative; z-index: 1155;
}
.r-subnav__link .icon-right{ width:18px; height:18px; object-fit:contain; }

.r-subnav .mega{
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 1150;
  background:#fff; border: 1px solid var(--line); border-top: 3px solid var(--coffee-brown);
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
  padding: 16px 18px; border-radius: 0 0 10px 10px;

  display: block;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;

  max-height: min(70vh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.r-subnav .mega.is-open, .r-subnav .mega[aria-hidden="false"]{
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* GRID tiles */
.mega--grid .mega__tiles{
  list-style:none; margin:0; padding:4px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
}
.mega--grid .mega__tiles > li{ list-style:none; flex: 0 0 120px; }

.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:8px; padding:10px 8px;
  width: 100%; aspect-ratio: 1 / 1;
  border:1px solid #e7e7e7; border-radius:12px; background:#fff;
  text-decoration:none; color:#111; font-weight:600;
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease, color .2s ease;
}
.tile-icon{ width: 64px; height: 64px; object-fit:contain; display:block; transition: transform .25s ease, filter .25s ease; }
.tile-title{
  font-size:.88rem; line-height:1.3; font-weight:700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile:hover{ background:#fff; border-color: var(--green); color:#111; transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.tile:hover .tile-icon{ transform: scale(1.08); }

/* ── PRAŽÍRNY dlaždice: víc místa na názvy ───────────────────────── */
#menu-prazirny-tiles > li{ flex: 0 0 140px; }
#menu-prazirny-tiles .tile{ aspect-ratio: 3 / 4; padding: 10px 8px 12px; }
#menu-prazirny-tiles .tile-icon{ width: 40px; height: 40px; margin-top: 2px; }
#menu-prazirny-tiles .tile-title{
  font-size: .9rem; line-height: 1.3;
  -webkit-line-clamp: 4; min-height: calc(1.3em * 4); overflow: hidden;
}
@media (max-width: 640px){
  #menu-prazirny-tiles > li{ flex: 0 0 120px; }
  #menu-prazirny-tiles .tile{ aspect-ratio: 1 / 1.25; }
  #menu-prazirny-tiles .tile-title{ -webkit-line-clamp: 3; min-height: calc(1.3em * 3); }
}

/* --- SPLIT mega menu (rezerva pro rozšíření) --- */
.mega--split{ display:grid; grid-template-columns: 300px 1fr; gap:20px; overflow:hidden; }
.mega--split .mega__col--left{ padding-right: 12px; border-right: 1px solid #f0f0f0; }
.mega__leftmenu{ list-style: none; margin: 0; padding: 0; }
.mega__leftmenu li + li{ margin-top: 4px; }
.mega__leftmenu a{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 10px; border-radius:8px; color:#222; text-decoration:none; font-weight:600;
  transition: background .15s ease, color .15s ease;
}
.mega__leftmenu a:hover{ background:#f5f7f5; color:var(--coffee-brown); }
.mega__leftmenu .is-active > a{ background: transparent !important; color: #111; border-left: 0 !important; padding-left: 12px !important; }
.mega__leftmenu li.has-sub > a{ position: relative; padding-right: 28px; }
.mega__leftmenu li.has-sub > a::after{
  content: "›"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-size: 16px; line-height: 1; color: #98a2b3;
  transition: transform .12s ease, color .12s ease;
}
.mega__leftmenu li.has-sub > a:hover::after{ color: #667085; transform: translateY(-50%) translateX(1px); }

.mega__content{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mega__block h4{ margin: 0 0 8px; font: 700 16px/1.2 'Inter', sans-serif; color:#111; }
.mega__title{ margin: 0 0 12px; font: 700 15px/1.3 'Inter', sans-serif; color:#111; }
.mega__title-link{
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .15s;
}
.mega__title-link:hover{ color: var(--coffee-brown); text-decoration: underline; }
.mega__list{ list-style:none; margin:0; padding:0; }
.mega__list li + li{ margin-top: 6px; }

/* Backdrop */
.mega-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.05);
  z-index: 1145; display: none;
}
.mega-backdrop.is-open{ display: block; }

@media (max-width: 1024px){
  .r-subnav .mega{ padding: 14px 16px; }
  .mega--split{ grid-template-columns: 1fr; }
  .mega__content{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .r-subnav .mega{ max-height: min(70vh, 480px); overflow: auto; padding: 14px 16px; }
}

/* === Mega menu – textové styly === */
.r-subnav .mega .mega__list a{
  color: #111; font-weight: 600; line-height: 1.35; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  text-decoration:none; transition: background .15s ease, color .15s ease, transform .15s ease;
}
.r-subnav .mega .mega__list a:hover{ background: var(--coffee-light); color: var(--coffee-brown); transform: translateX(3px); }
.r-subnav .mega .mega__list a small,
.r-subnav .mega .mega__list a .sub{ display:block; margin-top: 2px; font-weight: 500; font-size: .88rem; color: var(--muted); line-height: 1.35; }
.r-subnav .mega .mega__list a:hover small,
.r-subnav .mega .mega__list a:hover .sub{ color: #5f7a5f; }

/* Produktové řádky v pravém sloupci – podtitul i cena */
.mega__productlist{ list-style:none; margin:0; padding:0; }
.mega__productlist li{
  display:flex; justify-content:space-between; align-items:center; gap: 10px; padding:8px; border-radius:4px; transition: background .2s ease;
}
.mega__productlist li + li{ border-top:1px solid #f0f0f0; }
.mega__productlist li:hover{ background: var(--coffee-light); }
.mega__productlist a{ color:#111; text-decoration:none; font-weight:600; }
.mega__productlist a small,
.mega__productlist a .sub{ display:block; margin-top: 2px; font-size: .85rem; font-weight: 500; color: var(--muted); }
.mega__productlist .price{ color: var(--green-d); font-weight: 700; font-size: .95rem; }

/* -------------------- HELP PANEL -------------------- */
.help-trigger{ max-width: 900px; margin: 10px auto 0; padding: 0 20px; text-align: center; }
.help-card{
  position: relative; border: 1px solid #ddd; border-radius: 8px; background: #fff;
  padding: 20px; box-shadow: 0 4px 8px rgba(0,0,0,.1); max-width: 800px; margin: 16px auto;
}
.help-title{ margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 600; color: #111; }
.help-sub{ color: #555; margin: .25rem 0 1rem; }

#help-form{ margin-top: .5rem; }
.help-label{ display: block; font-weight: 600; margin: .6rem 0 .3rem; }
.help-actions{ display: flex; gap: .6rem; justify-content: flex-end; margin: .75rem 0 .25rem; }

/* Horní + spodní help formulář – stejné vstupy */
#help-message,
#help-email,
#help-message-bottom,
#help-email-bottom {
  width: 100%;
  font: inherit;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: .75rem .9rem;
  outline: 0;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: .6rem;
}

/* textarea – horní i spodní */
#help-message,
#help-message-bottom {
  resize: none;
  overflow: hidden;
  min-height: 96px;
  line-height: 1.45;
}

/* focus stav – horní i spodní */
#help-message:focus,
#help-email:focus,
#help-message-bottom:focus,
#help-email-bottom:focus {
  border-color: #46a65a;
  box-shadow: 0 0 0 3px rgba(70,166,90,.12);
}

.help-close{
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 22px; cursor: pointer;
  opacity: .6; color: #333; line-height: 1;
}
.help-close:hover{ opacity: 1; color: #000; }

.help-status{ font-weight: 600; margin: .4rem 0 0; }
.help-status.ok{ color: #2b7a2b; }
.help-status.err{ color: #b20000; }
.hp-field{ display: none; }

@media (max-width: 768px){
  .help-card{ margin: 10px auto; padding: 16px; }
  .help-title{ font-size: 1.4rem; }
}

/* QXPAY logo */
.gateway-logo{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 700; }
.gateway-logo .logo-x,
.gateway-logo span{ color: #F7931A !important; }

/* -------------------- PATIČKA -------------------- */
.site-footer{ background: #fff; color: #222; border-top: 1px solid #e8e8e8; }
.site-footer a{ color: #333; text-decoration: none; }
.site-footer a:hover{ color: #2d6a2d; text-decoration: underline; }

.site-footer .wrap{
  max-width: 1200px; margin: 0 auto; padding: 56px 28px 44px;
  display: grid; gap: 48px; grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.site-footer .brand{ margin-bottom: .5rem; }
.site-footer .brand img{ height: 40px; width: auto; border-radius: 6px; }
.site-footer h4{
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  margin: 1.4rem 0 .7rem; color: #888; font-weight: 700;
}
.site-footer h4:first-child{ margin-top: 0; }
.site-footer ul{ list-style: none; padding: 0; margin: 0; }
.site-footer li{ margin: .45rem 0; font-size: .9rem; line-height: 1.4; }

/* Sociální ikony */
.footer-networks{ display: flex; gap: 12px; margin: 1.25rem 0 0; align-items: center; }
.footer-networks a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #f0f0f0; border: 1px solid #e0e0e0;
  text-decoration: none; transition: background .15s, opacity .15s;
  overflow: hidden; flex-shrink: 0;
}
.footer-networks a img{ width: 22px; height: 22px; object-fit: contain; display: block; }
.footer-networks a:hover{ background: #e0e0e0; opacity: 1; text-decoration: none; }

/* Newsletter */
.footer-newsletter{ margin-top: 1.5rem; }
.footer-newsletter-lead{ font-size: .9rem; margin: 0 0 .75rem; color: #444; line-height: 1.45; }
.footer-newsletter-lead strong{ color: #111; }
.footer-newsletter-form{ display: flex; gap: 8px; }
.footer-newsletter-form input[type="email"]{
  flex: 1; padding: 10px 13px; border: 1px solid #ddd; border-radius: 6px;
  font-size: .875rem; font-family: inherit; outline: none; color: #222;
  transition: border-color .15s;
}
.footer-newsletter-form input[type="email"]:focus{ border-color: #2d6a2d; }
.footer-newsletter-form button{
  padding: 10px 18px; background: #2d6a2d; color: #fff; border: none;
  border-radius: 6px; font-size: .875rem; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.footer-newsletter-form button:hover{ background: #1a5c1a; }
.footer-newsletter-note{ font-size: .75rem; color: #bbb; margin: .5rem 0 0; }

.site-footer .footer-payment{
  margin: 1.4rem 0 0; font-size: .9rem; color: #444;
}
.site-footer .footer-payment .gateway-logo{
  font-size: 1.05rem;
}

.site-footer .bottom{
  border-top: 1px solid #eee; padding: 16px 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; max-width: 1200px; margin: 0 auto;
}
.site-footer .bottom .copyright{ margin: 0; font-size: .85rem; color: #999; }
.site-footer .bottom .developer-credit{ margin: 0; font-size: .75rem; color: #ccc; font-style: italic; }

/* -------------------- MOBIL – KOŠÍK/SEKCE -------------------- */
@media (max-width: 768px){
  .cart-section{ padding-bottom: 12rem; }
  #cart-banner{ flex-direction: column; align-items: center; text-align: center; padding: 1.2rem 1rem; gap: .6rem; font-size: .95rem; }
  #cart-banner button{ width: 100%; max-width: 300px; }

  .cart-summary-row{ flex-direction: column; align-items: flex-start; padding: 1.5rem 1rem 1rem; }
  .cart-summary-row .cart-summary, .cart-summary-row #free-shipping{ width: 100%; text-align: left; justify-content: flex-start; }

  .cart-section h2{ font-size: 1.8rem; text-align: center; }

  .cart-item-row{ flex-direction: column; align-items: flex-start; padding: 1rem; }
  .cart-item-name, .cart-item-price{ flex-basis: auto; width: 100%; text-align: left; }
  .cart-item-price{ margin-top: .5rem; }

  .cart-item-controls{
    flex-basis: auto; width: 100%; display: flex; justify-content: center; flex-direction: row; align-items: center;
    gap: .5rem; margin-top: 1rem;
  }
  .cart-item-row .qty-minus{ order: 1; }
  .cart-item-row .quantity{ order: 2; min-width: 30px; text-align: center; }
  .cart-item-row .qty-plus{ order: 3; }
  .cart-item-row .remove-button{ order: 4; margin-left: .8rem; color: #e74c3c !important; }
}

/* Nadpis sekce + podtitulky */
.section h2{
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem;
}
.section .section-title-text{ font-weight: 700; }

/* Kontejner a štítky */
.section .section-sublabels{
  display: inline-flex; flex-wrap: wrap; gap: 10px 14px; font-size: .95rem; font-weight: 600; color: #333;
}
.section .section-sublabel{ white-space: nowrap; }
.section .section-sublabel::before{ content:"— "; color:#9aa59a; }

/* Mobil drobný tuning */
@media (max-width: 640px){
  .section .section-sublabels{ width:100%; font-size:.9rem; color:#555; }
}

/* === Skupiny pražíren uvnitř .products === */
.products h3,
.products .roaster-heading,
.products .roaster-label {
  grid-column: 1 / -1;
  margin: 0 0 .5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}
.products h3 + .product,
.products .roaster-heading + .product,
.products .roaster-label + .product { margin-top: .25rem; }

.products .roaster-group,
.products .brand-group,
.products .group { display: contents; }

.products .roaster-group,
.products .brand-group { display: contents !important; }

.products .roaster-label,
.products .brand-label{
  grid-column: 1 / -1;
  margin: 0 0 .5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}

/* (volitelné) uzamknutí scrollu stránky při otevřeném menu */
body.no-scroll { overflow: hidden; }

/* ===================== */
/* 🔎 Výsledky hledání  */
/* ===================== */
#listing.section{ padding-top: 1rem; }
#listing-title{ font-size: 1.6rem; font-weight: 800; margin: 0 0 .25rem 0; }
#listing-intro{ color: #555; margin: 0 0 1rem 0; }
#listing-products{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 1.5rem;
}

/* ===================== */
/* ♿️ Focus enhancements */
/* ===================== */
a:focus-visible,
button:focus-visible,
.size-option-button:focus-visible,
.r-subnav__link:focus-visible,
.mega__list a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--green);
}

/* ========================================= */
/* 🔽 HEADER – kompaktní režim při scrollu  */
/* ========================================= */
body.header-compact .r-header {
  padding: 8px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
body.header-compact .r-header-inner { gap: 10px; }
body.header-compact [data-compact-hide] { display: none !important; }
body.header-compact .r-header-logo img { height: 28px; transition: height .25s ease; }
body.header-compact .r-header-search input[type="search"] { height: 38px; }
body.header-compact .btn-primary.btn-search { height: 38px; padding: 0 12px; }
body.header-compact .r-subnav {
  top: var(--headerH-current); padding: 6px 0; border-top: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
body.header-compact .r-subnav__link:hover { background: #f8f8f8; }
body.header-compact .promo-topbar { display: none; }

/* ===== Compact bar (rezervní komponenta) ===== */
#compact-bar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1300;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: #fff;
  border-bottom: 1px solid #eee; box-shadow: 0 3px 12px rgba(0,0,0,.08);
  font: 600 15px/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #333;
  /* plynulý přechod — skrytý mimo viewport dokud není aktivní */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
#compact-bar.is-visible{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}
#compact-bar .compact-left{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
#compact-bar .compact-nav{ display:flex; align-items:center; gap:20px; }
#compact-bar .compact-right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:1 1 600px; }
#compact-bar .r-header-logo img{ height:28px; width:auto; display:block; }
#compact-bar .r-header-search{ flex: 1 1 900px; min-width: 240px; max-width: none; }
#compact-bar .r-header-search input[type="search"]{ height:38px; }
#compact-bar .btn-primary.btn-search{ height:38px; }
#compact-bar .r-cart{ height:38px; padding:6px 12px; }

body.compact-active .r-header .r-header-logo,
body.compact-active .r-header-nav [data-compact-hide],
body.compact-active #header-order-cafe { display:none !important; }
body.compact-active .r-subnav{
  position: fixed; top: var(--compactH, 52px);
  left: 0; right: 0; height: 0; padding: 0; margin: 0; border: 0; background: transparent; z-index: 1100;
}
body.compact-active .r-subnav .mega{
  position: fixed; left: 0; right: 0; top: var(--compactH, 52px); border-top: 3px solid var(--coffee-brown); z-index: 1150;
}

/* více bílé plochy v horním panelu */
:root{ --headerH: 64px; --headerH-current: var(--headerH); }
.r-header{ padding: 10px 24px !important; }
.r-subnav{ top: var(--headerH-current) !important; }
#compact-bar .r-subnav__inner{ margin-left: 8px !important; padding-left: 0 !important; gap: 14px !important; }
#compact-bar .compact-left{ gap: 8px; }
#compact-bar .compact-nav{ margin-left: 4px; }

/* =========================================================
   ✅ FINÁLNÍ SJEDNOCENÍ DLAŽDIC (mega menu)
   ========================================================= */
.r-subnav .mega.mega--grid{
  display: block !important;
  padding: 16px 18px !important;
  max-height: min(70vh, 560px);
  overflow: auto;
}
.r-subnav .mega.mega--grid .mega__tiles{
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start !important;
  padding-left: 4px !important; list-style: none; margin: 0;
}
.r-subnav .mega.mega--grid .mega__tiles > li{ list-style: none; flex: 0 0 120px !important; }
.r-subnav .mega.mega--grid .tile{
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  padding: 10px 8px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  border: 1px solid #e7e7e7; border-radius: 12px; background: #fff; color: #111; text-decoration: none; font-weight: 600;
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease, color .2s ease;
}
.r-subnav .mega.mega--grid .tile-icon{
  width: 44px !important; height: 44px !important; object-fit: contain !important; display: block;
}
.r-subnav .mega.mega--grid .tile-title{
  font-size: .88rem !important; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r-subnav .mega.mega--grid .tile:hover{
  background: #fff; border-color: var(--green); color: #111; transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.r-subnav .mega.mega--grid .tile:hover .tile-icon{ transform: scale(1.08); }

/* Pražírny – vyšší karta + delší název */
#menu-prazirny-tiles > li{ flex: 0 0 140px !important; }
#menu-prazirny-tiles .tile{ aspect-ratio: 3 / 4 !important; padding: 12px 8px 14px !important; }
#menu-prazirny-tiles .tile-icon{ width: 56px !important; height: 56px !important; object-fit: contain !important; display: block; margin-bottom: 6px; }
#menu-prazirny-tiles .tile-title{ font-size: .9rem !important; -webkit-line-clamp: 4 !important; min-height: calc(1.3em * 4); line-height: 1.3; }
@media (max-width: 640px){
  #menu-prazirny-tiles > li{ flex: 0 0 120px !important; }
  #menu-prazirny-tiles .tile{ aspect-ratio: 1 / 1.25 !important; }
  #menu-prazirny-tiles .tile-icon{ width: 48px !important; height: 48px !important; }
  #menu-prazirny-tiles .tile-title{ -webkit-line-clamp: 3 !important; min-height: calc(1.3em * 3) !important; }
}

/* Ke kávě – brand loga větší (Šufan apod.) pouze na landing page */
#ke-kave-brand-tiles .tile-icon {
  width: 72px !important; height: 72px !important;
}

/* -------------------- MOBILNÍ HEADER + MENU -------------------- */
/* výchozí viditelnost na mobilech; desktop schovaný */
#m-header{ position: sticky; top: var(--promo-h,0); z-index: 1400; display: none; background:#fff; border-bottom: 1px solid #eee; }
.m-header__bar{ transition: opacity .25s ease, transform .25s ease; }
.m-header__bar.is-hidden{ opacity:0; transform: translateY(-100%); pointer-events:none; position:absolute; inset:auto 0 0 0; }
.m-header__bar.is-visible{ opacity:1; transform: translateY(0); position:relative; }

.m-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; }
.m-logo img{ height:28px; width:auto; display:block; }

.m-btn{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; padding:6px 8px; cursor:pointer; }
.m-btn-label{ font: 600 14px/1 'Inter',sans-serif; color:#333; }
.m-ico{ width:24px; height:24px; stroke: currentColor; fill:none; stroke-width:2; }

.m-actions{ display:inline-flex; align-items:center; gap:10px; }
.m-link{ font:600 14px/1 'Inter',sans-serif; color:#333; text-decoration:none; padding:6px 8px; border-radius:6px; }
.m-link:hover{ background:#f5f5f5; }
.m-icon{ display:inline-flex; padding:6px; color:#333; }

.m-search{ padding: 0 12px 10px; display:flex; gap:6px; }
.m-search input{ flex:1; height:38px; padding:0 12px; border:2px solid var(--green); border-radius:8px; font: 16px/1 'Inter',sans-serif; }
.m-search button{ height:38px; padding:0 10px; border:0; border-radius:8px; background: linear-gradient(145deg, var(--green), var(--green-d)); color:#fff; }

.m-search-slim{ display:flex; align-items:center; gap:6px; flex:1; }
.m-search-slim input{ flex:1; height:36px; border:1px solid #ddd; border-radius:8px; padding:0 10px; }
.m-search-slim button{ height:36px; border:0; background:#f0f0f0; border-radius:8px; padding:0 10px; }

.hide-sm{ display:none; }

/* fullscreen menu */
.m-menu{ position: fixed; inset:0; background:#fff; z-index:1500; transform: translateX(100%); transition: transform .25s ease; overflow:auto; }
.m-menu.is-open{ transform: translateX(0); }
.m-menu__head{ position: sticky; top:0; display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid #eee; background:#fff; }
.m-close{ border:0; background:transparent; padding:6px; cursor:pointer; }
.m-menu-search{ display:flex; align-items:center; gap:6px; flex:1; }
.m-menu-search input{ flex:1; height:38px; border:2px solid var(--green); border-radius:8px; padding:0 12px; }
.m-menu-search button{ height:38px; border:0; background:linear-gradient(145deg, var(--green), var(--green-d)); color:#fff; border-radius:8px; padding:0 12px; }

.m-menu__grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }
.m-cat{ display:block; text-align:center; font-weight:700; padding:12px; border-radius:10px; background:#fff; color:#111; text-decoration:none; border:1px solid #e7e7e7; transition: all .2s ease; }
.m-cat:hover{ border-color: var(--green); box-shadow: 0 6px 16px rgba(0,0,0,.12); transform: translateY(-2px); }

.m-menu__list{ padding:8px 6px 24px; display:flex; flex-direction:column; gap:4px; }
.m-item{ display:flex; align-items:center; gap:8px; padding:10px 12px; text-decoration:none; color:#111; border-radius:8px; font-weight: 600; transition: background .15s ease; }
.m-item:hover{ background:#f5f7f5; }

/* přepínání desktop/mobil */
@media (max-width: 1024px){
  #m-header{ display:block; }
  .r-header, .r-subnav, #compact-bar{ display:none !important; }
}
@media (min-width: 1025px){
  #m-header, #m-fullscreen-menu{ display:none !important; }
}

/* -------------------- UTILITY -------------------- */
.icon-50 { width: 50px; height: auto; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: .25rem; }
.u-mb-16 { margin-bottom: 1rem; }

/* === Banner a header bez mezery (mobil) ======================= */
@media (max-width:1024px){
  /* banner – tenčí a bez „spaceru“ */
  .promo-topbar{
    position: sticky; top: 0; z-index: 1100;
    margin: 0 !important; border: 0 !important;
  }
  .promo-topbar-row{ padding-block: 4px !important; } /* bývalo ~8px */

  /* header – sedni hned pod banner, žádný okraj ani border */
  #m-header{
    top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  /* ↓ Klíčové: zmenší horní padding v první řadě headeru */
  #m-header .m-row{ padding-top: 6px !important; } /* bylo 10px */
  /* pokud máš „slim“ bar, sjednotíme taky */
  #m-header-slim .m-row{ padding-top: 6px !important; }
}

/* Safari hairline fix: když by byl vidět 1px proužek, přiklopíme ho */
@media (max-width:1024px){
  .promo-topbar{ border-bottom: 0 !important; }
  #m-header{ margin-top: -1px !important; } /* opticky „dosedne“ */
}

/* === Plynulé schování banneru při scrollu ===================== */
.promo-topbar{
  transition: transform .28s ease, opacity .28s ease, height .28s ease, padding .28s ease;
}
.promo-topbar.is-collapsed{
  transform: translateY(-100%);
  opacity: 0;
  height: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0; border: 0;
  pointer-events: none;
}

/* ===================== */
/* 🔧 FINAL: Banner vs. m-header bez mezery (mobil) */
/* ===================== */

/* 1) Banner: žádný spodní margin/border/padding, sticky nahoře */
@media (max-width:1024px){
  .promo-topbar{
    position: sticky !important;
    top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .promo-topbar-row{ padding-block: 4px !important; }  /* ztenšení lišty */
}

/* 2) Header: připni ho hned pod banner (žádný offset ani mezera) */
@media (max-width:1024px){
  #m-header{
    position: sticky !important;
    top: 0 !important;                 /* ignoruje případný offset */
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  /* safíčkový hairline fix – kdyby se objevil 1px proužek */
  @supports (-webkit-touch-callout: none){
    #m-header{ margin-top: -1px !important; }
  }
}

/* 3) Když se banner schová (is-collapsed), header drž úplně nahoře */
.promo-topbar.is-collapsed + #m-header{
  top: 0 !important;
  margin-top: 0 !important;
}

/* 4) Plynulé schování banneru (ponecháme) */
.promo-topbar{
  transition: transform .28s ease, opacity .28s ease, height .28s ease, padding .28s ease, margin .28s ease;
}
.promo-topbar.is-collapsed{
  transform: translateY(-100%);
  opacity: 0;
  height: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none;
}

/* ============================================
   FINAL FIX: mezera mezi .promo-topbar a #m-header
   ============================================ */
@media (max-width:1024px){
  /* banner: žádný spodní margin/border */
  .promo-topbar{
    position: sticky !important;
    top: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }
  .promo-topbar .promo-topbar-row{
    padding-block: 4px !important; /* nižší lišta */
  }

  /* header hned pod ním (bez rezervy) */
  #m-header{
    position: sticky !important;
    top: 0 !important;
    margin: 0 !important;
    border-top: 0 !important;
  }

  /* klíčové: pokud je header hned za bannerem, dorazíme případný hairline */
  .promo-topbar + #m-header{
    margin-top: -1px !important;     /* překlopí případný 1px proužek */
  }

  /* zmenší horní padding v první řadě headeru (opticky menší mezera) */
  #m-header .m-row{ padding-top: 6px !important; }
  #m-header-slim .m-row{ padding-top: 6px !important; }
}

/* autohide banneru (necháme funkční) */
.promo-topbar{
  transition: transform .28s ease, opacity .28s ease, height .28s ease, padding .28s ease, margin .28s ease;
}
.promo-topbar.is-collapsed{
  transform: translateY(-100%);
  opacity: 0;
  height: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none;
}

/* ============================================
   MOBILE: banner a header bez jediné mezery
   ============================================ */
@media (max-width:1024px){
  /* 0) pro jistotu vypneme jakýkoli globální offset jen na mobilu */
  :root{ --promo-h: 0px !important; }

  /* 1) banner – žádný margin/border, drží se u horní hrany */
  .promo-topbar{
    position: sticky !important;
    top: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .promo-topbar .promo-topbar-row{ padding-block: 4px !important; }

  /* 2) mobile header – žádný top/margin/border navíc */
  #m-header{
    position: sticky !important;
    top: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* 3) Když je header hned po banneru, „překlop“ případný hairline */
  .promo-topbar + #m-header{
    margin-top: -1px !important; /* zabije i 1px proužek, co dělá Safari */
  }

  /* 4) menší vnitřní mezera v první řadě headeru */
  #m-header .m-row,
  #m-header-slim .m-row{ padding-top: 6px !important; }
}

/* 5) plynulé schování banneru při scrollu (třídu přidává JS) */
.promo-topbar{
  transition: transform .28s ease, opacity .28s ease,
              height .28s ease, padding .28s ease, margin .28s ease;
}
.promo-topbar.is-collapsed{
  transform: translateY(-100%);
  opacity: 0;
  height: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none;
}

/* 🧹 Mobil: zruš mezisložku mezi bannerem a mobile headerem */
@media (max-width:1024px){
  .promo-topbar{ margin-bottom: 0 !important; border-bottom: 0 !important; }
  .top-nav{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* ať mobile header opravdu dosedne k banneru */
  .promo-topbar + #m-header{ margin-top: -1px !important; }
}

/* 🧲 MOBIL: banner a #m-header bez jediné mezery – tvrdý fix */
@media (max-width:1024px){
  /* banner sám o sobě nesmí přidávat nic navíc */
  .promo-topbar{
    position: sticky !important;
    top: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* cokoliv hned po banneru – zruš jakýkoliv „box spacing“ */
  .promo-topbar + *{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* pokud to NENÍ přímo #m-header, schovej to (mezivložka/spacer) */
  .promo-topbar + *:not(#m-header){
    display: none !important;
    height: 0 !important;
  }

  /* ať mobile header opravdu dosedne k banneru */
  #m-header{
    position: sticky !important;
    top: 0 !important;             /* ignoruj případné offset proměnné */
    margin: 0 !important;
    border: 0 !important;
  }

  /* Safari hairline – překlop 1px proužek, kdyby vznikl */
  .promo-topbar + #m-header{ margin-top: -1px !important; }
}

/* ===================== */
/* 🛡 Jistící vrstvy pro desktop bez JS */
/* ===================== */
@media (min-width:1025px){
  .promo-topbar{ z-index: 1100; }
  .r-header{ z-index: 1200; }
}


/* ===== PATCH: PATIČKA – mobilní layout + address typografie ===== */

.site-footer address {
  font-style: normal;
  line-height: 1.5;
  margin: 0 0 .5rem 0;
  display: block;
}
.site-footer address strong {
  display: block;
  font-size: 1rem;
  margin-bottom: .3rem;
}

/* Patička – responzivní */
@media (max-width: 960px){
  .site-footer .wrap{ grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 20px 32px; }
}
@media (max-width: 600px){
  .site-footer .wrap{
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    padding: 32px 16px 24px;
  }
  .site-footer .wrap > div:first-child{
    grid-column: 1 / -1;
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
    margin-bottom: 4px;
  }
  .site-footer .bottom{ flex-direction: column; text-align: center; padding: 14px 16px; gap: 4px; }
  .footer-networks{ margin-top: 1rem; }
  .footer-newsletter-form{ flex-direction: column; }
  .footer-newsletter-form input[type="email"],
  .footer-newsletter-form button{ width: 100%; box-sizing: border-box; }
}
.site-footer h4,
.site-footer address,
.site-footer ul{ text-align: left; }

/* === Fix: "Celkem: XXX Kč" – zarovnání + typografie === */
#cart-summary,
.cart-footer .cart-summary,
.cart-summary-row .cart-summary {
  display: block;
  width: 100%;
  text-align: center !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
  color: #222;
  margin: 0.75rem 0 0.5rem;
  font-family: inherit; /* Inter z <body> */
}

/* ať je podtitul (doprava zdarma) taky uprostřed */
#free-shipping {
  justify-content: center !important;
  text-align: center !important;
}

[data-cart-count][hidden]{display:none}
.m-icon,[data-cart-icon]{position:relative}
.m-cart-badge{
  position:absolute; top:-4px; right:-6px;
  min-width:1.25em; height:1.25em; line-height:1.25em;
  padding:0 .25em; border-radius:999px; text-align:center;
  font-size:12px; font-weight:600;
}


/* ✅ Styl zeleného kolečka u mobilního košíku */
.m-cart-badge,
[data-cart-count] {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
  padding: 0 .25em;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background-color: #6bbf59; /* zelená barva e-shopu */
  box-shadow: 0 0 0 2px #fff; /* bílý okraj kolem kolečka */
  display: inline-block;
}

/* pokud je skryto, neukazuj */
[data-cart-count][hidden] {
  display: none;
}

/* ────────────────────────────────────────────────────────────────
   📱 Mobilní header: layout, vyhledávání, ikonová tlačítka
   (full i slim bar + fullscreen menu) – sjednocená verze
   ──────────────────────────────────────────────────────────────── */

/* řádek v mobilním headeru */
#m-header .m-row{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  position:relative;
}

/* search zabere zbytek místa */
#m-header-full .m-search,
#m-header-slim .m-search{ flex:1 1 auto; width:100%; }

/* sjednocené vyhledávání */
.m-search{
  display:flex; align-items:center; gap:8px; padding:0; width:100%;
}
#m-header-full .m-search{ padding:0 12px 10px; }  /* spodní odsazení jen ve FULL baru */

.m-search input{
  flex:1 1 auto; min-width:0;
  height:40px; padding:0 12px;
  border:2px solid var(--green); border-radius:8px;
  font:16px/1 'Inter',sans-serif; background:#fff;
}
.m-search__btn{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:8px; border:0;
  background:linear-gradient(145deg, var(--green), var(--green-d));
  color:#fff; cursor:pointer;
}
.m-search__btn svg{ pointer-events:none; } /* klik jde na tlačítko */

/* slim bar – kompaktnější */
#m-header-slim .m-row{ padding:4px 10px; gap:8px; min-height:44px; }
#m-header-slim .m-search input{ height:34px; padding:0 10px; }
#m-header-slim .m-search .m-search__btn{ width:34px; height:34px; }

/* fullscreen menu: search přes celou šířku */
.m-menu .m-menu__head{ display:flex; align-items:center; gap:12px; }
.m-search--menu{ flex:1 1 auto; width:100%; }
.m-search--menu input{ height:40px; border-width:2px; }
.m-search--menu .m-search__btn{ width:40px; height:40px; }

/* Ostatní ikony v headeru – neflexují */
#m-header .m-btn,
#m-header .m-icon{ flex:0 0 auto; }

/* ── Ikonová tlačítka s popiskem (Menu / Přihlásit / Košík) ── */
.m-icon-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; color:#333; font-weight:600; font-size:12px;
  position:relative; cursor:pointer;
}
button.m-icon-btn{ background:transparent; border:0; padding:6px 8px; }

.m-icon-btn .m-ico{ width:24px; height:24px; }
.m-icon-label{ font-size:12px; line-height:1; white-space:nowrap; }

.m-icon-btn:hover{ color:var(--green-d); }
.m-icon-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:8px; }

/* aktivní stav menu při otevření */
.m-menu-toggle[aria-expanded="true"],
.m-menu-toggle[aria-expanded="true"] .m-icon-label{ color:var(--green-d); }

/* badge u košíku v rohu ikonky */
.m-icon-btn .m-cart-badge{ position:absolute; top:-4px; right:-2px; }

/* slim: menší ikony/štítky */
#m-header-slim .m-ico{ width:22px; height:22px; }
#m-header-slim .m-icon-label{ font-size:11px; }
@media (max-width:360px){ #m-header-slim .m-icon-label{ display:none; } }

/* ── Logo vždy přesně doprostřed ── */
.m-logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
#m-header-full .m-logo img{ height:28px; }
#m-header-slim .m-logo img{ height:24px; }

/* aby klikací prvky vlevo/vpravo nebyly pod logem */
.m-menu-toggle, .m-actions{ z-index:2; }

.m-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  cursor: pointer;
  padding: 0;
}

.m-search__btn:hover {
  background: var(--green-d);
}

/* PNG lupa */
.m-search-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
}

/* slim verze – menší ikona */
#m-header-slim .m-search-icon {
  width: 18px;
  height: 18px;
}

/* =====================================================
   iOS Safari FIX – jen pro zúžený (slim) mobilní header
   ===================================================== */
@supports (-webkit-touch-callout: none) {
  /* malý „safe“ offset shora, ať Safari nic neuřízne */
  #m-header-slim.m-header__bar{
    padding-top: max(6px, calc(env(safe-area-inset-top, 0px) * 0.5));
    padding-bottom: 4px;
    /* předejdi vizuálnímu ořezu při sticky renderu */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  /* trošku vyšší řádek, ať se nic nemačká */
  #m-header-slim .m-row{
    min-height: 48px;     /* klidně 46–50 podle oka */
    padding-top: 0;       /* držíme to čisté */
    padding-bottom: 0;
  }

  /* jistota: zruš potenciální „hairline“ mezeru pod headerem */
  #m-header{
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  .promo-topbar + #m-header{
    margin-top: 0 !important; /* přepíše -1px hack, co mohl dělat paseku */
  }
}

/* ===== Mobilní fullscreen menu – bez „obláčků“, 4 taby na šířku ===== */

.m-menu{
  position: fixed; inset: 0; z-index: 1400;
  background:#fff; display:none;
}
.m-menu.is-open{ display:flex; flex-direction:column; }
body.no-scroll{ overflow:hidden; }

/* hlava */
.m-menu__head{
  flex:0 0 auto;
  position: sticky; top: 0; z-index: 2;
  background:#fff;
  padding:10px 12px;
  border-bottom:1px solid #eee;
  display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center;
}
.m-menu__head .m-close{
  appearance:none; border:0; background:transparent;
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
}
.m-menu__head .m-search{ grid-column:1 / -1; }

/* --- TABBAR: 5 buněk přesně na šířku --- */
.m-menu__grid{
  flex:0 0 auto;
  display:grid;
  grid-template-columns: repeat(5, 1fr); /* ⬅ změna 4 → 5 */
  align-items:center;
  padding: 4px 2px;
  border-bottom:1px solid #eee;
  background:#fff;
  text-align:center;
  gap: 0; /* žádné mezery mezi buňkami */
}

/* Základní tlačítko záložky – BEZ „obláčku“ */
.m-menu__grid .m-cat{
  -webkit-tap-highlight-color: transparent;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none;
  border-radius: 0;
  min-height: 44px;

  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap: 4px; padding: 6px 2px;

  color:#2b2b2b;
  font-weight: 600;
  font-size: clamp(12px, 3vw, 16px); /* adaptivní text */
  line-height: 1.1;
  white-space: nowrap; /* radši zmenšit font než zalomit */
}

/* ikona */
.m-menu__grid .m-cat .m-cat-icon{
  width: clamp(18px, 4vw, 22px);
  height: clamp(18px, 4vw, 22px);
  object-fit: contain;
}

/* aktivní = jen zelený text (žádná linka, žádný podklad) */
.m-menu__grid .m-cat.is-active{ color:#1a7f37; }
.m-menu__grid .m-cat.is-active::after{ display:none !important; }

/* přístupné zvýraznění pouze pro klávesnici */
.m-menu__grid .m-cat:focus-visible{
  outline: 2px solid #1a7f37;
  outline-offset: 2px;
}

/* --- Panely: zaplnit zbytek obrazovky, scroll uvnitř --- */
.m-menu__panels{
  flex:1 1 auto; min-height:0;
  overflow:hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.m-panel{
  display:none; height:100%;
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:12px 10px 24px;
}
.m-panel.is-active{ display:block; }

/* Dlaždice uvnitř panelů */
.mega__tiles{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px; padding:4px;
}
.mega__tiles .tile{
  display:flex; align-items:center; gap:10px;
  padding:10px; border:1px solid #eee; border-radius:12px; background:#fff;
}
.mega__tiles .tile:hover{ background:#f8f8f8; }
.mega__tiles .tile-icon{ width:36px; height:36px; object-fit:contain; }
.mega__tiles .tile-title{ font-weight:600; font-size:15px; }

/* 1 sloupec na nejmenších telefonech */
@media (max-width: 360px){
  .mega__tiles{ grid-template-columns: 1fr; }
  .m-menu__grid .m-cat{
    font-size: clamp(11px, 2.8vw, 14px);
    gap: 2px;
  }
}

/* 🔧 Mobilní fullscreen menu – přepiš „dlaždicové” vlastnosti .tile */
.m-menu .m-panel .mega__tiles > li > a.tile{
  aspect-ratio: auto !important;  /* ZRUŠ čtverec */
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}

/* ikona menší vlevo */
.m-menu .m-panel .mega__tiles > li > a.tile .tile-icon{
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
}

/* Blog v mobilním menu drží stejný seznamový vzhled jako ostatní panely. */
.m-menu .m-panel #m-blog-tiles.blog-preview-list{
  display: block !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
}
.m-menu .m-panel #m-blog-tiles.blog-preview-list > li{
  display: block !important;
  margin: 0 0 10px !important;
  border-radius: 14px !important;
}
.m-menu .m-panel #m-blog-tiles.blog-preview-list > li > a.tile{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: auto !important;
  padding: 12px 16px !important;
  text-align: left !important;
}
.m-menu .m-panel #m-blog-tiles.blog-preview-list > li > a.tile .tile-icon{
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.m-menu .m-panel #m-blog-tiles.blog-preview-list > li > a.tile::after{
  display: block !important;
}
.m-menu .m-panel #m-blog-tiles.blog-preview-list > li > a.tile .tile-title{
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* text vpravo, větší a tučný */
.m-menu .m-panel .mega__tiles > li > a.tile .tile-title{
  flex: 1 1 auto !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 4.3vw, 18px) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* indikace odkazu – šipka vpravo */
.m-menu .m-panel .mega__tiles > li > a.tile::after{
  content: "›" !important;
  margin-left: auto !important;
  font-size: 18px !important;
  opacity: .35 !important;
}

/* menší telefony */
@media (max-width: 380px){
  .m-menu .m-panel .mega__tiles > li > a.tile{ padding: 10px 12px !important; gap: 10px !important; }
  .m-menu .m-panel .mega__tiles > li > a.tile .tile-icon{ width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
  .m-menu .m-panel #m-blog-tiles.blog-preview-list > li > a.tile .tile-icon{ width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
}

/* košíkový banner – plynulé schování při otevřeném menu */
#cart-banner{
  transition: transform .24s ease, opacity .24s ease;
  will-change: transform, opacity;
}

body.m-menu-open #cart-banner{
  transform: translateY(120%);  /* odjede pod viewport */
  opacity: 0;
  pointer-events: none;
}

/* ────────────────────────────────────────────────
   iOS/Safari scroll-bleed HARDENING pro fullscreen menu
   – povolíme doteky jen uvnitř #m-fullscreen-menu
   – všechno ostatní během otevřeného menu nedostane scroll ani tap
   ──────────────────────────────────────────────── */

/* 1) Globálně vypni scroll-chain a bounce při otevřeném menu */
html.m-menu-open,
body.m-menu-open{
  overscroll-behavior: none !important;   /* nepropouštěj scroll dál */
  height: 100%;                            /* zamezí layout posunům */
}

/* 2) Tvrdý touch-lock mimo menu (funguje i na iOS) */
body.m-menu-open{
  touch-action: none !important;           /* nic se „neposune“ mimo menu */
}
body.m-menu-open #m-fullscreen-menu,
body.m-menu-open #m-fullscreen-menu *{
  touch-action: auto !important;           /* ale uvnitř menu doteky povol */
}

/* 3) Vnitřní scroller menu – tady jedině smí scrollovat */
#m-fullscreen-menu.m-menu{
  overscroll-behavior: contain !important; /* žádný chain ven */
}
#m-fullscreen-menu .m-menu__panels{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  height: 100%; min-height: 0;            /* jistota pro flex kontejnery */
}

/* 4) Zákaz interakcí s pozadím (stopne i náhodné „tap to scroll“) */
body.m-menu-open > :not(#m-fullscreen-menu){
  pointer-events: none !important;
}

/* 5) iOS-specific pojistky (aplikují se jen v Safari na iOS) */
@supports (-webkit-touch-callout: none){
  html.m-menu-open, body.m-menu-open{
    position: relative; /* zabrání některým „elastic“ artefaktům */
  }
  #m-fullscreen-menu.m-menu{
    height: calc(var(--vh, 1vh) * 100) !important; /* 100vh fix */
  }
}

/* 6) Když by nějaká komponenta nutila tělo scrollovat, brutální brzda: */
body.m-menu-open.no-scroll{
  overflow: hidden !important; /* záložní brzda navíc */
}


/* 🧹 VYPNUTÍ VŠECH EFEKTŮ V MOBILNÍM MENU (tap/hover/active/focus) */
#m-fullscreen-menu,
#m-fullscreen-menu *,
#m-fullscreen-menu *::before,
#m-fullscreen-menu *::after {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* zruší vizuální odezvu při tapnutí, hoveru nebo aktivaci */
#m-fullscreen-menu a:hover,
#m-fullscreen-menu a:active,
#m-fullscreen-menu a:focus,
#m-fullscreen-menu button:hover,
#m-fullscreen-menu button:active,
#m-fullscreen-menu button:focus,
#m-fullscreen-menu .tile:hover,
#m-fullscreen-menu .tile:active,
#m-fullscreen-menu .m-cat:hover,
#m-fullscreen-menu .m-cat:active {
  background: inherit !important;
  border-color: inherit !important;
  color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* bezpečnostní vrstva pro iOS Safari – zabraňuje šedému flash efektu */
@supports (-webkit-touch-callout: none) {
  #m-fullscreen-menu a,
  #m-fullscreen-menu button,
  #m-fullscreen-menu .tile,
  #m-fullscreen-menu .m-cat {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    touch-action: manipulation !important;
  }
}

/* Barva křížku (tlačítko zavřít menu) */
.m-menu__head .m-close svg,
.m-menu__head .m-close path,
.m-menu__head .m-close line {
  stroke: #000 !important;
  color: #000 !important;
  fill: none !important;
}



.m-menu .m-panel .mega__tiles,
.m-menu .m-panel .mega__tiles > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* 📱 Fullscreen menu: základ = 1 sloupec (žádné skládání vedle sebe) */
.m-menu .m-panel .mega__tiles{
  display: grid;
  grid-template-columns: 1fr !important;  /* ← klíčové */
  gap: 10px;
}

/* ať se položka natáhne přes celou šířku */
.m-menu .m-panel .mega__tiles > li,
.m-menu .m-panel .mega__tiles > li > a.tile{
  width: 100% !important;
}

/* (volitelné) na větších zařízeních povolit 2 sloupce */
@media (min-width: 600px){
  .m-menu .m-panel .mega__tiles{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}


/* když je otevřené fullscreen menu, schovej GDPR lištu */
body.m-menu-open #cookie-banner{
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s ease, opacity .24s ease;
}

/* === Minimal hero slider – čistá verze bez textů ================ */
:root {
  --slider-h-desktop: clamp(280px, 35vw, 520px);
  --slider-h-mobile: 240px;
  --slider-radius: 20px;
  --slider-gap: 12px;
}

.hero-slider {
  margin: clamp(8px, 1.5vw, 16px) auto 0;
  max-width: min(1400px, 96vw);
  position: relative;
}

.slider-viewport {
  border-radius: var(--slider-radius);
  overflow: hidden;
  overscroll-behavior-x: contain;
  -webkit-mask-image: none;
          mask-image: none;
}

.slider-track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--slider-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.slide {
  position: relative;
  height: var(--slider-h-desktop);
  scroll-snap-align: start;
  background: #111;
}
@media (max-width: 768px) {
  .slide { height: var(--slider-h-mobile); }
}

.slide-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✅ všechny caption, texty, buttony odstraněny */
.slide-caption {
  display: none !important;
}

/* 🟢 Bestsellery: stejná šířka a pastel jako ostatní listy */
#bestsellers{ position: relative; padding: 2rem 0; }

/* pseudo-panel se stejnou max-width jako .container */
#bestsellers::before{
  content:"";
  position:absolute; inset:0;
  left:50%; transform:translateX(-50%);
  width: min(1100px, 100%);
  max-width: calc(1100px + 2rem);   /* + vodorovný padding jako .container */
background: rgba(245,230,200,.3);
  border-radius: 12px;
  z-index: 0;
}

/* obsah nad panelem a zúžený stejně jako jinde */
#bestsellers > h2,
#bestsellers-products{
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 1rem;
}

/* grid karet stejný jako ostatní */
/* 🟢 Bestsellery – horizontální slider na všech šířkách */
#bestsellers-products{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 0.5rem;

  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
}

/* Šířka karty – velká ikona jako v klasickém listingu */
#bestsellers-products .product{
  flex: 0 0 260px;        /* můžeš doladit: 240–280px */
  scroll-snap-align: start;
}

/* lehký hover */
#bestsellers-products .product:active{
  transform: scale(0.97);
}

/* jemnější scrollbar na desktopu */
#bestsellers-products::-webkit-scrollbar{
  height: 8px;
}
#bestsellers-products::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(0,0,0,.15);
}

/* 📱 Bestsellery: horizontální scroller (kompaktnější) */
@media (max-width: 768px){
  #bestsellers-products{
    display: flex !important;
    overflow-x: auto;
    gap: 0.75rem;
    padding: 0 1rem 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* menší karty – aby se jich vešlo víc do výhledu */
  #bestsellers-products .product{
    flex: 0 0 56vw;       /* dříve 72vw – teď o čtvrtinu menší */
    scroll-snap-align: start;
    transition: transform .25s ease;
  }

  /* jemné zvýraznění aktivní karty při pohybu */
  #bestsellers-products .product:active{
    transform: scale(0.97);
  }

  /* na širších mobilech (≥420px) ještě menší poměr */
  @media (min-width: 420px){
    #bestsellers-products .product{ flex-basis: 44vw; }
  }

  /* schovej nativní scrollbar */
  #bestsellers-products{ scrollbar-width: none; }
  #bestsellers-products::-webkit-scrollbar{ display: none; }
}

/* Volitelné – jemný fade efekt na okrajích */
@media (max-width: 768px){
  #bestsellers{
    position: relative;
    --edge-fade: linear-gradient(90deg, rgba(249,248,245,1), rgba(249,248,245,0));
  }
  #bestsellers::before,
  #bestsellers::after{
    content:"";
    position:absolute; top:0; bottom:0; width:14px;
    pointer-events:none; z-index:1;
  }
  #bestsellers::before{ left:0;  background: var(--edge-fade); }
  #bestsellers::after { right:0; background: var(--edge-fade); transform: scaleX(-1); }
}

/* 📱 sjednocení pozadí bestsellers i pro mobilní layout */
@media (max-width: 768px){
  #bestsellers{
    background: rgba(245,230,200,.3); /* stejné pastelové pozadí jako desktop */
    border-radius: 12px;
  }
  #bestsellers::before{
    content: none; /* zruší pseudo-panel, aby se netloukl s flex scrollerem */
  }
}


/* =================================================================
   🧾 CART UI – overlay, desktop drawer, mobilní bottom-sheet
   – funguje nezávisle na zbytku CSS
   – přizpůsobí se spodním fixním lištám (banner košíku / cookie bar)
   ================================================================= */

/* ---------- ZÁKLADNÍ PROMĚNNÉ ---------- */
:root{
  /* Rozměry / vrstvy */
  --cart-width: 440px;
  --cart-radius: 16px;
  --cart-z-overlay: 1500;
  --cart-z-panel: 1510;

  /* Výšky spodních UI (měň dle reálu) */
  --h-cart-banner: 72px;   /* zelený "sticky" banner košíku dole */
  --h-cookie: 72px;        /* GDPR lišta */

  /* Výchozí: žádný offset zdola */
  --cart-bottom-offset: 0px;
}

/* Pokud je vidět sticky košíková lišta, posuň drawer výš */
body:has(#cart-banner.visible){
  --cart-bottom-offset: var(--h-cart-banner);
}
/* Pokud je otevřená cookie lišta, připočti ji navíc */
body.cookie-open{
  /* Pozn.: bez JS „max()“ mezi dvěma proměnnými neuděláme, proto vrstvíme pravidla: */
  --cart-bottom-offset: calc(var(--cart-bottom-offset) + var(--h-cookie));
}
/* Když je vidět obojí současně (bezpečná pojistka) */
body.cookie-open:has(#cart-banner.visible){
  --cart-bottom-offset: calc(var(--h-cart-banner) + var(--h-cookie));
}

/* ---------- OVERLAY (společný pro desktop i mobil) ---------- */
.cart-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  z-index: var(--cart-z-overlay);
}
.cart-overlay.is-visible{ opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce){
  .cart-overlay{ transition: none; }
}

/* =================================================================
   🖥️ DESKTOP DRAWER (≥ 992px)
   ================================================================= */
@media (min-width: 992px){
  .cart-drawer{
    position: fixed;
    top: 0;
    right: 0;
    /* ❗️full-height panel, žádný bottom offset */
    width: min(var(--cart-width), 100vw);
    height: 100vh;
    transform: translateX(100%);
    background: #fff;
    border-top-left-radius: var(--cart-radius);
    border-bottom-left-radius: var(--cart-radius);
    box-shadow: -8px 0 24px rgba(0,0,0,.14);
    display: flex; flex-direction: column;
    z-index: var(--cart-z-panel);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
  }
  .cart-drawer.is-open{ transform: translateX(0); }
  @media (prefers-reduced-motion: reduce){
    .cart-drawer{ transition: none; }
  }

  .cart-drawer__head{
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 28px 32px !important;
    border-bottom: 1px solid #eee;
    background: #fff;
    position: sticky; top: 0; z-index: 1; /* sticky hlavička pro jistotu */
  }
  .cart-title,
  .cart-drawer__head h3 { font: 700 1.1rem/1.1 'Inter', system-ui, sans-serif; color: #111; margin: 0; padding: 0; }
  .cart-close{
    border: 0; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: #777; padding: 6px 8px; border-radius: 8px;
  }
  .cart-close:hover{ color:#000; background:#f3f3f3; }

  .cart-drawer__body{
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 14px 16px;
    background: #fff;
  }

  .cart-drawer__foot{
    position: sticky; bottom: 0; z-index: 1;
    background: #fafafa;
    border-top: 1px solid #eaeaea;
    padding: 14px;
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  }
}

/* =================================================================
   📱 MOBILNÍ BOTTOM-SHEET (≤ 991.98px)
   ================================================================= */
@media (max-width: 991.98px){
  .m-cart{
    position: fixed; left: 0; right: 0; bottom: 0;
    height: min(85vh, 640px);
    background: #fff;
    border-radius: var(--cart-radius) var(--cart-radius) 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.16);
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    z-index: var(--cart-z-panel);
    display: flex; flex-direction: column;
    will-change: transform;
    /* respektuj GDPR lištu */
    margin-bottom: var(--cart-bottom-offset);
  }
  .m-cart.is-open{ transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .m-cart{ transition: none; }
  }

  /* hlavička + „úchyt“ */
  .m-cart__head{
    position: sticky; top: 0; background: #fff; z-index: 1;
    padding: 10px 12px 8px; border-bottom: 1px solid #eee;
  }
  .m-cart__grab{ display:grid; place-items:center; padding-top: 2px; }
  .m-cart__handle{ width: 36px; height: 4px; border-radius: 999px; background:#d0d0d0; }

  .m-cart__bar{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top: 6px;
  }
  .m-cart__title{ font: 700 1rem/1.1 'Inter', system-ui, sans-serif; color:#111; margin:0; }
  .m-cart__close{
    appearance:none; border:0; background:transparent; padding:6px 8px; border-radius:8px; cursor:pointer; color:#777; font-size:20px;
  }
  .m-cart__close:hover{ color:#000; background:#f3f3f3; }

  .m-cart__body{
    flex: 1 1 auto; min-height: 0;
    overflow:auto; -webkit-overflow-scrolling: touch;
    padding: 8px 12px 16px;
  }
  .m-cart__foot{
    position: sticky; bottom: 0; background:#fff; z-index: 1;
    border-top: 1px solid #eee; padding: 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* při otevření zamkni body scroll + schovej sticky banner */
  body.cart-open{ overflow: hidden; }
  body.cart-open #cart-banner{ transform: translateY(120%); opacity: 0; pointer-events: none; }
}

/* =================================================================
   🧱 SPOLEČNÝ OBSAH SEZNAMU POLOŽEK (desktop i mobil sdílejí)
   ================================================================= */
.cart-list{ list-style:none; margin:0; padding:0; }
.cart-empty{
  padding: 16px; text-align: center; color: #666; font-weight: 600;
  background: #fbfbfb; border: 1px dashed #e5e5e5; border-radius: 10px;
}

.cart-row, .cart-list .row, .cart-item{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid #f1f1f1;
}
.cart-row:last-child, .cart-list .row:last-child, .cart-item:last-child{ border-bottom: none; }

/* obrázek */
.cart-item-img{
  flex: 0 0 56px; width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden; background: #f4f4f4;
}
.cart-item-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* texty */
.cart-item-info{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cart-item-name{
  font-weight: 700; color: #222; font-size: .98rem; line-height: 1.3;
  margin: 0 0 2px 0; word-break: break-word;
}
.cart-item-variant{ font-size: .86rem; color: #777; }

/* pravý sloupec: qty + cena + remove */
.cart-item-actions{
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

/* qty */
.cart-qty{ display:inline-flex; align-items:center; gap: 6px; }
.cart-qty button{
  width: 28px; height: 28px;
  border: 1px solid #d9d9d9; border-radius: 6px;
  background: #fafafa; color: #333; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.cart-qty button:hover{ background:#f0f0f0; }
.cart-qty .qty, .cart-qty .quantity{
  min-width: 22px; text-align:center; font-weight: 700; color:#333;
}

/* cena + odebrat */
.cart-price{ font-weight: 800; color: #2e7d32; white-space: nowrap; }
.cart-remove{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:#a8a8a8; font-size: 20px; line-height: 1; padding: 2px 6px;
}
.cart-remove:hover{ color:#d32f2f; }

/* kompaktnější rozvržení na užších desktopech */
@media (max-width: 1200px){
  .cart-item-actions{ gap: 4px; }
}

/* =================================================================
   🧾 ZÁPATI – součet + doprava + tlačítka
   ================================================================= */
.cart-foot__row{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 8px;
  font: 700 1.05rem/1.2 'Inter', system-ui, sans-serif;
  color:#111;
}
.cart-foot__ship{
  font: 600 .92rem/1.2 'Inter', system-ui, sans-serif;
  color:#666; margin-bottom: 10px;
}
.cart-foot__ship.is-free{ color:#1a7f37; }

.cart-foot__actions{
  display:flex; gap: 10px; justify-content:flex-end; flex-wrap: wrap;
}
.btn-cart, .btn-checkout{
  appearance:none; border:0; cursor:pointer;
  padding: .8rem 1.1rem; border-radius: 10px; font-weight: 700;
  transition: transform .1s ease, box-shadow .2s ease, background .25s ease;
}
.btn-cart{
  background:#f5f5f5; color:#111; border:1px solid #e6e6e6;
}
.btn-cart:hover{ background:#eee; }
.btn-checkout{
  background: linear-gradient(145deg, #43B047, #388E3C);
  color:#fff; box-shadow: 0 6px 14px rgba(0,0,0,.15);
}
.btn-checkout:hover{ background: linear-gradient(145deg, #388E3C, #2e7031); transform: translateY(-1px); }

@media (max-width: 991.98px){
  .btn-cart, .btn-checkout{ width: 100%; }
}

/* =================================================================
   🧯 INTEROP – existující sticky banner a cookie bar
   ================================================================= */
body:has(.cart-drawer.is-open) #cart-banner{
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
body:has(.cart-drawer.is-open) #cookie-banner{
  transform: none; opacity: 1; pointer-events: auto;
}

/* =================================================================
   ♿️ FOCUS (pouze v košíku)
   ================================================================= */
.cart-qty button:focus-visible,
.cart-remove:focus-visible,
.btn-cart:focus-visible,
.btn-checkout:focus-visible,
.cart-close:focus-visible,
.m-cart__close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(67,176,71,.22);
  border-color: #43B047;
}

/* =================================================================
   🪄 DOPLŇKY / STAVY
   ================================================================= */
.cart-note{
  margin: 8px 0 0; font-size: .9rem; color:#666;
}
.cart-saving{ color:#1a7f37; font-weight: 700; }

/* Pro opravdu dlouhé názvy nerušící layout */
.cart-item-name,
.cart-item-variant{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.cart-item-name{ -webkit-line-clamp: 2; }
.cart-item-variant{ -webkit-line-clamp: 1; }

/* =================================================================
   KONEC BLOKU
   ================================================================= */


/* =================================================================
   🧱 NOVÝ LAYOUT POLOŽKY – množství pod názvem
   ================================================================= */
.cart-list{ list-style:none; margin:0; padding:0; }

.cart-item{
  display:flex; gap:14px;
  padding:14px 0;
  border-bottom:1px solid #eee;
}
.cart-item:last-child{ border-bottom:1px solid #eee; }

.cart-item-img{
  flex:0 0 64px;
  width:64px; height:64px;
  border-radius:10px;
  overflow:hidden;
  background:#f6f6f6;
}
.cart-item-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.cart-item-info{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-start;
}

/* Název a varianta nahoře */
.cart-item-name{
  font-weight:700; color:#222;
  font-size:1rem; line-height:1.35;
  margin:0 0 4px 0;
  word-break:break-word;
}
.cart-item-variant{
  font-size:.9rem; color:#777; margin-bottom:8px;
}

/* Druhý řádek: množství + cena + remove */
.cart-item-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}

/* množství vlevo */
.cart-qty{
  display:inline-flex; align-items:center; gap:6px;
}
.cart-qty button{
  width:30px; height:30px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fafafa;
  color:#222; font-weight:700;
  cursor:pointer;
}
.cart-qty button:hover{ background:#f0f0f0; }
.cart-qty .qty{
  min-width:24px; text-align:center; font-weight:700; color:#111;
}

/* cena + odebrat vpravo */
.cart-item-right{
  display:flex; align-items:center; gap:8px;
}
.cart-price{
  font-weight:700; color:#2e7d32;
  white-space:nowrap; font-size:1rem;
}
.cart-remove{
  appearance:none; border:0; background:transparent;
  font-size:20px; line-height:1;
  color:#999; cursor:pointer; padding:2px 6px;
}
.cart-remove:hover{ color:#d32f2f; }

/* jemný hover efekt na celý blok */
.cart-item:hover{ background:#fafafa; border-radius:8px; padding-left:4px; transition:background .2s ease, padding-left .2s ease; }

/* mobile stacking */
@media (max-width:768px){
  .cart-item{ flex-direction:row; align-items:flex-start; }
  .cart-item-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
  .cart-item-right{ justify-content:flex-start; }
}

.m-menu__grid .m-cat.is-active > span { color: #189a3d; }

/* aktivní kategorie v mobilním menu */
.m-cat.is-active span { color: var(--green, #189a3d); }
.m-cat.is-active .m-cat-icon { filter: saturate(1.3) hue-rotate(-20deg); }

.mega-backdrop.is-visible{display:block;}
    /* ⛔️ Zabrání zobrazení desktopového draweru na mobilu (jinak „sedí“ pod patičkou) */
    @media (max-width: 991.98px){
      #cart-drawer{ display:none !important; }
    }

/* ✅ Mega backdrop patch (ponechávám) */
.mega-backdrop.is-visible { display:block; }

/* 🛑 Nikdy nezobrazuj mobilní sheet (.m-cart) na desktopu */
@media (min-width: 992px){
  .m-cart { 
    display: none !important;  /* schovej mobilní sheet jen na desktopu */
  }
}

@media (max-width: 991.98px){
  /* na mobilu může sheet existovat, ale desktopový drawer ne */
  #cart-drawer { 
    display: none !important;
  }
  /* .m-cart se už dále v souboru definuje (fullscreen bottom sheet),
     takže tady už ji nemusíme přenastavovat */
}/* 🛑 Nikdy nezobrazuj mobilní sheet (.m-cart) na desktopu */
@media (min-width: 992px){
  .m-cart { 
    display: none !important;  /* schovej mobilní sheet jen na desktopu */
  }
}

@media (max-width: 991.98px){
  /* na mobilu může sheet existovat, ale desktopový drawer ne */
  #cart-drawer { 
    display: none !important;
  }
  /* .m-cart se už dále v souboru definuje (fullscreen bottom sheet),
     takže tady už ji nemusíme přenastavovat */
}

@media (max-width: 991.98px){
  .m-cart__body{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;  /* vynutí vertikální scroll i na iOS */
  }
}

/* pokud by tělo mělo zároveň m-menu-open, košík má přednost */
body.cart-open{
  touch-action: auto !important;
}
body.cart-open.m-menu-open{
  touch-action: auto !important;
}

/* Mobilní košík: jediný scroller je tělo */
@media (max-width: 991.98px){
  .m-cart{
    display: flex;
    flex-direction: column;
    /* mobilní „100vh“ přes proměnnou – fix na mobilní prohlížeče */
    height: min(calc(var(--vh, 1vh) * 100), 640px);
  }

  .m-cart__head,
  .m-cart__foot{
    flex: 0 0 auto;
    position: sticky;  /* drží se nahoře/dole v rámci sheetu */
    z-index: 1;
    background: #fff;
  }
  .m-cart__head{ top: 0; }
  .m-cart__foot{ bottom: 0; }

  .m-cart__body{
    flex: 1 1 auto;
    min-height: 0;                     /* klíč k funkčnímu scrolleru ve flexu */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;  /* iOS inertial */
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    /* fallback bez JS proměnných: vyplň celé „okno“ sheetu */
    max-height: none;

    /* když chceš tvrdý strop přes proměnné: */
    max-height: calc(
      (var(--vh, 1vh) * 100)
      - var(--cart-head-h, 0px)
      - var(--cart-foot-h, 0px)
      - var(--cart-bottom-offset, 0px)
    );
  }
}

/* Overlay a „globální lock“ nesmí brát gesta, když je otevřený košík */
.cart-overlay{ touch-action: none !important; }

/* Když je otevřené plné menu, neblokuj svět při otevřeném košíku */
body.m-menu-open:not(.cart-open) > :not(#m-fullscreen-menu){
  pointer-events: none !important;
}

/* 🔒 Vypínej pointer-events jen na mobilu (fullscreen sheet).
   Desktop tím pádem zůstane interaktivní (drawer funguje a scrolluje). */
@media (max-width: 991.98px){
  /* Když je otevřený košík, dovol interakce na overlay + mobilní košík, ostatní „vypni“ */
  body.cart-open > :not(.m-cart):not(.cart-overlay){
    pointer-events: none !important;
  }
}

/* ✅ Desktop drawer – jistota, že je interaktivní a scrolluje se uvnitř */
#cart-drawer{ pointer-events: auto; }
#cart-drawer-body, .cart-drawer__body, .cart-body {
  overflow: auto;
  max-height: 100vh;
  overscroll-behavior: contain;
}

/* ===== Mobile cart base (closed by default) ===== */
@media (max-width: 991.98px){
  .m-cart{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;                         /* sheet u spodního okraje */
    display: flex;
    flex-direction: column;
    height: min(calc(var(--vh, 1vh) * 100), 640px);

    /* CLOSED STATE */
    transform: translateY(100%);       /* mimo obrazovku */
    opacity: 0;
    pointer-events: none;

    /* animace výsuvu */
    transition: transform .28s ease, opacity .2s ease;
    z-index: 3010;
  }

  /* OPEN STATE */
  .m-cart.is-open{
    transform: translateY(0);          /* na obrazovku */
    opacity: 1;
    pointer-events: auto;
  }

  .m-cart__head,
  .m-cart__foot{
    flex: 0 0 auto;
    position: sticky;
    z-index: 1;
    background: #fff;
  }
  .m-cart__head{ top: 0; }
  .m-cart__foot{ bottom: 0; padding-bottom: env(safe-area-inset-bottom); }

  .m-cart__body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    max-height: calc(
      (var(--vh, 1vh) * 100)
      - var(--cart-head-h, 0px)
      - var(--cart-foot-h, 0px)
      - var(--cart-bottom-offset, env(safe-area-inset-bottom, 0px))
    );
  }
}

/* ===== Overlay – neklikatelný když je schovaný ===== */
.cart-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 3000;
}
.cart-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* Z-indexy vůči headeru */
.site-header,.header,.m-header{ z-index: 2000; }
#cart-drawer{ z-index: 3020; }

/* Na mobilu při otevřeném košíku vypneme kliky mimo sheet + overlay */
@media (max-width: 991.98px){
  body.cart-open > :not(.m-cart):not(.cart-overlay){
    pointer-events: none !important;
  }
}

/* Desktop drawer scroller */
#cart-drawer-body, .cart-drawer__body, .cart-body{
  overflow: auto;
  max-height: 100vh;
  overscroll-behavior: contain;
}

/* iPhone notch */
@supports (padding-top: env(safe-area-inset-top)){
  .m-cart__head{ padding-top: env(safe-area-inset-top); }
}

/* 🧱 MOBILE CART = vždy fullscreen */
@media (max-width: 991.98px){
  /* panel přes celé okno (bez 640px limitu) */
  .m-cart{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* preferuj moderní jednotky, fallback na vlastní --vh (nastavuje JS) */
    height: 100dvh;                 /* Chrome/iOS 16+, Android */
    height: 100svh;                 /* další moderní prohlížeče */
    height: calc(var(--vh, 1vh) * 100); /* fallback */
    margin-bottom: 0;               /* žádný offset */
    border-radius: 0;               /* fullscreen = rovné okraje (klidně si nech) */
  }

  /* obsah scroller vyplní zbytek mezi sticky head/foot */
  .m-cart__body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;

    max-height: calc(
      100dvh
      - var(--cart-head-h, 0px)
      - var(--cart-foot-h, 0px)
      - env(safe-area-inset-bottom, 0px)
    );
    /* fallback pro starší prohlížeče */
    max-height: calc(
      (var(--vh, 1vh) * 100)
      - var(--cart-head-h, 0px)
      - var(--cart-foot-h, 0px)
      - env(safe-area-inset-bottom, 0px)
    );
  }

  /* jistota nad spodními lištami + bezpečná zóna iPhone */
  .m-cart__foot{
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* při otevření zamkni body scroll (ať se nehýbe pozadí) */
  body.cart-open{ overflow: hidden; }
}


/* === Category Banner – zelený panel s radius ===================== */
/* Paleta – můžeš jemně doladit odstín */
:root{
  --banner-green-bg: #eaf8ed;   /* světle zelené pozadí panelu */
  --banner-green-border: #c7ecd1;/* ohraničení panelu */
  --banner-green-accent: #2e7d32;/* nadpis, focus ring */
  --tile-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}

/* obal drží zarovnání jako slider */
.category-banner{
  display:flex;
  justify-content:center;
  margin: clamp(20px, 4vw, 40px) auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* ⬇️ TADY je zelený panel – zaoblené hrany + border */
.category-banner > .category-banner__inner{
  max-width: 1600px; /* stejná „vizuální“ šířka jako slider */
  width: 100%;
  background: var(--banner-green-bg);
  border: 1px solid var(--banner-green-border);
  border-radius: 16px;                 /* stejné zaoblení jako slider */
  box-shadow: 0 4px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  padding: clamp(20px, 3vw, 32px);
  position: relative;
  /* ochrana proti přepisům starších pravidel */
  background-clip: padding-box;
}

/* Nadpis v barvě akcentu */
.category-banner__title{
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--banner-green-accent);
  margin: 0 0 clamp(12px, 1.5vw, 20px);
}

/* Grid dlaždic – bílé kartičky na zeleném panelu */
.category-tiles{
  --gap: clamp(10px, 2vw, 20px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-tiles .tile{
  display: grid;
  place-items: center;
  text-align: center;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eceff1;
  padding: 16px 8px;
  min-height: 132px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--tile-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline-offset: 3px;
}

.category-tiles .tile:focus-visible{
  outline: 2px solid var(--banner-green-accent);
}

@media (prefers-reduced-motion: no-preference){
  .category-tiles .tile:hover{
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08);
    border-color: #e0e0e0;
  }
}

.category-tiles .tile .tile-icon{
  width: clamp(52px, 5vw, 72px);
  height: auto;
  margin-bottom: 8px;
}
.category-tiles .tile .tile-title{
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.25;
}

/* === Help Banner ============================================== */
:root {
  --help-purple-bg:     #FEE8DF;  /* jemná meruňková / lososová */
  --help-purple-border: #E8B8A0;  /* teplá korálová */
  --help-purple-accent: #C05530;  /* terakota */
}

.help-banner {
  display: flex;
  justify-content: center;
  margin: clamp(40px, 6vw, 80px) auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.help-banner__inner {
  max-width: 1100px;
  width: 100%;
  background: var(--help-purple-bg);
  border: 1px solid var(--help-purple-border);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}

.help-banner__title {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--help-purple-accent);
  margin: 0 0 8px;
}

.help-banner__text {
  color: #444;
  font-size: clamp(15px, 1.2vw, 17px);
  margin-bottom: 20px;
}

.btn-help {
  background: var(--help-purple-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background .25s ease, transform .15s ease;
}

.btn-help:hover,
.btn-help:focus-visible {
  background: #9A3E1E;
  transform: translateY(-1px);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-help { transition: none; }
}

/* Gradient pozadí banneru */
.help-banner__inner {
  background: linear-gradient(180deg, #FEE8DF 0%, #FDD4BF 100%);
}

/* Formulář když je uvnitř fialového banneru */
#help-sheet.help-sheet--in-banner {
  padding: 0;               /* zruší mezery sekce */
  background: transparent;  /* žádné pozadí sekce */
}
#help-sheet.help-sheet--in-banner .container {
  max-width: 900px;
  margin-inline: auto;
}
#help-sheet.help-sheet--in-banner .help-card {
  /* může zůstat jak je; případně lehčí stín, ať sedí do fialového panelu */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* 📐 Help sheet ve fialovém banneru – stejné rozměry jako „horní“ verze */
#help-banner .help-sheet.help-sheet--in-banner {
  position: static;             /* ať se chová jako normální blok */
  inset: auto;
  width: 100%;
  display: block;
  padding: 0;                   /* padding řeší karta uvnitř */
}

#help-banner .help-sheet.help-sheet--in-banner .help-card {
  margin: 0 auto;
  width: min(680px, 92vw);      /* stejná logika šířky jako nahoře */
  max-width: 680px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* 🖱️ aby v banneru nepůsobil stísněně */
#help-banner .help-sheet.help-sheet--in-banner .help-card-inner {
  padding: 16px;
}

/* 🟣 Pomocný formulář – na plnou šířku banneru */
.help-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.5rem 1rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Vnitřní obsah – roztáhnout vstupy */
#help-form {
  width: 100% !important;
}

/* 🟣 HELP ve fialovém banneru – pole přes celou šířku banneru */
.help-banner__inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* zruš „zúžující“ container */
#help-sheet.help-sheet--in-banner .container{
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* karta formuláře nesmí mít vlastní max-width ani boční padding */
#help-banner .help-sheet.help-sheet--in-banner .help-card,
.help-sheet--in-banner .help-card{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;          /* žádné odsazení z boků */
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* samotný formulář = 100 % šířky banneru */
.help-sheet--in-banner #help-form{
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* vstupy/textarea až k okrajům fialového panelu */
.help-sheet--in-banner #help-message,
.help-sheet--in-banner #help-email{
  display: block;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  border-radius: 8px;             /* klidně 0, když chceš úplně „edge-to-edge“ */
  border: 1px solid #ccc;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

/* o fous vyšší textarea */
.help-sheet--in-banner #help-message{
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}

@media (max-width: 400px){
  .help-sheet--in-banner .help-card{ padding-inline: 8px !important; }
}

/* 🟣 Schovat křížek jen ve verzi ve fialovém banneru */
.help-sheet--in-banner .help-close {
  display: none !important;
}

/* =========================================================
   🟡 Origin banner – „Kávy podle původu — právě skladem“
   (dlaždice jako v mega menu + vodorovný slider na všech šířkách)
   ========================================================= */

/* 💛 Barvy a proměnné */
:root{
  --banner-yellow-bg:#fff8dc;
  --banner-yellow-border:#f3e6a9;
  --banner-yellow-accent:#9a7b00;
}

/* 1) Wrapper */
#origin-banner.category-banner{
  margin:clamp(20px,4vw,40px) auto;
  padding:0 clamp(16px,3vw,32px);
  background:transparent !important;
  border:0 !important;
  width:auto;
}

/* 2) Vnitřní panel */
#origin-banner .category-banner__inner{
  max-width:1600px !important;
  width:100%;
  margin:0 auto;
  padding:clamp(20px,3vw,32px);
  background:var(--banner-yellow-bg);
  border:1px solid var(--banner-yellow-border);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
}

/* 3) Nadpis */
#origin-banner .category-banner__title{
  text-align:center;
  color:var(--banner-yellow-accent);
  margin-bottom:1.2rem;
}

/* 4) Dlaždice = STEJNĚ jako v mega menu, ale v JEDNOM ŘÁDKU se sliderem */
#origin-tiles.category-tiles--flags{
  display:flex !important;
  flex-wrap:nowrap !important;            /* jeden řádek */
  gap:8px !important;
  padding:4px 2px 10px !important;
  margin:0 !important;
  list-style:none !important;

  justify-content:center;                 /* když je položek málo, centrovat */
  overflow-x:auto !important;             /* když je hodně, posouvat do strany */
  overflow-y:hidden !important;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

/* decentní scrollbar */
#origin-tiles::-webkit-scrollbar{ height:8px; }
#origin-tiles::-webkit-scrollbar-thumb{ background:#e5e0b3; border-radius:999px; }
#origin-tiles{ scrollbar-color:#e5e0b3 transparent; scrollbar-width:thin; }

/* 5) Buňky a karty = kopie z mega menu (120px čtverec) */
#origin-tiles > li{ flex:0 0 120px !important; }
#origin-tiles .tile{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  padding:10px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  border:1px solid #e7e7e7 !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111 !important;
  text-decoration:none !important;
  font-weight:600 !important;
  scroll-snap-align:start;
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease, color .2s ease;
}
#origin-tiles .tile:hover{
  background:#fff; border-color: var(--green); color:#111; transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* 6) Vlajky – 44×44 jako v menu + iOS/Safari vykreslovací hack */
#origin-tiles .tile .tile-icon{
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  display:block !important;
}
#origin-tiles .tile .tile-icon[src$=".svg"]{
  /* Safari občas SVG „schová“, pevné rozměry + prázdný GIF donutí render */
  background:transparent url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==") no-repeat -9999px -9999px;
}

/* 7) Titulek – dvouřádkový jako v menu */
#origin-tiles .tile .tile-title{
  font-size:.88rem !important;
  line-height:1.3 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* 8) Responsivní šířka buňky pro menší obrazovky */
@media (max-width: 640px){
  #origin-tiles > li{ flex:0 0 110px !important; }
}

/* 9) Fallback když se vlajka nenačte */
#origin-tiles .tile.no-flag{
  background:
    linear-gradient(0deg,#fff,#fff) padding-box,
    repeating-linear-gradient(45deg,#eee 0 8px,#f6f6f6 8px 16px) border-box;
}
#origin-tiles .tile.no-flag::before{
  content:"🌍";
  font-size:34px; display:block; margin:6px 0 8px; opacity:.75;
}




/* =========================================================
   🟢 Roaster banner – stejné karty jako v mega menu (Pražírny)
   ========================================================= */

/* 1) Wrapper a průhledné pozadí panelu */
#roaster-banner.category-banner{
  margin: clamp(20px, 4vw, 40px) auto;
  padding: 0 clamp(16px, 3vw, 32px);
  background: transparent !important;
  border: 0 !important;
  width: auto;
}
#roaster-banner .category-banner__inner{
  max-width: 1600px !important;
  width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 24px);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#roaster-banner .category-banner__title{
  text-align: center;
  color: var(--green-d, #2e7d32);
  margin: 0 0 1rem;
}

/* 2) Dlaždice – stejné DIMENZE jako v menu „Pražírny“ */
#roaster-tiles.category-tiles--roasters{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 4px !important;
  margin: 0 !important;
  list-style: none !important;
}

/* šířka buňky odpovídá menu: 140px (120px na užších) */
#roaster-tiles > li{
  flex: 0 0 140px !important;
}
@media (max-width: 640px){
  #roaster-tiles > li{ flex-basis: 120px !important; }
}

/* karta = poměr 3:4 + jednotná výška přes aspect-ratio */
#roaster-tiles .tile{
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;          /* vyšší karta */
  padding: 12px 8px 14px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  border: 1px solid #e7e7e7 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: background .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease, color .2s ease;
}
#roaster-tiles .tile:hover{
  background: #fff;
  border-color: var(--green, #43B047);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* 3) Logo – stejné jako v menu */
#roaster-tiles .tile .tile-icon{
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  display: block !important;
  margin-top: 2px !important;
}

/* 4) Název – až 4 řádky, fixní výška textového bloku */
#roaster-tiles .tile .tile-title{
  font-size: .9rem !important;
  line-height: 1.3 !important;
  text-align: center !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;              /* povol až 4 řádky */
  overflow: hidden !important;

  min-height: calc(1.3em * 4) !important;        /* jednotná výška */
  color: var(--green-d, #2e7d32);
}

/* 5) Mobil – horizontální scroller se stejnými kartami */
@media (max-width: 768px){
  #roaster-tiles.category-tiles--roasters{
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  #roaster-tiles > li{
    scroll-snap-align: start;
  }
  #roaster-tiles::-webkit-scrollbar{ height: 8px; }
  #roaster-tiles::-webkit-scrollbar-thumb{
    background: #d1d1d1; border-radius: 999px;
  }
  #roaster-tiles{ scrollbar-color: #d1d1d1 transparent; scrollbar-width: thin; }
}

/* jen na detailu */
.help-on-product .help-banner--purple { margin-bottom: 0; }
#help-sheet-product.section { margin-top: 0; }


/* Základní tlačítko (pro jistotu) */
.product-detail-button {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}



/* Košík: odkazy na produkt – bez modré a bez podtržení */
#cart-drawer .cart-item-name a,
#cart-drawer .cart-item__thumb,
.m-cart .cart-item-name a,
.m-cart .cart-item__thumb {
  color: inherit;            /* převezme barvu textu okolí */
  text-decoration: none;     /* bez podtržení */
}

/* Volitelné: jemné zvýraznění při najetí/fokusu */
#cart-drawer .cart-item-name a:hover,
.m-cart .cart-item-name a:hover {
  text-decoration: none;
}

#cart-drawer .cart-item-name a:focus-visible,
.m-cart .cart-item-name a:focus-visible {
  outline: 2px solid currentColor; /* přístupný focus */
  outline-offset: 2px;
}

.product-detail-button.is-soldout {
  background: #b00020;       /* nebo tvá brand červená */
  cursor: not-allowed;
  opacity: .9;
}
.product-detail-image.is-soldout img {
  filter: grayscale(0.2);
}


.product-detail-button.is-soldout {
  background: #b00020;
  cursor: not-allowed;
  opacity: .9;
}


/* Backdrop a panely: když jsou skryté, ať NIKDY nechytají pointery */
.mega-backdrop[hidden],
.mega-backdrop:not(.is-visible) {
  display: none !important;
  pointer-events: none !important;
}

.m-menu[aria-hidden="true"],
.mega[aria-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Pro jistotu: všechny klikací prvky bez 300ms delay hintu */
button,
a,
.size-option-button,
.menu-trigger,
.m-cat,
.tile {
  touch-action: manipulation;
}


/* Všechno, co má jen vizuální hover efekt */
@media (hover: hover) and (pointer: fine) {
  .btn,
  .btn-primary,
  .cta,
  .banner-link,
  .card-link {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .btn:hover,
  .btn-primary:hover,
  .cta:hover,
  .banner-link:hover,
  .card-link:hover {
    transform: scale(1.03);
    /* další hover styly… */
  }
}

/* 🧯 iOS / mobilní fix: vypnout sticky banner, ať nedělá glitch mezi bannerem a mobile headerem */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    .promo-topbar {
      position: static !important;   /* nebude sticky, prostě normálně na vrchu stránky */
      top: auto !important;
      margin: 0 !important;
      border: 0 !important;
      transform: none !important;
      opacity: 1 !important;
      height: auto !important;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
    }

    /* mobile header hned pod tím, bez offsetů */
    #m-header {
      position: sticky !important;
      top: 0 !important;
      margin: 0 !important;
      border: 0 !important;
    }

    /* když byl banner „autohide“, tak tu třídu na iOS ignoruj */
    .promo-topbar.is-collapsed {
      transform: none !important;
      opacity: 1 !important;
      height: auto !important;
      padding-top: 4px !important;
      padding-bottom: 4px !important;
      margin: 0 !important;
      border: 0 !important;
      pointer-events: auto !important;
    }
  }
}


/* 🌼 Bannerový styl pro tlačítko "Potřebujete poradit s výběrem?" */
#open-help {
  display: inline-block;
  width: 100%;
  max-width: 420px; /* aby se na mobilu neroztáhlo přes celý viewport */
  background: linear-gradient(135deg, #fff7e1, #ffe9b0);
  color: #4b2c00;
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  padding: 1.1rem 2.4rem;
  border: none;
  border-radius: 1.8rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  margin-inline: auto; /* centrování */
}

/* Hover / Focus – světlejší gradient + nadzvednutí */
#open-help:hover,
#open-help:focus-visible {
  background: linear-gradient(135deg, #fff1c8, #ffd879);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  outline: none;
}

/* Aktivní kliknutí – jemné stlačení */
#open-help:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 🌈 Vizuální sjednocení s bannery – lehký přechod a prostor kolem */
.help-trigger {
  background: linear-gradient(135deg, #fffdf6, #fff7e3);
  padding: 2.5rem 0;
  text-align: center;
  border-radius: 2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  margin: 2rem auto;
  width: min(90%, 700px);
}

/* 📱 Responsivní doladění pro mobily */
@media (max-width: 600px) {
  #open-help {
    font-size: 1.1rem;
    padding: 1rem 1.6rem;
  }
  .help-trigger {
    padding: 2rem 1rem;
    border-radius: 1.4rem;
  }
}


/* =========================================================
   📱 MOBILE HEADER: pevná mezera nahoře + žádný overflow
   ========================================================= */

@media (max-width: 1024px) {
  /* Header se chová jako v původním kódu (sticky / slim),
     jen mu uvnitř vytvoříme "polštář" 12px nahoře. */
  #m-header {
    max-width: 100%;
  }

  /* Pevná mezera nad obsahem headeru – funguje i na Androidu
     bez závislosti na safe-area proměnných. */
  #m-header::before {
    content: "";
    display: block;
    height: 12px;          /* tady je ta "pevná mezera" – klidně změň na 8/10/16 px */
  }

  /* jistota, že ani vnitřní řádek nepřetáhne šířku */
  #m-header .m-header__bar,
  #m-header .m-row,
  #m-header .m-search {
    max-width: 100%;
  }
}


/* 🔎 Našeptávání – společný styling pro všechny inputy */
.r-header-search,
.m-search {
  position: relative;
}

/* Kontejner s návrhy */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;

  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  padding: 4px 0 0;
  max-height: 420px;
  overflow-y: auto;

  z-index: 1500;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Hidden stav (JS používá hidden atribut) */
.search-suggestions[hidden] {
  display: none !important;
}

/* Reset seznamu */
.search-suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Jedna položka */
.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-suggestion-item:hover {
  background: #f5f5f5;
}

/* Náhled obrázku vlevo (jen u produktů) */
.search-suggestion-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f3f3;
}

.search-suggestion-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Textová část napravo od náhledu */
.search-suggestion-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Titulek + cena v jedné řádce */
.search-suggestion-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
}

/* Cena napravo, menší */
.search-suggestion-price {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #444;
}

/* Popisek pod titulkem */
.search-suggestion-desc {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* Spodní tlačítko „Zobrazit všechny výsledky“ */
.search-suggestion-footer {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid #eee;

  padding: 10px 14px 11px;
  background: #fafafa;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-suggestion-footer:hover {
  background: #f0f0f0;
}

/* 📱 Lehké doladění pro mobil */
@media (max-width: 768px) {
  .m-search .search-suggestions {
    border-radius: 10px;
    margin-top: 6px;
    max-height: 65vh;
  }

  .search-suggestion-thumb {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .search-suggestion-title {
    font-size: 13px;
  }

  .search-suggestion-desc {
    font-size: 11px;
  }
}


/* 💚 Zobrazení rozpisu slev i na mobilu */
.discount-breakdown,
.cart-discounts {
  margin-top:.5rem;
  font-size:.95rem;
  line-height:1.45;
  background:#f7f9f8;
  border:1px solid #e4efea;
  border-radius:.5rem;
  padding:.75rem;
}

/* Ujistíme se, že na mobilu nejsou skryté */
@media (max-width: 768px) {
  .discount-breakdown,
  .cart-discounts {
    display:block !important;
  }
}

.cart-discount-info {
  font-size: .9rem;
  background: #f7f9f8;
  border: 1px solid #e4efea;
  padding: .4rem .6rem;
  border-radius: .4rem;
  margin: .35rem 0;
}




/* ================== BADGES NA PRODUKTOVÝCH KARTÁCH – PASTEL ================== */

/* wrapper pro štítky v rohu obrázku */
.product .product-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

/* základní badge – světle pastelová pilulka */
.product-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: #fff7e6;          /* jemný žluto-krémový základ */
  color: #4a3b22;
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* NOVINKA – bude mít „zelený“ bestseller styl */
.product-badge.badge--new {
  background: #e0f7f1;
  border-color: #c5ece1;
  color: #166a52;
}

/* SLEVA – růžovo-červená pastel */
.product-badge.badge--sale {
  background: #ffe0e5;
  border-color: #ffc2cf;
  color: #a02238;
}

/* 🏅 BESTSELLER – šampaň zlatá, jemně zářivá */
.product-badge.badge--bestseller {
  background: linear-gradient(135deg, #FFF7B2, #FFD85A);
  border-color: #F2CF68;
  color: #5A3B00;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* hvězdička pro pocit úspěchu */
.product-badge.badge--bestseller::before {
  content: "★";
  margin-right: 4px;
  font-size: 0.9em;
  opacity: 0.95;
}

/* procento slevy – jen drobný offset */
.product-badge__percent {
  margin-left: 4px;
}

/* ========== CHUŤOVÉ IKONY ========== */
/* default (např. v detailu – tady ještě nejsou speciální úpravy) */
.product-flavour-icons{
  margin-top:.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .35rem;
  justify-content:flex-start;
}

/* ikona uvnitř tagu */
.product-flavour-icons .tag-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
}

/* text necháme defaultně viditelný, schováme jen v náhledu */
.product-flavour-icons .tag-label{
  display:inline;
}

/* ========== CHUŤOVÉ IKONY NA NÁHLEDECH PRODUKTŮ ========== */

/* wrapper fotky jako referenční box */
.product .product-image-wrapper {
  position: relative;
}

/* ========== CHUŤOVÉ IKONY NA KARTÁCH ========== */

/* sloupec ikonek v pravém horním rohu */
.product .product-image-wrapper .product-flavour-icons {
  position: absolute;
  top: 8px;
  right: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  z-index: 3;
}

/* čistá ikona bez badge stylu */
.product .product-image-wrapper .product-flavour-icons .tag--flavour {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* velikost ikonky — 3× 56px + 2× 4px gap = 176px, vejde se do 220px boxu */
.product .product-image-wrapper .product-flavour-icons .tag-icon {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  display: block;
}

/* text skrytý */
.product .product-image-wrapper .product-flavour-icons .tag-label {
  display: none !important;
}

/* mobil – stejná velikost jako desktop */
@media (max-width: 768px) {
  .product .product-image-wrapper .product-flavour-icons .tag-icon {
    width: 56px !important;
    height: 56px !important;
  }
}


/* ============================================== */
/* CHUŤOVÉ IKONY – DETAIL PRODUKTU (cca 40 px)    */
/* ============================================== */

/* wrapper v detailu */
#detail-flavour-tags .tag--flavour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-right: 8px;
}

/* samotná ikonka v detailu produktu */
#detail-flavour-tags .tag-icon {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  display: block;
}

/* text v detailu zatím necháme, pokud chceš schovat: */
/*
#detail-flavour-tags .tag-label {
  display: none !important;
}
*/

/* ============================= */
/* ⭐ Výrazné ceny při slevě */
/* ============================= */

/* Základní cena pod kartičkou */
.product-price {
  margin-top: 0.5rem;
  font-size: 15px;
}

/* Kartička se slevou */
.sale-box {
  display: inline-block;
  background: #ffe5e5;           /* pastelově červené pozadí */
  border-radius: 6px;
  padding: 6px 10px 8px;
  line-height: 1.3;
}

/* Horní proužek: "Sleva -XX %" (tmavší) */
.sale-box-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b0121c;                 /* tmavší červená */
  margin-bottom: 2px;
}

/* Spodní řádek s cenami */
.sale-box-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Nová cena – světlejší červená, výrazná */
.sale-box-prices .price-discounted {
  font-weight: 700;
  font-size: 15px;
  color: #d32f2f;                 /* světlejší červená */
}



/* Původní cena – šedá, přeškrtnutá */
.sale-box-prices .price-original {
  font-size: 12px;
  text-decoration: line-through;
  color: #9e9e9e;
}


/* titulek + cena na jedné řádce */
.search-suggestion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* hlavní cena */
.search-suggestion-price {
  white-space: nowrap;
  font-weight: 500;
}

/* původní cena – nenápadná */
.search-suggestion-price-old {
  margin-left: 4px;
  font-size: 0.9em;
  text-decoration: line-through;
  opacity: 0.55;
  font-weight: 400;
}


/* === Vyhledávání – layout hlavičky položky (název + cena) === */
.search-suggestion-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

/* cena se odtlačí doprava */
.search-suggestion-title .search-price {
  margin-left: auto;
}

/* === Základ ceny v našeptávání === */
.search-price {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* === Varianta se slevou === */
.search-price--sale {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Nová cena – červené pozadí, výrazná */
.search-price-discounted {
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: #ffe5e5; /* jemná červená */
  color: #c00000;
}

/* Původní cena – menší, přeškrtnutá, červený text */
.search-price-original {
  font-size: 0.8rem;
  text-decoration: line-through;
  color: #c00000;
  opacity: 0.8;
}

/* Sleva – badge v červeném textu */
.search-price-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c00000;
}


.price-original {
  color: #999;
  text-decoration: line-through;
  font-weight: 600;        
  opacity: 1;              
  margin-left: 8px;
}

.sale-box .price-original {
  font-size: 1em;
}

/* ===============================
   IKONKY A ŠTÍTKY – LISTING (náhled karet)
   =============================== */
.product-image-wrapper {
  position: relative;
}

/* Kontejner pro ikonky v náhledu (levý horní roh) */
.product-flags,
.product-flavour-icons {
  position: absolute;
  top: 8px;
  left: 8px;   /* ← na náhledu vlevo nahoře */
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 5;
}

/* Jednotlivé štítky (sleva, novinka, bestseller…) */
.product-flag {
  background: #d90429;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
}

/* Chutové ikonky v náhledu */
.product-flavour-icons .tag {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
}

.product-flavour-icons .tag-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

/* ===============================
   IKONKY – DETAIL PRODUKTU
   =============================== */

/* Detail produktu – badge na fotce do rohu + pod sebe */
.product-detail-image,
.product-detail-image-box {
  position: relative;
}

.product-detail-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

/* TADY je ten důležitý flex: na vnitřní .product-badges */
.product-detail-badges .product-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* Výchozí banner – nic neměň, jen doplň collapsed variantu */
#cart-banner {
  /* tvoje stávající styly */
}

/* ☕ Kávový asistent – overlay */
.assistant-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.assistant-sheet.hidden {
  display: none;
}
.assistant-card {
  max-width: 640px;
  width: 100%;
  max-height: min(90vh, 720px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.assistant-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.assistant-header h2 {
  margin: 0 0 .5rem;
}
.assistant-subtitle {
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: #555;
}
.assistant-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 1rem;
}
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ddd;
}
.step-dot.is-active {
  width: 20px;
  background: #3c7cff;
}

.assistant-step {
  display: none;
}
.assistant-step.is-active {
  display: block;
}
.assistant-step h3 {
  margin: 0 0 .5rem;
}
.assistant-step-sub {
  margin: 0 0 1rem;
  font-size: .9rem;
  color: #555;
}

/* Dlaždice */
.assistant-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .assistant-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.assistant-tile {
  text-align: left;
  border-radius: 12px;
  border: 1px solid #e3e5ea;
  padding: 10px 12px;
  background: #fafbff;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .08s ease;
}
.assistant-tile strong {
  font-size: .95rem;
}
.assistant-tile span {
  font-size: .85rem;
  color: #555;
}
.assistant-tile:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  border-color: #c4d0ff;
}
.assistant-tile.is-selected {
  border-color: #3c7cff;
  background: #f1f4ff;
  box-shadow: 0 4px 18px rgba(60,124,255,.28);
  transform: translateY(-1px);
}

/* Spodní tlačítka */
.assistant-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.assistant-footer .btn-primary {
  min-width: 140px;
}
.assistant-small {
  margin-top: 8px;
  font-size: .8rem;
  color: #666;
}

/* Výsledková sekce */
.assistant-section.hidden {
  display: none;
}
.assistant-intro {
  margin-bottom: 1rem;
}
.assistant-empty {
  font-size: .95rem;
  color: #555;
}



/* 🔹 Kávový asistent – promo banner na homepage */
.home-assistant-promo {
  margin: 2rem 0;
}

.home-assistant-promo__link {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;

  text-decoration: none;
  color: inherit;
}

/* zelený box (stejný look jako na /obchod/asistent/) */
.home-assistant-promo__banner {
  flex: 1 1 auto;
  background: linear-gradient(135deg, #e9ffe9, #d6f5d6);
  padding: 1.8rem 1.2rem;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(163, 220, 163, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* texty */
.home-assistant-promo__title {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #000;
}

.home-assistant-promo__subtitle {
  font-size: 1rem;
  color: #000;
  opacity: 0.85;
}

/* bílá kartička s ikonou napravo */
.home-assistant-promo__icon-card {
  flex: 0 0 150px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  display: flex;
  align-items: center;
  justify-content: center;

  /* KLÍČOVÉ – stejná výška jako zelený banner */
  align-self: stretch;
  padding: 1.8rem 1.2rem;

  /* odstranění pevné výšky */
  height: auto;
}

.home-assistant-promo__icon-card img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* Mobil – banner a ikonka pod sebou */
@media (max-width: 768px) {
  .home-assistant-promo__link {
    flex-direction: column;
    align-items: center;
  }

  .home-assistant-promo__icon-card {
    margin-top: 0.5rem;
    width: 120px;

    /* na mobilu chceme zpět pevnou výšku */
    height: 120px;

    align-self: center; /* už se nenatahujeme do výšky */
  }
}


.cart-price {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.cart-price-old {
  text-decoration: line-through;
  opacity: .7;
  font-weight: 400;
}

.cart-price-new {
  font-weight: 700;
}


.cart-item-price-old {
  text-decoration: line-through;
  opacity: .7;
  margin-right: .35rem;
}

.cart-item-price-current {
  font-weight: 600;
}


/* Flex rozložení slim lišty na mobilu */
.m-header__bar .m-row {
  display: flex;
  align-items: center;
}

/* Slim vyhledávání – ať neuteče přes šířku obrazovky */
.m-header__bar .m-search--slim {
  flex: 1 1 auto;   /* zabere zbytek místa mezi ikonami */
  width: auto;      /* přepíše případné width:100% */
  min-width: 0;     /* důležité pro Android – umožní zmenšení */
}

/* Ikony (menu, košík) mají jen svoji přirozenou šířku */
.m-header__bar .m-icon-btn {
  flex: 0 0 auto;
}

/* 🟢 Bestsellery – karty stejně velké jako v běžném listingu */
#bestsellers-products .product {
  flex: 0 0 var(--card-min, 240px); /* stejné min. jako grid v .products */
  scroll-snap-align: start;
}


#bestsellers-products .product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🖥️ Bestsellery – desktop jako horizontální slider s velkými kartami */
@media (min-width: 769px){
  #bestsellers-products{
    display: flex !important;
    flex-wrap: nowrap;
    gap: 1.5rem;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* Šířka karty = podobně jako v normálním listingu */
  #bestsellers-products .product{
    flex: 0 0 260px;        /* můžeš doladit 240–280px podle oka */
    scroll-snap-align: start;
  }

  #bestsellers-products::-webkit-scrollbar{
    height: 8px;
  }
  #bestsellers-products::-webkit-scrollbar-thumb{
    border-radius: 999px;
    background: rgba(0,0,0,.18);
  }
}

////// zelená spodní lišta mobil ///////

/* ======================================================================
   🧺 STICKY BANNER KOŠÍKU — DESKTOP
   ====================================================================== */
#cart-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #d5f7d5;
  color: #111;
  display: none;              /* ukáže až JS přes .visible */
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  font-weight: 600;
  z-index: 3000;
  flex-wrap: nowrap;
  gap: 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,.05);
  transition: opacity .24s ease;
}

#cart-banner.visible{
  display: flex;
}

/* horní řádek – desktop */
#cart-banner .cart-banner-top-row{
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* křížek – na desktopu schovaný */
.cart-banner-close{
  display: none;
  background: transparent;
  border: 0;
}

/* sleva v banneru */
#cart-banner-discount{
  font-size: .9rem;
}


/* ======================================================================
   📱 MOBIL
   ====================================================================== */
@media (max-width: 768px){

  #cart-banner{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 0.75rem 1rem 1.1rem;
    gap: .6rem;
  }

  /* horní řádek – jen text + křížek, bez „zeleného tlačítka“ */
  #cart-banner .cart-banner-top-row{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;      /* text přesně uprostřed */
    align-items: center;
    padding-right: 2rem;          /* místo pod křížkem */
    background: none !important;  /* 🔥 zruší zelený bar */
    border: 0 !important;
    box-shadow: none !important;
    margin: 0;
  }

  #cart-banner .cart-banner-text{
    font-size: 1rem;
    font-weight: 600;
    margin: 0 auto;
    background: none !important;
  }

  /* ČISTÝ ČERNÝ KŘÍŽEK VPRAVO – jediný „button“ */
  #cart-banner .cart-banner-close{
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    background: none !important;
    border: none !important;
    padding: 0;
    margin: 0;

    font-size: 22px;
    line-height: 1;
    color: #000;
    opacity: .75;
    cursor: pointer;
  }

  #cart-banner .cart-banner-close:active{
    transform: translateY(-50%) scale(.9);
  }

  /* tlačítko „Zobrazit košík“ – dolů, na střed */
  #cart-banner .banner-checkout-button{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  /* SBALENÝ STAV → zmizí text, křížek i tlačítko (zůstane jen sleva + doprava) */
  #cart-banner.is-collapsed .cart-banner-top-row,
  #cart-banner.is-collapsed .banner-checkout-button{
    display: none !important;
  }
}


/* =========================================================
   🆘 ZACHRAŇ KÁVU – PLNÝ ČERVENÝ BANNER (jako Top sellers)
   ========================================================= */

/* sekce už NIC nebarví */
#rescue-coffee{
  background: none;
}

/* 🔥 samotný banner */
#rescue-coffee .rescue-coffee__panel{
  background: #fbeaea;           /* červený / růžový banner */
  border-radius: 16px;
  padding: 32px 32px 24px;
}

/* texty */
#rescue-coffee h2{
  margin-top: 0;
}

.rescue-coffee__intro,
.rescue-coffee__hint{
  max-width: 720px;
  line-height: 1.6;
}

/* =========================================================
   👉 Horizontální scroll produktů
   ========================================================= */

#rescue-coffee .rescue-coffee__products{
  display: flex;
  gap: 1.5rem;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding-bottom: .5rem;
}

/* karty */
#rescue-coffee .rescue-coffee__products .product{
  flex: 0 0 260px;
  scroll-snap-align: start;
}

/* scrollbar desktop */
#rescue-coffee .rescue-coffee__products::-webkit-scrollbar{
  height: 8px;
}
#rescue-coffee .rescue-coffee__products::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 999px;
}

/* =========================================================
   📱 Mobil
   ========================================================= */

@media (max-width: 768px){
  #rescue-coffee .rescue-coffee__panel{
    padding: 24px 16px;
  }

  #rescue-coffee .rescue-coffee__products{
    gap: .75rem;
    scrollbar-width: none;
  }

  #rescue-coffee .rescue-coffee__products::-webkit-scrollbar{
    display: none;
  }

  #rescue-coffee .rescue-coffee__products .product{
    flex: 0 0 56vw;
  }

  @media (min-width: 420px){
    #rescue-coffee .rescue-coffee__products .product{
      flex-basis: 44vw;
    }
  }
}


.product-badge.badge--rescue{
  background: linear-gradient(135deg,#d32f2f,#ff6f3c);
}


@media (max-width: 768px){
  #rescue-coffee .rescue-coffee__products .product{
    flex: 0 0 56vw; /* stejné jako bestsellers */
  }

  @media (min-width: 420px){
    #rescue-coffee .rescue-coffee__products .product{
      flex-basis: 44vw;
    }
  }
}


/* Zachraň kávu – sjednocení obrázku v kartě */
#rescue-products .product-image-wrapper {
  width: 100%;
  height: 210px;           /* doladíš */
  overflow: hidden;
  border-radius: 14px;     /* pokud chceš */
}

#rescue-products .product-image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 🔍 Větší náhledy v sekci "Další kávy vhodné k ..." pod detailem produktu */
/* → layout jako v Zachraň kávu / hlavním listingu */

/* kontejner – vodorovný scroller, stejné chování jako rescue / bestsellery */
#product-detail .related-products {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* jedna karta = stejná šířka jako produkt v rescue/bestsellerech */
#product-detail .related-products .product {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

/* obrázek přes celou šířku karty, fixní výška jako na rescue */
#product-detail .related-products .product-image-wrapper {
  width: 100% !important;
  height: 210px !important;   /* stejné číslo jako #rescue-products */
  overflow: hidden;
  border-radius: 14px;
  margin: 0 0 .75rem 0;       /* jako u klasické karty */
}

/* fotka vyplní box – stejně jako na hlavní stránce */
#product-detail .related-products .product-image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  max-width: none !important;
  max-height: none !important;
}

/* chuťové ikonky – můžeš je klidně nechat jak jsou, jen mírné doladění */
#product-detail .related-products .product-flavour-icons {
  gap: 4px;
}

/* 📱 mobil – trochu užší karty, ale pořád „jako na indexu“ */
@media (max-width: 768px) {
  #product-detail .related-products .product {
    flex: 0 0 56vw;        /* stejné jako rescue-coffee bestsellery */
  }

  @media (min-width: 420px) {
    #product-detail .related-products .product {
      flex-basis: 44vw;
    }
  }

  #product-detail .related-products .product-image-wrapper {
    height: 200px !important; /* můžeš doladit podle oka */
  }
}


/* ================================================
   CHUŤOVÉ IKONY – sekce "Další kávy vhodné k..."
   ================================================ */

/* zmenšená, ale už trochu výraznější ikonka */
#product-detail .related-products .product-image-wrapper .product-flavour-icons .tag-icon {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
}

/* mezera mezi ikonami */
#product-detail .related-products .product-image-wrapper .product-flavour-icons {
  gap: 2px;
}

/* mobil – stejná velikost */
@media (max-width: 768px) {
  #product-detail .related-products .product-image-wrapper .product-flavour-icons .tag-icon {
    width: 56px !important;
    height: 56px !important;
  }
}


/* =========================================================
   ☕ Kávový asistent – doporučené produkty
   (zmenšit karty, aby nebyly přes celý viewport)
   ========================================================= */

/* wrapper s výsledky asistenta */
#assistant-results,
.assistant-results {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* jedna karta – podobná šířka jako v běžném listingu / rescue */
#assistant-results .product,
.assistant-results .product {
  flex: 0 0 260px;
  max-width: 260px;
}

/* obrázkový box – stejná logika jako u #rescue-products */
#assistant-results .product-image-wrapper,
.assistant-results .product-image-wrapper {
  width: 100%;
  height: 210px;       /* můžeš doladit 200–230 podle oka */
  overflow: hidden;
  border-radius: 14px;
}

/* fotka vyplní box, ne celou stránku :) */
#assistant-results .product-image-wrapper img,
.assistant-results .product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 📱 mobil – karty vedle sebe jako slider */
@media (max-width: 768px) {
  #assistant-results,
  .assistant-results {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #assistant-results .product,
  .assistant-results .product {
    flex: 0 0 56vw;
    scroll-snap-align: start;
  }

  @media (min-width: 420px) {
    #assistant-results .product,
    .assistant-results .product {
      flex-basis: 44vw;
    }
  }
}

/* ============================================
   ŠTÍTKY PODLE ZPŮSOBU PŘÍPRAVY – VÝRAZNÉ
   (ve stylu ZACHRAŇ KÁVU)
   ============================================ */

.product-badge.badge--espresso,
.product-badge.badge--automat,
.product-badge.badge--filtr,
.product-badge.badge--bezkofein,
.product-badge.badge--kapsle {
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Espresso – teplý „espresso“ gradient */
.product-badge.badge--espresso {
  background: linear-gradient(135deg, #8d4b20, #d68b4a);
}

/* Automat – brandová zelená */
.product-badge.badge--automat {
  background: linear-gradient(135deg, #2e7d32, #43b047);
}

/* Filtr – čistá modro–tyrkysová */
.product-badge.badge--filtr {
  background: linear-gradient(135deg, #1976d2, #42a5f5);
}

/* Bezkofein – klidná levandulovo-fialová */
.product-badge.badge--bezkofein {
  background: linear-gradient(135deg, #6a11cb, #4a66e8);
}

/* Kapsle – „zlatý“ kapslový gradient */
.product-badge.badge--kapsle {
  background: linear-gradient(135deg, #f9a825, #ffb74d);
}

/* 📝 Kavárenský blog – teaser banner na homepage e-shopu */
.blog-teaser{
  background:#f7f3ee;                 /* stejné pozadí jako blog hero */
  border-top:1px solid #efe3d5;
  border-bottom:1px solid #efe3d5;
  padding:2.5rem 0 2.8rem;
}

.blog-teaser__inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:2.5rem;
}

/* levý sloupec – text */
.blog-teaser__text{
  flex:1 1 50%;
  max-width:520px;
  align-self:center;
}

.blog-teaser__kicker{
  margin:0 0 .35rem;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9b8b7a;
}

.blog-teaser__title{
  margin:.1rem 0 .5rem;
  font-size:clamp(1.9rem,3vw,2.3rem);
  line-height:1.2;
  color:#211811;
}

.blog-teaser__subtitle{
  margin:0 0 1.3rem;
  font-size:.98rem;
  line-height:1.6;
  color:#4a4035;
}

/* „chips“ s rubrikami – podobné jako v blog hero */
.blog-teaser__chips{
  list-style:none;
  padding:0;
  margin:0 0 1.4rem;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}

.blog-teaser__chips a{
  display:inline-flex;
  align-items:center;
  padding:.24rem .8rem;
  border-radius:999px;
  font-size:.86rem;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  color:#4b4138;
  text-decoration:none;
  line-height:1.2;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .16s ease;
}

.blog-teaser__chips a:hover{
  background:#ffffff;
  border-color:rgba(214,176,130,0.7);
  color:#222;
  transform:translateY(-1px);
}

/* CTA tlačítko – využívá existující .btn-primary, jen mírné přizpůsobení */
.blog-teaser__cta{
  margin-top:.2rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
}

/* pravý sloupec – karta s náhledem článku */
.blog-teaser__card{
  position:relative;
  flex:1 1 50%;
  max-width:420px;
  background:#fdf8f2;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.05);
  display:flex;
  flex-direction:column;
}

.blog-teaser__card-img-wrap{
  position:relative;
  overflow:hidden;
}

.blog-teaser__card-img-wrap img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .45s ease;
}

.blog-teaser__card-body{
  padding:1.15rem 1.4rem 1.4rem;
}

.blog-teaser__card-eyebrow{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9b8b7a;
  margin:0 0 .4rem;
}

.blog-teaser__card-title{
  margin:0 0 .35rem;
  font-size:1.1rem;
  color:#211811;
}

.blog-teaser__card-meta{
  margin:0 0 .4rem;
  font-size:.9rem;
  color:#8d7f72;
}

.blog-teaser__card-link{
  margin:0;
  font-size:.9rem;
  font-weight:600;
  color:#2b2117;
}

/* klikací vrstva přes celou kartu */
.blog-teaser__card-overlay{
  position:absolute;
  inset:0;
  text-indent:-9999px;
}

/* hover efekty na desktopu */
@media (hover:hover){
  .blog-teaser__card:hover{
    box-shadow:0 16px 40px rgba(15,23,42,.14);
    border-color:rgba(214,176,130,.7);
    transform:translateY(-2px);
  }
  .blog-teaser__card:hover img{
    transform:scale(1.06);
  }
}

/* 📱 Mobil a menší tablety */
@media (max-width: 899px){
  .blog-teaser{
    padding:2rem 0 2.3rem;
  }

  .blog-teaser__inner{
    padding:0 1rem;
    display:flex;
    flex-direction:column;  /* 💡 nejdřív text, pak karta článku */
    gap:1.6rem;
  }

  .blog-teaser__text{
    max-width:none;
    text-align:left;
  }

  .blog-teaser__card{
    margin-top:.4rem;       /* drobný rozestup pod textem */
  }
}

/* extra úzké mobily – lehké zjemnění */
@media (max-width: 480px){
  .blog-teaser__card-body{
    padding:1rem 1.1rem 1.2rem;
  }
  .blog-teaser__card-img-wrap img{
    height:200px;
  }
}

/* 📝 Kavárenský blog – teaser banner na homepage e-shopu */
.blog-teaser{
  background:#f7f3ee;
  border-top:1px solid #efe3d5;
  border-bottom:1px solid #efe3d5;
  padding:2.5rem 0 2.8rem;
}

.blog-teaser__inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:2.5rem;
}

.blog-teaser__text{ ... }
.blog-teaser__kicker{ ... }
.blog-teaser__title{ ... }
.blog-teaser__subtitle{ ... }
.blog-teaser__chips{ ... }
.blog-teaser__chips a{ ... }
.blog-teaser__chips a:hover{ ... }
.blog-teaser__cta{ ... }
.blog-teaser__card{ ... }
.blog-teaser__card-img-wrap{ ... }
.blog-teaser__card-img-wrap img{ ... }
.blog-teaser__card-body{ ... }
.blog-teaser__card-eyebrow{ ... }
.blog-teaser__card-title{ ... }
.blog-teaser__card-meta{ ... }
.blog-teaser__card-link{ ... }
.blog-teaser__card-overlay{ ... }

@media (hover:hover){ ... }

@media (max-width: 899px){ ... }

@media (max-width: 480px){ ... }


.search-suggestion-thumb {
  flex: 0 0 40px;
  height: 40px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 4px;
}

.search-suggestion-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🧃 Kapsle – světlá pastelová oranžová */
#kapsle         { background-color: rgba(255, 220, 190, .15); }

/* 📱 Jemné (skoro nepoznatelné) zvýraznění Blogu v mobilním menu */
@media (max-width: 1024px){
  #m-fullscreen-menu .m-menu__grid .m-cat[data-target="m-panel-blog"]{
    position: relative;
    isolation: isolate; /* aby ::before šlo spolehlivě pod obsah */
  }

  #m-fullscreen-menu .m-menu__grid .m-cat[data-target="m-panel-blog"]::before{
    content:"";
    position:absolute;
    inset: 7px 6px;                 /* trochu menší než celé tlačítko */
    border-radius: 14px;
    background: #fff7d6;            /* hodně světlá pastelová žlutá */
    opacity: .55;                   /* skoro nepoznatelné */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.035); /* ultra jemný okraj */
    z-index: -1;
  }
}

/* ✅ Mobilní tabbar: 1. řádek = 5 hlavních ikon, 2. řádek = obsah (scroll) */
@media (max-width: 1024px){

  /* kontejner tabů */
  #m-fullscreen-menu .m-menu__grid{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* 5 nahoře */
    gap: 8px 10px !important;
    padding: 10px 12px !important;
    align-items: start;
  }

  /* základ tab tlačítka */
  #m-fullscreen-menu .m-menu__grid .m-cat{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 4px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 12px;
  }

  #m-fullscreen-menu .m-menu__grid .m-cat .m-cat-icon{
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
  }
  #m-fullscreen-menu .m-menu__grid .m-cat span{
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  /* 2. řádek jako "content row" – vytvoříme ho z položek s třídou .m-cat--content */
  #m-fullscreen-menu .m-menu__grid{
    grid-auto-rows: auto;
  }

  /* všechny content položky pošleme na 2. řádek */
  #m-fullscreen-menu .m-menu__grid .m-cat--content{
    grid-column: auto !important;
    grid-row: 2 !important;

    /* pilulka */
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;

    background: #fbf6e8 !important;
    width: auto !important;
  }

  /* z 2. řádku uděláme horizontální scroll – bez rozbití rozložení */
  #m-fullscreen-menu .m-menu__grid{
    /* trik: 2. řádek se scroluje, 1. řádek zůstane jako grid */
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #m-fullscreen-menu .m-menu__grid::-webkit-scrollbar{ display:none; }

  /* aby scroll fungoval hezky: obsahové pilulky se nesmí smrskávat */
  #m-fullscreen-menu .m-menu__grid .m-cat--content{
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
}

/* ══════════════════════════════════════════════════════
   HERO SLIDER
   ══════════════════════════════════════════════════════ */

#hero-slider {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  margin: 0 0 8px;
}
@media (min-width: 601px) {
  #hero-slider { margin-top: 8px; }
}
@media (min-width: 768px) {
  #hero-slider { padding: 0 24px; }
}

.slider-viewport {
  border-radius: 20px;
  overflow: hidden;
  height: 340px;
}
@media (max-width: 600px) {
  .slider-viewport { border-radius: 16px; height: 275px; }
  #hero-slider { padding: 0 10px; }
}

#hero-track {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
  margin: 0; padding: 0;
  height: 100%;
}
#hero-track::-webkit-scrollbar { display: none; }

.yt-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  height: 100%;
}

/* ── Wrapper – drží card + ticker ── */
.yt-card-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--slide-bg, linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045));
  position: relative;
  overflow: hidden;
}

/* noise overlay */
.yt-card-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: .15; pointer-events: none; z-index: 0; mix-blend-mode: overlay;
}

/* ── Karta (odkaz) ── */
.yt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #fff;
  flex: 1 1 0;
  min-height: 0;
  padding: 40px 48px;
  gap: 28px;
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .yt-card { padding: 22px 18px; gap: 14px; }
}

/* ── INFO BLOK ── */
.yt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
  min-width: 0;
}

.yt-meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.yt-badge {
  display: inline-block;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-size: .72rem; font-weight: 800;
  padding: 4px 12px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .07em;
}

.yt-channel-name {
  font-size: .78rem; font-weight: 700;
  opacity: .8; text-transform: uppercase; letter-spacing: .07em;
}

.yt-title {
  margin: 0;
  font-size: clamp(1.5rem, 4.5vw, 3rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

.yt-desc {
  margin: 0;
  font-size: clamp(.82rem, 1.3vw, .95rem);
  font-weight: 400; line-height: 1.55; opacity: .8;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.yt-cta {
  display: inline-block;
  margin-top: 6px; padding: 11px 26px;
  border-radius: 999px;
  background: #fff; border: none; color: #111;
  font-size: .88rem; font-weight: 800;
  align-self: flex-start; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .15s, box-shadow .15s;
  animation: cta-pulse 2.8s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.2); }
  50%      { box-shadow: 0 4px 28px rgba(255,255,255,.45), 0 4px 16px rgba(0,0,0,.2); }
}
.yt-card:hover .yt-cta {
  transform: translateX(4px) scale(1.03);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  animation: none;
}

/* ── THUMBNAIL – klasický ── */
.yt-thumb {
  position: relative; z-index: 1;
  flex-shrink: 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  width: clamp(140px, 22vw, 280px);
  aspect-ratio: 4/3;
}
.yt-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── THUMBNAIL – kruhový ── */
.yt-thumb--circle {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: unset;
  width: clamp(130px, 18vw, 200px);
  height: clamp(130px, 18vw, 200px);
  display: flex; align-items: center; justify-content: center;
}

.yt-circle-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yt-circle-ring {
  position: absolute;
  inset: 0;
  animation: yt-rotate 12s linear infinite;
}
@keyframes yt-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.yt-circle-img {
  width: 62%; height: 62%;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  z-index: 1;
  flex-shrink: 0;
}
.yt-circle-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* mobil – kruhový thumbnail trochu menší */
@media (max-width: 600px) {
  .yt-thumb {
    width: 110px; height: 110px;
    border-radius: 10px; aspect-ratio: unset;
  }
  .yt-thumb--circle {
    width: 110px; height: 110px;
  }
  .yt-title {
    font-size: clamp(1.2rem, 5.5vw, 1.6rem);
    letter-spacing: -0.01em;
  }
  .yt-cta { padding: 9px 20px; font-size: .82rem; }
}

/* ══ TICKER ══ */
.yt-ticker {
  position: relative; z-index: 1;
  background: rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.yt-ticker-inner {
  display: inline-flex;
  animation: yt-ticker 20s linear infinite;
}

.yt-ticker-inner span {
  font-size: .73rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 24px;
}

.yt-ticker-inner span::before {
  content: '·';
  margin-right: 24px;
  opacity: .45;
}

@keyframes yt-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ══════════════════════════════════════════════
   INFO TICKER – pohyblivý banner nad patičkou
══════════════════════════════════════════════ */
.info-ticker{
  overflow: hidden;
  white-space: nowrap;
  background: #1a1a1a;
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.info-ticker--green{ background: #2d6a2d; }
.info-ticker--red{   background: #b91c1c; }

.info-ticker__track{
  display: inline-flex;
  gap: 0;
  animation: info-ticker-scroll 30s linear infinite;
  will-change: transform;
}
.info-ticker:hover .info-ticker__track{
  animation-play-state: paused;
}
.info-ticker__item{
  display: inline-block;
  padding: 0 48px;
}
.info-ticker__item::before{
  content: '✦';
  margin-right: 48px;
  opacity: .5;
  font-size: .7rem;
}

@keyframes info-ticker-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Ke kávě producent sekce: padding shodný s .section aby karty nebyly širší ── */
.ke-kave-section {
  margin: 0 0 36px 0;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ── Ke kávě featured sekce na homepage ────────────────────── */
.ke-kave-featured-section {
  background: rgba(255,245,200,.15);
  border: none;
  border-radius: 0;
}
/* ── Ke kávě: bloky podle producenta na homepage ─────────────── */
.ke-kave-producer-block {
  margin-bottom: 36px;
}
.ke-kave-producer-block:last-of-type {
  margin-bottom: 0;
}

/* Karty se neroztahují — max 260px, zarovnané vlevo */
.ke-kave-producer-block .products {
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
  justify-content: start;
}

/* .ke-kave-producer-heading používá group-heading--linked */
.ke-kave-producer-more {
  margin-top: 10px;
  font-size: .9rem;
}
.ke-kave-producer-more a {
  color: #2d6a2d;
  text-decoration: none;
  font-weight: 600;
}
.ke-kave-producer-more a:hover {
  text-decoration: underline;
}

/* === Sjednocené nadpisy skupin s logem + odkazem (pražírny, producenti) === */
.group-heading { margin: 1.5rem 0 .75rem; }
.group-heading--linked {
  margin: 1.5rem 0 .75rem;
  padding-bottom: 9px;
}
.group-heading--linked a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
}
.group-heading--linked a::after {
  content: '→';
  font-size: .85em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
  margin-left: auto;
}
.group-heading--linked a:hover { color: #2d6a2d; }
.group-heading--linked a:hover::after { opacity: 1; transform: translateX(0); }
.group-heading-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #f0ede6;
  padding: 3px;
  flex-shrink: 0;
}

.ke-kave-more-link { margin-top: 24px; text-align: center; }
.ke-kave-more-btn {
  display: inline-block;
  min-width: 320px;
  max-width: 100%;
  font-size: 1.1rem;
  padding: 1rem 2.4rem;
  border-radius: 8px;
  background: linear-gradient(145deg, #F97316, #EA580C);
  border: none;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(234,88,12,.25);
  transition: transform .1s, box-shadow .2s, filter .15s;
}
@media (max-width: 480px) {
  .ke-kave-more-btn {
    min-width: 0;
    width: auto;
    font-size: 1rem;
    padding: .85rem 1.6rem;
  }
}
.ke-kave-more-btn:hover {
  background: linear-gradient(145deg, #EA580C, #C2410C);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(234,88,12,.35);
}

/* ── Ke kávě submenu: nadpis + celá nabídka přes celou šířku ──── */
.m-menu .m-panel .mega__tiles > li.ke-kave-back-item,
.m-menu .m-panel .mega__tiles > li.ke-kave-heading,
.m-menu .m-panel .mega__tiles > li.ke-kave-view-all {
  grid-column: 1 / -1 !important;
}

/* ── Ke kávě submenu: typ produktu – řádek jako ostatní dlaždice ─ */
.m-menu .m-panel .mega__tiles > li.ke-kave-type-item > a.tile {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}
/* šipka › zděděna z obecného .tile::after */
.m-menu .m-panel .mega__tiles > li.ke-kave-type-item > a.tile .tile-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
}
.m-menu .m-panel .mega__tiles > li.ke-kave-type-item > a.tile .tile-title {
  flex: 1 1 auto !important;
  font-size: clamp(16px, 4.3vw, 18px) !important;
  font-weight: 700 !important;
  text-align: left !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}

/* ── Ke kávě submenu: nadpis výrobce ──────────────────────────── */
.m-menu .m-panel .mega__tiles > li.ke-kave-heading > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: #2a6e2a !important;
  font-size: clamp(17px, 4.5vw, 20px) !important;
  font-weight: 700 !important;
  background: #e8f5e9 !important;
  border-color: #c8e6c9 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  width: 100% !important;
}
.m-menu .m-panel .mega__tiles > li.ke-kave-heading > a img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ── Ke kávě submenu: "Celá nabídka" dole ─────────────────────── */
.m-menu .m-panel .mega__tiles > li.ke-kave-view-all > a {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  font-size: 13px !important;
  color: var(--green) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  background: #f0faf0 !important;
  border-radius: 12px !important;
  border-color: #c8e6c9 !important;
  width: 100% !important;
}