/* bh2026-listado.css — REDISEÑO UX FASE 3: categoría y listados (Claudia, 15-oct-2026)
   Se carga DESPUÉS de bh2026.css (header.tpl, solo en category / prices-drop / new-products / best-sales / search / manufacturer).
   Usa las variables de bh2026.css (--bh-g, --bh-g-ink, --bh-bg, --bh-line, --bh-text, --bh-muted, --bh-radius). Sin fuentes ni librerías nuevas.
   Plantillas: category.tpl, product-sort.tpl (barra), bh3-filtros.tpl, pagination.tpl. Datos: módulo bhlistados. */

/* ---------- comunes a todos los listados ---------- */
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .top-pagination-content { display: none; }   /* una sola paginación, abajo (maqueta) */
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .sortPagiBar .nbrItemPage,
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .pagination-container .product-count,
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .bh3-pagination + .product-count { display: none; }
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) #center_column { min-width: 0; }

/* título de las páginas que ya traen su h1 (ofertas, novedades, más vendidos, búsqueda, marca) */
body:is(#prices-drop, #new-products, #best-sales, #search, #manufacturer) h1.page-heading.product-listing { margin: 26px 0 14px; padding: 0; border: 0; background: none; color: var(--bh-text); text-align: center; text-transform: none; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.15; }
body:is(#search) h1.page-heading .heading-counter { display: block; margin-top: 6px; color: var(--bh-muted); font-size: 16px; font-weight: 400; }

/* ---------- cabecera de la categoría ---------- */
.bh3-head { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 22px; text-align: center; }
.bh3-head-txt { max-width: 760px; }
.bh3-title { margin: 0; padding: 0; border: 0; background: none; color: var(--bh-text); text-transform: none; font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.bh3-sub { margin: 8px 0 0; color: var(--bh-muted); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.4; }
.bh3-leaf { flex: 0 0 auto; width: 86px; height: 64px; }
@media (max-width: 767px) {
  .bh3-head { gap: 8px; margin: 8px 0 14px; }
  .bh3-leaf { width: 48px; height: 36px; }
  .bh3-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
}

/* ---------- subcategorías ---------- */
.bh3-subcats { position: relative; margin: 0 0 20px; }
.bh3-subcats-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bh3-subcats-track > li { position: relative; margin: 0; padding: 0; }
.bh3-subcat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; height: 100%; padding: 12px 8px 10px; border: 2px solid var(--bh-g); border-radius: 10px; background: #fff; color: var(--bh-text); text-align: center; text-decoration: none; }
.bh3-subcat:hover, .bh3-subcat:focus-visible { border-color: var(--bh-g-ink); box-shadow: 0 6px 16px rgba(31, 90, 46, .14); color: var(--bh-g-d); }
.bh3-subcat:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
.bh3-subcat-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: #fdf1e4; }
.bh3-subcat-ico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bh3-subcat-nm { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.bh3-subcats-next { display: none; }
@media (max-width: 767px) {
  .bh3-subcats { margin-right: -15px; }   /* = padding de #center_column en móvil (con -16px sobraba 1 px de desborde horizontal) */
  .bh3-subcats-track { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 2px 52px 6px 2px; scroll-snap-type: x mandatory; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .bh3-subcats-track::-webkit-scrollbar { display: none; }
  .bh3-subcats-track > li { flex: 0 0 108px; scroll-snap-align: start; }
  .bh3-subcats-next { position: absolute; top: 50%; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -26px; padding: 0; border: 1px solid var(--bh-line); border-radius: 50%; background: #fff; color: var(--bh-g-d); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer; }
  .bh3-subcats-next[hidden] { display: none; }
}

/* ---------- Destacados de la categoría ---------- */
.bh3-dest { margin: 0 0 22px; padding: 16px 16px 12px; border-radius: 14px; background: var(--bh-bg); }
.bh3-dest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.bh3-dest-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; color: var(--bh-text); text-transform: none; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; line-height: 1.2; }
.bh3-dest-all { flex: 0 0 auto; color: var(--bh-g-d); font-size: 15px; text-decoration: underline; }
.bh3-dest-all:hover { color: var(--bh-g-hov); }
.bh3-dest-track { margin: 0 -8px; }
.bh3-dest-track ul.product_base_list.grid { flex-wrap: nowrap; justify-content: flex-start; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bh3-dest-track ul.product_base_list.grid::-webkit-scrollbar { display: none; }
.bh3-dest-track ul.product_base_list.grid li.base_product { flex: 0 0 20%; width: 20%; max-width: none; margin: 0 0 6px; scroll-snap-align: start; }
.bh3-dots { display: none; justify-content: center; gap: 4px; margin: 4px 0 0; }
.bh3-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.bh3-dots button::before { content: ""; display: block; width: 10px; height: 10px; margin: 7px; border-radius: 50%; background: #c5d9b6; }
.bh3-dots button.is-on::before { background: var(--bh-g-ink); }
@media (max-width: 991px) {
  .bh3-dest-track ul.product_base_list.grid li.base_product { flex-basis: 33.3333%; width: 33.3333%; }
}
@media (max-width: 767px) {
  .bh3-dest { margin-right: -4px; margin-left: -4px; padding: 12px 10px 8px; }
  .bh3-dest-head { flex-wrap: wrap; gap: 4px 12px; }
  .bh3-dest-track ul.product_base_list.grid li.base_product { flex-basis: 72%; width: 72%; }
  .bh3-dots { display: flex; }
}

/* ---------- barra: filtros + ordenar + vista ---------- */
.bh3-toolbar { margin: 0 0 10px; padding: 0; }
.bh3-toolbar .sortPagiBar { margin: 0; clear: none; }
.bh3-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border: 1px solid #dfe9d6; border-radius: var(--bh-radius); background: #fff; }
.bh3-bar::after { content: none; }
/* casilla del truco sin JS: oculta a la vista pero sigue en el árbol de accesibilidad (aria-label); nada de .checker de uniform */
.bh3-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; pointer-events: none; }
.bh3-bar .checker, .bh3-bar .checker:has(.bh3-toggle) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; pointer-events: none; }
.bh3-bar .checker:not(:has(.bh3-toggle)) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; opacity: 1; pointer-events: auto; }
.bh3-open, .bh3-backdrop, .bh3-panel-head, .bh3-panel-foot { display: none; }
.bh3-panel, .bh3-panel-body { display: contents; }
.bh3-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 10px; order: 1; }
.bh3-bar .bh3-sort { order: 2; float: none; width: auto; margin: 0; }
.bh3-bar ul.display { order: 3; float: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; line-height: 1; }
/* sin filtros (ofertas, novedades…): la barra va a la derecha */
.bh3-bar > .bh3-panel > .bh3-panel-body > .bh3-sort:first-child { margin-left: auto; }

/* desplegables */
.bh3-dd { position: relative; }
.bh3-dd > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 16px; border: 1px solid var(--bh-line); border-radius: 999px; background: #fff; color: var(--bh-text); font-size: 14.5px; line-height: 1.2; cursor: pointer; list-style: none; user-select: none; }
.bh3-dd > summary::-webkit-details-marker { display: none; }
.bh3-dd > summary:hover { border-color: var(--bh-g); }
.bh3-dd > summary:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
.bh3-dd[open] > summary { border-color: var(--bh-g-ink); background: var(--bh-bg); }
.bh3-dd.has-active > summary { border-color: var(--bh-g-ink); font-weight: 700; }
.bh3-dd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bh-pink-ink); }
.bh3-chev { transition: transform .15s; }
.bh3-dd[open] .bh3-chev { transform: rotate(180deg); }
.bh3-dd-body { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 250px; max-width: 320px; max-height: 340px; overflow-y: auto; padding: 8px; border: 1px solid var(--bh-line); border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(31, 90, 46, .18); }
.bh3-dd-body ul { margin: 0; padding: 0; list-style: none; }
.bh3-dd-body li { margin: 0; padding: 0; }
.bh3-dd-body li a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: 6px; color: var(--bh-text); font-size: 14px; line-height: 1.25; text-decoration: none; }
.bh3-dd-body li a:hover, .bh3-dd-body li a:focus-visible { background: var(--bh-bg); }
.bh3-dd-body li.is-on a { font-weight: 700; }
.bh3-nm { flex: 1 1 auto; min-width: 0; }
.bh3-n { flex: 0 0 auto; color: var(--bh-muted); font-size: 12.5px; }
/* cuadradito de marcar: ::before del enlace (sin <span> extra por opción) */
.bh3-dd-body:not(.bh3-nochk) li a::before { content: ""; flex: 0 0 auto; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #9db88c; border-radius: 4px; background: #fff; }
.bh3-dd-precio .bh3-dd-body li a::before { border-radius: 50%; }
.bh3-dd-body:not(.bh3-nochk) li.is-on a::before { border-color: var(--bh-g-ink); background: var(--bh-g-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.bh3-dd-precio .bh3-dd-body li.is-on a::before { background-image: none; box-shadow: inset 0 0 0 3px #fff; }
/* «Ver todas» (marcas): el resto de la lista, plegado pero en el HTML */
.bh3-all { margin-top: 6px; border-top: 1px solid var(--bh-line); padding-top: 6px; }
.bh3-all > summary { display: flex; align-items: center; min-height: 40px; padding: 6px 8px; color: var(--bh-g-d); font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; list-style: none; }
.bh3-all > summary::-webkit-details-marker { display: none; }
.bh3-all > summary:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
.bh3-all[open] > summary { text-decoration: none; }
.bh3-all ul { margin: 0; padding: 0; list-style: none; }
.bh3-dd-q { display: block; width: 100%; margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--bh-line); border-radius: 8px; font-size: 14px; }
.bh3-clear { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; color: var(--bh-g-d); font-size: 14px; text-decoration: underline; }

/* ordenar por */
.bh3-sort .selector1 { display: flex; align-items: center; gap: 8px; }
.bh3-sort label { float: none; margin: 0; color: var(--bh-muted); font-size: 14px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
/* select nativo (lleva .not_uniform: uniform.js ya no lo envuelve ni lo deja a opacity 0) con flecha propia */
.bh3-sort select.selectProductSort { -webkit-appearance: none; appearance: none; float: none; display: block; opacity: 1; height: 40px; min-width: 170px; max-width: 240px; padding: 0 34px 0 12px; border: 1px solid var(--bh-line); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; color: var(--bh-text); font-size: 14.5px; cursor: pointer; }
.bh3-sort select.selectProductSort:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
/* uniform.js (u otro script) puede envolver igualmente el select en div.selector (ancho fijo 132px + overflow hidden = caja cortada a la derecha, ronda 16-oct):
   el contenedor se queda neutro, sin recorte, y el valor lo pinta el propio select */
.bh3-sort .selector { float: none; position: static; width: auto !important; height: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible !important; }
.bh3-sort .selector > span { display: none !important; }
.bh3-sort .selector select.selectProductSort { opacity: 1 !important; position: static !important; width: auto !important; min-width: 170px; height: 40px !important; }

/* conmutador rejilla / lista */
.bh3-bar ul.display li { float: none; padding: 0; border: 0; background: none; border-radius: 0; }
.content_sortPagiBar .bh3-bar ul.display li, .content_sortPagiBar .bh3-bar ul.display li:nth-child(2), .content_sortPagiBar .bh3-bar ul.display li:last-child { padding: 0; border: 0; border-radius: 0; background: none; }
.bh3-bar ul.display li.display-title { display: none; }
.bh3-bar ul.display li a { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; border: 1px solid var(--bh-line); border-radius: 8px; background: #fff; color: var(--bh-g-d); }
.bh3-bar ul.display li a:hover { border-color: var(--bh-g); }
.bh3-bar ul.display li a:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
.bh3-bar ul.display li.selected a { border-color: var(--bh-g-ink); background: var(--bh-g-ink); color: #fff; }
.bh3-bar ul.display li.selected svg, .bh3-bar ul.display li.selected i { color: #fff; }

/* ---------- panel lateral en móvil ---------- */
@media (max-width: 767px) {
  .bh3-bar { flex-wrap: nowrap; gap: 8px; padding: 6px; }
  .bh3-open { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--bh-text); font-size: 17px; cursor: pointer; }
  .bh3-open span { font-weight: 500; }
  .bh3-bar ul.display { order: 2; margin-left: 0; }
  .bh3-bar ul.display li a { width: 48px; height: 44px; }
  .bh3-toggle:focus-visible ~ .bh3-open { outline: 2px solid var(--bh-g-d); }
  .bh3-backdrop { position: fixed; inset: 0; z-index: 99990; background: rgba(20, 30, 15, .45); }
  .bh3-toggle:checked ~ .bh3-backdrop { display: block; }
  .bh3-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99995; display: flex; flex-direction: column; width: min(90vw, 390px); background: #fff; box-shadow: -8px 0 30px rgba(0, 0, 0, .25); transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .bh3-toggle:checked ~ .bh3-panel { transform: none; visibility: visible; transition: transform .22s ease; }
  .bh3-panel-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--bh-line); }
  .bh3-panel-title { color: var(--bh-text); font-size: 19px; font-weight: 700; }
  .bh3-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--bh-text); cursor: pointer; }
  .bh3-panel-body { display: block; flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
  .bh3-panel-foot { display: block; flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--bh-line); background: #fff; }
  .bh3-apply { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background: var(--bh-g-ink); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
  .bh3-filters { display: block; order: 0; }
  .bh3-dd { border-bottom: 1px solid var(--bh-line); }
  .bh3-dd > summary { display: flex; justify-content: space-between; width: 100%; min-height: 52px; padding: 10px 2px; border: 0; border-radius: 0; background: none; font-size: 16px; }
  .bh3-dd[open] > summary { background: none; }
  .bh3-dd > summary .bh3-dd-t { flex: 1 1 auto; }
  .bh3-dd-body { position: static; min-width: 0; max-width: none; max-height: 300px; padding: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; }
  .bh3-dd-body li a { min-height: 44px; font-size: 15px; }
  .bh3-clear { margin-top: 6px; }
  .bh3-bar .bh3-sort { order: 0; margin: 14px 0 0; }
  .bh3-bar > .bh3-panel > .bh3-panel-body > .bh3-sort:first-child { margin-left: 0; }
  .bh3-sort .selector1 { flex-direction: column; align-items: stretch; gap: 6px; }
  .bh3-sort select.selectProductSort { width: 100%; max-width: none; height: 48px; font-size: 16px; }
}

/* ---------- título «Categoría (N productos)» ---------- */
.bh3-count { margin: 18px 0 12px; padding: 0; border: 0; background: none; color: var(--bh-text); text-transform: none; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; line-height: 1.2; }
.bh3-count span { color: var(--bh-muted); font-size: .72em; font-weight: 400; }
.bh3-empty { margin-top: 14px; }

/* ---------- rejilla: 5 por fila (escritorio) y 2 (móvil); la tarjeta es de fase 1 ---------- */
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper { margin-left: -8px; margin-right: -8px; }
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper ul.product_base_list.grid { justify-content: flex-start; }
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper ul.product_base_list.grid li.base_product { width: 20%; max-width: none; }
@media (max-width: 1199px) {
  body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper ul.product_base_list.grid li.base_product { width: 25%; }
}
@media (max-width: 991px) {
  body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper ul.product_base_list.grid li.base_product { width: 33.3333%; }
}
@media (max-width: 767px) {
  body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper { margin-left: -4px; margin-right: -4px; }
  body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .product_list_wrapper ul.product_base_list.grid li.base_product { width: 50%; }
}

/* ---------- vista lista: tarjeta en horizontal ---------- */
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) ul.product_base_list.list li.base_product { width: 100%; }
body ul.product_base_list.list li.base_product .product-container.bh26-card { flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
body ul.product_base_list.list li.base_product .bh26-card .left-block { flex: 0 0 190px; width: 190px; }
body ul.product_base_list.list li.base_product .bh26-card .right-block { flex: 1 1 auto; width: auto; min-width: 0; padding: 14px 18px; padding-bottom: 14px; position: static; }
body ul.product_base_list.list li.base_product .bh26-card .right-block .product-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; order: 3; margin: 0 0 8px; color: var(--bh-muted); font-size: 14px; line-height: 1.4; }
body ul.product_base_list.list li.base_product .bh26-card h3.bh26-name { height: auto; max-height: none; -webkit-line-clamp: 2; font-size: 17px; }
body ul.product_base_list.list li.base_product .bh26-card .absolute-bottom { display: none; }
body ul.product_base_list.list li.base_product .bh26-card .right-block .grid-left-bottom { margin-top: auto; }
body ul.product_base_list.list li.base_product .bh26-card .button-container.button-grid { max-width: 240px; }
@media (max-width: 767px) {
  body ul.product_base_list.list li.base_product .product-container.bh26-card { display: flex; }
  body ul.product_base_list.list li.base_product .bh26-card .left-block { flex-basis: 120px; width: 120px; }
  body ul.product_base_list.list li.base_product .bh26-card .right-block { padding: 8px 10px 10px; }
  body ul.product_base_list.list li.base_product .bh26-card .right-block .product-desc { display: none; }
  body ul.product_base_list.list li.base_product .bh26-card h3.bh26-name { font-size: 15px; }
}

/* ---------- paginación (‹ 1 2 3 4 5 … 179 ›) ---------- */
body:is(#category, #prices-drop, #new-products, #best-sales, #search, #manufacturer) .bottom-pagination-content { display: flex; flex-direction: column; align-items: center; margin: 6px 0 22px; }
.bh3-pager .bottom-pagination-content { margin-top: 4px; }
.bh3-pagination.pagination { float: none; display: block; margin: 8px 0; }
.bh3-pagination ul.pagination { float: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.bh3-pagination ul.pagination li { float: none; display: block; margin: 0; }
.bh3-pagination ul.pagination li > a, .bh3-pagination ul.pagination li > span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: 0; padding: 0 4px; border: 1px solid #dfe9d6; border-radius: 8px; background: #fff; color: var(--bh-text); font-size: 16px; line-height: 1; text-decoration: none; }
.bh3-pagination ul.pagination li > a span, .bh3-pagination ul.pagination li > span span { display: flex; align-items: center; justify-content: center; width: auto; min-width: 20px; height: auto; border: 0; background: none; font-size: inherit; line-height: 1; }
.bh3-pagination ul.pagination li > a:hover, .bh3-pagination ul.pagination li > a:focus-visible { border-color: var(--bh-g); background: var(--bh-bg); }
.bh3-pagination ul.pagination li > a:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
.bh3-pagination ul.pagination li.active > span, .bh3-pagination ul.pagination li.current > span { border-color: var(--bh-g-ink); background: var(--bh-g-ink); color: #fff; font-weight: 700; }
.bh3-pagination ul.pagination li.truncate > span { border-color: transparent; background: none; min-width: 28px; }
.bh3-pagination ul.pagination li.disabled > span { color: #9aa595; background: #f7faf4; }
.bh3-pagination ul.pagination li.pagination_previous > a, .bh3-pagination ul.pagination li.pagination_previous > span, .bh3-pagination ul.pagination li.pagination_next > a, .bh3-pagination ul.pagination li.pagination_next > span { border-radius: 8px; }
.bh3-pagination .bh3-pg-ico { display: block; }
.bh3-pagination ~ .product-count, .bh3-pager .product-count { display: none; }
@media (max-width: 479px) {
  .bh3-pagination ul.pagination { gap: 4px; }
  .bh3-pagination ul.pagination li > a, .bh3-pagination ul.pagination li > span { min-width: 40px; height: 44px; font-size: 15px; }
}

/* ---------- «Más información sobre X» (descripción larga, en el HTML) ---------- */
.bh3-more { margin: 14px 0 26px; padding: 18px 20px; border-radius: 14px; background: var(--bh-bg); color: var(--bh-text); }
.bh3-more h2 { margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--bh-g-d); text-transform: none; font-size: 22px; font-weight: 800; }
.bh3-more .rte { font-size: 15px; line-height: 1.6; }
.bh3-more .rte > *:last-child { margin-bottom: 0; }

/* ---------- sin JS / reducción de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .bh3-panel, .bh3-chev { transition: none; }
}

/* ---------- tipografía: la de las demás fases (cuerpo del tema, no la condensada de los h1/h2 antiguos) ---------- */
.bh3-title, .bh3-count, .bh3-count span, .bh3-dest-head h2, .bh3-more h2, .bh3-panel-title,
body#category .productseverywhere-section h2.products-section-title { font-family: inherit; }
.bh3-title { font-weight: 700; letter-spacing: 0; }
.bh3-count, .bh3-dest-head h2, .bh3-more h2 { font-weight: 700; }

/* ---------- carrusel «Top productos…» de la categoría (módulo productseverywhere, hook displayProductsEverywhereCategoryDesc) ----------
   Es un carrusel configurado por categoría en el módulo (no sale de la descripción). Mismo estilo de título que el resto de la fase,
   flechas redondas SOBRE las tarjetas (no sobre el título) y tarjeta de fase 1 (la pinta product-list.tpl). */
body#category .productseverywhere-container-all { margin: 0 0 22px; }
body#category .productseverywhere-section { position: relative; margin: 0; padding: 0; }
body#category .productseverywhere-section h2.products-section-title { margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--bh-text); text-align: left; text-transform: none; font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; }
body#category .productseverywhere-section h2.products-section-title a { color: inherit; text-decoration: none; }
body#category .productseverywhere-section .slick-slider { padding: 0; margin-bottom: 14px; }
body#category .productseverywhere-section .slick-prev,
body#category .productseverywhere-section .slick-next { top: 120px; z-index: 5; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--bh-line); border-radius: 50%; background: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transform: none; }
body#category .productseverywhere-section .slick-prev { left: 4px; }
body#category .productseverywhere-section .slick-next { right: 4px; }
body#category .productseverywhere-section .slick-prev:before,
body#category .productseverywhere-section .slick-next:before { content: ""; display: block; width: 10px; height: 10px; margin: 0 auto; border: solid var(--bh-g-d); border-width: 0 0 2.5px 2.5px; font-size: 0; opacity: 1; }
body#category .productseverywhere-section .slick-prev:before { transform: translateX(2px) rotate(45deg); }
body#category .productseverywhere-section .slick-next:before { transform: translateX(-2px) rotate(-135deg); }
body#category .productseverywhere-section .slick-prev:focus-visible, body#category .productseverywhere-section .slick-next:focus-visible { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
body#category .productseverywhere-section .slick-dots li button:before { color: var(--bh-g); }
/* la imagen del producto nunca se queda oculta por reglas de slick (.slick-loading, opacidades de animación): siempre visible y con hueco reservado (aspect-ratio de fase 1 = CLS 0) */
body#category .productseverywhere-section .slick-slide img.replace-2x,
body#category .productseverywhere-section .slick-slide.slick-loading img.replace-2x { display: block; visibility: visible; opacity: 1; }
body#category .productseverywhere-section .slick-loading .slick-slide { visibility: visible; }

/* ==========================================================================
   RONDA 16-OCT (listados): cabecera compacta, texto inferior (FAQ + marcas) y retoques
   ========================================================================== */
/* resumen de 2 líneas a 16 px + «Leer más» (casilla CSS: el texto completo está siempre en el HTML) */
.bh3-subwrap { position: relative; }
.bh3-sub { margin: 6px 0 0; color: var(--bh-muted); font-size: 16px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bh3-subwrap .checker, .bh3-sub-chk { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; }
.bh3-subwrap:has(.bh3-sub-chk:checked) .bh3-sub { display: block; -webkit-line-clamp: unset; overflow: visible; }
.bh3-sub-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--bh-g-d); font-size: 15px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.bh3-sub-more .bh3-t2, .bh3-subwrap:has(.bh3-sub-chk:checked) .bh3-sub-more .bh3-t1 { display: none; }
.bh3-subwrap:has(.bh3-sub-chk:checked) .bh3-sub-more .bh3-t2 { display: inline; }
.bh3-subwrap:has(.bh3-sub-chk:focus-visible) .bh3-sub-more { outline: 2px solid var(--bh-g-d); outline-offset: 2px; }
@media (max-width: 767px) { .bh3-sub { -webkit-line-clamp: 3; font-size: 15.5px; } .bh3-head-txt { max-width: none; } }
.bh3-head { margin-bottom: 14px; }

/* texto inferior de la categoría: FAQ, texto SEO y «Marcas destacadas de esta categoría» */
.bh3-bottom { margin: 10px 0 30px; color: var(--bh-text); font-size: 15px; line-height: 1.65; }
.bh3-bottom .row, .bh3-bottom .col-xs-12 { margin: 0; padding: 0; float: none; width: auto; }
.bh3-bottom h2 { margin: 22px 0 10px; padding: 0; border: 0; background: none; color: var(--bh-text); font-family: inherit; text-transform: none; text-align: left; font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.bh3-bottom h2[style*="center"] { text-align: center; }
.bh3-bottom .global-faqs { margin: 0 0 18px; padding: 16px 20px; border-radius: 14px; background: var(--bh-bg); }
.bh3-bottom .global-faqs .title-faqs { margin-top: 0; color: var(--bh-g-d); }
.bh3-bottom .global-faqs h2.question-faqs { margin: 16px 0 4px; font-size: 17px; font-weight: 700; color: var(--bh-text); }
.bh3-bottom .global-faqs .answer-faqs p { margin: 0 0 6px; }
.bh3-bottom p[style*="center"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 8px; }
.bh3-bottom p[style*="center"] > a.btn { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--bh-g); border-radius: 999px; background: #fff; color: var(--bh-g-d); font-size: 14.5px; font-weight: 700; text-transform: none; text-decoration: none; }
.bh3-bottom p[style*="center"] > a.btn:hover, .bh3-bottom p[style*="center"] > a.btn:focus-visible { background: var(--bh-g-ink); border-color: var(--bh-g-ink); color: #fff; }
.bh3-bottom a:not(.btn) { color: var(--bh-g-d); }
.bh3-more h2 { text-align: left; }
.bh3-bottom .global-faqs p, .bh3-bottom .global-faqs span, .bh3-bottom .global-faqs strong { font-family: inherit !important; font-size: inherit !important; }