/* MOJEKAFE homepage carousel arrows, desktop and tablet only (>= 768 px), hidden with one slide. v=20261112a, same file on CZ and SK.
 * Why: Shoptet main-11 parks the arrow circle 20 px OUTSIDE the carousel box (.carousel-control.left::before{left:-20px}
 * at >= 768 px) and slides it in on hover; the circle is 25 % black with a white chevron. On slide 2 (transparent hero,
 * page sketch background) and at 1200/1440 px (box starts 11 px from the viewport edge, under the fixed trust badge)
 * it reads as a grey blob in the left page gutter. Here the circle always stays inside the box, vertically centred,
 * fades only (no slide in from outside), in shop colours (#202020 / #fff, focus ring #E19F3C).
 * Scope: only #carousel (homepage), only >= 768 px. Phones untouched (mk-bf-weeks hides the arrows there until 2 Dec).
 * Hit area, autoplay, slides and links unchanged. Rollback: remove the one header line that loads this file. */
/* one slide only: nothing to switch to, never show arrows (Shoptet 12 Nov renders none then; this guards template changes) */
#carousel:has(>.carousel-inner>.item:only-child)>.carousel-control{display:none}
@media (min-width:768px){
  #carousel>.carousel-control::before{
    top:50%;width:40px;height:40px;margin-top:-20px;
    line-height:36px;text-align:center;font-size:16px;
    color:#202020;background-color:#fff;border:2px solid #202020;border-radius:50%;
    transition:background-color .2s ease-out,color .2s ease-out
  }
  #carousel>.carousel-control.left::before{left:12px;right:auto}
  #carousel>.carousel-control.right::before{right:12px;left:auto}
  #carousel>.carousel-control:hover::before{background-color:#202020;color:#fff}
  /* keyboard users see the arrow they are on */
  #carousel>.carousel-control:focus-visible{opacity:1;outline:0}
  #carousel>.carousel-control:focus-visible::before{background-color:#202020;color:#fff;outline:2px solid #E19F3C;outline-offset:2px}
}
/* width bands where the box starts < 37 px from the viewport edge (box left = (viewport - container) / 2) or the banner
 * is small: keep the left circle clear of the fixed trust badge (0 to 36 px) and the circles clear of the banner text */
@media (min-width:768px) and (max-width:991.98px){
  #carousel>.carousel-control::before{width:32px;height:32px;margin-top:-16px;line-height:28px;font-size:14px}
  #carousel>.carousel-control.left::before{left:max(8px,calc(37px - (100vw - 747px) / 2))}
  #carousel>.carousel-control.right::before{right:8px}
}
@media (min-width:992px) and (max-width:1199.98px){
  #carousel>.carousel-control::before{width:36px;height:36px;margin-top:-18px;line-height:32px}
  #carousel>.carousel-control.left::before{left:max(8px,calc(37px - (100vw - 972px) / 2))}
  #carousel>.carousel-control.right::before{right:8px}
}
@media (min-width:1200px) and (max-width:1279.98px){
  #carousel>.carousel-control::before{width:36px;height:36px;margin-top:-18px;line-height:32px}
  #carousel>.carousel-control.left::before{left:max(12px,calc(37px - (100vw - 1178px) / 2))}
}
@media (min-width:1440px) and (max-width:1499.98px){
  #carousel>.carousel-control::before{width:36px;height:36px;margin-top:-18px;line-height:32px}
  #carousel>.carousel-control.left::before{left:max(12px,calc(37px - (100vw - 1418px) / 2))}
}