/* barvime-opravy.css: fixes on top of the live barvime-v8.css; linked at the END of HTML kody zahlavi (same place as the former inline block).
   Every later design fix goes here, with a new ?v=. Order: (b) former block bv-oprava-2026-11-01, (a) earlier patch parts, (c) empty cart, (d) login + carousel texts. */
/* (b) */
@media (max-width:1199px){
  html body #header .navigation-buttons{display:flex!important;align-items:center!important;gap:0!important}
  html body #header .navigation-buttons>a:not(.bv-call),html body #header .navigation-buttons>button:not(.top-nav-button-login){width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important}
  html body #header .navigation-buttons a.bv-call{min-height:40px!important;margin-right:4px!important;flex:0 0 auto!important}
  html body #header .navigation-buttons>button.top-nav-button-login{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important}
}
@media (max-width:430px){
  html body #header .navigation-buttons a.bv-call{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;flex:0 0 44px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0!important;color:transparent!important;background:transparent!important;border:0!important;box-shadow:none!important;position:relative!important;gap:0!important;overflow:visible!important}
  html body #header .navigation-buttons a.bv-call:after{content:""!important;position:absolute!important;inset:3px!important;border-radius:50%!important;background:var(--bv-amber-soft,#f6e4cf)!important;z-index:0!important}
  html body #header .navigation-buttons a.bv-call:before{position:relative!important;z-index:1!important;font-size:17px!important;margin:0!important;color:var(--bv-fg,#1c1814)!important}
  html body #header .site-name{max-width:calc(100% - 182px)!important;min-width:0!important}
  html body #header .site-name a,html body #header .site-name img{max-width:100%!important;height:auto!important;display:block!important}
}
@media (min-width:768px) and (max-width:1199px){
  html body .carousel .item .extended-banner-texts{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;padding:36px 56px 44px!important;align-items:center!important;justify-content:center!important;text-align:center!important;background:linear-gradient(180deg,rgba(20,14,8,.30),rgba(20,14,8,.55))!important}
  html body .carousel .item>a{height:auto!important}
}
@media (min-width:768px) and (max-width:991px){
  html body .benefitBanner.position--benefitHomepage{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:767px){
  html body .benefitBanner__picture{flex:0 0 36px!important;width:36px!important}
  html body .benefitBanner__content{padding:0!important}
}
@media (min-width:768px) and (max-width:1198.98px){html body #header{position:relative!important}}
html body .products-inline.products-top{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;gap:12px!important}
html body .products-inline.products-top>.product{width:auto!important;max-width:none!important}
html body .products-inline.products-top>.product{height:auto!important;overflow:visible!important}
html body .products-inline.products-top .p{flex-wrap:nowrap!important;padding:12px!important;flex-direction:row!important;align-items:center!important;text-align:left!important;gap:12px!important;height:100%!important}
html body .products-inline.products-top .p .image{flex:0 0 72px!important;width:72px!important;height:72px!important;align-self:center!important;overflow:visible!important;position:static!important}
html body .products-inline.products-top .p .image img{width:72px!important;height:72px!important;object-fit:contain!important}
html body .products-inline.products-top .p .p-in{width:auto!important;height:auto!important;flex:1 1 0!important;min-width:0!important;text-align:left!important}
html body .products-inline.products-top .price-final,html body .products-inline.products-top .price{white-space:nowrap!important}
html body .products:not(.products-inline) .product{display:flex!important}
html body .products:not(.products-inline) .product .p{display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important}
html body .products:not(.products-inline) .product .p-in{display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
html body .products:not(.products-inline) .product .p-bottom{display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
html body .products:not(.products-inline) .product .p-bottom>div{flex:1 1 auto!important}
html body .products:not(.products-inline) .product .p-tools{margin-top:auto!important}
html body .products:not(.products-inline) .product .name{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;min-height:2.6em!important;line-height:1.3!important}
html body .products:not(.products-inline) .product .p-desc{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;font-size:13px!important;line-height:1.45!important;color:var(--bv-muted,#6b6158)!important;margin-bottom:12px!important}
@media (min-width:400px){html body .products:not(.products-inline) .product .prices,html body .products:not(.products-inline) .product .price-final{white-space:nowrap!important}}
@media (max-width:399px){html body .products:not(.products-inline) .product .price-final{font-size:15px!important;white-space:normal!important}html body .products:not(.products-inline) .product .prices{flex-wrap:wrap!important;justify-content:center!important}}
@media (min-width:768px) and (max-width:1199px){
  html body .content-wrapper-in>aside.sidebar{flex:0 0 220px!important;width:220px!important;max-width:220px!important}
  html body .content-wrapper-in>.content{flex:1 1 0!important;min-width:0!important}
}
@media (min-width:768px){html body #products.products-block,html body .products.homepage-products-2{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:16px!important}html body #products.products-block>.product,html body .products.homepage-products-2>.product{width:auto!important;max-width:none!important;margin:0!important}}
/* (a) */
@media (min-width:1200px){
  html body #header .user-action{background:transparent!important}
  html body #header .search-form-input-group .search-button{font-size:0!important;line-height:0!important;color:transparent!important;background:var(--bv-fg)!important;border:0!important;box-shadow:none!important;width:34px!important;height:34px!important;min-width:0!important;margin:0 0 0 -40px!important;padding:0!important;border-radius:50%!important;position:relative;z-index:1;overflow:hidden}
  html body #header .search-form-input-group .search-button:before{content:"";position:absolute;inset:0;margin:auto;width:17px;height:17px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:1199px){
  html body .menu-helper>ul{background:var(--bv-surface,#fff)!important;border:1px solid var(--bv-line,rgba(60,38,18,.12))!important;border-radius:16px!important;box-shadow:0 16px 38px rgba(0,0,0,.14)!important;height:auto!important;max-height:calc(100vh - 150px)!important;overflow-y:auto!important;z-index:1001!important}
  html body .menu-helper>ul li{border:0!important;border-bottom:1px solid var(--bv-line,rgba(60,38,18,.12))!important;background:transparent!important}
  html body .menu-helper>ul li:last-child{border-bottom:0!important}
  html body .menu-helper>ul li a{display:block!important;color:var(--bv-fg,#1c1814)!important;font-size:15px!important;font-weight:600!important;line-height:1.3!important;padding:13px 16px!important;text-decoration:none!important}
}
html body .bv-advisor-badge{white-space:nowrap!important;flex:0 0 auto!important}
html body .category-top .subcategories li a::after{content:none!important}
@media (max-width:576px){
  html body .category-top .subcategories li a{padding-right:32px!important}
}
/* (c) */
@media (max-width:767px){html body .row.empty-cart-boxes{margin-left:0!important;margin-right:0!important}}
/* (d) */
@media (max-width:767px){html body #header .navigation-buttons>button.top-nav-button-login{display:none!important}}
@media (min-width:768px) and (max-width:1199px){
  html body #carousel .item .extended-banner-texts{max-width:none!important;left:0!important;right:0!important;width:100%!important;background:none!important;padding:36px 48px 44px!important}
  html body #carousel .item .extended-banner-texts>*{max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
  html body #carousel .item>a:before{background:linear-gradient(180deg,rgba(16,11,7,.38) 0%,rgba(16,11,7,.62) 100%)!important}
  html body #carousel .item .bv-pill{align-self:center!important}
}
@media (max-width:767px){
  html body #carousel .item .extended-banner-text{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;max-width:34em!important;margin-left:auto!important;margin-right:auto!important}
}
@media (max-width:360px){
  html body #carousel .item .extended-banner-title,html body #carousel .item .extended-banner-title *{font-size:24px!important;line-height:1.18!important}
}
/* (e) phones: banner photo on top showing all cans (52vw, right-aligned crop), texts below on a dark band */
@media (max-width:767px){
  html body #carousel,html body #carousel .carousel-inner,html body #carousel .item,html body #carousel .item>a{height:auto!important;min-height:0!important;max-height:none!important}
  html body #carousel .item>a{display:flex!important;flex-direction:column!important;background:var(--bv-fg,#1c1814)!important}
  html body #carousel .item>a:before{display:none!important}
  html body #carousel .item img{position:static!important;display:block!important;width:100%!important;height:52vw!important;min-height:0!important;max-height:none!important;object-fit:cover!important;object-position:97% 50%!important}
  html body #carousel .item .extended-banner-texts{position:static!important;inset:auto!important;height:auto!important;width:auto!important;padding:18px 16px 44px!important;background:var(--bv-fg,#1c1814)!important}
}
/* (f) phones get the square mobile banner (banner-mobil_2x.jpg 2160x2160, cans in the lower half): crop to the lower part; the wide desktop photo is unaffected (it is cropped only sideways) */
@media (max-width:767px){html body #carousel .item img{object-position:97% 83%!important}}
/* (g) phones: phone icon centred inside its round button (on the real mobile page it sat next to the circle) */
@media (max-width:430px){html body #header .navigation-buttons a.bv-call:before{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;text-indent:0!important;line-height:1!important;z-index:1!important}}

/* opravy-6 (1. 11.): menu on all devices.
   Phones and tablets (<1200 px): v8 made the opened menu one sideways row (1 765 px wide, 1-2 categories visible); back to a vertical list with a divider line between items.
   Desktop (>=1200 px): space and a thin divider between items; "≡" lists exactly the items that did not fit (by position, works for any menu up to 20 items);
   "≡" invisible when all fit (visibility, not display: Samba measures it when splitting the menu). */
@media (max-width:1199px){
html body.navigation-window-visible #header #navigation{height:auto!important;max-height:calc(100dvh - 60px)!important;overflow-y:auto!important;overflow-x:hidden!important}
html body.navigation-window-visible #header #navigation .navigation-in{height:auto!important;display:block!important;overflow-x:hidden!important;width:100%!important;max-width:100%!important;position:static!important;background:var(--bv-surface,#fff)!important}
html body.navigation-window-visible #header .navigation-in>ul.menu-level-1{display:block!important;width:100%!important}
html body.navigation-window-visible #header .navigation-in>ul.menu-level-1>li{display:block!important;width:100%!important;white-space:normal!important;border-bottom:1px solid var(--bv-line,rgba(60,38,18,.12))!important}
html body.navigation-window-visible #header .navigation-in>ul.menu-level-1>li:last-child{border-bottom:0!important}
html body.navigation-window-visible #header .navigation-in>ul.menu-level-1>li>a{display:flex!important;align-items:center!important;min-height:48px!important;padding:12px 20px!important;font-size:16px!important;font-weight:600!important;white-space:normal!important}
html body.navigation-window-visible #header .navigation-in>ul.menu-level-1>li.splitted{display:block!important;visibility:visible!important}
html body.navigation-window-visible #header .navigation-wrapper .menu-helper{display:none!important}
}
@media (min-width:1200px){
html body #header #navigation .menu-level-1{gap:2px!important}
html body #header #navigation .menu-level-1>li>a{padding:0 12px!important;border-radius:999px!important}
html body #header #navigation .menu-level-1>li>a:hover{background:var(--bv-accent-soft,#f6e7d6)!important;color:var(--bv-accent,#82440e)!important}
html body #header #navigation .menu-level-1>li+li::before{content:""!important;position:absolute!important;left:-2px!important;top:50%!important;width:1px!important;height:16px!important;margin-top:-8px!important;background:var(--bv-line,rgba(60,38,18,.18))!important;pointer-events:none!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(1).splitted) .menu-helper .menu-level-1>li:nth-child(1){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(2).splitted) .menu-helper .menu-level-1>li:nth-child(2){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(3).splitted) .menu-helper .menu-level-1>li:nth-child(3){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(4).splitted) .menu-helper .menu-level-1>li:nth-child(4){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(5).splitted) .menu-helper .menu-level-1>li:nth-child(5){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(6).splitted) .menu-helper .menu-level-1>li:nth-child(6){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(7).splitted) .menu-helper .menu-level-1>li:nth-child(7){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(8).splitted) .menu-helper .menu-level-1>li:nth-child(8){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(9).splitted) .menu-helper .menu-level-1>li:nth-child(9){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(10).splitted) .menu-helper .menu-level-1>li:nth-child(10){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(11).splitted) .menu-helper .menu-level-1>li:nth-child(11){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(12).splitted) .menu-helper .menu-level-1>li:nth-child(12){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(13).splitted) .menu-helper .menu-level-1>li:nth-child(13){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(14).splitted) .menu-helper .menu-level-1>li:nth-child(14){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(15).splitted) .menu-helper .menu-level-1>li:nth-child(15){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(16).splitted) .menu-helper .menu-level-1>li:nth-child(16){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(17).splitted) .menu-helper .menu-level-1>li:nth-child(17){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(18).splitted) .menu-helper .menu-level-1>li:nth-child(18){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(19).splitted) .menu-helper .menu-level-1>li:nth-child(19){display:block!important}
html body #header .navigation-wrapper:has(#navigation .menu-level-1>li:nth-child(20).splitted) .menu-helper .menu-level-1>li:nth-child(20){display:block!important}
html body #header .menu-helper .menu-level-1>li+li{border-top:1px solid var(--bv-line,rgba(60,38,18,.12))!important}
html body #header .navigation-wrapper:not(:has(#navigation .menu-level-1>li.splitted)) .menu-helper{visibility:hidden!important;pointer-events:none!important}
}

/* opravy-8 (1. 11.): full-width grey band behind the homepage products (v8 draws it 3 680 px wide above 1 712 px, which made the page
   scroll sideways at 1 920 px and up). The band keeps the content width and is painted to the screen edges by a shadow:
   shadows never create scrollable overflow, so no page-wide overflow clipping is needed. Below 1 713 px v8 stays as it was. */
@media (min-width:1713px){html body .products-wrapper::before{left:0!important;right:0!important;box-shadow:0 0 0 100vmax rgb(241,241,241)!important;clip-path:inset(0 -100vmax)!important}}
/* Category and product pages: Samba makes the benefit strip and the product description section "screen width - 8 px" wide, shifted left by half
   the scrollbar, so they end 0.3 to 0.5 px past the right edge (1 px sideways scroll). 1 px narrower ends them inside the edge for scrollbars up to 18 px;
   position and inner layout stay Samba's. */
@media (min-width:768px){html body:not(.in-index) .benefit-banners-full-width,html body .p-detail-full-width{width:calc(100vw - 9px)!important}}

/* opravy-10 (2. 11.): phone carousel with one steady height. The slides differed (e.g. 425 / 390 / 361 px on iPhone SE: location label
   only on slide 1, 1-2 line titles, 2-3 line texts), so the page jumped at every change. All slides now share one grid cell: the
   carousel is as tall as its tallest slide at any width and text, the dark text band fills the rest, the slide animation is Samba's. */
@media (max-width:767px){
html body #carousel .carousel-inner{display:grid!important}
html body #carousel .carousel-inner>.item{grid-area:1/1!important;display:block!important;position:relative!important;visibility:hidden}
html body #carousel .carousel-inner>.item.active,html body #carousel .carousel-inner>.item.next,html body #carousel .carousel-inner>.item.prev{visibility:visible}
html body #carousel .carousel-inner>.item>a{height:100%!important}
html body #carousel .carousel-inner>.item .extended-banner-texts{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
html body #carousel .carousel-inner>.item .extended-banner-texts>*{flex-shrink:0!important}
}