.tab-switcher-wrapper {
  position: relative;
  z-index: 1;
}

  .tab-switcher-wrapper-top-mask {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 84px;
    z-index: 5;
    mask-image: url('/themes/custom/hounder_base/masks/tab-switcher-top-mask.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: top;
  }

  @media(max-width: 767px) {

  .tab-switcher-wrapper-top-mask {
      mask-size: 100%;
      mask-position: bottom
  }
    }

  .tab-switcher-wrapper-bottom-mask {
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
    height: 84px;
    z-index: 4;
    mask-image: url('/themes/custom/hounder_base/masks/tab-switcher-bottom-mask.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: top;
    transform: rotateX(180deg);
  }

  @media(max-width: 767px) {

  .tab-switcher-wrapper-bottom-mask {
      mask-size: 100%;
      mask-position: bottom
  }
    }

  .tab-switcher-wrapper .tab-switcher {
    display: block;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .tab-switcher-wrapper .tab-switcher-heading {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      margin-top: 24px;
    }

  .tab-switcher-wrapper .tab-switcher-heading-title {
        font-family: Bitter;
        font-style: normal;
        font-weight: 400;
        letter-spacing: -0.616px;
      }

  @media(max-width: 767px) {

  .tab-switcher-wrapper .tab-switcher-heading {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 16px
    }
      }

  .tab-switcher-wrapper .tab-switcher-tabs {
      width: 100%;
      height: auto;
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 16px;
      min-height: 86px;
    }

  .tab-switcher-wrapper .tab-switcher-tabs-tab {
        cursor: pointer;
        font-family: "IBM Plex Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%; /* 22px */
        letter-spacing: -0.22px;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
        width: fit-content;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;

      }

  .tab-switcher-wrapper .tab-switcher-tabs-tab::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #fff;
          border-radius: 2px;
          opacity: 0;
          transition: opacity 0.3s ease;
          mask-image: url('/themes/custom/hounder_base/masks/tab-switcher-active.svg');
          mask-size: 100%;
          mask-repeat: no-repeat;
          mask-position: center;
        }

  .tab-switcher-wrapper .tab-switcher-tabs-tab.active::after {
            content: '';
            opacity: 1;
          }

  .tab-switcher-wrapper .tab-switcher-tabs-tab:hover::after, .tab-switcher-wrapper .tab-switcher-tabs-tab:focus::after {
            content: '';
            opacity: 1;
          }

  @media(max-width: 767px) {

  .tab-switcher-wrapper .tab-switcher-tabs-tab {
          font-size: 16px

      }
        }

  .tab-switcher-wrapper .tab-switcher-slide {
      width: 100%;
      height: auto;
      align-items: stretch;
      justify-content: flex-start;
      gap: 16px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      transition: all 0.3s ease;
      display: none;
      opacity: 0;
    }

  .tab-switcher-wrapper .tab-switcher-slide.active {
        display: flex;
      }

  .tab-switcher-wrapper .tab-switcher-slide.active-and-visible {
        opacity: 1;
        transition-delay: 0.5s;
      }

  .tab-switcher-wrapper .tab-switcher-slide.inactive-and-invisible {
        opacity: 0;
      }

  .tab-switcher-wrapper .tab-switcher-slide-asset {
        width: 100%;
        height: auto;
        max-width: calc(50% - 16px);
        display: flex;
        align-items: center;
        justify-content: center;
        mask-image: url('/themes/custom/hounder_base/masks/tab-switcher-asset-mask.svg');
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;
        overflow: hidden;
      }

  .tab-switcher-wrapper .tab-switcher-slide-asset img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }

  .tab-switcher-wrapper .tab-switcher-slide-content {
        width: 100%;
        height: auto;
        max-width: 50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: auto;
        align-self: center;
      }

  .tab-switcher-wrapper .tab-switcher-slide-content-title {
          color: #FFF;
          font-family: Bitter;
          font-style: normal;
          font-weight: 700;
          letter-spacing: -0.352px;
          margin-bottom: 32px;
        }

  .tab-switcher-wrapper .tab-switcher-slide-content .slide-cta a {
          margin-top: 24px;
        }

  .tab-switcher-wrapper .tab-switcher-slide-content.snowdog a {
            border-color: var(--snowdog) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.snowdog a:hover {
              box-shadow: 0 2px 0 0 var(--snowdog);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.blacklab a {
            border-color: var(--blacklab) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.blacklab a:hover {
              box-shadow: 0 2px 0 0 var(--blacklab);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.whimper a {
            border-color: var(--whimper-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.whimper a:hover {
              box-shadow: 0 2px 0 0 var(--whimper-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.slobber a {
            border-color: var(--slobber-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.slobber a:hover {
              box-shadow: 0 2px 0 0 var(--slobber-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.drool a {
            border-color: var(--drool-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.drool a:hover {
              box-shadow: 0 2px 0 0 var(--drool-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.waterbowl a {
            border-color: var(--waterbowl-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.waterbowl a:hover {
              box-shadow: 0 2px 0 0 var(--waterbowl-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.booger a{
            border-color: var(--booger-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.booger a:hover {
              box-shadow: 0 2px 0 0 var(--booger-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.mange a {
            border-color: var(--mange-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.mange a:hover {
              box-shadow: 0 2px 0 0 var(--mange-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.rabies a{
            border-color: var(--rabies-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.rabies a:hover {
              box-shadow: 0 2px 0 0 var(--rabies-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.treat a{
            border-color: var(--treat-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.treat a:hover {
              box-shadow: 0 2px 0 0 var(--treat-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-content.kibble a {
            border-color: var(--kibble-darken) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-content.kibble a:hover {
              box-shadow: 0 2px 0 0 var(--kibble-darken);
            }

  .tab-switcher-wrapper .tab-switcher-slide-description a {
          width: fit-content;
          display: block;
          border-bottom: 1px solid #FFF;
          margin-bottom: 16px;
          transition: box-shadow 0.2s ease;
        }

  .tab-switcher-wrapper .tab-switcher-slide-description a:hover {
            box-shadow: 0 2px 0 0 #FFF;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.snowdog_text a, .tab-switcher-wrapper .tab-switcher-slide-description.snowdog_text p {
            color: var(--snowdog) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.blacklab_text a, .tab-switcher-wrapper .tab-switcher-slide-description.blacklab_text p {
            color: var(--blacklab) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.whimper_text a, .tab-switcher-wrapper .tab-switcher-slide-description.whimper_text p {
            color: var(--whimper) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.slobber_text a, .tab-switcher-wrapper .tab-switcher-slide-description.slobber_text p {
            color: var(--slobber) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.drool_text a, .tab-switcher-wrapper .tab-switcher-slide-description.drool_text p {
            color: var(--drool) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.waterbowl_text a, .tab-switcher-wrapper .tab-switcher-slide-description.waterbowl_text p {
            color: var(--waterbowl) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.booger_text a, .tab-switcher-wrapper .tab-switcher-slide-description.booger_text p {
            color: var(--booger) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.mange_text a, .tab-switcher-wrapper .tab-switcher-slide-description.mange_text p {
            color: var(--mange) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.rabies_text a, .tab-switcher-wrapper .tab-switcher-slide-description.rabies_text p {
            color: var(--rabies) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.treat_text a, .tab-switcher-wrapper .tab-switcher-slide-description.treat_text p {
            color: var(--treat) !important;
          }

  .tab-switcher-wrapper .tab-switcher-slide-description.kibble_text a, .tab-switcher-wrapper .tab-switcher-slide-description.kibble_text p {
            color: var(--kibble) !important;
          }

  @media(max-width: 767px) {
        .tab-switcher-wrapper .tab-switcher-slide-asset {
          max-width: 100%;
        }

        .tab-switcher-wrapper .tab-switcher-slide-content {
          max-width: 100%;
        }
      }

  .tab-switcher-wrapper .tab-switcher.whimper {
      background-color: var(--whimper);
    }

  .tab-switcher-wrapper .tab-switcher.whimper svg path {
        fill: #B7E9FB;
      }

  .tab-switcher-wrapper .tab-switcher.slobber {
      background-color: var(--slobber);
    }

  .tab-switcher-wrapper .tab-switcher.slobber svg path {
        fill: #B7E9FB;
      }

  .tab-switcher-wrapper .tab-switcher.drool {
      background-color: var(--drool);
    }

  .tab-switcher-wrapper .tab-switcher.rabies {
      background-color: var(--rabies);
    }

  .tab-switcher-wrapper .tab-switcher.treat {
      background-color: var(--treat);
    }

  .tab-switcher-wrapper .tab-switcher.booger {
      background-color: var(--booger);
    }

  .tab-switcher-wrapper .tab-switcher.mange {
      background-color: var(--mange);
    }

  .tab-switcher-wrapper .tab-switcher.kibble {
      background-color: var(--kibble);
    }

/* The wrapper of slides (your .tab-switcher element) */

.tab-switcher-all-slides {
  position: relative;
}

/* While transitioning, any .active slide is absolutely positioned to overlay */

.tab-switcher-all-slides.is-transitioning .tab-switcher-slide.active {
  position: absolute;
  inset: 0;           /* top:0; right:0; bottom:0; left:0 */
}

.tab-switcher-wrapper-top-mask.whimper, .tab-switcher-wrapper-bottom-mask.whimper {
    background-color: var(--whimper);
  }

.tab-switcher-wrapper-top-mask.slobber, .tab-switcher-wrapper-bottom-mask.slobber {
    background-color: var(--slobber);
  }

.tab-switcher-wrapper-top-mask.drool, .tab-switcher-wrapper-bottom-mask.drool {
    background-color: var(--drool);
  }

.tab-switcher-wrapper-top-mask.rabies, .tab-switcher-wrapper-bottom-mask.rabies {
    background-color: var(--rabies);
  }

.tab-switcher-wrapper-top-mask.treat, .tab-switcher-wrapper-bottom-mask.treat {
    background-color: var(--treat);
  }

.tab-switcher-wrapper-top-mask.booger, .tab-switcher-wrapper-bottom-mask.booger {
    background-color: var(--booger);
  }

.tab-switcher-wrapper-top-mask.mange, .tab-switcher-wrapper-bottom-mask.mange {
    background-color: var(--mange);
  }

.tab-switcher-wrapper-top-mask.kibble, .tab-switcher-wrapper-bottom-mask.kibble {
    background-color: var(--kibble);
  }/*# sourceMappingURL=tab-switcher.css.map */