/* Per-section styles that Shopify normally injects inline via {% style %} with a unique
   hashed class per section instance. Consolidated here into reusable classes since this
   site only renders one instance of each section. Values taken verbatim from
   frasermoto.com/index.html. */

header-drawer {
  justify-self: start;
  margin-left: -1.2rem;
}

/* Guaranteed override for the real (minified, hard-to-verify) .menu-opening / .js / .no-js
   choreography in component-menu-drawer.css — this always shows the drawer while its
   <details> is open, regardless of which of those transient classes is present. */
header-drawer details[open] > .menu-drawer,
details-modal details[open] > .search-modal {
  visibility: visible !important;
  transform: translate(0) !important;
  opacity: 1 !important;
}

.header__heading-logo {
  max-width: 140px;
}

@media screen and (min-width: 990px) {
  header-drawer {
    display: none;
  }
}

.menu-drawer-container {
  display: flex;
}

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

summary.list-menu__item {
  padding-right: 2.7rem;
}

.list-menu__item {
  display: flex;
  align-items: center;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.list-menu__item--link {
  text-decoration: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .list-menu__item--link {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

.header {
  padding-top: 10px;
  padding-bottom: 10px;
}

.section-header {
  margin-bottom: 0px;
}

@media screen and (min-width: 990px) {
  .header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.footer {
  margin-top: 36px;
}

.section-footer-padding {
  padding-top: 27px;
  padding-bottom: 27px;
}

@media screen and (min-width: 750px) {
  .footer {
    margin-top: 48px;
  }

  .section-footer-padding {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* Collection / multicolumn section padding */
.section-padding {
  padding-top: 27px;
  padding-bottom: 27px;
}

@media screen and (min-width: 750px) {
  .section-padding {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* Rich-text / newsletter section padding */
.section-padding-loose {
  padding-top: 30px;
  padding-bottom: 39px;
}

@media screen and (min-width: 750px) {
  .section-padding-loose {
    padding-top: 40px;
    padding-bottom: 52px;
  }
}

/* Slideshow aspect ratio (home hero) */
@media screen and (max-width: 749px) {
  .home-slideshow::before,
  .home-slideshow .media::before,
  .home-slideshow:not(.banner--mobile-bottom) .banner__content::before {
    padding-bottom: 66.66666666666666%;
    content: '';
    display: block;
  }
}

@media screen and (min-width: 750px) {
  .home-slideshow::before,
  .home-slideshow .media::before {
    padding-bottom: 66.66666666666666%;
    content: '';
    display: block;
  }
}