/* ==========================================================
   JAQUET ENTERPRISES — mobile & tablet layer
   Loaded last on every page so it overrides page styles.
   ========================================================== */

/* ---------- Global safety ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:hidden; }
@supports (overflow:clip){ html,body{ overflow-x:clip; } }
img,video,svg{ max-width:100%; }
img{ height:auto; }
*,*::before,*::after{ box-sizing:border-box; }
a,button{ -webkit-tap-highlight-color:rgba(0,0,0,.08); touch-action:manipulation; }

/* ---------- Top contact bar ---------- */
@media (max-width:900px){
  .top-bar-inner{ padding:8px 16px !important; gap:6px 16px !important; justify-content:space-between; }
  .top-bar-item{ min-height:30px; font-size:11.5px; min-width:0; }
  .top-bar-item span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:420px){
  .top-bar-inner{ gap:4px 10px !important; }
  .top-bar-item{ font-size:11px; }
}

/* ---------- Layout ---------- */
@media (max-width:900px){
  .wrap{ padding-left:20px !important; padding-right:20px !important; }
  section{ padding-top:52px; padding-bottom:52px; }
  h2{ font-size:clamp(26px,7vw,36px); line-height:1.1; }
  h3{ font-size:18px; }
  .section-head{ flex-direction:column; align-items:flex-start !important; gap:14px; margin-bottom:28px; }

  /* page hero (inner pages) – nav is no longer floating over it */
  .page-hero{ padding:44px 0 40px !important; }
  .page-hero h1{ font-size:clamp(32px,9.5vw,52px) !important; letter-spacing:-1px; overflow-wrap:break-word; hyphens:auto; }
  .page-hero p{ font-size:16px !important; margin-top:14px !important; }

  /* split layouts */
  .split{ grid-template-columns:1fr !important; gap:28px !important; }
  .split img{ height:auto !important; aspect-ratio:4/3; max-height:420px; }

  /* grids */
  .catalog-grid,.workflow-grid,.chip-grid,.grid-3{ grid-template-columns:1fr !important; gap:16px !important; }
  .product-grid,.featured-grid,.grid-4,.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
  .info-card{ min-height:0 !important; padding:22px !important; }
  .product-tile img,.blog-tile img{ height:auto !important; aspect-ratio:4/5; object-fit:cover; }
  .product-tile > div,.blog-tile > div{ padding:14px !important; }
  .product-tile h3,.blog-tile h3{ font-size:16px; }
  .product-tile p,.blog-tile p{ font-size:13px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .steps{ grid-template-columns:1fr !important; }
}
@media (max-width:520px){
  .blog-grid,.blog-tile-grid{ grid-template-columns:1fr !important; }
  .grid-2{ grid-template-columns:1fr !important; }
  .pill{ padding:12px 14px; min-height:44px; display:inline-flex; align-items:center; }
}

/* ---------- Home hero ---------- */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr !important; min-height:0 !important; height:auto !important; }
  .hero-copy{ order:1 !important; padding:36px 20px 40px !important; }
  .hero-media{ order:2 !important; min-height:0 !important; height:auto; aspect-ratio:4/3; }
  .hero-media img{ height:100%; }
  .hero-media::before{ display:none !important; }
  .hero-copy h1{
    font-size:clamp(34px,11.2vw,64px) !important; letter-spacing:-1.2px !important;
    line-height:.95 !important; overflow-wrap:anywhere;
  }
  .hero-copy .sub{ font-size:16px !important; margin-top:18px; }
  .hero-copy .eyebrow{ font-size:11px; letter-spacing:2px; flex-wrap:wrap; }
  .cta-row{ flex-direction:column; gap:12px !important; margin-top:26px !important; width:100%; }
  .cta-row .btn,.btn{ min-width:0 !important; width:100% !important; padding:18px 22px; min-height:54px; }
  .scroll-note{ display:none; }
}

/* ---------- Forms ---------- */
@media (max-width:900px){
  input,select,textarea{ font-size:16px !important; min-height:48px; width:100%; max-width:100%; }
  textarea{ min-height:120px; }
  .form-row{ grid-template-columns:1fr !important; gap:0 !important; }
  .form-field{ margin-bottom:16px; }
  button,.btn,input[type=submit]{ min-height:48px; }
  form .btn,form button{ width:100%; justify-content:center; }
}

/* ---------- Product, search, account ---------- */
@media (max-width:900px){
  .product-layout,.product-detail,.product-page,.pdp{ grid-template-columns:1fr !important; gap:24px !important; }
  .tab-btns,.tabs{ display:flex; overflow-x:auto; gap:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tab-btn{ white-space:nowrap; flex:0 0 auto; min-height:44px; }
  .results-label{ font-size:12px; }
}

/* ---------- Footer ---------- */
@media (max-width:900px){
  footer{ padding-top:48px; }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:32px 20px !important; }
  .footer-grid > :first-child{ grid-column:1 / -1; }
  .footer-grid a{ display:block; padding:7px 0; min-height:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start !important; gap:18px; }
  .social-icons{ display:flex; gap:10px; flex-wrap:wrap; }
  .social-icons a{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
}

/* ---------- Floating toast sits above phone home bar ---------- */
#jacquet-toast{ max-width:calc(100vw - 32px); text-align:center; bottom:calc(20px + env(safe-area-inset-bottom)) !important; }

@media (prefers-reduced-motion:reduce){
  .nav-links,.nav-links.open{ transition:none; }
}