/* Site version selector: the existing mobile breakpoints remain intact. */
.site-header nav .mobile-menu-trigger { display:none; }
.site-header nav .nav-drawer { display:contents; }

/* CSS zoom scales text, spacing, icons and the entire layout without the
   broken scrolling/interaction coordinates produced by transform:scale(). */
html[data-site-version="phone"] body {
  zoom: 0.8;
}

html[data-site-version="phone"] .site-header nav {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:10px;
}
html[data-site-version="phone"] .site-header nav .mobile-menu-trigger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:92px;
  min-height:42px;
  padding:7px 16px;
  border:1px solid var(--line-soft, #bbb);
  border-radius:7px;
  background:transparent;
  color:var(--text-main,#111);
  font-size:15px;
  font-weight:650;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
}
html[data-site-version="phone"] .site-header nav .mobile-menu-trigger[aria-expanded="true"],
html[data-site-version="phone"] .site-header nav .mobile-menu-trigger:hover {
  border-color:currentColor;
  background:rgba(128,128,128,.08);
}
html[data-site-version="phone"] .site-header nav .mobile-menu-trigger:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px;
}
html[data-site-version="phone"] .site-header nav .nav-drawer {
  position:absolute;
  top:calc(100% + 9px);
  left:0;
  z-index:75;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  width:min(335px, 100%);
  max-height:calc(90dvh - 100px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:10px;
  border:1px solid var(--line-soft,#ccc);
  border-radius:9px;
  background:#fff;
  color:#111;
  box-shadow:0 12px 32px rgba(0,0,0,.17);
}
html[data-site-version="phone"] .site-header nav .nav-drawer:not(.is-open) {
  display:none!important;
}
html[data-site-version="phone"] .site-header nav .nav-drawer.is-open {
  animation:ve-phone-menu-in 180ms ease-out both;
}
@keyframes ve-phone-menu-in {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:translateY(0); }
}
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link,
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link[href] {
  display:flex!important;
  flex:0 0 auto;
  width:100%;
  min-height:42px;
  justify-content:flex-start;
  text-align:left;
  padding:9px 12px;
  border-radius:5px;
  white-space:normal;
}
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link::before {
  display:none;
  content:none;
}
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link .nav-label {
  white-space:normal;
}
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link:hover,
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link:focus-visible,
html[data-site-version="phone"] .site-header nav .nav-drawer a.nav-link.nav-current {
  background:rgba(128,128,128,.12);
}
html[data-site-version="phone"] .site-header nav .nav-drawer .nav-logout {
  order:10;
  display:block;
  flex:0 0 auto;
  width:100%;
  margin:4px 0 0!important;
}
html[data-site-version="phone"] .site-header nav .nav-drawer .nav-logout button {
  box-sizing:border-box;
  width:100%;
  min-height:42px;
  padding:9px 12px!important;
  text-align:left;
}
html[data-site-version="phone"] .site-header nav .site-settings {
  flex:0 0 42px;
  width:42px;
  min-width:42px;
}
html[data-site-version="phone"] .site-header nav .settings-trigger {
  width:42px;
  height:42px;
}
html[data-site-version="phone"] .site-header nav .settings-panel {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:auto;
  width:min(340px, calc(125vw - 25px));
  max-height:calc(90dvh - 20px);
  overflow:auto;
}
@media (max-width:640px) {
  html[data-site-version="phone"] .site-header nav .settings-panel {
    position:fixed;
    top:var(--settings-panel-top,160px);
    left:12.5px;
    right:12.5px;
    width:auto;
    max-height:calc(125dvh - var(--settings-panel-top,160px) - 12.5px);
  }
}
html[data-theme="dark"][data-site-version="phone"] .site-header nav .nav-drawer {
  background:#0c0c0c;
  color:#f2f2f2;
  border-color:#515151;
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-version="phone"] .site-header nav .mobile-menu-trigger { transition:none; }
  html[data-site-version="phone"] .site-header nav .nav-drawer.is-open { animation:none; }
}

/* The existing cross-page fade freezes the scrolled page using viewport
   pixels. Convert that offset back to layout pixels under zoom:0.8. */
html[data-site-version="phone"].ve-managed-nav.ve-nav-leaving .site-page {
  top:calc(var(--ve-leaving-top,0px) / 0.8);
}

/* Mobile v2: keep the settings anchored to the gear itself.
   A fixed popover inside a zoomed body is unreliable on mobile Safari:
   its CSS-pixel offset can be interpreted relative to the visual viewport. */
html[data-site-version="phone"] .site-header nav {
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
}
html[data-site-version="phone"] .site-header nav .site-settings {
  order:0;
  margin:0;
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  position:relative;
  z-index:90;
}
html[data-site-version="phone"] .site-header nav .mobile-menu-trigger {
  order:1;
  margin:0 0 0 auto;
}
html[data-site-version="phone"] .site-header nav .nav-drawer {
  left:auto;
  right:0;
  width:min(335px,100%);
  order:2;
}
/* The specificity deliberately beats site.css's max-width:640px fixed
   rule and mobile-layout v1's own fixed rule. No JS top offsets required. */
html[data-site-version="phone"] .site-header nav .site-settings .settings-panel {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:auto;
  bottom:auto;
  width:min(340px,calc(125vw - 20px));
  max-width:calc(125vw - 20px);
  max-height:min(690px,calc(125dvh - 110px));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:100;
}
@media(max-width:640px) {
  html[data-site-version="phone"] .site-header nav .site-settings .settings-panel {
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:auto;
    width:min(340px,calc(125vw - 20px));
    max-height:min(690px,calc(125dvh - 110px));
  }
}

/* One item per line, with readable full-width categories, product cards,
   calculation dropdowns, and catalog characteristic filter dropdowns. */
html[data-site-version="phone"] :is(
  .catalog-directions,
  .equipment-grid,
  .catalog-product-grid,
  .catalog-filter-groups,
  .catalog-gateway-directions
) {
  grid-template-columns:minmax(0,1fr)!important;
}
html[data-site-version="phone"] .calculation-add-form {
  grid-template-columns:minmax(0,1fr)!important;
}
html[data-site-version="phone"] .calculation-add-form > :is(.field,button) {
  grid-column:1 / -1!important;
  min-width:0;
}
html[data-site-version="phone"] .calculation-add-form > .field :is(select,input) {
  width:100%;
  max-width:100%;
}
html[data-site-version="phone"] .catalog-filter-groups .catalog-filter-group,
html[data-site-version="phone"] .catalog-product-grid > *,
html[data-site-version="phone"] .equipment-grid > * {
  min-width:0;
  width:100%;
}
html[data-site-version="phone"] .catalog-filter-dropdown .catalog-filter-panel {
  position:static;
  width:100%;
  max-width:100%;
  margin-top:6px;
  box-shadow:none;
}

/* Center independent headings, single-column cards and their images.
   Do not center forms' typed values, technical descriptions, tables,
   two-sided input/quantity controls or paired header contact/logo elements. */
html[data-site-version="phone"] main > h1,
html[data-site-version="phone"] main > h2,
html[data-site-version="phone"] main > .lead,
html[data-site-version="phone"] main > .small,
html[data-site-version="phone"] main > .muted,
html[data-site-version="phone"] main > .notice,
html[data-site-version="phone"] main > .breadcrumbs,
html[data-site-version="phone"] .catalog-results > h2,
html[data-site-version="phone"] .home-page .hero-about-copy,
html[data-site-version="phone"] .home-page .hero-about-copy .lead,
html[data-site-version="phone"] .home-page .hero-about-copy .actions,
html[data-site-version="phone"] .catalog-directions > .equipment-tile,
html[data-site-version="phone"] .equipment-grid > .equipment-tile,
html[data-site-version="phone"] .catalog-product-grid > .catalog-product-tile,
html[data-site-version="phone"] .catalog-product-tile .catalog-product-main,
html[data-site-version="phone"] .calculation-content > p,
html[data-site-version="phone"] .calculation-content > .cart-summary,
html[data-site-version="phone"] .catalog-gateway-direction,
html[data-site-version="phone"] .pagination,
html[data-site-version="phone"] .footer-grid > div {
  text-align:center;
}
html[data-site-version="phone"] main > .breadcrumbs {
  justify-content:center;
}
html[data-site-version="phone"] .catalog-directions,
html[data-site-version="phone"] .catalog-product-grid,
html[data-site-version="phone"] .equipment-grid,
html[data-site-version="phone"] .catalog-filter-groups {
  justify-items:stretch;
}
html[data-site-version="phone"] .equipment-tile .cover-img,
html[data-site-version="phone"] .catalog-product-main .cover-img {
  display:block;
  margin-inline:auto;
  max-width:100%;
}
html[data-site-version="phone"] .home-page .hero-about-copy .actions,
html[data-site-version="phone"] .calculation-content > .cart-summary {
  justify-content:center;
}
html[data-site-version="phone"] .catalog-gateway-direction {
  align-items:center;
}
html[data-site-version="phone"] .calculation-add-form .field > label {
  justify-content:center;
  text-align:center;
}
/* A lone button in a full-width row should be visually centered. */
html[data-site-version="phone"] .calculation-add-form > button {
  justify-self:center;
  width:min(100%,340px);
}
html[data-site-version="phone"] .catalog-filters-heading > div:only-child {
  text-align:center;
  width:100%;
}
html[data-site-version="phone"] .catalog-filter-actions > :only-child {
  margin-inline:auto;
}
@media (max-width:640px) {
  html[data-site-version="phone"] .footer-grid {grid-template-columns:minmax(0,1fr);}
}

/* Generic solitary public content, also on non-catalog pages. */
html[data-site-version="phone"] main > p:not(.long-description),
html[data-site-version="phone"] main > .back,
html[data-site-version="phone"] .home-section > p:only-child,
html[data-site-version="phone"] .equipment-tile > :is(h2,h3,p),
html[data-site-version="phone"] .catalog-product-main > :is(h3,p),
html[data-site-version="phone"] .catalog-directions > a > :is(h2,p) {
  text-align:center;
}
html[data-site-version="phone"] main > .back,
html[data-site-version="phone"] main > p:only-child {
  margin-inline:auto;
}
@media(max-width:480px) {
  html[data-site-version="phone"] main .grid > .card:not(.cart-checkout):not(.calculation-checkout),
  html[data-site-version="phone"] main .grid > .card > :is(h2,h3,p) {
    text-align:center;
  }
  html[data-site-version="phone"] main .grid > .card .cover-img {
    display:block;
    margin-inline:auto;
  }
}