#livesearch,.display,.nav-wrapper,.small-nav ul{background:#fff}ul{margin:0;padding:0;list-style-type:none}#searchInput,.nav li{position:relative}.small-nav ul{padding:10px}.nav li .nav-wrapper,.small-nav ul{position:absolute;top:100%;left:0;opacity:0;visibility:hidden;transform:translateY(20px);pointer-events:none;transition:opacity .3s ease-in-out 0s,visibility .3s ease-in-out 0s,transform .3s ease-in-out 0s}.nav li:hover .nav-wrapper,.small-nav:hover ul{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .3s ease-in-out 0.6s,visibility .3s ease-in-out 0.6s,transform .3s ease-in-out 0.6s}.nav .big-nav{z-index:2;position:static}.nav-wrapper{width:100%;height:400px;min-height:400px;box-shadow:0 14px 44px rgb(0 0 0 / 10%)}.nav-wrapper .nav{padding:30px;width:25%;background:#f1f3f6}.nav-wrapper .nav li a{padding:6px}.nav li ul li a,.nav-wrapper .nav li a,.tab-pane ul a,.tab-pane ul li ul li a{color:#000!important;width:fit-content}.nav-wrapper .tab-content{position:absolute;top:0;left:25%;width:75%;padding:30px;height:400px}.nav-wrapper .nav-link{margin-right:0!important}.tab-pane ul li.col3{width:33.3334%;padding:0 10px}.tab-pane ul li{display:block;width:100%;float:left}.tab-pane ul li ul li a{padding:4px!important;font-size:14px}.nav-wrapper .nav::-webkit-scrollbar,.nav-wrapper .tab-content::-webkit-scrollbar{width:4px}.nav-wrapper .nav::-webkit-scrollbar-track,.nav-wrapper .tab-content::-webkit-scrollbar-track{background:0 0;margin:10px;border-radius:50px}.nav-wrapper .nav::-webkit-scrollbar-thumb,.nav-wrapper .tab-content::-webkit-scrollbar-thumb{background:#aaa;border-radius:50px}.nav-wrapper .nav::-webkit-scrollbar-thumb:hover,.nav-wrapper .tab-content::-webkit-scrollbar-thumb:hover{background:#555}#livesearch{position:absolute;border-radius:10px;box-shadow:rgb(0 0 0 / 10%) 0 14px 44px;z-index:99999;width:100%;left:50%;transform:translateX(-50%)}#livesearch a{text-decoration:none}#livesearch a p{width:100%;padding:10px 20px;margin:0!important;color:#555}#livesearch a p:hover{color:#000;background:#eee;border-radius:10px}.not-visible{visibility:hidden}.display{position:absolute;top:0;width:min(100vw,360px);max-width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;right:100%;-webkit-animation:.5s forwards slide;animation:.5s forwards slide;display:block!important;padding-top:12px;box-shadow:-4px 0 24px rgba(0,0,0,.08)}@-webkit-keyframes slide{100%{right:0}}@keyframes slide{100%{right:0}}.sidenav ul li ul,.sidenav ul li ul li ul{position:absolute;right:-110%;top:0;background:#fff}.sidenav .level1>li{position:relative}.sidenav .level2>li{position:relative}.sidenav ul li a{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box}
/* Mobile drawer: backdrop, layout, touch targets (matches site accent #eb373f) */
.sidenav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.sidenav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}
body.sidenav-open {
  overflow: hidden;
  touch-action: none;
}
#mySidenav.sidenav {
  z-index: 10000;
  padding-top: 52px;
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
  /* css/style.css sets .sidenav { transition: .5s } — we never overrode it, so width
     eased for 500ms and absolutely positioned submenus bled over the page. */
  transition: none !important;
}
#mySidenav .closebtn {
  color: #222 !important;
  z-index: 10001;
}
#mySidenav .closebtn:hover {
  color: #eb373f !important;
}
.sidenav-header {
  padding: 8px 52px 12px 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}
.sidenav-nav .level1 > li > a,
.sidenav-nav .level2 > li > a,
.sidenav-nav .level3 > li > a,
.sidenav-nav .level2 > li.mobile-nav-branch .mobile-nav-drill,
.sidenav-nav .level2 > li.mobile-nav-branch .mobile-nav-cat-icon {
  min-height: 48px;
  padding: 12px 16px 12px 20px;
  font-size: 15px;
  color: #1a1a1a !important;
  -webkit-tap-highlight-color: rgba(235,55,63,.12);
}
.sidenav-nav .level1 > li > a:hover,
.sidenav-nav .level2 > li > a:hover,
.sidenav-nav .level3 > li > a:hover,
.sidenav-nav .level2 > li.mobile-nav-branch .mobile-nav-drill:hover,
.sidenav-nav .level2 > li.mobile-nav-branch .mobile-nav-cat-icon:hover {
  color: #eb373f !important;
  background: rgba(235,55,63,.06);
}
.sidenav-nav ul.level2.display > li.back,
.sidenav-nav ul.level3.display > li.back {
  position: sticky;
  top: 0;
  z-index: 8;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.sidenav-nav ul.level2.display > li.back > a,
.sidenav-nav ul.level3.display > li.back > a {
  background: #fff;
}
.mobile-nav-branch-row {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  position: relative;
  z-index: 2;
}
.mobile-nav-drill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none !important;
  color: #1a1a1a !important;
  padding-right: 12px !important;
}
.mobile-nav-cat-icon {
  flex: 0 0 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  min-width: 48px;
  border-left: 1px solid #eee;
  color: #666 !important;
  font-size: 11px;
  opacity: 0.55;
}
.mobile-nav-cat-icon:hover {
  color: #eb373f !important;
  opacity: 1;
}
.mobile-nav-cat-icon i {
  pointer-events: none;
  font-size: 11px;
  font-weight: 900;
}
/* Small chevron: more subcategories this way (matches level-1 parents). */
.sidenav-nav .level2 li.mobile-nav-branch .mobile-nav-drill::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  opacity: 0.4;
  margin-left: auto;
  padding-left: 8px;
}
.sidenav-nav li.mobile-nav-view-parent > a {
  font-size: 14px !important;
  font-weight: 600;
  color: #333 !important;
  background: #f6f7f9 !important;
  border-bottom: 1px solid #eee;
}
.sidenav-nav li.mobile-nav-view-parent > a:hover {
  color: #eb373f !important;
  background: #ffeeef !important;
}
.sidenav-nav li.back > a {
  font-weight: 600;
  color: #eb373f !important;
  gap: 6px;
}
.sidenav-nav li.back > a span {
  margin-left: 2px;
}
/* Top-level drawer parents (Safety, About, …): small chevron = has a submenu.
   .mobile-nav-parent included for older browsers without :has(). */
.sidenav-nav .level1 > li:has(> ul.level2) > a::after,
.sidenav-nav .level1 > li > a.mobile-nav-parent::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  opacity: 0.4;
  margin-left: auto;
  padding-left: 8px;
}
/* Legacy: direct a + ul.level3 (unused by mobile-nav-branch, kept for consistency). */
.sidenav-nav .level2 > li:has(> ul.level3) > a:not(.nav-link)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  opacity: 0.4;
  margin-left: auto;
  padding-left: 8px;
}
.sidenav-nav li.back > a::after {
  content: none !important;
}
.sidenav-footer {
  margin-top: auto;
  padding: 16px 20px 24px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidenav-contact-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333 !important;
  text-decoration: none !important;
  padding: 8px 0 !important;
}
.sidenav-contact-link:hover {
  color: #eb373f !important;
}
.sidenav-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
/* Submenus must not be positioned relative to a one-row <li> (causes sibling top-level
   items to show through). Anchor panels to .sidenav-nav instead. */
.sidenav-nav .level1 > li,
.sidenav-nav .level2 > li {
  position: static !important;
}
.sidenav-nav ul.level2.display,
.sidenav-nav ul.level3.display {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  min-height: 100%;
  /* Match drawer inner width — min(100vw,360px) bleeds past a narrowing panel during close. */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  z-index: 4;
  box-sizing: border-box;
  /* Minified .display uses 0.5s slide; skip so level-1 labels are not visible beside the panel. */
  animation: none !important;
  -webkit-animation: none !important;
  right: 0 !important;
}
.sidenav-nav ul.level3.display {
  z-index: 6;
}
/* Off-screen absolute submenus still overlap the list and intercept taps; disable until open. */
.sidenav-nav ul.level2:not(.display),
.sidenav-nav ul.level3:not(.display) {
  pointer-events: none !important;
}
.sidenav-nav ul.level2.display,
.sidenav-nav ul.level3.display {
  pointer-events: auto;
}
.small-nav ul {
    width: max-content;
    min-width: 0;
    max-height: 400px;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
    scrollbar-color: #aaa transparent;
}

.small-nav ul > li.nav-item,
.small-nav ul > li {
    width: max-content;
    max-width: none;
}

.small-nav ul .nav-link,
.small-nav ul li a {
    display: block;
    white-space: nowrap;
    width: auto;
    padding: 6px 16px;
    box-sizing: border-box;
}

.small-nav ul::-webkit-scrollbar {
    width: 6px;
}

.small-nav ul::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 50px;
    margin: 10px 0;
}

.small-nav ul::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 50px;
}

.small-nav ul::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* Header cart link: icon + "Cart" label (matches reference) */
.header-cart-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none !important;
    color:#111 !important;
    font-weight:600;
    line-height:1;
}
.header-cart-icon-wrap{
    position:relative;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
}
.header-cart-icon{
    font-size:22px;
    line-height:1;
    color:#111;
}
/* Count badge on icon corner */
.header-cart-icon-wrap .item-count,
.header-cart-count{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:800;
    color:#CE2626; 
    background:#fff;
    border-radius:999px;
    box-shadow:0 0 0 1px rgba(0,0,0,.10);
    text-align:center;
    white-space:nowrap;
}
@media (max-width:576px){
    .header-cart-link{gap:6px}
    .header-cart-icon-wrap{width:26px;height:26px;flex-basis:26px}
    .header-cart-icon{font-size:20px}
    .header-cart-icon-wrap .item-count,
    .header-cart-count{min-width:15px;height:15px;font-size:9px}
}
/* Prevent the cart background from stretching in flex rows */
.header-cart-box{
    display:inline-flex;
    align-items:center;
    align-self:center;
    background:floralwhite;
    padding:6px 10px;
    border-radius:8px;
    height:auto;
}
.quantity-selector .qty-controls{display:none}.quantity-selector.in-cart .qty-controls{display:flex;align-items:center}.cart-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:2px solid #ffc107;border-radius:8px;background:#fff;color:#000;cursor:pointer;margin-right:6px;transition:background .2s,border-color .2s}.cart-delete-btn:hover{background:#fff8e1;border-color:#ffb300}.cart-delete-btn i{font-size:14px}
.contact-widget {
  float: right;                    /* push to the right */
  font-family: Arial, sans-serif;
  text-align: center;               /* align text to the right edge */
  background: white;
  padding:5px 10px;
  border-radius: 10px;
}

.contact-widget__phone {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #222;
  font-size: 1rem;
}

.contact-widget__number {
  font-weight: bold;
}

.contact-widget__hours {
  margin-top: 0.25em;
  font-size: 0.9rem;
  color: #555;
}

  /* Phone badge beside header contact (SVG works without Font Awesome on thin pages) */
  .icon-circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #eb373f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .icon-circle .icon-circle-img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .fw-bold{
      color:black !important;
  }
/* Mobile header: phone + email beside logo (desktop keeps .contact-widget) */
.mobile-header-contact {
  gap: 3px;
  line-height: 1.2;
}
.mobile-header-contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #111 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(235, 55, 63, 0.12);
}
.mobile-header-contact-link:hover,
.mobile-header-contact-link:focus-visible {
  color: #b01f25 !important;
}
.mobile-header-contact-link img {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  object-fit: contain;
}
.mobile-header-contact-hours {
  font-size: 10px;
  line-height: 1.35;
  color: #555 !important;
  margin-top: 3px;
  padding-left: 21px; /* align with phone/email text (icon 15px + gap 6px) */
}
@media (max-width: 360px) {
  .mobile-header-contact-link { font-size: 11px; gap: 4px; }
  .mobile-header-contact-link img { width: 14px; height: 14px; }
  .mobile-header-contact-hours { font-size: 9px; padding-left: 18px; }
}
/* Mobile header search: full-width field + icon inside (do not use global .search-icon — it targets desktop .input-section) */
.mobile-header-search .mobile-header-search-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 52px 11px 16px;
  font-size: 15px;
  line-height: 1.35;
  border: 1px solid #ced4da;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}
.mobile-header-search .mobile-header-search-input::placeholder {
  color: #6c757d;
  opacity: 1;
}
.mobile-header-search .mobile-header-search-input:focus {
  border-color: #eb373f;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(235, 55, 63, 0.15);
}
.mobile-header-search .mobile-header-search-submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(235, 55, 63, 0.12);
}
.mobile-header-search .mobile-header-search-submit:hover,
.mobile-header-search .mobile-header-search-submit:focus-visible {
  background: rgba(235, 55, 63, 0.08);
  outline: none;
}
.mobile-header-search .mobile-header-search-submit img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
}
.nav-wrapper .tab-pane{display:none}
.nav-wrapper .tab-pane.active,.nav-wrapper .tab-pane.show{display:block}
.dropdown{position:relative;display:inline-block}
                            .dropbtn{color:#00f;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;line-height:1}
                            .dropbtn i{pointer-events:none}
                            .dropbtn .kti-caret{font-size:12px;opacity:.9;transition:transform .15s ease}
                            .dropdown.open .dropbtn .kti-caret{transform:rotate(180deg)}
                            .dropdown-content{
                                display:none;
                                position:absolute;
                                top:calc(100% + 8px);
                                right:0;          /* anchor to username/right side */
                                left:auto;
                                background-color:#f1f1f1;
                                min-width:180px;
                                box-shadow:0 10px 24px rgba(0,0,0,.18);
                                z-index:1005;
                                border-radius:10px;
                                overflow:hidden;
                            }
                            .dropdown-content a{color:#000;padding:10px 14px;text-decoration:none;display:block;white-space:nowrap}
                            .dropdown-content a:hover{background-color:#e7e7e7}
                            /* Hover opens by default, but once user clicks we switch to manual mode */
                            .dropdown:hover .dropdown-content,
                            .dropdown:focus-within .dropdown-content,
                            .dropdown.open .dropdown-content{display:block}
                            .dropdown.manual:hover .dropdown-content{display:none}
                            .dropdown.manual.open:hover .dropdown-content{display:block}
#suggestions, #suggestionsMobile {list-style-type:none;padding:0;margin:0;position:absolute;background:#fff;width:100%;max-height:380px;overflow-y:auto;z-index:1000;border-radius:0 0 8px 8px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
   #suggestions li, #suggestionsMobile li {padding:8px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px}
   #suggestions li:hover, #suggestionsMobile li:hover {background-color:#f5f7fa;color:#007bff}
   .ac-section-label {font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.5px;padding:6px 14px 2px;pointer-events:none;background:#fafbfc}
   .ac-icon {width:16px;height:16px;flex-shrink:0;opacity:.5}
   .ac-product-thumb {width:28px;height:28px;object-fit:contain;border-radius:3px;flex-shrink:0}
   .ac-meta {font-size:12px;color:#888;margin-left:auto;flex-shrink:0}
   .ac-trending-icon {width:16px;height:16px;flex-shrink:0;color:#e67e22;opacity:.7}