/*
Theme Name:     Kadence Child
Theme URI:      https://kadencewp.com/
Description:    Tema hijo de Kadence para Metacrilato Store Local
Author:         Antigravity / Deepmind
Author URI:     https://www.metacrilato.store
Template:       kadence
Version:        1.0.0
Text Domain:    kadence-child
*/

/* ==========================================================================
   SELECTOR CORTE A MEDIDA / PLANCHAS DEL CATÁLOGO (28-09-2026)
   Un solo control en forma de píldora: contenedor gris claro, la opción
   actual en píldora negra con texto blanco (como los botones) y la otra solo
   texto oscuro. Son enlaces reales (cada modalidad es su página). Colores,
   radio y letra: Apariencia.
   ========================================================================== */
.metacrilato-shop-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    margin: 6px auto 14px;
    background: var(--mc-borde, #e2e8f0);
    border: 0;
    border-radius: var(--mc-radio-pildora);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.metacrilato-shop-tabs .shop-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 22px;
    margin: 0;
    border: 0;
    border-radius: var(--mc-radio-pildora);
    background: transparent;
    box-shadow: none;
    color: var(--mc-texto);
    font-size: var(--mc-fs-compacto);
    font-weight: var(--mc-peso-fuerte);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.metacrilato-shop-tabs .shop-tab-btn:hover { color: var(--mc-texto); background: rgba(255, 255, 255, .55); }
.metacrilato-shop-tabs .shop-tab-btn.active,
.metacrilato-shop-tabs .shop-tab-btn.active:hover {
    background: var(--mc-boton);
    color: var(--mc-boton-texto);
    cursor: default;
}
.metacrilato-shop-tabs .shop-tab-btn:focus-visible { outline: 2px solid var(--mc-enlace); outline-offset: 2px; }

/* Transiciones de Grid de Productos */
ul.products {
    transition: opacity 0.2s ease-in-out;
}

/* 6 Columns grid on Desktop */
@media (min-width: 1025px) {
    ul.products.grid-lg-col-3 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
    }

    .archive.post-type-archive-product .content-container,
    .archive.tax-product_cat .content-container,
    .archive.tax-product_tag .content-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Spacing and Utilities Cleanup */
.kadence-shop-top-row {
    display: none !important;
}

/* Reduce vertical padding in the content container on archive and single product pages */
.archive.post-type-archive-product .content-container,
.archive.tax-product_cat .content-container,
.archive.tax-product_tag .content-container,
.single-product .content-container {
    padding-top: 10px;
}
.single-product .content-area {
    margin-top: 0;
}

/* Product Card relative container and square aspect ratio.
   Sin borde ni fondo propio: los SVG se fusionan con la foto
   de fondo compartida de ul.products vía mix-blend-mode. */
ul.products li.product {
    position: relative;
    aspect-ratio: 1 / 1 !important; /* completely square */
    height: auto;
    padding: 0;
    overflow: visible;
    border-radius: var(--mc-radio-bento);
    border: none;
    background-color: transparent;
    box-shadow: none;
}

/* Image Link full cover background */
ul.products li.product a.woocommerce-loop-image-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* z-index: auto (sin valor propio) a propósito: un z-index explícito
       aquí crearía su propio contexto de apilamiento y aislaría al SVG
       hijo, impidiendo que su mix-blend-mode se funda con el fondo
       compartido de ul.products. El orden visual no se ve afectado:
       .product-details sigue por delante al tener z-index:10 explícito. */
    z-index: auto !important;
    display: block !important;
    background-color: transparent !important;
}

ul.products li.product a.woocommerce-loop-image-link img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

ul.products li.product:hover a.woocommerce-loop-image-link img {
    transform: scale(1.06) !important;
}

/* Text Details Positioned Absolutely */
ul.products li.product .product-details {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background: transparent !important;
}

/* Default details text styling - Pure Black (for light backgrounds) */
ul.products li.product .product-details h2.woocommerce-loop-product__title,
ul.products li.product .product-details h2.woocommerce-loop-product__title a,
ul.products li.product .product-details .metacrilato-loop-subtitle,
ul.products li.product .product-details .metacrilato-loop-subtitle p,
ul.products li.product .product-details .price,
ul.products li.product .product-details .price .amount {
    color: var(--mc-texto) !important;
    text-shadow: none !important;
}

ul.products li.product .product-details h2.woocommerce-loop-product__title {
    font-size: var(--mc-fs-compacto) !important;
    font-weight: var(--mc-peso-fuerte) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.2 !important;
}

ul.products li.product .product-details .metacrilato-loop-subtitle {
    font-size: var(--mc-fs-mini) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.25 !important;
    opacity: 0.85 !important;
}

ul.products li.product .product-details .metacrilato-loop-subtitle p {
    margin: 0 !important;
    padding: 0 !important;
}

ul.products li.product .product-details .price {
    font-size: var(--mc-fs-compacto) !important;
    font-weight: var(--mc-peso-fuerte) !important;
    margin: 0 !important;
    display: block !important;
}

/* Dark Background Override for Contrast - Pure White (material-dark-bg) */
ul.products li.product.material-dark-bg .product-details h2.woocommerce-loop-product__title,
ul.products li.product.material-dark-bg .product-details h2.woocommerce-loop-product__title a,
ul.products li.product.material-dark-bg .product-details .metacrilato-loop-subtitle,
ul.products li.product.material-dark-bg .product-details .metacrilato-loop-subtitle p,
ul.products li.product.material-dark-bg .product-details .price,
ul.products li.product.material-dark-bg .product-details .price .amount {
    color: var(--mc-boton-texto) !important;
    text-shadow: none !important;
}

/* Hide unwanted loop elements (excerpt, stars, buttons) */
ul.products li.product .product-excerpt,
ul.products li.product .star-rating,
ul.products li.product .product-action-wrap {
    display: none !important;
}

/* Force 100% viewport width layout for single-product configurator pages */
.single-product .content-container.site-container,
.single-product #primary,
.single-product div.product {
    max-width: 100%;
    width: 100%;
}
.single-product .content-container.site-container {
    padding-left: 20px;
    padding-right: 20px;
}