/* ═══════════════════════════════════════════════
   RESPONSIVE — Loads LAST to override all component CSS
   ═══════════════════════════════════════════════ */

/* ─── Tablet (≤1200px) ─── */
@media(max-width:1200px){
  :root{--pad:40px}
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .coll-layout{grid-template-columns:220px 1fr}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* ─── Small Tablet (≤1024px) ─── */
@media(max-width:1024px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .why-us__grid{grid-template-columns:repeat(2,1fr)}
  .stats-bar__grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .how-works__grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .how-works__grid::before{display:none}
}

/* ─── Mobile (≤768px) ─── */
@media(max-width:768px){
  :root{--pad:20px}

  /* Nav */
  .nav__links{display:none}
  .nav__cta-btn{display:none}
  .nav__hamburger{display:flex}
  .nav__inner{height:52px}
  .nav__logo{font-size:22px}
  .nav__logo img{height:32px;max-width:140px}

  /* Section headings */
  .sec-head{margin-bottom:24px}
  .sec-head__title{font-size:22px;letter-spacing:0}
  .sec-head__tag{font-size:10px;letter-spacing:3px;margin-bottom:4px}
  .sec-head--line{padding-bottom:12px;flex-direction:column;align-items:flex-start;gap:12px}

  /* Hero */
  .hero{height:70vh;min-height:380px}
  .hero__title{font-size:28px;letter-spacing:2px;margin-bottom:12px}
  .hero__eyebrow{font-size:10px;letter-spacing:3px;margin-bottom:10px}
  .hero__desc{font-size:13px;margin-bottom:24px}
  .hero__actions{gap:8px}
  .hero__actions .btn{padding:12px 24px;font-size:11px;letter-spacing:1.5px}
  .hero__dot{width:24px}

  /* Marquee */
  .marquee__item{font-size:10px;padding:0 24px}

  /* Categories */
  .categories{padding:40px 0}
  .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cat-card__title{font-size:16px}
  .cat-card__sub{font-size:10px}

  /* Products section */
  .products-sec{padding:40px 0}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .products-sec__tabs{display:none}
  .products-sec__more{margin-top:24px}

  /* Product card */
  .prod-card__body{padding:10px 8px}
  .prod-card__name{font-size:12px}
  .prod-card__price{font-size:13px}
  .prod-card__sku{font-size:10px;margin-bottom:4px}
  .prod-card__moq{font-size:10px}

  /* Why Us */
  .why-us{padding:40px 0}
  .why-us__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .why-us__card{padding:20px 16px}
  .why-us__card h4{font-size:14px}
  .why-us__card p{font-size:12px}

  /* How It Works */
  .how-works{padding:40px 0}
  .how-works__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .how-works__step h4{font-size:14px}
  .how-works__step p{font-size:12px}
  .how-works__num{width:36px;height:36px;font-size:16px}

  /* Stats */
  .stats-bar{padding:32px 0}
  .stats-bar__grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .stats-bar__item h3{font-size:28px}
  .stats-bar__item p{font-size:11px}

  /* Clients */
  .clients{padding:32px 0}
  .clients__label{font-size:9px;letter-spacing:3px;margin-bottom:16px}
  .clients__row{gap:24px}
  .clients__item{width:60px;height:24px}

  /* News */
  .news-sec{padding:40px 0}
  .news-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .news-card__body h4{font-size:13px}
  .news-card__body p{font-size:11px}
  .news-card__date{font-size:10px;padding:4px 8px}

  /* CTA */
  .cta-sec{padding:40px 0}
  .cta-sec h2{font-size:20px;letter-spacing:1px}
  .cta-sec p{font-size:13px;margin-bottom:20px}
  .cta-sec__btns{flex-direction:column;gap:8px;align-items:center}

  /* Collection page */
  .coll-hero{padding:28px 0 20px}
  .coll-hero h1{font-size:24px;letter-spacing:3px}
  .coll-layout{grid-template-columns:1fr}
  .coll-layout>aside{display:none}
  .coll-toolbar{gap:8px;flex-wrap:wrap}
  .coll-toolbar__filter-btn{display:flex}
  .coll-toolbar__info{font-size:11px;flex:1}
  .coll-toolbar__sort{font-size:12px;padding:6px 8px}
  .coll-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  /* Detail page */
  .detail-layout{grid-template-columns:1fr;gap:20px}
  .detail-gallery{grid-template-columns:1fr}
  .detail-thumbs{flex-direction:row;overflow-x:auto;gap:6px;order:2;max-height:none;scroll-snap-type:x mandatory}
  .detail-thumb{width:56px;height:56px;flex-shrink:0;scroll-snap-align:start}
  .detail-info h1{font-size:20px}
  .detail-sku{font-size:10px}
  .detail-colors label{font-size:12px}
  .detail-sizes label{font-size:12px}
  .detail-price h4{font-size:13px}
  .price-table{font-size:12px}
  .price-table th,.price-table td{padding:8px 10px}
  .detail-actions{flex-direction:column;gap:8px}
  .detail-actions .btn{width:100%;justify-content:center}
  .detail-meta{font-size:10px;gap:12px}
  .consult-box{padding:16px}
  .consult-box h4{font-size:14px}
  .consult-box p{font-size:12px}
  .detail-tabs__nav{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0}
  .detail-tabs__btn{white-space:nowrap;padding:10px 16px;font-size:10px;letter-spacing:1.5px}
  .tab-panel{font-size:13px}
  .spec-table td{padding:7px 10px;font-size:12px}
  .related-sec h3{font-size:16px}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .detail-highlights{padding:12px 14px}
  .detail-highlights h4{font-size:13px}
  .detail-highlights li{font-size:12px}

  /* Blog */
  .blog-hero{padding:28px 0 20px}
  .blog-hero h1{font-size:24px}
  .blog-layout,.post-layout{grid-template-columns:1fr}
  .blog-layout>.blog-sidebar,.post-layout>.blog-sidebar{display:none}
  .blog-card{grid-template-columns:1fr}
  .blog-card__img{aspect-ratio:16/9}
  .blog-card__body h3{font-size:16px}
  .blog-card__body p{font-size:12px}
  .blog-card__meta{font-size:11px}

  /* Blog post detail */
  .post-hero h1{font-size:22px}
  .post-content{font-size:14px}
  .post-share{gap:8px}

  /* Footer */
  .footer{padding:40px 0 0}
  .footer__grid{grid-template-columns:1fr}
  .footer__grid>div{margin-bottom:20px}
  .footer__logo{font-size:24px}
  .footer__desc{font-size:12px}
  .footer__col h5{font-size:13px;margin-bottom:8px}
  .footer__col li{margin-bottom:4px}
  .footer__col a{font-size:12px}
  .footer__nl p{font-size:12px}
  .footer__bottom{padding:16px 0;font-size:11px;flex-direction:column;gap:8px;text-align:center}
  .footer__pay{justify-content:center}
  .footer__pay span{font-size:10px;padding:3px 8px}

  /* Inquiry modal */
  .inq-modal{width:95vw;max-height:90vh;padding:24px 20px;border-radius:12px}
  .inq-modal h3{font-size:18px}
  .inq-form input,.inq-form select,.inq-form textarea{font-size:14px;padding:10px 12px}
  .inq-form__row{grid-template-columns:1fr}

  /* Drawer */
  .drawer{width:min(280px,85vw)}

  /* General */
  .btn{padding:12px 24px;font-size:11px;letter-spacing:1.5px;border-radius:20px}
}

/* ─── Small Phone (≤480px) ─── */
@media(max-width:480px){
  :root{--pad:16px}

  .hero{height:60vh;min-height:320px}
  .hero__title{font-size:24px;letter-spacing:1px}
  .hero__desc{font-size:12px;max-width:320px}
  .hero__arrow{display:none}

  .cat-grid{grid-template-columns:1fr}
  .cat-card{min-height:140px}

  .products-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  .why-us__grid{grid-template-columns:1fr}
  .how-works__grid{grid-template-columns:1fr}

  .stats-bar__grid{grid-template-columns:1fr 1fr}
  .stats-bar__item h3{font-size:24px}

  .news-grid{grid-template-columns:1fr}
  .news-card__img{aspect-ratio:16/9}

  .coll-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  .detail-info h1{font-size:18px}

  .inq-modal{padding:20px 16px}
  .inq-modal h3{font-size:16px}
}

/* ─── Very Small Phone (≤360px) ─── */
@media(max-width:360px){
  :root{--pad:12px}
  .nav__inner{height:48px;padding:0 12px}
  .nav__logo{font-size:18px}
  .products-grid,.coll-grid{gap:8px}
  .prod-card__body{padding:8px 6px}
  .prod-card__name{font-size:11px}
  .hero__title{font-size:20px}
}