/* FILTROS */
.filtros {
  padding: 20px 44px 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.filtro-btn {
  white-space: nowrap; padding: 10px 14px; border-radius: 50px;
  border: 1.5px solid var(--gris-30); background: #fff; width: 100%;
  font-family: var(--font-texto); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; color: var(--gris-60);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.filtro-btn .icon-svg { width: 18px; height: 18px; flex-shrink: 0; }
.filtro-btn.active, .filtro-btn:hover { background: var(--rosa-dark); color: #fff; border-color: var(--rosa-dark); }
/* Computador/tablet: todos los filtros en UNA sola fila (se ajusta el ancho de cada chip) */
@media (min-width: 601px) {
  .filtros {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro-btn {
    flex: 0 0 auto;
    width: auto;
    margin-inline: auto;
    padding: 9px 11px;
    font-size: 12.5px;
    gap: 5px;
  }
  .filtro-btn .icon-svg { width: 16px; height: 16px; }
}
@media (max-width: 600px) {
  .filtros { grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); padding: 16px 12px 0; gap: 6px; }
  .filtro-btn { padding: 9px 8px; font-size: 12px; }
}

/* CATÁLOGO */
.catalogo-wrap { display: flex; justify-content: center; padding: 18px 44px 0; }
.btn-catalogo {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--lila-dark);
  border: 1.5px solid var(--lila); border-radius: 50px;
  padding: 10px 22px; font-family: var(--font-texto); font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: all 0.18s;
}
.btn-catalogo:hover { background: var(--lila-bg); border-color: var(--lila-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(155,95,192,0.14); }
.btn-catalogo:disabled { opacity: 0.65; cursor: wait; transform: none; box-shadow: none; }
.btn-catalogo .icon-svg { width: 15px; height: 15px; }
@media (max-width: 600px) {
  .catalogo-wrap { padding: 14px 12px 0; }
  .btn-catalogo { width: auto; justify-content: center; padding: 9px 18px; font-size: 12.5px; }
}

/* GRID PRODUCTOS */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px; padding: 24px 44px;
}
@media (max-width: 600px) {
  .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
}

/* BOTÓN "MOSTRAR MÁS" (muestra los productos de 18 en 18) */
.btn-mostrar-mas {
  display: block;
  margin: 0 auto 32px;
  background: var(--rosa-dark);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 13px 36px;
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.btn-mostrar-mas:hover { background: var(--lila-dark); transform: translateY(-1px); }
@media (max-width: 600px) {
  .btn-mostrar-mas { padding: 11px 30px; font-size: 13px; margin-bottom: 20px; }
}

/* TARJETA PRODUCTO */
.prod-card {
  background: #fff; border-radius: 20px; border: 1.5px solid var(--gris-30);
  overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; position: relative;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(242,95,164,0.14); }
.prod-card.sin-stock { opacity: 1; }
.prod-card.sin-stock:hover { transform: none; box-shadow: 0 4px 14px rgba(58,42,69,0.10); }

.sin-stock-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px; text-align: center; pointer-events: none;
  background: rgba(58,42,69,0.18);
  backdrop-filter: blur(0.5px);
}
.sin-stock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-titulo); font-weight: 700; font-size: 10px;
  letter-spacing: 0.4px; text-transform: uppercase; color: #fff;
  background: rgba(58,42,69,0.7);
  padding: 3px 9px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.sin-stock-sub {
  display: inline-flex; align-items: center;
  font-family: var(--font-titulo); font-weight: 700; font-size: 9px;
  letter-spacing: 0.4px; text-transform: uppercase; color: #fff;
  background: rgba(58,42,69,0.7);
  padding: 3px 9px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.prod-img {
  width: 100%; aspect-ratio: 1; background: var(--lila-bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; color: var(--lila-dark);
}
.prod-img .icon-svg { width: 48px; height: 48px; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.prod-card:hover .prod-img img { transform: scale(1.05); }

.destacado-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F5A623, #F7C948);
  color: #fff;
  box-shadow: 0 4px 12px rgba(245,166,35,0.4);
  animation: destacado-pop 0.4s ease-out;
}
.destacado-badge .icon-svg { width: 16px; height: 16px; }
@keyframes destacado-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.prod-info { padding: 14px; }
.prod-nombre {
  font-family: var(--font-texto); font-weight: 600; font-size: 14px;
  line-height: 1.3; margin-bottom: 4px; color: var(--negro); cursor: pointer;
}
.prod-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prod-precio {
  font-family: var(--font-titulo);
  font-size: 17px; font-weight: 700; color: var(--rosa-dark);
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.prod-tipo-badge {
  font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 20px;
  letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap;
  flex-shrink: 0; line-height: 1.6;
}
.prod-tipo-badge.mayor { background: var(--lila-bg); color: var(--lila-dark); }
.prod-tipo-badge.detal { background: var(--rosa-bg); color: var(--rosa-dark); }

@media (max-width: 600px) {
  .prod-precio {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .prod-footer { align-items: flex-end; }
}
/* Botón agregar / stepper de cantidad */
.btn-agregar {
  background: var(--rosa-dark); color: #fff; border: none; border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, transform 0.1s; flex-shrink: 0;
}
.btn-agregar .icon-svg { width: 11px; height: 11px; }
.stepper {
  display: flex; align-items: center; gap: 2px;
  background: var(--lila-bg); border-radius: 50px; padding: 2px;
}
.stepper button {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: #fff; color: var(--rosa-dark); font-size: 11px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.stepper button:hover { background: var(--rosa-dark); color: #fff; }
.stepper .stepper-num { font-size: 11px; font-weight: 700; min-width: 12px; text-align: center; }

/* Celular: botón de agregar y stepper un poco más grandes para el dedo */
@media (max-width: 600px) {
  .btn-agregar { width: 30px; height: 30px; }
  .btn-agregar .icon-svg { width: 14px; height: 14px; }
  .stepper { padding: 3px; gap: 3px; }
  .stepper button { width: 24px; height: 24px; font-size: 14px; }
  .stepper .stepper-num { font-size: 12.5px; min-width: 16px; }
}

/* MODAL PRODUCTO */
.overlay {
  position: fixed; inset: 0; background: rgba(58,42,69,0.55); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.overlay.open { opacity: 1; pointer-events: all; }
@media (min-width: 600px) { .overlay { align-items: center; } }

/* Si hay productos en el carrito, el modal termina arriba de la franja del total */
.con-carrito .overlay { padding-bottom: 88px; }

.modal {
  background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-width: 500px;
  max-height: 90vh; overflow-y: auto; padding: 24px;
  transform: translateY(40px); transition: transform 0.3s; position: relative;
}
@media (min-width: 600px) { .modal { border-radius: 24px; } }
.overlay.open .modal { transform: translateY(0); }

.modal-img {
  width: 100%; aspect-ratio: 4/3; border-radius: 16px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  margin-bottom: 16px; color: var(--lila-dark); border: 1px solid var(--gris-30);
}
.modal-img .icon-svg { width: 70px; height: 70px; }
.modal-img img { width: 100%; height: 100%; object-fit: contain; }
.modal h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.modal-desc { font-size: 13px; color: var(--gris-60); line-height: 1.6; margin-bottom: 14px; }
.modal-precio { font-family: var(--font-titulo); font-size: 26px; color: var(--rosa-dark); font-weight: 700; margin-bottom: 16px; }
.modal-stock-info {
  font-size: 12.5px; font-weight: 700; margin-bottom: 16px; padding: 5px 12px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; letter-spacing: 0.1px;
}
.modal-stock-info .icon-svg { width: 15px; height: 15px; flex-shrink: 0; }
.modal-stock-info.ok      { background: #eafaf0; color: #0f7a37; border-color: rgba(29,185,84,0.30); }
.modal-stock-info.bajo    { background: #fff6e6; color: #a86400; border-color: rgba(245,158,11,0.34); }
.modal-stock-info.agotado { background: #fdecec; color: #c02626; border-color: rgba(239,68,68,0.28); }
.qty-ctrl { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.qty-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gris-30);
  background: #fff; font-size: 20px; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.2s;
}
.qty-btn:hover { border-color: var(--rosa-dark); color: var(--rosa-dark); }
.qty-num { font-family: var(--font-texto); font-size: 20px; font-weight: 600; min-width: 30px; text-align: center; }
.btn-modal-agregar {
  width: 100%; background: var(--rosa-dark); color: #fff; border: none; border-radius: 14px;
  padding: 16px; font-family: var(--font-texto); font-weight: 600; font-size: 16px;
  cursor: pointer; transition: background 0.2s;
}
.btn-modal-agregar:hover { background: var(--lila-dark); }
.modal-close-btn {
  position: absolute; top: 16px; right: 16px; background: var(--lila-bg); border: none;
  border-radius: 50%; width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--negro);
}
.modal-close-btn .icon-svg { width: 14px; height: 14px; }

.busqueda-wrap {
  margin: 16px 44px 0; position: relative;
  display: flex; align-items: center;
}
.busqueda-wrap .icon-svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--gris-60); stroke-width: 1.8; }
.busqueda-wrap input {
  width: 100%; padding: 11px 14px 11px 38px; border-radius: 50px;
  border: 1.5px solid var(--gris-30); font-family: var(--font-texto);
  font-size: 14px; outline: none; background: #fff;
}
.busqueda-wrap input:focus { border-color: var(--rosa-dark); }
@media (max-width: 600px) { .busqueda-wrap { margin: 12px 16px 0; } }

.prod-tipo-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  letter-spacing: 0.5px; text-transform: uppercase; margin-left: 6px;
  vertical-align: middle;
}
.prod-tipo-badge.mayor { background: var(--lila-bg); color: var(--lila-dark); }
.prod-tipo-badge.detal { background: var(--rosa-bg); color: var(--rosa-dark); }

@media (max-width: 480px) {
  .destacado-badge { width: 28px; height: 28px; }
  .destacado-badge .icon-svg { width: 14px; height: 14px; }
}