/* =========================================================================
   ProFins - Identidad visual
   Pegar en:  Apariencia > Personalizar > CSS adicional
   =========================================================================

   Paleta: azul profundo de agua + cian de superficie.
   Sustituye el azul generico de Astra (#046bd2) por algo propio de una
   tienda de apnea, sin depender de fotos que todavia no existen.
   ========================================================================= */

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

:root {
    --pf-abismo:    #0F1D2B;  /* pie de pagina y titulos */
    --pf-profundo:  #16293C;
    --pf-azul:      #0E7490;  /* acento unico: acciones, enlaces, hover */
    --pf-cian:      #0E7490;  /* alias, se mantiene por compatibilidad */
    --pf-espuma:    #F5F8FA;  /* fondos suaves */
    --pf-tinta:     #14212E;  /* texto principal */
    --pf-gris:      #64748B;  /* texto secundario */
    --pf-borde:     #E6EDF3;
    --pf-alerta:    #C2410C;  /* agotado */
    --pf-cabecera:  #FFFFFF;  /* toda la cabecera, en un solo tono */
}

/* --- Tipografia ------------------------------------------------------- */
body,
.ast-container,
button, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--pf-tinta);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--pf-tinta);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1, .entry-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; margin-top: 2.5rem; }
h3 { font-size: 1.25rem; font-weight: 600; }

/* --- Cabecera ---------------------------------------------------------
   La cabecera de Astra son tres barras apiladas (above / primary / below).
   Si solo se pinta una, quedan dos tonos distintos, que era el problema.
   Aqui van las tres al mismo blanco, separadas por una linea fina. */
.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(--pf-cabecera) !important;
    background-image: none !important;
}
.ast-above-header-bar { border-bottom: 1px solid var(--pf-borde); }
.ast-below-header-bar,
.ast-primary-header-bar { border-bottom: 1px solid var(--pf-borde); }
.site-header { box-shadow: 0 1px 12px rgba(15, 29, 43, .05); }

/* Menu principal: sin depender de en que barra lo haya puesto el tema */
.ast-builder-menu .main-header-menu > .menu-item > .menu-link {
    color: var(--pf-tinta) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
    padding-inline: 1em;
    transition: color .18s ease;
    position: relative;   /* ancla del subrayado */
    white-space: nowrap;  /* 'ALETAS' no se parte en dos lineas */
}
.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(--pf-azul) !important;
}

/* Subrayado del menu.
   Astra dibuja el suyo con un ::before de 1px a todo el ancho cuando el menu
   lleva la clase .ast-menu-hover-style-underline. Se anula para que no salga
   doble y se deja solo el propio, que crece desde el centro. */
body .ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link::before,
body .ast-desktop .ast-menu-hover-style-underline > .menu-item > .ast-menu-toggle::before,
body .ast-menu-hover-style-underline > .menu-item > .menu-link::before {
    content: none !important;
    display: none !important;
}

/* El propio: en posicion absoluta para que al aparecer no ocupe espacio ni
   parta el texto del enlace en dos lineas. */
.ast-builder-menu .main-header-menu > .menu-item > .menu-link::after {
    content: '' !important;
    position: absolute;
    left: 50%;
    bottom: .55em;
    transform: translateX(-50%);
    height: 2px;
    width: 0;
    background: var(--pf-azul);
    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: 65%;
}

/* Desplegables: iban con fondo blanco y letra blanca, ilegibles.
   El selector anterior colgaba de .ast-primary-header-bar y el menu vive en
   .ast-builder-menu-1, asi que nunca aplicaba. */
.ast-builder-menu .main-header-menu .sub-menu,
.ast-builder-menu .main-header-menu .astra-full-megamenu-wrapper {
    background-color: #FFFFFF !important;
    border: 1px solid var(--pf-borde);
    border-radius: 12px;
    padding: .4rem;
    box-shadow: 0 16px 38px rgba(15, 29, 43, .12);
    min-width: 230px;
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link {
    color: var(--pf-tinta) !important;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
    padding: .55rem .85rem;
    line-height: 1.4;
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link:hover,
.ast-builder-menu .main-header-menu .sub-menu .current-menu-item > .menu-link {
    background-color: var(--pf-espuma) !important;
    color: var(--pf-azul) !important;
}
.ast-builder-menu .main-header-menu .sub-menu .menu-link::after { display: none; }

/* Datos de contacto y redes: iban en #1e293b sobre fondo oscuro */
.ast-header-social-wrap a,
.ast-builder-social-element,
.ast-header-html,
.ast-header-html a {
    color: var(--pf-gris) !important;
    font-size: .85rem;
}
.ast-header-social-wrap a:hover,
.ast-header-html a:hover { color: var(--pf-azul) !important; }

/* Iconos de cabecera (carrito, busqueda, cuenta) */
.ast-site-header-cart a,
.ast-search-menu-icon .slide-search a,
.ast-header-account-wrap,
.ast-header-account-link,
.ast-cart-menu-wrap,
.ast-mobile-menu-trigger-minimal {
    color: var(--pf-tinta) !important;
}
.ast-site-header-cart .ast-cart-menu-wrap .count,
.ast-site-header-cart .count {
    background: var(--pf-azul);
    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(--pf-azul);
    color: #FFFFFF;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: .01em;
    border: none;
    border-radius: 8px;
    padding: .78em 1.6em;
    transition: transform .15s ease, background .18s ease, box-shadow .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(--pf-abismo);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(7, 32, 51, .18);
}

/* El boton principal del hero: mas presencia */
.wp-block-buttons .wp-block-button__link {
    background: var(--pf-azul);
    color: #FFFFFF;
    font-size: 1.02rem;
    padding: .88em 2.1em;
}
.wp-block-buttons .wp-block-button__link:hover {
    background: var(--pf-abismo);
    color: #FFFFFF;
}

/* --- Fichas de producto ----------------------------------------------- */
.woocommerce ul.products li.product {
    background: #FFFFFF;
    border: 1px solid var(--pf-borde);
    border-radius: 14px;
    padding: 1rem 1rem 1.25rem;
    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 34px rgba(7, 32, 51, .10);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    font-weight: 600;
    min-height: 2.6em;
}
.woocommerce ul.products li.product .price {
    color: var(--pf-abismo);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}
.woocommerce .astra-shop-summary-wrap .ast-woo-product-category {
    color: var(--pf-gris);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Placeholder de producto sin foto: que no parezca un error */
.woocommerce ul.products li.product img[src*="woocommerce-placeholder"] {
    background: var(--pf-espuma);
    padding: 18%;
    opacity: .35;
}

/* Etiqueta de agotado */
.woocommerce span.out-of-stock,
.woocommerce ul.products li.product .out-of-stock {
    background: var(--pf-alerta);
    color: #FFFFFF;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: .3em .7em;
}

/* El aviso de variantes se repite en cada tarjeta y satura la vitrina */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock,
.woocommerce ul.products li.product .wc-variation-selection-needed,
.woocommerce ul.products li.product a.button + .screen-reader-text {
    display: none;
}

/* --- Ficha individual -------------------------------------------------- */
.woocommerce div.product .product_title { margin-bottom: .35em; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--pf-abismo);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
}
.woocommerce div.product form.cart .variations label {
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .05em;
    color: var(--pf-gris);
}
.woocommerce div.product form.cart .variations select {
    border: 1px solid var(--pf-borde);
    border-radius: 8px;
    padding: .6em .8em;
    background-color: #FFFFFF;
}
.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--pf-cian);
    outline: 2px solid rgba(0, 194, 209, .25);
}

/* --- Barra lateral de filtros ------------------------------------------ */
.widget-area .widget {
    background: #FFFFFF;
    border: 1px solid var(--pf-borde);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.1rem;
}
.widget-area .widget-title,
.widget-area .wp-block-heading {
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pf-gris);
    margin-bottom: .8rem;
}
.widget_layered_nav ul li a,
.widget_product_categories ul li a {
    color: var(--pf-tinta);
    text-decoration: none;
}
.widget_layered_nav ul li a:hover,
.widget_product_categories ul li a:hover { color: var(--pf-azul); }
.widget_layered_nav ul li.chosen a { color: var(--pf-cian); font-weight: 600; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--pf-cian); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--pf-abismo); }

/* --- Portada ----------------------------------------------------------- */
.home .entry-content > .wp-block-heading:first-of-type { margin-top: .2em; }
.home .wp-block-columns .wp-block-column {
    background: var(--pf-espuma);
    border-radius: 14px;
    padding: 1.4rem 1.3rem;
    transition: background .18s ease, transform .18s ease;
}
.home .wp-block-columns .wp-block-column:hover {
    background: #E6F1F8;
    transform: translateY(-2px);
}
.home .wp-block-columns .wp-block-column h3 a {
    color: var(--pf-abismo);
    text-decoration: none;
}
.home .wp-block-columns .wp-block-column h3 a:hover { color: var(--pf-azul); }
.home .wp-block-columns .wp-block-column p {
    color: var(--pf-gris);
    font-size: .93rem;
    margin-bottom: 0;
}
.home .wp-block-separator {
    border: none;
    height: 1px;
    background: var(--pf-borde);
    margin: 3rem auto;
    max-width: 100%;
}

/* --- Pie de pagina ----------------------------------------------------- */
.site-footer, .ast-footer-overlay, .site-below-footer-wrap {
    background: var(--pf-abismo) !important;
    color: #B8CBDA;
}
.site-footer a, .site-below-footer-wrap a { color: #D7E5F0; }
.site-footer a:hover, .site-below-footer-wrap a:hover { color: var(--pf-cian); }

/* --- Enlaces y foco ---------------------------------------------------- */
a { color: var(--pf-azul); }
a:hover { color: var(--pf-abismo); }
:focus-visible {
    outline: 2px solid var(--pf-cian);
    outline-offset: 2px;
}

/* --- Movil ------------------------------------------------------------- */
/* --- Movil -------------------------------------------------------------
   Mismo lenguaje que en escritorio (blanco, Outfit en mayusculas, acento
   teal) pero apilado. Astra deja el menu movil en flex horizontal, que es
   lo que lo veia desordenado. */
@media (max-width: 921px) {
    .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-mobile-header-content,
    .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    .ast-mobile-popup-drawer .ast-mobile-popup-content {
        background-color: var(--pf-cabecera) !important;
    }

    /* Apilado: una opcion por fila, a lo ancho */
    .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(--pf-borde);
    }

    /* Nivel 1: como el menu de escritorio, en mayusculas */
    .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;          /* zona tactil comoda */
        padding: .8rem 1.15rem;
        font-family: 'Outfit', sans-serif;
        font-size: .95rem;
        font-weight: 600 !important;
        letter-spacing: .03em !important;
        text-transform: uppercase;
        color: var(--pf-tinta) !important;
        text-align: left;
    }

    /* Nivel 2: subcategorias, sangradas y sin mayusculas */
    .ast-builder-menu-mobile .main-header-menu .sub-menu,
    #ast-hf-mobile-menu .sub-menu {
        background: var(--pf-espuma) !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: .92rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--pf-gris) !important;
    }
    .ast-builder-menu-mobile .main-header-menu .sub-menu .menu-item:last-child,
    #ast-hf-mobile-menu .sub-menu .menu-item:last-child { border-bottom: none; }

    /* Estado activo y flecha de desplegar, en el acento */
    .ast-builder-menu-mobile .main-header-menu .current-menu-item > .menu-link,
    #ast-hf-mobile-menu .current-menu-item > .menu-link { color: var(--pf-azul) !important; }
    .ast-builder-menu-mobile .ast-menu-toggle,
    #ast-hf-mobile-menu .ast-menu-toggle { color: var(--pf-azul) !important; }

    /* El subrayado del hover no aplica al tacto */
    .ast-builder-menu-mobile .menu-link::after,
    #ast-hf-mobile-menu .menu-link::after { display: none !important; }

    h1, .entry-title { line-height: 1.2; }
    .woocommerce ul.products li.product { padding: .75rem .75rem 1rem; }

    /* La barra de filtros a ancho completo, sin margenes laterales sueltos */
    .pf-filtros { margin-inline: 0; }
}

/* --- Barra de filtros del catalogo -------------------------------------
   Los widgets de facetas se pintan sobre la rejilla porque la plantilla de
   la tienda no admite barra lateral. Plegado por defecto para no empujar
   los productos fuera de la primera pantalla. */
.pf-filtros {
    background: #FFFFFF;
    border: 1px solid var(--pf-borde);
    border-radius: 12px;
    margin: 0 0 1.75rem;
    overflow: hidden;
}
.pf-filtros__boton {
    cursor: pointer;
    list-style: none;
    padding: .85rem 1.15rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pf-abismo);
    display: flex;
    align-items: center;
    gap: .55rem;
    user-select: none;
}
.pf-filtros__boton::-webkit-details-marker { display: none; }
.pf-filtros__boton::before {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--pf-cian);
    border-bottom: 2px solid var(--pf-cian);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}
.pf-filtros[open] .pf-filtros__boton::before { transform: rotate(-135deg) translateY(-2px); }
.pf-filtros__boton:hover { color: var(--pf-azul); }

/* Flex en vez de grid: con auto-fit dentro de un <details> cerrado las pistas
   colapsaban a 0 y los siete filtros acababan apilados en una sola columna. */
.pf-filtros__panel {
    display: flex;
    flex-wrap: wrap;
    /* Por arriba, no por abajo: las cajas no miden lo mismo (el slider de
       precio es mas alto) y alinearlas al pie descuadraba las etiquetas. */
    align-items: flex-start;
    gap: 1rem 1.1rem;
    padding: 1.2rem 1.15rem 1.3rem;
    border-top: 1px solid var(--pf-borde);
}

/* Astra mete todos los widgets dentro de un solo div .ast-filter-wrap, asi
   que el panel tenia un unico hijo flex y todo caia en una columna.
   display:contents disuelve ese envoltorio y deja los widgets como hijos
   directos del flex. */
.pf-filtros__panel > .ast-filter-wrap,
.pf-filtros__panel > .ast-accordion-layout {
    display: contents;
}

/* Dentro de la barra los widgets no llevan su propia caja */
.pf-filtros__panel .widget {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    flex: 1 1 190px;
    min-width: 165px;
    max-width: 260px;
}
.pf-filtros__panel .widget-title {
    display: block;
    margin: 0 0 .4rem;
    font-size: .72rem;
    letter-spacing: .09em;
}

/* Los filtros de atributo van en modo desplegable: una fila de selectores
   de la misma altura se lee mucho mejor que siete listas de alturas
   distintas (talla calzado tiene 26 valores y color 22). */
.pf-filtros__panel select {
    width: 100%;
    height: 42px;
    padding: 0 .75rem;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    color: var(--pf-tinta);
    background-color: #FFFFFF;
    border: 1px solid var(--pf-borde);
    border-radius: 8px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%2364748B' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    cursor: pointer;
}
.pf-filtros__panel select:focus {
    border-color: var(--pf-azul);
    outline: 2px solid rgba(14, 116, 144, .18);
}

/* WooCommerce sustituye el <select> por select2, asi que el estilo real
   tiene que ir sobre el elemento que pinta select2, no sobre el original. */
.pf-filtros__panel .select2-container { width: 100% !important; }
.pf-filtros__panel .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 .75rem;
    background-color: #FFFFFF;
    border: 1px solid var(--pf-borde);
    border-radius: 8px;
    transition: border-color .16s ease;
}
.pf-filtros__panel .select2-container--default .select2-selection--single:hover {
    border-color: #C9D6E2;
}
.pf-filtros__panel .select2-container--default .select2-selection--single
    .select2-selection__rendered {
    padding: 0;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    color: var(--pf-tinta);
}
.pf-filtros__panel .select2-container--default .select2-selection--single
    .select2-selection__placeholder { color: var(--pf-gris); }
.pf-filtros__panel .select2-container--default .select2-selection--single
    .select2-selection__arrow {
    height: 40px;
    right: .5rem;
}
.pf-filtros__panel .select2-container--default.select2-container--open
    .select2-selection--single {
    border-color: var(--pf-azul);
    box-shadow: 0 0 0 3px rgba(14, 116, 144, .14);
}

/* Los filtros de atributo usan <select multiple>, que select2 pinta como
   --multiple, no --single. Sin estas reglas quedaban sin estilo y con casi
   el triple de alto que el resto. */
.pf-filtros__panel .select2-container--default .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: 42px;
    padding: .25rem .5rem;
    background-color: #FFFFFF;
    border: 1px solid var(--pf-borde) !important;
    border-radius: 8px;
}
.pf-filtros__panel .select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border-color: var(--pf-azul) !important;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, .14);
}
.pf-filtros__panel .select2-selection--multiple .select2-selection__rendered {
    display: contents;
    padding: 0;
}
.pf-filtros__panel .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    padding: .12rem .55rem;
    background: var(--pf-espuma);
    border: 1px solid var(--pf-borde);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--pf-tinta);
    line-height: 1.6;
}
.pf-filtros__panel .select2-selection__choice__remove {
    color: var(--pf-gris);
    margin-right: .3rem;
}
.pf-filtros__panel .select2-selection__choice__remove:hover { color: var(--pf-alerta); }
.pf-filtros__panel .select2-search--inline .select2-search__field {
    margin: 0;
    height: 28px;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
}
/* El boton de enviar del formulario de filtro sobra: select2 aplica solo */
.pf-filtros__panel .woocommerce-widget-layered-nav-dropdown__submit {
    display: none;
}

/* Panel desplegado de select2, en la misma linea visual que los submenus */
.select2-container--default .select2-dropdown {
    border: 1px solid var(--pf-borde);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 29, 43, .12);
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pf-azul);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--pf-borde);
    border-radius: 7px;
    padding: .45rem .6rem;
}

/* El de precio es un slider, ocupa algo mas y se alinea con los selectores */
.pf-filtros__panel .widget_price_filter { flex: 1 1 240px; max-width: 300px; }
/* El slider se centra a la altura de los selectores para que la fila no
   quede escalonada */
.pf-filtros__panel .price_slider_wrapper { padding-top: 1.05rem; }
.pf-filtros__panel .price_slider { margin-bottom: 1rem; }
.pf-filtros__panel .price_slider_amount {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
}
.pf-filtros__panel .price_slider_amount .button {
    order: 2;
    padding: .45em 1em;
    font-size: .8rem;
}
.pf-filtros__panel .price_slider_amount .price_label { order: 1; color: var(--pf-gris); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--pf-borde); }

/* Los filtros aplicados ocupan la fila entera, como chips */
.pf-filtros__panel .widget_layered_nav_filters {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
}
.pf-filtros__panel .widget_layered_nav_filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pf-filtros__panel .widget_layered_nav_filters li a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--pf-espuma);
    border: 1px solid var(--pf-borde);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .82rem;
    color: var(--pf-tinta);
    text-decoration: none;
}
.pf-filtros__panel .widget_layered_nav_filters li a:hover {
    border-color: var(--pf-azul);
    color: var(--pf-azul);
}

@media (max-width: 600px) {
    .pf-filtros__panel { gap: .85rem; padding: 1rem .9rem 1.1rem; }
    .pf-filtros__panel .widget { flex: 1 1 100%; max-width: none; }
}