/*
Theme Name: Carz
Theme URI: https://themewp.com/carz
Description: Tema Premium Neobrutalista para Tienda de Autopartes - Chocolopas.com
Version: 1.0.0
Author: Gemini Custom Studio
Text Domain: carz
*/

/* ==========================================================================
   1. RESETS & BASES NEOBRUTALISTAS (Alto Contraste y Estructura Industrial)
   ========================================================================== */
:root {
    --nb-orange: #FF6B00;    /* Naranja Intenso de tu Logo */
    --nb-black: #000000;     /* Negro Absoluto */
    --nb-white: #FFFFFF;     /* Blanco Puro */
    --nb-gray: #F3F3F3;      /* Gris Técnico de Contraste */
    --nb-border-thick: 4px solid #000000;
    --nb-border-thin: 2px solid #000000;
    --nb-shadow: 4px 4px 0px #000000;
    --nb-shadow-lg: 8px 8px 0px #000000;
    --nb-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

body {
    background-color: var(--nb-gray) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-heading);
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

/* Selección de texto Neobrutalista */
::-moz-selection { background: var(--nb-orange); color: var(--nb-black); }
::selection { background: var(--nb-orange); color: var(--nb-black); }

/* Tipografía Audaz y Compacta */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nb-font-heading) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--nb-black) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin-bottom: 0.5em !important;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem) !important; }
h2 { font-size: clamp(2rem, 4vw, 3rem) !important; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem) !important; }

p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

/* Enlaces globales */
a {
    color: var(--nb-black);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    transition: all 0.15s ease;
}
a:hover {
    background-color: var(--nb-orange);
    color: var(--nb-black);
    text-decoration: none;
}

/* ==========================================================================
   2. ELEMENTOS NATIVOS DE WORDPRESS & GUTENBERG ESTILO PROPUESTA
   ========================================================================== */

/* Bloque de Grupo o Contenedor estándar (wp-block-group) */
.wp-block-group {
    background: var(--nb-white);
    border: var(--nb-border-thick);
    box-shadow: var(--nb-shadow);
    padding: 2.5rem !important;
    margin-bottom: 2rem !important;
}

/* Botones Nativos de Gutenberg (wp-block-button) */
.wp-block-button__link {
    background-color: var(--nb-orange) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-heading) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border: var(--nb-border-thick) !important;
    border-radius: 0px !important; /* Totalmente rígido */
    box-shadow: var(--nb-shadow) !important;
    padding: 1rem 2rem !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.05em !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    cursor: pointer;
    display: inline-block;
}

.wp-block-button__link:hover, 
.wp-block-button__link:focus {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0px #000000 !important;
    background-color: var(--nb-white) !important;
}

.wp-block-button__link:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}

/* Imágenes con estética de poster automotriz */
.wp-block-image img {
    border: var(--nb-border-thick) !important;
    box-shadow: var(--nb-shadow) !important;
    border-radius: 0px !important;
    filter: grayscale(10%) contrast(110%);
}

/* Tarjetas de Productos de WooCommerce (Grid de Bloques) */
.products .product, 
.wc-block-grid__product {
    background: var(--nb-white) !important;
    border: var(--nb-border-thick) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 1.5rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.products .product:hover,
.wc-block-grid__product:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
}

/* ==========================================================================
   3. CLASES UTILITARIAS PERSONALIZADAS (Para maquetar en Gutenberg)
   ========================================================================== */

/* Fondos de Alto Contraste */
.bg-nb-orange { background-color: var(--nb-orange) !important; }
.bg-nb-black  { background-color: var(--nb-black) !important; color: var(--nb-white) !important; }
.bg-nb-white  { background-color: var(--nb-white) !important; }
.bg-nb-gray   { background-color: var(--nb-gray) !important; }

/* Contenedores Premium Especiales (Efecto Hero de la propuesta) */
.nb-hero-card {
    background: var(--nb-white) !important;
    border: var(--nb-border-thick) !important;
    box-shadow: var(--nb-shadow-lg) !important;
    padding: 4rem 3rem !important;
    position: relative;
}

.nb-badge {
    background: var(--nb-black) !important;
    color: var(--nb-orange) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 0.4rem 1rem !important;
    border: var(--nb-border-thin) !important;
    display: inline-block;
    font-size: 0.9rem !important;
}

/* Grid Industrial Alternado */
.nb-grid-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0px !important; /* Pegados intencionalmente con bordes cruzados */
    border: var(--nb-border-thick);
    background: var(--nb-black);
}

.nb-grid-split > * {
    background: var(--nb-white);
    padding: 3rem !important;
    border: 2px solid var(--nb-black);
}

/* Etiquetas e inputs de formularios directos (Buscador de Autopartes) */
input[type="text"], 
input[type="search"], 
select {
    border: var(--nb-border-thick) !important;
    background: var(--nb-white) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-heading) !important;
    font-weight: 700 !important;
    padding: 1rem !important;
    border-radius: 0px !important;
    font-size: 1.1rem !important;
    box-shadow: 3px 3px 0px #000000 !important;
}

input[type="text"]:focus, 
input[type="search"]:focus {
    outline: none !important;
    background: var(--nb-gray) !important;
    box-shadow: var(--nb-shadow) !important;
}

/* Footer / Header audaces */
.nb-header, .nb-footer {
    border-bottom: var(--nb-border-thick) !important;
    background-color: var(--nb-black) !important;
    color: var(--nb-white) !important;
    padding: 2rem !important;
}

.nb-header a, .nb-footer a {
    color: var(--nb-white) !important;
}