/**
 * ============================================================
 * product-styles.css - Nonatty
 * ============================================================
 * 
 * Este archivo contiene todos los estilos para la página de
 * producto (product.php)
 * 
 * VERSIÓN 2.7 - Estilos de Tags (Etiquetas) completos
 * 
 * MEJORAS VERSIÓN 2.7 (Tags/Etiquetas):
 * - ✅ Estilos base para .product-tags-container y .product-tag
 * - ✅ Soporte completo para Dark Mode con selectores específicos
 * - ✅ Transiciones y efectos hover mejorados
 * - ✅ Compatibilidad con colores inline desde PHP
 * - ✅ Responsive design optimizado
 * - ✅ Documentación completa de cada sección
 * 
 * MEJORAS VERSIÓN 3.5 (Acordeón de beneficios):
 * - Movimiento del contenedor a la derecha con margin-left: auto + margin-right: 0
 * - Reducción de altura de renglones (padding más compacto)
 * - Mejor proporción entre título y acordeón
 * - Mantenimiento de responsividad
 * 
 * @package NoNatty
 * @version 2.7
 * @author Nonatty Dev Team
 * @copyright 2026 Nonatty
 */

/* ============================================================
   RESET Y VARIABLES - IDENTIDAD CORPORATIVA NONATTY
   ============================================================ */

:root {
    /* Colores corporativos NoNatty */
    --color-red: #FE0201;
    --color-black: #000000;
    --color-blue: #0000FF;
    --color-white: #FEFEFE;
    
    /* Escala de grises */
    --color-grey-50: #F8FAFC;
    --color-grey-100: #F6F6F5;
    --color-grey-200: #EDEDED;
    --color-grey-300: #D9D9D9;
    --color-grey-400: #B8B8B8;
    --color-grey-500: #888888;
    --color-grey-600: #666666;
    --color-grey-700: #444444;
    --color-grey-800: #222222;
    --color-grey-900: #0F172A;
    
    /* Warm Grey (para fondos de tarjetas) */
    --color-warm-50: #FAF9F7;
    --color-warm-100: #F6F5F2;
    --color-warm-200: #EDEBE5;
    --color-warm-300: #D4D0C8;
    
    /* Colores de acento */
    --color-orange: #FF5E03;
    --color-green: #16D034;
    --color-yellow: #FFD700;
    
    /* Tipografías */
    --font-primary: 'Anton', sans-serif;
    --font-secondary: 'Impact', 'Helvetica World', sans-serif;
    --font-body: 'Helvetica World', Helvetica, Arial, sans-serif;
    
    /* Espaciado */
    --max-width: 1440px;
    --container-padding: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12);
    
    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}


/* ============================================================
   DARK MODE VARIABLES
   ============================================================ */
.dark {
    --color-grey-50: #111827;
    --color-grey-100: #1F2937;
    --color-grey-200: #374151;
    --color-grey-300: #4B5563;
    --color-grey-400: #6B7280;
    --color-grey-500: #9CA3AF;
    --color-grey-600: #D1D5DB;
    --color-grey-700: #E5E7EB;
    --color-grey-800: #F3F4F6;
    --color-grey-900: #F9FAFB;
    --color-warm-50: #1a1a1a;
    --color-warm-100: #222222;
    --color-warm-200: #2a2a2a;
    --color-warm-300: #333333;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   RESET GLOBAL
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-white);
    color: var(--color-black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dark body {
    background: #0a0a0a;
    color: var(--color-grey-800);
}

a {
    text-decoration: none;
    color: var(--color-blue);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-red);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    font-family: var(--font-body);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container-product {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-8 {
    gap: 8px;
}
.gap-12 {
    gap: 12px;
}
.gap-16 {
    gap: 16px;
}
.gap-20 {
    gap: 20px;
}
.gap-24 {
    gap: 24px;
}
.gap-32 {
    gap: 32px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}



/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.product-lang-switcher {
    display: flex;
    gap: 4px;
    margin-left: 4px;
}

.product-lang-switcher a {
    color: var(--color-grey-400);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.product-lang-switcher a.active {
    color: var(--color-white);
    background: var(--color-blue);
}

.product-lang-switcher a:hover {
    color: var(--color-white);
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.product-breadcrumb {
    max-width: var(--max-width);
    margin: 16px auto 0;
    padding: 0 var(--container-padding);
    font-size: 12px;
    color: var(--color-grey-500);
}

.product-breadcrumb a {
    color: var(--color-grey-500);
    transition: color var(--transition-fast);
}

.product-breadcrumb a:hover {
    color: var(--color-blue);
}

.product-breadcrumb .separator {
    margin: 0 8px;
    color: var(--color-grey-400);
}

.product-breadcrumb .current {
    color: var(--color-black);
    font-weight: 600;
}

.dark .product-breadcrumb .current {
    color: var(--color-grey-800);
}


/* ============================================================
   PRODUCTO - LAYOUT 2 COLUMNAS (CORREGIDO) para caso de que product.php  product-container está usando product-layout en el CSS, pero tu HTML usa product-container
   ============================================================ */
.product-container {
    max-width: var(--max-width);
    margin: 20px auto 40px;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

@media (max-width: 1024px) {
    .product-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ============================================================
   COLUMNA IZQUIERDA - IMAGEN
   ============================================================ */
.product-image-column {
    position: sticky;
    top: 100px;
    align-self: start;
}

@media (max-width: 1024px) {
    .product-image-column {
        position: static;
    }
}

.product-image-wrapper {
    background: var(--color-warm-100);
    border-radius: var(--radius-lg);
    padding: 30px;
    position: relative;
    text-align: center;
}

.dark .product-image-wrapper {
    background: var(--color-warm-100);
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin: 0 auto;
}

.product-image-wrapper .product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--color-yellow);
    color: var(--color-black);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* ============================================================
   THUMBNAILS
   ============================================================ */
.product-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.product-thumbnails .thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-fast);
    background: var(--color-warm-100);
    flex-shrink: 0;
}

.dark .product-thumbnails .thumb {
    background: var(--color-warm-100);
}

.product-thumbnails .thumb:hover {
    border-color: var(--color-blue);
    transform: scale(1.05);
}

.product-thumbnails .thumb.active {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.2);
}

.product-thumbnails .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   COLUMNA DERECHA - INFORMACIÓN
   ============================================================ */
.product-info-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-category {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-grey-500);
}

.product-title {
    font-family: var(--font-primary);
    font-size: 34px;
    line-height: 1.15;
    color: var(--color-black);
    margin: 0;
}

.dark .product-title {
    color: var(--color-grey-800);
}

/* ============================================================
   PRODUCT TAGS - ETIQUETAS DEL PRODUCTO (VERSIÓN 2.7)
   ============================================================ */

/**
 * ============================================================
 * product-tags-container - Contenedor de etiquetas
 * ============================================================
 * 
 * Propósito: Agrupa y organiza las etiquetas (tags) del producto
 * en un contenedor flexible que se adapta al contenido.
 * 
 * Características:
 * - Display flex con wrapping para múltiples líneas
 * - Espaciado uniforme entre etiquetas (gap: 8px)
 * - Margen superior e inferior para separación del contenido
 * 
 * @usage Se aplica automáticamente cuando el producto tiene etiquetas
 *        en el array selected_tags (ej: ['best_seller', 'vegan'])
 */
.product-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px 0;
}

/**
 * ============================================================
 * product-tag - Etiqueta individual del producto
 * ============================================================
 * 
 * Propósito: Muestra una etiqueta/categoría del producto con
 * estilo visual distintivo y semántica clara.
 * 
 * Características:
 * - Forma de píldora con border-radius: 20px
 * - Tipografía Impact (secondary) para impacto visual
 * - Texto en mayúsculas con letter-spacing
 * - Efecto hover: elevación sutil y sombra
 * - Transición suave para interacciones
 * - Soporte para colores inline desde PHP
 * 
 * COLORES SOPORTADOS DESDE PHP:
 * - #EDEDED: Estándar (default)
 * - #FFD700: Destacado (ej: "Upgraded Formula")
 * - #FF6B6B: Nuevo lanzamiento (ej: "New Release")
 * - #4ECDC4: Best Seller
 * - #FF9F1C: Nuevos sabores (ej: "New Flavors")
 * - #00B4D8: Certificado (ej: "NSF Certified")
 * 
 * @note Los colores de fondo se aplican inline desde PHP
 *       usando el atributo style="background-color: #COLOR"
 * 
 * @example
 * <span class="product-tag" style="background-color: #4ECDC4; color: #000000;">
 *     Best Seller
 * </span>
 */
.product-tag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--color-grey-200);
    color: var(--color-black);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all var(--transition-normal);
    line-height: 1.4;
    white-space: nowrap;
}

/**
 * product-tag:hover - Efecto al pasar el mouse
 * 
 * Eleva la etiqueta ligeramente y agrega una sombra sutil
 * para mejorar la interactividad y feedback visual.
 */
.product-tag:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   DARK MODE - TAGS (VERSIÓN 2.7)
   ============================================================ */

/**
 * ============================================================
 * Dark Mode para product-tag
 * ============================================================
 * 
 * En modo oscuro, las etiquetas necesitan ajustes específicos
 * para mantener legibilidad y contraste adecuado.
 * 
 * ESTRATEGIA DE COLORES EN DARK MODE:
 * 1. Etiquetas con fondo claro (#EDEDED) → fondo oscuro (#2a2a2a)
 * 2. Etiquetas con colores vibrantes → versiones más oscuras y saturadas
 * 3. Texto siempre blanco para máximo contraste
 * 
 * @note Se usan selectores de atributo [style*="..."] para
 *       detectar colores inline aplicados desde PHP y
 *       convertirlos automáticamente a versiones dark mode.
 */
.dark .product-tag {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Etiquetas con fondo gris estándar (#EDEDED) */
.dark .product-tag[style*="background-color: #EDEDED"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Etiquetas con fondo amarillo/dorado (#FFD700) */
.dark .product-tag[style*="background-color: #FFD700"] {
    background-color: #b8960f !important;
    color: #ffffff !important;
}

/* Etiquetas con fondo rojo/coral (#FF6B6B) */
.dark .product-tag[style*="background-color: #FF6B6B"] {
    background-color: #cc4444 !important;
    color: #ffffff !important;
}

/* Etiquetas con fondo verde/menta (#4ECDC4) - ¡Best Seller! */
.dark .product-tag[style*="background-color: #4ECDC4"] {
    background-color: #2a9d8f !important;
    color: #ffffff !important;
}

/* Etiquetas con fondo naranja (#FF9F1C) */
.dark .product-tag[style*="background-color: #FF9F1C"] {
    background-color: #cc7a14 !important;
    color: #ffffff !important;
}

/* Etiquetas con fondo azul (#00B4D8) */
.dark .product-tag[style*="background-color: #00B4D8"] {
    background-color: #0077b6 !important;
    color: #ffffff !important;
}

/* ============================================================
   RATING
   ============================================================ */
.product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-rating .stars {
    color: #FFD700;
    font-size: 16px;
    letter-spacing: 1px;
}

.product-rating .count {
    font-size: 13px;
    color: var(--color-grey-500);
}

/* ============================================================
   PRECIO
   ============================================================ */
.product-price {
    font-family: var(--font-secondary);
    font-size: 32px;
    color: var(--color-blue);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.product-price .currency {
    font-size: 18px;
    color: var(--color-grey-500);
    font-weight: 400;
}

.product-price .compare-at {
    font-size: 18px;
    color: var(--color-grey-400);
    text-decoration: line-through;
    font-weight: 400;
}

/* ============================================================
   STOCK INDICATOR
   ============================================================ */
.product-stock {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-stock.in-stock {
    color: var(--color-green);
}

.product-stock.out-of-stock {
    color: #dc3545;
}

/* ============================================================
   DESCRIPCIÓN
   ============================================================ */
.product-description {
    font-size: 15px;
    color: var(--color-grey-600);
    line-height: 1.8;
    word-wrap: break-word; /* ← CRUCIAL */
    overflow-wrap: break-word; /* ← CRUCIAL */
    hyphens: auto;
    max-width: 100%;
}

.dark .product-description {
    color: var(--color-grey-500);
}

/* ============================================================
   CARACTERÍSTICAS (FEATURES) - BULLETS ESTILO MOMENTOUS
   ============================================================ */
.product-features {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px;
    max-width: 100%;
    overflow: hidden;
}

.product-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-grey-200);
    word-wrap: break-word;
    max-width: 100%;
}

.dark .product-features li {
    color: var(--color-grey-700);
    border-bottom-color: var(--color-grey-200);
}

.product-features li:last-child {
    border-bottom: none;
}

.product-features li .feature-icon {
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-size: 16px;
}

/* ============================================================
   SELECTOR DE VARIANTES (TAMAÑOS)
   ============================================================ */
.variant-selector-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.variant-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.variant-selector .variant-btn {
    padding: 10px 20px;
    border: 2px solid var(--color-grey-300);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-black);
}

.dark .variant-selector .variant-btn {
    color: var(--color-grey-700);
    border-color: var(--color-grey-300);
}

.variant-selector .variant-btn:hover {
    border-color: var(--color-blue);
    transform: translateY(-1px);
}

.variant-selector .variant-btn.active {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: var(--color-white);
}

/* ============================================================
   SELECTOR DE COMPRA (SUSCRIPCIÓN / UN SOLO PAGO)
   ============================================================ */
.purchase-options {
    background: var(--color-warm-100);
    border-radius: var(--radius-md);
    padding: 16px;
    margin: 4px 0 8px;
}

.dark .purchase-options {
    background: var(--color-warm-100);
}

.purchase-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    background: var(--color-white);
    margin-bottom: 6px;
}

.dark .purchase-option {
    background: var(--color-grey-100);
}

.purchase-option:last-child {
    margin-bottom: 0;
}

.purchase-option:hover {
    border-color: var(--color-grey-300);
}

.purchase-option.active {
    border-color: var(--color-blue);
    background: rgba(0, 0, 255, 0.04);
}

.dark .purchase-option.active {
    background: rgba(0, 0, 255, 0.12);
}

.purchase-option .radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-grey-400);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.purchase-option.active .radio {
    border-color: var(--color-blue);
}

.purchase-option.active .radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-blue);
    animation: radioPop 0.2s ease;
}

@keyframes radioPop {
    0% {
        transform: scale(0);
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.purchase-option .label {
    flex: 1;
    margin-left: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-black);
}

.dark .purchase-option .label {
    color: var(--color-grey-700);
}

.purchase-option .label .sub-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-grey-500);
    display: block;
}

.purchase-option .price {
    font-family: var(--font-secondary);
    font-size: 18px;
    color: var(--color-blue);
}

.purchase-option .discount-badge {
    background: var(--color-black);
    color: var(--color-white);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 8px;
}

.dark .purchase-option .discount-badge {
    background: var(--color-white);
    color: var(--color-black);
}

/* ============================================================
   BOTÓN AÑADIR AL CARRITO
   ============================================================ */
.btn-add-to-cart {
    width: 100%;
    max-width: 100%;
    padding: 16px 28px;
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-secondary);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* ← IMPORTANTE */
}

.btn-add-to-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.btn-add-to-cart:hover::before {
    left: 100%;
}

.btn-add-to-cart:hover {
    background: #0000DD;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 255, 0.25);
}

.btn-add-to-cart:active {
    transform: translateY(0);
}

.btn-add-to-cart .price-inline {
    font-size: 16px;
    opacity: 0.8;
}

.btn-add-to-cart.added {
    background: var(--color-green);
}

.btn-add-to-cart.added:hover {
    background: #00b86b;
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 4px 0 8px;
    justify-content: center;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-grey-600);
}

.dark .trust-badge {
    color: var(--color-grey-500);
}

.trust-badge i {
    color: var(--color-green);
    font-size: 14px;
}

/* ============================================================
   ACCIONES ADICIONALES
   ============================================================ */
.product-actions {
    display: flex;
    gap: 12px;
    margin: 4px 0 8px;
    flex-wrap: wrap;
}

.product-actions .btn-secondary {
    padding: 10px 20px;
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-blue);
    font-family: var(--font-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-actions .btn-secondary:hover {
    background: var(--color-blue);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ============================================================
   BOTÓN "VIEW/VER" PARA TARJETAS DE PRODUCTO
   ============================================================ */

/**
 * ============================================================
 * btn-view-product - Botón estilizado "Ver/View"
 * ============================================================
 * 
 * Este es el botón principal para ver productos, diseñado con
 * estilos modernos y efectos de interacción mejorados.
 * 
 * Características:
 * - Efecto hover con desplazamiento y sombra
 * - Animación de brillo al pasar el mouse
 * - Transición suave del ícono
 * - Efecto de escala al hacer clic
 * - Versiones pequeña y grande
 * - Soporte para dark mode
 * - Accesibilidad con estados focus
 * 
 * @uses En tarjetas de productos y secciones relacionadas
 */
.btn-view-product {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--color-blue);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: 12pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Efecto hover - eleva el botón y agrega sombra */
.btn-view-product:hover {
    background: #0000DD;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 255, 0.3);
    color: var(--color-white);
}

/* Efecto de brillo al pasar el mouse - animación de barra deslizante */
.btn-view-product::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.btn-view-product:hover::before {
    left: 100%;
}

/* Animación del icono - desplazamiento suave al hacer hover */
.btn-view-product i {
    font-size: 10px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-view-product:hover i {
    transform: translateX(4px);
}

/* Estado activo (clic) - efecto de pulsación */
.btn-view-product:active {
    transform: scale(0.95);
}

/* Estado focus para accesibilidad */
.btn-view-product:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

/* ============================================================
   VARIANTES DE TAMAÑO PARA btn-view-product
   ============================================================ */

/* Versión pequeña - para espacios reducidos */
.btn-view-product.btn-sm {
    padding: 6px 14px;
    font-size: 10pt;
}

/* Versión grande - para mayor impacto visual */
.btn-view-product.btn-lg {
    padding: 12px 28px;
    font-size: 14pt;
}

/* Versión con ícono solo (sin texto) */
.btn-view-product.btn-icon-only {
    padding: 8px 12px;
    font-size: 14px;
}

.btn-view-product.btn-icon-only i {
    font-size: 14px;
    margin: 0;
}

.btn-view-product.btn-icon-only:hover i {
    transform: translateX(2px);
}

/* ============================================================
   SOPORTE PARA DARK MODE en btn-view-product
   ============================================================ */
.dark .btn-view-product {
    background: #1a4bff;
    /* Azul más brillante para mejor contraste en dark mode */;
}

.dark .btn-view-product:hover {
    background: #0033dd;
    box-shadow: 0 4px 16px rgba(26, 75, 255, 0.4);
}

.dark .btn-view-product:focus-visible {
    outline-color: #1a4bff;
}

/* ============================================================
   VARIANTE CON COLOR ALTERNATIVO (para secciones especiales)
   ============================================================ */

/* Botón de color rojo (para ofertas o promociones) */
.btn-view-product.btn-red {
    background: var(--color-red);
}

.btn-view-product.btn-red:hover {
    background: #cc0000;
    box-shadow: 0 4px 16px rgba(254, 2, 1, 0.3);
}

.dark .btn-view-product.btn-red {
    background: #cc0000;
}

.dark .btn-view-product.btn-red:hover {
    background: #aa0000;
}

/* Botón de color verde (para secciones de éxito) */
.btn-view-product.btn-green {
    background: var(--color-green);
}

.btn-view-product.btn-green:hover {
    background: #00b86b;
    box-shadow: 0 4px 16px rgba(22, 208, 52, 0.3);
}

.dark .btn-view-product.btn-green {
    background: #00b86b;
}

.dark .btn-view-product.btn-green:hover {
    background: #009a5a;
}

/* ============================================================
   SECCIÓN "BUILD YOUR STACK" - PRODUCTOS RELACIONADOS
   ============================================================ */
.stack-section {
    max-width: var(--max-width);
    margin: 40px auto 60px;
    padding: 0 var(--container-padding);
}

.stack-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stack-section .section-header h2 {
    font-family: var(--font-primary);
    font-size: 28px;
    color: var(--color-black);
}

.dark .stack-section .section-header h2 {
    color: var(--color-grey-800);
}

.stack-section .section-header a {
    font-size: 14px;
    color: var(--color-blue);
    font-weight: 600;
}

.stack-section .section-header a:hover {
    color: var(--color-red);
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.stack-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--color-grey-200);
    transition: all var(--transition-normal);
    text-align: center;
}

.dark .stack-card {
    background: var(--color-grey-100);
    border-color: var(--color-grey-200);
}

.stack-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stack-card .image {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm-100);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
}

.dark .stack-card .image {
    background: var(--color-grey-200);
}

.stack-card .image img {
    max-height: 120px;
    max-width: 100%;
    object-fit: contain;
}

.stack-card .name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--color-black);
}

.dark .stack-card .name {
    color: var(--color-grey-700);
}

.stack-card .price {
    font-family: var(--font-secondary);
    font-size: 18px;
    color: var(--color-blue);
}

/* Actualizado para usar btn-view-product en lugar de btn-small */
.stack-card .btn-view-product {
    margin-top: 10px;
    padding: 8px 20px;
    font-size: 11pt;
}

/* ============================================================
   BOTÓN "VER EVENTO" 
   ============================================================ */

/**
 * ============================================================
 * btn-view-event - Botón para ver eventos completos
 * ============================================================
 * 
 * Botón específico para redirigir a la página del evento,
 * manteniendo consistencia con el diseño de btn-view-product.
 */
.btn-view-event {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: 12pt;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2px solid var(--color-black);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-view-event:hover {
    background: transparent;
    color: var(--color-black);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.btn-view-event i {
    font-size: 10px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-view-event:hover i {
    transform: translateX(4px);
}

/* Dark mode para btn-view-event */
.dark .btn-view-event {
    background: var(--color-grey-700);
    color: var(--color-white);
    border-color: var(--color-grey-700);
}

.dark .btn-view-event:hover {
    background: transparent;
    color: var(--color-grey-700);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

/* ============================================================
   RESPONSIVE - PANTALLAS DE 530px O MENOS
   ============================================================ */

/* ============================================================
   1. HEADER RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-header-main {
        padding: 8px 12px;
    }
    
    .product-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    
    .brand-link {
        justify-content: center;
    }
    
    .product-brand {
        font-size: 20px;
        justify-content: center;
    }
    
    .product-brand .brand-tagline {
        font-size: 8px;
        margin-left: 4px;
    }
    
    .product-header-nav {
        justify-content: center;
        gap: 4px;
        flex-wrap: wrap;
    }
    
    .product-header-nav a {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .product-header-nav .btn-login {
        padding: 4px 10px;
        font-size: 10px;
    }
    
    .product-lang-switcher a {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    /* Ocultar texto de enlaces en móviles, mostrar solo íconos */
    .product-header-nav a .nav-text {
        display: none;
    }
    
    .product-header-nav a i {
        font-size: 14px;
    }
    
    .bag-badge {
        font-size: 1rem;
        padding: 4px 8px;
    }
    
    .bag-badge .bag-count {
        font-size: 9px;
        min-width: 16px;
        height: 16px;
    }
    
    .theme-toggle {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
        padding: 4px 6px;
    }
}


/* ============================================================
   2. PRODUCT CONTAINER RESPONSIVE - Dos columnas
   ============================================================ */
@media (max-width: 530px) {
    .product-container {
        padding: 0 8px;
        gap: 16px;
        margin: 12px auto 24px;
        overflow: hidden;
        width: 100%;
        /* grid-template-columns ya se cambió en el media query de 1024px */
        /* Solo ajustamos padding y gap en pantallas más pequeñas */
    }
}

/* ============================================================
   3. BREADCRUMB RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-breadcrumb {
        padding: 0 12px;
        font-size: 10px;
        margin-top: 10px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .product-breadcrumb .separator {
        margin: 0 4px;
    }
    
    .product-breadcrumb a,
    .product-breadcrumb .current {
        font-size: 10px;
    }
}
/* ============================================================
   4. IMAGEN Y THUMBNAILS RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-image-wrapper {
        padding: 12px;
        border-radius: 12px;
    }
    
    .product-image-wrapper img {
        max-height: 280px;
    }
    
    .product-image-wrapper .product-badge {
        font-size: 9px;
        padding: 3px 10px;
        top: 10px;
        left: 10px;
    }
    
    .product-thumbnails .thumb {
        width: 56px;
        height: 56px;
        border-radius: 8px;
    }
}
/* ============================================================
   5. TÍTULO Y PRECIO RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-title {
        font-size: 22px;
        line-height: 1.2;
    }
    
    .product-price {
        font-size: 24px;
        gap: 6px;
    }
    
    .product-price .currency {
        font-size: 14px;
    }
    
    .product-price .compare-at {
        font-size: 14px;
        margin-left: 6px;
    }
    
    .product-category {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
}
/* ============================================================
   6. DESCRIPCIÓN Y FEATURES RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-description {
        font-size: 13px;
        line-height: 1.6;
        padding: 0 2px;
        word-break: break-word;
        max-width: 100%;
        overflow: hidden;
    }
    
    .product-features li {
        padding: 6px 0;
        font-size: 13px;
        gap: 8px;
        word-break: break-word;
    }
    
    .product-features li .feature-icon {
        width: 16px;
        font-size: 12px;
        flex-shrink: 0;
    }
}
/* ============================================================
   7. PORCIONES (SERVINGS) RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-servings .servingElement {
        font-size: 0.8rem !important;
    }
    
    .product-servings .serving-price-top {
        font-size: 0.75rem !important;
    }
    
    .product-servings #containerInfoDisplay {
        font-size: 0.7rem !important;
    }
}
/* ============================================================
   8. OPCIONES DE COMPRA RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .purchase-options {
        padding: 10px;
        border-radius: 10px;
        margin: 4px 0;
    }
    
    .purchase-option {
        padding: 10px 12px;
        border-radius: 8px;
        margin-bottom: 4px;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .purchase-option .label {
        font-size: 12px;
        margin-left: 8px;
    }
    
    .purchase-option .option-title {
        font-size: 13px;
    }
    
    .purchase-option .price {
        font-size: 15px;
    }
    
    .purchase-option .discounted-price {
        font-size: 18px;
    }
    
    .purchase-option .original-price {
        font-size: 11px;
    }
    
    .purchase-option .discount-badge {
        font-size: 9px;
        padding: 1px 6px;
    }
    
    .purchase-option .radio {
        width: 16px;
        height: 16px;
    }
    
    .purchase-option.active .radio::after {
        width: 8px;
        height: 8px;
    }
}

/* ============================================================
   9. BOTÓN AÑADIR AL CARRITO RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .btn-add-to-cart {
        padding: 12px 12px;
        font-size: 13px;
        border-radius: 10px;
        gap: 8px;
        min-height: 44px; /* ← ALTURA MÍNIMA PARA TOCAR */
    }
    
    .btn-add-to-cart .price-inline {
        font-size: 11px;
    }
    
    .btn-add-to-cart i {
        font-size: 14px;
    }
}
/* ============================================================
   10. VARIANTES RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .variant-selector-container {
        margin: 8px 0 4px 0;
        padding: 2px 0;
    }
    
    .variant-selector-label {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .variant-selector-buttons {
        gap: 6px;
    }
    
    .variant-selector-buttons .variant-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 50px;
        gap: 6px;
        border-radius: 8px;
        flex: 1 0 auto;
    }
    
    .variant-selector-buttons .variant-btn img {
        width: 24px;
        height: 24px;
        border-radius: 4px;
    }
}
/* ============================================================
   11. TRUST BADGES Y ACCIONES RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .trust-badges {
        gap: 10px;
        margin: 4px 0;
    }
    
    .trust-badge {
        font-size: 10px;
        gap: 4px;
    }
    
    .trust-badge i {
        font-size: 12px;
    }
    
    .product-actions {
        flex-direction: column;
        gap: 8px;
        margin: 4px 0;
    }
    
    .product-actions .btn-secondary {
        padding: 8px 14px;
        font-size: 11px;
        border-radius: 8px;
    }
}
/* ============================================================
   12. PRODUCT INFO COLUMN RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-info-column {
        gap: 10px;
        padding: 0 2px; /* ← PADDING MÍNIMO */
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
}

/* ============================================================
   13. TAGS RESPONSIVE (VERSIÓN 2.7 - MEJORADA)
   ============================================================ */

/**
 * ============================================================
 * Tags Responsive - Ajustes para pantallas móviles
 * ============================================================
 * 
 * En dispositivos móviles (<= 530px), las etiquetas se reducen
 * para aprovechar mejor el espacio disponible:
 * - Tamaño de fuente: 11px → 9px
 * - Padding: 4px 14px → 3px 10px
 * - Border-radius: 20px → 14px
 * - Gap entre etiquetas: 8px → 4px
 * - Margen: 12px 0 16px → 4px 0 8px
 * 
 * Esto asegura que las etiquetas no ocupen demasiado espacio
 * en pantallas pequeñas y mantengan una apariencia limpia.
 */
@media (max-width: 530px) {
    .product-tags-container {
        gap: 4px;
        margin: 4px 0 8px 0;
    }
    
    .product-tag {
        font-size: 9px;
        padding: 3px 10px;
        border-radius: 14px;
    }
}
/* ============================================================
   14. RATING RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .product-rating .stars {
        font-size: 13px;
    }
    
    .product-rating .count {
        font-size: 11px;
    }
}
/* ============================================================
   15. STOCK RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    #productStockDisplay {
        font-size: 11px !important;
    }
}
/* ============================================================
   16. TOAST Y BAG DROPDOWN RESPONSIVE
   ============================================================ */
@media (max-width: 530px) {
    .toast-notification {
        padding: 10px 18px;
        font-size: 12px;
        border-radius: 10px;
        bottom: 20px;
        max-width: 95vw;
        gap: 10px;
    }
    
    .toast-notification .toast-icon {
        font-size: 1.2rem;
    }
    
    .bag-dropdown {
        width: 300px;
        max-width: 92vw;
        padding: 12px;
        right: -10px;
    }
    
    .bag-dropdown .bag-empty {
        padding: 16px 12px;
    }
    
    .bag-dropdown .bag-empty i {
        font-size: 1.5rem;
    }
    
    .bag-total-amount {
        font-size: 18px;
    }
    
    .btn-checkout {
        font-size: 12px;
        padding: 10px;
    }
}



/* ============================================================
   FAQ SECTION - ACORDEÓN CON ANIMACIÓN
   ============================================================ */
.faq-section {
    max-width: var(--max-width, 1200px);
    margin: 40px auto 60px;
    padding: 0 var(--container-padding, 20px);
}

.faq-section h2 {
    font-family: var(--font-primary, 'Anton', sans-serif);
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    text-align: left;
    color: var(--color-black, #000000);
}

.dark .faq-section h2 {
    color: var(--color-grey-800, #F3F4F6);
}

/* Cada item del FAQ */
.faq-item {
    background: var(--color-white, #FEFEFE);
    border-radius: var(--radius-md, 12px);
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--color-grey-200, #EDEDED);
    transition: all var(--transition-normal, 0.3s ease);
}

.dark .faq-item {
    background: var(--color-grey-100, #1F2937);
    border-color: var(--color-grey-200, #374151);
}

.faq-item:hover {
    border-color: var(--color-blue, #0000FF);
}

/* Pregunta - clickeable */
.faq-item .question {
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-black, #000000);
    background: var(--color-white, #FEFEFE);
    transition: background var(--transition-fast, 0.15s ease);
    user-select: none;
    font-family: var(--font-body, 'Helvetica World', Helvetica, Arial, sans-serif);
}

.dark .faq-item .question {
    background: var(--color-grey-100, #1F2937);
    color: var(--color-grey-800, #F3F4F6);
}

.faq-item .question:hover {
    background: var(--color-warm-100, #F6F5F2);
}

.dark .faq-item .question:hover {
    background: var(--color-grey-200, #374151);
}

.faq-item .question.active {
    background: rgba(0, 0, 255, 0.04);
    color: var(--color-blue, #0000FF);
}

.dark .faq-item .question.active {
    background: rgba(0, 0, 255, 0.12);
    color: var(--color-blue, #0000FF);
}

/* Icono de flecha con animación */
.faq-item .question .icon {
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform var(--transition-normal, 0.3s ease);
}

.faq-item .question .icon i {
    font-size: 14px;
    color: var(--color-grey-500, #888888);
    transition: all var(--transition-normal, 0.3s ease);
    display: inline-block;
}

.dark .faq-item .question .icon i {
    color: var(--color-grey-500, #9CA3AF);
}

.faq-item .question.active .icon i {
    color: var(--color-blue, #0000FF);
}

/* Respuesta - colapsable con animación suave */
.faq-item .answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    background: var(--color-white, #FEFEFE);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s ease;
    color: var(--color-grey-600, #666666);
    font-size: 14px;
    line-height: 1.7;
    font-family: var(--font-body, 'Helvetica World', Helvetica, Arial, sans-serif);
}

.dark .faq-item .answer {
    background: var(--color-grey-100, #1F2937);
    color: var(--color-grey-500, #9CA3AF);
}

.faq-item .answer.open {
    max-height: 500px; /* Suficiente para la mayoría de respuestas */
    padding: 16px 20px 20px 20px;
}

/* ============================================================
   FAQ - RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .faq-section h2 {
        font-size: 22px;
        margin-bottom: 18px;
    }
    
    .faq-item .question {
        font-size: 13px;
        padding: 14px 16px;
    }
    
    .faq-item .answer {
        font-size: 13px;
        padding: 0 16px;
    }
    
    .faq-item .answer.open {
        padding: 14px 16px 18px 16px;
    }
}

@media (max-width: 530px) {
    .faq-section {
        margin: 24px auto 40px;
        padding: 0 12px;
    }
    
    .faq-section h2 {
        font-size: 18px;
        margin-bottom: 14px;
    }
    
    .faq-item .question {
        font-size: 12px;
        padding: 12px 14px;
    }
    
    .faq-item .question .icon i {
        font-size: 12px;
    }
    
    .faq-item .answer {
        font-size: 12px;
        padding: 0 14px;
    }
    
    .faq-item .answer.open {
        padding: 12px 14px 16px 14px;
    }
}
/* ============================================================
   ALPINE.JS - x-cloak para acordeones
   ============================================================ */
[x-cloak] {
    display: none !important;
}

/* ============================================================
   NOTA: Los estilos del HEADER, CARRITO y BÚSQUEDA
   ============================================================ */
/**
 * 🔥 IMPORTANTE:
 * Los estilos del header (product-header-main, product-header-nav,
 * bag-dropdown, search-panel, etc.) están en header-styles.css
 * 
 * NO DUPLICAR ESTOS ESTILOS AQUÍ para evitar conflictos.
 * 
 * Este archivo (product-styles.css) solo contiene estilos
 * específicos de la página de producto:
 * - Layout de producto (product-container)
 * - Imagen y thumbnails
 * - Título, precio, descripción
 * - Características (features)
 * - ✅ Tags y etiquetas (NUEVO VERSIÓN 2.7)
 * - Opciones de compra (purchase-options)
 * - Botones de acción
 * - Secciones (Build Your Stack, FAQ, etc.)
 * - Responsive de la página de producto
 */