/* Purple Panda - Deal King menu button (yellow tile + crown) and mega menu sizing. Site-wide CSS, no JS needed. v4 27/10/2026 */
a[data-url$="/deal-king-products"],
#mobileVueNav > li > a[href$="/deal-king-products"] {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: #ffd35c !important;
  color: #2a1070 !important;
  font-weight: 800 !important;
  border-radius: 10px;
  padding: 0 14px !important;
  margin: 7px 0 7px 6px !important;
  height: 34px !important;
  line-height: 34px !important;
  min-height: 0 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  transition: transform .15s, background .15s;
}
a[data-url$="/deal-king-products"]:hover,
#mobileVueNav > li > a[href$="/deal-king-products"]:hover {
  background: #ffc928 !important;
  transform: translateY(-1px);
}
a[data-url$="/deal-king-products"]::before,
#mobileVueNav > li > a[href$="/deal-king-products"]::before {
  content: "";
  width: 22px;
  height: 19px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath fill='%233b1d9a' d='M4 10.5l6 4.2L15 5l5 9.7 6-4.2-2.4 11.3H6.4z'/%3E%3Crect x='6.4' y='23' width='17.2' height='3' rx='1.2' fill='%233b1d9a'/%3E%3Ccircle cx='15' cy='4' r='2.2' fill='%233b1d9a'/%3E%3Ccircle cx='3.6' cy='9.6' r='2' fill='%233b1d9a'/%3E%3Ccircle cx='26.4' cy='9.6' r='2' fill='%233b1d9a'/%3E%3Ccircle cx='15' cy='17.2' r='1.8' fill='%23ffd35c'/%3E%3Cpath fill='%233b1d9a' d='M27.5 .5l.8 2.1 2.1.8-2.1.8-.8 2.1-.8-2.1-2.1-.8 2.1-.8z'/%3E%3Cpath fill='%233b1d9a' d='M30.3 6.4l.5 1.2 1.2.5-1.2.5-.5 1.2-.5-1.2-1.2-.5 1.2-.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* mobile menu: full-width row rather than a pill */
#mobileVueNav > li > a[href$="/deal-king-products"] {
  display: flex !important;
  margin: 6px 10px !important;
  height: 42px !important;
  line-height: 42px !important;
}


/* 27/10/2026 Header and mega menus sized for smaller screens (Gavin).
   Laptops and small screens get the whole desktop header (top bar, logo row, menu bar, delivery bar and mega menus)
   zoomed out: 78% on 992-1199px wide windows, 85% on 1200-1366px wide windows and on any window 820px tall or less.
   The menu bar stays on one line, every mega menu is six columns in two rows, and it never runs off the bottom of the window. */
@media (min-width: 992px) {
  li.mob-top-level > ul.submenu > .submenucontainer {
    max-height: calc(100vh - 190px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }
  li.mob-top-level > ul.submenu > .submenucontainer > li.has-submenu {
    flex: 0 0 16.666% !important;
    max-width: 16.666% !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  body > header > .header-full { zoom: .78; }
  li.mob-top-level > ul.submenu > .submenucontainer { max-height: calc((100vh - 150px) / .78); }
  body > header > .header-full .container { width: 100% !important; }
}
@media (min-width: 1200px) and (max-width: 1366.98px) {
  body > header > .header-full { zoom: .85; }
  li.mob-top-level > ul.submenu > .submenucontainer { max-height: calc((100vh - 165px) / .85); }
  body > header > .header-full .container { width: 100% !important; }
}
@media (min-width: 1367px) and (max-width: 1469.98px) and (max-height: 820px) {
  body > header > .header-full { zoom: .85; }
  li.mob-top-level > ul.submenu > .submenucontainer { max-height: calc((100vh - 165px) / .85); }
  body > header > .header-full .container { width: calc(1180px / .85) !important; }
}
@media (min-width: 1470px) and (max-height: 820px) {
  body > header > .header-full { zoom: .85; }
  li.mob-top-level > ul.submenu > .submenucontainer { max-height: calc((100vh - 165px) / .85); }
  body > header > .header-full .container { width: calc(1450px / .85) !important; }
}
/* zoomed header: tighter rows, and the menu bar keeps its full width */
@media (min-width: 992px) and (max-width: 1366.98px), (min-width: 992px) and (max-height: 820px) {
  body > header > .header-full > .headersection-3 { padding-top: 8px !important; padding-bottom: 8px !important; }
  body > header > .header-full > .headersection-5 { padding-top: 9px !important; padding-bottom: 9px !important; }
  body > header > .header-full .catalog-block { width: 100% !important; max-width: calc(1450px / .78) !important; }
  body > header > .header-full nav.menu .catalog-block ul.catalog > li { max-width: none !important; }
  body > header > .header-full nav.menu .catalog-block ul.catalog > li > a { white-space: nowrap !important; }
}
/* compact mega menus on short or narrow screens: no fixed heights, tighter spacing */
@media (min-width: 992px) and (max-width: 1366.98px), (min-width: 992px) and (max-height: 900px) {
  li.mob-top-level > ul.submenu > .submenucontainer {
    height: auto !important;            /* the theme sets a fixed inline height */
    padding: 16px 32px 2px !important;
  }
  li.mob-top-level > ul.submenu > .submenucontainer > li.has-submenu {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 14px !important;
    padding: 0 10px !important;
  }
  li.mob-top-level > ul.submenu > .submenucontainer > li.has-image {
    flex: 0 0 16.666% !important;
    max-width: 16.666% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 14px !important;
    padding: 0 10px !important;
  }
  li.mob-top-level > ul.submenu > .submenucontainer > li.has-image img {
    height: 150px !important;           /* picture tiles cropped to a landscape strip so picture menus stay short */
    object-fit: cover !important;
  }
  li.mob-top-level > ul.submenu > .submenucontainer > li.has-submenu > a {
    margin-bottom: 4px !important;
  }
  li.mob-top-level > ul.submenu > .submenucontainer > li.has-submenu > ul > li > a {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}