/** Shopify CDN: Minification failed
Line 6982:0 Unexpected "}"
**/
@charset "UTF-8";
/* Color custom properties */
:root {
--color-error: 219, 0, 0;
--color-error-border: 219, 0, 0;
--color-error-background: 172, 71, 71;
--duration-short: 100ms;
--duration-default: 250ms;
--duration-long: 500ms;
--color-white: 255, 255, 255;
--alpha-link: 0.5;
--color-background-white: 255, 255, 255;
--color-sale: 219, 0, 0;
}
[data-scheme="dark"] .notification-banner .popup-container,
[data-scheme="dark"] .popup-main .popup-container {
background-color: rgb(var(--color-background)) !important;
}
[data-scheme="dark"] .notification-banner .popup-heading,
[data-scheme="dark"] .popup-main .popup-heading {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="dark"] .notification-banner .popup-text,
[data-scheme="dark"] .popup-main .popup-text {
color: rgb(var(--color-foreground-secondary)) !important;
}
[data-scheme="dark"] .notification-banner .popup-text a,
[data-scheme="dark"] .popup-main .popup-text a {
color: rgb(var(--color-foreground)) !important;
}
[data-scheme="dark"] .notification-banner .popup-text a:hover,
[data-scheme="dark"] .popup-main .popup-text a:hover {
color: rgb(var(--color-accent)) !important;
}
[data-scheme="dark"] .notification-banner.popup-main-image--bottom .popup-close,
[data-scheme="dark"] .notification-banner.popup-main-image--left .popup-close,
[data-scheme="dark"] .notification-banner.popup-main--no-image .popup-close,
[data-scheme="dark"]
.notification-banner.notification-banner-image--bottom
.popup-close,
[data-scheme="dark"]
.notification-banner.notification-banner-image--left
.popup-close,
[data-scheme="dark"]
.notification-banner.notification-banner--no-image
.popup-close,
[data-scheme="dark"] .popup-main.popup-main-image--bottom .popup-close,
[data-scheme="dark"] .popup-main.popup-main-image--left .popup-close,
[data-scheme="dark"] .popup-main.popup-main--no-image .popup-close,
[data-scheme="dark"] .popup-main.notification-banner-image--bottom .popup-close,
[data-scheme="dark"] .popup-main.notification-banner-image--left .popup-close,
[data-scheme="dark"] .popup-main.notification-banner--no-image .popup-close {
color: rgb(var(--color-foreground-secondary)) !important;
}
[data-scheme="dark"]
.notification-banner.popup-main-image--bottom
.popup-close:hover,
[data-scheme="dark"]
.notification-banner.popup-main-image--left
.popup-close:hover,
[data-scheme="dark"]
.notification-banner.popup-main--no-image
.popup-close:hover,
[data-scheme="dark"]
.notification-banner.notification-banner-image--bottom
.popup-close:hover,
[data-scheme="dark"]
.notification-banner.notification-banner-image--left
.popup-close:hover,
[data-scheme="dark"]
.notification-banner.notification-banner--no-image
.popup-close:hover,
[data-scheme="dark"] .popup-main.popup-main-image--bottom .popup-close:hover,
[data-scheme="dark"] .popup-main.popup-main-image--left .popup-close:hover,
[data-scheme="dark"] .popup-main.popup-main--no-image .popup-close:hover,
[data-scheme="dark"]
.popup-main.notification-banner-image--bottom
.popup-close:hover,
[data-scheme="dark"]
.popup-main.notification-banner-image--left
.popup-close:hover,
[data-scheme="dark"]
.popup-main.notification-banner--no-image
.popup-close:hover {
color: rgb(var(--color-button)) !important;
}
[data-scheme="dark"] .notification-banner .list-social__item .icon,
[data-scheme="dark"] .popup-main .list-social__item .icon {
color: rgb(var(--color-social)) !important;
}
[data-scheme="dark"] .notification-banner .list-social__item:hover .icon,
[data-scheme="dark"] .popup-main .list-social__item:hover .icon {
color: rgb(var(--color-accent)) !important;
}
[data-scheme="dark"] .countdown__block {
border-top: 2px solid rgb(var(--color-foreground-title));
}
[data-scheme="dark"] .swiper-button-next,
[data-scheme="dark"] .swiper-button-prev {
background-color: #282828;
}
[data-scheme="dark"] .card__link {
background-color: rgb(var(--color-background-card));
color: rgb(var(--color-social));
}
[data-scheme="dark"] .image-parallax.color-background-3 {
--color-button: 0, 0, 0;
--color-button-text: 255, 255, 255;
}
[data-scheme="dark"] .article-card-column {
--color-background: 33, 33, 33;
}
[data-scheme="dark"] .article.color-background-2 .article-card-row__tag {
--color-background: 33, 33, 33;
}
[data-scheme="dark"] .cart-items .cart-item {
--color-background: 33, 33, 33;
}
[data-scheme="dark"] .swiper-buttons.swiper-buttons--secondary .icon {
color: rgb(var(--color-background));
}
[data-scheme="dark"]
.image-parallax__button.button--secondary
.icon-button-arrow {
color: rgb(var(--color-background));
}
[data-scheme="dark"]
.steps-section
+ .testimonials-section
> .color-background-2,
[data-scheme="dark"] .about-section.color-background-2 {
--color-background: 28, 28, 28;
}
[data-scheme="dark"] .featured-products__products-item .card__inner,
[data-scheme="dark"] .card__link::after,
[data-scheme="dark"] .card-horizontal__link,
[data-scheme="dark"] .card-horizontal__link::after,
[data-scheme="dark"]
.collection-product-list
.collection-product-card--extended
.card__link::after {
background-color: rgb(33, 33, 33);
}
[data-scheme="dark"] .collection-product-list .card-information__wrapper > *,
[data-scheme="dark"]
.collection-results--products
.card-information__wrapper
> *,
[data-scheme="dark"]
.product-recommendations__product
.card-information__wrapper
> *,
[data-scheme="dark"] .search-modal .card-horizontal__information > *,
[data-scheme="dark"]
.search-modal
.card-horizontal-wrapper
.price--on-sale
.price-item--regular,
[data-scheme="dark"] .search-modal .card-horizontal-wrapper .price__regular {
color: rgb(240, 240, 240);
}
[data-scheme="dark"]
.search-modal
.card-horizontal-wrapper
.price--on-sale
.price-item--regular {
text-decoration-color: rgb(240, 240, 240);
}
[data-scheme="dark"]
.collection-product-list
.card-wrapper:not(.card-wrapper-page),
[data-scheme="dark"] .collection-results--products .card-wrapper,
[data-scheme="dark"] .product-recommendations__product .card-wrapper,
[data-scheme="dark"] .search-modal .search__items-item,
[data-scheme="dark"] .search-modal .card-horizontal-wrapper {
background-color: #212121;
}
[data-scheme="dark"] .product-slider .swiper-buttons:before,
[data-scheme="dark"] .featured-products .swiper-buttons:before {
background-color: rgb(var(--color-button), 0.7);
}
[data-scheme="dark"] .product-slider .swiper-button-next,
[data-scheme="dark"] .product-slider .swiper-button-prev,
[data-scheme="dark"] .product-slider .swiper-pagination,
[data-scheme="dark"] .featured-products .swiper-button-next,
[data-scheme="dark"] .featured-products .swiper-button-prev,
[data-scheme="dark"] .featured-products .swiper-pagination {
color: rgb(var(--color-base-solid-button-labels));
}
[data-scheme="dark"]
.featured-products__products-list--horizontal.featured-products__products-list--placeholder
.card-wrapper,
[data-scheme="dark"]
.featured-products__products-list
.featured-products__products-item--horizontal
.card-horizontal-wrapper {
border-color: rgb(223, 223, 223);
}
[data-scheme="dark"] .featured-products__button .button--primary {
background-color: rgb(var(--color-button));
color: rgb(var(--color-base-solid-button-labels));
}
[data-scheme="dark"] .featured-products__button .button--secondary {
background-color: rgb(var(--color-base-outline-button-labels));
color: rgb(var(--color-secondary-button-labels));
}
[data-scheme="dark"] .cards-grid__button.tag {
color: rgb(240, 240, 240) !important;
background-color: rgb(33, 33, 33) !important;
}
[data-scheme="dark"] .product-promo__overlay {
opacity: 0.4;
}
[data-scheme="dark"] .cards-grid__item--none .cards-grid__overlay {
position: absolute;
inset: 0;
opacity: 0.8;
background-color: rgb(var(--color-overlay));
}
[data-scheme="dark"] .cards-grid__item--none .cards-grid__subheading,
[data-scheme="dark"] .cards-grid__item--none .cards-grid__heading,
[data-scheme="dark"] .cards-grid__item--none .cards-grid__text,
[data-scheme="dark"] .cards-grid__item--none .cards-grid__label,
[data-scheme="dark"] .cards-grid__item--none .cards-grid__price {
color: #ffffff;
}
[data-scheme="dark"] .brands__image--dark {
display: block;
}
[data-scheme="dark"] .brands__image--dark + .brands__image--light {
display: none;
}
[data-scheme="dark"] .cards-grid__icon-wrapper {
display: none;
}
[data-scheme="dark"]
.cards-grid__icon-wrapper
+ .cards-grid__icon-wrapper--dark {
display: flex;
}
[data-scheme="dark"] .footer .link-hover-line-outer > span::after {
background-color: #282828;
}
[data-scheme="dark"] .footer.color-background-1 .button--primary,
[data-scheme="dark"] .footer.color-background-2 .button--primary,
[data-scheme="dark"] .footer.color-background-3 .button--primary,
[data-scheme="dark"] .footer.color-background-4 .button--primary,
[data-scheme="dark"] .footer.color-background-5 .button--primary,
[data-scheme="dark"] .footer.color-inverse .button--primary {
color: #282828;
}
[data-scheme="dark"] .card-wrapper .media .placeholder-svg {
fill: rgb(240, 240, 240);
}
[data-scheme="dark"] .header__toggle-scheme-switch {
background-color: #f7f7f7;
color: #282828;
}
[data-scheme="dark"] .header__toggle-scheme-circle {
background-color: #282828;
}
[data-scheme="dark"] .product .advantage img:first-child:nth-last-child(2),
[data-scheme="dark"] .product .advantage svg:first-child:nth-last-child(2) {
display: none;
}
[data-scheme="dark"]
.product
.advantage
img:first-child:nth-last-child(2)
~ svg,
[data-scheme="dark"]
.product
.advantage
img:first-child:nth-last-child(2)
~ img,
[data-scheme="dark"]
.product
.advantage
svg:first-child:nth-last-child(2)
~ svg,
[data-scheme="dark"]
.product
.advantage
svg:first-child:nth-last-child(2)
~ img {
display: block;
}
[data-scheme="dark"] .mega-menu__item--dark .mega-menu__item-heading,
[data-scheme="dark"] .mega-menu__item--dark .mega-menu__item-description,
[data-scheme="dark"] .mega-menu__item--dark .mega-menu__item-text,
[data-scheme="dark"] .mega-menu__item--dark .mega-menu__item-text--accent {
color: #282828;
}
[data-scheme="dark"] .search__block--dark .search__heading,
[data-scheme="dark"] .search__block--dark .search__text,
[data-scheme="dark"] .search__block--dark .search__text--accent {
color: #282828;
}
[data-scheme="dark"]
.subtitle:not(.product-promo__subheading):not(.cards-grid__subheading):not(
.card__quickview-text
) {
color: rgb(240, 240, 240) !important;
}
[data-scheme="dark"]
.subtitle:not(.product-promo__subheading):not(.cards-grid__subheading):not(
.card__quickview-text
).subtitle--dot {
color: rgb(240, 240, 240) !important;
}
[data-scheme="dark"]
.subtitle:not(.product-promo__subheading):not(.cards-grid__subheading):not(
.card__quickview-text
).subtitle--dot
span {
background-color: rgb(240, 240, 240) !important;
}
[data-scheme="dark"] .promo-banner {
background-color: rgb(var(--color-button-hover)) !important;
}
[data-scheme="dark"] .promo-banner__text p {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="dark"] .promo-banner__text a {
color: #ffd875 !important;
}
[data-scheme="dark"] .promo-banner--expanded .promo-banner__title {
color: #ffd875 !important;
}
[data-scheme="dark"] .promo-banner--expanded .promo-banner__text {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="dark"] .promo-banner--expanded .promo-banner__text a {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="dark"]
.multicolumn-list__wrapper
.multicolumn-card__image-wrapper
.multicolumn-card__image--light {
display: none;
}
[data-scheme="dark"]
.multicolumn-list__wrapper
.multicolumn-card__image-wrapper
.multicolumn-card__image--dark {
display: block;
}
[data-scheme="dark"]
.multicolumn-list__wrapper
.multicolumn-card__image-wrapper
.multicolumn-card__image:only-child {
display: block !important;
}
[data-scheme="dark"]
.featured-product__wrapper.color-background-2
.product__button-prev,
[data-scheme="dark"]
.featured-product__wrapper.color-background-2
.product__button-next {
background-color: rgb(240, 240, 240);
}
[data-scheme="dark"]
.article-template__header--overlay
.article-template__title,
[data-scheme="dark"]
.article-template__header--overlay
.article-template__tag
a,
[data-scheme="dark"]
.article-template__header--overlay
.article-template__meta
span {
color: rgb(240, 240, 240);
}
[data-scheme="dark"] .video-section__play-button {
background-color: rgb(240, 240, 240);
}
[data-scheme="dark"] .product-slider__subheading,
[data-scheme="dark"] .pst__subheading {
color: rgb(230, 230, 230) !important;
}
[data-scheme="dark"] .slideshow .swiper-button-next,
[data-scheme="dark"] .slideshow .swiper-button-prev {
background-color: #282828;
}
[data-scheme="dark"] .slideshow .swiper-button-next .icon path,
[data-scheme="dark"] .slideshow .swiper-button-prev .icon path {
fill: #fff;
}
@media (prefers-color-scheme: dark) {
[data-scheme="auto"] .notification-banner .popup-container,
[data-scheme="auto"] .popup-main .popup-container {
background-color: rgb(var(--color-background)) !important;
}
[data-scheme="auto"] .notification-banner .popup-heading,
[data-scheme="auto"] .popup-main .popup-heading {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="auto"] .notification-banner .popup-text,
[data-scheme="auto"] .popup-main .popup-text {
color: rgb(var(--color-foreground-secondary)) !important;
}
[data-scheme="auto"] .notification-banner .popup-text a,
[data-scheme="auto"] .popup-main .popup-text a {
color: rgb(var(--color-foreground)) !important;
}
[data-scheme="auto"] .notification-banner .popup-text a:hover,
[data-scheme="auto"] .popup-main .popup-text a:hover {
color: rgb(var(--color-accent)) !important;
}
[data-scheme="auto"]
.notification-banner.popup-main-image--bottom
.popup-close,
[data-scheme="auto"] .notification-banner.popup-main-image--left .popup-close,
[data-scheme="auto"] .notification-banner.popup-main--no-image .popup-close,
[data-scheme="auto"]
.notification-banner.notification-banner-image--bottom
.popup-close,
[data-scheme="auto"]
.notification-banner.notification-banner-image--left
.popup-close,
[data-scheme="auto"]
.notification-banner.notification-banner--no-image
.popup-close,
[data-scheme="auto"] .popup-main.popup-main-image--bottom .popup-close,
[data-scheme="auto"] .popup-main.popup-main-image--left .popup-close,
[data-scheme="auto"] .popup-main.popup-main--no-image .popup-close,
[data-scheme="auto"]
.popup-main.notification-banner-image--bottom
.popup-close,
[data-scheme="auto"] .popup-main.notification-banner-image--left .popup-close,
[data-scheme="auto"] .popup-main.notification-banner--no-image .popup-close {
color: rgb(var(--color-foreground-secondary)) !important;
}
[data-scheme="auto"]
.notification-banner.popup-main-image--bottom
.popup-close:hover,
[data-scheme="auto"]
.notification-banner.popup-main-image--left
.popup-close:hover,
[data-scheme="auto"]
.notification-banner.popup-main--no-image
.popup-close:hover,
[data-scheme="auto"]
.notification-banner.notification-banner-image--bottom
.popup-close:hover,
[data-scheme="auto"]
.notification-banner.notification-banner-image--left
.popup-close:hover,
[data-scheme="auto"]
.notification-banner.notification-banner--no-image
.popup-close:hover,
[data-scheme="auto"] .popup-main.popup-main-image--bottom .popup-close:hover,
[data-scheme="auto"] .popup-main.popup-main-image--left .popup-close:hover,
[data-scheme="auto"] .popup-main.popup-main--no-image .popup-close:hover,
[data-scheme="auto"]
.popup-main.notification-banner-image--bottom
.popup-close:hover,
[data-scheme="auto"]
.popup-main.notification-banner-image--left
.popup-close:hover,
[data-scheme="auto"]
.popup-main.notification-banner--no-image
.popup-close:hover {
color: rgb(var(--color-button)) !important;
}
[data-scheme="auto"] .notification-banner .list-social__item .icon,
[data-scheme="auto"] .popup-main .list-social__item .icon {
color: rgb(var(--color-social)) !important;
}
[data-scheme="auto"] .notification-banner .list-social__item:hover .icon,
[data-scheme="auto"] .popup-main .list-social__item:hover .icon {
color: rgb(var(--color-accent)) !important;
}
[data-scheme="auto"] .image-parallax.color-background-3 {
--color-button: 0, 0, 0;
--color-button-text: 255, 255, 255;
}
[data-scheme="auto"] .swiper-buttons.swiper-buttons--secondary .icon {
color: rgb(var(--color-background));
}
[data-scheme="auto"]
.image-parallax__button.button--secondary
.icon-button-arrow {
color: rgb(var(--color-background));
}
[data-scheme="auto"]
.steps-section
+ .testimonials-section
> .color-background-2,
[data-scheme="auto"] .about-section.color-background-2 {
--color-background: 28, 28, 28;
}
[data-scheme="auto"] .featured-products__products-item .card__inner,
[data-scheme="auto"] .card__link::after,
[data-scheme="auto"] .card-horizontal__link,
[data-scheme="auto"] .card-horizontal__link::after,
[data-scheme="auto"]
.collection-product-list
.collection-product-card--extended
.card__link::after {
background-color: rgb(var(--color-background));
}
[data-scheme="auto"] .collection-product-list .card-information__wrapper > *,
[data-scheme="auto"]
.collection-results--products
.card-information__wrapper
> *,
[data-scheme="auto"]
.product-recommendations__product
.card-information__wrapper
> *,
[data-scheme="auto"] .search-modal .card-horizontal__information > *,
[data-scheme="auto"]
.search-modal
.card-horizontal-wrapper
.price--on-sale
.price-item--regular,
[data-scheme="auto"] .search-modal .card-horizontal-wrapper .price__regular {
color: rgb(240, 240, 240);
}
[data-scheme="auto"]
.search-modal
.card-horizontal-wrapper
.price--on-sale
.price-item--regular {
text-decoration-color: rgb(240, 240, 240);
}
[data-scheme="auto"]
.collection-product-list
.card-wrapper:not(.card-wrapper-page),
[data-scheme="auto"] .collection-results--products .card-wrapper,
[data-scheme="auto"] .product-recommendations__product .card-wrapper,
[data-scheme="auto"] .search-modal .search__items-item,
[data-scheme="auto"] .search-modal .card-horizontal-wrapper {
background-color: rgb(33, 33, 33);
}
[data-scheme="auto"] .product-slider .swiper-buttons:before,
[data-scheme="auto"] .featured-products .swiper-buttons:before {
background-color: rgb(var(--color-button), 0.7);
}
[data-scheme="auto"] .product-slider .swiper-button-next,
[data-scheme="auto"] .product-slider .swiper-button-prev,
[data-scheme="auto"] .product-slider .swiper-pagination,
[data-scheme="auto"] .featured-products .swiper-button-next,
[data-scheme="auto"] .featured-products .swiper-button-prev,
[data-scheme="auto"] .featured-products .swiper-pagination {
color: rgb(var(--color-base-solid-button-labels));
}
[data-scheme="auto"]
.featured-products__products-list--horizontal.featured-products__products-list--placeholder
.card-wrapper,
[data-scheme="auto"]
.featured-products__products-list
.featured-products__products-item--horizontal
.card-horizontal-wrapper {
border-color: rgb(223, 223, 223);
}
[data-scheme="auto"] .featured-products__button .button--primary {
background-color: rgb(var(--color-button));
color: rgb(var(--color-base-solid-button-labels));
}
[data-scheme="auto"] .featured-products__button .button--secondary {
background-color: rgb(var(--color-base-outline-button-labels));
color: rgb(var(--color-secondary-button-labels));
}
[data-scheme="auto"] .footer .link-hover-line-outer > span::after {
background-color: #282828;
}
[data-scheme="auto"] .footer.color-background-1 .button--primary,
[data-scheme="auto"] .footer.color-background-2 .button--primary,
[data-scheme="auto"] .footer.color-background-3 .button--primary,
[data-scheme="auto"] .footer.color-background-4 .button--primary,
[data-scheme="auto"] .footer.color-background-5 .button--primary,
[data-scheme="auto"] .footer.color-inverse .button--primary {
color: #282828;
}
[data-scheme="auto"] .product-promo__overlay {
opacity: 0.4;
}
[data-scheme="auto"] .cards-grid__item--none .cards-grid__overlay {
position: absolute;
inset: 0;
opacity: 0.8;
background-color: rgb(var(--color-overlay));
}
[data-scheme="auto"] .cards-grid__item--none .cards-grid__subheading,
[data-scheme="auto"] .cards-grid__item--none .cards-grid__heading,
[data-scheme="auto"] .cards-grid__item--none .cards-grid__text,
[data-scheme="auto"] .cards-grid__item--none .cards-grid__label,
[data-scheme="auto"] .cards-grid__item--none .cards-grid__price {
color: #ffffff;
}
[data-scheme="auto"] .cards-grid__button.tag {
color: rgb(240, 240, 240) !important;
background-color: rgb(33, 33, 33) !important;
}
[data-scheme="auto"] .brands__image--dark {
display: block;
}
[data-scheme="auto"] .brands__image--dark + .brands__image--light {
display: none;
}
[data-scheme="auto"] .cards-grid__icon-wrapper {
display: none;
}
[data-scheme="auto"]
.cards-grid__icon-wrapper
+ .cards-grid__icon-wrapper--dark {
display: flex;
}
[data-scheme="auto"] .product .advantage img:first-child:nth-last-child(2),
[data-scheme="auto"] .product .advantage svg:first-child:nth-last-child(2) {
display: none;
}
[data-scheme="auto"]
.product
.advantage
img:first-child:nth-last-child(2)
~ svg,
[data-scheme="auto"]
.product
.advantage
img:first-child:nth-last-child(2)
~ img,
[data-scheme="auto"]
.product
.advantage
svg:first-child:nth-last-child(2)
~ svg,
[data-scheme="auto"]
.product
.advantage
svg:first-child:nth-last-child(2)
~ img {
display: block;
}
[data-scheme="auto"] .mega-menu__item--dark .mega-menu__item-heading,
[data-scheme="auto"] .mega-menu__item--dark .mega-menu__item-description,
[data-scheme="auto"] .mega-menu__item--dark .mega-menu__item-text,
[data-scheme="auto"] .mega-menu__item--dark .mega-menu__item-text--accent {
color: #282828;
}
[data-scheme="auto"] .search__block--dark .search__heading,
[data-scheme="auto"] .search__block--dark .search__text,
[data-scheme="auto"] .search__block--dark .search__text--accent {
color: #282828;
}
[data-scheme="auto"]
.subtitle:not(.product-promo__subheading):not(.cards-grid__button.tag):not(
.card__quickview-text
) {
color: rgb(240, 240, 240) !important;
}
[data-scheme="auto"]
.subtitle:not(.product-promo__subheading):not(.cards-grid__button.tag):not(
.card__quickview-text
).subtitle--dot {
color: rgb(240, 240, 240) !important;
}
[data-scheme="auto"]
.subtitle:not(.product-promo__subheading):not(.cards-grid__button.tag):not(
.card__quickview-text
).subtitle--dot
span {
background-color: rgb(240, 240, 240) !important;
}
[data-scheme="auto"] .blog__posts--grid .article .article-card-row__tag {
background-color: #040404 !important;
}
[data-scheme="auto"] .header__toggle-scheme-circle {
background-color: #282828;
}
[data-scheme="auto"] .promo-banner {
background-color: rgb(var(--color-button-hover)) !important;
}
[data-scheme="auto"] .promo-banner__text p {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="auto"] .promo-banner__text a {
color: #ffd875 !important;
}
[data-scheme="auto"] .promo-banner--expanded .promo-banner__title {
color: #ffd875 !important;
}
[data-scheme="auto"] .promo-banner--expanded .promo-banner__text {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="auto"] .promo-banner--expanded .promo-banner__text a {
color: rgb(var(--color-foreground-title)) !important;
}
[data-scheme="auto"]
.featured-product__wrapper.color-background-2
.product__button-prev,
[data-scheme="auto"]
.featured-product__wrapper.color-background-2
.product__button-next {
background-color: rgb(240, 240, 240);
}
[data-scheme="auto"]
.article-template__header--overlay
.article-template__title,
[data-scheme="auto"]
.article-template__header--overlay
.article-template__tag
a,
[data-scheme="auto"]
.article-template__header--overlay
.article-template__meta
span {
color: rgb(240, 240, 240);
}
[data-scheme="auto"] .video-section__play-button {
background-color: rgb(240, 240, 240);
}
[data-scheme="auto"]
.multicolumn-list__wrapper
.multicolumn-card__image--light {
display: none;
}
[data-scheme="auto"]
.multicolumn-list__wrapper
.multicolumn-card__image-wrapper
.multicolumn-card__image--dark {
display: block;
}
[data-scheme="auto"]
.multicolumn-list__wrapper
.multicolumn-card__image-wrapper
.multicolumn-card__image:only-child {
display: block !important;
}
[data-scheme="auto"] .product-slider__subheading,
[data-scheme="auto"] .pst__subheading {
color: rgb(230, 230, 230) !important;
}
[data-scheme="auto"] .slideshow .swiper-button-next,
[data-scheme="auto"] .slideshow .swiper-button-prev {
background-color: #282828;
}
[data-scheme="auto"] .slideshow .swiper-button-next .icon path,
[data-scheme="auto"] .slideshow .swiper-button-prev .icon path {
fill: #fff;
}
[data-scheme="auto"] .card-wrapper .media .placeholder-svg {
color: rgb(240, 240, 240);
fill: rgb(240, 240, 240);
}
.featured-product .product__info-wrapper {
background-color: rgb(var(--color-background));
}
.swiper-buttons.swiper-buttons--secondary .icon {
color: rgb(var(--color-background));
}
.image-parallax__button.button--secondary .icon-button-arrow {
color: rgb(var(--color-background));
}
.header__toggle-scheme-switch {
background-color: #f7f7f7;
color: #282828;
}
.header__toggle-scheme-circle {
background-color: #282828;
}
}
.container,
.container-fluid,
.container-xxl,
.shopify-policy__container-xxl,
.container-xl,
.shopify-policy__container-xl,
.container-lg,
.shopify-policy__container-lg,
.container-md,
.shopify-policy__container-md,
.container-sm,
.shopify-policy__container-sm,
.shopify-policy__container {
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 1200px) {
.container,
.container-fluid,
.container-xxl,
.shopify-policy__container-xxl,
.container-xl,
.shopify-policy__container-xl,
.container-lg,
.shopify-policy__container-lg,
.container-md,
.shopify-policy__container-md,
.container-sm,
.shopify-policy__container-sm,
.shopify-policy__container {
padding-right: 4rem;
padding-left: 4rem;
}
}
@media (min-width: 576px) {
.container-sm,
.shopify-policy__container-sm,
.container,
.shopify-policy__container {
max-width: 100%;
}
}
@media (min-width: 750px) {
.container-md,
.shopify-policy__container-md,
.container-sm,
.shopify-policy__container-sm,
.container,
.shopify-policy__container {
max-width: 100%;
}
}
@media (min-width: 990px) {
.container-lg,
.shopify-policy__container-lg,
.container-md,
.shopify-policy__container-md,
.container-sm,
.shopify-policy__container-sm,
.container,
.shopify-policy__container {
max-width: 100%;
}
}
@media (min-width: 1200px) {
.container-xl,
.shopify-policy__container-xl,
.container-lg,
.shopify-policy__container-lg,
.container-md,
.shopify-policy__container-md,
.container-sm,
.shopify-policy__container-sm,
.container,
.shopify-policy__container {
max-width: 100%;
}
}
@media (min-width: 1360px) {
.container-xxl,
.shopify-policy__container-xxl,
.container-xl,
.shopify-policy__container-xl,
.container-lg,
.shopify-policy__container-lg,
.container-md,
.shopify-policy__container-md,
.container-sm,
.shopify-policy__container-sm,
.container,
.shopify-policy__container {
max-width: 1920px;
}
}
/* Base */
.no-js:not(html) {
display: none !important;
}
html.no-js .no-js:not(html) {
display: block !important;
}
.no-js-inline {
display: none !important;
}
html.no-js .no-js-inline {
display: inline-block !important;
}
.no-js-flex {
display: none !important;
}
html.no-js .no-js-flex {
display: flex !important;
}
html.js .js-hidden {
display: none !important;
}
html.no-js .no-js-block {
display: block !important;
}
html.no-js .no-js-hidden {
display: none !important;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
.page-width {
max-width: 139.6rem;
margin: 0 auto;
padding: 0 2.5rem;
}
@media screen and (min-width: 750px) {
.page-width {
padding: 0 5rem;
}
.page-width--narrow {
padding: 0 9rem;
}
}
@media screen and (min-width: 990px) {
.page-width--narrow {
max-width: 86rem;
padding: 0;
margin: 0 auto;
}
}
.spaced-section {
position: relative;
background-color: rgb(var(--color-background));
}
.section-border-top {
padding-top: 5rem;
}
.section-border-top__inner {
position: relative;
}
.section-border-top__inner:before {
content: "";
position: absolute;
width: calc(100% - 8rem);
height: 1px;
left: 50%;
transform: translateX(-50%);
top: -5rem;
background-color: rgba(var(--color-foreground), 0.2);
}
body,
.color-background-1,
.color-background-2,
.color-background-3,
.color-background-4,
.color-background-5,
.color-inverse {
color: rgb(var(--color-foreground));
background-color: rgb(var(--color-background));
line-height: var(--font-body-line-height);
}
.background-secondary {
background-color: rgba(var(--color-foreground), 0.04);
padding: 4rem 0 5rem;
}
@media screen and (min-width: 750px) {
.background-secondary {
padding: 6rem 0 5rem;
}
}
.page-margin,
.shopify-challenge__container {
margin: 7rem auto;
}
.rte-width {
max-width: 82rem;
margin: 0 auto 2rem;
}
.list-unstyled {
margin: 0;
padding: 0;
list-style: none;
}
.hidden {
display: none !important;
}
.visually-hidden {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
word-wrap: normal !important;
}
.visually-hidden--inline {
margin: 0;
height: 1em;
}
.visibility-hidden {
visibility: hidden;
}
.skip-to-content-link:focus {
z-index: 9999;
position: inherit;
overflow: auto;
width: auto;
height: auto;
clip: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-hidden-search {
overflow: hidden;
}
/* base-details-summary */
summary {
cursor: pointer;
list-style: none;
position: relative;
}
summary .icon-caret {
position: absolute;
height: 2rem;
right: 0;
top: calc(50% - 1rem);
}
summary::-webkit-details-marker {
display: none;
}
.disclosure-has-popup {
position: relative;
}
.disclosure-has-popup[open] > summary::before {
position: fixed;
inset: 0;
z-index: 2;
display: block;
cursor: default;
content: " ";
background: transparent;
}
.disclosure-has-popup > summary::before {
display: none;
}
.disclosure-has-popup[open] > summary + * {
z-index: 100;
}
/* Animation */
@keyframes translate {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-40rem, 0, 0);
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes link-hover {
0% {
width: 100%;
}
50% {
width: 0;
}
100% {
width: 100%;
}
}
[data-scheme="dark"] .icon-account-order-none circle + path {
stroke: rgb(var(--color-background));
}
/* Light header on dark bg */
.header-wrapper--overlay .header__menu-item {
transition: none;
}
body:not(.body--hidden)
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas-toggle
.header__offcanvas-toggle-link {
color: #fff;
}
body:not(.body--hidden)
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
> * {
color: #fff;
}
@media (prefers-color-scheme: light) {
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo--overlay,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo--overlay {
display: block;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo:not(.header__heading-logo--overlay),
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo:not(.header__heading-logo--overlay) {
display: none;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo:only-child,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo:only-child {
display: block !important;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo--overlay {
display: none;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo:not(.header__heading-logo--overlay) {
display: block;
}
.icon-pack__image-wrapper img:first-child {
display: block;
}
.icon-pack__image-wrapper img:last-child {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.header__heading-logo:first-child:nth-last-child(2) {
display: none;
}
.header__heading-logo:first-child:nth-last-child(2) ~ .header__heading-logo {
display: block;
}
.header__heading-logo:first-child:nth-last-child(1) {
display: none;
}
.header__heading-logo:only-child {
display: block !important;
}
.icon-pack__image-wrapper img:first-child {
display: none;
}
.icon-pack__image-wrapper img:last-child {
display: block;
}
}
[data-scheme="light"] .header__heading-logo:first-child:nth-last-child(2) {
display: block;
}
[data-scheme="light"]
.header__heading-logo:first-child:nth-last-child(2)
~ .header__heading-logo {
display: none;
}
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo--overlay,
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo--overlay {
display: block;
}
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo:not(.header__heading-logo--overlay),
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo:not(.header__heading-logo--overlay) {
display: none;
}
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo:only-child,
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo:only-child {
display: block !important;
}
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo--overlay {
display: none;
}
[data-scheme="light"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo:not(.header__heading-logo--overlay) {
display: block;
}
[data-scheme="light"] .icon-pack__image-wrapper img:first-child {
display: block;
}
[data-scheme="light"] .icon-pack__image-wrapper img:last-child {
display: none;
}
[data-scheme="dark"] .header__heading-logo:first-child:nth-last-child(2) {
display: none;
}
[data-scheme="dark"]
.header__heading-logo:first-child:nth-last-child(2)
~ .header__heading-logo {
display: block;
}
[data-scheme="dark"] .header__heading-logo:first-child:nth-last-child(1) {
display: none;
}
[data-scheme="dark"] .header__heading-logo:only-child {
display: block !important;
}
[data-scheme="dark"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo--overlay {
display: block;
}
[data-scheme="dark"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo:not(.header__heading-logo--overlay) {
display: none;
}
[data-scheme="dark"] .icon-pack__image-wrapper img:first-child {
display: none;
}
[data-scheme="dark"] .icon-pack__image-wrapper img:last-child {
display: block;
}
@media (prefers-color-scheme: dark) {
[data-scheme="auto"] .header__heading-logo:first-child:nth-last-child(2) {
display: none;
}
[data-scheme="auto"]
.header__heading-logo:first-child:nth-last-child(2)
~ .header__heading-logo {
display: block;
}
[data-scheme="auto"] .header__heading-logo:first-child:nth-last-child(1) {
display: none;
}
[data-scheme="auto"] .header__heading-logo:only-child {
display: block !important;
}
}
@media (prefers-color-scheme: light) {
[data-scheme="auto"] .header__heading-logo:first-child:nth-last-child(2) {
display: block;
}
[data-scheme="auto"]
.header__heading-logo:first-child:nth-last-child(2)
~ .header__heading-logo {
display: none;
}
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo--overlay,
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo--overlay {
display: block;
}
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo:not(.header__heading-logo--overlay),
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo:not(.header__heading-logo--overlay) {
display: none;
}
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading
.header__heading-logo:only-child,
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__heading-link
.header__heading-logo:only-child {
display: block !important;
}
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo--overlay {
display: none;
}
[data-scheme="auto"]
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__offcanvas
.header__heading-logo:not(.header__heading-logo--overlay) {
display: block;
}
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay {
background-color: transparent;
transition: background var(--duration-default);
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
> *,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.disclosure__button {
background-color: transparent;
transition: none;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__menu-item:not(.header__submenu .header__menu-item),
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__icon
.header__icon-name,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.currency-country,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__icon
.icon-hamburger {
color: #fff;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__menu-item
.header__active-menu-item {
color: #fff;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__menu-item:not(.header__submenu .header__menu-item)
> span:not(.header__active-menu-item)::after,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__icon
.header__icon-name::before,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.currency-country::after,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.link-hover-line-outer:not(.header__submenu .header__menu-item):not(
.disclosure__link
)
span::after {
background-color: #fff;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__menu-item
span:not(.header__active-menu-item)
> span:after,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__icon-name
span:after,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__localization
.localization-selector.link:hover
.icon-caret,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.link--text.header__icon:hover
.icon,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__search:hover
.modal__toggle-open,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__modal-close-button
.icon {
color: #fff;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__toggle-scheme-item {
color: white;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__toggle-scheme-item:hover
.icon {
color: white;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.icon-search,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__icon--account
> .icon-account,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.icon-cart {
color: white;
transition: none;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.icon.icon-close:not(.header__modal-close-button .icon):not(
.header__offcanvas-toggle-link .icon
) {
color: rgb(var(--color-button));
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__menu-item
.icon-caret {
color: white;
transition: none;
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.header__submenu
.icon.icon-caret {
color: rgb(var(--color-button));
transition: transform var(--duration-default);
}
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.list-menu--inline
span.header__active-menu-item--border,
#shopify-section-header:not(.shopify-section-header-sticky.animate)
.header-wrapper--overlay
.list-menu--inline
.header__menu-item--border:hover
span:not(.header__active-menu-item) {
border-color: #fff;
}
/* Reviews override */
#shopify-product-reviews .spr-container,
#shopify-product-reviews .spr-review,
#shopify-product-reviews .spr-form {
border: 0;
}
#shopify-product-reviews .spr-container {
padding: 0;
}
#shopify-product-reviews .spr-summary-caption {
font-size: 1.3rem;
color: rgb(var(--color-foreground));
}
#shopify-product-reviews .spr-header-title {
display: none;
}
#shopify-product-reviews .spr-review-header {
display: flex;
flex-direction: column;
}
#shopify-product-reviews .spr-summary {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
text-align: center;
margin-bottom: 0;
}
@media (min-width: 750px) {
#shopify-product-reviews .spr-summary {
text-align: left;
justify-content: flex-start;
}
}
#shopify-product-reviews .spr-summary::before {
display: none;
}
#shopify-product-reviews .spr-summary .spr-starrating {
display: none;
}
#shopify-product-reviews .spr-summary .spr-summary-caption {
display: none;
}
#shopify-product-reviews .spr-summary-actions {
width: 100%;
}
#shopify-product-reviews .spr-summary-actions-newreview,
#shopify-product-reviews .spr-button {
float: unset;
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 10rem;
min-height: 4.3rem;
padding: 0 3rem;
margin-top: 0;
font-family: var(--font-button-family);
font-weight: var(--font-button-weight);
font-style: var(--font-button-style);
text-transform: var(--font-button-text-transform);
letter-spacing: calc(var(--font-button-letter-spacing) * 0.1);
position: relative;
box-sizing: border-box;
text-decoration: none;
border: 0;
border-radius: var(--border-radius-button);
transition: var(--duration-default);
font-size: var(--button-size);
line-height: 1;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: rgba(var(--color-button));
color: rgb(var(--color-button-text));
}
#shopify-product-reviews .spr-summary-actions-newreview:hover,
#shopify-product-reviews .spr-button:hover {
background-color: rgb(var(--color-button-hover));
color: rgb(var(--color-button-text-hover));
}
#shopify-product-reviews .spr-reviews {
column-count: 1;
column-gap: 0.8rem;
margin-top: 0;
}
#shopify-product-reviews .spr-review {
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
break-inside: avoid;
border-bottom: 1px solid rgb(var(--color-border));
}
#shopify-product-reviews .spr-review:first-child {
margin-top: 0;
}
#shopify-product-reviews .spr-review:last-child {
padding-bottom: 3rem;
}
#shopify-product-reviews .spr-review-header-title {
margin-bottom: 0.8rem;
order: 1;
}
#shopify-product-reviews .spr-review-content {
margin-bottom: 1.2rem;
}
#shopify-product-reviews .spr-review-header-starratings {
margin-bottom: 0.5rem;
width: 100%;
}
#shopify-product-reviews .spr-review-content-body {
font-size: 1.4rem;
line-height: 2.1rem;
color: rgb(var(--color-foreground-title));
}
@media (min-width: 750px) {
#shopify-product-reviews .spr-review-content-body {
font-size: 1.6rem;
}
}
#shopify-product-reviews .spr-review-header-byline {
font-size: 1.2rem;
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
color: rgb(var(--color-foreground-secondary));
margin-bottom: 0.8rem;
}
#shopify-product-reviews .spr-review-header-byline strong:first-child::after {
content: "";
width: 1px;
height: 1.2rem;
background-color: rgb(var(--color-border));
display: inline-block;
margin-left: 0.8rem;
margin-right: 0.5rem;
}
#shopify-product-reviews .spr-review-reportreview {
font-size: 1.3rem;
line-height: 2rem;
color: rgb(var(--color-foreground-secondary));
text-decoration-color: inherit;
transition: var(--duration-default);
}
#shopify-product-reviews .spr-review-reportreview:hover {
color: rgb(var(--color-accent));
}
#shopify-product-reviews .spr-form {
padding: 0;
}
#shopify-product-reviews .new-review-form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
position: relative;
}
@media (min-width: 1200px) {
#shopify-product-reviews .new-review-form {
align-items: flex-end;
}
}
#shopify-product-reviews .spr-form-title {
width: 100%;
font-size: 1.2rem;
letter-spacing: 0.96px;
text-transform: uppercase;
}
#shopify-product-reviews .spr-review-footer {
margin-bottom: 0 !important;
}
#shopify-product-reviews fieldset,
#shopify-product-reviews .spr-form-message-success {
width: 100%;
}
#shopify-product-reviews .spr-form-message-success {
text-align: left;
}
#shopify-product-reviews .spr-form-contact {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
#shopify-product-reviews .spr-form-contact::before,
#shopify-product-reviews .spr-form-contact::after {
display: none;
}
#shopify-product-reviews .spr-form-contact > * {
width: 100%;
margin-bottom: 0;
}
@media (min-width: 1200px) {
#shopify-product-reviews .spr-form-contact > * {
width: calc(50% - 0.4rem);
}
}
#shopify-product-reviews .spr-form-label {
display: none;
}
#shopify-product-reviews
.spr-form-input:not(.spr-starrating):not(.spr-form-input-textarea) {
width: 100%;
min-height: 5.7rem;
padding: 1.6rem 2rem;
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-size: 1.6rem;
font-weight: 400;
-webkit-appearance: none;
appearance: none;
color: rgb(var(--color-foreground-title));
background-color: rgb(var(--color-background-input));
border: 0.2rem solid rgb(var(--color-border-input));
border-radius: var(--border-radius-button);
box-sizing: border-box;
transition: border var(--duration-default);
overflow: hidden;
position: relative;
}
#shopify-product-reviews
.spr-form-input:not(.spr-starrating):not(
.spr-form-input-textarea
)::placeholder {
font-size: 1.6rem;
font-weight: 400;
color: rgb(var(--color-foreground-secondary));
}
#shopify-product-reviews
.spr-form-input:not(.spr-starrating):not(.spr-form-input-textarea):hover:not(
:focus
) {
border-color: rgb(var(--color-accent));
}
#shopify-product-reviews
.spr-form-input:not(.spr-starrating):not(.spr-form-input-textarea):focus {
border-color: rgb(var(--color-accent));
outline: none;
}
#shopify-product-reviews
.spr-form-input:not(.spr-starrating):not(
.spr-form-input-textarea
):focus::placeholder {
opacity: 0;
}
#shopify-product-reviews .spr-form-review {
display: flex;
flex-direction: column;
}
#shopify-product-reviews .spr-form-review .spr-icon {
font-size: 112%;
}
#shopify-product-reviews .spr-form-review .spr-icon + .spr-icon {
margin-left: 0.4rem;
}
#shopify-product-reviews .spr-form-review-rating {
order: 1;
margin-bottom: 1.6rem;
}
#shopify-product-reviews .spr-form-review-title {
margin-bottom: 0.8rem;
}
#shopify-product-reviews .spr-form-review-body {
margin-bottom: 1.6rem;
}
#shopify-product-reviews .spr-form-review-body > .spr-form-input {
height: 12.2rem !important;
}
#shopify-product-reviews .spr-form-review-body > .spr-form-input textarea {
border: 0;
padding: 1.6rem 2rem;
resize: none;
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-size: 1.6rem;
font-weight: 400;
color: rgb(var(--color-foreground-title));
background-color: rgb(var(--color-background-input));
position: absolute;
inset: 0;
}
#shopify-product-reviews
.spr-form-review-body
> .spr-form-input
textarea::placeholder {
font-size: 1.6rem;
font-weight: 400;
color: rgb(var(--color-foreground-secondary));
}
#shopify-product-reviews
.spr-form-review-body
> .spr-form-input
textarea:focus {
border: 0;
outline: none;
}
#shopify-product-reviews
.spr-form-review-body
> .spr-form-input
textarea:focus::placeholder {
opacity: 0;
}
#shopify-product-reviews .spr-form-actions input[type="submit"] {
margin-top: 0;
}
#shopify-product-reviews .spr-form-message-error {
border: 0.2rem solid rgb(var(--color-button));
border-radius: var(--border-radius-button);
color: rgb(var(--color-foreground-title));
background-color: rgb(var(--color-background-card));
}
#shopify-product-reviews .spr-pagination {
border: 0;
}
#shopify-product-reviews .spr-pagination > div {
display: flex;
align-items: center;
justify-content: center;
gap: 1.6rem;
}
#shopify-product-reviews .spr-pagination-next,
#shopify-product-reviews .spr-pagination-prev {
position: relative;
right: unset;
left: unset;
}
#shopify-product-reviews .spr-pagination-next a,
#shopify-product-reviews .spr-pagination-prev a {
font-size: 1.6rem;
font-weight: var(--font-heading-card-weight);
color: rgb(var(--color-foreground));
text-decoration: none;
transition: var(--duration-default);
}
#shopify-product-reviews .spr-pagination-next a:hover,
#shopify-product-reviews .spr-pagination-prev a:hover {
opacity: 0.5;
}
#shopify-product-reviews .spr-pagination-page {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
padding: 0;
border-radius: 0.5rem;
transition: background-color var(--duration-default);
}
#shopify-product-reviews .spr-pagination-page a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 1.6rem;
font-weight: var(--font-heading-card-weight);
color: rgb(var(--color-foreground));
text-decoration: none;
}
#shopify-product-reviews .spr-pagination-page:not(.is-active):hover,
#shopify-product-reviews .spr-pagination-page:focus {
background-color: rgb(var(--color-base-background-2));
}
#shopify-product-reviews .spr-pagination-page.is-active {
color: rgb(var(--color-background-input));
background-color: rgb(var(--color-button));
}
#shopify-product-reviews .spr-pagination-page:not(.is-active):hover {
background-color: rgb(var(--color-base-background-2));
}
#shopify-product-reviews .spr-icon {
display: inline-flex;
width: 1em;
height: 1em;
font-size: 100%;
}
#shopify-product-reviews .spr-icon + .spr-icon {
margin-left: 0.2rem;
}
#shopify-product-reviews .spr-icon::before {
color: rgba(var(--color-button));
font-size: 100%;
}
.icon-pack__image-wrapper {
overflow: hidden;
}
.icon-pack__image-wrapper--icon {
display: flex;
align-items: center;
justify-content: center;
}
.icon-pack__image-wrapper--medium {
width: 3.8rem;
height: 3.8rem;
}
.icon-pack__image-wrapper--medium svg {
transform: scale(1.6);
}
.icon-pack__image-wrapper img {
display: block;
width: 100%;
height: 100%;
transition: transform var(--duration-default);
transform-origin: 50% 50%;
}
.icon-pack__image-wrapper img:only-child {
display: block !important;
}
.icon-pack__image-wrapper-img--small {
width: 2rem;
height: 2rem;
}
.icon-pack__image-wrapper-img--medium {
width: 3.2rem;
height: 3.2rem;
}
.item-sale {
color: rgb(var(--color-sale));
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
letter-spacing: calc(var(--font-heading-letter-spacing) * 0.1);
color: rgb(var(--color-foreground-title));
line-height: var(--font-heading-line-height);
text-transform: var(--font-heading-text-transform);
word-wrap: break-word;
max-width: 100%;
}
.h0 {
font-size: 50px;
}
@media only screen and (min-width: 750px) {
.h0 {
font-size: 70px;
}
}
h1,
.h1 {
font-size: calc(var(--font-heading-h1-scale) * 3rem);
}
@media only screen and (min-width: 750px) {
h1,
.h1 {
font-size: calc(var(--font-heading-h1-scale) * 3.6rem);
}
}
@media only screen and (min-width: 1600px) {
h1,
.h1 {
font-size: calc(var(--font-heading-h1-scale) * 4rem);
}
}
h2,
.h2 {
font-size: calc(var(--font-heading-h2-scale) * 2.5rem);
}
@media only screen and (min-width: 1600px) {
h2,
.h2 {
font-size: calc(var(--font-heading-h2-scale) * 3rem);
}
}
h3,
.h3 {
font-size: calc(var(--font-heading-h3-scale) * 2.2rem);
}
h4,
.h4 {
font-size: calc(var(--font-heading-h4-scale) * 2rem);
}
h5,
.h5 {
font-size: 1.6rem;
}
h6,
.h6 {
font-size: 1.4rem;
}
a {
color: rgba(var(--color-foreground));
text-decoration-color: rgb(var(--color-button));
}
blockquote {
padding: 2rem 3rem;
font-size: 1.6rem;
color: rgba(var(--color-foreground));
line-height: 1.3;
border-top: 0.3rem solid rgba(var(--color-foreground));
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.3);
}
@media screen and (min-width: 750px) {
blockquote {
padding: 2.4rem 10rem;
font-size: 2rem;
}
}
table:not([class]) {
table-layout: fixed;
border-collapse: collapse;
font-size: 1.4rem;
border-style: hidden;
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
/* draws the table border */
}
table:not([class]) td,
table:not([class]) th {
padding: 1em;
border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}
a:empty,
ul:empty,
dl:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
display: none;
}
hr {
display: block;
width: 100%;
height: 0.1rem;
background-color: rgb(var(--color-border));
border: none;
}
.caption {
font-size: 1rem;
color: rgb(var(--color-foreground-secondary));
letter-spacing: 0.07rem;
line-height: 1.7;
}
@media screen and (min-width: 750px) {
.caption {
font-size: 1.2rem;
}
}
.caption-with-letter-spacing {
margin-top: 1rem;
font-size: 1.2rem;
}
.caption-large,
.form__label {
text-transform: uppercase;
font-weight: 500;
color: rgba(var(--color-foreground));
}
@media screen and (max-width: 749px) {
.small-hide {
display: none;
}
}
@media screen and (max-width: 749px) {
.small-hide {
display: none !important;
}
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.medium-hide {
display: none !important;
}
}
@media screen and (min-width: 990px) {
.large-up-hide {
display: none !important;
}
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.uppercase {
text-transform: uppercase;
}
.light {
opacity: 0.7;
}
.link {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 0.3rem;
color: rgb(var(--color-link));
background-color: transparent;
font-size: 1.5rem;
transition: var(--duration-default);
}
.link--text {
color: rgb(var(--color-foreground));
transition: var(--duration-default);
}
.circle-divider::after {
content: "•";
margin: 0 8px 0 8px;
}
.circle-divider:last-of-type::after {
display: none;
}
.line-divider {
align-items: center;
justify-content: center;
}
.line-divider::after {
content: "";
display: inline-flex;
width: 16px;
height: 1px;
margin: 0 8px 0 8px;
background: rgba(var(--color-foreground), 0.6);
}
.line-divider_vertical::after {
width: 1px;
height: 13px;
}
.line-divider:last-of-type::after {
display: none;
}
.full-unstyled-link {
text-decoration: none;
color: currentColor;
display: block;
}
.placeholder {
background-color: rgba(var(--color-foreground), 0.07);
color: rgba(var(--color-foreground), 0.55);
fill: rgba(var(--color-foreground));
}
details > * {
box-sizing: border-box;
}
.break {
word-break: break-word;
}
@media (prefers-reduced-motion) {
.motion-reduce {
transition: none !important;
}
}
.underlined-link {
color: rgba(var(--color-link), var(--alpha-link));
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.1rem;
transition: text-decoration-thickness ease 100ms;
}
.underlined-link:hover {
color: rgb(var(--color-link));
text-decoration-thickness: 0.2rem;
}
.link-hover-line {
position: relative;
padding: 0.2rem 0;
display: inline-flex;
}
.link-hover-line::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
content: "";
width: 0;
height: 0.1rem;
background-color: currentColor;
transition: width var(--duration-default);
}
.link-hover-line:hover::after {
width: 100%;
}
.link-hover-line-outer > span {
position: relative;
}
.link-hover-line-outer > span::after {
position: absolute;
bottom: 0.2rem;
left: 0;
right: 0;
content: "";
width: 0;
height: 0.1rem;
background-color: rgb(var(--color-button));
transition: width var(--duration-default);
}
.link-hover-line-outer:hover > span::after {
width: 100%;
}
.link-hover-arrow svg {
opacity: 0;
transition: opacity var(--duration-default);
}
.link-hover-arrow:hover svg {
opacity: 1;
}
/* Component-title */
.title {
margin: 3rem 0 2rem;
}
.title-wrapper {
margin-bottom: 2.4rem;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
}
.title-wrapper h2 {
margin: 0;
}
.title--primary {
margin: 4rem 0;
}
.title--page {
text-align: left;
}
.title--section > * {
margin: 0;
}
.title--section-mt-none {
margin: 0 0 3rem 0;
}
.title--section-m-none {
margin: 0;
}
@media screen and (min-width: 1200px) {
.title {
margin: 5rem 0 3rem;
}
.title--primary {
margin: 2rem 0;
}
}
.page-header {
margin-top: 0;
margin-bottom: 1.6rem;
text-align: center;
}
@media screen and (min-width: 990px) {
.page-header {
margin-bottom: 4.2rem;
}
}
.page-header .title--page {
margin-bottom: 0;
margin-top: 0;
}
.page-header .title--page:not(:first-child) {
margin-bottom: 1.5rem;
}
.color-background-3 .subtitle,
.color-background-4 .subtitle {
color: rgb(var(--color-foreground-title)) !important;
}
.subtitle {
font-family: var(--font-subtitle-family);
font-weight: var(--font-subtitle-weight);
font-style: var(--font-subtitle-style);
letter-spacing: calc(var(--font-subtitle-letter-spacing) * 0.1);
text-transform: var(--font-subtitle-text-transform);
color: rgb(var(--color-foreground-secondary));
font-size: calc(var(--font-subtitle-scale) * 1rem);
margin-bottom: 0.8rem;
}
.subtitle--dot {
position: relative;
padding-left: 1.6rem;
line-height: 1;
}
.subtitle--dot span {
position: absolute;
top: 50%;
left: 0;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek .grid__item {
width: calc(25% - 3rem);
}
.slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
width: calc(33.33% - 2.6666666667rem);
}
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
width: calc(50% - 2rem);
}
.slider--tablet.grid--peek .grid__item:first-of-type {
padding-left: 1.5rem;
}
.slider--tablet.grid--peek .grid__item:last-of-type {
padding-right: 1.5rem;
}
}
@media screen and (max-width: 989px) {
.slider--tablet.grid--peek {
margin: 0;
width: 100%;
}
.slider--tablet.grid--peek .grid__item {
box-sizing: content-box;
margin: 0;
}
}
@keyframes progress {
0% {
stroke-dashoffset: 75;
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.swiper-pagination .swiper-bullet {
width: 3rem;
height: 3rem;
position: relative;
cursor: pointer;
}
.swiper-pagination .swiper-bullet:hover::after {
width: 1rem;
height: 1rem;
background-color: rgba(var(--color-button));
}
.swiper-pagination .swiper-bullet::before,
.swiper-pagination .swiper-bullet:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.swiper-pagination .swiper-bullet::after {
width: 0.6rem;
height: 0.6rem;
background-color: rgb(var(--color-border));
border-radius: 50%;
transition: var(--duration-default);
}
.swiper-pagination .swiper-bullet svg {
position: relative;
z-index: 4;
}
.swiper-pagination .swiper-bullet--svg-animation svg {
transform: rotate(-90deg);
}
.swiper-pagination .swiper-bullet--svg-animation .svg__circle-inner {
stroke: red;
fill: transparent;
transition: all 0.7s ease;
}
.swiper-pagination .swiper-bullet-active .svg__circle {
stroke: rgba(var(--color-button));
stroke-dasharray: 75;
stroke-dashoffset: 0;
animation-name: progress;
animation-fill-mode: backwards;
animation-timing-function: linear;
}
.swiper-pagination .swiper-bullet-active::after {
width: 1rem;
height: 1rem;
background-color: rgba(var(--color-button));
}
.swiper-pagination .swiper-bullet-active::before {
width: 2.8rem;
height: 2.8rem;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='28' height='28' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle opacity='0.5' cx='15' cy='15' r='14' stroke='%23E0E3EE' stroke-width='2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
position: static;
margin: 0;
padding: 0;
background-color: transparent;
border: none;
}
.swiper-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.1rem;
}
.swiper-button-next,
.swiper-button-prev {
position: static;
flex: none;
width: 4rem;
height: 4rem;
background-color: #fff;
opacity: 0.8;
border-radius: 100%;
transition: var(--duration-default);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.5;
cursor: default;
}
.swiper-button-next.swiper-button-disabled .icon,
.swiper-button-prev.swiper-button-disabled .icon {
opacity: 0.5;
}
@media (max-width: 750px) {
.swiper-button-next,
.swiper-button-prev {
width: 3rem;
height: 3rem;
}
}
@media (max-width: 750px) {
.swiper-button-next .icon,
.swiper-button-prev .icon {
width: 1rem;
height: 1rem;
}
}
.swiper-button-next:not(.swiper-button-disabled):hover,
.swiper-button-prev:not(.swiper-button-disabled):hover {
transform: translateY(-50%) scale(1.05);
}
.swiper-button-next:not(.swiper-button-disabled):hover .icon,
.swiper-button-prev:not(.swiper-button-disabled):hover .icon {
transform: scale(1.05);
}
.swiper-button-next::after,
.swiper-button-prev::after {
display: none;
}
.swiper-button-next .icon,
.swiper-button-prev .icon {
flex: none;
width: 0.778rem;
height: 1.273rem;
color: rgb(var(--color-foreground));
transition: var(--duration-default);
}
.swiper-buttons {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2.4rem;
padding-inline: 1rem;
min-width: 15rem;
height: 6rem;
font-size: 1.3rem;
font-family: var(--font-button-family);
font-weight: var(--font-button-weight);
font-style: var(--font-button-style);
text-transform: var(--font-button-text-transform);
letter-spacing: calc(var(--font-button-letter-spacing) * 0.1);
line-height: 1;
color: rgb(var(--color-button-text));
text-decoration: none;
background-color: rgba(var(--color-button));
border-radius: 6rem;
border: 0;
z-index: 1;
}
.swiper-buttons .swiper-pagination {
color: rgb(var(--color-button-text));
}
.swiper-buttons.swiper-buttons--secondary {
background-color: rgb(var(--color-background));
}
.swiper-buttons.swiper-buttons--secondary .swiper-pagination,
.swiper-buttons.swiper-buttons--secondary .icon {
color: rgb(var(--color-foreground-title));
}
.button-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 4rem;
}
@media screen and (min-width: 576px) {
.button-wrapper {
margin-top: 6.4rem;
}
}
.button-wrapper .button svg {
width: 2rem;
height: 2rem;
}
/* Media */
.media {
width: 100%;
height: 100%;
display: block;
background-color: rgba(var(--color-foreground), 0.3);
position: relative;
overflow: hidden;
}
.media--transparent {
background-color: transparent;
}
.media > *:not(.zoom, .deferred-media__poster-button, .card__link),
.media model-viewer,
.card-wrapper__link--overlay:empty {
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.media > img {
object-fit: cover;
object-position: center center;
transition: opacity var(--duration-long), transform var(--duration-long);
}
.media--square {
padding-bottom: 100%;
}
.media--portrait {
padding-bottom: 114.2%;
}
.media--landscape {
padding-bottom: 66.6%;
}
.media--cropped {
padding-bottom: 56%;
}
.media--16-9 {
padding-bottom: 56.25%;
}
.media--circle {
padding-bottom: 100%;
border-radius: 50%;
}
.media.media--hover-effect > img + img {
opacity: 0;
}
@media screen and (min-width: 990px) {
.media--cropped {
padding-bottom: 63%;
}
}
deferred-media {
display: block;
}
/* Button */
/* Button - default */
.button,
.customer .button {
font-family: var(--font-button-family);
font-weight: var(--font-button-weight);
font-style: var(--font-button-style);
text-transform: var(--font-button-text-transform);
letter-spacing: calc(var(--font-button-letter-spacing) * 0.1);
position: relative;
box-sizing: border-box;
text-decoration: none;
border: 0;
border-radius: var(--border-radius-button);
transition: var(--duration-default);
font-size: var(--button-size);
line-height: 1;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
.button--primary,
.button--secondary,
.button--tertiary,
.customer .button--primary,
.customer .button--secondary,
.customer .button--tertiary {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 10rem;
min-height: 4.5rem;
padding: 0 3rem;
}
.button--primary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:first-child,
.button--secondary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:first-child,
.button--tertiary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:first-child,
.customer
.button--primary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:first-child,
.customer
.button--secondary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:first-child,
.customer
.button--tertiary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:first-child {
transform: translateY(-130%) translateZ(0);
}
.button--primary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:nth-of-type(2),
.button--secondary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:nth-of-type(2),
.button--tertiary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:nth-of-type(2),
.customer
.button--primary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:nth-of-type(2),
.customer
.button--secondary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:nth-of-type(2),
.customer
.button--tertiary:not([disabled]):not([aria-disabled="true"]):hover
> span
span:nth-of-type(2) {
transform: translateY(0) translateZ(0);
}
.button--primary > span,
.button--secondary > span,
.button--tertiary > span,
.customer .button--primary > span,
.customer .button--secondary > span,
.customer .button--tertiary > span {
position: relative;
overflow: hidden;
}
.button--primary > span span,
.button--secondary > span span,
.button--tertiary > span span,
.customer .button--primary > span span,
.customer .button--secondary > span span,
.customer .button--tertiary > span span {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.button--primary > span span:nth-of-type(2),
.button--secondary > span span:nth-of-type(2),
.button--tertiary > span span:nth-of-type(2),
.customer .button--primary > span span:nth-of-type(2),
.customer .button--secondary > span span:nth-of-type(2),
.customer .button--tertiary > span span:nth-of-type(2) {
position: absolute;
left: 0;
transform: translateY(130%) translateZ(0);
}
.button--primary,
.customer .button--primary {
background-color: rgb(var(--color-button));
color: rgb(var(--color-button-text));
}
.button--primary:hover,
.customer .button--primary:hover {
background-color: rgb(var(--color-button-hover));
color: rgb(var(--color-button-text-hover));
}
.button--secondary,
.customer .button--secondary {
background-color: rgb(var(--color-button-secondary));
color: rgb(var(--color-button-secondary-text));
}
.button--secondary:hover,
.customer .button--secondary:hover {
color: rgb(var(--color-button-secondary-text-hover));
background-color: rgb(var(--color-button-secondary-hover));
}
.button--tertiary,
.customer .button--tertiary {
background-color: transparent;
color: rgb(var(--color-button-tertiary-text));
border: 0.1rem solid rgb(var(--color-button-tertiary));
}
.button--tertiary:hover,
.customer .button--tertiary:hover {
color: rgb(var(--color-button-tertiary-text-hover));
background-color: rgb(var(--color-button-tertiary-hover));
border-color: rgb(var(--color-button-tertiary-hover));
}
.button .icon-button-arrow,
.customer .button .icon-button-arrow {
width: 2.4rem;
height: 2.3rem;
transform: translateX(-1rem);
transition: transform var(--duration-default), opacity var(--duration-default),
margin-left var(--duration-default);
}
.button--simple-move,
.customer .button--simple-move {
display: flex;
align-items: center;
padding: 0;
min-width: auto;
min-height: auto;
background: none;
box-shadow: none;
font-family: var(--font-subtitle-family);
font-weight: var(--font-subtitle-weight);
font-style: var(--font-subtitle-style);
text-transform: none;
letter-spacing: -0.02em;
text-decoration: none;
font-size: 1.4rem;
line-height: var(--font-heading-line-height);
color: rgb(var(--color-foreground-secondary));
overflow: visible;
}
.button--simple-move:after,
.customer .button--simple-move:after {
display: none;
}
.button--simple-move span:first-child,
.customer .button--simple-move span:first-child {
position: relative;
word-break: break-word;
padding: 0.2rem 0;
}
.button--simple-move span:first-child::after,
.customer .button--simple-move span:first-child::after {
position: absolute;
bottom: -0.3rem;
left: 0;
right: 0;
content: "";
width: 0;
height: 0.1rem;
background-color: rgb(var(--color-foreground-secondary));
transition: width var(--duration-default);
}
.button--simple-move span:last-child,
.customer .button--simple-move span:last-child {
display: flex;
align-items: center;
padding: 0.2rem 0;
}
.button--simple-move .icon,
.customer .button--simple-move .icon {
margin-left: 0.6rem;
color: rgb(var(--color-foreground-secondary));
}
.button--simple-move:hover span:first-child::after,
.customer .button--simple-move:hover span:first-child::after {
width: 100%;
}
.button--tag,
.customer .button--tag {
display: flex;
align-items: center;
}
.button--tag a,
.customer .button--tag a {
display: flex;
align-items: center;
text-decoration: none;
}
.button--tag a:last-child::after,
.customer .button--tag a:last-child::after {
display: none;
}
.customer .button--tag a::after {
content: "";
width: 0.1rem;
height: 1.2rem;
margin: 0 1.6rem;
background-color: rgb(var(--color-border));
}
.button--tag a span,
.customer .button--tag a span {
padding: 0.2rem 0;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
font-size: var(--button-size);
font-family: var(--font-button-family);
font-weight: var(--font-button-weight);
font-style: var(--font-button-style);
text-transform: var(--font-button-text-transform);
letter-spacing: calc(var(--font-button-letter-spacing) * 0.1);
color: rgb(var(--color-foreground-title));
line-height: 1;
overflow: visible;
transition: opacity var(--duration-default);
cursor: pointer;
}
.button--tag a span::after,
.customer .button--tag a span::after {
position: absolute;
bottom: -0.3rem;
left: 0;
right: 0;
content: "";
width: 0;
height: 0.1rem;
background-color: rgba(var(--color-foreground-title));
transition: width var(--duration-default);
}
.button--tag a span:hover::after,
.customer .button--tag a span:hover::after {
width: 100%;
}
.button--arrow,
.customer .button--arrow {
position: relative;
padding: 0 2rem;
}
.button--arrow .icon-button-arrow,
.customer .button--arrow .icon-button-arrow {
opacity: 0;
}
.button--arrow span:first-child,
.customer .button--arrow span:first-child {
transition: transform var(--duration-default);
transform: translateX(1.2rem);
}
.button--arrow:hover .icon-button-arrow,
.customer .button--arrow:hover .icon-button-arrow {
transform: translateX(0.3rem);
opacity: 1;
}
.button--arrow:hover span:first-child,
.customer .button--arrow:hover span:first-child {
transform: translateX(0.5rem);
}
.button--simple,
.customer .button--simple {
display: block;
align-items: center;
padding: 0;
min-width: auto;
min-height: auto;
background: none;
box-shadow: none;
color: rgba(var(--color-foreground));
overflow: visible;
text-decoration: none;
}
.button--simple span,
.customer .button--simple span {
position: relative;
}
.button--simple span::after,
.customer .button--simple span::after {
position: absolute;
bottom: -0.2rem;
left: 0;
right: 0;
content: "";
width: 100%;
height: 0.1rem;
background-color: currentColor;
transition: width var(--duration-default);
}
.button--simple:hover,
.customer .button--simple:hover {
color: rgb(var(--color-accent));
}
.button--primary-size,
.customer .button--primary-size {
min-height: 4.8rem;
padding: 0 3rem;
}
.button--small,
.customer .button--small {
padding: 1rem 2.6rem;
min-height: 4rem;
min-width: 13rem;
}
.button--full-width,
.customer .button--full-width {
display: flex;
width: 100%;
}
.button .spinner,
.customer .button .spinner {
display: none;
}
.button.loading,
.customer .button.loading {
/*&:after {
animation: loading var(--duration-long) infinite linear;
border: 0.5rem solid rgba(var(--color-button-text), 0.4);
border-left: 0.5rem solid rgb(var(--color-button-text));
border-radius: 100%;
box-sizing: content-box;
content: '';
display: block;
height: 2rem;
position: absolute;
width: 2rem;
margin: auto;
}*/
}
.button.loading span,
.customer .button.loading span {
opacity: 0;
}
.button.loading .spinner,
.customer .button.loading .spinner {
position: absolute;
display: inline-block;
}
.button.loading .spinner .path,
.customer .button.loading .spinner .path {
stroke: currentColor;
}
/* Button - other */
.button--tag a[aria-disabled="true"] span {
cursor: not-allowed;
opacity: 0.5;
}
.button:disabled,
.button[aria-disabled="true"],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled="true"],
.customer button.disabled {
cursor: not-allowed;
opacity: 0.5;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Button - social share */
.share-button {
display: block;
position: relative;
margin-top: 1rem;
}
.share-button__button {
padding: 0;
box-shadow: none;
background: none;
text-transform: none;
font-weight: 500;
justify-content: flex-start;
}
.share-button .share-button__button:hover {
box-shadow: none;
}
.share-button .share-button__button:focus {
box-shadow: none;
border: none;
}
.share-button__button .icon-share {
margin-right: 1rem;
}
.share-button__fallback {
border: 0.1rem solid rgba(var(--color-foreground), 0.1);
background: rgb(var(--color-background));
padding: 2rem;
position: absolute;
top: 4rem;
left: -0.1rem;
z-index: 3;
width: 100%;
display: flex;
flex-direction: column;
}
.share-button__fallback .button {
margin-top: 1rem;
}
.share-button__fallback .icon-clipboard {
height: 1.4rem;
width: 1.8rem;
}
.share-button__message:not(:empty) {
font-size: 1.2rem;
text-align: right;
display: block;
margin-top: 0.5rem;
}
/* Button - social share new */
.share-buttons {
display: inline-flex;
position: relative;
margin-top: 0;
}
.share-buttons:hover {
color: rgb(var(--color-accent));
}
.share-buttons__label {
display: inline-flex;
align-items: center;
padding: 1rem 0;
cursor: pointer;
}
.share-buttons__label-name {
font-size: 1.2rem;
}
.share-buttons__label .icon-share {
width: 1.2rem;
margin-right: 1rem;
}
.share-buttons__label .icon-share path {
fill: rgba(var(--color-foreground));
}
.share-buttons__list {
display: flex;
margin: 0;
list-style: none;
transition: var(--duration-default);
z-index: 10;
}
.share-buttons__item a {
color: rgba(var(--color-foreground), 1);
transition: var(--duration-default);
}
.share-buttons__item a:hover {
color: rgba(var(--color-accent));
}
.share-buttons__item .icon {
width: 1.8rem;
height: 1.8rem;
margin-right: 0.8rem;
}
.share-buttons__item .icon-copy {
transform: rotate(-45deg);
}
.share-buttons__button {
display: flex;
align-items: center;
width: 100%;
text-decoration: none;
}
.share-button__name {
font-size: 1.2rem;
transition: var(--duration-default);
}
.share-button__icon {
display: flex;
align-items: center;
color: rgb(var(--color-foreground));
padding: 0.8rem;
background-color: rgb(var(--color-scondary-element-background));
border-radius: 100%;
transition: var(--duration-default);
}
.share-buttons__button:hover .share-button__icon {
background-color: rgb(var(--color-scondary-element-background), 0.5);
}
.share-buttons-simple {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin: 0;
}
.share-buttons-simple .icon {
width: 2rem;
height: 2rem;
}
.share-buttons-simple .icon-copy {
transform: rotate(-45deg);
}
.share-buttons-simple__button {
display: block;
padding: 0.8rem;
transition: var(--duration-default);
}
.share-buttons-simple__button svg {
transition: color var(--duration-default);
}
.share-buttons-simple__button span {
transition: color var(--duration-default);
}
.share-buttons-simple__button:hover svg {
color: rgb(var(--color-foreground-secondary));
}
.share-buttons-simple__button:hover span {
color: rgb(var(--color-foreground-secondary));
}
.modal-close-button {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: rgb(var(--color-button));
background-color: transparent;
border: none;
cursor: pointer;
}
.modal-close-button:hover {
color: rgb(var(--color-foreground-secondary));
}
.header__offcanvas-toggle-link .icon-close {
color: rgb(var(--color-foreground));
}
.infinite-scroll__loading {
display: flex;
justify-content: center;
color: rgba(var(--color-button-tertiary-text));
margin-top: 4rem;
}
@media screen and (min-width: 576px) {
.infinite-scroll__loading {
margin-top: 6.4rem;
}
}
.infinite-scroll__loading .spinner {
display: none;
width: 2rem;
height: 2rem;
}
.infinite-scroll__loading.loading .spinner {
display: block;
}
.scroll-top {
cursor: pointer;
position: fixed;
bottom: 2rem;
right: 2rem;
width: 4.5rem;
height: 4.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(var(--color-button));
border: none;
border-radius: 50%;
opacity: 0;
z-index: 9999999;
transition: var(--duration-default);
}
.scroll-top svg {
width: 1.6rem;
height: 1.6rem;
fill: rgb(var(--color-button-text-hover));
}
.scroll-top.show {
opacity: 1;
}
.scroll-top:hover {
background-color: rgb(var(--color-button-hover));
color: rgb(var(--color-button-text-hover));
}
.scroll-top:hover svg {
fill: rgb(var(--color-button-text-hover));
}
/* Form */
.field {
position: relative;
width: 100%;
min-height: 5.7rem;
display: flex;
border-radius: 0.2rem;
}
.field label {
position: relative;
transition: var(--duration-short);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="search"],
.field input[type="password"],
.field select,
.field .field__input {
width: 100%;
font-weight: 500;
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-size: 1.6rem;
-webkit-appearance: none;
appearance: none;
color: rgb(var(--color-foreground-secondary));
background-color: rgb(var(--color-background-input));
border: 0.1rem solid rgb(var(--color-border-input));
border-radius: 0.2rem;
box-sizing: border-box;
transition: border var(--duration-default);
overflow: hidden;
}
@media (min-width: 750px) {
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="search"],
.field input[type="password"],
.field select,
.field .field__input {
font-size: 1.4rem;
}
}
.field input[type="text"]:-internal-autofill-selected + label,
.field input[type="email"]:-internal-autofill-selected + label,
.field input[type="tel"]:-internal-autofill-selected + label,
.field input[type="search"]:-internal-autofill-selected + label,
.field input[type="password"]:-internal-autofill-selected + label,
.field select:-internal-autofill-selected + label,
.field .field__input:-internal-autofill-selected + label {
display: none;
}
.field input[type="text"]:hover,
.field input[type="email"]:hover,
.field input[type="tel"]:hover,
.field input[type="search"]:hover,
.field input[type="password"]:hover,
.field select:hover,
.field .field__input:hover {
border-color: rgb(var(--color-border-input-hover));
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="tel"]:focus,
.field input[type="search"]:focus,
.field input[type="password"]:focus,
.field select:focus,
.field .field__input:focus {
border-color: rgb(var(--color-border-input-hover));
}
.field input[type="text"]:focus-visible,
.field input[type="text"]:focus,
.field input[type="email"]:focus-visible,
.field input[type="email"]:focus,
.field input[type="tel"]:focus-visible,
.field input[type="tel"]:focus,
.field input[type="search"]:focus-visible,
.field input[type="search"]:focus,
.field input[type="password"]:focus-visible,
.field input[type="password"]:focus,
.field select:focus-visible,
.field select:focus,
.field .field__input:focus-visible,
.field .field__input:focus {
outline: none;
}
.field input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.field input[type="search"]::placeholder {
color: rgb(var(--color-foreground-secondary));
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field .field__input {
flex-grow: 1;
padding: 1rem 2.4rem;
text-align: left;
}
.field input[type="text"]::-webkit-search-cancel-button,
.field input[type="email"]::-webkit-search-cancel-button,
.field input[type="tel"]::-webkit-search-cancel-button,
.field input[type="password"]::-webkit-search-cancel-button,
.field .field__input::-webkit-search-cancel-button {
display: none;
}
.field input[type="text"]::placeholder,
.field input[type="email"]::placeholder,
.field input[type="tel"]::placeholder,
.field input[type="password"]::placeholder,
.field .field__input::placeholder {
opacity: 0;
}
.field input[type="text"][required] + label::after,
.field input[type="email"][required] + label::after,
.field input[type="tel"][required] + label::after,
.field input[type="password"][required] + label::after,
.field .field__input[required] + label::after {
content: "*";
position: relative;
top: 0;
left: 0;
color: rgb(var(--color-error));
}
.field input[type="text"] + label,
.field input[type="email"] + label,
.field input[type="tel"] + label,
.field input[type="password"] + label,
.field .field__input + label {
position: absolute;
left: 2.4rem;
top: 50%;
font-size: 1.6rem;
font-weight: 500;
text-transform: none;
color: rgb(var(--color-foreground-secondary));
letter-spacing: -0.02em;
transform: translateY(-50%);
visibility: hidden;
opacity: 0;
pointer-events: none;
}
@media (min-width: 750px) {
.field input[type="text"] + label,
.field input[type="email"] + label,
.field input[type="tel"] + label,
.field input[type="password"] + label,
.field .field__input + label {
font-size: 1.4rem;
}
}
.field input[type="text"]:placeholder-shown + label,
.field input[type="email"]:placeholder-shown + label,
.field input[type="tel"]:placeholder-shown + label,
.field input[type="password"]:placeholder-shown + label,
.field .field__input:placeholder-shown + label {
visibility: visible;
opacity: 1;
}
.field input[type="text"]:focus + label,
.field input[type="email"]:focus + label,
.field input[type="tel"]:focus + label,
.field input[type="password"]:focus + label,
.field .field__input:focus + label {
visibility: hidden;
opacity: 0;
}
.field textarea.field__input {
padding: 1.8rem 2rem;
}
.field .select {
width: 100%;
}
.field .select .placeholder-select {
font-size: 1.4rem;
font-weight: 500;
text-transform: none;
color: rgba(var(--color-foreground-secondary));
position: absolute;
top: 50%;
left: 1.8rem;
transform: translateY(-50%);
pointer-events: none;
}
.field .select .placeholder-select span {
color: rgb(var(--color-error));
}
.field select {
cursor: pointer;
padding: 1.6rem 4rem 1.6rem 2rem;
min-height: 5.7rem;
font-weight: 500;
line-height: 1.4;
}
.field select:focus {
border-color: rgb(var(--color-border-input-hover));
}
.field select + svg {
width: 1.4rem;
height: 1.4rem;
pointer-events: none;
position: absolute;
top: calc(50% - 1rem);
right: 2rem;
color: rgb(var(--color-button));
}
.field select option {
background-color: rgb(var(--color-background-input));
}
.field input[type="checkbox"] {
display: none;
}
.field input[type="checkbox"]:checked + label b {
background: rgba(var(--color-foreground))
url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.66649 6.61451L10.7945 0.48584L11.7378 1.42851L4.66649 8.49984L0.423828 4.25717L1.36649 3.31451L4.66649 6.61451Z' fill='white'/%3e%3c/svg%3e ")
no-repeat center center;
border-color: rgba(var(--color-foreground));
background-color: rgb(var(--color-button));
}
.field input[type="checkbox"]:checked + label b svg {
opacity: 1;
}
.field input[type="checkbox"]:focus + label b {
outline: 0.1rem solid rgba(var(--color-border-input)) !important;
outline-offset: 0;
}
.field input[type="checkbox"] + label {
display: inline-flex;
align-items: center;
font-size: 1.5rem;
color: rgb(var(--color-foreground));
cursor: pointer;
}
.field input[type="checkbox"] + label:hover b {
border-color: #bfbfbf;
}
.field input[type="checkbox"] + label b {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin: 0 1.1rem 0 0;
border: 0.1rem solid rgba(var(--color-border-input));
background-color: rgb(var(--color-background-input));
appearance: none;
transition: var(--duration-default);
}
.field input[type="checkbox"] + label b svg {
opacity: 0;
color: rgb(var(--color-button-text));
}
.field--dark input[type="text"],
.field--dark input[type="email"],
.field--dark input[type="tel"],
.field--dark input[type="password"],
.field--dark input[type="search"] {
border-color: rgba(255, 255, 255, 0.4);
color: rgb(255, 255, 255);
background-color: transparent;
}
.field--dark input[type="text"]:hover,
.field--dark input[type="text"]:focus,
.field--dark input[type="email"]:hover,
.field--dark input[type="email"]:focus,
.field--dark input[type="tel"]:hover,
.field--dark input[type="tel"]:focus,
.field--dark input[type="password"]:hover,
.field--dark input[type="password"]:focus,
.field--dark input[type="search"]:hover,
.field--dark input[type="search"]:focus {
border-color: rgb(255, 255, 255);
}
.field--dark input[type="text"] + label::before,
.field--dark input[type="email"] + label::before,
.field--dark input[type="tel"] + label::before,
.field--dark input[type="password"] + label::before,
.field--dark input[type="search"] + label::before {
color: rgba(255, 255, 255, 0.5);
}
/* Text area */
.text-area {
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
padding: 1.2rem;
min-height: 10rem;
resize: none;
}
.text-area--resize-vertical {
resize: vertical;
}
.field .text-area + label {
top: 2.5rem;
}
/* Form global */
.form__label {
display: block;
margin-bottom: 0.6rem;
}
.form__message {
align-items: center;
display: flex;
font-size: 1.4rem;
line-height: 1;
margin-top: 1rem;
}
.form__message--large {
font-size: 1.4rem;
}
.form__message .icon {
flex-shrink: 0;
height: 1.3rem;
margin-right: 0.5rem;
width: 1.3rem;
}
.form__message--large .icon {
height: 1.5rem;
width: 1.5rem;
margin-right: 1rem;
}
.form-status {
margin: 0;
font-size: 1.4rem;
}
.form-status-list {
padding: 0;
margin: 2rem 0 4rem;
}
.form-status-list li {
list-style-position: inside;
}
.form-status-list .link::first-letter {
text-transform: capitalize;
}
/* Quantity */
.quantity {
position: relative;
width: 14.3rem;
height: 6rem;
display: flex;
padding: 0 1.5rem;
border: 0.1rem solid rgb(var(--color-border));
border-radius: var(--border-radius-button);
}
.quantity__input {
font-family: var(--font-body-family);
font-size: 1.4rem;
font-weight: 500;
color: rgb(var(--color-foreground-title));
text-align: center;
background-color: transparent;
border: 0;
padding: 0 0.5rem;
width: 100%;
flex-grow: 1;
-webkit-appearance: none;
appearance: none;
}
.quantity__button {
width: 4rem;
padding: 0;
flex-shrink: 0;
font-size: 1.8rem;
border: 0;
background-color: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgb(var(--color-button));
transition: border-color var(--duration-default);
}
.quantity__button svg {
transition: opacity var(--duration-default);
}
.quantity__button:hover svg {
opacity: 0.5;
}
.quantity__button.disabled {
pointer-events: none;
}
.quantity__button svg {
width: 1rem;
pointer-events: none;
}
.quantity__button svg path {
transition: var(--duration-default);
}
.quantity__button:hover svg path {
color: rgba(var(--color-foreground));
}
.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
-webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}
.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity__input[type="number"] {
-moz-appearance: textfield;
}
/* Negate the fallback side-effect for browsers that support :focus-visible */
*:focus:not(:focus-visible):not(.button--secondary):not(
.localization-selector.link
) {
outline: 0;
box-shadow: none;
}
/*
Focus ring - inset
*/
.focus-inset:focus-visible {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: -0.2rem;
box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}
/* Fallback */
.focus-inset:focus {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: -0.2rem;
box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}
.focus-inset:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}
/*
Focus ring - none
*/
/* Dangerous for a11y - Use with care */
.focus-none {
box-shadow: none !important;
outline: 0 !important;
}
/* Modal */
.modal__toggle {
list-style-type: none;
}
.no-js details[open] .modal__toggle {
z-index: 2;
}
.modal__toggle-close {
display: none;
}
.no-js details[open] svg.modal__toggle-close {
display: flex;
z-index: 1;
height: 1.4rem;
width: 1.4rem;
}
.modal__toggle-open {
display: flex;
}
.no-js details[open] .modal__toggle-open {
display: none;
}
.no-js .modal__close-button.link {
display: none;
}
.modal__close-button.link {
display: flex;
justify-content: center;
align-items: center;
padding: 0rem;
background-color: transparent;
}
.modal__close-button .icon {
width: 1.4rem;
height: 1.4rem;
}
.modal__content {
position: absolute;
inset: 0;
background: rgb(var(--color-background));
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.fancybox-skin {
padding: 0 !important;
}
/* Announcement-bar */
#shopify-section-announcement-bar {
z-index: 4;
}
.section-announcement {
transition: transform var(--duration-default);
}
.body--hidden .section-announcement {
transform: translateY(-100%);
}
.announcement-bar {
display: flex;
justify-content: center;
padding: 1rem 0;
min-height: 4.8rem;
height: var(--announcement-height);
font-size: 1rem;
letter-spacing: -0.02em;
color: rgb(var(--color-foreground));
}
@media screen and (min-width: 576px) {
.announcement-bar {
min-height: 4rem;
font-size: 1.2rem;
}
}
@media screen and (min-width: 990px) {
.announcement-bar.announcement-bar-localization {
padding: 0;
}
}
.announcement-bar .button--simple-move {
font-size: 1.2rem;
font-weight: 600;
text-transform: capitalize;
}
.announcement-bar .container {
display: grid;
grid-template-columns: auto 1fr auto;
justify-items: start;
align-items: center;
grid-template-areas: "localization message block";
}
@media screen and (min-width: 990px) {
.announcement-bar .container {
grid-template-columns: 0.2fr 1fr 0.2fr;
}
}
.announcement-bar .uppercase {
font-size: 1rem;
letter-spacing: 0.08em;
}
.announcement-bar .uppercase p {
font-size: 1rem;
}
.announcement-bar .localization-selector.link {
min-height: 4rem;
}
.announcement-bar .header__localization-button:hover .currency-country {
opacity: 0.8;
}
.announcement-bar
.header__localization--language
.localization-selector.link:hover
.value {
opacity: 0.8;
}
.announcement-bar__link {
font-size: 1rem;
}
@media screen and (min-width: 576px) {
.announcement-bar__link {
font-size: 1.2rem;
}
}
.announcement-bar__message {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
text-align: center;
padding: 0;
overflow-y: auto;
width: 100%;
height: 150%;
grid-area: message;
position: relative;
}
@media screen and (min-width: 576px) {
.announcement-bar__message {
padding: 0 2rem;
}
}
@media screen and (min-width: 750px) {
.announcement-bar__message .announcement-bar-full-link {
display: none;
}
}
@media screen and (max-width: 750px) {
.announcement-bar__message .button--simple-move {
display: none;
}
.announcement-bar__message .announcement-bar-full-link {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
}
.announcement-bar__message::-webkit-scrollbar {
width: 3px;
height: 3px;
}
.announcement-bar__message::-webkit-scrollbar-thumb {
background-color: rgba(var(--color-foreground), 0.7);
border-radius: 100px;
}
.announcement-bar__image {
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
margin: 0;
}
.announcement-bar__image img {
display: block;
object-fit: contain;
object-position: center;
width: auto;
height: 100%;
}
.announcement-bar__text {
font-weight: 500;
line-height: 140%;
letter-spacing: -0.02em;
}
.announcement-bar__text p {
margin: 0;
}
.announcement-bar__text a {
position: relative;
text-decoration: none;
margin: 0 0.4rem;
}
.announcement-bar__text a::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
content: "";
width: 0;
height: 0.1rem;
background-color: currentColor;
transition: width var(--duration-default);
}
.announcement-bar__text a:hover::after {
width: 100%;
}
.announcement-bar__link {
display: block;
width: 100%;
text-decoration: none;
}
.announcement-bar__link:hover {
color: rgb(var(--color-foreground));
background-color: rgba(var(--color-card-hover), 0.06);
}
.announcement-bar__block {
grid-area: block;
}
.announcement-bar__localization {
display: flex;
gap: 1.6rem;
align-items: center;
z-index: 99;
grid-area: localization;
}
.announcement-bar__localization .currency-flag {
transform: scale(0.842);
}
.announcement-bar__localization .currency-country,
.announcement-bar__localization .header__localization .value {
font-size: 1rem;
letter-spacing: 0.08em;
}
.announcement-bar__localization .localization-selector.link .value {
font-size: 1rem;
letter-spacing: 0.08em;
}
.announcement-bar__localization .header__localization {
padding-inline: 0;
}
.announcement-bar__localization .header__localization localization-form {
display: flex;
}
.announcement-bar__localization
.header__localization
.localization-selector
+ .disclosure__list {
left: 0;
top: 100%;
}
body.body--hidden {
overflow-y: hidden;
}
.shopify-section-header {
position: relative;
z-index: 12;
will-change: transform;
transition: background var(--duration-short);
}
.shopify-section-header:not(.shopify-section-header-sticky) {
background-color: inherit;
}
.shopify-section-header-sticky {
position: sticky;
top: 0;
pointer-events: none;
z-index: 12;
}
.shopify-section-header-sticky .header {
position: relative;
}
.shopify-section-header-sticky .header__top {
pointer-events: all;
box-shadow: 0px 5px 10px rgba(1, 1, 1, 0.05);
}
@media screen and (min-width: 1200px) {
.shopify-section-header-sticky .header__top {
box-shadow: none;
}
}
@media screen and (min-width: 1200px) {
.shopify-section-header-sticky .header__bottom {
box-shadow: 0px 5px 10px rgba(1, 1, 1, 0.05);
transform: translateY(-102%);
transition: all var(--duration-default);
}
}
.shopify-section-header-sticky .header__bottom--visible {
transform: translateY(0);
pointer-events: all;
}
.shopify-section-header-sticky .header--without-menu .header__top {
box-shadow: 0px 5px 10px rgba(1, 1, 1, 0.05);
}
@media screen and (min-width: 1200px) {
.shopify-section-header-sticky .header__top:hover + .header__bottom,
.shopify-section-header-sticky .header__bottom:hover {
transform: translateY(0);
pointer-events: all;
}
}
.shopify-section-header-hidden {
transform: translateY(-100%);
}
.shopify-section-header.animate {
transition: transform 0.15s ease-out;
}
.header-wrapper {
display: block;
position: relative;
}
.header-wrapper[data-sticky-type="on-scroll-up"] {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.container--header {
margin: 0 auto;
padding-inline: 2rem;
}
@media screen and (min-width: 1360px) {
.container--header {
max-width: 174rem;
}
}
.header {
position: relative;
display: block;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 1200px) {
.header--margin-bottom {
margin-bottom: 1.6rem;
}
.header--margin-bottom .menu-drawer {
top: calc(100% - 1.6rem);
height: calc(
var(--viewport-height, 100vh) -
(var(--header-bottom-position, 100%) - 1.6rem)
) !important;
}
}
@media screen and (min-width: 1200px) {
.header {
display: flex;
}
}
.header .header__border-bottom {
border-bottom: 0.1rem solid rgb(var(--color-border));
margin-bottom: 2.4rem;
}
.header .header__border-bottom .header__searc-modal {
top: calc(100% - 2.4rem);
padding-top: 2.4rem;
}
.header__top {
z-index: 2;
}
.header__top-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.header__top-inner .header__search {
flex-basis: 100%;
margin-left: auto;
}
.header__bottom {
z-index: 1;
}
.header--top-menu .header__top {
z-index: 3;
}
.header--top-menu .header__top.color-background-3 + .header__bottom {
background-color: rgb(var(--color-base-background-3));
}
@media screen and (min-width: 1200px) {
.header--top-menu .header__top.color-background-3 + .header__bottom {
padding-top: 2.4rem;
background-color: rgb(var(--color-background));
}
}
.header--top-menu .header__top--search {
z-index: 4;
}
.header--top-menu .header__search {
margin-left: auto;
margin-top: 0.4rem;
width: 100%;
}
@media screen and (min-width: 1200px) {
.header--top-menu .header__search {
margin-top: 0;
}
}
.header--top-menu .small-menu__link {
padding: 0.4rem;
}
@media screen and (min-width: 1360px) {
.header--top-menu .small-menu__link {
padding: 1.2rem;
font-size: 1.3rem;
}
}
.header--top-menu .mega-menu {
top: auto;
}
.header--without-menu {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.header--without-menu .header__inline-menu {
margin-left: 1rem;
}
.header--without-menu .header__shop-button {
padding: 1.2rem 1.6rem 1.2rem 0;
}
.header--without-menu header-drawer {
min-width: auto !important;
}
.header--without-menu .header__heading {
margin: auto;
margin-right: auto;
}
.header__bottom {
position: relative;
background-color: rgb(var(--color-background));
transition: all var(--duration-default);
}
.header__top {
position: relative;
background-color: rgb(var(--color-background));
}
@media screen and (min-width: 990px) {
.header--without-menu .header__heading {
margin: 0;
}
/* .header__column {
min-width: 16.5rem;
} */
}
@media screen and (min-width: 1200px) {
.header__column {
margin-left: auto;
min-width: unset;
}
}
.header__heading,
.header__heading-link {
margin-right: auto;
}
@media screen and (min-width: 750px) {
.header__heading image,
.header__heading-link image {
flex: none;
}
}
.header > .header__heading,
.header > .header__heading-link {
display: flex;
align-items: center;
}
.header .header__top,
.header .header__bottom {
width: 100%;
}
@media screen and (min-width: 1200px) {
.header {
position: static;
display: block;
}
.header > .header__heading,
.header > .header__heading-link {
grid-area: heading;
}
.header--bottom-menu .header__top-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "navigation heading column";
width: 100%;
}
.header--bottom-menu .header__shop-button {
padding: 1.2rem 2.4rem 1.2rem 0;
}
.header--bottom-menu .header__inline-menu {
display: flex;
justify-content: center;
}
.header--bottom-menu .header__bottom {
border-top: 1px solid rgb(var(--color-border));
}
.header--bottom-menu .header__top .header__inline-menu {
margin-left: -1.2rem;
}
.header--top-menu .header__top-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "navigation heading column";
width: 100%;
}
.header--top-menu .header__bottom {
padding-bottom: 2.4rem;
}
.header--top-menu .header__bottom-inner {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "shop search contact";
gap: 3.2rem;
}
.header--top-menu .header__search {
width: 100%;
}
.header--top-menu .header__shop-button {
padding: 1.2rem 2.4rem 1.2rem 0;
}
.header--top-menu .header__inline-menu {
margin-left: -1.2rem;
}
.header--without-menu .header__top-inner {
display: grid;
grid-template-columns: auto auto 1fr auto;
grid-template-areas: "heading shop search column";
}
.header--without-menu .header__column {
width: 100%;
}
.header--without-menu .small-menu {
margin-left: auto;
}
.header .header__shop {
display: block;
}
.header__shop-button {
grid-area: shop;
flex: none;
}
.header__inline-menu {
align-items: center;
}
.header__inline-menu li {
flex: none;
}
.header__top_left {
grid-area: navigation;
display: flex;
align-items: center;
}
.header__column {
grid-area: column;
}
.header__search {
grid-area: search;
}
}
.header *[tabindex="-1"]:focus {
outline: none;
}
.header__heading {
display: inline-flex;
align-items: center;
margin: 0;
line-height: 0;
}
.header__heading span {
line-height: 1;
text-transform: var(--font-header-menu-text-transform);
}
.header > .header__heading-link span {
display: flex;
align-items: center;
line-height: 1;
text-transform: var(--font-header-menu-text-transform);
}
.header__heading,
.header__heading-link {
justify-self: center;
}
@media screen and (max-width: 1200px) {
.header__heading,
.header__heading-link {
margin: 0 auto;
}
}
.header__heading-link {
display: inline-flex;
text-decoration: none;
word-break: break-word;
}
@media screen and (min-width: 375px) {
.header__heading-link {
max-width: 200px;
}
}
@media screen and (min-width: 430px) {
.header__heading-link {
max-width: 250px;
}
}
@media screen and (min-width: 750px) {
.header__heading-link {
max-width: max-content;
}
}
@media screen and (min-width: 1200px) {
.header__heading-link {
max-width: 350px;
}
}
@media screen and (min-width: 1246px) {
.header__heading-link {
max-width: max-content;
}
}
.header__heading .header__heading-link {
padding: 0;
display: flex;
justify-content: center;
}
.header__heading-link:hover .h2 {
color: rgb(var(--color-foreground));
}
.header__heading-link .h2 {
line-height: 1;
color: rgba(var(--color-foreground), 0.75);
}
.header__heading-logo {
display: block;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 576px) {
.header__heading-logo {
max-width: 250px;
}
}
.header__heading-logo--overlay {
display: none;
}
@media screen and (min-width: 990px) {
.header__heading,
.header__heading-link {
justify-self: start;
align-items: center;
}
.header--center .header__heading-link,
.header--center .header__heading {
justify-self: center;
}
}
.header__column {
display: flex;
align-items: center;
justify-content: flex-end;
flex: none;
}
.header__icons {
display: flex;
align-items: center;
grid-area: icons;
justify-self: end;
}
.header__icon,
.header__icon span {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0.8rem;
}
@media screen and (min-width: 1200px) {
.header__icon,
.header__icon span {
padding: 2.3rem 1.2rem;
}
}
.header__icon span {
height: 100%;
}
.header__icon .icon {
width: 2.4rem;
height: 2.4rem;
transition: var(--duration-default);
color: rgba(var(--color-foreground-title));
}
.header__icon .icon-hamburger {
width: 1.8rem;
height: 0.8rem;
}
.header__icon--menu {
width: 4.4rem;
height: 4.4rem;
margin-left: -1rem;
}
@media screen and (min-width: 1200px) {
.header__icon--menu {
margin: 0;
}
}
.header__icon--menu span {
width: 100%;
}
.header__icon--menu .header__modal-close-button {
opacity: 0;
}
.header__icon::after {
content: none;
}
.header__icon .icon {
fill: none;
vertical-align: middle;
}
.header__icon--cart {
position: relative;
padding-right: 0;
}
.header__icon--search,
.header__icon--cart {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
min-height: 4.4rem;
}
.header__icon .header__icon-name {
display: none;
margin-left: 0.7rem;
}
.header__icon--search .header__icon-name {
position: relative;
}
.header__account {
display: none;
align-items: center;
position: relative;
}
@media screen and (min-width: 1200px) {
.header__account {
margin-left: 2rem;
}
.header__account details {
margin-left: 2rem;
}
}
.header__account::before {
position: absolute;
content: none;
top: 50%;
left: 0;
width: 0.2rem;
height: 2.1rem;
background-color: rgb(var(--color-border));
transform: translateY(-50%);
}
@media screen and (min-width: 1200px) {
.header__account::before {
content: "";
}
}
.header__account-modal {
position: absolute;
top: 100%;
right: 0;
display: flex;
flex-direction: column;
padding: 2.4rem;
width: 20rem;
height: auto;
margin: 0;
font-weight: var(--font-body-weight);
text-transform: none;
background-color: rgba(var(--color-background));
box-shadow: 0px 25px 60px 0px rgba(61, 67, 129, 0.05);
border: 1px solid rgb(var(--color-border));
transform: translateY(0rem);
transition: opacity var(--duration-default);
animation: animateMenuOpen var(--duration-default) ease;
z-index: 10;
opacity: 0;
}
.header__account-modal-customer {
padding: 1.6rem 0 2.4rem;
}
.header__account-modal-customer .header__account__name {
padding: 0 2.4rem 1.6rem 2.4rem;
}
.header__account-modal-customer .header__account__main {
padding: 0 2.4rem;
}
details[open] > .header__account-modal {
transform: translateY(0rem);
opacity: 1;
}
.header__account__login {
width: 100%;
}
.header__account__login .icon {
margin-right: 1rem;
margin-left: 0;
width: 2rem;
height: 2rem;
}
.header__account__register {
display: inline;
margin-top: 1.2rem;
font-size: 1.4rem;
line-height: var(--font-body-line-height);
text-align: center;
text-decoration: none;
color: rgb(var(--color-foreground));
transition: color var(--duration-default);
}
.header__account__register span {
position: relative;
padding: 0.2rem 0;
}
.header__account__register span::after {
content: "";
position: absolute;
bottom: 0.1rem;
left: 0;
right: 0;
width: 0;
height: 0.1rem;
background-color: rgb(var(--color-accent));
transition: width var(--duration-default);
}
.header__account__register:hover span::after {
width: 100%;
}
.header__account__name {
margin-bottom: 1.6rem;
padding-bottom: 1.3rem;
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
font-size: 1.4rem;
letter-spacing: calc(var(--font-heading-letter-spacing) * 0.1);
color: rgb(var(--color-foreground-secondary));
border-bottom: 0.1rem solid rgb(var(--color-border));
}
.header__account__address {
margin-top: 1.6rem;
margin-bottom: 1.6rem;
}
.header__account__body {
margin: 0;
padding: 0;
list-style: none;
}
.header__account__body a {
display: block;
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
font-size: 1.4rem;
text-decoration: none;
transition: var(--duration-default);
}
.header__account__body a:hover {
color: rgb(var(--color-accent));
}
.header__account__body a + a {
margin-top: 0.8rem;
}
.header__account__logout {
margin-top: 1.6rem;
width: 100%;
}
@keyframes animateSearchOpen {
0% {
opacity: 0;
transform: translateY(-1.5rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (min-width: 990px) {
.header__icon .header__icon-name {
display: flex;
}
.header__icons > .header__account {
padding: 0;
}
.header__account {
display: inline-flex;
}
}
@media screen and (max-width: 989px) {
menu-drawer ~ .header__icons .header__icon--account {
display: none;
}
}
.header .header__social {
display: none;
}
@media screen and (min-width: 990px) {
.header .header__social {
flex: 1;
display: flex;
justify-content: flex-start;
grid-row-start: 2;
}
.header .header__social:not(:last-child) {
margin-right: 2rem;
}
}
menu-drawer + .header__search {
display: none;
}
.header:not(.header--has-menu) * > .header__search {
display: none;
}
.header__details {
width: 100%;
}
.header__details .search__input {
font-size: 1.3rem;
font-weight: 500;
color: rgba(var(--color-foreground-secondary));
}
.header__search {
position: relative;
margin-left: 3.2rem;
opacity: 1 !important;
}
.header__search .search__input--button {
padding: 1rem 1.8rem;
}
.header__search .search__button {
display: none;
}
@media screen and (min-width: 576px) {
.header__search .search__button {
display: flex;
align-items: center;
justify-content: center;
}
}
.header__search form .field svg {
position: absolute;
right: 2rem;
top: 50%;
color: rgb(var(--color-foreground-secondary));
transform: translateY(-50%);
}
@media screen and (min-width: 576px) {
.header__search form .field svg {
display: none;
}
}
.header .search {
display: inline-flex;
align-items: center;
align-self: center;
justify-content: center;
position: fixed;
left: 0;
width: 100vw;
max-width: 100%;
height: max-content;
top: 100%;
padding-bottom: 3.8rem;
z-index: 1;
}
.header .search__content {
width: 100%;
max-width: 122rem;
}
.header .search__content .search__input--button {
padding: 1.1rem 1.8rem;
}
.header .search__form {
width: 100%;
}
.header .search__input {
width: 100%;
}
.header .search__modal {
width: calc(100% + 1rem);
min-height: 4.5rem;
max-height: calc(100vh - 200px);
overflow-y: auto;
padding: 2.4rem 0;
z-index: 2;
padding-right: 1rem;
text-transform: none;
}
@media screen and (min-width: 750px) {
.header .search__modal {
padding: 4rem 0;
max-height: 57.2rem;
}
}
@media screen and (min-width: 1200px) {
.header .search__modal {
padding: 4rem 0 7.2rem;
}
}
.header .search__modal::-webkit-scrollbar {
width: 0.4rem;
}
.header .search__modal::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-border));
border-radius: 2rem;
}
.header .search__modal .search__input {
border-color: rgb(var(--color-border-input-hover));
}
.header__overlay {
position: fixed;
inset: 0;
top: 100%;
bottom: 0;
display: none;
width: 100%;
height: 100vh;
z-index: 0;
background-color: rgba(var(--color-background), 0.8);
}
noscript .header__search {
height: 100%;
}
.search-modal__heading {
max-width: 80%;
}
.icon-close {
transition: var(--duration-default);
color: rgb(var(--color-button));
}
.icon-close path {
stroke-width: 0.3;
}
header-drawer {
min-width: 7.2rem;
}
@media screen and (min-width: 990px) {
header-drawer {
min-width: 16.5rem;
}
}
@media screen and (min-width: 1200px) {
header-drawer {
min-width: unset;
}
}
.header__icon--menu .icon {
display: block;
position: absolute;
opacity: 1;
transform: scale(1);
transition: transform 150ms ease, opacity 150ms ease;
}
details:not([open]) > .header__icon--menu .icon-close {
visibility: hidden;
opacity: 0;
transform: scale(0.8) rotate(-90deg);
}
details[open] > .header__icon--menu .icon-hamburger {
visibility: hidden;
opacity: 0;
transform: scale(0.8) rotate(90deg);
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
visibility: hidden;
}
.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
visibility: visible;
opacity: 1;
transform: scale(1.07);
}
.header__inline-menu details:hover > .header__submenu {
opacity: 1;
transform: translateY(0rem);
animation: animateMenuOpen var(--duration-default) ease;
}
.menu-drawer-container.menu-opening .header__modal-close-button {
display: flex;
align-items: center;
justify-content: center;
flex: none;
height: 4.4rem;
width: 4.4rem;
color: rgb(var(--color-foreground-title));
background-color: transparent;
cursor: pointer;
}
.menu-drawer-container.menu-opening .header__modal-close-button .icon-close {
width: 1.4rem;
height: 1.4rem;
transition: var(--duration-default) ease;
}
.menu-drawer-container.menu-opening
.header__modal-close-button:hover
.icon-close {
transform: rotate(90deg);
}
.menu-opening .header__modal-close-button {
opacity: 1;
}
.menu-opening .header__toggle-scheme {
display: inline-flex;
justify-content: flex-start;
width: max-content;
margin-top: 1.8rem;
padding-inline: 0;
}
.overflow-hidden-tablet .header__heading,
.overflow-hidden-tablet .header__heading-link {
display: none;
}
.overflow-hidden-tablet .header__column .header__icons {
display: none;
}
.overflow-hidden-tablet .header__column .menu-drawer__localization-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 1rem 0;
margin-right: -0.8rem;
}
.header__articles {
width: 38.4rem;
max-width: 100%;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}
@media screen and (min-width: 1440px) {
.header__articles {
width: 41.4rem;
}
}
@media screen and (max-height: 680px) {
.header__articles {
height: 65vh;
}
}
.header__articles .header__article:not(:first-child) {
margin-top: -0.1rem;
}
@media screen and (max-height: 680px) {
.header__articles .article-card-small {
padding-block: 0.8rem;
}
}
.header__articles .header__subtitle {
margin-bottom: 2.4rem;
}
.header__articles .header__article-button {
margin-top: 2.4rem;
}
.header .header__social {
margin-top: auto;
}
.header__inline-menu {
display: none;
}
.header__inline-menu .header__menu-item {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
text-transform: var(--font-header-menu-text-transform);
font-size: var(--font-header-link-size);
letter-spacing: calc(var(--heading-menu-letter-spacing) * 0.1);
}
.header--center .header__heading-link {
margin-left: 0;
}
@media screen and (min-width: 1200px) {
.header__inline-menu {
display: block;
}
.header--center .header__inline-menu {
display: flex;
}
}
.header__menu {
padding: 0 1rem;
}
.header__menu-item {
overflow: hidden;
padding: 1.6rem;
text-decoration: none;
color: rgb(var(--color-foreground-title));
transition: color var(--duration-default);
}
.header__submenu {
top: calc(100% - 0.4rem);
}
.header__submenu .header__menu-item .icon-caret {
transition: var(--duration-default);
color: rgb(var(--color-foreground));
}
.list-menu--inline {
max-height: 100%;
align-items: center;
}
.list-menu--inline li:not(.list-menu--megamenu) {
position: relative;
}
.list-menu--inline li:hover > .header__submenu,
.list-menu--inline li:focus-within > .header__submenu,
.list-menu--inline li:focus > .header__submenu,
.list-menu--inline li:active > .header__submenu {
opacity: 1;
pointer-events: all;
}
.list-menu--inline .header__menu-item {
padding: 2.55rem 1.2rem;
}
.list-menu--inline .header__menu-item span {
display: flex;
align-items: center;
}
.list-menu--inline .header__menu-item span .icon-caret {
position: static;
margin-left: 0.4rem;
}
.list-menu--inline .header__menu-item .header__active-menu-item::after {
width: 100%;
}
.list-menu--inline .header__menu-item + .header__submenu {
opacity: 0;
pointer-events: none;
}
.list-menu--inline .header__menu-item + .header__submenu:hover {
opacity: 1;
pointer-events: all;
}
.list-menu--inline .header__menu-item:hover + .header__submenu {
opacity: 1;
pointer-events: all;
}
.header__inline-menu .header__menu-item {
align-items: flex-start;
}
.header__menu-item > span {
position: relative;
}
.header__icon .header__icon-name {
text-decoration: none;
font-size: 1.5rem;
line-height: var(--font-body-line-height);
color: rgb(var(--color-foreground));
}
.header__submenu {
text-transform: none;
transition: opacity var(--duration-default) ease;
z-index: 15;
}
.header__submenu.list-menu {
padding-block: 0.8rem;
}
.header__submenu li {
padding-inline: 0.8rem;
}
.header__submenu .header__menu-item {
justify-content: space-between;
height: auto;
padding: 0.8rem 1.2rem;
font-family: var(--font-header-submenu-family);
font-style: var(--font-header-submenu-style);
font-weight: var(--font-header-submenu-weight);
text-transform: var(--font-header-submenu-text-transform);
font-size: var(--font-header-submenu-link-size);
letter-spacing: calc(var(--heading-submenu-letter-spacing) * 0.1);
}
.header__submenu .header__menu-item span {
position: relative;
padding: 0;
border: none;
}
.header__submenu .header__menu-item--active span::after {
width: 100%;
}
.header__submenu .icon-caret {
right: 1.6rem;
transform: rotate(-90deg);
}
.header__menu-item .icon-caret {
right: 0.8rem;
width: 2rem;
height: 2rem;
z-index: 0;
}
.header__inline-menu .list-menu--disclosure {
min-width: auto;
left: auto;
top: 100%;
}
.header__inline-menu li:hover > .header__submenu {
opacity: 1;
pointer-events: all;
}
.header__inline-menu .list-menu:not(.header__submenu) > li > .header__submenu {
transform: translateX(1.2rem);
}
.header__inline-menu span.header__menu-item {
display: flex;
align-items: center;
}
.header__inline-menu_bottom .list-menu--disclosure {
top: 100%;
}
.header__inline-menu_bottom .mega-menu {
top: 99.8%;
}
.header__inline-menu .header__menu-item {
align-items: flex-start;
}
.header__menu-item > span {
position: relative;
}
.header__icon .header__icon-name {
text-decoration: none;
font-size: 1.5rem;
line-height: var(--font-body-line-height);
color: rgb(var(--color-foreground-title));
}
.header__submenu {
text-transform: none;
box-shadow: 0px 25px 60px 0px rgba(61, 67, 129, 0.05);
border: 1px solid rgb(var(--color-border));
transition: opacity var(--duration-default) ease;
z-index: 15;
font-family: var(--font-header-submenu-family);
font-style: var(--font-header-submenu-style);
font-weight: var(--font-header-submenu-weight);
text-transform: var(--font-header-submenu-text-transform);
font-size: var(--font-header-submenu-link-size);
letter-spacing: calc(var(--heading-submenu-letter-spacing) * 0.1);
}
.header__submenu.list-menu {
padding-block: 1.2rem;
}
.header__submenu li {
padding-inline: 0.8rem;
}
.header__submenu .header__menu-item {
height: auto;
padding: 0.8rem 1.2rem;
font-family: var(--font-header-submenu-family);
font-style: var(--font-header-submenu-style);
font-weight: var(--font-header-submenu-weight);
text-transform: var(--font-header-submenu-text-transform);
font-size: var(--font-header-submenu-link-size);
letter-spacing: calc(var(--heading-submenu-letter-spacing) * 0.1);
}
.header__submenu .header__menu-item span {
position: relative;
padding: 0;
border: none;
transition: color var(--duration-default);
}
.header__submenu .header__menu-item:hover .icon-caret {
transform: rotate(-90deg);
color: rgb(var(--color-accent));
}
.header__submenu .header__menu-item--active span::after {
width: 100%;
}
.header__submenu .header__menu-item.item-sale {
color: rgb(var(--color-sale));
}
.header__submenu .icon-caret {
right: 1.6rem;
transform: rotate(-90deg);
}
details-disclosure > details {
position: relative;
}
@keyframes animateMenuOpen {
0% {
opacity: 0;
transform: translateY(-1.5rem);
}
100% {
opacity: 1;
transform: translateY(0rem);
}
}
@keyframes animateLocalOpen {
0% {
opacity: 0;
transform: translateY(-1.5rem);
}
100% {
opacity: 1;
transform: translateY(0rem);
}
}
.overflow-hidden-mobile,
.overflow-hidden-tablet {
overflow: hidden;
}
@media screen and (min-width: 750px) {
.overflow-hidden-mobile {
overflow: auto;
}
}
@media screen and (min-width: 990px) {
.overflow-hidden-tablet {
overflow: auto;
}
}
.small-menu {
display: none;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
@media screen and (min-width: 1400px) {
.small-menu {
display: flex;
}
}
.small-menu__link {
padding: 1.2rem;
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: 500;
color: rgb(var(--color-foreground-secondary));
text-transform: var(--font-header-menu-text-transform);
font-size: 1.3rem;
text-decoration: none;
transition: color var(--duration-default);
}
.small-menu__link:hover {
color: rgb(var(--color-foreground-title));
}
.small-menu__link > span::after {
background-color: rgb(var(--color-foreground-title));
}
@media screen and (min-width: 1400px) {
.header__shop-small-menu-item {
display: none;
}
}
.cart-count-bubble:empty {
display: none;
}
.header__cart {
position: relative;
}
.cart-count-bubble {
position: absolute;
top: 56%;
left: 69%;
transform: translate(-60%, -55%);
display: flex;
justify-content: center;
align-items: center;
flex: none;
height: 1.6rem;
width: 1.6rem;
font-size: 0.9rem;
line-height: 1;
background-color: rgb(var(--color-foreground));
color: rgb(var(--color-button-text)) !important;
}
@media screen and (min-width: 990px) {
.cart-count-bubble {
left: 72%;
}
}
.cart-count-bubble.cart-have-count {
background-color: rgb(var(--color-foreground));
color: rgb(var(--color-button-text)) !important;
}
.cart-count-bubble span {
padding: 0;
}
.header__localization {
position: relative;
display: none;
padding-inline: 1.2rem;
}
.header__localization .localization-selector.link {
background-color: unset;
}
.header__localization localization-form .localization-form__select {
box-shadow: none;
}
.header__localization .localization-selector.link {
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0;
color: rgb(var(--color-foreground-title));
}
.header .header__localization .localization-selector.link {
min-height: 4.4rem;
}
.currency-country,
.header__localization .value {
position: relative;
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
font-size: 1.2rem;
text-transform: var(--font-header-menu-text-transform);
transition: var(--duration-default);
}
.localization-selector.link .value {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
}
.header__localization localization-form .localization-form__select .icon-caret {
position: static;
color: rgba(var(--color-accent));
transition: var(--duration-default);
}
.header__localization .localization-selector + .disclosure__list {
top: calc(100% + 1.3rem);
right: 0;
bottom: auto;
margin-top: 0;
padding: 1.2rem 0.8rem;
min-width: 15rem;
max-width: 32rem;
max-height: 30rem;
box-shadow: 0px 25px 60px 0px rgba(61, 67, 129, 0.05);
border: 1px solid rgb(var(--color-border));
transition: opacity var(--duration-default) ease,
transform var(--duration-default) ease;
}
@media screen and (min-width: 750px) {
.header__localization .localization-selector + .disclosure__list {
min-width: 20rem;
}
}
.header__localization .disclosure__list li a {
padding: 0.8rem 1.2rem;
height: auto;
display: flex;
align-items: center;
transition: background var(--duration-default);
text-transform: none;
font-family: var(--font-header-submenu-family);
font-style: var(--font-header-submenu-style);
font-weight: var(--font-header-submenu-weight);
text-transform: var(--font-header-submenu-text-transform);
font-size: var(--font-header-submenu-link-size);
letter-spacing: calc(var(--heading-submenu-letter-spacing) * 0.1);
}
.disclosure__link--flag:before {
content: "";
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
flex: none;
overflow: hidden;
margin-right: 1rem;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
border: 1px solid rgb(var(--color-border));
}
.header__localization .disclosure {
position: static;
}
.header__localization .localization-selector + .disclosure__list {
animation: animateLocalOpen var(--duration-default) ease;
transform: translateY(0rem);
}
.header__localization .localization-form__currency {
margin-left: auto;
}
@media screen and (min-width: 990px) {
.header__localization {
display: block;
}
}
.header__localization-modal.asctive {
display: block;
}
.currency-flag {
position: relative;
width: 19px;
height: 19px;
flex: none;
overflow: hidden;
margin-right: 0.8rem;
transform: scale(1.263);
}
.currency-flag:before,
.currency-flag:after {
content: "";
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.currency-flag:before {
content: attr(data-value);
font-size: 9px;
text-align: center;
}
.currency-flag[data-value]:after {
background-size: cover;
background-repeat: no-repeat;
border-radius: 50%;
border: 1px solid rgb(var(--color-border));
}
.menu-drawer__localization-wrapper {
display: none;
}
.menu-drawer__localization-wrapper .currency-country,
.menu-drawer__localization-wrapper .header__localization .value {
font-size: 1rem;
}
.menu-drawer__localization-wrapper .localization-selector.link .value {
font-size: 1rem;
}
.menu-drawer__localization-wrapper .currency-flag {
transform: scale(0.842);
margin-right: 0.6rem;
}
.menu-drawer__localization {
display: block;
padding-inline: 0.8rem;
}
@media screen and (min-width: 990px) {
.menu-drawer__localization {
display: none;
}
}
.menu-drawer__localization .header__localization-button {
display: inline-flex;
width: auto;
}
.header__toggle-scheme {
display: none;
justify-content: center;
flex: none;
padding: 2.3rem 1.2rem;
background-color: transparent;
border: none;
cursor: pointer;
}
@media screen and (min-width: 1200px) {
.header__toggle-scheme {
display: flex;
align-items: center;
}
}
.header__toggle-scheme-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
color: rgb(var(--color-foreground-title));
}
.header__toggle-scheme-item:hover .header__toggle-scheme-heading {
color: rgb(var(--color-accent));
}
.header__toggle-scheme-item:hover svg {
color: rgb(var(--color-button));
}
.header__toggle-scheme-item span {
display: block;
color: rgb(var(--color-foreground-secondary));
font-size: 1.4rem;
}
@media screen and (min-width: 1200px) {
.header__toggle-scheme-item span {
display: none;
}
}
.header__toggle-scheme-item svg {
transition: var(--duration-default);
width: 2.4rem;
height: 2.4rem;
}
@media (prefers-color-scheme: light) {
.header__toggle-scheme-item--dark {
display: flex;
}
}
.header__toggle-scheme-item--dark :root,
[data-scheme="light"] .header__toggle-scheme-item--dark {
display: flex;
}
@media (prefers-color-scheme: light) {
:root [data-scheme="auto"] .header__toggle-scheme-item--dark {
display: flex;
}
}
@media (prefers-color-scheme: dark) {
.header__toggle-scheme-item--dark {
display: none;
}
}
@media (prefers-color-scheme: dark) {
:root [data-scheme="auto"] .header__toggle-scheme-item--dark {
display: none;
}
}
[data-scheme="dark"] .header__toggle-scheme-item--dark {
display: none;
}
@media (prefers-color-scheme: light) {
.header__toggle-scheme-item--light {
display: none;
}
}
.header__toggle-scheme-item--light :root,
[data-scheme="light"] .header__toggle-scheme-item--light {
display: none;
}
@media (prefers-color-scheme: light) {
:root [data-scheme="auto"] .header__toggle-scheme-item--light {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.header__toggle-scheme-item--light {
display: flex;
}
}
@media (prefers-color-scheme: dark) {
:root [data-scheme="auto"] .header__toggle-scheme-item--light {
display: flex;
}
}
[data-scheme="dark"] .header__toggle-scheme-item--light {
display: flex;
}
.header__toggle-scheme-item--light .header__toggle-scheme-circle {
order: 1;
}
.header__toggle-scheme-heading {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: 500;
font-size: 1.3rem;
line-height: var(--font-body-line-height);
text-transform: var(--font-header-menu-text-transform);
transition: color var(--duration-default);
}
.header__toggle-scheme-switch {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.2rem 0.6rem;
min-width: 5rem;
min-height: 2.4rem;
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-size: 1.3rem;
line-height: 1;
text-transform: var(--font-header-menu-text-transform);
font-weight: 500;
border-radius: 24px;
}
.header__toggle-scheme-circle {
width: 1.2rem;
height: 1.2rem;
background: #ffffff;
box-shadow: 0px 4px 4px rgba(50, 49, 78, 0.1);
border-radius: 50%;
}
.scheme-toggled[data-scheme] *:not(.swiper-wrapper),
.scheme-toggled[data-scheme] *::after,
.scheme-toggled[data-scheme] *::before {
transition: none !important;
}
.header__shop {
display: none;
}
.header__shop details {
position: static;
}
.header__shop details[open] > .header__shop-wrapper {
animation: animateMenuOpen var(--duration-default) ease;
}
.header__shop-wrapper {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-block: 2rem;
margin-top: -1px;
max-height: 50rem;
overflow-y: auto;
transition: opacity var(--duration-default) 0.1s;
box-shadow: 0rem 2rem 3rem rgba(1, 1, 1, 0),
0 999rem 0 999rem rgba(var(--color-background), 0.8);
z-index: 3;
}
@media screen and (min-width: 1200px) {
.header__shop-wrapper {
padding-block: 2rem 5rem;
}
}
.header__shop-wrapper::-webkit-scrollbar {
width: 0.4rem;
}
.header__shop-wrapper::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-border));
border-radius: 2rem;
}
.header__shop-wrapper .mega-menu-main {
display: grid;
align-items: stretch;
grid-template-columns: 1fr minmax(0, 66.522%);
gap: 2.4rem;
}
.header__shop-wrapper .mega-menu-main.mega-menu-main-1 {
grid-template-columns: 1fr minmax(0, 32.609%);
}
.header__shop-wrapper .mega-menu-main.mega-menu-main-0 {
grid-template-columns: 1fr;
}
.header__shop-link-overlay:empty {
position: absolute;
display: block;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.header__shop .header__submenu {
position: static;
display: grid;
align-items: stretch;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 3.2rem;
margin-left: -1.2rem;
border-radius: 0;
border: none;
box-shadow: none;
}
.header__shop .header__submenu li {
padding: 0;
}
.header__shop .header__submenu .list-menu--disclosure {
position: static;
margin: 0;
width: auto;
}
.header__shop .header__submenu .list-menu--disclosure .header__menu-item {
font-size: 1.4rem;
}
.header__shop-button {
display: flex;
align-items: center;
padding: 1.2rem 1.2rem 1.2rem 0;
}
.header__shop-button .icon-menu {
width: 1.8rem;
height: 1.8rem;
transition: all var(--duration-default);
}
.header__shop-button svg rect:last-child {
transition: all var(--duration-default);
}
.header__shop-button:hover svg rect:last-child {
width: 1.8rem;
}
.list-menu--megamenu-visible .mega-menu {
opacity: 1;
pointer-events: all;
transform: translateY(0rem);
}
.list-menu--megamenu-visible .mega-menu .mega-menu-main {
opacity: 1;
}
.list-menu--megamenu:focus .mega-menu,
.list-menu--megamenu:focus-visible .mega-menu,
.list-menu--megamenu:focus-within .mega-menu,
.list-menu--megamenu:hover .mega-menu {
opacity: 1;
transform: translateY(0rem);
pointer-events: all;
}
.list-menu--megamenu:focus .mega-menu .mega-menu-main,
.list-menu--megamenu:focus-visible .mega-menu .mega-menu-main,
.list-menu--megamenu:focus-within .mega-menu .mega-menu-main,
.list-menu--megamenu:hover .mega-menu .mega-menu-main {
opacity: 1;
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 50rem;
padding-block: 2rem;
opacity: 0;
transform: translateY(-1.5rem);
pointer-events: none;
overflow-y: auto;
transition: all var(--duration-default) ease !important;
box-shadow: 0rem 2rem 3rem rgba(1, 1, 1, 0),
0 999rem 0 999rem rgba(var(--color-background), 0.8);
z-index: 3;
}
@media screen and (min-width: 1360px) {
.mega-menu {
padding-block: 2rem 5rem;
}
}
.mega-menu .mega-menu-main {
display: grid;
align-items: stretch;
grid-template-columns: 1fr minmax(0, 66.522%);
gap: 2.4rem;
opacity: 0;
transition: opacity var(--duration-short) ease !important;
}
.mega-menu .mega-menu-main.mega-menu-main-1 {
grid-template-columns: 1fr minmax(0, 32.609%);
}
.mega-menu .mega-menu-main.mega-menu-main-0 {
grid-template-columns: 1fr;
}
.mega-menu:hover,
.mega-menu:focus,
.mega-menu:focus-visible {
opacity: 1;
pointer-events: all;
transform: translateY(0rem);
}
.mega-menu::-webkit-scrollbar {
width: 0.4rem;
}
.mega-menu::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-border));
border-radius: 2rem;
}
.mega-menu__wrapper {
display: flex;
align-items: flex-start;
height: 100%;
justify-content: flex-start;
flex-wrap: wrap;
max-height: 32rem;
width: 100%;
}
@-moz-document url-prefix() {
.mega-menu .mega-menu__wrapper {
display: block;
}
}
.mega-menu__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.6rem;
margin-left: -1rem;
height: 100%;
max-width: 100%;
text-transform: none;
}
@media screen and (min-width: 1600px) {
.mega-menu__list {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
}
.mega-menu__list .caption-large {
text-transform: none;
}
.mega-menu__link {
min-width: 16rem;
color: rgb(var(--color-foreground-secondary));
font-size: 1rem !important;
text-transform: uppercase !important;
padding: 0 1rem 1rem !important;
letter-spacing: 0.08em !important;
font-family: var(--font-subtitle-family);
font-weight: var(--font-subtitle-weight);
font-style: var(--font-subtitle-style);
}
@media screen and (min-width: 1600px) {
.mega-menu__link {
min-width: 20rem;
}
}
.mega-menu__wrapper + .mega-menu__item {
margin-left: auto;
}
.mega-menu__items {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 2.4rem;
}
.mega-menu__overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: rgb(var(--color-overlay));
z-index: 2;
}
.mega-menu__item {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
min-height: 20rem;
border-radius: 0.2rem;
overflow: hidden;
padding-bottom: 0.3rem;
}
@media screen and (min-width: 1200px) {
.mega-menu__item {
min-height: 26rem;
}
}
@media screen and (min-width: 1600px) {
.mega-menu__item {
min-height: 34rem;
}
}
.mega-menu__item:hover img {
transform: scale(1.05);
transition: transform var(--duration-long) ease;
}
.mega-menu__item .mega-menu__img {
overflow: hidden;
height: 100%;
max-height: 34rem;
width: 100%;
}
.mega-menu__item .mega-menu__img svg {
width: 100%;
height: 100%;
}
.mega-menu__item-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-long) ease;
}
.mega-menu__item-heading {
position: relative;
font-size: 1.8rem;
text-transform: none;
}
.mega-menu__item .title-wrapper {
margin: 1.6rem 0 0;
}
.mega-menu__item .title-wrapper .button {
z-index: 5;
}
.mega-menu__item .title-wrapper span {
padding: 0;
}
.mega-menu__item-text-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.8rem;
z-index: 3;
}
.mega-menu__item-link-overlay:empty {
position: absolute;
inset: 0;
display: block;
z-index: 3;
}
.mega-menu__submenu li:last-child {
margin-bottom: 1.6rem;
}
.mega-menu__submenu li .mega-menu__submenu-item {
padding-left: 1rem;
padding-right: 1rem;
padding-block: 0.4rem;
font-family: var(--font-header-megamenu-family);
font-style: var(--font-header-megamenu-style);
font-weight: var(--font-header-megamenu-weight);
text-transform: var(--font-header-megamenu-text-transform);
font-size: var(--font-header-megamenu-link-size);
letter-spacing: calc(var(--heading-megamenu-letter-spacing) * 0.1);
line-height: 1.5;
}
.mega-menu__submenu li .mega-menu__submenu-item.item-sale {
color: rgb(var(--color-sale));
}
.header__menu-item:focus + .mega-menu,
.header__menu-item:focus-visible + .mega-menu,
.header__menu-item:focus-within + .mega-menu,
.header__menu-item:hover + .mega-menu {
opacity: 1;
transform: translateY(0rem);
pointer-events: all;
}
.header__menu-item:focus + .mega-menu .mega-menu-main,
.header__menu-item:focus-visible + .mega-menu .mega-menu-main,
.header__menu-item:focus-within + .mega-menu .mega-menu-main,
.header__menu-item:hover + .mega-menu .mega-menu-main {
opacity: 1;
}
.menu-drawer .mega-menu__items {
flex-direction: column;
max-width: 100%;
padding-bottom: 1.2rem;
}
.header__follow {
display: none;
}
@media screen and (min-width: 1200px) {
.header__follow {
display: block;
min-height: 7rem;
}
}
.header__follow details[open] > .header__follow-modal {
opacity: 1;
transform: translateY(0rem);
transition: var(--duration-default) ease;
}
.header__follow details:not([open]) > .header__follow-modal {
opacity: 0;
transform: translateY(-1.5rem);
transition: all var(--duration-default) ease;
}
.header__follow .details__follow {
position: relative;
min-height: 7rem;
display: flex;
align-items: center;
cursor: default;
}
.header__follow .details__follow:hover .header__follow-modal {
opacity: 1;
visibility: visible;
transform: translateY(0rem);
}
.header__follow
.details__follow:hover
.header__follow-modal
.header__follow-main {
opacity: 1;
}
.header__follow .header__follow-main {
opacity: 0;
transition: opacity var(--duration-short) ease;
}
.header__follow .header__icon--follow {
font-family: var(--font-header-menu-family);
font-style: var(--font-header-menu-style);
font-weight: var(--font-header-menu-weight);
text-transform: var(--font-header-menu-text-transform);
font-size: var(--font-header-link-size);
letter-spacing: calc(var(--heading-menu-letter-spacing) * 0.1);
}
.header__follow .header__follow__overlay {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(var(--color-overlay));
}
.header__follow .header__follow-modal {
visibility: hidden;
position: absolute;
height: max-content;
top: 100%;
right: 0;
box-shadow: 0px 25px 60px 0px rgba(61, 67, 129, 0.05);
opacity: 0;
transform: translateY(-1.5rem);
transition: all var(--duration-default) ease;
z-index: 5;
}
.header__follow .header__follow-modal.header__follow-modal-open {
opacity: 1;
transform: translateY(0rem);
}
.header__follow .header__follow-modal .header__follow-img-block {
position: relative;
width: 41.3rem;
min-height: 24.3rem;
text-transform: none;
display: flex;
align-items: center;
}
.header__follow
.header__follow-modal
.header__follow-img-block
.header__follow-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.header__follow .header__follow-modal .header__follow-text {
position: relative;
height: 100%;
z-index: 2;
padding: 5rem 4rem;
}
.header__follow
.header__follow-modal
.header__follow-text
.header__follow-text-heading {
text-align: center;
}
.header__follow
.header__follow-modal
.header__follow-text
.header__follow-text-info {
font-size: 1.2rem;
margin-top: 0.8rem;
opacity: 0.8;
}
.header__follow .header__follow-modal .header__follow-text p {
margin: 0;
}
.header__follow .header__follow-modal .newsletter__form {
margin-top: 1.6rem;
}
.header__follow .header__follow-modal .newsletter__form .field {
min-height: 4.5rem;
}
.header__follow .header__follow-modal .newsletter__form .field input {
padding: 0 1.25rem 0 2.4rem;
border-radius: 0.2rem 0 0 0.2rem;
}
.header__follow .header__follow-modal .newsletter__form .field label::after {
display: none;
}
.header__follow .header__follow-modal .newsletter__form .newsletter__button {
position: static;
min-width: 13.9rem;
width: auto;
min-height: 4.5rem;
font-size: 1.2rem;
}
.header__follow
.header__follow-modal
.newsletter__form
.newsletter-form__inner {
gap: 0;
background: rgb(var(--color-background));
border-radius: 0.2rem;
}
.header__follow .header__follow-modal .header__list-social {
justify-content: center;
padding: 1.8rem;
}
[data-hover-opacity] {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity] > * .icon {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity] > * .header__icon--follow {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity] > * .item-sale {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity] .cart-have-count {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity] .currency-country {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity] .localization-selector.link .value {
transition: opacity var(--duration-default) ease;
}
[data-hover-opacity].opacity {
opacity: 0.6;
}
[data-hover-opacity].opacity > * .icon {
opacity: 0.6;
}
[data-hover-opacity].opacity > * .item-sale {
opacity: 0.8;
}
[data-hover-opacity].opacity > * .header__icon--follow {
opacity: 0.6;
}
[data-hover-opacity].opacity .cart-have-count {
opacity: 0.6;
}
[data-hover-opacity].opacity .item-sale {
opacity: 0.8;
}
[data-hover-opacity].opacity .currency-country {
opacity: 0.6;
}
[data-hover-opacity].opacity .localization-selector.link .value {
opacity: 0.6;
}
/* Breadcrumb */
.breadcrumb {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
margin: 0;
font-size: 1.2rem;
font-weight: var(--font-subtitle-weight);
color: rgb(var(--color-foreground-secondary));
margin-bottom: 2.4rem;
margin-top: 1.6rem;
letter-spacing: -0.02em;
}
.breadcrumb__delimiter {
display: flex;
align-items: center;
justify-content: center;
}
.breadcrumb--center {
justify-content: center;
}
.breadcrumb a {
position: relative;
font-weight: var(--font-subtitle-weight);
text-underline-offset: 2px;
color: rgb(var(--color-foreground-secondary));
text-decoration-color: currentColor;
text-decoration-thickness: unset;
transition: color var(--duration-default);
/*&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0.1rem;
background-color: currentColor;
transition: width var(--duration-default);
}
&:hover::after {
animation: link-hover var(--duration-long);
}*/
}
.breadcrumb a:hover {
color: rgb(var(--color-button));
}
/* Popup */
.popup-scroll-hidden {
overflow: hidden;
width: 100%;
}
.popup-animated {
animation-duration: 0.5s;
animation-fill-mode: both;
overflow: hidden !important;
}
@keyframes popupOpenFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes popupExitFade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes popupOpenSlide {
from {
transform: translate3d(0, 100vh, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes popupExitSlide {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100vh, 0);
}
}
@keyframes popupOpenZoom {
from {
opacity: 0;
transform: scale(1.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes popupExitZoom {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.1);
}
}
@keyframes popupOpenSlideFade {
from {
opacity: 0;
transform: translate3d(0, 4rem, 0);
visibility: visible;
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes popupExitSlideFade {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
visibility: hidden;
transform: translate3d(0, 4rem, 0);
}
}
.popupOpenFade {
animation-name: popupOpenFade;
}
.popupExitFade {
animation-name: popupExitFade;
}
.popupOpenSlide {
animation-name: popupOpenSlide;
}
.popupExitSlide {
animation-name: popupExitSlide;
}
.popupOpenZoom {
animation-name: popupOpenZoom;
}
.popupExitZoom {
animation-name: popupExitZoom;
}
.popupOpenSlideFade {
animation-name: popupOpenSlideFade;
}
.popupExitSlideFade {
animation-name: popupExitSlideFade;
}
.popup {
display: none;
position: fixed;
z-index: 999999;
max-width: calc(100vw - 4rem);
max-height: calc(100vh - 4rem);
-webkit-backface-visibility: hidden;
}
@media screen and (min-width: 1200px) {
.popup {
max-width: calc(100vw - 12.8rem);
max-height: calc(100vh - 6.4rem);
}
}
.popup--top {
top: 2rem;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
@media screen and (min-width: 750px) {
.popup--top {
top: 30px;
}
}
.popup--top-left {
top: 2rem;
left: 2rem;
}
@media screen and (min-width: 750px) {
.popup--top-left {
top: 30px;
left: 30px;
}
}
.popup--top-right {
top: 2rem;
right: 2rem;
}
@media screen and (min-width: 750px) {
.popup--top-right {
top: 30px;
right: 30px;
}
}
.popup--bottom {
bottom: 2rem;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
@media screen and (min-width: 750px) {
.popup--bottom {
bottom: 30px;
}
}
.popup--bottom-left {
left: 2rem;
bottom: 2rem;
}
@media screen and (min-width: 750px) {
.popup--bottom-left {
left: 30px;
bottom: 30px;
}
}
.popup--bottom-right {
right: 2rem;
bottom: 2rem;
}
@media screen and (min-width: 750px) {
.popup--bottom-right {
right: 30px;
bottom: 30px;
}
}
.popup--left {
left: 2rem;
top: 50%;
transform: translate3d(0, -50%, 0);
}
@media screen and (min-width: 750px) {
.popup--left {
left: 30px;
}
}
.popup--right {
top: 50%;
right: 2rem;
transform: translate3d(0, -50%, 0);
}
@media screen and (min-width: 750px) {
.popup--right {
right: 30px;
}
}
.popup--center {
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.popup-wrap {
position: relative;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.075);
}
.popup-wrap::-webkit-scrollbar {
width: 0.4rem;
}
.popup-wrap::-webkit-scrollbar-track {
background: rgb(var(--color-background));
}
.popup-wrap::-webkit-scrollbar-thumb {
background: rgb(var(--color-foreground), 0.3);
}
.popup-container {
width: 100%;
width: 100%;
background: #fff;
border-radius: 0.5rem;
overflow: hidden;
width: 100%;
background: #fff;
border-radius: 0.5rem;
overflow: hidden;
}
.popup-outer {
position: relative;
display: flex;
flex-direction: column;
}
.popup-text {
color: rgb(var(--color-foreground-secondary));
}
.popup-text a {
text-decoration: underline;
transition: color var(--duration-default);
}
.popup-text p {
margin: 0;
}
.popup .popup-close {
position: absolute;
padding: 1.5rem;
top: 0;
right: 0;
z-index: 2;
}
.popup-open {
display: flex;
}
@media (max-width: 576px) {
.popup-open[data-mobile-disable="true"] {
display: none;
}
.popup-open[data-mobile-disable="true"] + .popup-overlay {
display: none;
}
}
.popup-open + .popup-overlay {
display: block;
}
.popup-overlay {
background-color: rgba(var(--color-base-background-2), 0.8);
position: fixed;
display: none;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999998;
}
.popup-overlay .popup-wrap {
box-shadow: none;
}
.popup-thumbnail img {
width: 100%;
}
.popup-trigger {
cursor: pointer;
}
@media (max-width: 750px) {
.popup .modal-close-button {
color: white;
}
.popup .modal-close-button svg {
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
}
.popup-main {
border-radius: 0.2rem;
overflow: hidden;
max-width: calc(100vw - 4rem);
max-height: calc(100vh - 4rem);
box-shadow: 0px 25px 60px 0px rgba(61, 67, 129, 0.0509803922);
}
@media (min-width: 1200px) {
.popup-main {
max-width: calc(100vw - 12.8rem);
max-height: calc(100vh - 6.4rem);
}
}
.popup-main-image--left .popup-outer_image::before,
.popup-main-image--right .popup-outer_image::before {
content: "";
display: none;
height: 100%;
width: 0;
padding-bottom: 45%;
}
@media (min-width: 750px) {
.popup-main-image--left .popup-outer_image::before,
.popup-main-image--right .popup-outer_image::before {
display: block;
}
}
.popup-main-image--left .popup-outer_image .popup-content,
.popup-main-image--right .popup-outer_image .popup-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.popup-main .popup-heading {
margin-top: 0;
margin-bottom: 1.8rem;
font-family: var(--font-popups-heading-family);
font-style: var(--font-popups-heading-style);
font-weight: var(--font-popups-heading-weight);
font-size: calc(var(--font-popup-heading-scale) * 2rem);
}
.popup-main .popup-description {
margin-top: 0;
margin-bottom: 2.4rem;
font-size: calc(var(--font-popup-desc-scale) * 1.3rem);
letter-spacing: -0.03em;
color: rgb(var(--color-foreground-secondary));
}
@media screen and (min-width: 750px) {
.popup-main .popup-description {
font-size: calc(var(--font-popup-desc-scale) * 1.6rem);
}
}
.popup-main .popup-text {
margin-top: 0.8rem;
font-size: calc(var(--font-popup-text-scale) * 1rem);
color: rgb(var(--color-foreground-secondary));
letter-spacing: -0.02em;
}
@media screen and (min-width: 750px) {
.popup-main .popup-text {
font-size: calc(var(--font-popup-text-scale) * 1.2rem);
}
}
.popup-main .popup-text p {
color: inherit;
font-weight: var(--font-heading-weight);
}
.popup-main .popup-text p a {
color: rgb(var(--color-foreground));
transition: color var(--duration-default);
text-decoration: none;
}
.popup-main .popup-text p a:hover {
color: rgb(var(--color-foreground-secondary));
}
.popup-main .list-social__item {
transition: opacity var(--duration-default);
}
.popup-main .list-social__item:hover {
opacity: 0.7;
}
@media (min-width: 750px) {
.popup-main .popup-outer {
flex-direction: row;
}
}
.popup-main .popup-thumbnail {
flex: 1 0 50%;
display: flex;
border-radius: 2px 0px 0px 2px;
overflow: hidden;
}
@media (max-width: 750px) {
.popup-main .popup-thumbnail {
max-height: 30vh;
align-items: center;
}
}
.popup-main .popup-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.popup-main .popup-content {
padding: 29px;
flex: 1 0 50%;
order: 2;
background-color: rgb(var(--color-background));
}
@media screen and (min-width: 576px) {
.popup-main .popup-content {
padding: 58px;
}
}
.popup-main .popup-content:first-child:last-child {
flex: 1 0 100%;
}
.popup-main--no-image .popup-content {
padding: 58px;
}
@media (min-width: 576px) {
.popup-main-image--right .popup-outer {
flex-direction: row-reverse;
}
}
.popup-main-image--top .popup-outer {
flex-direction: column;
}
.popup-main-image--top .popup-thumbnail {
position: relative;
padding-bottom: 50%;
}
.popup-main-image--top .popup-thumbnail img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.popup-main-image--bottom .popup-outer {
flex-direction: column-reverse;
}
.popup-main-image--bottom .popup-thumbnail {
position: relative;
padding-bottom: 55%;
}
.popup-main-image--bottom .popup-thumbnail img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.popup-main .newsletter-form .field,
.popup-main .newsletter-form .button {
min-height: 5.7rem;
}
.popup-main .newsletter-form .button {
max-width: 100%;
}
.popup-main .newsletter-form .field__label::after {
display: none;
}
.popup-main .newsletter-form__inner {
display: flex;
gap: 0.8rem;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.popup-main .newsletter-form__field-wrapper {
flex: 1;
}
.popup-main .list-social {
margin-left: -0.4rem;
margin-top: 1.2rem;
}
.notification-banner {
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0px 25px 40px 0px rgb(var(--color-overlay), 0.2);
}
.notification-banner .popup-outer {
padding: 35.2941176471px 30px;
background-color: rgb(var(--color-background));
}
.notification-banner .popup-heading {
margin: 0;
font-family: var(--font-popups-heading-family);
font-style: var(--font-popups-heading-style);
font-weight: var(--font-popups-heading-weight);
font-size: calc(var(--font-notification-heading-scale) * 2rem);
letter-spacing: -0.03em;
}
.notification-banner .popup-heading + .popup-text {
margin-top: 0.8rem;
}
.notification-banner .popup-text {
padding-right: 1rem;
font-family: var(--font-popups-text-family);
font-style: var(--font-popups-text-style);
font-weight: var(--font-popups-text-weight);
font-size: calc(var(--font-notification-text-scale) * 1.3rem);
}
.notification-banner .popup-button {
width: 100%;
margin-top: 1.6rem;
}
.notification-banner--bar.popup--top {
width: 100%;
max-width: 100%;
top: 0;
left: 0;
bottom: auto;
transform: none;
border-radius: 0;
}
.notification-banner--bar.popup--bottom {
width: 100%;
max-width: 100%;
top: auto;
left: 0;
bottom: 0;
transform: none;
border-radius: 0;
}
.notification-banner--bar .popup-outer {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
}
.notification-banner--bar .popup-close {
top: 1rem;
right: 1rem;
}
@media (min-width: 750px) {
.notification-banner--bar .popup-outer {
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1.6rem 2.4rem;
margin: 0 auto;
}
.notification-banner--bar .popup-close {
top: 50%;
transform: translateY(-50%);
right: 1rem;
}
.notification-banner--bar .button {
margin-top: 0;
width: auto;
}
}
.notification-banner--banner .popup-outer {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
padding: 0.2rem;
}
.notification-banner--banner .popup-outer-image--right {
flex-direction: row-reverse;
}
.notification-banner--banner .popup-outer-image--top {
flex-direction: column;
}
.notification-banner--banner .popup-outer-image--bottom {
flex-direction: column-reverse;
}
.notification-banner--banner
.popup-outer-image--top
.notification-banner__image,
.notification-banner--banner
.popup-outer-image--bottom
.notification-banner__image {
position: relative;
padding-bottom: 55%;
}
.notification-banner--banner
.popup-outer-image--top
.notification-banner__image
img,
.notification-banner--banner
.popup-outer-image--bottom
.notification-banner__image
img {
position: absolute;
inset: 0;
}
.notification-banner--banner .popup-button {
width: auto;
width: 100%;
max-width: 18rem;
padding-left: 1rem;
padding-right: 1rem;
}
.notification-banner--banner .notification-banner__image {
flex: 1 35%;
min-width: 7.6rem;
align-self: stretch;
display: flex;
border-radius: 0.4rem;
overflow: hidden;
}
.notification-banner--banner .notification-banner__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.notification-banner--banner .notification-banner__content {
flex: 1 65%;
padding: 2.4rem 3.2rem 2.4rem 2.4rem;
}
.notification-banner--banner .popup-close {
top: 0.4rem;
right: 0.4rem;
}
.age-verification {
position: fixed;
inset: 0;
-webkit-backface-visibility: hidden;
width: 100vw;
height: 100vh;
max-width: unset;
max-height: unset;
padding: 2.4rem;
background-color: rgb(var(--color-background));
}
@media screen and (min-width: 750px) {
.age-verification {
padding: 6.4rem;
}
}
.age-verification .popup-text p {
text-align: center;
}
.age-verification__wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
box-shadow: none;
}
.age-verification__content {
display: flex;
flex-direction: column;
align-items: center;
}
.age-verification__question {
display: none;
}
.age-verification__question.show {
display: block;
}
.age-verification__heading {
margin-top: 0;
margin-bottom: 1.6rem;
text-align: center;
}
.age-verification__buttons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.8rem;
margin-top: 2.4rem;
}
@media screen and (min-width: 576px) {
.age-verification__buttons {
flex-direction: row;
}
}
.age-verification__buttons .button {
min-width: 12rem;
}
.age-verification__declined {
display: none;
}
.age-verification__declined.show {
display: block;
}
}#HeaderMenu-Winter-Sale > span {
color: #823827;
}