:root {
  --mav-theme-full: 100%;
  --mav-theme-product-gap: 20px;
  --mav-theme-zero: 0;
  --mav-theme-one: 1;
  --mav-theme-two: 2;
  --mav-theme-three: 3;
  --mav-theme-four: 4;
  --mav-theme-five: 5;
  --mav-theme-six: 6;
}
#masthead .ast-primary-header-bar {
  display: flex;
  width: var(--mav-theme-full);
}
#masthead .ast-builder-grid-row-container {
  display: flex;
  width: var(--mav-theme-full);
}
#masthead .ast-builder-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--mav-theme-full);
}
#colophon .ast-builder-grid-row-container {
  display: flex;
  flex-direction: column;
}
#colophon .ast-builder-grid-row {
  display: flex;
  width: var(--mav-theme-full);
}
#colophon .ast-nav-menu {
  display: flex;
  flex-wrap: wrap;
}
#colophon .site-footer-section {
  width: var(--mav-theme-full);
}
#main ul.products {
  --mav-theme-desktop-columns: var(--mav-theme-four);
  --mav-theme-product-columns: var(--mav-theme-desktop-columns);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--mav-theme-product-gap);
}
#main ul.products.columns-1 { --mav-theme-desktop-columns: var(--mav-theme-one); }
#main ul.products.columns-2 { --mav-theme-desktop-columns: var(--mav-theme-two); }
#main ul.products.columns-3 { --mav-theme-desktop-columns: var(--mav-theme-three); }
#main ul.products.columns-4 { --mav-theme-desktop-columns: var(--mav-theme-four); }
#main ul.products.columns-5 { --mav-theme-desktop-columns: var(--mav-theme-five); }
#main ul.products.columns-6 { --mav-theme-desktop-columns: var(--mav-theme-six); }
#main ul.products > li.product {
  width: calc((var(--mav-theme-full) - (var(--mav-theme-product-columns) - var(--mav-theme-one)) * var(--mav-theme-product-gap)) / var(--mav-theme-product-columns));
  flex-basis: calc((var(--mav-theme-full) - (var(--mav-theme-product-columns) - var(--mav-theme-one)) * var(--mav-theme-product-gap)) / var(--mav-theme-product-columns));
  flex-grow: var(--mav-theme-zero);
}
/* Media conditions require literal thresholds; match Astra's native breakpoints. */
@media (max-width: 921px) {
  #main ul.products {
    --mav-theme-product-columns: min(var(--mav-theme-desktop-columns), var(--mav-theme-three));
  }
}
@media (max-width: 544px) {
  #colophon .astra-footer-mobile-vertical-menu {
    flex-direction: column;
    align-items: center;
  }
  #main ul.products {
    --mav-theme-product-columns: min(var(--mav-theme-desktop-columns), var(--mav-theme-two));
  }
}
