/* =========================================================
   Print & Pack Solution — mobile / tablet layer
   Linked LAST on every page so it overrides the page sheets.
   Everything is inside max-width / touch media queries, so the
   desktop layout (above 900px) is unchanged.
   ========================================================= */

/* ---------- Tablet & below (<= 900px) ---------- */
@media (max-width:900px) {
  body{background-attachment:scroll;}            /* iOS ignores "fixed" and stutters */
  .wrap{padding-left:20px; padding-right:20px;}

  /* Header: scale the 600px logo down, show a hamburger, drop-down menu */
  .topbar{position:relative; padding:12px 20px; gap:12px;}
  .logo-img{width:min(260px,62vw); height:auto;}
  .menu-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; padding:0; border-radius:10px; flex-shrink:0;
  }
  .menu-toggle span{display:block; width:22px; height:2px; background:var(--black); border-radius:2px; transition:transform .2s, opacity .2s;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  nav.nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:4px 20px 12px;
    background:#fff; border-top:1px solid var(--line); box-shadow:var(--shadow-sm);
  }
  nav.nav-links.open{display:flex;}
  nav.nav-links a{display:flex; align-items:center; min-height:48px; font-size:1rem; border-bottom:1px solid var(--line);}
  nav.nav-links a:last-child{border-bottom:0;}

  /* Machine viewer: let the page scroll vertically, drag sideways to rotate */
  .machine-viewer{touch-action:pan-y;}
}

/* ---------- Phones & small tablets (<= 700px) ---------- */
@media (max-width:700px) {
  .btn{min-height:44px; justify-content:center;}
  .hero-ctas .btn{flex:1 1 auto;}
  .stat-badge{left:12px; bottom:-18px; min-width:0; padding:14px 18px;}
  .stat-badge .num{font-size:1.5rem;}
  .hero-media{margin-bottom:24px;}

  .value-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .svc-card{padding:24px 20px;}

  .cta-strip{flex-direction:column; align-items:flex-start; padding:32px 24px; gap:20px;}
  .cta-strip .btn{width:100%;}

  /* Tables keep scrolling sideways inside their wrappers; tighten them up */
  .spec-table th, .spec-table td{padding:10px 12px; font-size:.86rem;}
  .compare-table th, .compare-table td{padding:10px 12px;}
  .spec-table-wrap, .compare-wrap{-webkit-overflow-scrolling:touch;}

  /* Forms: 16px stops iOS zooming in on focus; comfortable tap height */
  form.enquiry input, form.enquiry select, form.enquiry textarea{font-size:16px; min-height:46px;}
  form.enquiry textarea{min-height:110px;}
  form.enquiry button, form.enquiry .btn{width:100%; min-height:48px;}
  .filter-row button, .filter-row a{min-height:44px;}

  /* Footer */
  footer p{max-width:none;}
  .foot-map{aspect-ratio:4/3;}
  .foot-map iframe{width:100%;}
  .foot-bottom{flex-direction:column; gap:6px;}
  footer a{display:inline-flex; align-items:center; min-height:40px;}   /* comfortable tap height */
  footer ul{gap:0;}
  .foot-contact{gap:0 !important;}
  .val a{display:inline-block; padding:8px 0;}
  .breadcrumb a{display:inline-block; padding:12px 2px;}
  .breadcrumb{padding-top:8px;}
  .badge{font-size:.75rem;}

  .wa-float{width:52px; height:52px; right:16px; bottom:16px;}
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width:480px) {
  .value-grid{grid-template-columns:1fr;}
  .contact-panel{padding:28px 18px;}
  .quick-specs{grid-template-columns:1fr 1fr;}
}

/* ---------- Touch devices: no hover, so show what hover used to reveal ---------- */
@media (hover:none) {
  .video-arrow{opacity:1; pointer-events:auto; width:44px; height:44px;}
  .video-dot{position:relative;}
  .video-dot::after{content:""; position:absolute; inset:-14px;}   /* bigger tap area, same look */
  .model-card:hover, .svc-card:hover, .brand-card:hover{transform:none;}
}