/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/* ==========================================================================
   HF Tecnología — Encabezado de tienda compacto
   Referencia de uso del espacio: Mercado Libre.
   Objetivo: una sola línea fina (breadcrumb + orden) y que la grilla de
   productos arranque arriba, con el título de la categoría sobre los filtros.
   ========================================================================== */

/* --- El breadcrumb de Salient come ~95px de alto para una línea de texto:
       padding 13px + line-height 40px + margin-bottom 40px. Lo aplanamos. --- */
.nectar-shop-header .woocommerce-breadcrumb {
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-size: 13px;
    opacity: .75;
}

.nectar-shop-header .woocommerce-breadcrumb a {
    text-decoration: none;
}

.nectar-shop-header .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* --- Conteo de resultados: oculto en la barra del header ---
   Es redundante: el total ya aparece bajo el título de la categoría, en el
   sidebar (.hf-shop-heading__count). ML tampoco lo muestra en esa barra.

   Hay que prefijar con body.woocommerce: Salient lo declara en
   `body[data-fancy-form-rcs="1"].woocommerce .woocommerce-result-count`
   (especificidad 0,3,1) y sin el body esta regla queda en 0,3,0 y pierde,
   aunque venga después en la cascada.                                        */
body.woocommerce .nectar-shop-header .nectar-shop-header-bottom .woocommerce-result-count,
body.woocommerce-page .nectar-shop-header .nectar-shop-header-bottom .woocommerce-result-count {
    display: none;
}

/* --- Selector de orden ---
   El bloque que había acá des-pillaba el widget de Salient (select2 / fancy
   select) y agregaba el label con un ::before. Quedó obsoleto: ahora el
   selector se reemplaza por un componente propio con el look de ML — ver
   js/hf-orden-dropdown.js y el bloque "Ordenar por" al final de este archivo.
   Dejar el CSS viejo hacía que se vieran los dos a la vez.                  */
.nectar-shop-header .woocommerce-ordering {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* --- Título de la categoría dentro del sidebar (patrón Mercado Libre) --- */
.hf-shop-heading {
    margin: 0 0 26px;
}

.hf-shop-heading__title {
    margin: 0 0 2px;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.hf-shop-heading__count {
    display: block;
    font-size: 13px;
    opacity: .7;
}


/* ==========================================================================
   Desktop: una sola fila. Breadcrumb a la izquierda, orden a la derecha.
   El sidebar de Salient es .span_3 (23.5%), por eso el título va ahí.
   ========================================================================== */
@media only screen and (min-width: 1000px) {

    .nectar-shop-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 20px;
        margin-bottom: 22px;
    }

    /* el h1 se muestra en el sidebar; acá sería duplicado */
    .nectar-shop-header .page-title {
        display: none;
    }

    .nectar-shop-header .woocommerce-breadcrumb {
        margin-right: auto;
    }

    .nectar-shop-header .nectar-shop-header-bottom {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0;
        padding: 0;
        border: 0;
        width: auto;
    }

    .nectar-shop-header .nectar-shop-header-bottom .right-side {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 0;
    }

    .nectar-shop-header .nectar-shop-header-bottom .left-side {
        display: flex;
        align-items: center;
        margin: 0;
    }

    /* En desktop el sidebar está siempre a la vista, así que el toggle no
       aporta: solo ofrece esconder los filtros. Fuera, como en ML.
       En mobile SÍ se muestra —es la única puerta al panel— y se estiliza más
       abajo, en el bloque de max-width:999px. */
    .nectar-shop-header .nectar-shop-filters {
        display: none;
    }

    /* Imprescindible junto con lo de arriba: Salient recuerda el toggle en
       localStorage (`nectar_product_filters_vis`) y al cargar la página le
       escribe `opacity: 0` inline al sidebar. Quien alguna vez tocó "Ocultar
       filtros" arrastra ese estado para siempre; sin el botón no tendría cómo
       revertirlo y se quedaría sin filtros.

       Alcanza con !important: el estilo que pone el JS es inline pero sin
       !important, y un !important de hoja le gana igual. */
    .woocommerce-page #sidebar,
    .woocommerce #sidebar {
        opacity: 1 !important;
    }

    /* que la grilla arranque a la misma altura que el título del sidebar */
    .woocommerce-page #post-area,
    .woocommerce-page #sidebar {
        margin-top: 0;
    }
}


/* ==========================================================================
   Mobile / tablet: el sidebar cae debajo, así que el título vuelve al header
   y el toggle de filtros recupera su función.
   ========================================================================== */
@media only screen and (max-width: 999px) {

    .hf-shop-heading {
        display: none;
    }

    .nectar-shop-header .page-title {
        margin-bottom: 6px;
    }

    /* La causa de que "Ordenar por" quedara 12px más arriba que el botón de
       filtros: Salient alinea esta fila con `align-items: flex-start`, y como
       el botón mide 40px de alto contra 16px del selector de orden, arrancaban
       juntos arriba en vez de compartir la línea media. */
    .nectar-shop-header .nectar-shop-header-bottom {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 18px;
    }

    /* Salient reparte esta fila en 40% / 60%, que suman el ancho entero: con
       cualquier separación entre las dos mitades el selector de orden se caía
       a un segundo renglón. Pasan a ocupar lo que necesitan y el orden se
       empuja a la derecha con el margen automático. */
    body .nectar-shop-header .nectar-shop-header-bottom .left-side,
    body .nectar-shop-header .nectar-shop-header-bottom .right-side {
        width: auto;
    }

    body .nectar-shop-header .nectar-shop-header-bottom .right-side {
        margin-left: auto;
    }

    .nectar-shop-header .nectar-shop-header-bottom .right-side {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px;
    }

    /* El botón de filtros al mismo tono que "Ordenar por": sin la cápsula gris,
       misma tipografía y mismo cuerpo. Queda como un control de texto con
       icono, que es lo que usa ML en mobile.

       El padding vertical se conserva aunque no se vea: sostiene el área
       táctil en ~34px. Sin él quedarían los 16px de la línea de texto. */
    /* El panel abría con casi 80px de hueco entre el título "Filtros" y el
       primer filtro. Son dos cosas sumadas; esta es la primera: Salient reserva
       100px arriba para la barra del título, que mide 63.

       El selector calca al suyo —`.archive.woocommerce .container-wrap >
       .main-content #sidebar`, cuatro clases y un id— y le suma el `body`. */
    body.archive.woocommerce .container-wrap > .main-content #sidebar,
    body.archive.woocommerce-page .container-wrap > .main-content #sidebar {
        padding-top: 76px;
    }

    /* El contenedor del botón arrastra `min-width:120px; width:100%` de
       salient-dynamic-styles y una sangría propia: ocupaba 137px para un botón
       de 82 y arrancaba corrido de la grilla. Entre eso y el selector de orden
       no entraban los dos en la fila, y el orden se caía a un segundo renglón. */
    .nectar-shop-header .nectar-shop-filters {
        display: flex;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .nectar-shop-header .nectar-shop-filter-trigger {
        min-width: 0 !important;
        width: auto !important;
        padding: 9px 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 13px;
        font-weight: 600;
        gap: 8px;
    }

    .nectar-shop-header .nectar-shop-filter-trigger:hover {
        background: transparent !important;
    }
}







/* ==========================================================================
   Zoom lateral en la ficha de producto (referencia: Mercado Libre)
   Ver js/hf-zoom-lateral.js — acá solo la presentación.
   ========================================================================== */

.hf-zoom-panel {
	position: fixed;
	z-index: 9000;
	background-color: #fff;
	background-repeat: no-repeat;
	border: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .13);
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
	/* Nunca debe interceptar el click: ese va al <a> que abre el lightbox. */
	pointer-events: none;
}

.hf-zoom-panel.is-visible {
	opacity: 1;
	visibility: visible;
}

/* La lente marca la zona ampliada. El box-shadow gigante hace de máscara:
   atenúa todo lo que queda fuera del recuadro sin necesidad de otro elemento. */
.hf-zoom-lente {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	background-color: rgba(255, 255, 255, .12);
	box-shadow: 0 0 0 9999px rgba(255, 255, 255, .6);
	pointer-events: none;
	will-change: transform;
}

.single-product .product-slider .slide.hf-zoom-activo {
	cursor: zoom-in;
}

.single-product .product-slider .slide.hf-zoom-activo a {
	cursor: zoom-in;
}

/* En mobile y tablet no hay hover: manda el lightbox solo. */
@media (max-width: 1000px) {
	.hf-zoom-panel,
	.hf-zoom-lente {
		display: none !important;
	}
}


/* ==========================================================================
   "Ordenar por" con el look de Mercado Libre
   Ver js/hf-orden-dropdown.js — el <select> nativo queda oculto detrás.
   ========================================================================== */

/* Salient envuelve el <select> en su propio widget (.fancy-select-wrap, o un
   contenedor de select2 según la config de "fancy forms"). El select lo esconde
   el JS, pero el envoltorio sigue dibujándose: si no se oculta, se ven los dos
   selectores al mismo tiempo. */
.woocommerce-ordering.hf-orden-activo .fancy-select-wrap,
.woocommerce-ordering.hf-orden-activo .select2-container,
.woocommerce-ordering .hf-orden-oculto {
	display: none !important;
}

/* Salient también dibuja el label con un ::before sobre el formulario en
   algunos layouts; la etiqueta ahora la pone el componente. */
.woocommerce-ordering.hf-orden-activo::before {
	content: none !important;
}

.hf-orden {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.2;
}

.hf-orden__etiqueta {
	color: #333;
	font-weight: 600;
}

.hf-orden__campo {
	position: relative;
}

.hf-orden__trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #0f6fd6;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

.hf-orden__trigger:hover,
.hf-orden__trigger:focus-visible {
	color: #2968c8;
	background: none;
}

.hf-orden__flecha {
	width: 12px;
	height: 8px;
	flex: 0 0 auto;
	transition: transform .15s ease;
}

.hf-orden[data-abierto="true"] .hf-orden__flecha {
	transform: rotate(180deg);
}

.hf-orden__lista {
	position: absolute;
	z-index: 300;
	/* Alineada para que el texto de las opciones caiga bajo el del disparador. */
	top: calc(100% + 10px);
	left: -20px;
	min-width: 170px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.hf-orden[data-abierto="true"] .hf-orden__lista {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hf-orden__opcion {
	position: relative;
	margin: 0;
	padding: 12px 20px;
	color: #333;
	white-space: nowrap;
	/* Explícito porque en mobile Salient centra el texto del formulario de orden
	   y las opciones se heredaban centradas, con la barrita del activo colgando
	   lejos del texto.

	   Hace falta declarar también `text-align-last`: Salient lo deja en `center`
	   y esa propiedad manda sobre la ÚLTIMA línea del bloque. Como cada opción
	   es de una sola línea, esa línea es la última y el texto seguía centrado
	   aunque `text-align` ya dijera `left`. */
	text-align: left;
	text-align-last: left;
	cursor: pointer;
	transition: background-color .1s ease;
}

.hf-orden__opcion:hover {
	background-color: #f5f5f5;
}

/* Separadores finos entre opciones, sangrados como los de ML. */
.hf-orden__opcion + .hf-orden__opcion::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	right: 0;
	height: 1px;
	background: #ebebeb;
}

.hf-orden__opcion.is-selected {
	color: #0f6fd6;
}

/* Barrita azul a la izquierda de la opción activa. */
.hf-orden__opcion.is-selected::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: #0f6fd6;
}

@media (max-width: 690px) {
	/* Mismo piso que en desktop: con 220px sobraban 87px de aire a la derecha
	   de "Más relevantes", que es la opción más larga. */
	.hf-orden__lista {
		left: auto;
		right: 0;
		min-width: 170px;
	}
}


/* --- Carrito vacío del panel lateral ---
   Salient capitaliza el botón, que en inglés le quedaba bien —"Go To Shop"—
   pero sobre la traducción da "Ir A La Tienda". En español solo lleva mayúscula
   la primera palabra.

   El selector largo y el !important son para ganarle a
   `.nectar-slide-in-cart.style_slide_in_click .woocommerce-mini-cart__empty-message
   a.button { text-transform: capitalize !important }`. El `body` de más sube la
   especificidad por encima de esa, que ya trae !important. */
body .nectar-slide-in-cart.style_slide_in_click .woocommerce-mini-cart__empty-message a.button,
body .woocommerce-mini-cart__empty-message a.button {
	text-transform: none !important;
}


/* --- Carrito lateral: fila de producto más compacta ---
   La cantidad se edita en la página del carrito, así que en el panel queda solo
   el número; el título recupera ancho y baja a 14px para que un nombre largo
   —los de este catálogo lo son— no se coma la fila. */

.style_slide_in_click .product-meta > .quantity .modify {
	display: none;
}

.style_slide_in_click .product-meta > .product-details {
	width: 80%;
	padding-right: 0;
	line-height: 0.5;
}

.nectar-slide-in-cart.style_slide_in_click .cart_list .product-meta .product-details > a:not(.remove) {
	display: inline;
	font-size: 14px !important;
	line-height: 1.4 !important;
}


/* --- Botón de WhatsApp: siempre detrás del carrito lateral ---
   El plugin (whatsapp-for-wordpress) pone el botón flotante en z-index
   999999999 y la caja de chat en 999999998: por encima de todo, incluido el
   panel del carrito (100000), donde tapaba "Finalizar la compra".

   Queda debajo del panel y también de su fondo oscuro
   (`.nectar-slide-in-cart-bg.revealed`, 10000), así con el carrito abierto se
   atenúa como el resto de la página en vez de quedar flotando encima. Sigue
   por arriba del contenido; con el header (9999) no se cruza nunca. El `body`
   es para ganarle a la regla del plugin sin depender del orden de carga. */
body .wa__btn_popup {
	z-index: 9998;
}

body .wa__popup_chat_box {
	z-index: 9997;
}


/* --- Quick view: botonera en castellano ---
   Mismo caso que el botón del carrito. Salient capitaliza palabra por palabra,
   que en inglés pasa desapercibido ("Add To Cart") y sobre la traducción da
   "Agregar Al Carrito" y "Más Información".

   Ojo con el botón de agregar: hay dos en el DOM. El <button> del `form.cart`
   queda con ancho 0 y el que se ve es un <a> que Salient monta aparte, en
   `.single_add_to_cart_button_wrap`. Hay que apuntar a ese. */
body .nectar-quick-view-box .nectar-full-product-link a,
body .nectar-quick-view-box .nectar-full-product-link a span {
	text-transform: none;
}

body .nectar-quick-view-box.nectar-modal .single_add_to_cart_button_wrap a.single_add_to_cart_button,
body .nectar-quick-view-box.nectar-modal .single_add_to_cart_button_wrap a.single_add_to_cart_button span {
	text-transform: none !important;
}


/* --- "Agregar al carrito" en la grilla y en la ficha ---
   Los dos últimos lugares donde quedaba el capitalize de Salient. La traducción
   ya venía bien; lo que rompía era el CSS.

   Van en dos reglas porque el markup cambia según dónde esté el botón: en la
   grilla es un <a> con un <span> adentro —que hereda, pero se declara igual
   para no depender de que Salient no le ponga regla propia— y en la ficha es un
   <button> dentro del form.

   Los !important y los selectores largos son para pasar a las reglas del theme,
   que también los traen:
     grilla → `.woocommerce .classic .product-wrap .product-add-to-cart
               .add_to_cart_button`  (cinco clases)
     ficha  → `.woocommerce div.product form.cart .button`  (cuatro) */
body.woocommerce .classic .product-wrap .product-add-to-cart a.add_to_cart_button,
body.woocommerce .classic .product-wrap .product-add-to-cart a.add_to_cart_button span,
body.woocommerce-page .classic .product-wrap .product-add-to-cart a.add_to_cart_button,
body.woocommerce-page .classic .product-wrap .product-add-to-cart a.add_to_cart_button span {
	text-transform: none !important;
}

body.woocommerce div.product form.cart button.single_add_to_cart_button,
body.woocommerce-page div.product form.cart button.single_add_to_cart_button {
	text-transform: none !important;
}


/* ==========================================================================
   Filtros del sidebar plegados en acordeón.
   Ver js/hf-filtros-sidebar.js — sin JS los widgets quedan desplegados.
   ========================================================================== */

/* Salient deja 60px entre widgets en desktop (skin-material.css, dentro de
   @media min-width:1000px). Con los atributos plegados el sidebar pasó a ser
   una lista compacta de títulos y ese aire lo desarma.

   Alcanza con la misma especificidad y sin !important: el style.css del child
   carga después de skin-material, y ninguna de las hojas que van detrás del
   child (style-non-critical, woocommerce-non-critical, js_composer…) vuelve a
   declarar este selector. */
#sidebar .widget {
	margin-bottom: 20px;
}

/* Filtros activos: es el resumen de lo aplicado, no un filtro más, y va un
   escalón por debajo del resto del sidebar.

   Se declara en el contenedor y se deja bajar por herencia a propósito: en el
   bloque que Salient dibuja sobre la grilla los enlaces llevan
   `font-size: inherit !important` (salient-dynamic-styles), así que atacarlos
   de frente no sirve — heredando, toman el 13px igual. Sin `#sidebar` delante,
   la regla cubre esa copia y la del sidebar de una sola vez. */
.widget_layered_nav_filters,
.widget_layered_nav_filters ul li,
.widget_layered_nav_filters ul li a {
	font-size: 13px;
}

/* Los chips del sidebar necesitan aparte el !important: la tipografía global de
   Salient declara `.material .main-content .widget li a { font-size:14px
   !important }` — una regla de 67 selectores — y contra un !important solo se
   puede con otro. El #sidebar sube la especificidad por encima de esas tres
   clases; los chips de arriba de la grilla no caen bajo ese selector y ya toman
   los 13px de la regla anterior. */
#sidebar .widget_layered_nav_filters ul li a {
	font-size: 13px !important;
}

/* El h4 pasa a ser solo el contenedor del disparador: el aire lo pone el botón,
   si no la fila táctil queda partida entre los dos. */
#sidebar .hf-filtro .hf-filtro__cabecera {
	margin: 0;
	padding: 0;
}

#sidebar .hf-filtro__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 14px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

#sidebar .hf-filtro__boton:hover,
#sidebar .hf-filtro__boton:focus-visible {
	color: #0f6fd6;
	background: none;
}

.hf-filtro__flecha {
	width: 12px;
	height: 8px;
	flex: 0 0 auto;
	color: #767676;
	transition: transform .2s ease;
}

.hf-filtro[data-hf-abierto="true"] .hf-filtro__flecha {
	transform: rotate(180deg);
}

/* Animar a altura automática: el panel pasa de 0fr a 1fr y el hijo recorta.
   Con max-height habría que adivinar un tope, y estas listas van de 2 a 40
   ítems según el atributo. */
.hf-filtro__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .22s ease;
}

.hf-filtro[data-hf-abierto="true"] .hf-filtro__panel {
	grid-template-rows: 1fr;
}

/* visibility saca los enlaces del recorrido con Tab mientras está plegado:
   overflow hidden los tapa, pero seguirían recibiendo foco. */
.hf-filtro__contenido {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: visibility .22s;
}

.hf-filtro[data-hf-abierto="true"] .hf-filtro__contenido {
	visibility: visible;
}

/* El margen inferior del widget lo aporta el panel abierto: plegados, los 27
   filtros tienen que quedar como una lista compacta de títulos. */
#sidebar .hf-filtro {
	margin-bottom: 0;
	border-bottom: 1px solid #ebebeb;
}

#sidebar .hf-filtro .hf-filtro__contenido > *:last-child {
	margin-bottom: 14px;
}

/* La otra mitad del hueco del panel: el contenedor de "Filtros activos" se
   renderiza siempre, haya filtros o no. Vacío queda con alto 0 pero conserva el
   `margin-bottom: 40px` que Salient le da en mobile, y eso se leía como espacio
   muerto antes del primer filtro. Se anula solo cuando no tiene nada adentro:
   con filtros aplicados el margen sí hace falta para separarlo del resto.

   `:not(:has(*))` no suma especificidad —la de `*` es cero— así que el selector
   tiene que ganar por sí mismo contra
   `body.woocommerce #sidebar .nectar-active-product-filters`. */
body.woocommerce #sidebar .inner > .nectar-active-product-filters:not(:has(*)),
body.woocommerce-page #sidebar .inner > .nectar-active-product-filters:not(:has(*)) {
	margin-bottom: 0;
}


/* Atributos con una sola opción: no filtran nada y ocupan una cabecera entera.
   Los marca el JS — ver noOfreceEleccion(). */
#sidebar .widget.hf-sin-opciones {
	display: none;
}


/* --- "Ver más" en las listas largas (Marca tiene 43 términos) --- */

/* display:none y no visibility: los términos recortados no deben ocupar lugar
   ni recibir foco con Tab. */
#sidebar .hf-filtro .hf-oculto {
	display: none;
}

/* El !important es por la misma regla de tipografía global de Salient que ya
   nos obligó en los chips: `.material .main-content .widget li a` no alcanza a
   este <button>, pero `.material .main-content .widget button` sí fija tamaño. */
#sidebar .hf-filtro__vermas {
	display: inline-block;
	margin: 4px 0 0;
	padding: 6px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #0f6fd6;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

#sidebar .hf-filtro__vermas:hover,
#sidebar .hf-filtro__vermas:focus-visible {
	background: none;
	text-decoration: underline;
}

/* --- Mobile: un solo indicador de plegado ---
   Abajo de 1000px Salient monta su propio acordeón en los widgets del sidebar:
   dibuja un +/− a la izquierda del título con dos barras en el ::before y el
   ::after del h4, y le abre 35px de padding para acomodarlo. Como el plegado ya
   lo maneja nuestro componente —con el chevron a la derecha— quedaban dos
   indicadores para el mismo control, y el título desalineado contra "Precio",
   que Salient excluye de su acordeón.

   Se apunta a `.hf-filtro__cabecera`, que la pone el JS: si por lo que sea un
   widget no llegara a plegarse, conserva el comportamiento del theme en vez de
   quedar sin ningún indicador.

   El selector calca al de Salient y le suma `body` porque el original es
   `.woocommerce #sidebar .widget.woocommerce:not(.widget_price_filter) h4:before`
   — cuatro clases y un id. */
@media only screen and (max-width: 999px) {

	body.woocommerce #sidebar .widget.woocommerce h4.hf-filtro__cabecera::before,
	body.woocommerce #sidebar .widget.woocommerce h4.hf-filtro__cabecera::after,
	body.woocommerce-page #sidebar .widget.woocommerce h4.hf-filtro__cabecera::before,
	body.woocommerce-page #sidebar .widget.woocommerce h4.hf-filtro__cabecera::after {
		display: none;
	}

	body.woocommerce #sidebar .widget.woocommerce h4.hf-filtro__cabecera,
	body.woocommerce-page #sidebar .widget.woocommerce h4.hf-filtro__cabecera {
		padding-left: 0;
	}

	/* Salient clona los chips de filtros activos en un bloque propio al tope del
	   panel, aparte del widget "Filtros activos" que ya trae el sidebar: en
	   mobile se veían los dos, el clon sin título y el widget con el suyo. En
	   desktop el clon está oculto — acá se hace lo mismo y queda el widget, que
	   es el que tiene encabezado. */
	#sidebar .inner > .nectar-active-product-filters {
		display: none;
	}

	/* El widget de filtros activos no se pliega, así que no lleva la clase del
	   acordeón y quedaba fuera de la regla de arriba: era el único que seguía
	   mostrando el +/− de Salient. En desktop su título va limpio. */
	body.woocommerce #sidebar .widget.woocommerce.widget_layered_nav_filters h4::before,
	body.woocommerce #sidebar .widget.woocommerce.widget_layered_nav_filters h4::after,
	body.woocommerce-page #sidebar .widget.woocommerce.widget_layered_nav_filters h4::before,
	body.woocommerce-page #sidebar .widget.woocommerce.widget_layered_nav_filters h4::after {
		display: none;
	}

	body.woocommerce #sidebar .widget.woocommerce.widget_layered_nav_filters h4,
	body.woocommerce-page #sidebar .widget.woocommerce.widget_layered_nav_filters h4 {
		padding-left: 0;
	}

	/* Y la sangría de los chips, que es la misma reserva de 35px para el +/−
	   pero sobre la lista: `.woocommerce #sidebar .widget.woocommerce:not(
	   .no-widget-title) > ul`. Solo la sufre este widget: en los demás el JS
	   movió el <ul> dentro del panel plegable, así que dejó de ser hijo directo
	   y la regla ya no los alcanza.

	   Ojo con la especificidad: ese selector pesa (1,4,1), no (1,3,1) —el
	   `:not(.no-widget-title)` cuenta como clase—, así que hay que repetir
	   `.woocommerce` sobre el widget para pasarlo. */
	body.woocommerce #sidebar .widget.woocommerce.widget_layered_nav_filters > ul,
	body.woocommerce-page #sidebar .widget.woocommerce.widget_layered_nav_filters > ul {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hf-filtro__panel,
	.hf-filtro__contenido,
	.hf-filtro__flecha {
		transition: none;
	}
}


/* ==========================================================================
   Galería de producto: una foto por vez (referencia: Mercado Libre)
   Ver js/hf-galeria-carrusel.js — la clase .hf-galeria la pone ese script, así
   que sin JS la ficha se queda con el apilado original de Salient.

   Todo va dentro de min-width:1000px porque ese es el corte donde Salient apila
   las fotos; por debajo monta flickity y el carrusel ya es suyo.
   ========================================================================== */

@media only screen and (min-width: 1000px) {

	/* Caja de posicionamiento de las flechas. El 30px es el padding-left que
	   Salient le da a la columna de la foto (product-single.css): los elementos
	   absolutos se posicionan contra el borde exterior del padding, así que hay
	   que sumarlo para que la flecha caiga sobre la imagen y no sobre el aire
	   que la separa de las miniaturas. */
	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-slider {
		--hf-galeria-sangria: 30px;
		position: relative;
	}

	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-slider .slider {
		position: relative;
	}

	/* Los slides dejan de apilarse en vertical: quedan todos en la misma caja y
	   se ve el activo.

	   Los inactivos NO se sacan con display:none. El lightbox de WooCommerce arma
	   su lista con los .woocommerce-product-gallery__image del DOM y abre en el
	   índice del que recibió el click; hace falta que sigan estando y midiendo,
	   además, para poder calcular el alto de la foto más alta. */
	/* El vertical-align es por el alto de la caja: Salient dibuja los slides como
	   inline-block y, alineados a la línea de base, debajo queda el hueco del
	   descender de la fuente —7px con el line-height del tema—. Ese hueco lo
	   aporta solo el slide que está en flujo, así que aparecía y desaparecía al
	   cambiar de foto y hacía saltar todo lo que viene abajo. */
	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-slider .slider > .slide {
		margin-bottom: 0;
		vertical-align: top;
	}

	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-slider .slider > .slide:not(.hf-slide-activa) {
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-slider .slider > .slide.hf-slide-activa {
		position: relative !important;
		z-index: 1;
	}


	/* --- Flechas sobre la foto --- */

	.hf-galeria__flecha {
		position: absolute;
		top: 50%;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		transform: translateY(-50%);
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, .95);
		box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
		color: #333;
		opacity: 0;
		cursor: pointer;
		transition: opacity .15s ease, background-color .15s ease;
	}

	.hf-galeria__flecha--anterior {
		left: calc(var(--hf-galeria-sangria) + 12px);
	}

	.hf-galeria__flecha--siguiente {
		right: 12px;
	}

	/* Aparecen al entrar a la foto, como en ML, para no taparla el resto del
	   tiempo. Con :focus-visible se muestran igual: son el único acceso a la
	   foto siguiente para quien navega con teclado. */
	.hf-galeria .product-slider:hover .hf-galeria__flecha,
	.hf-galeria__flecha:focus-visible {
		opacity: 1;
	}

	.hf-galeria__flecha:hover {
		background: #fff;
	}

	/* En el extremo la flecha no se muestra ni recibe el click, en vez de dar
	   una vuelta circular que desorienta cuando hay quince fotos. */
	.hf-galeria .product-slider .hf-galeria__flecha[disabled] {
		opacity: 0 !important;
		pointer-events: none;
	}


	/* --- Columna de miniaturas --- */

	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .slider {
		position: relative;
	}

	/* El scroll se enciende solo cuando las miniaturas no entran en el alto de
	   la foto —el JS pone la clase y el tope—, y no siempre: convertir la columna
	   en un contenedor con scroll hace que Chrome deje miniaturas ya descargadas
	   sin pintar. Con cuatro fotos o menos, que es casi todo el catálogo, la
	   columna entra y ni se expone al problema. Ver repintarColumna() en el JS
	   para el caso en que sí hace falta. */
	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .slider.hf-thumbs-scroll {
		overflow-y: auto;
		scroll-behavior: smooth;
		/* La barra propia del contenedor se oculta: el aviso de que quedan
		   miniaturas fuera lo da el degradado. */
		scrollbar-width: none;
	}

	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .slider.hf-thumbs-scroll::-webkit-scrollbar {
		display: none;
	}

	.hf-galeria .product-thumbs .thumb {
		cursor: pointer;
	}

	/* Degradado en el borde por el que quedan miniaturas fuera de vista. */
	.hf-galeria .product-thumbs .slider.hf-hay-arriba.hf-hay-abajo {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
	}

	.hf-galeria .product-thumbs .slider.hf-hay-arriba:not(.hf-hay-abajo) {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
		mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
	}

	.hf-galeria .product-thumbs .slider.hf-hay-abajo:not(.hf-hay-arriba) {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
	}

	/* Miniatura activa.
	   Primero se apaga la de Salient: su scroll-spy (leftAlignedActive) sigue
	   marcando .active sobre alguna miniatura según dónde caen los slides, y con
	   todos en la misma posición ese cálculo ya no significa nada —termina
	   señalando una foto que no es la que se ve—. El estado real lo lleva
	   .hf-thumb-activa.

	   Los !important son inevitables: la regla que pinta ese borde la genera
	   Salient con el color de acento en css/colors.php y ya viene con
	   !important. El `body` de más iguala su especificidad. */
	body.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .thumb a.active img {
		border-color: transparent !important;
	}

	body.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .thumb.hf-thumb-activa img,
	body.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .thumb.hf-thumb-activa a.active img {
		border-color: #0f6fd6 !important;
	}

	body.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .thumb:hover img {
		border-color: #0f6fd6 !important;
	}
}

@media only screen and (min-width: 1000px) and (prefers-reduced-motion: reduce) {

	.single-product .product[data-gallery-style="left_thumb_sticky"] .hf-galeria .product-thumbs .slider {
		scroll-behavior: auto;
	}

	.hf-galeria__flecha {
		transition: none;
	}
}

/*
 * "Gratis" del servicio de armado de PC.
 *
 * El span lo imprime el plugin hf-arma-tu-pc en el carrito, el checkout y el
 * resumen del pedido. El estilo vive acá y no en el CSS del plugin porque ese
 * se encola solo en la pantalla del configurador, y estas tres no lo son.
 */
.hf-atp-gratis {
	color: #00a650;
	font-weight: 700;
}

/*
 * Banners del Nectar Slider: clickeables enteros y con cursor de link.
 *
 * La capa <a class="hf-slide-link"> la inyecta js/hf-slider-clickable.js, que
 * también le pone la clase hf-slide-clickable al slide. Acá va todo lo visual.
 *
 * El z-index 50 la deja por encima del fondo (.slide-bg-wrap) y por debajo del
 * texto (.content usa 100 en el CSS del plugin), para que el botón siga siendo
 * el que recibe el hover. Como .content ocupa una franja de ancho completo,
 * apagamos sus pointer-events y se los devolvemos solo a lo que es interactivo:
 * si no, esa franja se comería los clicks que van a la capa.
 *
 * El cursor va sobre el slide y sus hijos porque el slider escribe
 * `cursor: grab` inline en el .swiper-container (nectar-slider.js, bloque Grab
 * Cursor) y desde ahí se hereda. Una regla propia sobre el elemento gana sobre
 * un valor heredado, así que no hace falta ningún !important. El arrastre sigue
 * funcionando: lo único que cambia es el dibujo del cursor.
 */
.nectar-slider-wrap .swiper-slide .hf-slide-link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	/* Con transición de fundido los slides quedan apilados en el mismo lugar y
	   los que no se ven solo tienen opacity 0: sin esto, la capa de un slide
	   oculto se quedaría con el click del que sí está a la vista. */
	pointer-events: none;
}

.nectar-slider-wrap .swiper-slide.swiper-slide-active .hf-slide-link,
.nectar-slider-wrap .swiper-slide.swiper-slide-visible .hf-slide-link {
	pointer-events: auto;
}

.nectar-slider-wrap .swiper-slide.hf-slide-clickable,
.nectar-slider-wrap .swiper-slide.hf-slide-clickable .container,
.nectar-slider-wrap .swiper-slide.hf-slide-clickable .content,
.nectar-slider-wrap .swiper-slide.hf-slide-clickable .content * {
	cursor: pointer;
}

.nectar-slider-wrap .swiper-slide.hf-slide-clickable .container,
.nectar-slider-wrap .swiper-slide.hf-slide-clickable .content {
	pointer-events: none;
}

.nectar-slider-wrap .swiper-slide.hf-slide-clickable .content a,
.nectar-slider-wrap .swiper-slide.hf-slide-clickable .content button {
	pointer-events: auto;
}

/* -------------------------------------------------------------------------
 * Especificaciones del producto
 *
 * Reemplaza la tabla de WooCommerce (una fila por dato, valores pegados a la
 * izquierda y el resto del ancho en blanco). El markup lo arma
 * woocommerce/single-product/product-attributes.php.
 *
 * Dos modos, y los decide la cantidad de datos del producto:
 *
 *   .hf-specs           agrupado — las columnas reparten SECCIONES
 *   .hf-specs--simple   sin agrupar — las columnas reparten FILAS
 *
 * En los dos casos se usa multi-columna y no grid: el alto de cada sección
 * depende de cuántos datos le tocaron, y `columns` las va acomodando sola sin
 * tener que saber de antemano cuál es más larga.
 * ------------------------------------------------------------------------- */

/*
 * Tres columnas donde entran.
 *
 * Con dos, cada fila medía 650 px y la etiqueta quedaba tan lejos del valor que
 * había que seguir el renglón con el dedo. Tres las deja en 400 y pico, que es
 * el ancho en que el par se lee de un golpe de vista.
 */
.hf-specs {
	column-gap: 56px;
	columns: 2;
	margin-top: 4px;
}

@media only screen and (min-width: 1150px) {

	.hf-specs {
		columns: 3;
	}
}

/* Una sección partida al medio entre dos columnas es ilegible: el título queda
   arriba a la derecha y sus datos abajo a la izquierda. */
.hf-specs__grupo {
	break-inside: avoid;
	page-break-inside: avoid;
	padding-bottom: 26px;
}

.hf-specs__titulo {
	border-bottom: 1px solid #0f6fd6;
	color: #0f6fd6;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	margin: 0 0 2px;
	padding-bottom: 6px;
	text-transform: uppercase;
}

.hf-specs__lista {
	margin: 0;
}

/* El flex-wrap es para los valores que no entran al lado de su etiqueta —un
   "Core i7 13620H" en la columna angosta del medio—. Sin él, el dato se parte
   por la mitad y se lee como dos filas distintas; con él baja entero al
   renglón de abajo, y el margin-left del valor lo mantiene contra la derecha
   cuando queda solo en su línea. */
.hf-specs__fila {
	align-items: baseline;
	border-bottom: 1px solid #ececec;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 20px;
	justify-content: space-between;
	padding: 9px 0;
}

.hf-specs__etiqueta {
	color: #666;
	flex: 0 1 auto;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}

/* El valor pegado a la derecha es lo que llena el ancho: la etiqueta y el dato
   quedan en los dos extremos de la fila, y el ojo los recorre de una. */
.hf-specs__valor {
	color: #1a1a1a;
	flex: 0 1 auto;
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 0 auto;
	padding: 0;
	text-align: right;
}

/* WooCommerce envuelve cada valor en un <p>, y Salient le da 21px de padding
   abajo a todos los <p> del contenido. Sin esto cada fila mide 65px en vez de
   44 y la grilla vuelve a ser tan alta como la tabla que reemplaza. */
.hf-specs__valor p {
	margin: 0;
	padding: 0;
}

/*
 * Sin agrupar, las columnas reparten FILAS y no secciones, así que el
 * multi-columna baja un nivel: al <dl>, que es el que las contiene. Dejarlo
 * arriba no hacía nada visible —la única sección se mantiene entera por el
 * break-inside de más arriba y quedaba todo en la primera columna—.
 *
 * Cuántas columnas lo decide el PHP según cuántos datos hay. El ancho se acota
 * para que tres datos no queden con veinte centímetros de aire entre la
 * etiqueta y el valor.
 */
.hf-specs--simple {
	columns: 1;

	/*
	 * El ancho sale de cuántas columnas hay, para que una fila suelta mida lo
	 * mismo que una columna del caso de dos. Con `max-width` fijo, un producto
	 * de un solo dato estiraba esa fila a 900 px y dejaba la etiqueta y el
	 * valor en dos puntas opuestas de la pantalla.
	 */
	max-width: calc(
		var(--hf-specs-columnas, 2) * 420px +
		(var(--hf-specs-columnas, 2) - 1) * 56px
	);
}

.hf-specs--simple .hf-specs__grupo {
	break-inside: auto;
	padding-bottom: 0;
}

.hf-specs--simple .hf-specs__lista {
	column-gap: 56px;
	columns: var(--hf-specs-columnas, 2);
}

.hf-specs--simple .hf-specs__fila {
	break-inside: avoid;
	page-break-inside: avoid;
}

@media only screen and (max-width: 999px) {

	.hf-specs {
		column-gap: 40px;
	}
}

/* Una sola columna en el teléfono: partido en dos, cada fila queda tan angosta
   que la etiqueta y el valor se pisan. */
@media only screen and (max-width: 690px) {

	.hf-specs,
	.hf-specs--simple .hf-specs__lista {
		columns: 1;
	}

	.hf-specs__fila {
		gap: 14px;
	}
}


/* ==========================================================================
   Formulario de cotización corporativa (Contact Form 7, página Corporativo)

   El markup lo define el formulario "Cotización corporativa" de CF7: una
   grilla de campos bajo .hf-cf7. Todo el bloque cuelga de esa clase para no
   tocar ningún otro formulario del sitio.

   Estética de la maqueta aprobada: inputs blancos con borde fino, rubros como
   chips a la vista (HF pidió pocos controles y nada escondido) y botón
   pastilla oscuro.
   ========================================================================== */

.hf-cf7 {
	--hf-cf7-azul: #0f6fd6;
	--hf-cf7-azul-tenue: #f1f6fd;
	--hf-cf7-tinta: #0a1220;
	--hf-cf7-suave: #5a6577;
	--hf-cf7-borde: #dfe4ea;
	--hf-cf7-error: #c4361d;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	color: var(--hf-cf7-tinta);
}

/* El autop de CF7 envuelve cada campo en un <p> y convierte saltos en <br>, y
   Salient le da padding-bottom a todos los <p> del contenido. Con
   display:contents el <p> desaparece del layout y sus hijos pasan a ser parte
   de la columna del campo, sin tener que apagar el autop para todo el sitio. */
.hf-cf7 p {
	display: contents;
}

.hf-cf7 br {
	display: none;
}

.hf-cf7__campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hf-cf7__campo--ancho {
	grid-column: 1 / -1;
}

.hf-cf7 .hf-cf7__campo > label,
.hf-cf7 legend {
	color: var(--hf-cf7-tinta);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.hf-cf7 legend {
	margin: 0 0 10px;
	padding: 0;
}

.hf-cf7__opcional {
	color: var(--hf-cf7-suave);
	font-weight: 400;
}

/* --- Campos de texto ------------------------------------------------------ */

body .hf-cf7 input[type="text"],
body .hf-cf7 input[type="email"],
body .hf-cf7 input[type="tel"],
body .hf-cf7 input[type="date"],
body .hf-cf7 select,
body .hf-cf7 textarea {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--hf-cf7-borde);
	border-radius: 8px;
	box-shadow: none;
	color: var(--hf-cf7-tinta);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
}

body .hf-cf7 textarea {
	min-height: 110px;
	resize: vertical;
}

/* El date de Safari y de Chrome en iOS no toma el alto del padding como los
   demás inputs y queda más bajo que el campo de al lado. */
body .hf-cf7 input[type="date"] {
	min-height: 47px;
	-webkit-appearance: none;
	appearance: none;
}

body .hf-cf7 input::placeholder,
body .hf-cf7 textarea::placeholder {
	color: #9aa4b2;
	opacity: 1;
}

body .hf-cf7 input[type="text"]:focus,
body .hf-cf7 input[type="email"]:focus,
body .hf-cf7 input[type="tel"]:focus,
body .hf-cf7 input[type="date"]:focus,
body .hf-cf7 select:focus,
body .hf-cf7 textarea:focus {
	border-color: var(--hf-cf7-azul);
	box-shadow: 0 0 0 3px rgba(15, 111, 214, .14);
	outline: none;
}

body .hf-cf7 .wpcf7-not-valid {
	border-color: var(--hf-cf7-error);
}

body .hf-cf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--hf-cf7-error);
	font-size: 12.5px;
	line-height: 1.35;
}

/* --- Cantidad de equipos: el desplegable de Salient ------------------------
   Con "fancy forms" activado, Salient cambia cada <select> por un select2 y le
   mete adentro el <label> que lo precede, en un .fancy-select-wrap con 12px de
   aire arriba y el rótulo gris a 12px (color con !important). Sin esto el campo
   quedaba desalineado con Teléfono, con otro borde y otro alto. Todo va con
   body[data-fancy-form-rcs="1"] delante para pesar más que las reglas de
   salient-dynamic-styles.css, que lo usan igual. */

body[data-fancy-form-rcs="1"] .hf-cf7 .fancy-select-wrap {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-top: 0;
}

body[data-fancy-form-rcs="1"] .hf-cf7 .fancy-select-wrap label {
	display: block;
	padding: 0;
	color: var(--hf-cf7-tinta) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

body[data-fancy-form-rcs="1"] .hf-cf7 .select2-container {
	width: 100% !important;
}

body[data-fancy-form-rcs="1"] .hf-cf7 .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 47px;
	padding: 0 40px 0 14px;
	background: #fff;
	border: 1px solid var(--hf-cf7-borde);
	border-radius: 8px;
	box-shadow: none;
}

body[data-fancy-form-rcs="1"] .hf-cf7 .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--hf-cf7-tinta);
	font-size: 15px;
	line-height: 1.4;
}

/* "Elegí una opción" es la opción vacía: se pinta como los placeholders de los
   otros campos, no como un valor elegido. */
body[data-fancy-form-rcs="1"] .hf-cf7 select:has(option[value=""]:checked) + .select2-container .select2-selection__rendered {
	color: #9aa4b2;
}

body[data-fancy-form-rcs="1"] .hf-cf7 .select2-container--default .select2-selection--single .select2-selection__arrow {
	right: 8px;
}

body[data-fancy-form-rcs="1"] .hf-cf7 .select2-container--open .select2-selection--single,
body[data-fancy-form-rcs="1"] .hf-cf7 .select2-container--focus .select2-selection--single {
	border-color: var(--hf-cf7-azul);
	box-shadow: 0 0 0 3px rgba(15, 111, 214, .14);
}

/* --- Rubros y tipo de compra como chips -----------------------------------
   Los checkboxes de "Qué necesitás" y los radios de "Tipo de compra" (uso
   propio o reventa) comparten la pastilla, así el formulario tiene un solo
   lenguaje para elegir opciones. Lo único que cambia es el indicador: cuadrado
   con tilde en los checkboxes, redondo con punto en los radios. */

.hf-cf7 .wpcf7-checkbox,
.hf-cf7 .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

/* CF7 separa las opciones con un margen a la izquierda; el gap ya lo hace. */
.hf-cf7 .wpcf7-list-item {
	margin: 0;
}

.hf-cf7 .wpcf7-list-item > label {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 9px 15px;
	background: #fff;
	border: 1px solid var(--hf-cf7-borde);
	border-radius: 999px;
	color: var(--hf-cf7-tinta);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.hf-cf7 .wpcf7-list-item > label:hover {
	border-color: #bfcbda;
}

/* El checkbox o radio real queda accesible (foco, lector de pantalla) pero
   invisible: el indicador lo dibuja el ::before de la etiqueta. */
.hf-cf7 .wpcf7-list-item input[type="checkbox"],
.hf-cf7 .wpcf7-list-item input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.hf-cf7 .wpcf7-list-item-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hf-cf7 .wpcf7-list-item-label::before {
	content: "";
	box-sizing: border-box;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: #fff no-repeat center / 11px 11px;
	border: 1.5px solid #c5ceda;
	border-radius: 4px;
}

.hf-cf7 .wpcf7-list-item > label:has(input:checked) {
	background: var(--hf-cf7-azul-tenue);
	border-color: var(--hf-cf7-azul);
	font-weight: 500;
}

.hf-cf7 .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
	background-color: var(--hf-cf7-azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	border-color: var(--hf-cf7-azul);
}

.hf-cf7 .wpcf7-radio .wpcf7-list-item-label::before {
	border-radius: 50%;
}

/* Punto en vez de tilde: el anillo blanco de adentro deja ver el azul solo en
   el centro. */
.hf-cf7 .wpcf7-radio input:checked + .wpcf7-list-item-label::before {
	background-image: none;
	box-shadow: inset 0 0 0 3px #fff;
}

.hf-cf7 .wpcf7-list-item > label:has(input:focus-visible) {
	outline: 2px solid var(--hf-cf7-azul);
	outline-offset: 2px;
}

/* --- Pie: aclaración a la izquierda, botón a la derecha --------------------- */

.hf-cf7__pie {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
	padding-top: 22px;
	border-top: 1px solid #edf0f4;
}

.hf-cf7__aclaracion {
	order: 0;
	max-width: 40ch;
	margin-right: auto;
	color: var(--hf-cf7-suave);
	font-size: 13px;
	line-height: 1.4;
}

/* El spinner de CF7 ocupa lugar aunque esté oculto; va antes del botón para
   que el botón quede contra el borde derecho. */
.hf-cf7 .wpcf7-spinner {
	order: 1;
	margin: 0;
}

/* Selector largo e !important por Salient:
   `body[data-button-style=rounded] .container-wrap input[type=submit]` fija el
   padding con !important y pesa (0,3,2), y la tipografía de botones le pone
   `text-transform: capitalize` ("Enviar Consulta"). Este pesa (0,4,2). */
body .container-wrap .hf-cf7 input.hf-cf7__enviar[type="submit"] {
	order: 2;
	min-height: 46px;
	margin: 0;
	padding: 0 26px !important;
	background: var(--hf-cf7-tinta);
	border: 0;
	border-radius: 999px !important;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

body .container-wrap .hf-cf7 input.hf-cf7__enviar[type="submit"]:hover {
	background: #1b2536;
}

/* --- Mensaje de respuesta (fuera de .hf-cf7, dentro del form) -------------- */

body .wpcf7-form:has(.hf-cf7) .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid #edf0f4;
	border-radius: 8px;
	color: #0a1220;
	font-size: 14px;
	line-height: 1.45;
}

body .wpcf7-form.sent:has(.hf-cf7) .wpcf7-response-output {
	background: #edf8f1;
	border-color: #00a650;
}

body .wpcf7-form.invalid:has(.hf-cf7) .wpcf7-response-output,
body .wpcf7-form.unaccepted:has(.hf-cf7) .wpcf7-response-output {
	background: #fff7ed;
	border-color: #b54708;
}

body .wpcf7-form.failed:has(.hf-cf7) .wpcf7-response-output,
body .wpcf7-form.spam:has(.hf-cf7) .wpcf7-response-output,
body .wpcf7-form.aborted:has(.hf-cf7) .wpcf7-response-output {
	background: #fdf0ee;
	border-color: #c4361d;
}

@media only screen and (max-width: 690px) {

	.hf-cf7 {
		grid-template-columns: minmax(0, 1fr);
	}

	.hf-cf7__aclaracion {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hf-cf7 .wpcf7-list-item > label,
	body .container-wrap .hf-cf7 input.hf-cf7__enviar[type="submit"] {
		transition: none;
	}
}


/* ==========================================================================
   Acordeones "Minimal Shadow" de Salient (página Preguntas frecuentes)

   En el teléfono Salient mantiene el título del toggle en 24px —su regla
   `.toggle > h3.toggle-title a` no entra en la reducción de los h3 para
   mobile— y conserva 40px de padding a cada lado del toggle más 70px a la
   derecha del título para el ícono. Quedaban 180px de texto en una pantalla
   de 375: "¿Necesito crear una cuenta para comprar?" ocupaba cuatro renglones.
   El `body` de adelante es para ganarle a la hoja inline del elemento
   (.toggles--minimal-shadow .toggle > .toggle-title a).
   ========================================================================== */

@media only screen and (max-width: 690px) {

	body .toggles--minimal-shadow .toggle {
		padding: 0 18px;
	}

	body .toggles--minimal-shadow .toggle > .toggle-title a {
		font-size: 18px;
		line-height: 24px;
		padding: 20px 44px 20px 0;
	}
}

/* --- Tienda en "Próximamente": título con la tipografía del sitio ---------
   Con la tienda oculta, WooCommerce muestra su patrón coming-soon-store-only,
   que trae el título en Cardo (una serif propia de Woo) con la clase
   .has-cardo-font-family y !important. Se lo pasa a Plus Jakarta Sans en 500,
   como el resto de los títulos del sitio. La clase solo aparece en esa
   página. Pedido de Pedro el 04/10/2026. */
body h1.wp-block-heading.has-cardo-font-family {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 500;
}

/* El bloque de Woo no trae margen lateral y en el celular el texto quedaba
   pegado a los bordes y alineado a la izquierda (la clase de centrado de
   bloques no gana ahí). El texto se angosta para que no sea una sola línea
   larga en escritorio. */
.woocommerce-coming-soon-store-only {
	box-sizing: border-box;
	padding-left: 24px;
	padding-right: 24px;
}

.woocommerce-coming-soon-store-only h1.wp-block-heading,
.woocommerce-coming-soon-store-only p {
	text-align: center;
}

.woocommerce-coming-soon-store-only p {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 690px) {
	body .woocommerce-coming-soon-store-only h1.wp-block-heading {
		font-size: 28px;
		line-height: 34px;
	}

	body .woocommerce-coming-soon-store-only p {
		font-size: 15px;
		line-height: 23px;
	}
}