/* Custom CSS */

/* ---------------------------------------------------------------------------
 * Logo SVG en móvil — fix de render en iOS Safari.
 * El logo es un <img src="logo-briva.svg"> SIN atributos width/height. iOS Safari
 * dimensiona los SVG sin width/height por su tamaño INTRÍNSECO (808×130) en lugar
 * de respetar el ancho CSS, así que el logo salía más grande y se recortaba la "B".
 * En Chrome/Android se respeta el ancho (130px) y se ve bien.
 * Fijamos ancho de display + aspect-ratio para que el render sea idéntico en
 * iOS / Android / desktop. Scoped a móvil (≤991px) para no tocar el logo desktop.
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    img[src*="logo-briva.svg"] {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
        aspect-ratio: 808 / 130;
        object-fit: contain;
    }
}

/* ---------------------------------------------------------------------------
 * Descripción corta plegable en la ficha ("Mostrar más / Mostrar menos").
 * El JS (child-theme.js) añade la clase .bh-desc-collapsible y el botón solo
 * cuando el texto desborda. Sin JS, la descripción se ve entera (sin recorte).
 * Scoped por el id del bloque para NO afectar a la pestaña Descripción ni a
 * las miniaturas del listado.
 * ------------------------------------------------------------------------- */
[id^="product-description-short-"].bh-desc-collapsible {
    position: relative;
    max-height: 13em;           /* ~8 líneas por defecto */
    overflow: hidden;
}
[id^="product-description-short-"].bh-desc-collapsible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--palette9, #fff));
    pointer-events: none;
}
[id^="product-description-short-"].bh-desc-expanded {
    max-height: none;
}
[id^="product-description-short-"].bh-desc-expanded::after {
    display: none;
}

.bh-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--palette2, #495266);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}
.bh-desc-toggle:hover {
    color: var(--palette1, #e89487);
    text-decoration: underline;
}
.bh-desc-toggle::after {
    content: "\25BE";           /* ▾ */
    font-size: 11px;
}
.bh-desc-toggle.is-expanded::after {
    content: "\25B4";           /* ▴ */
}