/* =========================================================================
 * HVM Mega Menu Premium - estilos (v1.1 - optimizacion UX/UI)
 * Paleta desde el tema: --base-3 (blanco), --contrast (#222), --accent (#0057D9).
 * Tipografia heredada (Inter). Sin dependencias externas.
 *
 * SISTEMA DE ICONOS: 18px (inline / navegacion / acciones) y 20px (enfasis:
 * chips de beneficios). No usar otros tamanos.
 * ESCALA TIPOGRAFICA: 11(eyebrow) -> 13(mini) -> 14(nav) -> 15(titulo) ->
 * 19(precio, dominante). El precio siempre es el elemento mas fuerte.
 * ========================================================================= */

:root{
  --hvm-mm-ink: var(--contrast, #222);
  --hvm-mm-ink-soft: var(--contrast-2, #555);
  --hvm-mm-line: var(--base, #E8EBF0);
  --hvm-mm-surface: var(--base-2, #F5F7FA);
  --hvm-mm-accent: var(--accent, #0057D9);
  --hvm-mm-navy: #0f1f3d;
  --hvm-mm-radius: 12px;
  --hvm-mm-shadow: 0 18px 44px rgba(15,31,61,.16);
  --hvm-mm-icon: 18px;         /* tamano inline unificado */
  --hvm-mm-icon-emph: 20px;    /* tamano enfasis (beneficios) */
}

/* ---- Root overlay (queda por DEBAJO de la barra sticky del header) ------- */
.hvm-mm-root{position:fixed;inset:0;z-index:9990;pointer-events:none;visibility:hidden;}
.hvm-mm-root.is-open{visibility:visible;}
.hvm-mm-backdrop{position:absolute;inset:0;background:rgba(15,31,61,.28);opacity:0;transition:opacity .2s ease;pointer-events:none;}
.hvm-mm-root.is-open .hvm-mm-backdrop{opacity:1;pointer-events:auto;}

/* ---- Panel base --------------------------------------------------------- */
.hvm-mm-panel{position:fixed;left:0;width:100%;background:#fff;border-top:1px solid var(--hvm-mm-line);
  box-shadow:var(--hvm-mm-shadow);opacity:0;transform:translateY(-10px);pointer-events:none;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transition:opacity .2s ease, transform .2s ease;will-change:opacity,transform;}
.hvm-mm-panel.is-active{opacity:1;transform:none;pointer-events:auto;}
.hvm-mm-panel[hidden]{display:none;}
.hvm-mm-icon{width:var(--hvm-mm-icon);height:var(--hvm-mm-icon);flex:0 0 auto;color:var(--hvm-mm-ink);}
:focus-visible{outline:2px solid var(--hvm-mm-accent);outline-offset:2px;border-radius:4px;}

/* ---- Grid 5 columnas (navegacion con mas peso) -------------------------- */
.hvm-mm-grid{max-width:1280px;margin:0 auto;padding:26px 28px 30px;display:grid;
  grid-template-columns:1.3fr 1.55fr 1.25fr 0.95fr 1.05fr;gap:26px;align-items:start;}
.hvm-mm-col{min-width:0;}
.hvm-mm-col__title{font-size:15px;font-weight:700;color:var(--hvm-mm-ink);margin:0 0 12px;letter-spacing:.2px;}
.hvm-mm-col__eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--hvm-mm-ink-soft);margin-bottom:12px;}

/* ---- Columna 1: listado de categorias ----------------------------------- */
.hvm-mm-catlist{list-style:none;margin:0;padding:0;}
.hvm-mm-catlist li{margin:0;}
.hvm-mm-catlink{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 10px;border-radius:8px;color:var(--hvm-mm-ink);text-decoration:none;font-size:14px;
  font-weight:500;transition:background .15s ease,color .15s ease;}
.hvm-mm-catlink:hover{background:var(--hvm-mm-surface);color:var(--hvm-mm-accent);}
.hvm-mm-catlink .hvm-mm-icon{width:var(--hvm-mm-icon);height:var(--hvm-mm-icon);opacity:0;transform:translateX(-4px);transition:.15s ease;color:var(--hvm-mm-accent);}
.hvm-mm-catlink:hover .hvm-mm-icon{opacity:1;transform:none;}
.hvm-mm-catlink.is-all{font-weight:700;color:var(--hvm-mm-accent);}
.hvm-mm-catlink.is-all .hvm-mm-icon{opacity:1;transform:none;}

/* ---- Columna 2: producto destacado -------------------------------------- */
.hvm-mm-card{border:1px solid var(--hvm-mm-line);border-radius:var(--hvm-mm-radius);overflow:hidden;background:#fff;}
.hvm-mm-card--empty{display:flex;align-items:center;justify-content:center;min-height:200px;padding:20px;text-align:center;}
.hvm-mm-card__media{position:relative;display:block;background:var(--hvm-mm-surface);}
.hvm-mm-card__media img,.hvm-mm-card__img{display:block;width:100%;height:200px;object-fit:cover;transition:transform .35s ease;}
.hvm-mm-card:hover .hvm-mm-card__img{transform:scale(1.04);}
.hvm-mm-card__body{padding:14px 15px 16px;}
.hvm-mm-card__title{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--hvm-mm-ink);
  text-decoration:none;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hvm-mm-card__title:hover{color:var(--hvm-mm-accent);}
.hvm-mm-card__price{font-size:19px;font-weight:800;color:var(--hvm-mm-ink);margin-bottom:12px;line-height:1.2;}
.hvm-mm-card__price del{color:var(--hvm-mm-ink-soft);font-weight:500;font-size:13px;margin-right:6px;}
.hvm-mm-card__price ins{text-decoration:none;color:var(--hvm-mm-accent);}
.hvm-mm-card__price .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* Badges */
.hvm-mm-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2;}
.hvm-mm-badge{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;
  padding:4px 8px;border-radius:5px;line-height:1;}
.hvm-mm-badge--sale{background:#c02a50;}   /* AA: 5.6:1 */
.hvm-mm-badge--new{background:var(--hvm-mm-accent);}
.hvm-mm-badge--best{background:var(--hvm-mm-navy);}
.hvm-mm-badge--low{background:#955c00;}    /* AA: 5.5:1 (antes #c4720b 3.65:1) */

/* Variaciones */
.hvm-mm-variations{margin:0 0 12px;}
.hvm-mm-attr{margin-bottom:8px;}
.hvm-mm-attr__label{display:block;font-size:12px;font-weight:600;color:var(--hvm-mm-ink-soft);margin-bottom:6px;}
.hvm-mm-attr__opts{display:flex;flex-wrap:wrap;gap:6px;}
.hvm-mm-opt{font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border:1.5px solid var(--hvm-mm-line);
  background:#fff;color:var(--hvm-mm-ink);border-radius:7px;cursor:pointer;transition:.15s ease;}
.hvm-mm-opt:hover{border-color:var(--hvm-mm-accent);}
.hvm-mm-opt.is-selected{border-color:var(--hvm-mm-accent);background:var(--hvm-mm-accent);color:#fff;}
.hvm-mm-opt.is-unavailable{opacity:.4;cursor:not-allowed;text-decoration:line-through;}

/* Acciones */
.hvm-mm-card__actions{display:flex;flex-direction:column;gap:8px;}
.hvm-mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;
  font-weight:600;padding:11px 16px;border-radius:9px;cursor:pointer;text-decoration:none;border:1.5px solid transparent;transition:.15s ease;}
.hvm-mm-btn .hvm-mm-icon{width:var(--hvm-mm-icon);height:var(--hvm-mm-icon);color:currentColor;}
.hvm-mm-btn--cart{background:var(--hvm-mm-accent);color:#fff;}
.hvm-mm-btn--cart:hover{background:#0046ad;}
.hvm-mm-btn--cart:disabled,.hvm-mm-btn--cart[aria-disabled="true"]{background:var(--hvm-mm-line);color:var(--hvm-mm-ink-soft);cursor:not-allowed;}
.hvm-mm-btn--cart.is-loading{opacity:.75;cursor:progress;}
.hvm-mm-btn--cart.is-done{background:#1f7a44;}
.hvm-mm-btn--ghost{background:#fff;color:var(--hvm-mm-ink);border-color:var(--hvm-mm-line);}
.hvm-mm-btn--ghost:hover{border-color:var(--hvm-mm-accent);color:var(--hvm-mm-accent);}

/* ---- Columna 3: mas destacados ------------------------------------------ */
.hvm-mm-morelist{display:flex;flex-direction:column;gap:10px;}
.hvm-mm-mini{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--hvm-mm-line);
  border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease;}
.hvm-mm-mini:hover{border-color:var(--hvm-mm-accent);box-shadow:0 4px 14px rgba(15,31,61,.08);}
.hvm-mm-mini__media{flex:0 0 auto;}
.hvm-mm-mini__media img,.hvm-mm-mini__img{display:block;width:60px;height:60px;object-fit:cover;border-radius:7px;background:var(--hvm-mm-surface);}
.hvm-mm-mini__body{flex:1 1 auto;min-width:0;}
.hvm-mm-mini__title{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--hvm-mm-ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hvm-mm-mini__title:hover{color:var(--hvm-mm-accent);}
.hvm-mm-mini__price{font-size:14px;font-weight:700;color:var(--hvm-mm-ink);margin-top:2px;}
.hvm-mm-mini__price del{color:var(--hvm-mm-ink-soft);font-weight:500;font-size:11px;margin-right:4px;}
.hvm-mm-mini__price ins{text-decoration:none;color:var(--hvm-mm-accent);}
.hvm-mm-mini__price .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.hvm-mm-mini__add{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:8px;border:1.5px solid var(--hvm-mm-line);background:#fff;color:var(--hvm-mm-accent);cursor:pointer;transition:.15s ease;text-decoration:none;}
.hvm-mm-mini__add:hover{background:var(--hvm-mm-accent);color:#fff;border-color:var(--hvm-mm-accent);}
.hvm-mm-mini__add .hvm-mm-icon{width:var(--hvm-mm-icon);height:var(--hvm-mm-icon);color:currentColor;}
.hvm-mm-mini__add.is-done{background:#1f7a44;color:#fff;border-color:#1f7a44;}

/* ---- Columna 4: beneficios (iconos de enfasis 20px) --------------------- */
.hvm-mm-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.hvm-mm-benefits li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--hvm-mm-ink);}
.hvm-mm-benefit__ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:9px;background:var(--hvm-mm-surface);}
.hvm-mm-benefit__ico .hvm-mm-icon{width:var(--hvm-mm-icon-emph);height:var(--hvm-mm-icon-emph);color:var(--hvm-mm-navy);}

/* ---- Columna 5: comprar segun necesidad --------------------------------- */
.hvm-mm-shopby{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.hvm-mm-shopby a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;
  font-size:13.5px;font-weight:500;color:var(--hvm-mm-ink);transition:background .15s ease,color .15s ease;}
.hvm-mm-shopby a:hover{background:var(--hvm-mm-surface);color:var(--hvm-mm-accent);}
.hvm-mm-shopby__ico{display:inline-flex;color:var(--hvm-mm-ink-soft);}
.hvm-mm-shopby a:hover .hvm-mm-shopby__ico{color:var(--hvm-mm-accent);}
.hvm-mm-shopby__ico .hvm-mm-icon{width:var(--hvm-mm-icon);height:var(--hvm-mm-icon);color:currentColor;}

.hvm-mm-empty{font-size:13px;color:var(--hvm-mm-ink-soft);margin:0;line-height:1.5;}

/* ---- Panel simple (Nosotros / Ayuda) ------------------------------------ */
.hvm-mm-panel--simple{width:auto;min-width:250px;border-radius:0 0 var(--hvm-mm-radius) var(--hvm-mm-radius);border-top:3px solid var(--hvm-mm-accent);}
.hvm-mm-simplelist{list-style:none;margin:0;padding:10px;}
.hvm-mm-simplelist a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:8px;
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--hvm-mm-ink);transition:background .15s ease,color .15s ease;}
.hvm-mm-simplelist a:hover{background:var(--hvm-mm-surface);color:var(--hvm-mm-accent);}
.hvm-mm-simplelist a .hvm-mm-icon{width:var(--hvm-mm-icon);height:var(--hvm-mm-icon);opacity:0;transform:translateX(-4px);transition:.15s ease;color:var(--hvm-mm-accent);}
.hvm-mm-simplelist a:hover .hvm-mm-icon{opacity:1;transform:none;}

/* ---- Microanimacion: entrada escalonada de columnas --------------------- */
.hvm-mm-panel.is-active .hvm-mm-col{animation:hvmMMcol .28s ease both;}
.hvm-mm-panel.is-active .hvm-mm-col:nth-child(2){animation-delay:.04s;}
.hvm-mm-panel.is-active .hvm-mm-col:nth-child(3){animation-delay:.08s;}
.hvm-mm-panel.is-active .hvm-mm-col:nth-child(4){animation-delay:.12s;}
.hvm-mm-panel.is-active .hvm-mm-col:nth-child(5){animation-delay:.16s;}
@keyframes hvmMMcol{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- Badge del carrito en el header (integracion #5) --------------------- */
.gb-text-93046e7c,.hvm-mobile-cart{position:relative;}
.cart-count:empty{display:none;}

/* =========================================================================
 * PUNTEROS TACTILES: tap targets >= 44px (tablets tactiles y moviles)
 * ========================================================================= */
@media (pointer: coarse){
  .hvm-mm-catlink{min-height:44px;}
  .hvm-mm-opt{min-height:44px;padding-top:10px;padding-bottom:10px;}
  .hvm-mm-shopby a{min-height:44px;}
  .hvm-mm-simplelist a{min-height:44px;}
  .hvm-mm-mini__add{width:44px;height:44px;}
  .hvm-mm-acc__link{padding-top:13px;padding-bottom:13px;}
}

/* =========================================================================
 * REFLOW RESPONSIVE GRADUAL (tablet)
 * ========================================================================= */
/* Tablet ancho: se oculta solo "segun necesidad"; 4 columnas. */
@media (max-width:1200px){
  .hvm-mm-grid{grid-template-columns:1.25fr 1.5fr 1.2fr 1fr;}
  .hvm-mm-col--shopby{display:none;}
}
/* Tablet medio: se ocultan beneficios; 3 columnas centradas en producto. */
@media (max-width:980px){
  .hvm-mm-grid{grid-template-columns:1.15fr 1.5fr 1.25fr;}
  .hvm-mm-col--benefits{display:none;}
}

/* =========================================================================
 * MOBILE/TABLET - acordeon vertical dentro del overlay nativo de GenerateBlocks
 * (ISSUE-012A). El JS inyecta .hvm-mm-acc despues de cada enlace del menu
 * movil. Salvaguarda explicita: el acordeon NUNCA debe generar overflow
 * horizontal ni empujar el layout, sin importar el largo del contenido.
 * ========================================================================= */
@media (max-width:768px){
  .gb-menu-container--mobile{overflow-x:hidden;max-width:100vw;}
  .gb-menu-container--mobile .gb-menu,
  .gb-menu-container--mobile .gb-menu-item{width:100%;max-width:100%;box-sizing:border-box;}
}
.hvm-mm-acc{display:none;overflow:hidden;max-height:0;width:100%;box-sizing:border-box;transition:max-height .28s ease;}
.hvm-mm-caret{margin-left:auto;transition:transform .25s ease;}
@media (max-width:768px){.hvm-mega-item.hvm-mm-has-panel > .gb-menu-link .hvm-mm-caret{display:inline-flex;}}
@media (max-width:768px){
  .hvm-mm-acc{display:block;}
  .hvm-mega-item.hvm-mm-has-panel > .gb-menu-link .hvm-mm-caret{display:inline-flex;}
}
.hvm-mm-item-open > .hvm-mm-acc{max-height:1400px;}
.hvm-mm-acc__inner{padding:4px 0 12px;}
.hvm-mm-acc__link{display:flex;align-items:center;justify-content:space-between;padding:11px 18px 11px 34px;
  color:#fff;text-decoration:none;font-size:14px;opacity:.92;}
.hvm-mm-acc__link.is-all{font-weight:700;}
.hvm-mm-acc__link:hover,.hvm-mm-acc__link:focus{opacity:1;text-decoration:underline;}
.hvm-mm-acc__link .hvm-mm-icon{width:15px;height:15px;color:currentColor;opacity:.7;}
.hvm-mm-caret{display:none;}
.hvm-mm-item-open > .gb-menu-link .hvm-mm-caret,
.hvm-mm-item-open .hvm-mm-caret{transform:rotate(180deg);}
.hvm-mm-caret .hvm-mm-icon{width:18px;height:18px;color:currentColor;}

@media (prefers-reduced-motion: reduce){
  .hvm-mm-panel,.hvm-mm-backdrop,.hvm-mm-acc,.hvm-mm-card__img,.hvm-mm-caret,.hvm-mm-panel.is-active .hvm-mm-col{transition:none !important;animation:none !important;}
}