/* ===== BÉBA eshop – vlastní vzhled (krok 1: tlačítka ve stylu apky) ===== */

/* společný základ pro tlačítka */
.btn.btn-cart,
.btn.btn-primary,
.btn.btn-conversion {
  border-radius: 16px;
  border: 3px solid #ffffff !important;
  padding: 10px 22px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #ffffff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
  box-shadow:
    0 5px 0 rgba(0,0,0,.20),
    0 8px 16px rgba(0,0,0,.20),
    inset 0 3px 0 rgba(255,255,255,.55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn.btn-cart:hover,
.btn.btn-primary:hover,
.btn.btn-conversion:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow:
    0 7px 0 rgba(0,0,0,.20),
    0 12px 20px rgba(0,0,0,.22),
    inset 0 3px 0 rgba(255,255,255,.55);
}
.btn.btn-cart:active,
.btn.btn-primary:active,
.btn.btn-conversion:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 rgba(0,0,0,.20),
    0 4px 8px rgba(0,0,0,.20),
    inset 0 3px 0 rgba(255,255,255,.55);
}

/* žluté: Do košíku */
.btn.btn-cart,
.btn.btn-conversion,
.btn.btn-cart:hover,
.btn.btn-conversion:hover {
  background: linear-gradient(180deg, #ffe066 0%, #ffc21a 50%, #f5a300 100%);
}

/* modré: Detail */
.btn.btn-primary,
.btn.btn-primary:hover {
  background: linear-gradient(180deg, #5fb3ff 0%, #2a7fe0 50%, #1a5fb4 100%);
}

/* políčko s množstvím – zakulatit, ať ladí s tlačítkem */
.product .quantity,
span.quantity {  /* jen políčko s množstvím, ne sloupec tabulky v košíku (td.p-quantity) */
  border-radius: 14px;
  overflow: hidden;
}

/* mezera mezi množstvím a tlačítkem Do košíku */
.btn.btn-cart {
  margin-left: 12px !important;
}

/* ===== postava vykukující zpoza tlačítka (samostatná vrstva pod tlačítkem) ===== */
.beba-peek-parent {
  position: relative;
  z-index: 2; /* celý blok tlačítka nad cenou a textem karty */
}
.beba-peek-parent .btn.btn-cart,
.beba-peek-parent .btn.btn-primary {
  position: relative;
  z-index: 1;
}
.beba-peek {
  position: absolute;
  width: 88px;
  height: 88px;
  z-index: 0;
  pointer-events: none;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(60%) rotate(-6deg);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.beba-peek.is-up {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* ===== pozadí: rozmazaná BÉBA příroda místo bílé plochy ===== */
/* POZOR před nasazením: cestu bg/bg8.jpg nahradit adresou souboru ze Správce souborů Shoptetu */
body {
  background: url("https://www.bebashop.cz/user/documents/upload/bg8.jpg") center center / cover no-repeat fixed !important;
  background-color: #7fc8ff !important;
}
#content-wrapper.container {
  background: transparent !important;
}

/* ===== písmo: kulatý tučný font + černý text s bílým obrysem ===== */
/* do HTML kódu (Záhlaví) patří i tento řádek, který font načte:
   <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap" rel="stylesheet"> */
.beba-outline {
  font-family: "Baloo 2", "Exo 2", sans-serif;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* nadpisy sekcí (Novinky, BÉBA eSHOP :-)) */
#content h1, #content h2, #content h3, #content h4, .homepage-group-title,
.products-block .product .name,
.products-block .product .price,
.products-block .product .availability,
.products-block .product .p-desc,
.welcome-wrapper, .welcome-wrapper p {
  font-family: "Baloo 2", "Exo 2", sans-serif;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#content h1, #content h2, .homepage-group-title { font-weight: 800; font-size: 44px !important; -webkit-text-stroke-width: 6px; }
.products-block .product .name { font-weight: 700; font-size: 24px !important; line-height: 1.2 !important; height: auto !important; min-height: 58px; overflow: visible !important; }
.products-block .product .name a { color: #111 !important; }
.products-block .product .price, .products-block .product .price strong { font-weight: 800; font-size: 30px !important; }
.products-block .product .availability { font-weight: 700; font-size: 18px; -webkit-text-stroke-width: 3px; }
.products-block .product .p-desc,
.welcome-wrapper p { font-weight: 600; font-size: 18px; line-height: 1.45; -webkit-text-stroke-width: 3px; }
/* barvu dostupnosti (Skladem zelená, Vyprodáno atd.) nechává Shoptet – nepřebarvovat */

/* ===== hlavička: duhové 3D pruhy místo růžové ===== */
/* POZOR před nasazením: cestu bg/hlavicka2.jpg nahradit adresou ze Správce souborů Shoptetu */
#header { background: transparent !important; }
#header .header-top {
  background: url("https://www.bebashop.cz/user/documents/upload/hlavicka2.jpg") center center / 100% 100% no-repeat !important; /* roztáhnout na výšku horní lišty */
}
/* vyhledávací políčko: bílé zakulacené, ať jde na pruzích číst */
#header .search-input.query-input {
  background: rgba(255,255,255,.92) !important;
  color: #222 !important;
  border-radius: 999px !important;
  border: 3px solid #fff !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
#header .search-input.query-input::placeholder { color: #666 !important; }

/* text u košíku v hlavičce: čitelný na pruzích */
#header .cart-count, #header .cart-count span, #header .toggle-window.cart-count {
  font-family: "Baloo 2", "Exo 2", sans-serif;
  font-weight: 700;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
}

/* ===== logo: jemné pohupování jako želé, po najetí poskočí ===== */
#header .site-name img {
  transform-origin: 50% 100%;
  animation: beba-logo-idle 4s ease-in-out infinite; /* skok + pohupování, cyklus 4 s */
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
#header .site-name a:hover img {
  animation: beba-logo-jump .7s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes beba-logo-idle {
  /* 0–22 %: malý skok */
  0%   { transform: translateY(0) scale(1, 1) rotate(0); }
  4%   { transform: translateY(1px) scale(1.05, .94); }                 /* přikrčení */
  9%   { transform: translateY(-7px) scale(.97, 1.04) rotate(-2deg); }  /* výskok */
  14%  { transform: translateY(0) scale(1.04, .96) rotate(1.5deg); }    /* dopad */
  18%  { transform: translateY(-1px) scale(.99, 1.01) rotate(-.5deg); }
  22%  { transform: translateY(0) scale(1, 1) rotate(0); }
  /* 22–100 %: lehké pohupování ze strany na stranu */
  36%  { transform: translateY(-2px) scale(1.015, .985) rotate(-1.5deg); }
  50%  { transform: translateY(0) scale(.99, 1.01) rotate(0); }
  64%  { transform: translateY(-2px) scale(1.015, .985) rotate(1.5deg); }
  78%  { transform: translateY(0) scale(.99, 1.01) rotate(0); }
  90%  { transform: translateY(-1px) scale(1.01, .99) rotate(-.8deg); }
  100% { transform: translateY(0) scale(1, 1) rotate(0); }
}
@keyframes beba-logo-jump {
  0%   { transform: translateY(0) scale(1, 1); }
  20%  { transform: translateY(2px) scale(1.12, .85); }   /* přikrčení */
  45%  { transform: translateY(-14px) scale(.92, 1.1) rotate(-4deg); } /* výskok */
  70%  { transform: translateY(0) scale(1.08, .92) rotate(3deg); }     /* dopad */
  85%  { transform: translateY(-3px) scale(.98, 1.02) rotate(-1deg); }
  100% { transform: translateY(0) scale(1, 1) rotate(0); }
}
/* kdo má v systému vypnuté animace, tomu logo stojí */
@media (prefers-reduced-motion: reduce) {
  #header .site-name img { animation: none !important; }
}

/* ===== pruh s menu: mléčné sklo + bonbónové položky (jen počítač; na mobilu by sklo rozbilo vysouvací menu) ===== */
@media (min-width: 768px) {
  #header .header-bottom,
  #navigation {
    background: rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
  }
  #navigation { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #header .header-bottom {
    border-bottom: 1px solid rgba(255,255,255,.7) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  /* položky 1. úrovně */
  #navigation .menu-level-1 > li > a {
    font-family: "Baloo 2", "Exo 2", sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #111 !important;
    border-radius: 14px;
    padding: 8px 16px !important;   /* menší "bonbón", nevyplní celou výšku pruhu */
    margin: 14px 3px !important;
    line-height: 1.5;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  #navigation .menu-level-1 > li > a b { font-weight: 700; }
  /* po najetí: malé bonbónové tlačítko */
  #navigation .menu-level-1 > li > a:hover,
  #navigation .menu-level-1 > li.exp > a,
  #navigation .menu-level-1 > li:hover > a {
    background: linear-gradient(180deg, #5fb3ff 0%, #2a7fe0 55%, #1a5fb4 100%) !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    box-shadow: 0 3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.5);
    transform: translateY(-1px);
  }
}

/* ===== mobilní menu: louka místo bílé + čitelné položky ===== */
@media (max-width: 767px) {
  #navigation .navigation-in {
    background: url("https://www.bebashop.cz/user/documents/upload/bg8.jpg") center center / cover no-repeat !important;
  }
  #navigation .navigation-in ul,
  #navigation .navigation-in li,
  #navigation .menu-level-2 {
    background: transparent !important;
  }
  /* každá položka jako průsvitná zakulacená kartička */
  #navigation .menu-level-1 > li {
    margin: 8px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.22) !important; /* průsvitná, aby byl vidět bílý obrys písma */
    box-shadow: 0 3px 0 rgba(0,0,0,.12);
    border: 2px solid #fff !important;
  }
  #navigation .menu-level-1 > li > a {
    font-family: "Baloo 2", "Exo 2", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #111 !important;
    text-decoration: none !important;
  }
  #navigation .menu-level-1 > li > a b { font-weight: 700; text-decoration: none !important; }
  /* podmenu: menší kartičky uvnitř */
  #navigation .menu-level-2 a {
    font-family: "Baloo 2", "Exo 2", sans-serif;
    font-weight: 600;
    color: #111 !important;
    text-decoration: none !important;
  }
}

/* ===== mobilní menu: stejné písmo jako na webu (černé s bílým obrysem) ===== */
@media (max-width: 767px) {
  #navigation .menu-level-1 > li > a,
  #navigation .menu-level-1 > li > a b,
  #navigation .menu-level-2 a,
  #navigation [class*="navigationActions"],
  #navigation [class*="navigationActions"] a,
  #navigation [class*="navigationActions"] span,
  #navigation [class*="navigationActions"] button {
    font-family: "Baloo 2", "Exo 2", sans-serif !important;
    font-weight: 700 !important;
    color: #111 !important;
    paint-order: stroke fill;
    -webkit-text-stroke: 4px #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
    text-decoration: none !important;
  }
  #navigation .menu-level-2 a { font-size: 18px; -webkit-text-stroke-width: 3px; }
  #navigation [class*="navigationActions"] { font-size: 18px; background: transparent !important; }
}

/* ===== název produktu: nejvýš 2 řádky, pak tři tečky (jinak překrývá "Skladem") ===== */
.products-block .product .name {
  overflow: hidden !important;
  min-height: 0 !important;
  height: auto !important;
}
.products-block .product .name > span {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: 2px 3px;               /* místo pro bílý obrys */
  min-height: calc(2 * 1.2em + 4px); /* vždy výška 2 řádků, ať karty lícují */
}
@media (max-width: 767px) {
  .products-block .product .name { font-size: 19px !important; }
}

/* ===== patička: stejný barevný pruh jako hlavička + písmo jako na webu ===== */
#footer {
  background: url("https://www.bebashop.cz/user/documents/upload/hlavicka2.jpg") center center / 100% 100% no-repeat !important;
  border: 0 !important;
}
#footer .footer-bottom {
  background: transparent !important;
  padding-top: 14px;
  padding-bottom: 14px;
}
#footer, #footer .footer-bottom, #footer a, #footer strong, #footer span {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 700;
  font-size: 16px;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#footer a { text-decoration: none !important; }
#footer a:hover { color: #1a5fb4 !important; }

/* ===== detail produktu: písmo jako v celém eshopu ===== */
body.type-detail #content, body.type-detail #content *:not(.btn):not(input):not([class*="icon-"]),
body.type-detail .sidebar, body.type-detail .sidebar * {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
}
/* texty na louce: černé s bílým obrysem */
body.type-detail .p-detail :is(p, li, td, th, span:not([style*="color"]), a, strong, b, em, h2, h3, h4, .p-short-description, .p-code, .price-final, .price-final strong),
body.type-detail .breadcrumbs, body.type-detail .breadcrumbs * {
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-weight: 600;
}
/* tlačítka a výběr množství bez obrysu */
body.type-detail .p-detail :is(.btn, .btn *, .quantity, .quantity *, button, button *) {
  -webkit-text-stroke: 0 !important;
  text-shadow: none;
}
body.type-detail .p-detail .btn.btn-cart, body.type-detail .p-detail .btn.btn-cart * {
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.28) !important;
}
/* velikosti */
body.type-detail .p-detail .price-final, body.type-detail .p-detail .price-final strong {
  font-size: 36px !important; font-weight: 800; -webkit-text-stroke-width: 5px;
}
body.type-detail .p-detail .p-short-description,
body.type-detail .p-detail .detail-parameters :is(th, td, th *, td *),
body.type-detail #description :is(p, li, span, strong, b, td, th) {
  font-size: 18px !important;
}
body.type-detail .p-detail .shp-tabs a {
  font-size: 24px; font-weight: 800; -webkit-text-stroke-width: 5px; text-decoration: none !important;
}
body.type-detail .p-detail .detail-parameters :is(th, td, th *, td *) { background: transparent !important; }
/* "Skladem" zelené jako na úvodce */
/* dostupnost: barvu určuje Shoptet (viz :not([style*="color"]) výše) */
/* boční panel (bílé boxy): tučné černé písmo, bez obrysu */
body.type-detail .sidebar :is(a, strong, h4, .price, span) { color: #111 !important; font-weight: 700; }

/* ===== mobil: Shoptet ukazuje nadpis produktu jako kopii (div.h1), dát jí stejný styl jako h1 ===== */
#content .h1,
#content .p-detail-inner-header-mobile .h1 {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 800;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 6px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ===== detail produktu: nadpis kousek pod cestou (drobečkovou navigací) ===== */
body.type-detail #content h1,
body.type-detail #content .h1 {
  margin-top: 16px !important;
}

/* ===== boční panel (kategorie, platby, Top 10): průsvitné kartičky jako mobilní menu ===== */
.sidebar .box:not(.sr-only) {
  background: rgba(255,255,255,.22) !important;
  border: 2px solid #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  overflow: hidden;
  margin-bottom: 18px;
}
.sidebar .box * { background-color: transparent !important; }
.sidebar .box :is(a, strong, span, h3, h4, li, p, div, .price, .name) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-weight: 700;
}
.sidebar .box h3, .sidebar .box .pageElement__heading {
  font-size: 20px !important; font-weight: 800; -webkit-text-stroke-width: 4px;
}
.sidebar .box-categories { padding-left: 10px !important; }
.sidebar .box-categories a { font-size: 19px; }
/* aktuální kategorie modře (místo růžové) */
.sidebar .box-categories .active > a, .sidebar .box-categories a.active, .sidebar .box-categories li.active > a {
  color: #1a5fb4 !important;
}
.sidebar .box img { border-radius: 10px; }

/* ===== menu na počítači: bílý obrys jako všude jinde (po najetí bez obrysu, bílý text na modrém) ===== */
@media (min-width: 768px) {
  #navigation .menu-level-1 > li > a {
    paint-order: stroke fill;
    -webkit-text-stroke: 4px #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
  }
  #navigation .menu-level-1 > li > a:hover,
  #navigation .menu-level-1 > li.exp > a,
  #navigation .menu-level-1 > li:hover > a {
    -webkit-text-stroke: 0 !important;
  }
}

/* ===== stránky kategorií: písmo a prvky jako v celém eshopu ===== */
body.type-category #content *:not(.btn):not(input):not(.flag):not([class*="icon-"]) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
}
body.type-category :is(.subcategories .text, .products-top .name, .products-top .name *, .products-top .price, .products-top .price *,
  .products-top .availability, .products-top .availability *:not([style*="color"]), .category-header, .category-header *:not([class*="icon-"]),
  .listSorting, .listSorting *:not([class*="icon-"]), .products-block .p-code, .products-block .p-code *,
  .pagination, .pagination *, .category-perex, .category-perex *, .breadcrumbs, .breadcrumbs *) {
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-weight: 700;
}
body.type-category .subcategories .text { font-size: 19px; -webkit-text-stroke-width: 4px; }
body.type-category .products-top .name, body.type-category .products-top .name * { font-size: 17px; }
body.type-category .products-top .price, body.type-category .products-top .price * { font-size: 20px; font-weight: 800; }
/* dostupnost: barvu určuje Shoptet */
/* podkategorie jako průsvitné kartičky */
body.type-category .subcategories li { padding-left: 6px; padding-right: 6px; }
body.type-category .subcategories li > a {
  background: rgba(255,255,255,.22) !important;
  border: 2px solid #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  padding: 8px 12px;
}
body.type-category .subcategories li > a img { border-radius: 10px; }
/* "Zobrazit více produktů" */
body.type-category .products-top-wrapper .button-wrapper button {
  color: #111 !important; paint-order: stroke fill; -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25); font-weight: 800; font-size: 17px;
}
/* "Otevřít filtr" jako modré bonbónové tlačítko */
body.type-category .filters-unveil-button-wrapper .btn {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 800;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
  border-radius: 16px !important;
  border: 3px solid #fff !important;
  background: linear-gradient(180deg, #5fb3ff 0%, #2a7fe0 50%, #1a5fb4 100%) !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.55);
  padding: 8px 20px;
}
body.type-category .filters-unveil-button-wrapper .btn::before,
body.type-category .filters-unveil-button-wrapper .btn::after { color: #fff !important; }
/* spodní ovládání výpisu: "Načíst další" modré bonbónové, "Nahoru" a stránkování jako průsvitné kartičky */
body .loadMore__button.btn {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 800; color: #fff !important; text-shadow: 0 2px 0 rgba(0,0,0,.28);
  border-radius: 16px !important; border: 3px solid #fff !important;
  background: linear-gradient(180deg, #5fb3ff 0%, #2a7fe0 50%, #1a5fb4 100%) !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.55);
}
body .goToTop__button.btn,
body .pagination :is(.pagination__link, .pagination__currentPage) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 800; color: #111 !important;
  paint-order: stroke fill; -webkit-text-stroke: 3px #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25);
  background: rgba(255,255,255,.22) !important;
  border: 2px solid #fff !important; border-radius: 14px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
html body .pagination strong.pagination__currentPage.pagination__currentPage {
  background: linear-gradient(180deg, #5fb3ff 0%, #2a7fe0 50%, #1a5fb4 100%) !important;
  color: #fff !important; -webkit-text-stroke: 0 !important; text-shadow: 0 2px 0 rgba(0,0,0,.28) !important;
}

/* ===== logo v liště nahrazeno tlačítkem BÉBA-HOME (jako v apce) ===== */
/* původní obrázek loga zůstává v kódu kvůli vyhledávačům, jen je neviditelný */
#header .site-name a {
  display: inline-block;
  width: 150px;
  height: 64px;
  background: url("https://www.bebashop.cz/user/documents/upload/beba-home.png") left center / contain no-repeat;
  transform-origin: 50% 100%;
  animation: beba-logo-idle 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
#header .site-name a:hover {
  animation: beba-logo-jump .7s cubic-bezier(.34,1.56,.64,1) 1;
}
#header .site-name a img {
  opacity: 0 !important;
  animation: none !important;
}
@media (max-width: 767px) {
  #header .site-name a { width: 90px; height: 38px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #header .site-name a { animation: none !important; }
}

/* ===== fotky produktů ve výpisech: bílá zakulacená kartička (bílé okraje od Shoptetu s ní splynou) ===== */
.products-block .product .image,
.products-top .product .image {
  background: #fff !important;
  border: 3px solid #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 5px 0 rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.18);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.products-top .product .image { border-radius: 12px; border-width: 2px; }
.products-block .product .image img { display: block; margin: 0 auto; }

/* ===== celý web: všechny zbývající texty (kontakty, podmínky, formuláře, košík, 404, vyhledávání…) ===== */
/* :where() = nulová váha, takže nepřebije nic z výše vyladěných pravidel */
#content :where(p, li, td, th, dt, dd, label, blockquote, h1, h2, h3, h4, h5, h6, strong, b, em, u, i, small, span, a, div)
         :where(:not(.btn, .btn *, button, button *, input, select, textarea, option, [class*="icon-"], .flag, .flag *, [style*="color"], .msg, .msg *, [class*="error"], [class*="alert"])) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  color: #111;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* běžný text trochu tučnější a větší, ať je na louce čitelný */
#content :where(p, li, td, th, dt, dd, label, blockquote) { font-weight: 600; }
body:is(.type-page, .type-search) #content :where(p, li, td, th, blockquote) { font-size: 17px; line-height: 1.55; }
/* odkazy v textu modře, ať jdou poznat */
#content :where(p, li, td, th, blockquote, label, .alternative-links, .empty-content) :where(a:not(.btn)) {
  color: #1a5fb4;
  text-decoration: underline;
}
/* horní lišta (Jak nakupovat, Obchodní podmínky, jazyk, Přihlášení, Registrace) */
.top-navigation-bar :where(a, span, div, strong, button):where(:not([class*="icon-"])) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 700;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
}
/* drobečková navigace na všech stránkách (na textových stránkách leží mimo #content) */
.breadcrumbs :where(a, span, strong, li):where(:not([class*="icon-"])) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 700;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
/* obrys se dědí – tlačítka, políčka a štítky ho mít nesmí (bílé písmo na modrém by bylo rozmazané) */
#content :is(.btn, .btn *, button, button *, input, select, textarea, .flag, .flag *) {
  -webkit-text-stroke: 0 !important;
}
/* popisky uvnitř políček formulářů (E-mail, Heslo…) bez obrysu a stínu */
#content .smart-label-wrapper label,
#content .smart-label-wrapper label * {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* ===== oprava: vysouvací podmenu (Oblečení, Hračky, Audio CD) blikalo ===== */
/* Shoptet při otevření podmenu ztmaví stránku vrstvou (z-index 1002). Mléčné sklo pruhu
   vytvořilo vlastní vrstvu pod ní, takže tmavá vrstva zakryla menu a myš "odjela" → blikání. */
@media (min-width: 768px) {
  #header .header-bottom {
    position: relative;
    z-index: 1005 !important;
  }
}

/* ===== vysouvací podmenu na počítači: louka + průsvitné kartičky místo bílé kostky ===== */
@media (min-width: 768px) {
  #navigation .menu-level-2 {
    background: url("https://www.bebashop.cz/user/documents/upload/bg8.jpg") center center / cover no-repeat !important;
    border: 3px solid #fff !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
    padding: 14px 10px 18px !important;
  }
  #navigation .menu-level-2 > li {
    background: rgba(255,255,255,.25) !important;
    border: 2px solid #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,.12);
    margin: 6px !important;
    flex: 0 1 calc(25% - 12px) !important;
    padding: 8px 6px !important;
    height: auto !important;
    transition: transform .15s ease, background .15s ease;
  }
  #navigation .menu-level-2 > li:hover {
    background: rgba(255,255,255,.5) !important;
    transform: translateY(-2px) scale(1.02);
  }
  #navigation .menu-level-2 img { border-radius: 10px; }
  #navigation .menu-level-2 a:not(.menu-image),
  #navigation .menu-level-2 a span {
    font-family: "Baloo 2", "Exo 2", sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #111 !important;
    paint-order: stroke fill;
    -webkit-text-stroke: 4px #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.25);
    text-decoration: none !important;
  }
}

/* ===== košík: bez bílé tabulky, průsvitná kartička, texty s obrysem ===== */
.cart-table {
  background: rgba(255,255,255,.22) !important;
  border: 2px solid #fff !important;
  border-radius: 18px !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.cart-table :is(th, td, tr, thead, tbody) {
  background: transparent !important;
  border-radius: 0 !important;
}
.cart-table :is(td, th) { border-color: rgba(255,255,255,.7) !important; border-left: 0 !important; border-right: 0 !important; }
.cart-table img { border-radius: 10px; }
/* v tabulce text jako všude (kromě polí a tlačítek) */
.cart-table :is(th, td, a:not(.btn), span:not([style*="color"]), strong) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 700;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cart-table .p-name a { color: #1a5fb4 !important; font-size: 18px; }
.cart-table .quantity, .cart-table .quantity * { -webkit-text-stroke: 0 !important; text-shadow: none !important; }
/* kroky objednávky: bez bílého obdélníku za popiskem */
[class*="step"] > strong, [class*="step"] > strong span { background: transparent !important; }
/* "Mám slevový kupón" a "Zpět do obchodu" s obrysem */
.toggle-coupon-input-button,
.next-step-back, .next-step-back .continue-shopping {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 700 !important;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  background: transparent !important;
}

/* ===== předkošík (okno po kliknutí na ikonu košíku): louka + kartičky místo bílé ===== */
#cart-widget {
  background: url("https://www.bebashop.cz/user/documents/upload/bg8.jpg") center center / cover no-repeat !important;
}
#cart-widget :is(.popup-widget-inner, .cart-widget-bottom, .cart-widget-button, .cart-widget-products) {
  background: transparent !important;
}
#cart-widget .cart-widget-product {
  background: rgba(255,255,255,.25) !important;
  border: 2px solid #fff !important;
  border-radius: 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  margin: 10px 12px;
  padding: 8px 10px;
  width: auto !important;
  box-sizing: border-box;
}
#cart-widget img { border-radius: 10px; }
#cart-widget :is(a:not(.btn), span, strong, div, p, td, th)
            :where(:not(.btn, .btn *, button, button *, input, .quantity, .quantity *, [class*="icon-"])) {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  font-weight: 700;
  color: #111;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#cart-widget a:not(.btn) { color: #1a5fb4 !important; font-size: 17px; }
#cart-widget .quantity, #cart-widget .quantity * { -webkit-text-stroke: 0 !important; text-shadow: none !important; }
#cart-widget :is(.btn, .btn *) { -webkit-text-stroke: 0 !important; }
#cart-widget [class*="product"] { border-bottom-color: transparent !important; }
/* předkošík musí být nad pruhem s menu (ten má kvůli opravě blikání z-index 1005) */
#cart-widget { z-index: 1010 !important; }
@media (min-width: 768px) {
  #cart-widget { border: 3px solid #fff !important; border-radius: 0 0 20px 20px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
}
/* výjimka z "tlačítka bez obrysu": tyhle dvě jsou textové odkazy na louce, obrys potřebují */
#content .toggle-coupon-input-button,
#content .toggle-coupon-input-button *,
#content .next-step-back .continue-shopping,
body #content .next-step-back {
  -webkit-text-stroke: 3px #fff !important;
  paint-order: stroke fill;
}

/* ===== naskakování produktů (Anime.js): dokud produkt nenaskočí, je skrytý ===== */
html.beba-pop :is(.products-block .product, .products-top .product, .subcategories li):not(.beba-popped)  /* během animace vyhraje inline opacity od Anime.js */ {
  opacity: 0;
}

/* ===== nadpisy po písmenkách (efekt 3) ===== */
.beba-w { display: inline-block; white-space: nowrap; }
.beba-l { display: inline-block; }
/* dokud nadpis není rozložený a přehraný, je skrytý (jen když běží efekty – třída beba-pop) */
html.beba-pop :is(#content h1:not(.sr-only), #content .h1, .homepage-group-title, .products-top-header):not(.beba-split) { opacity: 0; }
html.beba-pop .beba-split:not(.beba-played) .beba-l { opacity: 0; }

/* ===== carousel produktů na úvodce (v3: nativní posun + efekt podle polohy v CSS) =====
   Prostřední karta má SKUTEČNOU velikost (125 % původní) a nezvětšuje se → text je ostrý.
   Boční karty se zmenšují (scale < 1), záporné okraje je přitahují k sobě. */
html.beba-reel-on .type-index #content > .banners-row { display: none !important; }
.beba-reel {
  position: relative;
  margin: -40px 0 0;   /* vyšší pás kvůli záři, posunutý nahoru, ať nepřibude prázdné místo */
  --card-w: 351px;
}
.beba-reel-track {
  display: flex;
  align-items: center;
  height: 620px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0 calc(50% - var(--card-w) / 2);
  perspective: 1000px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.beba-reel-track::-webkit-scrollbar { display: none; }
.beba-reel-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.beba-reel-card {
  flex: 0 0 var(--card-w);
  margin: 0 -14px;
  scroll-snap-align: center;
  padding: 16px 16px 22px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none !important;
  background: rgba(255,255,255,.28);
  border: 4px solid #fff;
  border-radius: 32px;
  box-shadow: 0 8px 0 rgba(0,0,0,.12), 0 16px 34px rgba(0,0,0,.2);
}
/* zmenšení/natočení/zeslabení bočních karet podle polohy v pásu – počítá prohlížeč sám */
@supports (animation-timeline: view()) {
  .beba-reel-card {
    animation: beba-reel-cover linear both;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;
  }
}
@keyframes beba-reel-cover {
  0%   { transform: scale(.53) rotateY(28deg);  opacity: .35; }
  35%  { transform: scale(.67) rotateY(10deg);  opacity: .8; }
  50%  { transform: none; opacity: 1; }
  65%  { transform: scale(.67) rotateY(-10deg); opacity: .8; }
  100% { transform: scale(.53) rotateY(-28deg); opacity: .35; }
}
.beba-reel-img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  background: #fff; border-radius: 22px; overflow: hidden;
}
.beba-reel-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.beba-reel-name, .beba-reel-price {
  font-family: "Baloo 2", "Exo 2", sans-serif !important;
  color: #111 !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  text-align: center;
  line-height: 1.15;
}
.beba-reel-name { font-weight: 700; font-size: 24px; min-height: 2.3em; display: flex; align-items: center; }
.beba-reel-price { font-weight: 800; font-size: 32px; -webkit-text-stroke-width: 5px; }
.beba-reel-btn {
  font-family: "Baloo 2", "Exo 2", sans-serif;
  font-weight: 800; font-size: 22px;
  padding: 8px 30px;
  border: 4px solid #fff; border-radius: 22px;
  background: linear-gradient(180deg, #5fb3ff 0%, #2a7fe0 50%, #1a5fb4 100%);
  box-shadow: 0 5px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.5);
  transition: opacity .2s;
}
#content .beba-reel .beba-reel-btn {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.28) !important;
}
.beba-reel-card:not(.is-center) .beba-reel-btn { opacity: 0; }
.beba-reel-arrow {
  position: absolute; top: 50%; z-index: 5;
  width: 52px; height: 52px; margin-top: -26px;
  border-radius: 50%; border: 3px solid #fff;
  background: linear-gradient(180deg, #ffe066 0%, #ffc21a 50%, #f5a300 100%);
  color: #fff; font: 800 34px/1 "Baloo 2", sans-serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.28);
  box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.55);
  cursor: pointer; padding: 0 0 4px;
}
.beba-reel-prev { left: 8px; }
.beba-reel-next { right: 8px; }
@media (max-width: 767px) {
  .beba-reel { margin: -45px 0 -30px; --card-w: 277px; }
  .beba-reel-track { height: 540px; }
  .beba-reel-card { margin: 0 -31px; padding: 14px 14px 16px; border-radius: 28px; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
  .beba-reel-name { font-size: 22px; }
  .beba-reel-price { font-size: 28px; }
  .beba-reel-btn { font-size: 20px; padding: 6px 26px; }
  .beba-reel-arrow { display: none; }  /* na mobilu se swipuje prstem */
}
/* počítač: pás je široký, takže boční karty by se skoro nenatočily → silnější ohyb a přitažení ke středu jako kolotoč */
@media (min-width: 768px) {
  @supports (animation-timeline: view()) {
    /* rozsah efektu v pevných pixelech kolem středu → stejné rozestupy na každém monitoru */
    .beba-reel-card {
      animation-name: beba-reel-cover-wide;
      animation-range: cover calc(50% - 864px) cover calc(50% + 864px);
    }
  }
  .beba-reel-track { perspective: 1100px; }
}
@keyframes beba-reel-cover-wide {
  0%   { transform: translateX(-300px) scale(.45) rotateY(50deg);  opacity: 0; }
  13%  { transform: translateX(-166px) scale(.55) rotateY(39deg);  opacity: .6; }
  31%  { transform: translateX(-33px)  scale(.646) rotateY(26.5deg); opacity: .95; }
  50%  { transform: none; opacity: 1; }
  69%  { transform: translateX(33px)   scale(.646) rotateY(-26.5deg); opacity: .95; }
  87%  { transform: translateX(166px)  scale(.55) rotateY(-39deg); opacity: .6; }
  100% { transform: translateX(300px)  scale(.45) rotateY(-50deg); opacity: 0; }
}
/* záře pod prostřední kartou (jako v apce) + ztlumení bočních karet.
   Obojí jen mění průhlednost vrstev (::before záře, ::after tmavý závoj) → plynulé i na iPhonu. */
.beba-reel-card { position: relative; view-timeline: --beba-card inline; }
.beba-reel-card::before, .beba-reel-card::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
}
.beba-reel-card::before {           /* záře – kreslí se jen vně karty */
  z-index: -1;
  box-shadow: 0 14px 46px 16px rgba(255, 214, 30, 1), 0 0 26px 8px rgba(255, 246, 160, 1);
  opacity: var(--beba-glow, 0);
}
.beba-reel-card::after {            /* tmavý závoj přes boční karty */
  background: rgba(15, 25, 60, .42);
  opacity: var(--beba-dim, 1);
}
@supports (animation-timeline: view()) {
  .beba-reel-card::before, .beba-reel-card::after {
    animation: linear both; animation-timeline: --beba-card; animation-range: cover 0% cover 100%;
  }
  .beba-reel-card::before { animation-name: beba-reel-glow; }
  .beba-reel-card::after  { animation-name: beba-reel-dim; }
}
@media (min-width: 768px) {
  @supports (animation-timeline: view()) {
    .beba-reel-card::before, .beba-reel-card::after {
      animation-range: cover calc(50% - 864px) cover calc(50% + 864px);
    }
  }
}
@keyframes beba-reel-glow { 0%, 40% { opacity: 0; } 50% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes beba-reel-dim  { 0%, 30% { opacity: 1; } 50% { opacity: 0; } 70%, 100% { opacity: 1; } }