.d-flex.flex-wrap.gap-4.justify-content-start {
  justify-content: center !important; 
  gap: 18px !important;
}

.d-flex.flex-wrap.gap-4.justify-content-start > div {
  margin: 10px;
}
.product-col{
  flex: 1 1 225px;
  max-width: 250px;
  margin: 10px;
}.card.product-card{
margin-left: 12px;
  background:#f9fafb;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative; 
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
}
.product-cover{
  height: 190px;
  padding: 10px 14px;
  background:#fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.cover-img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.btn-icon-ghost{
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; border: 1px solid #efefef;
  background: #fff;
}
.btn-icon-ghost i{ font-size: 1rem; color: #111; }
.top-2{ top: .5rem; } .start-2{ left: .5rem; } .end-2{ right: .5rem; }
.product-card .product-title{
  font-weight: 400;
  line-height: 1.2;
  color: #111;
}
.product-card {
  color: #f9fafb;
  line-height: 1.35;
  margin-top: .15rem; 
}
.badge.badge-stock{
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #e9ecef;
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
}
.modal-compact .row.g-2{
  --bs-gutter-x: .5rem;
  --bs-gutter-y: .5rem;
}

.modal-compact h4{
  font-size: 1.05rem;     
  margin-bottom: .35rem;
}
.modal-compact p{
  font-size: .92rem;
  margin-bottom: .5rem;
}
.modal-compact .text-muted{
  font-size: .9rem;
}
.modal-compact .badge{
  font-size: .72rem;
  padding: .3em .5em;
  border-radius: .35rem;
}
.modal-compact .h5,
.modal-compact .price{
  font-size: 1rem;        
}
.modal-compact .btn{
  padding: .4rem .65rem;   
  font-size: .9rem;
  line-height: 1.2;
}
.modal-compact .btn.w-100{
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.price{ color: #fd9825; font-weight: 500; }

.fab-cart{
  position: absolute;
  right: 14px;
  bottom: 45px;
  width: 30px;
  height: 30px;
  padding: 0;
  box-shadow: 0 8px 20px rgba(220,53,69,.25);
}
.fab-cart i{ font-size: 1.1rem; line-height: 1; }

.modal-dialog.modal-xl{ max-width: min(95vw, 1100px); }

.modal-body{ padding: 0; }
.modal-content{
  height: 50vh; display: flex; flex-direction: column; border-radius: 14px;
}
.modal-body{ overflow: auto; }

.zoom-canvas{ height: 45vh; max-height: 40vh; }
.thumbs-list{ max-height: 45vh; }

/* Miniaturas */
.thumb-item{
  width: 90%; aspect-ratio: 1/1; object-fit: cover;
  border: 2px solid transparent;
  transition: transform .15s ease, border-color .15s ease;
}
.thumb-item:hover{ transform: scale(1.03); }
.thumb-item.active{ border-color: #0d6efd; }
.card-desc{
  color: #6c757d;
  line-height: 1.35;
  font-weight: 500;
  margin-top: .15rem;
}
.clamp-2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
}
[style*="flex: 1 1 250px"] {
  flex: 1 1 220px !important;  
  max-width: 260px !important;  
  min-width: 210px;
}

@media (max-width: 576px){
  .product-cover{ height: 160px; }
  .fab-cart{ width: 42px; height: 42px; }
}
.modal-tight{
  --mh: min(72vh, 720px);
  border-radius: 14px;
}
.modal-tight .modal-body{
  padding: .5rem !important;
}
.modal-tight .row{ margin: 0; }
.zoom-canvas{
  position: relative;
  height: calc(var(--mh) - 1rem);    
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;                  
  border: 1px solid #eee;
}
.img-zoom-main{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}

.thumbs-list{ max-height: calc(var(--mh) - 1rem); }
@media (min-width: 992px){ 
  .thumbs-list{ width: 70px; overflow: hidden; } 
}
@media (max-width: 991.98px){ 
  .thumbs-list{ width: 100%; overflow: hidden; }
}
.thumb-item{
  width: 64px; height: 64px; object-fit: cover;
  border-radius: .35rem; border: 2px solid transparent;
  display: block;
}
.d-lg-block .thumb-item{ width: 100%; height: auto; aspect-ratio: 1/1; }
.thumb-item.active{ border-color: #0d6efd; }

.gallery-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.85);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.gallery-nav.prev{ left: .35rem; }
.gallery-nav.next{ right: .35rem; }
.gallery-nav i{ font-size: .95rem; }

.modal-compact h6{ font-size: 1rem; }
.modal-compact p{ font-size: .9rem; }
.modal-compact .badge.small{ font-size: .70rem; padding: .2em .45em; }

.clamp-3{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

.btn-icon-sm{
  --py: .38rem; --px: .55rem; --fs: .92rem;
  padding: var(--py) var(--px);
  font-size: var(--fs);
  line-height: 1.2;
  white-space: nowrap;
}
.btn-icon-sm i{ font-size: 1rem; }

.modal-tight .modal-body,
.modal-tight .col-lg-7,
.modal-tight .col-lg-5{ overflow: hidden; }
/* --- Ajustes responsive solo para el modal --- */
@media (max-width: 991.98px) {

  /* Hace que el modal ocupe casi toda la pantalla en móviles */
  .modal-dialog.modal-xl {
    max-width: 95vw !important;
    margin: 0 auto;
  }

  .modal-content.modal-tight {
    height: auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-body {
    padding: 1rem !important;
  }

  /* Apilar las columnas: imagen arriba, info abajo */
  .modal-tight .row.g-2 {
    flex-direction: column !important;
  }

  .modal-tight .col-lg-7,
  .modal-tight .col-lg-5 {
    width: 100% !important;
    max-width: 100%;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Centrar galería e imagen principal */
  .zoom-canvas {
    height: auto !important;
    max-height: 60vh;
    border-radius: .5rem;
  }

  .thumbs-list {
    width: 100% !important;
    justify-content: center;
    margin-bottom: .5rem;
    display: flex !important;
    flex-wrap: wrap;
    gap: .4rem;
  }

  .thumb-item {
    width: 60px !important;
    height: 60px !important;
  }

  /* Ajustar textos e info */
  .modal-tight h6 {
    font-size: 1.1rem;
    text-align: center;
  }

  .modal-tight p {
    font-size: .95rem;
    text-align: justify;
  }

  /* Centrar badges y precios */
  .modal-tight .d-flex.align-items-center.gap-1 {
    justify-content: center !important;
    flex-wrap: wrap;
    margin-top: 1rem !important;
  }

  .modal-tight .h6.mb-0.fw-bold {
    margin-left: 0 !important;
    text-align: center;
    width: 100%;
  }

  /* Botones a 100% de ancho y con separación */
  .modal-tight .d-flex.gap-2.mt-auto {
    flex-direction: column;
    gap: .6rem;
    margin-top: 1.2rem !important;
  }

  .modal-tight .btn.w-100 {
    width: 100%;
  }
}

/* Opcional: mejora del scroll */
.modal-tight::-webkit-scrollbar {
  width: 8px;
}
.modal-tight::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 10px;
}