/*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

*/
.svg-youtube, .svg-video-play, .svg-video-pause, .svg-unmute, .svg-twitter, .svg-trash-can, .svg-support, .svg-store-locator, .svg-social-youtube, .svg-social-twitter, .svg-social-pinterest, .svg-social-instagram, .svg-social-fb, .svg-slider-handle, .svg-search, .svg-ruler, .svg-return, .svg-red-heart-filled, .svg-red-heart, .svg-question-circle, .svg-qrcode-solid, .svg-puma-logo-with-text, .svg-puma-logo, .svg-puma-arrow-top, .svg-product-tile-color-variants, .svg-present-box, .svg-present, .svg-plus, .svg-pinterest, .svg-pickup-map-location, .svg-pdp-zoom, .svg-pdp-returns, .svg-pdp-free-shipping, .svg-pdp-delivery, .svg-password-revealed-1, .svg-password-revealed-0, .svg-p-trash-can, .svg-newsletter, .svg-navicon, .svg-mute, .svg-minus, .svg-lock, .svg-item-added, .svg-instagram, .svg-info-circle-gray, .svg-info-circle, .svg-info, .svg-icon-twitter, .svg-icon-play, .svg-icon-naver, .svg-icon-facebook, .svg-home, .svg-heart-filled, .svg-heart, .svg-hamburger-menu, .svg-hamburger, .svg-grid-layout-4, .svg-grid-layout-3, .svg-grid-layout-2-mob, .svg-grid-layout-2, .svg-grid-layout-1, .svg-form-valid, .svg-form-error-colored, .svg-form-error, .svg-flip, .svg-fit-finder-pdp-black, .svg-filters, .svg-facebook, .svg-exchange-header, .svg-envelope, .svg-empty-cart, .svg-ellipse, .svg-edit-2, .svg-edit, .svg-download, .svg-delivery, .svg-copy-to-clipboard, .svg-copy-link, .svg-contact, .svg-close-x, .svg-close, .svg-clear-cross, .svg-chevron-up-red, .svg-chevron-up-large-thin, .svg-chevron-up, .svg-chevron-right, .svg-chevron-left, .svg-chevron-large-thin-right, .svg-chevron-large-thin-left, .svg-chevron-down-red, .svg-chevron-down-large-thin, .svg-chevron-down, .svg-check-filled, .svg-check, .svg-chat-popup-icon, .svg-chat-icon-no-styles, .svg-chat-icon, .svg-chat-fill, .svg-cart-mongoose, .svg-cart, .svg-border-clock, .svg-border-check, .svg-arrow-right, .svg-arrow-left, .svg-ambassador-card, .svg-account-quicklinks, .svg-account-profile, .svg-account-preferences, .svg-account-payment, .svg-account-password, .svg-account-orders, .svg-account-mobile, .svg-account-address, .svg-account {
  background: url("sprite.view.svg") no-repeat;
}

.svg-account {
  background-position: 0 0;
}

.svg-account-dims {
  width: 38px;
  height: 24px;
}

.svg-account-address {
  background-position: 1.0807736064% 0;
}

.svg-account-address-dims {
  width: 32px;
  height: 32px;
}

.svg-account-mobile {
  background-position: 1.9954389966% 0;
}

.svg-account-mobile-dims {
  width: 40px;
  height: 40px;
}

.svg-account-orders {
  background-position: 3.1285551763% 0;
}

.svg-account-orders-dims {
  width: 32px;
  height: 32px;
}

.svg-account-password {
  background-position: 4.0340909091% 0;
}

.svg-account-password-dims {
  width: 28px;
  height: 32px;
}

.svg-account-payment {
  background-position: 4.835039818% 0;
}

.svg-account-payment-dims {
  width: 32px;
  height: 32px;
}

.svg-account-preferences {
  background-position: 5.7451649602% 0;
}

.svg-account-preferences-dims {
  width: 32px;
  height: 32px;
}

.svg-account-profile {
  background-position: 6.6552901024% 0;
}

.svg-account-profile-dims {
  width: 32px;
  height: 32px;
}

.svg-account-quicklinks {
  background-position: 7.5482406356% 0;
}

.svg-account-quicklinks-dims {
  width: 24px;
  height: 24px;
}

.svg-ambassador-card {
  background-position: 8.2731107924% 0;
}

.svg-ambassador-card-dims {
  width: 42.668px;
  height: 32px;
}

.svg-arrow-left {
  background-position: 9.4817767654% 0;
}

.svg-arrow-left-dims {
  width: 36px;
  height: 32px;
}

.svg-arrow-right {
  background-position: 10.506833713% 0;
}

.svg-arrow-right-dims {
  width: 36px;
  height: 32px;
}

.svg-border-check {
  background-position: 11.4536199095% 0;
}

.svg-border-check-dims {
  width: 12px;
  height: 12px;
}

.svg-border-clock {
  background-position: 11.7929864253% 0;
}

.svg-border-clock-dims {
  width: 12px;
  height: 12px;
}

.svg-cart {
  background-position: 12.1736662883% 0;
}

.svg-cart-dims {
  width: 24px;
  height: 24px;
}

.svg-cart-mongoose {
  background-position: 12.8547105562% 0;
}

.svg-cart-mongoose-dims {
  width: 24px;
  height: 24px;
}

.svg-chat-fill {
  background-position: 13.5050962627% 0;
}

.svg-chat-fill-dims {
  width: 16px;
  height: 16px;
}

.svg-chat-icon {
  background-position: 14.1126088861% 0;
}

.svg-chat-icon-dims {
  width: 54.67px;
  height: 53.25px;
}

.svg-chat-icon-no-styles {
  background-position: 15.6870378693% 0;
}

.svg-chat-icon-no-styles-dims {
  width: 54.67px;
  height: 53.25px;
}

.svg-chat-popup-icon {
  background-position: 17.1112372304% 0;
}

.svg-chat-popup-icon-dims {
  width: 24px;
  height: 25px;
}

.svg-check {
  background-position: 17.7922814983% 0;
}

.svg-check-dims {
  width: 24px;
  height: 24px;
}

.svg-check-filled {
  background-position: 18.4733257662% 0;
}

.svg-check-filled-dims {
  width: 24px;
  height: 24px;
}

.svg-chevron-down {
  background-position: 19.1924936025% 0;
}

.svg-chevron-down-dims {
  width: 31px;
  height: 32px;
}

.svg-chevron-down-large-thin {
  background-position: 20.073926642% 0;
}

.svg-chevron-down-large-thin-dims {
  width: 31px;
  height: 16px;
}

.svg-chevron-down-red {
  background-position: 20.9553596815% 0;
}

.svg-chevron-down-red-dims {
  width: 31px;
  height: 32px;
}

.svg-chevron-large-thin-left {
  background-position: 21.7378998019% 0;
}

.svg-chevron-large-thin-left-dims {
  width: 15px;
  height: 32px;
}

.svg-chevron-large-thin-right {
  background-position: 22.1624681574% 0;
}

.svg-chevron-large-thin-right-dims {
  width: 15px;
  height: 32px;
}

.svg-chevron-left {
  background-position: 22.6447219069% 0;
}

.svg-chevron-left-dims {
  width: 24px;
  height: 24px;
}

.svg-chevron-right {
  background-position: 23.3257661748% 0;
}

.svg-chevron-right-dims {
  width: 24px;
  height: 24px;
}

.svg-chevron-up {
  background-position: 24.0545919818% 0;
}

.svg-chevron-up-dims {
  width: 31px;
  height: 32px;
}

.svg-chevron-up-large-thin {
  background-position: 24.9360250213% 0;
}

.svg-chevron-up-large-thin-dims {
  width: 31px;
  height: 16px;
}

.svg-chevron-up-red {
  background-position: 25.8174580608% 0;
}

.svg-chevron-up-red-dims {
  width: 31px;
  height: 32px;
}

.svg-clear-cross {
  background-position: 26.5554298643% 0;
}

.svg-clear-cross-dims {
  width: 12px;
  height: 12px;
}

.svg-close {
  background-position: 26.9863791146% 0;
}

.svg-close-dims {
  width: 24px;
  height: 24px;
}

.svg-close-x {
  background-position: 27.7303754266% 0;
}

.svg-close-x-dims {
  width: 32px;
  height: 32px;
}

.svg-contact {
  background-position: 28.6405005688% 0;
}

.svg-contact-dims {
  width: 32px;
  height: 32px;
}

.svg-copy-link {
  background-position: 29.433427762% 0;
}

.svg-copy-link-dims {
  width: 18px;
  height: 18px;
}

.svg-copy-to-clipboard {
  background-position: 29.9433427762% 0;
}

.svg-copy-to-clipboard-dims {
  width: 18px;
  height: 18px;
}

.svg-delivery {
  background-position: 30.505107832% 0;
}

.svg-delivery-dims {
  width: 24px;
  height: 24px;
}

.svg-download {
  background-position: 31.1861520999% 0;
}

.svg-download-dims {
  width: 24px;
  height: 24px;
}

.svg-edit {
  background-position: 31.8671963678% 0;
}

.svg-edit-dims {
  width: 24px;
  height: 24px;
}

.svg-edit-2 {
  background-position: 32.4837156613% 0;
}

.svg-edit-2-dims {
  width: 17px;
  height: 19px;
}

.svg-ellipse {
  background-position: 32.9558323896% 0;
}

.svg-ellipse-dims {
  width: 16px;
  height: 16px;
}

.svg-empty-cart {
  background-position: 33.9275445658% 0;
}

.svg-empty-cart-dims {
  width: 70px;
  height: 70px;
}

.svg-envelope {
  background-position: 35.4107648725% 0;
}

.svg-envelope-dims {
  width: 18px;
  height: 18px;
}

.svg-exchange-header {
  background-position: 36.06370876% 0;
}

.svg-exchange-header-dims {
  width: 32px;
  height: 32px;
}

.svg-facebook {
  background-position: 37.0581527936% 0;
}

.svg-facebook-dims {
  width: 40px;
  height: 40px;
}

.svg-filters {
  background-position: 38.0249716232% 0;
}

.svg-filters-dims {
  width: 24px;
  height: 24px;
}

.svg-fit-finder-pdp-black {
  background-position: 41.3333333333% 0;
}

.svg-fit-finder-pdp-black-dims {
  width: 248px;
  height: 47.8px;
}

.svg-flip {
  background-position: 45.6657223796% 0;
}

.svg-flip-dims {
  width: 18px;
  height: 18px;
}

.svg-form-error {
  background-position: 46.3594994312% 0;
}

.svg-form-error-dims {
  width: 32px;
  height: 32px;
}

.svg-form-error-colored {
  background-position: 47.1088435374% 0;
}

.svg-form-error-colored-dims {
  width: 20px;
  height: 20px;
}

.svg-form-valid {
  background-position: 47.8384527873% 0;
}

.svg-form-valid-dims {
  width: 32px;
  height: 32px;
}

.svg-grid-layout-1 {
  background-position: 48.6379114642% 0;
}

.svg-grid-layout-1-dims {
  width: 24px;
  height: 24px;
}

.svg-grid-layout-2 {
  background-position: 49.3189557321% 0;
}

.svg-grid-layout-2-dims {
  width: 24px;
  height: 24px;
}

.svg-grid-layout-2-mob {
  background-position: 50% 0;
}

.svg-grid-layout-2-mob-dims {
  width: 24px;
  height: 24px;
}

.svg-grid-layout-3 {
  background-position: 50.6810442679% 0;
}

.svg-grid-layout-3-dims {
  width: 24px;
  height: 24px;
}

.svg-grid-layout-4 {
  background-position: 51.3620885358% 0;
}

.svg-grid-layout-4-dims {
  width: 24px;
  height: 24px;
}

.svg-hamburger {
  background-position: 52.1615472127% 0;
}

.svg-hamburger-dims {
  width: 32px;
  height: 32px;
}

.svg-hamburger-menu {
  background-position: 52.9511918275% 0;
}

.svg-hamburger-menu-dims {
  width: 24px;
  height: 24px;
}

.svg-heart {
  background-position: 53.6322360953% 0;
}

.svg-heart-dims {
  width: 24px;
  height: 24px;
}

.svg-heart-filled {
  background-position: 54.3132803632% 0;
}

.svg-heart-filled-dims {
  width: 24px;
  height: 24px;
}

.svg-home {
  background-position: 54.9787234043% 0;
}

.svg-home-dims {
  width: 23px;
  height: 20px;
}

.svg-icon-facebook {
  background-position: 55.552407932% 0;
}

.svg-icon-facebook-dims {
  width: 18px;
  height: 18px;
}

.svg-icon-naver {
  background-position: 55.9687773976% 0;
}

.svg-icon-naver-dims {
  width: 12.1px;
  height: 12px;
}

.svg-icon-play {
  background-position: 57.1756601607% 0;
}

.svg-icon-play-dims {
  width: 64px;
  height: 64px;
}

.svg-icon-twitter {
  background-position: 58.9618583309% 0;
}

.svg-icon-twitter-dims {
  width: 61px;
  height: 18px;
}

.svg-info {
  background-position: 60.0674730519% 0;
}

.svg-info-dims {
  width: 23.63px;
  height: 23.63px;
}

.svg-info-circle {
  background-position: 60.6859410431% 0;
}

.svg-info-circle-dims {
  width: 20px;
  height: 20px;
}

.svg-info-circle-gray {
  background-position: 61.1488398415% 0;
}

.svg-info-circle-gray-dims {
  width: 14px;
  height: 14px;
}

.svg-instagram {
  background-position: 62.0011402509% 0;
}

.svg-instagram-dims {
  width: 40px;
  height: 40px;
}

.svg-item-added {
  background-position: 63.1054131054% 0;
}

.svg-item-added-dims {
  width: 38px;
  height: 38px;
}

.svg-lock {
  background-position: 63.7882219706% 0;
}

.svg-lock-dims {
  width: 16px;
  height: 18px;
}

.svg-minus {
  background-position: 64.7176269253% 0;
}

.svg-minus-dims {
  width: 42px;
  height: 42px;
}

.svg-mute {
  background-position: 65.5788876277% 0;
}

.svg-mute-dims {
  width: 24px;
  height: 25px;
}

.svg-navicon {
  background-position: 66.2599318956% 0;
}

.svg-navicon-dims {
  width: 24px;
  height: 9.73px;
}

.svg-newsletter {
  background-position: 67.0932878271% 0;
}

.svg-newsletter-dims {
  width: 32px;
  height: 32px;
}

.svg-p-trash-can {
  background-position: 67.8490351873% 0;
}

.svg-p-trash-can-dims {
  width: 24px;
  height: 24px;
}

.svg-password-revealed-0 {
  background-position: 68.6079545455% 0;
}

.svg-password-revealed-0-dims {
  width: 28px;
  height: 22px;
}

.svg-password-revealed-1 {
  background-position: 69.4034090909% 0;
}

.svg-password-revealed-1-dims {
  width: 28px;
  height: 20px;
}

.svg-pdp-delivery {
  background-position: 70.3187250996% 0;
}

.svg-pdp-delivery-dims {
  width: 34px;
  height: 32px;
}

.svg-pdp-free-shipping {
  background-position: 71.6123499142% 0;
}

.svg-pdp-free-shipping-dims {
  width: 50px;
  height: 32px;
}

.svg-pdp-returns {
  background-position: 72.6884779516% 0;
}

.svg-pdp-returns-dims {
  width: 33px;
  height: 32px;
}

.svg-pdp-zoom {
  background-position: 73.606370876% 0;
}

.svg-pdp-zoom-dims {
  width: 32px;
  height: 32px;
}

.svg-pickup-map-location {
  background-position: 74.3473325766% 0;
}

.svg-pickup-map-location-dims {
  width: 24px;
  height: 24px;
}

.svg-pinterest {
  background-position: 75.3705815279% 0;
}

.svg-pinterest-dims {
  width: 40px;
  height: 40px;
}

.svg-plus {
  background-position: 76.5544780376% 0;
}

.svg-plus-dims {
  width: 42px;
  height: 42px;
}

.svg-present {
  background-position: 77.4431818182% 0;
}

.svg-present-dims {
  width: 28px;
  height: 31px;
}

.svg-present-box {
  background-position: 78.0612244898% 0;
}

.svg-present-box-dims {
  width: 20px;
  height: 19px;
}

.svg-product-tile-color-variants {
  background-position: 78.5390713477% 0;
}

.svg-product-tile-color-variants-dims {
  width: 16px;
  height: 16px;
}

.svg-puma-arrow-top {
  background-position: 79.1713961407% 0;
}

.svg-puma-arrow-top-dims {
  width: 24px;
  height: 24px;
}

.svg-puma-logo {
  background-position: 80.4% 0;
}

.svg-puma-logo-dims {
  width: 48px;
  height: 37px;
}

.svg-puma-logo-with-text {
  background-position: 82.1469575201% 0;
}

.svg-puma-logo-with-text-dims {
  width: 64px;
  height: 32px;
}

.svg-qrcode-solid {
  background-position: 83.0306469921% 0;
}

.svg-qrcode-solid-dims {
  width: 24px;
  height: 24px;
}

.svg-question-circle {
  background-position: 83.5220838052% 0;
}

.svg-question-circle-dims {
  width: 16px;
  height: 16px;
}

.svg-red-heart {
  background-position: 84.1657207719% 0;
}

.svg-red-heart-dims {
  width: 24px;
  height: 24px;
}

.svg-red-heart-filled {
  background-position: 84.8467650397% 0;
}

.svg-red-heart-filled-dims {
  width: 24px;
  height: 24px;
}

.svg-return {
  background-position: 85.5278093076% 0;
}

.svg-return-dims {
  width: 24px;
  height: 24px;
}

.svg-ruler {
  background-position: 86.0379495894% 0;
}

.svg-ruler-dims {
  width: 17px;
  height: 16px;
}

.svg-search {
  background-position: 86.9132290185% 0;
}

.svg-search-dims {
  width: 33px;
  height: 32px;
}

.svg-slider-handle {
  background-position: 87.827076223% 0;
}

.svg-slider-handle-dims {
  width: 32px;
  height: 29px;
}

.svg-social-fb {
  background-position: 88.7372013652% 0;
}

.svg-social-fb-dims {
  width: 32px;
  height: 32px;
}

.svg-social-instagram {
  background-position: 89.6473265074% 0;
}

.svg-social-instagram-dims {
  width: 32px;
  height: 32px;
}

.svg-social-pinterest {
  background-position: 90.5574516496% 0;
}

.svg-social-pinterest-dims {
  width: 32px;
  height: 32px;
}

.svg-social-twitter {
  background-position: 91.6500427472% 0;
}

.svg-social-twitter-dims {
  width: 39px;
  height: 32px;
}

.svg-social-youtube {
  background-position: 92.9468874929% 0;
}

.svg-social-youtube-dims {
  width: 46px;
  height: 32px;
}

.svg-store-locator {
  background-position: 93.6453900709% 0;
}

.svg-store-locator-dims {
  width: 23px;
  height: 32px;
}

.svg-support {
  background-position: 94.5392491468% 0;
}

.svg-support-dims {
  width: 32px;
  height: 32px;
}

.svg-trash-can {
  background-position: 95.2326901249% 0;
}

.svg-trash-can-dims {
  width: 24px;
  height: 24px;
}

.svg-twitter {
  background-position: 96.3511972634% 0;
}

.svg-twitter-dims {
  width: 40px;
  height: 40px;
}

.svg-unmute {
  background-position: 97.0488081725% 0;
}

.svg-unmute-dims {
  width: 24px;
  height: 25px;
}

.svg-video-pause {
  background-position: 97.95221843% 0;
}

.svg-video-pause-dims {
  width: 32px;
  height: 32px;
}

.svg-video-play {
  background-position: 98.8623435722% 0;
}

.svg-video-play-dims {
  width: 32px;
  height: 32px;
}

.svg-youtube {
  background-position: 100% 0;
}

.svg-youtube-dims {
  width: 40px;
  height: 40px;
}

/*md

# Refinement bar

*/
.refinement-open .refinements {
  transform: translateX(0);
  visibility: visible;
}
@media (max-width: 1199.98px) {
  .refinements {
    background-color: #fff;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    margin-bottom: 0;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in;
    visibility: hidden;
    z-index: 1601;
  }
}
@media (min-width: 1200px) {
  .refinements:not(.refinements-sidebar) {
    width: 100%;
  }
}
@media (max-width: 1023.98px) {
  .refinements {
    width: 80vw;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .refinements {
    width: 50vw;
  }
}
.refinements.refinements-sidebar {
  background-color: #fff;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  left: 0;
  margin-bottom: 0;
  max-width: 30rem;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.03s ease-in;
  visibility: hidden;
  width: 80vw;
  z-index: 1601;
}
.refinement-open .refinements.refinements-sidebar {
  transform: translateX(0);
  visibility: visible;
}
.refinements.refinements-sidebar .refinements-modal-top { /* stylelint-disable no-descending-specificity */
  overflow: auto;
  padding: 1.25rem;
}

.refinement-nav,
.filter-bar {
  margin: 0 auto;
  max-width: 1660px;
}

@media (min-width: 1024px) {
  .refinement-nav {
    display: flex;
    justify-content: space-between;
  }
}

.refinement-bar-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.25rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
@media (max-width: 1023.98px) {
  .refinement-bar-title {
    display: none;
  }
}

.refinement-bar-filter-by-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  .refinement-bar-filter-by-title {
    height: 2.125rem;
  }
}

.refinement-bar-filter-title {
  margin-right: 0.3125rem;
}

.refinement-bar {
  width: 100%;
}
@media (min-width: 1200px) {
  .refinement-bar:not(.refinement-bar-sidebar) {
    align-items: flex-start;
    display: flex;
    flex-basis: 80%;
  }
}
.refinement-bar.refinement-bar-sidebar .refinement-bar-filter-title {
  display: inline-block;
}

.refinement-bar-filter-block {
  align-items: center;
  background: none;
  border: none;
  color: inherit;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
}
.refinement-bar-filter-block.refinement-bar-filter-sidebar {
  display: none;
}
.refinement-bar-filter-block-sidebar {
  border: 1px solid #ccc;
  padding: 0.375rem 0.5rem;
}

.refinement-bar-filter-count {
  margin-left: 0.625rem;
}

@media (min-width: 1200px) {
  .refinement-bar-filter-title,
  .refinement-bar-filter-count {
    display: none;
  }
}

.icon-filters,
.refinement-icon-close {
  height: 1.25rem;
  width: 1.25rem;
}

.refinement-icon-close {
  display: block;
  margin: 0 -10px 8px auto;
  padding: 0;
}

.refinement-bar-toggle {
  display: block;
  fill: #fff;
  height: 1.875rem;
  position: absolute;
  right: 0.3125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
@media (min-width: 1024px) {
  .refinement-bar-toggle {
    display: none;
  }
}

.refinement {
  border-bottom: 1px solid #eee;
  margin: 0.8125rem 0;
}
@media (min-width: 1200px) {
  .refinement:not(.refinement-sidebar) {
    border: 0;
    display: inline-block;
    line-height: 1.5rem;
    margin: 0 0 0 0.75rem;
  }
  .more-filters--expand .refinement:not(.refinement-sidebar) {
    margin-bottom: 1rem;
  }
  .refinement:not(.refinement-sidebar):first-child {
    margin-left: rem-cal(20px);
  }
}
@media (min-width: 1200px) {
  .refinement.refinement--hidden:not(.refinement-sidebar) {
    display: none;
  }
  .more-filters--expand .refinement.refinement--hidden:not(.refinement-sidebar) {
    display: inline-block;
  }
}
.refinement-bar-sidebar .refinement-bar-filter-count {
  display: inline-block;
}

.refinement-item.disabled {
  pointer-events: none;
}
.refinement-item.disabled:hover {
  background-color: transparent;
}

.refinement--turntoaveragerating.refinement-sidebar .refinement-item.refinement-item--text {
  margin-bottom: 0;
}
.refinement--turntoaveragerating.refinement-sidebar .custom-controls-stacked {
  display: inline-flex;
  flex-direction: column;
}

@media (min-width: 1200px) {
  .refinement-list {
    margin-bottom: 0;
    max-height: 16rem;
    overflow-y: auto;
  }
  .refinement-list .refinement-category-list.refinement-list {
    margin-top: 10px;
    max-height: none;
    overflow-y: hidden;
  }
}
.refinement-list.refinement-category-list .refinement-item.refinement-item--text {
  margin: 0;
}
.refinement-list.refinement-category-list .refinement-item.refinement-item--text:hover {
  background-color: transparent;
}
.refinement-list > .refinement-category-list > .refinement-item > .refinement-button {
  margin-bottom: 5px;
}

.refinement-title {
  align-items: center;
  display: flex;
  font-size: 1.125rem;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: 0;
  line-height: 1.625rem;
  margin-bottom: 0.625rem;
  padding: 0;
  text-transform: capitalize;
  width: 100%;
}
@media (min-width: 1200px) {
  .refinement-title:not(.refinement-title-sidebar) {
    border: 1px solid #ccc;
    border-radius: 0.125rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
  }
  .refinement-title:not(.refinement-title-sidebar).refined {
    border-color: #181818;
  }
  .refinement-title:not(.refinement-title-sidebar) .refinement-toggle {
    display: inline-block;
    margin-left: 0.625rem;
    padding: 0;
  }
}
.refinement-title:hover, .refinement-title:active, .refinement-title:focus {
  box-shadow: none;
}

.refinement-icon.refinement-icon--collapse {
  display: block;
}
.refinement-icon.refinement-icon--expand {
  display: none;
}

.refinement-toggle,
.refinement-icon {
  display: block;
  height: 0.8125rem;
  padding: 0;
  width: 0.8125rem;
}
@media (min-width: 1200px) {
  .refinement-toggle,
  .refinement-icon {
    height: 0.5625rem;
    width: 0.5625rem;
  }
}

.refinement-icon--chevron {
  display: block;
  height: 0.5625rem;
  transition: 200ms all;
  width: 0.5625rem;
}

.is-open .refinement-toggle .refinement-icon--collapse {
  display: none;
}
.is-open .refinement-toggle .refinement-icon--expand {
  display: block;
}
.is-open .refinement-toggle .refinement-icon--chevron {
  transform: rotate(180deg);
}

.refinement-clear {
  margin: 0.625rem 0 1.25rem;
  text-transform: uppercase;
}
@media (min-width: 1200px) {
  .refinement-clear {
    margin: 1.25rem 0 0.625rem;
    text-align: center;
  }
  .refinement--color .refinement-clear {
    margin-top: 0.625rem;
  }
}
@media (min-width: 1200px) {
  .refinement-clear-sidebar .refinement-clear {
    margin: 0 0 0.625rem;
    text-align: left;
  }
  .refinement-clear-sidebar .refinement-clear .icon-clear {
    display: none;
  }
}

.refinement-btn {
  align-items: center;
  border-bottom: 2px solid #eee;
  color: #181818;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 0 0.3125rem;
}
@media (min-width: 1200px) {
  .refinement-btn {
    padding: 0 0 0.1875rem;
  }
}
.refinement-btn svg {
  display: inline-block;
  fill: #181818;
  height: 1.25rem;
  margin-left: 0.3125rem;
  width: 1.25rem;
}
.refinement-btn .refinement-icon-btn {
  height: 0.625rem;
  width: 0.625rem;
}

.refinement-button.disabled {
  background-color: transparent;
  border: 0;
  color: #ccc;
}
.refinement-button.disabled .refinement-item-text-count {
  color: #ccc;
}

.refinement-button:focus,
.refinement-btn:focus,
.refinement-toggle:focus,
.refinement-icon-close:focus {
  box-shadow: none;
}

.refinement-btn-more {
  display: inline-block;
}

.refinement-btn-less {
  display: none;
}

.more-filters-btn {
  margin-left: 0.75rem;
  padding-bottom: 0.375rem;
}
.more-filters-btn-sidebar {
  display: none;
}

.more-filters--expand .refinement-btn-more {
  display: none;
}
.more-filters--expand .refinement-btn-less {
  display: inline-block;
}
.more-filters--expand .more-less-btn-icon::after {
  opacity: 0;
}

.icon-clear {
  display: none;
}
@media (min-width: 1024px) {
  .icon-clear {
    display: inline-block;
  }
}

.filter-bar-list {
  margin-bottom: 0;
  padding-left: 0;
}
.filter-bar-list li {
  display: inline-block;
  list-style: none;
  margin: 0 1rem 0.625rem 0;
}

.filter-bar-item {
  background-color: #fafafa;
  border-radius: 0.125rem;
}

.filter-bar-btn {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  text-transform: capitalize;
}
.filter-bar-btn:hover, .filter-bar-btn:active, .filter-bar-btn:focus {
  box-shadow: none;
}
.filter-bar-btn .icon-close {
  height: 0.875rem;
  width: 0.875rem;
}

.filter-bar-value {
  margin-right: 0.25rem;
}

.refinement .collapse:not(.show) {
  display: none;
}
@media (max-width: 1199.98px) {
  .refinement .collapse:not(.show) {
    display: block;
  }
}

@media (max-width: 1199.98px) {
  .refinements-modal-top {
    overflow: auto;
    padding: 1.25rem;
  }
}

.refinements-modal-header {
  border-bottom: 1px solid #eee;
  margin: -1.25rem -1.25rem 1.25rem;
  padding: 0.75rem 0 0.75rem 1.25rem;
  position: relative;
}
.refinements-modal-header .refinement-icon-close {
  margin: 0;
}
.refinements-modal-header .btn {
  position: absolute;
  right: 0;
  top: 0;
}

.refinement-show {
  display: none;
}
.is-open .refinement-show {
  display: block;
  margin-top: 0.5rem;
}
.refinement-show.refinement-show-sidebar .refinement-icon-close {
  display: none;
}
@media (min-width: 1200px) {
  .refinement-show:not(.refinement-show-sidebar) {
    background-color: #fff;
    border: 1px solid #181818;
    box-shadow: 0 5px 25px 0 rgba(175, 165, 150, 0.4588235294), 0 1px 3px 0 rgba(82, 82, 82, 0.3019607843);
    min-width: 12.5rem;
    padding: 0.625rem 1.25rem 1.25rem;
    position: absolute;
    z-index: 1000;
  }
}

.refinements-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.refinements-modal-center {
  background-color: #fff;
  flex-grow: 1;
  position: relative;
}

.refinements-modal-bottom {
  box-shadow: 0 -1.875rem 1.875rem -1.875rem #ccc;
  padding: 1.25rem;
}
.refinements-modal-bottom .refinement-btn {
  margin-bottom: 1.25rem;
}

.refinements-overlay-mask {
  background: rgba(0, 0, 0, 0.05);
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0;
  pointer-events: all;
  position: fixed;
  right: 0;
  top: 0;
  touch-action: none;
  transition: opacity 0.3s ease-in;
  z-index: 1600;
}
.refinement-open .refinements-overlay-mask {
  display: block;
  opacity: 1;
}

.is-scroll-disabled .veil {
  z-index: 1601;
}

@media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.25), (min-width: 1200px) and (min-resolution: 1.25dppx) {
  .refinement-list {
    max-height: 13.75rem; /* for up 1.25dppx displays */
  }
}
/*md

# Refinement bar - text

*/
.refinement-item.refinement-item--text {
  color: #181818;
  display: block;
  font-size: 1rem;
  margin: 0 0.625rem 0.625rem 0;
  padding: 0 1.25rem 0.3125rem 0.625rem;
}
@media (min-width: 1200px) {
  .refinement-item.refinement-item--text:hover {
    background-color: #fafafa;
  }
  .refinement-item.refinement-item--text:hover .mode-control-indicator {
    border-color: #999;
  }
}
.refinement-item.refinement-item--text .refinement-button {
  padding: 0;
}

.refinement-item-text-value {
  font-weight: 400;
  padding-top: 0.25rem !important;
  text-transform: capitalize;
}

.refinement-item-text-count {
  color: #191919;
}

/*md

# Refinement bar - price

*/
.refinement-item.refinement-item--price {
  margin-bottom: 0.625rem;
  padding-left: 0.625rem;
  padding-left: 0.3125rem;
}
@media (min-width: 1200px) {
  .refinement-item.refinement-item--price:hover {
    background-color: #fafafa;
  }
  .refinement-item.refinement-item--price:hover .mode-control-indicator {
    border-color: #999;
  }
}
.refinement-item.refinement-item--price .refinement-button {
  padding: 0;
}
.refinement-item .refinement-item-price-value {
  font-weight: 400;
  text-transform: none;
}

/*md

# Refinement bar - size

*/
.refinement.refinement--size .refinement-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
@media (min-width: 768px) and (max-width: 1439.98px) {
  .refinement.refinement--size .refinement-list {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1200px) {
  .refinement.refinement--size .refinement-list {
    grid-template-columns: repeat(8, 1fr);
  }
}
.refinement.refinement--size .refinement-item {
  margin-right: 0.25rem;
  padding: 0 0.25rem 0.25rem 0;
  text-align: center;
  width: 3rem;
}
.refinement.refinement--size .refinement-item-value {
  font-size: 0.875rem;
  font-weight: 400;
}

.refinement-item.refinement-item--size .refinement-button {
  border: 1px solid #eee;
  border-radius: 0.125rem;
  display: block;
  font-size: 0.875rem;
  height: 3rem;
  padding: 0;
  width: 3rem;
}
@media (min-width: 1200px) {
  .refinement-item.refinement-item--size .refinement-button:hover, .refinement-item.refinement-item--size .refinement-button:active, .refinement-item.refinement-item--size .refinement-button:focus {
    border-color: #000;
  }
}
.refinement-item.refinement-item--size .refinement-button.m-selected {
  border-color: #000;
}

/*md

# Refinement bar - color

*/
.refinement.refinement--color .refinement-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 1200px) {
  .refinement.refinement--color .refinement-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.refinement.refinement--color .refinement-item--color {
  margin-bottom: 1.25rem;
}
@media (min-width: 1200px) {
  .refinement.refinement--color .refinement-item--color {
    margin: 0 0.625rem 1.25rem;
  }
  .refinement.refinement--color .refinement-item--color:hover .icon-check {
    opacity: 0.5;
  }
}
.refinement.refinement--color .refinement-item--color .refinement-button {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: transparent;
  display: flex;
  font-size: 0;
  height: 2.25rem;
  justify-content: center;
  margin: 0 auto;
  text-shadow: none;
  width: 2.25rem;
}
.refinement.refinement--color .refinement-item--color .icon-check {
  flex-shrink: 0;
}
.refinement.refinement--color .refinement-item--color .refinement-color-name {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0 0.3125rem;
  text-transform: capitalize;
}
.refinement.refinement--color .refinement-item {
  text-align: center;
  vertical-align: top;
}

.icon-check {
  display: none;
  fill: #fff;
  height: 1.25rem;
  width: 1.25rem;
}
.m-selected .icon-check {
  display: block;
  margin: 0 auto;
}
.swatch-circle-yellow .icon-check {
  fill: #181818;
}
.swatch-circle-white .icon-check {
  fill: #181818;
}

.refinement-item.swatch-circle-beige .refinement-button {
  background-color: #f5f5dc;
}
.refinement-item.swatch-circle-black .refinement-button {
  background-color: #000;
}
.refinement-item.swatch-circle-blue .refinement-button {
  background-color: blue;
}
.refinement-item.swatch-circle-brown .refinement-button {
  background-color: #a52a2a;
}
.refinement-item.swatch-circle-gold .refinement-button {
  background-color: #cd9a01;
}
.refinement-item.swatch-circle-green .refinement-button {
  background-color: green;
}
.refinement-item.swatch-circle-gray .refinement-button {
  background-color: #999;
}
.refinement-item.swatch-circle-metallic .refinement-button {
  background-color: #bcc6cc;
}
.refinement-item.swatch-circle-navy .refinement-button {
  background-color: #000080;
}
.refinement-item.swatch-circle-orange .refinement-button {
  background-color: orange;
}
.refinement-item.swatch-circle-pink .refinement-button {
  background-color: #fe249a;
}
.refinement-item.swatch-circle-purple .refinement-button {
  background-color: purple;
}
.refinement-item.swatch-circle-red .refinement-button {
  background-color: #f00;
}
.refinement-item.swatch-circle-silver .refinement-button {
  background-color: #c0c0c0;
}
.refinement-item.swatch-circle-tan .refinement-button {
  background-color: #d7bb70;
}
.refinement-item.swatch-circle-white .refinement-button {
  background-color: #fff;
}
.refinement-item.swatch-circle-yellow .refinement-button {
  background-color: yellow;
}

.swatch-circle-metallic .refinement-button {
  background: url("../../images/search/metallic.jpg") no-repeat;
}
.swatch-circle-multi-colored .refinement-button {
  background: url("../../images/search/multicolor.gif") no-repeat;
}
.swatch-circle-miscellaneous .refinement-button {
  background: url("../../images/search/multicolor.gif") no-repeat;
}
.swatch-circle-assorted-colours .refinement-button {
  background: url("../../images/search/multicolor.gif") no-repeat;
}

/*md

# PLP sort by section

*/
.search-results,
.plp-bottom-seo-block {
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .search-results,
  .plp-bottom-seo-block {
    padding: 0 2.25rem;
  }
}
@media (min-width: 1200px) {
  .search-results,
  .plp-bottom-seo-block {
    padding: 0 1.875rem;
  }
}

.refinement-bar-container {
  transition: top 0.3s ease-in-out;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin: 0 -1rem 1.25rem -1rem;
  padding: 1.25rem 1rem;
  position: sticky;
  top: -1.25rem;
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
  .refinement-bar-container {
    transition: none;
  }
}
@media (min-width: 768px) {
  .refinement-bar-container:not(.js-refinement-sidebar-filter) {
    margin: 0 -2.25rem 1.25rem -2.25rem;
    padding: 1.25rem 2.25rem;
  }
}
@media (min-width: 1200px) {
  .refinement-bar-container {
    margin: 0 -1.875rem 1.25rem -1.875rem;
    padding: 1.25rem 1.875rem;
    top: 3.75rem;
  }
}
@media (min-width: 1440px) {
  .refinement-bar-container {
    top: 4.25rem;
  }
}
@media (min-width: 1650px) {
  .refinement-bar-container {
    top: 5rem;
  }
}
.refinement-bar-container.refinement-open {
  position: static;
}
.refinement-bar-container.refinement-bar-container--hidden {
  top: 3.75rem;
}

.search-results-sort-by {
  width: 10.3125rem;
}
@media (min-width: 544px) {
  .search-results-sort-by {
    display: inline-block;
    margin-left: 2.5rem;
    width: 13.125rem;
  }
}
.search-results-sort-by .form-group {
  margin-bottom: 0;
}

.kop-newsletter-form .floatl {
  display: flex;
}
.kop-newsletter-form .form-group.col-12 .form-group {
  flex: 0 0 50%;
}

.infinite-scroll-active .show-more {
  display: none;
}

/*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

*/
.back-to-top-wrapper {
  bottom: 1.5625rem;
  display: none;
  position: fixed;
  right: 1.5625rem;
  z-index: 15;
}
.back-to-top-wrapper.is-visible {
  display: block;
}

.back-to-top-icon {
  fill: #000;
  height: 1.875rem;
  width: 1.75rem;
}

.back-to-top-button {
  align-items: center;
  background-color: #fff;
  border: 0.0625rem solid #ccc;
  border-radius: 50%;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0.3125rem;
  width: 2.5rem;
}
.back-to-top-button, .back-to-top-button:hover, .back-to-top-button:active, .back-to-top-button:focus {
  outline: none;
}

.back-to-top-icon {
  fill: #000;
  height: 1.875rem;
  width: 1.75rem;
}

.back-to-top-button {
  border: 0.0625rem solid #191919;
  height: 3.125rem;
  width: 3.125rem;
}

/*md

# Product tile

*/
.primary-images .carousel img {
  height: 100%;
  width: 100%;
}

.product-tile {
  margin-bottom: 1.875rem;
  padding: 0.25rem;
}

.product-tile-image-container {
  position: relative;
}

.product-tile-image-wrapper {
  border: 1px solid #fafafa;
  margin: 0.0625rem;
}

.product-tile-image-link {
  display: block;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.product-tile-image-link:focus-visible {
  outline-offset: -2px;
}

.product-tile-image {
  width: 100%;
}
.product-tile--inactive .product-tile-image {
  opacity: 0.5;
}
.product-tile-image-container--pre-order-active .product-tile--pre-order .product-tile-image {
  opacity: 1;
}

.product-tile-swatch-container {
  height: 2.6875rem;
  margin: 0.4375rem 0 0.625rem 0;
  overflow: hidden;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .product-tile-swatch-container {
    height: 2.875rem;
  }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .product-tile-swatch-container {
    height: 4rem;
  }
}
@media (min-width: 1200px) {
  .product-tile-swatch-container {
    height: 4.375rem;
  }
}

.swatch-title {
  align-items: center;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0 0.5rem;
}
.swatch-title.is-hidden {
  display: none;
}

.swatch-title-icon {
  fill: #666;
  height: 0.5625rem;
  margin-left: 0.4375rem;
  width: 0.5625rem;
}

.product-tile-info-container {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  /*.coming-soon-tile {
      text-align: center;
  }*/
  /*.compare {
      font-size: rem-calc($globalFontSize--14);
      padding-right: 0;
      text-align: right;
  }

  .reviews {
      font-size: rem-calc($globalFontSize--14);
      padding-left: 0;
  }*/
}
@media (max-width: 767.98px) {
  .col-6 .product-tile-info-container {
    flex-direction: column;
  }
}

.product-tile-text-container {
  padding: 0 0.5rem;
}

.product-tile-info-text {
  margin-bottom: 0.625rem;
}

@media (min-width: 768px) {
  .product-tile-title {
    line-height: 1.5rem;
  }
}
.product-tile-title:hover, .product-tile-title:active, .product-tile-title:focus {
  text-decoration: none;
}

.product-tile-promotion .line-item-promo-callout-container .modal-body {
  text-align: center;
}
.product-tile-promotion .line-item-promo-callout-title {
  color: #ba2026;
  margin: 0 0 0.625rem;
}
@media (min-width: 768px) {
  .product-tile-promotion .line-item-promo-callout-title {
    line-height: 1.5rem;
  }
}
.product-tile-promotion .line-item-promo-callout-title:hover, .product-tile-promotion .line-item-promo-callout-title:active, .product-tile-promotion .line-item-promo-callout-title:focus {
  text-decoration: none;
}

.product-tile-badge-container {
  font-size: 0;
}

.product-tile-info-price {
  align-self: flex-start;
  margin-left: 1.25rem;
  text-align: right;
}
@media (max-width: 767.98px) {
  .col-6 .product-tile-info-price {
    margin-left: 0;
    text-align: left;
  }
}

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

/* If rating will not be present on PLP remove this part of styles

.product-tile-rating {
    line-height: rem-calc(14px);
    margin-top: rem-calc(8px);
}

.product-tile-rating-image {
    height: rem-calc(14px);
    margin-bottom: rem-calc(8px);
    vertical-align: top;
    width: rem-calc(86px);
}

.product-tile-rating-text {
    font-size: rem-calc($globalFontSize--14);
    margin: rem-calc(0 3px);
    vertical-align: top;
    white-space: nowrap;
}
*/
.product-tile__swatch-title {
  padding: 0;
}
.product-tile__swatch-title .swatch-tile-color-variants-icon {
  height: 1rem;
  margin-right: 0.5rem;
  width: 1rem;
}
.product-tile__swatch-title .hidden-lg-up {
  display: inline-block !important;
}

.product-tile-info-container {
  display: inline-block;
  padding: 0 0 0.5rem 0;
}
.product-tile-info-container .product-tile-info-text {
  margin-bottom: 0.75rem;
}
.product-tile-info-container .product-tile-info-price {
  display: flex;
  flex-flow: wrap;
  gap: 0.125rem 0.5rem;
  margin: 0;
  text-align: unset;
}

.product-tile-price-new,
.product-tile-price-old,
.product-tile-price-standard {
  white-space: normal;
}

.product-tile-text-container {
  padding: 0;
}

/*md

# PLP product grid

*/
.product-grid-container {
  margin: 0 auto;
  max-width: 1660px;
}

.product-grid-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 1.25rem 0;
}
@media (min-width: 1024px) {
  .product-grid-header {
    margin: 2.5rem 0;
  }
}

.product-results-header {
  display: flex;
  padding: 0;
}

.product-results-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
  margin-bottom: 0;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .product-results-title {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

.search-results-count {
  display: inline-block;
}

.search-noresult-message {
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 2.5rem 0 5rem;
}
.search-noresult-message .product-results-title {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.25rem;
}
.search-noresult-message .btn {
  cursor: pointer;
}
.search-noresult-message p {
  margin-bottom: 2.5rem;
  max-width: 53.4375rem;
}

.product-grid-layout-wrapper {
  line-height: 1.625rem;
}
.product-grid-layout-wrapper .btn {
  padding: 0.4375rem;
}
.product-grid-layout-wrapper .btn:hover, .product-grid-layout-wrapper .btn:active, .product-grid-layout-wrapper .btn:focus {
  box-shadow: none;
}

.product-grid-layout {
  display: none;
  visibility: hidden;
}
@media (max-width: 543.98px) {
  .product-grid-layout.product-grid-layout--mobile {
    display: block;
    min-width: 4.375rem;
    visibility: visible;
  }
}
@media (min-width: 544px) and (max-width: 1199.98px) {
  .product-grid-layout.product-grid-layout--tablet {
    display: block;
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .product-grid-layout.product-grid-layout--desktop {
    display: block;
    visibility: visible;
  }
}

.icon-grid {
  border: 1px solid transparent;
  fill: #181818;
  height: 1.5rem;
  width: 1.5rem;
}
.active .icon-grid {
  border: 1px solid #181818;
}

@media (max-width: 767.98px) {
  .product-grid .col-6 .swatch-container {
    width: 2.125rem;
  }
  .product-grid .col-6 .product-tile-swatch-container {
    height: 2.625rem;
  }
  .product-grid .col-6 .swatches-carousel {
    width: 9.6875rem;
  }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .product-grid .col-md-6 .swatch-container {
    width: 4.0625rem;
  }
  .product-grid .col-md-6 .product-tile-swatch-container {
    height: 4.1875rem;
  }
  .product-grid .col-md-6 .swatches-carousel {
    width: 29.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .product-grid .col-md-6 .swatch-container {
    width: 2.875rem;
  }
  .product-grid .col-md-6 .product-tile-swatch-container {
    height: 3rem;
  }
  .product-grid .col-md-6 .swatches-carousel {
    width: 21.5rem;
  }
}
@media (min-width: 1200px) {
  .product-grid .col-lg-3 .product-tile-swatch-container {
    height: 4.375rem;
  }
  .product-grid .col-lg-3 .swatch-container {
    width: 4.25rem;
  }
  .product-grid .col-lg-3 .swatches-carousel {
    width: 17.5625rem;
  }
}

.show-previous-container {
  margin: 0 0 1.25rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .show-previous-container {
    margin-top: -1rem;
  }
}

.product-grid-footer .show-more {
  padding: 0.625rem 0 5rem;
}
@media (max-width: 767.98px) {
  .product-grid-footer .show-more .btn-outline-primary {
    margin-bottom: 0.625rem;
  }
}
@media (min-width: 768px) {
  .product-grid-footer .show-more {
    padding-bottom: 6.25rem;
  }
}
@media (min-width: 1200px) {
  .product-grid-footer .show-more {
    padding-bottom: 7.5rem;
  }
}

.show-more .text-center {
  position: relative;
}

.loading-bar {
  align-items: center;
  animation: fadeInOut 2s ease-in-out infinite alternate;
  background-color: #181818;
  display: flex;
  height: 4rem;
  justify-content: center;
  opacity: 1;
  position: relative;
}
.loading-bar-text {
  color: #fff;
  font-weight: 700;
  line-height: 0.875rem;
  text-transform: uppercase;
}
.loading-bar-overlay {
  background-color: transparent;
  inset: 0;
  margin: 0;
  position: absolute;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/*md

# Product tile quick view button

*/
@media (min-width: 544px) {
  .product-tile:hover .product-tile-quickview, .product-tile:active .product-tile-quickview, .product-tile:focus .product-tile-quickview {
    cursor: pointer;
    display: block;
  }
}
.product-tile .product-tile-quickview {
  background-color: #ae946d;
  color: #fff;
  display: none;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 0.625rem;
  padding: 0.1875rem 1.25rem 0.1875rem 0.5rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}
.product-tile .product-tile-quickview:hover, .product-tile .product-tile-quickview:active, .product-tile .product-tile-quickview:focus {
  background-color: #b7a07d;
  text-decoration: none;
}
.product-tile .product-tile-quickview::after {
  content: "+";
  font-size: 1rem;
  line-height: 0.875rem;
  position: absolute;
  right: 0.3125rem;
  top: 37%;
  transform: translateY(-50%);
}

/*md

# PLP product grid

*/
.product-grid-container {
  margin: 0 auto;
  max-width: 1660px;
}

.product-grid-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 1.25rem 0;
}
@media (min-width: 1024px) {
  .product-grid-header {
    margin: 2.5rem 0;
  }
}

.product-results-header {
  display: flex;
  padding: 0;
}

.product-results-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75rem;
  margin-bottom: 0;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .product-results-title {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

.search-results-count {
  display: inline-block;
}

.search-noresult-message {
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 2.5rem 0 5rem;
}
.search-noresult-message .product-results-title {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.25rem;
}
.search-noresult-message .btn {
  cursor: pointer;
}
.search-noresult-message p {
  margin-bottom: 2.5rem;
  max-width: 53.4375rem;
}

.product-grid-layout-wrapper {
  line-height: 1.625rem;
}
.product-grid-layout-wrapper .btn {
  padding: 0.4375rem;
}
.product-grid-layout-wrapper .btn:hover, .product-grid-layout-wrapper .btn:active, .product-grid-layout-wrapper .btn:focus {
  box-shadow: none;
}

.product-grid-layout {
  display: none;
  visibility: hidden;
}
@media (max-width: 543.98px) {
  .product-grid-layout.product-grid-layout--mobile {
    display: block;
    min-width: 4.375rem;
    visibility: visible;
  }
}
@media (min-width: 544px) and (max-width: 1199.98px) {
  .product-grid-layout.product-grid-layout--tablet {
    display: block;
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .product-grid-layout.product-grid-layout--desktop {
    display: block;
    visibility: visible;
  }
}

.icon-grid {
  border: 1px solid transparent;
  fill: #181818;
  height: 1.5rem;
  width: 1.5rem;
}
.active .icon-grid {
  border: 1px solid #181818;
}

@media (max-width: 767.98px) {
  .product-grid .col-6 .swatch-container {
    width: 2.125rem;
  }
  .product-grid .col-6 .product-tile-swatch-container {
    height: 2.625rem;
  }
  .product-grid .col-6 .swatches-carousel {
    width: 9.6875rem;
  }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .product-grid .col-md-6 .swatch-container {
    width: 4.0625rem;
  }
  .product-grid .col-md-6 .product-tile-swatch-container {
    height: 4.1875rem;
  }
  .product-grid .col-md-6 .swatches-carousel {
    width: 29.625rem;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .product-grid .col-md-6 .swatch-container {
    width: 2.875rem;
  }
  .product-grid .col-md-6 .product-tile-swatch-container {
    height: 3rem;
  }
  .product-grid .col-md-6 .swatches-carousel {
    width: 21.5rem;
  }
}
@media (min-width: 1200px) {
  .product-grid .col-lg-3 .product-tile-swatch-container {
    height: 4.375rem;
  }
  .product-grid .col-lg-3 .swatch-container {
    width: 4.25rem;
  }
  .product-grid .col-lg-3 .swatches-carousel {
    width: 17.5625rem;
  }
}

.show-previous-container {
  margin: 0 0 1.25rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .show-previous-container {
    margin-top: -1rem;
  }
}

.product-grid-footer .show-more {
  padding: 0.625rem 0 5rem;
}
@media (max-width: 767.98px) {
  .product-grid-footer .show-more .btn-outline-primary {
    margin-bottom: 0.625rem;
  }
}
@media (min-width: 768px) {
  .product-grid-footer .show-more {
    padding-bottom: 6.25rem;
  }
}
@media (min-width: 1200px) {
  .product-grid-footer .show-more {
    padding-bottom: 7.5rem;
  }
}

.plp-seo-text,
.plp-seo-content-section {
  max-width: 103.75rem;
}

.plp-seo-content-section {
  margin: 1.25rem auto 2.5rem;
  padding: 0;
}
.plp-seo-content-section .product-results-header {
  margin-bottom: 1.25rem;
}
.plp-seo-content-section .product-results-title {
  font-size: 1.625rem;
  line-height: 1.625rem;
}
@media (min-width: 1024px) {
  .plp-seo-content-section .product-results-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.plp-seo-content-section .seo-description-block {
  font-size: 0.875rem;
  line-height: 1.5rem;
  padding: 0;
}
.plp-seo-content-section .category-result-count-value {
  color: #6c6c6c;
  margin-left: 0.5rem;
}

.plp-seo-text {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0 auto;
}
.plp-seo-text .html-slot-container,
.plp-seo-text .mb-5 {
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .plp-seo-text .html-slot-container,
  .plp-seo-text .mb-5 {
    padding-bottom: 6.25rem;
  }
}
@media (min-width: 1200px) {
  .plp-seo-text .html-slot-container,
  .plp-seo-text .mb-5 {
    padding-bottom: 7.5rem;
  }
}
.plp-seo-text div {
  margin: 0 !important;
  padding: 0;
}
.plp-seo-text h1,
.plp-seo-text h2,
.plp-seo-text h3 {
  margin-bottom: 1.25rem;
}
.plp-seo-text h1 {
  font-size: 2rem;
  line-height: 2.5rem;
}
@media (min-width: 1024px) {
  .plp-seo-text h1 {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}
.plp-seo-text h2 {
  font-size: 1.5rem;
  line-height: 1.75rem;
}
@media (min-width: 1024px) {
  .plp-seo-text h2 {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}
.plp-seo-text h3 {
  font-size: 1.625rem;
  line-height: 1.625rem;
}
@media (min-width: 1024px) {
  .plp-seo-text h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.plp-seo-text p {
  margin-bottom: 1.5625rem;
}
.plp-seo-text p:last-child {
  margin-bottom: 0;
}
.plp-seo-text a {
  text-decoration: underline;
}

.seo-bottom-description-block .seo-description-block {
  font-size: 0.875rem;
  line-height: 1.5rem;
  padding: 0;
}

.search-results-count {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
@media only screen and (min-width: 768px) {
  .search-results-count {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}