/*
 * This file includes all spacings defined in the styleguide.
 */

/*
 *      This file includes all colors defined in the styleguide.
 */

/* #c4c4c4 */

/* Photoswipe colors */

/*
 * This file includes all breakpoint definitions including mixins to use them.
 */

/**
 * apply-from mixin
 *
 * It wraps the content with a media query which targets devices with a viewport bigger then the provided breakpoint.
 */

/*
 * This file defines all the fonts used in the styleguide.
 */

@font-face {
    font-family: "iconFont";
    src: url("../assets/fonts/iconFont.woff2?4ff3047c76b44b3acbe70f38641bfb5c") format("woff2"),
url("../assets/fonts/iconFont.woff?4ff3047c76b44b3acbe70f38641bfb5c") format("woff");
}

i[class^="fa-"]:before, i[class*=" fa-"]:before {
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-account-settings:before {
    content: "\f101";
}

.fa-account-wishlist:before {
    content: "\f102";
}

.fa-account:before {
    content: "\f103";
}

.fa-adress:before {
    content: "\f104";
}

.fa-applepay:before {
    content: "\f105";
}

.fa-arrow-breadcrumb:before {
    content: "\f106";
}

.fa-arrow-left:before {
    content: "\f107";
}

.fa-arrow-light:before {
    content: "\f108";
}

.fa-arrow-solid:before {
    content: "\f109";
}

.fa-arrow:before {
    content: "\f10a";
}

.fa-bin:before {
    content: "\f10b";
}

.fa-burgersearch:before {
    content: "\f10c";
}

.fa-cart-newsletter:before {
    content: "\f10d";
}

.fa-cart:before {
    content: "\f10e";
}

.fa-check-e-mail-newsletter:before {
    content: "\f10f";
}

.fa-check:before {
    content: "\f110";
}

.fa-close-light:before {
    content: "\f111";
}

.fa-close:before {
    content: "\f112";
}

.fa-delivery:before {
    content: "\f113";
}

.fa-e-mail-checked-newsletter:before {
    content: "\f114";
}

.fa-e-mail:before {
    content: "\f115";
}

.fa-facebook:before {
    content: "\f116";
}

.fa-few-colors-wheel:before {
    content: "\f117";
}

.fa-france-flag:before {
    content: "\f118";
}

.fa-germany-flag:before {
    content: "\f119";
}

.fa-heart-light-l:before {
    content: "\f11a";
}

.fa-heart-light-m:before {
    content: "\f11b";
}

.fa-heart-light-s:before {
    content: "\f11c";
}

.fa-heart-solid:before {
    content: "\f11d";
}

.fa-info:before {
    content: "\f11e";
}

.fa-instagram:before {
    content: "\f11f";
}

.fa-italy-flag:before {
    content: "\f120";
}

.fa-klarna-logo:before {
    content: "\f121";
}

.fa-link:before {
    content: "\f122";
}

.fa-lock:before {
    content: "\f123";
}

.fa-logo-ballside:before {
    content: "\f124";
}

.fa-logo-campz:before {
    content: "\f125";
}

.fa-logo-jogging-point:before {
    content: "\f126";
}

.fa-logo-outfitter-three-rows:before {
    content: "\f127";
}

.fa-logo-tennis-point:before {
    content: "\f128";
}

.fa-magnifier:before {
    content: "\f129";
}

.fa-many-colors-wheel:before {
    content: "\f12a";
}

.fa-netherlands-flag:before {
    content: "\f12b";
}

.fa-order:before {
    content: "\f12c";
}

.fa-password-hidden:before {
    content: "\f12d";
}

.fa-password-legible:before {
    content: "\f12e";
}

.fa-payment:before {
    content: "\f12f";
}

.fa-pinterest:before {
    content: "\f130";
}

.fa-refinement:before {
    content: "\f131";
}

.fa-refund:before {
    content: "\f132";
}

.fa-return-short:before {
    content: "\f133";
}

.fa-return:before {
    content: "\f134";
}

.fa-see-less-light:before {
    content: "\f135";
}

.fa-see-more-light:before {
    content: "\f136";
}

.fa-send-to-friend:before {
    content: "\f137";
}

.fa-share:before {
    content: "\f138";
}

.fa-shopping-cart:before {
    content: "\f139";
}

.fa-size-out-of-stock:before {
    content: "\f13a";
}

.fa-skip:before {
    content: "\f13b";
}

.fa-spain-flag:before {
    content: "\f13c";
}

.fa-uk-flag:before {
    content: "\f13d";
}

.fa-voucher-newsletter:before {
    content: "\f13e";
}

.fa-whatsapp:before {
    content: "\f13f";
}

/*
 * This file defines all the fonts used in the styleguide.
*/

/*
 * This file includes all z-index definitions.
 * No custom z-index numbers must be used. Always reference the respective z-index defined here.
 */

/*
 * This file defines the icons used in the styleguide.
 */

.fa {
    font-size: 16px;
}

.fa.fa-heart-light-l {
    font-size: 25px;
}

/*
 * This file defines the buttons used in the styleguide.
 */

/*
 * This file defines the icons used in the styleguide.
 */

.form-row.required .before-required-indicator::after {
    content: '*';
}

.required-indicator {
    display: none;
    color: unset;
    font-size: unset;
    padding: unset;
}

.error--checkbox {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;

    color: rgb(213, 0, 0);
    display: inline-block;
    text-align: left;
    margin-left: 30px;
    margin-bottom: 15px;
}

/*
 * This file defines the mixins used in the project.
 */

/*
 * This file includes the refinement color definitions to be used as background color for the input element of each corresponding refinement.
 */

/* rgb color codes are not correctly interpreted, which results in invalid CSS. Hence, HEX codes are used instead and the corresponding lint rule hast to be disabled. */

/* stylelint-disable color-no-hex */

/* stylelint-enable color-no-hex */

/**
 * apply-from mixin
 *
 * It wraps the content with a media query which targets devices with a viewport bigger then the provided breakpoint.
 */

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */

.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Wrapper for all connect elements.
 */

.noUi-connects {
  overflow: hidden;
  z-index: 0;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}

/* Offset direction
 */

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}

/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */

.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}

.noUi-touch-area {
  height: 100%;
  width: 100%;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Slider size and handle placement;
 */

.noUi-horizontal {
  height: 18px;
}

.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}

/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */

.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}

.noUi-connects {
  border-radius: 3px;
}

.noUi-connect {
  background: #3FB8AF;
}

/* Handles and cursors;
 */

.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}

.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}

/* Handle stripes;
 */

.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}

.noUi-handle:after {
  left: 17px;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

/* Disabled state;
 */

[disabled] .noUi-connect {
  background: #B8B8B8;
}

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

/* Base;
 *
 */

.noUi-pips,
.noUi-pips * {
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

/* Values;
 *
 */

.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

/* Markings;
 *
 */

.noUi-marker {
  position: absolute;
  background: #CCC;
}

.noUi-marker-sub {
  background: #AAA;
}

.noUi-marker-large {
  background: #AAA;
}

/* Horizontal layout;
 *
 */

.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

/* Vertical layout;
 *
 */

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  transform: translate(0, -50%);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

/*
 * This file defines the stylings for the search filters
*/

/* equivalent to header height - header border top */

/* special padding requested in SFCC-1015 */

@media (min-width: 769px) {

.refinements-container_search-refinements {
        position: relative;
        margin: 0 15px
}
    }

.refinements_sticky-bar-flyout-container,
.refinements_sticky-bar-flyout-container-submenu {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 0 5px 0 rgb(51, 51, 51);
    padding: 15px;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    display: none;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.refinements-container_search-refinements .refinements-wrapper {
    display: block;
    top: -400%;
    transition: all 400ms linear;
    position: absolute;
    background: rgb(255, 255, 255);
    z-index: 101;
    width: 100%
}

.refinements-container_search-refinements .refinements-wrapper.show {
        top: 15px
    }

.refinements-container_search-refinements .refinements-wrapper.show .refinements_sticky-bar-flyout-container {
            display: flex;
        }

.refinements-container_search-refinements .refinements-wrapper .refinements-inner-wrapper {
        display: flex;
        flex-flow: column;
        overflow-y: scroll;
        max-height: 100%;
        box-sizing: border-box
    }

@media (min-width: 769px) {

.refinements-container_search-refinements .refinements-wrapper .refinements-inner-wrapper {
            flex-flow: row wrap;
            overflow-y: unset;
            max-height: unset;
            padding-bottom: unset;
            box-sizing: unset
    }
    }

.refinements-container_search-refinements .refinements-wrapper .refinements-inner-wrapper.sub-menu-expanded {
            overflow-y: hidden;
        }

.refinements-container_search-refinements .refinements-wrapper .refinements-inner-wrapper::after {
            content: '';
            min-height: 30px;
            height: 30px;
            width: 100%
        }

@media (min-width: 769px) {

.refinements-container_search-refinements .refinements-wrapper .refinements-inner-wrapper::after {
                display: none
        }
    }

.refinements-container_search-refinements .refinements-wrapper ul::after {
        content: '';
        min-height: 30px;
        height: 30px;
        width: 100%
    }

@media (min-width: 769px) {

.refinements-container_search-refinements .refinements-wrapper ul::after {
            display: none
    }
    }

@media (min-width: 769px) {

.refinements-container_search-refinements .refinements-wrapper {
        flex-flow: row wrap;
        position: relative;
        z-index: 5
}
    }

.search-result_refinements.search-result_refinements--flyout-active .refinements-container_search-refinements .refinements-wrapper {
    height: calc(var(--vh) - 145px); /* 100vh minus sticky header and footer requested in SFCC-1015 */
    box-shadow: 0 5px 10px -5px rgb(51, 51, 51)
}

@media (min-width: 481px) {

.search-result_refinements.search-result_refinements--flyout-active .refinements-container_search-refinements .refinements-wrapper {
        top: -45px /* placed right after the filter&sorting button, considering header height, header top margin and filter&sorting button border bottom */
}
    }

@media (min-width: 769px) {

.search-result_refinements.search-result_refinements--flyout-active .refinements-container_search-refinements .refinements-wrapper {
        height: unset;
        top: unset;
        overflow: unset
}
    }

.refinements-toggle_wrapper {
    text-align: center;
    position: relative;
    background: rgb(255, 255, 255)
}

.refinements-toggle_wrapper .refinement-active {
        color: rgb(255, 135, 114);
        border: 1px solid rgb(255, 135, 114);
    }

@media (min-width: 769px) {

.refinements-toggle_wrapper {
        display: none
}
    }

.search-result_refinements.search-result_refinements--flyout-active .refinements-toggle_wrapper {
    position: absolute;
    top: -60px;
    z-index: 101;
    width: 100%;
    border-top: 5px solid rgb(255, 135, 114);
    border-bottom: 1px solid rgb(224, 224, 224);
    height: 75px;
    box-sizing: border-box
}

@media (min-width: 481px) {

.search-result_refinements.search-result_refinements--flyout-active .refinements-toggle_wrapper {
        top: -120px /* equivalent to header height - header border top */
}
    }

@media (min-width: 769px) {

.search-result_refinements.search-result_refinements--flyout-active .refinements-toggle_wrapper {
        border-top: none
}
    }

.refinements-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: transparent;
    border-radius: 2px;
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid
}

.refinements-toggle.refinements-toggle--flyout-active {
        border: none;
        height: auto;
        height: 20px; /* special height requested in SFCC-1015 */
        margin-top: 25px; /* minus 5px border top requested in SFCC-1015 */
        margin-bottom: 25px; /* special margin-bottom requested in SFCC-1015 */
    }

.refinements-toggle-button {
    line-height: 1;
}

.refinements-toggle--flyout-active .refinements-toggle-button {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
}

.refinements-toggle-icon {
    margin-left: 15px
}

.refinements-toggle-icon.hide {
        display: none;
    }

.sub-refinements-toggle-close-button,
.refinements-toggle-close-button {
    display: none;
    position: absolute;
    right: 15px;
    top: 15px;
    color: rgb(51, 51, 51)
}

.sub-refinements-toggle-close-button.show, .refinements-toggle-close-button.show {
        display: inline-block;
    }

.sub-refinements-toggle-close-button {
    z-index: 3;
}

.search-results-hits {
    text-align: center;
    line-height: 45px
}

@media (min-width: 769px) {

.search-results-hits {
        display: none;
        position: absolute;
        right: calc(20% - 105px); /* 100% - 20% * 4(each refinement option) - 3 * 30px(paddings of first 3 refinement options) - 15px from left margin */
        bottom: 0;
        z-index: 2
}
    }

.search-results-hits.search-results-hits_widescreen {
    display: none
}

@media (min-width: 769px) {

.search-results-hits.search-results-hits_widescreen {
        display: block;
        right: 15px
}
    }

.search-results-hits-title {
    text-transform: capitalize;
}

.refinement.category-refinement .refinements-viewall {
    display: none;
}

.search-result_refinements--flyout-active {
    position: absolute;
    width: 100%;
    top: 60px;
    transition: all 1s linear;
    left: 0;
    right: 0
}

@media (min-width: 481px) {

.search-result_refinements--flyout-active {
        top: 120px /* header height */
}
    }

.refinement.category-refinement {
    padding: 0;
}

.refinements_boolean-refinements-container ul {
    list-style: none;
    margin: 0;
    padding: 0
}

@media (min-width: 769px) {

.refinements_boolean-refinements-container ul {
        border-top: 1px solid rgb(224, 224, 224);
        border-bottom: 1px solid rgb(224, 224, 224);
        padding: 30px 0 45px
}
    }

@media (min-width: 769px) {

.refinement.category-refinement,
.category-seo-text,
.refinements_boolean-refinements-container ul {
        width: 180px;
        margin: 0 30px;
        padding-left: 0;
        padding-right: 0
}
    }

.category-seo-text {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;

    color: rgb(119, 119, 119);
}

.refinement h3 i,
.refinement i.fa-arrow-light,
.refinements_product-sorting-flyout-wrapper i.fa-arrow-light {
    color: rgb(51, 51, 51);
    font-size: 15px; /* special font size requested in SFCC-1015 */
    height: 15px;
}

.refinements_product-sorting-flyout-wrapper i.fa-arrow-light {
    margin-right: 15px
}

@media (min-width: 769px) {

.refinements_product-sorting-flyout-wrapper i.fa-arrow-light {
        margin-right: 0;
        position: absolute;
        right: 20px; /* margin plus 5px of separation between icons  */
        pointer-events: none
}
    }

.refinement .fa-see-more-light.hide {
    display: none;
}

.refinement .fa-see-more-light::before {
    content: "\f108"
}

@media (min-width: 769px) {

.refinement .fa-see-more-light::before {
    content: "\f136"
}
    }

.refinement .fa-see-less-light::before {
    content: "\f108";

    transform: rotate(180deg)
}

@media (min-width: 769px) {

.refinement .fa-see-less-light::before {
    content: "\f136";

        transform: unset;
        width: 16px;
        background-color: rgb(51, 51, 51)
}
    }

.refinement .fa-see-less-light.hide {
        display: none;
    }

.refinement .fa-see-less-light {

    display: flex
}

@media (min-width: 769px) {

.refinement .fa-see-less-light {
        font-size: 1px; /* The see less icon needs to be 1px to show correctly */
        height: auto
}
    }

.refinement.price .fa-see-more-light {
        display: none
    }

@media (min-width: 769px) {

.refinement.price .fa-see-more-light {
            display: block
    }
    }

.refinement.price .fa-see-more-light.hide {
            display: none;
        }

.refinement.price .fa-see-less-light {
        display: none
    }

@media (min-width: 769px) {

.refinement.price .fa-see-less-light {
            display: flex
    }
    }

.refinement.price .fa-see-less-light.hide {
            display: none;
        }

.refinements_product-sorting-flyout-wrapper:hover i,
    .refinements_product-sorting-flyout-wrapper:hover .sort-by_heading {
        color: rgb(255, 135, 114)
    }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-wrapper:hover i,
    .refinements_product-sorting-flyout-wrapper:hover .sort-by_heading {
            color: unset
    }
    }

@media (min-width: 769px) {

.refinement.size ul {
        max-height: 245px;
        width: 100%
}
    }

.refinement {
    padding: 0 15px;
    background: rgb(255, 255, 255)
}

@media (min-width: 769px) {

.refinement {
        flex: 0 0 calc(25% - 32px); /* 25% - (padding + border) */
        background: unset
}
    }

.refinement h3 {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

        display: flex;
        flex-flow: column;
        align-items: center;
        background-color: rgb(255, 255, 255);
        letter-spacing: 0;
        margin: 0;
        padding: 0;
        text-transform: none;
        border-top: 1px solid rgb(224, 224, 224);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2
    }

@media (min-width: 769px) {

.refinement h3 {
            border-top: none;
            border-bottom: 1px solid rgb(224, 224, 224)
    }
    }

.refinement h3:hover {
            color: rgb(255, 135, 114);
            cursor: pointer
        }

@media (min-width: 769px) {

.refinement h3:hover {
                border-bottom: 1px solid rgb(255, 135, 114)
        }
    }

.refinement h3:hover .refinement_headline-wrapper {
                color: rgb(255, 135, 114);
            }

.refinement h3:hover i {
                color: rgb(255, 135, 114);
            }

@media (min-width: 769px) {

.refinement h3:hover .fa-see-less-light::before {
                    background-color: rgb(255, 135, 114)
            }
    }

/* hide when parent has class */

.refinement.refinement-expanded {
        position: absolute;
        top: -75px;
        width: -moz-available;
        width: -webkit-fill-available;

        /* autoprefixer: ignore next */
        width: fill-available;
        border-top: 5px solid rgb(255, 135, 114)
    }

@media (min-width: 769px) {

.refinement.refinement-expanded {
            top: unset;
            width: unset;
            border-top: none
    }
    }

.refinement.refinement-expanded .sub-refinements-toggle-close-button {
            display: block
        }

@media (min-width: 769px) {

.refinement.refinement-expanded .sub-refinements-toggle-close-button {
                display: none
        }
    }

.refinement.refinement-expanded h3 {
            justify-content: flex-end;
            border-top: none
        }

.refinement.refinement-expanded h3 .fa-see-less-light {
                margin-right: 10px;
            }

.refinement.refinement-expanded h3 .refinement_headline-wrapper {
                flex-flow: row-reverse;
                justify-content: flex-end;
                height: 65px; /* special height requested in SFCC-1015 */
                padding-top: 5px;
            }

.refinement.refinement-expanded .refinements_sticky-bar-flyout-container-submenu {
            display: flex;
            z-index: 5;
        }

.refinement.refinement-expanded .toggle .refinement_selected-values-container.refinement_selected-values-container--hide-in-widescreen {
                display: none;
            }

/* change style when parent has no class */

/* stylelint-disable-next-line no-descending-specificity */

.refinement .refinement_selected-values-container.refinement_selected-values-container--hide-in-widescreen {
        display: flex;
        align-self: baseline;
        width: 90%;
        flex-flow: row wrap;
        margin-top: -13px; /* special margin requested in SFCC-1015 */
        padding-bottom: 12px
    }

@media (min-width: 769px) {

.refinement .refinement_selected-values-container.refinement_selected-values-container--hide-in-widescreen {
            display: none
    }
    }

/* change style when parent has no class */

/* stylelint-disable-next-line no-descending-specificity */

.refinement .refinement_headline-wrapper {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        height: 45px;
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
    }

.refinement li {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

        display: flex;
        padding: 0;
        position: relative;
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinement ul {
        padding: 0;
    }

.refinement.refinementColor ul,
    .refinement ul:not(.size):not(#category-level-1):not(#category-level-2):not([id^='category-level-']) {
        display: flex;
        flex-flow: column;
    }

@media (min-width: 769px) {

.refinement.refinementColor ul {
            margin-left: 0;
            max-height: 210px /* 6 attributes are displayed */
    }
    }

.refinement.refinementColor .refinement_container.expanded ul, .refinement.size .refinement_container.expanded ul {
            margin-top: 1px; /* special margin and padding top to fix the scrolling behavior requested in SFCC-1015 */
            padding-top: 19px;
            max-height: calc(100% - 20px) /* special max-height requested in SFCC-1015 */
        }

@media (min-width: 769px) {

.refinement.refinementColor .refinement_container.expanded ul, .refinement.size .refinement_container.expanded ul {
                margin-top: 0;
                padding-top: unset;
                max-height: 245px
        }
    }

.empty-refinement {
    display: none;
    visibility: hidden;
    padding: 0 15px;
    height: 45px
}

@media (min-width: 769px) {

.empty-refinement {
        display: block;
        flex: 0 0 calc(25% - 32px) /* 25% - (padding + border) */
}
    }

.refinement_selected-values-wrapper,
.refinement_selected-sorting-rule {
    margin: 5px 5px 0 0; /* special margin requested in SFCC-1015 */
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
}

.refinement_selected-sorting-rule {
    margin-left: 15px;
}

.refinement .clear-refinement {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    display: none;
    align-items: center;
    padding: 0
}

.refinement .clear-refinement.expanded {
        display: flex;
    }

@media (min-width: 769px) {

.refinement .clear-refinement {
        margin: 0 0 30px;
        justify-content: flex-end;
        text-decoration: underline
}
    }

.refinement input {
    z-index: 1;
    margin: 0;
    cursor: pointer;
}

.refinement_label {
    margin-bottom: 0;
    line-height: 1; /* prevent 1) too much space due to mixin line-height and 2) line breaks with too little space */
    cursor: pointer;
}

.selected .refinement_label {
    color: rgb(255, 135, 114);
}

.refinement_checkbox-wrapper--size-refinement .refinement_label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-size: 13px /* no typography mixin used because color has to be untouched */
}

@media (min-width: 769px) {

.refinement_checkbox-wrapper--size-refinement .refinement_label {
        font-size: 16px /* no typography mixin used because color has to be untouched */
}
    }

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);

    display: flex;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    height: auto;
    align-items: flex-start

    /* Create a custom checkbox */
}

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper .stylefile-form-checkbox {
        display: flex;
        align-items: baseline;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(196, 196, 196);
        border-radius: 2px;
        box-sizing: border-box;
    }

/* Create and Style the custom checkbox (hidden when not checked) */

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper .stylefile-form-checkbox::after {
        width: 5px;
        height: 11px;
        border: solid rgb(255, 135, 114);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        content: '';
        display: none;
    }

/* add a border on hover */

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper:hover input ~ .stylefile-form-checkbox {
            border-color: rgb(255, 135, 114);
        }

/* Hide the browser's default checkbox */

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0

        /* Show the custom checkbox when checked */
    }

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper input:checked ~ .stylefile-form-checkbox {
            border-color: rgb(255, 135, 114)
        }

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper input:checked ~ .stylefile-form-checkbox::after {
                display: block;
            }

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper input.required.error ~ .stylefile-form-checkbox {
            border-color: rgb(213, 0, 0);
        }

/* iOS is touch device and has false value for fine pointer, it doesn't define a value for -moz-touch-enabled so it doesn't render the content
       Mozilla doesn't have a value of fine pointer but has a 0 value of -moz-touch-enabled for non touch devices so it renders the content
       Other non touch devices understand fine pointer and render the content */

@media (pointer: fine), (-moz-touch-enabled: 0) {
        .refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper:hover .refinement_label {
            cursor: pointer;
            color: rgb(255, 135, 114);
        }
    }

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper {

    padding-left: 0;
    align-items: center;
    margin: 20px 0 0; /* special margin requested in SFCC-1015 */
    min-height: 20px; /* the wrapper must have the same height as its element - necessary for iOS devices */
    max-height: 20px
}

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper .refinement_label {
        font-size: 13px /* no typography mixin used because color has to be untouched */
    }

@media (min-width: 769px) {

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper .refinement_label {
            font-size: 16px /* no typography mixin used because color has to be untouched */
    }
    }

.refinementColor .refinement_checkbox-wrapper .refinement_label {
    font-size: 13px /* no typography mixin used because color has to be untouched */
}

@media (min-width: 769px) {

.refinementColor .refinement_checkbox-wrapper .refinement_label {
        font-size: 16px /* no typography mixin used because color has to be untouched */
}
    }

.refinement .batched-refinement_checked ~ .refinement_label,
    .refinements_boolean-refinements-container .batched-refinement_checked ~ .refinement_label,
    .refinement .refinement--active-refinements,
    .refinements_boolean-refinements-container .refinement--active-refinements {
        color: rgb(255, 135, 114);
    }

.refinement.refinement--boolean-refinement {
    padding: 0;
}

.refinements_boolean-refinements-container .refinement_checkbox-wrapper {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);

    display: flex;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    height: auto;
    align-items: flex-start

    /* Create a custom checkbox */
    }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper .stylefile-form-checkbox {
        display: flex;
        align-items: baseline;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(196, 196, 196);
        border-radius: 2px;
        box-sizing: border-box;
    }

/* Create and Style the custom checkbox (hidden when not checked) */

.refinements_boolean-refinements-container .refinement_checkbox-wrapper .stylefile-form-checkbox::after {
        width: 5px;
        height: 11px;
        border: solid rgb(255, 135, 114);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        content: '';
        display: none;
    }

/* add a border on hover */

.refinements_boolean-refinements-container .refinement_checkbox-wrapper:hover input ~ .stylefile-form-checkbox {
            border-color: rgb(255, 135, 114);
        }

/* Hide the browser's default checkbox */

.refinements_boolean-refinements-container .refinement_checkbox-wrapper input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0

        /* Show the custom checkbox when checked */
    }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper input:checked ~ .stylefile-form-checkbox {
            border-color: rgb(255, 135, 114)
        }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper input:checked ~ .stylefile-form-checkbox::after {
                display: block;
            }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper input.required.error ~ .stylefile-form-checkbox {
            border-color: rgb(213, 0, 0);
        }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper {

        padding-left: 0;
        align-items: center
    }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper:hover .refinement_label {
                color: rgb(255, 135, 114);
            }

.refinements_boolean-refinements-container .refinement_checkbox-wrapper .stylefile-form-checkbox {
            top: auto;
            top: initial;
        }

/* stylelint-disable-next-line no-descending-specificity */

@media (min-width: 769px) {

.refinements_boolean-refinements-container .refinement_checkbox-wrapper .refinement_label {
                margin-left: 35px
        }
    }

#secondary .refinements_boolean-refinements-container .refinement_checkbox-wrapper:hover .refinement_label a {
            color: rgb(255, 135, 114);
        }

.refinements_boolean-refinements-container .refinement.refinement--boolean-refinement .refinement_checkbox-wrapper .refinement_label {
    font-size: 16px; /* no typography mixin used because color has to be untouched */
}

@media (min-width: 769px) {

.refinement h3.active-refinements {
        color: rgb(255, 135, 114);
        border-bottom: 1px solid rgb(255, 135, 114)
}

        .refinement h3.active-refinements i {
            color: rgb(255, 135, 114);
        }
    }

@media (min-width: 769px) and (min-width: 769px) {

        .refinement h3.active-refinements .fa-see-less-light::before {
                background-color: rgb(255, 135, 114)
        }
    }

@media (min-width: 769px) {

.refinement h3.active-refinements .refinement_headline-wrapper {
            color: rgb(255, 135, 114)
    }
    }

/* stylelint-disable-next-line no-descending-specificity */

.sort-by_heading {
    margin-right: 5px;
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73
}

@media (min-width: 769px) {

.sort-by_heading {
        display: none
}
    }

.refinements_product-sorting-flyout-container.expanded .sort-by_heading {
    margin-left: 41px; /* 41px total - equals the font-size of left icon (16px) + $mg2 regular spacing + $g1 spacing from icon next to element */
}

/* override SG stylings */

/* stylelint-disable-next-line no-descending-specificity */

#secondary a {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    line-height: 1 /* prevent 1) too much space due to mixin line-height and 2) line breaks with too little space */

    /* stylelint-disable-next-line no-descending-specificity */
}

#secondary a:active {
        color: rgb(255, 135, 114);
    }

/* stylelint-disable-next-line no-descending-specificity */

#secondary .selected a {
    color: rgb(255, 135, 114);
}

@media (min-width: 769px) {

.refinement_container.expanded {
        position: absolute;
        background-color: rgb(255, 255, 255);
        z-index: 3;

        /*
         * The width of the parent relative element
         * plus the needed padding which should overflow the parent to the left and right
         */
        width: calc(100% + 60px);
        left: -30px; /* Center the element based on the added width */
        right: 0;
        margin-bottom: 0;
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1), 0 5px 15px 0 rgba(0, 0, 0, 0.1); /* since the defined colors do not offer different degrees of opacity, we need to use special values in this case */
        box-sizing: border-box
}
    }

@media (min-width: 769px) and (min-width: 769px) {

.refinement_container.expanded {
            left: 0
}
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinement_container.expanded ul,
    .refinement_container.expanded .refinement_promotions-container {
        overflow-y: scroll;
        max-height: 100%
    }

@media (min-width: 769px) {

.refinement_container.expanded ul,
    .refinement_container.expanded .refinement_promotions-container {
            max-height: 245px
    }
    }

.refinement_container.expanded .sort_sticky-bar-flyout-container-submenu {
        display: flex;
        justify-content: flex-end;
        z-index: 5;
    }

.refinement_checkbox-wrapper--size-refinement input {
    position: absolute;
    width: 45px;
    height: 45px;
    opacity: 0;
}

.refinements_boolean-refinements--hide-in-widescreen {
    display: block;
    margin: 0 15px;
    border-top: 1px solid rgb(224, 224, 224)
}

@media (min-width: 769px) {

.refinements_boolean-refinements--hide-in-widescreen {
        display: none
}
    }

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper input {
    position: relative;
    top: 0;
}

.refinement:not(.size):not(.refinementColor) .refinement_checkbox-wrapper input,
.refinements_boolean-refinements-container .refinement_checkbox-wrapper input {
    width: 20px;
    height: 20px;
    left: 0;
    z-index: 1;
    margin: 0 10px 0 0;
}

.stylefile-form-checkbox_outline {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid transparent;
    position: absolute;
    top: 0;
    left: 0
}

.stylefile-form-checkbox_outline.stylefile-form-checkbox_outline--selected-color {
        border: 1px solid rgb(255, 135, 114);
    }

@media (min-width: 769px) {

.stylefile-form-checkbox_outline {
        display: none
}
    }

.stylefile-form-checkbox .boolean-refinement_link {
    width: 20px;
    height: 20px;
    position: absolute;
}

.refinements_boolean-refinements-container .refinement_checkbox-wrapper input {
    position: absolute;
}

.refinements_boolean-refinements-container ul .refinement_checkbox-wrapper .stylefile-form-checkbox {
    position: absolute;
}

/* stylelint-disable-next-line no-descending-specificity */

.refinements_boolean-refinements-container ul .refinement_checkbox-wrapper {
    display: flex;
    align-items: center;
    margin-top: 30px
}

@media (min-width: 769px) {

.refinements_boolean-refinements-container ul .refinement_checkbox-wrapper {
        margin-top: 15px
}
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinement.size .refinement_checkbox-wrapper .stylefile-form-checkbox {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(196, 196, 196);

    /* Exact value for border-radius, width and height is specified in the Jira task, see http://jira/browse/SFCC-921 */
    border-radius: 20px;
    min-width: 72px;
    width: -webkit-min-content;
    width: min-content;
    width: min-intrinsic;
    width: -moz-min-content;
    height: 40px;
    }

.refinement.size .refinement_checkbox-wrapper .stylefile-form-checkbox:hover {
            background-color: rgb(196, 196, 196);
        }

@media (min-width: 481px) {

.refinement.size .refinement_checkbox-wrapper .stylefile-form-checkbox {
        /* Exact value for border-radius and height is specified in the Jira task, see http://jira/browse/SFCC-921 */
        border-radius: 22.5px;
        height: 45px;
    }
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinement.refinementColor .refinement_checkbox-wrapper {
    margin-bottom: 14px; /* special margin requested in SFCC-1015 */
    min-height: 20px;
    display: flex;
    align-items: center;
    padding: 3px 0 3px 3px;
}

.refinement.refinementColor .refinement_checkbox-wrapper input {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
}

.refinement.refinementColor .refinement_checkbox-wrapper .stylefile-form-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
}

@media (min-width: 769px) {

.refinement.refinementColor .refinement_checkbox-wrapper.selected .stylefile-form-checkbox {
        border: 1px solid rgb(255, 135, 114)
}
    }

.refinement ul.swatches li.refinement_checkbox-wrapper--size-refinement {
    margin: 0 15px 15px 0
}

@media (min-width: 769px) {

.refinement ul.swatches li.refinement_checkbox-wrapper--size-refinement {
        margin: 10px 10px 10px 0
}
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinements_boolean-refinements-container .refinement_checkbox-wrapper.selected .stylefile-form-checkbox {
    border: 1px solid rgb(255, 135, 114);
    box-sizing: border-box;
}

.refinement:not(.refinementColor) .refinement_checkbox-wrapper.selected .stylefile-form-checkbox {
    border: 1px solid rgb(255, 135, 114);
    box-sizing: border-box;
}

.refinement .refinement_checkbox-wrapper.selected.batched-refinement_checked-unselect .stylefile-form-checkbox,
.refinements_boolean-refinements-container .refinement_checkbox-wrapper.selected.batched-refinement_checked-unselect .stylefile-form-checkbox {
    border: 1px solid rgb(196, 196, 196);
}

.refinement .refinement_checkbox-wrapper.selected.batched-refinement_checked-unselect .refinement_label,
.refinements_boolean-refinements-container .refinement_checkbox-wrapper.selected.batched-refinement_checked-unselect .refinement_label {
    color: rgb(51, 51, 51);
}

.refinement_brand-search,
.refinement_modell-search {
    display: none;
    position: relative;
    color: rgb(224, 224, 224)
}

.refinement_brand-search:hover, .refinement_modell-search:hover {
        color: rgb(255, 135, 114);
    }

.refinement_brand-search.expanded, .refinement_modell-search.expanded {
        display: block;
        margin: 0 0 15px
    }

@media (min-width: 769px) {

.refinement_brand-search.expanded, .refinement_modell-search.expanded {
            margin: 0
    }
    }

.refinement_brand-search .fa-magnifier, .refinement_modell-search .fa-magnifier {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-15px, -50%);
        font-size: 20px; /* special font size requested in SFCC-1015 */
        height: 20px; /* special height requested in SFCC-1015 */
    }

#secondary.refinements,
.refinements-container_category-refinements .refinements_boolean-refinements-container {
    display: none
}

@media (min-width: 769px) {

#secondary.refinements,
.refinements-container_category-refinements .refinements_boolean-refinements-container {
        display: block
}
    }

.refinements-container_search-refinements .refinements_boolean-refinements-container,
.refinements_show-results-flyout,
.refinements_show-results-flyout-submenu {
    display: block
}

@media (min-width: 769px) {

.refinements-container_search-refinements .refinements_boolean-refinements-container,
.refinements_show-results-flyout,
.refinements_show-results-flyout-submenu {
        display: none
}
    }

/* override SG stylings */

input.refinement_brand-search-query,
input.refinement_modell-search-query {
    padding: 19px 30px 19px 15px;
    border-color: rgb(224, 224, 224);
    text-overflow: ellipsis;
    color: rgb(51, 51, 51);
    font-size: 13px /* no typography mixin used because color has to be untouched */
}

@media (min-width: 769px) {

input.refinement_brand-search-query,
input.refinement_modell-search-query {
        font-size: 16px /* no typography mixin used because color has to be untouched */
}
    }

input.refinement_brand-search-query:hover, input.refinement_modell-search-query:hover {
        border-color: rgb(255, 135, 114);
    }

/* stylelint-disable no-descending-specificity */

.refinement.brand .refinement_checkbox-wrapper.show, .refinement.modell .refinement_checkbox-wrapper.show {
        display: flex;
    }

.refinement.brand .refinement_checkbox-wrapper.hide, .refinement.modell .refinement_checkbox-wrapper.hide {
        display: none;
    }

/* stylelint-enable no-descending-specificity */

@media (min-width: 769px) {

.refinement.brand .refinement_container.expanded ul, .refinement.modell .refinement_container.expanded ul {
            max-height: 205px /* special max-height requested in SFCC-1015 */
    }
    }

.refinement_container.refinementColor .stylefile-form-checkbox.beige {
        background-color: #ebe7cb;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.blau {
        background-color: #0a68f5;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.braun {
        background-color: #85603a;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.gelb {
        background-color: #ff0;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.gold {
        background-color: #d0ac1d;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.grau {
        background-color: #ccc;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.gruen {
        background-color: #090;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.kupfer {
        background-color: #7a2e28;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.lila {
        background-color: #8275bd;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.neon {
        background-color: #afff00;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.oliv {
        background-color: #990;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.orange {
        background-color: #f90;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.pink {
        background-color: #f6f;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.rot {
        background-color: #f00;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.schwarz {
        background-color: #000;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.silber {
        background-color: #bcbcbc;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.tuerkis {
        background-color: #6cf9f9;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.weinrot {
        background-color: #900;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.weiss {
        background-color: #fff;

        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.gestreift {
        background-image: url("data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 20 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%23b4b4b4%3Bstroke-miterlimit%3A10%3Bstroke-width%3A3px%3B%7D%3C%2Fstyle%3E%3CclipPath id%3D%22clip-path%22%3E%3Ccircle class%3D%22cls-1%22 cx%3D%2210%22 cy%3D%2210%22 r%3D%2210%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg class%3D%22cls-2%22%3E%3Cline class%3D%22cls-3%22 y1%3D%224%22 x2%3D%2220%22 y2%3D%224%22%2F%3E%3Cline class%3D%22cls-3%22 y1%3D%2210%22 x2%3D%2220%22 y2%3D%2210%22%2F%3E%3Cline class%3D%22cls-3%22 y1%3D%2216%22 x2%3D%2220%22 y2%3D%2216%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.kariert {
        background-image: url("data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 20 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bfill%3A%23b4b4b4%3B%7D%3C%2Fstyle%3E%3CclipPath id%3D%22clip-path%22%3E%3Ccircle class%3D%22cls-1%22 cx%3D%2210%22 cy%3D%2210%22 r%3D%2210%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg class%3D%22cls-2%22%3E%3Crect class%3D%22cls-3%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 x%3D%2210%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 x%3D%225%22 y%3D%225%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 x%3D%2215%22 y%3D%225%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 y%3D%2210%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 x%3D%2210%22 y%3D%2210%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 x%3D%225%22 y%3D%2215%22 width%3D%225%22 height%3D%225%22%2F%3E%3Crect class%3D%22cls-3%22 x%3D%2215%22 y%3D%2215%22 width%3D%225%22 height%3D%225%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.meliert {
        background-image: url(../assets/refinement-color/meliert.svg);
        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.metallic {
        background-image: url("data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 20 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Aurl(%23Unbenannter_Verlauf_19)%3B%7D%3C%2Fstyle%3E%3ClinearGradient id%3D%22Unbenannter_Verlauf_19%22 x1%3D%222.93%22 y1%3D%2217.07%22 x2%3D%2217.07%22 y2%3D%222.93%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop offset%3D%220%22 stop-color%3D%22%23b4b4b4%22%2F%3E%3Cstop offset%3D%220.49%22 stop-color%3D%22%23fff%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%23b4b4b4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle class%3D%22cls-1%22 cx%3D%2210%22 cy%3D%2210%22 r%3D%2210%22%2F%3E%3C%2Fsvg%3E");
        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.multi {
        background-image: url("data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 20 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bfill%3A%23ff8772%3B%7D.cls-4%7Bfill%3A%237d64dc%3B%7D.cls-5%7Bfill%3A%23dcfc8c%3B%7D.cls-6%7Bfill%3A%238ce1c3%3B%7D%3C%2Fstyle%3E%3CclipPath id%3D%22clip-path%22%3E%3Ccircle class%3D%22cls-1%22 cx%3D%2210%22 cy%3D%2210%22 r%3D%2210%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg class%3D%22cls-2%22%3E%3Crect class%3D%22cls-3%22 width%3D%2210%22 height%3D%2210%22%2F%3E%3Crect class%3D%22cls-4%22 x%3D%2210%22 y%3D%2210%22 width%3D%2210%22 height%3D%2210%22%2F%3E%3Crect class%3D%22cls-5%22 x%3D%2210%22 width%3D%2210%22 height%3D%2210%22%2F%3E%3Crect class%3D%22cls-6%22 y%3D%2210%22 width%3D%2210%22 height%3D%2210%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    }

.refinement_container.refinementColor .stylefile-form-checkbox.schwarzweiss {
        background-image: url("data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 20 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D%3C%2Fstyle%3E%3CclipPath id%3D%22clip-path%22%3E%3Ccircle class%3D%22cls-1%22 cx%3D%2210%22 cy%3D%2210%22 r%3D%2210%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg class%3D%22cls-2%22%3E%3Crect width%3D%2210%22 height%3D%2220%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.transparent {
        background-image: url("data:image/svg+xml,%3Csvg id%3D%22Ebene_1%22 data-name%3D%22Ebene 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 20 20%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Aurl(%23Unbenannter_Verlauf_27)%3B%7D%3C%2Fstyle%3E%3ClinearGradient id%3D%22Unbenannter_Verlauf_27%22 x1%3D%222.93%22 y1%3D%2217.07%22 x2%3D%2217.07%22 y2%3D%222.93%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop offset%3D%220.2%22 stop-color%3D%22%23fff%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%23e1e1e1%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle class%3D%22cls-1%22 cx%3D%2210%22 cy%3D%2210%22 r%3D%2210%22%2F%3E%3C%2Fsvg%3E");
        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement_container.refinementColor .stylefile-form-checkbox.sonstige {
        background-color: #fff;

        border: 1px solid rgb(196, 196, 196);
        box-sizing: border-box;
    }

.refinement:not(.modell):not(.brand) .refinement_container.expanded::before, .refinement.modell .refinement_container.expanded ul::before, .refinement.brand .refinement_container.expanded ul::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: rgb(224, 224, 224);
        right: 0
    }

@media (min-width: 769px) {

.refinement:not(.modell):not(.brand) .refinement_container.expanded::before, .refinement.modell .refinement_container.expanded ul::before, .refinement.brand .refinement_container.expanded ul::before {
            display: none
    }
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinement_promotions-container,
.search-result_refinements .refinement .refinement_container {
    display: flex;
    position: fixed;
    right: -100%;
    max-width: 100%;
    z-index: 5;
    top: 75px;
    background: rgb(255, 255, 255);
    width: -moz-available;
    width: -webkit-fill-available;

    /* autoprefixer: ignore next */
    width: fill-available;
    height: calc(var(--vh) - 145px); /* 100vh minus sticky header and footer requested in SFCC-1015 */
    transition: right 300ms ease
}

.refinement_promotions-container.refinementColor.expanded, .search-result_refinements .refinement .refinement_container.refinementColor.expanded {
        padding: 0 15px
    }

@media (min-width: 769px) {

.refinement_promotions-container.refinementColor.expanded, .search-result_refinements .refinement .refinement_container.refinementColor.expanded {
            padding: 30px
    }
    }

.refinement_promotions-container.expanded, .search-result_refinements .refinement .refinement_container.expanded {
        flex-flow: column;
        right: 0;
        padding: 0 15px
    }

@media (min-width: 769px) {

.refinement_promotions-container.expanded, .search-result_refinements .refinement .refinement_container.expanded {
            display: flex;
            flex-flow: column;
            width: calc(100% + 60px);
            overflow: unset;
            left: -30px;
            padding: 29px /* The user not notice this px but let to size refinement has 3 columns unless two in SFCC-2045 */
    }
    }

@media (min-width: 769px) {

.refinement_promotions-container,
.search-result_refinements .refinement .refinement_container {
        display: none;
        flex-flow: column;
        transform: unset;
        top: unset;
        right: unset;
        margin-right: unset;
        height: unset;
        overflow: unset;
        max-width: unset;
        width: unset;
        position: absolute;
        z-index: 3
}
    }

.search-result_refinements .refinement.size .refinement_container {
    flex-flow: row wrap;
    justify-content: center
}

@media (min-width: 769px) {

.search-result_refinements .refinement.size .refinement_container {
        flex-direction: column;
        justify-content: right
}
    }

.search-result_refinements .refinement.size .refinement_container .refinement_checkbox-wrapper .stylefile-form-checkbox,
    .search-result_refinements .refinement.size .refinement_container .refinement_checkbox-wrapper.selected .stylefile-form-checkbox {
        box-sizing: unset;
    }

.search-result_refinements .refinement.price {
    padding: 0;
    margin: 0 15px
}

@media (min-width: 769px) {

.search-result_refinements .refinement.price {
        max-height: 260px; /* 6 attributes are displayed */
        border-bottom: none;
        padding: 0 15px;
        margin: 0
}
    }

.search-result_refinements .refinement.price h3 {
        position: relative;
    }

.search-result_refinements .refinement.price .refinement_headline-wrapper {
        height: auto;
        padding: 15px 0 10px
    }

@media (min-width: 769px) {

.search-result_refinements .refinement.price .refinement_headline-wrapper {
            height: 45px;
            padding: 0
    }
    }

.search-result_refinements .refinement.price .refinement_container {
    right: 0;
    position: relative;
    width: 100%;
    justify-content: center;
    height: unset;
    top: unset;
    z-index: unset
}

@media (min-width: 769px) {

.search-result_refinements .refinement.price .refinement_container {
        right: unset;
        position: unset;
        width: unset;
        justify-content: unset;
        z-index: 3
}
    }

@media (min-width: 769px) {

.search-result_refinements .refinement.price .refinement_container.expanded {
            position: absolute;
            transform: translateX(-50%); /* align center */
            left: 50%; /* align center */
            right: auto;
            min-width: 330px; /* special min-width requested in SFCC-1887 */
            width: calc(100% + 60px)
    }
    }

@media (min-width: 769px) {

.search-result_refinements .refinement.price:nth-of-type(4n) .refinement_container.expanded {
            transform: none;
            left: auto;
            right: 0
    }
    }

@media (min-width: 1350px) {

.search-result_refinements .refinement.price:nth-of-type(4n) .refinement_container.expanded {
            right: -30px
    }
    }

.price-range {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 15px;
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px
}

.price-range .separator {
        padding: 0 10px;
    }

.price-range-slider {
    margin: 10px 12px /* left and right 1/2 of the handles width */
}

.price-range-slider.noUi-horizontal {
        height: 4px /* special height requested in SFCC-1887 */
    }

.price-range-slider.noUi-horizontal .noUi-handle {
            box-sizing: border-box;
            height: 24px; /* special height requested in SFCC-1887 */
            width: 24px; /* special width requested in SFCC-1887 */
            top: -10px;
            right: -12px; /* 1/2 of the width */
            border-radius: 50%;
            box-shadow: none;
            border: 2px solid rgb(119, 119, 119);
            background: rgb(255, 255, 255);
            cursor: pointer
        }

.price-range-slider.noUi-horizontal .noUi-handle::before,
            .price-range-slider.noUi-horizontal .noUi-handle::after {
                display: none;
            }

.price-range-slider.noUi-horizontal .noUi-handle:hover,
            .price-range-slider.noUi-horizontal .noUi-handle.noUi-active {
                border: 2px solid rgb(255, 135, 114);
            }

.price-range-slider.noUi-target {
        border: none;
        background-color: rgb(196, 196, 196);
        border-radius: 2px;
        box-shadow: none;
        cursor: pointer;
    }

.price-range-slider .noUi-connect {
        background-color: rgb(119, 119, 119);
        border-radius: 2px;
    }

.price-range-container {
    width: 100%;
    padding: 0 15px 25px /* special padding requested in SFCC-1887 */
}

@media (min-width: 481px) {

.price-range-container {
        padding: 0 45px 25px /* special padding requested in SFCC-1887 */
}
    }

@media (min-width: 769px) {

.price-range-container {
        padding: 0 0 30px
}
    }

.price-range-container.active-price-selection .price-range-slider.noUi-horizontal .noUi-handle {
            border: 2px solid rgb(255, 135, 114);
        }

.price-range-container.active-price-selection .price-range-slider .noUi-connect {
            background-color: rgb(255, 135, 114);
        }

@media (min-width: 769px) {

.price-range-container .price-range-slider.noUi-horizontal:hover .noUi-handle {
                border: 2px solid rgb(255, 135, 114)
        }
    }

@media (min-width: 769px) {

.price-range-container .price-range-slider:hover .noUi-connect {
                background-color: rgb(255, 135, 114)
        }
    }

.sort-by {
    flex: 1

    /* stylelint-disable no-descending-specificity */
}

.sort-by .batched-refinement_checked ~ .refinement_label,
    .sort-by .selected .refinement_label {
        pointer-events: none;
    }

/* stylelint-enable no-descending-specificity */

.sort-by .batched-refinement_checked:checked, .sort-by .selected .batched-refinement-checkbox:checked {
            pointer-events: none;
        }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container.active-refinements {
        border-bottom: 1px solid rgb(255, 135, 114)
}
    }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container.active-refinements .sort-by,
    .refinements_product-sorting-flyout-container.active-refinements .refinements_clear-results-flyout-close-button {
            color: rgb(255, 135, 114)
    }
    }

@media (min-width: 769px) {

.refinements-wrapper .fa-arrow-light--down {
        transform: rotate(90deg);
        margin-right: 5px
}
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinements_product-sorting-flyout-wrapper {
    height: 45px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center
}

@media (min-width: 769px) {

.refinements_product-sorting-flyout-wrapper {
        position: relative;
        cursor: pointer
}
    }

.refinements_product-sorting-flyout-container {
    display: flex;
    order: -1;
    justify-content: space-between;
    cursor: pointer;
    flex-flow: column
}

.refinements_product-sorting-flyout-container .refinements_product-sorting-flyout--hide-in-widescreen .sort-by {
            padding: 0;
            width: 100%;
        }

.refinements_product-sorting-flyout-container.expanded {
        position: absolute;
        top: -75px;
        width: 100%;
        background: rgb(255, 255, 255);
        border-top: 5px solid rgb(255, 135, 114)
    }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container.expanded {
            position: unset;
            top: unset;
            width: unset;
            border-top: none
    }
    }

.refinements_product-sorting-flyout-container.expanded .refinements_product-sorting-flyout.refinements_product-sorting-flyout--hide-in-widescreen {
            margin-left: 0;
        }

.refinements_product-sorting-flyout-container.expanded .refinements_product-sorting-flyout--hide-in-widescreen .sort-by {
            position: absolute;
            top: 70px; /* special top requested in SFCC-1015 */
            z-index: 5;
            background: rgb(255, 255, 255);
            width: -moz-available;
            width: -webkit-fill-available;

            /* autoprefixer: ignore next */
            width: fill-available;
            padding-right: 30px;
            height: var(--vh);
            overflow: scroll;
        }

.refinements_product-sorting-flyout-container.expanded .fa-arrow-light--down {
            transform: rotate(180deg);
            position: absolute;
            left: 15px
        }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container.expanded .fa-arrow-light--down {
                transform: rotate(90deg); /* set back to ist original value */
                position: unset
        }
    }

.refinements_product-sorting-flyout-container.expanded .refinements_product-sorting-flyout-wrapper {
            height: 65px;
            padding-top: 5px;
        }

.refinements_product-sorting-flyout-container.expanded .sub-refinements-toggle-close-button {
            display: block
        }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container.expanded .sub-refinements-toggle-close-button {
                display: none
        }
    }

/* stylelint-disable-next-line no-descending-specificity */

.refinements_product-sorting-flyout-container.expanded ul {
            max-height: 100%
        }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container.expanded ul {
                max-height: unset
        }
    }

@media (min-width: 769px) {

.refinements_product-sorting-flyout-container {
        order: initial;
        border-bottom: 1px solid rgb(224, 224, 224);
        padding: 0;
        margin: 0 15px 0 15px;
        cursor: unset
}
    }

.refinements_product-sorting-flyout {
    display: flex;
    width: 100%;
    line-height: 1;
    flex-flow: column;
    align-items: flex-start
}

@media (min-width: 769px) {

.refinements_product-sorting-flyout {
        align-items: center
}
    }

.refinements_product-sorting-flyout.refinements_product-sorting-flyout--hide-in-mobile {
    display: none
}

@media (min-width: 769px) {

.refinements_product-sorting-flyout.refinements_product-sorting-flyout--hide-in-mobile {
        display: flex
}
    }

/* change style when parent has no class */

/* stylelint-disable-next-line no-descending-specificity */

.refinements_product-sorting-flyout.refinements_product-sorting-flyout--hide-in-widescreen {
    display: flex;
    margin-left: 15px
}

@media (min-width: 769px) {

.refinements_product-sorting-flyout.refinements_product-sorting-flyout--hide-in-widescreen {
        display: none
}
    }

.refinement_selected-sorting-rule-container--hide-in-widescreen {
    display: flex;
    align-self: baseline;
    width: 90%;
    flex-flow: row wrap;
    margin-top: -10px;
    padding-bottom: 12px
}

@media (min-width: 769px) {

.refinement_selected-sorting-rule-container--hide-in-widescreen {
        display: none
}
    }

.refinements_product-sorting-flyout-container.expanded .refinement_selected-sorting-rule-container--hide-in-widescreen {
    display: none;
}

.refinements-wrapper .fa-arrow-light--up.fa-arrow-light--hide-in-mobile {
    transform: rotate(-90deg);
    display: none
}

@media (min-width: 769px) {

.refinements-wrapper .fa-arrow-light--up.fa-arrow-light--hide-in-mobile {
        display: block;
        right: 0
}
    }

.sort-by_select {
    border: none;
    height: auto;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    line-height: normal;
    line-height: initial
}

@media (min-width: 769px) {

.sort-by_select {
        padding: 12px 35px 12px 0;
        cursor: pointer
}
    }

.sort-by_select:hover {
        color: rgb(255, 135, 114)
    }

@media (min-width: 769px) {

.sort-by_select:hover {
            color: unset
    }
    }

.sort-by_select:focus {
        outline: none;
    }

.refinements_show-results {
    display: none
}

@media (min-width: 769px) {

.refinements_show-results {
        margin-top: 30px;
        border: 1px solid rgb(224, 224, 224);
        height: 45px;
        padding: 0 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        line-height: 1 /* prevent 1) too much space due to mixin line-height and 2) line breaks with too little space */
}

        .refinements_show-results.expanded {
            display: flex;
        }

        .refinements_show-results.active {
            border: 1px solid rgb(255, 135, 114);
            background-color: rgb(255, 135, 114);
            color: rgb(255, 255, 255);
        }
    }

.refinements_show-results,
.refinements_show-results-flyout,
.refinements_show-results-flyout-submenu {
    opacity: 0.5;
    pointer-events: none
}

.refinements_show-results.active, .refinements_show-results-flyout.active, .refinements_show-results-flyout-submenu.active {
        opacity: 1;
        pointer-events: initial;
    }

@media (min-width: 769px) {

.search-result_refinements .refinement.price .refinements_show-results {
        margin-top: 0
}
    }

.refinement.brand .refinement_container .refinements_show-results,
.refinement.modell .refinement_container .refinements_show-results {
    margin-bottom: 0;
}

.refinements_show-results-flyout-container,
.refinements_show-results-flyout-container-submenu {
    text-align: center;
    margin: 0 0 0 15px;
    white-space: nowrap
}

@media (min-width: 769px) {

.refinements_show-results-flyout-container,
.refinements_show-results-flyout-container-submenu {
        display: none
}
    }

.refinements_clear-results-flyout-container,
.refinements_clear-results-flyout-container-submenu {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;

    display: block;
    visibility: visible;
    margin: 0;
    text-decoration: underline
}

.refinements_clear-results-flyout-container.hide, .refinements_clear-results-flyout-container-submenu.hide {
        visibility: hidden;
    }

@media (min-width: 769px) {

.refinements_clear-results-flyout-container,
.refinements_clear-results-flyout-container-submenu {
        display: none
}
    }

.refinements_clear-results-flyout,
.refinements_clear-results-flyout-submenu {
    margin-right: 15px;
    line-height: 1; /* set line-height so that the button is alligned with the icon next to it */
}

.refinements_show-results-flyout,
.refinements_show-results-flyout-submenu {
    display: inline-flex;
    align-items: center;
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: transparent;
    border-radius: 2px;
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid;
}

.refinements_show-results-flyout.active {
    border: 1px solid rgb(255, 135, 114);
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
}

.refinements_show-results-flyout-submenu.active {
    border: 1px solid rgb(255, 135, 114);
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
}

.refinement-link_wrapper {
    margin-right: 15px;
}

/* category refinements are displayed in one line, so every element inside the wrapper should receive the stylings below
see also stylings for #category-level-1 li and #category-level-2
*/

.search-result_category-refinements [id^='category-level-'] li {
    display: flex;
    flex-flow: row nowrap;
    flex: none;
    align-items: center;
    padding: 0
}

.search-result_category-refinements [id^='category-level-'] li .refinement-link_wrapper {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
    background-color: rgb(224, 224, 224);
    border-radius: 20px;
    height: 40px;
    padding: 0 30px;
    text-align: center;
    cursor: pointer;
    border: none;
    }

.search-result_category-refinements [id^='category-level-'] li .refinement-link_wrapper:hover {
        background-color: rgb(196, 196, 196);
    }

.search-result_category-refinements [id^='category-level-'] li .refinement-link {
        padding: 0
    }

@media (min-width: 769px) {
            .search-result_category-refinements [id^='category-level-'] li .refinement-link:hover {
                background-color: transparent;
                background-color: initial;
            }
    }

@media (min-width: 769px) {

.search-result_category-refinements [id^='category-level-'] li {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

        display: block;
        background-color: transparent;
        background-color: initial;
        overflow: visible;
        overflow: initial;
        height: auto
}

        .search-result_category-refinements [id^='category-level-'] li:hover {
            background-color: transparent;
            background-color: initial;
        }
    }

.refinement ul.swatches li {
    /* override SG stylings */
    padding: 0;
    margin: 0;
}

/* override SG stylings */

.refinement.category-refinement *,
#category-level-1 li,
#category-level-2 {
    display: flex;
    flex-flow: row nowrap;
    flex: none;
    align-items: center;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none
}

@media (min-width: 769px) {

.refinement.category-refinement *,
#category-level-1 li,
#category-level-2 {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

        display: block;
        overflow: visible;
        overflow: initial;
        height: auto;
        padding: 0;
        margin: 0 0 15px 0;
        text-align: left;
        text-align: initial;
        align-items: initial
}
    }

.refinement.category-refinement *::-webkit-scrollbar, #category-level-1 li::-webkit-scrollbar, #category-level-2::-webkit-scrollbar {
        display: none;
    }

/* override SG stylings */

#category-level-1 li .refinement-link {
    margin: 0;
    padding: 0;
}

#category-level-2 li .refinement-link {
    margin: 0 0 0 15px;
}

#category-level-3 {
    padding: 0;
}

#category-level-3 li .refinement-link {
    margin: 0 0 0 30px;
}

#category-level-4 li .refinement-link {
    margin: 0 0 0 45px;
}

@media (min-width: 769px) {

#category-level-1 .refinement-link:hover,
#category-level-2 .refinement-link:hover {
        color: rgb(255, 135, 114)
}
    }

#category-level-1 .refinement-link_wrapper,
#category-level-2 .refinement-link_wrapper {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
    background-color: rgb(224, 224, 224);
    border-radius: 20px;
    height: 40px;
    padding: 0 30px;
    text-align: center;
    cursor: pointer;
    border: none
}

#category-level-1 .refinement-link_wrapper:hover, #category-level-2 .refinement-link_wrapper:hover {
        background-color: rgb(196, 196, 196);
    }

#category-level-1 .refinement-link_wrapper .refinement-link, #category-level-2 .refinement-link_wrapper .refinement-link {
        padding: 0;
    }

@media (min-width: 769px) {

#category-level-1 .refinement-link_wrapper,
#category-level-2 .refinement-link_wrapper {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

        background-color: transparent;

        background-color: initial;
        height: auto;
        padding: 0;
        margin: 0 0 15px 0
}

        #category-level-1 .refinement-link_wrapper:hover, #category-level-2 .refinement-link_wrapper:hover {
            background-color: transparent;
            background-color: initial;
        }
    }

#category-level-1 .active-pill {
    background-color: rgb(196, 196, 196);
    pointer-events: none;
}

#category-level-1 li.expandable:first-of-type {
    margin-left: 15px
}

@media (min-width: 769px) {

#category-level-1 li.expandable:first-of-type {
        margin-left: 0
}
    }

#category-level-1 li.expandable:last-of-type {
    margin-right: 15px
}

@media (min-width: 769px) {

#category-level-1 li.expandable:last-of-type {
        margin-right: 0
}
    }

#category-level-1 li.expandable .refinement-link {
    padding: 0;
    font-weight: normal;
}

@media (min-width: 769px) {

#category-level-1 .refinement-link.selected-active,
#category-level-2 .refinement-link.selected-active {
        font-family: 'Montserrat Medium', sans-serif;
        color: rgb(255, 135, 114)
}
    }

#category-level-1 li .active,
#category-level-1 li.expandable .active {
    padding: 0;
    font-weight: normal;
}

body.expanded-search-refinements {
    overflow: hidden
}

@media (min-width: 769px) {

body.expanded-search-refinements {
        overflow: unset
}
    }

.pt_product-search-noresult {
    padding-bottom: 60px;
}

.pt_product-search-result .refinement h3,
.pt_product-search-result .refinement_label {
    font-weight: normal;
}

.pt_product-search-result .refinement-category_title {
    display: none
}

@media (min-width: 769px) {

.pt_product-search-result .refinement-category_title {
        display: block
}
    }

.pt_product-search-noresult .primary-content {
    width: 100%;
    float: none;
    padding: 0;
    border: none;
}

.no-hits_container {
    margin: 45px 15px;
    text-align: center;
    border-bottom: 1px solid rgb(196, 196, 196)
}

@media (min-width: 481px) {

.no-hits_container {
        margin: 30px 30px 45px
}
    }

@media (min-width: 769px) {

.no-hits_container {
        margin: 45px 30px 60px
}
    }

.no-hits_headline {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

    margin-bottom: 30px
}

@media (min-width: 769px) {

.no-hits_headline {
    font-family: 'Montserrat Medium', sans-serif;
    color: rgb(51, 51, 51);
    font-size: 18px;
        line-height: 27px
}
    }

@media (min-width: 769px) and (min-width: 481px) {

.no-hits_headline {
        font-size: 22px;
            line-height: 33px
}
    }

@media (min-width: 769px) and (min-width: 769px) {

.no-hits_headline {
        font-size: 24px;
            line-height: 36px
}
    }

@media (min-width: 769px) {

.no-hits_headline {

        margin-bottom: 45px;
        margin-top: 90px
}
    }

.pt_product-search-noresult .no-hits-search {
    position: relative;
    margin-bottom: 30px
}

@media (min-width: 769px) {

.pt_product-search-noresult .no-hits-search {
        display: none
}
    }

.pt_product-search-noresult .no-hits-search input {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;
    height: 45px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(196, 196, 196);
    border-radius: 2px;
    box-sizing: border-box;
    padding: 0 15px;
    }

.pt_product-search-noresult .no-hits-search input:hover {
        border-color: rgb(119, 119, 119);
    }

.pt_product-search-noresult .no-hits-search button {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: transparent;
    border-radius: 2px;
    height: 40px;
    padding: 0 45px;
    text-align: center;
    border: 1px solid;
        color: rgb(51, 51, 51);
        border-color: rgb(119, 119, 119);
    }

.pt_product-search-noresult .no-hits-search button:hover {
            background-color: rgb(196, 196, 196);
            border-color: rgb(196, 196, 196);
            color: rgb(51, 51, 51);
        }

@media (min-width: 481px) {

.pt_product-search-noresult .no-hits-search button {
        height: 45px;
    }
    }

/* iOS is touch device and has false value for fine pointer, it doesn't define a value for -moz-touch-enabled so it doesn't render the content
       Mozilla doesn't have a value of fine pointer but has a 0 value of -moz-touch-enabled for non touch devices so it renders the content
       Other non touch devices understand fine pointer and render the content */

@media (pointer: fine), (-moz-touch-enabled: 0) {
            .pt_product-search-noresult .no-hits-search button:hover {
                background-color: unset
            }

                .pt_product-search-noresult .no-hits-search button:hover .fa {
                    color: rgb(255, 135, 114);
                }
    }

.pt_product-search-noresult .no-hits-search button {

        position: absolute;
        top: 0;
        right: 0;
        height: 45px;
        padding: 0 15px;
        box-sizing: border-box;
        border: none;
    }

.pt_product-search-noresult .no-hits-search .fa {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);

        margin-top: 5px;
        font-size: 24px; /* have to overwrite 16px value from form mixin since in design it's larger */
        color: rgb(196, 196, 196);
    }

@media (min-width: 769px) {

.pt_product-search-noresult .header-search--widescreen {
        display: block;
        margin-bottom: 30px
}
    }

.pt_product-search-noresult .content-carousel_container {
    padding-top: 0;
}

.pt_product-search-noresult .content-carousel_headline {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}

@media (min-width: 481px) {

.pt_product-search-noresult .content-carousel_headline {
        font-size: 18px;
            line-height: 27px
}
    }

.pt_product-search-noresult .content-carousel_headline {

    margin-bottom: 15px;
    text-align: center;
    font-weight: normal;
    line-height: 1
}

@media (min-width: 769px) {

.pt_product-search-noresult .content-carousel_headline {
        margin-bottom: 45px
}
    }

.pt_product-search-noresult .content-carousel_btn {
    display: none;
}

.pt_product-search-noresult .last-seen h3 {
    margin-top: 0;
}

.pt_product-search-noresult .last-seen_products {
    width: 100%;
}

.pt_product-search-noresult .last-seen_list {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.pt_product-search-noresult .last-seen_item:last-child {
        margin-right: 0;
    }

.noresults-help_tips-title {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}

@media (min-width: 481px) {

.noresults-help_tips-title {
        font-size: 16px;
            line-height: 24px
}
    }

.noresults-help_tips-title {

    margin: 0;
    font-weight: normal
}

@media (min-width: 769px) {

.noresults-help_tips-title {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px
}
    }

.content-asset ul li.noresults-help_tip {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}

@media (min-width: 769px) {

.content-asset ul li.noresults-help_tip {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px
}
    }

.content-asset ul.noresults-help_tips,
.content-asset ul li.noresults-help_tip {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-asset ul.noresults-help_tips {
    margin-bottom: 45px
}

@media (min-width: 769px) {

.content-asset ul.noresults-help_tips {
        margin-bottom: 60px
}
    }

/* special padding-top requested in SFCC-1873 */

/* special margin-top requested in SFCC-1873 */

#wrapper.pt_product-search-result {
    width: 100%;
    max-width: 1350px;
}

.category-content-heading {
    font-family: 'Montserrat Medium', sans-serif;
    color: rgb(51, 51, 51);
    font-size: 18px;
        line-height: 27px
}

@media (min-width: 481px) {

.category-content-heading {
        font-size: 22px;
            line-height: 33px
}
    }

@media (min-width: 769px) {

.category-content-heading {
        font-size: 24px;
            line-height: 36px
}
    }

.category-content-heading {

    text-align: center;
    margin: 30px 0;
    text-transform: capitalize
}

@media (min-width: 769px) {

.category-content-heading {
        text-align: left;
        margin-top: 25px;
        margin-left: 30px
}
    }

.pt_product-search-result .breadcrumbs {
        padding: 20px 15px 0
    }

@media (min-width: 481px) {

.pt_product-search-result .breadcrumbs {
            padding: 20px 30px 0
    }
    }

@media (min-width: 769px) {

.pt_product-search-result .breadcrumbs {
            padding-top: 0
    }
    }

.pt_product-search-result .brandshop-slots-container .breadcrumbs {
        margin-bottom: 30px
    }

@media (min-width: 769px) {

.pt_product-search-result .brandshop-slots-container .breadcrumbs {
            display: none
    }
    }

.pt_product-search-result .brandshop-primary-content {
        margin-top: 0
    }

@media (min-width: 769px) {

.pt_product-search-result .brandshop-primary-content {
            margin-top: 30px
    }
    }

.pt_product-search-result .brandshop-primary-content .category-content-heading {
            margin-top: 0
        }

@media (min-width: 769px) {

.pt_product-search-result .brandshop-primary-content .category-content-heading {
                margin-top: 25px
        }
    }

.pt_product-search-result .brandshop-primary-content .breadcrumbs {
            display: none
        }

@media (min-width: 769px) {

.pt_product-search-result .brandshop-primary-content .breadcrumbs {
                display: flex
        }
    }

.pt_product-search-result #main {
    display: flex;
    flex-flow: column-reverse
}

@media (min-width: 481px) {

.pt_product-search-result #main {
        flex-flow: row-reverse
}
    }

@media (min-width: 481px) {

.pt_product-search-result #primary {
        width: 100%;
        margin-bottom: 60px;
        padding-bottom: 0
}
    }

@media (min-width: 481px) {

.pt_product-search-result #secondary {
        margin-bottom: 60px
}
    }

/* override SG stylings - this affects the position of the filters flyout when it is open */

@media (min-width: 481px) {

.pt_product-search-result .primary-content {
        position: static;
        position: initial
}
    }

.search-result-items {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    margin: 30px 15px 0 15px
}

@media (min-width: 481px) {

.search-result-items {
        margin: 45px 30px 0 30px
}
    }

@media (min-width: 769px) {

.pt_product-search-result #primary.primary-page-designer {
        border: none
}
    }

.pt_product-search-result #primary.primary-page-designer .category-refinement h3.toggle {
        display: none;
    }

.pt_product-search-result #primary.primary-page-designer .plp-content {
        width: 100%;
    }

@media (min-width: 769px) {

.pt_product-search-result #primary.primary-page-designer .visible-refinements {
            width: calc(100% - 240px)
    }
    }

.pt_product-search-result #primary.primary-page-designer .hidden-refinements .search-result-items {
        margin-top: 0;
    }

.plp-wrapper {
    display: flex;
    flex-flow: row-reverse;
}

.search-result_refinements-container {
    display: flex;
    flex-flow: column
}

@media (min-width: 769px) {

.search-result_refinements-container {
        flex-flow: row
}
    }

.search-result_attribute-refinements {
    width: 100%;
}

.search-result_category-refinements {
    margin-bottom: 30px
}

@media (min-width: 769px) {

.search-result_category-refinements {
        display: none
}
    }

.category-landing_search-result-banner-container {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73
}

@media (min-width: 481px) {

.category-landing_search-result-banner-container {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73
}
    }

.category-landing_search-result-banner-container {

    color: rgb(255, 255, 255)
}

@media (min-width: 769px) {

.category-landing_search-result-banner-container {
        margin-bottom: 30px
}
    }

.category-landing_search-result-banner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    padding: 0 15px;
    background-color: rgb(255, 135, 114);
}

.category-landing_banner--wrapper {
    margin: 15px 15px 30px 15px
}

@media (min-width: 481px) {

.category-landing_banner--wrapper {
        margin: 15px 30px 30px 30px
}
    }

.category-landing_banner--text {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

    display: none;
    margin: 30px 0 45px
}

@media (min-width: 481px) {

.category-landing_banner--text {
        display: block
}
    }

.search-result-items .grid-tile {
    box-shadow: none;
    margin: 0;
    padding: 0;
}

ul.search-result-items .grid-tile {
    margin: 0 15px 30px 0;

    /*
        2-column layout
        50% of the container minus the padding proportioned for each tile
    */
    width: calc(50% - 7.5px)
}

@media (min-width: 481px) {

ul.search-result-items .grid-tile {
        margin: 0 30px 45px 0;
        width: calc(50% - 15px) /* 2-column layout */
}
    }

@media (min-width: 961px) {

ul.search-result-items .grid-tile {
        /*
            3-column layout
            ~33% of the container minus the padding proportioned for each tile
        */
        width: calc(33.33333% - 20px)
}
    }

ul.search-result-items .grid-tile:nth-child(even) {
    margin: 0 0 30px 0
}

@media (min-width: 481px) {

ul.search-result-items .grid-tile:nth-child(even) {
        margin: 0 0 45px 0
}
    }

@media (min-width: 961px) {

ul.search-result-items .grid-tile:nth-child(even) {
        margin: 0 30px 45px 0
}
    }

@media (min-width: 961px) {

ul.search-result-items .grid-tile:nth-child(3n) {
        margin: 0 0 45px 0
}
    }

.search-result-options {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.search-result-options--top {
    padding-bottom: 45px;
}

.pagination-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-list_page {
    padding-right: 20px
}

.pagination-list_page.not(.pagination-list_page--placeholder):hover {
        color: rgb(255, 135, 114);
    }

.pagination-list_page--last {
    padding-right: 0;
}

.pagination-list_page--current {
    color: rgb(255, 135, 114);
}

.pagination-list_anchor {
    color: rgb(119, 119, 119);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(119, 119, 119);
    border-radius: 50%
}

.pagination-list_anchor:hover {
        background-color: rgb(196, 196, 196);
        border-color: rgb(196, 196, 196);
    }

.pagination-list_icon {
    display: flex;
}

.pagination-list_navigation--previous {
    padding-right: 30px
}

.pagination-list_navigation--previous .fa-arrow-light {
        transform: rotate(180deg);
    }

.pagination-list_navigation--next {
    padding-left: 30px;
}

.product-tile .product-promo {
    height: unset;
    min-height: 22px
}

@media (min-width: 481px) {

.product-tile .product-promo {
        min-height: 30px
}
    }