/* ==========================================================================
   VARIABLES DE MARCA (Fáciles de cambiar para una estética de lujo)
   ========================================================================== */
:root {
    --primary-black: #000000;
    --luxury-grey: #666666; /* Gris para textos secundarios */
    --light-bg: #fdfdfd;   /* Fondo claro sutil */
    --border-color: #eeeeee; /* Color de borde suave */
    --transition-speed: 0.4s; /* Velocidad de transiciones base */
    --transition-timing: cubic-bezier(0.25, 1, 0.5, 1); /* Curva de transición suave */
    --font-spacing-wide: 0.15em; /* Espaciado de letras general */
    --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fuente principal */
}

/* ==========================================================================
   1. RESET Y OCULTAMIENTO DE ELEMENTOS NATIVOS DE WP
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Previene scroll horizontal */
    background: #fff;
    font-family: var(--font-family-base); /* Aplica la fuente base */
    -webkit-font-smoothing: antialiased; /* Suavizado de fuentes para Webkit */
    -moz-osx-font-smoothing: grayscale; /* Suavizado de fuentes para Firefox */
}

/* Ocultar elementos estándar de WordPress/Gutenberg que no queremos mostrar */
.wp-site-blocks,
header.wp-block-template-part,
footer.wp-block-template-part,
.site-footer,
.site-header,
.site-title,
.wp-block-site-title {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important; /* Asegura que no ocupen espacio */
}

/* ==========================================================================
   2. ESTRUCTURA GLOBAL: CONTENEDORES Y MAQUETACIÓN
   ========================================================================== */
/* Contenedor principal que se extiende a todo el ancho de la ventana */
#nz-store-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #fff;
    min-height: 100vh; /* Asegura que ocupe al menos toda la altura */
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto */
}

/* Contenedor centralizado para el contenido */
.nz-container {
    max-width: 1440px; /* Ancho máximo del contenido */
    margin: 0 auto;    /* Centra el contenedor */
    padding: 0 5%;     /* Padding lateral para el contenido */
    box-sizing: border-box;
}

/* ==========================================================================
   3. CABECERA Y NAVEGACIÓN DE LA TIENDA (Vendor Specific)
   ========================================================================== */
.vendor-site-header {
    padding: 60px 0;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    background: #fff;
}

.nz-nav {
    display: flex;
    justify-content: center;
    gap: 50px; /* Espacio entre los elementos del menú */
    margin-top: 30px;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.nz-nav a {
    text-decoration: none;
    color: var(--luxury-grey);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 3px;
    transition: color var(--transition-speed) var(--transition-timing);
    padding: 5px 0; /* Pequeño padding para área de clic */
}

.nz-nav a:hover,
.nz-nav a:focus { /* Añadido focus para accesibilidad */
    color: var(--primary-black);
}

/* ==========================================================================
   4. SECCIÓN HERO (Banner principal de la tienda)
   ========================================================================== */
.nz-hero {
    width: 100%;
    background: var(--light-bg);
    padding: 180px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.nz-hero h1 {
    font-size: clamp(3rem, 10vw, 7rem); /* Tamaño responsivo para el título */
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: -4px;
    margin: 0;
    line-height: 0.9;
    color: var(--primary-black);
}

.hero-subtitle {
    letter-spacing: 12px;
    color: #bbb;
    text-transform: uppercase;
    font-size: 10px;
    margin-top: 25px;
    font-weight: 400;
}

/* ==========================================================================
   5. GRID DE PRODUCTOS (WooCommerce) - TAMAÑO FIJO Y UNIFORME
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    /* Forzamos 3 columnas fijas por defecto para mantener el tamaño */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 80px 40px !important; 
    justify-content: center !important; 
    /* El ancho máximo del grid controla qué tan grandes se ven los productos */
    max-width: 1200px !important; 
    margin: 100px auto !important; 
    padding: 0 !important;
    list-style: none !important;
}

/* Si solo hay 1 o 2 productos, evitamos que se estiren al 100% */
.woocommerce ul.products li.product {
    width: 100% !important;
    max-width: 380px !important; /* El tamaño máximo real de cada tarjeta */
    margin: 0 auto !important;   /* Centra la tarjeta en su celda */
    display: flex !important;
    flex-direction: column !important;
}

/* Imagen del producto: El corazón de la uniformidad */
.woocommerce ul.products li.product img {
    width: 100% !important;
    /* Altura fija obligatoria para que todas las tarjetas midan lo mismo */
    height: 480px !important; 
    object-fit: cover !important; 
    object-position: center !important;
    margin-bottom: 30px !important;
    background: #fcfcfc;
    transition: transform var(--transition-speed) var(--transition-timing);
}

/* RESPONSIVE AJUSTADO PARA MANTENER TAMAÑO */
@media (max-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important; /* Bajamos a 2 columnas */
        max-width: 900px !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important; /* Una sola columna en móvil */
        max-width: 400px !important;
    }
    .woocommerce ul.products li.product img {
        height: 400px !important; /* Un poco más pequeña en móvil */
    }
}

/* ==========================================================================
   6. TEXTOS Y BOTÓN "AÑADIR AL CARRITO"
   ========================================================================== */
/* Título del producto */
.woocommerce-loop-product__title {
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: var(--font-spacing-wide) !important;
    margin-bottom: 10px !important; /* Espacio consistente */
    color: var(--primary-black);
    line-height: 1.3;
}

/* Precio del producto */
.price {
    font-size: 1.2rem !important; /* Ajustado ligeramente para balance */
    color: var(--luxury-grey) !important;
    margin-bottom: 30px !important; /* Espacio para separar del botón */
    font-weight: 400;
}

/* Botón "Añadir al Carrito" (Estilo minimalista y de lujo) */
.add_to_cart_button {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 !important; /* Padding uniforme */
    background: var(--primary-black) !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 12px !important;
    font-weight: 600;
    border: none !important;
    border-radius: 0 !important; /* Bordes rectos para un look moderno */
    transition: all var(--transition-speed) var(--transition-timing);
    cursor: pointer;
    box-sizing: border-box; /* Importante para el padding */
    text-align: center; /* Asegura que el texto esté centrado */
}

.add_to_cart_button:hover,
.add_to_cart_button:focus {
    background: #333 !important; /* Un gris más oscuro al pasar el ratón */
    letter-spacing: 7px; /* Efecto de expansión sutil */
    outline: none; /* Elimina el borde de foco por defecto */
}

/* Animaciones de WooCommerce para el botón de añadir al carrito */
.add_to_cart_button.loading {
    opacity: 0.7;
    pointer-events: none; /* Deshabilita clics mientras carga */
}

.add_to_cart_button.added::after {
    content: ' ✓';
    margin-left: 10px;
    font-size: 1.1em; /* Un poco más grande para el tick */
}

/* ==========================================================================
   7. RESPONSIVE DESIGN - Adaptación a diferentes tamaños de pantalla
   ========================================================================== */
/* Tabletas grandes y escritorios pequeños */
@media (max-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Más columnas pero más pequeñas */
        gap: 60px 30px !important;
        margin: 80px auto !important;
    }
    .woocommerce ul.products li.product img {
        height: 380px !important; /* Ajusta la altura de la imagen */
    }
    .nz-hero { padding: 150px 0; }
    .nz-hero h1 { font-size: clamp(3rem, 8vw, 6rem); }
}

/* Tabletas y móviles grandes */
@media (max-width: 768px) {
    .nz-container { padding: 0 4%; } /* Ajusta el padding en pantallas más pequeñas */

    .vendor-site-header { padding: 40px 0; }
    .nz-nav { gap: 25px; margin-top: 20px; }

    .nz-hero { padding: 100px 0; }
    .nz-hero h1 { letter-spacing: -2px; }
    .hero-subtitle { letter-spacing: 8px; margin-top: 20px; }

    .woocommerce ul.products {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; /* Dos columnas más pequeñas */
        gap: 50px 20px !important;
        margin: 60px auto !important;
    }
    .woocommerce ul.products li.product img {
        height: 320px !important; /* Altura de imagen para móvil */
        margin-bottom: 20px !important;
    }
    .woocommerce-loop-product__title { font-size: 1.2rem !important; }
    .price { margin-bottom: 25px !important; }
    .add_to_cart_button {
        padding: 18px 0 !important;
        font-size: 11px !important;
        letter-spacing: 4px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .nz-container { padding: 0 3%; }
    .vendor-site-header { padding: 30px 0; }
    .nz-nav {
        flex-direction: column; /* Menú vertical en móviles muy pequeños */
        gap: 15px;
    }
    .nz-hero { padding: 80px 0; }
    .nz-hero h1 { font-size: clamp(2rem, 12vw, 4rem); letter-spacing: -1px; }
    .hero-subtitle { letter-spacing: 5px; font-size: 9px; }

    .woocommerce ul.products {
        grid-template-columns: 1fr !important; /* Una sola columna en móviles */
        gap: 40px 0 !important;
        margin: 40px auto !important;
    }
    .woocommerce ul.products li.product img {
        height: 280px !important;
        margin-bottom: 15px !important;
    }
    .woocommerce-loop-product__title { font-size: 1.1rem !important; }
    .price { font-size: 1.1rem !important; margin-bottom: 20px !important; }
    .add_to_cart_button {
        padding: 15px 0 !important;
        letter-spacing: 3px;
    }
}

/* Corrección para WooCommerce y CSS Grid: Evita que ::before ocupe la primera celda */
.woocommerce ul.products::before {
    content: none !important; /* Elimina el contenido del pseudo-elemento */
    display: none !important; /* Asegura que no ocupe espacio */
}

/* También es buena práctica aplicar lo mismo al ::after, aunque no sea la causa de este problema */
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}