/* v112 mobile-first UX pass: drawer category nav, readable carousel, single-column cards, compact RFQ, fixed WhatsApp */
:root{
  --v112-blue:#18324a;
  --v112-green:#18b957;
  --v112-line:#dfe5eb;
  --v112-bg:#f4f6f8;
  --v112-text:#26313c;
}

.mobile-category-toggle,
.mobile-category-backdrop{
  display:none;
}

.rail-btn.whatsapp{
  touch-action:manipulation;
}

@media (max-width: 780px){
  html{
    -webkit-text-size-adjust:100%;
    scroll-padding-bottom:88px;
  }

  body{
    background:var(--v112-bg);
  }

  .station{
    width:100% !important;
    min-height:100dvh !important;
    overflow-x:hidden !important;
  }

  .site-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1200 !important;
  }

  .top-contact-bar{
    display:none !important;
  }

  .topbar-inner{
    min-height:58px !important;
    padding:8px 12px !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  .topbar-brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    font-size:14px !important;
  }

  .topbar-brand span:last-child{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .mobile-menu-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:52px !important;
    min-height:44px !important;
    padding:0 12px !important;
    border-radius:14px !important;
    font-weight:800 !important;
    touch-action:manipulation !important;
  }

  .topbar-wa{
    min-height:44px !important;
    padding:0 12px !important;
    border-radius:14px !important;
    white-space:nowrap !important;
  }

  .global-lang-switch{
    display:none !important;
  }

  .topbar-search{
    display:none !important;
  }

  .site-topbar.mobile-open .topbar-search{
    display:flex !important;
    order:10 !important;
    width:100% !important;
  }

  .site-topbar.mobile-open .topbar-search input{
    min-height:46px !important;
    font-size:16px !important;
  }

  .site-topbar.mobile-open .topbar-nav{
    max-height:min(58vh, 420px) !important;
    overflow:auto !important;
  }

  .trust-carousel{
    height:auto !important;
    min-height:0 !important;
    padding:10px 12px 14px !important;
  }

  .hero-card{
    grid-template-columns:1fr !important;
    gap:10px !important;
    min-height:0 !important;
    padding:0 !important;
  }

  .hero-visual{
    width:100% !important;
    aspect-ratio:16/9 !important;
    max-height:190px !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }

  .hero-visual img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .hero-copy{
    width:100% !important;
    padding:0 !important;
  }

  .hero-copy span{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .hero-copy h1,
  .hero-copy h2{
    font-size:clamp(22px, 7vw, 30px) !important;
    line-height:1.08 !important;
    margin:6px 0 !important;
    max-width:100% !important;
  }

  .hero-copy p{
    font-size:13px !important;
    line-height:1.45 !important;
    max-width:100% !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .catalog-cta{
    min-height:44px !important;
    padding:0 14px !important;
    font-size:14px !important;
  }

  .carousel-controls{
    right:12px !important;
    bottom:10px !important;
    transform:scale(.88) !important;
    transform-origin:right bottom !important;
  }

  .main-workspace{
    display:block !important;
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:12px 12px 96px !important;
  }

  .mobile-category-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:50px !important;
    margin:0 0 12px !important;
    border:1px solid var(--v112-line) !important;
    border-radius:16px !important;
    background:#fff !important;
    color:var(--v112-blue) !important;
    font-weight:900 !important;
    box-shadow:0 8px 18px rgba(24,50,74,.08) !important;
    touch-action:manipulation !important;
  }

  .mobile-category-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:1298;
    background:rgba(13,23,33,.36);
    backdrop-filter:blur(2px);
  }

  .left-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    z-index:1299 !important;
    width:min(86vw, 340px) !important;
    height:100dvh !important;
    max-height:none !important;
    overflow:auto !important;
    padding:14px !important;
    background:#fff !important;
    border-right:1px solid var(--v112-line) !important;
    box-shadow:18px 0 40px rgba(13,23,33,.22) !important;
    transform:translateX(-104%) !important;
    transition:transform .18s ease !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.mobile-category-open .left-nav{
    transform:translateX(0) !important;
  }

  body.mobile-category-open{
    overflow:hidden !important;
  }

  .nav-brand{
    margin-bottom:12px !important;
  }

  .side-accordion-item summary{
    min-height:50px !important;
    padding:10px 12px !important;
    font-size:15px !important;
    touch-action:manipulation !important;
  }

  .side-sub-links a{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    font-size:14px !important;
  }

  .side-submit-purchase-list{
    position:sticky !important;
    bottom:8px !important;
    min-height:50px !important;
    width:100% !important;
    font-size:15px !important;
    z-index:2 !important;
  }

  .preview-panel{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .preview-head,
  .company-intro-strip,
  .catalog-workbench,
  .sample-hub,
  .home-service-panel,
  .central-rfq-panel,
  .home-trust-panel,
  .listing-compliance-panel{
    border-radius:18px !important;
    margin-bottom:14px !important;
    padding:16px !important;
  }

  .preview-head h2,
  .company-intro-copy h3,
  .bench-head h3,
  .sample-head h3,
  .home-section-head h3,
  .central-rfq-copy h3{
    font-size:22px !important;
    line-height:1.18 !important;
  }

  .preview-head p,
  .company-intro-copy p,
  .bench-head p,
  .sample-head p,
  .home-section-head p,
  .central-rfq-copy p{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .company-module-grid,
  .industry-entry-grid,
  .service-grid,
  .trust-proof-grid,
  .policy-grid,
  .compliance-grid,
  .industry-sample-groups{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .company-module-grid article,
  .industry-entry-grid article,
  .service-grid article,
  .sample-group,
  .trust-proof-grid article,
  .policy-card,
  .compliance-card{
    min-width:0 !important;
    padding:12px !important;
  }

  .sample-mini-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .sample-mini-grid button,
  .industry-entry-grid article{
    min-height:64px !important;
  }

  .sample-mini-grid img,
  .industry-entry-grid img,
  .company-module-grid img,
  .service-grid img{
    width:64px !important;
    height:64px !important;
    aspect-ratio:1/1 !important;
    object-fit:contain !important;
    flex:0 0 64px !important;
  }

  .catalog-controls{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  .catalog-controls input,
  .catalog-controls select,
  .catalog-controls button{
    width:100% !important;
    min-height:46px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }

  .catalog-grid,
  #catalogGrid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .inline-product-card,
  .product-card{
    display:grid !important;
    grid-template-columns:96px 1fr !important;
    gap:12px !important;
    padding:12px !important;
    min-height:132px !important;
    border-radius:16px !important;
  }

  .inline-product-card figure,
  .product-card figure{
    width:96px !important;
    height:96px !important;
    min-height:96px !important;
    aspect-ratio:1/1 !important;
    margin:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }

  .inline-product-card img,
  .product-card img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    padding:6px !important;
  }

  .inline-product-card h4,
  .product-card h4{
    font-size:15px !important;
    line-height:1.25 !important;
    margin:0 0 4px !important;
  }

  .inline-product-card p,
  .inline-product-card small,
  .product-card p,
  .product-card small{
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .inline-product-card button,
  .inline-product-card a,
  .product-card button,
  .product-card a{
    min-height:38px !important;
    font-size:12px !important;
  }

  .central-rfq-panel{
    scroll-margin-top:72px !important;
  }

  .central-rfq-form{
    gap:10px !important;
  }

  .rfq-form-grid{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  .rfq-form-grid label,
  .rfq-full,
  .rfq-upload{
    font-size:13px !important;
    gap:5px !important;
  }

  .rfq-form-grid input,
  .rfq-form-grid select,
  .rfq-full textarea,
  .rfq-upload input{
    min-height:46px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }

  .rfq-form-grid label:has(input[name="email"]){
    display:none !important;
  }

  .rfq-full textarea{
    min-height:88px !important;
  }

  .rfq-upload{
    padding:12px !important;
    border:1px dashed var(--v112-line) !important;
    border-radius:16px !important;
    background:#fff !important;
  }

  .rfq-upload small{
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .central-rfq-button{
    width:100% !important;
    min-height:50px !important;
    font-size:15px !important;
    border-radius:16px !important;
  }

  .floating-rail{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    z-index:1400 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    width:auto !important;
    pointer-events:none !important;
  }

  .floating-rail .rail-btn{
    display:none !important;
  }

  .floating-rail .rail-btn.whatsapp{
    display:flex !important;
    pointer-events:auto !important;
    min-height:54px !important;
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:18px !important;
    background:var(--v112-green) !important;
    color:#fff !important;
    font-weight:900 !important;
    box-shadow:0 14px 30px rgba(24,185,87,.28) !important;
  }

  .floating-wa-hint{
    bottom:66px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  .seo-footer{
    padding-bottom:82px !important;
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:0 !important;
  }

  .seo-footer p{
    display:none !important;
  }

  .footer-actions,
  .footer-links{
    justify-content:center !important;
  }
}

@media (max-width: 420px){
  .hero-visual{
    max-height:160px !important;
  }

  .hero-copy h1,
  .hero-copy h2{
    font-size:22px !important;
  }

  .inline-product-card,
  .product-card{
    grid-template-columns:88px 1fr !important;
  }

  .inline-product-card figure,
  .product-card figure{
    width:88px !important;
    height:88px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .left-nav{
    transition:none !important;
  }
}