/* ============================================================
   Utenr — Responsive Styles v5.0
   Sapphire & Amber Luxury — Mobile-Perfect
   超级漂亮大气 — 完美手机端适配
   Breakpoints: 1200 / 1024 / 768 / 480
   ============================================================ */

/* ============ LARGE TABLET (max-width: 1200px) ============ */
@media (max-width: 1200px) {
  .ut-container{padding:0 24px}
  .ut-hero-text h1{font-size:3.2rem}
  .ut-hero-grid{gap:44px}
  .ut-footer-grid{grid-template-columns:repeat(3,1fr);gap:38px}
  .ut-footer-brand{grid-column:1/-1}
  .ut-process-grid{grid-template-columns:repeat(3,1fr)}
  .ut-shipping-grid{grid-template-columns:repeat(2,1fr)}
  .ut-dealer-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============ TABLET (max-width: 1024px) ============ */
@media (max-width: 1024px) {
  :root{--section:72px}

  /* Header */
  .ut-header-top{display:none}

  /* Hero */
  .ut-hero{min-height:auto;padding:84px 0 64px}
  .ut-hero-grid{grid-template-columns:1fr;gap:50px;text-align:center}
  .ut-hero-text{max-width:100%}
  .ut-hero-text h1{font-size:2.9rem}
  .ut-hero-text>p{margin-left:auto;margin-right:auto;max-width:540px}
  .ut-hero-btns{justify-content:center}
  .ut-hero-stats{justify-content:center}
  .ut-hero-visual{order:-1;max-width:540px;margin:0 auto;width:100%}
  .ut-hero-visual-badge{display:none}

  /* Grids */
  .ut-features-grid{grid-template-columns:repeat(2,1fr)}
  .ut-cats-grid{grid-template-columns:repeat(2,1fr)}
  .ut-products-grid,.ut-products-grid-4{grid-template-columns:repeat(2,1fr);gap:22px}
  .ut-blog-grid{grid-template-columns:repeat(2,1fr)}
  .ut-cases-grid{grid-template-columns:repeat(2,1fr)}
  .ut-certs-grid{grid-template-columns:repeat(2,1fr)}
  .ut-testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .ut-factory-stats{grid-template-columns:repeat(2,1fr)}
  .ut-factory-gallery{grid-template-columns:repeat(2,1fr)}
  .ut-wholesale-grid{grid-template-columns:repeat(2,1fr)}
  .ut-wholesale-card.featured{transform:none}
  .ut-wholesale-card.featured:hover{transform:translateY(-6px)}
  .ut-shipping-grid{grid-template-columns:repeat(2,1fr)}
  .ut-dealer-grid{grid-template-columns:repeat(2,1fr)}
  .ut-mvv-grid{grid-template-columns:repeat(2,1fr)}

  /* Pages */
  .ut-about-grid{grid-template-columns:1fr;gap:44px}
  .ut-about-img{max-width:540px;margin:0 auto}
  .ut-about-img-badge{right:0;bottom:18px;padding:18px 24px}
  .ut-about-img-badge h4{font-size:1.8rem}
  .ut-rfq-grid{grid-template-columns:1fr;max-width:620px}
  .ut-contact-grid{grid-template-columns:1fr}
  .ut-pd-grid{grid-template-columns:1fr}
  .ut-pd-gallery{position:static;max-width:520px;margin:0 auto}
  .ut-process-grid{grid-template-columns:repeat(3,1fr)}
  .ut-section-head h2{font-size:var(--fs-3xl)}

  /* Timeline */
  .ut-timeline::before{left:26px}
  .ut-timeline-item,.ut-timeline-item:nth-child(even){flex-direction:row}
  .ut-timeline-dot{left:26px}
  .ut-timeline-content{width:calc(100% - 68px);margin-left:58px}
}

/* ============ MOBILE (max-width: 768px) ============ */
@media (max-width: 768px) {
  :root{--section:56px}

  .ut-container{padding:0 18px}

  /* Header */
  .ut-header-main{padding:8px 0}
  .ut-menu-toggle{display:flex}
  .ut-header-actions .ut-btn{display:none}

  /* Mobile Nav */
  .ut-nav{
    position:fixed;top:64px;left:0;right:0;bottom:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(22px);
    padding:22px 18px;overflow-y:auto;
    transform:translateX(100%);
    transition:transform var(--t);
    z-index:999;overscroll-behavior:contain;
  }
  .ut-nav.open{transform:translateX(0)}
  .ut-nav-list{flex-direction:column;gap:2px}
  .ut-nav-list>li>a{
    padding:16px 18px;font-size:1.02rem;
    border-radius:var(--r);justify-content:space-between;
    min-height:44px;
  }
  .ut-nav-list>li>a::after{display:none}
  .ut-nav-list>li.active>a,
  .ut-nav-list>li>a:hover{background:var(--brand-50)}
  .ut-nav-dropdown .ut-dropdown{
    position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:none;
    padding:4px 0 4px 24px;display:none;background:transparent;
  }
  .ut-nav-dropdown.open .ut-dropdown{display:block}
  .ut-nav-list>li>a i.fa-chevron-down{margin-left:auto;font-size:.7rem}

  /* Touch-friendly tap targets */
  .ut-nav-list a,.ut-dropdown a,.ut-footer-col a,.ut-btn{min-height:44px}

  /* Hero */
  .ut-hero{padding:52px 0 42px;min-height:auto}
  .ut-hero-text h1{font-size:2.3rem}
  .ut-hero-text>p{font-size:.9rem}
  .ut-hero-btns{flex-direction:column}
  .ut-hero-btns .ut-btn{width:100%;justify-content:center}
  .ut-hero-stats{gap:16px;flex-wrap:wrap;justify-content:center}
  .ut-hero-stat{text-align:center;min-width:110px}
  .ut-hero-stat h3{font-size:1.6rem}
  .ut-hero-visual-inner{aspect-ratio:1/1}

  /* Trust Strip */
  .ut-trust-strip{padding:26px 0}
  .ut-trust-strip .ut-container{justify-content:center;gap:16px}
  .ut-trust-item{flex:1 1 calc(50% - 16px);min-width:140px;justify-content:flex-start}

  /* Grids */
  .ut-features-grid{grid-template-columns:1fr;gap:16px}
  .ut-cats-grid{grid-template-columns:1fr}
  .ut-products-grid,.ut-products-grid-4{grid-template-columns:repeat(2,1fr);gap:16px}
  .ut-blog-grid{grid-template-columns:1fr}
  .ut-cases-grid{grid-template-columns:1fr}
  .ut-certs-grid{grid-template-columns:1fr}
  .ut-testimonials-grid{grid-template-columns:1fr}
  .ut-factory-stats{grid-template-columns:repeat(2,1fr)}
  .ut-factory-gallery{grid-template-columns:1fr}
  .ut-wholesale-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .ut-shipping-grid{grid-template-columns:repeat(2,1fr)}
  .ut-dealer-grid{grid-template-columns:1fr}
  .ut-mvv-grid{grid-template-columns:1fr;gap:16px}
  .ut-process-grid{grid-template-columns:repeat(2,1fr)}

  /* Section Head */
  .ut-section-head{margin-bottom:38px}
  .ut-section-head h2{font-size:1.9rem}
  .ut-section-head p{font-size:.9rem}
  .ut-about-text h1,.ut-rfq-info h1,.ut-contact-info h1{font-size:1.9rem}

  /* Forms */
  .ut-form-row{grid-template-columns:1fr}
  .ut-form-card{padding:30px 22px}
  .ut-rfq-grid{max-width:100%}

  /* CTA */
  .ut-cta{padding:60px 0}
  .ut-cta h2{font-size:1.9rem}
  .ut-cta-btns{flex-direction:column;align-items:center}
  .ut-cta-btns .ut-btn{width:100%;max-width:340px;min-height:50px}

  /* Product Cards */
  .ut-product-body{padding:18px 16px}
  .ut-product-body h3{font-size:.92rem}
  .ut-product-cta{padding:7px 16px;font-size:.72rem}

  /* Product Detail */
  .ut-pd-specs{grid-template-columns:1fr}
  .ut-pd-actions{flex-direction:column}
  .ut-pd-actions .ut-btn{width:100%}
  .ut-pd-info h1{font-size:1.65rem}
  .ut-pd-price-row{flex-direction:column;gap:4px;align-items:flex-start}

  /* About */
  .ut-about-img-badge{padding:16px 20px;right:0;bottom:10px}
  .ut-about-img-badge h4{font-size:1.6rem}

  /* Timeline */
  .ut-timeline{padding:22px 0}
  .ut-timeline::before{left:22px}
  .ut-timeline-dot{left:22px;width:14px;height:14px}
  .ut-timeline-content{width:calc(100% - 54px);margin-left:46px;padding:18px 20px}

  /* Blog Detail */
  .ut-blog-detail{padding:42px 0}
  .ut-blog-detail-header h1{font-size:1.65rem}

  /* QC Banner */
  .ut-qc-banner{flex-direction:column;text-align:center;padding:30px 24px}

  /* Footer */
  .ut-footer{padding:50px 0 0}
  .ut-footer-grid{grid-template-columns:repeat(2,1fr);gap:34px}
  .ut-footer-brand{grid-column:1/-1}
  .ut-footer-bottom{flex-direction:column;text-align:center}
  .ut-footer-cert{flex-direction:column;align-items:center;gap:10px}

  /* Mobile Nav */
  .ut-mobile-nav{display:flex}
  body{padding-bottom:72px}

  /* WA Float */
  .ut-wa-float{bottom:100px;right:18px;width:54px;height:54px;font-size:1.45rem}
  .ut-back-top{bottom:90px;right:18px;display:none}

  /* Toast */
  .ut-toast{bottom:100px;font-size:.8rem;padding:12px 24px}

  /* Pagination */
  .ut-pagination{flex-wrap:wrap}
  .ut-pagination a{min-width:36px;height:36px;font-size:.82rem}

  /* Client Wall */
  .ut-client-wall{gap:12px}
  .ut-client-wall span{padding:8px 18px;font-size:.95rem}

  /* Hero section enhanced mobile */
  .ut-hero-text{max-width:100%}
  .ut-hero-eyebrow{margin-bottom:20px;font-size:.7rem}

  /* Touch device enhancements */
  .ut-product-card:active{transform:scale(.98)}
  .ut-btn:active{transform:scale(.95)}
  .ut-cat-card:active,.ut-feature-card:active{transform:scale(.98)}
}

/* ============ SMALL MOBILE (max-width: 480px) ============ */
@media (max-width: 480px) {
  .ut-container{padding:0 14px}

  /* Hero */
  .ut-hero{padding:42px 0 32px}
  .ut-hero-text h1{font-size:1.85rem}
  .ut-hero-eyebrow{font-size:.68rem;padding:6px 14px}
  .ut-hero-stats{gap:10px}
  .ut-hero-stat h3{font-size:1.35rem}
  .ut-hero-stat p{font-size:.66rem}

  /* Products -> 1 column for small screens */
  .ut-products-grid,.ut-products-grid-4{grid-template-columns:1fr;gap:18px}

  /* Factory */
  .ut-factory-stats{grid-template-columns:1fr}
  .ut-process-grid{grid-template-columns:1fr}

  /* Forms */
  .ut-form-card{padding:24px 18px}
  .ut-btn-lg{padding:15px 26px;font-size:.9rem}

  /* Section */
  .ut-section-head h2{font-size:1.6rem}

  /* Footer */
  .ut-footer-grid{grid-template-columns:1fr;gap:30px}
  .ut-footer{padding:42px 0 0}

  /* Mobile Nav */
  .ut-mobile-nav a,.ut-mobile-nav button{font-size:.58rem}
  .ut-mobile-nav i{font-size:1rem}
  .ut-mnav-center div{width:46px;height:46px;font-size:1.05rem}
  .ut-mnav-center{top:-16px}

  /* Buttons */
  .ut-btn{padding:12px 24px}

  /* WA */
  .ut-wa-float{bottom:92px;right:14px;width:48px;height:48px;font-size:1.25rem}

  /* CTA */
  .ut-cta h2{font-size:1.55rem}

  /* Pagination */
  .ut-pagination{gap:4px}
  .ut-pagination a{min-width:32px;height:32px;font-size:.76rem;padding:0 6px}

  /* Blog */
  .ut-blog-body{padding:20px 18px}
  .ut-blog-body h3{font-size:.95rem}

  /* Trust */
  .ut-trust-strip .ut-container{gap:12px}
  .ut-trust-item{flex:1 1 100%}
}

/* ============ DESKTOP ENHANCED (min-width: 1400px) ============ */
@media (min-width: 1400px) {
  .ut-hero-text h1{font-size:4.5rem}
  .ut-hero-grid{gap:88px}
}

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

/* ============ PRINT ============ */
@media print{
  .ut-header,.ut-mobile-nav,.ut-wa-float,.ut-back-top,
  .ut-scroll-progress,.ut-cta,footer{display:none!important}
  body{background:#fff;color:#000}
  .ut-container{max-width:100%;padding:0}
}