@charset "UTF-8";
/*md

# Grid variables

*/
/*md

# Grid system functions

*/
/*md

# Grid system mixins

This section describes grid system mixins used for development in the project.

*/
/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
.product-tile__title {
  font-weight: 700;
}

.product-tile__title,
.product-tile__price {
  font-size: 0.875rem;
  line-height: 1.125rem;
}
@media (min-width: 768px) {
  .product-tile__title,
  .product-tile__price {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.product-tile__promotion {
  font-size: 0.875rem;
  line-height: 1.125rem;
}
@media (min-width: 768px) {
  .product-tile__promotion {
    line-height: 1.5rem;
  }
}

.product-tile__swatch-title {
  color: #666;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
}
.product-tile__swatch-title:focus-visible {
  outline-offset: -2px;
}

.product-tile__price--new,
.product-tile__price--standard {
  font-weight: 700;
}

.product-tile__price--new {
  color: #ba2026;
}

.product-tile__price--old,
.product-tile__price--original,
.product-tile__price--best {
  color: #666;
  font-weight: 400;
  position: relative;
  -webkit-text-decoration-color: #666;
  text-decoration-color: #666;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
  -webkit-text-decoration-thickness: 0.0625rem;
  text-decoration-thickness: 0.0625rem;
}

.product-tile__price--original {
  font-size: 0.75rem;
  -webkit-text-decoration-line: none;
  text-decoration-line: none;
}
.product-tile__price--original .discount-percentage-value {
  color: #ba2026;
  font-size: 0.75rem;
}

.line-item-limited {
  display: inline-block;
  line-height: 1.125rem;
  max-height: 1.125rem;
  overflow: hidden;
}
@supports (-webkit-line-clamp: 1) {
  .line-item-limited {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    max-height: none !important;
  }
}

.line-item-limited--1 {
  max-height: 1.125rem;
}
@supports (-webkit-line-clamp: 1) {
  .line-item-limited--1 {
    -webkit-line-clamp: 1;
  }
}

.line-item-limited--2 {
  max-height: 2.25rem;
}
@supports (-webkit-line-clamp: 2) {
  .line-item-limited--2 {
    -webkit-line-clamp: 2;
  }
}

.line-item-limited--3 {
  max-height: 3.375rem;
}
@supports (-webkit-line-clamp: 3) {
  .line-item-limited--3 {
    -webkit-line-clamp: 3;
  }
}

.simple-carousel.simple-carousel--no-bullets .simple-carousel-bullets {
  display: none;
}
.simple-carousel.simple-carousel--no-arrows .simple-carousel-arrows {
  display: none;
}
.simple-carousel .glide-carousel-slide img {
  display: block;
  width: 100%;
}
.simple-carousel .simple-carousel-arrow,
.simple-carousel .simple-carousel-bullet {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.simple-carousel .simple-carousel-bullet {
  -webkit-backface-visibility: visible;
  background-color: #999;
  border-radius: 30px;
  display: inline-block;
  height: 0.625rem;
  margin: 0.3125rem 0.4375rem;
  transition: background-color 200ms ease;
  width: 0.625rem;
}
.simple-carousel .simple-carousel-bullet.glide__bullet--active {
  background-color: #444;
}
.simple-carousel .simple-carousel-bullets {
  margin-top: 0.625rem;
  text-align: center;
}
.simple-carousel .glide--destroyed .simple-carousel-arrows,
.simple-carousel .glide--destroyed .simple-carousel-bullets {
  display: none;
}

/*md

# Product tile badges

*/
.product-tile-badge:not(:empty) {
  border-radius: 0.125rem;
  color: #fff;
  display: inline-block;
  font-size: 0.625rem;
  margin: 0 0.3125rem 0.3125rem 0;
  padding: 0.1875rem 0.5625rem;
  text-transform: uppercase;
}
.product-tile-badge.product-tile-badge--discount {
  background: #ba2026;
  border-radius: 0;
  color: #fff;
  left: 0;
  letter-spacing: 0.5px;
  line-height: 0.75rem;
  margin: 0;
  position: absolute;
  top: 1.25rem;
  z-index: 2;
}
@media (max-width: 767.98px) {
  .col-6 .product-tile-badge.product-tile-badge--discount {
    top: 0.75rem;
  }
  .product-recommendation-link .product-tile-badge.product-tile-badge--discount {
    top: 0.75rem;
  }
}
.product-tile-badge.product-tile-badge--stock {
  background: #fff;
  border-left: 1px solid #000;
  border-radius: 0;
  bottom: -0.0625rem;
  color: #000;
  font-weight: 400;
  left: 0;
  line-height: 0.75rem;
  margin: 0;
  position: absolute;
  z-index: 2;
}
@media (max-width: 1199.98px) {
  .grid-tile .product-tile-badge.product-tile-badge--stock {
    bottom: 0.8125rem;
  }
}
.product-tile-badge.product-tile-badge--main {
  background: #000;
  font-weight: 700;
}
.product-tile-badge.sale, .product-tile-badge.black-friday-deal, .product-tile-badge.cyber-monday-deal, .product-tile-badge.singles-day-special, .product-tile-badge[class*=percent], .product-tile-badge.product-tile-badge--sale {
  background: #ba2026;
  font-weight: 700;
}
.product-tile-badge.best-seller, .product-tile-badge.exclusive, .product-tile-badge.online-exclusive, .product-tile-badge.limited-edition, .product-tile-badge.puma-select {
  background: #ae946d;
}
.product-tile-badge.customize, .product-tile-badge.personalise {
  background: linear-gradient(90deg, rgb(14, 235, 249) 0%, rgb(148, 111, 186) 33%, rgb(242, 0, 108) 66%, rgb(248, 77, 4) 100%);
}
.product-tile-badge.vegan, .product-tile-badge.sustainable-material, .product-tile-badge.sustainable, .product-tile-badge.recycled-materials, .product-tile-badge.organic-cotton, .product-tile-badge.bio-based, .product-tile-badge.recycled, .product-tile-badge.organically-grown-cotton, .product-tile-badge.recycled-upper, .product-tile-badge.chrome-free-leather, .product-tile-badge.bio-based-upper {
  background: #008827;
}
.product-tile-badge.womens {
  background: transparent;
  border: 1px solid #181818;
  color: #181818;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
}
.product-tile-badge .icon {
  display: none;
}

.lazy-block {
  min-height: 40vh;
  position: relative;
}
.header-top-section-components .lazy-block {
  min-height: 0;
}

@media (max-width: 1200px) {
  .h-placeholder.h-placeholder--carousel {
    min-height: 118px !important;
  }
}
.h-placeholder .lazy-block {
  min-height: inherit;
}
@media (max-width: 767.98px) {
  .h-placeholder--recommendations-content:empty {
    min-height: 20.375rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder--recommendations-content:empty {
    min-height: 34.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder--recommendations-content:empty {
    min-height: 29.0625rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder--recommendations-content:empty {
    min-height: 28.0598958333vw;
  }
}
.header-top-section-components .h-placeholder.h-placeholder--carousel {
  min-height: 0;
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--carousel {
    min-height: 25.9375rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--carousel {
    min-height: 41.5625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--carousel {
    min-height: 24.375rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--carousel {
    min-height: 36.1979166667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--productcarousel {
    min-height: 43.125rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--productcarousel {
    min-height: 45.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--productcarousel {
    min-height: 56.25rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--productcarousel {
    min-height: 46.3541666667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--look {
    min-height: 49.375rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--look {
    min-height: 29.0625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--look {
    min-height: 38.75rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--look {
    min-height: 55.2083333333vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--producttilegrid {
    min-height: 26.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--producttilegrid {
    min-height: 42.1875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--producttilegrid {
    min-height: 46.875rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--producttilegrid {
    min-height: 61.9791666667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--selectcollectioncarousel {
    min-height: 111.1111111111vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--selectcollectioncarousel {
    min-height: 26.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--selectcollectioncarousel {
    min-height: 26.875rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--selectcollectioncarousel {
    min-height: 32.03125vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--marketing-tile {
    min-height: 51.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--marketing-tile {
    min-height: 34.375rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--marketing-tile {
    min-height: 42.1875rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--marketing-tile {
    min-height: 63.28125vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--marketing-tile-and-collection {
    min-height: 51.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--marketing-tile-and-collection {
    min-height: 35.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--marketing-tile-and-collection {
    min-height: 42.1875rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--marketing-tile-and-collection {
    min-height: 58.0729166667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--globalbanner {
    min-height: 6.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--globalbanner {
    min-height: 5.3125rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--globalbanner {
    min-height: 5.3125rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--globalbanner {
    min-height: 6.5625rem;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--bannergroup {
    min-height: 6.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--bannergroup {
    min-height: 4.6875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--bannergroup {
    min-height: 3.4375rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--bannergroup {
    min-height: 3.4375rem;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--eightctas {
    min-height: 17.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--eightctas {
    min-height: 11.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--eightctas {
    min-height: 8rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--eightctas {
    min-height: 8rem;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--imagecarousel {
    min-height: 113.3333333333vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--imagecarousel {
    min-height: 20.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--imagecarousel {
    min-height: 28.5rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--imagecarousel {
    min-height: 29.6875vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--bodycontentslot {
    min-height: 24.6875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--bodycontentslot {
    min-height: 20.9375rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--bodycontentslot {
    min-height: 17.8125rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--bodycontentslot {
    min-height: 14.5833333333vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--overlap {
    min-height: 213.8888888889vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--overlap {
    min-height: 138.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--overlap {
    min-height: 88.125rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--overlap {
    min-height: 83.3333333333vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--overlap .kop-overlap-item--right {
    min-height: 97.2222222222vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--overlap .kop-overlap-item--left {
    min-height: 105.8333333333vw;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--overlap .kop-overlap-container {
    min-height: 55.234375vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--overlap .products-carousel-glide {
    min-height: 88.0555555556vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--overlap .kop-overlap-carousel {
    min-height: 97.2222222222vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--thirds {
    min-height: 132.2222222222vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--thirds {
    min-height: 73.125rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--thirds {
    min-height: 25rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--thirds {
    min-height: 34.3424479167vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--thirds .kop-thirds-media {
    min-height: 52.2222222222vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--detailgrid2xgroup {
    min-height: 76.875rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--detailgrid2xgroup {
    min-height: 108.125rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--detailgrid2xgroup {
    min-height: 140.625rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--detailgrid2xgroup {
    min-height: 57.2916666667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--quotecallout {
    min-height: 15.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--quotecallout {
    min-height: 13.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--quotecallout {
    min-height: 15rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--quotecallout {
    min-height: 15rem;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--sidebygroup {
    min-height: 266.6666666667vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--sidebygroup {
    min-height: 120.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--sidebygroup {
    min-height: 85rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--sidebygroup {
    min-height: 32.5vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--sidebygroup .kop-sidebytile-content-wrapper,
  .h-placeholder.h-placeholder--sidebygroup .kop-sidebytile-wrapper {
    min-height: 7.5rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--sidebygroup .kop-sidebytile-content-wrapper,
  .h-placeholder.h-placeholder--sidebygroup .kop-sidebytile-wrapper {
    min-height: 32.5vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--sidebygroup .kop-sidebytile-media {
    min-height: 100vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) {
    min-height: 152.2222222222vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) {
    min-height: 31.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) {
    min-height: 22.5rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) {
    min-height: 34.3424479167vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) .kop-hero-wrapper,
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) .kop-hero-content-wrapper {
    min-height: 7.5rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) .kop-hero-wrapper,
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) .kop-hero-content-wrapper {
    min-height: 28.0208333333vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--hero:not([id*=white-space]) .kop-hero-media {
    min-height: 100vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--trendinggroup {
    min-height: 277.7777777778vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .h-placeholder.h-placeholder--trendinggroup {
    min-height: 31.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  .h-placeholder.h-placeholder--trendinggroup {
    min-height: 31.25rem;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--trendinggroup {
    min-height: 37.7604166667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--trendinggroup .kop-trendingtile {
    min-height: 138.8888888889vw;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--trendinggroup .kop-trendingtile {
    min-height: 27.9166666667vw;
  }
}
@media (max-width: 767.98px) {
  .h-placeholder.h-placeholder--trendinggroup .kop-trendingtile-media {
    min-height: 100vw;
  }
}
@media (min-width: 1024px) {
  .h-placeholder.h-placeholder--trendinggroup .kop-trendingtile-media {
    min-height: 17.7994791667vw;
  }
}
@supports (--custom:property) {
  .h-placeholder .kop-overlap-image,
  .h-placeholder .img-overscale {
    aspect-ratio: var(--aspect-ratio-mobile);
  }
  @media (min-width: 768px) {
    .h-placeholder .kop-overlap-image,
    .h-placeholder .img-overscale {
      aspect-ratio: var(--aspect-ratio-tablet);
    }
  }
  @media (min-width: 1024px) {
    .h-placeholder .kop-overlap-image,
    .h-placeholder .img-overscale {
      aspect-ratio: var(--aspect-ratio-desktop);
    }
  }
}
.h-placeholder.h-placeholder--hero[id*=white-space] .img-overscale {
  aspect-ratio: auto;
}

.product-recommendation-image {
  aspect-ratio: 1;
}

.content-should-shown-if-js-enabled {
  display: none;
}

.kop-wrapped .h-placeholder.h-placeholder--overlap {
  min-height: 60.3333333333vw;
}

@media (max-width: 767.98px) {
  #pixlee_container[data-component="global/LazyWidgets"] iframe, #pixlee_container[data-component="global/LazyWidgets"]:empty {
    height: 17.225rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  #pixlee_container[data-component="global/LazyWidgets"] iframe, #pixlee_container[data-component="global/LazyWidgets"]:empty {
    height: 17.35rem;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  #pixlee_container[data-component="global/LazyWidgets"] iframe, #pixlee_container[data-component="global/LazyWidgets"]:empty {
    height: 17rem;
  }
}
@media (min-width: 1024px) {
  #pixlee_container[data-component="global/LazyWidgets"] iframe, #pixlee_container[data-component="global/LazyWidgets"]:empty {
    height: 22.975rem;
  }
}

/*md

# Video Player Icons

*/
.video-play-icon {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 3rem;
  margin: -1.5rem auto 0;
  opacity: 1;
  pointer-events: none;
  top: 50%;
  width: 3rem;
}
@media (min-width: 1200px) {
  .video-play-icon {
    height: 5rem;
    margin-top: -2.5rem;
    width: 5rem;
  }
}

.video-pause-icon {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 3rem;
  margin: -1.5rem auto 0;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  width: 3rem;
}
@media (min-width: 1200px) {
  .video-pause-icon {
    height: 5rem;
    margin-top: -2.5rem;
    width: 5rem;
  }
}

.video-wrapper {
  line-height: 0;
  position: relative;
}
.video-wrapper .video-pause-icon {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.video-wrapper .video-play-icon {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.video-stopped .video-play-icon {
  opacity: 1;
}
.video-stopped .video-pause-icon {
  opacity: 0;
}

.video-playing.mouse-show-pause:hover .video-play-icon, .video-playing.mouse-show-pause:active .video-play-icon, .video-playing.mouse-show-pause:focus .video-play-icon {
  opacity: 0;
}
.video-playing.mouse-show-pause:hover .video-pause-icon, .video-playing.mouse-show-pause:active .video-pause-icon, .video-playing.mouse-show-pause:focus .video-pause-icon {
  opacity: 1;
}

.video-paused:hover .video-play-icon, .video-paused:active .video-play-icon, .video-paused:focus .video-play-icon {
  opacity: 1;
}
.video-paused:hover .video-pause-icon, .video-paused:active .video-pause-icon, .video-paused:focus .video-pause-icon {
  opacity: 0;
}

/*md

# Content Carousel

*/
.kop-content-carousel-wrapper {
  position: relative;
}

.kop-content-carousel {
  position: relative;
  touch-action: manipulation;
}
.kop-content-carousel .simple-carousel-arrows {
  display: none;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 960px) {
  .kop-content-carousel .simple-carousel-arrows {
    display: block;
  }
}
.kop-content-carousel .simple-carousel-arrow {
  align-items: center;
  cursor: pointer;
  display: flex;
  fill: #fff;
  height: 100%;
  outline: 0;
  position: absolute;
  top: 0;
}
.kop-content-carousel .simple-carousel-arrow:hover {
  fill: #181818;
  outline: 0;
  text-decoration: none;
}
.kop-content-carousel .simple-carousel-arrow--left {
  left: 0;
}
.kop-content-carousel .simple-carousel-arrow--right {
  right: 0;
}
.kop-content-carousel .zoom-icon {
  height: 5rem;
  width: 5rem;
}

.slot-product-carousel .product-carousel,
.product-recommendations .product-carousel {
  margin: 0 auto 1.5rem;
  max-width: 75rem;
  width: 100%;
}
@media (min-width: 1200px) {
  .slot-product-carousel .product-carousel,
  .product-recommendations .product-carousel {
    margin-bottom: 2rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}

.slot-product-carousel__header,
.product-recommendations__header,
.slot-stylitics-pdp__header {
  font-size: 1.375rem;
  margin-bottom: 0;
  padding-bottom: 1.5rem;
  padding-top: 0.625rem;
  text-align: center;
}
.search-modal__slot .slot-product-carousel__header,
.search-modal__slot .product-recommendations__header,
.search-modal__slot .slot-stylitics-pdp__header {
  padding-top: 0;
}
@media (min-width: 768px) {
  .slot-product-carousel__header,
  .product-recommendations__header,
  .slot-stylitics-pdp__header {
    font-size: 1.625rem;
    padding-top: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .slot-product-carousel__header,
  .product-recommendations__header,
  .slot-stylitics-pdp__header {
    font-size: 1.75rem;
  }
}

.kop-product-carousel {
  touch-action: manipulation;
}

.kop-product-carousel-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kop-product-carousel-link:hover, .kop-product-carousel-link:active, .kop-product-carousel-link:focus {
  text-decoration: none;
}
.kop-product-carousel-link:hover .kop-product-carousel-btn, .kop-product-carousel-link:active .kop-product-carousel-btn, .kop-product-carousel-link:focus .kop-product-carousel-btn {
  display: block;
}
@media (max-width: 1023.98px) {
  .kop-product-carousel-link:hover .kop-product-carousel-btn, .kop-product-carousel-link:active .kop-product-carousel-btn, .kop-product-carousel-link:focus .kop-product-carousel-btn {
    font-size: 0.875rem;
  }
}

.kop-product-carousel-image-wrapper {
  border-bottom: 1px solid #ccc;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.p-offline-picture {
  display: block;
}

.kop-product-carousel-image {
  max-width: 100%;
  width: auto;
}
.stock-badge .kop-product-carousel-image {
  opacity: 0.5;
}

.glide-carousel .price {
  margin: auto 0 0.5rem;
  text-align: center;
}

.kop-product-carousel-btn {
  display: none;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.kop-product-carousel-name {
  overflow: hidden;
  width: 100%;
}

/*md

# Slideshow

*/
.kop-slidegroup-wrapper {
  text-align: center;
}
.kop-slidegroup-top {
  margin: 0 0 1.5rem;
}
.kop-slidegroup-header {
  color: #000;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.125rem;
  line-height: 1rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.kop-slidegroup-text {
  color: #000;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.25rem;
}
@media (min-width: 960px) {
  .kop-slidegroup-text {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}
.kop-slidegroup-middle {
  margin: 1.5rem 0;
  position: relative;
}
.kop-slidegroup-bottom {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0 0;
}
.kop-slidegroup-btn {
  margin: 0 0 0.5rem;
  width: 100%;
}
@media (min-width: 544px) {
  .kop-slidegroup-btn {
    margin: 0 0.5rem;
    width: auto;
  }
}
.kop-slidegroup-carousel {
  position: relative;
}

/*md

# Overlap

*/
.kop-overlap {
  position: relative;
  width: 100%;
}
@media (min-width: 1200px) {
  .kop-slot-visibility.ghost-mode-on .kop-overlap {
    padding-top: 6.25rem;
  }
}

.kop-overlap-bg {
  display: none;
  height: 31.25rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (min-width: 1200px) {
  .kop-slot-visibility.ghost-mode-on .kop-overlap-bg {
    height: 37.5rem;
  }
}
@media (min-width: 1024px) {
  .kop-overlap-bg {
    display: block;
  }
}

.kop-overlap-container {
  margin: 0 auto;
  max-width: 75rem;
  position: relative;
}
@media (min-width: 1024px) {
  .kop-overlap-container {
    display: flex;
    flex-direction: row-reverse;
    padding-bottom: 1.5rem;
    padding-top: 3rem;
  }
}
@media (min-width: 1200px) {
  .kop-overlap-container {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}

.kop-overlap-item {
  width: 100%;
}
@media (min-width: 1024px) {
  .kop-overlap-item.kop-overlap-item--right {
    width: 57.6271186441%;
  }
}
.kop-overlap-item.kop-overlap-item--right .kop-overlap-picture {
  display: block;
  min-height: 50.6vw;
}
@media (max-width: 1023.98px) {
  .kop-overlap-item.kop-overlap-item--right .kop-overlap-picture {
    min-height: 100vw;
  }
}
.kop-overlap-item.kop-overlap-item--right .kop-overlap-picture.is-lazy-loaded, .kop-overlap-item.kop-overlap-item--right .kop-overlap-picture.not-lazy-loaded {
  min-height: inherit;
}
@media (min-width: 1024px) {
  .kop-overlap-item.kop-overlap-item--left {
    width: 42.3728813559%;
  }
}

.kop-overlap-video,
.kop-overlap-image {
  display: block;
  height: auto;
  width: 100%;
}

.kop-overlap-image-wrapper {
  position: relative;
}

.p-offline-picture {
  display: block;
}

.kop-overlap-media.kop-overlap-media--left {
  position: relative;
}
.kop-overlap-media.kop-overlap-media--left .kop-overlap-video {
  background: #000;
  margin: 1.5rem;
  position: relative;
  width: auto;
}
@media (min-width: 1024px) {
  .kop-overlap-media.kop-overlap-media--left .kop-overlap-video {
    margin: 0;
    width: 116%;
  }
}
.kop-overlap-media.kop-overlap-media--left .kop-overlap-image-wrapper {
  background: #000;
}
@media (min-width: 1024px) {
  .kop-overlap-media.kop-overlap-media--left .kop-overlap-image-wrapper {
    width: 116%;
  }
}

.kop-overlap-media .kop-overlap-cta {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 100%;
}
.kop-overlap-media .kop-overlap-cta:hover, .kop-overlap-media .kop-overlap-cta:active, .kop-overlap-media .kop-overlap-cta:focus {
  text-decoration: none;
}
@media (min-width: 1024px) {
  .kop-overlap-media .kop-overlap-cta.kop-overlap-cta--desktop-hover:hover .kop-overlap-cta-text, .kop-overlap-media .kop-overlap-cta.kop-overlap-cta--desktop-hover:active .kop-overlap-cta-text, .kop-overlap-media .kop-overlap-cta.kop-overlap-cta--desktop-hover:focus .kop-overlap-cta-text {
    display: inline-block;
  }
}
.kop-overlap-content-cta .kop-overlap-cta {
  margin: 0 0.3125rem;
}
@media (max-width: 1023.98px) {
  .kop-overlap-content-cta .kop-overlap-cta {
    font-size: 0.875rem;
  }
}

.kop-overlap-media .kop-overlap-cta-text {
  display: none;
  text-decoration: none;
}

.kop-overlap-content {
  font-size: 100%;
  padding: 1.5rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .kop-overlap-content {
    background: transparent !important;
    padding: 0 1.5rem 1.5rem 2.5rem;
    text-align: left;
  }
}
@media (min-width: 1200px) {
  .kop-overlap-content {
    padding: 3rem 1.5rem 1.5rem;
  }
}

.kop-overlap-content-logo {
  padding: 1rem 0;
}
@media (min-width: 1024px) {
  .kop-overlap-content-logo {
    padding: 0;
  }
}

.kop-overlap-content-logo-image {
  display: block;
  margin: 0.8125rem auto 0;
  max-height: 3.75rem;
  max-width: 20.9375rem;
}
@media (min-width: 1024px) {
  .kop-overlap-content-logo-image {
    margin: 0;
  }
}

.kop-overlap-content-header {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.375rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .kop-overlap-content-header {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 1024px) {
  .kop-overlap-content-header {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin: 1rem 0 0.5rem;
  }
}

.kop-overlap-content-header-link {
  color: inherit;
}
.kop-overlap-content-header-link:hover, .kop-overlap-content-header-link:active, .kop-overlap-content-header-link:focus {
  color: inherit;
  text-decoration: none;
}

.kop-overlap-content-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
  margin: 0 0 1.5625rem;
}
@media (min-width: 768px) {
  .kop-overlap-content-text {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}
@media (min-width: 1024px) {
  .kop-overlap-content-text {
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin: 0.5625rem 0 1rem;
  }
}

.kop-overlap-content-footnote {
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 0.5625rem 0 1rem;
}
@media (min-width: 1024px) {
  .kop-overlap-content-footnote {
    letter-spacing: 0.03125rem;
  }
}

@media (max-width: 1023.98px) {
  .kop-overlap-content-list {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

.kop-overlap-content-cta {
  margin: 0 0 1rem;
}
@media (min-width: 1024px) {
  .kop-overlap-content-cta.kop-overlap-content-cta--first {
    display: none;
  }
}
.kop-overlap-content-cta.kop-overlap-content-cta--always-visible {
  display: inline-block;
}
@media (min-width: 1024px) {
  .kop-overlap-content-cta.kop-overlap-content-cta--always-visible {
    display: block;
  }
}
.kop-overlap-content-cta.kop-overlap-content-cta--second {
  display: inline-block;
}
@media (min-width: 1024px) {
  .kop-overlap-content-cta.kop-overlap-content-cta--second {
    display: block;
  }
}

.kop-overlap-carousel {
  background-color: #fff;
  margin: 0 auto 2rem;
  max-width: 75rem;
  padding-top: 1.5rem;
  position: relative;
  width: 100%;
}
@media (max-width: 767.98px) {
  .kop-overlap-carousel .kop-product-carousel-name {
    font-size: 0.875rem;
  }
}
@media (max-width: 1023.98px) {
  .kop-overlap-carousel .kop-product-carousel-name {
    font-size: 0.875rem;
  }
}
@media (max-width: 767.98px) {
  .kop-overlap-carousel .price {
    font-size: 1rem;
  }
}
@media (max-width: 1023.98px) {
  .kop-overlap-carousel .price {
    font-size: 1rem;
  }
}

.kop-multi-ctas-wrapper {
  margin-bottom: 2.5rem;
  margin-top: 0.625rem;
  max-width: 56.25rem;
  text-align: center;
}
@media (min-width: 544px) {
  .kop-multi-ctas-wrapper {
    margin-bottom: 1.875rem;
    margin-top: 1.875rem;
  }
}

.kop-multi-ctas-header {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.kop-multi-ctas-text {
  font-size: 0.875rem;
  margin-top: 0.625rem;
}

.kop-multi-ctas {
  font-size: 0;
  margin-top: 1rem;
}

.kop-multi-ctas-btn {
  margin: 0.25rem;
  min-width: 47%;
  text-transform: none;
}
@media (min-width: 544px) {
  .kop-multi-ctas-btn {
    min-width: 11.25rem;
  }
}

/*md

# Hero

*/
@media (min-width: 768px) {
  .hidden-hotspots-up {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .kop-hero-hotspot.hidden-hotspots-down {
    display: none;
  }
}

.kop-hero-wrapper {
  position: relative;
}

.modal-contained.show {
  display: flex;
}
@media (max-width: 767.98px) {
  .modal-contained.show {
    display: none;
  }
}

.kop-hero-content-wrapper {
  pointer-events: none;
}
.without-hotspots .kop-hero-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
  text-align: center;
}
@media (min-width: 959px) {
  .without-hotspots .kop-hero-content-wrapper[data-vertical~=middle] {
    justify-content: center;
  }
  .without-hotspots .kop-hero-content-wrapper[data-vertical~=top] {
    justify-content: flex-start;
  }
  .without-hotspots .kop-hero-content-wrapper[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .without-hotspots .kop-hero-content-wrapper[data-horizontal~=center] {
    align-items: center;
  }
  .without-hotspots .kop-hero-content-wrapper[data-horizontal~=left] {
    align-items: flex-start;
  }
  .without-hotspots .kop-hero-content-wrapper[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1198.98px) {
  .without-hotspots .kop-hero-content-wrapper[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .without-hotspots .kop-hero-content-wrapper[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .without-hotspots .kop-hero-content-wrapper[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .without-hotspots .kop-hero-content-wrapper[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .without-hotspots .kop-hero-content-wrapper[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .without-hotspots .kop-hero-content-wrapper[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (min-width: 959px) {
  .without-hotspots .kop-hero-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .without-hotspots .kop-hero-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .without-hotspots .kop-hero-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1198.98px) {
  .without-hotspots .kop-hero-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .without-hotspots .kop-hero-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .without-hotspots .kop-hero-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1024px) {
  .without-hotspots .kop-hero-content-wrapper {
    padding: 0 4rem;
  }
}
@media (min-width: 1200px) {
  .without-hotspots .kop-hero-content-wrapper {
    padding: 2rem 6rem;
  }
}
@media (min-width: 1024px) {
  .without-hotspots .kop-hero-content-wrapper.overlay-content-text {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent !important;
  }
}
.with-hotspots .kop-hero-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
@media (min-width: 959px) {
  .with-hotspots .kop-hero-content-wrapper[data-vertical~=middle] {
    justify-content: center;
  }
  .with-hotspots .kop-hero-content-wrapper[data-vertical~=top] {
    justify-content: flex-start;
  }
  .with-hotspots .kop-hero-content-wrapper[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .with-hotspots .kop-hero-content-wrapper[data-horizontal~=center] {
    align-items: center;
  }
  .with-hotspots .kop-hero-content-wrapper[data-horizontal~=left] {
    align-items: flex-start;
  }
  .with-hotspots .kop-hero-content-wrapper[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1198.98px) {
  .with-hotspots .kop-hero-content-wrapper[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .with-hotspots .kop-hero-content-wrapper[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .with-hotspots .kop-hero-content-wrapper[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .with-hotspots .kop-hero-content-wrapper[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .with-hotspots .kop-hero-content-wrapper[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .with-hotspots .kop-hero-content-wrapper[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (min-width: 959px) {
  .with-hotspots .kop-hero-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .with-hotspots .kop-hero-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .with-hotspots .kop-hero-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1198.98px) {
  .with-hotspots .kop-hero-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .with-hotspots .kop-hero-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .with-hotspots .kop-hero-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (min-width: 768px) {
  .with-hotspots .kop-hero-content-wrapper {
    background-color: transparent !important;
    padding: 2rem 6rem;
  }
}
@media (max-width: 1023.98px) {
  .with-hotspots .kop-hero-content-wrapper {
    padding: 0;
  }
}
@media (min-width: 768px) {
  .with-hotspots .kop-hero-content-wrapper.overlay-content-text {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.text-beneath .kop-hero-content-wrapper {
  position: relative;
}
@media (max-width: 1023.98px) {
  .kop-hero-content-wrapper {
    padding: 0;
  }
}
@media (max-width: 1199.98px) {
  .kop-hero-content-wrapper.overlay-content-text-mobile {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
@media (max-width: 1199.98px) and (min-width: 959px) {
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-vertical~=middle] {
    justify-content: center;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-vertical~=top] {
    justify-content: flex-start;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-horizontal~=center] {
    align-items: center;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-horizontal~=left] {
    align-items: flex-start;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) and (max-width: 1198.98px) {
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) and (min-width: 959px) {
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1199.98px) and (max-width: 1198.98px) {
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-hero-content-wrapper.overlay-content-text-mobile[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}

.kop-hero-content {
  color: #fff;
  cursor: text;
  pointer-events: auto;
}
@media (max-width: 1023.98px) {
  .without-hotspots .kop-hero-content {
    color: #000;
  }
}
@media (max-width: 767.98px) {
  .with-hotspots .kop-hero-content {
    color: #000;
  }
}
@media (max-width: 1023.98px) {
  .kop-hero-content {
    margin: 0;
    padding: 1.5rem;
  }
}
@media (max-width: 1199.98px) {
  .kop-hero-content {
    display: flex;
    flex-direction: column;
  }
  .kop-hero-content div[data-mobile-content-order="1"] {
    order: 1;
  }
  .kop-hero-content div[data-mobile-content-order="2"] {
    order: 2;
  }
  .kop-hero-content div[data-mobile-content-order="3"] {
    order: 3;
  }
  .kop-hero-content div[data-mobile-content-order="4"] {
    order: 4;
  }
}
@media (max-width: 1199.98px) {
  .kop-hero-content .hide-on-mobile {
    display: none;
  }
}
@media (min-width: 1024px) {
  .kop-hero-content .hide-on-desktop {
    display: none;
  }
}

.kop-hero-content-logo {
  margin: 1rem 0;
}
@media (max-width: 1023.98px) {
  .kop-hero-content-logo {
    margin: 0;
    padding: 2rem 0;
  }
}
.kop-hero-content-logo img {
  height: auto;
  max-height: 3.75rem;
  max-width: 20.9375rem;
  width: auto;
}

.kop-hero-content-header h2,
.kop-hero-content-header .kop-hero-content-text {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.375rem;
  margin: 0 0 1rem;
  pointer-events: none;
  text-transform: uppercase;
}
@media (min-width: 544px) {
  .without-hotspots .kop-hero-content-header h2,
  .without-hotspots .kop-hero-content-header .kop-hero-content-text {
    align-self: auto;
    flex: 0 1 auto;
  }
}
@media (min-width: 768px) {
  .with-hotspots .kop-hero-content-header h2,
  .with-hotspots .kop-hero-content-header .kop-hero-content-text {
    align-self: auto;
    flex: 0 1 auto;
  }
}
@media (min-width: 544px) {
  .kop-hero-content-header h2,
  .kop-hero-content-header .kop-hero-content-text {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 1024px) {
  .kop-hero-content-header h2,
  .kop-hero-content-header .kop-hero-content-text {
    font-size: 3.5rem;
    letter-spacing: normal;
    line-height: 3.5rem;
    margin: 1rem 0 0.5rem;
  }
}

.kop-hero-content-copy h2,
.kop-hero-content-copy .kop-hero-content-text {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.375rem;
  margin: 0 0 1rem;
  pointer-events: none;
}
@media (min-width: 544px) {
  .without-hotspots .kop-hero-content-copy h2,
  .without-hotspots .kop-hero-content-copy .kop-hero-content-text {
    align-self: auto;
    flex: 0 1 auto;
  }
}
@media (min-width: 768px) {
  .with-hotspots .kop-hero-content-copy h2,
  .with-hotspots .kop-hero-content-copy .kop-hero-content-text {
    align-self: auto;
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .kop-hero-content-copy h2,
  .kop-hero-content-copy .kop-hero-content-text {
    font-size: 1.25rem;
    letter-spacing: normal;
    line-height: 1.5rem;
    margin: 0.625rem 0;
  }
}

.kop-hero-content-footnote h2,
.kop-hero-content-footnote .kop-hero-content-text {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03125rem;
  line-height: 1rem;
  margin: 0.625rem 0 1rem;
  pointer-events: none;
}
@media (min-width: 544px) {
  .without-hotspots .kop-hero-content-footnote h2,
  .without-hotspots .kop-hero-content-footnote .kop-hero-content-text {
    align-self: auto;
    flex: 0 1 auto;
  }
}
@media (min-width: 768px) {
  .with-hotspots .kop-hero-content-footnote h2,
  .with-hotspots .kop-hero-content-footnote .kop-hero-content-text {
    align-self: auto;
    flex: 0 1 auto;
  }
}

.kop-hero-content-ctas {
  display: inline-block;
  margin: 0.8125rem 0 -0.375rem;
}
@media (min-width: 1024px) {
  [data-alignment~=center] .kop-hero-content-ctas {
    align-items: center;
  }
  [data-alignment~=left] .kop-hero-content-ctas {
    align-items: flex-start;
  }
  [data-alignment~=right] .kop-hero-content-ctas {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) {
  .kop-hero-content-ctas {
    align-items: center;
  }
  [data-alignment-mobile~=center] .kop-hero-content-ctas {
    align-items: center;
  }
  [data-alignment-mobile~=left] .kop-hero-content-ctas {
    align-items: flex-start;
  }
  [data-alignment-mobile~=right] .kop-hero-content-ctas {
    align-items: flex-end;
  }
}
@media (max-width: 959.98px) {
  .kop-hero-content-ctas {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.625rem;
    padding: 0;
  }
}

.without-hotspots .kop-hero-btn-break {
  display: none;
}
@media (min-width: 544px) {
  .without-hotspots .kop-hero-btn-break {
    display: inline;
  }
}
@media (max-width: 767.98px) {
  .with-hotspots .kop-hero-btn-break {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .without-hotspots .kop-hero-content-wrapper .kop-hero-btn {
    margin: 0 0.5rem 1rem;
  }
}
@media (max-width: 767.98px) {
  .with-hotspots .kop-hero-content-wrapper .kop-hero-btn {
    margin: 0 0.5rem 1rem;
    min-width: 12rem;
  }
  .with-hotspots .kop-hero-content-wrapper .kop-hero-btn a:focus {
    color: #fff;
  }
}
@media (min-width: 1024px) {
  .kop-hero-content-wrapper[data-alignment~=center] .kop-hero-btn {
    margin: 0 0.375rem 0.8125rem;
  }
  .kop-hero-content-wrapper[data-alignment~=right] .kop-hero-btn {
    margin: 0 0 0.8125rem 0.8125rem;
  }
  .kop-hero-content-wrapper[data-alignment~=left] .kop-hero-btn {
    margin: 0 0.8125rem 0.8125rem 0;
  }
}
@media (max-width: 1023.98px) {
  .kop-hero-btn {
    font-size: 0.875rem;
  }
}

.kop-hero-menu {
  color: #333;
  display: none;
  left: 1.75rem;
  position: absolute;
  top: 1.75rem;
}
@media (min-width: 1024px) {
  .without-hotspots .kop-hero-menu {
    left: 6rem;
    top: 2rem;
  }
}
@media (min-width: 544px) {
  .without-hotspots .kop-hero-menu {
    display: block;
  }
}
@media (min-width: 768px) {
  .with-hotspots .kop-hero-menu {
    display: block;
    left: 6rem;
    top: 2rem;
  }
}
.kop-hero-menu ul {
  background-color: #f6f6f6;
  color: #333;
  display: block;
  list-style-type: none;
  margin: 0;
  min-width: 14rem;
  padding: 0.375rem 1.1875rem;
}
.kop-hero-menu ul li {
  border-bottom: 1px #ccc dotted;
}
.kop-hero-menu ul li a {
  color: #333;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.8125rem 0;
  text-transform: uppercase;
}
.kop-hero-menu ul li:first-child {
  border-bottom-style: solid;
}
.kop-hero-menu ul li:first-child a {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  padding: 0.3125rem 0;
}
.kop-hero-menu ul li:last-child {
  border-bottom: 0 none;
}

.kop-hero-media {
  position: relative;
}
@media (min-width: 1024px) {
  .kop-hero-media .video-play-icon,
  .kop-hero-media .video-pause-icon {
    margin: 0 auto;
  }
}

.kop-hero-media-link {
  display: block;
}

.kop-hero-media-mobile-link {
  display: none;
  position: relative;
}
@media (max-width: 767.98px) {
  .kop-hero-media-mobile-link {
    bottom: 0;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

.kop-hero-picture {
  display: none;
  height: 34.3vw;
  max-height: 24vw;
}
@media (max-width: 1023.98px) {
  .kop-hero-picture {
    height: 62vw;
  }
}
.kop-hero-picture.is-lazy-loaded, .kop-hero-picture.not-lazy-loaded {
  height: inherit;
  max-height: 100%;
}
@media (min-width: 768px) {
  .kop-hero-picture.show-desktop {
    display: block;
  }
}
@media (min-width: 544px) and (max-width: 1023.98px) {
  .kop-hero-picture.show-tablet {
    display: block;
  }
}
@media (max-width: 767.98px) {
  .kop-hero-picture.show-mobile {
    display: block;
  }
}

.kop-up-arrow {
  border-bottom: 10px solid white;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  bottom: 0;
  display: block;
  height: 0;
  left: 48%;
  position: absolute;
  width: 0;
}

.kop-hero-hotspot {
  background: radial-gradient(ellipse at center, #f00 0, #f00 2.75px, #fff 3.25px, #fff 7.75px, transparent 8.25px, transparent 15.75px, #000 16.25px, #000 19.75px, transparent 20px, transparent 100%);
  display: block;
  height: 2.5rem;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  position: absolute;
  width: 2.5rem;
  z-index: 2;
}
.kop-hero-hotspot:hover, .kop-hero-hotspot:active, .kop-hero-hotspot:focus {
  background: radial-gradient(ellipse at center, #f00 0, #f00 2.75px, #fff 3.25px, #fff 7.75px, transparent 8.25px, transparent 12.75px, #f00 13.25px, #f00 19.75px, transparent 20px, transparent 100%);
}

.modal-body .kop-hotspot-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 16.875rem;
  padding: 1.5rem;
  text-align: center;
  width: 16.875rem;
}
.modal-body .kop-hero-hotspot-tile {
  flex-shrink: 0;
  height: 6.25rem;
  width: 6.25rem;
}
.modal-body .kop-hero-hotspot-img {
  display: block;
  height: auto;
  width: 100%;
}
.modal-body .kop-hero-hotspot-info {
  flex-grow: 0;
  margin-left: 0;
  margin-top: 1.5rem;
  width: inherit;
}
.modal-body .kop-hero-hotspot-header {
  font-size: 1.625rem;
  line-height: 2rem;
  margin-bottom: 0.3125rem;
  word-break: break-word;
}
.modal-body .kop-hero-hotspot-body {
  font-size: 1.125rem;
  line-height: 1.375rem;
  word-break: break-word;
}

.hotspot-list {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  touch-action: manipulation;
  width: 100%;
}
@media (min-width: 1024px) {
  .without-hotspots .hotspot-list {
    display: none;
  }
}
@media (min-width: 768px) {
  .with-hotspots .hotspot-list {
    display: none;
  }
}
.hotspot-list .glide--slider .glide-carousel-track::before, .hotspot-list .glide--slider .glide-carousel-track::after {
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 2.5rem;
  z-index: 2;
}
.hotspot-list .glide--slider .glide-carousel-track::before {
  left: 0;
}
.hotspot-list .glide--slider .glide-carousel-track::after {
  right: 0;
}
.hotspot-list .glide--slider .zoom-icon {
  height: 5rem;
  width: 5rem;
}
@media (max-width: 1199.98px) {
  .hotspot-list .glide--slider .zoom-icon {
    height: 3.75rem;
    width: 3.75rem;
  }
}
@media (max-width: 1023.98px) {
  .hotspot-list .glide--slider .zoom-icon {
    height: 1.875rem;
    width: 1.875rem;
  }
}
.hotspot-list .glide--without-carousel .glide-carousel-slides {
  flex-wrap: wrap;
  padding: 0 1.5625rem;
}
.hotspot-list .glide--without-carousel .glide-carousel-slide {
  margin: 0 15px;
  width: calc(50% - 30px);
}
@media (min-width: 544px) {
  .hotspot-list .glide--without-carousel .glide-carousel-slide {
    width: calc(33.3333333333% - 30px);
  }
}
.hotspot-list .simple-carousel-arrows {
  -webkit-tap-highlight-color: transparent;
}
.hotspot-list .simple-carousel-arrows .simple-carousel-arrow {
  align-items: center;
  background: #fff;
  cursor: pointer;
  display: flex;
  fill: #999;
  height: 12.5rem;
  outline: none;
  position: absolute;
  top: 0;
  z-index: 3;
}
@media (min-width: 768px) {
  .hotspot-list .simple-carousel-arrows .simple-carousel-arrow {
    height: 25rem;
  }
}
.hotspot-list .simple-carousel-arrows .simple-carousel-arrow:hover, .hotspot-list .simple-carousel-arrows .simple-carousel-arrow:active, .hotspot-list .simple-carousel-arrows .simple-carousel-arrow:focus {
  fill: #333;
  text-decoration: none;
}
.hotspot-list .simple-carousel-arrows .simple-carousel-arrow--left {
  left: 0;
}
.hotspot-list .simple-carousel-arrows .simple-carousel-arrow--right {
  right: 0;
}
.hotspot-list .kop-tile-image {
  display: block;
  height: auto;
  width: 100%;
}
@media (max-width: 1023.98px) {
  .hotspot-list .price {
    font-size: 1rem;
  }
}

.hotspot-list[data-type=content] {
  display: none;
}
@media (max-width: 1023.98px) {
  .without-hotspots .hotspot-list[data-type=content] {
    display: block;
    margin-bottom: 2rem;
  }
}
@media (max-width: 767.98px) {
  .with-hotspots .hotspot-list[data-type=content] {
    display: block;
    margin-bottom: 2rem;
  }
}
.hotspot-list[data-type=content] .kop-hotspot-content {
  align-items: center;
  display: flex;
  margin: 1rem;
}
@media (max-width: 1199.98px) {
  .hotspot-list[data-type=content] .kop-hotspot-content {
    display: block;
    margin: 1rem 0;
  }
}
.hotspot-list[data-type=content] .kop-hero-hotspot-tile {
  flex-shrink: 0;
  height: 6.25rem;
  width: 6.25rem;
}
@media (max-width: 1199.98px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-tile {
    height: auto;
    width: auto;
  }
}
.hotspot-list[data-type=content] .kop-hero-hotspot-img {
  display: block;
  height: auto;
  width: 100%;
}
.hotspot-list[data-type=content] .kop-hero-hotspot-info {
  flex-grow: 1;
  margin-left: 1rem;
}
@media (max-width: 1199.98px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-info {
    border-top: 2px solid #ccc;
    margin-left: 0;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}
.hotspot-list[data-type=content] .kop-hero-hotspot-header {
  font-size: 1.375rem;
  line-height: 1.625rem;
  margin-bottom: 0.3125rem;
  word-break: break-word;
}
@media (max-width: 1199.98px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-header {
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
  }
}
@media (min-width: 544px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-header {
    font-size: 1.625rem;
    line-height: 2rem;
  }
}
@media (min-width: 1200px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-header {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}
.hotspot-list[data-type=content] .kop-hero-hotspot-body {
  font-size: 1.125rem;
  line-height: 1.375rem;
  word-break: break-word;
}
@media (max-width: 1199.98px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-body {
    letter-spacing: 0;
    margin: 0 0 1rem;
  }
}
@media (min-width: 1200px) {
  .hotspot-list[data-type=content] .kop-hero-hotspot-body {
    font-size: 0.875rem;
    line-height: 1rem;
  }
}

.modal-contained {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  align-items: center;
  display: none;
  justify-content: center;
  z-index: 3;
}
.modal-contained .product-name {
  font-size: 1.625rem;
}
.modal-contained .price {
  font-size: 1.125rem;
}

.modal-contained-close-icon {
  height: 0.9375rem;
  width: 0.9375rem;
}

.modal-contained-dialog {
  align-self: center;
  justify-self: center;
  max-height: 100%;
  max-width: 37.5rem;
  min-width: 18.75rem;
  z-index: 3;
}
.modal-contained-dialog .modal-header {
  border-bottom: 0;
  display: block;
  padding: 0;
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
  z-index: 1;
}
.modal-contained-dialog .modal-body {
  padding: 1.25rem;
}
.modal-contained-dialog .modal-body .product-detail {
  width: 34.875rem;
}

.countdown-kop {
  display: flex;
  justify-content: center;
}
.countdown-kop .item,
.countdown-kop .separator {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 2rem;
  text-align: center;
}
@media (min-width: 544px) {
  .without-hotspots .countdown-kop .item,
  .without-hotspots .countdown-kop .separator {
    font-size: 2.5rem;
    letter-spacing: 0.3125rem;
    line-height: 2.5rem;
  }
}
@media (min-width: 768px) {
  .with-hotspots .countdown-kop .item,
  .with-hotspots .countdown-kop .separator {
    font-size: 2.5rem;
    letter-spacing: 0.3125rem;
    line-height: 2.5rem;
  }
}
.countdown-kop .separator {
  margin: 0 0.3125rem;
  text-align: center;
}
.countdown-kop .label {
  display: block;
  font-size: 1rem;
  letter-spacing: 0;
  margin-top: -0.1875rem;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 1024px) and (min-width: 544px) {
  .without-hotspots .kop-hero-content-wrapper[data-alignment~=center] .countdown-kop {
    justify-content: center;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .with-hotspots .kop-hero-content-wrapper[data-alignment~=center] .countdown-kop {
    justify-content: center;
  }
}
@media (min-width: 1024px) and (min-width: 544px) {
  .without-hotspots .kop-hero-content-wrapper[data-alignment~=left] .countdown-kop {
    justify-content: flex-start;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .with-hotspots .kop-hero-content-wrapper[data-alignment~=left] .countdown-kop {
    justify-content: flex-start;
  }
}
@media (min-width: 1024px) and (min-width: 544px) {
  .without-hotspots .kop-hero-content-wrapper[data-alignment~=right] .countdown-kop {
    justify-content: flex-end;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .with-hotspots .kop-hero-content-wrapper[data-alignment~=right] .countdown-kop {
    justify-content: flex-start;
  }
}
@media (min-width: 960px) {
  .kop-content-carousel-wrapper .kop-content-carousel .simple-carousel-bullets {
    position: static;
  }
}

@media (max-width: 959px) {
  .kop-hero-content-ctas {
    margin: 0 !important;
  }
  .kop-hero-content-ctas .btn:first-of-type {
    margin-top: 0.8125rem !important;
  }
  .kop-hero-content {
    padding-bottom: 0;
  }
}
/*md

# Thirds

*/
.kop-thirds-wrapper {
  align-items: stretch;
  display: flex;
  flex-direction: column;
}
@media (min-width: 960px) {
  .kop-thirds-wrapper {
    flex-direction: row;
  }
}

.kop-thirds-media {
  position: relative;
}
@media (min-width: 960px) {
  .kop-thirds-media {
    order: 1;
    width: 66.6666666667%;
  }
}

.kop-thirds-media-picture {
  display: block;
  min-height: 34vw;
}
@media (max-width: 1023.98px) {
  .kop-thirds-media-picture {
    min-height: 52.2vw;
  }
}
.kop-thirds-media-picture.is-lazy-loaded {
  min-height: inherit;
}

.kop-thirds-content-link {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.kop-thirds-content-wrapper {
  position: relative;
  z-index: 2;
}

.kop-thirds-content {
  align-items: center;
  background-color: #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  text-align: center;
}
@media (min-width: 960px) {
  .kop-thirds-content {
    width: 33.3333333333%;
  }
  .kop-thirds-content.kop-thirds-content--left {
    order: 0;
  }
  .kop-thirds-content.kop-thirds-content--right {
    order: 2;
  }
}

.kop-thirds-content-img-wrapper {
  margin-bottom: 1rem;
}

.kop-thirds-content-img {
  height: auto;
  max-height: 3.75rem;
  max-width: 100%;
  width: auto;
}

.kop-thirds-content-header {
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.375rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
@media (min-width: 544px) {
  .kop-thirds-content-header {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 960px) {
  .kop-thirds-content-header {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin: 1rem 0 0.5rem;
  }
}

.kop-thirds-content-copy {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
  margin: 0 0 1rem;
}
@media (min-width: 544px) {
  .kop-thirds-content-copy {
    font-size: 1.125rem;
  }
}
@media (min-width: 960px) {
  .kop-thirds-content-copy {
    font-size: 1.25rem;
    margin: 0.5625rem 0;
  }
}

.kop-thirds-content-cta {
  margin: 0.8125rem 0 -0.375rem;
}
@media (max-width: 959.98px) {
  .kop-thirds-content-cta {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem;
  }
}

.kop-thirds-btn {
  display: inline-block;
  margin: 0 0.5rem 1rem;
}
@media (max-width: 959.98px) {
  .kop-thirds-btn {
    font-size: 0.875rem;
  }
}

.kop-thirds-content-footnote {
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 0.5625rem 0 1rem;
}
@media (min-width: 1200px) {
  .kop-thirds-content-footnote {
    letter-spacing: 0.03125rem;
  }
}

/*md

# Trending Now

*/
@media (min-width: 768px) {
  .kop-trendinggroup-wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}

.kop-trendingtile {
  width: 100%;
}
@media (max-width: 1023.98px) {
  .kop-trendingtile.overlay-content-text-mobile {
    margin-bottom: 1.1875rem;
    position: relative;
  }
}

.kop-trendingtile-media {
  position: relative;
}
.kop-trendingtile-media.background-color-styling {
  padding-top: 100%;
}

.kop-trendingtile-link {
  display: block;
}
.kop-trendingtile-link:focus-visible {
  outline-offset: -2px;
}

.kop-trendingtile-picture {
  display: block;
  min-height: 17.81vw;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .kop-trendingtile-picture {
    min-height: 54vw;
  }
}
@media (max-width: 767.98px) {
  .kop-trendingtile-picture {
    min-height: 100vw;
  }
}
.kop-trendingtile-picture.is-lazy-loaded {
  min-height: inherit;
}

.kop-trendingtile-wrapper {
  position: relative;
}

.kop-trendingtile-content-wrapper {
  pointer-events: none;
  position: relative;
}
@media (min-width: 959px) {
  .kop-trendingtile-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1198.98px) {
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1200px) {
  .kop-trendingtile-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    bottom: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
@media (min-width: 1200px) and (min-width: 959px) {
  .kop-trendingtile-content-wrapper[data-vertical~=middle] {
    justify-content: center;
  }
  .kop-trendingtile-content-wrapper[data-vertical~=top] {
    justify-content: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .kop-trendingtile-content-wrapper[data-horizontal~=center] {
    align-items: center;
  }
  .kop-trendingtile-content-wrapper[data-horizontal~=left] {
    align-items: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (min-width: 1200px) and (max-width: 1198.98px) {
  .kop-trendingtile-content-wrapper[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .kop-trendingtile-content-wrapper[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .kop-trendingtile-content-wrapper[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .kop-trendingtile-content-wrapper[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (min-width: 1200px) and (min-width: 959px) {
  .kop-trendingtile-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1200px) and (max-width: 1198.98px) {
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1200px) {
  .kop-trendingtile-content-wrapper.overlay-content-text {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media (max-width: 1199.98px) {
  .kop-trendingtile-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: center;
  }
}
@media (max-width: 1199.98px) and (min-width: 959px) {
  .kop-trendingtile-content-wrapper[data-vertical~=middle] {
    justify-content: center;
  }
  .kop-trendingtile-content-wrapper[data-vertical~=top] {
    justify-content: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .kop-trendingtile-content-wrapper[data-horizontal~=center] {
    align-items: center;
  }
  .kop-trendingtile-content-wrapper[data-horizontal~=left] {
    align-items: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) and (max-width: 1198.98px) {
  .kop-trendingtile-content-wrapper[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .kop-trendingtile-content-wrapper[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .kop-trendingtile-content-wrapper[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .kop-trendingtile-content-wrapper[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .kop-trendingtile-content-wrapper[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) and (min-width: 959px) {
  .kop-trendingtile-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1199.98px) and (max-width: 1198.98px) {
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-trendingtile-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1199.98px) {
  .kop-trendingtile-content-wrapper.overlay-content-text-mobile {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.kop-trendingtile-content {
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .kop-trendingtile-content {
    padding: 2rem 1.5rem;
  }
}
@media (max-width: 1199.98px) {
  .kop-trendingtile-content .hide-on-mobile {
    display: none;
  }
}
@media (min-width: 1024px) {
  .kop-trendingtile-content .hide-on-desktop {
    display: none;
  }
}

.kop-trendingtile-content-header > h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.375rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
@media (min-width: 544px) {
  .kop-trendingtile-content-header > h3 {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 768px) {
  .kop-trendingtile-content-header > h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 0 0 0.5rem;
  }
}

.kop-trendingtile-content-copy {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
  margin: 0 0 1rem;
}
@media (min-width: 544px) {
  .kop-trendingtile-content-copy {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}
@media (min-width: 768px) {
  .kop-trendingtile-content-copy {
    font-size: 0.875rem;
    line-height: 1.125rem;
    margin: 0 0 0.5625rem;
  }
}

.kop-trendingtile-content-cta {
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem;
}
@media (min-width: 1024px) {
  .kop-trendingtile-content-cta {
    align-items: center;
  }
  [data-alignment~=center] .kop-trendingtile-content-cta {
    align-items: center;
  }
  [data-alignment~=right] .kop-trendingtile-content-cta {
    align-items: flex-end;
  }
  [data-alignment~=left] .kop-trendingtile-content-cta {
    align-items: flex-start;
  }
}
@media (max-width: 1199.98px) {
  .kop-trendingtile-content-cta {
    align-items: center;
  }
  [data-alignment-mobile~=center] .kop-trendingtile-content-cta {
    align-items: center;
  }
  [data-alignment-mobile~=right] .kop-trendingtile-content-cta {
    align-items: flex-end;
  }
  [data-alignment-mobile~=left] .kop-trendingtile-content-cta {
    align-items: flex-start;
  }
}

.kop-trendingtile-btn {
  margin: 0 0.3125rem 0.75rem;
  pointer-events: auto;
}
@media (max-width: 767.98px) {
  .kop-trendingtile-btn {
    font-size: 0.875rem;
  }
}
@media (min-width: 768px) {
  .kop-trendingtile-btn:nth-child(3) {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
}

.kop-trendinggroup {
  padding: 1.25rem 0 0 0;
}
@media (min-width: 768px) {
  .kop-trendinggroup {
    padding: 1.25rem 1.25rem 0;
  }
}
@media (min-width: 960px) {
  .kop-trendinggroup {
    background-color: #fff !important;
  }
}
@media (min-width: 1024px) {
  .kop-trendinggroup.three-tiles .kop-trendingtile-media.background-color-styling {
    padding-top: 55.4166%;
  }
}

/*md

# Quote

*/
.kop-quote {
  margin: 0 auto;
  max-width: 90rem;
  padding: 2rem 3rem;
}
@media (min-width: 960px) {
  .kop-quote {
    padding: 3rem 0;
  }
}

.kop-quote-wrapper {
  color: #000;
  text-align: center;
}
.kop-quote-wrapper.kop-quote-wrapper--singlecolumn {
  padding-bottom: 4rem;
  padding-top: 4rem;
}
@media (min-width: 960px) {
  .kop-quote-wrapper.kop-quote-wrapper--singlecolumn {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.kop-quote-header {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.375rem;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
@media (min-width: 544px) {
  .kop-quote-header {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 960px) {
  .kop-quote-header {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
}

.kop-quote-content-wrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kop-quote-wrapper--singlecolumn .kop-quote-content-wrapper {
  display: block;
  flex-direction: unset;
}
@media (min-width: 960px) {
  .kop-quote-content-wrapper {
    flex-direction: row;
  }
}

.kop-quote-content {
  align-self: center;
  justify-self: center;
  width: 100%;
}
.kop-quote-content-wrapper--layout-left .kop-quote-content {
  order: 2;
}
.kop-quote-content-wrapper--layout-right .kop-quote-content {
  order: 2;
}
.kop-quote-content-wrapper--layout-right .kop-quote-content {
  padding-bottom: 1.5rem;
}
@media (min-width: 960px) {
  .kop-quote-content {
    padding: 2rem 4rem;
    width: 50%;
  }
  .kop-quote-content-wrapper--layout-left .kop-quote-content {
    border-left: 1px #999 solid;
    order: 2;
  }
  .kop-quote-content-wrapper--layout-right .kop-quote-content {
    border-right: 1px #999 solid;
    order: 1;
    padding-bottom: 2rem;
  }
  .kop-quote-wrapper--singlecolumn .kop-quote-content {
    padding: 0;
    width: 100%;
  }
}

.kop-quote-content-copy {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5rem;
}
@media (min-width: 544px) {
  .kop-quote-content-copy {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 960px) {
  .kop-quote-content-copy {
    font-size: 1.25rem;
    line-height: 1.875rem;
  }
}

.kop-quote-content-cta {
  display: block;
  margin-top: 1.25rem;
}

@media (max-width: 959.98px) {
  .kop-quote-btn {
    font-size: 0.875rem;
  }
}

.kop-quote-text-wrapper {
  align-self: center;
  justify-self: center;
}
.kop-quote-content-wrapper--layout-left .kop-quote-text-wrapper {
  order: 1;
  padding-bottom: 1.5rem;
}
.kop-quote-content-wrapper--layout-right .kop-quote-text-wrapper {
  order: 1;
  padding-bottom: 1.5rem;
}
@media (min-width: 960px) {
  .kop-quote-text-wrapper {
    padding: 2rem 4rem;
    width: 50%;
  }
  .kop-quote-content-wrapper--layout-left .kop-quote-text-wrapper {
    border-right: 1px #999 solid;
    margin-right: -0.0625rem;
    order: 1;
    padding-bottom: 2rem;
  }
  .kop-quote-content-wrapper--layout-right .kop-quote-text-wrapper {
    border-left: 1px #999 solid;
    margin-left: -0.0625rem;
    order: 2;
    padding-bottom: 2rem;
  }
  .kop-quote-wrapper--singlecolumn .kop-quote-text-wrapper {
    width: 100%;
  }
}

.kop-quote-text {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.125rem;
  margin: 0 0 0.5rem;
  quotes: "“" "”" "«" "»";
  text-transform: uppercase;
}
@media (min-width: 544px) {
  .kop-quote-text {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}
@media (min-width: 960px) {
  .kop-quote-text {
    font-size: 2rem;
    letter-spacing: 0.125rem;
    line-height: 2rem;
  }
}

/*md

# SideBy

*/
.kop-sidebygroup {
  margin: 0 auto;
  max-width: 90rem;
}
@media (min-width: 1200px) {
  .kop-sidebygroup {
    padding: 1.25rem 0;
  }
}

@media (min-width: 1200px) {
  .kop-sidebygroup-wrapper {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.kop-sidebytile {
  margin: 0 auto;
  max-width: 48rem;
}
@media (min-width: 1200px) {
  .kop-sidebytile {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 50%;
  }
}

.kop-sidebytile-wrapper,
.kop-sidebytile-media {
  align-self: center;
  flex-grow: 1;
  position: relative;
}

.kop-sidebytile-link {
  display: block;
}

.kop-sidebytile-picture {
  display: block;
  min-height: 32.5vw;
}
@media (max-width: 1023.98px) {
  .kop-sidebytile-picture {
    min-height: 100vw;
  }
}
.kop-sidebytile-picture.is-lazy-loaded {
  min-height: inherit;
}

@media (max-width: 1199.98px) {
  .kop-sidebytile-wrapper.overlay-content-text-mobile {
    margin-bottom: 1.1875rem;
  }
}
.kop-sidebytile-wrapper.background-color-styling {
  width: 100%;
}
.kop-sidebytile-wrapper.background-color-styling .kop-sidebytile-media {
  padding-top: 100%;
}

.kop-sidebytile-content-wrapper {
  pointer-events: none;
  position: relative;
  text-align: center;
}
@media (min-width: 959px) {
  .kop-sidebytile-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1198.98px) {
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1200px) {
  .kop-sidebytile-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    bottom: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
  }
}
@media (min-width: 1200px) and (min-width: 959px) {
  .kop-sidebytile-content-wrapper[data-vertical~=middle] {
    justify-content: center;
  }
  .kop-sidebytile-content-wrapper[data-vertical~=top] {
    justify-content: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .kop-sidebytile-content-wrapper[data-horizontal~=center] {
    align-items: center;
  }
  .kop-sidebytile-content-wrapper[data-horizontal~=left] {
    align-items: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (min-width: 1200px) and (max-width: 1198.98px) {
  .kop-sidebytile-content-wrapper[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .kop-sidebytile-content-wrapper[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .kop-sidebytile-content-wrapper[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .kop-sidebytile-content-wrapper[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (min-width: 1200px) and (min-width: 959px) {
  .kop-sidebytile-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1200px) and (max-width: 1198.98px) {
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (min-width: 1200px) {
  .kop-sidebytile-content-wrapper.overlay-content-text {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media (max-width: 1199.98px) {
  .kop-sidebytile-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
@media (max-width: 1199.98px) and (min-width: 959px) {
  .kop-sidebytile-content-wrapper[data-vertical~=middle] {
    justify-content: center;
  }
  .kop-sidebytile-content-wrapper[data-vertical~=top] {
    justify-content: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-vertical~=bottom] {
    justify-content: flex-end;
  }
  .kop-sidebytile-content-wrapper[data-horizontal~=center] {
    align-items: center;
  }
  .kop-sidebytile-content-wrapper[data-horizontal~=left] {
    align-items: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-horizontal~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) and (max-width: 1198.98px) {
  .kop-sidebytile-content-wrapper[data-vertical-mobile~=middle] {
    justify-content: center;
  }
  .kop-sidebytile-content-wrapper[data-vertical-mobile~=top] {
    justify-content: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-vertical-mobile~=bottom] {
    justify-content: flex-end;
  }
  .kop-sidebytile-content-wrapper[data-horizontal-mobile~=center] {
    align-items: center;
  }
  .kop-sidebytile-content-wrapper[data-horizontal-mobile~=left] {
    align-items: flex-start;
  }
  .kop-sidebytile-content-wrapper[data-horizontal-mobile~=right] {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) and (min-width: 959px) {
  .kop-sidebytile-content-wrapper[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1199.98px) and (max-width: 1198.98px) {
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-sidebytile-content-wrapper[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1199.98px) {
  .kop-sidebytile-content-wrapper.overlay-content-text-mobile {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.kop-sidebytile-content {
  color: #fff;
  padding: 1.5rem;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .kop-sidebytile-content {
    padding: 2rem 1.5rem;
  }
}
@media (max-width: 1199.98px) {
  .kop-sidebytile-content {
    color: #000;
  }
}
@media (max-width: 1199.98px) {
  .kop-sidebytile-content .hide-on-mobile {
    display: none;
  }
}
@media (min-width: 1024px) {
  .kop-sidebytile-content .hide-on-desktop {
    display: none;
  }
}

.kop-sidebytile-content-header > h2 {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.375rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
@media (min-width: 544px) {
  .kop-sidebytile-content-header > h2 {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 1200px) {
  .kop-sidebytile-content-header > h2 {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin: 0 0 0.5rem;
  }
}

.kop-sidebytile-content-copy {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.125rem;
  margin: 0 0 1rem;
}
@media (min-width: 544px) {
  .kop-sidebytile-content-copy {
    font-size: 1.125rem;
  }
}
@media (min-width: 1200px) {
  .kop-sidebytile-content-copy {
    margin: 0 0 1.25rem;
  }
}

.kop-sidebytile-content-cta {
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem;
}
@media (min-width: 1024px) {
  [data-alignment~=center] .kop-sidebytile-content-cta {
    align-items: center;
  }
  [data-alignment~=left] .kop-sidebytile-content-cta {
    align-items: flex-start;
  }
  [data-alignment~=right] .kop-sidebytile-content-cta {
    align-items: flex-end;
  }
}
@media (max-width: 1199.98px) {
  .kop-sidebytile-content-cta {
    align-items: center;
  }
  [data-alignment-mobile~=center] .kop-sidebytile-content-cta {
    align-items: center;
  }
  [data-alignment-mobile~=left] .kop-sidebytile-content-cta {
    align-items: flex-start;
  }
  [data-alignment-mobile~=right] .kop-sidebytile-content-cta {
    align-items: flex-end;
  }
}

.kop-sidebytile-btn {
  margin: 0 0.375rem 0.75rem;
  pointer-events: auto;
}
@media (max-width: 1199.98px) {
  .kop-sidebytile-btn {
    font-size: 0.875rem;
    margin: 0 0.5rem 0.75rem;
  }
}

/*md

# Promo Banner

*/
.kop-bannergroup.kop-bannergroup--light-gray-black {
  background-color: #eee;
  color: #000;
}
.kop-bannergroup.kop-bannergroup--dark-gray-white {
  background-color: #222;
  color: #fff;
}

.kop-bannergroup-carousel {
  margin: 0 auto;
  max-width: 60rem;
  position: relative;
  touch-action: manipulation;
}
.kop-bannergroup-carousel .simple-carousel-arrows {
  -webkit-tap-highlight-color: transparent;
}
.kop-bannergroup-carousel .simple-carousel-arrow {
  align-items: center;
  display: flex;
  fill: #000;
  height: 100%;
  position: absolute;
  top: 0;
  transition: fill 0.5s ease;
}
.kop-bannergroup--light-gray-black .kop-bannergroup-carousel .simple-carousel-arrow {
  fill: #000;
}
.kop-bannergroup--light-gray-black .kop-bannergroup-carousel .simple-carousel-arrow:hover, .kop-bannergroup--light-gray-black .kop-bannergroup-carousel .simple-carousel-arrow:active, .kop-bannergroup--light-gray-black .kop-bannergroup-carousel .simple-carousel-arrow:focus {
  fill: #000;
}
.kop-bannergroup--dark-gray-white .kop-bannergroup-carousel .simple-carousel-arrow {
  fill: #fff;
}
.kop-bannergroup--dark-gray-white .kop-bannergroup-carousel .simple-carousel-arrow:hover, .kop-bannergroup--dark-gray-white .kop-bannergroup-carousel .simple-carousel-arrow:active, .kop-bannergroup--dark-gray-white .kop-bannergroup-carousel .simple-carousel-arrow:focus {
  fill: #fff;
}
.kop-bannergroup-carousel .simple-carousel-arrow:hover, .kop-bannergroup-carousel .simple-carousel-arrow:active, .kop-bannergroup-carousel .simple-carousel-arrow:focus {
  fill: #000;
  text-decoration: none;
}
.kop-bannergroup-carousel .simple-carousel-arrow--left {
  left: 0;
}
.kop-bannergroup-carousel .simple-carousel-arrow--right {
  right: 0;
}
.kop-bannergroup-carousel .zoom-icon {
  height: 1.25rem;
  margin: 0.9375rem;
  width: 1.25rem;
}

.kop-bannertile {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 960px) {
  .kop-bannertile {
    margin: 0;
  }
}

.kop-bannertile-content {
  padding: 1rem 2.5rem;
  text-align: center;
}

.kop-bannertile-content-copy {
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.125rem;
}
@media (min-width: 960px) {
  .kop-bannertile-content-copy {
    display: inline;
  }
}

@media (min-width: 960px) {
  .kop-bannertile-content-cta {
    display: inline;
  }
}
.kop-bannertile-content-cta .kop-bannertile-btn {
  color: inherit;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 0.875rem;
  margin: 0.1875rem 0.375rem 0;
  padding: 0;
  text-decoration: underline;
  white-space: normal;
}
@media (min-width: 960px) {
  .kop-bannertile-content-cta .kop-bannertile-btn {
    margin: 0 0.5rem;
  }
}

.kop-bannertile__details .modal-body {
  margin: 1.25rem;
}

.kop-bannertile-details-header {
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

/*md

# Promo Tile

*/
.kop-promotile {
  background-color: transparent;
  color: #fff;
  margin-bottom: 1.875rem;
  overflow: hidden;
  padding: 0.25rem;
}
@media (max-width: 767.98px) {
  .col-12 .kop-promotile {
    height: auto;
  }
  .col-12 .kop-promotile .kop-promotile-image-wrapper picture {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .col-6 .kop-promotile {
    min-height: 20.625rem;
  }
}
@media (min-width: 768px) {
  .col-sm-6 .kop-promotile {
    min-height: 29.5625rem;
  }
}
@media (min-width: 1200px) {
  .col-lg-6 .kop-promotile {
    min-height: 44.6875rem;
  }
}
@media (min-width: 768px) {
  .kop-promotile {
    min-height: 25.625rem;
  }
}
@media (min-width: 1200px) {
  .kop-promotile {
    min-height: 28.5rem;
  }
}
.kop-promotile.kop-promotile--flip {
  perspective: 62.5rem;
  position: relative;
  z-index: 1;
}
.kop-promotile.kop-promotile--flip .kop-promotile-wrapper {
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.6s ease-in-out;
  width: 100%;
}
.kop-promotile.kop-promotile--is-flipped .kop-promotile-wrapper {
  transform: rotateY(180deg);
}

.kop-promotile,
.kop-promotile-wrapper,
.kop-promotile-container,
.kop-promotile-media,
.kop-promotile-image {
  height: 100%;
}

.kop-promotile-container {
  position: relative;
}
.kop-promotile--flip .kop-promotile-container.kop-promotile-container--front-card, .kop-promotile--flip .kop-promotile-container.kop-promotile-container--back-card { /* hide back of pane during swap */
  backface-visibility: hidden;
  left: 0;
  position: relative;
  top: 0;
}
.kop-promotile--flip .kop-promotile-container.kop-promotile-container--front-card {
  transform: rotateY(0deg);
  z-index: 1;
}
.kop-promotile--flip .kop-promotile-container.kop-promotile-container--back-card {
  position: absolute;
  transform: rotateY(180deg);
  width: 100%;
  z-index: 2;
}

.kop-promotile-flip-corner {
  background-color: transparent;
  cursor: pointer;
  display: block;
  height: 3.75rem;
  pointer-events: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 3.75rem;
  z-index: 3;
}
.kop-promotile-flip-corner:hover .kop-promotile-flip-icon, .kop-promotile-flip-corner:active .kop-promotile-flip-icon, .kop-promotile-flip-corner:focus .kop-promotile-flip-icon {
  fill: #ae946d;
}
.kop-promotile-flip-corner::before {
  border: 0 solid transparent;
  border-bottom-width: 3.75rem;
  border-right: 3.75rem solid #fff;
  content: "";
  position: absolute;
}

.kop-promotile-flip-icon {
  fill: #181818;
  height: 1.125rem;
  position: absolute;
  right: 0.375rem;
  top: 0.375rem;
  width: 1.125rem;
}

.kop-promotile-media {
  left: 0;
  position: relative;
  top: 0;
  z-index: 1;
}

.kop-promotile-image-wrapper picture {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.kop-promotile-image {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.kop-promotile-content {
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.kop-promotile-content.kop-promotile-content--verticalalign-top {
  top: 0;
}
.kop-promotile-content.kop-promotile-content--verticalalign-middle {
  display: flex;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.kop-promotile-content.kop-promotile-content--verticalalign-middle .kop-promotile-content-padding {
  align-self: center;
}
.kop-promotile-content.kop-promotile-content--verticalalign-bottom {
  bottom: 0;
}
.kop-promotile-content.kop-promotile-content--textalign-left {
  text-align: left;
}
.kop-promotile-content.kop-promotile-content--textalign-center {
  text-align: center;
}
.kop-promotile-content.kop-promotile-content--textalign-right {
  text-align: right;
}

.kop-promotile-content-padding {
  padding: 1.25rem;
  width: 100%;
}
@media (max-width: 767.98px) {
  .col-6 .kop-promotile-content-padding {
    padding: 0.625rem;
  }
}

.kop-promotile-header {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5rem;
  margin: 0 0 0.625rem;
}
@media (min-width: 768px) {
  .kop-promotile-header {
    font-size: 2rem;
    line-height: 2rem;
  }
}

.kop-promotile-text {
  line-height: 1.25rem;
  margin: 0 0 0.8125rem;
  margin: 0 0 1.25rem;
}

.kop-promotile-cta .btn {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}
@media (min-width: 768px) {
  .kop-promotile-cta .btn {
    font-size: 1rem;
  }
}

.kop-promotile-video-btn {
  transition: opacity 0.6s ease;
  display: inline-block;
  margin-bottom: 2.5rem;
  opacity: 0.8;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .kop-promotile-video-btn {
    transition: none;
  }
}
.kop-promotile-video-btn:hover, .kop-promotile-video-btn:active, .kop-promotile-video-btn:focus {
  opacity: 1;
}

.kop-promotile-video-icon {
  height: 4rem;
  opacity: 0.8;
  width: 4rem;
}

/*md

# Calendar

*/
.kop-calgroup-wrapper {
  background-position: center;
  background-repeat: repeat;
  overflow: hidden;
}

.kop-calgroup-container {
  margin-top: 4.0625rem;
  position: relative;
}

.kop-calgroup-header {
  margin-bottom: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .kop-calgroup-header {
    left: 0.625rem;
    position: absolute;
    top: 0;
    width: 40%;
  }
}
@media (min-width: 960px) {
  .kop-calgroup-header {
    width: 46%;
  }
}

.kop-calgroup-header-logo {
  margin: 0 auto 1rem;
  max-width: 31.25rem;
  padding: 0 1rem;
}
.kop-calgroup-header-logo img {
  height: auto;
  width: 100%;
}

.kop-calgroup-header-header {
  color: #000;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.125rem;
  line-height: 2rem;
  margin: 0 0 1rem;
  padding: 0 1rem;
  text-transform: uppercase;
}

.kop-calgroup-header-text {
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25rem;
  margin: 0 0 1rem;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .kop-calgroup-header-text {
    font-size: 1.25rem;
    line-height: 1.5rem;
    margin-left: 0;
    margin-right: 0;
  }
}

.kop-caldate-releaseMonth {
  align-items: center;
  bottom: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  line-height: 1rem;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-45deg);
  z-index: 2;
}

.kop-caldate-releaseMonth-diamond {
  display: block;
  left: 32.8%;
  padding: 13.4%;
  position: relative;
  transform: rotate(45deg);
  transform-origin: top left;
  width: 25%;
}

.kop-caldate-releaseMonth-diamond-img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-45deg) scale(1.4);
  width: 100%;
}

.kop-caldate-releaseMonth-year {
  font-size: 0.875rem;
  letter-spacing: -0.0625rem;
  z-index: 1;
}
@media (min-width: 960px) {
  .kop-caldate-releaseMonth-year {
    font-size: 1.125rem;
  }
}

.kop-caldate-releaseMonth-month {
  font-size: 2.25rem;
  font-weight: 600;
  z-index: 1;
}
@media (min-width: 960px) {
  .kop-caldate-releaseMonth-month {
    font-size: 3rem;
  }
}

.kop-caldate-diamond {
  left: 34.3%;
  margin-top: -31.3%;
  position: relative;
  width: 65.75%;
}
.kop-caldate-diamond:nth-of-type(2n) {
  left: 0;
  margin-top: -31.3%;
}
.kop-caldate-diamond:nth-of-type(1) {
  left: 34.3%;
  margin-top: -20.1%;
}

.kop-caldate-diamond-image {
  height: auto;
  width: 100%;
  z-index: 2;
}

.kop-caldate-diamond-cta {
  align-self: center;
  border: 1px solid;
  display: none;
  font-size: 1rem;
  font-weight: 800;
  justify-self: center;
  margin: 0 auto;
  padding: 0.75rem;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg) scale(1.4);
}

.kop-caldate-diamond-cta-explore {
  background-color: #fff;
  color: #000;
}

.kop-caldate-diamond-cta-wrapper {
  bottom: 0;
  display: flex;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(45deg) scale(0.7);
  transition: background-color 0.2s;
  z-index: 2;
}
.kop-caldate-diamond-cta-wrapper:hover, .kop-caldate-diamond-cta-wrapper:active, .kop-caldate-diamond-cta-wrapper:focus {
  background-color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}
.kop-caldate-diamond-cta-wrapper:hover .kop-caldate-diamond-cta, .kop-caldate-diamond-cta-wrapper:active .kop-caldate-diamond-cta, .kop-caldate-diamond-cta-wrapper:focus .kop-caldate-diamond-cta {
  display: inline-block;
}

.kop-calgroup-layout.visually-hidden {
  display: none;
}

@media (min-width: 768px) {
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-releaseMonth-diamond {
    left: 67.9%;
    margin-top: 0;
    padding: 6%;
    width: 12%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d1 {
    left: 54.9%;
    margin-top: -2.6%;
    width: 45.1%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d2 {
    left: 39.2%;
    margin-top: -21.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d3 {
    left: 54.9%;
    margin-top: -13.8%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d4 {
    left: 31.2%;
    margin-top: -21.3%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d5 {
    left: 0;
    margin-top: -21.3%;
    width: 45.1%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d6 {
    left: 31.2%;
    margin-top: -21.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d7 {
    left: 55%;
    margin-top: -21.3%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d8 {
    left: 31.5%;
    margin-top: -13.5%;
    width: 45.1%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d9 {
    left: 70.8%;
    margin-top: -29.3%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d10 {
    left: 55%;
    margin-top: -13.7%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d11 {
    left: 70.8%;
    margin-top: -13.7%;
    width: 29.3%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d12 {
    left: 39.2%;
    margin-top: -21.2%;
    width: 45.1%;
  }
  .kop-calgroup-layout.kop-calgroup-layout--intro .kop-caldate-diamond.d13 {
    left: 23.6%;
    margin-top: -21.5%;
    width: 29.3%;
  }
}

@media (min-width: 768px) {
  .kop-calgroup-layout--first .kop-caldate-releaseMonth-diamond {
    left: 55.7%;
    margin-top: 1.2%;
    padding: 6%;
    width: 12%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d1 {
    left: 31.5%;
    margin-top: -2.9%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d2 {
    left: 0;
    margin-top: -21.2%;
    width: 45.1%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d3 {
    left: 39.4%;
    margin-top: -29.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d4 {
    left: 23.6%;
    margin-top: -13.6%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d5 {
    left: 47.3%;
    margin-top: -29.4%;
    width: 45.1%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d6 {
    left: 70.8%;
    margin-top: -13.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d7 {
    left: 55.1%;
    margin-top: -13.6%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d8 {
    left: 15.4%;
    margin-top: -28.8%;
    width: 45.1%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d9 {
    left: 47.1%;
    margin-top: -21.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d10 {
    left: 62.9%;
    margin-top: -13.5%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d11 {
    left: 39.2%;
    margin-top: -21.5%;
    width: 29.3%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d12 {
    left: 7.6%;
    margin-top: -21.3%;
    width: 45.1%;
  }
  .kop-calgroup-layout--first .kop-caldate-diamond.d13 {
    left: 39.5%;
    margin-top: -21.7%;
    width: 29.3%;
  }
}

@media (min-width: 768px) {
  .kop-calgroup-layout--second .kop-caldate-releaseMonth-diamond {
    left: 44.4%;
    margin-top: 1.2%;
    padding: 6%;
    width: 12%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d1 {
    left: 39.5%;
    margin-top: -2.9%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d2 {
    left: 55%;
    margin-top: -21.2%;
    width: 45.1%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d3 {
    left: 31.5%;
    margin-top: -29.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d4 {
    left: 47.2%;
    margin-top: -13.6%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d5 {
    left: 7.8%;
    margin-top: -29.4%;
    width: 45.1%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d6 {
    left: 0;
    margin-top: -13.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d7 {
    left: 15.8%;
    margin-top: -13.6%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d8 {
    left: 39.6%;
    margin-top: -28.8%;
    width: 45.1%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d9 {
    left: 23.8%;
    margin-top: -21.4%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d10 {
    left: 7.9%;
    margin-top: -13.5%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d11 {
    left: 31.6%;
    margin-top: -21.5%;
    width: 29.3%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d12 {
    left: 47.4%;
    margin-top: -21.3%;
    width: 45.1%;
  }
  .kop-calgroup-layout--second .kop-caldate-diamond.d13 {
    left: 31.5%;
    margin-top: -21.7%;
    width: 29.3%;
  }
}

.kop-caldate-popup,
.kop-calgroup__historyslidegroup__popup {
  z-index: 1050;
}
.kop-caldate-popup .modal-fs-body,
.kop-calgroup__historyslidegroup__popup .modal-fs-body {
  background-color: unset;
  margin-top: 1rem;
}
.kop-caldate-popup .modal-content,
.kop-calgroup__historyslidegroup__popup .modal-content {
  padding-top: 5rem;
}
@media (min-width: 544px) {
  .kop-caldate-popup .modal-content,
  .kop-calgroup__historyslidegroup__popup .modal-content {
    padding-top: 6rem;
  }
}
.kop-caldate-popup .modal-body,
.kop-caldate-popup .container,
.kop-calgroup__historyslidegroup__popup .modal-body,
.kop-calgroup__historyslidegroup__popup .container {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 544px) {
  .kop-caldate-popup .modal-body,
  .kop-caldate-popup .container,
  .kop-calgroup__historyslidegroup__popup .modal-body,
  .kop-calgroup__historyslidegroup__popup .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.kop-caldate-popup .kop-slidegroup-top,
.kop-caldate-popup .kop-slidegroup-bottom,
.kop-calgroup__historyslidegroup__popup .kop-slidegroup-top,
.kop-calgroup__historyslidegroup__popup .kop-slidegroup-bottom {
  padding: 0 1rem;
}
@media (min-width: 544px) {
  .kop-caldate-popup .kop-slidegroup-top,
  .kop-caldate-popup .kop-slidegroup-bottom,
  .kop-calgroup__historyslidegroup__popup .kop-slidegroup-top,
  .kop-calgroup__historyslidegroup__popup .kop-slidegroup-bottom {
    padding: 0;
  }
}

.kop-caldate-popup-close.modal-fs-close,
.kop-calgroup-historyslidegroup-popup-close.modal-fs-close {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0 0 0 0.625rem;
  position: unset;
  z-index: 9999;
}
.kop-caldate-popup-close.modal-fs-close:hover::before, .kop-caldate-popup-close.modal-fs-close:active::before, .kop-caldate-popup-close.modal-fs-close:focus::before,
.kop-calgroup-historyslidegroup-popup-close.modal-fs-close:hover::before,
.kop-calgroup-historyslidegroup-popup-close.modal-fs-close:active::before,
.kop-calgroup-historyslidegroup-popup-close.modal-fs-close:focus::before {
  background: #f00;
}
.kop-caldate-popup-close.modal-fs-close:focus,
.kop-calgroup-historyslidegroup-popup-close.modal-fs-close:focus {
  outline: 0;
}
.kop-caldate-popup-close.modal-fs-close::before,
.kop-calgroup-historyslidegroup-popup-close.modal-fs-close::before {
  background: #000;
  content: "";
  height: 1.25rem;
  margin-right: 0.625rem;
  transform: rotate(45deg);
  width: 1.25rem;
}

/*md

# Detail Grid

*/
.kop-detailgrid2xgroup__wrapper {
  margin: 1.25rem 0;
}

.kop-detailgrid2xrow-wrapper {
  margin: 0 auto;
  max-width: 96.25rem;
}
@media (min-width: 49.375rem) and (max-width: 68.6875rem) {
  .kop-detailgrid2xrow-wrapper {
    margin: 0 auto;
    max-width: 49.375rem;
    padding: 0 1.25rem;
  }
}
@media (min-width: 68.75rem) {
  .kop-detailgrid2xrow-wrapper {
    display: flex;
  }
}

.kop-detailgrid2xrow-layout-image-media {
  position: relative;
}

.kop-detailgrid2xrow-layout-image-hover {
  align-items: center;
  bottom: 0;
  display: none;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
@media (min-width: 81.25rem) {
  .kop-detailgrid2xrow-layout-image-hover {
    display: flex;
  }
}
.kop-detailgrid2xrow-layout-image-hover:hover button, .kop-detailgrid2xrow-layout-image-hover:active button, .kop-detailgrid2xrow-layout-image-hover:focus button {
  display: block;
}
.kop-detailgrid2xrow-layout-image-hover button {
  display: none;
}

.kop-detailgrid2xrow-layout-text {
  display: flex;
  position: relative;
}

.kop-detailgrid2xrow-action {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.kop-detailgrid2xrow-content-wrapper {
  padding: 1.25rem 2.5rem;
  text-align: center;
}
@media (max-width: 49.3125rem) {
  .kop-detailgrid2xrow-content-wrapper {
    padding: 2.5rem 1.25rem;
  }
}

.kop-detailgrid2xrow-content-header {
  color: #000;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.375rem;
  margin: 0 0 0 0.5rem;
  pointer-events: none;
  text-transform: uppercase;
  z-index: 3;
}
@media (min-width: 544px) {
  .kop-detailgrid2xrow-content-header {
    font-size: 1.625rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 1024px) {
  .kop-detailgrid2xrow-content-header {
    font-size: 2rem;
    line-height: 2rem;
  }
}

.kop-detailgrid2xrow-content-copy {
  color: #000;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5rem;
  margin: 0;
  pointer-events: none;
  z-index: 3;
}

.kop-detailgrid2xrow-content-cta {
  font-size: 0.875rem;
  margin-top: 0.875rem;
}
@media (min-width: 1024px) {
  .kop-detailgrid2xrow-content-cta {
    font-size: inherit;
  }
}
@media (min-width: 81.25rem) {
  .kop-detailgrid2xrow-content-cta {
    display: none;
  }
}
.kop-detailgrid2xrow-content-cta .btn {
  z-index: 3;
}

.kop-detailgrid2xrow-content {
  align-self: center;
  justify-self: center;
  width: 100%;
}

.kop-detailgrid2xrow-link img {
  height: auto;
  width: 100%;
}

.kop-detailgrid2xrow-picture {
  display: block;
  min-height: 25vw;
}
@media (max-width: 1023.98px) {
  .kop-detailgrid2xrow-picture {
    min-height: 50vw;
  }
}
.kop-detailgrid2xrow-picture.is-lazy-loaded {
  min-height: inherit;
}

.kop-detailgrid2xrow-layout-text-media {
  flex-shrink: 0;
  width: 50%;
  z-index: 2;
}
@media (max-width: 49.3125rem) {
  .kop-detailgrid2xrow-layout-text-media {
    display: none;
  }
}
@media (min-width: 68.75rem) and (max-width: 81.1875rem) {
  .kop-detailgrid2xrow-layout-text-media {
    display: none;
  }
}
.kop-detailgrid2xrow-layout-text-media .kop-detailgrid2xrow-link {
  position: relative;
}

@media (max-width: 81.1875rem) {
  .kop-detailgrid2xrow-btn {
    color: #fff;
    background-color: #000;
    border-color: #000;
  }
  .kop-detailgrid2xrow-btn:hover {
    color: #fff;
    background-color: black;
    border-color: black;
  }
  .kop-detailgrid2xrow-btn:focus, .kop-detailgrid2xrow-btn.focus {
    color: #fff;
    background-color: black;
    border-color: black;
    box-shadow: 0 0 0 0.2rem rgba(38.25, 38.25, 38.25, 0.5);
  }
  .kop-detailgrid2xrow-btn.disabled, .kop-detailgrid2xrow-btn:disabled {
    color: #fff;
    background-color: #000;
    border-color: #000;
  }
  .kop-detailgrid2xrow-btn:not(:disabled):not(.disabled):active, .kop-detailgrid2xrow-btn:not(:disabled):not(.disabled).active, .show > .kop-detailgrid2xrow-btn.dropdown-toggle {
    color: #fff;
    background-color: black;
    border-color: black;
  }
  .kop-detailgrid2xrow-btn:not(:disabled):not(.disabled):active:focus, .kop-detailgrid2xrow-btn:not(:disabled):not(.disabled).active:focus, .show > .kop-detailgrid2xrow-btn.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(38.25, 38.25, 38.25, 0.5);
  }
}

@media (min-width: 68.75rem) {
  .layout-right .kop-detailgrid2xrow-layout-image,
  .layout-right .kop-detailgrid2xrow-layout-text {
    flex: 0 0 50%;
  }
}

@media (min-width: 49.375rem) and (max-width: 68.6875rem) {
  .layout-left .kop-detailgrid2xrow-content {
    order: 2;
  }
}
@media (min-width: 81.25rem) {
  .layout-left .kop-detailgrid2xrow-content {
    order: 2;
  }
}
@media (min-width: 49.375rem) and (max-width: 68.6875rem) {
  .layout-left .kop-detailgrid2xrow-layout-text-media {
    order: 1;
  }
}
@media (min-width: 81.25rem) {
  .layout-left .kop-detailgrid2xrow-layout-text-media {
    order: 1;
  }
}
@media (min-width: 68.75rem) {
  .layout-left .kop-detailgrid2xrow-layout-image {
    flex: 0 0 50%;
    order: 2;
  }
}
@media (min-width: 68.75rem) {
  .layout-left .kop-detailgrid2xrow-layout-text {
    flex: 0 0 50%;
    order: 1;
  }
}

/*md

# Product Grid

*/
.kop-product-grid {
  margin-bottom: 1.875rem;
  padding: 0.3125rem;
}
@media (min-width: 544px) {
  .kop-product-grid {
    padding: 0.9375rem;
  }
}

.kop-product-grid-image {
  max-width: 100%;
}

/*md

# Product Group Feature

*/
.kop-productgroupfeatures {
  margin: 2em auto;
}
@media (min-width: 1024px) {
  .kop-productgroupfeatures {
    padding: 0 1.25rem;
  }
}

.kop-mediatexttile-tile {
  margin-bottom: 2rem;
}

.kop-productgroupfeatures-wrapper .glide--slider {
  position: relative;
}
.kop-productgroupfeatures-wrapper .glide--slider .glide-carousel-track::before, .kop-productgroupfeatures-wrapper .glide--slider .glide-carousel-track::after {
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 2.5rem;
  z-index: 2;
}
.kop-productgroupfeatures-wrapper .glide--slider .glide-carousel-track::before {
  left: 0;
}
.kop-productgroupfeatures-wrapper .glide--slider .glide-carousel-track::after {
  right: 0;
}
.kop-productgroupfeatures-wrapper .glide--slider .zoom-icon {
  height: 1.875rem;
  width: 1.875rem;
}
.kop-productgroupfeatures-wrapper .glide--without-carousel .glide-carousel-slides {
  flex-wrap: wrap;
  justify-content: space-between;
}
.kop-productgroupfeatures-wrapper .glide--without-carousel .glide-carousel-slide {
  width: calc(33.3333333333% - 13.3333333333px);
}
.kop-productgroupfeatures-wrapper .simple-carousel-arrows {
  -webkit-tap-highlight-color: transparent;
}
.kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow {
  align-items: center;
  background: #fff;
  cursor: pointer;
  display: flex;
  fill: #999;
  height: 12.5rem;
  outline: none;
  position: absolute;
  top: 0;
  z-index: 3;
}
@media (min-width: 768px) {
  .kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow {
    height: 25rem;
  }
}
.kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow:hover, .kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow:active, .kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow:focus {
  fill: #333;
  text-decoration: none;
}
.kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow--left {
  left: 0;
}
.kop-productgroupfeatures-wrapper .simple-carousel-arrows .simple-carousel-arrow--right {
  right: 0;
}

.kop-mediatexttile-image {
  display: block;
  height: auto;
  width: 100%;
}

.kop-mediatexttile-video video {
  display: block;
  height: auto;
  width: 100%;
}

.kop-mediatexttile-content {
  margin-top: 1.5rem;
}
@media (max-width: 959.98px) {
  .kop-mediatexttile-content {
    border-top: 2px solid #ccc;
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

.kop-mediatexttile-header {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
  word-break: break-word;
}
@media (min-width: 544px) {
  .kop-mediatexttile-header {
    font-size: 1.625rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 960px) {
  .kop-mediatexttile-header {
    font-size: 2rem;
    line-height: 2.25rem;
    margin-bottom: 0.6875rem;
  }
}

.kop-mediatexttile-text {
  font-size: 1rem;
  line-height: 1.25rem;
  margin: 0 0 1rem;
}
@media (min-width: 544px) {
  .kop-mediatexttile-text {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}
@media (min-width: 960px) {
  .kop-mediatexttile-text {
    font-size: 1rem;
    line-height: 1.25rem;
    margin: 0;
  }
}

/*md

# Video Carousel

*/
.kop-videocarousel {
  margin: 0 auto;
  max-width: 62.5rem;
}
.kop-videocarousel.full-bleed {
  max-width: none;
  padding: 0;
}

.kop-videocarousel-wrapper {
  margin: 1.5rem 0;
}

.kop-videocarousel-top {
  margin: 0 0 1.5rem;
  text-align: center;
}

.kop-videocarousel-header {
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.125rem;
  line-height: 2rem;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.kop-videocarousel-text {
  color: #000;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.25rem;
}
@media (min-width: 960px) {
  .kop-videocarousel-text {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

.kop-videocarousel-thumbs-carousel {
  margin: 0 auto;
  position: relative;
  touch-action: manipulation;
}
@media (max-width: 767.98px) {
  .kop-videocarousel-thumbs-carousel .simple-carousel-arrows {
    display: none !important;
  }
}
.kop-videocarousel:not(.full-bleed) .kop-videocarousel-thumbs-carousel .simple-carousel-arrow--left {
  left: auto !important;
  right: 100%;
}
.kop-videocarousel:not(.full-bleed) .kop-videocarousel-thumbs-carousel .simple-carousel-arrow--right {
  left: 100%;
  right: auto !important;
}

.kop-videocarousel-thumbnail {
  -webkit-box-orient: vertical;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 544px) {
  .kop-videocarousel-thumbnail-image {
    margin-bottom: 0.5rem;
  }
}

.kop-videocarousel-video-container {
  height: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 56.25%;
  position: relative;
}
@media (min-width: 544px) {
  .kop-videocarousel-video-container {
    margin-bottom: 1rem;
  }
}

.kop-videocarousel-video-frame {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.kop-menu-flyout {
  background-color: #fff;
  color: #fff;
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.kop-menu-flyout-wrapper {
  height: 18.75rem;
  width: 36.875rem;
}

.kop-menu-flyout-container {
  min-height: 18.75rem;
  min-width: 36.875rem;
  position: relative;
}
.kop-menu-flyout-container .flyout-product__tile {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 18.75rem;
}
.kop-menu-flyout-container .flyout-product__text-wrapper {
  align-self: center;
  text-align: left;
  width: 100%;
}
.kop-menu-flyout-container .flyout-product__name {
  color: #222;
  font-family: "FFDINforPuma", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  left: 0;
  letter-spacing: 0;
  line-height: 1.875rem;
  margin: 0 0.625rem 0 1.875rem;
  position: relative;
  top: 0;
}
.kop-menu-flyout-container .flyout-product__price {
  left: 0;
  letter-spacing: 0.05rem;
  margin: 0.5rem 0.625rem 1rem 1.875rem;
  position: relative;
  top: 0;
}
.kop-menu-flyout-container .flyout-product__price .price {
  font-size: 1.625rem;
}
.kop-menu-flyout-container .flyout-product__price .sales {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}
.kop-menu-flyout-container .flyout-product__link-wrapper {
  margin: 0 0.625rem 0 1.875rem;
}
.kop-menu-flyout-container .flyout-product__link {
  color: #000;
  display: block;
  font-family: "FFDINforPuma", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  height: 18.75rem;
  letter-spacing: 0.025rem;
  line-height: 1rem;
  overflow: hidden;
  text-decoration: underline;
  text-transform: uppercase;
  width: 18.75rem;
}
.kop-menu-flyout-container .flyout-product__link img {
  display: inline-block;
  height: auto;
  width: 100%;
}
.kop-menu-flyout-container .flyout-product__image-wrapper {
  align-self: center;
  width: 100%;
}

.kop-menu-flyout-media {
  left: 0;
  position: relative;
  top: 0;
}

.kop-menu-flyout-video {
  margin: 0;
}

.kop-menu-flyout-image-wrapper a {
  display: block;
}
.kop-menu-flyout-image-wrapper img {
  display: block;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.kop-menu-flyout-content {
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.kop-menu-flyout-content.vertical-align-top {
  top: 0;
}
.kop-menu-flyout-content.vertical-align-middle {
  display: flex;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.kop-menu-flyout-content.vertical-align-bottom {
  bottom: 0;
}
.kop-menu-flyout-content.text-align-left {
  text-align: left;
}
.kop-menu-flyout-content.text-align-center {
  text-align: center;
}
.kop-menu-flyout-content.text-align-right {
  text-align: right;
}

.kop-menu-flyout-content-inner {
  padding: 1.875rem 2.1875rem 1.25rem;
  width: 100%;
}
.kop-menu-flyout-content.vertical-align-middle .kop-menu-flyout-content-inner {
  align-self: center;
}

.kop-menu-flyout-header {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.05rem;
  line-height: 2.5rem;
  margin: 0 0 1rem;
}

.kop-menu-flyout-text {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25rem;
  margin: 0 0 1rem;
}

.kop-menu-flyout-cta {
  margin: 0 0 0.9375rem;
}

.kop-menu-flyout-btn {
  pointer-events: auto;
}
.kop-menu-flyout-content.text-align-center .kop-menu-flyout-btn {
  margin: 0 0.375rem 0.8125rem;
}
.kop-menu-flyout-content.text-align-right .kop-menu-flyout-btn {
  margin: 0 0 0.8125rem 0.8125rem;
}
.kop-menu-flyout-content.text-align-left .kop-menu-flyout-btn {
  margin: 0 0.8125rem 0.8125rem 0;
}

/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
.product-horizontal-carousel {
  padding: 3.75rem 0 2.8125rem;
}
@media (min-width: 1024px) {
  .product-horizontal-carousel {
    padding: 3.75rem 0 7.5rem;
  }
}

.product-horizontal-carousel-title {
  margin: 0 1.5rem 1.875rem;
  text-align: center;
}
@media (max-width: 1023.98px) {
  .product-horizontal-carousel-title {
    margin: 0 0.9375rem 1.5625rem;
  }
}

.product-horizontal-carousel-title-text {
  color: #000;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.125rem;
  line-height: 2rem;
  margin: 0.625rem 0 0;
}
@media (max-width: 1023.98px) {
  .product-horizontal-carousel-title-text {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .product-horizontal-carousel-title-icon {
    display: block;
    margin: auto;
    max-width: 50%;
  }
}

.product-horizontal-carousel-title-img {
  max-width: 100%;
}

.product-horizontal-carousel-image-link {
  border: 1px solid #fafafa;
  display: block;
}

@media (min-width: 1200px) {
  .product-horizontal-carousel-glide-arrows .glide-carousel-arrow {
    top: 24vw;
    transform: translateY(calc(-24vw / 2 - 1rem / 2 - 1.5rem));
  }
}
@media (min-width: 1440px) {
  .product-horizontal-carousel-glide-arrows .glide-carousel-arrow {
    top: 27vw;
    transform: translateY(calc(-27vw / 2 - 1rem / 2 - 1.5rem));
  }
}

/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
@media (min-width: 1024px) {
  .kop-shop-select-collections {
    padding: 1.25rem 2.1875rem;
  }
}

.collections-carousel-title {
  color: #000;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.125rem;
  line-height: 2rem;
  margin: 0 0 1.875rem;
}
@media (max-width: 1023.98px) {
  .collections-carousel-title {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.5rem;
  }
}
@media (max-width: 1023.98px) {
  .collections-carousel-title {
    text-align: center;
  }
}

.collection-image-section {
  position: relative;
}

.collection-image {
  max-width: 100%;
}

.collection-image-logo-wrapper {
  background-color: #000;
  bottom: 1.25rem;
  left: 1.25rem;
  max-width: 27%;
  padding: 0.9375rem;
  position: absolute;
  z-index: 1;
}
@media (max-width: 1023.98px) {
  .collection-image-logo-wrapper {
    padding: 0.625rem;
  }
}

.collection-image-logo {
  max-width: 100%;
}

.collection-tile-name {
  font-size: 1rem;
  margin: 0.9375rem 0 0.3125rem;
}

.collection-tile-author {
  font-size: 1rem;
  font-weight: 400;
}

.collection-link:hover {
  text-decoration: none;
}

@media (min-width: 1200px) {
  .collection-carousel-glide-arrows .glide-carousel-arrow {
    top: 50%;
    transform: translateY(-50%);
  }
}

/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
.kop-body-content-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 2.5rem auto;
  max-width: 60rem;
  padding: 0 1.25rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .kop-body-content-wrapper {
    margin: 5rem auto;
    padding: 0;
  }
}

.kop-body-content-logo {
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .kop-body-content-logo {
    margin-bottom: 3.75rem;
    max-width: 50%;
  }
}

.kop-body-content-img {
  max-width: 100%;
}

.kop-body-content-text {
  margin-bottom: 2.5rem;
}

/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
.marketing-tile {
  padding: 1.875rem 0.9375rem;
}
@media (min-width: 768px) {
  .marketing-tile {
    padding: 3.75rem 1.875rem;
  }
}

.marketing-tile-two-image-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
@media (min-width: 768px) {
  .marketing-tile-two-image-container {
    flex-direction: row;
  }
}
.marketing-tile-two-image-container .glide-carousel-container .glide--destroyed.glide-carousel--kop .glide-carousel-slide {
  width: 100%;
}
.marketing-tile-two-image-container .glide-carousel-container .glide--destroyed.glide-carousel--kop .glide-carousel-slide .glide-carousel-focused {
  opacity: 1;
}

@media (min-width: 768px) {
  .marketing-tile-col-wrapper {
    width: 50%;
  }
}

.marketing-tile-image-container {
  margin-bottom: 1.25rem;
  position: relative;
}

.marketing-tile-image-wrapper {
  width: 100%;
}

.marketing-tile-image {
  max-width: 100%;
}

.marketing-tile-link:hover {
  text-decoration: none;
}

.marketing-tile-info-container {
  display: flex;
  justify-content: space-between;
  padding: 0 0.3125rem;
}
@media (max-width: 1023.98px) {
  .product-tile-grid-item .marketing-tile-info-container {
    flex-direction: column;
  }
}

.marketing-tile-title,
.marketing-tile-promotion,
.marketing-tile-info-price {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .marketing-tile-info-text {
    margin-bottom: 0.625rem;
  }
}

.marketing-tile-swatch {
  margin-bottom: 0.3125rem;
}

.marketing-tile-swatch-text:hover, .marketing-tile-swatch-text:active, .marketing-tile-swatch-text:focus {
  text-decoration: none;
}

.marketing-tile-swatch-container {
  display: flex;
  margin-bottom: 0.9375rem;
  padding: 0 0.3125rem;
}

.marketing-tile-swatch-item {
  border: solid 1px transparent;
}
.marketing-tile-swatch-item.marketing-tile-swatch-item + .marketing-tile-swatch-item.marketing-tile-swatch-item {
  margin-left: 0.25rem;
}
.marketing-tile-swatch-item.marketing-tile-swatch-item--active {
  border-color: #adadad;
  border-radius: 0.125rem;
}
.marketing-tile-swatch-item.marketing-tile-swatch-item--count {
  line-height: 2.125rem;
}
@media (min-width: 768px) {
  .marketing-tile-swatch-item.marketing-tile-swatch-item--count {
    line-height: 2.5rem;
  }
}

.marketing-tile-promotion {
  color: #ba2026;
}

.marketing-tile-promotio-message,
.marketing-tile-promotio-code {
  margin-bottom: 0;
}

.marketing-tile-info-price {
  margin-left: 1.25rem;
  text-align: right;
}
@media (max-width: 1023.98px) {
  .product-tile-grid-item .marketing-tile-info-price {
    margin-left: 0;
    text-align: left;
  }
}

.marketing-tile-price-new,
.marketing-tile-price-old,
.marketing-tile-price-standard {
  white-space: nowrap;
}

/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
.marketing-tile-collection-wrapper {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  padding: 1.875rem 0.9375rem;
}
@media (min-width: 768px) {
  .marketing-tile-collection-wrapper {
    flex-direction: row;
    padding: 3.75rem 1.875rem;
  }
}

.marketing-tile-collection {
  background-color: #e65b1b;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
}

.marketing-tile-collection-image {
  height: auto;
  left: 50%;
  max-height: 65%;
  max-width: 65%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .marketing-tile-collection-image {
    max-height: 90%;
    max-width: 85%;
  }
}

.marketing-tile-collection-cta {
  align-items: center;
  bottom: 1.875rem;
  color: #fff;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  left: 1.875rem;
  position: absolute;
  right: 1.875rem;
}
.marketing-tile-collection-cta p {
  margin-bottom: 0;
}

.marketing-tile-collection-arrow .icon {
  display: block;
  fill: #fff;
  height: 0.9375rem;
  width: 0.9375rem;
}

@media (min-width: 1024px) {
  .image-horizontal-carousel {
    padding: 1.25rem 0;
  }
}

.image-horizontal-carousel-image {
  max-width: 100%;
}
@media (max-width: 1023.98px) and (orientation: landscape) {
  .image-horizontal-carousel-image {
    width: 100%;
  }
}

.image-horizontal-carousel-link {
  display: block;
}

.image-horizontal-carousel-gallery {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}

.product-tile-grid {
  padding: 3.75rem 0.9375rem 2.8125rem;
}
@media (min-width: 768px) {
  .product-tile-grid {
    padding: 3.75rem 1.875rem 7.5rem;
  }
}

.product-tile-grid-container {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023.98px) {
  .product-tile-grid-container {
    grid-gap: 0.25rem;
  }
}

.product-tile-grid-image-container {
  margin-bottom: 0.625rem;
}

/*md

# Variables

*/
/*md

# Color variables

*/
/*md

# Fonts variables

*/
/*md

# Functions

This section describes core functions used for development in the project.

## Function strip-unit

Removes the unit (e.g. px, em, rem) from a value, returning the number only.

Returns the same number, sans unit.

## Function value-to-rem

**Private function**.
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.

Returns a number in rems, calculated based on the given value and the base pixel value.
rem values are passed through as is.

## Function rem-calc

Converts one or more pixel values into matching rem values.
By default, the base pixel value used to calculate the rem value is taken from the `$globalFontSize` variable.
If you need to convert a comma-separated list, wrap the list in parentheses.

Return a list of converted values.

## Function map-safe-get

Safely return a value from a map.

Returns found value. Can has any SASS data type

## Function map-deep-get

**Private function**.

Safely return a value from a map.

Returns found value.

*/
/*md

# Mixins

This section describes core mixins used for development in the project.

## Mixin generate-font-face

Generate `@font-face` rules

## Mixin when-inside

Helps make context selector a little more friendly

### Mixin on-event

Event wrapper. Setting up `:hover`, `:active`, `:focus` pseudo classes for selector

## Mixin clearfix

Quickly and easily clear floated content within a container

## Mixin placeholder

Setting up 'color' property for input placeholder for different browsers

## Mixin text-truncate

Truncate text overflow

## Mixins for Glide carousel

glide-carousel-title, glide-carousel-slides, glide-carousel-bullets-space, glide-carousel-bullets-item

*/
.product-look-section {
  padding: 1.875rem 0;
}
@media (min-width: 768px) {
  .product-look-section {
    padding: 3.75rem 1.875rem;
  }
}

.product-look-tile-image-wrapper {
  margin-bottom: 1.25rem;
}
@media (max-width: 1023.98px) {
  .product-look-tile-image-wrapper {
    padding: 0 0.9375rem;
  }
}

.kop-trendinggroup-scrollbar {
  padding-bottom: 1.25rem;
}
.kop-trendinggroup-scrollbar ::-webkit-scrollbar {
  -webkit-appearance: none;
          appearance: none;
  height: 0.375rem;
  width: 0.375rem;
}
.kop-trendinggroup-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #50565e;
  border-radius: 0.25rem;
}
.kop-trendinggroup-scrollbar ::-webkit-scrollbar-track {
  background: #dfe0e1;
  border-radius: 0.25rem;
}
.kop-trendinggroup-scrollbar .kop-trendingtile {
  flex-shrink: 0;
  padding: 0;
  padding-bottom: 0.625rem;
  width: 75%;
}
@media (min-width: 544px) {
  .kop-trendinggroup-scrollbar .kop-trendingtile {
    justify-content: center;
  }
}
.kop-trendinggroup-scrollbar .kop-trendingtile-content {
  padding-bottom: 0;
}
.kop-trendinggroup-scrollbar .kop-trendingtile-picture {
  min-height: 17.81vw;
}
@media (min-width: 768px) {
  .kop-trendinggroup-scrollbar .two-tiles .kop-trendingtile {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .kop-trendinggroup-scrollbar .three-tiles .kop-trendingtile {
    width: 33.33%;
  }
}
@media (min-width: 768px) {
  .kop-trendinggroup-scrollbar .four-tiles .kop-trendingtile {
    width: 30%;
  }
}
@media (min-width: 1200px) {
  .kop-trendinggroup-scrollbar .four-tiles .kop-trendingtile {
    width: 25%;
  }
}
@media (min-width: 768px) {
  .kop-trendinggroup-scrollbar .more-than-four-tiles .kop-trendingtile {
    width: 30%;
  }
}
@media (min-width: 1200px) {
  .kop-trendinggroup-scrollbar .more-than-four-tiles .kop-trendingtile {
    width: 23.5%;
  }
}
.kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .kop-trendingtile {
  justify-content: start;
  margin-right: 1rem;
}
.kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .kop-trendingtile:last-child {
  margin-right: 0;
}
@media (min-width: 768px) {
  .kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .two-tiles .kop-trendingtile {
    width: calc(50% - 8px);
  }
}
@media (min-width: 768px) {
  .kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .three-tiles .kop-trendingtile {
    width: calc(33% - 8px);
  }
}
@media (min-width: 1024px) {
  .kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .four-tiles .kop-trendingtile {
    width: calc(30% - 8px);
  }
}
@media (min-width: 1200px) {
  .kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .four-tiles .kop-trendingtile {
    width: calc(25% - 12px);
  }
}
@media (min-width: 1024px) {
  .kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .more-than-four-tiles .kop-trendingtile {
    width: calc(30% - 8px);
  }
}
@media (min-width: 1200px) {
  .kop-trendinggroup-scrollbar .kop-trendinggrouptile-enable-padding .more-than-four-tiles .kop-trendingtile {
    width: calc(23.5% - 12px);
  }
}
.kop-trendinggroup-scrollbar .kop-trendinggroup {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  padding-top: 1.25rem;
}
.kop-trendinggroup-scrollbar .kop-trendinggroup-title {
  margin: 0;
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 959px) {
  .kop-trendinggroup-scrollbar .kop-trendinggroup-title-header[data-alignment~=center] {
    text-align: center !important;
  }
  .kop-trendinggroup-scrollbar .kop-trendinggroup-title-header[data-alignment~=left] {
    text-align: left !important;
  }
  .kop-trendinggroup-scrollbar .kop-trendinggroup-title-header[data-alignment~=right] {
    text-align: right !important;
  }
}
@media (max-width: 1198.98px) {
  .kop-trendinggroup-scrollbar .kop-trendinggroup-title-header[data-alignment-mobile~=center] {
    text-align: center !important;
  }
  .kop-trendinggroup-scrollbar .kop-trendinggroup-title-header[data-alignment-mobile~=left] {
    text-align: left !important;
  }
  .kop-trendinggroup-scrollbar .kop-trendinggroup-title-header[data-alignment-mobile~=right] {
    text-align: right !important;
  }
}
.kop-trendinggroup-scrollbar .kop-trendinggroup-wrapper {
  display: flex;
  justify-content: start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.product-tile__title,
.product-tile__price {
  line-height: 1.25rem;
}

.product-tile__price--old,
.product-tile__price--original,
.product-tile__price--best {
  align-items: center;
  color: #676d75;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.25rem;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.product-tile__price--old .strike-through,
.product-tile__price--original .strike-through,
.product-tile__price--best .strike-through {
  -webkit-text-decoration-color: #676d75;
  text-decoration-color: #676d75;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
  -webkit-text-decoration-thickness: 0.0625rem;
  text-decoration-thickness: 0.0625rem;
}
.product-tile__price--old .product-tile-price-and-discount,
.product-tile__price--original .product-tile-price-and-discount,
.product-tile__price--best .product-tile-price-and-discount {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}
.product-tile__price--old .discount-percentage-value,
.product-tile__price--original .discount-percentage-value,
.product-tile__price--best .discount-percentage-value {
  font-size: 0.625rem;
}

.product-tile__price--original,
.product-tile__price--best {
  line-height: 1rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .product-tile__price--original:has(+ .product-tile__price--best:not(.best-prices-hidden)) {
    width: unset;
  }
}
.product-tile__price--original .product-tile-price-and-discount {
  gap: 0.5rem;
}
.product-tile__price--original .discount-percentage-value {
  border: 1px solid #f8c6c6;
  border-radius: 6.25rem;
  color: #ba2026;
  font-weight: 700;
  line-height: 0.75rem;
  padding: 0.25rem 0.375rem;
}

.a11y-phrase-separator {
  display: inline-flex;
}

.best-prices-hidden.a11y-phrase-separator, .best-prices-hidden.product-tile__price--best {
  display: none;
}
.best-prices-hidden.strike-through {
  text-decoration: none;
}