/* Montserrat Regular */

@font-face {
    font-family: 'Montserrat Regular';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2'), url('assets/fonts/Montserrat-Regular.woff') format('woff');
}

/* Montserrat Medium */

@font-face {
    font-family: 'Montserrat Medium';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/Montserrat-Medium.woff2') format('woff2'), url('assets/fonts/Montserrat-Medium.woff') format('woff');
}

/* Montserrat SemiBold */

@font-face {
    font-family: 'Montserrat SemiBold';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'), url('assets/fonts/Montserrat-SemiBold.woff') format('woff');
}

/*
 * 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?9078f8f7eb015880e81a7067cd4ad59c") format("woff2"),
url("assets/fonts/iconFont.woff?9078f8f7eb015880e81a7067cd4ad59c") format("woff");
}

i[class^="fa-"]:before, i[class*=" fa-"]:before {
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            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-left:before {
        content: "\f106";
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* #c4c4c4 */

/* Photoswipe colors */

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

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

/* This file should contain general resets of the SG2 design */

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

    background: unset;
    color: unset;
}

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

@media (min-width:481px) {

h1 {
        font-size: 22px;
            line-height: 33px
}
    }

@media (min-width:769px) {

h1 {
        font-size: 24px;
            line-height: 36px
}
    }

h1 {

    font-weight: unset;
    margin: unset
}

@media screen and (min-width: 768px) {

h1 {
        margin: unset
}
    }

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

@media (min-width:481px) {

h2 {
        font-size: 18px;
            line-height: 27px;
}
    }

h2 {

    font-weight: normal;
    text-transform: unset;
}

a {
    color: unset;
    overflow: unset;
}

.primary-content {
    padding-bottom: 60px;
}

#secondary {
    background: none;
    width: auto;
}

#wrapper {
    max-width: 1350px;
    width: 100%;
}

:root {
    --vw: 100vw;
    --vh: 100vh;
}

/* Mozilla fix for autofill background color on forms */

input {
    -webkit-filter: none;
            filter: none;
}

/* Chrome fix for autofill background color on forms */

@-webkit-keyframes autofill {
    to {
        background: rgb(255, 255, 255);
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

/* reset the stylings of the cookie consent tool OneTrust */

#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
    color: inherit;
    border: inherit;
    white-space: inherit;
    word-wrap: inherit;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

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

    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    text-align: left;
    color: rgb(213, 0, 0);
}

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

.dialog--standard .ui-dialog-titlebar {
        width: 18px;
        position: absolute;
        right: 15px;

        /* needs to be on top of the dialog in order to be clickable */
        z-index: 1;
    }

.dialog--standard.ui-dialog {
        padding: 15px 15px 30px 15px;
        box-sizing: border-box;
        max-width: 95%;

        /* Overwrite jQuery UI JS styles */
        top: 50% !important;
        left: 50% !important;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%)
    }

@media (min-width:481px) {

.dialog--standard.ui-dialog {
            padding: 30px 30px 45px 30px
    }
    }

.dialog--standard .ui-dialog-content {
        padding: 0;
    }

.dialog--fixed {
    position: fixed;
    bottom: 0;
    top: auto !important;
    top: initial !important;
}

.dialog--standard .ui-dialog-titlebar, .dialog--caption .ui-dialog-titlebar {
        background-color: inherit;
        padding: 0;
    }

.dialog--standard .ui-dialog-titlebar-close, .dialog--caption .ui-dialog-titlebar-close {
        text-indent: unset;
        font-size: 0;
        width: 18px
    }

.dialog--standard .ui-dialog-titlebar-close .ui-icon-closethick, .dialog--caption .ui-dialog-titlebar-close .ui-icon-closethick {
            width: 18px;
            background-image: none;
            text-indent: unset
        }

.dialog--standard .ui-dialog-titlebar-close .ui-icon-closethick::before, .dialog--caption .ui-dialog-titlebar-close .ui-icon-closethick::before {
        content: "\f110";
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

                font-size: 18px;
            }

.dialog--caption.ui-dialog {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        padding: 15px 15px 30px 15px;
        box-sizing: border-box
    }

@media (min-width:481px) {

.dialog--caption.ui-dialog {
            padding: 15px 30px 30px 30px
    }
    }

.dialog--caption.ui-widget.ui-widget-content {
        border: none;
        border-top: 1px solid rgb(196, 196, 196);
        background-color: rgba(255, 255, 255, 0.9);
    }

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

        padding: 0;
        flex-basis: calc(100% - 33px);
        order: -1
    }

@media (min-width:481px) {

.dialog--caption .ui-dialog-content {
            flex-basis: calc(100% - 48px)
    }
    }

.dialog--caption .ui-dialog-buttonpane {
        border: none;
        padding: 0;
        margin: 15px 0 0 0;
        background-color: transparent;
        width: 100%;
        display: flex;
        justify-content: center
    }

@media (min-width:481px) {

.dialog--caption .ui-dialog-buttonpane {
            margin-top: 30px
    }
    }

.dialog--caption .ui-dialog-buttonpane .ui-button--accept {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent;
    }

.dialog--caption .ui-dialog-buttonpane .ui-button--accept:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

@media (min-width:481px) {

.dialog--caption .ui-dialog-buttonpane .ui-button--accept {
        height: 45px;
        padding: 0 45px;
    }
    }

.dialog--caption .ui-dialog-buttonpane .ui-button--accept {

        margin: 0 0 0 30px;
    }

.dialog--caption .ui-dialog-buttonpane .ui-button--decline {
    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);
    }

.dialog--caption .ui-dialog-buttonpane .ui-button--decline:hover {
            background-color: rgb(196, 196, 196);
            border-color: rgb(196, 196, 196);
            color: rgb(51, 51, 51);
        }

@media (min-width:481px) {

.dialog--caption .ui-dialog-buttonpane .ui-button--decline {
        height: 45px;
    }
    }

.dialog--caption .ui-dialog-buttonpane .ui-button--decline {

        border-color: rgb(196, 196, 196);
        color: rgb(196, 196, 196);
        margin: 0;
    }

.ui-dialog-link {
    text-decoration: underline;
}

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

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

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

/* 67px header height plus bottom spacing */

.mini-cart-link {
    cursor: pointer;
}

.mini-cart-total .mini-cart-link .minicart-quantity {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 135, 114);
    width: 20px;
    height: 20px;
    left: -4px;
    top: -7px;
}

.mini-cart-total .mini-cart-empty .minicart-quantity {
    display: none;
}

.mini-cart-content {
    width: calc(100vw - 30px);
    width: calc(var(--vw) - 30px);
    max-width: unset;
    border-color: rgb(196, 196, 196);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    top: 41px; /* height and padding of .primary-logo  */
    z-index: 6
}

.mini-cart-content::before {
        content: "\f108";
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

        position: absolute;
        font-size: 11px;
        top: -11px;
        right: 9px;
        color: rgb(196, 196, 196);
    }

@media (min-width:481px) {

.mini-cart-content {
        width: 421px;
        top: 60px /* height and padding of #mini-cart  */
}
    }

#mini-cart:hover .mini-cart-content {
    display: none;
}

.mini-cart-content-wrapper {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 187px); /* viewport height minus the height of the header and  spacing - see variable definition above */
    min-height: 470px; /* The height should allow at least one product to show in the minicart */
    padding: 30px 15px 15px 15px
}

@media (min-width:481px) {

.mini-cart-content-wrapper {
        max-height: calc(100vh - 130px);
        min-height: 500px; /* The height should allow at least one product to show in the minicart */
        padding: 30px
}
    }

.mini-cart-header {
    font-weight: unset;
    text-transform: unset;
    display: flex;
    align-items: center;
    padding: 0 0 30px 0

    /* Add a pseudo element to be able to push the close icon to the right via flexbox  */
}

.mini-cart-header::before {
        content: '';
        flex: 1;
    }

.mini-cart-header--checkout-summary {
    margin: 0
}

.mini-cart-header--checkout-summary::before {
        content: unset;
        flex: unset;
    }

.mini-cart-header_heading {
    font-family: 'Montserrat Medium', sans-serif;
    color: rgb(51, 51, 51);
    font-size: 18px;
        line-height: 0.73;
}

@media (min-width:481px) {

.mini-cart-header_heading {
        font-size: 22px;
}
    }

@media (min-width:769px) {

.mini-cart-header_heading {
        font-size: 24px;
}
    }

.mini-cart-header_heading {

    font-size: 22px;
    flex: 2;
    text-align: center;
}

.mini-cart-header_close {
    flex: 1;
    text-align: right;
}

.mini-cart-header_close-icon {
    margin-right: 15px
}

@media (min-width:481px) {

.mini-cart-header_close-icon {
        margin-right: 0
}
    }

.mini-cart-products {
    max-height: unset;
    padding: unset;
}

.mini-cart-product {
    padding: 0 0 30px 0;
    margin-bottom: 30px;
    border-bottom-color: rgb(224, 224, 224);
    display: flex;
    flex-wrap: wrap;
}

.mini-cart-product:last-of-type {
    margin-bottom: 30px;
    padding: 0;
}

.mini-cart-image {
    border: 1px solid rgb(224, 224, 224);
    float: unset;
    padding: 6.75px; /* 9% of the width of the element */
    width: 75px;
    height: 103px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mini-cart-image--unavailable {
    border-color: rgb(213, 0, 0);
}

.mini-cart-image img {
    max-width: 100%;
    max-height: 100%;
}

.mini-cart-product_name {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    line-height: 1;
    margin-bottom: 15px;
}

.mini-cart-product_information {
    flex: 1;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.mini-cart-product_attributes, .mini-cart-product_quantity {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;
}

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

    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    white-space: nowrap;
}

.mini-cart-product_standard-price {
    position: relative;
}

.mini-cart-product_standard-price::before {
        position: absolute;
        content: '';
        border-bottom: 1px solid rgb(213, 0, 0);
        box-sizing: border-box;
        width: 100%;
        top: calc(50% - 1px);
    }

.mini-cart-product_promotional-price {
    color: rgb(213, 0, 0);
}

.mini-cart-product_availability-information {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}

@media (min-width:481px) {

.mini-cart-product_availability-information {
        font-size: 16px;
            line-height: 24px
}
    }

.mini-cart-product_availability-information {

    margin-top: 30px;
    color: rgb(213, 0, 0);
    font-size: 13px /* The design requires to always use 13px. */
}

.mini-cart-product_availability-information .not-available {
        color: rgb(213, 0, 0);
        white-space: normal;
        white-space: initial;
    }

.mini-cart-totals {
    padding-top: 30px;
    border-top: 1px solid rgb(119, 119, 119);
}

.mini-cart-totals_price {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.mini-cart-totals_price-label {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
}

.mini-cart-totals_price-value {
    font-family: 'Montserrat Medium', sans-serif;
    color: rgb(51, 51, 51);
    font-size: 18px;
        line-height: 0.73;
}

@media (min-width:481px) {

.mini-cart-totals_price-value {
        font-size: 22px;
}
    }

@media (min-width:769px) {

.mini-cart-totals_price-value {
        font-size: 24px;
}
    }

.mini-cart-totals_price-value {

    font-size: 22px;
}

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

    color: rgb(196, 196, 196);
    margin-top: 15px;
    text-align: right;
}

.mini-cart-totals_free-shipping-information {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    margin-top: 15px;
    text-align: right;
    color: rgb(76, 190, 114);
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.mini-cart-totals_free-shipping-information::before {
        content: "\f10f";
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

        font-size: 10px;
        margin-right: 5px;
    }

.mini-cart-totals--checkout-summary .order-totals-table {
        margin: 0;
    }

button.mini-cart-link-checkout {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent;
}

button.mini-cart-link-checkout:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

@media (min-width:481px) {

button.mini-cart-link-checkout {
        height: 45px;
        padding: 0 45px;
}
    }

button.mini-cart-link-checkout {

    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
    white-space: nowrap;
    width: 100%;
}

.mini-cart-link-cart {
    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);
}

.mini-cart-link-cart:hover {
            background-color: rgb(196, 196, 196);
            border-color: rgb(196, 196, 196);
            color: rgb(51, 51, 51);
        }

@media (min-width:481px) {

.mini-cart-link-cart {
        height: 45px;
}
    }

.mini-cart-link-cart {

    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.mini-cart-product_color-representation {
    width: 22px;
    height: 22px;
    border: 1px solid rgb(196, 196, 196);
    box-sizing: border-box;
    position: absolute;

    /*
     * Fontsize of the product name plus the margin of it to the bottom
     * so that the color representation is aligned to the text represantation on the left
     */
    top: 31px;
}

/*
 * This file defines the stylings for the site footer.
 */

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

    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: rgb(237, 237, 237);
    letter-spacing: 0;
}

.footer-container {
    max-width: 1350px;
    padding: 0 15px
}

@media (min-width:769px) {

.footer-container {
        padding: 0 30px
}
    }

@media (min-width:961px) {

.footer-container {
        width: 100%;
        box-sizing: border-box
}
    }

.footer-container .footer-item__link, .footer-container #ot-sdk-btn.ot-sdk-show-settings {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

    border: 0;
}

.footer-item {
    text-align: center;
}

.footer-container .footer-item {
    display: flex;
    padding: 30px 0;
    flex-flow: row;
    justify-content: center
}

@media (min-width:481px) {

.footer-container .footer-item {
        width: 100%;
        padding: 45px 0
}
    }

.footer-item:not(:last-child), .footer-item__container--service-info, .footer-item__container--support {
    border-bottom: 1px solid rgb(196, 196, 196);
}

.footer-item:nth-child(3) {
    padding: 0
}

@media (min-width:769px) {

.footer-item:nth-child(3) {
        border-bottom: 0
}
    }

.footer-item__container--service-info {
    position: relative
}

@media (min-width:481px) {

.footer-item__container--service-info {
        border-bottom: 0;
        padding: 0 30px 0 0
}
    }

@media (min-width:769px) {

.footer-item__container--service-info {
        padding: 0 30px
}
    }

.footer-item .content-asset {
    /* Overwrite default styling */
    width: 100%;
}

.footer-item .content-asset p {
    /* Overwrite default styling */
    margin: 0;
}

.footer-item--row {
    width: 100%;
    grid-template-columns: 1fr;
    display: grid
}

@media (min-width:481px) {

.footer-item--row {
        grid-template-columns: 1fr 1fr
}
    }

@media (min-width:769px) {

.footer-item--row {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 1050px
}
    }

.footer-item__container {
    display: flex;
    flex-flow: column;
}

.footer-payment-methods__row-spacer {
    width: 100%;
    margin-bottom: 30px
}

@media (min-width:769px) {

.footer-payment-methods__row-spacer {
        display: none
}
    }

.footer-item:nth-child(4) {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;

    padding: 45px 0
}

@media (min-width:481px) {

.footer-item:nth-child(4) {
        padding: 60px 0
}
    }

.footer-item__container--support {
    padding: 0 0 30px 0
}

@media (min-width:481px) {

.footer-item__container--support {
        padding: 0 0 45px 0
}
    }

@media (min-width:769px) {

.footer-item__container--support {
        padding: 0 30px 0 0;
        border-bottom: 0
}
    }

.footer-item__container--top-section, .footer-item__container--payment-methods {
    flex-flow: row;
    flex-wrap: wrap;
}

.footer-item__container--payment-methods {
    justify-content: space-between;
    align-items: center;
}

.footer-item__social-media {
    display: flex;
    flex-flow: row;
    justify-content: center
}

@media (min-width:481px) {

.footer-item__social-media {
        flex-flow: column
}
    }

.footer-item__social-media-icons {
    margin-left: 15px;
    display: flex;
    justify-content: center;
}

@media (min-width:481px) {

.footer-item__social-media .footer-item__social-media-label {
        margin-bottom: 30px
}
    }

.footer-item__social-media .footer-item__social-media-label, .footer-item .footer-item__social-media .footer-item__social-media-icons {
    width: auto
}

@media (min-width:481px) {

.footer-item__social-media .footer-item__social-media-label, .footer-item .footer-item__social-media .footer-item__social-media-icons {
        margin-top: 30px
}
    }

.footer-item__social-media-icon--instagram, .footer-item__social-media-icon--facebook {
    margin-left: 15px;
    font-size: 30px;
    color: rgb(119, 119, 119);
}

@media (min-width:481px) {

.footer-item__social-media-icon--instagram {
        margin-left: 0
}
    }

@media (min-width:481px) {

.footer-item__social-media-icon--facebook {
        margin-left: 30px
}
    }

.footer-item__heading {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
}

.footer-top-section__item {
    display: flex;
    flex-flow: column;
    align-items: center;
    flex: 0 0 50%;
    margin-bottom: 30px
}

@media (min-width:481px) {

.footer-top-section__item {
        flex: 0 0 25%;
        margin-bottom: 0
}
    }

.footer-top-section__item:nth-child(3), .footer-top-section__item:nth-child(4) {
    margin-bottom: 0;
}

.footer-top-section__icon {
    margin-bottom: 10px; /* 2/3g */
    font-size: 18px;
    color: rgb(119, 119, 119)
}

@media (min-width:769px) {

.footer-top-section__icon {
        font-size: 23px
}
    }

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

    width: 65%
}

@media (min-width:769px) {

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

.footer-top-section__label.footer-top-section__label--delivery {
    width: 85%;
}

.footer-payment-methods__item {
    width: 85px;
}

.footer-payment-methods__item--vorkasse {
    background: url('assets/icons/vorkasse.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--vorkasse {
        height: 30px;
}
    }

.footer-payment-methods__item--vorkasse {

    height: 30px;
}

.footer-payment-methods__item--nachnahme {
    background: url('assets/icons/nachnahme.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--nachnahme {
        height: 30px;
}
    }

.footer-payment-methods__item--mastercard {
    background: url('assets/icons/mastercard.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--mastercard {
        height: 30px;
}
    }

.footer-payment-methods__item--mastercard {

    background-size: 105px;
    width: 105px;
}

.footer-payment-methods__item--visa {
    background: url('assets/icons/visa.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--visa {
        height: 30px;
}
    }

.footer-payment-methods__item--visa {

    background-size: 60px;
    width: 60px;
}

.footer-payment-methods__item--klarna {
    background: url('assets/icons/klarna-logo.svg')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--klarna {
        height: 30px;
}
    }

.footer-payment-methods__item--klarna {

    background-size: 60px;
    width: 60px;
}

.footer-payment-methods__item--amazonpay {
    background: url('assets/icons/amazonpay.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--amazonpay {
        height: 30px;
}
    }

.footer-payment-methods__item--applepay {
    background: url('assets/icons/applepay.svg')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px
}

@media (min-width:481px) {

.footer-payment-methods__item--applepay {
        height: 30px
}
    }

.footer-payment-methods__item--applepay {

    background-size: 36px;
    width: 36px
}

@media (min-width:481px) {

.footer-payment-methods__item--applepay {
        background-size: 48px;
        width: 48px
}
    }

.footer-payment-methods__item--paypal {
    background: url('assets/icons/paypal.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--paypal {
        height: 30px;
}
    }

.footer-payment-methods__item--cartebleue {
    background: url('assets/icons/cartebleue-logo.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--cartebleue {
        height: 30px;
}
    }

.footer-payment-methods__item--cartebleue {

    background-size: 60px;
    width: 60px;
    height: 30px;
}

.footer-payment-methods__item--ideal {
    background: url('assets/icons/ideal.png')no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: 85px;
    height: 23px;
}

@media (min-width:481px) {

.footer-payment-methods__item--ideal {
        height: 30px;
}
    }

.footer-payment-methods__item--ideal {

    background-size: 35px;
    width: 35px;
    height: 30px;
}

.footer-payment-methods__item--dummylogo {
    opacity: 0
}

@media (min-width:769px) {

.footer-payment-methods__item--dummylogo {
        display: none
}
    }

.footer-item__container .footer-support__item:not(:nth-child(5)) {
    margin-bottom: 30px;
}

@media (min-width:769px) {

.footer-item__container .footer-support__item:nth-child(1) {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center
}
    }

.footer-item__container--support .footer-support__item:nth-child(2) {
    margin-bottom: 15px
}

@media (min-width:769px) {

.footer-item__container--support .footer-support__item:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center
}
    }

@media (min-width:481px) {

.footer-item__container .footer-support__item:nth-child(4) {
        margin-bottom: 45px
}
    }

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

.footer-item__container--about, .footer-item__container--service-info {
    align-items: center;
    padding: 15px 0
}

@media (min-width:481px) {

.footer-item__container--about, .footer-item__container--service-info {
        padding: 0
}
    }

@media (min-width:481px) {

.footer-item__container--about {
        padding: 0 0 0 30px
}
    }

.footer-item__country-selector .footer-item__link {
    width: 45px;
    margin: 0 15px 15px 0;
}

.footer-item .content-asset .footer-item__container--service-info .footer-item__heading, .footer-item__container--service-info .footer-item__link:not(:last-child), .footer-item .content-asset .footer-item__container--about .footer-item__heading, .footer-item__container--about .footer-item__link:not(:last-child), .footer-container #ot-sdk-btn.ot-sdk-show-settings {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-bottom: 15px;
}

.footer-container #ot-sdk-btn.ot-sdk-show-settings:hover {
    background-color: transparent;
    color: rgb(196, 196, 196);
}

.footer-item__country-selector {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 200px;
    margin-top: 15px
}

@media (min-width:769px) {

.footer-item__country-selector {
        margin-top: 30px
}
    }

.footer-item__country-selector--germany {
    background: url("data:image/svg+xml,%3Csvg 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 40 40%22%3E%3Cdefs%3E%3Ccircle id%3D%22a%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22%2F%3E%3C%2Fdefs%3E%3CclipPath id%3D%22b%22%3E%3Cuse xlink%3Ahref%3D%22%23a%22 overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23b)%22%3E%3Cpath d%3D%22M-10.49-.33H50.5v13.55h-60.99z%22%2F%3E%3Cpath fill%3D%22red%22 d%3D%22M-10.49 13.22H50.5v13.55h-60.99z%22%2F%3E%3Cpath fill%3D%22%23fcee21%22 d%3D%22M-10.49 26.78H50.5v13.55h-60.99z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")no-repeat;
    width: 45px;
    height: 45px;
}

.footer-item__country-selector--france {
    background: url("data:image/svg+xml,%3Csvg 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 40 40%22%3E%3Cdefs%3E%3Ccircle id%3D%22a%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22%2F%3E%3C%2Fdefs%3E%3CclipPath id%3D%22b%22%3E%3Cuse xlink%3Ahref%3D%22%23a%22 overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23b)%22%3E%3Cpath fill%3D%22%230052a5%22 d%3D%22M-5.24-.33h16.83v40.66H-5.24z%22%2F%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M11.59-.33h16.83v40.66H11.59z%22%2F%3E%3Cpath fill%3D%22%23ed1c24%22 d%3D%22M28.41-.33h16.83v40.66H28.41z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")no-repeat;
    width: 45px;
    height: 45px;
}

.footer-item__country-selector--uk {
    background: url('assets/icons/uk-flag.svg')no-repeat;
    width: 45px;
    height: 45px;
}

.footer-item__country-selector--netherlands {
    background: url("data:image/svg+xml,%3Csvg 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 40 40%22%3E%3Cdefs%3E%3Ccircle id%3D%22a%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22%2F%3E%3C%2Fdefs%3E%3CclipPath id%3D%22b%22%3E%3Cuse xlink%3Ahref%3D%22%23a%22 overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23b)%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M-10.49 13.22H50.5v13.55h-60.99z%22%2F%3E%3Cpath fill%3D%22%23cc202b%22 d%3D%22M-10.49-.33H50.5v13.55h-60.99z%22%2F%3E%3Cpath fill%3D%22%232c3382%22 d%3D%22M-10.49 26.78H50.5v13.55h-60.99z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")no-repeat;
    width: 45px;
    height: 45px;
}

.footer-item__country-selector--italy {
    background: url("data:image/svg+xml,%3Csvg 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 40 40%22%3E%3Cdefs%3E%3Ccircle id%3D%22a%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22%2F%3E%3C%2Fdefs%3E%3CclipPath id%3D%22b%22%3E%3Cuse xlink%3Ahref%3D%22%23a%22 overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23b)%22%3E%3Cpath fill%3D%22%23006837%22 d%3D%22M-5.27-.33h16.84v40.66H-5.27z%22%2F%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M11.58-.33h16.84v40.66H11.58z%22%2F%3E%3Cpath fill%3D%22%23ed1c24%22 d%3D%22M28.42-.33h16.84v40.66H28.42z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")no-repeat;
    width: 45px;
    height: 45px;
}

.footer-item__country-selector--spain {
    background: url("data:image/svg+xml,%3Csvg version%3D%221.1%22 id%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 x%3D%220%22 y%3D%220%22 viewBox%3D%220 0 40 40%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.st2%7Bfill%3A%23b5202e%7D%3C%2Fstyle%3E%3Cdefs%3E%3Ccircle id%3D%22SVGID_1_%22 cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22%2F%3E%3C%2Fdefs%3E%3CclipPath id%3D%22SVGID_2_%22%3E%3Cuse xlink%3Ahref%3D%22%23SVGID_1_%22 overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23SVGID_2_)%22%3E%3Cdefs%3E%3Cpath id%3D%22SVGID_3_%22 d%3D%22M56.3 26.4V-.7H15.6l-20.3.1v40.5h61z%22%2F%3E%3C%2Fdefs%3E%3CclipPath id%3D%22SVGID_4_%22%3E%3Cuse xlink%3Ahref%3D%22%23SVGID_3_%22 overflow%3D%22visible%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23SVGID_4_)%22%3E%3Cpath class%3D%22st2%22 d%3D%22M-7.7 29.8H62v10.1H-7.7zM-7.7-.7H62V9.4H-7.7z%22%2F%3E%3Cpath d%3D%22M-7.7 29.8H62V9.4H-7.7v20.4z%22 fill%3D%22%23f5c426%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")no-repeat;
    width: 45px;
    height: 45px;
}

.footer-item__country-selector .footer-item__link:nth-child(3), .footer-item__country-selector .footer-item__link:nth-child(6) {
    margin: 0 0 15px 0;
}

.footer--checkout .footer-item--top, .footer--checkout .footer-item__social-media, .footer--checkout .footer-item--special-align {
        display: none;
    }

.footer--checkout .footer-container {
        width: 100%;
        box-sizing: border-box;
    }

.footer--checkout .footer-item__container--support {
        border: none;
        padding-bottom: 0;
        height: auto
    }

@media (min-width:769px) {

.footer--checkout .footer-item__container--support {
            border-bottom: 1px solid rgb(196, 196, 196);
            padding: 0
    }
    }

.footer--checkout .footer-item--row > div:nth-child(1) {
        width: 100%;
    }

.footer--checkout .footer-item__container--support::after {
        border-right: none;
    }

@media (min-width:481px) {

.footer-service-info {
        border-right: 1px solid rgb(196, 196, 196);
        margin-bottom: 30px
}
    }

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

.footer-service-info {
            margin-bottom: 0
}
    }

@media (min-width:481px) {

.footer-support {
        grid-column: 1/3;
        margin-bottom: 30px
}
    }

@media (min-width:769px) {

.footer-support {
        grid-column: 1/2;
        border-right: 1px solid rgb(196, 196, 196);
        margin-bottom: 0
}
    }

@media (min-width:481px) {

.footer-about {
        grid-column: 2/3;
        grid-row: 2/3;
        margin-bottom: 30px
}
    }

@media (min-width:769px) {

.footer-about {
        grid-column: 3/4;
        grid-row: 1/2;
        margin-bottom: 0
}
    }

@media (min-width:481px) {

.footer-item--payment {
        margin-bottom: 15px
}
    }

@media (min-width:769px) {

.footer-item--payment {
        margin-bottom: 45px
}
    }

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

.header-search {
    display: none;
}

.menu-active--largescreen .header-search, .menu-active .header-search {
    display: block
}

@media (min-width:961px) {

.menu-active--largescreen .header-search, .menu-active .header-search {
        width: 100vw;
        padding: 15px 0 30px 0;
        background-color: rgb(255, 255, 255);
        position: absolute;
        left: calc(50% - 50vw)
}
    }

.header-search > form {
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(255, 255, 255);
    border: none;
    position: relative;
    display: flex
}

@media (min-width:481px) {

.header-search > form {
        padding-left: 30px;
        padding-right: 30px
}
    }

@media (min-width:961px) {

.header-search > form {
        justify-content: space-between;
        flex-flow: row;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
        max-width: 1350px;
        margin: 0 auto
}
    }

.header-search input[type='text'] {
    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
}

.header-search input[type='text']:hover {
        border-color: rgb(119, 119, 119);
    }

.header-search input[type='text'] {

    padding: 0 60px 0 15px; /* right padding considers the width and spacings of search icon and the requested space between icon and placeholder */
    width: 100%;
    color: rgb(51, 51, 51);
    text-overflow: ellipsis;
    -webkit-appearance: none
}

@media (min-width:961px) {

.header-search input[type='text'] {
        width: auto;
        display: flex;
        flex-grow: 1;
        padding-left: 30px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
}
    }

.header-search button[type='submit'] {
    margin-left: calc(-2em + -18px);
    padding-bottom: 0;
    padding-top: 5px;
}

@media (min-width:961px) {
    .header-search button[type='submit'] .visually-hidden {
        display: block;
        position: relative;
        height: auto;
        width: auto;
        margin: 0;
        overflow: visible;
        overflow: initial;
    }

    .header-search button[type='submit'] {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent;
    }

    .header-search button[type='submit']:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

    @media (min-width:481px) {

    .header-search button[type='submit'] {
        height: 45px;
        padding: 0 45px;
    }
    }

    .header-search button[type='submit'] {

        border: 1px solid rgb(255, 135, 114);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin: 0;
    }

    .header-search button[type='submit'] i {
        display: none;
    }

    .header-search button[type='button'] {
        padding: 0;
        margin-left: 30px;
        margin-top: 0;
        display: block;
    }
    }

.header-search__widescreen-close {
    display: none
}

.header-search__widescreen-close button:hover {
        color: unset;
    }

.header-search button i {
    font-size: 24px;
}

.header-search button.header-search__widescreen-close:hover {
    color: rgb(255, 135, 114);
}

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

/* spacing requested on designs */

#search-suggestions {
    display: flex;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 2px -2px rgb(196, 196, 196);
}

.search-suggestion-wrapper {
    width: 100%;
    max-width: 1350px;
    border: none;
    display: flex;
    flex-flow: column;
    box-shadow: none
}

@media (min-width:769px) {

.search-suggestion-wrapper {
        flex-flow: row
}
    }

.search-suggestion-wrapper .phrase-suggestions {
        min-width: 35%;
        margin: 30px 0 20px 15px;
        padding-right: 30px;
        border-top: none;
        border-right: none
    }

@media (min-width:769px) {

.search-suggestion-wrapper .phrase-suggestions {
            border-right: 1px solid rgb(196, 196, 196)
    }
    }

@media (min-width:481px) {

.search-suggestion-wrapper .phrase-suggestions {
            margin: 30px 0 30px 30px
    }
    }

.search-suggestion-wrapper .suggestion-header {
        color: rgb(0, 0, 0);
        word-wrap: break-word;
        line-height: 1;
    }

.search-suggestion-wrapper .suggestion-phrase {
        display: flex;
    }

.search-suggestion-wrapper .hitgroup {
        color: rgb(255, 135, 114);
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        margin: 0;
        padding: 20px 0;
        border-top: 1px solid rgb(196, 196, 196)
    }

.search-suggestion-wrapper .hitgroup:first-of-type {
            padding-top: 0;
            border: none;
        }

.search-suggestion-wrapper .hitgroup:last-of-type {
            padding-bottom: 0;
        }

.search-suggestion-wrapper .hitgroup .hit {
            line-height: 15px;
            margin-left: 15px;
            margin-bottom: 20px;
        }

.search-suggestion-wrapper .hitgroup .hit:last-child {
            margin-bottom: 0;
        }

.search-suggestion-wrapper .product-suggestions {
        display: flex;
        flex-flow: column;
        margin: 30px 0 30px 15px
    }

@media (min-width:481px) {

.search-suggestion-wrapper .product-suggestions {
            margin: 30px
    }
    }

.search-suggestion-wrapper .product-suggestions .all-suggestions {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 0;
            margin-top: 15px
        }

@media (min-width:769px) {

.search-suggestion-wrapper .product-suggestions .all-suggestions {
                justify-content: flex-start
        }
    }

.search-suggestion-wrapper .product-suggestions .all-suggestions .button-suggestion {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent;
            }

.search-suggestion-wrapper .product-suggestions .all-suggestions .button-suggestion:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

@media (min-width:481px) {

.search-suggestion-wrapper .product-suggestions .all-suggestions .button-suggestion {
        height: 45px;
        padding: 0 45px;
            }
    }

.search-suggestion-wrapper .product-suggestions .all-suggestions .button-suggestion {

                display: flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
            }

.search-suggestion-wrapper .product-suggestion {
        border: none;
        margin-bottom: 15px;
        padding: 0
    }

.search-suggestion-wrapper .product-suggestion:hover {
            background-color: rgb(255, 255, 255);
        }

.search-suggestion-wrapper .product-suggestion .product-link {
            display: flex;
            justify-content: flex-start
        }

.search-suggestion-wrapper .product-suggestion .product-link .product-image {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90px;
                height: 123px;
                padding: 10px;
                box-sizing: border-box;
                border-radius: 0;
                background-color: transparent;
                background-color: initial;
                border: 1px solid rgb(196, 196, 196);
                transition: all 0.5s ease-out
            }

.search-suggestion-wrapper .product-suggestion .product-link .product-image img {
                    max-width: 100%;
                    max-height: 100%;
                }

.search-suggestion-wrapper .product-suggestion .product-link .product-details {
                padding-top: 0;
                margin-left: 10px;
                color: rgb(0, 0, 0);
                width: auto
            }

.search-suggestion-wrapper .product-suggestion .product-link .product-details .product-brand {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;
                }

.search-suggestion-wrapper .product-suggestion .product-link .product-details .product-name {
                    padding-bottom: 45px;
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;
                }

.search-suggestion-wrapper .product-suggestion .product-link .product-details .product-price {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
                }

@media (min-width:481px) {

.search-suggestion-wrapper .product-suggestion .product-link .product-details .product-price {
        font-size: 16px;
                }
    }

.search-suggestion-wrapper {

    /* The below selector needs to be separated in order to work */
}

.search-suggestion-wrapper .product-suggestion:hover .product-image {
        border: 1px solid rgb(0, 0, 0);
    }

/*
 * This file defines the stylings for the header
*/

/* max. 8 categories can be displayed in 1 column - this value considers the max-height of the column's border-right */

/* height calculated on the basis of desing
see http://confluence/display/SFCC/Header+-+redesign?preview=/48432980/48432984/Start%20LANDSCAPE%20Annotations.png#Header-redesign-Annotations.1
this equals 65px + $g2 - 5px (top border) */

/* special padding requested - see SFCC-962 */

/* special margin requested in SFCC-935 */

html {
    background-color: rgb(255, 135, 114);
}

/* Prevents horizontal scrollbar due to the 100vw width applied to the .wrapper-full-width */

body {
    background: rgb(255, 255, 255);
    width: 100%
}

@media (min-width:769px) {

body {
        overflow-x: hidden
}
    }

.body-fixed {
    overflow-y: hidden
}

@media (min-width:961px) {

.body-fixed {
        overflow-y: visible
}
    }

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101; /* needed because of paypal inline style */
    background-color: rgb(255, 255, 255);
    border-top: 5px solid rgb(255, 135, 114)
}

@media (min-width:481px) {

.header {
        height: 90px
}
    }

@media (min-width:961px) {

#wrapper.submenu-active:not(.homepage):not(.pt_checkout) .header {
        height: 121px /* requested height (see http://10.100.100.82/pages/viewpage.action?spaceKey=SFCC&title=Header+-+redesign&preview=/48432980/50233871/Women%20Category%20Landing%20LARGESCREEN%20Annotations.png#Header-redesign-Largescreen) - considers 5px top border */
}
    }

#wrapper.homepage .subcategory {
    display: none;
}

.header-shadow {
    box-shadow: 0 0 5px 0 rgb(51, 51, 51);
}

.menu-active {
    height: 100%;
    overflow-y: hidden;
}

.header-wrapper {
    max-width: 1350px;
    margin: 0 auto;
}

@media (min-width:769px) {

.wrapper-full-width {
        display: none
}
    }

.menu-category a {
    padding: 0;
}

.menu-category__top .wrapper-full-width {
    display: none;
}

.menu-item--first + .wrapper-full-width, .menu-category__top.active .wrapper-full-width {
    display: block;
    position: absolute;
    left: 0;
    top: 255px; /* height of main navigation */
    right: 0
}

@media (min-width:481px) {

.menu-item--first + .wrapper-full-width, .menu-category__top.active .wrapper-full-width {
        top: 220px /* height of main navigation */
}
    }

@media (min-width:961px) {

.menu-item--first + .wrapper-full-width, .menu-category__top.active .wrapper-full-width {
        display: none
}
    }

@media (min-width:961px) {

.subcategory li:hover .wrapper-full-width, .subcategory li:active .wrapper-full-width {
        background-color: rgb(255, 255, 255);
        display: block;
        width: 100vw;
        position: absolute;
        left: calc(-50vw + 50%);
        top: 42px; /* the category flyout must be placed right below the header for the hover effect to work */
        z-index: 6;
        box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.1)
}
    }

.header-wrapper-inner {
    max-width: 1350px;
    margin: 0 auto;
}

ul .menu-vertical {
    display: block;
    position: absolute;
    width: 100%;
    top: 37px; /* special spacing requested (see http://10.100.100.82/display/SFCC/Header+-+redesign?preview=/48432980/48432990/Women%20Category%20Landing%20WIDESCREEN%20Annotations.png) - line height and border bottom or top level categories are considered */
    left: 0;
    padding-top: 30px;
    padding-left: 30px;
}

.level-2 {
    width: 100%;
    background-color: rgb(255, 255, 255);
    box-shadow: none
}

@media (min-width:961px) {

.level-2 {
        width: auto;
        position: unset;
        margin: 15px 30px 0;
        padding-top: 30px;
        border-top: 1px solid rgb(224, 224, 224)
}
    }

.header-search-icon i[class^='fa-']::before, .header-search-icon i[class*='fa-']::before, .header-account-icon i[class^='fa-']::before, .header-account-icon i[class*='fa-']::before, .header-wishlist-icon i[class^='fa-']::before, .header-wishlist-icon i[class*='fa-']::before, .mini-cart-link i[class^='fa-']::before, .mini-cart-link i[class*='fa-']::before, .header-menu-toggle i[class^='fa-']::before, .header-menu-toggle i[class*='fa-']::before {
            color: rgb(196, 196, 196);

            /* necessary for Safari */
            -webkit-text-fill-color: rgb(196, 196, 196);
        }

.header-search-icon i[class^='fa-'], .header-search-icon i[class*='fa-'], .header-account-icon i[class^='fa-'], .header-account-icon i[class*='fa-'], .header-wishlist-icon i[class^='fa-'], .header-wishlist-icon i[class*='fa-'], .mini-cart-link i[class^='fa-'], .mini-cart-link i[class*='fa-'], .header-menu-toggle i[class^='fa-'], .header-menu-toggle i[class*='fa-'] {
    /* 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) {
                .header-search-icon i[class^='fa-']:hover::before, .header-search-icon i[class*='fa-']:hover::before, .header-account-icon i[class^='fa-']:hover::before, .header-account-icon i[class*='fa-']:hover::before, .header-wishlist-icon i[class^='fa-']:hover::before, .header-wishlist-icon i[class*='fa-']:hover::before, .mini-cart-link i[class^='fa-']:hover::before, .mini-cart-link i[class*='fa-']:hover::before, .header-menu-toggle i[class^='fa-']:hover::before, .header-menu-toggle i[class*='fa-']:hover::before {
                    color: rgb(119, 119, 119);
                    -webkit-text-fill-color: rgb(119, 119, 119);
                }
    }

/* needed to overwrite styles from SG2 */

#wrapper.menu-active {
    left: unset;
}

.pt_storefront.menu-active #main {
    opacity: 0.5;
}

/* Top Banner */

.top-banner {
    position: relative;
    clear: both;
    content: '';
    display: table;
    width: 100%;
}

/* Header Banner */

.header-banner {
    /* adds 20px margin above logo for portrait devices as defined in the styleguide */
    margin-bottom: 20px;
    padding: 0
}

@media (min-width:481px) {

.header-banner {
        margin-bottom: 30px
}
    }

@media (min-width:961px) {

.header-banner {
        margin-bottom: 27px /* special spacing (see http://10.100.100.82/pages/viewpage.action?spaceKey=SFCC&title=Header+-+redesign&preview=/48432980/50233871/Women%20Category%20Landing%20LARGESCREEN%20Annotations.png#Header-redesign-Largescreen) - considers 5px border top */
}
    }

/* Nav Search */

nav[role='navigation'] {
    color: rgb(255, 255, 255);
    left: 0;
    margin-top: 0;
    position: unset;
    width: 100%;
    padding-top: 15px;
    z-index: 1;
    background-color: rgb(255, 255, 255);
}

.menu-active .header-search--widescreen {
    display: none
}

@media (min-width:961px) {

.menu-active .header-search--widescreen {
        display: block;
        margin-bottom: 30px
}
    }

.header-search--mobile {
    display: block;
}

.header-menu-toggle {
    margin-left: 15px;
    padding: 0;
    cursor: pointer;
    float: left;
    display: block
}

@media (min-width:481px) {

.header-menu-toggle {
        margin-left: 30px;
        margin-top: 5px
}
    }

@media (min-width:961px) {

.header-menu-toggle {
        display: none
}
    }

.header-menu-toggle .fa-burgersearch::before {
    font-size: 22px
}

@media (min-width:481px) {

.header-menu-toggle .fa-burgersearch::before {
        font-size: 25px
}
    }

.header-menu-toggle.cross-icon .fa-close::before {
    color: rgb(255, 255, 255)
}

@media (min-width:481px) {

.header-menu-toggle.cross-icon .fa-close::before {
        font-size: 18px
}
    }

/* Largescreen Navigation */

.largescreen-navigation {
    display: none
}

@media (min-width:961px) {

.largescreen-navigation {
        display: block;
        float: left;
        margin-top: 10px;
        margin-left: 30px;
        border: none
}
    }

.largescreen-navigation .level-1, .widescreen-support-navigation .level-1 {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none
}

@media (min-width:769px) {

.largescreen-navigation .level-1, .widescreen-support-navigation .level-1 {
        list-style: none
}
    }

.largescreen-navigation li {
    display: inline-block;
    margin-left: 30px
}

@media (min-width:769px) {

.largescreen-navigation li {
        display: inline-block;
        padding: 0 15px;
        margin-left: 0
}
    }

.widescreen-support-navigation li {
    display: inline-block;
    line-height: 18px;
    vertical-align: top;
}

.second-navigation-categories li {
    text-align: left;
}

.largescreen-navigation li:first-child {
    margin-left: 0;
}

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

    padding: 0;
}

.widescreen-support-navigation li a {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;
}

.level-2 > ul > li > a {
    padding: 0;
}

.largescreen-navigation li a:hover, .largescreen-navigation li a:active {
    color: rgb(255, 135, 114);
    background: transparent;
}

.largescreen-navigation li a:active {
    border-bottom: 2px solid rgb(255, 135, 114);
    padding-bottom: 2px;
}

.widescreen-support-navigation {
    display: none
}

@media (min-width:769px) {

.widescreen-support-navigation {
        display: block;
        position: absolute;
        right: 30px
}
    }

.widescreen-support-navigation li:first-child {
    border-right: 1px solid rgb(119, 119, 119);
    padding-right: 15px;
    margin-right: 0;
}

.widescreen-support-navigation li:last-child {
    margin-right: 0;
    margin-left: 10px;
    padding-right: 0;
    border: none;
}

.header-search {
    background-color: unset;
    border: unset;
    border-radius: unset;
    color: unset;
    height: unset;
    margin: unset;
    position: unset;
    width: unset;
    z-index: unset;
}

/* Largescreen Header Search Icon */

.header-search-icon {
    display: none
}

@media (min-width:961px) {

.header-search-icon {
        display: block;
        top: 10px;

        /* The search icon for largescreen is calculated from the right side of the viewport and taking into account width of other icons, this icon should be moved 185px from the right */
        right: 185px;
        background: transparent;
        border: none;
        border-radius: 0;
        position: absolute;
        padding: 0
}
    }

.header-search-icon .fa-magnifier::before {
    font-size: 25px;
}

/* Header Account Icon */

.header-account-icon {
    display: block;
    float: left;
    background-color: transparent;
    border: none;
    margin-left: 15px
}

@media (min-width:481px) {

.header-account-icon {
        margin-left: 30px;
        margin-top: 5px
}
    }

@media (min-width:961px) {

.header-account-icon {
        position: absolute;

        /* The account icon is calculated from the right side of the viewport and taking into account width of other icons, this icon should be moved 135px from the right */
        right: 135px;
        top: 5px
}
    }

.header-account-icon .fa-account::before {
    font-size: 23px
}

@media (min-width:481px) {

.header-account-icon .fa-account::before {
        font-size: 26.5px
}
    }

/* Logo */

.primary-logo {
    height: 30px;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 15px
}

@media (min-width:0) {

.primary-logo {
        /* adds 11px margin below logo for portrait devices as defined in the styleguide */
        margin-bottom: 11px
}
    }

@media (min-width:961px) {

.primary-logo {
        height: 42px;
        width: 167px
}
    }

.primary-logo .header-logo-link {
    display: block;
    background: url(assets/images/Stylefile-logo.svg) center center no-repeat;
    height: 100%
}

@media (min-width:481px) {

.primary-logo .header-logo-link {
        background-image: url(assets/images/Stylefile-logo.svg);
        height: 42px
}
    }

@media (min-width:961px) {

.primary-logo .header-logo-link {
        height: 42px;
        width: 167px
}
    }

/* Header WishList Icon */

.header-wishlist-icon {
    position: absolute;
    right: 60px;
    top: 0
}

@media (min-width:481px) {

.header-wishlist-icon {
        position: absolute;

        /* The header wishlist icon is calculated from the right side of the viewport and taking into account width of other icons, this icon should be moved 85px from the right */
        right: 85px;
        margin-top: 0
}
    }

@media (min-width:961px) {

.header-wishlist-icon {
        top: 10px
}
    }

.header-wishlist-icon .fa-heart-solid::before {
    font-size: 22px
}

@media (min-width:481px) {

.header-wishlist-icon .fa-heart-solid::before {
        font-size: 25px
}
    }

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

    position: absolute;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 135, 114);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    left: -4px;
    top: -7px;
}

/* Header MiniCart Icon */

@media (min-width:961px) {

.mini-cart-total {
        top: 10px
}
    }

#mini-cart {
    top: 0;
    right: 15px
}

@media (min-width:961px) {

#mini-cart {
        right: 30px
}
    }

.menu-vertical .menu-item-toggle::before {
    content: unset;
}

.menu-category.level-1 li i, .menu-category.level-1 li .menu-item-toggle::before {
    display: none;
}

.level-1 li .level-2 li i {
    all: unset;
    display: block;
}

.menu-category.level-1 li .largescreen-navigation-features i {
    display: block;
}

.largescreen-navigation-features {
    display: none
}

@media (min-width:961px) {

.largescreen-navigation-features {
        display: block;
        margin-top: 30px;
        padding: 30px 0;
        border-top: 1px solid rgb(196, 196, 196);
        width: 709px
}
    }

#mini-cart .mini-cart-total .mini-cart-link i {
    font-size: medium;
    font-size: initial;
}

#mini-cart .mini-cart-total .fa-shopping-cart::before {
    font-size: 23px
}

@media (min-width:481px) {

#mini-cart .mini-cart-total .fa-shopping-cart::before {
        font-size: 26px
}
    }

nav.stylefile-navigation .menu-category.level-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: none;
    margin: 30px 0;
    padding: 0 15px
}

@media (min-width:481px) {

nav.stylefile-navigation .menu-category.level-1 {
        padding: 0 30px;
        flex-wrap: unset;
        justify-content: space-between;
        list-style-type: none
}
    }

.level-1 > li .menu-item-toggle {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    display: block;
    width: auto;
    padding: 0;
    color: rgb(51, 51, 51)
}

@media (min-width:961px) {

.level-1 > li .menu-item-toggle {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73
}
    }

.menu-category.level-1 li {
    width: 49%;
    border: none
}

@media (min-width:481px) {

.menu-category.level-1 li {
        display: inline-block;
        margin-right: 15px;
        width: calc(32% - 5px)
}
    }

@media (min-width:961px) {

.menu-category.level-1 li {
        width: auto;
        width: initial;
        margin: 0;

        /* special spacing - see http://10.100.100.82/display/SFCC/Header+-+redesign?preview=/48432980/50233871/Women%20Category%20Landing%20LARGESCREEN%20Annotations.png */
        padding-bottom: 20px
}
    }

@media (min-width:961px) {

.menu-category.level-1 li.category-flyout_link {
        padding-bottom: 15px
}
    }

.menu-category.level-1 > li > .menu-item {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent
}

.menu-category.level-1 > li > .menu-item:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

@media (min-width:481px) {

.menu-category.level-1 > li > .menu-item {
        height: 45px;
        padding: 0 45px
}
    }

.menu-category.level-1 > li > .menu-item {

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    height: 40px;
    width: 100%;
    border: none
}

@media (min-width:481px) {

.menu-category.level-1 > li > .menu-item {
        height: 45px
}
    }

@media (min-width:961px) {

.menu-category.level-1 > li > .menu-item {
        height: auto;
        height: initial;
        background: transparent;
        text-transform: uppercase;
        line-height: 0.73;
        color: rgb(51, 51, 51)
}
    }

.menu-category.level-1 > li > .menu-item {
    /* in touch devices, prevent hover stylings from being incorrectly applied on double click */
}

@media (hover: none) {
        .menu-category.level-1 > li > .menu-item:hover {
            background-color: rgb(255, 135, 114);
            color: rgb(255, 255, 255);
            border: none;
        }
    }

@media (min-width:961px) {

.level-1 li:first-child .menu-item {
        padding-left: 0
}
    }

.level-2 .menu-vertical li a, .level-2 .menu-vertical li button, .level-2 .second-navigation-categories li a {
    all: unset;
    display: flex;
    width: 100%;
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

    justify-content: space-between
}

@media (min-width:961px) {

.level-2 .menu-vertical li a, .level-2 .menu-vertical li button, .level-2 .second-navigation-categories li a {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}
    }

.level-2 .menu-vertical li a.menu-category_direct-link, .level-2 .menu-vertical li button.menu-category_direct-link, .level-2 .second-navigation-categories li a.menu-category_direct-link {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px
    }

@media (min-width:961px) {

.level-2 .menu-vertical li a.menu-category_direct-link, .level-2 .menu-vertical li button.menu-category_direct-link, .level-2 .second-navigation-categories li a.menu-category_direct-link {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
    }
    }

.level-2 .menu-vertical li a, .level-2 .second-navigation-categories li a {
    /* necessary for Safari */
    -webkit-text-fill-color: rgb(51, 51, 51);
}

/* active stylings should not apply to a tags in content asset */

.largescreen-navigation .header-menu-banner a:visited, .largescreen-navigation .header-menu-banner a:active {
    border-bottom: none;
    padding-bottom: 0;
}

.largescreen-navigation .header-menu-banner a:hover {
    text-decoration: none;
}

.level-2 .menu-vertical li.active > a {
        color: rgb(255, 135, 114);
        border: none;

        /* necessary for Safari */
        -webkit-text-fill-color: rgb(255, 135, 114);
    }

@media (min-width:769px) {

.menu-category.level-1 li:hover > .menu-item, .menu-category.level-1 li:active > .menu-item {
        color: rgb(51, 51, 51);
        border: none;
        border-bottom: 3px solid rgb(255, 135, 114);
        border-radius: 0
}
    }

.menu-category.level-1 .menu-category__top.active > .menu-item {
    position: relative
}

@media (min-width:769px) {

.menu-category.level-1 .menu-category__top.active > .menu-item {
        border-bottom: 3px solid rgb(255, 135, 114);
        border-radius: 0
}
    }

.level-2 .menu-vertical > li > a:first-child {
    padding-top: unset;
}

.header-navigation .menu-category.level-1 li.menu-item--inactive > a {
    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);
    }

.header-navigation .menu-category.level-1 li.menu-item--inactive > a:hover {
            background-color: rgb(196, 196, 196);
            border-color: rgb(196, 196, 196);
            color: rgb(51, 51, 51);
        }

@media (min-width:481px) {

.header-navigation .menu-category.level-1 li.menu-item--inactive > a {
        height: 45px;
    }
    }

.header-navigation .menu-category.level-1 li.active > .menu-item {
    border: 1px solid rgb(255, 135, 114);
    background: transparent;
    color: rgb(255, 135, 114);
}

@media (min-width:961px) {

.menu-category.level-1 .menu-category__top.active > .menu-item:hover {
        border-bottom: 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) {

    @media (min-width:961px) {
    .level-2 .menu-vertical li a:hover, .level-2 .menu-vertical li button:hover, .level-2 .second-navigation-categories li a:hover {
            color: rgb(255, 135, 114);
    }
    }
    .level-2 .menu-vertical li a:hover, .level-2 .menu-vertical li button:hover, .level-2 .second-navigation-categories li a:hover {

        cursor: pointer;
        border: none;
        background: transparent;
    }
    }

.level-2 .menu-vertical li {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-grow: unset;
    padding: 15px 0;
    border-bottom: 1px solid rgb(237, 237, 237);
    text-transform: unset
}

@media (min-width:961px) {

.level-2 .menu-vertical li {
        width: 187px;
        min-width: 187px; /* needed to override custom styling */
        margin: 0 0 15px;
        padding: 0;
        text-align: left;
        border-bottom: none
}
    }

.level-2 .menu-vertical li .fa-see-more-light {
        display: flex;
        align-items: center
    }

@media (min-width:961px) {

.level-2 .menu-vertical li .fa-see-more-light {
            display: none
    }
    }

.level-2 .menu-vertical li .fa-see-less-light {
        display: none;
    }

@media (min-width:961px) {

.level-1 li:first-child {
        margin-right: 0;
        padding-left: 0;
        padding-top: 0
}
    }

@media (min-width:961px) {

.menu-vertical li.link-wrapper--has-sub-menu {
        display: none
}
    }

.level-1 li:last-child {
    margin-top: 15px;
    width: 100%
}

@media (min-width:481px) {

.level-1 li:last-child {
        margin-top: 0;
        margin-right: 0;
        width: calc(32% - 5px)
}
    }

@media (min-width:961px) {

.level-1 li:last-child {
        width: auto;
        width: initial;
        margin-left: 0
}
    }

@media (min-width:481px) {

.level-2 li:last-child {
        width: 100%;
        margin-left: 0
}
    }

.level-3 .expanded-menu li {
    display: block;
    padding: 10px 0;
    border-bottom: none;
}

.second-navigation-categories li:last-child {
    margin-top: 0;
}

.level-2 .second-navigation-categories li {
    display: flex;
    align-items: center;
    height: 45px;
    flex-grow: unset;
    border-bottom: 1px solid rgb(196, 196, 196);
    text-transform: unset;
    width: 100%;
    list-style: none
}

@media (min-width:961px) {

.level-2 .second-navigation-categories li {
        width: 187px;
        margin-bottom: 15px;
        padding: 0;
        height: auto;
        border-bottom: none
}
    }

.level-2 .menu-vertical li.active .fa-see-more-light, .largescreen-navigation .level-2 li:hover .fa-see-more-light {
        display: none;
    }

.level-2 .menu-vertical li.active .fa-see-less-light, .largescreen-navigation .level-2 li:hover .fa-see-less-light {
        display: flex;
        align-items: center;
        font-size: 1px /* The see less icon needs to be 1px to show correctly */
    }

@media (min-width:961px) {

.level-2 .menu-vertical li.active .fa-see-less-light, .largescreen-navigation .level-2 li:hover .fa-see-less-light {
            display: none
    }
    }

.level-2 .menu-vertical li.active .fa-see-less-light::before, .largescreen-navigation .level-2 li:hover .fa-see-less-light::before {
            color: rgb(255, 135, 114);

            /* necessary for Safari */
            -webkit-text-fill-color: rgb(255, 135, 114);
        }

.menu-category.level-1 li:hover .level-2 li:hover > a {
    color: rgb(255, 135, 114);
    text-decoration: none;

    /* necessary for Safari */
    -webkit-text-fill-color: rgb(255, 135, 114)
}

@media (min-width:769px) {

.menu-category.level-1 li:hover .level-2 li:hover > a {
        border: none
}
    }

.header-navigation {
    position: absolute;
    width: calc(100% - 48px);
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    transition: -webkit-transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
    margin: 0;
    z-index: 4
}

@media (min-width:481px) {

.header-navigation {
        width: 65%
}
    }

@media (min-width:961px) {

.header-navigation {
        display: none;
        margin-top: 0
}
    }

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

    text-align: left;
    margin-top: 30px;
    margin-left: 15px;
    margin-bottom: 0;
    font-weight: normal
}

@media (min-width:481px) {

.header-navigation .menu-intro {
        margin-top: 45px;
        margin-left: 30px
}
    }

.largescreen-navigation .menu-intro {
    display: none;
}

input[type=checkbox].header-menu-toggle.menu-toggle {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

.menu-active .header-navigation {
    display: flex;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    overflow-y: auto;
    height: 100vh;
}

.header-menu-toggle.cross-icon {
    display: none;
    top: 41px;
    right: 0;
    margin: 0;
    padding: 15px;
    z-index: 4
}

@media (min-width:481px) {

.header-menu-toggle.cross-icon {
        left: 65%;
        right: auto;
        right: initial;
        top: 85px
}
    }

@media (min-width:769px) {

.header-menu-toggle.cross-icon {
        display: none
}
    }

.menu-active .header-menu-toggle.cross-icon {
    display: block;
    position: absolute
}

@media (min-width:961px) {

.menu-active .header-menu-toggle.cross-icon {
        display: none
}
    }

.menu-category {
    text-transform: unset;
}

.level-1 > li .menu-item-toggle:hover {
    background: none;
}

@media (min-width:961px) {

.level-1 li:hover .level-2, .level-1 li:active .level-2 {
        display: flex;
        flex-wrap: wrap
}
    }

.level-2 .menu-vertical, .second-navigation-categories {
    all: unset;
    display: flex;
    flex-direction: column;
    padding: 0
}

@media (min-width:961px) {

.level-2 .menu-vertical, .second-navigation-categories {
        float: left
}
    }

.level-2 .menu-vertical {
    margin: 0 15px;
    border-top: 1px solid rgb(237, 237, 237)
}

@media (min-width:481px) {

.level-2 .menu-vertical {
        margin: 0 30px
}
    }

@media (min-width:961px) {

.level-2 .menu-vertical {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(7, auto) 1fr;
        position: relative;
        height: 255px;
        margin: 0;
        padding-right: 30px;
        margin-bottom: 30px;
        border-top: none;
        border-right: 1px solid rgb(224, 224, 224)
}
    }

.level-2 .menu-vertical li:last-child {
    margin: 0;
    border: none;
}

.second-navigation-categories {
    background-color: rgb(237, 237, 237);
    padding: 0 15px;
    height: 100vh
}

@media (min-width:481px) {

.second-navigation-categories {
        padding: 0;
        padding-left: 30px
}
    }

@media (min-width:961px) {

.second-navigation-categories {
        width: 187px;
        height: 255px;
        margin-bottom: 30px;
        padding: 0 30px;
        background: transparent;
        border-right: 1px solid rgb(224, 224, 224)
}
    }

.second-navigation-categories ul {
    padding-left: 0;
    margin: 0;
}

.header-menu-banner {
    margin-bottom: 30px;
    padding-left: 30px;
}

@media (min-width:481px) {

.level-3 {
        display: none
}
    }

.level-3 .expanded-menu {
    padding: 0;
    margin-top: 10px;
}

.level-3 .expanded-menu li:last-child {
    width: 100%;
}

/**
 * Shows a greyed-out preview of the 2nd level category tree in the mobile flyout.
 */

.header-navigation .level-1 li:not(.active):first-child .level-2 {
    display: block;
    pointer-events: none
}

.header-navigation .level-1 li:not(.active):first-child .level-2 .menu-vertical, .header-navigation .level-1 li:not(.active):first-child .level-2 .second-navigation-categories {
        opacity: 0;
    }

.header-navigation .level-1 li:not(.active):first-child .level-2 {

    /* Hide the first-level category link */
}

.header-navigation .level-1 li:not(.active):first-child .level-2 .menu-vertical > li:first-child {
        display: none;
    }

.largescreen-navigation-features .footer-top-section__item {
    flex: none
}

@media (min-width:769px) {

.largescreen-navigation-features .footer-top-section__item {
        width: 20%
}
    }

.largescreen-navigation-features .footer-item__container--top-section {
    flex-wrap: nowrap;
    justify-content: space-between;
}

.largescreen-navigation-features .footer-top-section__label {
    width: auto
}

@media (min-width:769px) {

.largescreen-navigation-features .footer-top-section__label {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}
    }

.top-banner::after {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 41px;
    height: 100000vw;
    right: 0;
    background: rgb(0, 0, 0);
    transition: opacity 250ms linear
}

@media (min-width:481px) {

.top-banner::after {
        top: 85px
}
    }

@media (min-width:961px) {

.top-banner::after {
        display: none
}
    }

.menu-active .top-banner::after {
    opacity: 0.6;
    pointer-events: auto;
    z-index: 3;
}

/* required for overlay shadow */

#wrapper {
    height: 100%;
    overflow-y: hidden;
    padding-top: 66px /* header height */
}

@media (min-width:481px) {

#wrapper {
        padding-top: 95px /* header height in homepage (aka without the 1st level subcategories active) */
}
    }

@media (min-width:961px) {

#wrapper {
        overflow-y: visible
}
    }

@media (min-width:961px) {

#wrapper.submenu-active:not(.homepage):not(.pt_checkout) {
        padding-top: 126px /* header height in homepage (aka with the 1st level subcategories active) */
}
    }

.pt_checkout .header-menu-toggle, .pt_checkout .header-account-icon, .pt_checkout .header-wishlist-icon, .pt_checkout #mini-cart, .pt_checkout .largescreen-navigation, .pt_checkout .header-search-icon {
        display: none;
    }

.category-flyout_icon-wrapper {
    position: relative;
    display: none;
    z-index: 5;
    width: 100%;
    justify-content: center;
}

.category-flyout_link:hover .category-flyout_icon-wrapper {
    display: flex;
}

.menu-category.level-1 li i.category-flyout_icon {
    display: block;
        content: "\f108";
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: absolute;
    width: 17px;
    height: 10px;
    top: 5px;
    line-height: 17px;
    font-size: 11px;
    color: rgb(224, 224, 224);
}

@media (min-width:961px) {

.menu-category.level-1 .custom-mobile-menu_link {
        padding-left: 15px
}
    }

/*
 * This file defines the stylings for the product tiles
*/

/* requested in SFCC-1543 */

/* requested in SFCC-1543 */

/* requested in SFCC-1544 */

/* requested in SFCC-1544 */

.product-tile_container {
    border: 1px solid rgb(224, 224, 224);
    position: relative;
    width: 100%;

    /* necessary to keep the tile ratio */
    padding-bottom: 137%;
}

.product-tile, .product-tile_container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.product-tile_flags-container, .product-tile .product-promo {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;
}

@media (min-width:481px) {

.product-tile_flags-container, .product-tile .product-promo {
        font-size: 16px;
            line-height: 24px;
}
    }

.product-tile_flags-container, .product-tile .product-promo {

    display: flex;
    flex-flow: column;
    position: absolute;
}

.product-tile_flags-container {
    align-items: baseline;
    top: 5px;
    left: 5px;
    text-align: left;
    z-index: 1;
    font-size: 12px /* requested in SFCC-1544 */
}

@media (min-width:481px) {

.product-tile_flags-container {
        font-size: 13px; /* requested in SFCC-1544 */
        top: 10px;
        left: 10px
}
    }

.product-tile_flag {
    background-color: rgb(255, 255, 255, 0.8);
    padding: 0 5px;
}

.product-tile_wishlist-icons {
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: baseline;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer
}

.product-tile_wishlist-icons .add-to-wishlist {
        position: relative;
        align-self: flex-start;
        top: 10px;
        color: rgb(196, 196, 196);
        border: none;
        padding: 0;
        cursor: pointer;
        display: contents
    }

.product-tile_wishlist-icons .add-to-wishlist .fa-heart-light-l {
            font-size: 16px
        }

@media (min-width:481px) {

.product-tile_wishlist-icons .add-to-wishlist .fa-heart-light-l {
                font-size: 20px /* requested in SFCC-1544 */
        }
    }

.product-tile .thumb-link {
    display: flex;
    width: 100%;
    max-height: 100%;
    justify-content: center;
}

.product-tile .product-image {
    padding: 9%;
    max-width: 270px;
    max-height: 392px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.product-tile img {
    -o-object-fit: contain;
       object-fit: contain;
}

.product-tile .product-name {
    font-size: unset;
    margin-top: 9px;
    width: 100%;
    height: unset;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

@media (min-width:481px) {

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

.product-tile .product-category-and-color {

    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

    display: flex;
    flex-flow: column
}

.product-tile .product-name .name-link .name-product-tile {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (min-width:481px) {

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

        justify-content: center;
        flex-flow: row
}
    }

.product-tile .product-promo {
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 135, 114);
    height: 22px;
    justify-content: center
}

@media (min-width:481px) {

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

.product-tile .product-promo.no-promo {
        min-height: 0;
        height: 0;
    }

.product-tile .product-promo.product-promo--pdpslider {
        background-color: transparent;
    }

.product-tile .promotional-message {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px
}

@media (min-width:481px) {

.product-tile .promotional-message {
        font-size: 16px;
            line-height: 24px
}
    }

.product-tile .promotional-message {

    font-size: 12px; /* requested in SFCC-1543 */
    text-transform: none;
    color: rgb(255, 255, 255)
}

@media (min-width:481px) {

.product-tile .promotional-message {
        font-size: 13px /* requested in SFCC-1543 */
}
    }

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

@media (min-width:481px) {

.product-tile .product-pricing {
        font-size: 16px;
            line-height: 24px
}
    }

.product-tile .product-pricing {

    color: rgb(51, 51, 51);
    margin: 0;
    display: flex;
    flex-flow: column
}

@media (min-width:481px) {

.product-tile .product-pricing {
        flex-flow: row
}

        .product-tile .product-pricing .product-standard-price {
            margin-left: 15px;
        }
    }

.product-standard-price {
    color: rgb(153, 153, 153);
}

.product-sales-price {
    color: rgb(51, 51, 51);
}

/* Hex color wheel */

.product-tile_hex-color-container {
    width: 45px;
    height: 45px;
    bottom: 10px;
    right: 10px;
    position: absolute;
    z-index: 1
}

@media (min-width:481px) {

.product-tile_hex-color-container {
        bottom: 15px;
        right: 15px
}
    }

.product-tile_hex-color-container.icon-plus-promo {
        bottom: 50px /* spacing considers height of promo section */
    }

@media (min-width:481px) {

.product-tile_hex-color-container.icon-plus-promo {
            bottom: 60px
    }
    }

.product-price_price-reduction-wrapper--product-tile {
    bottom: 0;
    left: 5px;
    position: absolute;
    z-index: 1;
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 12px;
    color: rgb(255, 135, 114)
}

@media (min-width:481px) {

.product-price_price-reduction-wrapper--product-tile {
        font-size: 13px
}
    }

@media (min-width:481px) {

.product-price_price-reduction-wrapper--product-tile {
        bottom: 5px;
        left: 10px
}
    }

.product-price_price-reduction-wrapper--product-tile.product-price_price-reduction-wrapper--active-promos {
        top: -24.5px; /* spacing considers height of promo percentage */
        bottom: auto
    }

@media (min-width:481px) {

.product-price_price-reduction-wrapper--product-tile.product-price_price-reduction-wrapper--active-promos {
            top: -34px; /* spacing considers height of promo percentage */
            bottom: auto
    }
    }

.product-price_price-reduction-wrapper--product-tile .product-price_price-reduction {
        background-color: rgb(255, 255, 255, 0.8);
        padding: 0 5px;
    }

.product-tile_hex-color-wrapper {
    position: relative;
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-tile_hex-color--color-wheel-small, .product-tile_hex-color--color-wheel-large {
    display: block;
    width: inherit;
    height: inherit;
}

.product-tile_hex-color--color-wheel-small {
    background: url(assets/icons/few-colors-wheel.svg) no-repeat;
}

.product-tile_hex-color--color-wheel-large {
    background: url(assets/icons/many-colors-wheel.svg) no-repeat;
}

.product-tile_hex-color-value {
    position: absolute;
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73;
}

/* width of image carousel image from widescreen(specification) */

/* width of carousel from widescreen(specification) */

/* max width for small devices defined in SFCC-766 */

/* max-height of the main banner container ( specification SFCC-562 ) */

/* max-width of the main banner container ( specification SFCC-562 ) */

.pt_content #main {
    margin: 0 15px
}

@media (min-width:481px) {

.pt_content #main {
        margin: 0 30px
}
    }

.article, .banner_container, .sub-banner_container {
    clear: both;
    margin: 30px 0
}

@media (min-width:481px) {

.article, .banner_container, .sub-banner_container {
        margin: 30px 0
}
    }

.category-landing_slots {
    margin: 0 15px 30px
}

@media (min-width:481px) {

.category-landing_slots {
        margin: 0 30px 30px
}
    }

.category-landing_slot {
    margin-bottom: 30px;
}

.main-banner_container {
    position: relative;
    max-width: unset;
    width: 100vw;
    width: var(--vw);
    height: 100%;
    left: calc(-50vw + 50%);
    left: calc(var(--vw)/-2 + 50%);
    margin-bottom: 15px;
    margin-top: 0;
    font-size: 0;
    padding: 0;
    clear: both;
    overflow-x: hidden
}

.main-banner_container:not(.main-banner_mobile) {
        display: none
    }

@media (min-width:481px) {

.main-banner_container:not(.main-banner_mobile) {
            display: block
    }
    }

.banner_container {
    text-align: center;
}

.category-landing_slots .banner_container {
    margin: 30px 0;
}

.sub-banner_container, .main-banner_item {
    position: relative;
    display: flex;
}

.main-banner_item {
    flex: 0 0 100%;
}

.main-banner_slider.swiper-wrapper {
    display: flex;
    padding: 0;
}

.main-banner_container .swiper-pagination {
    display: flex;
    margin: 15px 0;
    justify-content: center;
}

.main-banner_container .swiper-pagination-bullet {
    /* 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) {
        .main-banner_container .swiper-pagination-bullet:hover {
            cursor: pointer;
        }
    }

.main-banner_container .swiper-pagination-bullet {

    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 15px;
    background: rgb(196, 196, 196)
}

.main-banner_container .swiper-pagination-bullet:last-child {
        margin-right: 0;
    }

.main-banner_container .swiper-pagination-bullet-active {
    background: rgb(255, 135, 114);
}

.sub-banner_text {
    position: absolute;
    width: 100%;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
    padding: 0 15px;
    box-sizing: border-box;
    text-align: center;
    z-index: 2;
}

.sub-banner_headline {
    font-family: 'Montserrat SemiBold', sans-serif;
    color: rgb(51, 51, 51);
    font-size: 24px;
        line-height: 36px
}

@media (min-width:481px) {

.sub-banner_headline {
        font-size: 40px;
            line-height: 56px
}
    }

.sub-banner_headline {

    margin: 0
}

@media (min-width:769px) {

.sub-banner_headline {
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%);
                transform: translate(-50%);
        bottom: 120px
}
    }

.sub-banner_buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 15px
}

@media (min-width:481px) {

.sub-banner_buttons {
        flex-direction: row
}
    }

.article_headline, .article_subheadline, .banner_headline, .banner_subheadline, .image-carousel_subheadline {
    font-weight: normal;
    text-align: center;
}

.article_subheadline, .article_paragraph, .banner_subheadline, .image-carousel_subheadline {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;

    margin: 0;
}

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

@media (min-width:481px) {

.article_headline, .banner_headline {
        font-size: 22px;
            line-height: 33px
}
    }

@media (min-width:769px) {

.article_headline, .banner_headline {
        font-size: 24px;
            line-height: 36px
}
    }

.article_headline, .banner_headline {

    margin: 5px 0 15px
}

@media (min-width:481px) {

.article_headline, .banner_headline {
        margin: 5px 0 30px
}
    }

@media (min-width:481px) {

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

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

.article_subheadline, .banner_subheadline {
        font-size: 18px;
            line-height: 27px
}
    }

.article_paragraph {
    margin-bottom: 15px
}

@media (min-width:481px) {

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

        margin-bottom: 30px
}
    }

.banner_image-container {
    position: relative;
    width: 100%;
    padding-top: 100% /* for 1:1 aspect ratio on portrait */
}

@media (min-width:481px) {

.banner_image-container {
        padding-top: 0
}
    }

.banner_image {
    position: absolute; /* for 1:1 aspect ratio on portrait */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover
}

@media (min-width:481px) {

.banner_image {
        position: relative;
        min-height: 430px; /* last height of portrait image, meant to contain text without spilling outside */
        max-height: 600px
}
    }

.main-banner_mobile {
    display: block
}

.main-banner_mobile .main-banner_item {
        max-width: 480px;
        max-height: 514px
    }

.main-banner_mobile .main-banner_item .banner_image {
            width: 100%;
            height: 100%;
            -o-object-fit: unset;
               object-fit: unset;
        }

.main-banner_mobile .main-banner_slider {
        max-height: 514px;
        max-width: 480px;
    }

@media (min-width:481px) {

.main-banner_mobile {
        display: none
}
    }

.banner_link {
    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)
}

.banner_link:hover {
            background-color: rgb(196, 196, 196);
            border-color: rgb(196, 196, 196);
            color: rgb(51, 51, 51);
        }

@media (min-width:481px) {

.banner_link {
        height: 45px
}
    }

.banner_link {
    /* 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) {
        .banner_link:hover {
            cursor: pointer;
        }
    }

.banner_link {

    display: inline-block;
    max-width: 100%;
    margin: 30px auto;
    line-height: 40px;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (min-width:481px) {

.banner_link {
        line-height: 45px
}
    }

.sub-banner_headline, .sub-banner_link {
    color: rgb(237, 237, 237);
}

.sub-banner_link {
    margin: 0 auto 15px
}

.sub-banner_link:last-child {
        margin-bottom: 0;
    }

@media (min-width:481px) {

.sub-banner_link {
        margin: 0 30px 15px 0
}

        .sub-banner_link:last-child {
            margin-right: 0;
        }
    }

.content-carousel_container {
    position: relative;
    width: 100vw;
    width: var(--vw);
    height: 100%;
    left: calc(-50vw + 50%);
    left: calc(var(--vw)/-2 + 50%);
    text-align: center;
    clear: both;
    padding: 0 0 45px;
    box-sizing: border-box
}

@media (min-width:769px) {

.content-carousel_container {
        padding: 0 30px 45px
}
    }

@media (min-width:769px) {

.pdp-main .content-carousel_container {
        width: auto;
        left: 0;
        padding: 60px 30px;
        border-top: 1px solid rgb(196, 196, 196)
}
    }

@media (min-width:769px) {

.pdp-main .recomm-prod-anchor-container > div:first-of-type, .pdp-main .recomm-prod-anchor-container > div:first-of-type .content-carousel_container {
        padding-top: 0;
        border-top: none
}
    }

@media (min-width:769px) {

.pdp-main .recomm-prod-anchor-container > div:last-of-type, .pdp-main .recomm-prod-anchor-container > div:last-of-type .content-carousel_container {
        padding-bottom: 0
}
    }

.swiper-box, .last-seen-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width:769px) {

.swiper-box {
        justify-content: flex-start
}
    }

.swiper-box .fa-arrow-light, .last-seen .fa-arrow-light {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.35s ease all
    /* 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) {
        .swiper-box .fa-arrow-light:hover, .last-seen .fa-arrow-light:hover {
            cursor: pointer
        }

            .swiper-box .fa-arrow-light:hover::before, .last-seen .fa-arrow-light:hover::before {
                color: rgb(255, 135, 114);
                border: 1px solid rgb(255, 135, 114);
            }
    }

.swiper-button-prev .fa-arrow-light {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.swiper-box .fa-arrow-light::before, .last-seen .fa-arrow-light::before {
    padding: 10px;
    border: 1px solid rgb(51, 51, 51);
    border-radius: 50%;
    color: rgb(51, 51, 51);
    display: block;
}

.swiper-box_image-carousel, .content-carousel {
    width: 100%;
}

.button-carousel_container {
    padding: 45px 0
}

@media (min-width:769px) {

.button-carousel_container {
        padding: 30px 30px 45px
}
    }

.button-carousel_container--dark {
    background: rgb(237, 237, 237);
}

.button-carousel_container--light {
    background: rgb(255, 255, 255);
}

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

@media (min-width:481px) {

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

@media (min-width:769px) {

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

.content-carousel_headline {

    margin-top: 0;
    margin-bottom: 15px;
}

.content-carousel_btn {
    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);
}

.content-carousel_btn:hover {
            background-color: rgb(196, 196, 196);
            border-color: rgb(196, 196, 196);
            color: rgb(51, 51, 51);
        }

@media (min-width:481px) {

.content-carousel_btn {
        height: 45px;
}
    }

.content-carousel_btn {

    display: inline-block;
    margin: 30px auto 0;
}

.button-carousel_btn.hidden {
    display: none;
}

.content-carousel {
    overflow: hidden;
}

.content-carousel.product-carousel.swiper-container {
    padding-right: 15px
}

@media (min-width:481px) {

.content-carousel.product-carousel.swiper-container {
        padding-right: 30px
}
    }

@media (min-width:769px) {

.content-carousel.product-carousel.swiper-container {
        margin-right: 0
}
    }

.content-carousel_list, .content-carousel_link {
    display: flex;
}

.content-carousel_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.image-carousel_list {
    align-items: center;
}

.product-carousel_list {
    padding-left: 0;
    list-style-type: none;
}

.image-carousel_link {
    position: relative;
    width: 100%;
    padding-top: 56.5%;
    max-width: calc(100vw - 60px)
}

@media (min-width:481px) {

.image-carousel_link {
        padding-top: 50%;
        max-width: 489px;
        max-height: 289px
}
    }

@media (min-width:769px) {

.image-carousel_link {
        padding-top: 0;
        width: 489px;
        height: 289px
}
    }

.image-carousel_image {
    position: absolute; /* for 16:9 aspect ratio of pictures */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    max-width: calc(100vw - 60px)
}

@media (min-width:481px) {

.image-carousel_image {
        min-width: min(calc(100vw - 90px), 489px);
        max-width: 489px;
        max-height: 289px
}
    }

@media (min-width:769px) {

.image-carousel_image {
        width: 489px;
        height: 289px
}
    }

.content-slot .image-carousel_image {
    height: 100%;
}

.product-carousel_product-tile_container {
    width: 100%;
    position: relative;
    display: flex;
    padding-bottom: 136%; /* ~ aspect ratio from specification */
    background-color: rgb(255, 135, 114);
}

.product-carousel_product-tile {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.content-carousel_list-item {
    flex: 0 0 auto;
}

.content-asset ul li.content-carousel_list-item {
    list-style: none;
}

.content-asset ul.content-carousel_list {
    line-height: unset;
    margin: unset;
    padding: unset;
}

.image-carousel_item {
    width: 100%;
    margin-bottom: 30px;
    max-width: calc(100vw - 60px)
}

.image-carousel_item.last-child {
        margin-bottom: 0;
    }

@media (min-width:481px) {

.image-carousel_item {
        max-width: 489px;
        max-height: 289px
}
    }

@media (min-width:769px) {

.image-carousel_item {
        min-width: auto;
        width: 489px;
        height: 289px
}
    }

.button-carousel_link, .content-carousel_btn {
    line-height: 40px /* line-height is needed here because it's an a element not a button element and the mixin does not provide line-height */
}

@media (min-width:481px) {

.button-carousel_link, .content-carousel_btn {
        line-height: 45px /* same explanation as above */
}
    }

.button-carousel_container--dark .button-carousel_link {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
    border-radius: 22.5px;
    height: 40px;
    padding: 0 30px;
    text-align: center;
    cursor: pointer;
    border: none;
        background-color: rgb(255, 255, 255);
}

.button-carousel_container--dark .button-carousel_link:hover {
            background-color: rgb(196, 196, 196);
        }

@media (min-width:481px) {

.button-carousel_container--dark .button-carousel_link {
        height: 45px;
}
    }

.button-carousel_container--light .button-carousel_link {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
    border-radius: 22.5px;
    height: 40px;
    padding: 0 30px;
    text-align: center;
    cursor: pointer;
    border: none;
        background-color: rgb(224, 224, 224);
}

.button-carousel_container--light .button-carousel_link:hover {
            background-color: rgb(196, 196, 196);
        }

@media (min-width:481px) {

.button-carousel_container--light .button-carousel_link {
        height: 45px;
}
    }

.swiper-box_carousel .swiper-button-prev, .swiper-box_carousel .swiper-button-next {
    display: none
}

@media (min-width:769px) {

.swiper-box_carousel .swiper-button-prev, .swiper-box_carousel .swiper-button-next {
        display: inline-block
}
    }

@media (min-width:769px) {

.swiper-box_carousel {
        max-width: 1350px;
        margin: 0 auto
}
    }

.swiper-box_carousel .swiper-button-prev {
    margin: 0 30px;
}

.swiper-box_carousel .swiper-button-next {
    margin: 0 30px;
}

.swiper-box_image-carousel .swiper-button-prev {
    margin-right: 15px;
}

.swiper-box_image-carousel .swiper-button-next {
    margin-left: 15px;
}

.button-carousel_container .fa-arrow-light {
    padding: 10px 0;
}

.swiper-box_product-carousel .swiper-button-prev {
    margin-right: 15px
}

@media (min-width:769px) {

.swiper-box_product-carousel .swiper-button-prev {
        margin-right: 30px
}
    }

.swiper-box_product-carousel .swiper-button-next {
    margin-left: 15px
}

@media (min-width:769px) {

.swiper-box_product-carousel .swiper-button-next {
        margin-left: 30px
}
    }

.button-carousel_container--dark .fa-arrow-light::before {
    border: 1px solid rgb(255, 255, 255);
    background: rgb(255, 255, 255);
}

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

    margin: 15px 0;
}

.tracking-consent-decline-status--success {
    color: rgb(76, 190, 114);
}

.tracking-consent-decline-status--error {
    color: rgb(213, 0, 0);
}

.banner-gradient::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, 0.5));
    z-index: 1;
}

.banner-gradient a {
    z-index: 2;
}

.image-carousel_btn {
    margin: 15px auto 0
}

@media (min-width:481px) {

.image-carousel_btn {
        margin: 30px auto 0
}
    }

@media (min-width:769px) {

.image-carousel_btn {
        margin: 45px auto 0
}
    }

.image-carousel_headline {
    margin-bottom: 30px
}

@media (min-width:769px) {

.image-carousel_headline {
        margin-bottom: 45px
}
    }

@media (min-width:481px) {

.image-carousel {
        min-height: 351px
}
    }

@media (min-width:769px) {

.image-carousel {
        min-height: 381px
}
    }

#omq-help-container {
    line-height: normal; /* needed for SFCC-1797 */
}

.form-row.form-row-password .field-wrapper, .form-row.password .field-wrapper {
            position: relative;
        }

.fa-password-legible, .fa-password-hidden {
    position: absolute;
    right: 0;
    margin-top: 13px;
    margin-right: 15px;
    font-size: 21px;
    cursor: pointer;
}

/*
 * This file defines the stylings for the product tiles
*/

.last-seen_list {
    display: flex;
}

.last-seen_products.swiper-container {
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

.last-seen_products .swiper-button-prev, .last-seen_products .swiper-button-next {
        display: none
    }

@media (min-width:769px) {

.last-seen_products .swiper-button-prev, .last-seen_products .swiper-button-next {
            display: inline-block
    }
    }

/*
 * This file defines the stylings for the product sliders
*/

.product-recommendations_swiper .product-tile .product-category-and-color, .product-carousel .product-tile .product-category-and-color {
    display: none
}

@media (min-width:769px) {

.product-recommendations_swiper .product-tile .product-category-and-color, .product-carousel .product-tile .product-category-and-color {
        display: block
}
    }

.tab-content.js-product-slider .tab-content_product-details_left-container {
        margin-right: 30px;
    }

.tab-content.js-product-slider .tab-content_product-details_right-container {
        margin-top: 5px
    }

@media (min-width:769px) {

.tab-content.js-product-slider .tab-content_product-details_right-container {
            margin-top: 45px
    }
    }

@media (min-width:961px) {

.tab-content.js-product-slider .tab-content_product-details_right-container {
            margin-left: 30px;
            margin-top: 0
    }
    }

.tab-content.js-product-slider .tab-content_product-details_right-container .product-number {
            margin-right: 0;
        }

.tab-content.js-product-slider .tab-content_product-details_right-container .name-link, .tab-content.js-product-slider .tab-content_product-details_right-container .wholesale-price-label, .tab-content.js-product-slider .tab-content_product-details_right-container .price-values--wholesale.price-values, .tab-content.js-product-slider .tab-content_product-details_right-container .retail-price-label, .tab-content.js-product-slider .tab-content_product-details_right-container .price-values--retail.price-values, .tab-content.js-product-slider .tab-content_product-details_right-container .price-calculation-label, .tab-content.js-product-slider .tab-content_product-details_right-container .price-values--calculation.price-values, .tab-content.js-product-slider .tab-content_product-details_right-container .shipping-limitation--title.shipping-limit-element, .tab-content.js-product-slider .tab-content_product-details_right-container .product-sales-price, .tab-content.js-product-slider .tab-content_product-details_right-container .product-standard-price {
            font-size: 13px; /* requested in SFCC-1877 and 1919 */
            line-height: 19.5px; /* requested in SFCC-1877 and 1919 */
        }

.tab-content.js-product-slider .tab-content_product-details_right-container .details-addcart, .tab-content.js-product-slider .tab-content_product-details_right-container .product-number, .tab-content.js-product-slider .tab-content_product-details_right-container .product-category-and-color, .tab-content.js-product-slider .tab-content_product-details_right-container .item-quantity_text-input, .tab-content.js-product-slider .tab-content_product-details_right-container .quantity-dropdown {
            display: none;
        }

.tab-content.js-product-slider .tab-content_product-details_right-container .product-price .price-wrapper .price-values, .tab-content.js-product-slider .tab-content_product-details_right-container .shipping-limitation--text {
            margin-left: 0;
        }

.tab-content.js-product-slider .tab-content_product-details_right-container .shipping-limitation {
            margin: 0;
        }

.tab-content.js-product-slider .tab-content_product-details_right-container .number-price-container {
            margin: 5px 0;
        }

@media (min-width:961px) {

.tab-content.js-product-slider .product-tile .product-name {
            margin-top: 10px
    }
    }

@media (min-width:769px) {

.pdp-main .tab.js-product-details-tab {
        border-bottom: none
}
    }

.pdp-main .tab.js-product-details-tab::after {
    display: none;
    content: '';
    border-bottom: 1px solid rgb(196, 196, 196);
    width: calc(100% - 15px); /* equals the width of the section minus the right margin */
    position: absolute;
    bottom: 0;
    left: 0
}

@media (min-width:769px) {

.pdp-main .tab.js-product-details-tab::after {
        display: block
}
    }

@media (min-width:961px) {

.pdp-main .tab.js-product-details-tab::after {
        width: calc(60% - 15px) /* equals the width of the section minus the right margin */
}
    }

.tab-content.tab-content--inactive.js-product-slider::after {
    display: none;
    content: '';
    border-top: 1px solid rgb(196, 196, 196);
    width: calc(40% - 15px);  /* equals the width of the section minus the left margin */
    position: absolute;
    top: -1px; /* to align this border with the one from .pdp-main .tab.js-product-details-tab::after */
    right: 0
}

@media (min-width:961px) {

.tab-content.tab-content--inactive.js-product-slider::after {
        display: block
}
    }

.pdp-main .tab.tab--hide-in-widescreen .content-carousel_container:nth-of-type(1) {
    padding: 0;
}

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider {
    width: 100%;
    flex-flow: column
}

@media (min-width:769px) {

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider {
        display: flex;
        overflow-y: unset
}
    }

@media (min-width:961px) {

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider {
        flex-flow: row
}
    }

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .tab-content_product-details_left-container {
        width: calc(60% - 45px); /* $g3 from the separating space between the tabs + the slider spaceBetween, correlates with right container */
        max-width: calc(60% - 45px)
    }

@media (min-width:769px) {

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .tab-content_product-details_left-container {
            height: 420px; /* correlates with height of .tab-content */
            overflow-y: auto
    }
    }

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .tab-content_product-details_right-container {
        overflow: auto
    }

@media (min-width:769px) {

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .tab-content_product-details_right-container {
            height: 420px; /* correlates with height of .tab-content */
            overflow-y: auto
    }
    }

@media (min-width:961px) {

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .tab-content_product-details_right-container {
            max-width: calc(40% - 45px); /* $g3 from the separating space between the tabs + the slider spaceBetween, correlates with left container */
            width: calc(40% - 45px);
            position: relative;
            overflow: unset
    }
    }

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .content-carousel_container {
        width: 100%;
        left: unset;
        padding: 0;
        border-top: none;
    }

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .grid-tile.swiper-slide, .pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .content-carousel_list-item.product-carousel_item.swiper-slide {
        max-width: 138px !important; /* needed to overwrite swiper stylings */
        min-width: 100px !important /* needed to overwrite swiper stylings */
    }

.pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .grid-tile.swiper-slide .product-tile_container, .pdp-main .tab:first-child .tab-content.tab-content--inactive.js-product-slider .content-carousel_list-item.product-carousel_item.swiper-slide .product-tile_container {
            background: rgb(255, 255, 255);
        }

.product-tile_container.slider_button-container {
    position: relative;
    border-radius: 2px;
    border-color: rgb(196, 196, 196);
    align-items: center
}

.product-tile_container.slider_button-container .slider_button-wrapper {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        margin: 0 10px;
    }

.product-tile_container.slider_button-container .slider_button {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 0.73
    }

@media (min-width:481px) {

.product-tile_container.slider_button-container .slider_button {
        font-size: 16px
    }
    }

.product-tile_container.slider_button-container .slider_button {

        display: flex;
        flex-flow: column
    }

@media (min-width:481px) {

.product-tile_container.slider_button-container .slider_button {
            font-size: 13px /* special font size requested in SFCC-1838 */
    }
    }

.product-tile_container.slider_button-container .slider_button-text {
        line-height: 19.5px; /* special line height requested in SFCC-1926 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;

        /* this is necessary so that this particular line is compiled correctly
        see https://github.com/postcss/autoprefixer/issues/776
        for further information
        */

        /* autoprefixer: off */
        -webkit-box-orient: vertical;

        /* autoprefixer: on */
        -webkit-line-clamp: 2;
    }

.js-product-slider .product-carousel_headline, .js-product-slider .product-listing-1x4_heading {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 0.73;

    line-height: 45px;
    text-align: left;
    border-bottom: 1px solid rgb(196, 196, 196);
    margin-right: 30px
}

@media (min-width:481px) {

.js-product-slider .product-carousel_headline, .js-product-slider .product-listing-1x4_heading {
        margin-top: 15px
}
    }

@media (min-width:769px) {

.js-product-slider .product-carousel_headline, .js-product-slider .product-listing-1x4_heading {
        margin: 0;
        border-bottom: none
}
    }

@media (min-width:961px) {

.js-product-slider .product-carousel_headline, .js-product-slider .product-listing-1x4_heading {
        cursor: revert;
        display: flex;
        align-items: center;
        position: absolute;
        top: -90px; /* equals the px value of elements above */
        z-index: 6;
        left: 0;
        height: 60px
}
    }

.pdp-main .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) {

.pdp-main .content-carousel_headline {
        font-size: 18px;
            line-height: 27px;
}
    }

.tab--hide-in-widescreen .product-carousel_headline, .tab--hide-in-widescreen .product-listing-1x4_heading {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

    position: absolute;
    top: -45px;
    left: 15px;
    line-height: 45px /* needed for the absolute positioning */
}

@media (min-width:481px) {

.tab--hide-in-widescreen .product-carousel_headline, .tab--hide-in-widescreen .product-listing-1x4_heading {
        left: 30px
}
    }

.tab--hide-in-widescreen.tab--hide-in-widescreen--inactive {
    height: 45px
}

.tab--hide-in-widescreen.tab--hide-in-widescreen--inactive .tab-content {
        display: unset;
        visibility: hidden;
    }

.tab--hide-in-widescreen.tab--hide-in-widescreen--inactive .product-carousel_headline, .tab--hide-in-widescreen.tab--hide-in-widescreen--inactive .product-listing-1x4_heading {
        visibility: visible;
    }

.pdp-main .tab.tab--hide-in-widescreen .tab-label {
    display: flex;
    justify-content: flex-end;
    z-index: 6;
}

.slider_button-icon.fa-arrow-light::before {
    padding: 10px 0 0;
    font-size: 15px /* font size requested in SFCC-1838 */
}

@media (min-width:481px) {

.slider_button-icon.fa-arrow-light::before {
        padding: 15px 0 0
}
    }

.slider_button-icon.fa-arrow-light::before, .slider_button-icon.fa-arrow-light:hover::before, .swiper-box .slider_button-icon.fa-arrow-light:hover::before {
    border: none;
}

.tab-content_product-details_right-container.tab-content_product-details_right-container--hide-in-mobile {
    display: none
}

.tab-content_product-details_right-container.tab-content_product-details_right-container--hide-in-mobile .product-pricing {
        flex-direction: column
    }

.tab-content_product-details_right-container.tab-content_product-details_right-container--hide-in-mobile .product-pricing .product-standard-price {
            margin-left: 0;
        }

@media (min-width:769px) {

.tab-content_product-details_right-container.tab-content_product-details_right-container--hide-in-mobile {
        display: block
}
    }

.pdp-main .tab.tab.tab--hide-in-widescreen, .pdp-main .tab.tab:nth-child(2).tab--hide-in-widescreen {
    display: block
}

@media (min-width:769px) {

.pdp-main .tab.tab.tab--hide-in-widescreen, .pdp-main .tab.tab:nth-child(2).tab--hide-in-widescreen {
        display: none;
        flex: 1
}
    }

.pdp-main .tab.tab.tab--hide-in-mobile, .pdp-main .tab.tab:nth-child(2).tab--hide-in-mobile {
    display: none;
}

.product-listing-1x4 .fa.fa-arrow-light.fa-2x, .product-carousel_container .fa.fa-arrow-light.fa-2x {
    font-size: 18px /* requested in SFCC-1838 */
}

.product-listing-1x4 .fa.fa-arrow-light.fa-2x ::before, .product-carousel_container .fa.fa-arrow-light.fa-2x ::before {
        color: rgb(119, 119, 119);
    }

.product-listing-1x4 .swiper-button-prev, .product-carousel_container .swiper-box_product-carousel .swiper-button-prev {
    margin: 0 30px 0 0;
}

.product-listing-1x4 .swiper-button-next, .product-carousel_container .swiper-box_product-carousel .swiper-button-next {
    margin: 0 0 0 30px;
}

.tab-content.js-product-slider .tab-content_product-details_right-container .swiper-button-prev {
    margin: 0 15px 0 0;
}

.tab-content.js-product-slider .tab-content_product-details_right-container .swiper-button-next {
    margin: 0 0 0 15px;
}

.pdp-main .content-carousel.product-carousel.swiper-container {
    padding-left: 15px
}

@media (min-width:481px) {

.pdp-main .content-carousel.product-carousel.swiper-container {
        padding-left: 30px
}
    }

@media (min-width:769px) {

.pdp-main .content-carousel.product-carousel.swiper-container {
        margin-left: 0
}
    }

.tab-content.js-product-slider .tab-content_product-details_right-container .content-carousel.product-carousel.swiper-container {
    padding: 0;
}

.pdp-main .product-listing-1x4 {
    padding: 0;
    margin: 0 15px 45px
}

@media (min-width:481px) {

.pdp-main .product-listing-1x4 {
        margin: 0 30px 45px
}
    }

.newsletter-component {
    background-color: rgb(255, 135, 114);
    padding: 45px 15px;
    box-sizing: border-box;
    text-align: center;
    max-width: 1050px;
    margin: 0 auto
}

@media (min-width:481px) {

.newsletter-component {
        padding: 45px 30px 60px 30px
}
    }

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

@media (min-width:481px) {

.newsletter-component_headline {
        font-size: 22px;
            line-height: 33px;
}
    }

@media (min-width:769px) {

.newsletter-component_headline {
        font-size: 24px;
            line-height: 36px;
}
    }

.newsletter-component_headline {

    color: rgb(255, 255, 255);
    margin: 0;
}

.newsletter-component.white {
    background-color: rgb(255, 255, 255)
}

.newsletter-component.white .newsletter-component_headline {
        color: rgb(51, 51, 51);
    }

.newsletter-component_text {
    margin: 30px 0
}

@media (min-width:481px) {

.newsletter-component_text {
        margin: 45px 0
}
    }

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

    margin: 0
}

@media (min-width:481px) {

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

        margin: 0
}
    }

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

    margin: 0 0 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end
}

.newsletter-registration-form .form-row label {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 13px;
    color: rgb(51, 51, 51);
        line-height: 19.5px;

        display: flex;
        font-weight: unset;
        margin-bottom: 5px;
        width: 100%;
    }

.newsletter-registration-form .form-row .error, .newsletter-registration-form .form-row .server-error {
        color: rgb(213, 0, 0);
        background-color: unset;
    }

.newsletter-registration-form .form-row.label-inline label {
        width: 100%;
    }

.newsletter-registration-form .form-row label.form-field-label--tooltip {
        width: calc(100% - 25px);
    }

.newsletter-registration-form .form-row label .error, .newsletter-registration-form .form-row label .server-error {
        color: rgb(213, 0, 0)
    }

.newsletter-registration-form .form-row label .error:not(:empty) ~ span.form-field-label, .newsletter-registration-form .form-row label .server-error:not(:empty) ~ span.form-field-label {
            display: none;
        }

.newsletter-registration-form .form-row .field-wrapper {
        margin: 0;
    }

.newsletter-registration-form .form-row .field-wrapper input[type='checkbox'] {
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 1;
        width: 20px;
        height: 20px;
    }

.newsletter-registration-form .form-row .field-wrapper input[type='email'], .newsletter-registration-form .form-row .field-wrapper input[type='tel'] {
        width: 100%;
    }

.newsletter-registration-form .form-row .field-wrapper input.error {
    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;
    }

.newsletter-registration-form .form-row .field-wrapper input.error:hover {
        border-color: rgb(119, 119, 119);
    }

.newsletter-registration-form .form-row .field-wrapper input.error {
        border-color: rgb(213, 0, 0);
    }

.newsletter-registration-form .form-row .field-wrapper.is(input.error) + label {
        color: rgb(213, 0, 0);
    }

.newsletter-registration-form .form-row .form-field-tooltip {
        float: unset;
        margin-left: unset;
        padding-top: unset;
        position: relative;
        width: 25px;
        margin-bottom: 5px
    }

.newsletter-registration-form .form-row .form-field-tooltip::before {
        content: "\f11d";
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

            position: absolute;
            font-size: 25px;
            color: rgb(119, 119, 119);
        }

.newsletter-registration-form .form-row .form-field-tooltip .tooltip {
            display: block;
            width: 25px;
            height: 25px;
        }

.newsletter-registration-form .form-row .form-caption {
        width: 100%;
    }

.newsletter-registration-form .form-row .form-caption--error {
        color: rgb(213, 0, 0);
    }

.newsletter-registration-form .form-row .form-caption.error-message {
        display: none;
    }

.newsletter-registration-form .form-row .stylefile-form-dropdown {
    position: relative;
    }

.newsletter-registration-form .form-row .stylefile-form-dropdown select {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 16px;
    color: rgb(51, 51, 51);
        line-height: 24px;

        -webkit-appearance: none;

           -moz-appearance: none;

                appearance: none;
        height: 45px;
        border-radius: 2px;
        border: 1px solid rgb(196, 196, 196);
        padding-left: 15px;
        padding-right: 36px; /* The width and spacing of the arrow symbol */
    }

.newsletter-registration-form .form-row .stylefile-form-dropdown::before {
        content: "\f108";
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

        -webkit-transform: rotate(180deg);

                transform: rotate(180deg);
        position: absolute;
        font-size: 11px;
        top: calc(50% - 5.5px);
        right: 10px;
        color: rgb(196, 196, 196);
        pointer-events: none;
    }

.newsletter-registration-form .form-row.form-row--hide-input {
        height: 19.5px; /* The line-height of the label */
        overflow: hidden
    }

.newsletter-registration-form .form-row.form-row--hide-input label span {
            display: inline-flex;
            align-items: center
        }

.newsletter-registration-form .form-row.form-row--hide-input label span::after {
    font-family: iconFont !important;
    font-style: normal;
    font-weight: normal !important;
    -webkit-font-feature-settings: normal;
            font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
        content: "\f12f";

                margin-left: 5px;
            }

.newsletter-registration-form .form-row .input-textarea {
        border: 1px solid rgb(224, 224, 224);
    }

.newsletter-registration-form .form-row.label-above label {
        width: 100%;
    }

.newsletter-registration-form .form-row.form-row--checkbox {
    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 */
    }

.newsletter-registration-form .form-row.form-row--checkbox .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;
    }

.newsletter-registration-form .form-row.form-row--checkbox {

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

.newsletter-registration-form .form-row.form-row--checkbox .stylefile-form-checkbox::after {
        width: 5px;
        height: 11px;
        border: solid rgb(255, 135, 114);
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        content: '';
        display: none;
    }

.newsletter-registration-form .form-row.form-row--checkbox {

    /* add a border on hover */
    }

.newsletter-registration-form .form-row.form-row--checkbox:hover input ~ .stylefile-form-checkbox {
            border-color: rgb(255, 135, 114);
        }

.newsletter-registration-form .form-row.form-row--checkbox {

    /* Hide the browser's default checkbox */
    }

.newsletter-registration-form .form-row.form-row--checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0

        /* Show the custom checkbox when checked */
    }

.newsletter-registration-form .form-row.form-row--checkbox input:checked ~ .stylefile-form-checkbox {
            border-color: rgb(255, 135, 114)
        }

.newsletter-registration-form .form-row.form-row--checkbox input:checked ~ .stylefile-form-checkbox::after {
                display: block;
            }

.newsletter-registration-form .form-row.form-row--checkbox input.required.error ~ .stylefile-form-checkbox {
            border-color: rgb(213, 0, 0);
        }

.newsletter-registration-form .form-row.form-row--decorate-links a {
            text-decoration: underline;
        }

.newsletter-registration-form .form-row.form-row--hide {
        display: none;
    }

.newsletter-registration-form .form-row.form-row--highlight .field-wrapper input, .newsletter-registration-form .form-row.form-row--highlight .field-wrapper select {
        border-color: rgb(255, 135, 114);
    }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']) {
    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
    }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']):hover {
        border-color: rgb(119, 119, 119);
    }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']) {

        -moz-appearance: textfield
    }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']):-moz-read-only {
            color: rgb(196, 196, 196);
            pointer-events: none
        }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']):read-only {
            color: rgb(196, 196, 196);
            pointer-events: none
        }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']):-moz-read-only:hover {
                border-color: rgb(196, 196, 196);
            }

.newsletter-registration-form .form-row .field-wrapper input:not([type='checkbox']):read-only:hover {
                border-color: rgb(196, 196, 196);
            }

.newsletter-registration-form .form-row .field-wrapper select.disabled {
        color: rgb(196, 196, 196);
        pointer-events: none
    }

.newsletter-registration-form .form-row .field-wrapper select.disabled:hover {
            border-color: rgb(196, 196, 196);
        }

.newsletter-registration-form .form-row.error {
        width: 100%;
    }

.newsletter-registration-form .form-row .input-text::-webkit-input-placeholder {
        color: rgb(196, 196, 196);
    }

.newsletter-registration-form .form-row .input-text:-ms-input-placeholder {
        color: rgb(196, 196, 196);
    }

.newsletter-registration-form .form-row .input-text::-ms-input-placeholder {
        color: rgb(196, 196, 196);
    }

.newsletter-registration-form .form-row .input-text::placeholder {
        color: rgb(196, 196, 196);
    }

.newsletter-registration-form--component .form-row label {
    display: none;
}

.newsletter-registration-form_button-wrapper {
    display: flex;
    flex-direction: column
}

@media (min-width:961px) {

.newsletter-registration-form_button-wrapper {
        display: flex;
        justify-content: space-between;
        flex-direction: row
}
    }

.newsletter-registration-form_button {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent
}

.newsletter-registration-form_button:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

@media (min-width:481px) {

.newsletter-registration-form_button {
        height: 45px;
        padding: 0 45px
}
    }

.newsletter-registration-form_button {

    /* Exact value is specified in the designs, see http://confluence/display/SFCC/Newsletter+-+Design#Newsletter-Design-Portrait */
    width: 309px
}

@media (min-width:961px) {

.newsletter-registration-form_button {
        width: 100%
}
    }

.newsletter-registration-form--component {
    max-width: 800px;
    margin: 0 auto
}

.newsletter-registration-form--component .newsletter-registration-form_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(255, 255, 255);
        border-color: rgb(255, 255, 255);
    }

.newsletter-registration-form--component .newsletter-registration-form_button:hover {
            color: rgb(51, 51, 51);
            background-color: rgb(255, 255, 255);
        }

@media (min-width:481px) {

.newsletter-registration-form--component .newsletter-registration-form_button {
        height: 45px;
    }
    }

.newsletter-component.white .newsletter-registration-form--component .newsletter-registration-form_button {
    font-family: 'Montserrat Medium', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 135, 114);
    color: rgb(255, 255, 255);
    height: 40px;
    padding: 0 15px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid transparent;
        }

.newsletter-component.white .newsletter-registration-form--component .newsletter-registration-form_button:hover {
        background-color: rgb(255, 255, 255);
        border-color: rgb(255, 135, 114);
        color: rgb(255, 135, 114);
    }

@media (min-width:481px) {

.newsletter-component.white .newsletter-registration-form--component .newsletter-registration-form_button {
        height: 45px;
        padding: 0 45px;
        }
    }

.form-row.form-row-button--newsletter-registration {
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 0
}

@media (min-width:961px) {

.form-row.form-row-button--newsletter-registration {
        margin-top: 30px;
        width: calc(50% - 15px)
}

        .form-row.form-row-button--newsletter-registration:nth-child(2) {
            margin-left: 30px;
            margin-right: 30px;
        }
    }

.form-row.form-row--newsletter-registration {
    margin: 0;
}

.form-newsletter-gender-selection, .checkout-address-fieldset.form-newsletter-gender-selection {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}

.form-newsletter-gender-selection .form-row.form-row--checkbox, .checkout-address-fieldset.form-newsletter-gender-selection .form-row.form-row--checkbox {
        margin-bottom: 0;
        margin-right: 30px;
        width: auto;
    }

.form-newsletter-gender-selection .form-row.form-row--checkbox-last, .checkout-address-fieldset.form-newsletter-gender-selection .form-row.form-row--checkbox-last {
        margin-right: 0;
    }

.form-newsletter-gender-selection--account-registration {
    text-align: left;
    margin-bottom: 15px;
}

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

    width: 100%;
    margin-bottom: 15px;
}

.legends-separation-line {
    border: 0;
    border-bottom: 1px solid rgb(196, 196, 196);
    margin-top: 30px;
    margin-bottom: 30px;
}

.legends-text-block {
    font-family: 'Montserrat Regular', sans-serif;
    font-size: 11px;
    color: rgb(51, 51, 51);
        line-height: 16.5px;

    margin-bottom: 45px;
    color: rgb(196, 196, 196)
}

.legends-text-block a {
        text-decoration: underline;
    }

/*# sourceMappingURL=critical.css.map */