/* bh_home — CSS responsive para el schema v2 (mobile-first, sin frameworks).
 *
 * Breakpoints:
 *   ≤480 (phone)  ·  481-767 (large phone)  ·  768-1023 (tablet)  ·  ≥1024 (desktop)
 *
 * Convención: classes BEM `bh-<bloque>__<elemento>--<modificador>`.
 * Custom properties (--bh-*) son SET por el template Smarty inline en el
 * style del slide para que el CSS estático sea reutilizable.
 */

/* ─── Reset mínimo ───────────────────────────────────────────────── */
.bh-hero, .bh-banners, .bh-services, .bh-products, .bh-image-row,
.bh-blog-gallery, .bh-section-title, .bh-html, .bh-module { box-sizing: border-box; }
.bh-hero *, .bh-banners *, .bh-services *, .bh-products *, .bh-image-row *,
.bh-blog-gallery *, .bh-section-title *, .bh-html *, .bh-module * { box-sizing: inherit; }

/* ─── Fuente: forzar Jost en TODO bh_home ─────────────────────────
 * Problema del intento previo (inherit + var(--body-font-family)):
 *  1) bh-home.css se carga ANTES que child-theme.css en el HTML del
 *     home (línea 124 vs 130). Cuando dos reglas con misma especificidad
 *     entran en conflicto, gana la última en la cascada → reglas del
 *     theme pisaban las nuestras.
 *  2) El theme padre avanamclassic define `--body-font-family:"Open Sans"`
 *     en algunos contextos y el child-theme lo redefine a "Jost" — la
 *     resolución de la variable depende del scope donde está definida.
 *  3) Reglas tipo `body .product-title { font-family: var(--product-title-family) }`
 *     tenían misma especificidad que nuestro `.bh-products *` y ganaban
 *     por orden de carga.
 *
 * Solución brutal pero limpia: importar Jost nosotros mismos (defensivo
 * por si el theme cambia) y aplicar `font-family: "Jost", sans-serif`
 * con !important sobre TODOS los descendientes de bh_home. !important
 * en font-family es aceptable aquí — es una decisión global de marca
 * (toda la home debe ser Jost, sin excepciones). */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

.bh-hero, .bh-banners, .bh-services, .bh-products, .bh-image-row,
.bh-blog-gallery, .bh-section-title, .bh-html, .bh-module,
.bh-hero *, .bh-banners *, .bh-services *, .bh-products *, .bh-image-row *,
.bh-blog-gallery *, .bh-section-title *, .bh-html *, .bh-module * {
    font-family: 'Jost', sans-serif !important;
}

/* Suprimir scroll horizontal cuando hay full-bleed (100vw + márgenes
 * negativos). El theme avanam-classic no fija overflow-x en body por
 * defecto. Como este CSS sólo se carga cuando BH_HOME_ENABLED=1, no
 * afecta a otras páginas. */
html, body { overflow-x: hidden; }

/* ─── Visibilidad por plataforma ─────────────────────────────────
 * Cada sección lleva opcionalmente bh-hide-d / bh-hide-t / bh-hide-m
 * según `section.visibility` en el schema. Permiten ocultar la sección
 * en desktop / tablet / móvil de forma independiente desde el editor.
 *
 * Breakpoints alineados con los del resto del CSS:
 *   mobile  ≤ 767px
 *   tablet  768 – 1023px
 *   desktop ≥ 1024px
 *
 * !important porque algunas secciones tienen sus propios `display: flex`
 * en root y necesitamos forzar el ocultamiento. */
@media (max-width: 767px) {
    .bh-hide-m { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .bh-hide-t { display: none !important; }
}
@media (min-width: 1024px) {
    .bh-hide-d { display: none !important; }
}

/* ====================================================================
 *  HERO — slider con composición visual integrada (zonas producto+texto)
 * ==================================================================== */

.bh-hero {
    position: relative; overflow: hidden;
    /* Altura responsiva — antes 420px fijo en móvil generaba grandes
     * zonas vacías cuando el producto recortado era pequeño. Ahora:
     *   - móvil:  360px (suficiente para imagen + texto sin huecos)
     *   - tablet: 480px
     *   - desktop: 800px (var override)
     * Cualquier slide puede sobreescribir vía --bh-hero-h-{mobile,tablet,desktop}. */
    height: var(--bh-hero-h-mobile, 360px);
    /* Full-bleed: el theme avanam-classic envuelve displayHome en un
     * container con max-width. Para que el hero ocupe edge-to-edge
     * forzamos un break-out del container vía width:100vw + márgenes
     * negativos calculados desde la posición actual. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* margin-top sólo en desktop: el theme ceramica_brivahome usa
     * `.main-header` (position:absolute, bg transparente) sólo en
     * ≥1024px. En tablet/móvil tiene `.elementor-hidden-tablet/-phone`
     * y aparece otro header (`#header .site-header`) en flujo normal —
     * ahí el margin-top creaba un hueco grande entre cabecera y hero. */
    margin-top: 0;
}
@media (min-width: 768px) {
    .bh-hero { height: var(--bh-hero-h-tablet, 480px); }
}
@media (min-width: 1024px) {
    .bh-hero {
        height: var(--bh-hero-h-desktop, 800px);
        margin-top: clamp(60px, 8vw, 90px);
    }
}

.bh-hero__track { position: relative; height: 100%; }
.bh-hero__slide {
    position: absolute; inset: 0;
    /* Fade entre slides: en vez de display:none/flex (instantáneo)
     * usamos opacity + visibility con transition. Mantenemos display:flex
     * para que el layout interno (zonas producto+texto) siga calculado
     * y la imagen ya esté cargada al cambiar de slide. */
    display: flex; opacity: 0; visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    pointer-events: none;
}
.bh-hero__slide[data-active="1"] {
    opacity: 1; visibility: visible;
    transition: opacity .8s ease, visibility 0s linear 0s;
    pointer-events: auto;
    z-index: 1;
}
.bh-hero--single .bh-hero__slide { opacity: 1; visibility: visible; pointer-events: auto; }

/* Composición con producto recortado: 2 zonas lado a lado */
.bh-hero__slide--product-left  { flex-direction: row; }
.bh-hero__slide--product-right { flex-direction: row-reverse; }

.bh-hero__zone {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.bh-hero__zone--product { flex: 0 0 var(--bh-split, 50%); }
.bh-hero__zone--text    { flex: 1; padding: 24px clamp(24px, 5vw, 64px); }

.bh-hero__product {
    width: var(--bh-p-size-m, 75%);
    height: auto; max-height: 95%; object-fit: contain;
    transform: translate(var(--bh-p-ox, 0%), var(--bh-p-oy, 0%));
    display: block;
}
@media (min-width: 768px) {
    .bh-hero__product { width: var(--bh-p-size-t, 80%); }
}
@media (min-width: 1024px) {
    .bh-hero__product { width: var(--bh-p-size-d, 80%); }
}

/* Alineaciones del producto dentro de su zona */
.bh-hero__product--va-top    { align-self: flex-start; }
.bh-hero__product--va-center { align-self: center; }
.bh-hero__product--va-bottom { align-self: flex-end; }
.bh-hero__product--ha-left   { margin-right: auto; margin-left: 0; }
.bh-hero__product--ha-center { margin-left: auto; margin-right: auto; }
.bh-hero__product--ha-right  { margin-left: auto; margin-right: 0; }

/* Slide simple (sin producto) — texto centrado sobre el fondo */
.bh-hero__slide--simple { align-items: center; justify-content: center; }
.bh-hero__inner {
    display: flex; flex-direction: column;
    gap: 8px; padding: 24px clamp(16px, 5vw, 48px);
    max-width: 720px; text-align: center;
}

/* Textos */
.bh-hero__text {
    display: flex; flex-direction: column; gap: 8px;
    max-width: 560px;
}
.bh-hero__sub {
    margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--palette3, #222);
}
.bh-hero__title {
    margin: 0; font-size: clamp(24px, 5vw, 52px); line-height: 1.1; font-weight: 700;
    color: var(--palette3, #222);
}
.bh-hero__desc {
    margin: 0; font-size: 15px; line-height: 1.5; color: var(--palette5, #555);
}
.bh-hero__cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    /* Paleta del theme via brivathemecolor.php (que la inyecta en
     * ps_configuration y la cachea en theme-XXXX.css):
     *   color_button       = palette1 (#50624c verde)
     *   color_button_hover = palette11 (#809d7b verde claro)
     *   color_button_hover_text = palette3 (#222)
     * Fallback hard-coded por si el theme cambia. */
    background: var(--palette1, #50624c); color: #fff;
    text-decoration: none; font-weight: 600; font-size: 14px;
    letter-spacing: .05em; text-transform: uppercase;
    border-radius: 2px;
    transition: background .15s, color .15s, transform .15s;
    align-self: flex-start;
}
.bh-hero__cta:hover {
    background: var(--palette11, #809d7b);
    color: var(--palette3, #222);
}
.bh-hero__cta:active { transform: scale(.98); }

/* Mobile: el texto se apila debajo del producto con background propio.
 * Antes: zona producto tenía min-height: 55% y la imagen 75% — generaba
 * franjas vacías arriba/abajo del producto cuando era mucho más ancho que
 * alto (mesas, sofás, etc.). Ahora la imagen rellena más zona (~90%) y la
 * zona producto se ajusta a su contenido sin min-height forzado. */
@media (max-width: 767px) {
    .bh-hero__slide--product-left,
    .bh-hero__slide--product-right { flex-direction: column; }
    .bh-hero__zone--product {
        flex: 1 1 auto; min-height: 0;
        padding: 12px 12px 0;
    }
    .bh-hero__product { width: var(--bh-p-size-m, 90%); max-height: 100%; }
    .bh-hero__zone--text {
        flex: 0 0 auto;
        background: var(--bh-text-bg-mobile, rgba(240, 232, 223, .95));
        padding: 12px 20px 16px;
        text-align: center;
    }
    .bh-hero__text { max-width: 100%; align-items: center; gap: 4px; }
    .bh-hero__cta { align-self: center; margin-top: 10px; padding: 10px 24px; }
    .bh-hero__title { font-size: clamp(20px, 6vw, 30px); }
    .bh-hero__sub { font-size: 11px; }
}

/* Tablet (768-1023): mismo problema con menos intensidad. Reducir
 * padding de texto y aumentar producto al 85%. */
@media (min-width: 768px) and (max-width: 1023px) {
    .bh-hero__zone--text { padding: 20px clamp(20px, 4vw, 48px); }
    .bh-hero__product { width: var(--bh-p-size-t, 85%); }
}

/* Arrows (slider) */
.bh-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .85); color: #222;
    font-size: 26px; line-height: 1; cursor: pointer;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.bh-hero__arrow:hover { background: #fff; }
.bh-hero__arrow--prev { left: 16px; }
.bh-hero__arrow--next { right: 16px; }
@media (max-width: 767px) { .bh-hero__arrow { width: 36px; height: 36px; font-size: 20px; } }

/* Dots */
.bh-hero__dots {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 5;
}
.bh-hero__dot {
    width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255, 255, 255, .5); cursor: pointer;
    transition: background .15s, width .15s;
}
.bh-hero__dot[data-active="1"] { background: #fff; width: 24px; border-radius: 5px; }
@media (max-width: 767px) {
    .bh-hero__dots { bottom: auto; top: 12px; }
}

/* ====================================================================
 *  BANNERS — grid promocional con CTA opcional
 * ==================================================================== */

.bh-banners {
    display: grid; gap: 16px;
    padding: 32px 16px;
    max-width: 1430px; margin: 0 auto;
    grid-template-columns: 1fr;
}
.bh-banners--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bh-banners--cols-3 { grid-template-columns: repeat(2, 1fr); }
.bh-banners--cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) {
    .bh-banners--cols-2, .bh-banners--cols-3, .bh-banners--cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
    .bh-banners { gap: 20px; padding: 40px 24px; }
    .bh-banners--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .bh-banners--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Banner = <a> con la imagen como var(--bh-bg) sobre un pseudo-elemento
 * `::before` posicionado en absoluto. El zoom hover se aplica con
 * `transform: scale()` sobre el pseudo (animación suave, GPU-accelerated)
 * en lugar de background-size (saltos visibles y bug del WOODEN ARIRO
 * que encogía la imagen verticalmente al cambiar de cover a auto).
 * El contenido (título + subtítulo + CTA) es flex item normal alineado
 * a la derecha — sin position:absolute → sin conflictos de stacking. */
.bh-banner {
    position: relative; display: flex; overflow: hidden;
    border-radius: 4px; text-decoration: none;
    color: var(--palette3, #222);
    aspect-ratio: 16/7;
    justify-content: flex-end;
    isolation: isolate; /* Crea stacking-context aislado para el ::before */
}
.bh-banner::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--bh-bg);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transform: scale(1);
    transition: transform .8s ease;
    z-index: -1;
}
.bh-banner:hover::before { transform: scale(1.06); }

.bh-banner__content {
    padding: 24px clamp(20px, 5vw, 48px);
    text-align: left;
    max-width: 50%;
    align-self: center;
    /* Card semitransparente para legibilidad sobre cualquier imagen. */
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(2px);
    border-radius: 4px;
    margin-right: clamp(16px, 4vw, 48px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.bh-banner__title {
    font-size: clamp(18px, 2.5vw, 28px); font-weight: 700; margin: 0 0 6px;
    color: var(--palette3, #222); line-height: 1.2;
    text-transform: uppercase; letter-spacing: .04em;
}
.bh-banner__subtitle {
    font-size: clamp(13px, 1.4vw, 16px); margin: 0 0 14px;
    color: var(--palette5, #555); line-height: 1.3;
}
.bh-banner__cta {
    display: inline-block; padding: 10px 22px;
    background: var(--palette1, #50624c); color: #fff;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    border-radius: 2px;
    transition: background .15s;
}
.bh-banner:hover .bh-banner__cta {
    background: var(--palette11, #809d7b);
    color: var(--palette3, #222);
}

/* Variantes title_position
 *  - top   : texto en banda separada ARRIBA, imagen debajo. Sin overlap.
 *  - bottom: texto en banda separada ABAJO, imagen arriba. Sin overlap.
 *  - middle: card semitransparente centrada SOBRE la imagen (overlay con card).
 *  - overlay: gradient full sobre la imagen ocupando todo el lado.
 *
 * Para top/bottom el banner pasa a flex-column y la imagen (::before) deja
 * espacio al texto via padding-top o padding-bottom. El texto va con background
 * blanco opaco (#fff) y SIN backdrop-blur para que se lea claro y no se vea
 * tinta sobre la imagen.
 */
.bh-banner--top,
.bh-banner--bottom {
    flex-direction: column;
    justify-content: flex-start;
    aspect-ratio: auto;        /* la imagen ya no rellena todo; auto + padding */
}
.bh-banner--top    { padding-top: 0; padding-bottom: 56%; }    /* imagen ocupa 56% inferior */
.bh-banner--bottom { padding-top: 56%; padding-bottom: 0; }    /* imagen ocupa 56% superior */
.bh-banner--top::before    { top: auto; bottom: 0; height: 56%; }
.bh-banner--bottom::before { top: 0; bottom: auto; height: 56%; }

.bh-banner--top    .bh-banner__content,
.bh-banner--bottom .bh-banner__content {
    align-self: stretch;
    max-width: 100%;
    margin: 0;
    padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 40px);
    text-align: center;
    background: #fff;             /* opaco — texto separado, no overlay */
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
}

.bh-banner--middle .bh-banner__content { align-self: center; }

.bh-banner--overlay .bh-banner__content {
    background: linear-gradient(to left, rgba(255, 255, 255, .92) 30%, rgba(255, 255, 255, .6) 100%);
    box-shadow: none; backdrop-filter: none; border-radius: 0;
    margin: 0; max-width: 60%; min-height: 100%;
    padding-right: clamp(24px, 5vw, 64px);
    display: flex; flex-direction: column; justify-content: center;
}

/* En mobile: contenido full-width debajo de la imagen para que el texto
 * no quede comprimido y sea legible. El ::before queda sólo en el área
 * superior (padding-top crea espacio para la imagen). */
@media (max-width: 767px) {
    .bh-banner {
        aspect-ratio: auto;
        flex-direction: column; justify-content: flex-start;
        padding-top: 56%; /* placeholder para la imagen 16:9 */
    }
    .bh-banner::before {
        bottom: auto; height: 56%; min-height: 200px;
        background-size: cover;
    }
    .bh-banner:hover::before { transform: scale(1.04); }
    .bh-banner__content {
        max-width: 100%; margin: 0; padding: 16px 20px 20px;
        text-align: center; align-self: stretch;
        background: #fff; border-radius: 0; box-shadow: none; backdrop-filter: none;
    }
    .bh-banner--overlay .bh-banner__content { background: #fff; }
}

/* Banners cols-1: respetan el container max-width igual que cols-2/3/4
 * y que el resto de secciones (categorías, productos…). Solo el hero
 * hace break-out a full-bleed. Esto evita que la imagen quede
 * desproporcionadamente grande en pantallas >1430. La composición
 * fina (mover producto+texto+botón dentro del banner) se editará desde
 * el panel de configuración en Fase 7 con overlays similares al hero. */

/* ====================================================================
 *  SERVICES — fila de iconos+texto con SVG inline
 * ==================================================================== */

.bh-services {
    display: grid; gap: 24px;
    padding: 32px 16px;
    max-width: 1430px; margin: 0 auto;
    grid-template-columns: 1fr;
}
.bh-services--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bh-services--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bh-services--cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) {
    .bh-services--cols-2, .bh-services--cols-3, .bh-services--cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
    .bh-services { padding: 48px 24px; }
    .bh-services--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.bh-service {
    text-align: center; padding: 16px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.bh-service__icon {
    color: var(--palette1, #6aa700);
    display: flex; align-items: center; justify-content: center;
}
.bh-service__icon svg { display: block; }
.bh-service__title {
    font-weight: 700; font-size: 15px; color: var(--palette3, #222);
}
.bh-service__text {
    font-size: 13px; line-height: 1.5; color: var(--palette5, #777);
    max-width: 280px;
}
@media (min-width: 768px) {
    .bh-service__icon svg { width: 40px; height: 40px; }
    .bh-service__title { font-size: 16px; }
    .bh-service__text { font-size: 14px; }
}

/* ====================================================================
 *  PRODUCTS — lista curada (grid 4×2 / 3×2 / 3×1 según disponibilidad)
 * ==================================================================== */

.bh-products {
    padding: 32px 16px;
    max-width: 1430px; margin: 0 auto;
}
.bh-products__header {
    margin-bottom: 24px;
    text-align: center;
}
.bh-products__header--left   { text-align: left; }
.bh-products__header--right  { text-align: right; }
.bh-products__title {
    font-size: clamp(20px, 3vw, 28px); font-weight: 700; margin: 0;
    color: var(--palette3, #222);
}
.bh-products__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px)  { .bh-products__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
    .bh-products--cols-3 .bh-products__grid { grid-template-columns: repeat(3, 1fr); }
    .bh-products--cols-4 .bh-products__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (min-width: 768px)  { .bh-products { padding: 48px 24px; } }

/* ────────────────────────────────────────────────────────────────────
 *  PRODUCTO INDIVIDUAL — auto-suficiente
 *  ────────────────────────────────────────────────────────────────────
 *  Las secciones `bh-products` viven en bh-home.css (modulo, NO entra
 *  al bundle CCC del theme). Por eso replicamos AQUI todas las reglas
 *  visuales necesarias para que el render no dependa de:
 *
 *    - El theme parent (avanamclassic theme.css) que define background/border
 *      base del thumbnail-container.
 *    - El theme child (ceramica_brivahome child-theme.css) que define el
 *      overlay add-to-cart y el border:none scoped a .products.product-loop.
 *    - El bundle CCC (theme-*.css) que combina todo lo anterior. Si el
 *      bundle se queda stale (caso real visto en PROD jun 2026), los
 *      productos en bh-products se ven sin estilo.
 *
 *  Todas las reglas aqui usan `!important` cuando entran en cascada con
 *  el theme (border, font-size) para garantizar que ganemos. Esto SOLO
 *  afecta a articulos dentro de `.bh-products` -- categoria/novedades
 *  siguen viendose con el theme original.
 */

.bh-product { display: block; text-decoration: none; color: inherit; }
.bh-product__thumb .thumbnail-top { position: relative; display: block; }

/* CARD del producto: background blanco, esquinas redondeadas, sin borde
 * (usuario lo pidio quitar). Sin sombra: clean look.
 *
 * IMPORTANTE: forzar `display: block` en el <article> para que el thumb y el
 * info queden APILADOS verticalmente (imagen arriba, texto abajo). El theme
 * parent puede aplicar flex-row por defecto y dejarlos lado a lado. */
.bh-products .product-miniature {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.bh-products .product-miniature .bh-product__thumb,
.bh-products .product-miniature .thumbnail-container { display: block !important; }
.bh-products .product-miniature .bh-product__info,
.bh-products .product-miniature .product-description { display: block !important; }
.bh-products .product-miniature .thumbnail-container {
    background: var(--palette9, #fff) !important;
    border: none !important;
    border-radius: var(--border-radius, 4px) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative;
}
.bh-products .product-miniature .thumbnail-container .thumbnail-top,
.bh-products .product-miniature .thumbnail-container .product-thumbnail,
.bh-products .product-miniature .thumbnail-container img {
    border: none !important;
}

/* IMAGEN del producto: cuadrada (aspect 1:1) + contain (no recortar),
 * con un poco de padding alrededor. Asi en una grid 4-col las cards
 * quedan uniformes aunque los productos tengan aspect ratios distintos
 * (fotos contextuales, badges decorativos, etc.). */
.bh-products .product-miniature .thumbnail-container .product-thumbnail,
.bh-products .product-miniature a.bh-product__link {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #fff !important;
}
.bh-products .product-miniature .thumbnail-container .product-thumbnail img,
.bh-products .product-miniature img.bh-product__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px !important;       /* padding minimo para que la imagen ocupe el card */
    margin: 0 !important;
    background: #fff !important;
    transition: transform .25s ease;
}
.bh-products .product-miniature:hover .product-thumbnail img,
.bh-products .product-miniature:hover img.bh-product__image {
    transform: scale(1.04);
}

/* TITULO y PRECIO: tamaños propios (mas pequeños que h3 del theme). */
.bh-products h3.product-title,
.bh-products .bh-product__name.h3,
.bh-products .bh-product__name.product-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 8px 0 4px !important;
}
.bh-products .bh-product__name a { color: inherit; text-decoration: none; }
.bh-products .bh-product__price.product-price-and-shipping,
.bh-products .product-price-and-shipping .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--palette1, #6aa700) !important;
}

/* PRODUCT-DESCRIPTION: padding interno reducido para 4-col grid. */
.bh-products .product-miniature .product-description {
    padding: 8px 4px 4px !important;
    text-align: center;
}

/* OVERLAY "Añadir al carrito" — comportamiento responsive:
 *
 *   - DESKTOP / TABLET (>=768px): overlay flotante encima de la parte inferior
 *     de la imagen, OCULTO por defecto, aparece en hover sobre la card.
 *     El boton se desplaza desde abajo con fade-in.
 *
 *   - MOBILE (<768px): no hay hover real, el boton tiene que estar SIEMPRE
 *     visible como banda estatica debajo de la imagen (definido al final
 *     del bloque con un @media). */
.bh-products .bh-add-overlay {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    margin: 0 !important; padding: 0 !important;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 3;
}
.bh-products .product-miniature:hover .bh-add-overlay,
.bh-products .product-miniature:focus-within .bh-add-overlay,
.bh-products .product-miniature .thumbnail-container:hover .bh-add-overlay,
.bh-products .product-miniature .thumbnail-container:focus-within .bh-add-overlay {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* La imagen y el overlay viven dentro del mismo .thumbnail-container, que
 * tiene position:relative + overflow:hidden por las reglas de mas arriba.
 * Asi el overlay flotante queda confinado al area de la imagen. */
.bh-products .bh-add-overlay__btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 8px;
    background: #f3f0ea;
    color: #4d6b3c;
    border: 0; border-top: 1px solid #f0ece6;
    font-family: inherit;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.bh-products .bh-add-overlay__btn:hover,
.bh-products .bh-add-overlay__btn:focus {
    background: #6e8c5c;
    color: #fff;
    outline: none;
}
.bh-products .bh-add-overlay__btn[disabled] {
    opacity: .55; cursor: not-allowed;
}
.bh-products .bh-add-overlay__btn svg { flex: none; }

/* MOBILE (<768px): no hay hover real. Mover el boton FUERA del area de la
 * imagen y dejarlo SIEMPRE visible como banda estatica. En desktop/tablet
 * (>=768px) sigue siendo overlay flotante con hover (definido arriba). */
@media (max-width: 767px) {
    .bh-products .bh-add-overlay {
        position: static !important;
        margin: 10px 0 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* ====================================================================
 *  AVA-IMAGE-ROW — fila horizontal de imágenes (categorías destacadas)
 * ==================================================================== */

.bh-image-row {
    padding: 32px 16px;
    max-width: 1430px; margin: 0 auto;
}
.bh-image-row__title {
    font-size: clamp(20px, 3vw, 28px); font-weight: 700;
    margin: 0 0 24px; text-align: center;
    color: var(--palette3, #222);
}
.bh-image-row__track {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px)  { .bh-image-row__track { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .bh-image-row__track { grid-template-columns: 1fr; } }

.bh-image-row__item {
    position: relative; display: block; text-decoration: none;
    color: inherit; overflow: hidden;
    border-radius: 4px;
}
.bh-image-row__image {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1/1; object-fit: cover;
    transition: transform .8s ease;
}
.bh-image-row__item:hover .bh-image-row__image { transform: scale(1.06); }
.bh-image-row__content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    color: #fff;
}
.bh-image-row__label {
    display: block; font-weight: 700; font-size: 16px;
}
.bh-image-row__caption {
    display: block; font-size: 12px; margin-top: 2px; opacity: .9;
}

/* ====================================================================
 *  BLOG-GALLERY — preview de posts del blog (placeholder hasta WP)
 * ==================================================================== */

.bh-blog-gallery {
    padding: 32px 16px;
    max-width: 1430px; margin: 0 auto;
}
.bh-blog-gallery__title {
    font-size: clamp(20px, 3vw, 28px); font-weight: 700;
    margin: 0 0 24px; text-align: center;
    color: var(--palette3, #222);
}
.bh-blog-gallery__track {
    display: grid; gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .bh-blog-gallery__track { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .bh-blog-gallery__track { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px)  { .bh-blog-gallery__track { grid-template-columns: 1fr; } }

.bh-blog-gallery__item { overflow: hidden; }
.bh-blog-gallery__link { display: block; text-decoration: none; color: inherit; }
.bh-blog-gallery__image {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1/1; object-fit: cover;
    border-radius: 4px;
    transition: transform .25s;
}
.bh-blog-gallery__link:hover .bh-blog-gallery__image { transform: scale(1.03); }
.bh-blog-gallery__meta { padding: 12px 4px 4px; }
.bh-blog-gallery__date {
    font-size: 11px; color: var(--palette5, #777);
    text-transform: uppercase; letter-spacing: .08em;
}
.bh-blog-gallery__post-title {
    font-size: 14px; line-height: 1.4; font-weight: 500;
    margin: 4px 0 0; color: var(--palette3, #222);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ====================================================================
 *  SECTION TITLE — h2/h3/h4 suelto
 * ==================================================================== */

.bh-section-title {
    padding: 24px 16px 0;
    max-width: 1430px; margin: 0 auto;
}
.bh-section-title--left   { text-align: left; }
.bh-section-title--center { text-align: center; }
.bh-section-title--right  { text-align: right; }
.bh-section-title__text {
    font-weight: 700; margin: 0;
    color: var(--palette3, #222);
}
.bh-section-title h2.bh-section-title__text { font-size: clamp(22px, 3vw, 32px); }
.bh-section-title h3.bh-section-title__text { font-size: clamp(18px, 2.5vw, 24px); }
.bh-section-title h4.bh-section-title__text { font-size: clamp(16px, 2vw, 20px); }

/* ====================================================================
 *  HTML libre + Module wrapper
 * ==================================================================== */

.bh-html { padding: 16px; max-width: 1430px; margin: 0 auto; }
@media (min-width: 768px) { .bh-html { padding: 24px; } }
.bh-module { padding: 12px 0; }
@media (min-width: 768px) { .bh-module { padding: 16px 0; } }

/* ====================================================================
 *  Arrows de carruseles horizontales (image-row, blog-gallery)
 *  Añadidos por bh-home.js cuando data-bh-nav incluye 'arrows'.
 * ==================================================================== */

.bh-image-row.bh-has-arrows,
.bh-blog-gallery.bh-has-arrows { position: relative; }

.bh-image-row.bh-has-arrows .bh-image-row__track,
.bh-blog-gallery.bh-has-arrows .bh-blog-gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px;
}
.bh-image-row.bh-has-arrows .bh-image-row__track::-webkit-scrollbar,
.bh-blog-gallery.bh-has-arrows .bh-blog-gallery__track::-webkit-scrollbar { display: none; }

.bh-image-row.bh-has-arrows .bh-image-row__item,
.bh-blog-gallery.bh-has-arrows .bh-blog-gallery__item {
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .bh-image-row.bh-has-arrows .bh-image-row__item,
    .bh-blog-gallery.bh-has-arrows .bh-blog-gallery__item { flex-basis: calc(25% - 12px); }
}
@media (min-width: 1200px) {
    .bh-blog-gallery.bh-has-arrows .bh-blog-gallery__item { flex-basis: calc(16.6667% - 14px); }
}

.bh-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: #fff; color: #222;
    font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.bh-carousel-arrow:hover { background: var(--palette3, #222); color: #fff; }
.bh-carousel-arrow--prev { left: -8px; }
.bh-carousel-arrow--next { right: -8px; }
@media (max-width: 767px) {
    .bh-carousel-arrow { display: none; } /* mobile: scroll touch nativo, sin arrows */
}

/* ====================================================================
 *  Accesibilidad
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .bh-banner__image, .bh-product__image, .bh-image-row__image, .bh-blog-gallery__image,
    .bh-product, .bh-hero__cta, .bh-hero__dot { transition: none; }
    .bh-image-row.bh-has-arrows .bh-image-row__track,
    .bh-blog-gallery.bh-has-arrows .bh-blog-gallery__track { scroll-behavior: auto; }
}