/*
 * Veridian Health 2.6.2 — banner parity + tighter subcategory spacing
 * Loaded explicitly after the normal PrestaShop/theme stylesheet stack.
 * This file is intentionally breakpoint-independent for the home hero so the
 * desktop banner uses the exact same blur/focus treatment as mobile.
 */

/* ========================================================================== 
   HOME BANNER — SAME BLUR + SMOOTH FOCUS TRANSITION ON ALL BREAKPOINTS
   Applies generically to every ps_imageslider slide, including 1→2, 2→3 and
   the wrapped 3→1 transition.
   ========================================================================== */
.image-slider-block .carousel,
.image-slider-block .carousel .carousel-inner {
  overflow: hidden !important;
}

.image-slider-block .carousel .carousel-inner > .carousel-item {
  -webkit-transition: -webkit-transform .75s cubic-bezier(.22,.61,.36,1), opacity .50s ease !important;
  transition: transform .75s cubic-bezier(.22,.61,.36,1), opacity .50s ease !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-perspective: 1000px !important;
  perspective: 1000px !important;
}

.image-slider-block .carousel-item figure {
  overflow: hidden !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

.image-slider-block .carousel-item figure > img {
  display: block !important;
  -webkit-transition: -webkit-filter .50s ease, opacity .50s ease, -webkit-transform .75s cubic-bezier(.22,.61,.36,1) !important;
  transition: filter .50s ease, opacity .50s ease, transform .75s cubic-bezier(.22,.61,.36,1) !important;
  -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
  opacity: 1 !important;
  -webkit-transform: translateZ(0) scale(1) !important;
  transform: translateZ(0) scale(1) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: filter, opacity, transform;
}

/* Primary transition state used by assets/js/custom.js.  The values here are
   intentionally identical on mobile and desktop. */
.image-slider-block .carousel-item.vh-slide-out figure > img,
.image-slider-block .carousel-item.vh-slide-in figure > img {
  -webkit-filter: blur(5px) !important;
  filter: blur(5px) !important;
  opacity: .82 !important;
  -webkit-transform: translateZ(0) scale(1.012) !important;
  transform: translateZ(0) scale(1.012) !important;
}

.image-slider-block .carousel-item.vh-slide-in.vh-slide-in-focus figure > img {
  -webkit-filter: blur(0) !important;
  filter: blur(0) !important;
  opacity: 1 !important;
  -webkit-transform: translateZ(0) scale(1) !important;
  transform: translateZ(0) scale(1) !important;
}

/* Bootstrap-state fallback.  This keeps the blur visible on desktop even if a
   browser composites the moving carousel item before the custom JS class is
   painted.  It also covers wrapped slide 3→1 without special-case selectors. */
.image-slider-block .carousel-item.next:not(.vh-slide-in) figure > img,
.image-slider-block .carousel-item.prev:not(.vh-slide-in) figure > img {
  -webkit-filter: blur(5px) !important;
  filter: blur(5px) !important;
  opacity: .82 !important;
  -webkit-transform: translateZ(0) scale(1.012) !important;
  transform: translateZ(0) scale(1.012) !important;
}

.image-slider-block .carousel-item.next.left:not(.vh-slide-in) figure > img,
.image-slider-block .carousel-item.prev.right:not(.vh-slide-in) figure > img {
  -webkit-animation: vh-banner-focus-in .75s cubic-bezier(.22,.61,.36,1) both !important;
  animation: vh-banner-focus-in .75s cubic-bezier(.22,.61,.36,1) both !important;
}

.image-slider-block .carousel-item.active.left:not(.vh-slide-out) figure > img,
.image-slider-block .carousel-item.active.right:not(.vh-slide-out) figure > img {
  -webkit-animation: vh-banner-blur-out .75s cubic-bezier(.22,.61,.36,1) both !important;
  animation: vh-banner-blur-out .75s cubic-bezier(.22,.61,.36,1) both !important;
}

@-webkit-keyframes vh-banner-focus-in {
  0% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: .82;
    -webkit-transform: translateZ(0) scale(1.012);
    transform: translateZ(0) scale(1.012);
  }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
}

@keyframes vh-banner-focus-in {
  0% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: .82;
    -webkit-transform: translateZ(0) scale(1.012);
    transform: translateZ(0) scale(1.012);
  }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
}

@-webkit-keyframes vh-banner-blur-out {
  0% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
  100% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: .82;
    -webkit-transform: translateZ(0) scale(1.012);
    transform: translateZ(0) scale(1.012);
  }
}

@keyframes vh-banner-blur-out {
  0% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
  100% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: .82;
    -webkit-transform: translateZ(0) scale(1.012);
    transform: translateZ(0) scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-slider-block .carousel .carousel-inner > .carousel-item,
  .image-slider-block .carousel-item figure > img {
    -webkit-transition-duration: .01ms !important;
    transition-duration: .01ms !important;
    -webkit-animation: none !important;
    animation: none !important;
  }
}

/* ========================================================================== 
   CATEGORY PAGE — TIGHTER CHILD/SUBCATEGORY COVER GRID
   ========================================================================== */
body#category #main > ul.vh-subcategories-grid {
  gap: 10px !important;
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 991.98px) {
  body#category #main > ul.vh-subcategories-grid {
    gap: 9px !important;
    margin-top: 12px !important;
    margin-bottom: 22px !important;
  }
}

@media (max-width: 575.98px) {
  body#category #main > ul.vh-subcategories-grid {
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
  }
}

/* ========================================================================== 
   DESKTOP CATEGORY DROPDOWN — TIGHTER SUBCATEGORY GROUPING UNDER PARENTS
   ========================================================================== */
@media (min-width: 1200px) {
  #header .top-navigation-menu .top-menu .level0 > .sub-menu {
    padding: 18px 22px 20px !important;
  }

  #header .top-navigation-menu .top-menu .level0 > .sub-menu > .top-menu[data-depth="1"] {
    column-gap: 20px !important;
    row-gap: 12px !important;
  }

  #header .top-navigation-menu .top-menu .level1 > a {
    padding-bottom: 6px !important;
  }

  #header .top-navigation-menu .top-menu[data-depth="2"],
  #header .top-navigation-menu .top-menu[data-depth="3"],
  #header .top-navigation-menu .top-menu[data-depth="4"] {
    gap: 3px !important;
  }

  #header .top-navigation-menu .top-menu .level2 > a,
  #header .top-navigation-menu .top-menu .level3 > a,
  #header .top-navigation-menu .top-menu .level4 > a {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
}