, colapsándolos
dentro del display:flex heredado del tema. Los
deben conservar
su ancho natural (el de su propio texto); solo los
deben poder
encogerse y envolver el texto.
2) Reduce el máximo de la columna de totales de 45% a 35%, y da más
aire a la columna de productos, según ajuste solicitado.
========================================================================== */
.woocommerce-cart .woocommerce-cart-content {
grid-template-columns: minmax(0, 1fr) minmax(300px, 35%);
}
.woocommerce-cart .cart-collaterals .cart_totals table th {
flex: 0 0 auto !important;
min-width: auto !important;
white-space: nowrap;
}
.woocommerce-cart .cart-collaterals .cart_totals table td {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
}
/* ==========================================================================
PARCHE 45 — corrige bug de cascada del PARCHE 43/44: la media query
móvil (1 columna) estaba definida ANTES que la regla base del PARCHE 44
(2 columnas), y con igual especificidad gana la que aparece después en
el archivo — así que en móvil se seguían forzando 2 columnas con
mínimo 300px, dejando la columna izquierda aplastada (texto partido
letra a letra). Repetimos aquí, al final del archivo, el colapso a
1 columna para que gane por orden de cascada.
========================================================================== */
@media (max-width: 767px) {
.woocommerce-cart .woocommerce-cart-content {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
PARCHE 46: desactivar guionado automático (hyphens) — rompía palabras
por la mitad en header ("Carrito:"→"Ca-rrito:"), totales del carrito
("Envío"→"En-vío", "Total"→"To-tal") y títulos de producto en móvil
(bug detectado en auditoría 27/07/2026, nunca llegó a aplicarse)
========================================================================== */
body {
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}
/* ==========================================================================
PARCHE 50: iconos de métodos de pago del footer (Footer area 2, primer
widget) solapándose y desbordando el bloque de al lado en Chrome — el
HTML usa clases de Bootstrap (.row/.col-lg-4) que no tienen estilos
reales en el sitio (Bootstrap no está cargado), así que se sustituyen
por flexbox propio sobre la nueva clase .hon-payment-icons
========================================================================== */
.hon-payment-icons .row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 24px 32px;
}
.hon-payment-icons .row > div {
flex: 0 1 auto;
max-width: 140px;
width: auto;
}
.hon-payment-icons .row > div img {
display: block;
margin: 0 auto;
}
/* ==========================================================================
PARCHE 51 (revisado): checkbox de terminos y condiciones - usa el
checkbox nativo visible de WooCommerce (.woocommerce-form__label-for-checkbox).
Fluid Checkout tiene sus propias reglas con !important (ej.
align-items: flex-end) que cargan DESPUES de fn-home.css con la misma
especificidad, asi que se sube la especificidad con el prefijo "body"
para garantizar que esta regla gane siempre.
(Nota: originalmente este parche tambien cubria .fc-checkbox-field,
pero ese patron usa un checkbox oculto + ::before dibujado, y flex lo
rompia. Ver PARCHE 52 para ese caso.)
========================================================================== */
body .woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 8px !important;
cursor: pointer;
line-height: 1.5 !important;
}
body .woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox input[type="checkbox"] {
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
margin: 3px 0 0 !important;
}
body .woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox .woocommerce-terms-and-conditions-checkbox-text {
flex: 1 1 auto !important;
}
body .woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox abbr.required {
display: none !important;
}
body .woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox:has(abbr.required) .woocommerce-terms-and-conditions-checkbox-text::after {
content: " *";
color: #b93030;
}
/* ==========================================================================
PARCHE 52: checkbox "Crear una cuenta" (patron .fc-checkbox-field) -
este patron usa un checkbox real oculto (display:none) y dibuja el
cuadrado visual con un ::before position:absolute (22x22px) sobre
.fc-checkbox-label-text. Los PARCHES 47/48/51 forzaban flex en este
elemento tambien, lo cual dejaba el texto sin padding-left y tapado
por el cuadrado. Se revierte a block + padding-left para dejarle
hueco al cuadrado, respetando el sistema propio de Fluid Checkout.
========================================================================== */
body .fc-checkbox-field label.checkbox {
display: block !important;
position: relative;
}
body .fc-checkbox-field label.checkbox .fc-checkbox-label-text {
display: block !important;
position: relative;
padding-left: 32px !important;
flex: none !important;
}
/* ============ PARCHE 45: Filtro subtipo dentro de /etiqueta-producto/proteina/ ============ */
.hon-filtro-proteina {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 20px;
}
.hon-filtro-proteina__btn {
display: inline-block;
padding: 8px 18px;
border: 1px solid #ddd;
border-radius: 999px;
font-size: 14px;
text-decoration: none;
color: #333;
background: #fff;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hon-filtro-proteina__btn:hover {
border-color: #999;
}
.hon-filtro-proteina__btn--activo {
background: #000;
border-color: #000;
color: #fff;
}
/* ==========================================================================
PARCHE 53: Mega menú tipo HSN (18-sep-2026)
Todo va bajo body.hon-mega-on, clase que sólo pone inc/hon-mega-menu.php
con la opción hon_mega_menu en «on» (o en «preview» + ?hon_menu=preview).
Con el interruptor en «off» este bloque no afecta a nada.
Escritorio (>=1025px): cabecera en dos filas — logo + iconos arriba y
barra de categorías debajo — con paneles anchos al pasar el ratón.
Móvil: el drill-down de Biona, con las columnas abiertas dentro del panel.
========================================================================== */
@media (min-width: 1025px) {
/* --- Cabecera en dos filas --- */
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) {
padding-bottom: 0;
}
/* contexto para los paneles; sin pisar el position:fixed de la cabecera fija (.isStick) */
body.hon-mega-on .site-header__wrap:not(.site-header__mobile):not(.isStick) {
position: relative;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .space-between-content {
flex-wrap: wrap;
position: static;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .site-branding {
order: 1;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .site-header__right_part {
order: 2;
margin-left: auto;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default {
order: 3;
/* Biona da a los hijos de .space-between-content 0,85rem de margen lateral
(y -0,85rem al contenedor): se conserva para alinear con los 50px de la cabecera */
flex: 0 0 calc(100% - 1.7rem);
max-width: calc(100% - 1.7rem);
margin: 16px 0.85rem 0;
text-align: left;
position: static;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
body.hon-mega-on .main-navigation__default .main-navigation-inner {
position: static;
}
/* --- Barra de categorías --- */
/* !important: al pasar a escritorio, responsive-menu.js de Biona (showMenu) pone
display:block en línea sobre el ul y anularía el flex */
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu {
display: flex !important;
flex-wrap: nowrap;
align-items: stretch;
gap: 0 28px;
position: static;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li {
position: static;
margin: 0;
padding: 0;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li > a {
display: flex;
align-items: center;
height: 52px;
padding: 0;
font-size: 15px;
font-weight: 500;
color: #fff;
white-space: nowrap;
/* subrayado naranja con degradado: los pseudo-elementos ya los usa Biona para la flecha */
background: linear-gradient(#f94200, #f94200) no-repeat left bottom / 0 3px;
transition: color 0.15s ease, background-size 0.2s ease;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.menu-item-has-children > a {
padding-right: 0;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.menu-item-has-children > a::before,
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.menu-item-has-children > a::after {
display: none;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li:hover > a,
body.hon-mega-on .main-navigation__default .hon-mega-menu > li:focus-within > a,
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-open > a,
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.current-menu-item > a {
color: #f94200 !important; /* el CSS adicional del personalizador pone el menú en blanco con !important */
background-size: 100% 3px;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-destacado > a {
color: #f94200 !important;
font-weight: 600;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-cuenta {
margin-left: auto;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-cuenta > a::before {
content: "";
width: 18px;
height: 18px;
margin-right: 8px;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* --- Panel ancho --- */
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top > .hon-mega-panel {
position: absolute;
left: 0;
right: 0;
top: 100%;
width: auto;
margin: 0;
padding: 30px 50px 24px; /* 50px = padding lateral de .site-header__wrap en escritorio */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
gap: 8px 48px;
text-align: left;
background: #fff;
border-top: 3px solid #f94200;
border-radius: 0;
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.14);
z-index: 99999;
visibility: hidden;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top > .hon-mega-panel::after {
display: none;
}
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top:hover > .hon-mega-panel,
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top:focus-within > .hon-mega-panel,
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top.hon-open > .hon-mega-panel {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0.08s, 0.08s, 0s;
}
/* Columnas: título + lista */
body.hon-mega-on .main-navigation__default .hon-mega-col {
display: block;
padding: 0;
}
body.hon-mega-on .main-navigation__default .hon-mega-col__title {
display: block;
width: auto;
margin: 0 0 8px;
padding: 0 0 10px;
border-bottom: 1px solid #ececec;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #191919;
}
body.hon-mega-on .main-navigation__default .hon-mega-col > .sub-menu {
position: static;
left: auto;
top: auto;
display: block;
margin: 0;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
}
body.hon-mega-on .main-navigation__default .hon-mega-col > .sub-menu::after {
display: none;
}
body.hon-mega-on .main-navigation__default .hon-mega-col > .sub-menu li {
display: block;
padding: 0;
}
body.hon-mega-on .main-navigation__default .hon-mega-panel a {
width: auto;
padding: 6px 0;
font-size: 15px;
line-height: 1.35;
color: #444;
transition: color 0.15s ease;
}
body.hon-mega-on .main-navigation__default .hon-mega-panel a:hover {
color: #f94200;
}
/* Enlaces sueltos en rejilla (Marcas): fichas más juntas y todas de la misma altura.
Si el navegador no soporta :has() se queda con la rejilla de columnas normal. */
body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top > .hon-mega-panel:has(> .hon-mega-link) {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px 16px;
}
body.hon-mega-on .main-navigation__default .hon-mega-panel > .hon-mega-link {
display: block;
padding: 0;
}
body.hon-mega-on .main-navigation__default .hon-mega-panel > .hon-mega-link > a {
display: flex;
align-items: center;
height: 100%;
min-height: 46px;
padding: 10px 14px;
border: 1px solid #ececec;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #191919;
transition: color 0.15s ease, border-color 0.15s ease;
}
body.hon-mega-on .main-navigation__default .hon-mega-panel > .hon-mega-link > a:hover {
border-color: #f94200;
color: #f94200;
}
/* «Ver todo» al pie del panel */
body.hon-mega-on .main-navigation__default .hon-mega-panel > .hon-mega-all {
display: block;
grid-column: 1 / -1;
margin-top: 16px;
padding: 14px 0 0;
border-top: 1px solid #ececec;
}
body.hon-mega-on .main-navigation__default .hon-mega-panel > .hon-mega-all > a {
padding: 0;
font-size: 14px;
font-weight: 600;
color: #f94200;
}
}
/* --- Menú móvil (drill-down de Biona): columnas abiertas dentro del panel --- */
/* El panel sólo medía lo que la lista raíz y el nav tiene overflow:hidden, así que las
subsecciones (position:absolute) se cortaban: con el menú antiguo, «Marcas» enseñaba
5 de 13. Se estira el área desplazable (PARCHE 27) a toda la altura del panel
(112px arriba + 20px abajo = padding del nav móvil de Biona). */
body.hon-mega-on .site-header__mobile .main-navigation__vertical .main-navigation-inner {
min-height: calc(100vh - 132px);
min-height: calc(100dvh - 132px);
}
body.hon-mega-on .main-navigation__vertical .hon-mega-all {
display: none !important;
}
body.hon-mega-on .main-navigation__vertical .menu li.hon-mega-col {
margin: 0 0 22px !important;
padding: 0 !important;
border-bottom: 0 !important;
}
body.hon-mega-on .main-navigation__vertical .hon-mega-col__title {
display: block;
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #888;
}
/* .site-header + li: Biona pone position:absolute;top:0 a todo .sub-menu en el menú móvil con la misma especificidad */
body.hon-mega-on .site-header .main-navigation__vertical .menu li.hon-mega-col > .sub-menu {
display: block;
position: static;
width: auto;
transform: none;
}
body.hon-mega-on .site-header .main-navigation__vertical .menu li.hon-mega-col > .sub-menu li {
margin: 0 !important;
padding: 0 !important;
border-bottom: 0 !important;
}
body.hon-mega-on .site-header .main-navigation__vertical .menu li.hon-mega-col > .sub-menu a {
justify-content: flex-start;
padding: 7px 0;
font-size: 16px;
font-weight: 500;
}
body.hon-mega-on .main-navigation__vertical .menu li.hon-destacado > a {
color: #f94200;
}
/* ============ fin PARCHE 53 ============ */
/* ==========================================================================
PARCHE 54: Mega menú en UNA sola fila (19-sep-2026)
Pedido del usuario: logo | categorías | iconos en la misma línea, como antes
del PARCHE 53. Sobrescribe la cabecera en dos filas del PARCHE 53 a partir
de 1200px; entre 1025 y 1199px no cabe y sigue en dos filas.
Medidas: la cabecera original mide 112px (28px arriba y abajo). Los enlaces
de primer nivel bajan hasta el borde inferior de la cabecera para que el
panel (top:100%) salga pegado y no se cierre al bajar el ratón.
========================================================================== */
@media (min-width: 1200px) {
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .space-between-content {
flex-wrap: nowrap;
align-items: flex-start;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .site-branding {
order: 1;
flex: 0 0 auto;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default {
order: 2;
flex: 1 1 auto;
max-width: none;
min-width: 0;
margin: 0 0.85rem;
border-top: 0;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .site-header__right_part {
order: 3;
flex: 0 0 auto;
margin-left: 0.85rem;
margin-top: 12px; /* (56px del logo - 32px de los iconos) / 2 */
}
/* 56px de fila + 28px del antiguo padding inferior de la cabecera */
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu > li > a {
height: 84px;
padding-bottom: 28px;
box-sizing: border-box;
}
/* categorías centradas entre el logo y «Mi cuenta» (pegada a los iconos) */
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu > li:first-child {
margin-left: auto;
}
}
/* «Mi cuenta» sólo con el icono cuando no hay sitio para el texto */
@media (min-width: 1200px) and (max-width: 1499px) {
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu > li.hon-cuenta > a {
font-size: 0;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu > li.hon-cuenta > a::before {
width: 20px;
height: 20px;
margin-right: 0;
}
}
@media (min-width: 1200px) and (max-width: 1365px) {
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu {
gap: 0 18px;
}
body.hon-mega-on .site-header__wrap:not(.site-header__mobile) .main-navigation__default .hon-mega-menu > li:not(.hon-cuenta) > a {
font-size: 14px;
}
}
/* ============ fin PARCHE 54 ============ */
/* ==========================================================================
PARCHE 55: estética móvil tipo HSN (19-sep-2026)
Cabecera: ☰ logo … cuenta cesta, y buscador ancho debajo; fija al
hacer scroll. Menú lateral: barra negra con logo, flechas a la derecha,
submenús con título y «Ver todo». Tarjetas de producto más compactas.
Todo limitado a la cabecera móvil (.site-header__mobile, <1025px, la pone
responsive-menu.js) o a max-width:767px.
========================================================================== */
/* --- Cabecera --- */
/* #page tiene overflow:hidden, que anula position:sticky; «clip» recorta igual sin
crear contenedor de scroll (navegadores sin soporte: cabecera normal, no fija) */
@supports (overflow: clip) {
@media (max-width: 1024px) {
html body #page.site {
overflow: clip;
}
}
}
html body .site-header:has(.site-header__mobile) {
position: sticky;
top: 0;
}
html body.admin-bar .site-header:has(.site-header__mobile) {
top: var(--wp-admin--admin-bar--height, 46px);
}
html body .site-header .site-header__mobile.site-header__wrap {
padding: 8px 16px 10px;
}
html body .site-header .site-header__mobile .space-between-content {
flex-wrap: wrap;
gap: 10px 12px;
margin: 0;
}
html body .site-header .site-header__mobile .space-between-content > * {
margin: 0;
}
html body .site-header .site-header__mobile .menu-toggle-wrapper {
order: 1;
flex: 0 0 auto;
display: flex;
align-items: center;
width: auto;
min-width: 0;
margin-right: -4px; /* el logo trae ~12px de margen transparente a la izquierda */
}
html body .site-header .site-header__mobile .site-branding {
order: 2;
flex: 1 1 0;
min-width: 0;
max-width: none;
text-align: left;
}
html body .site-header .site-header__mobile .site-branding img {
width: auto;
max-width: 100%;
max-height: 32px;
}
/* los hijos (buscador y carrito) pasan a ser piezas sueltas de la fila */
html body .site-header .site-header__mobile .site-header__right_part {
display: contents;
}
/* icono de «Mi cuenta» (template-parts/header/layout.php): sólo en la cabecera móvil */
html body .hon-header-account {
display: none;
}
html body .site-header .site-header__mobile .hon-header-account {
order: 3;
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
height: 36px;
padding-right: 13px;
color: #fff;
}
/* separador fino entre la cuenta y la cesta */
html body .site-header .site-header__mobile .hon-header-account::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 1px;
height: 24px;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.3);
}
/* mismo tamaño visual que la cesta (29px; el dibujo ocupa todo el viewBox del SVG) */
html body .site-header .site-header__mobile .hon-header-account svg {
width: 27px;
height: 28px;
fill: none;
}
html body .site-header .site-header__mobile .hon-header-account svg path,
html body .site-header .site-header__mobile .hon-header-account svg circle {
fill: none;
stroke: #fff;
}
html body .site-header .site-header__mobile .header-cart {
order: 4;
flex: 0 0 auto;
margin-left: 10px; /* hueco para el contador naranja, que sobresale a la izquierda de la cesta */
display: flex;
justify-content: flex-end;
}
html body .site-header .site-header__mobile .header-cart__title {
display: none;
}
/* Buscador: barra blanca a todo el ancho (abre el buscador a pantalla completa de FiboSearch) */
html:not(.dgwt-wcas-overlay-mobile-on) .site-header .site-header__mobile .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon {
order: 5;
flex: 0 0 100%;
max-width: 100% !important;
min-width: 0;
margin: 0 !important;
}
html body .site-header .site-header__mobile .dgwt-wcas-search-wrapp > svg {
display: none;
}
html body .site-header .site-header__mobile a.dgwt-wcas-search-icon {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 40px;
margin: 0;
padding: 0 14px;
background: #fff;
border-radius: 10px;
}
html body .site-header .site-header__mobile a.dgwt-wcas-search-icon svg {
flex: none;
width: 18px;
height: 18px;
}
html body .site-header .site-header__mobile a.dgwt-wcas-search-icon svg,
html body .site-header .site-header__mobile a.dgwt-wcas-search-icon svg path {
fill: #777;
}
html body .site-header .site-header__mobile a.dgwt-wcas-search-icon::after {
content: "¿Qué estás buscando?";
font-size: 14px;
color: #777;
white-space: nowrap;
}
html body .site-header .site-header__mobile .dgwt-wcas-search-icon-arrow {
display: none !important;
}
/* --- Menú lateral --- */
html body .site-header__style-3.site-header__mobile .header-vertical-menu-popup {
background-color: rgba(0, 0, 0, 0.55);
}
html body .site-header__style-3.site-header__mobile .header-vertical-menu-popup__inner {
display: block;
width: min(88vw, 380px);
min-width: 0;
max-width: none;
height: 100vh;
height: 100dvh;
margin: 0;
box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25);
transform: translateX(-100%);
transition: transform 0.28s ease;
}
html body.vertical-menu-active .site-header__style-3.site-header__mobile .header-vertical-menu-popup__inner {
transform: none;
}
/* barra negra superior con el logo */
html body .site-header__style-3.site-header__mobile .header-vertical-menu-popup__inner::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #000 url("/wp-content/uploads/2026/06/cropped-hon-logo.webp") no-repeat 20px center / auto 30px;
}
html body .site-header__mobile .header-vertical-menu-popup .menu-toggle-close,
html body.admin-bar .site-header__mobile .header-vertical-menu-popup .menu-toggle-close {
z-index: 2;
top: 15px;
left: auto;
right: 14px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
html body .site-header__mobile .header-vertical-menu-popup .menu-toggle-close svg {
width: 18px;
height: 18px;
}
html body .site-header__mobile .header-vertical-menu-popup .menu-toggle-close svg path {
fill: #fff;
stroke: #fff;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical {
min-width: 0;
padding: 60px 0 0;
}
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .main-navigation-inner {
min-height: calc(100vh - 60px);
min-height: calc(100dvh - 60px);
max-height: calc(100vh - 60px) !important;
max-height: calc(100dvh - 60px) !important;
padding-bottom: 24px;
}
/* primer nivel */
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu > li:not(.menu-back-item):not(.menu-parent-item) {
margin: 0;
padding: 0;
border-bottom: 1px solid #efefef;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu > li > a {
display: block;
padding: 16px 44px 16px 20px;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
/* flecha a la derecha en vez de hacia abajo */
html body .site-header .site-header__mobile .main-navigation__vertical .menu li.menu-item-has-children > a:after {
content: "";
top: 50%;
right: 20px;
width: 8px;
height: 8px;
border-top: 2px solid #191919;
border-right: 2px solid #191919;
transform: translateY(-50%) rotate(45deg);
}
/* «Mi cuenta»: separada y con icono */
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu > li.hon-cuenta {
margin-top: 10px;
border-top: 1px solid #efefef;
background: #f7f7f7;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu > li.hon-cuenta > a {
display: flex;
align-items: center;
gap: 10px;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu > li.hon-cuenta > a::before {
content: "";
width: 20px;
height: 20px;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* submenú: cabecera con flecha atrás + título, «Ver todo» y secciones */
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu .menu-item.active > .sub-menu {
display: flex;
flex-direction: column;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu li .sub-menu > li {
order: 2;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu li .sub-menu > .menu-back-item {
order: 0;
top: 12px;
left: 12px;
z-index: 1;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu-back-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu-back-btn svg path {
stroke: #191919;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu li .sub-menu > .menu-parent-item {
order: 0;
margin: 0;
padding: 0 20px 0 52px;
border-bottom: 1px solid #efefef;
}
html body .site-header__style-3.site-header__mobile .main-navigation__vertical .menu li .sub-menu > .menu-parent-item a {
padding: 18px 0;
font-size: 18px;
font-weight: 700;
color: #191919;
}
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .menu li .sub-menu > .hon-mega-all {
order: 1;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 0 !important;
}
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .menu li .sub-menu > .hon-mega-all > a {
padding: 14px 20px 6px;
font-size: 14px;
font-weight: 600;
color: #f94200;
}
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .menu li.hon-mega-col {
margin: 18px 0 0 !important;
}
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .hon-mega-col__title {
margin: 0 0 4px;
padding: 0 20px;
font-size: 12px;
font-weight: 700;
color: #191919;
}
html body.hon-mega-on .site-header .site-header__mobile .main-navigation__vertical .menu li.hon-mega-col > .sub-menu a {
padding: 9px 20px;
font-size: 15px;
font-weight: 400;
color: #444;
}
/* Marcas (enlaces sueltos) */
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .menu li .sub-menu > li.hon-mega-link {
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #f3f3f3 !important;
}
html body.hon-mega-on .site-header__mobile .main-navigation__vertical .menu li .sub-menu > li.hon-mega-link > a {
padding: 13px 20px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* --- Tarjetas de producto en móvil --- */
/* Las rejillas de la portada son div.products y las de tienda ul.products: `.products` cubre las dos */
@media (max-width: 767px) {
/* tres rellenos anidados (li 16px + 10px + 10px) dejaban el texto recortado */
html body .products li.product {
padding: 10px;
}
html body .products li.product .product-content,
html body .products li.product .product-content-desc {
padding: 0;
}
html body .products li.product .product-description {
width: 100% !important;
max-width: 100%;
margin: 0;
left: auto;
transform: none;
text-align: left;
}
html body .products li.product .woocommerce-LoopProduct-link img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
/* !important: el PARCHE 26 fija título y botón con !important para toda la web */
html body .products li.product h5.woocommerce-loop-product__title {
margin: 8px 0 6px !important;
padding: 0 !important;
text-align: left;
font-size: 13px !important;
line-height: 1.35 !important;
height: 2.7em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
html body .products li.product .price {
display: block;
text-align: left;
font-size: 16px;
font-weight: 700;
}
html body .products li.product .content-button {
margin-top: 10px;
}
html body .products li.product .content-button a.button {
padding: 10px 4px !important;
font-size: 12px !important;
letter-spacing: 0;
text-transform: none !important;
line-height: 1.25;
border-radius: 8px !important;
}
/* móviles estrechos (360px): «Seleccionar opciones» no cabe a 12px */
@media (max-width: 380px) {
html body .products li.product .content-button a.button {
font-size: 11px !important;
padding: 10px 2px !important;
}
}
/* banner promocional: deja sitio a la burbuja del chat (56px + 14px) */
html body .hon-promo-banner {
right: 82px;
gap: 10px;
padding: 10px 12px;
}
html body .hon-promo-banner__text {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
html body .hon-promo-banner__cta {
padding: 7px 10px;
font-size: 12px;
}
}
/* --- Ficha de producto: la barra de compra fija (fn-buybar) baja al pie en móvil,
porque arriba ahora está la cabecera fija. Cuando aparece, el banner de
promociones y la burbuja del chat suben para no taparla. --- */
@media (max-width: 1024px) {
html body .fn-buybar {
top: auto;
bottom: 0;
transform: translateY(110%);
box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.12);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
html body .fn-buybar.is-visible {
transform: translateY(0);
}
html body .fn-buybar__inner {
padding: 8px 16px;
}
html body:has(.fn-buybar.is-visible) .hon-promo-banner {
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
html body:has(.fn-buybar.is-visible) #hons-chat-widget {
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
html body .fn-buybar__title {
max-width: none;
font-size: 13px;
}
}
/* ============ fin PARCHE 55 ============ */
/* ==========================================================================
PARCHE 56: rejilla y estética unificadas (19-sep-2026)
Basado en el análisis de MyProtein, Bulk, Prozis y HSN (informe en
/home/debian/hons-audit-2026-09/staging-20260918/hontheme/):
- UN solo contenedor para cabecera, contenido y pie: 1360px de contenido
con 40px de margen (24px en tablet, 16px en móvil). Antes cada bloque
tenía su ancho (logo a 50px, contenido 0..1440 o 240..1680, pie a 1200).
- Escala tipográfica contenida (títulos de sección 26-34px, no 76px).
- Tarjetas: texto más legible (15-17px), botones de 44px sin mayúsculas.
- Ficha: galería 58% + compra 42% fija al hacer scroll; relacionados
debajo a todo el ancho (single-product.php ya no los mete en la columna).
========================================================================== */
:root {
--hon-max: 1360px;
--hon-gutter: 40px;
--hon-gap: 24px;
--hon-ancho: calc(var(--hon-max) + 2 * var(--hon-gutter));
}
@media (max-width: 1024px) {
:root {
--hon-gutter: 24px;
--hon-gap: 16px;
}
}
@media (max-width: 767px) {
:root {
--hon-gutter: 16px;
--hon-gap: 10px;
}
}
/* sticky de la columna de compra: #page tiene overflow:hidden (ver PARCHE 55) */
@supports (overflow: clip) {
html body #page.site {
overflow: clip;
}
}
/* --- 1. Contenedor único --- */
html body .site-content .site-content__wrap,
html body .site-content .container,
html body .fn-home .fn-container,
html body .fn-home .fn-home-products-wrap > *,
html body .fn-home .fn-section--intro > *,
html body .site-footer .site-footer__wrap.container {
box-sizing: border-box;
width: 100%;
max-width: var(--hon-ancho) !important;
margin-left: auto;
margin-right: auto;
padding-left: var(--hon-gutter) !important;
padding-right: var(--hon-gutter) !important;
}
/* contenedores anidados: sin doble margen */
html body .fn-home .fn-home-products-wrap > * .fn-container,
html body .fn-home .fn-section--intro > * .fn-container,
html body .fn-product .site-main {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Bootstrap de Biona: columnas con 0,85rem de relleno pero filas sin margen negativo,
así que todo quedaba 14px hacia dentro del contenedor */
html body .site-content .row {
width: calc(100% + 1.7rem);
max-width: none;
margin-left: -0.85rem;
margin-right: -0.85rem;
}
/* cabecera móvil/tablet con el mismo margen lateral que el contenido */
@media (max-width: 1024px) {
html body .site-header .site-header__mobile.site-header__wrap {
padding-left: var(--hon-gutter);
padding-right: var(--hon-gutter);
}
}
/* el banner principal también dentro de la columna, con esquinas redondeadas */
html body .fn-home .fn-editor-content .fn-container {
max-width: var(--hon-ancho) !important;
padding-left: var(--hon-gutter) !important;
padding-right: var(--hon-gutter) !important;
}
html body .fn-home .fn-section.fn-editor-content {
padding-top: 24px;
padding-bottom: 8px;
}
html body .fn-home .fn-editor-content .wp-block-gallery img {
border-radius: 14px;
}
/* cabecera de escritorio alineada con el contenido */
@media (min-width: 1025px) {
html body .site-header .site-header__wrap:not(.site-header__mobile) {
padding-left: max(var(--hon-gutter), calc((100% - var(--hon-max)) / 2));
padding-right: max(var(--hon-gutter), calc((100% - var(--hon-max)) / 2));
}
html body.hon-mega-on .main-navigation__default .hon-mega-menu > li.hon-mega-top > .hon-mega-panel {
padding-left: max(var(--hon-gutter), calc((100% - var(--hon-max)) / 2));
padding-right: max(var(--hon-gutter), calc((100% - var(--hon-max)) / 2));
}
}
/* --- 2. Tipografía --- */
html body .fn-home-products-wrap .home-products h2,
html body .fn-home-products-wrap .fn-section__title,
html body .fn-home .fn-section__title,
html body .fn-home .fn-intro__title {
margin: 0 0 20px;
font-size: clamp(24px, 2.3vw, 34px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
text-align: left;
}
html body .fn-home .fn-section {
padding-top: clamp(28px, 4vw, 56px);
padding-bottom: clamp(28px, 4vw, 56px);
}
html body .site-content h1.page-title,
html body .site-content .woocommerce-products-header__title {
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 700;
text-align: left;
letter-spacing: -0.01em;
}
/* el punto naranja de los títulos acompaña al título alineado a la izquierda */
html body .site-content h1.page-title:before {
left: 0;
transform: none;
}
/* descripción de la ficha: el editor mete un h1 enorme con el nombre */
html body .fn-product .woocommerce-Tabs-panel h1 {
font-size: clamp(22px, 2vw, 28px) !important;
line-height: 1.2 !important;
}
html body .fn-product .woocommerce-Tabs-panel h2 {
font-size: clamp(18px, 1.5vw, 21px) !important;
}
/* --- 3. Tarjetas de producto (tablet y escritorio; el móvil está en el PARCHE 55) --- */
html body .products {
gap: var(--hon-gap) !important;
}
@media (min-width: 768px) {
html body .products li.product {
padding: 14px !important;
}
html body .products li.product .product-content,
html body .products li.product .product-content-desc {
padding: 0 !important;
}
html body .products li.product .product-description {
width: 100% !important;
max-width: 100%;
text-align: left;
}
html body .products li.product .woocommerce-LoopProduct-link img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
html body .products li.product .star-rating {
margin-left: 0;
margin-right: auto;
}
html body .products li.product h5.woocommerce-loop-product__title {
margin: 12px 0 6px !important;
padding: 0 !important;
text-align: left;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
height: 2.7em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
html body .products li.product .price {
text-align: left;
font-size: 17px !important;
font-weight: 700 !important;
}
html body .products li.product .content-button a.button {
padding: 12px 10px !important;
font-size: 14px !important;
line-height: 1.4;
text-transform: none !important;
letter-spacing: 0;
}
}
/* --- 4. Ficha de producto --- */
@media (min-width: 992px) {
html body .fn-product div.product > .row > .col-md-6:first-child {
flex: 0 0 58%;
max-width: 58%;
width: 58%;
}
html body .fn-product div.product > .row > .col-md-6:last-child {
flex: 0 0 42%;
max-width: 42%;
width: 42%;
position: sticky;
top: 24px;
}
html body .fn-product .related.products {
clear: both;
width: 100%;
margin-top: 48px;
}
html body .fn-product .related.products > h2 {
font-size: clamp(22px, 2vw, 28px) !important;
text-align: left !important;
margin: 0 0 20px !important;
}
html body .fn-product .related.products ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* botón principal de compra: sin mayúsculas, como el resto */
html body .fn-product .single_add_to_cart_button,
html body .fn-buybar__btn {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 16px !important;
}
/* ============ fin PARCHE 56 ============ */
/* ==========================================================================
PARCHE 57: densidad de escritorio, pie de página y botón «Ver carrito»
(20-sep-2026)
- Escritorio: todo un punto más contenido (la ficha era lo más exagerado:
título y precio a 36px y galería de 817px de alto).
- Móvil: no se toca, ya estaba bien.
- Tras «Añadir al carrito», el enlace «Ver carrito» SUSTITUYE al botón en
vez de aparecer debajo con otro formato.
- Pie de página reordenado (ver también los widgets del pie).
========================================================================== */
/* --- 1. Escala de escritorio --- */
@media (min-width: 1025px) {
html body .fn-home .fn-section {
padding-top: clamp(20px, 3vw, 40px);
padding-bottom: clamp(20px, 3vw, 40px);
}
html body .fn-home-products-wrap .home-products h2,
html body .fn-home-products-wrap .fn-section__title,
html body .fn-home .fn-section__title,
html body .fn-home .fn-intro__title {
font-size: clamp(20px, 1.8vw, 26px);
margin-bottom: 16px;
}
html body .site-content h1.page-title,
html body .site-content .woocommerce-products-header__title {
font-size: clamp(22px, 1.9vw, 28px);
}
/* Tarjetas: un punto menos de todo */
html body .products {
gap: 20px !important;
}
html body .products li.product {
padding: 12px !important;
}
html body .products li.product h5.woocommerce-loop-product__title {
margin: 10px 0 4px !important;
font-size: 14px !important;
}
html body .products li.product .price {
font-size: 16px !important;
}
/* en rejillas anchas (relacionados) la foto crecía hasta 325px de alto */
html body .products li.product .woocommerce-LoopProduct-link img {
max-height: 240px;
}
html body .products li.product .content-button a.button,
html body .products li.product a.added_to_cart {
padding: 10px 8px !important;
font-size: 13px !important;
}
/* Ficha de producto */
html body .fn-product .product_title {
font-size: clamp(22px, 2vw, 28px) !important;
line-height: 1.2;
}
html body .fn-product .summary .price {
font-size: clamp(20px, 1.8vw, 26px) !important;
}
html body .fn-product .woocommerce-product-details__short-description {
font-size: 15px;
}
/* la galería ocupaba 817px de alto: se limita y la foto se ajusta dentro */
html body .fn-product .woocommerce-product-gallery__image img {
max-height: 520px;
object-fit: contain;
}
html body .fn-product .single_add_to_cart_button {
padding: 12px 20px !important;
font-size: 15px !important;
}
}
/* --- 2. «Ver carrito» sustituye al botón, con el mismo formato --- */
html body .products li.product .content-button a.button.added,
html body .products li.product a.button.added {
display: none !important;
}
/* !important: el tema lo oculta con .products.products-grid .product-content .added_to_cart */
html body .products li.product a.added_to_cart {
display: block !important;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 12px 10px;
text-align: center;
font-weight: 600;
font-size: 14px;
line-height: 1.4;
text-decoration: none;
border-radius: 8px;
background: var(--fn-color-accent);
color: #fff;
transition: opacity 0.2s ease;
}
html body .products li.product a.added_to_cart:hover {
opacity: 0.92;
color: #fff;
}
/* --- 2b. Etiqueta de promoción: si la tarjeta ya lleva «¡Oferta!», baja para no solaparse --- */
html body li.product:has(.onsale) .fn-promo-badge {
top: 40px;
}
html body li.product .fn-promo-badge {
max-width: calc(100% - 16px);
}
/* --- 3. Pie de página --- */
html body .site-footer .footer-widgets {
margin-top: 0;
padding-top: 40px;
}
html body .site-footer .footer-area h4,
html body .site-footer .footer-area .widgettitle {
margin: 0 0 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
}
html body .site-footer .footer-info p {
margin: 14px 0 18px;
font-size: 14px;
line-height: 1.6;
color: #bdbdbd;
}
/* Listas de enlaces (Comprar / Ayuda) */
html body .site-footer .hon-foot-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
html body .site-footer .hon-foot-links {
margin: 0;
padding: 0;
list-style: none;
}
html body .site-footer .hon-foot-links li {
margin: 0 0 8px;
padding: 0;
border: 0;
}
html body .site-footer .hon-foot-links a {
font-size: 14px;
line-height: 1.5;
color: #bdbdbd;
text-decoration: none;
}
html body .site-footer .hon-foot-links a:hover {
color: #fff;
}
/* Datos de contacto */
html body .site-footer .hon-foot-contacto p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.6;
color: #bdbdbd;
}
html body .site-footer .hon-foot-contacto a {
color: #fff;
text-decoration: none;
}
html body .site-footer .hon-foot-contacto a:hover {
color: var(--fn-color-accent);
}
html body .site-footer .hon-foot-contacto strong {
color: #fff;
}
/* Sellos de pago y envío, en fila y pequeños */
html body .site-footer .hon-foot-sellos {
margin-top: 22px;
}
html body .site-footer .hon-foot-sellos__t {
display: block;
margin: 0 0 8px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a8a8a;
}
html body .site-footer .hon-foot-sellos__fila {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
html body .site-footer .hon-foot-sellos__fila img {
height: 26px;
width: auto;
border-radius: 4px;
background: #fff;
padding: 2px 4px;
box-sizing: content-box;
}
/* Redes */
html body .site-footer .social-icons {
justify-content: flex-start;
gap: 12px;
}
/* --- 4. El color de la barra de envío gratis se cambió en el CSS adicional (naranja #f94200) --- */
/* ============ fin PARCHE 57 ============ */
/* ==========================================================================
PARCHE 58: bloque de garantías de la ficha (20-sep-2026)
Lo imprime el hook de functions.php tras el botón de compra.
========================================================================== */
html body .hon-ficha-garantias {
margin: 22px 0 0;
padding: 16px 18px;
list-style: none;
background: #f7f7f7;
border-radius: 10px;
}
html body .hon-ficha-garantias li {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 10px;
padding: 0;
font-size: 14px;
line-height: 1.45;
color: #4a4a4a;
border: 0;
}
html body .hon-ficha-garantias li:last-child {
margin-bottom: 0;
}
html body .hon-ficha-garantias__ico {
flex: 0 0 auto;
font-size: 15px;
}
html body .hon-ficha-garantias__txt strong {
color: #191919;
font-weight: 600;
}
@media (max-width: 767px) {
html body .hon-ficha-garantias {
padding: 14px;
}
html body .hon-ficha-garantias li {
font-size: 13px;
}
}
/* ============ fin PARCHE 58 ============ */