/* eKonsument v1.4 — old-shop inline search and original slider arrows.
   Only header search and home slider controls. Loaded AFTER v1.3 styles.
   Source of slider dimensions: default-bootstrap/css/modules/homeslider/homeslider.css.
*/

/* PS9 search module remains registered, but must not render in white category menu.
   Keep the module and its hook unchanged; only hide this specific presentation. */
#header .header-top.eko-whitebar .search-widget,
#header .header-top.eko-whitebar #search_widget,
#header .header-top.eko-whitebar #_desktop_search,
#header .header-top.eko-whitebar .search-widget form {
  display:none!important;
}

/* Expand leftwards IN THE BLACK BAR, not as a floating box below it. */
@media (min-width:768px) {
  #header .eko-topbar-actions .eko-search-panel {
    position:relative!important;
    overflow:visible!important;
    z-index:900!important;
  }
  #header .eko-topbar-actions .eko-search-panel > summary {
    position:relative!important;
    z-index:902!important;
  }
  #header .eko-topbar-actions .eko-search-panel .eko-search-form {
    position:absolute!important;
    top:0!important;
    right:calc(100% + 8px)!important;
    left:auto!important;
    display:flex!important;
    box-sizing:border-box!important;
    align-items:center!important;
    width:240px!important;
    min-width:0!important;
    max-width:min(240px, calc(100vw - 130px))!important;
    height:36px!important;
    padding:0!important;
    margin:0!important;
    gap:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    z-index:901!important;
  }
  #header .eko-topbar-actions .eko-search-panel:not([open]) .eko-search-form {
    display:none!important;
  }
  #header .eko-topbar-actions .eko-search-panel[open] .eko-search-form {
    animation:eko-search-expand .18s ease-out both;
  }
  #header .eko-topbar-actions .eko-search-panel .eko-search-form input[type="search"] {
    position:static!important;
    display:block!important;
    box-sizing:border-box!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:36px!important;
    padding:6px 11px!important;
    margin:0!important;
    border:1px solid #d5d5d5!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#222!important;
    font:13px/1.3 Arial,Helvetica,sans-serif!important;
    outline-offset:2px!important;
    opacity:1!important;
  }
  #header .eko-topbar-actions .eko-search-panel .eko-search-form button[type="submit"] {
    /* Pressing Enter in the input submits the form; summary is the visible button. */
    position:absolute!important;
    width:1px!important;height:1px!important;
    overflow:hidden!important;
    padding:0!important;margin:0!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}
@keyframes eko-search-expand {
  from {opacity:0;clip-path:inset(0 0 0 100%);}
  to {opacity:1;clip-path:inset(0 0 0 0);}
}
@media (prefers-reduced-motion:reduce) {
  #header .eko-search-panel .eko-search-form {animation:none!important;}
}

/* Mobile: black-bar search icon, with the input expanding towards the left. */
@media (max-width:767px) {
  #header .eko-mobile-nav {position:relative!important;min-height:58px!important;}
  #header .eko-mobile-nav .eko-search-panel--mobile {
    position:absolute!important;
    top:11px!important;
    right:96px!important;
    display:block!important;
    width:36px!important;height:36px!important;
    margin:0!important;padding:0!important;
    z-index:950!important;
  }
  #header .eko-mobile-nav .eko-search-panel--mobile > summary {
    position:relative!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;
    width:36px!important;height:36px!important;
    margin:0!important;padding:0!important;
    background:#fff!important;color:#1f1a17!important;
    border:0!important;border-radius:6px!important;
    cursor:pointer!important;list-style:none!important;
  }
  #header .eko-mobile-nav .eko-search-panel--mobile > summary::-webkit-details-marker {display:none!important;}
  #header .eko-mobile-nav .eko-search-panel--mobile > summary::marker {content:''!important;}
  #header .eko-mobile-nav .eko-search-panel--mobile .eko-search-form {
    position:absolute!important;
    top:0!important;
    right:calc(100% + 6px)!important;
    left:auto!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    width:min(195px,calc(100vw - 155px))!important;
    max-width:calc(100vw - 155px)!important;
    height:36px!important;
    margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;
    z-index:951!important;
  }
  #header .eko-mobile-nav .eko-search-panel--mobile:not([open]) .eko-search-form {display:none!important;}
  #header .eko-mobile-nav .eko-search-panel--mobile[open] .eko-search-form {animation:eko-search-expand .18s ease-out both;}
  #header .eko-mobile-nav .eko-search-panel--mobile .eko-search-form label {
    position:absolute!important;width:1px!important;height:1px!important;
    overflow:hidden!important;clip:rect(0,0,0,0)!important;
  }
  #header .eko-mobile-nav .eko-search-panel--mobile .eko-search-form input[type="search"] {
    display:block!important;box-sizing:border-box!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
    height:36px!important;margin:0!important;padding:7px 9px!important;
    border:1px solid #ccc!important;border-radius:5px!important;
    background:#fff!important;color:#222!important;font-size:13px!important;
  }
  #header .eko-mobile-nav .eko-search-panel--mobile .eko-search-form button[type="submit"] {
    position:absolute!important;width:1px!important;height:1px!important;
    overflow:hidden!important;padding:0!important;margin:0!important;
    clip:rect(0,0,0,0)!important;opacity:0!important;pointer-events:none!important;
  }
}
@media (max-width:360px) {
  #header .eko-mobile-nav .eko-search-panel--mobile {right:82px!important;}
  #header .eko-mobile-nav .eko-search-panel--mobile .eko-search-form {
    width:min(165px,calc(100vw - 140px))!important;
    max-width:calc(100vw - 140px)!important;
  }
}

/* Slider arrows like PrestaShop 1.6:
   TWO outlined 52x52 px squares in the BOTTOM RIGHT of the slide.
   No dots, no center-of-slide giant arrows. */
#index #carousel {position:relative!important;}
#index #carousel .carousel-indicators {display:none!important;}
#index #carousel .direction {
  position:absolute!important;
  top:auto!important;bottom:10px!important;
  left:auto!important;right:10px!important;
  display:block!important;
  box-sizing:border-box!important;
  width:112px!important;height:52px!important;
  margin:0!important;padding:0!important;
  transform:none!important;
  z-index:30!important;
  pointer-events:none!important;
}
#index #carousel .direction .carousel-control {
  position:absolute!important;
  top:0!important;bottom:auto!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;
  width:52px!important;height:52px!important;
  margin:0!important;padding:0!important;
  border:2px solid #fff!important;
  border-radius:0!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  text-decoration:none!important;
  text-indent:0!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  box-shadow:none!important;
  z-index:31!important;
}
#index #carousel .direction .carousel-control.left {left:0!important;right:auto!important;}
#index #carousel .direction .carousel-control.right {left:auto!important;right:0!important;}
#index #carousel .direction .carousel-control:hover,
#index #carousel .direction .carousel-control:focus-visible {
  background:rgba(35,35,35,.83)!important;
}
#index #carousel .direction .carousel-control .icon-prev,
#index #carousel .direction .carousel-control .icon-next {
  position:static!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:48px!important;height:48px!important;
  margin:0!important;padding:0!important;
  background:transparent!important;
  transform:none!important;
  opacity:1!important;
}
#index #carousel .direction .carousel-control .icon-prev::before,
#index #carousel .direction .carousel-control .icon-next::before {
  content:none!important;display:none!important;
}
#index #carousel .direction .carousel-control .icon-prev::after,
#index #carousel .direction .carousel-control .icon-next::after {
  content:""!important;display:block!important;
  width:12px!important;height:12px!important;
  border-top:2px solid #fff!important;
  border-right:2px solid #fff!important;
  background:transparent!important;
  position:static!important;
}
#index #carousel .direction .carousel-control .icon-prev::after {transform:rotate(-135deg)!important;margin-left:6px!important;}
#index #carousel .direction .carousel-control .icon-next::after {transform:rotate(45deg)!important;margin-right:6px!important;}
#index #carousel .direction .carousel-control .material-icons {
  display:none!important;
}
@media (max-width:767px) {
  #index #carousel .direction {
    right:8px!important;bottom:8px!important;
    width:80px!important;height:36px!important;
  }
  #index #carousel .direction .carousel-control {
    width:36px!important;height:36px!important;
  }
  #index #carousel .direction .carousel-control .icon-prev,
  #index #carousel .direction .carousel-control .icon-next {
    width:32px!important;height:32px!important;
  }
  #index #carousel .direction .carousel-control .icon-prev::after,
  #index #carousel .direction .carousel-control .icon-next::after {
    width:9px!important;height:9px!important;
  }
}
