/* ---------- LYFE mobile refinements ---------- */

/* never allow sideways scroll */
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;}

/* comfortable tap targets everywhere */
a,button,.filter,.opt,.gopt,summary{-webkit-tap-highlight-color:rgba(20,112,168,.12);}

@media (max-width:1000px){
  /* top info bar: keep it to one clean line */
  .infobar{font-size:.7rem;padding:8px 5%;gap:4px;}
  .infobar .left{display:flex;gap:14px;flex-wrap:wrap;}
  .infobar .left span,.infobar .left a{margin-right:0;}

  /* nav icons easier to hit */
  .nav-icons{gap:14px;}
  .icon-btn{padding:6px;margin:-6px;}
  .icon-btn svg{width:22px;height:22px;}
  .burger{display:block;padding:6px;margin:-6px;}

  /* promo bar stacks cleanly */
  .promo{gap:9px;font-size:.8rem;padding:10px 5%;text-align:center;}
  .promo .timer span{font-size:.7rem;padding:3px 7px;}

  /* generally tighter section rhythm */
  section{padding:44px 5%;}
  .sec-head h2{font-size:1.5rem;}
  .hero{padding:34px 5% 8px;gap:26px;}
  .hero h1{font-size:1.95rem;}
  .hero .sub{font-size:.95rem;}
  .hero-btns .btn{flex:1;text-align:center;}
}

@media (max-width:760px){
  /* full-width primary actions read better on phones */
  .hero-btns{flex-direction:column;}
  .hero-btns .btn{width:100%;}
  .trust-strip{grid-template-columns:1fr 1fr;}
  .trust-item{border-right:none;border-bottom:1px solid var(--line);padding:18px 14px;}
  .scan h2{font-size:1.5rem;}
  .news-form{flex-direction:column;align-items:stretch;}
  .news-form input,.news-form button{width:100%;}

  /* cart drawer takes the screen */
  .drawer{width:100%;max-width:100%;}

  /* shop controls stack */
  .shop-controls{flex-direction:column;align-items:stretch;}
  .searchbox{max-width:100%;}
  .sortsel{width:100%;}

  /* filter pills scroll sideways instead of wrapping into a wall */
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .filters::-webkit-scrollbar{display:none;}
  .filter{white-space:nowrap;flex:0 0 auto;padding:10px 16px;}
}

/* iOS zooms any input under 16px — keep them at 16 */
@media (max-width:760px){
  input,select,textarea{font-size:16px !important;}
}

/* ---------- product detail page ---------- */
@media (max-width:1000px){
  .pdp{padding:8px 5% 40px;gap:26px;}
  h1{font-size:1.7rem;}
  .gallery{position:static;}
  .main-shot{padding:18px;min-height:auto;}
  .main-shot img{max-width:210px;}
  /* hover-zoom is meaningless on touch */
  .main-shot img{transform:none !important;}
  .zoom-hint{display:none;}
  .thumbs{justify-content:center;}
  .tabbar{gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .tabbar::-webkit-scrollbar{display:none;}
  .tab{font-size:.83rem;flex:0 0 auto;}
  .tabs-sec{padding:0 5% 44px;}
  .rel-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .opts{gap:8px;}
  .opt{flex:1 1 calc(33% - 8px);min-width:92px;}
  .buyrow{gap:9px;}
  .btn-add{font-size:.88rem;padding:14px 10px;}
  .qty button{width:44px;height:44px;font-size:1.2rem;}
  .qty input{width:40px;}
  /* spec table can scroll rather than squash */
  .spec-table{display:block;overflow-x:auto;white-space:nowrap;}
  .spec-table td:first-child{width:auto;padding-right:22px;}
  .coa-box{flex-wrap:wrap;gap:12px;}
  .coa-box a{margin-left:0;width:100%;text-align:center;}
}

/* ---------- legal pages ---------- */
@media (max-width:760px){
  .legal-wrap{padding:28px 5% 48px;}
  .legal-hd h1{font-size:1.55rem;}
  .legal-nav{gap:7px;}
  .legal-nav a{font-size:.74rem;padding:7px 12px;}
  .toc{padding:16px 18px;}
  table.lt{display:block;overflow-x:auto;white-space:nowrap;}
}

/* ---------- mobile nav drawer ---------- */
.mobilemenu{
  display:none;background:#fff;border-bottom:1px solid var(--line);
  padding:6px 5% 14px;
}
.mobilemenu.open{display:block;}
.mobilemenu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;font-size:.95rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobilemenu a:last-child{border-bottom:none;}
.mobilemenu a::after{content:"›";color:#9BAAB2;font-size:1.1rem;}
@media (min-width:1001px){ .mobilemenu{display:none !important;} }

/* ---------- sticky buy bar on phones ---------- */
@media (max-width:760px){
  .stickybuy{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:10px 5% calc(10px + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:12px;
    box-shadow:0 -6px 20px rgba(10,58,92,.10);
    transform:translateY(120%);transition:transform .25s;
  }
  .stickybuy.show{transform:translateY(0);}
  .stickybuy .sp{display:flex;flex-direction:column;line-height:1.15;}
  .stickybuy .sp b{font-size:1.02rem;font-weight:800;color:var(--navy);}
  .stickybuy .sp span{font-size:.7rem;color:var(--gray);}
  .stickybuy button{
    flex:1;background:var(--navy);color:#fff;border:none;border-radius:9px;
    padding:14px;font-weight:700;font-size:.9rem;font-family:inherit;
  }
  .stickybuy button.added{background:var(--palm);}
  body.has-stickybuy{padding-bottom:76px;}
}
@media (min-width:761px){ .stickybuy{display:none;} }

/* ---------- verification gate on small screens ---------- */
@media (max-width:520px){
  #lyfeGateCard{padding:26px 20px 20px;}
  #lyfeGateCard h2{font-size:1.25rem;}
  #lyfeGateCard .intro{font-size:.85rem;}
  .gopt{padding:13px 14px;}
  .gopt span{font-size:.86rem;}
  #lyfeEnter{padding:15px;}
}


/* ---------- hero vials on phones ---------- */
@media (max-width:1000px){
  .hero-vis{
    justify-content:center;align-items:center;
    padding:20px 14px;gap:10px;width:100%;overflow:hidden;
  }
  .hero-vis .vial{width:min(46vw,200px) !important;margin-bottom:0 !important;}
  .hero-vis .vial img{width:100% !important;margin:0 auto;}
}
@media (max-width:520px){
  /* one vial reads better than two cramped ones */
  .hero-vis .vial:nth-child(2){display:none;}
  .hero-vis .vial{width:min(62vw,240px) !important;}
}

/* three-vial hero: scale down rather than overflow on phones */
@media (max-width:760px){
  .hero-vis{min-height:290px;padding:4px 0 18px;}
  .vial.lead{width:186px;}
  .vial.side{width:150px;margin-bottom:15px;}
  .vial.left{margin-right:-52px;}
  .vial.right{margin-left:-52px;}
}
@media (max-width:420px){
  .hero-vis{min-height:250px;}
  .vial.lead{width:152px;}
  .vial.side{width:122px;margin-bottom:12px;}
  .vial.left{margin-right:-42px;}
  .vial.right{margin-left:-42px;}
}