/* Vevaticce: intuitivní okraje vodorovné lišty kulatých kategorií */

body.in-eshop.type-category .vv-subcategory-scrollbar,
body.in-eshop.type-category.vv-category-all .vv-subcategory-scrollbar{
  height:0!important;
  min-height:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

body.in-eshop.type-category .vv-subcategory-scrollbar__thumb{
  display:none!important;
}

body.in-eshop.type-category .vv-subcategory-arrow{
  pointer-events:auto!important;
}

body.in-eshop.type-category .subcategories.with-image.vv-subcategory-scrollable.is-at-start:not(.is-at-end){
  -webkit-mask-image:linear-gradient(90deg,
    #000 0,
    #000 calc(100% - clamp(190px, 18vw, 252px)),
    rgba(0,0,0,.72) calc(100% - clamp(132px, 12vw, 180px)),
    rgba(0,0,0,.28) calc(100% - clamp(55px, 5vw, 78px)),
    transparent calc(100% - 8px),
    transparent 100%)!important;
  mask-image:linear-gradient(90deg,
    #000 0,
    #000 calc(100% - clamp(190px, 18vw, 252px)),
    rgba(0,0,0,.72) calc(100% - clamp(132px, 12vw, 180px)),
    rgba(0,0,0,.28) calc(100% - clamp(55px, 5vw, 78px)),
    transparent calc(100% - 8px),
    transparent 100%)!important;
}

body.in-eshop.type-category .subcategories.with-image.vv-subcategory-scrollable:not(.is-at-start):not(.is-at-end){
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,
    transparent 8px,
    rgba(0,0,0,.28) clamp(55px, 5vw, 78px),
    rgba(0,0,0,.72) clamp(132px, 12vw, 180px),
    #000 clamp(190px, 18vw, 252px),
    #000 calc(100% - clamp(190px, 18vw, 252px)),
    rgba(0,0,0,.72) calc(100% - clamp(132px, 12vw, 180px)),
    rgba(0,0,0,.28) calc(100% - clamp(55px, 5vw, 78px)),
    transparent calc(100% - 8px),
    transparent 100%)!important;
  mask-image:linear-gradient(90deg,
    transparent 0,
    transparent 8px,
    rgba(0,0,0,.28) clamp(55px, 5vw, 78px),
    rgba(0,0,0,.72) clamp(132px, 12vw, 180px),
    #000 clamp(190px, 18vw, 252px),
    #000 calc(100% - clamp(190px, 18vw, 252px)),
    rgba(0,0,0,.72) calc(100% - clamp(132px, 12vw, 180px)),
    rgba(0,0,0,.28) calc(100% - clamp(55px, 5vw, 78px)),
    transparent calc(100% - 8px),
    transparent 100%)!important;
}

body.in-eshop.type-category .subcategories.with-image.vv-subcategory-scrollable.is-at-end:not(.is-at-start){
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,
    transparent 8px,
    rgba(0,0,0,.28) clamp(55px, 5vw, 78px),
    rgba(0,0,0,.72) clamp(132px, 12vw, 180px),
    #000 clamp(190px, 18vw, 252px),
    #000 100%)!important;
  mask-image:linear-gradient(90deg,
    transparent 0,
    transparent 8px,
    rgba(0,0,0,.28) clamp(55px, 5vw, 78px),
    rgba(0,0,0,.72) clamp(132px, 12vw, 180px),
    #000 clamp(190px, 18vw, 252px),
    #000 100%)!important;
}

@media (max-width:768px){
  body.in-eshop.type-category .subcategories.with-image.vv-subcategory-scrollable.is-at-start:not(.is-at-end){
    -webkit-mask-image:linear-gradient(90deg,
      #000 0,
      #000 calc(100% - 134px),
      rgba(0,0,0,.72) calc(100% - 92px),
      rgba(0,0,0,.25) calc(100% - 36px),
      transparent calc(100% - 4px),
      transparent 100%)!important;
    mask-image:linear-gradient(90deg,
      #000 0,
      #000 calc(100% - 134px),
      rgba(0,0,0,.72) calc(100% - 92px),
      rgba(0,0,0,.25) calc(100% - 36px),
      transparent calc(100% - 4px),
      transparent 100%)!important;
  }

  body.in-eshop.type-category .subcategories.with-image.vv-subcategory-scrollable:not(.is-at-start):not(.is-at-end){
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0,
      transparent 4px,
      rgba(0,0,0,.25) 36px,
      rgba(0,0,0,.72) 92px,
      #000 134px,
      #000 calc(100% - 134px),
      rgba(0,0,0,.72) calc(100% - 92px),
      rgba(0,0,0,.25) calc(100% - 36px),
      transparent calc(100% - 4px),
      transparent 100%)!important;
    mask-image:linear-gradient(90deg,
      transparent 0,
      transparent 4px,
      rgba(0,0,0,.25) 36px,
      rgba(0,0,0,.72) 92px,
      #000 134px,
      #000 calc(100% - 134px),
      rgba(0,0,0,.72) calc(100% - 92px),
      rgba(0,0,0,.25) calc(100% - 36px),
      transparent calc(100% - 4px),
      transparent 100%)!important;
  }

  body.in-eshop.type-category .subcategories.with-image.vv-subcategory-scrollable.is-at-end:not(.is-at-start){
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0,
      transparent 4px,
      rgba(0,0,0,.25) 36px,
      rgba(0,0,0,.72) 92px,
      #000 134px,
      #000 100%)!important;
    mask-image:linear-gradient(90deg,
      transparent 0,
      transparent 4px,
      rgba(0,0,0,.25) 36px,
      rgba(0,0,0,.72) 92px,
      #000 134px,
      #000 100%)!important;
  }
}