@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.nav-underline .nav-link:hover {
  color: #272724;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.suggested-scroller {
  position: relative;
  z-index: 2;
  height: 28rem;
  overflow-y: hidden;
}

.suggested-scroller .item {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.item-underline .item-link {
  max-width: 10rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.item-underline .item-link:hover {
  color: #272724;
}

.item-underline .active {
  font-weight: 500;
  color: #343a40;
}
.fw-price,
.fw-badge-small,
.fw-cart-item {
  font-family: "Oswald", sans-serif !important;
}

.fw-badge-small {
  font-size: 10px;
}

.fw-cart-item {
  font-size: 14px;
}

.float,
.floatcart {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 10px;
  border-radius: 15px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
  box-shadow: 2px 2px 3px #999;
}

.float {
  bottom: 5px;
  background-color: #25d366;
  color: #fff;
}

.floatcart {
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1100;
  padding: 10px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease;
  background-color: #222831;
  color: #fff;
}

.floatcart:hover {
  background-color: #00adb5;
  color: #222831;
}

#count_carrito {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.8rem;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  text-align: center;
  background-color: #fff;
  color: #222831;
  border-radius: 9px;
  font-weight: 700;
}

.my-float,
.my-floatcart {
  margin-top: 16px;
}

.mp-float {
  position: fixed;
  width: 100px;
  height: 40px;
  top: 50px;
  right: 1px;
  background-color: rgba(255, 230, 0, 255);
  border-radius: 5px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #676768;
  z-index: 100;
}

.my-mp-float {
  margin-top: 16px;
}

/* Sidebar fondo degradado suave */
.offcanvas-start.bg-dark {
  background: linear-gradient(180deg, #222831 0%, #393e46 100%);
  color: #eeeeee;
}

/* Links estilo moderno */
.offcanvas-start .nav-link {
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.offcanvas-start .nav-link:hover,
.offcanvas-start .nav-link:focus {
  background-color: #00adb5;
  color: #222831 !important;
}

/* Iconos con color suave */
.offcanvas-start .nav-link svg {
  fill: #eeeeee;
  transition: fill 0.2s ease;
}

.offcanvas-start .nav-link:hover svg,
.offcanvas-start .nav-link:focus svg {
  fill: #222831;
}

/* Botón cerrar sidebar */
.btn-close-white {
  filter: invert(1);
}

/* Scroll en sidebar para pantallas pequeñas */
.offcanvas-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #00adb5 transparent;
}

.offcanvas-body::-webkit-scrollbar {
  width: 8px;
}

.offcanvas-body::-webkit-scrollbar-thumb {
  background-color: #00adb5;
  border-radius: 10px;
}

/* Sticky search bar para que no tape contenido */
#sticky-bar {
  z-index: 1040;
}

/* Asegura que el botón toggle sidebar quede visible */
#sidebarToggle {
  z-index: 1050 !important;
}