/* EZY2BRAND Mobile Responsive Layer - 2026 */
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
button,input,select,textarea{font:inherit}

/* Generic public inner-page mobile navigation */
.public-mobile-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;font-size:19px;cursor:pointer;flex:0 0 44px}
.navbar .container{position:relative;min-width:0}
.navbar .logo{min-width:0}
.navbar .logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

@media (max-width: 820px){
  .navbar{padding:.7rem 0!important}
  .navbar .container{min-height:48px;padding-left:14px!important;padding-right:14px!important;gap:12px}
  .navbar .logo{font-size:17px!important;gap:9px!important;max-width:calc(100% - 58px)}
  .navbar .logo img{height:34px!important;max-width:44px;object-fit:contain}
  .public-mobile-toggle{display:inline-flex}
  .navbar nav{display:none!important;position:absolute;left:12px;right:12px;top:calc(100% + 10px);z-index:1200;background:#10182c;border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:10px;box-shadow:0 18px 45px rgba(0,0,0,.28);max-height:calc(100vh - 90px);overflow:auto;-webkit-overflow-scrolling:touch}
  .navbar nav.mobile-open{display:flex!important;flex-direction:column;align-items:stretch;gap:4px}
  .navbar nav a{display:flex!important;align-items:center;width:100%;min-height:44px;margin:0!important;padding:11px 13px!important;border-radius:10px;font-size:14px!important;color:#fff!important}
  .navbar nav a:hover,.navbar nav a:focus{background:rgba(255,255,255,.08);color:#8db8ff!important}
  body.public-menu-open{overflow:hidden}

  .hero{overflow:hidden}
  .hero h1{overflow-wrap:anywhere}
  .container{width:100%;max-width:100%;padding-left:16px!important;padding-right:16px!important}
  .products-grid,.services-grid,.portfolio-grid,.articles-list{padding-left:0!important;padding-right:0!important}
  .pagination{flex-wrap:wrap}
}

@media (max-width: 560px){
  .navbar .logo span{max-width:190px}
  .hero{padding-left:16px!important;padding-right:16px!important}
  .hero h1{font-size:clamp(28px,9vw,38px)!important;line-height:1.12!important}
  .hero p{font-size:15px!important;line-height:1.6!important}
  .products-grid,.services-grid,.portfolio-grid{grid-template-columns:1fr!important;gap:16px!important}
  .product-card,.service-card,.portfolio-card,.article-card{border-radius:16px!important}
  .product-image{height:190px!important}
  .article-card{grid-template-columns:1fr!important;margin-bottom:18px!important}
  .article-image{min-height:180px!important;max-height:230px;order:-1}
  .article-content{padding:20px!important}
  .article-meta{align-items:flex-start!important;flex-direction:row!important;flex-wrap:wrap!important;gap:7px 12px!important}
  .article-title{font-size:21px!important;line-height:1.25}
  .footer{margin-top:35px!important}
  .btn,.read-more{min-height:44px}
}

@media (max-width: 380px){
  .navbar .container{padding-left:10px!important;padding-right:10px!important}
  .navbar .logo{font-size:15px!important}
  .navbar .logo span{max-width:150px}
  .navbar .logo img{height:31px!important}
  .container{padding-left:12px!important;padding-right:12px!important}
  .hero{padding-left:12px!important;padding-right:12px!important}
  .pagination a,.pagination span{padding:8px 10px!important}
}

/* Homepage: safe responsive overrides for very small screens */
@media (max-width: 640px){
  header .nav{height:66px!important;gap:10px!important}
  header .brand{font-size:19px!important;letter-spacing:-.35px!important;min-width:0}
  header .brand i{width:34px!important;height:34px!important;border-radius:10px!important;flex:0 0 34px}
  header .menu-toggle{flex:0 0 44px}
  .announcement .container{gap:8px!important;text-align:center;justify-content:center}
  .announcement a{white-space:nowrap}
  .slide,.slide-content{height:auto!important;min-height:570px!important}
  .hero-copy{padding:58px 0 92px!important;max-width:100%!important}
  .hero h1{font-size:clamp(34px,11vw,48px)!important;line-height:1.02!important;letter-spacing:-1.4px!important;overflow-wrap:anywhere}
  .hero p{font-size:15px!important;line-height:1.65!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;max-width:360px}
  .hero-actions .btn{width:100%!important;min-height:48px}
  .slider-nav{bottom:24px!important}
  .trust .container{gap:0!important}
  .trust-item{min-height:auto!important;padding:18px 2px!important}
  .stats-wrap{width:calc(100% - 24px)!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat{min-width:0;padding:20px 8px!important}
  .stat strong{font-size:28px!important;line-height:1.1}
  .stat span{font-size:11px!important;line-height:1.35;display:block;margin-top:6px}
  section{padding:58px 0!important}
  .section-head{gap:12px!important;margin-bottom:26px!important}
  .section-head h2{font-size:clamp(30px,9vw,40px)!important;letter-spacing:-1px!important}
  .section-head p{font-size:14px!important}
  .why-panel{padding:23px!important;border-radius:20px!important}
  .why-panel h2{font-size:32px!important}
  .insight-card{align-items:flex-start!important;padding:17px!important;gap:13px!important}
  .insight-num{min-width:58px!important;width:58px!important;height:58px!important;border-radius:14px!important;font-size:18px!important}
  .cta-box{padding:30px 20px!important;border-radius:20px!important}
  .cta-box h2{font-size:30px!important}
  .footer-grid{gap:24px!important}
  .float-whatsapp,.back-top{width:48px!important;height:48px!important;right:12px!important}
}

@media (max-width: 360px){
  .stats{grid-template-columns:1fr!important}
  .stat{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .stat:last-child{border-bottom:0!important}
  .slide,.slide-content{min-height:610px!important}
  .hero h1{font-size:34px!important}
}

/* Auth/account/article pages */
@media (max-width: 600px){
  .wrap{width:calc(100% - 24px)!important;margin:22px auto!important;padding-left:0!important;padding-right:0!important}
  .card{border-radius:16px!important}
  .content{padding:20px!important}
  .content h1{font-size:30px!important;letter-spacing:-.5px}
  .content p{font-size:16px!important;line-height:1.7!important}
  .top{gap:12px;flex-wrap:wrap}
  .head{align-items:flex-start!important}
  .actions .btn{flex:1 1 100%;text-align:center}
}

/* Touch devices: remove hover-only movement that can feel jumpy */
@media (hover:none) and (pointer:coarse){
  .product-card:hover,.service-card:hover,.article-card:hover,.portfolio-card:hover,.card:hover{transform:none!important}
  a,button,input,select,textarea{touch-action:manipulation}
}