/* 710 BEATS — mobile/tablet responsive layer */
@media (max-width: 900px){
  .wrap{width:min(100% - 32px,720px)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .steps{grid-template-columns:1fr;gap:14px}
  .how-head,.section-head{display:block}
  .how-head p{max-width:none;margin-top:12px}
  .section-head h2,.how-head h2{font-size:48px}
  .newsletter-inner{padding:32px;display:block}
  .sub{margin:22px 0 0;max-width:none}
}

@media (max-width: 650px){
  html{font-size:16px}
  body{overflow-x:hidden}
  .wrap{width:calc(100% - 24px)}

  .top{height:auto;min-height:64px}
  .nav{min-height:64px;height:auto;gap:9px;padding:9px 0;flex-wrap:wrap}
  .brand{gap:8px;min-width:0}
  .logo{width:40px;height:40px;border-radius:10px;flex:0 0 40px}
  .brand b{font-size:20px}
  .brand small{font-size:6px;letter-spacing:2px}
  .search{display:none}
  .links{order:10;width:100%;display:flex;gap:18px;overflow-x:auto;white-space:nowrap;padding:2px 2px 5px;scrollbar-width:none;font-size:9px}
  .links::-webkit-scrollbar{display:none}
  .login{padding:9px 12px;font-size:9px}
  .account-link{padding:8px 10px!important;font-size:8px!important}
  .cart{font-size:20px;margin-left:auto}

  .hero{min-height:690px;height:auto!important}
  .hero-copy{width:100%!important;padding:62px 0 42px!important}
  .hero-art{width:100%!important;height:100%!important;opacity:.42!important;background-size:cover!important;background-position:center!important}
  .hero-art:before,.hero-art:after,.hero-art .person{background-size:cover!important;background-position:center!important}
  .hero h1{font-size:clamp(68px,22vw,92px)!important;line-height:.78;margin:14px 0 8px}
  .marker{font-size:27px;line-height:1.05;margin:8px 0 12px}
  .hero p{font-size:13px;line-height:1.55;max-width:100%}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
  .btn{padding:13px 10px;text-align:center;font-size:9px}
  .hero-trust{gap:8px 14px;margin-top:20px;font-size:8px}
  .hero-trust b{font-size:16px}

  .section{padding:48px 0}
  .section-head{margin-bottom:20px}
  .section-head h2,.how-head h2{font-size:46px}
  .section-head p{font-size:10px;line-height:1.5}
  .see-all{display:inline-block;margin-top:10px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-bottom:18px;padding-bottom:4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:9px 15px;font-size:9px}

  .grid{grid-template-columns:1fr;gap:14px}
  .card{border-radius:15px}
  .cover{height:220px}
  .ct{font-size:34px}
  .play{width:46px;height:46px}
  .body{padding:14px}
  .title{font-size:15px}
  .meta{flex-wrap:wrap;margin:10px 0}
  .price{font-size:17px}
  .card-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%}
  .buy,.add-cart{width:100%;min-width:0;min-height:48px;padding:10px 8px;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:visible}
  .buy{height:auto}

  .features{padding:55px 0}
  .feature-title{margin-bottom:28px}
  .feature-title .mini{font-size:19px}
  .feature-title h2{font-size:48px;line-height:.9}
  .feature-title p{font-size:11px;line-height:1.55}
  .benefits{grid-template-columns:1fr;gap:12px}
  .benefit{min-height:0;padding:20px}
  .benefit h3{font-size:27px;margin:18px 0 8px}

  .how{padding:55px 0}
  .how-head{margin-bottom:24px}
  .how-head p{font-size:11px}
  .steps{grid-template-columns:1fr;gap:12px}
  .step{min-height:0;padding:24px}
  .step-num{font-size:52px}
  .step h3{font-size:28px;margin:18px 0 8px}
  .step-arrow{display:none}

  .newsletter{border-radius:16px}
  .newsletter-inner{padding:26px 20px}
  .newsletter h2{font-size:40px;line-height:.95}
  .newsletter p{font-size:10px;line-height:1.5}
  .sub{display:grid;grid-template-columns:1fr;gap:8px}
  .sub input{min-width:0;width:100%}

  footer .wrap{width:calc(100% - 24px)}
  footer{overflow:hidden}
  footer .grid{grid-template-columns:1fr!important}

  .modal,.auth-modal,.checkout-modal{padding:12px!important}
  .modal-content,.auth-box,.checkout-box{width:min(100%,460px)!important;max-width:calc(100vw - 24px)!important;margin:10px auto!important}
  input,select,textarea,button{max-width:100%}
}

@media (max-width: 380px){
  .wrap{width:calc(100% - 18px)}
  .hero h1{font-size:64px!important}
  .marker{font-size:24px}
  .actions{grid-template-columns:1fr}
  .section-head h2,.how-head h2,.feature-title h2{font-size:40px}
  .cover{height:200px}
  .card-actions{grid-template-columns:1fr;gap:9px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* 710 BEATS MOBILE OVERRIDE 2026-09-25 */
@media (max-width: 650px){
  body{overflow-x:hidden}
  .top{position:relative!important}
  .nav{min-height:64px!important;height:auto!important;padding:8px 0!important;gap:8px!important}
  .brand{flex:1 1 auto;min-width:0}
  .brand b{font-size:18px!important}
  .brand small{font-size:5.5px!important;letter-spacing:1.6px!important}
  .logo{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .cart{margin-left:0!important;flex:0 0 auto}
  .login{flex:0 0 auto}
  .links{order:10;width:100%!important;display:flex!important;overflow-x:auto!important;gap:16px!important}

  .hero{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .hero-art{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    flex:0 0 auto!important;
    opacity:1!important;
    background:#020509!important;
    order:0!important;
  }
  .hero-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#020509!important;
  }
  .hero .wrap{
    position:relative!important;
    width:100%!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
    order:1!important;
    background:#020509!important;
  }
  .hero-copy{
    width:100%!important;
    padding:32px 0 38px!important;
    box-sizing:border-box!important;
  }
  .hero .eyebrow{font-size:8px!important;letter-spacing:1.5px!important}
  .hero h1{
    font-size:clamp(50px,15.5vw,72px)!important;
    line-height:.82!important;
    letter-spacing:.5px!important;
    margin:12px 0 12px!important;
  }
  .marker{font-size:24px!important;line-height:1!important;margin:8px 0 14px!important}
  .hero p{font-size:12px!important;line-height:1.55!important;max-width:100%!important}
  .hero .actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:18px!important;
  }
  .hero .btn{width:100%!important;min-height:46px!important;padding:12px 10px!important}
  .hero-trust{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px 12px!important;
    margin-top:20px!important;
    font-size:8px!important;
  }
  .hero-trust span{min-width:0!important;white-space:normal!important}
  .hero .wrap:before{display:none!important}

  .section,.features,.how{padding:44px 0!important}
  .section-head h2,.how-head h2{font-size:42px!important;line-height:.9!important}
  .section-head p,.how-head p{font-size:10px!important;line-height:1.5!important}
  .chips{overflow-x:auto!important;flex-wrap:nowrap!important}
  .grid{grid-template-columns:1fr!important}
  .benefits,.steps{grid-template-columns:1fr!important}
  .card{min-width:0!important}
  .cover{height:210px!important}
  .card-actions{grid-template-columns:1fr 1fr!important}
  .buy,.add-cart{min-height:46px!important;font-size:9px!important}
  .feature-title h2{font-size:44px!important;line-height:.9!important}
  .benefit h3{font-size:25px!important}
  .step h3{font-size:26px!important}
  .footer .fnav{display:flex!important;flex-wrap:wrap!important;gap:10px 16px!important}
}
@media (max-width:650px){
  #heroComments.hero-comments{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:calc(100% - 24px)!important;
    max-width:620px!important;
    margin:34px auto 34px!important;
    order:initial!important;
  }
  #catalogPagination.catalog-pagination{
    display:flex!important;
    width:100%!important;
    justify-content:center!important;
    align-items:center!important;
    margin:28px 0 10px!important;
    padding:8px 0!important;
    position:relative!important;
    z-index:2!important;
  }
  #catalogPagination .catalog-page{
    min-width:40px!important;
    height:40px!important;
    font-size:10px!important;
  }
}

@media (max-width: 380px){
  .hero .wrap{padding:0 14px!important}
  .hero-copy{padding:28px 0 32px!important}
  .hero h1{font-size:clamp(45px,14.8vw,62px)!important}
  .marker{font-size:22px!important}
  .hero p{font-size:11px!important}
  .hero-trust{grid-template-columns:1fr!important}
  .card-actions{grid-template-columns:1fr!important}
}