/* Veridian Health 2.6.55
   Homepage panel treatment inspired by the approved ivy mock-up.
   - restores Quick Start to the simple v2.6.53 black/opaque treatment
   - adds cream translucent panels behind the main homepage banners/sections
   - keeps the ivy wall clearly visible between panels
   - rounds and softens the header/content containers
*/

:root {
  --vh-panel: rgba(248, 247, 239, 0.92);
  --vh-panel-strong: rgba(252, 251, 246, 0.97);
  --vh-panel-border: rgba(229, 229, 213, 0.92);
  --vh-green: #58762a;
  --vh-green-dark: #2d3d15;
  --vh-text: #17220f;
}

/* --------------------------------------------------------------------------
   QUICK START: undo the 2.6.54 glow / outline enlargement.
   Keep the user's requested 0% transparency and black text/icons.
   -------------------------------------------------------------------------- */
.vh-guidebar,
.vh-guidebar-item,
.vh-guidebar-item:hover,
.vh-guidebar-item:focus,
.vh-guidebar-item:active,
.vh-guidebar-icon,
.vh-guidebar-sale .vh-guidebar-icon,
.vh-guidebar-eyebrow,
.vh-guidebar-label,
.vh-guidebar-item .fa,
.vh-guidebar-item i {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  color: #000 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.vh-guidebar-eyebrow,
.vh-guidebar-label,
.vh-guidebar-item {
  font-weight: inherit !important;
}

.vh-guidebar-eyebrow,
.vh-guidebar-label,
.vh-guidebar-icon {
  font-size: inherit !important;
}

/* --------------------------------------------------------------------------
   HEADER: compact cream card over the ivy, closer to the supplied reference.
   -------------------------------------------------------------------------- */
#header {
  background: transparent !important;
  background-color: transparent !important;
}

#header .header-nav {
  background: var(--vh-green-dark) !important;
  color: #fff !important;
  border: 0 !important;
}

#header .header-nav a,
#header .header-nav button,
#header .header-nav .expand-more,
#header .header-nav .material-icons {
  color: #fff !important;
}

#header .header-top {
  background: transparent !important;
  padding-top: 18px !important;
  padding-bottom: 0 !important;
}

#header .header-top > .container {
  max-width: 1320px !important;
  background: var(--vh-panel-strong) !important;
  border: 1px solid var(--vh-panel-border) !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 9px 25px rgba(26, 47, 16, .14) !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

#header .header-navfullwidth,
#header .top-navigation-menu,
#header .navbar-block {
  background: transparent !important;
  background-color: transparent !important;
}

#header .top-navigation-menu > .container,
#header .navbar-block > .container {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: var(--vh-panel-strong) !important;
  border: 1px solid var(--vh-panel-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 9px 25px rgba(26, 47, 16, .14) !important;
  overflow: visible !important;
}

#header .top-navigation-menu #_desktop_top_menu,
#header #_desktop_top_menu,
#header .top-navigation-menu .top-menu,
#header .top-navigation-menu .top-menu > li,
#header .top-navigation-menu .top-menu > li > a,
#header #_desktop_top_menu > ul,
#header #_desktop_top_menu > ul > li {
  background: transparent !important;
  background-color: transparent !important;
}

#header .top-navigation-menu .top-menu .level0 > a,
#header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
  color: var(--vh-text) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  border-radius: 8px !important;
}

#header .top-navigation-menu .top-menu .level0:hover > a,
#header .top-navigation-menu .top-menu .level0.current > a,
#header #_desktop_top_menu .top-menu[data-depth="0"] > li:hover > a {
  color: var(--vh-green-dark) !important;
  background: rgba(88, 118, 42, .10) !important;
}

/* --------------------------------------------------------------------------
   HERO BANNER: panel frame around the existing sharp banner image.
   -------------------------------------------------------------------------- */
#index .image-slider-block {
  background: var(--vh-panel) !important;
  border: 1px solid var(--vh-panel-border) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 28px rgba(24, 43, 16, .16) !important;
  -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
  backdrop-filter: blur(3px) saturate(110%) !important;
}

#index .image-slider-block .carousel,
#index .image-slider-block .carousel-inner,
#index .image-slider-block .carousel-item,
#index .image-slider-block .carousel-item figure,
#index .image-slider-block .carousel-item figure > img:not(.vh-unified-blur-image) {
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   NEW PRODUCTS + FEATURED COLLECTION: large cream glass panels like reference.
   -------------------------------------------------------------------------- */
#index section.featured-products,
#index section.new-products,
#index .featured-products,
#index .new-products {
  background: var(--vh-panel) !important;
  background-color: var(--vh-panel) !important;
  border: 1px solid var(--vh-panel-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(24, 43, 16, .14) !important;
  padding: 20px 18px 18px !important;
  margin-top: 20px !important;
  margin-bottom: 24px !important;
  -webkit-backdrop-filter: blur(3px) saturate(110%) !important;
  backdrop-filter: blur(3px) saturate(110%) !important;
}

#index .featured-products .products,
#index .new-products .products,
#index .featured-products .product-slider,
#index .new-products .product-slider,
#index .product-slider,
#index .product-slider.owl-carousel,
#index .product-slider .owl-wrapper-outer,
#index .product-slider .owl-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

#index .products-section-title,
#index .featured-products .products-section-title,
#index .new-products .products-section-title,
#index .section-title {
  color: var(--vh-green-dark) !important;
  text-shadow: none !important;
  margin: 0 0 16px !important;
  padding: 0 4px 8px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(88, 118, 42, .28) !important;
  text-align: left !important;
}

#index .product-miniature,
#index .featured-products .thumbnail-container,
#index .new-products .thumbnail-container,
#index .featured-products .product-miniature,
#index .new-products .product-miniature {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(222, 225, 210, .95) !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 16px rgba(26, 47, 16, .10) !important;
}

#index .product-miniature .product-description {
  background: transparent !important;
}

/* Green controls closer to the reference */
#index .product-miniature .btn,
#index .product-miniature .add-to-cart,
#index .featured-products .btn,
#index .new-products .btn {
  border-radius: 8px !important;
}

/* Static home strips get the same panel language when present. */
#index .static_blocks,
#index .home-bottom,
#index .home-bottom-1,
#index .home-bottom-2,
#index .home-bottom-3 {
  border-radius: 16px !important;
}

/* --------------------------------------------------------------------------
   MOBILE: preserve the same visual language without oversized margins.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #header .header-nav {
    background: var(--vh-green-dark) !important;
  }

  #header .header-top {
    padding-top: 8px !important;
  }

  #header .header-top > .container {
    width: calc(100% - 16px) !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    padding: 10px !important;
  }

  #header .top-navigation-menu > .container,
  #header .navbar-block > .container {
    width: calc(100% - 16px) !important;
    border-radius: 0 0 12px 12px !important;
  }

  #mobile_top_menu_wrapper,
  #mobile_top_menu_wrapper .js-top-menu-bottom,
  #mobile_top_menu_wrapper .top-menu {
    background: var(--vh-panel-strong) !important;
    color: var(--vh-text) !important;
  }

  #mobile_top_menu_wrapper .top-menu > li > a {
    color: var(--vh-text) !important;
  }

  #index .image-slider-block {
    padding: 6px !important;
    border-radius: 14px !important;
  }

  #index section.featured-products,
  #index section.new-products,
  #index .featured-products,
  #index .new-products {
    padding: 14px 10px 12px !important;
    border-radius: 14px !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
  }

  #index .products-section-title,
  #index .featured-products .products-section-title,
  #index .new-products .products-section-title,
  #index .section-title {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}
