/* ============================================================
   PRODUCT DETAIL — componente compartido
   Usado por: producto.html (la página standalone) y el modal de
   index.html (assets/product-modal.js), que renderiza este mismo
   markup adentro de un <dialog>.

   Salió del <style> de producto.html. Acá va sólo lo que estiliza el
   detalle en sí: no entran header, breadcrumb, footer, whatsapp-float,
   wireframe-tag, nav-links ni las variables de :root, que siguen
   viviendo en cada página.

   Requiere las variables de :root de cada página (--surface, --accent,
   --border, --radius…), idénticas en landing y producto.

   IMPORTANTE — orden de carga: enlazar DESPUÉS de aos.css, por el mismo
   motivo documentado en product-card.css (líneas 13-16): AOS genera
   selectores de especificidad alta que si no pisarían estas reglas.
   ============================================================ */

.product-layout { display: flex; gap: 64px; max-width: 1280px; margin: 0 auto; padding: 8px 48px 80px; }

/* --- Gallery -------------------------------------------------------- */
.gallery { flex: 1; }
.gallery-main { width: 100%; aspect-ratio: 1; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.gallery-thumbs { display: flex; gap: 12px; }
.gallery-thumb { width: 80px; height: 80px; background: var(--surface); border: 2px solid var(--border-light); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted); font-weight: 500; transition: all .25s; }
.gallery-thumb.active { border-color: var(--accent); }
.gallery-thumb:hover { border-color: var(--border); }
/* Desde el prompt 21 el thumb es un <button> y no un <div>: cambia la
   foto grande, así que tiene que ser alcanzable con el teclado y
   anunciarse como control. Lo que sigue es sólo desandar lo que el
   navegador le pone de fábrica a un botón — la fuente es la trampa
   conocida del proyecto: sin `inherit` le pone Arial. */
.gallery-thumb { padding: 0; font-family: inherit; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gallery-thumb:focus-visible { outline: 1px solid var(--accent-light); outline-offset: 2px; }

/* En producto.html la galería es un placeholder de texto; en el modal
   trae la foto real. La regla vive acá para que las dos la compartan
   cuando producto.html también pase a tener imagen. */
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }

/* --- Details -------------------------------------------------------- */
.product-details { flex: 1; max-width: 480px; }

/* Estos tres van scopeados bajo .product-details a propósito.
   `.product-brand` y `.product-name` son los MISMOS nombres de clase
   que usa la product card, y product-card.css los define sin scope
   (0,1,0). Si se copiaran tal cual desde producto.html, al enlazar este
   archivo en la landing le cambiarían la tipografía a las cards: el
   nombre pasaría de 17px a 36px y la marca de 10.5px a 12px en acento.
   Con el scope (0,2,0) ganan dentro del detalle y no tocan la card. */
.product-details .product-brand { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.product-details .product-name { font-size: 36px; font-weight: 300; line-height: 1.15; margin-bottom: 16px; letter-spacing: -1px; }
.product-details .product-name strong { font-weight: 700; }

.product-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.product-rating svg { width: 14px; height: 14px; fill: var(--accent); }

.price-box { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-light); }
.price-current { font-size: 32px; font-weight: 700; }
.price-old { font-size: 16px; color: var(--text-muted); text-decoration: line-through; margin-left: 12px; }

.product-meta { margin-bottom: 32px; }
.meta-row { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.meta-label { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 140px; text-transform: uppercase; letter-spacing: 0.5px; }
.meta-value { font-size: 14px; color: var(--text-secondary); }
.stock-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.stock-badge.in { background: rgba(5,150,105,0.15); color: #34d399; }
.stock-badge.low { background: rgba(217,119,6,0.15); color: #fbbf24; }
/* Faltaba: los tres estados de VOCAB.etiquetaStock() son disponible,
   bajo y AGOTADO, y hasta el prompt 21 la ficha sólo tenía los dos
   primeros porque estaba escrita a mano y ningún producto de maqueta
   estaba en cero. Con la ficha saliendo de la base, un stock = 0 se
   pinta y tiene que verse distinto de "Disponible": el mismo verde
   diciendo "Sin stock" es peor que no decir nada.
   La palomita del ícono no se muestra en este estado — no hay nada que
   confirmar—, y la oculta la regla de abajo. */
.stock-badge.out { background: rgba(239,68,68,0.14); color: #f87171; }
.stock-badge.out svg { display: none; }
.stock-badge svg { width: 12px; height: 12px; }

/* --- Notas y acordes ------------------------------------------------ */
.notes-section, .accords-section { margin-bottom: 32px; }
.notes-section h3, .accords-section h3 { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }

/* Acordes principales, como los lista Fragrantica. Allá el largo de
   cada barra indica su peso; acá esa jerarquía se reduce a marcar
   los tres primeros, que son además los que muestra la card de la
   landing. El resto queda como contexto. */
.accord-list { display: flex; flex-wrap: wrap; gap: 8px; }
.accord-chip { font-size: 12px; padding: 6px 13px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border-light); color: var(--text-muted); }
.accord-chip.main { color: var(--text); border-color: rgba(176,38,255,0.32); background: rgba(141,32,216,0.13); }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.note-card { text-align: center; padding: 24px 16px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); transition: all .3s; }
.note-card:hover { border-color: var(--border); }
.note-icon { width: 40px; height: 40px; background: var(--accent-glow); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 16px; }
.note-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.note-value { font-size: 13px; color: var(--text-secondary); font-weight: 400; }

/* --- Descripción ---------------------------------------------------- */
.description-section { margin-bottom: 32px; }
.description-section h3 { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.description-section p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; font-weight: 300; }

/* --- Agregar al carrito --------------------------------------------- */
.add-box { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 28px; }
.quantity-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.quantity-row label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.qty-controls { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
/* font-family: inherit — sin esto el botón usa la fuente por defecto del
   navegador (Arial) y los "−" y "+" quedaban fuera del sistema. Todos los
   demás controles del proyecto ya lo declaran; a éste se le había pasado. */
.qty-btn { width: 40px; height: 40px; border: none; background: var(--surface-2); cursor: pointer; font-size: 16px; font-family: inherit; color: var(--text-secondary); transition: all .2s; }
.qty-btn:hover { background: var(--surface-3); color: var(--text); }
.qty-input { width: 52px; height: 40px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface-2); text-align: center; font-size: 14px; font-weight: 600; color: var(--text); font-family: inherit; }
.add-btn { width: 100%; padding: 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); }
.add-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124,58,237,0.3); }
.add-btn:active { transform: translateY(0); }
/* Consultar por WhatsApp — secundario respecto de "Agregar al carrito":
   mismo tamaño pero en contorno, para que sean dos caminos y no dos
   botones compitiendo. */
.wa-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; margin-top: 10px; padding: 15px;
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: border-color .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1);
}
.wa-btn:hover { border-color: var(--accent); background: rgba(176,38,255,0.08); }
.wa-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.wa-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.trust-strip { display: flex; justify-content: center; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-light); }
.trust-strip-item { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.trust-strip-item svg { width: 14px; height: 14px; stroke: var(--accent); }

@media (max-width: 768px) {
    .product-layout { flex-direction: column; padding: 8px 20px 60px; gap: 32px; }
    .gallery-main { aspect-ratio: auto; height: 360px; }
    .notes-grid { grid-template-columns: 1fr; }
}