/* Final structural override: utility bar + commerce header are one top chrome block. */
:root {
  --asulo-utility-h: 36px;
  --asulo-chrome-h: calc(var(--asulo-utility-h) + var(--asulo-header-h));
}

.asulo-base-catalog #page {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.asulo-base-chrome {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  background: #fff !important;
}

.admin-bar.asulo-base-catalog .asulo-base-chrome {
  top: 32px !important;
}

.asulo-base-utility {
  display: block !important;
  position: relative !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  margin: 0 !important;
  background: #07559b !important;
  color: #fff !important;
}

.asulo-base-utility__inner {
  width: calc(100% - 32px) !important;
  max-width: var(--asulo-shell) !important;
  min-height: var(--asulo-utility-h) !important;
  margin: 0 auto !important;
}

.asulo-base-header {
  display: block !important;
  position: relative !important;
  top: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  margin: 0 !important;
  background: #fff !important;
}

.asulo-base-header__inner {
  width: calc(100% - 32px) !important;
  max-width: var(--asulo-shell) !important;
  margin: 0 auto !important;
}

.asulo-base-sidebar {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.asulo-base-catalog #site-content {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.asulo-base-sidebar__sticky {
  top: var(--asulo-chrome-h) !important;
}

.admin-bar.asulo-base-catalog .asulo-base-sidebar__sticky {
  top: calc(var(--asulo-chrome-h) + 32px) !important;
}

.asulo-base-catalog #site-footer,
.asulo-base-catalog footer.site-footer {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

@media (max-width: 800px) {
  .asulo-base-chrome,
  .admin-bar.asulo-base-catalog .asulo-base-chrome {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .asulo-base-utility__inner,
  .asulo-base-header__inner {
    width: 100% !important;
  }
}