/* ================================================================
   KETOZONA PET SECONDARY NAVIGATION
================================================================ */

.kzpet-subnav{
  position:relative;
  z-index:1020;
  width:100%;
  background:#f5f1e8;
  border-bottom:1px solid rgba(23,54,47,.13);
  box-shadow:0 4px 14px rgba(23,54,47,.035);
}

.kzpet-subnav *,
.kzpet-subnav *:before,
.kzpet-subnav *:after{
  box-sizing:border-box;
}

.kzpet-subnav a{
  text-decoration:none!important;
}

.kzpet-subnav-inner{
  max-width:1320px;
  min-height:52px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:26px;
}

.kzpet-subnav-brand{
  flex:0 0 auto;
  color:#17362f!important;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
  white-space:nowrap;
}

.kzpet-subnav-menu{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:5px;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}

.kzpet-subnav-item{
  position:relative;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}

.kzpet-subnav-topline{
  display:flex;
  align-items:center;
  height:100%;
}

.kzpet-subnav-link{
  position:relative;
  display:flex;
  align-items:center;
  min-height:51px;
  padding:0 13px;
  color:#374842!important;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.09em;
  white-space:nowrap;
  transition:
    color .18s ease,
    background .18s ease;
}

.kzpet-subnav-link:hover,
.kzpet-subnav-link.is-active{
  color:#17362f!important;
}

.kzpet-subnav-link.is-active:after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:#2f705c;
}

.kzpet-subnav-catalog-link{
  min-height:34px;
  margin:8px 6px;
  padding:0 16px;
  border-radius:999px;
  background:#17362f;
  color:#fff!important;
}

.kzpet-subnav-catalog-link:hover,
.kzpet-subnav-catalog-link.is-active{
  background:#2f705c;
  color:#fff!important;
}

.kzpet-subnav-catalog-link.is-active:after{
  display:none;
}

.kzpet-subnav-dd-toggle{
  width:25px;
  height:34px;
  margin-left:-8px;
  padding:0;
  border:0;
  background:transparent;
  color:#73807b;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}

.kzpet-subnav-dropdown{
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  z-index:1040;
  width:265px;
  margin:0;
  padding:10px;
  display:none;
  list-style:none;
  border:1px solid rgba(23,54,47,.10);
  border-radius:0 0 16px 16px;
  background:#fff;
  box-shadow:0 18px 40px rgba(23,54,47,.14);
}

.kzpet-subnav-item.has-dropdown:hover > .kzpet-subnav-dropdown,
.kzpet-subnav-item.has-dropdown:focus-within > .kzpet-subnav-dropdown,
.kzpet-subnav-item.has-dropdown.is-open > .kzpet-subnav-dropdown{
  display:block;
}

.kzpet-subnav-dropdown li{
  display:block;
  margin:0;
  padding:0;
}

.kzpet-subnav-dropdown a{
  display:block;
  padding:10px 11px;
  border-radius:9px;
  color:#4f5c57!important;
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  transition:
    color .15s ease,
    background .15s ease;
}

.kzpet-subnav-dropdown a:hover{
  background:#f4f1ea;
  color:#17362f!important;
}

.kzpet-subnav-mobile-toggle,
.kzpet-subnav-catalog-mobile{
  display:none;
}


/* ================================================================
   PET CATALOG PAGE
================================================================ */

.kzpet-catalog-page{
  color:#26302d;
  background:#fff;
}

.kzpet-catalog-hero{
  padding:74px 24px 62px;
  background:
    radial-gradient(circle at 82% 0%,rgba(47,112,92,.11),transparent 32%),
    linear-gradient(135deg,#f7f4ed 0%,#ece6da 100%);
}

.kzpet-catalog-shell{
  max-width:1240px;
  margin:0 auto;
}

.kzpet-catalog-kicker{
  margin-bottom:12px;
  color:#2f705c;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}

.kzpet-catalog-hero h1{
  max-width:780px;
  margin:0 0 17px;
  color:#17221f;
  font-size:clamp(42px,6vw,68px);
  line-height:1;
  letter-spacing:-.045em;
}

.kzpet-catalog-hero p{
  max-width:720px;
  margin:0;
  color:#53605b;
  font-size:17px;
  line-height:1.7;
}

.kzpet-catalog-content{
  padding:64px 24px 82px;
}

.kzpet-catalog-count{
  margin-bottom:28px;
  color:#68736f;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
}

.kzpet-catalog-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.kzpet-catalog-card{
  overflow:hidden;
  border:1px solid rgba(23,54,47,.10);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(23,54,47,.055);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.kzpet-catalog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(23,54,47,.10);
}

.kzpet-catalog-image{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f5f3ee;
}

.kzpet-catalog-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.kzpet-catalog-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#83908b;
  font-size:11px;
  font-weight:800;
}

.kzpet-catalog-card-body{
  padding:19px;
}

.kzpet-catalog-card h2{
  min-height:42px;
  margin:0 0 10px;
  color:#202d29;
  font-size:16px;
  line-height:1.35;
}

.kzpet-catalog-price{
  margin-bottom:15px;
  color:#17362f;
  font-size:17px;
  font-weight:900;
}

.kzpet-catalog-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#2f705c!important;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.kzpet-catalog-empty{
  padding:48px 30px;
  border:1px solid rgba(23,54,47,.10);
  border-radius:24px;
  background:#f8f6f1;
  text-align:center;
}

.kzpet-catalog-empty h2{
  margin:0 0 12px;
  color:#1d2925;
  font-size:28px;
}

.kzpet-catalog-empty p{
  max-width:620px;
  margin:0 auto;
  color:#626d68;
  line-height:1.7;
}


/* Catalog page uses PET footer, not legacy global footer */
body#module-kzpetnav-catalog #footer,
body#module-kzpetnav-catalog footer#footer,
body#module-kzpetnav-catalog #footer-container-main,
body#module-kzpetnav-catalog #footer-container-first,
body#module-kzpetnav-catalog #footer-container-after{
  display:none!important;
}


/* ================================================================
   CATALOG PET FOOTER
================================================================ */

.kzpet-module-footer{
  padding:55px 24px 28px;
  background:#142b26;
  color:#f4f1e9;
}

.kzpet-module-footer-inner{
  max-width:1240px;
  margin:0 auto;
}

.kzpet-module-footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:34px;
}

.kzpet-module-footer-brand strong{
  display:block;
  margin-bottom:10px;
  font-size:18px;
}

.kzpet-module-footer-brand p{
  max-width:280px;
  margin:0;
  color:rgba(255,255,255,.65);
  font-size:13px;
  line-height:1.65;
}

.kzpet-module-footer h3{
  margin:0 0 15px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.kzpet-module-footer ul{
  margin:0;
  padding:0;
  list-style:none;
}

.kzpet-module-footer li{
  margin-bottom:8px;
}

.kzpet-module-footer a{
  color:rgba(255,255,255,.67)!important;
  font-size:12px;
  text-decoration:none!important;
}

.kzpet-module-footer a:hover{
  color:#fff!important;
}

.kzpet-module-footer-bottom{
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.57);
  font-size:10px;
  letter-spacing:.05em;
}


/* ================================================================
   RESPONSIVE
================================================================ */

@media(max-width:1080px){

  .kzpet-subnav-inner{
    gap:13px;
  }

  .kzpet-subnav-link{
    padding-left:9px;
    padding-right:9px;
    font-size:9px;
  }

  .kzpet-catalog-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .kzpet-module-footer-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .kzpet-module-footer-brand{
    grid-column:1/-1;
  }

}


@media(max-width:760px){

  .kzpet-subnav-inner{
    min-height:54px;
    padding:0 15px;
    gap:10px;
    flex-wrap:wrap;
  }

  .kzpet-subnav-brand{
    margin-right:auto;
  }

  .kzpet-subnav-catalog-mobile{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 11px;
    border-radius:999px;
    background:#17362f;
    color:#fff!important;
    font-size:8.5px;
    font-weight:900;
    letter-spacing:.06em;
  }

  .kzpet-subnav-catalog-mobile.is-active{
    background:#2f705c;
  }

  .kzpet-subnav-mobile-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:0 9px;
    border:1px solid rgba(23,54,47,.14);
    border-radius:999px;
    background:#fff;
    color:#17362f;
    font-size:8px;
    font-weight:900;
    letter-spacing:.06em;
  }

  .kzpet-subnav-menu{
    order:10;
    flex:0 0 calc(100% + 30px);
    width:calc(100% + 30px);
    margin:0 -15px;
    padding:8px 15px 13px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid rgba(23,54,47,.10);
    background:#f5f1e8;
  }

  .kzpet-subnav.is-mobile-open .kzpet-subnav-menu{
    display:flex;
  }

  .kzpet-subnav-item{
    display:block;
    width:100%;
  }

  .kzpet-subnav-catalog-desktop{
    display:none;
  }

  .kzpet-subnav-topline{
    width:100%;
  }

  .kzpet-subnav-link{
    flex:1;
    min-height:42px;
    padding:0 8px;
    font-size:10px;
  }

  .kzpet-subnav-link.is-active:after{
    left:8px;
    right:auto;
    width:28px;
  }

  .kzpet-subnav-dd-toggle{
    width:42px;
    height:42px;
    margin:0;
  }

  .kzpet-subnav-dropdown{
    position:static;
    width:100%;
    margin:0 0 5px;
    padding:5px;
    border-radius:11px;
    box-shadow:none;
  }

  .kzpet-subnav-item.has-dropdown:hover > .kzpet-subnav-dropdown{
    display:none;
  }

  .kzpet-subnav-item.has-dropdown.is-open > .kzpet-subnav-dropdown{
    display:block;
  }

  .kzpet-catalog-hero{
    padding:54px 18px 48px;
  }

  .kzpet-catalog-content{
    padding:45px 18px 60px;
  }

  .kzpet-catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
  }

  .kzpet-module-footer-grid{
    grid-template-columns:1fr 1fr;
  }

}


@media(max-width:430px){

  .kzpet-subnav-brand{
    font-size:9px;
  }

  .kzpet-subnav-mobile-toggle span:first-child{
    display:none;
  }

  .kzpet-catalog-grid{
    grid-template-columns:1fr;
  }

  .kzpet-module-footer-grid{
    grid-template-columns:1fr;
  }

  .kzpet-module-footer-brand{
    grid-column:auto;
  }

}

/* KZPET SUBNAV ALIGNMENT V2 START */

/*
 * Goals:
 * 1) keep the pet artwork/logo from the green main menu visually above
 *    the secondary PET bar even without hover;
 * 2) move the "KETOZONA PET" label slightly right so it aligns better
 *    with the green menu margins;
 * 3) preserve the centered main PET navigation.
 */

@media (min-width: 761px){

    .kzpet-subnav{
        position:relative;
        z-index:40;
        overflow:visible !important;
    }

    .kzpet-subnav-inner{
        position:relative;
        width:100%;
        max-width:1320px;
        min-height:52px;
        margin:0 auto;
        padding:0 28px 0 48px;

        display:grid;
        grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
        align-items:center;
        gap:0;

        overflow:visible !important;
    }

    .kzpet-subnav-brand{
        grid-column:1;
        justify-self:start;
        align-self:center;
        margin:0 0 0 18px;
        white-space:nowrap;
    }

    .kzpet-subnav-menu{
        grid-column:2;
        justify-self:center;
        align-self:stretch;

        flex:0 0 auto;
        width:max-content;
        max-width:none;

        display:flex;
        align-items:stretch;
        justify-content:center;

        margin:0;
        padding:0;
        gap:4px;
    }

    .kzpet-subnav-item{
        flex:0 0 auto;
    }

    /*
     * Lower PET bar should never cover the pet artwork sitting in the
     * green main menu area.
     */
    .kzpet-subnav,
    .kzpet-subnav-inner,
    .kzpet-subnav-menu{
        z-index:40;
    }

    /*
     * Artwork image itself.
     */
    img[src*="kzpet-menu-logo-final.png"],
    img[src*="/img/kzpet/"][src*="menu-logo-final"],
    img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]{
        position:relative !important;
        z-index:2600 !important;
        display:block;
    }

    /*
     * Its direct anchor/container.
     */
    a:has(img[src*="kzpet-menu-logo-final.png"]),
    a:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]),
    a:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]),
    li:has(img[src*="kzpet-menu-logo-final.png"]),
    li:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]),
    li:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]),
    div:has(> a > img[src*="kzpet-menu-logo-final.png"]),
    div:has(> a > img[src*="/img/kzpet/"][src*="menu-logo-final"]),
    div:has(> a > img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]){
        position:relative !important;
        z-index:2599 !important;
        overflow:visible !important;
    }

    /*
     * Common Warehouse / mega-menu wrappers around that logo.
     * We explicitly keep overflow visible and z-index above the PET bar.
     */
    .cbp-hrmenu li:has(img[src*="kzpet-menu-logo-final.png"]),
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]),
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]),
    .cbp-hrmenu li:has(img[src*="kzpet-menu-logo-final.png"]) > a,
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]) > a,
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]) > a,
    .cbp-hrmenu li:has(img[src*="kzpet-menu-logo-final.png"]) .cbp-hrsub,
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]) .cbp-hrsub,
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]) .cbp-hrsub,
    .cbp-hrmenu li:has(img[src*="kzpet-menu-logo-final.png"]) .cbp-hrsub-inner,
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]) .cbp-hrsub-inner,
    .cbp-hrmenu li:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]) .cbp-hrsub-inner{
        position:relative !important;
        z-index:2598 !important;
        overflow:visible !important;
    }

    /*
     * Fallback for wrappers using generic menu classes.
     */
    .iqitmegamenu li:has(img[src*="kzpet-menu-logo-final.png"]),
    .iqitmegamenu li:has(img[src*="/img/kzpet/"][src*="menu-logo-final"]),
    .iqitmegamenu li:has(img[src*="/img/kzpet/"][src*="kzpet-menu-logo"]){
        position:relative !important;
        z-index:2598 !important;
        overflow:visible !important;
    }

}

@media (max-width: 760px){

    .kzpet-subnav-inner{
        display:flex;
    }

}

/* KZPET SUBNAV ALIGNMENT V2 END */

/* KZPET MENU ARTWORK LAYER V1 START */

/*
 * Warehouse main green menu must own the upper stacking context.
 * This allows the existing PET artwork to protrude over the PET
 * secondary navigation at all times, not only on hover.
 */

@media (min-width:761px){

    /* Secondary PET navigation stays underneath the green header artwork */
    .kzpet-subnav{
        position:relative !important;
        z-index:5 !important;
        overflow:visible !important;
    }

    .kzpet-subnav-inner{
        position:relative !important;
        z-index:5 !important;
        overflow:visible !important;
    }


    /*
     * Warehouse / IQIT green-menu wrappers.
     * Raise the WHOLE menu stacking context, not merely the image.
     */
    #iqitmegamenu-wrapper,
    #iqitmegamenu-mobile,
    .iqitmegamenu-wrapper,
    .iqitmegamenu,
    .container-iqitmegamenu,
    .cbp-hrmenu,
    .cbp-hrmenu > ul,
    .cbp-hrmenu > ul > li{
        overflow:visible !important;
    }

    #iqitmegamenu-wrapper,
    .iqitmegamenu-wrapper,
    .container-iqitmegamenu,
    .iqitmegamenu,
    .cbp-hrmenu{
        position:relative !important;
        z-index:5000 !important;
    }


    /*
     * PET menu item itself and every useful ancestor below the green bar.
     */
    .cbp-hrmenu li:has(img[src*="kzpet"]),
    .iqitmegamenu li:has(img[src*="kzpet"]),
    #iqitmegamenu-wrapper li:has(img[src*="kzpet"]){
        position:relative !important;
        z-index:5200 !important;
        overflow:visible !important;
    }

    .cbp-hrmenu li:has(img[src*="kzpet"]) > a,
    .iqitmegamenu li:has(img[src*="kzpet"]) > a,
    #iqitmegamenu-wrapper li:has(img[src*="kzpet"]) > a{
        position:relative !important;
        z-index:5201 !important;
        overflow:visible !important;
    }


    /*
     * The actual PET artwork.
     */
    #iqitmegamenu-wrapper img[src*="kzpet"],
    .iqitmegamenu img[src*="kzpet"],
    .cbp-hrmenu img[src*="kzpet"]{
        position:relative !important;
        z-index:5300 !important;
        overflow:visible !important;
        visibility:visible !important;
        opacity:1 !important;
    }


    /*
     * Some Warehouse variants wrap the full-width menu in header-bottom
     * containers. Those must not clip the artwork either.
     */
    #desktop-header,
    #desktop-header-container,
    #header-desktop,
    .header-bottom,
    .header-bottom-wrapper,
    .header-nav,
    .header-nav-wrapper{
        overflow:visible !important;
    }


    /*
     * Keep the label in the PET secondary bar aligned inside the same
     * effective left margin as the green menu.
     */
    .kzpet-subnav-brand{
        margin-left:32px !important;
    }

}

/* KZPET MENU ARTWORK LAYER V1 END */

/* KZPET CLICKABLE LAYER V1 START */

/*
 * Phase 8H correctly exposed the PET artwork, but raising the complete
 * green-menu wrapper also placed an invisible stacking layer over the
 * secondary PET navigation.
 *
 * Keep the general green menu neutral.
 * Raise only:
 * - PET artwork/menu item
 * - real Warehouse dropdown panels.
 *
 * Secondary PET navigation therefore remains fully clickable.
 */

@media (min-width:761px){

    /* --------------------------------------------------------------
       PET SECONDARY NAVIGATION
    -------------------------------------------------------------- */

    .kzpet-subnav{
        position:relative !important;
        z-index:200 !important;
        overflow:visible !important;
        pointer-events:auto !important;
    }

    .kzpet-subnav-inner,
    .kzpet-subnav-menu,
    .kzpet-subnav-item,
    .kzpet-subnav-topline,
    .kzpet-subnav-link,
    .kzpet-subnav-dd-toggle,
    .kzpet-subnav-catalog-link{
        pointer-events:auto !important;
    }

    .kzpet-subnav-inner{
        position:relative !important;
        z-index:201 !important;
    }


    /* --------------------------------------------------------------
       DO NOT PUT THE WHOLE GREEN MENU ABOVE THE PET BAR
    -------------------------------------------------------------- */

    #iqitmegamenu-wrapper,
    .iqitmegamenu-wrapper,
    .container-iqitmegamenu,
    .iqitmegamenu,
    .cbp-hrmenu{
        z-index:auto !important;
        overflow:visible !important;
    }


    /* --------------------------------------------------------------
       PET ARTWORK ONLY ABOVE THE SECONDARY BAR
    -------------------------------------------------------------- */

    .cbp-hrmenu li:has(img[src*="kzpet"]),
    .iqitmegamenu li:has(img[src*="kzpet"]),
    #iqitmegamenu-wrapper li:has(img[src*="kzpet"]){
        position:relative !important;
        z-index:2600 !important;
        overflow:visible !important;
    }

    .cbp-hrmenu li:has(img[src*="kzpet"]) > a,
    .iqitmegamenu li:has(img[src*="kzpet"]) > a,
    #iqitmegamenu-wrapper li:has(img[src*="kzpet"]) > a{
        position:relative !important;
        z-index:2601 !important;
        overflow:visible !important;
    }

    #iqitmegamenu-wrapper img[src*="kzpet"],
    .iqitmegamenu img[src*="kzpet"],
    .cbp-hrmenu img[src*="kzpet"]{
        position:relative !important;
        z-index:2700 !important;
        visibility:visible !important;
        opacity:1 !important;

        /*
         * The enclosing link remains clickable.
         * The protruding image itself must not steal clicks from
         * PET navigation underneath its lower edge.
         */
        pointer-events:none !important;
    }


    /* --------------------------------------------------------------
       NORMAL WAREHOUSE DROPDOWNS STILL OPEN ABOVE EVERYTHING
    -------------------------------------------------------------- */

    .cbp-hrmenu .cbp-hrsub,
    .cbp-hrmenu .cbp-hrsub-inner,
    .iqitmegamenu .dropdown-menu,
    #iqitmegamenu-wrapper .dropdown-menu{
        z-index:4000 !important;
    }


    /* --------------------------------------------------------------
       PREVENT CLIPPING, WITHOUT CREATING A GIANT CLICK OVERLAY
    -------------------------------------------------------------- */

    #desktop-header,
    #desktop-header-container,
    #header-desktop,
    .header-bottom,
    .header-bottom-wrapper,
    .header-nav,
    .header-nav-wrapper,
    #iqitmegamenu-wrapper,
    .iqitmegamenu-wrapper,
    .container-iqitmegamenu,
    .iqitmegamenu,
    .cbp-hrmenu,
    .cbp-hrmenu > ul{
        overflow:visible !important;
    }


    /* Current left alignment approved visually */
    .kzpet-subnav-brand{
        margin-left:32px !important;
    }

}

/* KZPET CLICKABLE LAYER V1 END */

/* ==========================================================================
   KZPET MOBILE NAV V1
   Mobile-only secondary navigation.
   Desktop Phase 8I remains untouched.
   ========================================================================== */

.kzpet-mobile-nav-v1 {
    display: none;
}

@media (max-width: 991.98px) {

    /*
     * Replace the desktop-oriented PET secondary nav on mobile.
     * It remains untouched at >= 992px.
     */
    .kzpet-subnav {
        display: none !important;
    }

    .kzpet-mobile-nav-v1 {
        display: block;
        position: relative;
        width: 100%;
        z-index: 3900;
        background: #17362f;
        color: #fff;
        font-family: inherit;
        box-shadow: 0 3px 12px rgba(0,0,0,.12);
    }

    .kzpet-mobile-nav-v1__bar {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 0 16px;
    }

    .kzpet-mobile-nav-v1__brand {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .055em;
        line-height: 1;
        white-space: nowrap;
    }

    .kzpet-mobile-nav-v1__paw {
        font-size: 18px;
        line-height: 1;
    }

    .kzpet-mobile-nav-v1__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 36px;
        padding: 6px 12px;
        margin: 0;
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 3px;
        background: transparent;
        color: #fff;
        font-family: inherit;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .07em;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    .kzpet-mobile-nav-v1__hamburger {
        width: 17px;
        height: 13px;
        position: relative;
        display: inline-block;
    }

    .kzpet-mobile-nav-v1__hamburger::before,
    .kzpet-mobile-nav-v1__hamburger::after,
    .kzpet-mobile-nav-v1__hamburger span {
        content: "";
        position: absolute;
        left: 0;
        width: 17px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }

    .kzpet-mobile-nav-v1__hamburger::before {
        top: 0;
    }

    .kzpet-mobile-nav-v1__hamburger span {
        top: 5.5px;
    }

    .kzpet-mobile-nav-v1__hamburger::after {
        top: 11px;
    }

    .kzpet-mobile-nav-v1.is-open
    .kzpet-mobile-nav-v1__hamburger::before {
        top: 5.5px;
        transform: rotate(45deg);
    }

    .kzpet-mobile-nav-v1.is-open
    .kzpet-mobile-nav-v1__hamburger span {
        opacity: 0;
    }

    .kzpet-mobile-nav-v1.is-open
    .kzpet-mobile-nav-v1__hamburger::after {
        top: 5.5px;
        transform: rotate(-45deg);
    }

    .kzpet-mobile-nav-v1__panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        border-top: 1px solid rgba(255,255,255,.15);
        box-shadow: 0 8px 20px rgba(0,0,0,.16);
    }

    .kzpet-mobile-nav-v1.is-open
    .kzpet-mobile-nav-v1__panel {
        display: block;
    }

    .kzpet-mobile-nav-v1__link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 49px;
        padding: 12px 18px;
        border-bottom: 1px solid #e8ece9;
        background: #fff;
        color: #17362f !important;
        text-decoration: none !important;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: .015em;
    }

    .kzpet-mobile-nav-v1__link::after {
        content: "›";
        flex: 0 0 auto;
        margin-left: 15px;
        color: #729021;
        font-size: 22px;
        font-weight: 400;
        line-height: 1;
    }

    .kzpet-mobile-nav-v1__link--catalog {
        background: #f5f8e9;
        color: #17362f !important;
        font-weight: 900;
    }

    .kzpet-mobile-nav-v1__link--world {
        background: #fafaf8;
    }

    body.kzpet-mobile-menu-open {
        overflow-x: hidden;
    }
}