/* responsive-fix.css (21 Oct 2026, Joseph: fully responsive 320–2560 px). Loaded LAST. Fluid rules only (clamp/min/auto-fit/flex-wrap);
   images are never down-scaled in quality — only kept inside their box. Findings: /workspace/reports/responsive-easylife-20261020/ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas{max-width:100%}
img{height:auto}
#app img[width][height]{height:auto}
/* long words / URLs never push the page sideways */
#app,#app *{overflow-wrap:break-word}
#app pre,#app code{white-space:pre-wrap}
#app table{display:block;max-width:100%;overflow-x:auto}
/* tap targets >= 44px */
.ck-more,.ck-set,.lg-legal a,.i2-ftl a{display:inline-flex;align-items:center;min-height:44px;padding-block:4px}
.id-chip,.el-don-top,.i2-tb,.hb-open,.hb-mini,.opt,.lg-sw,.hb-forget{min-height:44px}
.i2-bar{display:flex;flex-wrap:wrap;gap:8px}
.i2-bar>.i2-tb{flex:1 1 auto}
/* readable text on phones (>=14px) */
@media (max-width:480px){
 #title.el-brand-name{font-size:clamp(14px,4.4vw,18px)}
 nav#tabs a span,nav#tabs .esms-l,.tab999 .rpar span{font-size:14px;line-height:1.1}
 #app small,.i2-tx small,.lh-imp,.lh-pv,.hb-soon,.i2-small,.i2-small span,.lg-legal,.lg-legal a,.ck-ban .ck-more,.ck-more,.ck-set,.id-tpl span,.hb-nt,.tiny,.ft-tx small,.id-c small,#app .tag,.el-cw span,.esms-btn span{font-size:14px!important}
 nav#tabs a span,nav#tabs .esms-l,.tab999 .rpar span{font-size:14px!important}
}
/* very small phones: header buttons wrap instead of squeezing */
@media (max-width:360px){header{flex-wrap:wrap;row-gap:6px}}
/* wide screens: keep reading width comfortable, tiles use the space */
@media (min-width:1920px){#app{max-width:min(1440px,80vw)}html{font-size:clamp(16px,0.55vw + 8px,20px)}}
/* checkboxes/radios: the whole label row is the tap target */
label:has(> input[type=checkbox]),label:has(> input[type=radio]){display:inline-flex;align-items:center;gap:8px;min-height:44px}
input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
/* el-site-2 tap targets (device-matrix): What's new list, footer legal links, shop book titles */
.i2-wnl a{min-height:44px;align-items:center;box-sizing:border-box}
.i2-wnm summary{min-height:44px;box-sizing:border-box;padding-block:12px}
.lg-legal a{min-width:44px;justify-content:center;box-sizing:border-box}
.hb .hb-card>.hb-t{height:44px}
html.tm:not(.a11y):not(#tgx):not(#tgx):not(#tgy) .hb .hb-card>.hb-t>.hb-open,.hb .hb-card>.hb-t>.hb-open{min-height:44px!important;max-height:44px}
@media (max-width:520px){#home .el-slogan{display:none!important}}
.i2-ftl a{min-width:44px;justify-content:center}