/* =========================================================================
   Kicks Vault - Identidad visual
   Se carga desde wp-content/mu-plugins/kv-estilos.php
   =========================================================================
   Paleta por defecto: monocromo con acento rojo.
   Se puede previsualizar otra anadiendo ?paleta=mono o ?paleta=lima a
   cualquier URL del sitio; solo lo ve quien lleva ese parametro.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --kv-tinta:     #111111;  /* texto y titulares */
    --kv-gris:      #6B7280;  /* texto secundario */
    --kv-borde:     #E5E7EB;
    --kv-humo:      #F6F6F7;  /* fondos suaves */
    /* El rojo es acento, no relleno: aparece en enlaces, hover, item activo
       y subrayado. Los botones van en negro porque en una rejilla de 12
       productos el rojo se repite demasiadas veces y chilla. */
    --kv-acento:    #E11D2E;
    --kv-acento-osc:#B3121F;
    --kv-accion:    #111111;  /* fondo de botones */
    --kv-accion-hov:#3A3A3A;  /* botones al pasar el mouse */
    --kv-cabecera:  #FFFFFF;
    --kv-pie:       #111111;
    --kv-alerta:    #B45309;  /* agotado */
}

/* --- Tipografia ------------------------------------------------------- */
body, .ast-container, button, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--kv-tinta);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .entry-title,
.woocommerce-loop-product__title, .product_title {
    font-family: 'Archivo', 'Inter', sans-serif;
    color: var(--kv-tinta);
    letter-spacing: -0.02em;
    line-height: 1.12;
}
h1, .entry-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }

/* --- Cabecera ---------------------------------------------------------
   Astra apila tres barras. Aqui iban a dos tonos (blanca + #f3f3f3) y el
   texto del menu era blanco sobre gris claro: contraste 1.05, ilegible. */
.ast-above-header-bar,
.ast-primary-header-bar,
.ast-below-header-bar,
.site-header,
.ast-header-break-point .ast-mobile-header-wrap .ast-primary-header-bar {
    background-color: var(--kv-cabecera) !important;
    background-image: none !important;
}
.ast-primary-header-bar,
.ast-below-header-bar { border-bottom: 1px solid var(--kv-borde); }
.site-header { box-shadow: 0 1px 10px rgba(17, 17, 17, .05); }

.ast-builder-menu .main-header-menu > .menu-item > .menu-link {
    color: var(--kv-tinta) !important;
    font-family: 'Archivo', sans-serif;
    font-size: .88rem;
    font-weight: 600 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase;
    padding-inline: 1em;
    transition: color .18s ease;
    position: relative;
    white-space: nowrap;
}
.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .current-menu-ancestor > .menu-link {
    color: var(--kv-acento) !important;
}

/* Astra pinta el item de la pagina actual con fondo negro desde su propia
   configuracion. Con el texto en el acento daba 3.97 de contraste, y ademas
   rompia la uniformidad de la barra. Se neutraliza: el item actual se marca
   igual que el hover, con color y subrayado, sin bloque de color. */
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .current-menu-ancestor > .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link:hover {
    background-color: transparent !important;
}

/* Un solo subrayado: se anula el que dibuja Astra para que no salga doble */
body .ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link::before,
body .ast-menu-hover-style-underline > .menu-item > .menu-link::before {
    content: none !important;
    display: none !important;
}
.ast-builder-menu .main-header-menu > .menu-item > .menu-link::after {
    content: '' !important;
    position: absolute;
    left: 50%;
    bottom: .5em;
    transform: translateX(-50%);
    height: 2px;
    width: 0;
    background: var(--kv-acento);
    transition: width .22s ease;
    pointer-events: none;
}
.ast-builder-menu .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-builder-menu .main-header-menu > .current-menu-item > .menu-link::after,
.ast-builder-menu .main-header-menu > .current-menu-ancestor > .menu-link::after {
    width: 62%;
}

/* Desplegables: cuelgan de .ast-builder-menu, no de la barra */
.ast-builder-menu .main-header-menu .sub-menu {
    background-color: #FFFFFF !important;
    border: 1px solid var(--kv-borde);
    border-radius: 10px;
    padding: .35rem;
    box-shadow: 0 16px 36px rgba(17, 17, 17, .13);
    min-width: 210px;
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link {
    color: var(--kv-tinta) !important;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 7px;
    padding: .5rem .8rem;
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link:hover {
    background-color: var(--kv-humo) !important;
    color: var(--kv-acento) !important;
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link::after { display: none !important; }

.ast-site-header-cart a, .ast-search-menu-icon .slide-search a,
.ast-header-account-wrap, .ast-cart-menu-wrap { color: var(--kv-tinta) !important; }
/* El contador del carrito en negro: en rojo saltaba a la vista incluso con
   el carrito vacio, compitiendo con el producto. */
.ast-site-header-cart .count,
.ast-site-header-cart .ast-cart-menu-wrap .count {
    background: var(--kv-accion);
    color: #FFFFFF;
    border-color: transparent;
    font-weight: 700;
}

/* --- Botones ---------------------------------------------------------- */
.wp-block-button__link, .ast-button, .button, button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
    background: var(--kv-accion);
    color: #FFFFFF;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: .78em 1.6em;
    transition: transform .15s ease, background .18s ease;
}
.wp-block-button__link:hover, .button:hover, button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background: var(--kv-accion-hov);
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* En la rejilla, 'Agregar al carrito' es secundario: la foto y el precio son
   lo que decide. Boton en linea, no en bloque de color. */
.woocommerce ul.products li.product .button {
    background: transparent;
    color: var(--kv-tinta);
    border: 1px solid var(--kv-borde);
    font-size: .84rem;
    padding: .58em 1.1em;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--kv-accion);
    color: #FFFFFF;
    border-color: var(--kv-accion);
    transform: none;
}

/* --- Fichas de producto -----------------------------------------------
   Con 5.681 pares muy coloridos, la tarjeta tiene que desaparecer y dejar
   que mande la foto. */
.woocommerce ul.products li.product {
    background: #FFFFFF;
    border: 1px solid var(--kv-borde);
    border-radius: 10px;
    padding: .85rem .85rem 1.1rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(17, 17, 17, .11);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: .95rem;
    font-weight: 600;
    min-height: 2.6em;
}
.woocommerce ul.products li.product .price {
    color: var(--kv-tinta);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}
.woocommerce .astra-shop-summary-wrap .ast-woo-product-category {
    color: var(--kv-gris);
    font-size: .74rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.woocommerce span.out-of-stock,
.woocommerce ul.products li.product .out-of-stock {
    background: var(--kv-alerta);
    color: #FFFFFF;
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: .28em .65em;
}
.woocommerce ul.products li.product .wc-variation-selection-needed,
.woocommerce ul.products li.product a.button + .screen-reader-text { display: none; }

/* --- Ficha de producto ------------------------------------------------- */
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: var(--kv-tinta);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
}
.woocommerce div.product form.cart .variations label {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--kv-gris);
}
/* Los swatches de talla son el control clave con 90 tallas distintas */
.variable-items-wrapper .variable-item {
    border-radius: 6px !important;
    border: 1px solid var(--kv-borde) !important;
    box-shadow: none !important;
    min-width: 46px;
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item:hover {
    border-color: var(--kv-tinta) !important;
    box-shadow: 0 0 0 1px var(--kv-tinta) inset !important;
}
.variable-items-wrapper .variable-item.disabled { opacity: .35; }

/* --- Filtros de catalogo (bloques de WooCommerce) ----------------------
   La tienda usa los filtros de bloques, no los widgets clasicos, asi que las
   clases son wp-block-woocommerce-product-filter-*.

   La barra lateral mide 208px y el contenido util 147px. Los dos campos de
   precio venian con ancho fijo de 60px y fuente de 16px: '$2.097.500' son
   diez caracteres y se cortaban en '$2.07'. */
.wp-block-woocommerce-product-filters h2,
.wp-block-woocommerce-product-filters h3,
.wp-block-woocommerce-product-filters h4 {
    font-family: 'Archivo', sans-serif;
    font-size: .78rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--kv-gris);
    margin: 0 0 .6rem;
}

/* Una sola columna: en 147px no caben dos campos de diez caracteres. La barra
   del rango ocupa su propia fila arriba y los dos importes van debajo. */
.wc-block-product-filter-price-slider__content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .4rem !important;
    align-items: center;
}
/* En vez de pelear con WooCommerce por el numero de columnas, cada hijo ocupa
   todas las que haya. Asi la barra y los dos importes quedan uno debajo de
   otro a ancho completo, sea cual sea la rejilla que defina el bloque. */
.wc-block-product-filter-price-slider__content > * {
    grid-column: 1 / -1 !important;
    width: auto !important;
    min-width: 0 !important;
}
/* Fila explicita para cada uno: el bloque les asigna la misma, y al ocupar
   ambos todas las columnas acababan superpuestos en la misma celda. */
.wc-block-product-filter-price-slider__content
    > .wc-block-product-filter-price-slider__range { grid-row: 1 !important; }
.wc-block-product-filter-price-slider__content
    > .wc-block-product-filter-price-slider__left  { grid-row: 2 !important; }
.wc-block-product-filter-price-slider__content
    > .wc-block-product-filter-price-slider__right { grid-row: 3 !important; }

/* WooCommerce trae .wc-block-product-filter-price-slider .text input[type=text]
   con tres clases de especificidad. Sin el .text intermedio esta regla pierde
   y los importes se quedan en 60px, cortando '$2.097.500' en '$2.07'. */
.wc-block-product-filter-price-slider .text input[type="text"],
.wp-block-woocommerce-product-filter-price .text input[type="text"] {
    width: 100% !important;
    /* El bloque trae un max-width de 60px: sin anularlo, el width:100% no
       sirve de nada y el importe se sigue cortando. */
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: .8rem !important;
    font-variant-numeric: tabular-nums;  /* los digitos no bailan al arrastrar */
    text-align: center;
    padding: .4rem .3rem !important;
    border: 1px solid var(--kv-borde);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--kv-tinta);
}
.wc-block-product-filter-price-slider .text input[type="text"]:focus {
    border-color: var(--kv-tinta);
    outline: 2px solid rgba(17, 17, 17, .12);
}

/* Si aun asi el importe no cabe (moneda sin decimales y siete cifras),
   se apilan uno debajo del otro. */
@media (max-width: 1100px) {
    .wc-block-product-filter-price-slider__content {
        grid-template-columns: 1fr !important;
    }
}

/* Barra y tiradores del rango, en la linea del resto */
.wc-block-product-filter-price-slider .range-bar {
    background: var(--kv-borde);
    height: 3px;
    border-radius: 2px;
}
.wc-block-product-filter-price-slider__range::-webkit-slider-thumb,
.wc-block-product-filter-price-slider input[type="range"]::-webkit-slider-thumb {
    background: #FFFFFF;
    border: 2px solid var(--kv-tinta);
    box-shadow: 0 1px 4px rgba(17, 17, 17, .2);
}

/* Listas de casillas: alto tactil y sin desbordar la columna estrecha */
.wp-block-woocommerce-product-filter-checkbox-list label,
.wc-block-product-filter-checkbox-list__label {
    font-size: .86rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.wp-block-woocommerce-product-filter-checkbox-list li,
.wc-block-product-filter-checkbox-list__item { margin-bottom: .3rem; }

/* Chips de filtros aplicados */
.wc-block-product-filter-removable-chips__item {
    background: var(--kv-humo);
    border: 1px solid var(--kv-borde);
    border-radius: 999px;
    font-size: .78rem;
    padding: .18rem .6rem;
}

/* --- Enlaces, foco y pie ----------------------------------------------- */
a { color: var(--kv-acento); }
a:hover { color: var(--kv-acento-osc); }
:focus-visible { outline: 2px solid var(--kv-acento); outline-offset: 2px; }

.site-footer, .ast-footer-overlay, .site-below-footer-wrap {
    background: var(--kv-pie) !important;
    color: #B9BDC4;
}
.site-footer a, .site-below-footer-wrap a { color: #E5E7EB; }
.site-footer a:hover, .site-below-footer-wrap a:hover { color: var(--kv-acento); }

/* --- Movil -------------------------------------------------------------
   Mismo lenguaje que en escritorio, apilado. Astra deja el menu movil en
   flex horizontal, que es lo que lo descuadra. */
@media (max-width: 921px) {
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-mobile-header-content,
    .ast-mobile-popup-drawer .ast-mobile-popup-inner {
        background-color: var(--kv-cabecera) !important;
    }
    .ast-builder-menu-mobile .main-header-menu,
    .ast-mobile-header-content .main-header-menu,
    #ast-hf-mobile-menu { display: block !important; width: 100%; }

    .ast-builder-menu-mobile .main-header-menu .menu-item,
    #ast-hf-mobile-menu .menu-item {
        display: block !important;
        width: 100%;
        border-bottom: 1px solid var(--kv-borde);
    }
    .ast-builder-menu-mobile .main-header-menu > .menu-item > .menu-link,
    #ast-hf-mobile-menu > .menu-item > .menu-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 52px;
        padding: .8rem 1.15rem;
        font-family: 'Archivo', sans-serif;
        font-size: .92rem;
        font-weight: 600 !important;
        letter-spacing: .045em !important;
        text-transform: uppercase;
        color: var(--kv-tinta) !important;
    }
    .ast-builder-menu-mobile .main-header-menu .sub-menu,
    #ast-hf-mobile-menu .sub-menu {
        background: var(--kv-humo) !important;
        border: none; border-radius: 0; box-shadow: none; padding: 0;
    }
    .ast-builder-menu-mobile .main-header-menu .sub-menu .menu-link,
    #ast-hf-mobile-menu .sub-menu .menu-link {
        min-height: 46px;
        padding: .6rem 1.15rem .6rem 2.1rem;
        font-family: 'Inter', sans-serif;
        font-size: .9rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--kv-gris) !important;
    }
    .ast-builder-menu-mobile .ast-menu-toggle,
    #ast-hf-mobile-menu .ast-menu-toggle { color: var(--kv-acento) !important; }
    .ast-builder-menu-mobile .menu-link::after,
    #ast-hf-mobile-menu .menu-link::after { display: none !important; }

    .woocommerce ul.products li.product { padding: .7rem .7rem .9rem; }
}