/**
 * Custom styles — Brandy (woodmart-child)
 *
 * Portado del "Custom CSS" del Customizer de producción y limpiado:
 *   - Eliminados typos / valores inválidos (`!;!i;!;`, `top: px`).
 *   - Media query `min-width:1025px` cerrado correctamente y des-anidado.
 *   - Selectores duplicados/en conflicto unificados dejando la regla que aplica.
 *   - `.topbar` removido: lo maneja `inc/header-bar.php` (barra de anuncios).
 *
 * Los `!important` que quedan pelean contra el tema padre (WoodMart) o plugins
 * de terceros (cwginstock, BAPF, woo-variation-gallery, CF7, reCAPTCHA): son
 * necesarios para ganar especificidad/estilos inline. No agregar nuevos a ciegas.
 */

/* ==========================================================================
   TOPBAR / BARRA SUPERIOR
   ========================================================================== */

.grecaptcha-badge {
    display: none !important;
}

fieldset.hidden-fields-container {
    display: none;
}

/* La barra superior nativa de WoodMart (.whb-top-bar) se oculta; la barra de
   anuncios real la renderiza inc/header-bar.php (.topbar). */
.whb-top-bar strong,
.whb-top-bar span,
.whb-top-bar b,
.whb-top-bar {
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0.07em;
}

.whb-top-bar .wd-header-text {
    color: white !important;
    font-size: 15px !important;
    text-align: center;
}

.whb-top-bar {
    display: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* El header se ofsetea por la altura del topbar promo (26px). Lo manejamos con
   una variable para poder llevarlo a 0 cuando el topbar se oculta al scrollear
   (clase body.brandy-cats-hidden). */
:root {
    --brandy-topbar-h: 26px;
}
body.brandy-scrolled {
    --brandy-topbar-h: 0px;
}

.whb-main-header {
    top: var(--brandy-topbar-h) !important;
    /* Al EXPANDIR (volver) el header baja 0.3s después, junto con el topbar. */
    transition: top 0.3s ease 0.3s;
}

/* Al OCULTAR (scroll abajo) el header sube de una, junto con el topbar. */
body.brandy-scrolled .whb-main-header {
    transition-delay: 0s;
}

/* Entrada en bloque SOLO al cargar la página: la barra promo (.topbar) + todo
   el header (info + logo + buscador + menú de categorías) bajan juntos como un
   bloque. NO se repite al stickear (corre una vez por carga, no por cambio de
   clase). */
.whb-main-header,
.topbar {
    animation: wd-fadeInDownBig 0.5s ease;
}

/* ── Sticky header refinado ───────────────────────────────────────────────
   Al scrollear el TOP (info + logo + buscador) queda QUIETO; SOLO el submenú
   de categorías se cierra como una solapa, con transición suave. */

/* 1) Placeholder del sticky SIN la top-bar oculta de WoodMart.
   El tema reserva `padding-top: var(--wd-header-h)` en `.whb-sticky-prepared`
   (apenas scrolleás, ANTES de `.whb-sticked`). `--wd-header-h` incluye la top-bar
   (40px), pero esa fila está display:none (la reemplaza nuestra .topbar promo), así
   que el placeholder queda 40px de más => salto de 40px del contenido al scrollear.
   El tema YA trae un auto-fix (`:root:has(.whb-sticky-prepared):not(:has(.whb-top-bar))`
   que anula `--wd-top-bar-h`), pero depende de que el ELEMENTO no exista; nosotros lo
   ocultamos con display:none (sigue en el DOM) => no dispara. Lo corregimos a mano
   sobre `whb-sticky-prepared` (cubre el estado intermedio Y el sticked) para que el
   placeholder sea consistente en todo el scroll. Medido con puppeteer: salto 40px -> 0. */
.whb-header.whb-sticky-real.whb-sticky-prepared {
    padding-top: calc(var(--wd-header-general-h) + var(--wd-header-bottom-h)) !important;
}

/* 1.5) El header queda FIJO desde el estado "prepared". El tema lo pone
   position:absolute, lo que lo hace SCROLLEAR hasta arriba (top=0) y luego pegar un
   SNAP a fixed + 26px al stickear => salto de 26px de TODO el header. Fijándolo desde
   prepared se queda quieto en top:26 durante todo el scroll; lo único que se mueve es
   el submenú. Medido con puppeteer: snap del header 26px -> 0 (mainTop constante en 26). */
.whb-header.whb-sticky-prepared .whb-main-header {
    position: fixed !important;
}

/* Logueado en desktop: la admin bar de WP (32px, fija arriba) hace que el header,
   al volverse fixed (top:26), IGNORE esos 32px y TAPE el topbar promo (header-info).
   Sólo en ese caso lo bajamos 32px => queda debajo del topbar. (Sin login no aplica;
   en mobile la admin bar scrollea y no corresponde.) */
@media screen and (min-width: 783px) {
    body.admin-bar .whb-header.whb-sticky-prepared .whb-main-header {
        top: calc(32px + var(--brandy-topbar-h)) !important; /* 32 admin bar + topbar (26 ó 0) */
    }
}

/* 2) Ni el top NI el submenú se compactan al stickear: forzamos las alturas
   "sticky" a las llenas. Logo/buscador Y el menú de categorías quedan idénticos
   al pegarse — las CATEGORÍAS NO DESAPARECEN. (El tema reasigna --wd-header-*-h a
   la sticky en .whb-row al pegarse; por eso se toca la variable *sticky*.) */
.whb-header {
    --wd-header-general-sticky-h: var(--wd-header-general-h) !important;
    --wd-header-bottom-sticky-h: var(--wd-header-bottom-h) !important;
}

/* 3) El menú de categorías: por defecto SIEMPRE visible (anulamos el display:none
   que el tema le pone al stickear). En las páginas de productos un watcher lo
   oculta al bajar y lo muestra al subir (clase .brandy-cats-hidden, ver
   inc/header-cats-scroll.js). */
.whb-header.whb-sticked .whb-header-bottom {
    display: block !important;
}

.whb-header-bottom-inner {
    overflow: hidden;
    transition: height 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
    transition-delay: 0s; /* al EXPANDIR (sube) el submenú vuelve de una (primero) */
}

/* Al OCULTAR (scroll abajo) el submenú colapsa 0.3s DESPUÉS del topbar (stagger). */
body.brandy-cats-hidden .whb-header-bottom-inner {
    height: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    transition-delay: 0.3s;
}

/* El topbar promo (header-info) se despliega SÓLO al tocar el top: mientras NO
   estás arriba (body.brandy-scrolled) se desliza hacia arriba y se esconde. */
.topbar {
    /* Al EXPANDIR (volver al top) el topbar baja 0.3s después (último). */
    transition: transform 0.3s ease 0.3s;
}
/* Al OCULTAR (scroll abajo) el topbar se va de una (primero). */
body.brandy-scrolled .topbar {
    transform: translateY(-100%);
    transition-delay: 0s;
}

.main-page-wrapper {
    padding-top: 80px;
}

.home .main-page-wrapper {
    margin-top: 10px;
}

.site-logo,
.site-logo img {
    max-width: 180px !important;
    width: 100%;
    padding-right: 15px;
}

/* Nav principal: padding compacto (gana al default de WoodMart). */
.wd-nav > li > a {
    padding: 0 9px !important;
    font-size: 12px;
}

/* Buscador del header: posicionado a la derecha (al lado del carrito) y con
   ancho que entra "Buscar productos". En prod habia 2 reglas: una vieja
   (180px !important) y otra con margin-left:auto + 290px. NO eran duplicadas:
   la 2da agregaba el posicionamiento. Esta es la intencion real. */
form.searchform.wd-style-default,
form.searchform.wd-style-default input {
    max-width: 290px;
    min-width: 290px;
    width: 100%;
    margin-right: 0;
    margin-left: auto;
    font-size: 12px;
}

.wd-info-box .info-svg-wrapper,
.wd-info-box .info-svg-wrapper svg {
    max-width: 55px;
    max-height: 55px;
}

ul.wd-nav.wd-nav-mob-tab.wd-style-underline {
    display: none;
}

.wd-side-hidden.wd-left {
    padding-top: 25px;
}

/* Menú con iconos (svg/i) alineados. */
ul.menu li {
    display: flex;
    align-items: center;
}

ul.menu li svg {
    width: 10px;
    height: 14px;
    margin-right: 5px;
    opacity: .5;
}

ul.menu li i {
    margin-right: 5px;
}

/* ==========================================================================
   POPUP
   ========================================================================== */

.wd-popup.wd-promo-popup {
    background: white;
}

div.wd-popup.wd-promo-popup {
    position: relative;
}

button.mfp-close {
    position: absolute;
    color: black;
}

.tabs-layout-accordion .wd-scroll-content {
    padding-right: 20px;
    max-height: 475px;
}

/* ==========================================================================
   HOME
   ========================================================================== */

.textwidget svg {
    fill: white;
}

.wrapp-category h3 {
    font-weight: 700;
}

.cat-design-default .wd-entities-title {
    position: static;
}

.cat-design-default .hover-mask {
    position: static;
    padding: 10px;
    text-align: center;
    width: 100%;
    transform: none;
}

.cat-design-default .more-products {
    display: none;
}

/* ==========================================================================
   CUOTAS / PAGOS
   ========================================================================== */

.cuotas-logo {
    margin-top: -10px;
    max-width: 160px;
}

.single-product .cuotas {
    margin-bottom: 15px;
    color: black;
}

.product-grid-item .cuotas {
    font-size: 11px;
}

.product-grid-item .pago-con-transf {
    font-size: 12px;
    margin-bottom: 20px;
}

.summary-inner .pago-con-transf {
    margin-bottom: 20px;
    color: black;
}

/* ==========================================================================
   FORMULARIO DE CONTACTO (CF7)
   ========================================================================== */

form.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

form.wpcf7-form label {
    color: white;
}

form.wpcf7-form p {
    flex: 0 0 calc(50% - 10px);
}

form.wpcf7-form p:nth-of-type(5),
form.wpcf7-form p:nth-of-type(6) {
    flex: 0 100%;
}

form.wpcf7-form p:nth-of-type(5) textarea {
    min-height: 100px;
    max-height: 100px;
}

form.wpcf7-form p:nth-of-type(6) {
    text-align: center;
}

form.wpcf7-form p:nth-of-type(6) input {
    background: #BEA163 !important;
    color: white !important;
}

#prefooter-newsletter form.wpcf7-form p {
    flex: auto;
}

#form-contacto form.wpcf7-form label {
    color: black;
}

/* ==========================================================================
   FILTROS
   ========================================================================== */

div#filtros .elementor-shortcode {
    display: flex;
    flex-wrap: wrap;
}

div#filtros .elementor-shortcode > div {
    flex: 0;
    max-width: 25%;
    min-width: 25%;
}

.bapf_sfilter .bapf_body .mCSB_container > ul,
.bapf_sfilter .bapf_body > ul {
    padding: 0 !important;
}

.bapf_sfilter.bapf_ckbox input[type=checkbox],
.bapf_sfilter.bapf_ckbox label,
.bapf_sfilter.bapf_ckbox label + span,
.bapf_sfilter.bapf_ckbox label > span {
    margin: 0 5px 0 0;
}

.bapf_sfilter .bapf_hascolarr,
.bapf_sfilter .bapf_hasdesc {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
}

/* ==========================================================================
   PRODUCTO
   ========================================================================== */

.page-title-default {
    background-image: none !important;
}

.single-product .product_title {
    margin-bottom: 0;
}

.single-product .summary-inner .price {
    margin-top: 20px;
}

.woo-variation-product-gallery {
    max-width: 100% !important;
}

.pswp {
    display: none;
}

/* Swatches de talle/color */
.selecciona-talle {
    font-weight: bold;
    color: black;
    margin-bottom: 5px;
}

.summary-inner .swatches-select {
    display: none;
}

.product:not(.product-grid-item) .swatches-select[data-id="pa_color"] {
    display: none;
}

.product-grid-item .thwvsf_fields {
    display: none;
}

/* Single product: el atributo color lo pinta WoodMart (circulo rgb, correcto).
   ThemeHigh ademas renderiza un swatch-imagen con placeholder.png roto debajo ->
   ocultarlo SOLO en el td de color (ese td lleva la clase with-swatches que agrega
   WoodMart cuando renderiza su swatch; el td de talle NO la tiene, asi que el talle
   de ThemeHigh queda intacto). */
.single-product td.value.with-swatches .thwvsf_fields {
    display: none !important;
}

.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.attr_swatch_design_default {
    width: 45px;
    height: 72px;
}

/* Talle: botones CUADRADOS en una fila que envuelve.
   El estilo base (bordes, radio, seleccionado, tooltip) lo pone el Code Snippet
   #13 "Visualizacion de talles y colores", que fuerza grid de 2 columnas con
   botones anchos via `ul...:has(.attribute_pa_talle){display:grid;...!important}`
   y `.attribute_pa_talle{width:100%;flex:1 1 calc(50% - 4px)!important}`.
   Acá overrideamos SOLO el layout (grid->fila, ancho->cuadrado) con mayor
   especificidad (body.single-product) para ganarle sin tocar la DB del snippet. */
body.single-product ul.thwvsf-wrapper-ul:has(.attribute_pa_talle) {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap;
    gap: 8px;
    max-width: none !important;
    width: auto;
    padding: 0 !important;
}

body.single-product .thwvsf-wrapper-item-li.attribute_pa_talle {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Variaciones NO disponibles -> OCULTAR del todo.
   - .deactive   = el combo no existe para la seleccion actual (ej. color 100% private).
   - .out_of_stock = el combo existe pero sin stock.
   Antes habia una contradiccion: el primer bloque las dejaba en pointer-events:all
   (clickeables) y mas abajo .deactive en display:none. Al alcanzar (programatica o
   por race) un swatch no disponible, ThemeHigh disparaba alert('No combination') y
   $select.val('') -> deseleccionaba y rompia el form. Ocultarlas elimina la raiz. */
.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.deactive,
.thwvsf-wrapper-ul .thwvsf-wrapper-item-li.out_of_stock {
    display: none !important;
}

/* Variaciones */
.variations_form tr {
    margin-bottom: 20px;
}

.variations_form .variations td {
    padding-bottom: 5px;
}

.variations tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Label (ej. "Color: GZA/NEGRA") y los swatches en la MISMA fila, no apilados.
   OJO: la celda del label es <th class="label cell"> (NO td) en WoodMart, por eso
   hay que apuntar a .label (no td.label). No debe encogerse ni partir el texto. */
.variations tr .label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 14px;
    margin-bottom: 0;
    white-space: nowrap !important;
}

/* labels internos a inline+nowrap: el tema los pone display:flex y eso, sumado al
   shrink de la celda, partía "Color : GZA/NEGRA" en dos líneas. */
.variations tr .label label {
    display: inline !important;
    white-space: nowrap !important;
    width: auto !important;
}

.variations tr td.value {
    /* basis 0 -> el value no empuja el wrap de la fila (label + value quedan en
       la misma línea) y crece para llenar el espacio restante; los swatches
       fluyen en una sola fila dentro de ese espacio. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.variations_form .variations label:after {
    display: none;
}

.variations_form .reset_variations {
    display: none !important;
}

.variations_form .label label {
    display: flex;
    align-items: center;
}

span.wd-attr-selected {
    display: none !important;
}

button.single_add_to_cart_button.button.alt.disabled.wc-variation-is-unavailable {
    opacity: 0.1;
}

/* Avisame cuando haya stock (cwginstock) */
.cwginstock-subscribe-form .center-block {
    margin-bottom: 0;
}

.cwginstock-subscribe-form .panel-primary {
    border-color: black;
}

.cwginstock-subscribe-form .panel-primary > .panel-heading {
    background: black;
    border-color: black;
}

.cwginstock-panel-heading h4 {
    margin: 0;
    text-transform: uppercase;
}

.cwgstock_button {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
    display: none;
}

div#framePayments {
    display: none !important;
}

/* ==========================================================================
   WHATSAPP (cresta chat)
   ========================================================================== */

.cresta-whatsapp-chat-box svg#whatsapp-msng-icon {
    width: 40px;
    height: 40px;
}

.cresta-whatsapp-chat-box svg#close-icon,
.cresta-whatsapp-chat-box svg#whatsapp-msng-icon {
    top: 10px;
    left: 11px;
}

@media screen and (max-width: 600px) {
    .cresta-whatsapp-chat-box svg#close-icon,
    .cresta-whatsapp-chat-box svg#whatsapp-msng-icon {
        top: 7.5px;
        left: 7.5px;
    }

    .cresta-whatsapp-chat-box svg#whatsapp-msng-icon {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================================================
   TÍTULO DE PÁGINA (responsive)
   ========================================================================== */

@media (min-width: 1025px) {
    .title-size-small {
        padding: 5px 0;
    }

    .page-title {
        position: relative;
        margin-top: -40px;
        margin-bottom: 20px;
        padding: 10px 0;
    }

    .wd-action-btn.wd-style-text > a {
        position: relative;
        font-weight: 600;
        font-size: 18px;
        line-height: 2;
    }
}

@media (max-width: 768px) {
    .product-image-summary-inner > div:last-child {
        margin-bottom: 25px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Ícono de categoría A CADA LADO del título (.wd-page-title)
   · inc/category-icons.php
   Dos copias del SVG (inline, currentColor) flanquean el título:
   [ícono] TÍTULO [ícono]. Reemplaza al botón "atrás" (oculto).
   ────────────────────────────────────────────────────────────────────────── */

/* sin botón atrás: los íconos ocupan los flancos del título */
.wd-page-title.with-back-btn .wd-back-btn {
    display: none !important;
}

/* centra el grupo [ícono][título][ícono] */
.wd-page-title.with-back-btn .wd-title-wrapp {
    justify-content: center;
}

.wd-page-title.with-back-btn .wd-title-wrapp .brandy-cat-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: currentColor;   /* hereda el color del título => siempre visible */
}

.brandy-cat-icon--left {
    order: -1;                 /* a la izquierda del título */
    margin-inline-end: 18px;
}

.brandy-cat-icon--right {
    order: 1;                  /* a la derecha del título */
    margin-inline-start: 18px;
}

.brandy-cat-icon svg {
    display: block;
    width: 120px;   /* x3 */
    height: 120px;
}

@media (max-width: 1024px) {
    .brandy-cat-icon--left  { margin-inline-end: 12px; }
    .brandy-cat-icon--right { margin-inline-start: 12px; }

    .brandy-cat-icon svg {
        width: 60px;
        height: 60px;
    }
}

/* ==========================================================================
   FIXES — botones flotantes + add-to-cart ícono (mobile)
   ========================================================================== */

/* 1) Back-to-top (.scrollToTop) se solapaba con el botón de WhatsApp (Chaty):
   ambos fixed abajo-derecha. Lo subimos para que quede ARRIBA del de WhatsApp. */
.scrollToTop {
    bottom: 92px !important;
}

@media (max-width: 768px) {
    .scrollToTop {
        bottom: 86px !important;
    }
}

/* 2) Botón "add to cart" estilo ícono en la grilla de productos: en mobile (sin
   hover) quedaba un CÍRCULO BLANCO vacío — el ícono de carrito sólo aparecía al
   hacer hover (desktop). Forzamos el ícono visible y oscuro, y ocultamos el texto
   "COMPRAR" (el botón es estilo ícono). */
.wd-products .wd-add-btn.wd-style-icon > a {
    position: relative;
    color: #211f1c;
}

.wd-products .wd-add-btn.wd-style-icon > a > span {
    font-size: 0;
}

.wd-products .wd-add-btn.wd-style-icon > a::before {
    content: var(--wd-btn-icon, "\f123");
    font-family: "woodmart-font";
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    color: #211f1c;
    opacity: 1;
    transform: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3) GAP en mobile entre el header y el banner de sección (.wd-page-title):
   el header mobile es ESTÁTICO (~60px en flujo) pero .main-page-wrapper reserva
   padding-top:80px (pensado para el header FIXED de desktop) => ~54px de vacío
   feo. En desktop se compensa con .page-title{margin-top:-40px} (min-width:1025).
   En mobile sólo hace falta limpiar el overshoot del .whb-main-header (top:26px). */
@media (max-width: 1024px) {
    .main-page-wrapper {
        padding-top: 26px;
    }

    /* El placeholder sticky del header usa alturas de DESKTOP
       (calc(--wd-header-general-h[90] + --wd-header-bottom-h[52]) = 142px), pero el
       header mobile real es ~60px y el row de categorías está display:none. Al
       stickear, esos 142px dejan ~82px de gap pegado entre header y banner. En mobile
       lo fijamos a la altura real del header (60px); con el padding-top:26px del
       wrapper, el contenido queda justo bajo el header fijo (60+26 = 86). */
    .whb-header.whb-sticky-real.whb-sticky-prepared {
        padding-top: 60px !important;
    }
}