:root {
    
    --borde-oka: #8cdbe2;
    --rojo-primario: #e30613;
    --gris-oscuro: #333;
    --gris-suave: #666;
    --verde-navidad: #28a745;
}

 
 
.product-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
}

/* Galería */
.product-gallery { display: flex; gap: 15px; }

.thumbnails { display: flex; flex-direction: column; align-items: center; }

.thumb-list { display: flex; flex-direction: column; gap: 8px; }

.thumb {
    width: 65px; height: 65px; border: 1px solid #ddd;
    cursor: pointer; object-fit: contain; padding: 2px;
}

.thumb.active { border: 2px solid var(--celeste); }

.main-image {
    position: relative; flex-grow: 1; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center;
}

.main-image img { max-width: 100%; height: auto; }

.badge-navidad {
    position: absolute; top: 0; right: 0;
    background: var(--verde-navidad); color: white;
    padding: 5px 15px; font-weight: bold; font-size: 12px;
}

/* Información */
.brand { color: var(--gris-oscuro); font-weight_: bold; font-size: 14px; }
.titulo { font-size: 22px; margin_: 10px 0; color: #222; }

.promo {
    background: var(--celeste); border: 1.5px dashed var(--borde-oka);
    padding: 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px;
}

.tag { background: #000; color: #fff; padding: 2px 8px; border-radius: 10px; font-weight: bold; }

 

.btn-wishlist {
    background: none; border: 1px solid #999; padding: 10px 20px;
    border-radius: 25px; cursor: pointer; color: var(--gris-oscuro);
}





.contenedor-agregar {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: sans-serif;
}
/*
.texto-etiqueta {
  font-weight: bold;
  color: #333;
}*/

.selector-cantidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e0e0e0; /* Borde tipo solid, color gris claro */
  border-radius: 50px;       /* Crea el efecto de cápsula (pill-shape) */
  padding: 5px 15px;
  min-width: 120px;
}

.btn {
  background: none;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  padding: 5px 10px;
}

.valor {
  color: #888;
  font-size: 18px; border:none;width:20%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .product-detail-grid { grid-template-columns: 1fr; }
    .product-gallery { flex-direction: column-reverse; }
    .thumbnails { flex-direction: row; }
    .thumb-list { flex-direction: row; overflow-x: auto; }
}