/** Shopify CDN: Minification failed

Line 355:0 Unexpected "/"

**/
/* ========= NAV BAR ========= */
nav{
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  background: #303b46;
}

/* ========= LAYOUT / WRAPPER ========= */
.kvpmenu-wrapper{
  position: relative;
  min-height: 70px;
  padding: 0 30px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kvpmenu-logo{ margin-top: 10px; }
.newmenu-logo{ width: 80px; height: 33px; }

.kvpmenu-items{ display: flex; align-items: center; }
.kvpmenu-items a{ color:#fff; background:#303b46; text-decoration:none; }

/* ========= TOP LEVEL LINKS ========= */
.kvpmenu-nav-links{
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: #fff;
}

.kvpmenu-nav-links li{
  list-style: none;
  position: relative;

}

.kvpmenu-nav-links li a{
  color: #fff !important;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 5px;
  transition: color .2s ease, background .2s ease;
}

.kvpmenu-nav-links li a:hover{
  color: #fdba3b !important;
  background: #303b46;
}

.menutitle{ text-transform: uppercase; }
.kvp-menu-linkonly {text-transform: uppercase;}

/* Hide mobile-only labels on desktop */
.kvpmenu-nav-links .kvpmenu-mobile-item{ display: none; }

/* ========= DESKTOP DROPDOWNS (simple lists) ========= */
.kvpmenu-drop-menu-1,
.kvpmenu-drop-menu-2,
.kvpmenu-drop-menu-3,
.kvpmenu-drop-menu-4{
  position: absolute;
  left: 0;
  top: 48px;
  min-width: 220px;
  background: #303b46;
  box-shadow: 0 6px 10px rgba(0,0,0,.15);
  border-radius: 10px;
  padding: 8px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  transform: translateY(6px);
}

.kvpmenu-drop-menu-1 li a,
.kvpmenu-drop-menu-2 li a,
.kvpmenu-drop-menu-3 li a,
.kvpmenu-drop-menu-4 li a{
  display:block; width:100%; padding:12px 16px; font-weight:400; border-radius:0;
}

/* Show basic dropdowns on hover (desktop) */
@media (min-width: 971px){
  .kvpmenu-nav-links li:hover > .kvpmenu-drop-menu-1,
  .kvpmenu-nav-links li:hover > .kvpmenu-drop-menu-2,
  .kvpmenu-nav-links li:hover > .kvpmenu-drop-menu-3,
  .kvpmenu-nav-links li:hover > .kvpmenu-drop-menu-4{
    opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0);
  }
}

/* ========= DESKTOP MEGA (Products) ========= */
.kvp-has-mega{ position: relative; }
.kvp-mega-panel{
  position: absolute;
  left: 0; right: 0; top: 48px;
  background:#fff; border-radius:14px;
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
  padding: 24px 28px 14px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}

@media (min-width: 971px){
  .kvp-has-mega:hover > .kvp-mega-panel,
  .kvp-has-mega:focus-within > .kvp-mega-panel{
    opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0);
  }
  /* For desktop, hide the mobile Products list */
  .kvp-has-mega > .kvpmenu-drop-menu-2{ display:none !important; }
}

/* Mega grid */
.kvp-mega-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(160px,1fr));
  gap:18px;
}

@media (max-width:1440px){ .kvp-mega-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:1280px){ .kvp-mega-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:1120px){ .kvp-mega-grid{ grid-template-columns: repeat(3,1fr); } }

/* Cards */
.kvp-mega-card{
  display:grid;
  grid-template-rows:auto min-content;
  gap:10px;
  text-decoration:none;
  background:#f8fafb;
  border-radius:12px;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color:#fff;
  width: 380px;
}
.kvp-mega-card:hover,
.kvp-mega-card:focus-visible{
  transform: translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.10) !important;
  /*background: #abc7c7 !important;*/
  color: #303b46 !important;
}
.kvp-mega-card figure {
  margin: 0;
  display: block;
  width: 350px;       /* fixed width */
  height: 150px;      /* fixed height */
  overflow: hidden;   /* crop overflow */
}
.kvp-mega-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* no distortion */
  display: block;
}

.kvp-mega-card span{ padding:10px 12px 12px; font-weight:600; line-height:1.25; color:#26313a; }
.kvp-mega-card a{
    padding:0;
}
/* 2) Remove the left indent and left-align text */
.kvp-mega-card > span{
  display:block;
  padding:0 !important;     /* kill the theme padding */
  margin-top:8px;
  text-align:left;
  width:100%;               /* same width as figure */
}

/* 3) Yellow line = full image width, flush left */
.kvp-mega-card > span::before{
  content:"";
  display:block;
  height:6px;
  width:350px;               /* equals 300px because of the card width */
  background:#fdba3b;
  margin:0 0 6px 0;         /* no horizontal centering */
  border-radius:0;          /* optional */
}
.kvp-mega-card:hover span,
.kvp-mega-card:focus-visible span {
  color: #303b46 !important;   /* navy/dark text */
}
.kvp-mega-strip{
  display:block; text-align:center;
  margin-top:18px; padding:12px 14px;
  background:#0f6f5c; color:#fff; border-radius:10px;
  font-weight:600; text-decoration:none;
}
/* ========= ICON / MISC ========= */
.kvpmenu-wrapper .btn{ color:#fff; font-size:20px; cursor:pointer; display:none; }
.kvpmenu-wrapper .btn.close-btn{ position:absolute; right:30px; top:1px; }
.navlinksimg{ width:350px; height:150px; margin:auto; }
.promoimg{ display:flex; flex-direction:column; }
.promoimg-link{ display:flex; flex-direction:column; margin:5px 0 20px; line-height:1.2; }

/* ========= MOBILE (<= 970px) ========= */
@media (max-width: 970px){
  /* Slide-out menu panel */
  .kvpmenu-wrapper .btn{ display:block; }
  .kvpmenu-items a{ background:#abc7c7; }
  .kvpmenu-items a:hover{ color:#604844; }
  .search-button{ background:#abc7c7; }

  .kvpmenu-nav-links{
    position: absolute;
    top:0; left:-100%;
    width:100%;
    min-height:100vh;
    background:#abc7c7; color:#303b46;
    display:block; padding:100px 40px; line-height:50px; overflow-y:auto;
    box-shadow:0 15px 15px rgba(0,0,0,.18);
    transition:left .3s ease;
  }
  #kvpmenu-btn:checked ~ .kvpmenu-nav-links{ left:0; }
  #kvpmenu-btn:checked ~ .btn.kvpmenu-btn{ display:none; }
  #close-btn:checked ~ .btn.kvpmenu-btn{ display:block; }
  .kvpmenu-nav-links li{margin: 15px 0px;}
  .kvpmenu-nav-links li a{
    color:#303b46 !important;
    background:none !important;
    display:flex; padding:0 20px; font-size:20px;
    justify-content:center;
  }

  /* Replace desktop hover menus with accordion lists */
  .kvpmenu-drop-menu-1,
  .kvpmenu-drop-menu-2,
  .kvpmenu-drop-menu-3,
  .kvpmenu-drop-menu-4,
  .kvpmenu-nav-links .kvpmenu-drop-menu{
    position:relative; top:5px; left:0; right:auto;
    width:100%; max-height:0; overflow:auto; padding:0;
    opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; background:#eae9e3 !important;
    transition:max-height .3s ease;
    border-radius:10px;
  }

  /* checkbox opens each list */
  #showDrop-1:checked ~ .kvpmenu-drop-menu-1{ max-height: 1000px; }
  #showDrop-2:checked ~ .kvpmenu-drop-menu-2{ max-height: 1000px; }
  #showDrop-3:checked ~ .kvpmenu-drop-menu-3{ max-height: 1000px; }
  #showDrop-4:checked ~ .kvpmenu-drop-menu-4{ max-height: 1000px; }

  .kvpmenu-drop-menu-2,
  .kvpmenu-drop-menu-3{ display:flex; flex-direction:column; }

  /* mobile section labels (+ / -) */
  .kvpmenu-desktop-item{ display:none !important; background:none !important; }
  .kvpmenu-nav-links .kvpmenu-mobile-item {
    display:flex; justify-content:space-between; align-items:center;
    color:#303b46; background:#abc7c7; font-size:30px; font-weight:500;
    padding-left:20px; cursor:pointer; border-radius:5px; transition:color .2s ease;
  }
  .kvpmenu-mobile-item:hover{ color:#604844; }
  .kvpmenu-mobile-item:after{ content:'\002B'; font-size:2.5rem; }
  #showDrop-1:checked ~ .kvpmenu-mobile-item:after,
  #showDrop-2:checked ~ .kvpmenu-mobile-item:after,
  #showDrop-3:checked ~ .kvpmenu-mobile-item:after,
  #showDrop-4:checked ~ .kvpmenu-mobile-item:after{ content:'\2212'; font-size:3rem; }

  /* Hide the desktop mega on mobile */
  .kvp-mega-panel{ display:none !important; }

.kvp-menu-linkonly{
      font-size:30px !important;
      font-weight:500 !important;
      text-transform: Capitalize;
    padding-left:20px; border-radius:5px; transition:color .2s ease;
}
}
/* Optional helpers for swapping GIFs per device */
.mobile{ display:none; }
.desktop-flex{ display:block; }
@media (max-width: 970px){
  .mobile{ display:flex; }
  .desktop-flex{ display:none; }
}
/* ===== OVERRIDES: full-width mega + grid ===== */

/* let the LI be normal flow so the panel can center to viewport */
.kvp-has-mega{ position: static; }

/* full-bleed panel under the nav, centered to the viewport */
.kvp-mega-panel{
  position: fixed;          /* stays attached to the header */
  left: 0;
  top: 50px;                   /* aligns under menu; tweak if your header height differs */
  /*transform: translate(-50%, 8px); /* center + drop animation */
  width: 100vw;                /* full viewport width */
  /*padding: 32px 48px 20px;     /* roomy gutters */
      padding: 2rem;
    padding-top: 3.7rem;
    padding-bottom: 3rem;
  border-radius: 0;            /* full-width look like Zoetis */
  background: #303b46;
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}

/* show on hover/focus (desktop only) */
@media (min-width: 971px){
  .kvp-has-mega:hover > .kvp-mega-panel,
  .kvp-has-mega:focus-within > .kvp-mega-panel{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /*transform: translate(-50%, 0);*/
  }
}

/* inner grid — full width but neatly spaced */
.kvp-mega-grid{
  display: grid;
  gap: 20px;
  /* 6-up down to 3-up as space shrinks */
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

@media (max-width: 1600px){ .kvp-mega-grid{ grid-template-columns: repeat(4, minmax(80px,1fr)); } }
@media (max-width: 1400px){ .kvp-mega-grid{ grid-template-columns: repeat(3, minmax(180px,1fr)); } }
@media (max-width: 1180px){ .kvp-mega-grid{ grid-template-columns: repeat(3, minmax(180px,1fr)); } }

/* cards look good edge-to-edge on a full panel */
.kvp-mega-card{
  background:#f8fafb;
  /*border:1px solid #e7ecef;*/
  border-radius: 12px;
  overflow:hidden;
  display:grid;
  grid-template-rows: auto min-content;
  padding: 0;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.kvp-mega-card figure{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.kvp-mega-card figure img{ width:100%; height:100%; object-fit:cover; display:block;border-radius: 12px; }
.kvp-mega-card span{ padding:12px 14px 14px; font-weight:600; color:#fff; }
.kvp-mega-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.10); border-color:#dbe3e7;background: #abc7c7c;color:#303b46; }

/
/* hide the mobile list on desktop; keep as-is on mobile */
@media (min-width: 971px){
  .kvp-has-mega > .kvpmenu-drop-menu-2{ display:none !important; }
}
@media (max-width: 970px){
  .kvp-mega-panel{ display:none !important; } /* still use your checkbox list on mobile */

}
/* === FIXES FOR CHECKBOX "BOXES" SHOWING === */
nav input[type="checkbox"],
nav input[type="radio"] {
  display: none !important;   /* hides the stray input boxes */
}

/* === FIX SEARCH ICON BACKGROUND === */
.search-button {
  background: none !important; /* remove black background */
  border: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button svg {
  stroke: #fff;                /* makes icon white */
  width: 22px;
  height: 22px;
}

.search-button:hover svg {
  stroke: #fdba3b;             /* hover = brand accent */
}
/* ---------- GLOBAL SAFETY (avoid clipping) ---------- */
header, .site-header, nav, .kvpmenu-wrapper {
  position: relative;
  z-index: 4000; /* above page content */
}
/* If any ancestors had overflow hidden, let panels escape */
header, .site-header, .kvpmenu-wrapper, .kvpmenu-nav-links, .kvp-has-mega {
  overflow: visible !important;
}
/* If you used transform/filter/opacity on the header, it creates a new stacking context.
   Neutralize it for the menu container. */
.site-header,
.kvpmenu-wrapper {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* ---------- DESKTOP BEHAVIOR ---------- */
@media (min-width: 971px) {
  /* Show desktop mega on hover/focus */
  .kvp-has-mega:hover > .kvp-mega-panel,
  .kvp-has-mega:focus-within > .kvp-mega-panel {
    display: flex;
  }
  /* Hide the mobile-only bits on desktop */
  .kvp-has-mega > input[type="checkbox"],
  .kvp-has-mega > .kvpmenu-mobile-item,
  .kvp-has-mega > [class^="kvpmenu-drop-menu"] {
    display: none !important;
  }
    .nav-icons-list {
    display: flex;
    flex-direction:row;
    gap: 10px;
  }
}
/* ---------- MOBILE BEHAVIOR ---------- */
@media (max-width: 970px) {
  /* Hide desktop mega on mobile */
  .kvp-mega-panel {
    display: none !important;
  }

  /* Show mobile label (tap target) and toggle list */
  .kvp-has-mega > .kvpmenu-mobile-item { display: flex; cursor: pointer; }
  .kvp-has-mega > input[type="checkbox"] { display: none; }

  /* Start closed */
  .kvp-has-mega > [class^="kvpmenu-drop-menu"] { display: none; }

  /* Open when checked */
  .kvp-has-mega > input[type="checkbox"]:checked ~ [class^="kvpmenu-drop-menu"] {
    display: flex;
    flex-direction: column;
  }
  .nav-icons-list {
    display: flex;
    flex-direction:row;
    gap: 5px;
    margin-top: 70px;
    color: #303b46 !important;
  }
}
/* Panel padding = even gutters */
.kvp-mega-panel{
  padding-left: clamp(24px, 4vw, 48px);
  padding-right: clamp(24px, 4vw, 48px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

/* 4-up grid with even gaps, items aligned to the top */
.kvp-mega-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 24px;                   /* match screenshot gutter */
  align-items: start;
}

/* Collapse to 3 / 2 columns cleanly */
@media (max-width: 1400px){ .kvp-mega-grid{ grid-template-columns: repeat(3, minmax(260px,1fr)); } }
@media (max-width: 1100px){ .kvp-mega-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }

/* Card: remove fixed widths so spacing is controlled by the grid */
.kvp-mega-card{
  width: auto;                 /* drop 380px */
  background: #f8fafb;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto min-content;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Image: fill the card; consistent aspect ratio like the screenshot */
.kvp-mega-card figure{
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;        /* tweak to 3/2 if you prefer */
  height: auto;
  overflow: hidden;
  border-radius: 12px;
}
.kvp-mega-card figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Label block: no left indent; spacing that matches tiles */
.kvp-mega-card > span{
  display: block;
  padding: 0;                  /* kill extra padding */
  margin: 14px;      /* small side gutters under image */
  line-height: 1;
  text-align: left;
  color: #fff;                 /* your theme */
}

/* Orange rule: full label width, flush left */
.kvp-mega-card > span::before{
  content: "";
  display: block;
  height: 4px;
  width: 100%;                 /* matches label width */
  background: #fdba3b;
  margin: 0 0 8px 0;
  border-radius: 0;
}

/* Hover: lift + keep text dark on your teal hover bg */
.kvp-mega-card:hover,
.kvp-mega-card:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  background: #262b30 !important;
}
.kvp-mega-card:hover span,
.kvp-mega-card:focus-visible span{
  color: #fdba3b !important;
}

/* Make sure any old fixed sizes don’t sneak back in */
.navlinksimg{ width: 100% !important; height: auto !important; }
/* keep image flush to card edges */
.kvp-mega-card figure{
  margin: 0;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  padding-top: 8px;
}

/* title block: no side indent so it lines up with the image */
.kvp-mega-card > span{
  display: block;
  margin: 16px 0 16px;   /* no left/right margin */
  padding: 0px;            /* no indent */
  position: relative;
}

/* gold bar = EXACT card/image width, not 350px */
.kvp-mega-card > span::before{
  content: "";
  display: block;
  height: 2px;
  width: 100% !important;    /* override any old fixed width (e.g., 350px) */
  background: #fdba3b;
  margin: 16px 0pc;
  border-radius: 0;
  box-sizing: border-box;
}

/* safety: prevent any overflow from rounding/padding */
.kvp-mega-card{ overflow: hidden; }

/* === Mobile drawer: make it truly full-height & scrollable === */
@media (max-width: 970px){
  .kvpmenu-nav-links{
    position: fixed;
    top: 0; left: -100%; right: auto; bottom: 0;   /* replace inset:0 */
    width: 100%;
    height: 100vh;                /* fallback */
    height: 100svh;               /* modern mobile safe area */
    background: #abc7c7;
    z-index: 5000;

    /* scrolling inside the menu */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    padding: 88px 20px;
    box-shadow: 0 15px 15px rgba(0,0,0,.18);
    transition: left .3s ease;
  }

  /* open state */
  #kvpmenu-btn:checked ~ .kvpmenu-nav-links{ left: 0; }

  /* keep toggle buttons behavior */
  #kvpmenu-btn:checked ~ .btn.kvpmenu-btn{ display:none; }
  #close-btn:checked ~ .btn.kvpmenu-btn{ display:block; }
}

/* === Lock the page behind (no touch-action block) === */
@media (max-width: 970px){
  body:has(#kvpmenu-btn:checked){
    overflow: hidden;          /* stop background page scroll */
  }
}


/* ===== Lock page scroll while menu is open (pure CSS, modern browsers) ===== */
@media (max-width: 970px){
  body:has(#kvpmenu-btn:checked){
    overflow: hidden;          /* page behind cannot scroll */
    touch-action: none;
  }
}