/* ========================================================================== HEADER SHRINK ON SCROLL — estilo dbs.cl Cómo usar: agrega la clase "header-shrink" al , junto a la que ya tengas de header-altN (o sola, sin ninguna ALT). Ejemplo: Requiere cargar scroll-header.js antes de : El script solo agrega/quita la clase "is-header-scrolled" en según el scroll. No toca mobile_menu.js, no cambia el DOM, no interfiere con el hamburguesa ni con el badge del carrito. ========================================================================== */ body.header-shrink .header { transition: height 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; border-bottom: 1px solid transparent; } body.header-shrink .header__logo-img { transition: height 0.25s ease; } body.header-shrink .header__nav-link, body.header-shrink .icon-btn, body.header-shrink .search-box { transition: all 0.25s ease; } /* La topbar se colapsa con max-height/opacity, no con display:none, para que se sienta como un solo movimiento junto con el header */ body.header-shrink .ALT1_topbar { overflow: hidden; max-height: 40px; opacity: 1; transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease; } /* Estado compacto: se aplica apenas el usuario baja más de 40px. --shadow-sm del theme es casi invisible (rgba casi blanco), así que acá usamos un valor propio con contraste real sobre fondos oscuros, más un borde de respaldo por si el fondo tapa la sombra. */ body.header-shrink.is-header-scrolled .header { height: 56px; box-shadow: 0 2px 10px rgba(3, 15, 30, 0.55); border-bottom-color: var(--border-color); } body.header-shrink.is-header-scrolled .header__logo-img { height: 38px; } body.header-shrink.is-header-scrolled .header__nav-link { padding: 6px 12px; font-size: 13px; } body.header-shrink.is-header-scrolled .icon-btn { width: 34px; height: 34px; font-size: 16px; } body.header-shrink.is-header-scrolled #cart-button { width: 38px; height: 38px; font-size: 18px; } body.header-shrink.is-header-scrolled .search-box { padding: 5px 12px 5px 5px; } /* Si además usas ALT1 (barra superior), esta se colapsa suavemente al compactar para ganar aún más espacio, tal como en dbs.cl */ body.header-shrink.is-header-scrolled .ALT1_topbar { max-height: 0; opacity: 0; padding: 0; } body.header-shrink.is-header-scrolled .ALT1_topbar__inner { padding: 0; }