html,body,#root{max-width:100%;overflow-x:hidden}img{max-width:100%}
@media (max-width:820px){.catalog-product-toolbar{grid-template-columns:1fr!important}}
@media (max-width:640px){
  body{font-size:13px;padding-bottom:88px}
  header{padding:10px 12px!important;gap:10px!important}
  header>div:first-child{gap:10px!important;min-width:0!important}
  header img[alt="MS Supplies"]{width:48px!important;height:48px!important;flex:0 0 48px!important}
  header>div:first-child>div:last-child>div:first-child{font-size:24px!important;letter-spacing:0!important;white-space:nowrap!important}
  header>div:first-child>div:last-child>div:last-child{font-size:10px!important;letter-spacing:1.2px!important;margin-top:3px!important}
  header button{padding:10px 12px!important;border-radius:12px!important;font-size:13px!important;white-space:nowrap!important}
  header>button{position:fixed!important;right:16px!important;bottom:16px!important;z-index:9998!important;padding:13px 18px!important;border-radius:999px!important;box-shadow:0 12px 28px rgba(15,23,42,.28)!important}
  header button span{min-width:20px!important;padding:2px 6px!important}
  section:has(img[src="/Banner-ms.png"]){width:100%!important;overflow:hidden!important}
  img[src="/Banner-ms.png"]{width:100%!important;height:auto!important;display:block!important}
  main{padding-left:14px!important;padding-right:14px!important}
  section[style*="padding: 50px 20px"]{padding:28px 0!important}
  div[style*="repeat(6, 1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  div[style*="repeat(auto-fill,minmax(220px,1fr))"],div[style*="repeat(auto-fill,minmax(210px,1fr))"],div[style*="repeat(auto-fill,minmax(250px,1fr))"],div[style*="repeat(auto-fill, minmax(220px, 1fr))"],div[style*="repeat(auto-fill, minmax(210px, 1fr))"],div[style*="repeat(auto-fill, minmax(250px, 1fr))"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(145px,42vw,190px)),1fr))!important;gap:clamp(10px,3vw,14px)!important}
  div[style*="height: 180px"],div[style*="height: 220px"]{height:130px!important}
  div[style*="min-height: 220px"]{min-height:170px!important}
  aside[style*="width: 260px"]{width:100%!important;min-height:auto!important;border-right:0!important;border-bottom:1px solid #ddd!important;display:flex!important;gap:8px!important;overflow-x:auto!important;padding:12px!important}
  aside[style*="width: 260px"] h2{display:none!important}
  aside[style*="width: 260px"] button{width:auto!important;flex:0 0 auto!important;white-space:nowrap!important;margin-bottom:0!important}
  aside[style*="width: 260px"]+main{width:100%!important}
  div[style*="display: flex"]:has(>aside[style*="width: 260px"]){display:block!important}
}
@media (max-width:340px){
  div[style*="repeat(6, 1fr)"],div[style*="repeat(auto-fill,minmax(220px,1fr))"],div[style*="repeat(auto-fill,minmax(210px,1fr))"],div[style*="repeat(auto-fill,minmax(250px,1fr))"],div[style*="repeat(auto-fill, minmax(220px, 1fr))"],div[style*="repeat(auto-fill, minmax(210px, 1fr))"],div[style*="repeat(auto-fill, minmax(250px, 1fr))"]{grid-template-columns:1fr!important}
}


/* Ajuste forte para celulares/tablets estreitos */
@media (max-width: 900px) {
  body { padding-bottom: 96px !important; }

  header > button,
  header button:last-child {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    left: auto !important;
    z-index: 99999 !important;
    padding: 13px 18px !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.32) !important;
  }

  main > section div[style*="display: grid"][style*="repeat(6"],
  main > section div[style*="display: grid"][style*="auto-fill"],
  main section div[style*="grid-template-columns: repeat(6"],
  main section div[style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(145px, 42vw, 190px)), 1fr)) !important;
    gap: clamp(10px, 3vw, 14px) !important;
  }

  .catalog-product-toolbar {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 340px) {
  main > section div[style*="display: grid"][style*="repeat(6"],
  main > section div[style*="display: grid"][style*="auto-fill"],
  main section div[style*="grid-template-columns: repeat(6"],
  main section div[style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
}

/* Reforco final: celulares podem renderizar com viewport largo */
@media (max-width: 640px) {
  body { padding-bottom: 104px !important; }

  header button {
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    left: auto !important;
    z-index: 2147483000 !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.35) !important;
  }

  main section div[style*="display: grid"][style*="repeat(6"],
  main section div[style*="display: grid"][style*="auto-fill"],
  main section div[style*="grid-template-columns: repeat(6"],
  main section div[style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(145px, 42vw, 190px)), 1fr)) !important;
    gap: clamp(10px, 3vw, 14px) !important;
  }
}

#root > div:not([style]) {
  display: none !important;
}