.image {
    opacity: 0
}

.image--eager,
.image--loaded {
    opacity: 1;
    transition: opacity .8s ease-out .1s
}

.arrow-button__arrow-chevron {
    position: relative;
    display: inline-block;
    flex-shrink: 0
}

.arrow-button__arrow-chevron {
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.arrow-button {
    width: 36px;
    height: 36px;
    position: relative;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    transition: background .7s cubic-bezier(.19, 1, .22, 1) .05s;
    border: 1px solid #eaeaea;
    display: block
}

.arrow-button:focus {
    outline: 0
}

[data-whatinput=keyboard] .arrow-button:focus {
    outline-color: transparent
}

[data-whatinput=keyboard] .arrow-button:focus::before {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px dashed #000;
    box-sizing: border-box;
    border-radius: 50%;
    content: ""
}

@media only screen and (min-width:1024px) {
    [data-whatinput=keyboard] .arrow-button:focus::before {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px
    }
}

@media(hover:hover)and (pointer:fine) {
    .arrow-button:hover {
        background: #fff
    }
}

.arrow-button__arrow {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    color: #000
}

.arrow-button__arrow--left {
    transform: translate(-50%, -50%) rotate(180deg)
}

.arrow-button__arrow--up {
    transform: translate(-50%, -50%) rotate(270deg)
}

.arrow-button__arrow--down {
    transform: translate(-50%, -50%) rotate(90deg)
}

.arrow-button__arrow-chevron {
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    left: 0;
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
    transform-origin: center;
    transform: translate(0, -50%) rotate(-45deg)
}

@media(hover:hover)and (pointer:fine) {
    .arrow-button:hover .arrow-button__arrow-chevron {
        transform: translate(2px, -50%) rotate(-45deg)
    }
}

.arrow-button__arrow-line {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1), opacity .5s cubic-bezier(.19, 1, .22, 1);
    transform: translate(-1px, -50%) scaleX(.5);
    transform-origin: right;
    opacity: 0
}

@media(hover:hover)and (pointer:fine) {
    .arrow-button:hover .arrow-button__arrow-line {
        opacity: 1;
        transform: translate(-1px, -50%) scaleX(1);
        transition: transform .8s cubic-bezier(.19, 1, .22, 1), opacity .7s cubic-bezier(.19, 1, .22, 1)
    }
}

.product-price__amount-sr,
.product-price__compare-sr,
.product-price__discount-sr {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.product-price {
    font: 400 15px/1.15385 'Nunito Sans', sans-serif;
    display: inline-flex;
    white-space: nowrap;
    align-items: baseline
}

@media only screen and (min-width:768px) {
    .product-price {
        font: 400 13px/1.6 'Nunito Sans', sans-serif
    }
}

@media only screen and (min-width:768px)and (min-width:768px) {
    .product-price {
        font: 400 14px/1.6 'Nunito Sans', sans-serif
    }
}

.product-price__compare {
    font: 400 11px/1.35 'Nunito Sans', sans-serif;
    position: relative;
    color: #929292
}

@media only screen and (min-width:1024px) {
    .product-price__compare {
        font-size: 13px;
        line-height: 1.65
    }
}

.product-price__compare::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: translateY(-50%)
}

.product-price__amount {
    display: inline-block
}

.product-price__compare~.product-price__amount {
    margin-left: 8px
}

.product-price__discount {
    display: inline-block;
    margin-left: 4px
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.product-sustainability-label {
    font: 14px/1.55 'Nunito Sans', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: #0e855b
}

@media only screen and (min-width:768px) {
    .product-sustainability-label {
        font: 16px/1.55 'Nunito Sans', sans-serif
    }
}

@media only screen and (min-width:768px) {
    .product-sustainability-label {
        font-weight: 700
    }
}

.product-card__slider-control {
    opacity: 0;
    visibility: hidden
}

[data-visible].product-card__slider-control {
    opacity: 1;
    visibility: visible
}

.product-card__slider {
    overflow: hidden;
    position: relative
}

.product-card__slider>.flickity-viewport,
.product-card__slider>.flickity-viewport .flickity-slider {
    height: 100%
}

.product-card__slide {
    position: absolute;
    height: 100%;
    width: 100%
}

.product-card__discount-percentage-sr {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.product-card {
    position: relative
}

.product-card:focus {
    outline: 0
}

[data-whatinput=keyboard] .product-card:focus {
    display: block;
    outline-color: transparent
}

[data-whatinput=keyboard] .product-card:focus::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px dashed #000;
    box-sizing: border-box;
    border-radius: 2px;
    content: ""
}

@media only screen and (min-width:1024px) {
    [data-whatinput=keyboard] .product-card:focus::after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }
}

.product-card__slider {
    padding-bottom: 113.5%;
    height: 0;
    background: #eaeaea
}

.product-card__slide {
    opacity: 0 !important;
    transition: opacity .3s cubic-bezier(.25, .46, .45, .94)
}

.product-card__slide.is-selected {
    opacity: 1 !important;
    transition-delay: .15s
}

.product-card__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    visibility: hidden
}

.product-card--out-of-stock .product-card__image {
    opacity: .4
}

.product-card__slide.is-selected .product-card__image {
    visibility: visible
}

.product-card__video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    visibility: hidden
}

.product-card__slide.is-selected .product-card__video {
    visibility: visible
}

.product-card__slider-controls-wrapper--hide {
    display: none
}

.product-card__slider-control {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 1;
    opacity: 0;
    transition: transform .6s, opacity .5s
}

.product-card__slider-control[data-visible] {
    opacity: 0
}

@media(hover:hover)and (pointer:fine) {
    .product-card__slider--enabled .product-card__slider-control {
        display: block
    }

    .product-card:hover .product-card__slider--enabled .product-card__slider-control {
        opacity: 1;
        transform: translate(0, -50%)
    }

    .product-card__slider--enabled .product-card__slider-control:focus {
        outline: 0
    }

    [data-whatinput=keyboard] .product-card__slider--enabled .product-card__slider-control:focus {
        opacity: 1;
        transform: translate(0, -50%)
    }

    .product-card__slider--enabled .product-card__slider-control:focus {
        outline: 0
    }

    [data-whatinput=keyboard] .product-card:focus .product-card__slider--enabled .product-card__slider-control {
        opacity: 1;
        transform: translate(0, -50%)
    }
}

.product-card__slider-control--previous {
    left: 15px;
    transform: translate(-3px, -50%)
}

.product-card__slider-control--next {
    right: 15px;
    transform: translate(3px, -50%)
}

.product-card__caption {
    margin-top: 9px
}

@media only screen and (min-width:1024px) {
    .product-card__caption {
        margin-top: 14px
    }
}

.product-card__title {
    font: 14px/1.55 'Nunito Sans', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media only screen and (min-width:768px) {
    .product-card__title {
        font: 16px/1.55 'Nunito Sans', sans-serif
    }
}

.product-card__sustainability-label+.product-card__title {
    margin-top: 2px
}

@media only screen and (min-width:1024px) {
    .product-card__title {
        font-weight: 400
    }

    .product-card__sustainability-label+.product-card__title {
        margin-top: 4px
    }
}

.product-card__price {
    font: 14px 'Nunito Sans', sans-serif;
    margin-top: 4px
}

@media only screen and (min-width:768px) {
    .product-card__price {
        font: 14px 'Nunito Sans', sans-serif;
        font-weight: 700;
    }
}

@media only screen and (min-width:1024px) {
    .product-card__price {
        margin-top: 6px
    }
}

.product-card__tag {
    font: 400 11px/1.35 'Nunito Sans', sans-serif;
    white-space: nowrap;
    position: absolute;
    color: #313131;
    top: 9px;
    left: 9px
}

@media only screen and (min-width:1024px) {
    .product-card__tag {
        font-size: 13px;
        line-height: 1.65
    }
}

@media only screen and (min-width:1024px) {
    .product-card__tag {
        top: 20px;
        left: 20px
    }
}

.collection-grid-list {
    position: relative;
    opacity: 0;
    transition: opacity .75s cubic-bezier(.19, 1, .22, 1)
}

.animate-in-view.collection-grid-list {
    opacity: 1
}

.collection-grid-list__item {
    -webkit-animation: fadeIn 1.5s cubic-bezier(.19, 1, .22, 1) forwards;
    animation: fadeIn 1.5s cubic-bezier(.19, 1, .22, 1) forwards
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.collection-grid-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 16px
}

@media only screen and (min-width:768px) {
    .collection-grid-list {
        grid-gap: 24px
    }
}

@media only screen and (min-width:1024px) {
    .collection-grid-list {
        grid-gap: unset;
        display: flex;
        flex-wrap: wrap;
        margin: 0 calc(32px / 2 * -1)
    }
}

@media only screen and (min-width:1280px) {
    .collection-grid-list {
        margin: 0 calc(32px / 2 * -1)
    }
}

.collection-grid-list__item {
    width: 100%
}

@media only screen and (min-width:1024px) {
    .collection-grid-list__item {
        flex: 0 0 calc(100% / 4);
        width: auto;
        padding: 0 calc(32px / 2) 44px
    }
}

@media only screen and (min-width:1280px) {
    .collection-grid-list__item {
        padding: 0 calc(32px / 2) 44px
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.collection-switch {
    position: fixed;
    left: 50%;
    bottom: 44px;
    z-index: 5;
    transform: translate(-50%, 50%);
    transition: visibility 0s 0s, opacity .4s cubic-bezier(.19, 1, .22, 1), transform .6s cubic-bezier(.19, 1, .22, 1)
}

.collection-switch--hidden {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, calc(50% + 10px));
    transition: visibility 0s .4s, opacity .4s cubic-bezier(.19, 1, .22, 1), transform .6s cubic-bezier(.19, 1, .22, 1)
}

.collection-switch--inactive {
    display: none
}

@media only screen and (min-width:768px) {
    .collection-switch {
        bottom: 38px
    }
}

@media only screen and (min-width:1024px) {
    .collection-switch {
        bottom: 40px
    }
}

@media only screen and (min-width:1280px) {
    .collection-switch {
        bottom: 44px
    }
}

.collection-switch__list {
    display: flex;
    padding: 3px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid #eaeaea;
    position: relative
}

.collection-switch__link {
    font: 13px 'Nunito Sans', sans-serif;
    position: relative;
    z-index: 1;
    padding: 10px 14px;
    display: block;
    border-radius: 60px;
    transition: color .3s cubic-bezier(.19, 1, .22, 1)
}

@media only screen and (min-width:768px) {
    .collection-switch__link {
        padding: 10px 20px
    }
}

.collection-switch__link:focus {
    outline: 0
}

[data-whatinput=keyboard] .collection-switch__link:focus {
    outline-color: transparent
}

[data-whatinput=keyboard] .collection-switch__link:focus::after {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px dashed #000;
    box-sizing: border-box;
    border-radius: 60px;
    content: ""
}

@media only screen and (min-width:1024px) {
    [data-whatinput=keyboard] .collection-switch__link:focus::after {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px
    }
}

.collection-switch__link--active {
    background: #000;
    color: #fff
}

.collection-switch--hover-active .collection-switch__link--active {
    background: 0 0
}

.collection-switch__hover {
    position: absolute;
    top: 3px;
    left: 0;
    height: calc(100% - 6px);
    background: #000;
    border-radius: 50px;
    transition: width .3s cubic-bezier(.19, 1, .22, 1), transform .4s cubic-bezier(.19, 1, .22, 1);
    display: none
}

.collection-switch--hover-active .collection-switch__hover {
    display: block
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.back-top-button {
    width: 36px;
    height: 36px;
    position: fixed;
    left: calc(16px - 2px);
    bottom: 44px;
    z-index: 3;
    transform: translateY(calc(50% + 10px)) rotate(-90deg);
    transition: background-color .7s cubic-bezier(.19, 1, .22, 1) .05s, transform .6s cubic-bezier(.19, 1, .22, 1), opacity .4s cubic-bezier(.19, 1, .22, 1);
    opacity: 0;
    pointer-events: none
}

.back-top-button--active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(50%) rotate(-90deg);
    transition: background-color .7s cubic-bezier(.19, 1, .22, 1) .05s, opacity .4s cubic-bezier(.19, 1, .22, 1), transform .6s cubic-bezier(.19, 1, .22, 1)
}

.back-top-button--product-page {
    transform: translateY(10px) rotate(-90deg)
}

.back-top-button--product-page.back-top-button--active {
    transform: translateY(0) rotate(-90deg)
}

.back-top-button:focus {
    outline: 0
}

[data-whatinput=keyboard] .back-top-button:focus {
    opacity: 1
}

@media only screen and (min-width:768px) {
    .back-top-button {
        left: calc(24px - 3px);
        bottom: 38px
    }
}

@media only screen and (min-width:1024px) {
    .back-top-button {
        left: calc(40px - 10px);
        bottom: 40px;
        transform: translateY(calc(50% + 10px)) rotate(-90deg)
    }

    .back-top-button--active {
        transform: translateY(50%) rotate(-90deg)
    }

    .back-top-button--product-page {
        transform: translateY(50%) rotate(-180deg)
    }

    .back-top-button--product-page.back-top-button--active {
        transform: translateY(50%) rotate(-90deg)
    }
}

@media only screen and (min-width:1280px) {
    .back-top-button {
        left: calc(40px - 10px);
        bottom: 44px
    }
}

.page-collection {
    position: relative;
    z-index: 0;
    margin: 60px 16px;
    max-width: calc(var(--vw, 1vw) * 100 - 32px)
}

.page-collection:last-child {
    margin-bottom: 0
}

@media only screen and (min-width:768px) {
    .page-collection {
        margin: 75px 24px;
        max-width: calc(var(--vw, 1vw) * 100 - 48px)
    }
}

@media only screen and (min-width:1024px) {
    .page-collection {
        margin: 90px 40px;
        max-width: calc(var(--vw, 1vw) * 100 - 80px)
    }
}

@media only screen and (min-width:1280px) {
    .page-collection {
        margin: 105px 40px;
        max-width: calc(var(--vw, 1vw) * 100 - 80px)
    }
}

.page-collection {
    margin-top: 84px
}

@media only screen and (min-width:768px) {
    .page-collection {
        margin-top: 114px
    }
}

@media only screen and (min-width:1024px) {
    .page-collection {
        margin-top: 144px
    }
}

@media only screen and (min-width:1280px) {
    .page-collection {
        margin-top: 144px
    }
}

.page-collection__heading-wrapper {
    position: relative;
    opacity: 0;
    transition: opacity .75s cubic-bezier(.19, 1, .22, 1)
}

.animate-in-view.page-collection__heading-wrapper {
    opacity: 1
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.page-collection__heading-wrapper {
    max-width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px
}

@media only screen and (min-width:768px) {
    .page-collection__heading-wrapper {
        max-width: 40rem
    }
}

@media only screen and (min-width:1024px) {
    .page-collection__heading-wrapper {
        margin-bottom: 100px
    }
}

.page-collection__subheading {
    font: 500 13px/1.25 'Nunito Sans', sans-serif
}

@media only screen and (min-width:768px) {
    .page-collection__subheading {
        font: 500 14px/1.25 'Nunito Sans', sans-serif
    }
}

.page-collection__heading {
    font: 400 23px/1.25 'Nunito Sans', sans-serif;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width:768px) {
    .page-collection__heading {
        font: 400 28px/1.25 'Nunito Sans', sans-serif
    }
}

@media only screen and (min-width:768px) {
    .page-collection__heading {
        margin-top: 21px
    }
}

.page-collection__page-heading {
    font: 700 23px/1.25 'Nunito Sans',sans-serif;
    margin-bottom: 20px
}

@media only screen and (min-width:768px) {
    .page-collection__page-heading {
        font: 700 28px/1.25 'Nunito Sans',sans-serif;
    }
}

@media only screen and (min-width:768px) {
    .page-collection__page-heading {
        margin-bottom: 25px
    }
}

.page-collection__heading-wrapper+.page-collection__grid-list {
    margin-top: 70px
}

@media only screen and (min-width:1024px) {
    .page-collection__heading-wrapper+.page-collection__grid-list {
        margin-top: 100px
    }
}

/*# sourceMappingURL=/s/files/1/0505/9044/9849/t/2/assets/page_collection.css.map */