/* Bottom navigation: match the supplied UI reference. */
#luxe-bot-nav.bot-nav {
  height: var(--bot) !important;
  width: min(100%, 1000px) !important;
  max-width: 1000px !important;
  background: #fff !important;
  border-top: 0 !important;
  box-shadow:
    inset .5px 0 0 var(--g200),
    inset -.5px 0 0 var(--g200),
    inset 0 .5px 0 var(--g200) !important;
  align-items: stretch !important;
  z-index: 100 !important;
}

#luxe-bot-nav.bot-nav a {
  flex: 1 !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 !important;
  color: var(--black) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  position: relative !important;
}

#luxe-bot-nav.bot-nav a.on {
  color: var(--black) !important;
  font-weight: 600 !important;
}

#luxe-bot-nav.bot-nav a svg,
#luxe-bot-nav.bot-nav a span {
  color: var(--black) !important;
  opacity: 1 !important;
}

#luxe-bot-nav.bot-nav a.on::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 9px !important;
  width: 16px !important;
  height: 2px !important;
  border-radius: 1px !important;
  background: var(--black) !important;
  transform: translateX(-50%) !important;
}

#luxe-bot-nav.bot-nav a span {
  font-size: 10px !important;
  font-weight: inherit !important;
  letter-spacing: .01em !important;
  line-height: 10px !important;
}

#luxe-bot-nav.bot-nav a svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.5 !important;
  display: block !important;
}

#luxe-bot-nav.bot-nav .bot-wa-tab {
  flex: 1 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  position: relative !important;
}

#luxe-bot-nav.bot-nav .bot-wa-circle {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, .28) !important;
  flex-shrink: 0 !important;
  transition: transform var(--tf) var(--ease-s), box-shadow var(--tm) var(--ease) !important;
}

#luxe-bot-nav.bot-nav .bot-wa-circle svg,
#luxe-bot-nav.bot-nav .bot-wa-circle .wa-official-icon {
  width: 19px !important;
  height: 19px !important;
  stroke: none !important;
  filter: none !important;
}

#luxe-bot-nav.bot-nav .bot-wa-tab:active .bot-wa-circle {
  transform: scale(.84) !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, .18) !important;
}

#luxe-bot-nav.bot-nav .bot-wa-tab:hover .bot-wa-circle {
  box-shadow: 0 4px 16px rgba(37, 211, 102, .38) !important;
}

#luxe-bot-nav.bot-nav .cart-icon-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#luxe-bot-nav.bot-nav .cart-dot[style*="display:none"],
#luxe-bot-nav.bot-nav .cart-dot[style*="display: none"] {
  display: none !important;
}

#luxe-bot-nav.bot-nav .cart-dot,
#luxe-bot-nav.bot-nav .luxe-cart-count {
  top: -9px !important;
  right: -10px !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 5px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: #25D366 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, .32) !important;
  z-index: 2 !important;
}

#luxe-bot-nav.bot-nav .cart-dot[style*="display:none"],
#luxe-bot-nav.bot-nav .cart-dot[style*="display: none"] {
  display: none !important;
}