/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:0 20px;height:60px}
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;height:auto;overflow:visible}
  .hero-right{display:flex;align-items:flex-start;justify-content:center;overflow:visible;padding:0 20px 12px}
  .hero-carousel{top:0;transform:none;width:100%;max-width:min(440px,calc(100vw - 40px))}
  .new-arrivals-mobile{display:none}
  .hero-left{padding:28px 20px 18px;box-sizing:border-box;width:100%;overflow:hidden}
  .new-arrivals-mobile{overflow:hidden}
  .nam-track-wrap{overflow:hidden;margin:0 -20px;padding:0 20px}
  .nam-card{flex:0 0 100%;max-width:100%}
  .hero-desc{max-width:100%}
  .hero-ctas{flex-direction:column;gap:10px;margin-bottom:14px}
  .btn-red,.btn-outline-gold{width:100%;justify-content:center;padding:13px 20px;box-sizing:border-box}
  .aath-hero{grid-template-columns:1fr;padding:60px 22px;gap:36px}
  .aath-hero-img{display:none}
  .section{padding:60px 22px}
  .reviews-inner{padding:60px 22px}
  footer{padding:48px 22px 28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .finishes-bar{padding:18px 22px;gap:20px}
  .banner-strip{gap:20px;padding:12px 22px}
  .product-hero{grid-template-columns:1fr;padding:40px 20px;gap:32px}
  .edition-cards{grid-template-columns:1fr}
  .breadcrumb{padding:16px 20px}
  .related-section{padding:40px 20px 60px}
  .collection-card-wrap{grid-template-columns:1fr}
  h1.hero-title{font-size:clamp(2.4rem,8vw,3.6rem);word-break:break-word}
  .hero-tagline{font-size:1.1rem}
  .hero-eyebrow{font-size:0.6rem;letter-spacing:0.24em}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .hero-trust{flex-direction:column;gap:12px}
  .trust-item{gap:10px}
  .hero-left{padding:24px 16px 36px;box-sizing:border-box;width:100%;overflow:hidden}
  h1.hero-title{font-size:clamp(2rem,9vw,3rem);word-break:break-word;overflow-wrap:break-word}
  .hero-tagline{font-size:1rem}
  .hero-desc{font-size:0.82rem;line-height:1.9}
  .hero-eyebrow{font-size:0.58rem;letter-spacing:0.2em}
  .btn-red,.btn-outline-gold{width:100%;box-sizing:border-box;padding:13px 16px}
}

/* ── MOBILE OPTIMISATIONS ── */
@media(max-width:600px) {
  body{font-size:14px}

  /* Smooth page transitions */
  main,section,.con,div[style*="padding"]{transition:opacity .2s ease}

  /* Touch-friendly tap targets */
  a,button,.btn-red,.btn-outline-gold,.btn-order-sm,.btn-aathaar-order{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center
  }

  /* Nav compact on mobile */
  #nav{padding:0 16px;height:56px}
  .nav-links{display:none}

  /* Hero text sizing — controlled by responsive block above */

  /* Product grid single column */
  .prod-grid,.aath-grid{grid-template-columns:1fr}

  /* Product page hero stacked */
  .product-hero{grid-template-columns:1fr;gap:24px;padding:16px}

  /* Order form on mobile */
  .order-form-body.open{padding:14px}
  .ofi,.ofs,.fta{font-size:16px}  /* prevents iOS zoom on focus */

  /* Basket page */
  #basket-actions>div{grid-template-columns:1fr}
  #basket-actions>div>div:last-child{position:static}

  /* Modal full width — controlled by site.css */
  .modal{padding:20px;margin:0}

  /* Footer newsletter */
  #newsletter-form{flex-direction:column}
  #newsletter-form input,#newsletter-form button{width:100%}

  /* Sticky bars */
  #sticky-basket-bar{padding:10px 16px}
  #persistent-basket-bar a{padding:12px 16px}

  /* Cards */
  .prod-card,.aath-card{border-radius:0}

  /* Delivery page table */
  table.data{font-size:0.72rem}
  table.data td.label{width:90px}
}

/* ============================================================
   Mobile hero carousel + popup form restore
   Responsive owns mobile/tablet layout so these rules live here.
   ============================================================ */
@media(max-width:960px){
  .hero{
    grid-template-columns:1fr;
    height:auto;
    min-height:auto;
    overflow:visible;
  }

  .hero-right.hero-carousel-panel{
    display:flex!important;
    width:100%;
    align-items:flex-start;
    justify-content:center;
    overflow:visible;
    padding:0 16px 48px;
    box-sizing:border-box;
  }

  .hero-carousel{
    display:block!important;
    position:relative;
    top:0!important;
    transform:none!important;
    width:100%;
    max-width:min(440px,calc(100vw - 32px));
    aspect-ratio:1 / 1;
    overflow:clip;
  }

  .hero-carousel .hc-slide.active{
    display:block!important;
  }

  .hero-carousel .hc-img-wrap,
  .hero-carousel .hc-img-wrap img{
    width:100%;
    height:100%;
  }

  .new-arrivals-mobile{
    display:none!important;
  }
}

@media(max-width:700px){
  .modal-overlay.open{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-y:auto!important;
    padding:10px!important;
    padding-bottom:70px!important;
    box-sizing:border-box!important;
  }

  .modal-overlay.open .modal,
  .modal{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:22px 16px 24px!important;
    max-height:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  .modal-title{
    font-size:1.35rem;
    padding-right:54px;
  }

  .modal-sub{
    font-size:.82rem;
    line-height:1.65;
    margin-bottom:20px;
  }

  .modal-x{
    top:10px;
    right:10px;
  }

  .modal-overlay .ofg,
  .modal-overlay .fg{
    margin-bottom:12px!important;
  }

  .modal-overlay .ofi,
  .modal-overlay .ofs,
  .modal-overlay .ofta,
  .modal-overlay .fi,
  .modal-overlay .fs,
  .modal-overlay .fta{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
    box-sizing:border-box!important;
  }

  .modal-overlay .dynamic-personalisation-rows,
  .modal-overlay .modal-rows-container{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .modal-overlay .odyn-item,
  .modal-overlay .dyn-item{
    width:100%!important;
    max-width:100%!important;
    padding:12px!important;
    box-sizing:border-box!important;
  }

  .modal .product-action-row,
  .modal .modal-action-row{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    align-items:stretch!important;
  }

  .modal .product-action-row .btn-add-basket,
  .modal .modal-action-row .btn-add-basket,
  .modal .btn-add-basket{
    width:100%!important;
    flex:unset!important;
    min-height:44px!important;
    box-sizing:border-box!important;
  }
}