/* GANK 2026-11-01 ancho: contenedor del sitio de 1410 a 1640 px (tope en pantallas grandes). Catalogo se queda en 4 por fila (decision de Diego: 5 se ve saturado).
   Dato: GA4 ago-oct 2026, 57 % del trafico de escritorio usa pantallas de 1680 px o mas.
   Revertir: quitar el <link> de este archivo en templates/_partials/stylesheets.tpl. */
:root{--gank-ancho:1640px;--gank-sticky-r:max(0px,calc(50vw - 828px))}

/* Contenedor del tema (theme.css: width 1410px desde 1200 px; max-width:100% se conserva) */
@media (min-width:1200px){.container{width:var(--gank-ancho)}}

/* custom.css aplica margen interior de 45 px hasta 1661 px (calculado para 1410). Con 1640 ese corte se recorre a 1891 px. */
@media (min-width:1662px) and (max-width:1891px){
 .container{max-width:100%;padding:0 45px}
 .tvcmsdesktop-top-header .container,.tvcms-header-menu-offer-wrapper .container,.tvcmsdesktop-top-second .container{max-width:100%;padding:0}
 .tvcmsbrandlist-slider .container,.tvcmscustomer-services .container,.footer-container .container,.tvfooter-product-box-layout .container,.tv-main-div #wrapper .tvcms-all-page-outer>.container{max-width:100%;padding:0 45px}
}

/* Bloques del inicio con tope propio de 1410 (gankusage .gu, gankslider .gks, gankbento .gkb, .gki).
   "body" sube la especificidad para ganar a sus <style> en linea sin editar los modulos. */
@media (min-width:1024px){body .gu,body .gks,body .gkb,body .gki{width:calc(min(100%,var(--gank-ancho)) - 90px)}}
@media (min-width:1892px){body .gu,body .gks,body .gkb,body .gki{width:calc(min(100%,var(--gank-ancho)) - 30px)}}

/* Encabezado fijo al deslizar. gank-staging-search.css posiciona logo y buscador contra el contenedor de 1410; aqui se reacomodan para 1640.
   De derecha a izquierda, a partir del borde derecho del contenedor (--gank-sticky-r): telefono (lo pone el tema) | carrito | mi cuenta | buscador. */
@media (min-width:1600px){
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-logo{left:max(16px,calc(50vw - 820px))}
 body #header .tvcms-header-menu-offer-wrapper.tvcmsheader-sticky.sticky .tvcmsmain-menu-wrapper{padding-left:96px}
}
@media (min-width:1200px){
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_cart_manage,
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-account-button{position:fixed;top:0;z-index:102;height:59px;margin:0;display:flex;align-items:center;animation:mySticky 1s ease-in-out both}
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_cart_manage{right:calc(var(--gank-sticky-r) + 151px)}
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-account-button{right:calc(var(--gank-sticky-r) + 215px)}
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_cart_manage>*,
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-account-button>*{height:auto}
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_search{right:calc(var(--gank-sticky-r) + 275px)}
}
@media (min-width:1400px){
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper{right:calc(var(--gank-sticky-r) + 275px);width:clamp(340px,calc(min(100vw,1655px) - 1055px),600px)}
}
@media (prefers-reduced-motion:reduce){body #header:has(.tvcmsheader-sticky.sticky) #_desktop_cart_manage,body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-account-button{animation:none!important}}

/* Animacion de la barra fija (decision de Diego 2026-11-02): al bajar, la barra aparece de inmediato (sin la animacion del tema mySticky de 1 s);
   el menu se desliza a la derecha y, cuando ya libero el espacio, el logo baja desde arriba (retraso .12 s, termina junto con el menu); buscador, cuenta y carrito aparecen de inmediato. Al subir, el menu regresa a la izquierda. */
@keyframes gankLogoIn{from{transform:translateY(-59px)}to{transform:none}}
@media (min-width:1200px){
 body #header .tvcms-header-menu-offer-wrapper .tvcmsmain-menu-wrapper{transition:padding-left .28s cubic-bezier(.2,.8,.2,1)}
 body #header .tvcms-header-menu-offer-wrapper.tvcmsheader-sticky.sticky,
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-account-button,
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_cart_manage,
 body #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper{animation:none}
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-logo{animation:gankLogoIn .2s cubic-bezier(.2,.8,.2,1) .12s both}
}
@media (prefers-reduced-motion:reduce){
 body #header .tvcms-header-menu-offer-wrapper .tvcmsmain-menu-wrapper{transition:none}
 body #header:has(.tvcmsheader-sticky.sticky) #tvcmsdesktop-logo{animation:none!important}
}