/* JERSIX — mobile e-commerce UI (clean, isolated, 2026-07-29) */
:root{--fs-mobile-pad:16px;--fs-safe-bottom:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%}
body{min-width:320px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
input,select,textarea{font-size:16px}
.fs-mobile-menu-btn,.fs-mobile-only-cart,.fs-mobile-drawer{display:none}

@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body.fs-menu-open{overflow:hidden}
  .container{width:min(calc(100% - 28px),var(--max,1440px))!important}

  .topbar:not(header),.topline{
    min-height:30px!important;height:30px!important;padding:0 12px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;
    font-size:10px!important;line-height:1!important;letter-spacing:.075em!important;
  }
  .topbar:not(header) .container{height:30px!important;min-height:30px!important;justify-content:center!important;gap:0!important}
  .topbar:not(header) .container>*:not(:first-child){display:none!important}

  header:not(.topbar):not(.site-header),header.header,.header{
    position:sticky!important;top:0!important;z-index:9000!important;
    background:rgba(7,9,13,.97)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  }
  .fs-mobile-ready{
    width:min(calc(100% - 28px),var(--max,1440px))!important;
    height:64px!important;min-height:64px!important;margin-inline:auto!important;padding:0!important;
    display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:12px!important;
  }
  .fs-mobile-ready>.brand,.fs-mobile-ready>.fs-standard-brand,.fs-mobile-ready>a:first-child{
    justify-self:start!important;display:flex!important;align-items:center!important;min-width:0!important;
  }
  .fs-mobile-ready .brand-logo-img,.fs-mobile-ready .logo,.fs-mobile-ready>a:first-child img{
    width:46px!important;height:46px!important;max-width:46px!important;object-fit:contain!important;display:block!important;
  }
  .fs-mobile-ready .brand-copy{display:none!important}
  .fs-mobile-ready>.navlinks{display:none!important}
  .fs-mobile-ready>.actions,.fs-mobile-ready>.header-actions,.fs-mobile-actions{
    grid-column:3!important;justify-self:end!important;display:flex!important;align-items:center!important;gap:8px!important;
  }
  .fs-mobile-ready .fs-mobile-hide{display:none!important}

  .fs-mobile-ready .cart,.fs-mobile-only-cart,.fs-mobile-menu-btn{
    width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
    border:1px solid rgba(255,255,255,.13)!important;border-radius:11px!important;
    background:#10151d!important;color:#fff!important;box-shadow:none!important;
    display:grid!important;place-items:center!important;padding:0!important;position:relative!important;
    font-size:0!important;text-decoration:none!important;
  }
  .fs-mobile-ready .cart svg,.fs-mobile-only-cart svg{width:19px!important;height:19px!important;display:block!important}
  .fs-mobile-ready .cart-count,.fs-mobile-only-cart .cart-count{
    position:absolute!important;top:-5px!important;right:-5px!important;width:18px!important;height:18px!important;
    border-radius:999px!important;background:#e3222e!important;color:#080b0f!important;
    display:grid!important;place-items:center!important;font:800 10px/1 Arial,sans-serif!important;border:2px solid #07090d!important;
  }
  .fs-mobile-menu-btn{border:0!important;cursor:pointer!important}
  .fs-mobile-menu-btn span{display:block!important;width:18px!important;height:2px!important;margin:2px auto!important;background:currentColor!important;border-radius:4px!important;transition:.22s!important}
  .fs-mobile-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .fs-mobile-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .fs-mobile-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .fs-mobile-drawer{display:block!important;position:fixed!important;inset:0!important;z-index:99999!important;pointer-events:none!important;visibility:hidden!important}
  .fs-mobile-drawer.is-open{pointer-events:auto!important;visibility:visible!important}
  .fs-mobile-drawer-backdrop{position:absolute!important;inset:0!important;background:rgba(0,0,0,.62)!important;opacity:0!important;transition:opacity .24s!important}
  .fs-mobile-drawer.is-open .fs-mobile-drawer-backdrop{opacity:1!important}
  .fs-mobile-drawer-panel{
    position:absolute!important;top:0!important;right:0!important;width:min(84vw,340px)!important;height:100%!important;
    padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(18px + var(--fs-safe-bottom))!important;
    background:#090d13!important;border-left:1px solid rgba(255,255,255,.1)!important;
    transform:translateX(102%)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
    display:flex!important;flex-direction:column!important;box-shadow:-20px 0 60px rgba(0,0,0,.45)!important;
  }
  .fs-mobile-drawer.is-open .fs-mobile-drawer-panel{transform:translateX(0)!important}
  .fs-mobile-drawer-head{height:54px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid rgba(255,255,255,.09)!important;padding-bottom:12px!important}
  .fs-mobile-drawer-head img{width:44px!important;height:44px!important;object-fit:contain!important}
  .fs-mobile-drawer-close{width:38px!important;height:38px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:10px!important;background:#111720!important;color:#fff!important;font-size:22px!important;line-height:1!important;cursor:pointer!important}
  .fs-mobile-drawer-links{display:grid!important;padding:18px 0 12px!important}
  .fs-mobile-drawer-links a{min-height:52px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#f5f7fb!important;text-decoration:none!important;font:600 18px/1.1 "DM Sans",Arial,sans-serif!important;text-transform:none!important;letter-spacing:0!important}
  .fs-mobile-drawer-links a span{color:#e3222e!important;font-size:20px!important}
  .fs-mobile-drawer-cart{min-height:50px!important;margin-top:10px!important;border-radius:12px!important;background:#e3222e!important;color:#080b0f!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;font:800 13px/1 "DM Sans",Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.06em!important}
  .fs-mobile-drawer-foot{margin-top:auto!important;padding-top:18px!important;color:#8b95a3!important;font-size:11px!important;line-height:1.55!important}

  main{max-width:100%;overflow:hidden}
  section{scroll-margin-top:92px}
  .section-head{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;align-items:start!important;margin-bottom:26px!important}
  .section-title{font-size:clamp(38px,12vw,56px)!important;line-height:.94!important}
  .section-copy,.lead{font-size:15px!important;line-height:1.62!important}
  .btn,.cta,.checkout-btn,.add-btn,.pay-btn{min-height:50px!important}
  .benefit-grid{grid-template-columns:1fr 1fr!important}
  .cat-grid{grid-template-columns:1fr!important;grid-template-rows:none!important;gap:12px!important}
  .cat,.cat:first-child{grid-column:auto!important;grid-row:auto!important;min-height:240px!important}
  .nation-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .review-grid,.story-wrap,.faq-wrap,.news-wrap{grid-template-columns:1fr!important}
  .stats{grid-template-columns:1fr!important}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .pd-grid{grid-template-columns:1fr!important;gap:22px!important}
  .gallery-wrap{grid-template-columns:1fr!important}
  .thumbs{order:2!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
  .buy-panel{position:relative!important;top:auto!important;border-radius:20px!important}
  .sizes{grid-template-columns:repeat(4,1fr)!important}
  .personalization-grid,.form-grid{grid-template-columns:1fr!important}
  .cart-grid,.checkout-grid{grid-template-columns:1fr!important}
  .summary{position:relative!important;top:auto!important}
  .cart-item{grid-template-columns:86px minmax(0,1fr)!important;gap:14px!important;padding:16px!important}
  .product-image{width:86px!important}
  .price-side{grid-column:2!important;flex-direction:row!important;align-items:center!important}
  .form-grid{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .footer-grid>div:first-child{grid-column:1/-1!important}
  .fs-whatsapp-float{width:54px!important;height:54px!important;right:14px!important;bottom:calc(14px + var(--fs-safe-bottom))!important}
  .fs-wa-tip{display:none!important}
}

@media (max-width:520px){
  .container{width:min(calc(100% - 24px),var(--max,1440px))!important}
  .fs-mobile-ready{width:calc(100% - 24px)!important;height:62px!important;min-height:62px!important}
  .fs-mobile-ready .brand-logo-img,.fs-mobile-ready .logo,.fs-mobile-ready>a:first-child img{width:42px!important;height:42px!important;max-width:42px!important}
  .fs-mobile-ready .cart,.fs-mobile-only-cart,.fs-mobile-menu-btn{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important;border-radius:10px!important}
  .benefit-grid{grid-template-columns:1fr!important}
  .pgrid{gap:9px!important}
  .pcard-body{padding:10px!important}
  .pcard-name{font-size:12px!important;line-height:1.25!important}
  .pcard-price{font-size:18px!important}
  .footer-grid{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  .fs-mobile-drawer-panel,.fs-mobile-drawer-backdrop,.fs-mobile-menu-btn span{transition:none!important}
}


/* ===== JERSIX MOBILE V3 — UNIFICADO EN TODA LA WEB ===== */
@media (max-width:900px){
  /* Promo superior: limpio, centrado y sin desbordes */
  .topbar:not(header),
  .topline{
    width:100%!important;
    min-height:30px!important;
    height:30px!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#e3222e!important;
  }
  .topbar:not(header)>.container,
  .topline>.container{
    width:100%!important;
    max-width:none!important;
    min-height:30px!important;
    height:30px!important;
    padding:0 9px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .topbar:not(header)>.container>span{
    display:none!important;
  }
  .topbar:not(header)>.container>span:first-child{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
    color:#fff!important;
    font:800 9px/30px Arial,sans-serif!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
  }

  /* Páginas help con variante móvil propia */
  .help-topbar .help-topbar-desktop{display:none!important}
  .help-topbar .help-topbar-mobile{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
    color:#fff!important;
    font:800 9px/30px Arial,sans-serif!important;
    letter-spacing:.03em!important;
  }

  /* Header universal: logo + carrito + hamburguesa */
  header:not(.topbar):not(.site-header),
  header.header,
  .header{
    position:sticky!important;
    top:0!important;
    z-index:9000!important;
    min-height:62px!important;
    background:rgba(7,9,13,.98)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  header .nav.fs-mobile-ready,
  .header .nav.fs-mobile-ready{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    min-height:62px!important;
    height:62px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:10px!important;
  }
  .fs-mobile-ready>.brand,
  .fs-mobile-ready>.guide-brand,
  .fs-mobile-ready>.fs-standard-brand,
  .fs-mobile-ready>a:first-child{
    grid-column:1!important;
    justify-self:start!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .fs-mobile-ready .brand-logo-img,
  .fs-mobile-ready .logo,
  .fs-mobile-ready>a:first-child img{
    width:42px!important;
    height:42px!important;
    max-width:42px!important;
    object-fit:contain!important;
    display:block!important;
    margin:0!important;
  }
  .fs-mobile-ready>.navlinks{display:none!important}
  .fs-mobile-ready>.actions,
  .fs-mobile-ready>.header-actions,
  .fs-mobile-actions{
    grid-column:3!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    margin:0!important;
  }
  .fs-mobile-ready .fs-mobile-hide{display:none!important}

  .fs-mobile-ready .cart,
  .fs-mobile-only-cart,
  .fs-mobile-menu-btn{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    flex:0 0 40px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:10px!important;
    background:#10151d!important;
    color:#fff!important;
    box-shadow:none!important;
    position:relative!important;
    text-decoration:none!important;
  }
  .fs-mobile-ready .cart,
  .fs-mobile-only-cart{
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
  }
  .fs-mobile-ready .cart svg,
  .fs-mobile-only-cart svg{
    width:19px!important;
    height:19px!important;
    display:block!important;
  }
  .fs-mobile-ready .cart-count,
  .fs-mobile-only-cart .cart-count{
    position:absolute!important;
    top:-5px!important;
    right:-5px!important;
    width:18px!important;
    height:18px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:#e3222e!important;
    color:#080b0f!important;
    border:2px solid #07090d!important;
    font:800 10px/1 Arial,sans-serif!important;
  }

  /* Hamburguesa estética, líneas más juntas */
  .fs-mobile-menu-btn{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    cursor:pointer!important;
  }
  .fs-mobile-menu-btn span{
    display:block!important;
    width:18px!important;
    height:2px!important;
    margin:0!important;
    background:#fff!important;
    border-radius:4px!important;
    transition:.22s!important;
  }
  .fs-mobile-menu-btn[aria-expanded="true"] span:nth-child(1){
    transform:translateY(5px) rotate(45deg)!important;
  }
  .fs-mobile-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0!important}
  .fs-mobile-menu-btn[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-5px) rotate(-45deg)!important;
  }

  /* Drawer lateral */
  .fs-mobile-drawer-panel{
    width:min(92vw,360px)!important;
    padding:calc(15px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))!important;
    background:#090d13!important;
  }
  .fs-mobile-drawer-head{
    height:52px!important;
    padding-bottom:10px!important;
  }
  .fs-mobile-drawer-head img{
    width:42px!important;
    height:42px!important;
    object-fit:contain!important;
  }
  .fs-mobile-drawer-links{padding:18px 0 10px!important}
  .fs-mobile-drawer-links a{
    min-height:52px!important;
    font-size:17px!important;
  }
  .fs-mobile-drawer-cart{
    min-height:50px!important;
    margin-top:11px!important;
    border-radius:12px!important;
    background:#e3222e!important;
  }
}
@media (max-width:390px){
  .topbar:not(header)>.container>span:first-child,
  .help-topbar .help-topbar-mobile{font-size:8.4px!important}
  header .nav.fs-mobile-ready,
  .header .nav.fs-mobile-ready{width:calc(100% - 24px)!important}
}


/* ===== PASO 51 — HEADER MÓVIL SIEMPRE VISIBLE ===== */
@media (max-width:900px){
  /* El header acompaña el scroll en todas las páginas */
  header:not(.topbar):not(.site-header),
  header.header,
  .header{
    position:sticky!important;
    top:0!important;
    z-index:99990!important;
    width:100%!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* Anula cualquier comportamiento viejo que lo esconda al bajar */
  header.is-hidden,
  .header.is-hidden,
  header.header-hidden,
  .header.header-hidden,
  header.hide,
  .header.hide{
    transform:none!important;
    top:0!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* Carrito y menú siempre accesibles */
  .fs-mobile-ready .cart,
  .fs-mobile-only-cart,
  .fs-mobile-menu-btn{
    z-index:3!important;
  }
}


/* ==========================================================
   PASO 52 — HEADER + CARRITO SIEMPRE VISIBLES EN MOBILE
   Se usa FIXED en lugar de STICKY para evitar que contenedores
   con overflow/transform rompan el comportamiento.
   ========================================================== */
@media (max-width:900px){

  /* Barra promocional fija arriba */
  body > .topbar,
  body > .help-topbar,
  body > .topline{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:100001!important;
    width:100%!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    transform:none!important;
  }

  /* Header/nav fijo debajo de la promo */
  body > header.header,
  body > header:not(.topbar):not(.topline),
  body > .header{
    position:fixed!important;
    top:30px!important;
    left:0!important;
    right:0!important;
    z-index:100000!important;
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    margin:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    background:rgba(7,9,13,.985)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }

  /* Reserva espacio para que el contenido no quede tapado */
  body{
    padding-top:92px!important;
  }

  /* Si alguna página no tiene promo, JS agrega la clase correspondiente */
  body.fs-no-mobile-promo{
    padding-top:62px!important;
  }
  body.fs-no-mobile-promo > header.header,
  body.fs-no-mobile-promo > header:not(.topbar):not(.topline),
  body.fs-no-mobile-promo > .header{
    top:0!important;
  }

  /* Nunca permitir que estilos/scripts antiguos oculten el header */
  body > header.header.is-hidden,
  body > header.header.header-hidden,
  body > header.header.hide,
  body > header.is-hidden,
  body > header.header-hidden,
  body > header.hide,
  body > .header.is-hidden,
  body > .header.header-hidden,
  body > .header.hide{
    position:fixed!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* El carrito y hamburguesa siempre clickeables */
  .fs-mobile-ready .cart,
  .fs-mobile-only-cart,
  .fs-mobile-menu-btn,
  .header .cart,
  .header .actions{
    pointer-events:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }

  .fs-mobile-ready .cart,
  .fs-mobile-only-cart,
  .fs-mobile-menu-btn{
    z-index:100005!important;
  }

  /* Drawer por encima del header fijo */
  .fs-mobile-drawer{
    z-index:100100!important;
  }

  /* Cart drawer por encima del header fijo */
  .fs-cart-overlay,
  .cart-drawer-overlay{
    z-index:100110!important;
  }
  .fs-cart-drawer,
  .cart-drawer{
    z-index:100120!important;
  }
}