.fizz-layout-storefront {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.fizz-layout-storefront .fizz-iframe {
  height: calc(100vh - 120px);
}

.fizz-layout-storefront > [data-grid-area="main"] {
  padding: 0 $spacing-16;
}

.fizz-layout-storefront-editor > .fizz-header-brand,
.fizz-layout-storefront-editor > .fizz-subnav,
.fizz-layout-storefront-editor > aside nav  {
  position: sticky;
}

.fizz-layout-storefront-editor > .fizz-header-brand,
.fizz-layout-storefront-editor > .fizz-subnav {
  z-index: $elevation-sticky-header;
}

.fizz-layout-storefront-editor > nav {
  box-shadow: $box-shadow;
}

.fizz-layout-storefront-editor > .fizz-subnav {
  top: 0;
}

.fizz-layout-storefront-editor > aside nav {
  margin: $spacing-16 $spacing-16 calc(#{$spacing-16} + 70px) $spacing-16;
}

.fizz-layout-storefront-editor .fizz-layout-storefront-preview {
  display: none;
}

.fizz-layout-fixed-header-and-sidebar > [data-grid-area="header"],
.fizz-layout-fixed-header-and-footer > [data-grid-area="header"] {
  grid-area: header;
  padding: $spacing-24;
  background-color: $color-background-surface;
  box-shadow: 0 2px 4px 0 rgba(182,182,182,0.5);
  border-bottom: 1px solid $color-border-default;
  position: sticky;
  width: 100%;
  z-index: $elevation-sticky;
}

.fizz-layout-fixed-header-and-sidebar > [data-grid-area="aside"],
.fizz-layout-fixed-header-and-footer > [data-grid-area="aside"] {
  position: sticky;
  top: 0;
  bottom: 0;
  grid-area: aside;
  padding: $spacing-16;
  background-color: $color-background-body;
  max-height: 80%;
  overflow-y: auto;
}

.fizz-layout-fixed-header-and-sidebar > [data-grid-area="aside"],
.fizz-layout-fixed-header-and-footer > [data-grid-area="aside"] {
  display: none;
}

.fizz-sidebar-is-open .fizz-layout-fixed-header-and-sidebar > [data-grid-area="aside"],
.fizz-sidebar-is-open .fizz-layout-fixed-header-and-footer > [data-grid-area="aside"] {
  display: block;
}

.fizz-sidebar-is-open .fizz-layout-fixed-header-and-sidebar > [data-grid-area="main"],
.fizz-sidebar-is-open .fizz-layout-fixed-header-and-footer > [data-grid-area="main"],
.fizz-sidebar-is-open .fizz-layout-fixed-header-and-footer > [data-grid-area="footer"] {
  display: none;
}

.fizz-layout-fixed-header-and-sidebar > [data-grid-area="main"],
.fizz-layout-fixed-header-and-footer > [data-grid-area="main"] {
  grid-area: main;
  padding: $spacing-16;
  background-color: $color-background-surface;
  overflow-y: auto;
}

.fizz-layout-fixed-header-and-sidebar > [data-grid-area="footer"],
.fizz-layout-fixed-header-and-footer > [data-grid-area="footer"] {
  padding: $spacing-24;
  background-color: $color-background-surface;
  box-shadow: 0 -2px 4px 0 rgba(182,182,182,0.5);
  border-top: 1px solid $color-border-default;
}

.fizz-layout-storefront-preview {
  display: grid;
  grid-template-columns: $spacing-16 1fr $spacing-16;
  grid-template-rows: 125px 75px 75px $spacing-32 auto;
  background-color: $color-background-body;
  min-height: 100%;
}

.fizz-layout-storefront-preview > [data-grid-area="header"] {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
}

.fizz-layout-storefront-preview > [data-grid-area="header"] img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.fizz-layout-storefront-preview > [data-grid-area="avatar"] {
  grid-row: 2 / 4;
  grid-column: 2;
}

.fizz-layout-storefront-preview > [data-grid-area="main"] {
  grid-row: 5;
  grid-column: 1/ -1;
  display: grid;
  grid-template-columns: $spacing-16 1fr $spacing-16;
}

.fizz-layout-storefront-preview > [data-grid-area="main"] > * {
  grid-column: 2 / 3;
}

.fizz-layout-storefront-preview [data-grid-area="breakout"] {
  background-color: white;
  padding: $spacing-24 $spacing-16;
  grid-column: 1 / -1;
  margin-bottom: $spacing-24;
}

.fizz-layout-storefront-preview [data-grid-area="breakout"] figure {
  width: 100%;
}

.fizz-layout-storefront-preview [data-grid-area="product-cards"] form :first-child {
  width: 100%;
}

@media (min-width: $breakpoint-m) {
  .fizz-layout-storefront {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(min-content, $breakpoint-l) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }

  .fizz-layout-storefront > header,
  .fizz-layout-storefront > nav,
  .fizz-layout-storefront .fizz-grid-row-full {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  
  .fizz-layout-storefront .fizz-grid-row-full {
    display: flex;
    justify-content: center;
  }

  .fizz-layout-storefront > main {
    grid-column-start : 2;
  }

  .fizz-layout-storefront > header > div,
  .fizz-layout-storefront > nav > div {
    max-width: $breakpoint-xl;
    margin: 0 auto;
  }

  .fizz-layout-storefront-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px minmax(min-content, 1060px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    position: relative; 
  }

  .fizz-layout-storefront-editor > header,
  .fizz-layout-storefront-editor > nav {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .fizz-layout-storefront-editor > aside nav {
    z-index: $elevation-sticky;
    margin: 0;
  }

  .fizz-layout-storefront-editor > .fizz-header-brand {
    top: 0;
  }

  .fizz-layout-storefront-editor > .fizz-subnav {
    top: 56px;
  }
  
  .fizz-layout-storefront-editor > aside {
    grid-column-start : 2;
    grid-row-start: 3;
    margin: $spacing-32 $gutter-medium;
    position: relative;
  }

  .fizz-layout-storefront-editor > aside {
    position: sticky;
    overflow-y: auto;
    max-height: calc(90vh - 158px);
    top: 158px;
    z-index: $elevation-sticky;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .fizz-layout-storefront-editor > aside::-webkit-scrollbar {
    display: none;
  }

  .fizz-layout-storefront-editor > main {
    grid-column-start : 3;
    grid-row-start: 3;
    background-color: $color-background-surface;
    margin: $spacing-32 $gutter-medium;
    box-shadow: $box-shadow;
  }

  .fizz-layout-storefront-editor > header > div,
  .fizz-layout-storefront-editor > nav > div {
    max-width: $breakpoint-xl;
    margin: 0 auto;
  }

/* STOREFRONT PREVIEW */

  .fizz-layout-storefront-preview {
    grid-template-columns: minmax(0, 1fr) 50px minmax(min-content, calc(#{$breakpoint-xl} - 100px)) 50px minmax(0, 1fr);
    grid-template-rows: max-content 75px $spacing-32 auto;
  }

  .fizz-layout-storefront-preview > [data-grid-area="header"] {
    grid-column: 2 / 5;
    grid-row: 1;
  }

  .fizz-layout-storefront-preview > [data-grid-area="header"] img {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    max-height: 300px;
    max-width: 100%;
  }

  .fizz-layout-storefront-preview > [data-grid-area="avatar"] {
    grid-column: 3 / 4;
    grid-row: 1;
    align-self: end;
    transform: translateY(75px);
  }

  .fizz-layout-storefront-preview > [data-grid-area="main"] {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: start;
    display: grid;
    grid-template-columns: minmax(0,1fr) 50px minmax(0, 1300px) 50px minmax(0,1fr);
  }

  .fizz-layout-storefront-preview > [data-grid-area="main"] > * {
    grid-column: 3 / 4;
  }

  .fizz-layout-storefront-preview [data-grid-area="breakout"] {
    padding: $spacing-32 50px;
    display: grid;
    grid-template-columns: minmax(50px,1fr) minmax(0,1300px) minmax(50px,1fr);
    grid-column: 1 / -1;
  }

  .fizz-layout-storefront-preview [data-grid-area="breakout"] > * {
    grid-column: 2 / 3;
    align-items: stretch;
  }

  .fizz-layout-storefront-preview [data-grid-area="product-cards"] {
    grid-column: 3 / 4;
  }

  .fizz-layout-storefront-preview  [data-grid-area="product-cards"] > * {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .fizz-layout-storefront-preview [data-grid-area="product-cards"] form :first-child {
    flex: 0 0 calc(50% - #{$spacing-8});
  }

  .fizz-layout-fixed-header-and-sidebar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(270px, 1fr) 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
      "header header"
      "aside main"
      "footer footer";
  }

  .fizz-layout-fixed-header-and-footer {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
      "header"
      "main"
      "footer";
  }

  .fizz-layout-fixed-header-and-sidebar > [data-grid-area="aside"] {
    display: block;
    top: 73px;
  }

  .fizz-layout-fixed-header-and-footer > [data-grid-area="aside"] {
    display: block;
  }

  .fizz-layout-fixed-header-and-footer > [data-grid-area="main"] {
    padding: $spacing-32;
  }

  .fizz-layout-fixed-header-and-sidebar > [data-grid-area="footer"],
  .fizz-layout-fixed-header-and-footer > [data-grid-area="footer"] {
    grid-area: footer;
    padding: $spacing-24;
    background-color: $color-background-surface;
    box-shadow: 0 -2px 4px 0 rgba(182,182,182,0.5);
    border-top: 1px solid $color-border-default;
    position: sticky;
    width: 100%;
    z-index: $elevation-sticky;
  }
  
  .fizz-sidebar-is-open .fizz-layout-fixed-header-and-sidebar > [data-grid-area="aside"] {
    display: block;
  }
  
  .fizz-sidebar-is-open .fizz-layout-fixed-header-and-sidebar > [data-grid-area="main"] {
    display: block;
  }

}