

.woocommerce img.kpn-hero-category-product, .woocommerce-page img.kpn-hero-category-product {
    height: 100%;
}


.woocommerce .catalog-breadcrumbs .woocommerce-breadcrumb {
    font-size: 14px;
    padding: 0;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.woocommerce .catalog-breadcrumbs .woocommerce-breadcrumb a {
    color: #ffffff;
}

.kp-cat-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    background: #f3f3f3 no-repeat center/cover;
    background-image: var(--hero-bg);
    margin-bottom: 32px;
}

.kp-cat-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.kp-cat-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding: 40px 0 28px;
    color: #fff;
}

.kp-cat-hero__title {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    margin: 6px 0 10px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.kp-cat-hero__desc {
    max-width: 600px;
    opacity: .95;
}

.woocommerce-breadcrumb {
    color: #fff;
    font-size: 14px;
    margin-bottom: 6px;
}

.woocommerce .wc-columns-container ul.products li.product .woocommerce-loop-category__title {
    font-size: 24px;
}





.woocommerce .wc-columns-container ul.products li.product .woocommerce-loop-category__title  {
    text-transform: lowercase;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-align: center;
}

.woocommerce .wc-columns-container ul.products li.product .woocommerce-loop-category__title::first-letter {
    text-transform: uppercase;
}











.tax-product_cat.woocommerce ul.products li.product .woocommerce-loop-product__title {
    /* margin-top: 0px !important; */
}

.tax-product_cat.woocommerce ul.products li.product .price .from-label.text-caption {
    font-weight: 400 !important;
    font-size: 14px;
}

.tax-product_cat.woocommerce ul.products li.product .price {
    font-weight: 400 !important;
    font-size: 14px;
    margin-top: 8px !important;
}

.woocommerce-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

/* Grid de productos ÃƒÂ¢Ã¢â€šÂ¬Ã…â€œcomo la 2da imagenÃƒÂ¢Ã¢â€šÂ¬Ã‚Â (ajusta a gusto) */

.woocommerce.kpn-archive-products .woocommerce-archive-wrapper .wc-columns-container.wc-columns-3 .products {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

.woocommerce ul.products {
    gap: 24px !important;
    margin-bottom: 0;
}

.woocommerce ul.products li.product {
    padding: 0;
}


.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
}

.woocommerce .wc-columns-container ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 12px 0 6px;
    color: var(--black);
}

.woocommerce .woocommerce-archive-wrapper ul.products li.product.woocommerce-image-align-left a .wc-product-image {
    /* height: fit-content; */
    /* position: relative; */
    /* max-height: 490.66px; */
}

.woocommerce .woocommerce-archive-wrapper ul.products li.product.woocommerce-image-align-left a .wc-product-image img {
    width: 100%;
    max-height: 490.66px;
    object-fit: cover;
}

.woocommerce .woocommerce-archive-wrapper ul.products li.product.woocommerce-image-align-left .wc-product-image {
    display: flex;
    float: none;
    margin: 0;
}

.woocommerce .woocommerce-archive-wrapper ul.products li {
    max-height: 625px !important;
}

.woocommerce .woocommerce-archive-wrapper ul.products li a {
    max-height: 100% !important;
}

/* Ocultar precio tachado por ahora */
.woocommerce ul.products li.product .price del {
    display: none;
}

.woocommerce span.onsale {
    display: none;
}


/* Fitro de productos */

/* Desktop: sidebar fijo */

.kpn-products-main-container {
    display: flex;
    flex-direction: column;
    row-gap: 56px;
}

.kpn-archive-layout {
    display: flex;

}

.kpn-archive-layout__content {
    flex: 1 1 auto;
    min-width: 0;
}

.kpn-filter-controls__filters-btn {
    display: flex;
    column-gap: 16px;
}


.kpn-archive-layout__sidebar {
    flex: 0 0 auto;
    width: 368px;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    left: 0;
    background: #fff;
    transition: max-width .2s ease, max-height .3s ease;
    pointer-events: none;
    opacity: 0;
}

.kpn-archive-layout__sidebar-inner {
    width: 368px;
    min-width: 368px;
    padding-right: 24px;
    border-right: 1px solid #e9e9e9;
}

.kpn-archive-layout.is-open {
    gap: 24px;
}

.kpn-archive-layout.is-open .kpn-archive-layout__sidebar {
    max-width: 400px;
    max-height: 1000px;
    pointer-events: auto;
    width: auto;
    height: auto;
    opacity: 1;
}

.widgettitle {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.woocommerce-widget-layered-nav-list {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.woocommerce .kpn-archive-layout .woocommerce-widget-layered-nav-list li {
    padding: 0px;
    margin: 0px;
    line-height: 26px;
}

.kpn-filter-controls {
    display: flex;
    align-items: center;
    height: 20px;
    gap: 24px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.kpn-filter-controls-icons {
    font-weight: 400;
}

.kpn-filter-controls .kpn-filter-controls-icons__close {
    display: none;
}

.kpn-filter-controls .kpn-filter-controls-icons__open {
    display: inline;
}

.kpn-filter-controls.is-open .kpn-filter-controls-icons__close {
    display: inline;
}

.kpn-filter-controls.is-open .kpn-filter-controls-icons__open {
    display: none;
}


@media (max-width: 768px) {

    .woocommerce .wc-columns-container .wc-product-image {
        aspect-ratio: auto;
        max-height: 200px;
        width: 100%
    }

    .kpn-archive-products.woocommerce .wc-columns-container .wc-product-image {
        max-height: unset;
    }

    .woocommerce.kpn-sub-category-list-products .wc-columns-container .wc-product-image {
        max-height: 240px;
    }

    .woocommerce .kpn-title-description-sub-categories p {
        font-size: 14px;
        font-weight: 500;
    }

    .kpn-products-main-container {
        row-gap: 40px;
    }

    .kpn-archive-layout {
        flex-direction: column;
    }

    .kpn-archive-layout.is-open .kpn-archive-layout__sidebar {
        width: 100%;
        max-width: none;
        position: relative;
    }

    .kpn-archive-layout.is-open .kpn-archive-layout__sidebar {
        width: 100%;
        max-width: none;
        position: relative;
    }

    .espacios-categoria .kpn-archive-layout .kpn-archive-layout__sidebar {
        max-width: none;
        width: 100%;
        max-height: 0;
        transition: max-height .2s ease-in;
    }

    .espacios-categoria .kpn-archive-layout.is-open .kpn-archive-layout__sidebar {
        pointer-events: auto;
        max-height: 500px;
    }


    .kpn-archive-layout__sidebar-inner {
        width: 100%;
        min-width: auto;
        border-right: 0;
        border-bottom: 1px solid #e9e9e9;
    }

    .kpn-filter-controls__filters-btn {
        column-gap: 8px;
    }

    .kpn-filter-controls {
        gap: 16px;
    }

    .woocommerce .wc-columns-container ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
    }

    .tax-product_cat.woocommerce ul.products li.product .price {
        font-size: 12px;
        margin-top: 4px !important;
    }

}

.wpc-filter-title {
    text-transform: uppercase;
}

.fe-checks .wpc-term,
.fe-checks .wpc-filter,
.fe-checks .wpc-filter-item {
    list-style: none;
}

.fe-checks label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-left: 36px;
    cursor: pointer;
    user-select: none;
}

/* Oculta el checkbox nativo pero lo deja accesible */
.fe-checks input[type="checkbox"],
.fe-checks input[type="radio"] {
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    margin: 0;
    opacity: 0;
    /* sigue recibiendo focus/teclado */
    appearance: none;
}

/* Dibuja el CUADRO */
.fe-checks label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background: #F5F5F5;
    /* gris claro del fondo */
    border: 0.381px solid #CACACA;
    /* borde gris */
    box-sizing: border-box;
}

/* Dibuja el TILDE (grueso, negro) */
.fe-checks label::after {
    content: "";
    position: absolute;
    left: 4px;
    /* ajusta posiciÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â³n horizontal */
    top: 25%;
    width: 15px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'> <path d='M14.7104 1.20998C14.6175 1.11625 14.5069 1.04186 14.385 0.991091C14.2632 0.940323 14.1324 0.914185 14.0004 0.914185C13.8684 0.914185 13.7377 0.940323 13.6159 0.991091C13.494 1.04186 13.3834 1.11625 13.2904 1.20998L5.84044 8.66998L2.71044 5.52998C2.61392 5.43674 2.49998 5.36343 2.37512 5.31423C2.25026 5.26502 2.11694 5.24089 1.98276 5.24321C1.84858 5.24553 1.71617 5.27426 1.59309 5.32776C1.47001 5.38125 1.35868 5.45846 1.26544 5.55498C1.1722 5.6515 1.09889 5.76545 1.04968 5.8903C1.00048 6.01516 0.976347 6.14848 0.978669 6.28266C0.98099 6.41684 1.00972 6.54925 1.06321 6.67233C1.1167 6.79541 1.19392 6.90674 1.29044 6.99998L5.13044 10.84C5.2234 10.9337 5.334 11.0081 5.45586 11.0589C5.57772 11.1096 5.70843 11.1358 5.84044 11.1358C5.97245 11.1358 6.10316 11.1096 6.22502 11.0589C6.34687 11.0081 6.45748 10.9337 6.55044 10.84L14.7104 2.67998C14.8119 2.58634 14.893 2.47269 14.9484 2.34619C15.0038 2.21969 15.0324 2.08308 15.0324 1.94498C15.0324 1.80688 15.0038 1.67028 14.9484 1.54378C14.893 1.41728 14.8119 1.30363 14.7104 1.20998Z' fill='black'/> </svg>");
    opacity: 0;

}

/* Mostrar el tilde cuando el input estÃƒÆ’Ã†â€™Ãƒâ€ Ã¢â‚¬â„¢ÃƒÆ’Ã¢â‚¬Å¡Ãƒâ€šÃ‚Â© checked (requiere soporte de :has) */
.fe-checks label:has(input:checked)::after {
    opacity: 1;
}

/* Accesibilidad: anillo de foco via teclado */
.fe-checks label:has(input:focus-visible)::before {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* Estado disabled */
.fe-checks label:has(input:disabled) {
    opacity: .45;
    cursor: not-allowed;
}

/* --- Fallback si el HTML fuese "input + label" (poco probable en FE) --- */
.fe-checks input[type="checkbox"] + label,
.fe-checks input[type="radio"] + label {
    padding-left: 36px;
}

.fe-checks input[type="checkbox"]:checked + label::after,
.fe-checks input[type="radio"]:checked + label::after {
    opacity: 1;
}

.fe-checks input[type="checkbox"]:focus-visible + label::before,
.fe-checks input[type="radio"]:focus-visible + label::before {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/*Botones del filtro*/

.wpc-filters-main-wrap .wpc-filter-layout-submit-button a.wpc-filters-reset-button,
.wpc-filters-main-wrap .wpc-filter-layout-submit-button a.wpc-filters-submit-button {
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    text-transform: uppercase;
    line-height: 20px;
    align-items: center;
    border-radius: 0;
}

.wpc-filters-main-wrap .wpc-filter-layout-submit-button a.wpc-filters-reset-button {
    border: 1px solid #0F0F0F;
}

.wpc-filters-main-wrap .wpc-filter-layout-submit-button a.wpc-filters-submit-button {
    border-color: #0F0F0F;
    background: var(--primitives-gray-scale-black, #0F0F0F);
}

/* Barra superior */

.woocommerce .kpn-filter-controls .woocommerce-ordering {
    display: flex;
}

.woocommerce .kpn-filter-controls .woocommerce-ordering select {
    text-transform: uppercase;
    border: none;
    padding: 0;
    margin: 0;
}

.woocommerce .kpn-filter-controls .woocommerce-ordering:after {
    content: '';
}

.kpn-filter-controls__divider {
    width: 1px;
    height: 100%;
    max-height: 100%;
    background-color: #aaa;
}

.woocommerce .kpn-filter-controls .woocommerce-ordering {
    padding: 0;
    margin: 0;
}

button.kpn-filter-controls__filters-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: #090909 !important;
    background-color: transparent !important;
    font-weight: 400;
}

button.kpn-archive-layout__close-btn {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    right: 0;
    padding-inline: 16px;
}

.wpc-edit-filter-set {
    display: none;
}


body.kpn-archive-products ul.products > li.product:nth-child(1) {
    grid-column: span 2;
}

@media (max-width: 768px) {

    .woocommerce .wc-columns-container ul.products li.product .woocommerce-loop-category__title {
        font-size: 14px;
    }

    .woocommerce .woocommerce-archive-wrapper ul.products li.product.woocommerce-image-align-left a .wc-product-image img {
        height: 236px;
        object-fit: cover;
    }

    .woocommerce.kpn-archive-products .woocommerce-archive-wrapper .wc-columns-container.wc-columns-3 .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body.kpn-archive-products ul.products > li.product:nth-child(1),
    body.kpn-archive-products ul.products > li.product:last-child {
        grid-column: 1 / -1;
    }
}

body.kpn-archive-products ul.products > li.product:last-child:nth-child(3n) {
    grid-column: 1 / -1;
}

/* Caso 2: total % 3 === 2  â†’ quedan 2 items en la Ãºltima fila
 Haz que el Ãºltimo ocupe 2 columnas (el penÃºltimo queda con 1 por defecto) */
body.kpn-archive-products ul.products > li.product:last-child:nth-child(3n + 1) {
    grid-column: span 2;
}
  
  