/* =============================================================================
   LIJ — Ficha de producto (Fase 9, rediseño)
   ESTADO (2026-09-10): EN PRODUCCIÓN — aplicado a la plantilla 38 real
   ("Detalle de producto"), se aplica a los 5.088+ productos del catálogo.
   Diseñado y verificado primero en una plantilla de prueba aislada
   (post 48586, ver docs/redesign/) antes de trasladarlo aquí, siguiendo la
   metodología acordada con Francisco.

   Cubre: tipografia (titulo/precio en Lilita One, cuerpo en Avenir), colores
   de marca, boton de compra al final de la columna (no arriba a la derecha
   como en el original), ficha tecnica (tabla_datos_producto) como rejilla de
   2 columnas, galeria, creditos de autor/ilustrador ([credito_autor]/
   [credito_ilustrador], shortcodes nuevos en functions-shortcode.php),
   pildoras de edad/categoria ([categorias_producto] tal cual, sin taxonomia
   nueva), pestañas reales Descripcion/Mas informacion (widget nativo
   nested-tabs de Elementor), fila "Comparte" (mismos iconos/URLs del
   header), enlace "‹ Resultados de búsqueda" ([volver_resultados]), y el
   bloque de relacionados (solo portada + titulo, sin precio/ISBN/boton).

   PENDIENTE (ver docs/design-system/WAVES_SHAPES.md y NEXT_ACTIONS.md):
   - Ubicacion definitiva de badges/stock/agotado/descargables (ver
     MAPA-REACT-ELEMENTOR.md §7.1 — siguen en la fila de compra, sin
     reestilar del todo).
   - Bug de fondo azul nativo en el contenedor interno de "Libros
     relacionados" (heredado de antes de este rediseño, quedó mas visible
     al corregir el footer) — sin corregir todavia.
   - ~~Boton dice "Añadir", el maestro visual dice "Comprar".~~ RESUELTO
     2026-09-23: el boton nativo de WooCommerce se oculta y se reemplaza por
     el desplegable "Comprar" -> tiendas externas de BuyMenu.tsx (v2), ver
     seccion propia mas abajo y docs/DECISIONS.md 2026-09-23.
   - Icono de TikTok sin asset real todavia.
   - Sin verificar en tablet/movil — todo este trabajo se hizo y probo en
     escritorio (1440px).
   ============================================================================= */

/* IMPORTANTE — por que padding y no margin: la onda del header (::after de
   lij-header.css) cuelga por DEBAJO de su caja y se superpone a lo que
   sigue, para que se vea la onda roja recortando el color de la seccion de
   abajo. Esto solo funciona si esa seccion ya pinta su fondo justo donde
   termina el header, sin hueco — porque el hueco lo pintaria el body
   (#F9F9F9 gris, no el crema de esta ficha ni el color que use cualquier
   otra pagina). Un margin-top empuja la seccion entera hacia abajo y deja
   ese hueco expuesto; un padding-top dentro de la seccion mantiene su
   fondo pegado al header y solo emppuja el CONTENIDO hacia adentro. Mismo
   criterio aplica a cualquier seccion que sea la primera/ultima de una
   pagina, sea cual sea su color — por eso va en el fondo de la seccion, no
   en un margen entre secciones. */
.ficha-producto {
    background: var(--lij-page-dark, #FFF3EB);
    border-radius: var(--lij-radius-m, 16px);
    gap: var(--lij-space-s, 16px);
    margin-top: 0 !important;
    padding-top: 64px !important;
}

/* --- Aviso de WooCommerce (widget "WooCommerce Notices", contenedor
   `.aviso`) — MISMO problema que arriba, encontrado por Francisco al
   añadir un producto al carrito: `.aviso` es su propia sección, pegada al
   header, SEPARADA de `.ficha-producto` (que ya tiene su padding-top de
   64px) — cuando WooCommerce imprime aquí el "X añadido a tu carrito"
   (o un error/aviso de stock), el mensaje aparece pegado al header y la
   onda lo corta a la mitad. `.aviso` no tiene contenido real la mayoria
   de las visitas (sin aviso que mostrar), asi que el padding-top NO puede
   ser fijo como en `.ficha-producto` — dejaria un hueco vacio de 42px en
   cada ficha de producto real. Se aplica solo cuando `.aviso` SI contiene
   un aviso renderizado (`:has()`, mismo mecanismo ya usado en
   lij-header.css para el sticky). */
.aviso:has(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
    padding-top: var(--lij-wave-h);
}

@media (max-width: 767px) {
    /* Igual que en lij-header.css: `--lij-wave-h` se redefine a 24px solo
       dentro de `header`, y `.aviso` no lo hereda por ser hermano, no
       descendiente — se repite el valor literal aqui. */
    .aviso:has(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
        padding-top: 42px;                       /* onda de 42 también en teléfono (v3) */
    }
}

/* La columna "botones" (precio/comprar) se elimino como columna aparte —
   ahora datos ocupa todo el ancho restante junto a la imagen. */
.ficha-datos {
    width: auto !important;
    flex: 1 1 0 !important;
}

/* "< Resultados de busqueda": mismo estilo que Breadcrumb.tsx/css del
   maestro visual (.breadcrumb__link + .title-l) — Avenir 750/24px, color de
   acento de la seccion, con chevron. Usa el referer real (de donde vino el
   visitante) si existe, si no cae a la home — ver [volver_resultados] en
   functions-shortcode.php. */
/* Alineado con el logo (v3 .breadcrumb: 32px, 16px con el menú plegado) y a
   16px del producto (gap de .product-section). Sin origen al que volver el
   shortcode no pinta nada y el contenedor desaparece, como en v3. */
.ficha-volver {
    width: 100% !important;
    padding: 24px 32px 0 !important;
    margin-bottom: 16px !important;
}

/* Sin enlace visible no hay fila. El enlace oculto (data-lij-volver-busqueda)
   lo muestra lij-header.js al llegar desde las sugerencias del buscador. */
.ficha-volver:not(:has(.volver-resultados:not([hidden]))) {
    display: none !important;
}

.volver-resultados[hidden] {
    display: none !important;
}

@media (max-width: 799px) {
    .ficha-volver {
        padding: 24px 16px 0 !important;
    }
}

.ficha-volver .volver-resultados {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--lij-accent, #ED1B2F);
    text-decoration: none;
}

.ficha-volver .volver-resultados i {
    font-size: 1.25rem;
}

/* Flecha de v3 (.breadcrumb__chevron): chevron-left.svg a 24px como máscara,
   del color de acento de la sección, en lugar del icono de Font Awesome. */
.ficha-volver .volver-resultados i {
    display: none;
}

.ficha-volver .volver-resultados::before {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../images/lij/chevron-left.svg') center / 100% 100% no-repeat;
    mask: url('../images/lij/chevron-left.svg') center / 100% 100% no-repeat;
}

.ficha-volver .volver-resultados:hover {
    text-decoration: underline;
}

/* --- Columna imagen ----------------------------------------------------- */
.ficha-imagen .woocommerce-product-gallery {
    max-width: 600px;
}

.ficha-imagen .woocommerce-product-gallery__wrapper {
    border-radius: var(--lij-radius-xs, 4px);
    overflow: hidden;
}

.detalle_badges {
    display: flex;
    gap: var(--lij-space-xxs, 8px);
    margin-bottom: var(--lij-space-xs, 12px);
}

.detalle_badges .badge {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 0.75rem;
    text-transform: uppercase;
    background: var(--lij-red, #ED1B2F);
    color: var(--lij-on-red, #FFFFFF);
    border-radius: var(--lij-radius-pill, 1000px);
    padding: 4px 12px;
}

/* --- Columna datos: titulo, ISBN, ficha tecnica, descripcion corta ------ */
/* !important: el widget de titulo trae su propia tipografia (Caladea,
   personalizada en la plantilla 38 original) con la misma especificidad de
   clases que este selector; en el traslado a produccion esto se resuelve
   nativamente cambiando la tipografia del widget en el panel de Elementor
   en vez de forzarlo por CSS. */
.ficha-datos .product_title {
    font-family: var(--lij-font-headline) !important;
    font-weight: 400 !important;
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    color: var(--lij-text, #262626) !important;
    margin-bottom: var(--lij-space-xxs, 8px);
}

.ficha-datos .isbn {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);
    font-size: 0.9rem;
    color: var(--lij-text, #262626);
    opacity: 0.75;
    display: block;
    margin-bottom: var(--lij-space-s, 16px);
}

/* Creditos de autor/ilustrador ([credito_autor]/[credito_ilustrador]) */
.ficha-datos .creditos-producto__item {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--lij-text, #262626);
    margin: 0 0 var(--lij-space-xxs, 8px);
}

.ficha-datos .creditos-producto__label {
    font-weight: var(--lij-weight-strong, 900);
}

.ficha-datos .creditos-producto__link {
    font-weight: inherit;                        /* v3 .product__credits a: el mismo 750 que la etiqueta */
    color: var(--lij-text, #262626);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Pildoras de edad/coleccion ([categorias_producto], categorias reales del
   producto — en este catalogo product_cat SI es la taxonomia de edad). */
.ficha-datos .posted_in {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lij-space-xxs, 8px);
    margin: var(--lij-space-s, 16px) 0;
}

.ficha-datos .posted_in a {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 0.85rem;
    color: var(--lij-on-red, #FFFFFF);
    background: var(--lij-red, #ED1B2F);
    border-radius: var(--lij-radius-pill, 1000px);
    padding: 6px 16px;
    text-decoration: none;
    display: inline-block;
}

.ficha-datos .posted_in a:hover {
    background: var(--lij-red-hover, #BD0F20);
}

/* Ficha tecnica (shortcode [tabla_datos_producto]): rejilla de 2 columnas,
   equivalente directo de la pestaña "Mas informacion" del diseño. */
.sm-product-ficha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lij-space-xxs, 8px) var(--lij-space-l, 32px);
    margin: var(--lij-space-m, 24px) 0;
    font-family: var(--lij-font-title);
    font-size: 0.95rem;
    color: var(--lij-text, #262626);
}

.sm-product-ficha__item {
    display: block;
}

.sm-product-ficha__label {
    font-weight: var(--lij-weight-strong, 900);
}

.sm-product-ficha__content {
    font-weight: var(--lij-weight-body, 500);
}

.sm-product-ficha__link {
    color: var(--lij-accent, #ED1B2F);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-product-details__short-description {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--lij-text, #262626);
}

.woocommerce-product-details__short-description p {
    margin-bottom: var(--lij-space-xs, 12px);
}

/* --- Fila final: precio + comprar, AL FINAL de la columna (no arriba a la
   derecha como en la plantilla 38 original) — asi lo pide el maestro visual.
   El diseño solo muestra boton + precio; "Precio"/"Impuestos incluidos" son
   textos que la plantilla 38 trae de fabrica y el diseño no muestra: se
   ocultan por CSS (siguen ahi, no se borran) en vez de quitar los widgets. */
.ficha-compra .elementor-widget-text-editor {
    display: none;
}

.ficha-compra .elementor-widget-woocommerce-product-add-to-cart {
    order: 1;
}

.ficha-compra .elementor-widget-woocommerce-product-price {
    order: 2;
}

.ficha-compra .elementor-widget-shortcode,
.ficha-compra .stock {
    order: 3;
}

/* !important: mismo caso que .product_title arriba (widget con tipografia
   propia ya fijada en la plantilla 38 original). */
.ficha-compra .price .woocommerce-Price-amount {
    font-family: var(--lij-font-headline) !important;
    font-weight: 400 !important;
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    color: var(--lij-text, #262626) !important;
}

/* El diseño solo muestra "Comprar" + precio: el aviso de stock ("Disponible")
   y el selector de cantidad no aparecen. Se ocultan por CSS (la
   funcionalidad real de WooCommerce sigue intacta — sigue añadiendo 1
   unidad — solo no se ve el selector). Si hace falta stock/cantidad visibles
   de nuevo, es una linea de CSS a revertir, no un cambio de datos. */
.ficha-compra .stock,
.ficha-compra .quantity {
    display: none;
}

.ficha-compra .single_add_to_cart_button {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900) !important;
    font-size: 1.125rem !important;
    background: var(--lij-red, #ED1B2F) !important;
    color: var(--lij-on-red, #FFFFFF) !important;
    border-radius: var(--lij-radius-pill, 1000px) !important;
    border: none;
    height: 48px;
    padding: 0 var(--lij-space-l, 32px) !important;
}

.ficha-compra .single_add_to_cart_button:hover {
    background: var(--lij-red-hover, #BD0F20) !important;
}

.ficha-compra .single_add_to_cart_button i,
.ficha-compra .single_add_to_cart_button svg {
    display: none;
}

/* La fila boton+precio queda en columna dentro del contenedor de Elementor
   (envuelto en .e-con-inner); se fuerza fila aqui, mas simple y confiable
   que pelear con los ajustes nativos del contenedor. */
.ficha-compra,
.ficha-compra > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: var(--lij-space-l, 24px) !important;
}

/* --- Pestañas Descripcion / Mas informacion (widget nativo nested-tabs) - */
.ficha-datos .e-n-tabs-heading {
    gap: var(--lij-space-l, 32px);
    border: none;
    margin-bottom: var(--lij-space-s, 16px);
    justify-content: flex-start !important;
}

.ficha-datos .e-n-tab-title {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500) !important;
    font-size: 1.125rem;
    color: var(--lij-text, #262626) !important;
    opacity: 0.55;
    padding: 8px 0;
    border: none;
    background: transparent !important;
    text-decoration: none;
}

.ficha-datos .e-n-tab-title[aria-selected="true"] {
    font-weight: var(--lij-weight-strong, 900) !important;
    color: var(--lij-text, #262626) !important;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none !important;
    background: transparent !important;
}

.ficha-datos .e-n-tabs-content {
    border: none;
    padding: 0;
}

/* --- Fila "Comparte:" (redes reales, mismas del header) ----------------- */
.producto-comparte {
    margin-top: var(--lij-space-s, 16px);
}

.producto-comparte__label {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1.25rem;
    color: var(--lij-text, #262626);
}

.producto-comparte__icono .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lij-red, #ED1B2F) !important;
    color: var(--lij-on-red, #FFFFFF) !important;
    width: 40px;
    height: 40px;
    border-radius: var(--lij-radius-pill, 1000px);
    padding: 0;
    font-size: 18px;
}

.producto-comparte__icono .elementor-icon i {
    color: var(--lij-on-red, #FFFFFF);
}

.producto-comparte__icono .elementor-icon:hover {
    background: var(--lij-red-hover, #BD0F20);
}

/* --- Libros relacionados (bloque-relacionados, fuera de .ficha-producto) - */
/* Mismo criterio que .ficha-producto arriba, ahora del lado del footer:
   este contenedor trae un margin-bottom:48px nativo (confirmado tambien en
   la plantilla 38 real, sin tocar — es un valor por defecto de Elementor,
   no algo que haya agregado este rediseño). Ese margen deja un hueco sin
   color entre el fin de esta seccion y el footer, que pinta el gris del
   body en vez del crema — justo donde el footer trae su propia banda fija
   de 42px "LIJ Crema" antes de la onda (ver FASE-5-FOOTER.md §"Banda previa
   a la onda"), pensada para continuar sin costura el color de la ULTIMA
   seccion de cada pagina. Se pasa el margen a padding (mismo alto) para que
   el fondo llegue hasta el footer sin hueco, ver WAVES_SHAPES.md. */
.bloque-relacionados {
    background: var(--lij-page-light, #FFF9F5) !important;
    margin-bottom: 0 !important;
    padding-bottom: 48px !important;
}

/* Barra flotante de compra (add_to_cart_flotante): aparece al hacer scroll,
   con position:fixed. Queda tapando el bloque de relacionados porque no fue
   pensada para convivir con este rediseño (el boton de compra ya no esta
   en la posicion original que activaba/desactivaba la barra). Se oculta;
   el widget y su JS siguen ahi, no se borró nada — revertir es quitar esta
   regla. */
.add_to_cart_flotante {
    display: none !important;
}

.bloque-relacionados .elementor-heading-title {
    font-family: var(--lij-font-headline) !important;
    font-weight: 400 !important;
    font-size: 2rem !important;
    color: var(--lij-red, #ED1B2F) !important;
    text-align: center !important;
    width: 100%;
    display: block;
}

/* --heading-2 de v3 en teléfono: 24px. */
@media (max-width: 599px) {
    .bloque-relacionados .elementor-heading-title {
        font-size: 24px !important;
    }
}

/* Tarjeta de libro relacionado: el diseño solo muestra portada + titulo (sin
   precio, ISBN ni boton de compra). La plantilla 59 ("Item producto") es
   compartida con la home — no se toca esa plantilla, se ocultan esas partes
   solo dentro de este carrusel via CSS. */
.bloque-relacionados .icono_carrito,
.bloque-relacionados .isbn {
    display: none !important;
}

.bloque-relacionados .elementor-widget-theme-post-title .elementor-heading-title {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1rem;
    color: var(--lij-red, #ED1B2F);
    text-align: center;
}

.bloque-relacionados .elementor-widget-theme-post-title .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
}

/* --- Resultados de búsqueda (plantilla 35, Fase Búsqueda) --------------- */
/* Mismo criterio que ".bloque-relacionados" arriba: la plantilla 59 ("Item
   producto") es compartida con toda la tienda — no se toca esa plantilla,
   se oculta isbn/precio/boton/badge solo dentro de este contenedor via CSS.
   El scope es la clase "resultados-busqueda-grid", agregada al contenedor
   "Productos" de la plantilla 35 (envuelve el loop-grid), no a la plantilla
   59 en sí — por eso el resto del sitio (home, categorías, relacionados)
   no se ve afectado. Aprobado por Francisco tras revisar el mockup de
   /mockups/busqueda/ (ver SESSION_LOG). El panel de sugerencias del
   buscador (recientes/autocompletado, Fase 4m) no cambia — sigue mostrando
   solo miniatura + título, como ya estaba. */
.resultados-busqueda-grid .icono_carrito,
.resultados-busqueda-grid .isbn,
.resultados-busqueda-grid .badge {
    display: none !important;
}

.resultados-busqueda-grid .elementor-widget-theme-post-title .elementor-heading-title {
    font-family: var(--lij-font-title) !important;
    font-weight: var(--lij-weight-strong, 900) !important;
    font-size: 1.1rem !important;
    color: var(--lij-red, #ED1B2F) !important;
    text-align: center !important;
}

.resultados-busqueda-grid .elementor-widget-theme-post-title .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
}

/* --- "Comprar" -> desplegable de tiendas externas (2026-09-23) ----------
   Implementa BuyMenu.tsx de la fuente de la verdad v2 (nueva-web-lij-main-v2),
   decisión de Francisco (docs/DECISIONS.md 2026-09-23): el flujo de compra
   deja de ser el carrito/checkout real de WooCommerce y pasa a ser "dónde
   comprarlo" sobre 8 tiendas externas con búsqueda por ISBN.

   El botón nativo de WooCommerce (`single_add_to_cart_button`, ya estilado
   arriba en este mismo archivo) se oculta por CSS — el widget de Elementor
   y su lógica de carrito/stock NO se tocan ni se borran, solo dejan de
   verse. El nuevo widget shortcode ([comprar_en_tiendas], agregado a
   _elementor_data justo al lado del widget nativo) trae su propia clase
   `lij-buy-menu-widget` para heredar el mismo `order: 1` de la fila
   precio/comprar de esta columna (ver `.ficha-compra .elementor-widget-*`
   más arriba). js/lij-product.js abre/cierra el panel.

   Mismo lenguaje visual que el panel de sugerencias del buscador
   (lij-header.css §6.3, `--lij-radius-m`/`--lij-shadow-panel` ya
   reservados desde la Fase 3): panel con tarjetas blancas sobre fondo de
   sección. Sin logos de tienda por ahora (adjuntos nuevos en Medios, fuera
   de alcance de esta pasada) — cada tienda muestra su nombre en su color
   de marca real, el mismo estado "sin logo" que ya contempla el componente
   de origen cuando el logo no carga. */
.ficha-compra .single_add_to_cart_button,
.ficha-compra .elementor-widget-woocommerce-product-add-to-cart .quantity {
    display: none !important;
}

.ficha-compra .lij-buy-menu-widget {
    order: 1;
}

.buy-menu {
    position: relative;
    display: inline-flex;
}

.buy-menu__button {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1.125rem;
    background: var(--lij-red, #ED1B2F);
    color: var(--lij-on-red, #FFFFFF);
    border-radius: var(--lij-radius-pill, 1000px);
    border: none;
    height: 48px;
    padding: 0 var(--lij-space-l, 32px);
    cursor: pointer;
    transition: background-color 140ms ease;
}

.buy-menu__button:hover {
    background: var(--lij-red-hover, #BD0F20);
}

.buy-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    /* Por encima de la cabecera sticky (`:is(header,div).elementor-location-header`,
       z-index: 100, lij-header.css:61): el panel abre hacia arriba y en
       pantallas más bajas puede quedar bajo el hueco calculado; si su
       z-index fuera menor, la cabecera lo taparía por encima y con ella el
       título "¿Dónde quieres comprarlo?", aunque el alto ya esté acotado. */
    z-index: 101;
    width: 380px;
    max-width: calc(100vw - 48px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--lij-radius-m, 16px);
    background: var(--lij-red, #ED1B2F);
    box-shadow: var(--lij-shadow-panel, 0 0 8px 0 rgba(0, 0, 0, 0.15));
    /* Tope real: sin esto, el panel (que abre hacia arriba) puede terminar
       siendo más alto que el espacio libre sobre el botón y salirse por
       encima de la página — se pierde el título y no queda scroll posible
       porque ya no hay documento más arriba. lij-product.js mide el hueco
       real disponible en cada apertura y lo escribe aquí; igual criterio que
       BuyMenu.css (`--buy-panel-room`) en la fuente de la verdad v2. */
    max-height: var(--buy-panel-room, none);
}

.buy-panel[hidden] {
    display: none;
}

.buy-panel__caret {
    position: absolute;
    bottom: -8px;
    left: 40px;
    width: 16px;
    height: 16px;
    background: var(--lij-red, #ED1B2F);
    transform: rotate(45deg);
}

.buy-panel__header {
    width: 100%;
    padding: var(--lij-space-s, 16px) var(--lij-space-s, 16px) var(--lij-space-xs, 12px);
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--lij-on-red, #FFFFFF);
    text-align: left;
}

.buy-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--lij-space-xxs, 8px);
    width: 100%;
    max-height: 408px;
    /* Dentro de un panel con tope de altura, esto es lo que deja que la
       lista (no el título) sea lo que se encoge y scrollea. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--lij-space-s, 16px) var(--lij-space-s, 16px);
    scrollbar-width: thin;
    /* Crema, no rojo: el fondo del panel ya es rojo (§6bis) — un thumb rojo
       queda invisible sobre su propio fondo. Mismo color que usa v2
       (`--surface-interactive-secondary-enabled`, #FFF9F5) para que haga
       contraste. */
    scrollbar-color: var(--lij-cream, #FFF9F5) transparent;
}

/* Firefox soporta scrollbar-color de forma nativa; Chrome/Edge (WebKit)
   necesitan el pseudo-elemento propio para el mismo contraste. */
.buy-panel__list::-webkit-scrollbar {
    width: 6px;
}

.buy-panel__list::-webkit-scrollbar-track {
    background: transparent;
}

.buy-panel__list::-webkit-scrollbar-thumb {
    background-color: var(--lij-cream, #FFF9F5);
    border-radius: var(--lij-radius-pill, 1000px);
}

.buy-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lij-space-xs, 12px);
    width: 100%;
    padding: var(--lij-space-xxs, 8px) var(--lij-space-xs, 12px);
    border-radius: var(--lij-radius-s, 8px);
    background: var(--lij-cream, #FFF9F5);
    text-align: left;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.buy-option:hover,
.buy-option:focus-visible {
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.18);
}

.buy-option--featured {
    box-shadow: inset 0 0 0 2px var(--lij-red, #ED1B2F);
}

/* Cada tienda es una marca dentro de una caja de 46px de alto (la marca más
   alta, Todostuslibros); si el logo no carga, el JS inline la reemplaza por
   el nombre en el color de marca (mismo estado "sin logo" de BuyMenu.tsx). */
.buy-option__mark {
    display: flex;
    flex: 1 0 0;
    min-width: 1px;
    align-items: center;
    height: 46px;
}

.buy-option__logo {
    max-height: 36px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}

.buy-option__name {
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-strong, 900);
    font-size: 1.25rem;
    line-height: 1.2;
}

.buy-option__arrow {
    flex-shrink: 0;
    color: var(--lij-text, #262626);
    opacity: 0.5;
    transition: transform 120ms ease, opacity 120ms ease;
}

.buy-option:hover .buy-option__arrow,
.buy-option:focus-visible .buy-option__arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}


/* =============================================================================
   v3 (nueva-web-lij-main-v3, 2026-10-06) — ProductPage.css
   ============================================================================= */

/* Cubierta a 440px (antes 600 en Figma: en pantalla salía demasiado grande;
   a 440 la cubierta y su galería caben en el primer pantallazo de un
   portátil). El bloque cubierta + 48px + datos (584px) deja de crecer y se
   centra. Hasta 800px las dos columnas se mantienen y cede primero la
   cubierta (de 440 a ~310px) antes que los datos bajen de 360px. Los anchos
   en % del panel de Elementor (35/45, tablet 25/50) quedan anulados aquí. */
:is(.e-con, .e-con-inner):has(> .ficha-imagen):has(> .ficha-datos) {
    --lij-cover-width: 440px;
    --lij-page-gutter: 40px;
    justify-content: center !important;
    gap: 48px !important;
    /* Margen de página de v3 (.product: padding 0 var(--page-gutter)), dentro
       del ancho máximo como en v3, para que en tablet la fila no quede pegada
       a 24px del borde. */
    max-width: calc(var(--lij-cover-width) + 48px + 584px + 2 * var(--lij-page-gutter));
    padding-inline: var(--lij-page-gutter) !important;
    margin-inline: auto;
}

.ficha-imagen {
    flex: 0 1 var(--lij-cover-width, 440px) !important;
    width: auto !important;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ficha-imagen .woocommerce-product-gallery {
    max-width: var(--lij-cover-width, 440px);
}

/* Los datos no encogen por debajo de 360px y se quedan con el sobrante: entre
   800 y ~1070px es la cubierta la que cede (v3 .product__info: flex 1 0 360px). */
.ficha-datos {
    flex: 1 0 360px !important;
    min-width: 1px;
    padding-right: 0 !important;
}

/* Por debajo de 800px (donde también se pliega el menú) se apila en una sola
   columna tan ancha como la cubierta, centrada: cubierta, galería y
   "Comparte", y debajo los datos, todo sobre el mismo borde izquierdo. */
@media (max-width: 799px) {
    :is(.e-con, .e-con-inner):has(> .ficha-imagen):has(> .ficha-datos) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
        max-width: calc(var(--lij-cover-width) + 2 * var(--lij-page-gutter));
    }

    .ficha-imagen,
    .ficha-datos {
        flex: none !important;
        width: 100% !important;
        min-width: 0;
    }
}

/* Pestañas: las dos al mismo tamaño (20px) y color, la activa en negrita y
   subrayada, con el único separador del sitio entre ellas (1px, alto como
   el texto, `.divider` de global.css). */
.ficha-datos .e-n-tabs-heading {
    gap: 16px;
    align-items: center;
}

.ficha-datos .e-n-tab-title {
    align-items: center;
    font-size: 20px;
    font-weight: var(--lij-weight-body, 500) !important;   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    line-height: 1.4;
    opacity: 1;
}

.ficha-datos .e-n-tab-title[aria-selected="true"] {
    font-weight: 750 !important;
    line-height: 1.4;
}

.ficha-datos .e-n-tab-title + .e-n-tab-title::before {
    content: "";
    display: block;
    flex: none;
    width: 1px;
    height: 1em;
    margin-right: 16px;
    background: currentColor;
}

/* Cada pestaña mide lo que su texto: el widget les da un ancho y padding
   propios que alejaban el separador. */
.ficha-datos .e-n-tabs-heading > .e-n-tab-title {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 6px 0 !important;                   /* 6 + 28 + 6 = 40, v3 .product__tab */
    justify-content: flex-start !important;
}

.ficha-datos .e-n-tab-title .e-n-tab-title-text {
    font-size: 20px !important;
    line-height: 1.4;
}


/* =============================================================================
   Ficha de producto — detalles igualados a v3 (2026-10-06, ProductPage.css,
   Button.css). Medidos lado a lado a 1440 y 390px.
   ============================================================================= */

/* Fila de compra: "Comprar" y el precio primero, a 32px (v3 .product__buy,
   gap 16px 32px). En la fila hay widgets condicionales que casi siempre
   quedan vacíos (añadir al carrito oculto, digital, etc.) y sumaban su
   separación antes del botón: se ordenan detrás, sin quitarlos. */
.elementor-38 .elementor-element-8472e661 {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 16px !important;
}

.elementor-38 .elementor-element-7d7bc5ea { order: -2 !important; }
.elementor-38 .elementor-element-837083fc { order: -1 !important; }

/* "Comprar": btn-primary medium + pill de v3 (20px, 750, 12px 16px). */
.ficha-datos .buy-menu .buy-menu__button {
    height: auto !important;
    padding: 12px 16px !important;
    border-radius: 1000px !important;
    font-family: var(--lij-font-title) !important;
    font-weight: 750 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* Precio: Lilita One 32px, gris oscuro, "11,95€" (v3 .product__price). */
.ficha-datos .elementor-widget-woocommerce-product-price .price,
.ficha-datos .elementor-widget-woocommerce-product-price .price .amount {
    font-family: var(--lij-font-headline, 'Lilita One'), sans-serif !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: #262626 !important;
}

/* Franja de edad ([lij_franjas_edad]): btn-primary small + pill de v3. */
.lij-franjas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lij-franja {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 1000px;
    background: var(--lij-red, #ED1B2F);
    font-family: var(--lij-font-title);
    font-weight: 750;
    font-size: 16px;
    line-height: 1.4;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.lij-franja:hover {
    background: var(--lij-red-hover, #BD0F20);
}

/* Sin la lupa de zoom de WooCommerce sobre la portada: v3 no la tiene. */
.ficha-imagen .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Compartir: círculo rojo de 40px con el icono blanco de 32px de v3
   (.product__share-btn). */
.producto-comparte__icono .elementor-icon {
    width: 40px !important;
    height: 40px !important;
    padding: 4px !important;
    background-color: var(--lij-red, #ED1B2F) !important;
}

.producto-comparte__icono .elementor-icon svg,
.producto-comparte__icono .elementor-icon img {
    width: 32px !important;
    height: 32px !important;
}

.producto-comparte__icono .elementor-icon:hover {
    background-color: var(--lij-red-hover, #BD0F20) !important;
}

/* Teléfono: la portada ocupa la columna entera, como v3 (358px a 390). El
   widget de imágenes de WooCommerce se quedaba al 50%. */
@media (max-width: 799px) {
    .ficha-imagen .elementor-widget-woocommerce-product-images,
    .ficha-imagen .elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
        width: 100% !important;
        max-width: var(--lij-cover-width, 440px) !important;
    }
}

/* Título de la ficha a 32px en teléfono (--heading-1 de v3 por debajo de 600),
   y el margen de página de teléfono (--page-gutter: 16px). */
@media (max-width: 599px) {
    :is(.e-con, .e-con-inner):has(> .ficha-imagen):has(> .ficha-datos) {
        --lij-page-gutter: 16px;
    }

    .ficha-datos .product_title,
    .ficha-datos .elementor-widget-woocommerce-product-title .elementor-heading-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
}

/* Sin la franja gris entre la ficha y "Libros relacionados": una regla
   heredada de estilos.css (.ficha-producto + .elementor-element, hasta 3rem de
   margen superior) separaba el bloque de descargables y dejaba ver el fondo
   de la página. En v3 la banda de la ficha y la de relacionados se tocan. */
.elementor-element.ficha-producto + .elementor-element.producto-descargables {
    margin-top: 0 !important;
}

/* =============================================================================
   Descargables de la ficha (2026-10-08) — los adjuntos de PCM con el diseño
   de los descargables de v3 (MaterialExtra.tsx DownloadItem, Items.css
   .item-rounded--medium, tokens.css): título de banda en Lilita One rojo,
   círculo #FFF9F5 de 156px con el icono de descarga rojo (108px) y el nombre
   en Avenir 900 18px rojo; al pasar el ratón el círculo oscurece (#FFE8D6) y
   el nombre se subraya. Va en el tono oscuro de la ficha, como continuación
   suya, para no romper la alternancia con "Libros relacionados" (claro).
   El fondo y los márgenes de la banda están en Elementor (contenedor
   73821ea3 de la plantilla 38). Sin descargables, la banda no se dibuja.
   ============================================================================= */
.elementor-element.producto-descargables:not(:has(.lij-descargables)) {
    display: none !important;
}

.lij-descargables {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.lij-descargables__titulo {
    margin: 0;
    font-family: var(--lij-font-headline, 'Lilita One', sans-serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    color: #ED1B2F !important; /* una regla general de h2 del tema la ponía en negro */
    text-align: center;
}

.lij-descargables__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 64px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lij-descargable {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px;
    text-decoration: none;
}

.lij-descargable__circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 156px;
    padding: 16px;
    border-radius: 1000px;
    background: #FFF9F5;
    transition: background-color 160ms ease;
}

.lij-descargable__icono {
    display: block;
    width: 108px;
    height: 108px;
    background-color: #ED1B2F;
    -webkit-mask: url('../images/lij/icon-material-download.svg') center / contain no-repeat;
    mask: url('../images/lij/icon-material-download.svg') center / contain no-repeat;
}

.lij-descargable__nombre {
    width: 156px;
    font-family: var(--lij-font-title, 'Avenir LT Std', sans-serif);
    font-weight: 900;
    font-size: 18px;
    line-height: 1.2;
    color: #ED1B2F;
    text-align: center;
}

.lij-descargable:focus-visible .lij-descargable__circulo {
    background: #FFE8D6;
}

@media (hover: hover) {
    .lij-descargable:hover .lij-descargable__circulo {
        background: #FFE8D6;
    }

    .lij-descargable:hover .lij-descargable__nombre {
        text-decoration: underline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lij-descargable__circulo {
        transition: none;
    }
}

/* Teléfono: título de banda a 24px (--heading-2 de v3) y círculos más juntos. */
@media (max-width: 599px) {
    .lij-descargables__titulo {
        font-size: 24px;
    }

    .lij-descargables__lista {
        gap: 24px 16px;
    }
}

/* =============================================================================
   Columna de datos: ritmo vertical y tipografía de v3 (2026-10-07)
   ProductPage.css — .product__info (32px arriba, 64 hasta la compra),
   .product__details (48 entre bloques), .product__heading (16 entre título,
   créditos y edad), .product__credits (8 entre líneas). Los widgets de
   Elementor van uno detrás de otro sin hueco propio: el ritmo se pone aquí con
   un gap base de 8px y márgenes que completan cada salto.
   ============================================================================= */
.ficha-datos {
    gap: 8px !important;
    padding-top: 32px !important;
}

/* Widgets de shortcode que no pintan nada (sin ilustrador, sin edad…) no
   suman su hueco. */
.ficha-datos > .elementor-widget-shortcode:not(:has(.elementor-shortcode > *)) {
    display: none !important;
}

.ficha-datos .product_title,
.ficha-datos .elementor-widget-woocommerce-product-title .elementor-heading-title {
    margin: 0 !important;
}

.ficha-datos > .elementor-widget-woocommerce-product-title {
    margin-bottom: 8px !important;               /* 8 + 8 = 16 hasta créditos */
}

/* En teléfono el panel le pone 16px de margen inferior a la caja del widget. */
.ficha-datos > .elementor-widget-woocommerce-product-title > .elementor-widget-container {
    margin: 0 !important;
}

.ficha-datos .creditos-producto__item {
    font-size: 18px;                             /* --text-m */
    margin: 0;
}

.ficha-datos > .elementor-widget-shortcode:has(.lij-franjas) {
    margin-top: 8px !important;                  /* 8 + 8 = 16 desde créditos */
}

/* La caja del widget medía 8px más que las píldoras (54 por 46). */
.ficha-datos > .elementor-widget-shortcode:has(.lij-franjas) > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.ficha-datos > .elementor-widget-n-tabs {
    margin-top: 40px !important;                 /* 40 + 8 = 48 */
}

.ficha-datos .e-n-tabs {
    gap: 16px !important;                        /* pestañas → texto */
}

.ficha-datos .e-n-tabs-heading {
    margin-bottom: 0 !important;
}

.ficha-datos .e-n-tabs-content p {
    font-size: 18px;                             /* --text-m, 550, 1.4 */
    font-weight: var(--lij-weight-body, 500);   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    line-height: 1.4;
    margin: 0;
}

.ficha-datos > .ficha-compra {
    margin-top: 56px !important;                 /* 56 + 8 = 64 */
}

/* El precio centrado con el botón, como v3 (.product__buy align-items:center):
   el <p> traía margen inferior y quedaba 10px por encima. */
.ficha-datos .ficha-compra .price {
    margin: 0 !important;
}

/* Apilada (por debajo de 800): sin relleno arriba y 48px hasta la compra. */
@media (max-width: 799px) {
    .ficha-datos {
        padding-top: 0 !important;
    }

    .ficha-datos > .ficha-compra {
        margin-top: 40px !important;             /* 40 + 8 = 48 */
    }
}

/* Portada en un hueco fijo con la proporción de la cubierta de Figma
   (600 × 628.433, v3 .product__cover): la imagen va contenida y centrada, y
   una portada más ancha o más alta no mueve el resto de la columna. */
.ficha-imagen .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 600 / 628.433;
    object-fit: contain;
    object-position: center;
}

/* Pestaña "Más información" ([lij_mas_informacion]) como v3 .product__meta:
   "Etiqueta: valor" en dos columnas iguales con 8px de separación, Avenir
   550 a 18px; una sola columna en teléfono. */
.lij-mas-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    font-family: var(--lij-font-title);
    font-weight: var(--lij-weight-body, 500);   /* Medium: el 550 de v3; en WP 550 caería en Heavy */
    font-size: 18px;
    line-height: 1.4;
    color: var(--lij-text, #262626);
}

.ficha-datos .lij-mas-info p {
    margin: 0;
}

@media (max-width: 599px) {
    .lij-mas-info {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* La línea de texto del shortcode alrededor del enlace (inline-flex) sumaba
   3px a la caja de "< Resultados de búsqueda": la portada quedaba 3px más
   abajo que en v3. */
.ficha-volver .elementor-shortcode {
    display: flex;
}

/* Autor/a e Ilustrador/a al pasar el ratón: siguen en gris y subrayados,
   como v3 .product__credits a (la regla general de enlaces los ponía rojos y
   sin subrayado). */
.ficha-datos .creditos-producto__link:hover,
.ficha-datos .creditos-producto__link:focus-visible {
    color: var(--lij-text, #262626) !important;
    text-decoration: underline !important;
}

/* "Libros relacionados" como la banda de v3 (PageSection light + BookFeed):
   64px arriba y abajo (48 en teléfono), sin el relleno doble del bloque y su
   contenedor interior (24 + 40), 32px entre el título y la rejilla, y la
   rejilla con el margen de página (40, 16 en teléfono). */
.elementor-element.bloque-relacionados {
    padding: 64px 0 !important;
}

.bloque-relacionados > .e-con {
    padding: 0 !important;
    gap: 32px !important;
}

.bloque-relacionados > .e-con > .elementor-widget-heading > .elementor-widget-container {
    margin: 0 !important;
}

.bloque-relacionados .lij-libros {
    padding: 0 40px;
}

@media (max-width: 599px) {
    .elementor-element.bloque-relacionados {
        padding: 48px 0 !important;
    }

    .bloque-relacionados .lij-libros {
        padding: 0 16px;
    }
}

/* "Comparte:" como v3 .product__share-label: Avenir Medium a 14px (--text-xs),
   interlineado 1.4. La tipografía del widget lo dejaba en 12px/14.4. */
.producto-comparte__label,
.producto-comparte__label .elementor-heading-title {
    font-family: var(--lij-font-title) !important;
    font-weight: var(--lij-weight-body, 500) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--lij-text, #262626) !important;
}

/* La línea de texto del envoltorio de cada icono sumaba 2px a la fila
   (42 frente a los 40 de v3). */
.producto-comparte__icono .elementor-icon-wrapper {
    display: flex;
    line-height: 0;
}

/* Panel "Comprar" igualado a v3 (BuyMenu.css, auditoría 2026-10-07 M12-M14):
   filas de 64px (9/14 de relleno, radio 12), la tienda de SM con su contorno
   rojo de 2px (alguna regla general de enlaces lo anulaba), logos dentro de
   190px de ancho (Abacus salía a 256), título sin el margen del <p>, sombra
   de v3 y la misma entrada suave al abrir. */
.buy-panel {
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.16) !important;
    transform-origin: bottom left;
    animation: lij-buy-panel-in 140ms ease-out;
}

@keyframes lij-buy-panel-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .buy-panel { animation: none; }
}

.buy-panel__header {
    margin: 0 !important;
}

.buy-option {
    padding: 9px 14px !important;
    border-radius: 12px !important;
}

.buy-option--featured,
.buy-option--featured:focus,
.buy-option--featured:active {
    box-shadow: inset 0 0 0 2px var(--lij-red, #ED1B2F) !important;
}

.buy-option:hover,
.buy-option:focus-visible {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.18) !important;
}

.buy-option:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 4px 12px 0 rgba(0, 0, 0, 0.18) !important;
}

.buy-option--featured:hover,
.buy-option--featured:focus-visible {
    box-shadow: inset 0 0 0 2px var(--lij-red, #ED1B2F), 0 4px 12px 0 rgba(0, 0, 0, 0.18) !important;
}

.buy-option__logo {
    max-width: 190px !important;
    width: auto !important;
    height: auto;
}

/* Divisor entre "Descripción" y "Más información" a 16px de cada texto, como
   v3 (.product__tab-bar gap 16 con el divisor en medio). Aquí el divisor es
   el ::before de la segunda pestaña: 16 de hueco entre pestañas y 16 dentro
   de la pestaña, sin margen propio (antes quedaba a 10 y 21). */
.ficha-datos .e-n-tabs-heading {
    gap: 16px !important;
    column-gap: 16px !important;
}

.ficha-datos .e-n-tabs-heading > .e-n-tab-title {
    gap: 16px !important;
}

.ficha-datos .e-n-tab-title + .e-n-tab-title::before {
    margin-right: 0 !important;
}

/* "< Resultados de búsqueda": al pasar el ratón se subraya solo el texto,
   como v3 .breadcrumb__link (la flecha no). */
.ficha-volver .volver-resultados:hover {
    text-decoration: none !important;
}

@media (hover: hover) {
    .ficha-volver .volver-resultados:hover .lij-volver-texto {
        text-decoration: underline;
    }
}