.collection.page-width {
  padding: 0 30px;
}

@media only screen and (min-width: 1000px) {
  .collection.page-width {
    padding: 0 10px;
  }
}

@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 999px) {
  .collection .slider.slider--tablet {
    margin-bottom: 1.5rem;
  }
}

.collection .loading-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.collection.loading .loading-overlay {
  display: block;
}

.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

.collection--empty .no-results__subheading {
  font-family: var(--font-family--secondary);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2.2px;
}

@media screen and (max-width: 999px) {
  .collection .slider--tablet.product-grid {
    scroll-padding-left: 1.5rem;
  }
}

.collection__description > * {
  margin: 0;
}

.collection__title.title-wrapper {
  margin-bottom: 2.5rem;
}

.collection__title .title:not(:only-child) {
  margin-bottom: 1rem;
}

@media screen and (min-width: 1000px) {
  .collection__title--desktop-slider .title {
    margin-bottom: 2.5rem;
  }

  .collection__title.title-wrapper--self-padded-tablet-down {
    padding: 0 5rem;
  }

  .collection slider-component:not(.page-width-desktop) {
    padding: 0;
  }

  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

.collection__view-all a:not(.link) {
  margin-top: 1rem;
}

.product-grid {
  column-gap: 0;
  row-gap: 25px;
  margin: 40px 0 0;
}

.product-grid:not(.grid--infinite-scroll-disabled) + #product-pagination .pagination-wrapper {
  display: none;
}

.section.section--product-grid {
  margin-top: 30px;
}

.product-grid .grid__item {
  max-width: none;
}

.product-grid .grid__item {
  width: 100%;
}

.wide-image-from-plp {
  display: none !important;
}

@media only screen and (min-width: 1000px) {
  .product-grid {
    gap: 0;
    margin-top: 25px;
    margin-bottom: 30px;
  }

  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+1),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+2),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+6),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+7) {
    width: 50%;
    flex-grow: 0;
  }

  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+3),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+4),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+5),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+8),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+9),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+10),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+12),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+13),
  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+14) {
    width: calc(100% / 3);
    flex-grow: 0;
  }

  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+11) {
    width: 100%;
  }

  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+11) .card__media img:not(:only-child) {
    display: none;
  }

  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+11) .card__media img.wide-image-from-plp {
    display: block !important;
  }

  .product-grid:not(.hmd-product-grid):not(.simple-grid-product-grid) .grid__item:nth-child(14n+6):last-child {
    padding-top: 7.8vw;
  }
}

/* TODO: Move to global */
.preview-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10rem 0 15rem;
}

.preview-loader__label {
  margin: 0 0 -20px;
}

.preview-loader__spinner {
  color: rgb(var(--color-foreground));
  font-size: 48px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  transform: translateZ(0);
  animation: preview-spinner 1.7s infinite ease, preview-round 1.7s infinite ease;
}

@-webkit-keyframes preview-spinner {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes preview-spinner {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes preview-round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes preview-round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* HMD */
@media (min-width: 1000px) {
  .hmd-collection.collection,
  .simple-grid-collection.collection {
    width: 100%;
    padding: 0 40px;
  }
  .product-grid.hmd-product-grid .grid__item,
  .product-grid.simple-grid-product-grid .grid__item {
    width: 25%;
    flex: 0 0 auto;
    padding: 10px;
  }
  .product-grid.hmd-product-grid .grid__item .card__content,
  .product-grid.simple-grid-product-grid .grid__item .card__content {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  #product-grid.hmd-product-grid .grid__item .card,
  #product-grid.simple-grid-product-grid .grid__item .card {
    --ratio-percent: calc(62 / 49 * 100%) !important;
  }
}

@media (max-width: 999px) {
  body:not(.collection-scrapbook-grid):not(.collection-scrapbook-grid-gated):not(.collection-holiday-teaser) {
    .grid__item:nth-child(14n+3),
    .grid__item:nth-child(14n+4),
    .grid__item:nth-child(14n+5),
    .grid__item:nth-child(14n+6),
    .grid__item:nth-child(14n+10),
    .grid__item:nth-child(14n+11),
    .grid__item:nth-child(14n+12),
    .grid__item:nth-child(14n+13) {
      width: calc(100% / 2 + 15px);
      flex-grow: 0;

      .card-wrapper {
        align-items: flex-start;
      }
    }
    .grid__item:nth-child(14n+3),
    .grid__item:nth-child(14n+5),
    .grid__item:nth-child(14n+10),
    .grid__item:nth-child(14n+12) {
      margin-left: -30px;
      margin-right: 30px;
    }
    .grid__item:nth-child(14n+4),
    .grid__item:nth-child(14n+6),
    .grid__item:nth-child(14n+11),
    .grid__item:nth-child(14n+13) {
      margin-right: -30px;
    }

    #product-grid .grid__item:nth-child(14n+4) .card, 
    #product-grid .grid__item:nth-child(14n+6) .card,
    #product-grid .grid__item:nth-child(14n+11) .card, 
    #product-grid .grid__item:nth-child(14n+13) .card  {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      --ratio-percent: calc(421 / 313 * 100%) !important;

      .card__main {
        padding: 0;

        .card__frame {
          display: none;
        }
      }
    }
  }
}