/* Shared laptop refinements. Keep phone layouts and large desktop compositions. */
@media (min-width: 761px) and (max-width: 1536px) {
  main :where(section, article, form, fieldset, .card) {min-width: 0;}
  main :where(h1, h2, h3, p, label) {overflow-wrap: break-word;}
  main :where(video, iframe) {max-width: 100%;}
  /* Clip only the checkout's decorative orbit, not the purchase form. */
  .mago-checkout-intro {overflow: clip;}

  /* A fixed grid prevents fonts and account controls from creating a third row. */
  #builderApp .builder-shell > *, .ma-dashboard > * {min-width: 0;}
  #builderApp .builder-expert-card {overflow-wrap: anywhere;}
  #builderApp .builder-expert-card > img {position: static; display: block; width: 72px; height: 72px; max-width: 100%; margin-bottom: 16px; border-radius: 50%; object-fit: cover;}
  #builderApp .builder-expert-card :where(button, a) {max-width: 100%; white-space: normal;}
}

@media (min-width: 1101px) and (max-width: 1536px) {
  html.mago-shop-shell {--mj-shell-height: 122px;}
  html body #magoBrandHeader .header.shop-store-header {
    min-height: 122px !important; height: 122px !important;
    display: grid !important; grid-template-columns: 174px minmax(0, 1fr) max-content;
    align-items: center; gap: 6px 16px !important; padding: 12px 24px 8px !important;
  }
  html body #magoBrandHeader .shop-store-brand {width: auto !important; min-width: 0;}
  html body #magoBrandHeader .shop-store-brand .mago-brand-lockup {--mago-logo-width: 174px;}
  html body #magoBrandHeader .shop-desktop-nav {
    min-width: 0; justify-content: flex-end; margin: 0 !important;
    gap: 14px !important; font-size: 14px !important; white-space: nowrap;
  }
  html body #magoBrandHeader .shop-floor-menu {padding: 0; border: 0; margin: 0;}
  html body #magoBrandHeader .shop-floor-menu > summary {padding: 0; min-height: 44px; border: 0; font: inherit;}
  html body #magoBrandHeader .shop-nav-actions {margin: 0 !important; min-width: 0;}
  html body #magoBrandHeader .shop-store-header .mj-cart {padding: 10px 12px !important;}
  html body #magoBrandHeader .shop-store-header .mj-cart > span {font-size: 14px !important;}
  html body #magoBrandHeader .shop-store-header #shSigninBtn.mago-account-control {max-width: 180px !important; padding-inline: 12px !important;}
  html body #magoBrandHeader .shop-desktop-outside {
    grid-column: 1 / -1; margin: 0 !important; padding-top: 5px !important;
    font-size: 12px !important; min-width: 0;
  }
  #magoBrandHeader .shop-desktop-outside a {min-height: 26px; display: inline-flex; align-items: center;}
  #magoBrandHeader .shop-floor-options {max-height: calc(100dvh - 100px) !important;}
}

/* The builder also needs to reflow when a laptop is zoomed into a narrow view. */
@media (max-width: 1240px) {
  #builderApp .editor-toolbar {flex-wrap: wrap;}
  #builderApp .editor-toolbar .button {flex: 1 1 128px; min-width: 0;}
}

@media (min-width: 1101px) and (max-width: 1240px) {
  html body #magoBrandHeader .header.shop-store-header {grid-template-columns: 150px minmax(0, 1fr) max-content; gap: 6px 12px !important; padding-inline: 18px !important;}
  html body #magoBrandHeader .shop-store-brand .mago-brand-lockup {--mago-logo-width: 150px;}
  html body #magoBrandHeader .shop-desktop-nav {font-size: 13px !important; gap: 10px !important;}
  html body #magoBrandHeader .shop-store-header .mj-cart > span {display: none !important;}
  html body #magoBrandHeader .shop-store-header #shSigninBtn.mago-account-control {max-width: 164px !important;}
  .header.nano-header .nav > a, .header.nano-header .nav > .services-menu > summary {font-size: 14px;}
  .nano-header-actions {gap: 10px;}
  .nano-estimate {font-size: 14px; gap: 10px; padding-left: 12px;}
}

/* Laptop height matters too: retain reachable controls with browser toolbars/zoom. */
@media (min-width: 761px) and (max-height: 850px) {
  .naya-greeting {display: none !important;}
  .mago-chat-entry {width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; padding: 5px !important; gap: 0 !important; right: 18px !important; left: auto !important; border-radius: 50% !important;}
  .mago-chat-entry > .naya-launch-copy, .mago-chat-entry > .naya-launch-action {display: none !important;}
  .mago-chat-entry .naya-portrait {width: 46px !important; height: 46px !important; flex: 0 0 46px !important;}
  .naya-panel {max-height: calc(100dvh - 32px);}
  .ma-sidebar {top: calc(var(--mj-shell-height, 128px) + 16px); max-height: calc(100dvh - var(--mj-shell-height, 128px) - 32px); overflow-y: auto;}
  #builderApp .summary-card {position: static;}
  .nano-header .service-browser {max-height: calc(100dvh - 120px);}
  .mh-hero {min-height: 540px; padding-block: 40px;}
  .mh-hero h1 {font-size: clamp(56px, 5.8vw, 82px); margin-block: 22px;}
  .mh-hero-copy > p {margin-bottom: 24px;}
  .mh-hero .mh-actions {flex-wrap: wrap;}
  .hs {min-height: 500px;}
}

/* Reserve the scrollbar during dialogs and keep fixed navigation inexpensive
   to composite while the page moves underneath it. */
html {scrollbar-gutter: stable;}
.header.nano-header {backdrop-filter: none; -webkit-backdrop-filter: none; background-color: #203428;}
@media (max-width: 760px) {
  .mobile-contact {backdrop-filter: none; -webkit-backdrop-filter: none;}
}