.wrapper {
  width: 100%;
  padding-top: 20px;
  text-align: center;
  background-color: #ffffff;
  padding-bottom: 20px;
  overflow: hidden;
}

.container-slick {
  position: relative;
  background-color: rgba(255, 255, 255, 0.05);
}

.container-slick h3 {
  font-size: 12px;
  position: absolute;
  top: 30%;
  left: 1%;
  margin: 0;
  color: white;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 0px 10px 10px 0px;
}

.container-slick button {
  position: absolute;
  top: 60%;
  left: 1%;
  margin: 0;
}

h2 {
  font-family: sans-serif;
  color: #fff;
}

.carousel {
  width: 100%; 
  justify-content: center;
  align-items: center;
}

.slick-slide {
  margin: 10px;
}

.slick-slide img {
  width: 100%;
  border: 2px solid #fff;
}

.wrapper .slick-dots li button:before {
  font-size: 20px;
  color: rgb(10, 9, 9);
}

.button-with-shadow {
  background-color: #ff3b66; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  padding: 10px 20px; /* Espaciado interno del botón */
  border: none; /* Elimina el borde del botón */
  border-radius: 5px; /* Borde redondeado del botón */
  font-size: 16px; /* Tamaño del texto */
  cursor: pointer; /* Cursor al pasar por encima */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra del botón */
  transition: box-shadow 0.3s ease; /* Transición suave de la sombra al pasar por encima */
}

.button-with-shadow:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra aumentada al pasar por encima */
}

/* --- Mejora visual del hero/slider --- */
.container-slick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.container-slick img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.container-slick h3 {
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.container-slick button.button-with-shadow {
  left: auto;
  right: 1%;
}
.wrapper .slick-dots li button:before {
  color: #fff;
}
.slick-prev:before, .slick-next:before {
  color: #fff;
  font-size: 24px;
}
@media (max-width: 576px) {
  .container-slick img { height: 220px; }
  .container-slick h3 { font-size: 16px; }
}

/* --- Tarjetas de productos en Home (scoped a #ordering) --- */
#ordering .card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
#ordering .card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
#ordering .card-img-top {
  border-radius: 8px;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 576px) {
  #ordering .card-img-top {
    height: 200px;
    aspect-ratio: auto;
  }
}
#ordering .card-body { padding: .5rem; }
#ordering .card-footer { padding: .5rem; background: transparent; }
#ordering .title-product {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 4px;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#ordering .text-primary {
  color: #6b7280 !important;
  font-size: 12px;
  display: block;
  margin-bottom: 2px;
}
#ordering .text-muted.text-decoration-line-through {
  color: #6b7280 !important;
  margin-right: 6px;
}
#ordering .btn.btn-outline-info {
  border-color: #0ea5e9;
  color: #0ea5e9;
  padding: .25rem .5rem;
  font-size: 12px;
}
#ordering .btn.btn-outline-info:hover {
  background-color: #0ea5e9;
  color: #fff;
}
#ordering .listing-toolbar {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.5rem 0;
}
#ordering #resultsTotal { font-weight: 600; }
#ordering #itemsPerPage { min-width: 100px; }
#ordering .pagination .page-link {
  color: #0ea5e9;
  border-color: #e5e7eb;
}
#ordering .pagination .page-link:hover {
  background-color: #0ea5e9;
  color: #fff;
}
#ordering .pagination .page-item.active .page-link {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

/* Toolbar responsive (Opción B) */
#ordering #openFilters { display: none; }
@media (max-width: 576px){
  #ordering .per-page-group{ display: none !important; }
  #ordering #openFilters{ display: inline-flex; align-items:center; }
  #ordering .listing-toolbar{ gap: .5rem; }
}
/* Galería de producto en modal */
.product-gallery {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.product-gallery .carousel-inner {
  border-radius: 8px;
  overflow: hidden;
}
.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumbs {
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gallery-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: #d1d5db;
}
.gallery-thumb.active {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-color: #2563eb;
}
/* Ajustes del control del carrusel para mejor contraste */
.product-gallery .carousel-control-prev-icon,
.product-gallery .carousel-control-next-icon {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
/* --- Panel de información de producto en modal --- */
.product-info { margin-bottom: .25rem; }
.product-info .product-title { font-size: 16px; font-weight: 400; color: #111827; line-height: 1.25; margin-bottom: 6px; }
.product-info .category-badge { color: #6b7280 !important; font-weight: 600; background-color: transparent !important; font-size: 12px; padding: 0; }
.product-info .price-block { display: flex; align-items: center; gap: 6px; }
.product-info .price-block { flex-wrap: nowrap; }
.product-info .stock-badge { display: inline-block; margin-top: 0; }
.product-info .price-block .stock-badge { order: 3; }
.product-info .price-block .price-discount { order: 2; }
.product-info .price-block .price-original { order: 1; }
.product-info .price-block .price-original { margin-right: 4px; }
.product-info .price-block .price-discount { font-size: 14px; font-weight: 600; }
.product-info .price-block .badge { padding: 4px 8px; }
.product-info .stock-badge { background-color: #10b981; font-size: 12px; }
.input-group.input-group-sm .btn { padding: .25rem .5rem; }
.input-group.input-group-sm .form-control { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; }
.navbar-nav .nav-link[category] { color: #0b1f44 !important; font-weight: 700; }
.navbar-nav .nav-link.active[category] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }