/* ════════════════════════════════════════════════════════════
   Omnibus Catalog — Shop, listados y landings
   Hereda variables de homepage.css: --ob-granate, --ob-cream,
   --ob-black, --ob-surface, --ob-border, --ob-radius(-lg),
   --ob-shadow(-lg), --ob-container-max, --ob-text(-muted).
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   NAVBAR UNIFICADO: mismas reglas que la home aplicadas a shop,
   landings y cualquier página del proyecto que no sea la home.
   homepage.css usa :has(.ob-home); aquí replicamos las mismas
   reglas con :has(.o_wsale_products_page) y :has(#wrap.container).
   ════════════════════════════════════════════════════════════ */

body:has(#wrap[class*="o_wsale_product"]) header#top,
body:has(#wrap[class*="o_wsale_product"]) header#top > .container-fluid,
body:has(.ob-landing-banner) header#top,
body:has(.ob-landing-banner) header#top > .container-fluid,
body:has(.ob-checkout) header#top,
body:has(.ob-checkout) header#top > .container-fluid {
    background: var(--ob-black) !important;
    background-color: var(--ob-black) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#wrap[class*="o_wsale_product"]) header#top nav.navbar,
body:has(.ob-landing-banner) header#top nav.navbar,
body:has(.ob-checkout) header#top nav.navbar {
    background: var(--ob-surface) !important;
    background-color: var(--ob-surface) !important;
    border: 1px solid var(--ob-border) !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 28px rgba(14, 14, 14, 0.08) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

body:has(#wrap[class*="o_wsale_product"]) header#top nav.navbar.o_header_mobile,
body:has(.ob-landing-banner) header#top nav.navbar.o_header_mobile,
body:has(.ob-checkout) header#top nav.navbar.o_header_mobile {
    padding: 0.5rem 1.1rem !important;
}

body:has(#wrap[class*="o_wsale_product"]) header#top nav.navbar .o_colored_level,
body:has(.ob-landing-banner) header#top nav.navbar .o_colored_level,
body:has(.ob-checkout) header#top nav.navbar .o_colored_level {
    background: transparent !important;
}

/* Offcanvas móvil negro editorial completo, idéntico al de la home */
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile,
body:has(#wrap[class*="o_wsale_product"]) .offcanvas.o_navbar_mobile,
body:has(.ob-landing-banner) .o_navbar_mobile,
body:has(.ob-landing-banner) .offcanvas.o_navbar_mobile,
body:has(.ob-checkout) .o_navbar_mobile,
body:has(.ob-checkout) .offcanvas.o_navbar_mobile {
    background: var(--ob-black) !important;
    color: var(--ob-white);
    padding-top: 0;
}

body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .offcanvas-header,
body:has(.ob-landing-banner) .o_navbar_mobile .offcanvas-header,
body:has(.ob-checkout) .o_navbar_mobile .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 1.5rem;
}
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .offcanvas-header .btn-close,
body:has(.ob-landing-banner) .o_navbar_mobile .offcanvas-header .btn-close,
body:has(.ob-checkout) .o_navbar_mobile .offcanvas-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: 0.8;
}
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .offcanvas-body,
body:has(.ob-landing-banner) .o_navbar_mobile .offcanvas-body,
body:has(.ob-checkout) .o_navbar_mobile .offcanvas-body {
    padding: 1.5rem 0 2rem;
}

body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu,
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .navbar-nav,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu,
body:has(.ob-landing-banner) .o_navbar_mobile .navbar-nav,
body:has(.ob-checkout) .o_navbar_mobile .top_menu,
body:has(.ob-checkout) .o_navbar_mobile .navbar-nav {
    gap: 0 !important;
}
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu > li.nav-item,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu > li.nav-item,
body:has(.ob-checkout) .o_navbar_mobile .top_menu > li.nav-item {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu > li.nav-item + li.nav-item,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu > li.nav-item + li.nav-item,
body:has(.ob-checkout) .o_navbar_mobile .top_menu > li.nav-item + li.nav-item {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link,
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu > li.nav-item > .accordion-item > a.nav-link,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu > li.nav-item > .accordion-item > a.nav-link,
body:has(.ob-checkout) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link,
body:has(.ob-checkout) .o_navbar_mobile .top_menu > li.nav-item > .accordion-item > a.nav-link {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.1rem 1.75rem !important;
    color: var(--ob-white) !important;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: none;
    border-radius: 0;
}

body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link.active,
body:has(#wrap[class*="o_wsale_product"]) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link:hover,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link.active,
body:has(.ob-landing-banner) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link:hover,
body:has(.ob-checkout) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link.active,
body:has(.ob-checkout) .o_navbar_mobile .top_menu > li.nav-item > a.nav-link:hover {
    color: var(--ob-granate) !important;
    background: rgba(156, 43, 46, 0.08) !important;
}


/* ════════════════════════════════════════
   Fondo global del área shop + landings
   Mismo crema que la home para coherencia
   ════════════════════════════════════════ */

body:has(#wrap[class*="o_wsale_product"]),
body:has(.ob-shop-banner),
body:has(.ob-landing-banner),
body:has(.ob-checkout) {
    background: var(--ob-black);
    color: var(--ob-white);
}

body:has(#wrap[class*="o_wsale_product"]) header#top .o_colored_level,
body:has(.ob-landing-banner) header#top .o_colored_level,
body:has(.ob-checkout) header#top .o_colored_level {
    background: transparent !important;
}


/* ════════════════════════════════════════
   Contenedor de productos: anchura editorial
   ════════════════════════════════════════ */

.o_wsale_products_page #o_wsale_container,
.o_wsale_products_page > .container {
    max-width: var(--ob-container-max) !important;
}

/* Ocultar categorías nativas de Odoo en la sidebar de /shop:
   Omnibus Store usa solo sus filtros custom. */
.o_wsale_products_page .products_categories,
.o_wsale_products_page .o_categories_collapse_title {
    display: none !important;
}

/* Ocultar el header nativo (H1 "Todos los productos" + buscador Odoo
   + dropdown "Ordenar por" de Odoo): nuestro banner ya hace de
   cabecera, tenemos barra de búsqueda propia y el orden está forzado
   por controlador (stock → visitas). */
/* Ocultar el header nativo: H1 "Todos los productos", buscador Odoo
   y contenedores accesorios. Dejamos VISIBLE "Ordenar por" y
   OCULTAMOS el botón "Filtros" nativo (usamos el flotante custom). */
.o_wsale_products_page #o_wsale_products_header .o_wsale_shop_title,
.o_wsale_products_page #o_wsale_products_header .o_wsale_products_searchbar_form,
.o_wsale_products_page #o_wsale_products_header .o_wsale_products_header_search_form_container,
.o_wsale_products_page #o_wsale_apply_filters_container {
    display: none !important;
}
.o_wsale_products_page #o_wsale_products_header { padding-top: 0 !important; }

/* Texto de resultados de búsqueda — visible en fondo oscuro */
.o_wsale_products_page #o_wsale_products_header h1 .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.o_wsale_products_page .ob-shop-seo-intro,
.o_wsale_products_page #oe_structure_website_sale_products_1 .ob-shop-seo-intro {
    display: none !important;
}

/* Ocultar el botón "Filtros" nativo de Odoo (apunta a #o_wsale_offcanvas).
   En móvil abrimos nuestro propio offcanvas con el FAB flotante granate.
   En desktop no aparece porque tiene d-lg-none de Odoo. */
.o_wsale_products_page button[data-bs-target="#o_wsale_offcanvas"] {
    display: none !important;
}

/* "Ordenar por" sobre fondo negro: texto claro legible.
   El dropdown toggle y su contenido se vuelven blanco translúcido,
   y el menú desplegable queda en crema con texto oscuro. */
.o_wsale_products_page .o_sortby_dropdown .dropdown-toggle,
.o_wsale_products_page .o_sortby_dropdown .dropdown-toggle small,
.o_wsale_products_page .o_sortby_dropdown .dropdown-toggle span,
.o_wsale_products_page .dropdown_sorty_by .dropdown-toggle,
.o_wsale_products_page .dropdown_sorty_by .dropdown-toggle small,
.o_wsale_products_page .dropdown_sorty_by .dropdown-toggle span {
    color: var(--ob-white) !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 600;
}

.o_wsale_products_page .o_sortby_dropdown .dropdown-toggle:hover,
.o_wsale_products_page .o_sortby_dropdown .dropdown-toggle:hover *,
.o_wsale_products_page .dropdown_sorty_by .dropdown-toggle:hover,
.o_wsale_products_page .dropdown_sorty_by .dropdown-toggle:hover * {
    color: #ff9b9e !important;
}

.o_wsale_products_page .o_sortby_dropdown .dropdown-menu,
.o_wsale_products_page .dropdown_sorty_by .dropdown-menu {
    background: var(--ob-surface) !important;
    border: 1px solid var(--ob-border) !important;
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow) !important;
}

.o_wsale_products_page .o_sortby_dropdown .dropdown-menu .dropdown-item,
.o_wsale_products_page .dropdown_sorty_by .dropdown-menu .dropdown-item {
    color: var(--ob-text) !important;
}

.o_wsale_products_page .o_sortby_dropdown .dropdown-menu .dropdown-item:hover,
.o_wsale_products_page .dropdown_sorty_by .dropdown-menu .dropdown-item:hover {
    background: var(--ob-surface-alt) !important;
    color: var(--ob-granate) !important;
}


/* ════════════════════════════════════════
   Banner de /shop (cabecera fija de tienda)
   ════════════════════════════════════════ */

.ob-shop-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--ob-radius-lg);
    background-color: var(--ob-surface);
    background-size: cover;
    background-position: center;
    box-shadow: var(--ob-shadow);
    isolation: isolate;
    min-height: 180px;
    display: flex;
    align-items: center;
    margin: 1.5rem auto 2rem;
    max-width: var(--ob-container-max);
    border: 1px solid var(--ob-border);
    /* Placeholder crema mientras no haya imagen real. Cuando se suba
       banner-shop.webp el url() pisa el fondo plano. */
    background-image: url("/omnibus_catalog/static/src/img/banner-shop.webp");
}
@media (min-width: 992px) {
    .ob-shop-banner { min-height: 220px; }
}

.ob-shop-banner__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}

.ob-shop-banner__content {
    position: relative;
    z-index: 2;
    padding: 1.75rem 1.5rem;
    color: var(--ob-text);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
@media (min-width: 992px) {
    .ob-shop-banner__content { padding: 2.25rem 2rem; }
}

.ob-shop-banner__kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ob-granate);
    margin-bottom: 0.5rem;
}

.ob-shop-banner__title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ob-text);
    margin: 0 0 0.75rem;
}

.ob-shop-banner__sub {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ob-text-muted);
    max-width: 560px;
    margin: 0 auto;
}


/* ════════════════════════════════════════
   Banner de landing de entidad
   (personaje/guionista/editorial/etc.)
   ════════════════════════════════════════ */

.ob-landing-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--ob-radius-lg);
    background-color: var(--ob-black);
    background-size: cover;
    background-position: center;
    box-shadow: var(--ob-shadow);
    isolation: isolate;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
}

.ob-landing-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,14,14,0.15) 0%, rgba(14,14,14,0.75) 100%);
    z-index: 1;
    pointer-events: none;
}

.ob-landing-banner__content {
    position: relative;
    z-index: 2;
    padding: 2rem 2rem;
    color: var(--ob-white);
    width: 100%;
}

.ob-landing-banner__kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #ff9b9e;
    margin-bottom: 0.25rem;
}

.ob-landing-banner__title {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ob-white);
    margin: 0 0 0.5rem;
}

.ob-landing-banner__sub {
    font-size: 0.95rem;
    color: var(--ob-text-on-dark);
    margin: 0;
    max-width: 640px;
}


/* ════════════════════════════════════════
   Barra de búsqueda destacada (shop + landing)
   ════════════════════════════════════════ */

.ob-shop-search {
    max-width: 720px;
    margin: 0 auto 1.75rem;
}

.ob-shop-search--top {
    margin-top: -1rem;
    margin-bottom: 2rem;
}

.ob-shop-search__wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: 999px;
    box-shadow: var(--ob-shadow);
    padding: 0.35rem 0.35rem 0.35rem 1.1rem;
    gap: 0.5rem;
}

.ob-shop-search__wrap:focus-within {
    border-color: var(--ob-granate);
    box-shadow: 0 0 0 3px rgba(156, 43, 46, 0.12);
}

.ob-shop-search__icon {
    color: var(--ob-text-muted);
    font-size: 0.95rem;
}

.ob-shop-search__input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: var(--ob-text);
    padding: 0.55rem 0.25rem;
}

.ob-shop-search__input::placeholder {
    color: var(--ob-text-muted);
}

.ob-shop-search__btn {
    flex: 0 0 auto;
    border: 0;
    background: var(--ob-granate);
    color: var(--ob-white);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.ob-shop-search__btn:hover {
    background: var(--ob-granate-dark);
}


/* ════════════════════════════════════════
   Sidebar de filtros — tarjeta editorial
   Contenedor crema oscuro con cabeceras granate,
   chevron animado, opciones en pill y
   micro-indicador de activos.
   ════════════════════════════════════════ */

.ob-shop-filters {
    font-size: 0.9rem;
    background: var(--ob-surface);
    color: var(--ob-text);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    box-shadow: var(--ob-shadow);
    padding: 0 !important;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.ob-shop-filters::before {
    content: "Filtros";
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ob-granate);
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--ob-border);
}

/* Grupo = fila con separador sutil como el menú móvil home */
.ob-filters__group {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ob-filters__group + .ob-filters__group {
    border-top: 1px solid var(--ob-border) !important;
}

/* Toggle = accordion-button del menú móvil home */
.ob-shop-filters .ob-filters__toggle,
.ob-shop-filters .ob-filters__toggle span {
    color: var(--ob-text) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}
.ob-shop-filters .ob-filters__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 1.1rem 1.25rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    transition: color 0.15s ease, background 0.15s ease;
}

.ob-shop-filters .ob-filters__toggle:hover,
.ob-shop-filters .ob-filters__toggle:hover span,
.ob-shop-filters .ob-filters__toggle:focus,
.ob-shop-filters .ob-filters__toggle:focus span,
.ob-shop-filters .ob-filters__toggle[aria-expanded="true"],
.ob-shop-filters .ob-filters__toggle[aria-expanded="true"] span {
    color: var(--ob-granate) !important;
    background: rgba(156, 43, 46, 0.08) !important;
}

/* Chevron: "+" tipográfico granate que rota a 45deg al abrir */
.ob-shop-filters .ob-filters__toggle .fa-chevron-down {
    background: none !important;
    font-family: inherit !important;
    font-weight: 300 !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ob-granate) !important;
    margin-left: auto;
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform 0.25s ease;
}
.ob-shop-filters .ob-filters__toggle .fa-chevron-down::before {
    content: "+" !important;
    font-family: inherit !important;
}
.ob-shop-filters .ob-filters__toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(45deg);
    color: var(--ob-granate) !important;
}

.ob-filters__group .collapse,
.ob-filters__group .collapsing {
    background: transparent;
    border: 0;
    padding: 0 0 0.5rem;
}

.ob-filters__group .collapse ul,
.ob-filters__group .collapsing ul {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

/* Mini-buscador dentro de un grupo de filtros */
.ob-shop-filters .ob-filters__search {
    position: relative;
    margin: 0.35rem 1rem 0.55rem 2rem;
}
.ob-shop-filters .ob-filters__search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ob-text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}
.ob-shop-filters .ob-filters__search-input {
    width: 100%;
    background: var(--ob-surface-alt);
    border: 1px solid var(--ob-border);
    color: var(--ob-text);
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem 0.45rem 1.95rem;
    border-radius: 999px;
    outline: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ob-shop-filters .ob-filters__search-input::placeholder {
    color: var(--ob-text-muted);
}
.ob-shop-filters .ob-filters__search-input:focus {
    border-color: var(--ob-granate);
    background: var(--ob-surface);
}

/* Items 2º nivel: mismo look que el submenu del offcanvas home */
.ob-shop-filters .ob-filters__option {
    display: block !important;
    padding: 0.7rem 1.75rem 0.7rem 2.75rem !important;
    color: var(--ob-text-muted) !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-align: left !important;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.ob-shop-filters .ob-filters__option:hover {
    color: var(--ob-granate) !important;
    background: transparent !important;
}

.ob-shop-filters .ob-filters__option--active {
    color: var(--ob-text) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.ob-shop-filters .ob-filters__option--active .fa-check {
    color: var(--ob-granate) !important;
}

/* Chips de filtros activos */
.ob-shop-filters .border-bottom {
    border-bottom: 1px solid var(--ob-border) !important;
    margin: 0.5rem 1.25rem 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

.ob-shop-filters .fw-bold {
    color: var(--ob-text) !important;
}

.ob-shop-filters .text-muted {
    color: var(--ob-text-muted) !important;
}

.ob-shop-filters .badge {
    background: var(--ob-granate) !important;
    color: var(--ob-white) !important;
    border: 0 !important;
    padding: 0.35rem 0.65rem !important;
    font-weight: 600;
    font-size: 0.72rem;
    border-radius: 999px !important;
    text-transform: none;
}

.ob-shop-filters .badge:hover {
    background: var(--ob-granate-dark) !important;
}

/* ════════════════════════════════════════
   Bloque contextual "Más de..." en ficha
   banner editorial + grid 4/2 de productos
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   FICHA DE PRODUCTO — trust badges compactos
   Lista vertical sobria debajo del CTA.
   ════════════════════════════════════════ */

.ob-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ob-border);
}

.ob-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--ob-text-muted);
    line-height: 1.35;
}

.ob-trust-badge i {
    color: var(--ob-granate);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO OMNIBUS — página completa en sections boxed
   ════════════════════════════════════════════════════════════ */

.ob-product-page {
    background: transparent !important;
    padding: 0;
    display: block;
    max-width: none !important;
    margin: 0 !important;
    color: var(--ob-white);
}

/* Fondos heredados de Odoo a transparente — ficha respira sobre negro.
   Usamos selectores con mayor especificidad (:not hack) para ganar
   a las reglas del theme base con !important. */
html body:has(#wrap.o_wsale_product_page):not(#nope),
html body:has(#wrap.o_wsale_product_page):not(#nope) > main,
html body:has(#wrap.o_wsale_product_page):not(#nope) #wrapwrap,
html body:has(#wrap.o_wsale_product_page):not(#nope) #wrapwrap > main {
    background: var(--ob-black) !important;
    background-color: var(--ob-black) !important;
    --body-bg: var(--ob-black) !important;
}

body:has(#wrap.o_wsale_product_page) #wrap,
body:has(#wrap.o_wsale_product_page) #wrap > *,
#wrap.o_wsale_product_page,
#wrap.o_wsale_product_page > *,
#wrap.o_wsale_product_page section#product_detail,
#wrap.o_wsale_product_page section#product_detail > *,
#wrap.o_wsale_product_page .oe_website_sale,
#wrap.o_wsale_product_page .o_wsale_product_page,
#wrap.o_wsale_product_page .o_wsale_container_lg,
#wrap.o_wsale_product_page .o_wsale_content_contained {
    background: transparent !important;
    background-color: transparent !important;
}

.ob-product-page .ob-container {
    max-width: var(--ob-container-max);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
}
@media (min-width: 992px) {
    .ob-product-page .ob-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.ob-product-page > .ob-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.ob-product-page > .ob-container:first-child {
    margin-top: 0.75rem;
}

/* Todas las cards internas heredan el look de .ob-card */
.ob-product-page .ob-card {
    background: var(--ob-surface);
    color: var(--ob-text);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .ob-product-page .ob-card { padding: 2rem; }
}
@media (min-width: 992px) {
    .ob-product-page .ob-card { padding: 2.5rem; }
}


/* ──── BREADCRUMB top ──── */
.ob-pp-top {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}
.ob-pp-breadcrumb {
    font-size: 0.78rem;
    color: var(--ob-text-on-dark);
    padding: 0.25rem 0;
}
.ob-pp-breadcrumb a {
    color: var(--ob-text-on-dark);
    text-decoration: none;
    transition: color 0.15s ease;
}
.ob-pp-breadcrumb a:hover {
    color: var(--ob-white);
    text-decoration: none;
}
.ob-pp-breadcrumb__sep {
    margin: 0 0.4rem;
    opacity: 0.4;
}
.ob-pp-breadcrumb__current {
    color: var(--ob-white);
    font-weight: 600;
}


/* ════════════════════════════════════════
   SECTION 1 · HERO del producto
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   HERO GRID — 5 bloques independientes
   Col izq: imagen (1 bloque)
   Col der: 4 bloques apilados con aire
   ════════════════════════════════════════ */
.ob-pp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 992px) {
    .ob-pp-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: 1.1rem;
        align-items: stretch;
    }
}

.ob-pp-info-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent !important;
    padding: 0 !important;
    min-width: 0;
    height: 100%;
}
.ob-pp-info-col > #o_wsale_product_details_content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent !important;
    flex: 1;
    height: 100%;
}
/* El bloque de descripción se estira para llenar el espacio sobrante */
.ob-pp-info-col .ob-pp-block--desc {
    flex: 1;
}

/* Cada .ob-pp-block es una card independiente con su aire */
.ob-pp-block {
    margin: 0 !important;
}

.ob-pp-block--media {
    padding: 1rem !important;
}
@media (min-width: 768px) {
    .ob-pp-block--media { padding: 1.25rem !important; }
}
.ob-pp-media-inner {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    min-width: 0;
}

.ob-pp-block--buy {
    padding: 1.75rem 1.75rem !important;
}
.ob-pp-block--trust {
    padding: 1.25rem 1.5rem !important;
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .ob-pp-block--trust {
        padding: 1rem !important;
    }
    .ob-pp-trust-banner__inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    .ob-pp-trust-banner__item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }
}
.ob-pp-block--desc {
    padding: 1.75rem 2rem !important;
}

/* Trust strip horizontal dentro del .ob-card de la columna derecha */
.ob-pp-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
}
.ob-pp-trust-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ob-dark);
    white-space: nowrap;
}
.ob-pp-trust-chip > i {
    color: var(--ob-granate);
    font-size: 0.85rem;
}
/* Trust banner ancho completo debajo del hero */
.ob-pp-trust-banner {
    padding: 0;
    margin: 0 !important;
}
.ob-pp-trust-banner__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
}
.ob-pp-trust-banner__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    flex: 1 1 0;
    min-width: 0;
}
.ob-pp-trust-banner__item > i {
    font-size: 1.1rem;
    color: var(--ob-granate, #8b1a2e);
    flex-shrink: 0;
}
.ob-pp-trust-banner__title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ob-dark, #1a1a2e);
    line-height: 1.2;
}
.ob-pp-trust-banner__sub {
    font-size: 0.65rem;
    color: var(--ob-text-muted, #666);
    line-height: 1.2;
}
/* Legacy trust-list (ya no se usa) */
.ob-pp-trust-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    justify-content: space-between;
}
.ob-pp-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}
.ob-pp-trust-item > i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ob-cream);
    border: 1px solid var(--ob-border);
    border-radius: 999px;
    color: var(--ob-granate);
    font-size: 0.85rem;
}
.ob-pp-trust-item__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ob-text);
    line-height: 1.2;
}
.ob-pp-trust-item__text {
    font-size: 0.68rem;
    color: var(--ob-text-muted);
    line-height: 1.3;
}

.ob-pp-block__kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ob-granate);
    margin-bottom: 0.6rem;
}
.ob-pp-block__title {
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 800;
    color: var(--ob-text);
    margin: 0 0 0.85rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Columna imagen + thumbnails */
.ob-pp-hero__media {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    min-width: 0;
}

.ob-pp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 0 0 72px;
}
.ob-pp-thumb {
    width: 72px;
    height: 72px;
    border: 2px solid var(--ob-border);
    border-radius: var(--ob-radius);
    background: var(--ob-surface-alt);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.ob-pp-thumb:hover {
    border-color: var(--ob-granate);
    transform: translateY(-1px);
}
.ob-pp-thumb.is-active {
    border-color: var(--ob-granate);
    box-shadow: 0 0 0 1px var(--ob-granate);
}
.ob-pp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 575.98px) {
    .ob-pp-hero__media { flex-direction: column; }
    .ob-pp-media-inner {
        flex-direction: column;
    }
    .ob-pp-thumbs {
        flex-direction: row;
        flex: 0 0 auto;
        order: 2;
        width: 100%;
    }
    .ob-pp-hero__img {
        min-height: 0;
        width: 100%;
        max-height: 420px;
        order: 1;
    }
}

.ob-pp-hero__img {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 2 / 3;
    background: #0a0a0a;
    border-radius: var(--ob-radius-lg);
    overflow: hidden;
    max-height: 780px;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-pp-hero__img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* #product_details de Odoo ahora es el wrapper .ob-pp-info-col,
   neutralizamos su background:#FFFFFF y padding nativos. */
#product_details.ob-pp-info-col {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.ob-pp-kicker {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ob-granate);
    margin-bottom: 0.35rem;
}
.ob-pp-kicker a {
    color: inherit;
    text-decoration: none;
}
.ob-pp-kicker a:hover {
    color: var(--ob-granate-dark);
}

.ob-pp-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ob-text);
    margin: 0 0 1.25rem;
}

/* Chips = pill compacta inline con separador "·" estilo ficha libro.
   Label pequeño muted + nombre normal, altura reducida. */
.ob-pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.4;
}
.ob-pp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    background: transparent;
    border: 1px solid var(--ob-border);
    border-radius: 999px;
    color: var(--ob-text);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ob-pp-chip:hover {
    border-color: var(--ob-granate);
    background: var(--ob-cream);
    color: var(--ob-granate);
    text-decoration: none;
}
.ob-pp-chip__label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ob-text-muted);
    line-height: 1;
}
.ob-pp-chip__name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ob-text);
    line-height: 1;
}
.ob-pp-chip:hover .ob-pp-chip__name {
    color: var(--ob-granate);
}

.ob-pp-price-block {
    padding: 1rem 0 0;
    border-top: 1px solid var(--ob-border);
    margin-bottom: 0.25rem;
}
.ob-pp-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ob-pp-price__now {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 800;
    color: var(--ob-text);
    line-height: 1;
}
.ob-pp-price__old {
    font-size: 1rem;
    color: var(--ob-text-muted);
    text-decoration: line-through;
}
.ob-pp-price__discount {
    display: inline-flex;
    align-items: center;
    background: var(--ob-granate);
    color: var(--ob-white);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.ob-pp-price__tax {
    font-size: 0.75rem;
    color: var(--ob-text-muted);
    margin-top: 0.35rem;
}

.ob-pp-variants {
    margin: 0;
}
.ob-pp-variants .attribute_name,
.ob-pp-variants .h6 {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ob-text) !important;
    margin-bottom: 0.5rem !important;
}
.ob-pp-variants label,
.ob-pp-variants .form-check-label {
    color: var(--ob-text) !important;
}
.ob-pp-variants .form-check-input:checked {
    background-color: var(--ob-granate);
    border-color: var(--ob-granate);
}

/* CTA wrapper nativo restyle */
.ob-pp-cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* Selector cantidad + botón add to cart propio */
.ob-pp-cta-row { margin-bottom: 0.75rem; }
.ob-pp-qty-row { margin-bottom: 0; }
.ob-pp-qty-btn {
    width: 30px; height: 30px;
    padding: 0;
    border-color: #ccc;
    background: #fff;
    color: var(--ob-dark, #1a1a2e);
    font-size: 1rem;
    line-height: 1;
    border-radius: 6px;
    flex-shrink: 0;
}
.ob-pp-qty-btn:hover {
    background: var(--ob-granate, #8b1a2e);
    border-color: var(--ob-granate, #8b1a2e);
    color: #fff;
}
.ob-pp-qty-input {
    width: 44px !important;
    height: 30px;
    text-align: center !important;
    border-color: #ccc;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 0 !important;
    -moz-appearance: textfield;
}
.ob-pp-qty-input::-webkit-outer-spin-button,
.ob-pp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-pp-add-to-cart { margin-bottom: 0.5rem; }
.ob-pp-cta .btn-primary,
.ob-pp-cta button[name="add_to_cart"] {
    background: var(--ob-granate) !important;
    border-color: var(--ob-granate) !important;
    color: var(--ob-white) !important;
    font-weight: 700 !important;
    padding: 0.85rem 1.4rem !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
}
.ob-pp-cta .btn-primary:hover,
.ob-pp-cta button[name="add_to_cart"]:hover {
    background: var(--ob-granate-dark) !important;
    border-color: var(--ob-granate-dark) !important;
}
.ob-pp-cta .btn-outline-primary {
    background: transparent !important;
    color: var(--ob-granate) !important;
    border: 2px solid var(--ob-granate) !important;
    font-weight: 700 !important;
    padding: 0.78rem 1.4rem !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
}
.ob-pp-cta .btn-outline-primary:hover {
    background: var(--ob-granate) !important;
    color: var(--ob-white) !important;
}
.ob-pp-cta .css_quantity {
    border: 1px solid var(--ob-border) !important;
    border-radius: 999px !important;
    background: var(--ob-cream) !important;
    padding: 0.15rem 0.25rem !important;
}
.ob-pp-cta .css_quantity input {
    background: transparent !important;
    color: var(--ob-text) !important;
}
.ob-pp-cta .css_quantity a,
.ob-pp-cta .css_quantity i {
    color: var(--ob-text) !important;
}
.ob-pp-cta #add_to_cart_wrap {
    gap: 0.75rem !important;
}


/* ════════════════════════════════════════
   DESCRIPCIÓN INLINE dentro del hero
   Collapse con checkbox hack (sin JS).
   ════════════════════════════════════════ */

.ob-pp-desc-inline {
    margin-top: 0.5rem;
    padding-top: 0;
    position: relative;
}

.ob-pp-desc-inline__kicker {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ob-granate);
    margin-bottom: 0.25rem;
}

.ob-pp-desc-inline__title {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ob-text);
    margin: 0 0 0.85rem;
    line-height: 1.15;
}

.ob-pp-desc-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ob-pp-desc-inline__body {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ob-text);
    max-height: 180px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.ob-pp-desc-inline__body::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(249, 245, 237, 0), var(--ob-surface) 85%);
    pointer-events: none;
}
.ob-pp-desc-inline__body p {
    margin: 0 0 0.75rem;
}
.ob-pp-desc-inline__body p:last-child { margin-bottom: 0; }
.ob-pp-desc-inline__body strong {
    color: var(--ob-text);
    font-weight: 700;
}

.ob-pp-desc-inline__more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.75rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ob-granate);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s ease;
}
.ob-pp-desc-inline__more:hover {
    color: var(--ob-granate-dark);
}
.ob-pp-desc-inline__more i {
    transition: transform 0.25s ease;
    font-size: 0.7rem;
}
.ob-pp-desc-inline__more-label-less {
    display: none;
}

/* Checkbox checked → desplegar */
.ob-pp-desc-toggle:checked ~ .ob-pp-desc-inline__body {
    max-height: 4000px;
}
.ob-pp-desc-toggle:checked ~ .ob-pp-desc-inline__body::after {
    display: none;
}
.ob-pp-desc-toggle:checked ~ .ob-pp-desc-inline__more .ob-pp-desc-inline__more-label-more {
    display: none;
}
.ob-pp-desc-toggle:checked ~ .ob-pp-desc-inline__more .ob-pp-desc-inline__more-label-less {
    display: inline;
}
.ob-pp-desc-toggle:checked ~ .ob-pp-desc-inline__more i {
    transform: rotate(180deg);
}


/* ════════════════════════════════════════
   SECTION 2 · TRUST BADGES (4 items)
   ════════════════════════════════════════ */

.ob-pp-trust {
    padding: 1.25rem 1.5rem !important;
}
@media (min-width: 992px) {
    .ob-pp-trust { padding: 1.25rem 2rem !important; }
}
.ob-pp-trust__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .ob-pp-trust__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}
.ob-pp-trust__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.ob-pp-trust__item > i {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ob-cream);
    border: 1px solid var(--ob-border);
    border-radius: 999px;
    color: var(--ob-granate);
    font-size: 1rem;
}
.ob-pp-trust__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ob-text);
    line-height: 1.2;
}
.ob-pp-trust__text {
    font-size: 0.72rem;
    color: var(--ob-text-muted);
    line-height: 1.3;
}


/* ════════════════════════════════════════
   SECTION 3 · DESCRIPCIÓN
   ════════════════════════════════════════ */

.ob-pp-desc__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ob-text);
    max-width: 720px;
}
.ob-pp-desc__body p {
    margin: 0 0 1rem;
}
.ob-pp-desc__body p:last-child {
    margin-bottom: 0;
}
.ob-pp-desc__body strong {
    color: var(--ob-text);
    font-weight: 700;
}


/* ════════════════════════════════════════
   SECTION 4 · SPECS + accordion
   ════════════════════════════════════════ */

/* La ficha técnica hereda .ob-related-card pero sin línea divisoria
   en la cabecera. */
.ob-pp-specs .ob-section__header {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Specs grid con 3 grupos en fila, apila en móvil */
.ob-pp-specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
    .ob-pp-specs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.ob-pp-specs-group {
    min-width: 0;
}
.ob-pp-specs-group__title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ob-granate);
    margin: 0 0 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--ob-border);
}

.ob-pp-specs__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1rem;
    margin: 0;
}
.ob-pp-specs__list dt {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ob-text-muted);
    margin: 0;
}
.ob-pp-specs__list dd {
    font-size: 0.88rem;
    color: var(--ob-text);
    margin: 0;
    font-weight: 600;
    line-height: 1.35;
}
.ob-pp-specs__link {
    color: var(--ob-text);
    text-decoration: none;
    border-bottom: 1px solid var(--ob-border);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.ob-pp-specs__link:hover {
    color: var(--ob-granate);
    border-bottom-color: var(--ob-granate);
    text-decoration: none;
}

/* Descripción breve (sobre este omnibus): texto completo sin corte */
.ob-pp-desc-short {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ob-text);
}
.ob-pp-desc-short p {
    margin: 0 0 0.75rem;
}
.ob-pp-desc-short p:last-child {
    margin-bottom: 0;
}

/* Descripción larga en ficha técnica: con toggle leer más/menos */
.ob-pp-specs-longdesc {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ob-border);
    position: relative;
}
.ob-pp-longdesc__body {
    max-height: 220px;
    margin-top: 0.5rem;
}

.ob-pp-accordion details {
    border-top: 1px solid var(--ob-border);
    padding: 0.85rem 0;
}
.ob-pp-accordion details:first-child {
    border-top: 0;
    padding-top: 0;
}
.ob-pp-accordion summary {
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ob-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    position: relative;
}
.ob-pp-accordion summary::-webkit-details-marker { display: none; }
.ob-pp-accordion summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--ob-granate);
    transition: transform 0.25s ease;
    line-height: 1;
}
.ob-pp-accordion details[open] summary::after {
    transform: rotate(45deg);
}
.ob-pp-accordion summary i {
    color: var(--ob-granate);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}
.ob-pp-accordion__body {
    padding: 0.75rem 0 0.25rem 1.5rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ob-text-muted);
}
.ob-pp-accordion__body p {
    margin: 0 0 0.6rem;
}
.ob-pp-accordion__body p:last-child {
    margin-bottom: 0;
}
.ob-pp-accordion__body strong {
    color: var(--ob-text);
    font-weight: 700;
}


/* Ocultamos el trust block .ob-trust-badges antiguo (dentro del CTA)
   y el ob-trust-section--product porque ya tenemos el nuevo .ob-pp-trust */
.ob-product-page .ob-trust-badges { display: none !important; }
.ob-trust-section--product { display: none !important; }


/* ════════════════════════════════════════════════════════════
   FICHA — SNIPPET "Descubre más"
   Cada entidad (personaje/guionista) = un .ob-section propio
   con su .ob-card crema sobre fondo negro de la página.
   Misma estética que los bloques editoriales de la home.
   ════════════════════════════════════════════════════════════ */

/* Section wrapper: usa mismas reglas de .ob-section que homepage.css
   pero sin depender de .ob-home para el padding. */
.ob-related-section {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
@media (min-width: 992px) {
    .ob-related-section {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }
}

/* Container interno 1200px con padding lateral */
.ob-related-section .ob-container {
    max-width: var(--ob-container-max);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
}
@media (min-width: 992px) {
    .ob-related-section .ob-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Card externa del bloque — hereda look de .ob-card (home) */
.ob-related-card {
    background: var(--ob-surface);
    color: var(--ob-text);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    padding: 1.5rem;
}
@media (min-width: 768px) {
    .ob-related-card { padding: 2rem; }
}
@media (min-width: 992px) {
    .ob-related-card { padding: 2.5rem; }
}

/* Header del bloque (kicker + título + link "ver todos") */
.ob-related-card .ob-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--ob-border);
}
.ob-related-card .ob-section__kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ob-granate);
    margin-bottom: 0.3rem;
}
.ob-related-card .ob-section__title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 800;
    color: var(--ob-text);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.ob-related-card .ob-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ob-granate);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ob-related-card .ob-link:hover {
    color: var(--ob-granate-dark);
    text-decoration: none;
}

/* HERO HORIZONTAL — foto 180px izq + kicker/título/desc/CTA der.
   Reemplaza al header superior del snippet: aquí sale todo. */
.ob-related-hero {
    display: flex;
    gap: 1.75rem;
    align-items: center;
    padding: 0.25rem 0 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--ob-border);
}
@media (max-width: 575.98px) {
    .ob-related-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

.ob-related-hero__media {
    flex: 0 0 auto;
    width: 130px;
    min-height: 130px;
}
.ob-related-hero__media img {
    width: 100%;
    height: 130px;
    object-fit: contain;
    object-position: center center;
    display: block;
    border-radius: var(--ob-radius-lg);
    background: var(--ob-surface-alt);
    border: 1px solid var(--ob-border);
}
@media (max-width: 575.98px) {
    .ob-related-hero__media {
        width: 120px;
        height: 120px;
    }
}

.ob-related-hero__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ob-related-hero__kicker {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ob-granate);
}

.ob-related-hero__title {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 800;
    color: var(--ob-text);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.ob-related-hero__desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ob-text-muted);
    margin: 0;
    max-width: 580px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA que abre/cierra el snippet vía checkbox hack */
.ob-related-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ob-granate);
    color: var(--ob-white);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    margin-top: 0.35rem;
    align-self: flex-start;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}
.ob-related-hero__cta:hover {
    background: var(--ob-granate-dark);
    color: var(--ob-white);
    text-decoration: none;
}
.ob-related-hero__cta i {
    font-size: 0.72rem;
    transition: transform 0.25s ease;
}
.ob-related-hero__cta-less { display: none; }

/* Checkbox oculto, controla el collapse */
.ob-related-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Panel plegable — cerrado por defecto */
.ob-related-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
    margin-top: 0;
}

/* Abierto: checkbox checked ~ .ob-related-collapse */
.ob-related-toggle:checked ~ .ob-related-hero .ob-related-hero__cta-more { display: none; }
.ob-related-toggle:checked ~ .ob-related-hero .ob-related-hero__cta-less { display: inline; }
.ob-related-toggle:checked ~ .ob-related-hero .ob-related-hero__cta i { transform: rotate(180deg); }
.ob-related-toggle:checked ~ .ob-related-collapse {
    max-height: 3000px;
    opacity: 1;
    margin-top: 1.75rem;
}

/* Link al pie del panel desplegable */
.ob-related-footlink {
    margin-top: 1.25rem;
    text-align: right;
    font-size: 0.78rem;
}
.ob-related-footlink a {
    color: var(--ob-granate);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ob-related-footlink a:hover {
    color: var(--ob-granate-dark);
    text-decoration: none;
}
.ob-related-footlink i {
    font-size: 0.72rem;
}


/* GRID de cards medianas: 4 cols desktop, 2 móvil */
.ob-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) {
    .ob-related-grid { gap: 1.25rem; }
}
@media (min-width: 992px) {
    .ob-related-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ──── ob-rc: CARD DE PRODUCTO MEDIANA (solo ficha)
   Coherente con .ob-card--product del shop pero
   más compacta y sin botones comprar-ahora. ──── */
.ob-rc {
    display: flex;
    flex-direction: column;
    background: var(--ob-cream);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(14, 14, 14, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ob-rc:hover {
    transform: translateY(-3px);
    border-color: var(--ob-granate);
    box-shadow: 0 10px 28px rgba(14, 14, 14, 0.12);
}

.ob-rc__img-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.ob-rc__img {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--ob-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-rc__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.ob-rc:hover .ob-rc__img img {
    transform: scale(1.04);
}

.ob-rc__discount {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--ob-granate);
    color: var(--ob-white);
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1;
    z-index: 1;
}

.ob-rc__body {
    padding: 0.85rem 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.ob-rc__title-link {
    text-decoration: none;
    color: inherit;
}
.ob-rc__title-link:hover .ob-rc__title {
    color: var(--ob-granate);
}
.ob-rc__title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ob-text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    transition: color 0.15s ease;
}

.ob-rc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

.ob-rc__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}
.ob-rc__price-now {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ob-text);
    line-height: 1.1;
}
.ob-rc__price-old {
    font-size: 0.72rem;
    color: var(--ob-text-muted);
    text-decoration: line-through;
}

.ob-rc__cart {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ob-granate);
    color: var(--ob-white);
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ob-rc__cart:hover {
    background: var(--ob-granate-dark);
    color: var(--ob-white);
    transform: scale(1.06);
    text-decoration: none;
}


/* ════════════════════════════════════════
   Botón flotante de filtros (móvil) + offcanvas
   ════════════════════════════════════════ */

.ob-mobile-filter-fab {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 1045;
    background: var(--ob-granate);
    color: var(--ob-white);
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 10px 30px rgba(156, 43, 46, 0.4);
    letter-spacing: 0.02em;
}
.ob-mobile-filter-fab:hover,
.ob-mobile-filter-fab:focus {
    background: var(--ob-granate-dark);
    color: var(--ob-white);
}
.ob-mobile-filter-fab i {
    font-size: 0.95rem;
}

.ob-filters-offcanvas {
    background: var(--ob-cream) !important;
    color: var(--ob-text);
    max-width: 86vw;
    width: 360px;
}
/* Bootstrap responsive-offcanvas convierte .offcanvas a
   static; visibility:visible; height:auto dentro del breakpoint lg,
   lo que hace que el panel renderice inline ocupando flow. Forzamos
   display:none cuando no esté abierto, y fixed cuando se abre. */
html body .offcanvas.ob-filters-offcanvas:not(.show):not(.showing) {
    display: none !important;
}
html body .offcanvas.ob-filters-offcanvas.show,
html body .offcanvas.ob-filters-offcanvas.showing {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 360px !important;
    max-width: 86vw !important;
    height: 100% !important;
    background-color: var(--ob-cream) !important;
    border-left: 1px solid var(--ob-border) !important;
    visibility: visible !important;
    z-index: 1045 !important;
    transform: none !important;
}
.ob-filters-offcanvas .offcanvas-header {
    background: var(--ob-cream);
    border-bottom: 1px solid var(--ob-border);
    padding: 1rem 1.25rem;
}
.ob-filters-offcanvas .offcanvas-title {
    color: var(--ob-granate) !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
}
.ob-filters-offcanvas .btn-close {
    opacity: 0.8;
}
.ob-filters-offcanvas .offcanvas-body {
    background: var(--ob-cream);
    padding: 0 !important;
}
.ob-filters-offcanvas .ob-shop-filters {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 !important;
}
.ob-filters-offcanvas .ob-shop-filters::before {
    display: none;
}


/* ════════════════════════════════════════
   Listados de entidades (entity_list)
   ════════════════════════════════════════ */

.ob-entity-card {
    background: var(--ob-surface);
    border: 1px solid var(--ob-border) !important;
    border-radius: var(--ob-radius-lg) !important;
    box-shadow: var(--ob-shadow) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

.ob-entity-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ob-shadow-lg) !important;
}

.ob-entity-card__img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ob-surface-alt);
}

.ob-entity-card__img img {
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: 100%;
}


/* ════════════════════════════════════════
   CARD DE PRODUCTO — estilo premium negro
   Aplica a /shop y a todas las landings
   ════════════════════════════════════════ */

/* Grid: 2 cols móvil/tablet, 3 cols desktop. grid-auto-rows:auto
   más un min-height fijo en la card = todas las filas iguales sin
   colapsar cuando el contenedor no tiene altura explícita. */
#o_wsale_products_grid.o_wsale_products_grid_table,
#o_wsale_products_grid.o_wsale_products_grid_table_md,
.ob-product-grid {
    display: grid !important;
    --columns: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    gap: 16px !important;
}
/* Reset del wrapper nativo .oe_product:
   Odoo mete g-col-6 (Bootstrap grid 12) + grid-row span + altura con
   CSS vars. Limpiamos todo y fijamos altura dura + ocupa 100% del
   item del CSS grid. */
#o_wsale_products_grid.o_wsale_products_grid_table > .oe_product,
#o_wsale_products_grid.o_wsale_products_grid_table_md > .oe_product,
.ob-product-grid > * {
    grid-row: auto !important;
    grid-column: auto !important;
    grid-column-end: auto !important;
    grid-row-end: auto !important;
    grid-column-start: auto !important;
    align-self: stretch !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 580px !important;
    content-visibility: visible !important;
    overflow: visible !important;
}
@media (max-width: 991.98px) {
    #o_wsale_products_grid.o_wsale_products_grid_table > .oe_product,
    #o_wsale_products_grid.o_wsale_products_grid_table_md > .oe_product,
    .ob-product-grid > * {
        min-height: 520px !important;
    }
}

/* Móvil: hueco descripción↔pie eliminado. El pie se pega justo
   debajo del texto en lugar de al fondo absoluto. */
@media (max-width: 991.98px) {
    .ob-card--product > .o_wsale_product_information {
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }
    .ob-card--product .ob-card__foot,
    .ob-card--product .o_wsale_product_sub {
        margin-top: 0.4rem !important;
    }
}

/* Wrapper intermedio entre .oe_product y el form real.
   overflow:visible para que los tooltips custom sobresalgan. */
.oe_product > .o_wsale_product_grid_wrapper,
.oe_product .o_wsale_product_grid_wrapper {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
}

/* .oe_product (hijo del grid) también visible y sin contain */
#o_wsale_products_grid.o_wsale_products_grid_table > .oe_product,
#o_wsale_products_grid.o_wsale_products_grid_table_md > .oe_product {
    overflow: visible !important;
    contain: none !important;
}

/* El form .oe_product_cart de Odoo añade contain:layout style y
   content-visibility:auto que recortan los tooltips absolutos. */
.oe_product form.oe_product_cart,
.ob-card--product {
    contain: none !important;
    content-visibility: visible !important;
}

/* Grid y section padre */
#o_wsale_products_grid,
#o_wsale_products_grid.o_wsale_products_grid_table,
#o_wsale_products_grid.o_wsale_products_grid_table_md,
.o_wsale_products_grid_table_wrapper {
    overflow: visible !important;
}

/* El form .ob-card--product ocupa el 100% del wrapper */
.oe_product .ob-card--product,
.oe_product form.oe_product_cart {
    height: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

@media (min-width: 992px) {
    #o_wsale_products_grid.o_wsale_products_grid_table,
    #o_wsale_products_grid.o_wsale_products_grid_table_md,
    .ob-product-grid {
        --columns: 3 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Contenedor card — altura fija + ancho 100% del item.
   Todas las cards miden exactamente lo mismo porque min-height y
   max-height coinciden. overflow:visible para que el tooltip del
   botón "Comprar ahora" pueda sobresalir sin recortarse. */
.ob-card--product {
    background: var(--ob-surface) !important;
    color: var(--ob-text) !important;
    border: 1px solid var(--ob-border) !important;
    border-radius: var(--ob-radius-lg) !important;
    overflow: visible !important;
    box-shadow: var(--ob-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 580px !important;
    max-height: none !important;
}
@media (max-width: 991.98px) {
    .ob-card--product {
        min-height: 520px !important;
    }
}

/* Imagen: vertical tipo portada de libro. Ratio 2/3, altura generosa
   porque es el atractivo principal del producto. */
.ob-card--product > .oe_product_image {
    width: 100% !important;
    flex: 0 0 auto !important;
    aspect-ratio: 2 / 3;
    max-height: 400px;
    overflow: hidden;
    background: var(--ob-surface-alt);
    border-top-left-radius: var(--ob-radius-lg);
    border-top-right-radius: var(--ob-radius-lg);
}
@media (max-width: 991.98px) {
    .ob-card--product > .oe_product_image {
        max-height: 320px;
    }
}

.ob-card--product > .oe_product_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
}

.ob-card--product > .o_wsale_product_information {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.85rem 1.1rem 1.1rem !important;
    gap: 0.55rem !important;
    border-bottom-left-radius: var(--ob-radius-lg);
    border-bottom-right-radius: var(--ob-radius-lg);
}

/* Odoo 19 pone order:4 en .o_wsale_product_information_text para
   empujarlo al final de la card nativa — en nuestra card lo queremos
   ARRIBA. Forzamos orden explícito en los hijos directos. */
.ob-card--product .o_wsale_product_information_text {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0 !important;
}

.ob-card--product .ob-card__foot,
.ob-card--product .o_wsale_product_sub {
    order: 2 !important;
    margin-top: auto !important;
    flex: 0 0 auto !important;
}

.ob-card--product:hover {
    transform: translateY(-3px);
    box-shadow: var(--ob-shadow-lg);
}

/* Imagen — ratio 3/4 omnibus, fondo negro suave */
.ob-card--product .oe_product_image {
    background: #151515 !important;
    aspect-ratio: 3 / 4;
    margin: 0 !important;
}

.ob-card--product .oe_product_image img,
.ob-card--product .oe_product_image .o_wsale_product_image_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

/* Cuerpo texto */
.ob-card--product .o_wsale_product_information {
    background: var(--ob-surface) !important;
    color: var(--ob-text) !important;
}

/* Título — selectores reales del markup Odoo 19 */
.ob-card--product h2.o_wsale_products_item_title,
.ob-card--product .o_wsale_products_item_title,
.ob-card--product h2.o_wsale_products_item_title a,
.ob-card--product h2.o_wsale_products_item_title a span,
.ob-card--product .o_wsale_products_item_title a,
.ob-card--product .o_wsale_products_item_title a span,
.ob-card--product .o_wsale_products_item_title * {
    color: var(--ob-text) !important;
    text-decoration: none !important;
}

.ob-card--product h2.o_wsale_products_item_title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.4rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: unset !important;
    word-break: break-word;
    text-align: center !important;
}
.ob-card--product h2.o_wsale_products_item_title a,
.ob-card--product h2.o_wsale_products_item_title span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline !important;
}

.ob-card--product h2.o_wsale_products_item_title a:hover,
.ob-card--product h2.o_wsale_products_item_title a:hover span {
    color: var(--ob-granate) !important;
}

/* Descripción corta — 2 líneas */
.ob-card--product .ob-card__desc-wrap,
.ob-card--product .oe_subdescription_wrapper {
    display: block !important;
    margin-bottom: 0.6rem !important;
}

.ob-card--product .oe_subdescription,
.ob-card--product .oe_subdescription * {
    color: var(--ob-text-muted) !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

.ob-card--product .oe_subdescription {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
}

/* ──── Pie de card: precio arriba, fila de botones abajo, anclado ABAJO ──── */

.ob-card--product .ob-card__foot,
.ob-card--product .o_wsale_product_sub {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.55rem !important;
    background: var(--ob-surface) !important;
    margin-top: 0.6rem !important;
    flex: 0 0 auto !important;
}

.ob-card--product .product_price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--ob-text) !important;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
}

.ob-card--product .ob-card__price,
.ob-card--product .product_price > span,
.ob-card--product .product_price > .mb-0 {
    color: var(--ob-text) !important;
    font-size: 1.1rem;
    font-weight: 800;
}

.ob-card--product .ob-card__price-old,
.ob-card--product .product_price del,
.ob-card--product .product_price del * {
    color: var(--ob-text-muted) !important;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: line-through;
}

/* Badge descuento — outline granate, fondo transparente */
.ob-card__discount {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    color: var(--ob-granate) !important;
    font-size: 0.68rem !important;
    font-weight: 800;
    padding: 0.18rem 0.42rem !important;
    border: 1.5px solid var(--ob-granate) !important;
    border-radius: 999px;
    box-shadow: none !important;
    letter-spacing: 0.01em;
    line-height: 1 !important;
    vertical-align: middle;
    margin-left: 0.4rem;
    height: 16px;
}

/* Fila de acciones: Añadir al carrito ancho + Comprar ahora icon al lado */
.ob-card--product .ob-card__actions,
.ob-card--product .o_wsale_product_btn {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    width: 100%;
}

.ob-card__btn-add {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--ob-granate);
    color: var(--ob-white);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    border: 0;
    line-height: 1;
    transition: background 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-card__btn-add i {
    font-size: 0.85rem;
    flex: 0 0 auto;
}

/* En móvil (cols estrechas) el texto "Añadir al carrito" ocupa
   demasiado y pisa al botón rayo. Colapsamos a solo icono. */
@media (max-width: 575.98px) {
    .ob-card__btn-add {
        padding: 0.55rem 0.5rem;
    }
    .ob-card__btn-add span {
        display: none;
    }
}

/* Móvil: badge descuento en su propia línea bajo el precio para no
   descuadrar la armonía del price row. */
@media (max-width: 575.98px) {
    .ob-card--product .product_price {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        line-height: 1.05;
    }
    .ob-card--product .ob-card__price,
    .ob-card--product .product_price > span,
    .ob-card--product .product_price > .mb-0 {
        font-size: 1rem;
    }
    .ob-card__discount {
        margin-left: 0 !important;
        align-self: flex-start;
    }
    .ob-card--product .ob-card__price-old,
    .ob-card--product .product_price del,
    .ob-card--product .product_price del * {
        font-size: 0.72rem;
    }
}

.ob-card__btn-add:hover {
    background: var(--ob-granate-dark);
    color: var(--ob-white);
    text-decoration: none;
}

/* Botón "Comprar ahora" secundario: por defecto solo rayo en un
   círculo. Al hacer hover aparece una burbuja flotante con el texto
   encima (no empuja el layout). */
.ob-card__btn-buy {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ob-surface-alt);
    color: var(--ob-text);
    border: 1px solid var(--ob-border);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ob-card__btn-buy .ob-card__btn-buy-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ob-granate);
    color: var(--ob-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
}

.ob-card__btn-buy .ob-card__btn-buy-label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ob-granate);
}

.ob-card__btn-buy:hover {
    background: var(--ob-granate);
    border-color: var(--ob-granate);
    color: var(--ob-white);
    text-decoration: none;
    transform: scale(1.08);
}

.ob-card__btn-buy:hover .ob-card__btn-buy-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Botones nativos del shop usan el mismo estilo */
.ob-card--product .o_wsale_product_btn .btn,
.ob-card--product .o_wsale_product_btn a.btn,
.ob-card--product .o_wsale_product_btn button.btn {
    flex: 1 1 auto;
    padding: 0.55rem 0.9rem !important;
    border-radius: 999px !important;
    background: var(--ob-granate) !important;
    border: 0 !important;
    color: var(--ob-white) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background 0.15s ease;
}

.ob-card--product .o_wsale_product_btn .btn:hover,
.ob-card--product .o_wsale_product_btn a.btn:hover,
.ob-card--product .o_wsale_product_btn button.btn:hover {
    background: var(--ob-granate-dark) !important;
}

.ob-card--product .o_wsale_product_btn .btn i {
    margin-right: 0.4rem;
}

/* Ocultar wishlist / ribbons / bubble roja nativa que aparece en la
   esquina superior derecha de la card en /shop. */
.ob-card--product .o_add_wishlist,
.ob-card--product .o_wsale_product_btn_wishlist,
.ob-card--product .o_ribbons,
.ob-card--product .o_wsale_ribbon,
.ob-card--product .o_product_ribbon {
    display: none !important;
}

/* ════════════════════════════════════════
   /SHOP — barra de filtros horizontal + grid 4 col
   ════════════════════════════════════════ */

/* Desktop (≥992px): sidebar nativa fuera, productos 100% */
@media (min-width: 992px) {
    body:has(.ob-shop-banner) #products_grid_before,
    body:has(.ob-shop-banner) .o_wsale_products_side {
        display: none !important;
    }
    body:has(.ob-shop-banner) .o_wsale_products_main,
    body:has(.ob-shop-banner) .o_wsale_products_main_hide_lg {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body:has(.ob-shop-banner) .oe_website_sale .o_wsale_products_grid_table_wrapper {
        width: 100% !important;
    }
    /* 4 cols ≥1200, 3 cols 992-1199 */
    #o_wsale_products_grid.o_wsale_products_grid_table,
    #o_wsale_products_grid.o_wsale_products_grid_table_md,
    .ob-product-grid {
        --columns: 3 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1200px) {
    #o_wsale_products_grid.o_wsale_products_grid_table,
    #o_wsale_products_grid.o_wsale_products_grid_table_md,
    .ob-product-grid {
        --columns: 4 !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    /* Cards un pelín más bajas con 4 col */
    #o_wsale_products_grid.o_wsale_products_grid_table > .oe_product,
    #o_wsale_products_grid.o_wsale_products_grid_table_md > .oe_product {
        min-height: 540px !important;
    }
    .ob-card--product {
        min-height: 540px !important;
    }
}

/* ════════════════════════════════════════
   Entity grid used by publisher/character/writer/artist listings.
   4 cols desktop / 2 móvil, card crema
   ════════════════════════════════════════ */
.ob-entity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
}
@media (min-width: 768px) {
    .ob-entity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}
@media (min-width: 1200px) {
    .ob-entity-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.ob-entity-card {
    display: flex;
    flex-direction: column;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    border-radius: var(--ob-radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    color: var(--ob-text) !important;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: var(--ob-shadow);
}
.ob-entity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.ob-entity-card__img {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--ob-body-bg, #f4efe6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ob-entity-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.ob-entity-card__placeholder {
    font-size: 3rem;
    color: var(--ob-border);
}
.ob-entity-card__body {
    padding: 0.85rem 1rem 1rem;
    text-align: center;
}
.ob-entity-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ob-text);
    margin: 0 0 0.3rem;
}
.ob-entity-card__desc {
    font-size: 0.82rem;
    color: var(--ob-text-muted, #777);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Mobile: el desc no aporta porque queda a 2 líneas truncadas en 1 col estrecha.
   Mejor solo nombre + foto. */
@media (max-width: 767.98px) {
    .ob-entity-card__desc {
        display: none !important;
    }
    .ob-entity-card__body {
        padding: 0.6rem 0.5rem 0.7rem;
    }
}

/* Mobile: igualar comportamiento de cards con stock vs sin stock.
   El bloque de acciones SIEMPRE ocupa la misma altura, las cards no
   se descuadran cuando se mezclan en grid. Aplica a cualquier .ob-card--product
   en mobile (shop, landings, blog products). */
@media (max-width: 767.98px) {
    .ob-card--product .ob-card__actions {
        min-height: 42px;
        align-items: center;
    }
    .ob-card--product .ob-card__btn-add {
        height: 38px;
        flex: 1 1 auto;
    }
    /* Texto "Añadir al carrito" se colapsa a solo icono en cards estrechas */
    .ob-card--product:not(.ob-pp-product-card) .ob-card__btn-add span {
        display: none;
    }
    .ob-card--product .ob-card__btn-buy {
        height: 38px;
        width: 38px;
        flex: 0 0 38px;
    }
    .ob-card--product .ob-card__btn-add--notify {
        height: 38px;
        font-size: 0.78rem;
    }
}

/* Estado sin stock — card: botón Avísame que va al form notify.
   Mismo border-radius que el botón add normal (pill 999px) para que
   las cards con/sin stock tengan la misma altura y forma visual. */
.ob-card__btn-add--notify {
    flex: 1 1 100%;
    background: transparent !important;
    border: 1.5px solid var(--ob-granate) !important;
    color: var(--ob-granate) !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1;
    height: 38px;
    box-sizing: border-box;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}
.ob-card__btn-add--notify:hover {
    background: var(--ob-granate) !important;
    color: #fff !important;
}

/* Estado sin stock — ficha producto */
.ob-pp-out-of-stock {
    padding: 1.1rem 1.2rem;
    background: var(--ob-body-bg, #f4efe6);
    border: 1.5px dashed var(--ob-border);
    border-radius: 10px;
    color: var(--ob-text);
}
.ob-pp-out-of-stock__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}
.ob-pp-out-of-stock__head > i {
    font-size: 1.6rem;
    color: var(--ob-granate);
    flex: 0 0 auto;
}
.ob-pp-out-of-stock__title {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.ob-pp-out-of-stock__text {
    font-size: 0.85rem;
    color: var(--ob-text-muted, #777);
    line-height: 1.4;
}
.ob-pp-out-of-stock__cta {
    display: inline-flex;
    align-items: center;
    background: var(--ob-granate);
    color: #fff;
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.ob-pp-out-of-stock__cta:hover {
    background: var(--ob-granate-dark, #5a1414);
}
.ob-pp-out-of-stock__form .input-group {
    max-width: 360px;
}

/* Editoriales: dos bloques grandes tipo banner horizontal */
.ob-publisher-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
}
@media (min-width: 768px) {
    .ob-publisher-blocks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}
.ob-publisher-block {
    position: relative;
    display: block;
    min-height: 320px;
    border-radius: var(--ob-radius-lg);
    overflow: hidden;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: var(--ob-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
@media (min-width: 768px) {
    .ob-publisher-block {
        min-height: 420px;
    }
}
.ob-publisher-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.ob-publisher-block__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%);
}
.ob-publisher-block__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ob-publisher-block__kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f5d5d5;
    margin-bottom: 0.2rem;
}
.ob-publisher-block__title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.05;
}
@media (min-width: 768px) {
    .ob-publisher-block__title {
        font-size: 2.75rem;
    }
}
.ob-publisher-block__desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    margin: 0.25rem 0 0.5rem;
    max-width: 520px;
}
.ob-publisher-block__cta {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
    margin-top: 0.4rem;
}
.ob-publisher-block:hover .ob-publisher-block__cta {
    color: #ffb3b3;
}

/* Paginación */
.ob-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 0.5rem;
}
.ob-pagination__link,
.ob-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    color: var(--ob-text);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ob-pagination__link:hover,
.ob-pagination__page:hover {
    background: var(--ob-granate);
    color: #fff;
    border-color: var(--ob-granate);
}
.ob-pagination__page--active {
    background: var(--ob-granate);
    color: #fff !important;
    border-color: var(--ob-granate);
    pointer-events: none;
}
.ob-pagination__link--disabled {
    opacity: 0.4;
    pointer-events: none;
}
.ob-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: var(--ob-granate);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

/* Descripción larga integrada en el hero card, separada por border top */
.ob-landing-hero {
    background: var(--ob-surface);
    border-radius: var(--ob-radius-lg);
    box-shadow: var(--ob-shadow);
    overflow: hidden;
}
.ob-landing-hero__longdesc {
    padding: 1.25rem 1.75rem 1.5rem;
    border-top: 1px solid var(--ob-border);
    color: var(--ob-text);
    font-size: 0.92rem;
    line-height: 1.6;
}
.ob-landing-hero__longdesc p {
    margin: 0 0 0.75rem;
}
.ob-landing-hero__longdesc p:last-child {
    margin-bottom: 0;
}
.ob-landing-hero__longdesc strong {
    color: var(--ob-text);
    font-weight: 700;
}
@media (max-width: 767.98px) {
    .ob-landing-hero__longdesc {
        padding: 1rem 1.25rem 1.25rem;
    }
}

/* CTA contacto al final de landings */
.ob-landing-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 0.5rem;
    background: var(--ob-surface) !important;
    border-radius: var(--ob-radius-lg);
    box-shadow: var(--ob-shadow);
}
.ob-landing-cta__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.ob-landing-cta__icon {
    font-size: 1.4rem;
    color: var(--ob-granate);
    flex: 0 0 auto;
}
.ob-landing-cta__text {
    margin: 0;
    color: var(--ob-text);
    font-size: 0.95rem;
    line-height: 1.5;
}
.ob-landing-cta__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background: var(--ob-granate);
    color: #fff !important;
    font-weight: 700;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s;
}
.ob-landing-cta__btn:hover {
    background: var(--ob-granate-dark, #5a1414);
}
@media (max-width: 767.98px) {
    .ob-landing-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: 1.25rem;
        gap: 1rem;
    }
    .ob-landing-cta__btn {
        justify-content: center;
    }
}

/* ════════════════════════════════════════
   Hero de landings (personaje/guionista/etc)
   Card crema con foto pequeña izq + info der
   ════════════════════════════════════════ */
.ob-landing-hero {
    margin: 0 0 1.25rem;
}

/* Hero variante fondo (editoriales): imagen full + overlay + texto sobre */
.ob-landing-hero--bg {
    position: relative;
    min-height: 260px;
    border-radius: var(--ob-radius-lg);
    overflow: hidden;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    box-shadow: var(--ob-shadow);
}
@media (min-width: 768px) {
    .ob-landing-hero--bg {
        min-height: 360px;
    }
}
.ob-landing-hero--bg .ob-landing-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.2) 100%);
}
.ob-landing-hero__bg-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 2.25rem;
    color: #fff;
    max-width: 760px;
}
.ob-landing-hero--bg .ob-landing-hero__kicker {
    color: #f5d5d5;
    margin-bottom: 0.35rem;
}
.ob-landing-hero--bg .ob-landing-hero__title {
    color: #fff;
    font-size: 2.25rem;
}
@media (min-width: 768px) {
    .ob-landing-hero--bg .ob-landing-hero__title {
        font-size: 2.75rem;
    }
}
.ob-landing-hero--bg .ob-landing-hero__desc {
    color: rgba(255,255,255,0.9);
}
.ob-landing-hero__card {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "media body"
        "media desc";
    gap: 0.5rem 1.5rem;
    align-items: start;
    padding: 1.5rem 1.75rem;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
}
.ob-landing-hero__card--center {
    display: block;
    text-align: left;
    padding: 2rem 1.5rem;
}
.ob-landing-hero__card--center .ob-landing-hero__body {
    max-width: 640px;
}
.ob-landing-hero__media {
    grid-area: media;
    width: 200px;
    min-height: 200px;
    border-radius: 12px;
    background: var(--ob-body-bg, #f4efe6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ob-landing-hero__media img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center center;
    border-radius: 12px;
}
.ob-landing-hero__media-placeholder {
    font-size: 3.5rem;
    color: var(--ob-border);
}
.ob-image-credit {
    margin-top: 0.35rem;
    max-width: 100%;
    color: rgba(34, 34, 34, 0.58);
    font-size: 0.68rem;
    line-height: 1.25;
    text-align: center;
}
.ob-image-credit a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.ob-landing-hero__body {
    grid-area: body;
    min-width: 0;
}
.ob-landing-hero__card > .ob-landing-hero__desc {
    grid-area: desc;
}
.ob-landing-hero__kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ob-granate);
    margin-bottom: 0.35rem;
}
.ob-landing-hero__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ob-text);
    margin: 0 0 0.5rem;
    line-height: 1.15;
}
.ob-landing-hero__desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ob-text);
    margin: 0 0 0.25rem;
}
.ob-landing-hero__desc p {
    margin: 0 0 0.7rem;
}
.ob-landing-hero__desc p:last-child {
    margin-bottom: 0;
}
.ob-landing-hero__desc strong {
    color: var(--ob-text);
    font-weight: 700;
}
/* Mobile: foto pequeña + título a la derecha (en la misma fila), descripción
   debajo a ancho completo. Ahorra mucho espacio vertical. */
@media (max-width: 767.98px) {
    .ob-landing-hero__card {
        display: grid;
        grid-template-columns: 96px 1fr;
        grid-template-areas:
            "media body"
            "desc desc";
        gap: 0.9rem 1rem;
        padding: 1rem;
        align-items: center;
    }
    .ob-landing-hero__media {
        grid-area: media;
        width: 96px;
        height: 96px;
    }
    .ob-landing-hero__body {
        grid-area: body;
        text-align: left;
    }
    .ob-landing-hero__kicker {
        font-size: 0.65rem;
        margin-bottom: 0.2rem;
    }
    .ob-landing-hero__title {
        font-size: 1.4rem;
        margin: 0;
    }
    /* La descripción larga del hero a ancho completo debajo */
    .ob-landing-hero__card .ob-landing-hero__desc {
        grid-area: desc;
        margin-top: 0.25rem;
        font-size: 0.85rem;
    }
}

.ob-landing-hero__meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--ob-text-muted, #777);
}
.ob-landing-hero__count {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--ob-granate);
}
@media (max-width: 767.98px) {
    .ob-landing-hero__meta {
        justify-content: flex-start;
    }
}

/* Toolbar: [sortby] [search centrado] [filtros] — compacta, centrada */
.ob-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.75rem auto 1.5rem;
    max-width: 860px;
}
.ob-shop-toolbar .ob-shop-search--top {
    flex: 1 1 420px;
    margin: 0 !important;
    max-width: 480px;
}
.ob-shop-toolbar__slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
/* Ordenar nativo dentro del slot */
.ob-shop-toolbar__slot .o_sortby_dropdown {
    margin: 0 !important;
}
/* Móvil: toolbar compacta. Sortby + buscador en línea, filtros via FAB. */
@media (max-width: 767.98px) {
    .ob-shop-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        margin: 0.4rem auto 0.6rem;
    }
    .ob-shop-toolbar__slot {
        min-width: 0;
        justify-content: center;
    }
    .ob-shop-toolbar__slot--right {
        display: none; /* FAB ya existe en móvil */
    }
    .ob-shop-toolbar .ob-shop-search--top {
        flex: 0 0 auto;
        max-width: none;
    }
    /* El dropdown sortby añade padding extra de Bootstrap, lo recortamos */
    .ob-shop-toolbar__slot .o_sortby_dropdown .btn {
        padding: 0.25rem 0.5rem;
    }
    /* Reduce el hueco entre toolbar y grid en mobile (era enorme) */
    .ob-shop-toolbar + .ob-product-grid,
    .ob-shop-toolbar + .ob-mobile-filter-fab + .ob-product-grid {
        margin-top: 0.5rem !important;
        padding-top: 0 !important;
    }
    /* py-4 del wrap nativo es excesivo en mobile */
    #wrap.o_wsale_products_page.py-4,
    #wrap.o_wsale_products_page {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

.ob-shop-toolbar__filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--ob-surface);
    border: 1px solid var(--ob-border);
    color: var(--ob-text);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ob-shop-toolbar__filters-btn:hover {
    background: var(--ob-granate, #7a1a1a);
    color: #fff;
    border-color: var(--ob-granate, #7a1a1a);
}
.ob-shop-toolbar__filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ob-granate, #7a1a1a);
    color: #fff;
    font-size: 0.72rem;
    margin-left: 0.4rem;
}
.ob-shop-toolbar__filters-btn:hover .ob-shop-toolbar__filters-count {
    background: #fff;
    color: var(--ob-granate, #7a1a1a);
}

/* Ocultar FAB flotante móvil en desktop (ya tenemos botón en toolbar) */
@media (min-width: 768px) {
    .ob-mobile-filter-fab {
        display: none !important;
    }
}

/* Offcanvas filtros en desktop: ancho cómodo */
@media (min-width: 992px) {
    .ob-filters-offcanvas {
        width: 380px !important;
    }
}

/* Sidebar vertical fuera del container */
.ob-shop-filters--side {
    background: var(--ob-surface, #fff);
    border: 1px solid var(--ob-border);
    border-radius: 12px;
    padding: 1rem 0.9rem;
    box-shadow: var(--ob-shadow);
}
.ob-shop-filters__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--ob-text);
    font-size: 0.95rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--ob-border);
}
.ob-shop-filters__head i {
    color: var(--ob-accent, #7a1a1a);
}
.ob-shop-filters__active {
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--ob-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.ob-shop-filters--side .ob-filters__group {
    margin-bottom: 0.3rem;
}
.ob-shop-filters--side .ob-filters__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.1rem;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ob-text);
    cursor: pointer;
    text-align: left;
}
.ob-shop-filters--side .ob-filters__toggle:hover {
    color: var(--ob-accent, #7a1a1a);
}
.ob-shop-filters--side .ob-filters__toggle i {
    font-size: 0.75rem;
    opacity: 0.6;
    transition: transform 0.2s;
}
.ob-shop-filters--side .ob-filters__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}
.ob-shop-filters--side .ob-filters__search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ob-body-bg, #f4efe6);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.4rem;
}
.ob-shop-filters--side .ob-filters__search input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.85rem;
    color: var(--ob-text);
}
.ob-shop-filters--side .ob-filters__list {
    padding: 0 0 0.5rem;
    max-height: 240px;
    overflow-y: auto;
}
.ob-shop-filters--side .ob-filters__item {
    margin: 0;
}
.ob-shop-filters--side .ob-filters__option {
    display: block;
    padding: 0.35rem 0.5rem;
    color: var(--ob-text);
    border-radius: 5px;
    font-size: 0.85rem;
    transition: background 0.12s;
}
.ob-shop-filters--side .ob-filters__option:hover {
    background: var(--ob-body-bg, #f4efe6);
    color: var(--ob-accent, #7a1a1a);
}
.ob-shop-filters--side .ob-filters__option--active {
    background: var(--ob-accent, #7a1a1a);
    color: #fff !important;
}

/* Chips activos (reusables) */
.ob-filters-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--ob-accent, #7a1a1a);
    color: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.ob-filters-bar__chip:hover {
    opacity: 0.85;
    color: #fff;
}
.ob-filters-bar__clear {
    font-size: 0.78rem;
    color: var(--ob-text-muted, #777);
    text-decoration: underline;
    margin-left: 0.3rem;
}
.ob-filters-bar__clear:hover {
    color: var(--ob-accent, #7a1a1a);
}

/* ════════════════════════════════════════
   Client-side search for publisher/character/writer/artist listings.
   Filtra cards in-place (todas las páginas).
   ════════════════════════════════════════ */
.ob-entity-search {
    max-width: 640px;
    margin: 0 auto 1.5rem;
}
.ob-entity-search__wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ob-surface, #fff);
    border: 1px solid var(--ob-border, #e5ded3);
    border-radius: var(--ob-radius-lg, 14px);
    padding: 0.5rem 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.ob-entity-search__icon {
    color: var(--ob-text-muted, #888);
    margin-right: 0.6rem;
}
.ob-entity-search__input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1rem;
    color: var(--ob-text, #2a1a14);
}
.ob-entity-search__clear {
    border: 0;
    background: transparent;
    color: var(--ob-text-muted, #888);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    display: none;
}
.ob-entity-search__wrap.is-active .ob-entity-search__clear {
    display: inline-flex;
}
.ob-entity-search__empty {
    text-align: center;
    color: var(--ob-text-muted, #888);
    margin-top: 1rem;
}
.ob-entity-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.ob-entity-chip {
    border: 1px solid var(--ob-border, #e5ded3);
    background: var(--ob-surface, #fff);
    color: var(--ob-text, #2a1a14);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ob-entity-chip:hover {
    border-color: var(--ob-accent, #7a1a1a);
    color: var(--ob-accent, #7a1a1a);
}
.ob-entity-chip.is-active {
    background: var(--ob-accent, #7a1a1a);
    border-color: var(--ob-accent, #7a1a1a);
    color: #fff;
}

/* Paginación: por defecto ocultamos las cards que no son de la página
   activa. Cuando el buscador está activo, el JS añade .is-searching al
   grid → se muestran todas las cards (menos las que no casan con la
   query, marcadas con [hidden]). */
.ob-entity-grid .ob-entity-card[data-page] { display: none; }
.ob-entity-grid .ob-entity-card.is-current-page {
    display: flex;
}
.ob-entity-grid.is-searching .ob-entity-card { display: flex; }
.ob-entity-grid.is-searching .ob-entity-card[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════
   FIX: header text color roto en el core SCSS de Odoo
   (website.scss:406). La regla usa o-website-value('header-text-color')
   y si el website no tiene esa variable definida, el SCSS compila
   `color: !important;` (vacío), lo que desaparece el selector de
   idioma, los badges y textos del navbar mobile. Causa bugs #8, #9
   y parte del #4 (ilegibilidad en portal).
   Sobreescribimos con el mismo selector + color explícito:
   - En home/shop/landings (fondo oscuro): texto blanco
   - En portal (fondo crema): texto granate
   ════════════════════════════════════════════════════════════ */
/* Desktop (no overlay, scrolled): texto negro sobre fondo claro. */
#wrapwrap:not(.o_header_overlay) header .nav-item > .nav-link > *,
#wrapwrap:not(.o_header_overlay) header .js_language_selector span,
#wrapwrap:not(.o_header_overlay) header .badge,
#wrapwrap:not(.o_header_overlay) header .nav-item > .accordion-item *,
header.o_header_is_scrolled .nav-item > .nav-link > *,
header.o_header_is_scrolled .js_language_selector span,
header.o_header_is_scrolled .badge,
header.o_header_is_scrolled .nav-item > .accordion-item * {
    color: var(--ob-black, #0a0a0a) !important;
}
/* Mobile offcanvas: siempre fondo oscuro → texto blanco.
   .o_navbar_mobile.offcanvas da 2 clases extra → gana especificidad
   sobre la regla desktop (#wrapwrap + 3 clases < #wrapwrap + 4 clases). */
#wrapwrap .o_navbar_mobile.offcanvas .nav-item > .nav-link,
#wrapwrap .o_navbar_mobile.offcanvas .nav-item > .nav-link > *,
#wrapwrap .o_navbar_mobile.offcanvas .js_language_selector span,
#wrapwrap .o_navbar_mobile.offcanvas .badge,
#wrapwrap .o_navbar_mobile.offcanvas .nav-item > .accordion-item,
#wrapwrap .o_navbar_mobile.offcanvas .nav-item > .accordion-item *,
#wrapwrap .o_navbar_mobile.offcanvas .accordion-button {
    color: var(--ob-white, #fff) !important;
}
/* En el portal cliente el header es crema → texto granate oscuro */
body:has(.ob-portal) #wrapwrap header .js_language_selector span,
body:has(.ob-portal) #wrapwrap header .nav-item > .nav-link > *,
body:has(.ob-portal) #wrapwrap header .badge,
body:has(.ob-portal) #wrapwrap header .nav-item > .accordion-item * {
    color: #2a1518 !important;
}