/** Shopify CDN: Minification failed
Line 10528:1 Expected identifier but found whitespace
Line 10531:0 Unexpected "@media"
**/
.wt-footer {
padding-top: 1px;
padding-bottom: 1px;
background: var(--color-footer-background);
color: var(--color-footer-text);
}
.wt-footer a {
color: inherit;
}
.wt-footer a:focus-visible {
color: var(--color-footer-text);
}
.wt-footer__big-logo {
width: 100%;
display: flex;
justify-content: center;
margin-top: var(--section-gap-top);
margin-bottom: var(--section-gap-bottom);
}
.wt-footer__big-logo-img {
width: var(--big-logo-width, 100%);
max-width: var(--site-max-width);
height: 100%;
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.wt-footer__big-logo-img {
padding-left: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
}
}
@media (min-width: 1800px) {
.wt-footer__big-logo-img {
max-width: var(--site-max-width-big);
}
}
.wt-footer__body {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 2);
display: flex;
flex-direction: column;
}
@media (min-width: 1200px) {
.wt-footer__body {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-footer__body {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 900px) {
.wt-footer__body {
margin-top: calc(var(--gap, 8px) * 3);
margin-bottom: calc(var(--gap, 8px) * 3);
flex-direction: row;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 4);
}
}
@media (min-width: 1200px) {
.wt-footer__body {
flex-wrap: nowrap;
}
}
.wt-footer__text {
margin-bottom: calc(var(--gap, 8px) * 2);
font-size: 16px;
line-height: normal;
}
@media (min-width: 900px) {
.wt-footer__text {
font-size: 16px;
}
}
.wt-footer__block {
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
flex: 1 1 31%;
}
.wt-footer__block--menu {
flex: 1 1 15%;
}
@media (min-width: 900px) {
.wt-footer__block--image_with_text {
padding-right: calc(var(--gap, 8px) * 3);
}
}
.wt-footer__block:not(:first-child) {
border-top: 1px solid rgba(var(--color-footer-text-rgb), 0.2);
}
@media (min-width: 900px) {
.wt-footer__block:not(:first-child) {
border: 0;
}
}
@media (min-width: 1200px) {
.wt-footer__block {
padding-top: calc(var(--gap, 8px) * 3);
padding-bottom: calc(var(--gap, 8px) * 3);
flex: 1 1 25%;
}
.wt-footer__block--menu {
flex: 1 1 15%;
}
}
.wt-footer__additional {
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex-basis: 100%;
}
.wt-footer__additional__form {
width: 100%;
}
.wt-footer__additional .wt-footer__title {
text-align: center;
}
@media (min-width: 900px) {
.wt-footer__additional .wt-footer__title {
text-align: left;
}
}
.wt-footer__localization__triggers {
display: flex;
align-items: center;
gap: calc(var(--gap, 8px) * 2);
}
.wt-footer__localization__triggers .wt-localization-trigger {
text-transform: capitalize;
font-size: inherit;
}
.wt-footer__social {
width: 100%;
}
.wt-footer__social .social-links {
margin-bottom: calc(var(--gap, 8px) * 3);
}
@media (min-width: 900px) {
.wt-footer__social .social-links {
justify-content: flex-start;
}
}
.wt-footer__links {
padding: 0;
}
.wt-footer__links--no-heading {
padding-top: calc(var(--gap, 8px) * 1);
}
.wt-footer__msg {
padding: 0;
flex-basis: 100%;
}
.wt-footer__msg--no-heading {
padding-top: calc(var(--gap, 8px) * 1);
}
.wt-footer__text {
padding-block: calc(var(--gap, 8px) * 1);
}
.wt-footer__text a:not([class*="button"]) {
text-decoration: none !important;
}
.wt-footer__text p:first-child {
margin-top: 0;
}
.wt-footer__text p:last-child {
margin-bottom: 0;
}
.wt-footer__image {
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 2);
height: auto;
max-width: min(var(--size-image), 140px);
width: 100%;
height: 100%;
display: block;
}
@media (min-width: 900px) {
.wt-footer__image {
max-width: var(--size-image);
}
}
.wt-footer__image-with-text {
color: var(--image-with-text-color);
}
.wt-footer__image-with-text__image {
max-width: var(--image-width-mobile);
width: 100%;
height: auto;
display: block;
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 2);
}
@media (min-width: 900px) {
.wt-footer__image-with-text__image {
max-width: var(--image-width-desktop);
}
}
.wt-footer__list {
overflow: hidden;
}
.wt-footer__list__item {
margin-block: calc(var(--gap, 8px) * 1);
font-size: 16px;
}
@media (min-width: 900px) {
.wt-footer__list__item {
font-size: 16px;
}
}
@media (max-width: 1199px) {
.wt-footer__list__item {
margin: 0;
}
.wt-footer__list__item:last-child {
margin-bottom: calc(var(--gap, 8px) * 2);
}
.wt-footer__list__item a {
display: inline-block;
padding: calc(var(--gap, 8px) * 1) 0;
}
}
.wt-footer__list__item__text--underline {
text-decoration: none;
background-image: linear-gradient(
var(--clr-underline, var(--color-footer-text)),
var(--clr-underline, var(--color-footer-text))
);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0% 1px;
transition: background-size 0.3s ease-in-out;
}
@media (hover: hover) {
.wt-footer__list__item__text--underline:hover {
background-size: 100% 1px;
color: inherit;
}
}
.wt-footer__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
line-height: 1.2;
font-size: 18px;
padding-top: calc(var(--gap, 8px) * 2.5);
padding-bottom: calc(var(--gap, 8px) * 2.5);
}
@media (min-width: 900px) {
.wt-footer__title {
font-size: 24px;
padding-top: calc(var(--gap, 8px) * 2.5);
padding-bottom: calc(var(--gap, 8px) * 2.5);
}
}
.wt-footer__msg > .wt-footer__title {
padding-bottom: 0;
}
@media (min-width: 900px) {
.wt-footer__title__icon {
opacity: 0;
}
}
.wt-footer__aside {
margin-top: calc(var(--gap, 8px) * 4);
margin-bottom: calc(var(--gap, 8px) * 4);
display: flex;
flex-direction: column;
gap: calc(var(--gap, 8px) * 4);
}
.wt-footer__aside__wrapper {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--gap, 8px) * 4);
width: 100%;
}
@media (min-width: 1200px) {
.wt-footer__aside__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-footer__aside__wrapper {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 900px) {
.wt-footer__aside__wrapper > *:last-child {
margin-left: auto;
}
}
.wt-footer__aside__wrapper > *:only-child {
justify-content: center;
margin: auto;
}
.wt-footer__aside__copy {
margin: 0;
text-align: center;
font-size: 1.2rem;
opacity: 0.65;
}
.wt-footer__aside-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--gap, 8px) * 1);
justify-content: center;
}
@media (min-width: 900px) {
.wt-footer__aside-list {
justify-content: flex-start;
}
}
.wt-footer__aside-list__item {
height: 3rem;
width: 4.6rem;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 900px) {
.wt-footer__aside-list__item {
height: 4rem;
width: 5.6rem;
}
}
.wt-footer__aside-list__item .icon {
width: 100%;
height: 100%;
}
.wt-footer__aside-block {
display: flex;
align-items: center;
gap: 16px;
}
.wt-footer__aside-block--social span {
font-weight: 700;
font-size: 20px;
}
.wt-footer__aside-block__wrapper {
display: flex;
gap: calc(var(--gap, 8px) * 4);
z-index: 1;
}
@media (max-width: 599px) {
.wt-footer__aside-block__wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
}
@media (max-width: 399px) {
.wt-footer__aside-block__wrapper {
justify-content: center;
gap: calc(var(--gap, 8px) * 4);
}
}
.wt-footer__aside-block--payment {
justify-content: flex-end;
}
.wt-footer__aside-block--payment .wt-footer__aside-block__title {
display: none;
}
@media (min-width: 900px) {
.wt-footer__aside-block--payment .wt-footer__aside-block__title {
display: block;
}
}
.wt-footer__aside-block--payment-monochrome .icon {
filter: grayscale(100%);
}
@media (min-width: 900px) {
.wt-footer__aside-block--shipping {
justify-content: flex-end;
}
}
.wt-footer__aside-block--localization select {
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
width: 100%;
flex-shrink: 1;
appearance: none;
padding-right: calc(var(--gap, 8px) * 5);
padding-left: calc(var(--gap, 8px) * 2);
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-position: right calc(var(--gap, 8px) * 1.75) center;
background-size: calc(var(--gap, 8px) * 2);
background-repeat: no-repeat;
max-width: 180px;
width: 100%;
background-color: white;
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius-button);
}
.wt-footer__aside-block__title {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
margin-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 900px) {
.wt-footer__aside-block__title {
margin-bottom: 0;
padding-bottom: 0;
}
}
.disclosure {
position: relative;
}
.disclosure svg {
width: 12px;
color: #404040;
stroke-width: 0.3px;
}
.disclosure button {
padding: 11.25px 16px;
height: 41.75px;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: initial;
letter-spacing: normal;
color: black;
min-width: 200px;
}
@media (min-width: 1200px) {
.disclosure button {
height: 49.69px;
padding: 13.5px 16px;
}
}
.disclosure button:hover,
.disclosure button:focus-visible {
background-color: #ffffff;
color: black;
}
.disclosure button .icon-caret {
position: static;
}
.disclosure__list-wrapper {
position: absolute;
bottom: 115%;
width: 100%;
max-height: 350px;
overflow-y: scroll;
background: white;
border-radius: var(--border-radius);
}
@media (max-width: 599px) {
.disclosure__list-wrapper {
right: 0;
}
}
.disclosure__list-wrapper--country {
left: 0;
right: auto;
}
.disclosure__list-wrapper li {
display: flex;
justify-content: start;
}
.disclosure__list-wrapper li a {
padding: 0.75em 1em;
width: 100%;
}
@media (min-width: 1200px) {
.disclosure__list-wrapper li a:hover,
.disclosure__list-wrapper li a:focus-visible {
background-color: #1453ff;
color: white;
}
}
.disclosure__list-wrapper a {
color: black;
}
.list-social.list-unstyled {
display: flex;
gap: 16px;
}
.list-social.list-unstyled li a {
display: flex;
justify-content: center;
align-items: center;
}
.list-social.list-unstyled li svg {
width: 20px;
height: 20px;
}
.template-password {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.template-password #shopify-section-main-password-header,
.template-password #shopify-section-main-password-footer {
flex-shrink: 0;
}
.template-password > section > * {
padding-top: min(
var(--section-margin-block-mobile),
var(--section-gap-top, calc(var(--gap, 8px) * var(--section-gap, 2)))
);
padding-bottom: min(
var(--section-margin-block-mobile),
var(--section-gap-bottom, calc(var(--gap, 8px) * var(--section-gap, 2)))
);
}
@media (min-width: 1200px) {
.template-password > section > * {
padding-top: var(
--section-gap-top,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
padding-bottom: var(
--section-gap-bottom,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
}
}
.template-password .wt-password__page-footer {
background-color: var(--color-custom-background);
color: var(--color-custom-text);
padding-top: min(
var(--section-margin-block-mobile),
var(--section-gap-top, calc(var(--gap, 8px) * var(--section-gap, 2)))
);
padding-bottom: min(
var(--section-margin-block-mobile),
var(--section-gap-bottom, calc(var(--gap, 8px) * var(--section-gap, 2)))
);
}
.scroll-trigger--offscreen {
opacity: 0;
transform: translateY(50px);
}
.scroll-trigger {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.3s,
transform 0.3s;
}
/* Add any zoom-in related styles here */
@media (prefers-reduced-motion: no-preference) {
.scroll-trigger.animate--fade-in,
.scroll-trigger.animate--slide-in {
opacity: 0.01;
}
.scroll-trigger.animate--slide-in {
transform: translateY(2rem);
}
.scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
opacity: 1;
animation: var(--animation-fade-in);
}
.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
animation: var(--animation-slide-in);
animation-delay: calc(var(--animation-order) * 75ms);
}
.scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
.scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
.scroll-trigger.scroll-trigger--design-mode .slider,
.scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
opacity: 1;
animation: none;
transition: none;
}
.scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
transform: translateY(0);
}
@keyframes slideIn {
from {
transform: translateY(2rem);
opacity: 0.01;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0.01;
}
to {
opacity: 1;
}
}
}
@media (max-width: 899px) {
.disabled-on-mobile.scroll-trigger,
.disabled-on-mobile.scroll-trigger--offscreen,
.disabled-on-mobile.scroll-trigger.animate--fade-in,
.disabled-on-mobile.scroll-trigger.animate--slide-in {
opacity: 1;
transform: none;
animation: none;
transition: none;
}
.scroll-trigger:not(
.scroll-trigger--offscreen
).animate--slide-in.disabled-on-mobile {
animation: none;
}
}
/**
* /snippets/component-button.liquid
*/
button,
.wt-button {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
text-align: center;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
}
@media (hover: hover) {
button:hover,
.wt-button:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
button[disabled],
.wt-button[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.wt-button--full-width {
width: 100%;
}
.wt-button--primary {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
}
@media (hover: hover) {
.wt-button--primary:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-button--primary.loading {
color: transparent;
}
.wt-button--secondary {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
}
@media (hover: hover) {
.wt-button--secondary:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.wt-button--full-width {
display: flex;
width: 100%;
}
.wt-button.loading {
color: transparent;
position: relative;
}
.wt-button.loading > .loading-overlay__spinner {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
height: 100%;
display: flex;
align-items: center;
}
.wt-button.loading > .loading-overlay__spinner .spinner {
width: fit-content;
}
.wt-button.loading > .loading-overlay__spinner .path {
stroke: var(--color-button-primary-text);
}
.lds-ring,
.lds-ring div {
box-sizing: border-box;
}
.lds-ring {
--button-line-height: 1.15;
--loader-size: calc(var(--button-line-height) * var(--font-button-size));
display: inline-block;
position: relative;
width: var(--loader-size);
height: var(--loader-size);
}
.lds-ring div {
--loader-spinner-size: var(--loader-size);
--loader-border-width: calc(var(--loader-spinner-size) * 0.15);
box-sizing: border-box;
display: block;
position: absolute;
width: var(--loader-spinner-size);
height: var(--loader-spinner-size);
border: var(--loader-border-width) solid currentColor;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: currentColor transparent transparent transparent;
transform: scale(0.25);
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.product__xr-button[data-shopify-xr-hidden] {
display: none;
}
.counter {
display: flex;
height: 100%;
align-items: center;
}
.counter-wrapper {
border: 1px solid var(--color-input-border);
position: relative;
border-radius: var(--border-radius-button);
background-color: var(--color-input-background);
}
.counter button {
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
width: 3.6rem;
height: 3.6rem;
border-color: transparent;
background: transparent;
font-size: 2rem;
color: var(--color-input-placeholder);
}
@media (hover: hover) {
.counter button:hover {
color: var(--color-input-text);
}
}
.counter input {
max-width: 4rem;
text-align: center;
padding: calc(var(--gap, 8px) * 1.25) calc(var(--gap, 8px) * 0.5)
calc(var(--gap, 8px) * 1);
color: var(--color-input-text);
}
.wt-rating {
display: flex;
align-items: center;
color: var(--color-star-rating);
}
.wt-rating__star::before {
content: "\e9d7";
}
.wt-rating__star-fill::before {
content: "\e9d9";
}
.wt-rating__stars {
font-family: "icomoon";
font-size: 18px;
display: inline-flex;
position: relative;
letter-spacing: 2px;
color: var(--color-star-rating);
}
.wt-rating__base,
.wt-rating__value {
display: flex;
}
.wt-rating__base .svg-icon,
.wt-rating__value .svg-icon {
height: 100%;
width: auto;
flex-shrink: 0;
}
.wt-rating__value {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.wt-rating__counter {
font-size: 1rem;
color: var(--color-body-text-light);
}
@media (min-width: 1200px) {
.wt-rating__counter {
font-size: 1.2rem;
}
}
@media screen and (min-width: 750px) {
.price {
margin-bottom: 0;
}
}
.price > * {
display: inline-block;
vertical-align: top;
}
.price dl {
margin-block: 0;
}
.price dd {
margin-inline-start: 0;
}
.price--unavailable {
visibility: hidden;
}
.price--end {
text-align: right;
}
.price-item {
margin: 0 1rem 0 0;
}
@media (max-width: 1199px) {
.price-item {
margin: 0 0.5rem 0 0;
}
}
[dir="rtl"] .price-item {
margin: 0 0 0 1rem;
}
@media (max-width: 1199px) {
[dir="rtl"] .price-item {
margin: 0 0 0 0.5rem;
}
}
.price__regular .price-item--regular {
margin-right: 0;
color: var(--color-price);
}
.price:not(.price--show-badge) .price-item--last:last-of-type {
margin: 0;
}
.price--large {
font-size: 1.6rem;
line-height: calc(1 + 0.5 / var(--font-body-scale));
letter-spacing: 0.13rem;
}
@media screen and (min-width: 750px) {
.price--large {
font-size: 1.8rem;
}
}
.price--on-sale {
white-space: nowrap;
}
.price--sold-out .price__availability,
.price__regular {
display: block;
}
.price__sale,
.price__availability,
.price .price__badge-sale,
.price .price__badge-sold-out,
.price--on-sale .price__regular,
.price--on-sale .price__availability {
display: none;
}
.price .badge {
margin-left: 10px;
margin-right: 10px;
}
.price__badge {
display: inline-flex;
vertical-align: middle;
background: var(--color-sale-price);
color: var(--color-background);
border-color: var(--color-sale-price);
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
text-align: center;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
}
.price__badge[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.price--center {
display: initial;
justify-content: center;
}
.price--on-sale .price-item--regular {
text-decoration: line-through;
color: var(--color-sale-price);
}
.unit-price {
display: block;
font-size: 1.1rem;
margin-top: 0.2rem;
text-transform: uppercase;
}
.unit-price .price-item--last {
font-family: var(--font-price);
}
.price__sale.visible {
display: flex;
flex-direction: column-reverse;
}
@media (min-width: 1200px) {
.price__sale.visible {
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
justify-content: flex-end;
}
}
@media (min-width: 1200px) {
.price__sale.visible span {
display: flex;
justify-content: flex-start;
align-items: center;
}
}
.price__sale.visible-main-product {
display: flex;
gap: 2px;
}
.price__sale .price__sale__details-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.price__sale .price__sale__details-wrapper .price-item {
white-space: normal;
}
.price__sale .price__details {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 1199px) {
.price__sale .price__details {
gap: 4px;
}
}
.price__sale .price__details .price-item--sale {
color: var(--color-price);
}
.price__sale .price-item--lower {
color: var(--color-price);
}
@media (max-width: 1199px) {
.price__sale .price-item--lower {
font-size: 13px;
}
}
.price__sale .price-item--percent {
display: flex;
align-items: center;
padding: 4px 6px;
background-color: var(--color-sale-badge-background);
color: var(--color-sale-badge-text);
border-radius: var(--border-radius-button);
font-weight: var(--font-price-weight);
font-size: calc(var(--font-base-size) - 2px);
}
@media (min-width: 1200px) {
.price__sale .price-item--percent {
display: flex;
align-items: center;
font-size: calc(var(--font-base-size) - 4px);
}
}
.price__sale .price-item--percent.desktop {
display: flex;
align-items: center;
padding: 0 4px;
background-color: var(--color-sale-badge-background);
color: var(--color-sale-badge-text);
border-radius: var(--border-radius-button);
font-size: calc(var(--font-base-size) - 2px);
}
.product__tax.caption.rte {
font-size: 1rem;
font-family: var(--font-price);
margin-bottom: calc(var(--gap, 8px) * 1.5);
}
.price-item.price-item--sale.price-item--last.wt-product__price__final {
color: var(--color-sale-price);
}
.card {
line-height: normal;
width: 100%;
}
.card .wt-rating {
font-size: 1rem;
color: var(--color-star-rating);
padding: 4px 0;
}
.card .wt-rating--center {
justify-content: center;
}
.card .wt-rating__star,
.card .wt-rating__star-fill {
font-size: 14px;
}
.card--center {
text-align: center;
}
.card--center .card__title {
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
}
.card--text {
display: flex;
justify-content: center;
align-items: center;
}
.card__container {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.card__container .product-form__error-message-wrapper span {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
border-radius: var(--border-radius-button);
border: 1px solid;
font-size: calc(var(--font-base-size) - 2px);
display: flex;
justify-items: center;
justify-content: center;
align-items: center;
padding: 4px 12px;
margin-top: 8px;
margin-bottom: 8px;
}
.card__container button.loading span {
display: none;
}
.card__container button.loading .loading-overlay__spinner {
display: flex;
}
@media (min-width: 900px) {
.card__container button.loading .loading-overlay__spinner circle {
stroke: currentColor;
}
}
.card__picture {
position: relative;
display: block;
height: 100%;
}
.card__picture:has(.card__img:first-of-type:not(.hidden)) video {
display: none;
}
.card__img,
.card__video {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
aspect-ratio: var(--aspect-ratio);
object-fit: cover;
}
@media (hover: hover) {
.card:has(.card__img--hover):hover .card__img,
.card:has(.card__img--hover):hover .card__video {
transition: opacity 0.2s ease-out 0.2s;
opacity: 0;
}
}
.card__img--hover,
.card__video--hover {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
top: 0;
left: 0;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
@media (hover: hover) {
.card:has(.card__img--hover):hover .card__img--hover,
.card:has(.card__img--hover):hover .card__video--hover {
opacity: 1;
transition: opacity 0.3s ease-out;
}
}
.card__img--placeholder,
.card__video--placeholder {
background-color: #efefef;
fill: #b7b7b7;
width: 100%;
height: 100%;
aspect-ratio: var(--aspect-ratio, auto);
}
.card__img--empty,
.card__video--empty {
height: 100%;
min-height: 160px;
background-color: var(--color-border);
}
.card__title {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: 0;
color: var(--color-custom-text);
overflow-wrap: break-word; /* Ensures that the words can be broken at arbitrary points if necessary */
hyphens: auto; /* Enables automatic hyphenation */
}
.card__labels {
margin: 10px 0;
}
.card__labels li {
margin-right: 6px;
padding: 4px 12px;
display: inline-block;
border-radius: var(--border-radius-button);
font-size: 1rem;
}
@media (min-width: 1200px) {
.card__labels li {
font-size: 1.2rem;
}
}
.card__labels--icon_with_text {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
}
.card__labels--icon_with_text li {
display: flex;
}
.card__labels--icon_with_text div {
display: flex;
align-items: center;
flex-direction: column;
padding-right: 24px;
padding-left: 0px;
}
.card__labels--icon_with_text img {
height: 40px;
width: 40px;
margin-bottom: 5px;
}
.collection-list__item .card__button {
padding-left: 0;
padding-right: 0;
}
.card__subtitle {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
letter-spacing: 1px;
font-size: calc(var(--font-base-size) * 0.75);
text-transform: uppercase;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: 0;
color: var(--color-brand);
line-height: normal;
hyphens: auto; /* Enables automatic hyphenation */
overflow-wrap: anywhere;
}
.card__container .card__subtitle {
margin-top: 12px;
margin-bottom: 2px;
}
.card__subtitle + .card__title {
margin-top: 0;
}
.card__price {
font-size: var(--font-price-size);
font-family: var(--font-price);
font-style: var(--font-price-style);
font-weight: var(--font-price-weight);
text-transform: var(--font-price-transform, none);
letter-spacing: var(--font-price-letter-spacing, normal);
margin-top: calc(var(--gap, 8px) * 0.5);
margin-bottom: calc(var(--gap, 8px) * 0.5);
color: var(--color-custom-text);
}
.card__price__old {
display: inline-flex;
margin-right: calc(var(--gap, 8px) * 1);
text-decoration: line-through;
opacity: 0.5;
}
.card__option {
border: 1px solid #ccc;
position: relative;
width: calc((100% - var(--gap) * 5) / 6);
box-sizing: border-box;
flex-shrink: 0;
}
.card__options {
display: flex;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 1);
overflow: hidden;
padding-left: 0.1%;
}
@media (min-width: 1200px) {
.card__option {
width: calc((100% - var(--gap) * 6) / 7);
}
}
.card__option--active {
border-color: #333;
}
.card__option--more {
border-color: transparent;
}
.card__option--more .card__option__content {
background: none;
}
.card__option:not(:last-child) {
margin-right: calc(var(--gap, 8px) * 1);
}
.card__option::after {
content: "";
display: block;
padding-bottom: 100%;
}
.card__option__content {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid white;
background: #ccc;
display: flex;
align-items: center;
}
.card__picture-container {
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (min-width: 900px) {
.card__picture-container:hover .card__quick-add-container--desktop {
display: block;
}
}
@media (min-width: 900px) and (hover: hover) {
.card__picture-container:hover .card__quick-add-container--desktop {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
.card__quick-add-container {
width: 100%;
margin-top: 12px;
margin-left: 1px;
margin-right: 1px;
padding-right: 2px;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-grow: 1;
}
@media (min-width: 1200px) {
.card__quick-add-container--hidden {
display: none;
}
}
@media (max-width: 899px) {
.card__quick-add-container button {
height: 32px;
font-size: calc(var(--font-button-size) - 2px);
}
}
@media (max-width: 899px) and (max-width: 599px) {
.card__quick-add-container button {
padding: 1px 8px;
}
}
.card__quick-add-container quick-add {
width: 100%;
}
.card__quick-add-container product-form {
margin: 0;
}
.card__quick-add-container--desktop {
display: none;
width: 100%;
position: absolute;
bottom: 12px;
padding: 0 16px;
transition:
transform 0.3s ease-in,
opacity 0.3s ease-in;
}
@media (hover: hover) {
.card__quick-add-container--desktop {
display: block;
transform: translateY(125%);
opacity: 0;
pointer-events: none;
}
}
.card__quick-add-container--desktop .wt-product__add-to-cart {
margin: 0;
}
.card__container:has(a:focus-visible),
.card__container:has(button:focus-visible) {
--outline-color: var(--color-links-active);
outline: 2px solid var(--outline-color);
outline-offset: calc(var(--gap, 8px) * 0.5);
box-shadow: 0 0 0 3px rgba(var(--color-links-active), 0.5);
transition: outline-color 0.2s ease-in-out;
}
body.no-focus-visible .card__container:has(a:focus-visible),
body.no-focus-visible .card__container:has(button:focus-visible) {
outline-color: transparent;
}
@media (min-width: 900px) {
.card__container:focus-within .card__quick-add-container--desktop {
display: block;
}
}
.card__container a:focus-visible {
outline: none;
box-shadow: none;
}
.card__loader {
--swiper-theme-color: var(--color-action-background);
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.card__color-swatcher--container {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
min-height: 16px;
}
.card__color-swatcher--container:not(
.card__color-swatcher--container:has(div)
) {
display: none;
}
.card__color-swatcher--container.center {
justify-content: center;
}
.card__color-swatcher--container.variant-image {
margin-top: 12px;
}
.card__color-swatcher--container .color-swatcher--counter {
cursor: pointer;
font-size: 12px;
}
.color-swatcher--wrapper {
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--inactive-border-color, var(--color-border));
padding: 0;
cursor: pointer;
position: relative;
box-sizing: border-box;
}
@media (min-width: 900px) {
.color-swatcher--wrapper {
width: 20px;
height: 20px;
}
}
.color-swatcher--wrapper.active {
border: 1px solid var(--color-body-text);
}
.color-swatcher--wrapper.variant-image {
width: 28px;
height: 28px;
}
.color-swatcher--wrapper.variant-image .unavailable-line {
width: 38.07px;
}
.color-swatcher--wrapper.variant-image.rounded .unavailable-line {
width: 28px;
bottom: 50%;
left: 50%;
top: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(-45deg);
}
.color-swatcher--wrapper.rounded {
border-radius: 30px;
}
.color-swatcher--wrapper.rounded .unavailable-line {
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid var(--color-links-active);
width: 28.905px;
transform: rotate(-45deg);
transform-origin: left bottom;
opacity: 0.4;
}
@media (min-width: 900px) {
.color-swatcher--wrapper.rounded .unavailable-line {
width: 26.085px;
}
}
.color-swatcher--wrapper .unavailable-line {
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid var(--color-links-active);
width: 28.905px;
transform: rotate(-45deg);
transform-origin: left bottom;
opacity: 0.4;
}
@media (min-width: 900px) {
.color-swatcher--wrapper .unavailable-line {
width: 26.085px;
}
}
.color-swatcher--wrapper.unavailable {
border: 1px dashed var(--inactive-border-color, var(--color-border));
}
.color-swatcher--wrapper .color-swatcher--tooltip {
display: none;
}
@media (min-width: 1200px) {
.color-swatcher--wrapper .color-swatcher--tooltip {
position: absolute;
display: block;
top: -35px;
left: 50%;
transform: translateX(-50%);
padding: 0.2rem 1.3rem;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: 5px;
color: var(--color-custom-text);
font-family: var(--font-base);
font-size: 12px;
white-space: nowrap;
}
.color-swatcher--wrapper .color-swatcher--tooltip-left {
left: 0;
transform: none;
}
.color-swatcher--wrapper .color-swatcher--tooltip-right {
left: initial;
right: 0;
transform: none;
}
}
.color-swatcher {
height: 14px;
width: 14px;
background-size: cover;
}
.color-swatcher.unavailable {
opacity: 0.4;
}
.color-swatcher.rounded {
border-radius: 30px;
}
.color-swatcher.variant-image {
width: 24px;
height: 24px;
padding: 0;
outline-offset: 0;
background-size: cover;
background-position: center;
border: none;
}
.color-swatcher.variant-image.unavailable {
opacity: 0.5;
}
.color-swatcher.variant-image .unavailable {
position: absolute;
bottom: 0;
left: 0;
border-bottom: 1px solid black;
width: 33.84px;
transform: rotate(-45deg);
transform-origin: left bottom;
}
@media (min-width: 1200px) {
.color-swatcher.variant-image {
position: relative;
}
}
.color-swatcher.variant-image.rounded .unavailable {
width: 24px;
bottom: 50%;
left: 50%;
top: 50%;
transform-origin: center;
transform: translate(-50%, -50%) rotate(-45deg);
}
.card__badges {
position: absolute;
top: calc(var(--gap, 8px) * 1);
left: calc(var(--gap, 8px) * 1);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
opacity: 1;
transition: opacity 0.1s ease-out;
}
@media (min-width: 900px) {
.card__badges {
top: 12px;
left: 12px;
}
}
@media (min-width: 1200px) {
.card__badges--product {
top: calc(var(--gap, 8px) * 2);
left: calc(var(--gap, 8px) * 2);
}
}
.card__badges--product .card__badges--item {
padding: 4px 16px;
}
.card__badges.hide {
opacity: 0;
}
.card__badges--item {
padding: 4px 10px;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-base);
font-size: calc(var(--font-base-size) - 2px);
border-radius: var(--border-radius-button);
background-color: var(--color-sold-out-background);
color: var(--color-sold-out-text);
}
@media (max-width: 599px) {
.card__badges--item {
font-size: calc(var(--font-base-size) - 4px);
}
}
[data-gallery] .card__badges {
z-index: 10;
}
.form-checkbox {
display: inline-flex;
align-items: center;
width: 100%;
position: relative;
cursor: pointer;
}
.form-checkbox .svg-icon {
width: 100%;
max-width: 22px;
height: 100%;
max-height: 22px;
border: 1px solid var(--color-input-border);
border-radius: min(var(--border-radius-button), var(--flag-radius-limit));
margin-right: calc(var(--gap, 8px) * 1);
transition: border-color 0.5s;
background-color: var(--color-input-background);
}
[dir="rtl"] .form-checkbox .svg-icon {
margin-right: 0;
margin-left: calc(var(--gap, 8px) * 1);
}
@media (max-width: 1199px) {
.form-checkbox .svg-icon {
max-width: 30px;
max-height: 30px;
margin-right: calc(var(--gap, 8px) * 1.5);
}
[dir="rtl"] .form-checkbox .svg-icon {
margin-right: 0;
margin-left: calc(var(--gap, 8px) * 1.5);
}
}
.form-checkbox .svg-icon.svg-icon--check.filter__color-swatch {
border: none;
border-radius: var(--border-radius-button);
}
@media (hover: hover) {
.form-checkbox:hover .svg-icon {
border-color: var(--color-input-text);
}
}
.form-checkbox__input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.form-checkbox__input ~ .input-decorator {
display: block;
position: absolute;
inset: 0;
top: 3px;
bottom: 3px;
z-index: -1;
}
.form-checkbox__input:focus-visible ~ .input-decorator {
--outline-color: var(--color-links-active);
outline: 2px solid var(--outline-color);
outline-offset: calc(var(--gap, 8px) * 0.5);
box-shadow: 0 0 0 3px rgba(var(--color-links-active), 0.5);
transition: outline-color 0.2s ease-in-out;
}
body.no-focus-visible .form-checkbox__input:focus-visible ~ .input-decorator {
outline-color: transparent;
}
.form-checkbox__input + .svg-icon .icon-path-check {
transform: scale(0.01);
opacity: 0;
fill: var(--color-input-text);
}
.form-checkbox__input:checked + .svg-icon {
border: 1px var(--color-body-text) solid;
}
.form-checkbox__input:checked + .svg-icon .icon-path-check {
transform: scale(0.75);
opacity: 1;
}
.form-checkbox__input:checked + .svg-icon.svg-icon--check.filter__color-swatch {
border: none;
}
.wt-newsletter__form {
padding-top: 0;
padding-bottom: 0;
}
.wt-newsletter__text {
font-size: var(--font-base-size);
margin-top: 0;
margin-bottom: calc(var(--gap, 8px) * 1);
text-align: left;
}
.wt-newsletter__title {
justify-content: flex-start;
}
.wt-newsletter__field {
box-sizing: border-box;
font-size: max(1.6rem, var(--font-base-size));
height: 63px;
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
background: var(--color-input-bg);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
line-height: var(--font-base-line-height, normal);
width: 100%;
margin-bottom: calc(var(--gap, 8px) * 2);
text-align: left;
}
@media (min-width: 1200px) {
.wt-newsletter__field {
font-size: var(--font-base-size);
}
}
@media (min-width: 600px) {
.wt-newsletter__field {
border-radius: var(--border-radius-button) 0 0 var(--border-radius-button);
border-right-width: 0;
}
[dir="rtl"] .wt-newsletter__field {
text-align: right;
border-radius: 0 var(--border-radius-button) var(--border-radius-button) 0;
border-left: 0;
border-right-width: 1px;
}
}
.wt-newsletter__fieldset {
display: flex;
flex-direction: column;
max-width: 60rem;
}
@media (min-width: 600px) {
.wt-newsletter__fieldset {
flex-direction: row;
align-items: center;
}
}
.wt-newsletter__consent {
max-width: 60rem;
text-align: left;
margin-inline: auto;
}
.wt-newsletter__consent-label {
display: flex;
align-items: flex-start;
gap: calc(var(--gap, 8px) * 1);
font-size: calc(var(--font-base-size) - 2px);
line-height: var(--font-base-line-height, 1.4);
color: var(--color-custom-text, inherit);
}
.wt-newsletter__consent-label input {
margin-top: 4px;
flex-shrink: 0;
width: 17px;
height: 17px;
border: 1px solid var(--color-input-border);
}
.wt-newsletter__send {
box-sizing: border-box;
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
text-align: center;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
height: 63px !important;
margin-bottom: calc(var(--gap, 8px) * 2);
border-color: var(--color-input-border);
width: 225px !important;
margin-inline: auto;
padding-inline: calc(var(--gap, 8px) * 2);
white-space: nowrap;
}
@media (hover: hover) {
.wt-newsletter__send:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.wt-newsletter__send[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.wt-newsletter__send--primary {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
}
@media (hover: hover) {
.wt-newsletter__send--primary:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-newsletter__send--primary.loading {
color: transparent;
}
.wt-newsletter__send--secondary {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
}
@media (hover: hover) {
.wt-newsletter__send--secondary:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
@media (min-width: 600px) {
.wt-newsletter__send {
width: auto;
border-radius: 0 var(--border-radius-button) var(--border-radius-button) 0;
}
[dir="rtl"] .wt-newsletter__send {
border-radius: var(--border-radius-button) 0 0 var(--border-radius-button);
}
}
@media (max-width: 499px) {
.wt-newsletter__send {
width: 100%;
}
}
.newsletter-form__message {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.wt-divider {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.wt-divider {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-divider {
max-width: var(--site-max-width-big);
}
}
.wt-divider__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: clamp(2.1rem, 1.3vw + 1.2rem, 2.4rem);
}
.wt-divider hr {
height: 1px;
border: 0;
background-color: var(--color-hr);
padding: 0;
}
.headline {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
text-align: center;
}
@media (min-width: 1200px) {
.headline {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.headline {
max-width: var(--site-max-width-big);
}
}
.hero__overlay .headline {
padding-inline: 0;
}
.headline__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-top: 0;
margin-inline: 0;
overflow: visible;
margin-bottom: 0;
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 1.5);
}
@media (min-width: 1200px) {
.headline__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
@media (min-width: 600px) {
.headline__title {
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 3);
}
}
.newsletter__wrapper .headline__title,
.wt-contact__form--wrapper .headline__title {
padding-bottom: calc(var(--gap, 8px) * 1);
}
@media (min-width: 600px) {
.newsletter__wrapper .headline__title,
.wt-contact__form .headline__title {
padding-bottom: calc(var(--gap, 8px) * 1);
}
}
.headline--rich {
width: 100%;
}
.headline--rich h1,
.headline--rich h2,
.headline--rich h3,
.headline--rich h4,
.headline--rich h5,
.headline--rich h6,
.headline--rich p {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-top: 0;
margin-inline: 0;
overflow: visible;
margin-bottom: 0;
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 1.5);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
line-height: var(--font-headline-line-height, normal);
letter-spacing: var(--font-headline-letter-spacing);
margin: 0;
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1200px) {
.headline--rich h1,
.headline--rich h2,
.headline--rich h3,
.headline--rich h4,
.headline--rich h5,
.headline--rich h6,
.headline--rich p {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
@media (min-width: 600px) {
.headline--rich h1,
.headline--rich h2,
.headline--rich h3,
.headline--rich h4,
.headline--rich h5,
.headline--rich h6,
.headline--rich p {
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 3);
}
}
@media (min-width: 1200px) {
.headline--rich h1,
.headline--rich h2,
.headline--rich h3,
.headline--rich h4,
.headline--rich h5,
.headline--rich h6,
.headline--rich p {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
.hero__overlay__content .headline--rich h1,
.hero__overlay__content .headline--rich h2,
.hero__overlay__content .headline--rich h3,
.hero__overlay__content .headline--rich h4,
.hero__overlay__content .headline--rich h5,
.hero__overlay__content .headline--rich h6,
.hero__overlay__content .headline--rich p {
padding: 0;
}
.headline--rich h1 strong,
.headline--rich h1 strong a,
.headline--rich h2 strong,
.headline--rich h2 strong a,
.headline--rich h3 strong,
.headline--rich h3 strong a,
.headline--rich h4 strong,
.headline--rich h4 strong a,
.headline--rich h5 strong,
.headline--rich h5 strong a,
.headline--rich h6 strong,
.headline--rich h6 strong a,
.headline--rich p strong,
.headline--rich p strong a {
font-weight: inherit;
color: inherit;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
display: inline;
}
.headline--rich h1 strong,
.headline--rich h1 b,
.headline--rich h2 strong,
.headline--rich h2 b,
.headline--rich h3 strong,
.headline--rich h3 b,
.headline--rich h4 strong,
.headline--rich h4 b,
.headline--rich h5 strong,
.headline--rich h5 b,
.headline--rich h6 strong,
.headline--rich h6 b,
.headline--rich p strong,
.headline--rich p b {
font-weight: bolder;
}
.hero__overlay__content--right .headline--rich {
text-align: end;
}
.hero__overlay__content--left .headline--rich {
text-align: start;
}
.headline--rich-gradient h1,
.headline--rich-gradient h2,
.headline--rich-gradient h3,
.headline--rich-gradient h4,
.headline--rich-gradient h5,
.headline--rich-gradient h6,
.headline--rich-gradient p {
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
}
.headline--rich-gradient h1 > strong,
.headline--rich-gradient h1 > strong a,
.headline--rich-gradient h2 > strong,
.headline--rich-gradient h2 > strong a,
.headline--rich-gradient h3 > strong,
.headline--rich-gradient h3 > strong a,
.headline--rich-gradient h4 > strong,
.headline--rich-gradient h4 > strong a,
.headline--rich-gradient h5 > strong,
.headline--rich-gradient h5 > strong a,
.headline--rich-gradient h6 > strong,
.headline--rich-gradient h6 > strong a,
.headline--rich-gradient p > strong,
.headline--rich-gradient p > strong a {
background: var(
--color-custom-heading,
var(--color-headings-text),
var(--color-headings-text, var(--color-text))
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
font-weight: inherit;
}
.wt-collapse {
display: block;
}
.wt-collapse__section svg {
color: var(--color-custom-text);
}
.wt-collapse__section__inner {
background-color: var(--color-background);
color: var(--color-custom-text);
}
.wt-collapse__wrapper {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.wt-collapse__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-collapse__wrapper {
max-width: var(--site-max-width-big);
}
}
.wt-collapse__wrapper--compact {
max-width: 944px;
}
.wt-collapse__wrapper .wt-collapse:not(:last-child) {
border-bottom: 1px solid
var(--custom-section-color-border, var(--color-border));
}
.wt-collapse__wrapper .wt-collapse__trigger--active + .wt-collapse__target {
margin-bottom: calc(var(--gap, 8px) * 2);
}
.wt-collapse__content {
transition: max-height 0.2s ease-out;
font-size: var(--font-base-size);
}
.wt-collapse__target {
overflow: hidden;
display: grid;
max-height: unset;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
font-size: var(--font-base-size);
}
.wt-collapse__target--v2 {
overflow: hidden;
display: grid;
max-height: unset;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
}
.wt-collapse__target--text {
overflow: hidden;
}
.wt-collapse__target__content--files {
display: flex;
flex-direction: column;
gap: 12px;
}
.wt-collapse__trigger {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
padding-top: calc(var(--gap, 8px) * 2.5);
padding-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.wt-collapse__trigger .wt-icon {
display: flex;
justify-content: center;
align-items: center;
}
.wt-collapse__trigger--active {
position: relative;
z-index: 1;
}
.wt-collapse__trigger--active + .wt-collapse__target {
grid-template-rows: 1fr;
transition: grid-template-rows 500ms;
}
.wt-collapse__trigger--active + .wt-collapse__target--v2 {
grid-template-rows: 1fr;
transition: grid-template-rows 500ms;
}
.wt-collapse__trigger--active .icon-plus-x {
transform: scaleY(0);
}
.wt-collapse__trigger__title {
font-size: calc(var(--font-base-size) * 1.1);
margin: calc(var(--gap, 8px) * 1) 0;
}
@media (min-width: 1200px) {
.wt-collapse__trigger__title {
font-size: calc(var(--font-base-size) * 1);
}
.wt-collapse-menu .wt-collapse__trigger__title {
font-size: calc(var(--font-base-size) * 1.25);
}
}
.wt-collapse__trigger__text {
display: flex;
align-items: center;
gap: 8px;
}
.wt-collapse__trigger__icon {
display: flex;
flex-shrink: 0;
text-align: center;
}
.wt-collapse__file {
display: flex;
align-items: center;
gap: 6px;
}
.wt-collapse__file--hidden {
display: none;
}
.wt-collapse__file svg {
width: 20px;
height: 20px;
}
@media (min-width: 900px) {
.wt-collapse:not(.wt-collapse--always) .wt-collapse__target {
max-height: 200vh;
transition:
max-height 0.4s ease-in,
margin 0.4s ease-out;
margin-top: 0;
margin-bottom: 0;
transition: none;
}
.wt-collapse:not(.wt-collapse--always) .wt-collapse__target--v2 {
grid-template-rows: 1fr;
transition: grid-template-rows 500ms;
}
}
.wt-features_table tr td {
padding: 0;
border: 0;
vertical-align: middle;
}
.wt-features_table tr td:first-child {
padding-right: 10px;
}
.wt-features_table tr td:last-child {
padding-left: 10px;
}
.select-wrapper {
height: var(--input-height);
display: inline-flex;
align-items: center;
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius-button);
font-size: 1.6rem;
}
.select-wrapper label {
opacity: 0.5;
white-space: nowrap;
display: inline-block;
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
}
@media (max-width: 399px) {
.select-wrapper label {
font-size: 1.1rem;
}
}
.select-wrapper select {
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
width: 100%;
flex-shrink: 1;
appearance: none;
padding-right: calc(var(--gap, 8px) * 5);
padding-left: calc(var(--gap, 8px) * 2);
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-position: right calc(var(--gap, 8px) * 1.75) center;
background-size: calc(var(--gap, 8px) * 2);
background-repeat: no-repeat;
padding-left: 0;
}
.wt-more {
display: inline-flex;
align-items: center;
font-size: inherit;
padding: calc(var(--gap, 8px) * 1);
}
.wt-more .svg-icon {
width: 1em;
height: 1em;
margin-left: calc(var(--gap, 8px) * 1);
}
[dir="rtl"] .wt-more .svg-icon {
margin-left: 0;
margin-right: calc(var(--gap, 8px) * 1);
transform: rotate(180deg);
}
.value-bar {
display: flex;
align-items: center;
}
.value-bar__digit {
margin-right: calc(var(--gap, 8px) * 1);
}
.value-bar__progress {
height: calc(var(--gap, 8px) * 0.5);
width: 100%;
background: #eee;
}
.value-bar__progress__current {
background: #333;
height: 100%;
}
.wt-select__drawer {
position: fixed;
background: var(--color-background);
width: 100%;
max-width: 50rem;
height: 100%;
z-index: 50;
transform: translateX(100%);
top: 0;
right: 0;
display: flex;
flex-direction: column;
}
.drawers-animated .wt-select__drawer {
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
}
.wt-select__drawer__header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-select__drawer__header h3 {
margin: 0;
}
.wt-select__drawer__close {
display: inline-block;
cursor: pointer;
}
.wt-select__drawer__body {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4) 0;
flex-grow: 100;
overflow: auto;
}
.wt-select__drawer--open {
transform: translateX(0);
z-index: 200;
}
@media (max-width: 399px) {
.wt-select__drawer {
transform: translateY(100%);
bottom: 0;
top: unset;
height: auto;
max-height: 100%;
}
.wt-select__drawer--open {
transform: translateY(0) !important;
}
}
.wt-select__drawer__close {
border: 0;
border-radius: 0;
padding: 0;
height: auto;
color: inherit;
background-color: transparent;
}
@media (hover: hover) {
.wt-select__drawer__close:hover {
color: inherit;
background-color: inherit;
}
}
.wt-select__drawer__close .svg-icon {
display: block;
}
.wt-select__trigger {
margin-bottom: calc(var(--gap, 8px) * 2);
width: 100%;
}
.wt-select__trigger .svg-icon {
transform: scale(0.75);
transition-duration: 0.3s;
}
.page-overlay-on .wt-select__trigger .svg-icon {
transform: scale(0.75) rotate(180deg);
}
.wt-select__list {
padding-bottom: calc(var(--gap, 8px) * 2);
}
.wt-select__item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
border-radius: var(--border-radius-button);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 2);
}
.wt-select__item:not(.wt-select__item--disabled) {
cursor: pointer;
}
.wt-select__item--current {
background-color: rgba(var(--color-text-rgb), 0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.wt-select__item--current::after {
content: "";
display: block;
border-style: solid;
border-width: 0 0 1px 1px;
width: 1rem;
height: 0.5rem;
transform: rotate(-45deg);
margin-top: calc(var(--gap, 8px) * -0.5);
margin-left: calc(var(--gap, 8px) * 3);
}
.wt-select__item--disabled .label {
color: var(--color-text-light);
}
.wt-select-opened .page-header {
z-index: -1;
}
.social-link {
display: inline-flex;
}
.social-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
}
.social-links .svg-icon {
display: inline-block;
}
.social-links__item {
display: flex;
}
@media (min-width: 600px) {
.form__fieldset {
display: flex;
gap: 16px;
width: 100%;
justify-content: space-between;
}
}
.form__container {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
width: 100%;
}
@media (min-width: 1200px) {
.form__container {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.form__container {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 600px) {
.form__container {
max-width: 60rem;
}
}
.form__message {
margin-bottom: 16px;
}
.form__full {
background-color: var(--color-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-text);
}
.form__text {
padding-bottom: calc(var(--gap, 8px) * 2);
text-align: center;
max-width: 90%;
}
.form__action {
margin-top: calc(var(--gap, 8px) * 3);
}
.form__send {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
width: 100%;
}
@media (hover: hover) {
.form__send:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.form__send.loading {
color: transparent;
}
@media (max-width: 399px) {
.form__send__button {
width: 100%;
}
}
.form__error-field {
color: var(--color-error-text);
background-color: var(--color-error-background);
border: 1px solid var(--color-error-border);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
line-height: var(--font-base-line-height, normal);
border-radius: var(--border-radius-button);
width: 100%;
}
.form__success-field {
color: var(--color-success-text);
background-color: var(--color-success-background);
border: 1px solid var(--color-success-border);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
line-height: var(--font-base-line-height, normal);
border-radius: var(--border-radius-button);
width: 100%;
}
.form__field {
width: 100%;
position: relative;
margin-bottom: calc(var(--gap, 8px) * 2);
display: flex;
flex-direction: column;
}
@media (min-width: 600px) {
.form__field--name,
.form__field--phone {
width: 50%;
}
}
.form__field .form__message {
color: red;
text-align: start;
font-size: calc(var(--font-base-size) - 2px);
padding-left: 16px;
padding-top: 4px;
}
.form__field__label {
position: absolute;
left: calc(var(--gap, 8px) * 2);
top: 0;
transform: translate(0, 0);
transform-origin: 0 0;
transition: all 120ms ease-in;
height: var(--input-height);
display: flex;
align-items: center;
background: transparent;
line-height: 1;
white-space: nowrap;
color: var(--color-input-placeholder);
}
[dir="rtl"] .form__field__label {
left: auto;
right: calc(var(--gap, 8px) * 2);
}
.form__field__input,
.form__field__textarea {
font-size: max(1.6rem, var(--font-base-size));
height: var(--input-height);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
background: var(--color-input-bg);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
line-height: var(--font-base-line-height, normal);
border-radius: var(--border-radius-button);
width: 100%;
color: var(--color-input-text);
background-color: var(--color-input-background);
border-color: var(--color-input-border);
}
@media (min-width: 1200px) {
.form__field__input,
.form__field__textarea {
font-size: var(--font-base-size);
}
}
.form__field__input--error,
.form__field__textarea--error {
border-color: red;
}
.form__field__input--error:focus,
.form__field__textarea--error:focus {
outline: 2px solid red;
}
.form__field__input:focus + .form__field__label,
.form__field__input:not(:placeholder-shown) + .form__field__label,
.form__field__textarea:focus + .form__field__label,
.form__field__textarea:not(:placeholder-shown) + .form__field__label {
transform: translate(0.25rem, -40%) scale(0.8);
height: 1em;
padding: 0 calc(var(--gap, 8px) * 1);
background: var(--color-input-background);
color: var(--color-input-placeholder);
}
.form__field__input:focus + .form__field__label,
.form__field__textarea:focus + .form__field__label {
color: var(--color-input-placeholder);
}
.form__field__textarea {
height: auto;
border-radius: min(1rem, var(--border-radius-button));
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
}
.form__field__textarea::placeholder {
opacity: 0;
}
.form-status.form-status-list.form__message,
.form-status.caption-large.text-body {
display: flex;
justify-content: center;
align-items: start;
gap: 16px;
}
@media (min-width: 1200px) {
.form-status.form-status-list.form__message svg,
.form-status.caption-large.text-body svg {
margin-top: 4px;
}
}
.form__message .errors li {
color: red;
}
.wt-load-more {
text-align: center;
}
.wt-load-more__bar {
margin-left: auto;
margin-right: auto;
max-width: 300px;
}
.wt-load-more__button {
margin-top: calc(var(--gap, 8px) * 4);
}
.loading-overlay {
position: absolute;
z-index: 1;
width: 1.8rem;
}
@media screen and (max-width: 749px) {
.loading-overlay {
top: 0;
right: 0;
}
}
@media screen and (min-width: 750px) {
.loading-overlay {
left: 0;
}
}
.loading-overlay__spinner {
width: 1.8rem;
display: inline-block;
}
.spinner {
animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.path {
stroke-dasharray: 280;
stroke-dashoffset: 0;
transform-origin: center;
stroke: currentColor;
animation: dash 1.4s ease-in-out infinite;
}
@media screen and (forced-colors: active) {
.path {
stroke: CanvasText;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 280;
}
50% {
stroke-dashoffset: 75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 280;
transform: rotate(450deg);
}
}
.loading-overlay:not(.hidden) + .cart-item__price-wrapper,
.loading-overlay:not(.hidden) ~ cart-remove-button {
opacity: 50%;
}
.loading-overlay:not(.hidden) ~ cart-remove-button {
pointer-events: none;
cursor: default;
}
[data-swiper]:not(.swiper-initialized) .collection-list__container {
display: flex;
flex-wrap: wrap;
justify-content: var(--alignment, flex-start);
gap: var(--spacing-mobile, 8px);
}
@media (min-width: 900px) {
[data-swiper]:not(.swiper-initialized) .collection-list__container {
gap: var(--spacing-desktop, 8px);
}
}
[data-swiper]:not(.swiper-initialized)
.collection-list__container.enabled-swipe {
flex-wrap: nowrap;
}
.collection-list__picture {
height: 30rem;
width: 20rem;
padding-left: 1rem;
}
.collection-list__text {
text-align: center;
}
.collection-list__item {
text-align: center;
}
[data-swiper]:not(.swiper-initialized) .collection-list__item {
flex-basis: calc(
(100% - var(--spacing-mobile, 8px) * (var(--columns-mobile, 6) - 1)) /
var(--columns-mobile, 6)
);
flex-shrink: 1;
}
@media (min-width: 900px) {
[data-swiper]:not(.swiper-initialized) .collection-list__item {
flex-basis: calc(
(
100% - var(--spacing-desktop, 8px) *
(var(--columns-desktop, 6) - 1)
) /
var(--columns-desktop, 6)
);
}
}
.collection-list .card__title {
margin-top: calc(var(--gap, 8px) * 0.5);
}
.collection-list--no_swipe {
display: none;
}
.collection-list--wrap {
flex-wrap: wrap;
display: flex;
}
.collection-list-title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: clamp(2.1rem, 1.3vw + 1.2rem, 2.4rem);
text-align: center;
}
.hero {
position: relative;
display: block;
border-radius: var(--border-radius);
overflow: hidden;
}
.hero__table {
margin-bottom: calc(var(--gap, 8px) * 1.5);
margin-top: calc(var(--gap, 8px) * 0.75);
min-width: 70%;
}
.hero__table--full-width {
width: 100%;
}
.hero__table__row {
display: flex;
flex-direction: var(--mobile-layout);
justify-content: space-between;
width: 100%;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
gap: 8px;
border-radius: min(var(--table-border-radius), 4px);
}
.hero__table__row--mobile--column {
gap: 0;
}
@media (min-width: 900px) {
.hero__table__row {
flex-direction: row;
gap: 16px;
}
}
.hero__table__row:nth-child(odd) {
background: var(--color-background-odd);
color: rgb(var(--color-text-odd));
}
.hero__table__row:nth-child(odd) .hero__table__cell--title {
color: rgba(var(--color-text-odd), var(--left-column-opacity));
}
.hero__table__row .hero__table__cell--title {
opacity: var(--left-column-opacity);
}
@media (max-width: 1199px) {
.hero__table__row .hero__table__cell--title--mobile--column {
font-size: max(var(--font-base-size) - 2px, 12px);
}
}
.hero__table__cell {
display: flex;
flex-direction: column;
width: 100%;
align-items: flex-start;
word-wrap: break-word;
}
.hero__table__cell p {
margin-top: 0;
margin-bottom: 0;
}
.hero__table__cell--mobile--left {
align-items: flex-start;
text-align: left;
}
.hero__table__cell--mobile--right {
align-items: flex-end;
text-align: right;
}
.hero__table__cell--mobile--center {
align-items: center;
text-align: center;
}
@media (min-width: 900px) {
.hero__table__cell {
width: 50%;
}
.hero__table__cell--left {
align-items: flex-start;
text-align: left;
}
.hero__table__cell--right {
align-items: flex-end;
text-align: right;
}
.hero__table__cell--center {
align-items: center;
text-align: center;
}
.hero__table__cell--space-between {
width: 50%;
align-items: space-between;
}
.hero__table__cell--space-between.hero__table__cell--content {
text-align: right;
align-items: flex-end;
}
.hero__table__cell--space-between.hero__table__cell--title {
text-align: left;
align-items: flex-start;
}
}
.hero__subheading {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: max(1.2rem, calc(var(--font-base-size) - 2px));
letter-spacing: 1px;
line-height: var(--font-headline-line-height, normal);
margin: 4px 0 4px 0;
}
slideshow-section .hero__subheading {
font-family: var(--font-base);
}
@media (max-width: 599px) {
.hero__subheading--mobile {
display: none;
}
}
.hero__richtext {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
}
.hero__richtext p {
font-size: inherit;
}
.hero__wrapper {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.hero__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.hero__wrapper {
max-width: var(--site-max-width-big);
}
}
.hero__wrapper--full {
margin-left: auto;
margin-right: auto;
max-width: var(--hero-max-width);
}
.hero__video-picture {
display: flex;
flex-direction: row;
}
.hero__video {
object-fit: cover;
height: var(--section-height, auto);
width: 100%;
display: block;
z-index: 1;
}
@media (min-width: 900px) {
.hero__video {
height: var(--section-height-desk, auto);
}
}
.hero__video--yt {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
.hero__video--yt {
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.hero__video--yt {
width: 177.78vh;
}
}
.hero__video__yt-wrapper {
height: var(--section-height, auto);
}
@media (min-width: 1200px) {
.hero__video__yt-wrapper {
height: var(--section-height-desk, auto);
}
}
.hero--grid .hero__overlay__content {
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 1);
}
@media (max-width: 599px) {
.hero--grid .hero__overlay__content:has(.hero__table) {
width: 100%;
}
}
@media (min-width: 900px) {
.hero--grid {
display: flex;
}
.hero--grid--rev {
flex-direction: row-reverse;
}
.hero--grid .hero__pic,
.hero--grid .hero__overlay {
flex-grow: 1;
flex-shrink: 0;
}
.hero--grid .hero__pic {
width: var(--desktop-percentage-image-width, 50%);
}
.hero--grid .hero__overlay {
justify-content: flex-start;
width: calc(100% - var(--desktop-percentage-image-width, 50%));
}
.hero--grid .hero__overlay__content {
width: 100%;
}
}
.hero--out {
flex-direction: column;
display: flex;
border-radius: 0;
}
.hero--out .hero__overlay {
position: static;
flex-shrink: 0;
}
.hero--out .hero__overlay__content {
width: 100%;
}
.wt-multicol .hero--out .hero__overlay {
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 0.5);
background: none;
}
.wt-multicol .hero--out .hero__overlay--left {
padding-left: 0;
padding-right: calc(var(--gap, 8px) * 2);
}
.wt-multicol--full .hero--out .hero__overlay--left {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
.hero--out .hero__pic {
height: 100%;
flex-shrink: 1;
overflow: hidden;
}
@media (max-width: 899px) {
.hero--out-mobile {
flex-direction: column;
display: flex;
}
.hero--out-mobile .hero__overlay {
position: static;
flex-shrink: 0;
}
.hero--out-mobile .hero__overlay__content {
width: 100%;
}
.wt-multicol .hero--out-mobile .hero__overlay {
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 0.5);
background: none;
}
.wt-multicol .hero--out-mobile .hero__overlay--left {
padding-left: 0;
padding-right: calc(var(--gap, 8px) * 2);
}
.wt-multicol--full .hero--out-mobile .hero__overlay--left {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
.hero--out-mobile .hero__pic {
height: 100%;
flex-shrink: 1;
overflow: hidden;
}
.wt-slider__wrapper .hero--out-mobile .hero__overlay,
.wt-image-banner .hero--out-mobile .hero__overlay {
background: var(
--slide-out-background-color,
rgba(var(--color-overlay-rgb), var(--color-overlay-opacity))
);
}
.wt-slider__wrapper .hero--out-mobile .hero__overlay__content,
.wt-image-banner .hero--out-mobile .hero__overlay__content {
color: var(
--slide-out-text-color,
var(--color-custom-text, var(--color-text))
);
}
.hero--out-mobile.hero--out-has-bg .hero__pic {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.wt-image-banner .hero--out-mobile .hero__title,
.wt-image-banner .hero--out-mobile .hero__text {
color: inherit;
}
}
.hero--out-pic-square .hero__pic,
.hero--out-pic-portrait .hero__pic {
width: 100%;
height: auto;
padding-top: 100%;
position: relative;
display: none;
}
@media (min-width: 900px) {
.hero--out-pic-square .hero__pic,
.hero--out-pic-portrait .hero__pic {
display: block;
}
}
.hero--out-pic-square .hero__img,
.hero--out-pic-portrait .hero__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero--out-pic-square .wt-video__movie,
.hero--out-pic-portrait .wt-video__movie {
width: 100%;
height: auto;
padding-top: 100%;
position: relative;
display: block;
}
.hero--out-pic-square .wt-video__movie video,
.hero--out-pic-portrait .wt-video__movie video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--image-object-position-desktop);
}
.hero--out-pic-portrait .hero__pic {
padding-top: 160%;
}
.hero--out-pic-portrait .wt-video__movie {
padding-top: 160%;
}
.hero__img {
width: 100%;
object-fit: cover;
display: block;
height: var(--section-height, 100%);
}
@media (min-width: 900px) {
.hero__img {
height: var(--section-height-desk, 100%);
}
}
.hero__img--placeholder {
width: 100%;
display: block;
background-color: #efefef;
fill: #b7b7b7;
}
.hero__overlay {
background: rgba(var(--color-overlay-rgb), var(--color-overlay-opacity));
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--gap, 8px) * 2);
z-index: 5;
}
@media (min-width: 600px) {
.hero__overlay {
padding: calc(var(--gap, 8px) * 4);
}
}
@media (min-width: 1800px) {
.hero__overlay {
padding: calc(var(--gap, 8px) * 6);
}
}
@media (min-width: 1200px) {
.hero__wrapper .hero__overlay {
padding-left: calc(var(--gap, 8px) * 10);
padding-right: calc(var(--gap, 8px) * 10);
}
}
.hero--grid .hero__overlay {
position: static;
}
@media (min-width: 900px) {
.hero__overlay--left {
justify-content: flex-start;
}
}
@media (min-width: 900px) {
.hero__overlay--right {
justify-content: flex-end;
}
}
@media (min-width: 900px) {
.hero__overlay--top {
align-items: flex-start;
}
}
@media (min-width: 900px) {
.hero__overlay--bottom {
align-items: flex-end;
}
}
@media (max-width: 899px) {
.hero__overlay--mobile--left {
justify-content: flex-start;
}
}
@media (max-width: 899px) {
.hero__overlay--mobile--right {
justify-content: flex-end;
}
}
@media (max-width: 899px) {
.hero__overlay--mobile--top {
align-items: flex-start;
}
}
@media (max-width: 899px) {
.hero__overlay--mobile--bottom {
align-items: flex-end;
}
}
@media (min-width: 600px) {
.collection-banner .hero__wrapper--full .hero--grid .hero__overlay {
padding: calc(var(--gap, 8px) * 2);
}
}
@media (min-width: 1200px) {
.collection-banner .hero__wrapper--full .hero--grid .hero__overlay {
padding: calc(var(--gap, 8px) * 4);
padding-right: max(
(100% - var(--site-max-width)) / 2 + 2 * (var(--gap, 8px) * 2),
2 * (var(--gap, 8px) * 2)
);
}
}
@media (min-width: 600px) {
.collection-banner .hero__wrapper--full .hero--grid--rev .hero__overlay {
padding: calc(var(--gap, 8px) * 2);
}
}
@media (min-width: 1200px) {
.collection-banner .hero__wrapper--full .hero--grid--rev .hero__overlay {
padding: calc(var(--gap, 8px) * 4);
padding-left: max(
(100% - var(--site-max-width)) / 2 + 2 * (var(--gap, 8px) * 2),
2 * (var(--gap, 8px) * 2)
);
}
}
.hero__overlay__content {
color: var(--color-custom-text, var(--color-text));
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero__overlay__content > * {
margin-bottom: calc(var(--gap, 8px) * 1.5);
}
.hero__overlay__content > :last-child {
margin-bottom: 0;
}
@media (min-width: 1200px) {
.collection-banner .hero__wrapper--full .hero--grid .hero__overlay__content {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1200px) {
.hero__wrapper--full .hero--grid .hero__overlay__content {
margin-right: calc(var(--gap, 8px) * 10);
margin-left: calc(var(--gap, 8px) * 10);
}
}
.hero__overlay__content--left {
align-items: flex-start;
text-align: start;
justify-content: flex-start;
}
.hero__overlay__content--center {
align-items: center;
text-align: center;
justify-content: center;
}
.hero__overlay__content--right {
align-items: flex-end;
text-align: end;
justify-content: flex-end;
}
@media (max-width: 899px) {
.hero__overlay__content--mobile--right {
align-items: flex-end;
text-align: end;
justify-content: flex-end;
}
}
@media (max-width: 899px) {
.hero__overlay__content--mobile--center {
align-items: center;
text-align: center;
width: 85%;
justify-content: center;
}
}
@media (max-width: 899px) {
.hero__overlay__content--mobile--left {
align-items: flex-start;
text-align: start;
justify-content: flex-start;
}
}
@media (min-width: 900px) {
.hero__overlay__content {
width: 40%;
}
}
@media (min-width: 1200px) {
.hero__overlay__content {
width: min(40%, 80rem);
}
.section-background-video .hero__overlay__content {
width: min(60%, 90rem);
}
/* .hero--grid splits the section into an image column and a text column
(see the 900px+ rule above sizing .hero__pic / .hero__overlay via
--desktop-percentage-image-width). .hero__overlay__content should
fill that text column, but section-specific inline width overrides
(generated from percentage settings) can end up sized relative to
the column instead of the section, shrinking the text far below its
intended width. Force it back to 100% of its column here. */
.hero__wrapper--full .hero--grid .hero__overlay__content {
width: 100%;
}
}
.wt-image-banner .hero__overlay__content,
.slideshow-section .hero__overlay__content {
width: auto;
}
.wt-image-banner .hero__overlay__content > :not(.hero__button--gap),
.slideshow-section .hero__overlay__content > :not(.hero__button--gap) {
max-width: 56rem;
margin-bottom: 20px;
}
.hero__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-top: 0;
margin-inline: 0;
overflow: visible;
}
@media (min-width: 1200px) {
.hero__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
@media (min-width: 1200px) {
.hero__title {
font-size: min(
calc(
var(--font-headline-size) * var(--font-headline-scale-desk, 1) * 0.8
),
calc(var(--font-headline-size) + 8vw)
);
}
}
@media (min-width: 1400px) {
.hero__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 8vw)
);
}
}
@media (max-width: 599px) {
.hero__title--mobile {
display: none;
}
}
.hero__text {
font-size: calc(var(--font-base-size) * var(--font-text-scale, 1));
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
color: var(--color-custom-text, var(--color-text));
}
@media (min-width: 1200px) {
.hero__text {
font-size: calc(var(--font-base-size) * var(--font-text-scale-desk, 1));
}
}
.hero__text:last-child {
margin-bottom: 0;
}
.wt-parallax__content .hero__text.rte h1 {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
line-height: var(--font-headline-line-height, 1.15);
font-size: calc(var(--font-headline-size) * 1.3);
margin: 0;
}
@media (min-width: 900px) {
.wt-parallax__content .hero__text.rte h1 {
font-size: calc(var(--font-headline-size) * 1.8);
}
}
.hero__text--search {
margin-top: 0;
}
@media (max-width: 599px) {
.hero__text--mobile {
display: none;
}
}
.hero__button {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
font-size: calc(var(--font-button-size) * var(--font-button-scale, 1));
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
text-align: center;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.hero__button {
font-size: calc(var(--font-button-size) * var(--font-button-scale-desk, 1));
}
}
/* Home template only: the heading/text/button font-size picker (size_heading,
size_text, size_button block settings) should only apply between 750px and
1450px. Below 750px the shared mobile-scale rules above already govern.
Above 1450px the original fixed design shows, ignoring the picker. Scoped
to body.template-index so every other template keeps its current
(uncapped, >=1200px) behavior untouched. */
@media screen and (min-width: 750px) {
body.template-index .headline--rich h1,
body.template-index .headline--rich h2,
body.template-index .headline--rich h3,
body.template-index .headline--rich h4,
body.template-index .headline--rich h5,
body.template-index .headline--rich h6,
body.template-index .headline--rich p {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
body.template-index .hero__text {
font-size: calc(var(--font-base-size) * var(--font-text-scale-desk, 1));
}
body.template-index .hero__button {
font-size: calc(var(--font-button-size) * var(--font-button-scale-desk, 1));
}
}
@media screen and (min-width: 1451px) {
body.template-index .headline--rich h1,
body.template-index .headline--rich h2,
body.template-index .headline--rich h3,
body.template-index .headline--rich h4,
body.template-index .headline--rich h5,
body.template-index .headline--rich h6,
body.template-index .headline--rich p {
font-size: var(--font-headline-size);
}
body.template-index .hero__text {
font-size: var(--font-base-size);
}
body.template-index .hero__button {
font-size: var(--font-button-size);
}
}
@media (hover: hover) {
.hero__button:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
@media (max-width: 749px) {
.hero__button {
font-size: calc(10px * var(--font-button-scale, 1));
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
}
.hero__button[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.hero__button--gap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
@media (max-width: 1199px) {
.hero__overlay__content--mobile--right .hero__button--gap {
justify-content: flex-end;
}
}
@media (max-width: 1199px) {
.hero__overlay__content--mobile--left .hero__button--gap {
justify-content: flex-start;
}
}
.hero__button--gap .hero__button {
margin-block: 0;
}
.hero__button--gap .hero__button:first-child {
margin-inline-start: 0;
}
.hero__button--gap .hero__button:last-child {
margin-inline-end: 0;
}
.hero__button--gap .hero__button:not(.hero__button--link) {
margin-block: 2px;
}
.hero__button--primary {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
}
@media (hover: hover) {
.hero__button--primary:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.hero__button--primary.loading {
color: transparent;
}
.hero__button--secondary {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
}
@media (hover: hover) {
.hero__button--secondary:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.hero__button--link {
background: none;
text-decoration: none;
color: var(--color-custom-text, var(--color-button-secondary-text));
text-underline-offset: 6px;
border-color: transparent;
height: auto;
padding: 0 0 1px;
margin-top: 4px;
overflow: visible;
border-radius: 0;
display: inline-block;
}
.hero__button--link span {
position: relative;
display: inline-block;
}
.hero__button--link span::before {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 1px;
background-color: var(
--color-custom-text,
var(--color-button-secondary-text)
);
transform-origin: right;
}
.hero__button--link span::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 1px;
background-color: var(
--color-custom-text,
var(--color-button-secondary-text)
);
transform-origin: left;
transform: scale(0);
}
.hero__button--link:hover {
background-color: inherit;
color: var(--color-custom-text);
cursor: pointer;
}
.hero__button--link:hover span::before {
transform: scale(0);
transition: 0.4s transform ease;
}
.hero__button--link:hover span::after {
transform: scale(1);
transition: 0.4s transform ease 0.3s;
}
@media (max-width: 599px) {
.hero__button--mobile {
display: none;
}
}
@media (max-width: 599px) {
.hero__button--full-width-mobile {
flex-direction: column;
width: 100%;
}
.hero__button--full-width-mobile .hero__button {
width: 100%;
}
}
@media (max-width: 599px) {
.hero .shopify-block:has(.hero__button--full-width-mobile) {
width: 100%;
}
}
.hero--hidden-placeholder .hero__pic-container {
display: none;
}
@media (min-width: 1200px) {
.collection-banner
.hero--hidden-placeholder.hero__wrapper--full
.hero__overlay {
padding-inline: max(
(100% - var(--site-max-width)) / 2 + 2 * var(--gap, 8px) * 2,
2 * var(--gap, 8px) * 2
);
}
}
.hero__icon-with-text {
display: flex;
align-items: center;
justify-content: var(--icon-alignment-mobile, inherit);
text-align: var(--icon-text-alignment-mobile, inherit);
width: 100%;
gap: var(--gap);
margin-top: var(--margin-top);
margin-bottom: var(--margin-bottom);
margin-left: var(--margin-left);
margin-right: 0;
}
.hero__icon-with-text--align-top .hero__icon-container {
align-self: flex-start;
}
[dir="rtl"] .hero__icon-with-text {
margin-right: var(--margin-left);
margin-left: 0;
}
@media (min-width: 900px) {
.hero__icon-with-text {
margin-left: var(--margin-left-desktop);
justify-content: var(--icon-alignment, inherit);
text-align: var(--icon-text-alignment, inherit);
}
[dir="rtl"] .hero__icon-with-text {
margin-right: var(--margin-left-desktop);
margin-left: 0;
}
}
.hero__icon-container {
display: flex;
}
.hero__icon-container .hero__icon {
max-width: unset;
}
.hero__icon {
height: var(--icon-height, 2.7rem);
width: auto;
margin-top: var(--icon-margin, 0px);
}
@media (min-width: 900px) {
.hero__icon {
height: var(--icon-height-desktop, 2.8rem);
margin-top: var(--icon-margin-desktop, 0px);
}
}
.hero__icon-text {
font-size: calc(var(--font-base-size) * var(--size-heading));
}
@media (min-width: 900px) {
.hero__icon-text {
font-size: calc(var(--font-base-size) * var(--size-heading-desktop));
}
}
.hero__icon-text p {
margin: 0;
}
.hero--video-with-controls[data-blocks-size="0"] .hero__overlay {
display: none;
}
.hero__pic {
position: relative;
height: 100%;
}
.hero__pic-container,
.hero__pic-wrapper {
width: 100%;
}
.wt-products-slider .hero__pic-container,
.wt-products-slider .hero__pic-wrapper {
height: 100%;
}
.hero__pic .hero__pic-loader {
display: none;
}
@media (min-width: 900px) {
.hero__pic .hero__pic-loader {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 480px;
}
}
.hero__pic--mobile.hero__pic .hero__pic-loader {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
@media (min-width: 900px) {
.hero__pic--mobile.hero__pic .hero__pic-loader {
display: none;
}
}
.hero__img--mobile {
width: 100%;
}
@media (min-width: 900px) {
.hero__img--mobile {
display: none;
}
}
.hero__img--desktop {
width: 100%;
}
@media (max-width: 899px) {
.hero__img--desktop {
display: none;
}
}
.hero__pic {
display: block;
width: 100%;
border-radius: var(--border-radius, 0);
}
@media (max-width: 899px) {
.hero__pic {
display: none;
}
}
.hero__pic.hero__pic--mobile {
display: block;
width: 100%;
}
@media (max-width: 899px) {
.wt-grid-box--adapt .hero__pic.hero__pic--mobile {
aspect-ratio: var(--img-mobile-ratio);
}
}
@media (min-width: 900px) {
.hero__pic.hero__pic--mobile {
display: none;
}
}
.wt-grid-box {
background-color: var(--color-background);
}
.wt-grid-box__ul {
display: flex;
flex-direction: column;
gap: calc(var(--gap, 8px) * 2);
}
@media (min-width: 900px) {
.wt-grid-box__ul {
gap: calc(var(--gap, 8px) * 3);
}
}
.wt-grid-box__ul--swipe {
flex-direction: row;
gap: 0;
}
@media (min-width: 900px) {
.wt-grid-box__ul--swipe {
width: 100%;
display: flex;
gap: calc(var(--gap, 8px) * 3);
}
}
.wt-grid-box__li {
width: 100%;
}
.wt-grid-box__li .wt-grid-box__item {
width: 100%;
}
.wt-grid-box__li .wt-grid-box__item .hero__pic svg,
.wt-grid-box__li .wt-grid-box__item .hero__pic img {
aspect-ratio: var(--aspect-ratio, auto);
}
.wt-grid-box__li .wt-grid-box__item .wt-video__movie {
aspect-ratio: var(--aspect-ratio, auto);
}
.wt-grid-box__container {
display: flex;
flex-direction: column;
gap: calc(var(--gap, 8px) * 2);
}
body .wt-grid-box__container[data-swiper] {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
body .wt-grid-box__container[data-swiper] {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
body .wt-grid-box__container[data-swiper] {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 900px) {
.wt-grid-box__container {
flex-direction: row;
justify-content: space-between;
}
}
body .wt-grid-box__container--full[data-swiper] {
margin-left: auto;
margin-right: auto;
gap: 0;
padding-left: 0;
padding-right: 0;
max-width: var(--hero-max-width);
}
body .wt-grid-box__container--full[data-swiper] .wt-grid-box__item {
width: calc((100% - (0 * calc(var(--gap, 8px) * 0))) / 1 * 1);
flex-basis: calc((100% - (0 * calc(var(--gap, 8px) * 0))) / 1 * 1);
flex-direction: row;
}
@media (min-width: 900px) {
body .wt-grid-box__container--full[data-swiper] .wt-grid-box__item {
width: calc((100% - (1 * calc(var(--gap, 8px) * 0))) / 2 * 1);
flex-basis: calc((100% - (1 * calc(var(--gap, 8px) * 0))) / 2 * 1);
}
}
.wt-grid-box__header {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: clamp(2.1rem, 1.3vw + 1.2rem, 2.4rem);
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
margin-left: auto;
margin-right: auto;
text-align: center;
}
@media (min-width: 1200px) {
.wt-grid-box__header {
padding-left: calc(calc(var(--gap, 8px) * 1) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 1) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-grid-box__header {
max-width: var(--site-max-width-big);
}
}
.wt-grid-box__item {
width: calc((100% - (0 * calc(var(--gap, 8px) * 2))) / 1 * 1);
flex-basis: calc((100% - (0 * calc(var(--gap, 8px) * 2))) / 1 * 1);
}
@media (min-width: 900px) {
.wt-grid-box__item {
width: calc((100% - (1 * calc(var(--gap, 8px) * 2))) / 2 * 1);
flex-basis: calc((100% - (1 * calc(var(--gap, 8px) * 2))) / 2 * 1);
}
}
.wt-grid-box__item .hero__overlay {
padding: calc(var(--gap, 8px) * 3);
}
.wt-grid-box__item .hero__overlay__content {
width: 85%;
}
@media (min-width: 1200px) {
.wt-grid-box__item .hero__overlay__content {
padding-top: calc(var(--gap, 8px) * 2);
}
}
.wt-grid-box
[data-swiper]:not(.swiper-initialized).wt-grid-box__container--full
ul {
gap: 0;
}
.wt-grid-box [data-swiper]:not(.swiper-initialized) ul {
flex-direction: column;
gap: calc(var(--gap, 8px) * 2);
width: 100%;
}
@media (min-width: 900px) {
.wt-grid-box [data-swiper]:not(.swiper-initialized) ul {
flex-direction: row;
gap: calc(var(--gap, 8px) * 3);
}
}
.wt-grid-box [data-swiper]:not(.swiper-initialized) .wt-grid-box__li {
flex-basis: 100%;
width: 100%;
}
.wt-grid-box
[data-swiper]:not(.swiper-initialized)
.wt-grid-box__li
div:not(.hero__button--gap) {
width: 100%;
}
.wt-grid-box [data-swiper]:not(.swiper-initialized) .wt-grid-box__li video {
border-radius: var(--border-radius);
}
.wt-grid-view-with-drawer__ul--swipe {
gap: 0 !important;
}
.wt-grid-view-with-drawer__li {
position: relative;
}
.wt-grid-view-with-drawer__li picture {
aspect-ratio: var(--aspect-ratio-mobile, var(--aspect-ratio));
}
@media (min-width: 900px) {
.wt-grid-view-with-drawer__li picture {
aspect-ratio: var(--aspect-ratio);
}
}
.wt-grid-view-with-drawer__li .hero__overlay__content {
padding-top: 0;
width: 100%;
}
.wt-grid-view-with-drawer [data-swiper]:not(.swiper-initialized) ul {
gap: var(--gap-stack-mobile);
}
@media (min-width: 900px) {
.wt-grid-view-with-drawer [data-swiper]:not(.swiper-initialized) ul {
gap: var(--gap-stack);
}
}
body .wt-grid-view-with-drawer__container[data-swiper] {
overflow: visible;
padding-left: 0;
padding-right: 0;
}
.wt-grid-view-with-drawer__container--full[data-swiper]
.wt-grid-view-with-drawer__li
.wt-grid-box__item {
width: 100%;
}
.wt-grid-view-with-drawer
.wt-slider__container:has(.swiper-pagination.swiper-pagination-lock) {
padding-bottom: 0;
}
.wt-grid-view-with-drawer .wt-slider.wt-slider--full {
padding: 0;
}
.wt-grid-view-with-drawer .wt-slider-inner {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.wt-grid-view-with-drawer .wt-slider-inner {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-grid-view-with-drawer .wt-slider-inner {
max-width: var(--site-max-width-big);
}
}
.wt-grid-view-with-drawer .wt-slider-inner--full {
padding-left: 0;
padding-right: 0;
max-width: unset;
}
.wt-grid-view-with-drawer__button {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
width: auto !important;
z-index: 5;
}
@media (max-width: 1199px) {
.wt-grid-view-with-drawer__button .svg-icon--plus {
--size-icon: 2rem;
--size-icon-desk: 2rem;
}
}
.wt-grid-view-with-drawer__button .svg-icon--arrow-right {
width: 2rem;
height: 2rem;
}
@media (max-width: 1199px) {
.wt-grid-view-with-drawer__button .svg-icon--arrow-right {
width: 1.6rem;
height: 1.6rem;
}
}
.wt-grid-view-with-drawer__button .hero__button {
padding: 0px;
width: 3.5rem;
height: 3.5rem;
box-sizing: border-box;
}
@media (min-width: 1200px) {
.wt-grid-view-with-drawer__button .hero__button {
width: 4.5rem;
height: 4.5rem;
}
}
.wt-grid-view-with-drawer__button .hero__button--left {
justify-content: flex-start;
}
.wt-grid-view-with-drawer__button .hero__button--right {
justify-content: flex-end;
}
.wt-keys {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
background-color: var(--color-background);
color: var(--color-custom-text);
}
.wt-keys__list {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
flex-flow: wrap;
flex: 0 1 auto;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
gap: calc(var(--gap, 8px) * 3);
justify-content: center;
padding-top: calc(var(--gap, 8px) * 1);
}
@media (min-width: 1200px) {
.wt-keys__list {
padding-left: calc(calc(var(--gap, 8px) * 3) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 3) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-keys__list {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 600px) {
.wt-keys__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.wt-keys__list {
grid-template-columns: repeat(var(--desktop-cols, 3), 1fr);
}
}
@media (min-width: 900px) {
.wt-keys__list--3 {
flex-direction: row;
gap: calc(var(--gap, 8px) * 6);
}
}
@media (min-width: 900px) {
.wt-keys__list--3 .wt-keys__item {
width: calc((100% - (2 * calc(var(--gap, 8px) * 6))) / 3 * 1);
flex-basis: calc((100% - (2 * calc(var(--gap, 8px) * 6))) / 3 * 1);
}
}
@media (min-width: 1200px) {
.wt-keys__list--3 .wt-keys__item {
width: calc((100% - (3 * calc(var(--gap, 8px) * 6))) / 4 * 1);
flex-basis: calc((100% - (3 * calc(var(--gap, 8px) * 6))) / 4 * 1);
}
}
@media (min-width: 900px) {
.wt-keys__list--4 {
flex-direction: row;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 6);
}
}
@media (min-width: 900px) {
.wt-keys__list--4 .wt-keys__item {
width: calc((100% - (1 * calc(var(--gap, 8px) * 6))) / 2 * 1);
flex-basis: calc((100% - (1 * calc(var(--gap, 8px) * 6))) / 2 * 1);
}
}
@media (min-width: 1200px) {
.wt-keys__list--4 .wt-keys__item {
width: calc((100% - (3 * calc(var(--gap, 8px) * 6))) / 4 * 1);
flex-basis: calc((100% - (3 * calc(var(--gap, 8px) * 6))) / 4 * 1);
}
}
.wt-keys__item {
display: flex;
align-items: center;
margin-top: var(--block-margin-top, 0);
margin-bottom: var(--block-margin-bottom, 0);
}
.wt-features-banner .wt-keys__item--bg {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 3);
background-color: var(--color-background-icon, transparent);
border-radius: var(--border-radius);
}
@media (min-width: 600px) {
.wt-keys__item--center {
flex-direction: column;
text-align: center;
}
}
.wt-keys__item .svg-icon,
.wt-keys__item svg {
width: 5rem;
height: 5rem;
}
@media (min-width: 600px) {
.wt-keys__item .svg-icon,
.wt-keys__item svg {
width: 7rem;
height: 7rem;
}
}
.wt-keys__link {
display: flex;
align-items: center;
margin-top: var(--block-margin-top, 0);
margin-bottom: var(--block-margin-bottom, 0);
}
.wt-keys__link:hover {
color: inherit;
}
.wt-features-banner .wt-keys__list .wt-keys__link,
.wt-slider__wrapper .wt-slider__slide .wt-keys__link {
text-decoration: none;
}
.wt-keys__content {
color: var(--color-custom-text);
}
@media (min-width: 600px) {
.wt-keys__content--left {
display: flex;
flex-direction: column;
}
}
.wt-keys__content--left .wt-keys__title--has-text {
margin-bottom: calc(var(--gap, 8px) * 1);
}
.wt-keys__content--left .wt-keys__text p {
margin-top: 0;
}
.wt-keys__image {
width: 5rem;
height: 5rem;
object-fit: cover;
margin-inline-end: 4px;
}
@media (min-width: 600px) {
.wt-keys__image {
width: 7rem;
height: 7rem;
}
}
@media (min-width: 600px) {
.wt-keys__image.center {
margin-right: 0;
margin-left: 0;
margin-bottom: calc(var(--gap, 8px) * 2);
}
}
.wt-keys__image.left {
margin-bottom: 0;
}
@media (min-width: 600px) {
.wt-keys__image {
width: 7rem;
height: 7rem;
}
.wt-keys__item--center .wt-keys__image {
margin-right: 0;
margin-bottom: calc(var(--gap, 8px) * 2);
}
}
.wt-features-banner .wt-keys__image,
.wt-keys__slide-item .wt-keys__image {
width: var(--icon-width-mobile);
height: auto;
}
@media (min-width: 900px) {
.wt-features-banner .wt-keys__image,
.wt-keys__slide-item .wt-keys__image {
width: var(--icon-width-desktop);
}
}
.wt-keys__image-container {
--featured-icon-size: 3rem;
width: 100%;
max-width: var(--featured-icon-size);
max-height: var(--featured-icon-size);
margin-inline-end: calc(var(--gap, 8px) * 2);
margin-inline-start: calc(var(--gap, 8px) * 1);
}
@media (min-width: 600px) {
.wt-keys__image-container {
max-width: var(--featured-icon-size);
max-height: var(--featured-icon-size);
}
}
.wt-keys__image-container .wt-keys__image,
.wt-keys__item .wt-keys__image-container svg {
width: var(--featured-icon-size);
height: var(--featured-icon-size);
}
.wt-keys__icon {
width: 5rem;
height: 5rem;
margin: 1rem;
flex-shrink: 0;
color: var(--color-icon);
}
.wt-keys .wt-keys__icon {
margin: 0;
margin-inline-end: 4px;
width: var(--icon-width-mobile);
height: auto;
}
@media (min-width: 900px) {
.wt-keys .wt-keys__icon {
width: var(--icon-width-desktop);
height: auto;
}
}
@media (min-width: 600px) {
.wt-keys__icon {
width: 6rem;
height: 6rem;
}
}
@media (min-width: 600px) {
.wt-keys__item--center .wt-keys__icon {
margin-right: 0;
margin-left: 0;
margin-bottom: calc(var(--gap, 8px) * 2);
}
}
.wt-keys__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
font-size: calc(var(--font-base-size) * 1.25);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
word-break: break-word;
padding: 0 16px;
}
@media (min-width: 1200px) {
.wt-keys__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
.wt-keys__title.center {
text-align: center;
}
@media (min-width: 1200px) {
.wt-keys__title {
padding-bottom: calc(var(--gap, 8px) * 0.5);
}
}
.wt-keys__text {
word-break: break-word;
padding: 0 16px;
}
.wt-keys__text p {
margin: 0;
padding: 0;
}
.wt-keys__text p {
margin-top: calc(var(--gap, 8px) * 0.5);
}
@media (min-width: 600px) {
.wt-keys__text p {
margin-top: calc(var(--gap, 8px) * 1);
}
}
.wt-keys__text.center {
text-align: center;
}
@media (min-width: 600px) {
.wt-keys__text {
display: inline-block;
max-width: 100%;
}
}
.wt-keys__slide-item {
display: flex;
align-items: center;
margin-top: var(--block-margin-top, 0);
margin-bottom: var(--block-margin-bottom, 0);
}
.wt-keys__slide-item--bg {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 3);
background-color: var(--color-background-icon, transparent);
border-radius: var(--border-radius);
}
@media (max-width: 599px) {
.wt-keys__slide-item {
flex-direction: column;
justify-content: center;
gap: 16px;
text-align: center;
}
}
.wt-keys__slide-item .wt-keys__title,
.wt-keys__slide-item .wt-keys__text {
color: var(--color-custom-text);
}
.wt-keys .wt-slider {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 600px) {
.wt-keys .wt-slider {
display: none;
}
}
@media (max-width: 599px) {
body .wt-features-banner.is-slider {
display: none;
}
}
@media (min-width: 600px) {
body .wt-features-banner--slider {
display: none;
}
}
body .wt-features-banner--slider [data-swiper-slide] {
display: flex;
justify-content: center;
align-items: center;
}
body .wt-features-banner--slider [data-swiper-slide].center {
flex-direction: column;
}
.wt-separator {
font-size: calc(var(--font-headline-scale) * 1em);
background: var(--color-custom-background, transparent);
color: var(--color-custom-text, var(--color-text, inherit));
max-width: unset;
}
.wt-separator[data-section-id] {
padding-top: min(
var(--section-margin-block-mobile),
var(--section-gap-top, gap(var(--section-gap, 2)))
);
padding-bottom: min(
var(--section-margin-block-mobile),
var(--section-gap-bottom, gap(var(--section-gap, 2)))
);
}
@media (min-width: 1200px) {
.wt-separator[data-section-id] {
padding-top: var(
--section-gap-top,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
padding-bottom: var(
--section-gap-bottom,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
}
}
@media (min-width: 1200px) {
.wt-separator {
font-size: calc(var(--font-headline-scale-desk) * 1em);
}
}
.wt-separator__line {
background: var(--color-border);
margin: 0 auto;
}
.hero__wrapper .wt-separator__line {
max-width: calc(var(--site-max-width-big) - var(--gap, 8px) * 8);
}
.wt-separator .headline--rich h1,
.wt-separator .headline--rich h2,
.wt-separator .headline--rich h3,
.wt-separator .headline--rich h4,
.wt-separator .headline--rich h5,
.wt-separator .headline--rich h6,
.wt-separator .headline--rich p {
padding-bottom: calc(var(--gap, 8px) * 1);
}
.wt-separator--raw-headline .headline__title {
padding-bottom: calc(var(--gap, 8px) * 1);
}
.css-icon {
--icon-color: var(--color-text);
width: 2rem;
height: 2rem;
display: block;
position: relative;
transition: all 0.3s;
}
.css-icon--square {
border: 1px solid var(--icon-color);
}
#grid-layout:checked ~ * .css-icon--square {
--icon-color: var(--color-border);
}
.css-icon--grid::before,
.css-icon--grid::after {
width: 0.8rem;
height: 0.8rem;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background: var(--icon-color);
box-shadow:
0 1.2rem 0 var(--icon-color),
1.2rem 0 0 var(--icon-color),
1.2rem 1.2rem 0 var(--icon-color);
}
.css-icon--grid::after {
--icon-color: white;
width: 0.6rem;
height: 0.6rem;
top: 0.1rem;
left: 0.1rem;
}
#grid-layout:not(:checked) .css-icon--grid::before {
--icon-color: var(--color-border);
}
.collection {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
position: relative;
}
@media (min-width: 1200px) {
.collection {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.collection {
max-width: var(--site-max-width-big);
}
}
.section--full .collection {
max-width: 100%;
}
@media (min-width: 1200px) {
.collection {
flex-direction: row;
gap: calc(var(--gap, 8px) * 6);
}
.collection--with-aside {
align-items: flex-start;
}
.collection--with-aside .collection__filter {
position: sticky;
top: var(--filters-sticky-offset, calc(var(--gap, 8px) * 2));
margin-bottom: calc(var(--gap, 8px) * 2);
max-height: calc(100vh - calc(var(--gap, 8px) * 4));
overflow: auto;
padding-right: calc(var(--gap, 8px) * 1.5);
}
.collection--with-aside .collection__filter::-webkit-scrollbar {
width: calc(var(--gap, 8px) * 1);
}
.collection--with-aside .collection__filter::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666;
}
}
.collection__title .rich-text--full-width .hero__overlay {
max-width: 100% !important;
}
.collection__title .rich-text .hero__overlay {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.collection__title .rich-text .hero__overlay {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.collection__title .rich-text .hero__overlay {
max-width: var(--site-max-width-big);
}
}
@media (max-width: 1199px) {
.collection__title .rich-text .hero__overlay {
padding: 0 calc(var(--gap, 8px) * 2);
}
}
@media (min-width: 1200px) {
.collection__title .rich-text .hero__overlay {
padding-top: 0;
padding-bottom: 0;
}
}
@media (max-width: 1199px) {
.collection__title .rich-text .hero__overlay__content {
width: 100%;
max-width: 100%;
}
}
.collection switch-column {
margin-left: calc(var(--gap, 8px) * 2);
}
[dir="rtl"] .collection switch-column {
margin-left: 0;
margin-right: calc(var(--gap, 8px) * 2);
}
.collection__mobile-layout-switch {
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 1);
display: none;
align-items: center;
gap: calc(var(--gap, 8px) * 1);
margin-left: calc(var(--gap, 8px) * 2);
}
.collection__mobile-layout-switch:only-child {
margin-left: auto;
}
[dir="rtl"] .collection__mobile-layout-switch {
margin-left: 0;
margin-right: calc(var(--gap, 8px) * 2);
}
[dir="rtl"] .collection__mobile-layout-switch:only-child {
margin-right: auto;
}
.collection__mobile-layout-switch--hidden {
opacity: 0;
}
@media (max-width: 599px) {
.collection__mobile-layout-switch {
display: flex;
}
}
.collection__mobile-layout-checkbox {
position: sticky;
top: 0;
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
display: none;
}
.collection__toolbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
flex-direction: row;
justify-content: end;
margin-top: 0;
background-color: var(--color-background);
width: 100%;
}
@media (max-width: 1199px) {
.collection__toolbar .wt-filter__trigger {
order: 1;
}
}
@media (max-width: 1199px) {
.collection__toolbar .collection__sort {
order: 5;
}
}
@media (max-width: 1199px) {
.collection__toolbar switch-column {
order: 10;
}
}
.search-overlay-on .collection__toolbar {
z-index: 5;
}
.collection__toolbar--minimal {
border-top: 1px solid var(--color-border);
top: -1px;
}
@media (max-width: 1199px) {
.collection__toolbar--minimal {
padding-bottom: calc(var(--gap, 8px) * 1);
padding-top: calc(var(--gap, 8px) * 1);
}
}
@media (max-width: 1199px) {
.collection__toolbar--buttons {
padding-block: calc(var(--gap, 8px) * 1);
gap: calc(var(--gap, 8px) * 2);
justify-content: center;
}
.collection__toolbar--buttons > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 399px) {
.collection__toolbar--buttons {
gap: calc(var(--gap, 8px) * 1);
}
}
@media (max-width: 499px) {
.collection__toolbar .collection__sort .wt-options__label {
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (min-width: 1200px) {
.collection__toolbar {
margin-top: calc(var(--gap, 8px) * 1);
border: 0;
padding: 0;
position: relative;
grid-area: toolbar;
}
}
@media (min-width: 1200px) {
[custom-select-opened] .collection__toolbar {
z-index: 9;
}
}
.collection__header {
grid-area: header;
}
.collection__header__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
text-align: center;
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: 0;
grid-area: header;
}
@media (max-width: 1199px) {
.collection__header__title {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
@media (min-width: 1200px) {
.collection__header__title {
text-align: left;
margin-bottom: 0;
}
}
.collection__subheader {
margin-top: 0;
width: 100%;
}
@media (min-width: 1200px) {
.collection__subheader {
margin-top: calc(var(--gap, 8px) * 1);
display: flex;
align-items: center;
}
}
.collection__counter {
display: none;
width: 100%;
text-align: center;
grid-area: counter;
font-size: 1.2rem;
}
[data-text-horizontal="left"] + .collection-grid-section .collection__counter {
text-align: left;
}
[data-text-horizontal="right"] + .collection-grid-section .collection__counter {
text-align: right;
}
@media (min-width: 1200px) {
.collection__counter {
display: flex;
font-size: inherit;
}
.collection__counter .counter__value {
display: flex;
}
.collection__counter .counter__value::after {
content: " ";
white-space: pre;
}
}
.collection__counter.mobile {
display: block;
padding-bottom: 4px;
}
@media (min-width: 1200px) {
.collection__counter.mobile {
padding-bottom: 0;
display: none;
font-size: inherit;
}
}
.collection__sort {
max-width: 60%;
margin-left: auto;
margin-right: calc(var(--gap, 8px) * -1);
}
@media (min-width: 1200px) {
.collection__sort {
margin-left: calc(var(--gap, 8px) * 1.5);
}
}
@media (max-width: 399px) {
.collection__sort {
max-width: 45%;
}
}
[dir="rtl"] .collection__sort {
margin-left: calc(var(--gap, 8px) * -1);
margin-right: auto;
}
@media (min-width: 1200px) {
[dir="rtl"] .collection__sort {
margin-right: calc(var(--gap, 8px) * 1.5);
}
}
@media (max-width: 399px) {
.collection__sort {
max-width: 45%;
}
}
@media (max-width: 899px) {
.collection__toolbar:not(:has(.collection__filter-trigger))
.collection__sort {
margin-left: 0;
margin-right: auto;
}
}
@media (max-width: 1199px) {
[toolbar-style="buttons"] .collection__sort {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
height: 4rem;
border: 1px solid var(--color-border);
width: 100%;
max-width: 45rem;
flex-grow: 1;
overflow: hidden;
justify-content: center;
border-radius: min(var(--border-radius-button), 4px);
display: flex;
align-items: center;
margin-right: 0;
}
}
@media (max-width: 1199px) and (hover: hover) {
[toolbar-style="buttons"] .collection__sort:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
@media (max-width: 1199px) {
[toolbar-style="buttons"] .collection__sort [custom-select-trigger] {
width: 100%;
text-align: center;
justify-content: center;
}
}
.collection__filter-trigger.wt-filter__trigger {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
grid-area: filter;
border-radius: 0;
border: 0;
height: unset;
padding: 0;
margin-right: auto;
cursor: pointer;
position: relative;
}
.collection__filter-trigger.wt-filter__trigger::before {
content: "";
display: block;
position: absolute;
inset: 0;
}
@media (min-width: 1200px) {
.collection__filter-trigger.wt-filter__trigger::after {
content: "";
width: 1px;
height: 50%;
background-color: var(--color-border);
margin-left: calc(var(--gap, 8px) * 2.5);
display: block;
}
}
.collection__filter-trigger.wt-filter__trigger:hover {
background-color: inherit;
border: 0;
color: inherit;
}
@media (max-width: 1199px) {
[toolbar-style="buttons"] .collection__filter-trigger.wt-filter__trigger {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
height: 4rem;
border: 1px solid var(--color-border);
width: 100%;
max-width: 45rem;
flex-grow: 1;
overflow: hidden;
justify-content: center;
border-radius: min(var(--border-radius-button), 4px);
}
}
@media (max-width: 1199px) and (hover: hover) {
[toolbar-style="buttons"]
.collection__filter-trigger.wt-filter__trigger:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
@media (min-width: 1200px) {
.collection__filter-trigger.wt-filter__trigger {
margin-right: 0;
}
.collection__filter-trigger.wt-filter__trigger:not(:first-child)::after {
content: "";
width: 1px;
height: 50%;
background-color: var(--color-border);
margin-left: calc(var(--gap, 8px) * 2.5);
display: block;
}
}
[dir="rtl"] .collection__filter-trigger.wt-filter__trigger {
margin-right: 0;
margin-left: auto;
}
@media (min-width: 1200px) {
[dir="rtl"] .collection__filter-trigger.wt-filter__trigger {
margin-left: 0;
margin-right: auto;
}
[dir="rtl"] .collection__filter-trigger.wt-filter__trigger::after {
margin-left: 0;
margin-right: calc(var(--gap, 8px) * 2.5);
}
}
.collection__body {
width: 100%;
padding-bottom: calc(var(--gap, 8px) * 3);
}
@media (min-width: 1200px) {
.collection__body {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-template-areas: "header header" "counter toolbar" "items items" "more more";
}
[dir="rtl"] .collection__body {
overflow: hidden;
}
}
.collection__aside:not(.wt-filter--drawer) {
padding-block: 0;
}
@media (min-width: 1200px) {
.collection__aside:not(.wt-filter--drawer) {
overflow: auto;
max-height: 98vh;
top: var(--filters-sticky-offset, 0);
padding-top: 0 !important;
flex: 1 0 27rem;
}
.collection__aside:not(.wt-filter--drawer) .filter__header {
margin-top: 16px;
margin-bottom: 16px;
}
.collection__aside:not(.wt-filter--drawer)
.filter__header.wt-collapse__trigger {
margin-top: 0;
margin-bottom: 0;
}
}
.collection__grid {
--cols: 1;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
gap: calc(var(--gap, 8px) * 1)
var(--grid-gap-mobile, calc(var(--gap, 8px) * 2));
margin-top: 0;
margin-bottom: var(--section-gap-bottom);
grid-area: items;
}
@media (min-width: 900px) {
.collection__grid {
margin-top: 0;
gap: var(--grid-gap);
}
}
@media (max-width: 599px) {
#grid-layout:checked ~ .collection__grid {
--cols: 2;
}
}
.collection__grid.collection__grid--search-category {
transition:
opacity 0.3s ease-in-out,
visibility 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
max-height: 0;
overflow: hidden;
}
.collection__grid.collection__grid--search-category + .collection__aside {
display: none;
}
@media (min-width: 1200px) {
.collection__grid.collection__grid--search-category.active {
overflow: visible;
}
}
.collection__grid.collection__grid--search-category .wt-options__trigger,
.collection__grid.collection__grid--search-category .collection__subheader {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.collection__grid.collection__grid--search-category .collection__toolbar {
padding-top: 8px;
padding-bottom: 8px;
}
.collection__grid.active {
opacity: 1;
visibility: visible;
max-height: 100%;
}
.collection__grid--articles,
.collection__grid--pages {
display: none;
margin-top: 0;
margin-bottom: 0;
}
.collection__grid__loader__container {
width: 100%;
grid-column: 1/-1;
display: flex;
align-items: center;
justify-content: center;
}
.collection__grid__title {
font-size: 2rem;
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
margin-top: calc(var(--gap, 8px) * 0.5);
align-self: flex-start;
grid-column-start: 1;
grid-column-end: calc(var(--cols) + 1);
}
@media (min-width: 600px) {
.collection__grid {
--cols: 2;
}
}
@media (min-width: 900px) {
.collection__grid {
--cols: 3;
}
}
@media (min-width: 1200px) {
.collection__grid {
--cols: 4;
margin-top: calc(var(--gap, 8px) * 1);
}
}
@media (min-width: 1200px) {
.collection__grid[data-cols-desktop="3"] {
--cols: 3;
}
}
.collection__grid__item {
display: flex;
align-self: stretch;
margin-bottom: calc(var(--gap, 8px) * 3);
}
@media (min-width: 900px) {
.collection__grid__item {
margin-bottom: calc(var(--gap, 8px) * 5);
}
}
.collection__grid__item color-swatch {
display: block;
width: 100%;
}
.collection__grid__item .card__picture {
display: block;
}
.collection__grid__item .card__title {
word-break: break-word;
}
.collection__more {
margin-bottom: calc(var(--gap, 8px) * 7);
grid-area: more;
}
.collection__empty-collection {
display: flex;
align-items: center;
justify-content: center;
}
.collection .wt-pagination-wrapper {
grid-column: -1/1;
}
.collection__sticky-header {
display: flex;
flex-direction: column;
padding: 0;
position: sticky;
top: var(--filters-sticky-offset, -1px);
width: 100%;
z-index: 9;
margin-left: auto;
margin-right: auto;
background-color: var(--color-background, #fff);
opacity: 1;
transition: opacity 0.4s;
}
@media (min-width: 1200px) {
.collection__sticky-header {
grid-column: 1/3;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.collection__sticky-header.transition {
opacity: 0;
}
@media (max-width: 1199px) {
.collection__sticky-header--buttons {
margin-bottom: calc(var(--gap, 8px) * 1);
}
}
switch-column {
display: block;
}
@media (min-width: 600px) {
switch-column {
display: none;
}
}
switch-column .loading-overlay {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: end;
}
@media (min-width: 600px) {
switch-column .loading-overlay {
display: none;
}
}
switch-column .loading-overlay__spinner {
display: flex;
align-items: center;
justify-content: center;
}
switch-column .loading-overlay--hidden {
display: none;
}
.main-search-tab__container {
grid-column-start: 1;
grid-column-end: 3;
}
@media (max-width: 899px) {
.main-search-tab__container .collection__grid {
--cols: var(--mobile-cols, 2);
}
}
.main-search-tab__container #product-grid-articles {
margin-top: 16px;
}
.main-search-tab__container .collection__sticky-header {
grid-column: 1/-1;
}
.main-search-tab__container
#product-grid-products
.collection__toolbar.collection__toolbar--buttons {
margin-bottom: 0;
}
.wt-filter__trigger .svg-icon.svg-icon--filter[data-icon-theme="option_2"] {
height: 11px;
width: 16px;
}
@media (min-width: 900px) {
.wt-filter__trigger .svg-icon.svg-icon--filter[data-icon-theme="option_2"] {
margin-right: 12px;
}
}
.grid-banner {
margin-bottom: 24px;
position: relative;
}
@media (max-width: 899px) {
.grid-banner--mobile-2 {
aspect-ratio: var(--media-aspect-ratio, auto);
grid-column: 1/-1;
}
}
@media (min-width: 900px) {
.grid-banner--desktop-2 {
grid-column: span 2;
}
}
@media (min-width: 900px) {
.grid-banner {
margin-bottom: calc(var(--gap, 8px) * 5);
}
}
.grid-banner__media {
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: var(--border-radius);
overflow: hidden;
aspect-ratio: var(--aspect-ratio, auto);
height: 100%;
width: 100%;
}
.grid-banner__media-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--color-overlay, transparent);
opacity: var(--color-overlay-opacity, 1);
}
.grid-banner img,
.grid-banner video {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid-banner__media-mobile {
width: 100%;
height: 100%;
}
@media (min-width: 900px) {
.grid-banner__media-mobile {
display: none;
}
}
.grid-banner__media-mobile svg {
width: 100%;
height: 100%;
}
.grid-banner__media-desktop {
display: none;
width: 100%;
height: 100%;
}
@media (min-width: 900px) {
.grid-banner__media-desktop {
display: block;
}
}
.grid-banner__media-desktop svg {
width: 100%;
height: 100%;
}
.grid-banner__media-content {
--custom-text-scale: var(--font-text-scale, 1);
--text-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
width: 100%;
height: 100%;
padding: 24px;
aspect-ratio: var(--aspect-ratio, auto);
overflow: hidden;
display: flex;
justify-content: var(--mobile-text-horizontal, start);
align-items: var(--mobile-text-vertical, start);
text-align: var(--mobile-text-horizontal, start);
color: var(--color-body-text);
font-family: var(--font-base);
font-size: var(--text-size);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
}
@media (min-width: 900px) {
.grid-banner__media-content {
--custom-text-scale: var(--font-text-scale-desk);
justify-content: var(--desktop-text-horizontal, start);
align-items: var(--desktop-text-vertical, start);
text-align: var(--desktop-text-horizontal, start);
}
}
.grid-banner__media-text {
display: flex;
flex-direction: column;
gap: calc(var(--gap, 8px) * 1.5);
}
.grid-banner__media-button {
display: flex;
}
.grid-banner .hero__button--gap {
justify-content: var(--mobile-text-horizontal, start);
}
@media (min-width: 900px) {
.grid-banner .hero__button--gap {
justify-content: var(--desktop-text-horizontal, start);
}
}
.grid-banner .hero__button--link {
text-align: var(--mobile-text-horizontal);
}
@media (min-width: 900px) {
.grid-banner .hero__button--link {
text-align: var(--desktop-text-horizontal);
}
}
.collection-feature__wrapper {
background-color: var(--color-background);
color: var(--color-custom-text);
}
.collection-feature__wrapper .headline .headline__title {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
}
.collection-feature__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: min(
var(--font-headline-size) * var(--font-headline-scale, 1),
var(--font-headline-size) + 13.5vw
);
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-base-line-height-mobile, normal);
}
@media (min-width: 900px) {
.collection-feature__container {
font-size: min(
var(--font-headline-size) * var(--font-headline-scale-desk, 1),
var(--font-headline-size) + 13.5vw
);
line-height: var(--font-base-line-height, normal);
}
}
.collection-feature__item {
width: fit-content;
position: relative;
}
@media (min-width: 900px) {
.collection-feature__item {
max-width: 75vw;
}
}
.collection-feature__item a {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: var(--color-custom-text);
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.collection-feature__item a {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.collection-feature__item a {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 900px) {
.collection-feature__item a:hover {
color: inherit;
}
.collection-feature__item a:hover .collection-feature__img-container img,
.collection-feature__item a:hover .collection-feature__img-container svg {
opacity: 1;
transform: translateX(0);
}
.collection-feature__item a:hover span {
transform: translateX(-10px);
}
}
@media (min-width: 900px) {
.collection-feature__item span {
transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
}
.collection-feature__img-container {
display: flex;
height: min(
var(--font-headline-size) * var(--font-headline-scale, 1),
var(--font-headline-size) + 13.5vw
);
margin-left: 8px;
}
@media (min-width: 900px) {
.collection-feature__img-container {
height: min(
var(--font-headline-size) * var(--font-headline-scale-desk, 1) *
var(--font-base-line-height, normal),
var(--font-headline-size) + 13.5vw
);
position: absolute;
margin-left: 0;
right: -16px;
transform: translateX(100%);
}
}
.collection-feature__img-container img,
.collection-feature__img-container svg {
height: 100%;
width: auto;
opacity: 1;
}
@media (min-width: 900px) {
.collection-feature__img-container img,
.collection-feature__img-container svg {
transition:
transform 1.2s cubic-bezier(0.33, 1, 0.68, 1),
opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1);
opacity: 0;
transform: translateX(-20%);
}
}
.breadcrumbs {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
font-size: var(--font-breadcrumbs-size);
font-family: var(--font-breadcrumbs);
font-style: var(--font-breadcrumbs-style);
font-weight: var(--font-breadcrumbs-weight);
text-transform: var(--font-breadcrumbs-transform, none);
letter-spacing: var(--font-breadcrumbs-letter-spacing, normal);
font-size: 1.2rem;
}
@media (min-width: 1200px) {
.breadcrumbs {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.breadcrumbs {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1200px) {
.breadcrumbs {
font-size: max(1.2rem, calc(var(--font-base-size) - 2px));
}
}
.breadcrumbs__wrapper {
background-color: var(--color-custom-background);
color: var(--color-custom-text);
}
.breadcrumbs--full-width {
max-width: 100%;
}
.breadcrumbs__display-none {
display: none;
}
.breadcrumbs__list {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
font-size: var(--font-breadcrumbs-size);
font-family: var(--font-breadcrumbs);
font-style: var(--font-breadcrumbs-style);
font-weight: var(--font-breadcrumbs-weight);
text-transform: var(--font-breadcrumbs-transform, none);
letter-spacing: var(--font-breadcrumbs-letter-spacing, normal);
}
@media (min-width: 900px) {
.breadcrumbs__list {
overflow: visible;
}
}
.breadcrumbs__list::after {
content: "";
display: block;
width: calc(var(--gap, 8px) * 4);
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
}
[dir="rtl"] .breadcrumbs__list::after {
left: 0;
right: auto;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
}
.breadcrumbs__item {
display: flex;
align-items: center;
justify-content: center;
}
.breadcrumbs__item:not(:last-child)::after {
content: "/";
display: flex;
align-items: center;
justify-content: center;
margin: 0 calc(var(--gap, 8px) * 1);
font-size: 80%;
opacity: 0.5;
}
[dir="rtl"] .breadcrumbs__item:not(:last-child)::after {
content: "\\";
}
.breadcrumbs__item a {
display: flex;
align-items: center;
justify-content: center;
}
.breadcrumbs__link {
color: inherit;
display: flex;
align-items: center;
justify-content: center;
}
.wt-filter__trigger {
align-items: center;
display: flex;
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.wt-filter__trigger:not(.wt-filter__trigger--drawer) {
display: none;
}
}
.wt-filter__trigger__counter {
--counter-border-color: var(--color-header-background);
min-width: 2rem;
height: 2rem;
padding: 0 0.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-action-background);
color: var(--color-action-text);
border-radius: 1.1rem;
font-size: 1.2rem;
font-weight: 400;
line-height: 1;
margin-left: calc(var(--gap, 8px) * 0.5);
}
[dir="rtl"] .wt-filter__trigger__counter {
margin-left: 0;
margin-right: calc(var(--gap, 8px) * 0.5);
}
.wt-filter__trigger .svg-icon {
margin-right: calc(var(--gap, 8px) * 1);
}
[dir="rtl"] .wt-filter__trigger .svg-icon {
margin-right: 0;
margin-left: calc(var(--gap, 8px) * 1);
}
.wt-filter__close {
cursor: pointer;
padding: 0;
height: auto;
border: 0;
position: relative;
background: transparent;
color: inherit;
}
.wt-filter__close::before {
content: "";
display: block;
position: absolute;
inset: 0;
}
body .wt-filter__close.wt-filter__close {
display: flex;
align-items: center;
}
.wt-filter__close:hover {
background-color: transparent;
color: inherit;
}
.wt-filter__header {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
font-size: calc(var(--font-base-size) * 1.15);
}
@media (min-width: 1200px) {
.wt-filter__header {
font-size: calc(var(--font-base-size) * 1.25);
}
}
@media (min-width: 1200px) {
.wt-filter__header {
display: none;
}
}
.wt-filter__body > *:last-child {
border-bottom: calc(var(--gap, 8px) * 6) solid transparent;
margin-bottom: 0;
}
.wt-filter__cta {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
width: 100%;
}
@media (hover: hover) {
.wt-filter__cta:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-filter__cta.loading {
color: transparent;
}
.wt-filter__footer {
padding: calc(var(--gap, 8px) * 2);
border-top: 1px solid var(--color-border);
}
@media (min-width: 1200px) {
.wt-filter__footer__body.always-visible {
display: none;
}
}
.wt-filter__view-cart {
display: inline-flex;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * -0.5);
position: relative;
left: 50%;
transform: translateX(-50%);
}
.wt-filter__remove-all,
.wt-filter__clear-all {
display: block;
text-align: center;
margin-bottom: calc(var(--gap, 8px) * 0.5);
}
.wt-filter__remove-all {
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
height: var(--input-height);
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
line-height: 1.15;
}
@media (max-width: 1199px) {
.wt-filter {
position: fixed;
background: var(--color-background);
width: 100%;
max-width: 50rem;
height: 100%;
z-index: 50;
transform: translateX(100%);
top: 0;
right: 0;
display: flex;
flex-direction: column;
left: 0;
right: initial;
transform: translateX(-100%);
}
.drawers-animated .wt-filter {
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
}
.wt-filter__header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-filter__header h3 {
margin: 0;
}
.wt-filter__close {
display: inline-block;
cursor: pointer;
}
.wt-filter__body {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4) 0;
flex-grow: 100;
overflow: auto;
}
}
@media (min-width: 1200px) {
.wt-filter:not(.wt-filter--drawer) {
padding-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 7);
}
}
.wt-filter--drawer {
position: fixed;
background: var(--color-background);
width: 100%;
max-width: 50rem;
height: 100%;
z-index: 50;
transform: translateX(100%);
top: 0;
right: 0;
display: flex;
flex-direction: column;
transform: translateX(-100%);
right: initial;
left: 0;
z-index: 101;
}
.drawers-animated .wt-filter--drawer {
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
}
@media (min-width: 1200px) {
.wt-filter--drawer {
right: 0;
left: initial;
transform: translateX(100%);
}
}
.wt-filter--drawer-open {
transform: translateX(0%);
}
.wt-filter--drawer .wt-filter__header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-filter--drawer .wt-filter__header h3 {
margin: 0;
}
.wt-filter--drawer .wt-filter__close {
display: inline-block;
cursor: pointer;
}
.wt-filter--drawer .wt-filter__body {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4) 0;
flex-grow: 100;
overflow: auto;
}
.wt-filter--drawer .wt-filter__header {
display: flex;
}
.wt-filter--drawer .wt-filter__close {
display: block;
}
.wt-filter--hidden {
display: none;
}
[data-filter-position="always"]
.wt-filter
.list--checkbox
.list__item:nth-of-type(6n + 1)
.color-swatcher--tooltip {
left: 0;
transform: none;
}
[data-filter-position="always"]
.wt-filter
.list--checkbox
.list__item:nth-of-type(6n)
.color-swatcher--tooltip {
left: initial;
right: 0;
transform: none;
}
[data-filter-position="drawer"]
.wt-filter
.list--checkbox
.list__item:nth-of-type(10n + 1)
.color-swatcher--tooltip {
left: 0;
transform: none;
}
[data-filter-position="drawer"]
.wt-filter
.list--checkbox
.list__item:nth-of-type(10n)
.color-swatcher--tooltip {
left: initial;
right: 0;
transform: none;
}
@media (max-width: 599px) {
body.page-overlay-cart-on > * {
opacity: 0;
}
body.page-overlay-cart-on > cart-drawer {
opacity: 1;
}
}
.wt-cart__list {
width: 100%;
}
.wt-cart__list > li:first-of-type {
padding-top:0!important;
}
.wt-cart__item-discount {
display: flex;
align-items: center;
gap: 4px;
margin: 4px 0;
}
.wt-cart .cart-item__discounted-prices {
display: flex;
gap: 6px;
}
.wt-cart .cart-item__price {
font-size: max(1.3rem, var(--font-base-size) - 0.4rem);
color: var(--color-body-text-light);
}
.wt-cart__drawer {
position: fixed;
background: var(--color-background);
width: 100%;
max-width: 50rem;
height: 100%;
z-index: 50;
transform: translateX(100%);
top: 0;
right: 0;
display: flex;
flex-direction: column;
}
.drawers-animated .wt-cart__drawer {
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
}
.wt-cart__drawer__header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-cart__drawer__header h3 {
margin: 0;
}
.wt-cart__drawer__close {
display: inline-block;
cursor: pointer;
}
.wt-cart__drawer__body {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4) 0;
flex-grow: 100;
overflow: auto;
}
[dir="rtl"] .wt-cart__drawer {
left: 0;
right: auto;
transform: translateX(-100%);
}
.wt-cart__drawer--open,
.wt-cart[open] .wt-cart__drawer {
transform: translateY(0);
}
.wt-cart__drawer__header {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 3);
}
@media (max-width: 399px) {
.wt-cart__drawer__header {
padding: calc(var(--gap, 8px) * 2);
}
}
.wt-cart__drawer__footer {
padding: calc(var(--gap, 8px) * 2);
border-top: 1px solid var(--color-border);
z-index: 10;
background-color: var(--color-background);
}
.wt-cart__drawer__code {
margin-top: auto;
margin-left: calc(var(--gap, 8px) * -2);
margin-right: calc(var(--gap, 8px) * -2);
}
.wt-cart__drawer__inner {
flex-direction: column;
display: flex;
height: 100%;
}
.wt-cart__drawer__close {
border: none;
background: none;
color: inherit;
padding: 0;
align-items: center;
display: flex;
position: relative;
}
.wt-cart__drawer__close::after {
content: "";
position: absolute;
inset: 0;
}
.wt-cart__drawer__close:hover {
background: none;
}
.wt-cart__drawer__body {
display: flex;
flex-direction: column;
padding: 0 calc(var(--gap, 8px) * 3);
}
@media (max-width: 399px) {
.wt-cart__drawer__body {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
}
.wt-cart__drawer__items {
height: 100%;
display: flex;
}
.wt-cart__drawer__form {
width: 100%;
}
.wt-cart__drawer__content {
height: 100%;
display: flex;
}
.wt-cart__drawer__content .wt-cart__title {
flex-grow: initial;
margin: initial;
margin-bottom: calc(var(--gap, 8px) * 2);
}
.wt-cart--empty .wt-cart__login {
width: 100%;
}
.wt-cart__cross-sell {
width: 100%;
background-color: rgba(var(--color-text-rgb), 0.05);
padding: calc(var(--gap, 8px) * 2) 0;
transition: margin 0.3s;
--cross-sell-content-height: calc(100px + gap(2));
}
.wt-cart__cross-sell__toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
cursor: pointer;
}
.wt-cart__cross-sell__toggle .svg-icon {
transform-origin: center;
transition: transform 0.2s ease;
width: 22px;
height: 22px;
}
.wt-cart__cross-sell .shoppable-product-card--cross-sell {
height: var(--cross-sell-content-height);
margin-inline-start: calc(var(--gap, 8px) * 2);
}
.wt-cart__cross-sell
.wt-slider--cross-sell
.shoppable-product-card--cross-sell {
margin-inline-start: 0;
}
.wt-cart__cross-sell__empty {
padding: calc(var(--gap, 8px) * 2);
margin: calc(var(--gap, 8px) * 2);
background-color: red;
color: white;
}
.wt-cart__cross-sell--collapsed {
margin-bottom: -146px;
}
.wt-cart__cross-sell--collapsed .wt-cart__cross-sell__toggle .svg-icon {
transform: rotate(180deg);
}
.wt-cart__cross-sell__heading {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
margin: 0 calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 2)
calc(var(--gap, 8px) * 2);
display: flex;
justify-content: space-between;
align-items: center;
}
.wt-cart__cross-sell__products {
display: flex;
gap: 12px;
}
.wt-cart__cross-sell__products .wt-slider__slide {
margin-left: calc(var(--gap, 8px) * 2);
}
.wt-cart__cross-sell__products .wt-slider__slide:last-of-type {
margin-right: calc(var(--gap, 8px) * 2);
}
.wt-cart__header--empty .wt-cart__title {
margin-right: 0;
}
.wt-cart__login {
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: center;
padding-top: calc(var(--gap, 8px) * 5);
margin-top: calc(var(--gap, 8px) * 5);
}
.wt-cart__login__title {
margin-block: 0;
font-size: var(--font-base-size);
font-family: var(--font-headline);
}
.wt-cart__login__text {
font-size: var(--font-base-size);
}
.wt-cart__login__text a {
text-decoration: underline;
}
.wt-cart__wrapper {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
max-width: var(--post-max-width);
}
@media (min-width: 1200px) {
.wt-cart__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-cart__wrapper {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1800px) {
.wt-cart__wrapper {
max-width: var(--post-max-width);
}
}
.wt-cart__title {
font-size: 2.8rem;
margin: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 2)
calc(var(--gap, 8px) * 2) 0;
flex-grow: 3;
}
.wt-cart__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.wt-cart__header--empty {
width: 100%;
flex-direction: column;
margin-bottom: calc(var(--gap, 8px) * 5);
margin-top: calc(var(--gap, 8px) * 3);
justify-content: center;
}
.wt-cart__header__icon-bag {
width: 4rem;
height: 4rem;
}
.wt-cart__header__action {
display: flex;
flex-grow: 1;
}
.wt-cart__header__subtotal {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: calc(var(--gap, 8px) * 3);
text-align: right;
}
.wt-cart__header__subtotal .text {
font-size: 1.2rem;
font-family: var(--font-price);
}
.wt-cart__header__subtotal .value {
font-size: 1.6rem;
font-weight: bold;
}
.wt-cart__item {
padding-top: calc(var(--gap, 8px) * 3);
padding-bottom: calc(var(--gap, 8px) * 3);
display: flex;
}
.wt-cart__item .loading-overlay:not(.hidden) ~ * {
visibility: hidden;
}
.wt-cart__item:not(:last-child) {
border-bottom: 1px solid var(--color-border);
}
.wt-cart__item__link {
display: block;
}
@media (max-width: 599px) {
.cart-page .wt-cart__item {
align-items: flex-start;
}
}
@media (min-width: 900px) {
.cart-page .wt-cart__item {
padding-top: calc(var(--gap, 8px) * 4);
padding-bottom: calc(var(--gap, 8px) * 4);
}
}
.wt-cart__item__data {
position: relative;
width: 100%;
flex-basis:35%;
}
.wt-cart__item__remove {
opacity: 0.5;
display: flex;
}
.wt-cart__item__remove--title {
position: absolute;
top: 0;
right: 0;
}
[dir="rtl"] .wt-cart__item__remove--title {
right: unset;
left: 0;
}
@media (min-width: 900px) {
.wt-cart__item__remove--title {
display: none;
}
}
.wt-cart__item__remove--amount {
margin-right: auto;
}
.wt-cart__item__remove .svg-icon {
transform: scale(0.75);
width: 32px;
height: 32px;
}
.wt-cart__item__thumb {
margin: 0;
position: relative;
}
.wt-cart__item__thumb .link-save {
top: calc(var(--gap, 8px) * 1);
right: calc(var(--gap, 8px) * 1);
transform: scale(0.75);
transform-origin: top right;
}
.wt-cart__item__thumb img,
.wt-cart__item__thumb svg {
display: block;
max-width: 12rem;
border-radius: var(--border-radius);
}
@media (max-width: 399px) {
.wt-cart__item__thumb img,
.wt-cart__item__thumb svg {
max-width: 8rem;
}
}
@media (min-width: 900px) {
.wt-cart__item__thumb img,
.wt-cart__item__thumb svg {
max-width: 9rem;
}
}
.wt-cart__drawer .wt-cart__item__thumb {
align-self: flex-start;
width: 30%;
min-width: 84px;
}
.wt-cart__drawer .wt-cart__item__thumb img,
.wt-cart__drawer .wt-cart__item__thumb svg {
max-width: 12rem;
}
.wt-cart__item__name {
margin-top: 0;
margin-bottom: 0;
padding-right: 8px;
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
width: calc(100% - 24px);
}
.wt-cart__item__price {
margin-bottom: calc(var(--gap, 8px) * 1);
}
.wt-cart__item__price-wrapper {
position: relative;
flex-basis: 50%;
display: flex;
justify-content: flex-end;
}
.wt-cart__drawer .wt-cart__item__price {
display: none;
}
.wt-cart__item__price .original {
text-decoration: line-through;
color: var(--color-text-light);
}
.wt-cart__item__vendor {
opacity: 0.5;
text-transform: uppercase;
font-size: 1.2rem;
}
.wt-cart__item__body {
display: flex;
width: 100%;
padding-left: calc(var(--gap, 8px) * 3);
flex-direction: column;
align-items: stretch;
}
[dir="rtl"] .wt-cart__item__body {
padding-left: 0;
padding-right: calc(var(--gap, 8px) * 3);
}
@media (min-width: 900px) {
.cart-page .wt-cart__item__body {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 900px) {
.wt-cart__item__body {
align-items: center;
}
}
.wt-cart__drawer .wt-cart__item__body {
flex-wrap: wrap;
}
.wt-cart__item__body .options {
width: 100%;
color: var(--color-body-text-light);
margin: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1)
calc(var(--gap, 8px) * 1.5) 0;
display: table;
font-size: max(1.3rem, calc(var(--font-base-size) - 0.4rem));
}
.wt-cart__item__body .options li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.wt-cart__item__body .options li svg {
width: 15px;
height: 15px;
color: var(--color-body-text-light);
}
.wt-cart__item__body .options .value {
word-break: break-all;
}
.wt-cart__item__amount {
font-size: var(--font-price-size);
font-family: var(--font-price);
font-style: var(--font-price-style);
font-weight: var(--font-price-weight);
text-transform: var(--font-price-transform, none);
letter-spacing: var(--font-price-letter-spacing, normal);
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
margin-bottom: calc(var(--gap, 8px) * 1);
gap: 8px;
}
@media (min-width: 900px) {
.wt-cart__item__amount {
justify-content: end;
}
}
.wt-cart__item__amount.cart-page {
justify-content: space-between;
flex-wrap: wrap;
}
.wt-cart__item__amount.cart-page .item__details {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.wt-cart__item__amount.cart-page .cart-item__error {
display: none;
}
.wt-cart__item__amount .cart-item__discounted-prices {
display: flex;
flex-wrap: wrap;
gap: 0;
width: min-content;
justify-content: end;
}
.wt-cart__item__amount .cart-item__discounted-prices s,
.wt-cart__item__amount .cart-item__discounted-prices span {
white-space: nowrap;
}
.wt-cart__item__amount
.cart-item__discounted-prices
.cart-item__old-price.price.price--end {
font-size: calc(var(--font-base-size) - 2px);
}
.wt-cart__item__amount cart-remove-button {
display: none;
}
@media (min-width: 900px) {
.wt-cart__item__amount cart-remove-button {
display: flex;
}
}
@media (max-width: 399px) {
.wt-cart__item__amount {
flex-wrap: wrap;
}
}
.wt-cart__item__amount .value {
margin-left: auto;
}
.wt-cart__item__price-wrapper .price--end-sale {
color: var(--color-sale-price);
}
.wt-cart__item .price--end-sale {
color: var(--color-sale-price);
}
.wt-cart__footer {
margin-left: calc(var(--gap, 8px) * -2);
margin-right: calc(var(--gap, 8px) * -2);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
display: flex;
flex-wrap: wrap;
position: sticky;
bottom: 0;
z-index: 10;
}
@media (min-width: 900px) {
.wt-cart__footer {
justify-content: flex-end;
}
}
.search-overlay-on .wt-cart__footer {
z-index: 1;
}
.wt-cart__footer .discounts {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: calc(var(--gap, 8px) * 3);
}
.wt-cart__footer .discounts li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.wt-cart__footer .discounts li svg {
width: 15px;
height: 15px;
color: var(--color-body-text-light);
}
@media (min-width: 900px) {
.wt-cart__footer {
position: static;
}
}
.wt-cart__footer__body {
max-width: unset;
width: 100%;
}
.cart-page .wt-cart__footer__body {
margin-bottom: calc(var(--gap, 8px) * 2);
}
@media (min-width: 900px) {
.cart-page .wt-cart__footer__body {
max-width: 50%;
margin-bottom: calc(var(--gap, 8px) * 2);
flex-basis: 50%;
}
}
.wt-cart__footer__body .discounts {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: calc(var(--gap, 8px) * 3);
}
.wt-cart__footer__body .discounts li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.wt-cart__footer__body .discounts li svg {
width: 15px;
height: 15px;
color: var(--color-body-text-light);
}
.wt-cart__footer__aside {
width: 100%;
}
@media (min-width: 900px) {
.wt-cart__footer__aside {
flex-basis: 50%;
}
}
.wt-cart__checkbox {
display: inline-flex;
}
.wt-cart__subtitle {
width: 100%;
margin-left: auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: max(1.2rem, calc(var(--font-base-size) - 0.4rem));
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
font-size: var(--font-base-size);
}
@media (max-width: 599px) {
.wt-cart__subtitle {
font-size: calc(var(--font-base-size) - 2px);
}
}
.wt-cart__subtitle__tax {
color: var(--color-body-text-light);
}
.wt-cart__subtitle__text {
display: block;
color: var(--color-body-text-light);
text-align: end;
font-size: 1.2rem;
}
.wt-cart__subtotal + .wt-cart__subtitle__text {
margin-top: calc(var(--gap, 8px) * -1.5);
margin-bottom: calc(var(--gap, 8px) * 1);
}
.wt-cart__subtitle a {
text-decoration: underline;
}
.cart-page .wt-cart__subtitle {
padding-top: calc(var(--gap, 8px) * 3);
padding-bottom: calc(var(--gap, 8px) * 3);
border: solid var(--color-border);
border-width: 1px 0;
display: flex;
}
.wt-cart__note {
display: block;
padding: 0;
overflow: hidden;
}
.wt-cart__note .form__field {
margin-top: calc(var(--gap, 8px) * 1);
}
.wt-cart__note__wrapper {
display: block;
width: 100%;
}
.wt-cart__note__trigger {
flex-direction: row;
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
font-size: var(--font-base-size);
}
.cart-page .wt-cart__note__trigger {
border-bottom-width: 0;
}
.wt-cart__note__trigger.wt-collapse__trigger {
display: flex;
}
.wt-collapse__trigger--active + .wt-cart__note {
margin-top: 0;
overflow: visible;
}
@media (min-width: 900px) {
.wt-cart__note {
padding-right: calc(var(--gap, 8px) * 12);
}
[dir="rtl"] .wt-cart__note {
padding-right: 0;
padding-left: calc(var(--gap, 8px) * 12);
}
}
.wt-cart__drawer .wt-cart__note {
padding-right: calc(var(--gap, 8px) * 2);
}
.wt-cart a.button {
border-radius: var(--border-radius-button);
}
.wt-cart__cta {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
width: 100%;
border-radius: var(--border-radius-button);
}
@media (hover: hover) {
.wt-cart__cta:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-cart__cta.loading {
color: transparent;
}
.wt-cart__subtotal {
font-size: var(--font-price-size);
font-family: var(--font-price);
font-style: var(--font-price-style);
font-weight: var(--font-price-weight);
text-transform: var(--font-price-transform, none);
letter-spacing: var(--font-price-letter-spacing, normal);
display: flex;
justify-content: space-between;
align-items: center;
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 1);
margin-top: calc(var(--gap, 8px) * 1);
}
.cart-page .wt-cart__subtotal {
margin-top: 0;
}
.wt-cart__subtotal__value {
--increase-font-size: 0.4rem;
font-size: calc(var(--font-base-size) + var(--increase-font-size));
flex-shrink: 0;
}
.cart-page .wt-cart__subtotal__value {
--increase-font-size: 1.5rem;
}
.wt-cart__subtotal__label {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.wt-cart__subtotal__label .text {
font-family: var(--font-base);
font-style: var(--font-base-style);
font-size: var(--font-base-size);
}
@media (max-width: 599px) {
.wt-cart__subtotal__label .text {
font-size: calc(var(--font-base-size) - 2px);
}
}
.wt-cart__subtotal__label .tax-info {
font-size: 1rem;
line-height: 1.1;
padding-right: calc(var(--gap, 8px) * 3);
color: var(--color-body-text-light);
}
.wt-cart__back-link {
width: 100%;
justify-content: center;
}
.wt-cart__view-cart {
display: inline-flex;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * -0.5);
position: relative;
left: 50%;
transform: translateX(-50%);
}
.wt-cart__cta,
.wt-cart .btn-checkout {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
text-align: center;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
gap: calc(var(--gap, 8px) * 1);
}
@media (hover: hover) {
.wt-cart__cta:hover,
.wt-cart .btn-checkout:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.wt-cart__cta[disabled],
.wt-cart .btn-checkout[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
@media (hover: hover) {
.wt-cart__cta:hover,
.wt-cart .btn-checkout:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-cart__cta.loading,
.wt-cart .btn-checkout.loading {
color: transparent;
}
.wt-cart__cta svg,
.wt-cart .btn-checkout svg {
width: 1.6rem;
height: 1.6rem;
}
.cart-item__old-price {
text-decoration: line-through;
}
.cart-item__old-price * {
text-decoration: line-through;
}
.cart-item__error {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
font-size: max(13px, calc(var(--font-base-size) - 2px));
display: flex;
color: var(--color-error-text);
}
.cart-item__error-text {
order: 1;
color: var(--color-error-text);
}
.cart-item__error-text + svg {
fill: var(--color-error-text);
width: 2.2rem;
margin-right: 0.7rem;
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 4px;
}
.cart-item__error-text:empty + svg {
display: none;
}
.page-overlay-cart {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transform: scale(0);
z-index: 15;
transition: opacity 0.3s ease-in-out;
z-index: 50;
}
.page-overlay-cart-on {
overflow: hidden;
}
.page-overlay-cart-on .page-overlay-cart {
opacity: 1;
transform: scale(1);
backdrop-filter: blur(4px);
}
.cart-page .card__subtitle {
width: calc(100% - 24px);
display: block;
}
.cart-page .wt-cart__footer__body {
margin-top: calc(var(--gap, 8px) * 2);
}
@media (max-width: 899px) {
.cart-page .giftnote__overlay {
height: 100vh;
position: fixed;
backdrop-filter: blur(4px);
}
.cart-page .giftnote__body {
position: fixed;
}
}
@media (min-width: 900px) {
.cart-page .giftnote__body {
position: relative;
transform: initial;
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.3s;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.cart-page .giftnote__body__headline,
.cart-page .giftnote__body__close {
display: none;
}
.cart-page .giftnote__textarea {
margin-top: calc(var(--gap, 8px) * 2);
width: 30rem;
}
.cart-page .giftnote .svg-icon {
transition: transform 0.3s;
}
.cart-page [open] .giftnote__body {
max-height: 300px;
}
.cart-page [open] .giftnote__overlay {
display: none;
}
.cart-page [open] .svg-icon {
transform: rotate(90deg);
}
}
.cart__dynamic-checkout-buttons.additional-checkout-buttons {
margin-top: 8px;
}
[data-shopify-buttoncontainer="true"] {
justify-content: center;
}
.wt-free-shipping-bar {
width: 100%;
margin: calc(var(--gap, 8px) * 3) 0 calc(var(--gap, 8px) * 1);
}
.wt-free-shipping-bar__text {
font-size: 14px;
margin-bottom: calc(var(--gap, 8px) * 1);
}
.wt-progress-bar {
width: 100%;
background-color: rgba(var(--color-action-background-rgb), 0.2);
border-radius: min(2px, var(--border-radius));
overflow: hidden;
height: 1px;
position: relative;
}
.wt-progress-bar__fill {
width: 0%;
height: 100%;
background-color:#A4A4A4;
transition: width 0.5s ease-in-out;
}
.cart__items--disabled {
pointer-events: none;
}
.template-cart:has(.cart-page.is-empty) .cart__footer-wrapper {
display: none;
}
.template-cart main {
min-height: 55vh;
}
.filter {
display: block;
}
.filter:not(:last-of-type) {
border-bottom: 1px solid var(--color-border);
}
.filter__header {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.filter__header .facets__selected {
color: var(--color-body-text-light);
}
.filter__body > *:last-child {
margin-bottom: calc(var(--gap, 8px) * 2.5);
}
.filter__remove {
font-size: max(calc(var(--font-base-size) - 0.2rem), 1.2rem);
text-decoration: underline;
font-weight: normal;
}
.filter__search {
font-size: max(1.6rem, var(--font-base-size));
height: var(--input-height);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
background: var(--color-input-bg);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
line-height: var(--font-base-line-height, normal);
display: flex;
align-items: center;
padding-left: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 2.5);
}
@media (min-width: 1200px) {
.filter__search {
font-size: var(--font-base-size);
}
}
.filter__search__input {
width: 100%;
}
@media (max-width: 1199px) {
.filter__search__input {
font-size: 1.6rem;
}
}
.filter__search .svg-icon {
width: var(--size-icon);
height: var(--size-icon);
}
.filter .wt-collapse__trigger--active + .wt-collapse__target {
max-height: unset;
margin-top: 0;
overflow: visible;
}
.f-categories__link {
display: inline-block;
padding-top: calc(var(--gap, 8px) * 0.5);
padding-bottom: calc(var(--gap, 8px) * 0.5);
}
.f-categories .counter {
opacity: 0.5;
}
.f-categories .counter::before {
content: "(";
}
.f-categories .counter::after {
content: ")";
}
.f-subcategories {
font-size: max(calc(var(--font-base-size) - 0.2rem), 1.2rem);
padding: calc(var(--gap, 8px) * 1) 0 calc(var(--gap, 8px) * 2)
calc(var(--gap, 8px) * 2);
}
.f-subcategories__link {
padding-top: calc(var(--gap, 8px) * 0.5);
padding-bottom: calc(var(--gap, 8px) * 0.5);
display: inline-flex;
gap: calc(var(--gap, 8px) * 1);
}
.filter__scroll {
display: block;
max-height: 15rem;
}
.f-list {
display: flex;
flex-direction: column;
}
.f-list--color {
padding-top: calc(var(--gap, 8px) * 6);
margin-top: calc(var(--gap, 8px) * -6);
}
@media (max-width: 1199px) {
.f-list {
gap: 4px;
}
}
.wt-collapse__target > .f-list {
overflow: hidden;
margin-bottom: 0;
}
.wt-collapse__trigger--active + .wt-collapse__target > .f-list {
margin-bottom: calc(var(--gap, 8px) * 2.5);
}
.wt-collapse__trigger--active + .wt-collapse__target > .f-list--color {
padding-top: calc(var(--gap, 8px) * 7);
}
.f-list .form-checkbox {
padding-top: calc(var(--gap, 8px) * 0.5);
padding-bottom: calc(var(--gap, 8px) * 0.5);
font-size: max(calc(var(--font-base-size) - 0.2rem), 1.2rem);
}
.f-list .form-checkbox:focus-visible {
outline: none;
box-shadow: none;
}
.f-price-slider .filter__body {
margin-bottom: 0;
}
.f-price-slider .f-price {
overflow: hidden;
margin-bottom: 0 !important;
padding-top: calc(var(--gap, 8px) * 2);
margin-top: calc(var(--gap, 8px) * -2);
}
.f-price-slider .wt-collapse__trigger--active + .wt-collapse__target .f-price {
margin-bottom: calc(var(--gap, 8px) * 4) !important;
}
.f-thumb {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.f-thumb__list {
display: inline-flex;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 1);
}
.f-thumb__list.swiper-wrapper {
display: inline-flex;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 1);
}
.f-thumb__list__item {
height: auto;
overflow: hidden;
}
.f-thumb__list__item.swiper-slide.wt-slider__slide {
width: auto;
min-width: 60px;
}
.f-thumb__list__link {
box-sizing: border-box;
height: 100%;
box-sizing: border-box;
}
.f-thumb__list__link img {
object-fit: contain;
}
.f-thumb__fig {
margin: 0;
}
.f-thumb__label {
font-size: 1.2rem;
color: var(--color-body-text-light);
}
.f-button__list {
display: inline-flex;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 1);
}
.f-button__list__item {
display: flex;
}
.f-button__list__item input.disabled + label {
text-decoration: line-through;
color: var(--color-body-text-light);
}
.f-button__list__item input.disabled + label::before {
border-style: dashed;
}
.f-button__list__link {
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 4rem;
border-radius: var(--border-radius-button);
}
.f-button__list__item--active .f-button__list__link {
border-color: var(--color-input-border-active);
}
@media (hover: hover) {
.f-button__list__link:hover {
border-color: var(--color-input-border-active);
}
}
.f-swatch__list {
display: inline-flex;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 1);
width: 100%;
box-sizing: content-box;
}
.f-swatch__list__item {
display: flex;
}
.f-swatch__list__link {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: var(--border-radius-button);
}
.f-swatch__list__item--active .f-swatch__list__link {
border-color: var(--color-input-border-active);
}
input.disabled + .f-swatch__list__link .f-swatch__list__link__content {
opacity: 0.5;
}
.f-swatch__list__link.rounded:not(.custom-radius) {
border-radius: 50px;
}
.f-swatch__list__link.rounded:not(.custom-radius)::before {
border-radius: 50px;
}
@media (hover: hover) {
.f-swatch__list__link:hover {
border-color: var(--color-input-border-active);
}
}
.f-swatch__list__link__content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border-radius: var(--border-radius-button);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.f-swatch__list__link__content.rounded:not(.custom-radius) {
border-radius: 50px !important;
}
.f-current:empty {
display: none;
}
.f-current__list {
display: inline-flex;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 1);
}
.f-current__list__item {
display: flex;
background-color: rgba(var(--color-text-rgb), 0.1);
color: var(--color-text);
align-items: center;
justify-content: center;
min-height: var(--height-chip);
border-radius: min(var(--border-radius), calc(var(--height-chip) / 2));
padding-left: calc(var(--gap, 8px) * 1.5);
padding-right: calc(var(--gap, 8px) * 0);
font-size: min(var(--font-base-size), 1.4rem);
}
[dir="rtl"] .f-current__list__item {
padding-left: calc(var(--gap, 8px) * 0);
padding-right: calc(var(--gap, 8px) * 1.5);
}
@media (min-width: 1200px) {
.f-current__list__item {
padding-left: calc(var(--gap, 8px) * 1.5);
padding-right: calc(var(--gap, 8px) * 0.75);
}
[dir="rtl"] .f-current__list__item {
padding-left: calc(var(--gap, 8px) * 0.75);
padding-right: calc(var(--gap, 8px) * 1.5);
}
}
.f-current__list__cancel {
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--gap, 8px) * 1.5);
color: var(--color-text);
}
.f-current__list__cancel .svg-icon {
width: 1.4rem;
height: 1.4rem;
}
@media (min-width: 1200px) {
.f-current__list__cancel {
padding: calc(var(--gap, 8px) * 0.5);
}
}
.f-price {
display: block;
padding-top: calc(var(--gap, 8px) * 1);
}
.f-price-slider .filter__body > :last-child {
margin-bottom: calc(var(--gap, 8px) * 4);
}
.f-price__slider {
padding-inline: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 3);
margin-top: calc(var(--gap, 8px) * 2);
margin-inline: calc(var(--gap, 8px) * 2);
}
.f-price__val {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
position: relative;
}
.f-price__currency {
position: absolute;
height: var(--input-height);
line-height: var(--input-height);
top: 0;
left: calc(var(--gap, 8px) * 1);
z-index: 1;
display: block;
align-items: center;
opacity: 0.5;
max-width: calc(var(--gap, 8px) * 4);
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.2rem;
text-align: start;
}
[dir="rtl"] .f-price__currency {
left: auto;
right: calc(var(--gap, 8px) * 1);
}
.f-price__inputs {
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 1200px) {
.f-price__inputs {
justify-content: space-between;
}
}
.f-price__sep {
display: flex;
margin-inline: calc(var(--gap, 8px) * 0.5);
}
.f-price__input {
font-size: max(1.6rem, var(--font-base-size));
height: var(--input-height);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
background: var(--color-input-bg);
padding: calc(var(--gap, 8px) * 1) calc(var(--gap, 8px) * 1.5);
line-height: var(--font-base-line-height, normal);
max-width: 13rem;
width: 100%;
text-align: end;
padding: calc(var(--gap, 8px) * 1);
padding-inline-start: calc(var(--gap, 8px) * 5);
}
@media (min-width: 1200px) {
.f-price__input {
font-size: var(--font-base-size);
}
}
.wt-product {
display: flex;
flex-direction: column;
position: relative;
}
@media (min-width: 900px) {
.wt-product {
flex-direction: row;
align-items: flex-start;
gap: calc(var(--gap, 8px) * 8);
}
}
@media (min-width: 1200px) {
.wt-product {
gap: calc(var(--gap, 8px) * 10);
}
}
.wt-product--masonry {
justify-content: center;
}
.wt-product__slide-media {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 900px) {
.wt-product__slide-media {
aspect-ratio: var(--aspect-ratio, auto);
}
}
.wt-product__slide-media video {
width: auto;
height: 100%;
}
.wt-product__thumbnail-video {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wt-product__thumbnail-video video-controls {
display: block;
width: 100%;
height: 100%;
}
.wt-product__thumbnail-video__icon {
position: absolute;
bottom: 4px;
right: 4px;
width: 16px;
height: 16px;
background-color: var(--color-background);
border-radius: var(--border-radius-button);
display: flex;
align-items: center;
justify-content: center;
}
.wt-product__thumbnail-video__icon svg {
width: 8px;
height: 8px;
}
.wt-product__thumbnail-video__gallery-video-icon {
position: absolute;
bottom: 16px;
right: 8px;
width: 24px;
height: 24px;
background-color: #ffffff;
border-radius: var(--border-radius-button);
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 900px) {
.wt-product__thumbnail-video__gallery-video-icon {
width: 36px;
height: 36px;
}
}
.wt-product__thumbnail-video__gallery-video-icon svg {
width: 12px;
height: 12px;
}
@media (min-width: 900px) {
.wt-product__thumbnail-video__gallery-video-icon svg {
width: 16px;
height: 16px;
}
}
.wt-product__wrapper {
color: var(--color-custom-text, var(--color-body-text));
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.wt-product__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-product__wrapper {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1200px) {
.wt-product__wrapper--full.wt-product__wrapper--masonry {
padding-left: 0;
}
}
@media (min-width: 1200px) {
.wt-product__wrapper--full {
padding-right: calc(var(--gap, 8px) * 10);
}
}
.wt-product__wrapper--full.wt-product__wrapper--masonry,
.wt-product__wrapper--full.wt-product__wrapper--collage {
max-width: 100%;
}
@media (max-width: 899px) {
.wt-product__slider--padding {
margin-bottom: 24px;
}
}
.wt-product__save {
position: absolute;
top: calc(var(--gap, 8px) * 2);
right: calc(var(--gap, 8px) * 3);
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--gap, 8px) * 1);
z-index: 5;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
@media (min-width: 900px) {
.wt-product__save {
top: 0;
}
}
.wt-product__img {
width: 100%;
height: auto;
object-fit: cover;
}
@media (min-width: 1200px) {
.wt-product__img {
aspect-ratio: var(--aspect-ratio);
}
}
@media (min-width: 900px) {
.wt-product__img--zoom-cursor {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
}
.wt-product__main {
z-index: 5;
}
.wt-product__main--featured-product {
z-index: initial;
}
@media (min-width: 900px) {
.wt-product__main {
width: 36%;
max-width: 42rem;
flex-shrink: 0;
position: sticky;
top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 5);
}
[desktop-media-size="normal"] .wt-product__main {
width: 45%;
max-width: initial;
}
}
.wt-product__separator {
margin-top: var(--section-gap-top, 8px);
margin-bottom: var(--section-gap-bottom, 8px);
}
.wt-product__gallery .wt-slider__container {
padding: 0 0 calc(var(--gap, 8px) * 1) 0;
}
@media (min-width: 900px) {
.wt-product__gallery {
margin-bottom: calc(var(--gap, 8px) * 5);
overflow: hidden;
width: 100%;
}
body .wt-product__gallery--carousel-vertical {
display: flex;
}
.wt-product__gallery .swiper {
overflow: hidden;
}
}
@media (min-width: 900px) {
.wt-product__gallery--sticky.swiper {
position: sticky;
top: var(--position-top, calc(var(--gap, 8px) * 2));
transition: top 0.3s ease;
}
.page-header.sticky-enabled:not(.sticky-show)
~ main
.wt-product__gallery--sticky.swiper {
top: calc(var(--gap, 8px) * 2);
}
}
.wt-product__brand {
margin-top: 0;
margin-bottom: 0;
}
.wt-product__brand__logo {
display: none;
}
@media (min-width: 900px) {
.wt-product__brand__logo {
display: block;
}
}
.wt-product__brand__name {
text-transform: uppercase;
color: var(--color-brand);
font-size: calc(var(--font-base-size) - 4px);
letter-spacing: 1px;
display: block;
text-align: start;
}
.wt-product__price {
line-height: normal;
margin-top: calc(var(--gap, 8px) * 1.5);
color: var(--color-price);
}
.wt-product__price__final,
.wt-product__price__compare {
font-size: var(--font-price-size);
font-family: var(--font-price);
font-style: var(--font-price-style);
font-weight: var(--font-price-weight);
text-transform: var(--font-price-transform, none);
letter-spacing: var(--font-price-letter-spacing, normal);
--custom-text-scale: var(--font-text-scale, 1);
--font-price-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
}
@media (min-width: 900px) {
.wt-product__price__final,
.wt-product__price__compare {
--custom-text-scale: var(--font-text-scale-desk);
}
}
.wt-product__price__final--sale,
.wt-product__price__compare--sale {
color: var(--color-sale-price);
}
.wt-product__price__compare {
color: var(--color-sale-badge-background);
}
.wt-product__price__note {
font-size: 1rem;
color: var(--color-brand);
}
@media (min-width: 900px) {
.wt-product__price__note {
font-size: 1.2rem;
line-height: 1.5;
}
}
.wt-product__name {
--custom-text-scale: var(--font-text-scale, 1);
--text-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
font-size: var(--text-size);
margin: calc(var(--gap, 8px) * 0.5) 0;
line-height: var(--font-headline-line-height, normal);
letter-spacing: var(--font-headline-letter-spacing, normal);
}
@media (min-width: 900px) {
.wt-product__name {
--custom-text-scale: var(--font-text-scale-desk);
}
}
.wt-product__name a {
color: var(--color-body-text);
}
.wt-product__options {
margin-top: var(--section-gap-top);
margin-bottom: var(--section-gap-bottom);
}
.wt-product .wt-variant-options--disabled {
pointer-events: none;
}
.wt-product
.wt-variant-options
.wt-product__option__body--swatches
.f-swatch__list__item {
--custom-size: 32px;
}
.wt-product__option {
font-family: var(--font-price);
font-size: calc(var(--font-base-size) - 2px);
}
.wt-product__option:last-of-type.js {
padding-bottom: 0;
}
.wt-product__option img {
display: block;
}
.wt-product__option__wrapper {
display: flex;
justify-content: space-between;
}
.wt-product__option__wrapper .wt-product__button {
padding: 0;
}
.wt-product__option__title {
margin-bottom: calc(var(--gap, 8px) * 0.5);
display: flex;
align-items: center;
gap: calc(var(--gap, 8px) * 0.5);
}
.wt-select .wt-product__option__title:has(.form-checkbox) {
margin-top: calc(var(--gap, 8px) * 1);
}
.wt-product__option .f-swatch__list__item {
max-width: 40%;
width: auto;
}
.wt-product__option .f-swatch__list__item.wt-product__option__selected {
border-color: var(--color-input-border-active);
}
.wt-product__option .swiper-slide {
max-width: 40%;
width: auto;
}
.wt-product__option .swiper-slide.wt-product__option__selected {
border-color: var(--color-input-border-active);
}
@media (min-width: 900px) {
.wt-product__option .swiper-wrapper {
flex-wrap: wrap;
}
}
.wt-product__option__body--drawer {
position: fixed;
bottom: 0;
right: 0;
z-index: 101;
width: 100%;
max-width: 500px;
background-color: var(--color-background);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media (min-width: 400px) {
.wt-product__option__body--drawer {
top: 0;
bottom: initial;
height: 100%;
}
}
.wt-product__option__body--drawer .drawer__list-nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-product__option__body--drawer .drawer__list-nav__close {
border: 0;
border-radius: 0;
padding: 0;
height: auto;
display: flex;
background-color: transparent;
color: inherit;
}
@media (hover: hover) {
.wt-product__option__body--drawer .drawer__list-nav__close:hover {
color: inherit;
background-color: inherit;
}
}
@media (hover: hover) {
.wt-product__option__body--drawer .drawer__list-nav__close:hover {
opacity: 0.5;
}
}
.wt-product__option__body--drawer .drawer__list-nav__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
font-size: calc(var(--font-base-size) * 1.15);
}
@media (min-width: 1200px) {
.wt-product__option__body--drawer .drawer__list-nav__title {
font-size: calc(var(--font-base-size) * 1.25);
}
}
.wt-product__option__body--drawer .drawer__list-nav svg {
cursor: pointer;
}
.wt-product__option__body--drawer .drawer__content {
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
}
.wt-product__option__body--drawer .drawer__list {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
box-sizing: border-box;
}
.wt-product__option__body--drawer .drawer__list__item {
width: 100%;
max-width: initial;
height: min-content;
border: none;
}
.wt-product__option__body--drawer .drawer__list__item label {
font-size: var(--font-base-size);
font-family: var(--font-base);
padding: calc(var(--gap, 8px) * 1.5) calc(var(--gap, 8px) * 2);
border-radius: var(--border-radius-button);
color: inherit;
}
.wt-product__option__body--drawer .drawer__list__item label span {
width: 100%;
text-align: start;
}
.wt-product__option__body--drawer .drawer__list__item label .icon-checkmark {
width: 16px;
height: 16px;
}
.wt-product__option__body--drawer .drawer__list__item label::before {
border: none;
}
.wt-product__option__body--drawer .drawer__list__item input {
display: none;
}
.wt-product__option__body--drawer .drawer__list__item input:checked + label {
background-color: rgba(var(--color-text-rgb), 0.05);
padding: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 3);
cursor: pointer;
color: inherit;
}
.wt-product__option__body--drawer
.drawer__list__item
input:checked
+ label::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%) rotate(-45deg);
border-style: solid;
border-width: 0 0 1px 1px;
width: 1rem;
height: 0.5rem;
margin-right: calc(var(--gap, 8px) * 1.5);
margin-top: -2px;
}
.wt-product__option__body--drawer .drawer__list__item input.disabled + label {
color: var(--color-body-text-light);
text-decoration: line-through;
}
.wt-product__option__body--drawer
.drawer__list__item
input.disabled
+ label::after {
display: none;
}
.wt-product__option__dropdown {
width: 100%;
font-weight: 500;
font-family: var(--font-base);
font-size: calc(var(--font-base-size) - 2px);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 16px;
margin-top: 6px;
border: 1px solid var(--color-border);
}
@media (min-width: 600px) {
.wt-product__option__dropdown {
min-width: 50%;
max-width: none;
width: auto;
}
}
.wt-product__option__dropdown--unavailable {
background-color: var(--color-text-highlight);
color: var(--color-body-text-light);
text-decoration: line-through;
}
.wt-product__option__dropdown svg {
width: 100%;
height: 100%;
max-width: 20px;
max-height: 20px;
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
transform: scale(0.75);
transition-duration: 0.3s;
}
.wt-product__option__dropdown svg.open {
transform: scale(0.75) rotate(180deg);
}
.wt-product__option__dropdown span {
text-align: left;
}
.wt-product__option__body--drawer {
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
}
@media (max-width: 399px) {
.wt-product__option__body--drawer {
transform: translateY(100%);
-ms-transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
top: unset;
max-height: 70vh;
max-height: 70dvh;
}
}
.wt-product__option__body--drawer.open {
transform: translateX(0%);
-ms-transform: translateX(0%);
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
}
@media (max-width: 399px) {
.wt-product__option__body--drawer.open {
transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
}
}
.wt-product__option__body--drawer,
.wt-product__option__body--thumbs,
.wt-product__option__body--tiles,
.wt-product__option__body--swatches {
overflow: hidden;
}
.wt-product__option__body--drawer label,
.wt-product__option__body--drawer a,
.wt-product__option__body--thumbs label,
.wt-product__option__body--thumbs a,
.wt-product__option__body--tiles label,
.wt-product__option__body--tiles a,
.wt-product__option__body--swatches label,
.wt-product__option__body--swatches a {
text-align: center;
line-height: 1.1;
display: flex;
cursor: pointer;
position: relative;
border-radius: var(--custom-border-radius, var(--border-radius-button));
overflow: hidden;
background-size: 100%;
}
.wt-product__option__body--drawer label .f-swatch__list__link__content,
.wt-product__option__body--drawer a .f-swatch__list__link__content,
.wt-product__option__body--thumbs label .f-swatch__list__link__content,
.wt-product__option__body--thumbs a .f-swatch__list__link__content,
.wt-product__option__body--tiles label .f-swatch__list__link__content,
.wt-product__option__body--tiles a .f-swatch__list__link__content,
.wt-product__option__body--swatches label .f-swatch__list__link__content,
.wt-product__option__body--swatches a .f-swatch__list__link__content {
border-radius: max(
0px,
var(--custom-border-radius, var(--border-radius-button)) -
(var(--gap, 8px) * 0.5)
);
}
.wt-product__option__body--drawer label::before,
.wt-product__option__body--drawer a::before,
.wt-product__option__body--thumbs label::before,
.wt-product__option__body--thumbs a::before,
.wt-product__option__body--tiles label::before,
.wt-product__option__body--tiles a::before,
.wt-product__option__body--swatches label::before,
.wt-product__option__body--swatches a::before {
content: "";
inset: 0;
position: absolute;
border: 1px solid var(--color-border);
display: block;
opacity: var(--inactive-border-opacity, 1);
transition:
border-color 0.3s,
opacity 0.3s;
border-radius: var(--custom-border-radius, var(--border-radius-button));
}
.wt-product__option__body--drawer label.active::before,
.wt-product__option__body--drawer a.active::before,
.wt-product__option__body--thumbs label.active::before,
.wt-product__option__body--thumbs a.active::before,
.wt-product__option__body--tiles label.active::before,
.wt-product__option__body--tiles a.active::before,
.wt-product__option__body--swatches label.active::before,
.wt-product__option__body--swatches a.active::before {
border-color: var(--color-body-text);
opacity: 1;
}
.wt-product__option__body--drawer input,
.wt-product__option__body--thumbs input,
.wt-product__option__body--tiles input,
.wt-product__option__body--swatches input {
position: absolute;
pointer-events: none;
opacity: 0;
}
.wt-product__option__body--drawer input:checked + label::before,
.wt-product__option__body--thumbs input:checked + label::before,
.wt-product__option__body--tiles input:checked + label::before,
.wt-product__option__body--swatches input:checked + label::before {
border-color: var(--color-body-text);
opacity: 1;
}
.wt-product__option__body--drawer .swiper-container,
.wt-product__option__body--thumbs .swiper-container,
.wt-product__option__body--tiles .swiper-container,
.wt-product__option__body--swatches .swiper-container {
overflow: visible;
}
.wt-product__option__body--tiles {
overflow: initial;
}
.wt-product__option__body--tiles label {
padding-inline: calc(var(--gap, 8px) * 2);
}
.wt-product__option__body--thumbs label {
overflow: visible;
padding: calc(var(--gap, 8px) * 0.5);
width: fit-content;
}
.wt-product__option__body--thumbs label::before {
border-radius: var(--custom-border-radius, var(--border-radius-button));
}
.wt-product__option__body--thumbs label img {
border-radius: max(
0px,
var(--custom-border-radius, var(--border-radius-button)) -
(var(--gap, 8px) * 0.5)
);
width: auto;
height: 100%;
}
.wt-product__main--featured-product
.wt-product__option__body--thumbs
label
img {
height: revert-layer;
}
.wt-product__option__body--thumbs input.disabled + label {
position: relative;
}
.wt-product__option__body--thumbs input.disabled + label:before {
border: 1px dashed var(--color-border);
}
.wt-product__option__body--thumbs input.disabled + label::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: var(--color-links-active);
top: 50%;
left: 0;
transform: rotate(306deg) scaleX(2);
opacity: 0.5;
}
.wt-product__option__body--thumbs .f-swatch__list__item {
width: var(--custom-size, 32px);
height: var(--custom-size, 32px);
}
.wt-product__option__body--thumbs .swiper-slide {
min-width: unset;
max-width: 6rem;
width: 11.5%;
}
@media (max-width: 399px) {
.wt-product__option__body--thumbs .swiper-slide {
width: 15.5%;
}
}
@media (min-width: 600px) {
.wt-product__option__body--thumbs .swiper-slide {
width: 8.25%;
}
}
@media (min-width: 900px) {
.wt-product__option__body--thumbs .swiper-slide {
width: 92px;
}
}
.wt-product__option__body--thumbs .swiper-slide img {
width: 100%;
height: auto;
}
.wt-product__option__body--swatches ul {
margin-bottom: 4px;
}
.wt-product__option__body--swatches label,
.wt-product__option__body--swatches a {
overflow: visible;
padding: 0;
}
.wt-product__option__body--swatches label::before,
.wt-product__option__body--swatches a::before {
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
}
.wt-product__option__body--swatches input.disabled + label {
position: relative;
padding: 0;
}
.wt-product__option__body--swatches input.disabled + label::before {
border: 1px dashed var(--color-border);
}
.wt-product__option__body--swatches input.disabled + label::after {
content: "";
position: absolute;
width: 55px;
height: 1px;
background-color: var(--color-links-active);
transform: rotate(-45deg);
transform-origin: center;
opacity: 0.5;
}
.wt-product__option__body--swatches .f-swatch__list__item {
min-width: unset;
padding: calc(var(--gap, 8px) * 0.5);
width: var(--custom-size, 32px);
height: var(--custom-size, 32px);
}
.wt-product__option__body--swatches .f-swatch__list__item img {
width: 100%;
height: auto;
}
.wt-product__option .f-button__list {
flex-wrap: wrap;
}
.wt-product__option .f-button__list__item {
min-width: 5rem;
}
.wt-product__add-to-cart {
margin-top: calc(var(--gap, 8px) * 2);
margin-bottom: calc(var(--gap, 8px) * 2);
display: inline-flex;
flex-wrap: wrap;
width: 100%;
}
.wt-product__add-to-cart_form {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: calc(var(--gap, 8px) * 2);
}
@media (min-width: 600px) {
.wt-product__add-to-cart_form {
flex-wrap: nowrap;
}
}
.wt-product__add-to-cart_form .js-add-to-cart {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
flex-grow: 2;
width: auto;
}
@media (hover: hover) {
.wt-product__add-to-cart_form .js-add-to-cart:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-product__add-to-cart_form .js-add-to-cart.loading {
color: transparent;
}
@media (max-width: 399px) {
.wt-product__add-to-cart_form .js-add-to-cart {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
}
.wt-product__add-to-cart_form .js-add-to-cart .loading-overlay__spinner {
color: var(--color-button-primary-text);
}
.wt-product__add-to-cart_form .js-add-to-cart .svg-icon {
margin-right: calc(var(--gap, 8px) * 1);
width: 2.2rem;
height: 2.2rem;
}
.wt-product__add-to-cart_form .product-form__error-message-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
gap: 8px;
color: var(--color-error-text);
margin-bottom: 16px;
}
.wt-product__add-to-cart_form .product-form__error-message-wrapper[hidden] {
display: none;
}
.wt-product__add-to-cart_form .product-form__error-message-wrapper svg {
width: 24px;
height: 24px;
padding-top: 2px;
}
.wt-product__add-to-cart_form .product-form__error-message-wrapper span {
width: fit-content;
}
.wt-product__add-to-cart .counter {
justify-content: space-between;
}
@media (min-width: 600px) {
.wt-product__add-to-cart .counter-wrapper {
width: auto;
}
}
.wt-product__status {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: calc(var(--gap, 8px) * 1);
}
@media (min-width: 900px) {
.wt-product__status {
width: 50%;
}
}
.wt-product__status .svg-icon {
width: 1.6rem;
height: 1.6rem;
margin-right: calc(var(--gap, 8px) * 0.5);
}
.wt-product__features {
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 3);
}
.wt-product__features__title {
display: none;
margin-bottom: calc(var(--gap, 8px) * 1);
font-size: calc(var(--font-base-size) * 1.1);
}
@media (min-width: 1200px) {
.wt-product__features__title {
font-size: calc(var(--font-base-size) * 1.1);
}
}
@media (min-width: 900px) {
.wt-product__features__title {
display: block;
}
}
.wt-product__features__item {
display: flex;
align-items: center;
font-size: calc(var(--font-base-size));
position: relative;
padding-left: calc(var(--gap, 8px) * 1.5);
}
.wt-product__features__item::before {
content: "";
width: 4px;
height: 4px;
display: block;
background: var(--color-bullet);
border-radius: 50%;
margin-right: calc(var(--gap, 8px) * 1);
flex-shrink: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0px;
}
[dir="rtl"] .wt-product__features__item {
padding-left: 0;
padding-right: calc(var(--gap, 8px) * 1.5);
}
[dir="rtl"] .wt-product__features__item::before {
left: auto;
right: 0;
margin-right: 0;
margin-left: calc(var(--gap, 8px) * 1);
}
.wt-product__features--custom-icon .wt-product__features__item {
padding-left: 0;
gap: calc(var(--gap, 8px) * 1);
align-items: flex-start;
}
.wt-product__features--custom-icon .wt-product__features__item::before {
display: none;
}
[dir="rtl"] .wt-product__features--custom-icon .wt-product__features__item {
padding-right: 0;
}
.wt-product__features__icon {
display: flex;
align-items: center;
flex-shrink: 0;
width: 16px;
height: 16px;
object-fit: contain;
}
.wt-product__features__icon-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.wt-product__features__icon-svg {
width: 100%;
height: auto;
}
.wt-product__bulletpoints .wt-product__features__item {
align-items: center;
}
.wt-product__bulletpoints .wt-product__features__icon {
width: auto;
height: var(--icon-bulletpoints-height);
margin-top: var(--icon-bulletpoints-margin);
}
@media (min-width: 900px) {
.wt-product__bulletpoints .wt-product__features__icon {
width: auto;
height: var(--icon-bulletpoints-height-desktop);
margin-top: var(--icon-bulletpoints-margin-desktop);
}
}
.wt-product__bulletpoints .wt-product__features__icon-svg {
width: auto;
height: var(--icon-bulletpoints-height);
}
@media (min-width: 900px) {
.wt-product__bulletpoints .wt-product__features__icon-svg {
height: var(--icon-bulletpoints-height-desktop);
}
}
.wt-product__aside {
border-top: 1px solid var(--color-border);
}
.wt-product__sticky-buy {
padding: calc(var(--gap, 8px) * 2);
background-color: rgba(
var(--sticky-button-bg),
var(--sticky-button-bg-opacity, 1)
);
color: var(--color-custom-text);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s;
transition-delay: 1s;
backdrop-filter: blur(var(--sticky-button-bg-blur, 0));
}
.wt-product__sticky-buy--shadow {
box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.05);
}
.wt-product__sticky-buy__wrapper {
display: flex;
align-items: center;
justify-content: space-around;
max-width: 1600px;
width: 100%;
}
.wt-product__sticky-buy__product {
display: none;
}
@media (min-width: 900px) {
.wt-product__sticky-buy__product {
display: flex;
}
}
.wt-product__sticky-buy__product img {
border-radius: min(var(--border-radius, 4px), 4px);
max-width: 7rem;
width: 100%;
height: auto;
}
.wt-product__sticky-buy__product-info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 16px;
}
.wt-product__sticky-buy__product-info .card__title {
margin-top: 0;
}
.wt-product__sticky-buy__button {
width: 100%;
}
@media (min-width: 900px) {
.wt-product__sticky-buy__button {
width: fit-content;
min-width: 25%;
margin-left: auto;
}
.wt-product__sticky-buy__button.wt-button--center {
margin-left: auto;
margin-right: auto;
}
}
.wt-product__sticky-buy__button.loading span {
color: transparent;
}
.wt-product__sticky-buy__button.wt-button--primary .loading-overlay__spinner {
color: var(--color-button-primary-text);
}
.wt-product__sticky-buy__button.wt-button--secondary .loading-overlay__spinner {
color: var(--color-button-secondary-text);
}
.wt-product__sticky-buy__button.wt-button--primary:hover
.loading-overlay__spinner {
color: var(--color-button-primary-background);
}
.wt-product__sticky-buy__button.wt-button--secondary:hover
.loading-overlay__spinner {
color: var(--color-button-secondary-background);
}
.wt-product__sticky-buy--show {
opacity: 1;
visibility: visible;
}
.wt-product__sticky-buy--show svg {
margin-right: 8px;
}
@media (min-width: 900px) {
.wt-product__sticky-buy--show:not(.wt-product__sticky-buy--desktop) {
display: none;
}
}
@media (max-width: 899px) {
.wt-product__sticky-buy--show:not(.wt-product__sticky-buy--mobile) {
display: none;
}
}
.wt-product__floating-buy {
padding: calc(var(--gap, 8px) * 2);
background-color: rgba(
var(--sticky-button-bg),
var(--sticky-button-bg-opacity, 1)
);
max-width: min(90%, 1200px);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
bottom: 8px;
left: 50%;
transform: translate(-50%, 40px);
z-index: 10;
visibility: visible;
opacity: 0;
pointer-events: none;
transition:
transform 0.4s ease,
opacity 0.4s ease;
border-radius: var(--border-radius);
backdrop-filter: blur(var(--sticky-button-bg-blur, 0));
}
.wt-product__floating-buy.wt-product__sticky-buy--shadow {
box-shadow: 0 0 9px rgba(0, 0, 0, 0.1215686275);
}
@media (min-width: 900px) {
.wt-product__floating-buy {
bottom: 24px;
}
}
.wt-product__floating-buy button {
min-width: 25%;
}
.wt-product__floating-buy.wt-product__sticky-buy--show.wt-product__sticky-buy--desktop {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.wt-product__floating-buy.wt-product__sticky-buy--show:not(
.wt-product__sticky-buy--desktop
) {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.wt-product .wt-rating__stars {
font-size: 12px;
}
.wt-product__icon-text {
text-align: left;
padding-top: calc(var(--gap, 8px) * 1.4);
padding-bottom: calc(var(--gap, 8px) * 1.4);
display: flex;
align-items: center;
cursor: pointer;
}
.wt-product__text-link {
text-decoration: underline;
font-weight: bold;
font-size: calc(var(--font-base-size) * 1.1);
}
.wt-product__page {
font-size: calc(var(--font-base-size) * 1.4rem);
}
.wt-product__page--text {
text-align: center;
}
.wt-product__content {
display: flex;
align-items: center;
padding-bottom: 8px;
margin-top: -4px;
}
.wt-product__text {
font-size: calc(var(--font-base-size) * 1.1);
font-size: var(--font-headline-size);
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
letter-spacing: var(--font-headline-letter-spacing, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin: 0 0 calc(var(--gap, 8px) * 1);
overflow: visible;
line-height: normal;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 1.5);
}
.wt-product__opener {
display: inline-block;
}
.wt-product__button {
font-size: 1.6rem;
padding-right: 1.3rem;
padding-left: 0;
height: 3rem;
text-underline-offset: 0.3rem;
}
.wt-product__button:hover {
border: none;
background-color: inherit;
color: inherit;
}
.wt-product__link {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
color: var(--color-links);
text-underline-offset: 0.3rem;
background-color: transparent;
font-size: calc(var(--font-base-size) - 2px);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
}
.wt-product__modal-top {
padding: 16px 24px;
display: flex;
justify-content: flex-end;
}
.wt-product__modal--content {
display: flex;
flex-direction: column;
background-color: #fff;
overflow: hidden;
height: 100%;
margin: 0 auto;
left: 50%;
transform: translate(-50%);
width: 100%;
position: absolute;
top: 0;
z-index: 101;
}
@media (min-width: 1200px) {
.wt-product__modal--content {
height: 75%;
width: 92%;
max-width: 980px;
margin-top: 10rem;
border-radius: var(--border-radius);
}
}
.wt-product__modal--content-info {
text-align: justify;
overflow-y: scroll;
height: 100%;
margin: calc(var(--gap, 8px) * 3) 0;
padding: 0 calc(var(--gap, 8px) * 3);
}
@media (min-width: 900px) {
.wt-product__modal--content-info {
margin: calc(var(--gap, 8px) * 5) calc(var(--gap, 8px) * 3);
margin-top: 0;
padding: 0 calc(var(--gap, 8px) * 2) 0 calc(var(--gap, 8px) * 2);
}
}
.wt-product__modal--content-info .size-table__wrapper {
word-wrap: normal;
white-space: nowrap;
overflow: auto;
margin-bottom: 16px;
}
.wt-product__modal--content-info .size-table--striped tr:nth-child(odd) {
background-color: #f8f8f8;
}
.wt-product__modal {
box-sizing: border-box;
opacity: 0;
position: fixed;
visibility: hidden;
z-index: -1;
margin: 0 auto;
top: 0;
left: 0;
overflow: auto;
width: 100%;
height: 100%;
}
.wt-product__modal[open] {
opacity: 1;
visibility: visible;
z-index: 101;
background-color: rgba(0, 0, 0, 0.5);
}
.wt-product__modal--toggle {
cursor: pointer;
width: var(--size-icon);
height: var(--size-icon);
color: var(--color-text);
}
@media (min-width: 600px) {
.wt-product__modal--toggle {
width: var(--size-icon-desk);
height: var(--size-icon-desk);
}
}
.wt-product__modal--toggle .svg-icon--close {
position: static;
width: var(--size-icon);
height: var(--size-icon);
padding: 0;
}
@media (min-width: 600px) {
.wt-product__modal--toggle .svg-icon--close {
width: var(--size-icon-desk);
height: var(--size-icon-desk);
}
}
.wt-product__icon {
width: 2rem;
margin-right: calc(var(--gap, 8px) * 1.2);
display: flex;
align-items: center;
}
.wt-product__options variant-options {
display: flex;
flex-direction: column;
gap: 16px;
}
.wt-product__options #ProductPopup-variant_picker {
text-decoration: underline;
}
.wt-product__upsell {
font-family: "Avenir Next";
font-weight: normal;
margin-block: calc(var(--gap, 8px) * 4);
}
.wt-product__upsell__headline {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
margin-top: calc(var(--gap, 8px) * 4);
margin-bottom: calc(var(--gap, 8px) * 3);
}
.wt-product__upsell__content {
display: flex;
align-items: center;
gap: 16px;
margin-top: calc(var(--gap, 8px) * 2);
}
.wt-product__upsell__content .price__sale.visible {
flex-direction: column-reverse;
}
.wt-product__upsell__content .price__sale.visible span {
justify-content: start;
}
.wt-product__upsell__info {
width: 100%;
}
@media (min-width: 400px) {
.wt-product__upsell__info {
width: 50%;
min-width: 100px;
}
}
@media (max-width: 1199px) {
.wt-product__upsell__info .card__title a {
text-decoration: none;
}
}
.wt-product__upsell__product {
display: flex;
align-items: center;
justify-content: space-between;
flex-grow: 1;
flex-wrap: wrap;
gap: 16px;
}
.wt-product__upsell__product .card__title a {
--clr-underline: var(--color-links);
word-break: break-word;
}
@media (hover: hover) {
.wt-product__upsell__product .card__title a {
text-decoration: none;
background-image: linear-gradient(
var(--clr-underline, var(--color-menu-text)),
var(--clr-underline, var(--color-menu-text))
);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0% 1px;
transition: background-size 0.3s ease-in-out;
}
.wt-product__upsell__product .card__title a:hover {
background-size: 100% 1px;
color: inherit;
}
}
.wt-product__upsell__vendor {
text-transform: uppercase;
color: var(--color-brand);
font-size: calc(var(--font-base-size) - 4px);
letter-spacing: 1px;
}
.wt-product__upsell__title {
font-size: calc(var(--font-base-size) - 2px);
}
.wt-product__upsell__title a {
color: var(--color-body-text);
}
.wt-product__upsell__title a:hover {
color: var(--color-links);
}
.wt-product__upsell__price {
margin-top: calc(var(--gap, 8px) * 0.75);
font-size: calc(var(--font-base-size) - 2px);
}
.wt-product__upsell__picture {
display: flex;
flex-shrink: 0;
border-radius: var(--border-radius);
overflow: hidden;
}
.wt-product__upsell__content .wt-product__upsell__image {
margin: auto;
width: auto;
height: auto;
max-width: 86px;
max-height: none;
object-fit: cover;
aspect-ratio: var(--aspect-ratio, auto);
}
.wt-product__upsell .price__sale .price__sale__details-wrapper {
justify-content: start;
flex-wrap: wrap;
}
.wt-product__upsell__button {
text-wrap: nowrap;
}
.wt-product__text-block {
padding-bottom: calc(var(--gap, 8px) * 2);
padding-top: calc(var(--gap, 8px) * 0.5);
}
.wt-product__text-block:first-child {
padding-top: calc(var(--gap, 8px) * 2);
}
.wt-product__text-block__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
padding-top: calc(var(--gap, 8px) * 2.5);
padding-bottom: calc(var(--gap, 8px) * 2.5);
display: block;
margin-block: calc(var(--gap, 8px) * 1);
}
.wt-product__text-block__wrapper.wt-description .wt-product__text-block__title {
display: flex;
align-items: center;
gap: calc(var(--gap, 8px) * 1);
margin-block: 0;
}
.wt-product__text-block__wrapper.wt-description .wt-product__text-block {
padding-top: 0;
padding-bottom: calc(var(--gap, 8px) * 3);
}
.wt-product__information-popup {
margin-top: 0;
}
.wt-product__information-popup .wt-product__button.wt-product__link {
height: auto;
text-decoration: underline;
}
.wt-product__sku {
font-size: 1rem;
font-family: var(--font-price);
margin-bottom: calc(var(--gap, 8px) * 1.5);
}
.wt-product__promo {
padding: calc(var(--gap, 8px) * 1);
background-color: var(--block-color-background);
color: var(--block-color-text);
text-align: var(--block-text-alignment);
border-radius: var(--border-radius);
}
.wt__quick-buy .wt-product__promo {
display: none;
}
.wt-product__payments-badge {
text-align: var(--text-align, center);
color: var(--block-color-text);
background-color: var(--block-color-background);
border-radius: var(--border-radius);
padding: var(--block-padding, 0);
display: flex;
flex-direction: column;
gap: calc(var(--gap, 8px) * 1);
}
.wt-product__payments-badge__content > *:first-child {
margin-top: calc(var(--gap, 8px) * 1);
}
.wt-product__payments-badge__content > *:last-child {
margin-bottom: calc(var(--gap, 8px) * 0.5);
}
.wt-product__payments-badge__content.rte p:first-child {
margin-block-start: 0;
}
.wt-product__payments-badge__icons__list {
display: flex;
flex-wrap: wrap;
justify-content: var(--justify-content, center);
list-style: none;
gap: calc(var(--gap, 8px) * 1);
}
.wt-product .product-form__input {
padding: 0;
margin: 0;
border: none;
}
.wt-product .wt-collapse__target {
overflow: hidden;
display: grid;
max-height: unset;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
}
.wt-product .wt-collapse__target--text > *:last-child {
margin-bottom: calc(var(--gap, 8px) * 3);
}
.wt-product .wt-collapse__target__content > ul:first-child,
.wt-product .wt-collapse__target__content > ol:first-child {
margin-top: 0;
}
.wt-product .wt-collapse__target__content > ul:first-child > li:first-child,
.wt-product .wt-collapse__target__content > ol:first-child > li:first-child {
margin-top: 0;
}
.wt-product .wt-collapse__trigger--active + .wt-collapse__target {
grid-template-rows: 1fr;
transition: grid-template-rows 500ms;
}
.wt-product .metafields-variants {
padding: 12px 0 16px 0;
font-family: var(--font-price);
font-size: calc(var(--font-base-size) - 2px);
}
.wt-product .metafields-variants__ul {
display: flex;
gap: 8px;
padding-top: 8px;
padding-left: 2px;
}
.wt-product .metafields-variants__item {
width: 40px;
height: 40px;
position: relative;
border-radius: 50px;
outline: 1px solid var(--color-input-border);
border: 3px solid var(--color-border);
}
.wt-product .metafields-variants__item:focus {
outline: 1px solid var(--color-input-border);
}
.wt-product .metafields-variants__item--active {
outline: 1px solid var(--color-body-text);
}
.wt-product__feature-tags span {
position: relative;
padding-inline: calc(var(--gap, 8px) * 1);
cursor: initial;
color: var(--color-custom-text, var(--color-body-text));
}
.wt-product__feature-tags span::before {
content: "";
inset: 0;
position: absolute;
border: 1px solid var(--color-body-text);
display: block;
transition: border-color 0.3s;
border-radius: var(--custom-border-radius, var(--border-radius-button));
}
.wt-product__feature-tags .f-button__list__link {
height: 26px;
font-size: calc(var(--font-base-size) - 2px);
}
.wt-product__spec {
display: flex;
flex-direction: column;
width: 100%;
}
.wt-product__spec__row {
display: flex;
flex-direction: column;
width: 100%;
padding-left: 12px;
padding-right: 12px;
padding-top: 10px;
padding-bottom: 10px;
}
@media (min-width: 400px) {
.wt-product__spec__row {
flex-direction: row;
}
}
.wt-product__spec__row .wt-product__spec__cell--title {
color: rgba(var(--color-text-rgb), var(--left-column-opacity));
font-size: max(var(--font-base-size) - 2px, 12px);
}
@media (min-width: 400px) {
.wt-product__spec__row .wt-product__spec__cell--title {
font-size: var(--font-base-size);
}
}
.wt-product__spec__row:nth-child(odd) {
background: var(--color-background-odd);
color: rgb(var(--color-text-odd));
}
.wt-product__spec__row:nth-child(odd) .wt-product__spec__cell--title {
color: rgba(var(--color-text-odd), var(--left-column-opacity));
}
.wt-product__spec__cell {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 400px) {
.wt-product__spec__cell {
width: 50%;
}
}
.wt-product__spec__cell p {
margin-top: 0;
margin-bottom: 0;
}
.wt-product__feature-icons__list {
display: flex;
flex-direction: column;
gap: var(--icons-container-gap-mobile, calc(var(--gap, 8px) * 2));
}
@media (min-width: 900px) {
.wt-product__feature-icons__list {
gap: var(--icons-container-gap-desktop, calc(var(--gap, 8px) * 2));
}
}
.wt-product__feature-icons__list--row {
display: grid;
grid-template-columns: repeat(var(--columns-number-mobile, 4), 1fr);
gap: var(--icons-container-gap-mobile, calc(var(--gap, 8px) * 2));
}
@media (min-width: 900px) {
.wt-product__feature-icons__list--row {
gap: var(--icons-container-gap-desktop, calc(var(--gap, 8px) * 2));
grid-template-columns: repeat(var(--columns-number-desktop, 4), 1fr);
}
}
.wt-product__feature-icons__list--row-left {
flex-direction: row;
flex-wrap: wrap;
gap: var(--icons-container-gap-mobile, calc(var(--gap, 8px) * 3));
}
@media (min-width: 900px) {
.wt-product__feature-icons__list--row-left {
gap: var(--icons-container-gap-desktop, calc(var(--gap, 8px) * 3));
}
}
.wt-product__feature-icons__list--row-left .wt-product__feature-icons__item {
width: var(--icon-container-width-mobile, var(--icon-size-mobile));
}
@media (min-width: 900px) {
.wt-product__feature-icons__list--row-left .wt-product__feature-icons__item {
width: var(--icon-container-width-desktop, var(--icon-size-desktop));
}
}
.wt-product__feature-icons__list label {
margin-top: var(--icon-margin-top-mobile, 0);
margin-bottom: var(--icon-margin-bottom-mobile, 0);
}
@media (min-width: 900px) {
.wt-product__feature-icons__list label {
margin-top: var(--icon-margin-top-desktop, 0);
margin-bottom: var(--icon-margin-bottom-desktop, 0);
}
}
.wt-product__feature-icons__list label p {
margin: 0;
}
.wt-product__feature-icons__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: calc(var(--gap, 8px) * 1.5);
font-size: calc(var(--font-base-size) * var(--font-text-scale-mobile, 1));
width: min(var(--icon-container-width-mobile), 100%);
}
@media (min-width: 900px) {
.wt-product__feature-icons__item {
width: min(var(--icon-container-width-desktop), 100%);
font-size: calc(
var(--font-base-size) * var(--font-text-scale-desktop, 1)
);
}
}
.wt-product__feature-icons__item--row {
flex-direction: row;
text-align: left;
}
.wt-product__feature-icons__item img,
.wt-product__feature-icons__item svg {
width: var(--icon-size-mobile);
height: var(--icon-size-mobile);
object-fit: cover;
}
@media (min-width: 900px) {
.wt-product__feature-icons__item img,
.wt-product__feature-icons__item svg {
width: var(--icon-size-desktop);
height: var(--icon-size-desktop);
}
}
.wt-product .wt-collapse__trigger__text--has-icon-image {
align-items: flex-start;
}
.wt-product .wt-collapse__trigger__title {
font-size: var(--font-base-size);
}
.model-container {
background-color: var(--color-background);
position: fixed;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
z-index: 999;
display: flex;
flex-direction: column;
padding-top: 0;
}
.model-container nav {
width: 100%;
display: flex;
justify-content: flex-end;
z-index: 2;
}
.model-container nav .close-btn {
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--gap, 8px) * 1);
margin: calc(var(--gap, 8px) * 1);
box-sizing: content-box;
cursor: pointer;
width: var(--size-icon);
height: var(--size-icon);
color: var(--color-text);
background: var(--color-background);
border-radius: var(--border-radius-button);
}
@media (min-width: 900px) {
.model-container nav .close-btn {
width: var(--size-icon-desk);
height: var(--size-icon-desk);
}
}
.model-container nav .featured-icon {
display: flex;
gap: 8px;
margin-top: var(--block-margin-top);
margin-bottom: var(--block-margin-bottom);
}
.model-container nav .featured-icon .svg-icon {
--custom-icon-size: calc(var(--size-icon) * var(--font-base-size) * (2.2));
width: var(--custom-icon-size);
height: var(--custom-icon-size);
}
.model-container nav .featured-icon .featured-icon__title,
.model-container nav .featured-icon .featured-icon__text {
--custom-text-scale: var(--font-text-scale, 1);
--text-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
font-size: var(--text-size);
}
.model-container nav .featured-icon .featured-icon__title {
font-weight: 700;
}
@media (min-width: 1200px) {
.model-container nav .featured-icon .svg-icon {
--custom-icon-size-desk: calc(
var(--size-icon-desk) * var(--font-base-size) * (2.2)
);
width: var(--custom-icon-size-desk);
height: var(--custom-icon-size-desk);
}
.model-container nav .featured-icon .featured-icon__title,
.model-container nav .featured-icon .featured-icon__text {
--custom-text-scale: var(--font-text-scale-desk, 1);
--text-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
font-size: var(--text-size);
}
}
.model-container nav svg {
color: black;
}
.model-container .model {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
padding: 0 2rem;
z-index: 1;
}
.model-container .model iframe {
aspect-ratio: 1.77;
width: 100%;
}
@media (min-width: 1200px) {
.model-container .model iframe {
width: 76%;
}
}
.model-container .model:has(iframe) {
position: fixed;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.model-container .model model-viewer {
width: 100vw;
height: 100vh;
max-height: 80vh;
}
.model-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
padding: 8px;
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
background-color: var(--color-button-secondary-background);
}
.model-btn svg {
stroke: var(--color-button-secondary-text);
pointer-events: none;
}
.model-btn:has(.icon-play) {
padding: 4px;
}
.model-btn .icon-play {
width: 12px;
height: 12px;
}
@media (min-width: 1200px) {
.model-btn:hover {
color: var(--color-button-secondary-text-hover);
background-color: var(--color-button-secondary-background-hover);
}
.model-btn:hover svg {
stroke: var(--color-button-secondary-text-hover);
pointer-events: none;
}
}
.spr-review .spr-review-content-body {
font-size: var(--font-base-size);
line-height: var(--font-base-line-height, normal);
}
.share-icons__container {
display: flex;
align-items: center;
gap: 16px;
}
.share-icons__container--noheading ul {
padding-left: 0px !important;
}
.share-icons__container .wt-product__upsell__headline {
line-height: 1;
margin-top: 0;
margin-bottom: 0;
text-wrap: nowrap;
white-space: nowrap;
}
.share-icons__container ul {
height: 100%;
width: 100%;
display: flex;
gap: 16px;
}
.share-icons__container .share-icons__item {
display: flex;
justify-content: center;
align-items: center;
}
.share-icons__container .share-icons__item a {
display: flex;
align-items: flex-end;
}
.share-icons__container .share-icons__item svg {
width: 18px;
height: 18px;
fill: var(--color-body-text);
}
@media (min-width: 1200px) {
.share-icons__container .share-icons__item svg:hover {
fill: var(--color-links);
}
}
.wt-product__add-to-cart_form {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 16px;
}
@media (min-width: 1400px) {
.wt-product__add-to-cart_form form {
max-width: 70%;
}
}
@media (min-width: 1400px) {
.wt-product__add-to-cart_form form:has(quantity-counter) {
max-width: 100%;
}
.wt-product__add-to-cart_form form:has(quantity-counter) quantity-counter {
width: 140px;
}
.wt-product__add-to-cart_form form:has(quantity-counter) .counter {
width: 140px;
}
.wt-product__add-to-cart_form
form:has(quantity-counter)
.counter
.js-counter-decrease {
margin-left: 6px;
}
.wt-product__add-to-cart_form
form:has(quantity-counter)
.counter
.js-counter-increase {
margin-right: 6px;
}
}
.wt-product__add-to-cart_form.large form {
max-width: 100%;
}
@media (min-width: 1400px) {
.wt-product__add-to-cart_form--full-width form {
max-width: 100%;
}
}
.wt-product__add-to-cart_form--wrapper {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.wt-product__add-to-cart_form--wrapper .appstle_sub_widget {
order: -1;
}
.wt-product__add-to-cart_form .shopify-payment-button__button--unbranded {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border: 1px solid;
border-radius: var(--border-radius-button);
border-color: var(--color-button-secondary-border);
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
}
.wt-product__add-to-cart_form .shopify-payment-button__button--unbranded:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
.wt-product__add-to-cart_form
.shopify-payment-button__button--unbranded:hover:not([disabled]) {
background: var(--color-button-secondary-background-hover);
}
.wt-product__add-to-cart_form .shopify-payment-button__more-options {
display: none;
}
.complementary-products__container {
margin-bottom: 12px;
}
.complementary-products__container .complementary-products__loader {
display: flex;
justify-content: center;
align-items: center;
padding-top: 16px;
padding-bottom: 32px;
}
.complementary-products__container .summary__title--h3 {
margin-top: 8px;
margin-bottom: 0px;
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
font-size: calc(var(--font-base-size) * 1.1);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
}
@media (min-width: 1200px) {
.complementary-products__container .summary__title--h3 {
font-size: calc(var(--font-base-size) * 1);
}
}
#gallery-loader {
min-width: 50%;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.drawer__list-overlay {
position: fixed;
height: 100vh;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 40;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
overflow: hidden;
}
.quick-buy-page-overlay .drawer__list-overlay,
.variant-dropdown-page-overlay .drawer__list-overlay {
opacity: 1;
}
.quick-buy-page-overlay .page-header,
.variant-dropdown-page-overlay .page-header {
z-index: 5;
}
pickup-availability-preview .icon-path-check,
pickup-availability-drawer .icon-path-check {
fill: var(--color-custom-text, var(--color-body-text));
}
pickup-availability-drawer {
position: relative;
}
pickup-availability-drawer::after {
content: "";
position: sticky;
display: block;
bottom: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
var(--color-background) 100%
);
width: 100%;
height: 52px;
}
pickup-availability-drawer .pickup-availability-list {
gap: 0;
margin-top: 0;
padding-top: 0;
list-style: none;
}
pickup-availability-drawer
.pickup-availability-list
.pickup-availability-list__item {
margin: 0;
padding: 32px 0;
border-bottom: 1px solid var(--color-border);
}
pickup-availability-drawer
.pickup-availability-list
.pickup-availability-list__item:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
.overflow-hidden {
overflow: hidden;
}
.wt-featured-product {
z-index: 0;
}
.wt-featured-product--active-variant-dropdown {
z-index: 10;
}
.wt-featured-product--active-variant-dropdown .swiper {
z-index: 0;
}
.page-overlay-on .wt-featured-product {
z-index: 10;
}
.page-overlay-on .wt-featured-product .swiper {
z-index: 0;
}
.quick-buy-page-overlay .wt-announcement,
.variant-dropdown-page-overlay .wt-announcement,
.page-overlay-on .wt-announcement {
z-index: 0;
}
.wt-featured-icon__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-top: 0;
margin-inline: 0;
overflow: visible;
}
@media (min-width: 1200px) {
.wt-featured-icon__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
@media (min-width: 1200px) {
.wt-featured-icon__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
.wt-featured-icon__link-button {
text-decoration: none;
color: var(--color-custom-text, var(--color-body-text));
display: flex;
align-items: center;
}
.wt-featured-icon__link-button:hover {
text-decoration: none;
color: var(--color-custom-text, var(--color-body-text));
}
.wt-featured-icon .wt-keys__icon {
margin: 0;
}
.wt-product__info.product__info-container > * {
clear: both;
}
.wt-product__info .wt-button-section__container {
padding-left: 0;
padding-right: 0;
}
.wt-product__info .wt-button-section__container .hero__button {
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 1);
}
.wt-review {
font-size: 1.6rem;
}
.wt-reviews {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.wt-reviews {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-reviews {
max-width: var(--site-max-width-big);
}
}
.wt-reviews__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
display: flex;
align-items: center;
}
.wt-reviews__title .counter {
display: inline-flex;
margin-left: calc(var(--gap, 8px) * 1);
border-radius: 50%;
width: 2.4rem;
height: 2.4rem;
justify-content: center;
align-items: center;
background: #f6f5f2;
font-size: 1.4rem;
}
.wt-reviews__list__more {
font-size: 1.4rem;
text-align: center;
}
.wt-reviews__summary {
font-size: 1.4rem;
}
.wt-reviews__summary__rating {
display: flex;
justify-content: space-between;
align-items: center;
}
.wt-reviews__summary__more {
text-align: center;
}
.wt-reviews__summary .value-digit {
font-size: 2.8rem;
}
.wt-reviews__summary .value-bar__digit {
font-size: 1.2rem;
}
.wt-reviews__summary .wt-rating__base,
.wt-reviews__summary .wt-rating__value {
height: 2.4rem;
}
.wt-review__title {
font-size: inherit;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 1);
}
.wt-review__note {
font-size: 1.2rem;
color: var(--color-text-light);
}
.wt-review__content {
margin: 0;
padding: 0;
}
.wt-review__content p {
margin: calc(var(--gap, 8px) * 1) 0;
font-size: 1.4rem;
}
.giftnote {
display: flex;
}
.giftnote__overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 5;
transform: scale(0);
opacity: 0;
transition: opacity 0.3s;
}
.giftnote[open] .giftnote__overlay {
transform: scale(1);
opacity: 1;
}
.giftnote__save {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
}
@media (hover: hover) {
.giftnote__save:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.giftnote__save.loading {
color: transparent;
}
.giftnote__textarea {
width: 100%;
border: 1px solid var(--color-input-border);
background: var(--color-input-background);
border-radius: var(--border-radius);
padding: calc(var(--gap, 8px) * 1);
margin-bottom: calc(var(--gap, 8px) * 2);
font-size: 16px;
}
.giftnote__body {
position: absolute;
background: var(--color-background);
color: var(--color-body-text);
left: 0;
bottom: 0;
width: 100%;
transform: translateY(100%);
padding: calc(var(--gap, 8px) * 4) calc(var(--gap, 8px) * 3)
calc(var(--gap, 8px) * 3);
z-index: 10;
transition: transform 0.3s;
}
.giftnote--open .giftnote__body,
.giftnote[open] .giftnote__body {
transform: translateY(0);
}
.giftnote__body__headline {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: calc(var(--gap, 8px) * 1);
font-size: var(--font-base-size);
}
.giftnote__body__close {
width: 4rem;
height: 4rem;
border: 0;
background: transparent;
padding: calc(var(--gap, 8px) * 1);
position: absolute;
top: calc(var(--gap, 8px) * 2);
right: calc(var(--gap, 8px) * 2);
border-radius: 50%;
}
@media (hover: hover) {
.giftnote__body__close:hover {
background: transparent;
color: inherit;
}
}
[dir="rtl"] .giftnote__body__close {
left: calc(var(--gap, 8px) * 2);
right: auto;
}
.giftnote__field {
border: 1px solid var(--color-input-border);
width: 100%;
margin-top: calc(var(--gap, 8px) * 1.5);
max-width: 60rem;
}
.giftnote__drawercart__item {
flex-basis: 50%;
}
.giftnote__drawercart__addnote {
display: inline-flex;
align-items: center;
white-space: nowrap;
text-decoration: underline;
}
.giftnote__drawercart__addnote .svg-icon {
width: 1.2rem;
height: 1.2rem;
margin-left: calc(var(--gap, 8px) * 0.5);
}
.giftnote__drawercart__addnote-tax_id {
text-align: right;
text-decoration: underline;
}
.article__pic {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
max-width: var(--post-max-width);
padding-top: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.article__pic {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.article__pic {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1800px) {
.article__pic {
max-width: var(--post-max-width);
}
}
@media (min-width: 900px) {
.article__pic {
padding-top: calc(var(--gap, 8px) * 3);
}
}
.article__pic .hero {
border-radius: var(--border-radius);
overflow: hidden;
}
.article__pic--hero {
padding: 0;
max-width: var(--hero-max-width);
}
.article__pic--hero .hero {
border-radius: 0;
}
.article__content {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
max-width: var(--post-max-width);
}
@media (min-width: 1200px) {
.article__content {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.article__content {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1800px) {
.article__content {
max-width: var(--post-max-width);
}
}
.article__body {
margin-bottom: calc(var(--gap, 8px) * 7);
}
.article__body,
.article__body p {
font-size: 1.4rem;
}
@media (min-width: 900px) {
.article__body,
.article__body p {
font-size: 1.6rem;
}
}
.article__body h1 {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: 2rem;
}
@media (min-width: 900px) {
.article__body h1 {
font-size: 2.8rem;
}
}
.article__body h2 {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: clamp(2.1rem, 1.3vw + 1.2rem, 2.4rem);
}
.article__body h3 {
font-size: 2rem;
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
}
@media (max-width: 1199px) {
.article__body h3 {
font-size: 1.6rem;
}
}
.article__header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.4rem;
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
border-bottom: 1px solid var(--color-input-border);
}
.article__social {
display: flex;
align-items: center;
}
.article__social .social-link {
opacity: 0.7;
}
.article__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: 2rem;
margin-top: calc(var(--gap, 8px) * 4);
}
@media (min-width: 900px) {
.article__title {
font-size: 2.8rem;
}
}
.article__footer {
border-top: 1px solid var(--color-input-border);
padding-top: calc(var(--gap, 8px) * 3);
padding-bottom: calc(var(--gap, 8px) * 11);
display: flex;
align-items: center;
justify-content: space-between;
}
.article__prev {
flex-direction: row-reverse;
padding-left: 0;
}
.article__prev .svg-icon {
margin-left: 0;
margin-right: calc(var(--gap, 8px) * 1);
transform: rotateY(-0.5turn);
}
.article__next {
padding-right: 0;
}
#comments form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 24px 32px 24px;
}
#comments label {
width: 100%;
margin-bottom: 16px;
}
#comments .field.field--with-error {
margin-bottom: 0;
}
.form-status-list.form__message h3,
.form__message h3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
@media (min-width: 600px) {
.form-status-list.form__message h3,
.form__message h3 {
flex-direction: row;
gap: 12px;
}
}
.form-status-list.form__message svg,
.form__message svg {
width: 24px;
height: 24px;
}
.article-card {
width: 100%;
position: relative;
}
.article-card__info--full-width {
padding-left: 24px;
padding-right: 24px;
}
.article-card__excerpt {
font-size: 14px;
padding: 4px 0;
}
@media (min-width: 1200px) {
.article-card__excerpt {
font-size: 15px;
}
}
.article-card__comments {
font-size: calc(var(--font-base-size) * 0.75);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
letter-spacing: 1px;
opacity: 0.6;
color: var(--color-custom-text, var(--color-text));
line-height: normal;
margin-top: 12px;
}
.article-card .hero__img--placeholder {
border-radius: var(--border-radius);
}
.article-card__image-wrapper svg {
position: static;
max-height: none;
}
.article-card__image-wrapper--full-width picture.hero__pic,
.article-card__image-wrapper--full-width picture.hero__pic.hero__pic--mobile {
border-radius: 0;
}
.article-card__image-wrapper .hero__img {
object-fit: cover;
border-radius: var(--border-radius);
position: static;
aspect-ratio: var(--aspect-ratio);
}
.article-card__image-wrapper .hero__pic {
padding-top: 0;
}
.article-card .card__badges {
z-index: 1;
}
.article-card .card__badges .card__badges--item {
background-color: var(--color-button-primary-background);
color: var(--color-button-primary-text);
}
.article-card-wrapper {
height: 100%;
min-height: 200px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: var(--color-input-border);
border-radius: var(--border-radius);
}
.article-card-wrapper .card__heading {
text-align: center;
}
.article-card-wrapper .card__badges--item {
background-color: var(--color-button-primary-background);
color: var(--color-button-primary-text);
}
.cms-page {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
max-width: var(--post-max-width);
margin-bottom: calc(var(--gap, 8px) * 7);
}
@media (min-width: 1200px) {
.cms-page {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.cms-page {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1800px) {
.cms-page {
max-width: var(--post-max-width);
}
}
.cms-page--contact {
max-width: 64rem;
}
@media (min-width: 1800px) {
.cms-page--contact {
max-width: 64rem;
}
}
.cms-page__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: 2rem;
margin-top: calc(var(--gap, 8px) * 7);
text-align: center;
}
@media (min-width: 900px) {
.cms-page__title {
font-size: 2.8rem;
}
}
.cms-page__content,
.cms-page__content p {
font-size: 1.4rem;
}
@media (min-width: 900px) {
.cms-page__content,
.cms-page__content p {
font-size: 1.6rem;
}
}
.cms-page__content h1 {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: 2rem;
}
@media (min-width: 900px) {
.cms-page__content h1 {
font-size: 2.8rem;
}
}
.cms-page__content h2 {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: clamp(2.1rem, 1.3vw + 1.2rem, 2.4rem);
}
.cms-page__content h3 {
font-size: 2rem;
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
}
@media (max-width: 1199px) {
.cms-page__content h3 {
font-size: 1.6rem;
}
}
.account-wrapper {
max-width: var(--site-max-width);
padding-left: 0px;
padding-right: 0px;
margin-left: auto;
margin-right: auto;
max-width: 42rem;
margin-top: calc(var(--gap, 8px) * 7);
margin-bottom: calc(var(--gap, 8px) * 14);
}
@media (min-width: 1200px) {
.account-wrapper {
padding-left: calc(0px + calc(var(--gap, 8px) * 2));
padding-right: calc(0px + calc(var(--gap, 8px) * 2));
}
}
@media (min-width: 1800px) {
.account-wrapper {
max-width: var(--site-max-width-big);
}
}
@media (min-width: 1800px) {
.account-wrapper {
max-width: 42rem;
}
}
.account-form__title {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
font-size: 2rem;
margin-top: calc(var(--gap, 8px) * 4);
text-align: center;
}
@media (min-width: 900px) {
.account-form__title {
font-size: 2.8rem;
}
}
@media (min-width: 900px) {
.account-form__title {
margin-top: calc(var(--gap, 8px) * 7);
}
}
.account-form .recovery-password {
margin-top: calc(var(--gap, 8px) * 1);
width: 100%;
display: flex;
justify-content: center;
}
.account-form .recovery-password .svg-icon {
display: none;
}
.account-create {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
text-align: center;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
width: 100%;
margin-top: calc(var(--gap, 8px) * 2);
}
@media (hover: hover) {
.account-create:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.account-create[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.wt-test {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
justify-content: center;
background-color: var(--color-custom-background);
color: var(--color-custom-text);
}
.wt-test .wt-slider {
background: var(--color-custom-background, inherit);
}
.wt-test__container {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
display: block;
}
@media (min-width: 1200px) {
.wt-test__container {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-test__container {
max-width: var(--site-max-width-big);
}
}
.wt-test__list {
display: flex;
flex-direction: row;
color: var(--color-custom-text);
}
@media (min-width: 600px) {
.wt-test__list {
margin-top: calc(var(--gap, 8px) * 3);
justify-content: space-between;
align-items: stretch;
}
}
.wt-test__icon {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
margin-left: 0;
}
body .wt-test__item {
--custom-text-scale: var(--font-text-scale, 1);
--text-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-basis: 100%;
height: auto;
font-size: var(--text-size);
}
@media (min-width: 1200px) {
body .wt-test__item {
--custom-text-scale: var(--font-text-scale-desk);
}
}
@media (max-width: 599px) {
body .wt-test__item {
width: 100%;
height: auto;
}
}
@media (min-width: 600px) {
body .wt-test__item--border {
padding-top: 4.8rem;
padding-bottom: 4.8rem;
border: 1px solid var(--color-background);
}
}
.wt-test__image {
max-width: 8rem;
max-height: 8rem;
margin: 0.5rem;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (min-width: 600px) {
.wt-test__image {
max-width: 12rem;
max-height: 12rem;
}
}
@media (min-width: 1200px) {
.wt-test__image {
max-width: 14rem;
max-height: 14rem;
}
}
.wt-test__image--natural {
object-position: 50% 50% !important;
}
.wt-test__image--circle {
width: var(--mobile-width, 5rem);
height: var(--mobile-width, 5rem);
max-width: 100%;
max-height: 100%;
margin: 0.5rem;
border-radius: 50%;
object-fit: cover;
}
@media (min-width: 600px) {
.wt-test__image--circle {
width: var(--desktop-width, 6rem);
height: var(--desktop-width, 6rem);
}
}
.wt-test__image--square {
width: var(--mobile-width, 5rem);
height: var(--mobile-width, 5rem);
max-width: 100%;
max-height: 100%;
margin: 0.5rem;
object-fit: cover;
}
@media (min-width: 600px) {
.wt-test__image--square {
width: var(--desktop-width, 6rem);
height: var(--desktop-width, 6rem);
}
}
.wt-test__image--no_image {
display: none;
}
.wt-test__stars {
width: 1.5rem;
height: 1.5rem;
font-weight: bold;
}
.wt-test__text {
padding-left: calc(var(--gap, 8px) * 1);
padding-right: calc(var(--gap, 8px) * 1);
text-align: center;
padding: calc(var(--gap, 8px) * 0.5);
}
@media (min-width: 600px) {
.wt-test__text {
display: inline-block;
max-width: 80%;
}
}
.wt-test__author {
font-size: var(--font-base-size);
margin-top: calc(var(--gap, 8px) * 1);
}
.wt-test__placeholder {
width: 10rem;
height: 10rem;
background-color: #efefef;
fill: #b7b7b7;
border-radius: var(--border-radius);
}
@media (max-width: 899px) {
.wt-test__placeholder {
width: 8rem;
}
}
.rich-text {
margin-left: auto;
margin-right: auto;
text-align: center;
background: var(--color-custom-background);
}
.rich-text .hero__overlay {
position: relative;
}
@media (min-width: 600px) {
.rich-text .hero__overlay {
padding-top: calc(var(--gap, 8px) * 3);
padding-bottom: calc(var(--gap, 8px) * 3);
}
}
@media (min-width: 1800px) {
.rich-text .hero__overlay {
padding-top: calc(var(--gap, 8px) * 3);
padding-bottom: calc(var(--gap, 8px) * 3);
}
}
.rich-text .hero__overlay--left,
.rich-text .hero__overlay--right {
padding-inline: 0;
}
.rich-text .hero__overlay__content {
width: 100%;
}
.rich-text .hero__text > p {
margin-block: calc(var(--gap, 8px) * 1);
}
.rich-text .hero__text > p:first-child {
margin-top: 0;
}
.rich-text .hero__text > p:last-child {
margin-bottom: 0;
}
. {
width: 100%;
}rich-text--short
@media (min-width: 1200px) {
.rich-text--short {
margin-left: auto;
margin-right: auto;
width: 50%;
}
.rich-text--short .hero__overlay__content {
width: 100%;
}
}
.rich-text-image img,
.rich-text-image svg {
width: calc(
var(--font-headline-scale) * var(--font-headline-size) *
var(--font-base-line-height)
);
height: calc(
var(--font-headline-scale) * var(--font-headline-size) *
var(--font-base-line-height)
);
border-radius: 50%;
transition: all 0.1s ease-in-out;
vertical-align: middle;
object-fit: cover;
}
@media (min-width: 900px) {
.rich-text-image img,
.rich-text-image svg {
width: calc(
var(--font-headline-scale-desk) * var(--font-headline-size) *
var(--font-base-line-height)
);
height: calc(
var(--font-headline-scale-desk) * var(--font-headline-size) *
var(--font-base-line-height)
);
}
}
.rich-text-image svg {
border: 1px solid #000000;
}
.rich-text-image img:hover,
.rich-text-image svg:hover {
transform: scale(1.1);
}
.rich-text-image__heading {
font-size: calc(var(--font-headline-scale) * var(--font-headline-size));
line-height: var(--font-base-line-height);
text-transform: var(--font-base-transform, none);
margin: 0;
}
@media (min-width: 900px) {
.rich-text-image__heading {
font-size: calc(
var(--font-headline-scale-desk) * var(--font-headline-size)
);
}
}
.newsletter {
background-color: var(--color-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-text);
}
.newsletter__text {
padding-bottom: calc(var(--gap, 8px) * 1);
}
.newsletter__wrapper {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
text-align: center;
}
@media (min-width: 1200px) {
.newsletter__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.newsletter__wrapper {
max-width: var(--site-max-width-big);
}
}
.newsletter .form__message {
padding-left: 16px;
padding-right: 16px;
}
.newsletter .form__message p {
text-align: center;
}
.newsletter .wt-newsletter__field {
border-color: var(
--color-input-border,
var(--color-button-secondary-border)
);
color: var(--color-input-text, var(--color-input-text));
background-color: var(--color-input-background);
}
.newsletter .wt-newsletter__field::placeholder {
color: var(--color-input-placeholder);
}
.newsletter .wt-newsletter__field:focus-visible {
outline-color: var(--color-custom-text, var(--color-links-active));
}
.newsletter .wt-newsletter__fieldset {
width: 100%;
margin-inline: auto;
}
.newsletter .hero__text {
margin: 1rem;
}
.main-product__buy-buttons--container {
display: flex;
justify-content: center;
align-items: center;
}
/* Inventory status */
.product__inventory {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-base);
}
.product--no-media .product__inventory {
justify-content: center;
}
/* This keeps the container from getting display: none; applied to it and to make sure we're not introducing some layout shift when switching to an unavailable variant */
.product__inventory.visibility-hidden:empty {
display: block;
}
/* Hide unavailable variant options when variant-picker block setting is enabled */
.wt-product__options .wt-variant-option--hidden {
display: none;
}
.caption-with-letter-spacing {
font-family: var(--font-base);
font-size: 16px;
letter-spacing: 0.13rem;
text-transform: uppercase;
color: var(--color-text);
}
.subtitle {
font-size: 1.8rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
letter-spacing: 0.06rem;
color: var(--color-text);
}
/* Recipient form */
.recipient-form {
/* (2.88[line-height] - 1.6rem) / 2 */
--recipient-checkbox-margin-top: 0.64rem;
display: block;
position: relative;
max-width: 44rem;
margin-bottom: 0px;
}
recipient-form h2 svg {
width: 20px;
height: 20px;
}
recipient-form .form__message svg {
width: 20px;
height: 20px;
}
recipient-form .form__message svg circle {
stroke: var(--color-action-background);
fill: var(--color-action-background);
}
recipient-form .form__message svg path:nth-child(2n) {
stroke: var(--color-action-background);
fill: var(--color-action-text);
}
.recipient-form-field-label {
margin: 0.6rem 0;
}
.recipient-form-field-label--space-between {
display: flex;
justify-content: space-between;
}
.recipient-checkbox {
flex-grow: 1;
font-size: 1.6rem;
display: flex;
word-break: break-word;
align-items: center;
gap: 12px;
max-width: inherit;
position: relative;
cursor: pointer;
}
.recipient-checkbox .check {
display: flex;
align-items: center;
}
.no-js .recipient-checkbox {
display: none;
}
.recipient-form > input[type="checkbox"] {
position: absolute;
width: 1.6rem;
height: 1.6rem;
margin: var(--recipient-checkbox-margin-top) 0;
top: 0;
left: 0;
z-index: -1;
appearance: none;
-webkit-appearance: none;
}
.recipient-fields__field {
margin: 0 0 2rem 0;
}
.recipient-fields__field:last-of-type {
margin: 0 0 8px 0;
}
.recipient-fields__field .form__message {
margin-top: 4px;
display: flex;
align-items: center;
gap: 12px;
}
.recipient-fields__field .field.date {
position: relative;
color: var(--color-input-placeholder);
}
@media (min-width: 1200px) {
.recipient-fields__field .field.date {
max-width: 212px;
}
}
.recipient-fields__field .field.date input {
width: 188px;
}
.recipient-fields__field .field.date input {
color: var(--color-input-placeholder);
}
.recipient-fields__field .field.date input:focus,
.recipient-fields__field .field.date input:active {
color: black;
}
.recipient-fields__field .field.date label {
position: absolute;
top: -10px;
background: white;
scale: 0.8;
padding: 0 8px;
color: black;
}
@media (min-width: 1200px) {
.recipient-fields__field .field.date label {
top: -12px;
}
}
.recipient-fields__field .field input {
width: 100%;
border: 1px solid var(--color-input-border);
}
.recipient-fields__field .field .form__field {
margin-bottom: 0;
}
.recipient-fields__field .field input::-webkit-calendar-picker-indicator {
content: "";
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
height: 15px;
width: 15px;
}
.recipient-fields__field .field textarea {
height: 120px;
width: 100%;
border: 1px solid var(--color-input-border);
}
.recipient-fields {
margin-top: 16px;
}
.recipient-fields .field__label {
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 3.5rem);
overflow: hidden;
}
.recipient-checkbox > svg {
margin-top: var(--recipient-checkbox-margin-top);
margin-right: 1.2rem;
flex-shrink: 0;
}
.recipient-form .icon-checkmark {
visibility: hidden;
position: absolute;
left: 4px;
z-index: 5;
top: 8px;
}
.recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
visibility: visible;
}
.js .recipient-fields {
display: none;
}
.recipient-form > input[type="checkbox"]:checked ~ .recipient-fields {
display: block;
animation: animateMenuOpen var(--duration-default) ease;
}
.recipient-form
> input[type="checkbox"]:not(:checked, :disabled)
~ .recipient-fields,
.recipient-email-label {
display: none;
}
.js .recipient-email-label.required,
.no-js .recipient-email-label.optional {
display: inline;
}
.recipient-form ul {
line-height: calc(1 + 0.6 / var(--font-body-scale));
padding-left: 4.4rem;
text-align: left;
}
.recipient-form ul a {
display: inline;
}
.recipient-form .error-message::first-letter {
text-transform: capitalize;
}
@media screen and (forced-colors: active) {
.recipient-fields > hr {
border-top: 0.1rem solid rgb(var(--color-background));
}
.recipient-checkbox > svg {
background-color: inherit;
border: 0.1rem solid rgb(var(--color-background));
}
.recipient-form > input[type="checkbox"]:checked + label .icon-checkmark {
border: none;
}
}
.product-form__recipient-error-message-wrapper {
display: none;
}
/* Subscription widget */
.wt-product__info .wt-subscription-widget {
padding-top: calc(var(--gap, 8px) * 1);
padding-bottom: calc(var(--gap, 8px) * 1);
}
.wt__quick-buy .wt-subscription-widget {
margin-block: 16px;
}
.wt-subscription-widget__container {
display: flex;
flex-direction: column;
gap: 12px;
}
.wt-subscription-widget__container[data-text-style-headline]
.wt-subscription-widget__plan-header__title-text {
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
}
.wt-subscription-widget__plans-title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
background-color: var(--block-color-accent);
color: var(--block-color-subscription-title, #fff);
font-size: calc(var(--font-base-size) - 2px);
padding: 6px 18px;
margin: -24px -18px 24px;
}
.wt-subscription-widget__plans {
display: flex;
flex-direction: column;
border: 1px solid var(--block-color-border);
border-radius: var(--border-radius);
padding: 24px 18px;
overflow: hidden;
background-color: var(--block-color-background);
cursor: pointer;
}
.wt-subscription-widget__plans--selected {
border: 1px solid var(--block-color-active-border);
background-color: var(--block-color-active-background);
}
.wt-subscription-widget__plans--selected
.wt-subscription-widget__plan-header__circle {
background-color: var(--block-color-active-background);
border: 2px solid var(--block-color-accent);
position: relative;
}
.wt-subscription-widget__plans--selected
.wt-subscription-widget__plan-header__circle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background-color: var(--block-color-accent);
border-radius: 50%;
}
.wt-subscription-widget__plans--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.wt-subscription-widget__plan-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.wt-subscription-widget__plan-header__title {
display: flex;
align-items: center;
gap: 8px;
max-width: 155px;
}
.wt-subscription-widget__plan-header__title--single-purchase {
max-width: none;
}
.wt-subscription-widget__plan-header__title-text {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
margin: 0;
color: var(--block-color-heading-color);
}
.wt-subscription-widget__plan-header__circle {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--block-color-active-background);
border: 1px solid var(--block-color-border);
}
.wt-subscription-widget__plan-header__price {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.wt-subscription-widget__plan-header__price p {
margin: 0;
}
.wt-subscription-widget__plan-header__price-container {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.wt-subscription-widget__plan-header__price-regular {
font-size: var(--font-price-size);
font-family: var(--font-price);
font-style: var(--font-price-style);
font-weight: var(--font-price-weight);
text-transform: var(--font-price-transform, none);
letter-spacing: var(--font-price-letter-spacing, normal);
color: var(--block-color-regular-price);
}
.wt-subscription-widget__plan-header__price-regular--sale {
color: var(--block-color-sale-price);
}
.wt-subscription-widget__plan-header__price-sale {
font-family: var(--font-price);
font-size: 14px;
text-decoration: line-through;
color: var(--block-color-crossed-out-price);
line-height: normal;
}
@media (min-width: 900px) {
.wt-subscription-widget__plan-header__title {
max-width: none;
}
}
.wt-subscription-widget__plan-content {
display: flex;
flex-direction: column;
margin-top: 16px;
}
.wt-subscription-widget__plan-content--one-time {
margin-top: 0;
}
.wt-subscription-widget__plan-content__select {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
width: 100%;
height: 52px;
border: 1px solid var(--block-color-border);
border-radius: var(--border-radius);
color: var(--block-color-content-text);
background: url('data:image/svg+xml,')
no-repeat;
background-position: calc(100% - 24px) center !important;
-moz-appearance: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.wt-subscription-widget__plan-content__description {
color: var(--block-color-content-text);
}
.wt-subscription-widget__plan-content__description ul,
.rte .wt-subscription-widget__plan-content__description ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.wt-subscription-widget__plan-content__description li {
display: flex;
gap: 8px;
}
.wt-subscription-widget__plan-content__description li:last-child {
margin-bottom: 0;
}
.wt-subscription-widget__plan-content__description li svg {
flex-shrink: 0;
width: 18px;
height: 26px;
}
.wt-subscription-widget__plan-content__description li svg path {
fill: var(--block-color-accent);
}
.product__tax.caption:empty {
display: none;
}
#single-purchase-plan .wt-subscription-widget__plan-header__price-container p {
margin: 0;
}
.wt-lookbook__section {
background: rgba(var(--color-overlay-rgb), var(--color-overlay-opacity));
}
.wt-lookbook__section .headline__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-top: 0;
margin-inline: 0;
overflow: visible;
width: 100%;
}
@media (min-width: 1200px) {
.wt-lookbook__section .headline__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
.wt-lookbook__text {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
margin: 0 0 calc(var(--gap, 8px) * 2);
text-align: center;
color: var(--color-custom-text);
}
.wt-lookbook__text p {
margin: 0;
padding: 0;
}
.wt-lookbook__list {
list-style: none;
column-count: 2;
column-gap: var(--lookbook-gap, calc(var(--gap, 8px) * 1));
}
@media (min-width: 1200px) {
.wt-lookbook__list {
column-count: 3;
column-gap: var(--lookbook-gap-desk, calc(var(--gap, 8px) * 2));
}
}
.wt-lookbook__item {
break-inside: avoid;
padding-bottom: var(--lookbook-gap);
position: relative;
display: grid;
}
@media (min-width: 1200px) {
.wt-lookbook__item {
padding-bottom: var(--lookbook-gap-desk);
}
}
.wt-lookbook__item--placeholder {
background-color: #efefef;
fill: #b7b7b7;
width: 100%;
height: 100%;
}
.wt-lookbook__image {
display: block;
width: 100%;
height: 100%;
border-radius: var(--border-radius);
}
.wt-lookbook__link {
right: calc(var(--gap, 8px) * 1);
top: calc(var(--gap, 8px) * 1);
}
.wt-lookbook__button {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
padding-top: calc(var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2);
font-size: var(--font-button-size);
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
text-align: center;
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: var(--border-radius-button);
-webkit-appearance: none;
cursor: pointer;
transition:
background 0.3s ease-in,
color 0.3s ease-in;
width: 2.8rem;
height: 2.8rem;
padding: 0;
position: absolute;
right: calc(var(--gap, 8px) * 1);
top: calc(var(--gap, 8px) * 1);
z-index: 2;
}
@media (hover: hover) {
.wt-lookbook__button:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.wt-lookbook__button[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 1199px) {
.wt-lookbook__button .svg-icon {
width: 1.6rem;
height: 1.6rem;
}
}
@media (min-width: 600px) {
.wt-lookbook__button {
width: 3rem;
height: 3rem;
}
}
@media (min-width: 1200px) {
.wt-lookbook__button {
width: 4.5rem;
height: 4.5rem;
}
}
.wt-lookbook__button--primary {
background: var(--color-button-primary-background);
color: var(--color-button-primary-text);
border-color: transparent;
}
@media (hover: hover) {
.wt-lookbook__button--primary:hover {
background: var(--color-button-primary-background-hover);
border-color: transparent;
color: var(--color-button-primary-text-hover);
}
}
.wt-lookbook__button--primary.loading {
color: transparent;
}
.wt-lookbook__button--secondary {
background: var(--color-button-secondary-background);
color: var(--color-button-secondary-text);
border-color: var(--color-button-secondary-border);
}
@media (hover: hover) {
.wt-lookbook__button--secondary:hover {
background: var(--color-button-secondary-background-hover);
color: var(--color-button-secondary-text-hover);
}
}
.wt-lookbook__button .svg-icon {
transform: none;
}
.wt-lookbook__full {
padding-left: 0;
padding-right: 0;
max-width: 100%;
}
.wt-page {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
border-radius: var(--border-radius);
color: var(--color-custom-text);
text-align: left;
}
@media (min-width: 1200px) {
.wt-page {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-page {
max-width: var(--site-max-width-big);
}
}
.wt-page--compact {
max-width: var(--post-max-width);
}
.wt-page__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
color: var(
--color-custom-text,
var(--color-headings-text, var(--color-text))
);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-top: 0;
text-align: center;
}
@media (min-width: 1200px) {
.wt-page__title {
font-size: min(
calc(var(--font-headline-size) * var(--font-headline-scale-desk, 1)),
calc(var(--font-headline-size) + 13.5vw)
);
}
}
.wt-page__wrapper {
background-color: rgba(
var(--color-bg-overlay),
var(--color-overlay-opacity)
);
}
.wt-page__placeholder-wrapper {
display: flex;
justify-content: center;
background-color: var(--color-placeholder-bg);
border-radius: var(--border-radius);
}
.wt-page__placeholder {
width: 32rem;
height: 32rem;
}
.hero .hero__pic .hero__img {
object-position: var(--image-object-position);
}
@media (min-width: 900px) {
.hero .hero__pic .hero__img {
object-position: var(--image-object-position-desktop);
}
}
.hero.hero--video-background.hero--grid .hero__pic {
width: 100%;
}
@media (min-width: 900px) {
.section-image-with-text
[data-height="fixed_height"]
.hero
.hero__pic:not(.hero__pic--mobile) {
min-height: var(--section-height-desk, 100%);
}
.section-image-with-text
[data-height="fixed_height"]
.hero
.hero__pic
.hero__img {
position: absolute;
width: 100%;
height: 100%;
}
}
.section-image-with-text .hero__text {
letter-spacing: 0;
}
.section-image-with-text .hero .hero__pic__link {
height: 100%;
}
@media (max-width: 599px) {
.section-image-with-text .hero__overlay {
padding: 24px;
}
}
@media (min-width: 900px) {
.section-image-with-text .hero--video-background .wt-video__movie {
width: var(--desktop-percentage-image-width, 50%);
}
}
.main-collection-list {
--cols: 1;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: calc(var(--gap, 8px) * 2);
}
@media (max-width: 599px) {
.main-collection-list {
gap: calc(var(--gap, 8px) * 1);
--cols-mobile: 2;
grid-template-columns: repeat(var(--cols-mobile), 1fr);
}
}
@media (min-width: 900px) {
.main-collection-list {
gap: calc(var(--gap, 8px) * 3);
}
}
@media (min-width: 1200px) {
.main-collection-list {
gap: calc(var(--gap, 8px) * 2);
}
}
.main-collection-list__wrapper {
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.main-collection-list__wrapper {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.main-collection-list__wrapper {
max-width: var(--site-max-width-big);
}
}
.main-collection-list__item {
display: flex;
justify-content: center;
align-self: stretch;
}
.main-collection-list__text-spacing {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
font-weight: 500;
margin-top: calc(var(--gap, 8px) * 1);
margin-bottom: 8px;
text-align: center;
}
.main-collection-list__image {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
}
.main-article {
font-family: var(--font-base);
font-size: 1.3rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-align: center;
}
.main-article__header {
justify-content: space-between;
font-size: 1.4rem;
padding-top: calc(var(--gap) * 2);
padding-bottom: calc(var(--gap) * 2);
border-bottom: 1px solid var(--color-border);
}
.main-article__pic {
margin-left: auto;
margin-right: auto;
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.main-article__pic {
padding-left: 0;
padding-right: 0;
}
}
.main-article__pic--larger {
max-width: 120rem;
}
.main-article__pic--full-width {
margin: 0;
padding-left: 0;
padding-right: 0;
max-width: initial;
}
.main-article__pic--full-width img {
border-radius: 0;
}
.main-article__pic--post-width {
max-width: var(--post-max-width);
}
.main-article__content {
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
max-width: var(--post-max-width);
text-align: left;
}
.main-article__hero-container {
max-width: 130rem;
margin: 0 auto;
}
.main-article__body {
font-size: var(--font-base-size);
margin-top: calc(var(--gap) * 1);
word-break: break-word;
}
.main-article__body h2 {
margin-bottom: 0;
line-height: 1.2;
}
.main-article__body p {
margin-top: 8px;
}
.main-article__title {
margin-top: calc(var(--gap) * 2);
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
color: var(--color-body-text);
line-height: var(--font-headline-line-height, normal);
}
@media (min-width: 1200px) {
.main-article__title {
font-size: min(
var(--font-headline-size) * var(--font-headline-scale-desk, 1),
var(--font-headline-size) + 13.5vw
);
}
}
.main-article__share {
display: flex;
align-items: center;
gap: 16px;
margin-top: calc(var(--gap) * 3);
}
.main-article__share summary {
font-size: var(--font-base-size);
}
.main-article__share p {
font-size: var(--font-base-size);
}
.main-article__share a,
.main-article__share__button {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.main-article__share a svg,
.main-article__share__button svg {
width: 20px;
height: 20px;
fill: var(--color-links);
}
.main-article__share a .svg-icon.svg-icon--soc-twitter,
.main-article__share__button .svg-icon.svg-icon--soc-twitter {
height: 18px;
width: 20px;
}
.main-article__share a:hover,
.main-article__share__button:hover {
color: var(--color-links-active);
}
.main-article__share a:hover svg,
.main-article__share__button:hover svg {
fill: var(--color-links-active);
}
.main-article__share .share-button__fallback {
background-color: var(--color-background);
padding-bottom: 8px;
}
.main-article__share .share-button__fallback label {
padding-left: 16px;
}
.main-article__img {
width: 100%;
height: var(--section-height, 100%);
object-fit: cover;
display: block;
border-radius: var(--border-radius);
overflow: hidden;
}
@media (min-width: 900px) {
.main-article__img {
height: var(--section-height-desk, 100%);
}
}
.wt-button-section {
background-color: var(--color-custom-background);
}
.wt-button-section__container {
justify-content: center;
display: flex;
max-width: var(--site-max-width);
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1200px) {
.wt-button-section__container {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
@media (min-width: 1800px) {
.wt-button-section__container {
max-width: var(--site-max-width-big);
}
}
.wt-button-section__left {
justify-content: flex-start;
}
.wt-button-section__right {
justify-content: flex-end;
}
@media (max-width: 899px) {
.wt-featured-collection .disable-on-mobile {
display: none;
}
}
.wt-featured-collection .wt-slider__scrollbar {
max-width: calc(100% - calc(var(--gap, 8px) * 4));
}
@media (min-width: 1200px) {
.wt-featured-collection .wt-slider__scrollbar {
max-width: calc(100% - calc(var(--gap, 8px) * 8));
}
}
.wt-featured-collection .wt-slider__scrollbar--full {
max-width: 100%;
}
.wt-featured-collection__subheading {
font-size: var(--font-base-size);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
color: var(--color-custom-text, var(--color-text));
margin: 0;
text-align: center;
padding-bottom: calc(var(--gap, 8px) * 2);
padding-inline: calc(var(--gap, 8px) * 2);
}
.wt-featured-collection__subheading p {
margin: 0;
padding: 0;
}
@media (min-width: 1200px) {
.wt-featured-collection__subheading {
margin-block: calc(var(--gap, 8px) * 0.5);
}
}
.wt-featured-collection .button-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: calc(var(--gap, 8px) * 2);
}
.template-cart
.wt-featured-collection:has(.wt-slider:not(.wt-slider--full))
.headline {
--font-headline-size: 2.8rem;
max-width: var(--post-max-width);
text-align: left;
padding: 0 16px;
}
@media (min-width: 1200px) {
.template-cart
.wt-featured-collection:has(.wt-slider:not(.wt-slider--full))
.headline {
margin: auto;
padding-left: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
}
}
.template-cart .wt-featured-collection .wt-slider:not(.wt-slider--full) {
max-width: var(--post-max-width);
margin: auto;
}
.template-cart
.wt-featured-collection
.wt-slider:not(.wt-slider--full)
.wt-slider__container--featured {
max-width: var(--post-max-width);
}
@media (min-width: 1200px) {
.template-cart
.wt-featured-collection
.wt-slider:not(.wt-slider--full)
.wt-slider__container--featured {
padding-right: calc(var(--gap, 8px) * 2);
}
}
.wt-featured-collection .wt-slider__slide > div {
height: 100%;
}
.wt-featured-collection__button-container {
padding-top: calc(var(--gap, 8px) * 2);
display: flex;
justify-content: center;
align-items: center;
}
.wt-featured-collection [data-swiper-container] {
display: flex;
}
.wt-slider__container--featured.loading {
display: flex;
}
.wt-slider__container--featured.loading .card__container {
width: 100%;
min-width: 150px;
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 600px) {
.wt-slider__container--featured.loading .card__container {
min-width: 250px;
}
}
@media (min-width: 1400px) {
.wt-slider__container--featured.loading .card__container {
min-width: 350px;
}
}
.wt-slider__container--featured.loading div:nth-child(n + 5) {
display: none;
}
.section-featured-product .wt-product__option__body--thumbs label img {
height: var(--custom-size, auto);
width: auto;
}
main#root > .wt-featured-nav {
background-color: var(--color-background);
}
.wt-featured-nav .secondary-navigation {
position: relative;
overflow-y: hidden;
}
@media (min-width: 1200px) {
.wt-featured-nav .secondary-navigation {
padding-left: calc(var(--gap, 8px) * 4);
padding-right: calc(var(--gap, 8px) * 4);
max-width: var(--site-max-width);
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1800px) {
.wt-featured-nav .secondary-navigation {
max-width: var(--site-max-width-big);
}
}
.wt-featured-nav .secondary-navigation::after {
display: none;
content: "";
width: calc(var(--gap, 8px) * 4);
height: 80px;
position: absolute;
right: 16px;
top: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
}
[dir="rtl"] .wt-featured-nav .secondary-navigation::after {
left: 16px;
right: auto;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
}
@media (min-width: 1200px) {
.wt-featured-nav .secondary-navigation::after {
display: block;
right: 32px;
}
[dir="rtl"] .wt-featured-nav .secondary-navigation::after {
left: 32px;
right: auto;
}
}
.wt-featured-nav .secondary-navigation.not-at-min-scroll::before {
display: none;
content: "";
width: calc(var(--gap, 8px) * 4);
height: 80px;
position: absolute;
left: 16px;
top: 0;
bottom: 0;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
}
@media (min-width: 1200px) {
.wt-featured-nav .secondary-navigation.not-at-min-scroll::before {
display: block;
left: 32px;
}
}
.wt-featured-nav .secondary-navigation.at-max-scroll::after {
display: none;
}
.wt-featured-nav .secondary-navigation__ul {
display: flex;
gap: calc(var(--gap, 8px) * 1.5);
padding-block: calc(var(--gap, 8px) * 1);
overflow-x: auto;
/* Track of the scrollbar */
/* Handle of the scrollbar */
/* Handle on hover */
}
@media (min-width: 1200px) {
.wt-featured-nav .secondary-navigation__ul.center {
justify-content: center;
}
}
.wt-featured-nav .secondary-navigation__ul::-webkit-scrollbar {
width: 8px;
height: 8px;
}
@media (max-width: 899px) {
.wt-featured-nav .secondary-navigation__ul::-webkit-scrollbar {
display: none;
}
}
.wt-featured-nav .secondary-navigation__ul::-webkit-scrollbar-track {
background: #f1f1f1; /* Light grey background for the track */
border-radius: 4px;
}
.wt-featured-nav .secondary-navigation__ul::-webkit-scrollbar-thumb {
background: #888; /* Dark grey handle */
border-radius: 4px;
border: 2px solid #f1f1f1; /* Adding some padding around the handle */
}
.wt-featured-nav .secondary-navigation__ul::-webkit-scrollbar-thumb:hover {
background: #555; /* Slightly darker shade on hover for better visibility */
}
@media (max-width: 1199px) {
.wt-featured-nav .secondary-navigation__ul li:first-of-type {
padding-left: calc(var(--gap, 8px) * 2);
}
}
@media (max-width: 1199px) {
.wt-featured-nav .secondary-navigation__ul li:last-of-type {
padding-right: calc(var(--gap, 8px) * 2);
}
}
.wt-featured-nav .secondary-navigation__link {
white-space: nowrap;
font-size: calc(var(--font-base-size) - 2px);
font-family: var(--font-base);
font-style: var(--font-base-style);
font-weight: var(--font-base-weight);
text-transform: var(--font-base-transform, none);
letter-spacing: var(--font-base-letter-spacing, normal);
line-height: var(--font-base-line-height, normal);
padding-left: calc(var(--gap, 8px) * 3);
padding-right: calc(var(--gap, 8px) * 3);
max-height: 34px;
}
@media (min-width: 1200px) {
.wt-featured-nav .secondary-navigation__link {
padding-left: calc(var(--gap, 8px) * 4);
padding-right: calc(var(--gap, 8px) * 4);
}
}
.wt-featured-nav .secondary-navigation__link--active {
background: var(--color-active-background);
color: var(--color-active-text);
}
@media (min-width: 900px) {
.wt-featured-nav .secondary-navigation__swiper-wrapper--center {
justify-content: center;
}
}
.wt-featured-nav .secondary-navigation__swiper-slide {
flex-shrink: 1;
box-sizing: border-box;
padding-left: calc(var(--gap, 8px) * 2);
width: fit-content;
}
.wt-featured-nav .secondary-navigation__swiper-slide:last-of-type {
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 900px) {
.wt-featured-nav .secondary-navigation__swiper:hover .swiper-button-next,
.wt-featured-nav .secondary-navigation__swiper:hover .swiper-button-prev {
display: flex;
}
}
.wt-featured-nav .secondary-navigation__swiper .swiper-button-next,
.wt-featured-nav .secondary-navigation__swiper .swiper-button-prev {
display: none;
--swiper-theme-color: #2d2d2d;
background: rgba(255, 255, 255, 0.8);
width: 30px;
height: 30px;
top: 50%;
transform: translateY(-50%);
pointer-events: initial;
border-radius: var(--border-radius-button);
}
.wt-featured-nav
.secondary-navigation__swiper
.swiper-button-next.swiper-button-disabled,
.wt-featured-nav
.secondary-navigation__swiper
.swiper-button-prev.swiper-button-disabled {
display: none;
}
.wt-featured-nav .secondary-navigation__swiper::before {
content: "";
width: calc(var(--gap, 8px) * 2);
height: 80px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
z-index: 2;
}
.wt-featured-nav .secondary-navigation__swiper::after {
content: "";
width: calc(var(--gap, 8px) * 2);
height: 80px;
position: absolute;
right: 0px;
top: 0;
bottom: 0;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
z-index: 2;
}
[dir="rtl"] .wt-featured-nav .secondary-navigation__swiper::after {
left: 0;
right: auto;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0),
var(--color-custom-background, var(--color-background))
);
}
.wt-main-404__container {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
align-items: center;
padding-left: 16px;
padding-right: 16px;
}
.wt-main-404__container .headline {
margin: 0;
padding: 0;
color: var(--color-body-text);
}
.newsletter-with-image {
background-image: var(--mobile-image);
background-position: var(--mobile-focal-points);
background-size: cover;
height: var(--section-height, auto);
overflow: hidden;
padding: 0;
margin-top: min(
var(--section-margin-block-mobile),
var(--section-gap-top, calc(var(--gap, 8px) * var(--section-gap, 2)))
);
margin-bottom: min(
var(--section-margin-block-mobile),
var(--section-gap-bottom, calc(var(--gap, 8px) * var(--section-gap, 2)))
);
}
@media (min-width: 900px) {
.newsletter-with-image {
background-image: var(--desktop-image);
background-position: var(--desktop-focal-points);
height: var(--section-height-desk, auto);
}
}
@media (min-width: 1200px) {
.newsletter-with-image {
margin-top: var(
--section-gap-top,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
margin-bottom: var(
--section-gap-bottom,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
}
}
.newsletter-with-image--adapt {
height: calc(100vw / var(--first-slide-ratio, 2.5));
}
@media (min-width: 900px) {
.newsletter-with-image--adapt {
height: calc(100vw / var(--first-slide-ratio-desk, 2.5));
}
}
.newsletter-with-image .newsletter__wrapper {
background-color: rgba(
var(--color-background-rgb),
var(--color-background-opacity, 1)
);
backdrop-filter: blur(var(--color-background-blur, 0));
padding: calc(var(--gap, 8px) * 2.5);
margin: 0 calc(var(--gap, 8px) * 2);
max-width: 80vw;
border-radius: var(--border-radius);
}
@media (min-width: 900px) {
.newsletter-with-image .newsletter__wrapper {
padding: calc(var(--gap, 8px) * 3);
}
}
.background-video {
position: relative;
}
.background-video .hero__overlay {
margin: auto;
background: none;
}
.background-video--og-ratio .wt-video__movie--shopify-video video {
height: auto;
object-fit: contain;
}
.section-background-video .wt-video__movie--shopify-video {
animation: none !important;
transform: none !important;
opacity: 1;
}
.wt-hero-video__sound-toggle {
--video-control-height: 40px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: var(--border-radius-button-video);
backdrop-filter: blur(3px);
color: white;
border: none;
position: absolute;
top: calc(var(--gap, 8px) * 2);
right: calc(var(--gap, 8px) * 2);
z-index: 6;
display: flex;
justify-content: center;
align-items: center;
width: var(--video-control-height);
height: var(--video-control-height);
padding: 0;
transition:
scale 0.2s ease-out,
opacity 0.2s ease-out;
}
.video-reels__container .wt-hero-video__sound-toggle {
display: none;
}
.wt-hero-video__sound-toggle .svg-icon {
width: 20px;
height: 20px;
}
.wt-hero-video__sound-toggle .svg-icon--volume {
display: none;
}
.wt-hero-video__sound-toggle--unmuted .svg-icon--volume {
display: block;
}
.wt-hero-video__sound-toggle--unmuted .svg-icon--volume-muted {
display: none;
}
.hero__pic {
position: relative;
}
.hero__pic .hero__pic-loader {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 280px;
}
@media (min-width: 900px) {
.hero__pic .hero__pic-loader {
height: 480px;
}
}
.hero__pic .hero__img {
object-position: var(--image-object-position);
}
@media (min-width: 900px) {
.hero__pic .hero__img {
object-position: var(--image-object-position-desktop);
}
}
.section-image-banner .hero__overlay {
background: none;
}
.wt-image-banner {
padding-top: var(
--section-gap-top,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
padding-bottom: var(
--section-gap-bottom,
calc(var(--gap, 8px) * var(--section-gap, 2))
);
}
.wt-image-banner--header {
--border-radius: 0;
padding-block: 0;
}
.wt-image-banner .hero__overlay {
background-color: rgba(
var(--text-container-color, transparent),
var(--text-container-opacity, 1)
);
}
.wt-image-banner .hero__overlay__content {
padding: 24px 24px;
border-radius: var(--border-radius);
}
.page-header-image-banner .hero__overlay--top {
padding-top: calc(var(--gap, 8px) * 11);
}
.benefits-product-section {
overflow: hidden;
}
.benefits-product-section .hero__wrapper--full {
padding-inline: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.benefits-product-section .hero__wrapper--full {
padding-inline: calc(var(--gap, 8px) * 3);
}
}
.wt-benefits-product {
position: relative;
overflow: hidden;
min-height: 100svh;
display: flex;
padding: 60px 0;
padding-bottom:100px!important;
}
/* Background image/video: absolutely fills the section (100% width and height,
i.e. the full viewport height), its size is driven by the section itself. */
.wt-benefits-product__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
@media (max-width: 999px) {
.wt-benefits-product {
display: block;
min-height: 0;
padding: 40px 0;
}
.wt-benefits-product__bg {
position: relative;
inset: auto;
width: auto;
height: 42vh;
margin: 0 24px;
border-radius: 20px;
overflow: hidden;
}
.wt-benefits-product__overlay {
position: relative;
margin-top: 32px;
}
.wt-benefits-product__container {
padding-inline: 24px;
}
.wt-benefits-product .headline__title {
color: #151515;
}
.wt-benefits-product__grid {
gap: 48px;
}
.wt-benefits-product__col {
gap: 40px;
}
}
.wt-benefits-product__img--mobile,
.wt-benefits-product__img--desktop,
.wt-benefits-product__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.wt-benefits-product__img--desktop {
display: none;
}
/* Heading, columns and button: in normal flow, above the background image */
.wt-benefits-product__overlay {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
}
/* Heading: pinned near the top, sized to its own content only -
it does not have to share height with the benefit blocks below it */
.wt-benefits-product__heading-container {
flex: 0 0 auto;
width: 100%;
}
/* Body: benefit columns + button, vertically centered in the remaining space */
.wt-benefits-product__body {
display: flex;
align-items: center;
width: 100%;
}
.wt-benefits-product__container {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
@media (min-width: 1000px) {
.wt-benefits-product__container {
padding-inline: clamp(20px, calc(-30px + 5vw), 40px);
}
}
.wt-benefits-product .headline__title {
text-align: center;
font-family: var(--font-headline);
font-size: calc(24px * var(--font-icon-headline-scale, 1));
margin-bottom: 48px;
color: var(--color-custom-text);
}
.wt-benefits-product__grid {
display: flex;
flex-direction: column;
gap: 32px;
}
.wt-benefits-product__col {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.wt-benefits-product__col--left {
text-align: center;
align-items: center;
}
.wt-benefits-product__col--right {
text-align: center;
align-items: center;
}
.wt-benefits-product__item {
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
}
.wt-benefits-product__item-heading {
font-family: var(--font-headline);
font-size: calc(20px * var(--benefit-heading-scale, 1));
font-weight: 300;
margin-top: 0;
margin-bottom: 8px;
color: #000;
line-height: 1.2;
}
.wt-benefits-product__item-text {
font-family: var(--font-base);
font-size: calc(var(--font-base-size) * var(--benefit-text-scale, 1));
line-height: 1.5;
color: #000;
opacity: 0.85;
}
.wt-benefits-product__btn-wrapper {
margin-top: 32px;
display: flex;
justify-content: center;
width: 100%;
}
.wt-benefits-product__btn {
font-size: calc(var(--font-button-size) * var(--font-button-scale, 1));
font-family: var(--font-button);
font-style: var(--font-button-style);
font-weight: var(--font-button-weight);
text-transform: var(--font-button-transform, none);
letter-spacing: var(--font-button-letter-spacing, normal);
padding: 12px 32px;
cursor: pointer;
display: inline-block;
text-decoration: none;
border-radius: var(--border-radius-button);
width: fit-content;
min-width: 160px;
text-align: center;
}
@media (min-width: 750px) and (max-width: 1400px) {
body.template-index .wt-benefits-product__btn {
font-size: calc(var(--font-button-size) * var(--font-button-scale-desk, 1));
}
}
@media (min-width: 1451px) {
body.template-index .wt-benefits-product__btn {
font-size: var(--font-button-size);
}
}
@media (min-width: 1000px) {
.wt-benefits-product {
padding: clamp(64px, calc(-16px + 8vw), 96px) 0 clamp(70px, calc(-55px + 12.5vw), 120px);
}
.wt-benefits-product .headline__title {
margin: clamp(36px, calc(-49px + 8.5vw), 70px) 0;
}
.wt-benefits-product__img--mobile {
display: none;
}
.wt-benefits-product__img--desktop {
display: block;
}
.wt-benefits-product__grid {
flex-direction: row;
justify-content: space-between;
gap: clamp(20px, calc(-40px + 6vw), 44px);
}
.wt-benefits-product__col {
flex: 0 1 clamp(260px, calc(-90px + 35vw), 400px);
width: auto;
}
.wt-benefits-product__col--left {
text-align: left;
align-items: flex-start;
gap: clamp(50px, calc(-75px + 12.5vw), 100px);
min-width: 0;
}
.wt-benefits-product__col--right {
text-align: right;
align-items: flex-end;
gap: clamp(50px, calc(-75px + 12.5vw), 100px);
min-width: 0;
}
.wt-benefits-product__item {
align-items: stretch;
max-width: none;
width: 100%;
min-width: 0;
}
.wt-benefits-product__item-heading {
margin-bottom: clamp(8px, calc(3px + 0.5vw), 10px);
}
}
/* Font-size picker (size_heading/size_text) range: applies from 750px up to
1450px only. Below 750px the mobile scale (base rule above) governs;
above 1450px the original fixed design shows, ignoring the picker. */
@media (min-width: 750px) and (max-width: 1400px) {
body.template-index .wt-benefits-product .headline__title {
font-size: calc(clamp(32px, calc(-0.5px + 3.25vw), 45px) * var(--font-icon-headline-scale-desk, 1));
}
body.template-index .wt-benefits-product__item-heading {
font-size: calc(clamp(24px, calc(9px + 1.5vw), 30px) * var(--benefit-heading-scale-desk, 1));
}
body.template-index .wt-benefits-product__item-text {
font-size: calc(clamp(19px, calc(6.5px + 1.25vw), 24px) * var(--benefit-text-scale-desk, 1));
}
}
@media (min-width: 1451px) {
body.template-index .wt-benefits-product .headline__title {
font-size: clamp(32px, calc(-0.5px + 3.25vw), 45px);
}
body.template-index .wt-benefits-product__item-heading {
font-size: clamp(24px, calc(9px + 1.5vw), 30px);
}
body.template-index .wt-benefits-product__item-text {
font-size: clamp(19px, calc(6.5px + 1.25vw), 24px);
}
}
/* Below 1400px the columns are narrower, so their content can run taller than
100svh; drop the viewport-height floor so the section hugs its content and
the bottom padding above always stays visible instead of getting squeezed. */
@media (min-width: 1000px) and (max-width: 1399px) {
.wt-benefits-product {
min-height: 0;
}
}
.wt-before-after__container {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 900px) {
.wt-before-after__container {
width: var(--desktop-percentage-image-width, 50%);
flex-direction: row;
gap: 48px;
flex-grow: 1;
flex-shrink: 0;
}
}
.wt-before-after__slider {
display: flex;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.wt-before-after__slider .main-slider {
overflow: hidden;
}
.wt-before-after__slider .thumbnail-slider {
overflow: hidden;
width: 70%;
margin: auto;
}
.wt-before-after__thumbnail-slider {
--swiper-navigation-size: 24px;
--swiper-navigation-color: var(--color-custom-text, var(--color-body-text));
position: relative;
max-width: 340px;
margin: auto;
margin-top: 16px;
}
.wt-before-after__thumbnail-slider .swiper-wrapper:not(:has(> *:nth-child(3))) {
justify-content: center;
}
.wt-before-after__thumbnail-img {
width: 60px;
height: 60px;
margin: auto;
}
.wt-before-after__thumbnail-img img,
.wt-before-after__thumbnail-img svg {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 100%;
box-sizing: border-box;
}
.swiper-slide-thumb-active .wt-before-after__thumbnail-img img,
.swiper-slide-thumb-active .wt-before-after__thumbnail-img svg {
border: 1px solid #000000;
}
.wt-before-after__img-container {
position: relative;
height: 100%;
}
.wt-before-after__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50%;
height: var(--section-height, auto);
}
@media (min-width: 900px) {
.wt-before-after__img {
height: var(--section-height-desk, auto);
}
}
.wt-before-after__img-before-badge,
.wt-before-after__img-after-badge {
position: absolute;
padding: 4px 8px;
color: var(--color-body-text);
background-color: var(--color-background);
line-height: 1;
border-radius: var(--border-radius-button);
}
.wt-before-after__img-after-badge {
bottom: 16px;
right: 16px;
}
.wt-before-after__img-before-badge {
bottom: 20px;
left: 16px;
}
.wt-before-after__benefits {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
color: var(--color-custom-text);
}
@media (min-width: 900px) {
.wt-before-after__benefits {
width: 50%;
justify-content: center;
}
}
.hero__wrapper--full .wt-before-after__benefits {
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 900px) {
.hero__wrapper--full .wt-before-after__benefits {
padding-left: 0;
}
}
@media (max-width: 899px) {
.wt-before-after__benefits .hero__title {
text-align: center;
}
}
.wt-before-after__benefit {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 16px;
}
.wt-before-after__benefit-image {
width: 40px;
height: auto;
flex-shrink: 0;
}
.wt-before-after__benefit-image img,
.wt-before-after__benefit-image svg {
width: 100%;
height: auto;
}
.wt-before-after__handle {
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
border-radius: 50%;
width: 50px;
height: 50px;
}
.wt-before-after__handle svg {
fill: #000000;
}
.wt-before-after nh-before-after {
display: flex;
height: 100%;
}
.wt-before-after img-comparison-slider {
--divider-width: 4px;
--divider-color: #ffffff;
--default-handle-color: #ffffff;
height: 100%;
width: 100%;
}
.wt-before-after img-comparison-slider:focus,
.wt-before-after img-comparison-slider *:focus-visible:focus,
.wt-before-after img-comparison-slider:focus-visible,
.wt-before-after img-comparison-slider *:focus-visible:focus-visible {
--outline-color: transparent;
--color-custom-text: transparent;
outline: none;
}
.wt-before-after img-comparison-slider [slot="first"],
.wt-before-after img-comparison-slider [slot="second"] {
height: 100%;
}
.wt-before-after.hero__wrapper--full img-comparison-slider,
.wt-before-after.hero__wrapper--full .wt-before-after__slider .main-slider {
border-radius: 0;
}
@media (min-width: 900px) {
.wt-before-after[data-height="adapt_to_content"] .second {
display: block;
height: 100%;
}
.wt-before-after[data-height="adapt_to_content"] img,
.wt-before-after[data-height="adapt_to_content"] svg {
height: 100%;
}
.wt-before-after[data-height="adapt_to_content"] img-comparison-slider {
display: flex;
}
.wt-before-after[data-height="adapt_to_content"]
img-comparison-slider
[slot="second"] {
display: block;
}
}
/* notification popup */
.not-pu-section {
position: fixed;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
z-index: 1999999;
width: 90%;
max-width: var(--max-width, 450px);
}
@media (min-width: 1200px) {
.not-pu-section {
top: var(--top, inital);
bottom: var(--bottom, inital);
left: var(--left, inital);
right: var(--right, inital);
transform: translate(var(--translateX, 0), var(--translateY, 0));
}
}
.not-pu-section .headline {
padding: 0;
margin-top: 8px;
}
.not-pu-section .headline__title {
padding: 0;
}
.not-pu-section .newsletter__text h1 {
margin-top: 16px;
}
.not-pu-section .newsletter--popup {
border-radius: var(--border-radius);
overflow: hidden;
}
.not-pu-section .newsletter--border {
border-color: var(
--color-input-border,
var(--color-button-secondary-border)
);
border-width: 1px;
border-style: solid;
}
.not-pu-section .newsletter--shadow {
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.not-pu-section .newsletter__container {
width: 100%;
}
.not-pu-section .newsletter__image {
display: flex;
width: 100%;
height: auto;
}
.not-pu-section .newsletter__image img {
width: 100%;
height: auto;
aspect-ratio: 8/5;
object-fit: cover;
}
.not-pu-section .newsletter__content {
padding: 0 16px 16px 16px;
position: relative;
text-align: center;
}
@media (min-width: 900px) {
.not-pu-section .newsletter__content {
padding: 0 40px 40px 40px;
}
}
.not-pu-section .newsletter__nav {
width: 100%;
display: flex;
justify-content: end;
padding: 16px;
padding-bottom: 0;
}
@media (min-width: 900px) {
.not-pu-section .newsletter__nav {
padding: 16px 24px;
padding-bottom: 0;
}
}
.not-pu-section .newsletter__nav svg {
color: var(--color-custom-text, var(--color-text));
}
.not-pu-section .newsletter__fieldset {
flex-direction: column;
}
.not-pu-section .newsletter .form__message {
padding-top: 16px;
}
.not-pu-section .newsletter .form__success-field {
background-color: transparent;
border: none;
}
.wt-popup-fade-in {
opacity: 0;
animation: wtPopupFadeIn 0.5s ease-in-out forwards;
}
@keyframes wtPopupFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.test-images--full .hero {
border-radius: 0;
}
@media (max-width: 599px) {
.test-images--full .shoppable-product-card {
border-radius: 0;
}
}
@media (max-width: 599px) {
.test-images--text-container-color .shoppable-product-card {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.test-images .hero__pic-container {
position: relative;
}
@media (min-width: 900px) {
.test-images .hero__pic-container {
width: var(--desktop-percentage-image-width, 50%);
flex-shrink: 1;
}
}
.test-images .hero__pic .hero__img {
height: 100%;
}
@media (min-width: 900px) {
.test-images[data-height="fixed_height"]
.hero
.hero__pic:not(.hero__pic--mobile) {
min-height: var(--section-height-desk, 100%);
}
.test-images[data-height="fixed_height"] .hero .hero__pic .hero__img {
position: absolute;
width: 100%;
height: 100%;
}
}
@media (min-width: 900px) {
.test-images .hero__overlay {
flex: 1;
}
}
@media (min-width: 900px) {
.test-images
.swiper-pagination--autoplay
.swiper-pagination-bullet-active
.svg__circle {
-webkit-animation: progress var(--pagination-animation-time, 5s)
ease-in-out 1 forwards;
-moz-animation: progress var(--pagination-animation-time, 5s) ease-in-out
1 forwards;
-ms-animation: progress var(--pagination-animation-time, 5s) ease-in-out 1
forwards;
animation: progress var(--pagination-animation-time, 5s) ease-in-out 1
forwards;
}
}
.test-images .wt-slider {
background-color: transparent;
}
.test-images .hero__text {
--custom-text-scale: var(--font-text-scale, 1);
--text-size: calc(var(--font-base-size) * var(--custom-text-scale, 1));
font-size: var(--text-size);
}
@media (min-width: 1200px) {
.test-images .hero__text {
--custom-text-scale: var(--font-text-scale-desk);
}
}
.test-images .hero__star-rating {
fill: var(--color-star-rating);
}
.test-images .hero__subheading {
letter-spacing: 0;
}
.test-images .hero__wrapper.wt-slider {
padding: 0;
}
.test-images .shoppable-product-card {
max-width: 400px;
}
@media (min-width: 600px) {
.test-images .shoppable-product-card {
position: absolute;
bottom: calc(var(--gap, 8px) * 2);
left: calc(var(--gap, 8px) * 2);
}
}
@media (max-width: 599px) {
.test-images .shoppable-product-card {
width: 100%;
max-width: 100%;
margin: auto;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: 1px solid var(--color-border);
border-top: none;
box-shadow: none;
}
}
@media (max-width: 599px) and (min-width: 400px) {
.test-images .shoppable-product-card .wt-dot__body {
width: 188px;
padding-right: calc(var(--gap, 8px) * 1);
}
}
.test-images .shoppable-product-card .wt-product__price__final,
.test-images .shoppable-product-card .wt-product__price__compare {
--font-price-size: var(--font-base-size);
}
@media (min-width: 400px) {
.test-images .hero--grid--rev .shoppable-product-card {
left: initial;
right: calc(var(--gap, 8px) * 2);
}
}
.custom-section {
background-color: var(--color-background);
color: var(--color-custom-text);
overflow: hidden;
}
.custom-section__wrapper {
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
gap: var(--flex-gap);
}
@media (min-width: 900px) {
.custom-section__wrapper {
gap: var(--flex-gap-desktop);
}
}
.custom-section__wrapper--row {
flex-direction: row;
justify-content: var(--horizontal-alignment);
align-items: var(--vertical-alignment);
}
.custom-section__wrapper--column {
flex-direction: column;
justify-content: var(--vertical-alignment);
align-items: var(--horizontal-alignment);
}
@media (min-width: 900px) {
.custom-section__wrapper--row-desktop {
flex-direction: row;
justify-content: var(--horizontal-alignment-desktop);
align-items: var(--vertical-alignment-desktop);
}
}
@media (min-width: 900px) {
.custom-section__wrapper--column-desktop {
flex-direction: column;
justify-content: var(--vertical-alignment-desktop);
align-items: var(--horizontal-alignment-desktop);
}
}
.wt-marquee-images .wt-brands__marquee {
height: var(--section-height, auto);
}
@media (min-width: 900px) {
.wt-marquee-images .wt-brands__marquee {
height: var(--section-height-desk, auto);
}
}
[dir="rtl"] .wt-marquee-images .wt-brands__marquee {
flex-direction: row-reverse;
}
.wt-marquee-images .wt-brands__marquee__content {
grid-auto-columns: auto;
height: 100%;
--mgap: var(--marquee-gap, 24px);
}
@media (min-width: 900px) {
.wt-marquee-images .wt-brands__marquee__content {
--mgap: var(--marquee-gap-desk, 24px);
}
}
.wt-marquee-images svg,
.wt-marquee-images img {
height: 100%;
width: auto;
}
.wt-marquee-images .wt-brands__image {
height: 100%;
width: auto;
max-width: none;
max-height: none;
min-height: 0;
}
.wt-marquee-images .wt-brands__item {
width: fit-content;
height: var(--section-height, auto);
}
@media (min-width: 900px) {
.wt-marquee-images .wt-brands__item {
height: var(--section-height-desk, auto);
}
}
.wt-marquee-images .wt-brands__link {
height: 100%;
}
.wt-image-with-scrolling-text {
height: fit-content;
padding-top: var(--section-gap-top);
padding-bottom: var(--section-gap-bottom);
background-color: var(--color-custom-background);
}
@media (min-width: 900px) {
.wt-image-with-scrolling-text {
min-height: 100vh;
margin: auto;
top: 0;
}
}
.wt-image-with-scrolling-text__content {
display: none;
}
@media (min-width: 900px) {
.wt-image-with-scrolling-text__content {
display: block;
}
.wt-image-with-scrolling-text__content--mobile {
display: none;
}
}
.wt-image-with-scrolling-text__content--mobile .image-text {
transition: opacity 0.5s ease-in-out;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
margin-top: 24px;
margin-bottom: 24px;
}
.wt-image-with-scrolling-text__content--mobile .image-text .hero__title {
font-size: calc(var(--font-headline-size) * var(--font-headline-scale, 1));
margin-bottom: 12px;
}
.wt-image-with-scrolling-text__content--mobile .image-text .hero__text {
display: flex;
}
.wt-image-with-scrolling-text__content--mobile .image-text .hero__button--gap {
margin-top: 12px;
width: fit-content;
}
.wt-image-with-scrolling-text__content--mobile .image-text.item--left {
text-align: left;
align-items: flex-start;
}
[dir="rtl"]
.wt-image-with-scrolling-text__content--mobile
.image-text.item--left {
text-align: right;
}
.wt-image-with-scrolling-text__content--mobile .image-text.item--right {
text-align: right;
align-items: flex-end;
}
[dir="rtl"]
.wt-image-with-scrolling-text__content--mobile
.image-text.item--right {
text-align: left;
}
.wt-image-with-scrolling-text__content--mobile img,
.wt-image-with-scrolling-text__content--mobile picture {
aspect-ratio: var(--aspect-ratio);
border-radius: var(--border-radius);
overflow: hidden;
}
.wt-image-with-scrolling-text__content--mobile.item--full-width
.wt-grid-box__container {
padding-left: 0;
padding-right: 0;
}
.wt-image-with-scrolling-text__content--mobile.item--full-width img,
.wt-image-with-scrolling-text__content--mobile.item--full-width picture {
border-radius: 0;
}
.wt-image-with-scrolling-text__item {
width: 100%;
margin: auto;
display: flex;
height: fit-content;
}
.wt-image-with-scrolling-text__item.item--rev {
flex-direction: row-reverse;
}
@media (min-width: 900px) {
.wt-image-with-scrolling-text__item:not(.item--full-width) {
max-width: 1600px;
padding-left: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
}
}
.wt-image-with-scrolling-text__image {
position: sticky;
top: 0;
width: 50%;
height: 100vh;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
.wt-image-with-scrolling-text__image .image-wrapper {
position: relative;
width: 100%;
height: auto;
}
.wt-image-with-scrolling-text__image .image-wrapper.item--full-width {
width: 100%;
}
.wt-image-with-scrolling-text__image .image-wrapper.item--full-width img,
.wt-image-with-scrolling-text__image .image-wrapper.item--full-width picture {
border-radius: 0;
}
.wt-image-with-scrolling-text__image .image-wrapper img,
.wt-image-with-scrolling-text__image .image-wrapper picture {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: auto;
max-height: 100vh;
aspect-ratio: var(--aspect-ratio);
object-fit: cover;
opacity: 0;
transition: opacity 0.6s ease-in-out;
border-radius: var(--border-radius);
overflow: hidden;
}
.wt-image-with-scrolling-text__image .image-wrapper img:first-child,
.wt-image-with-scrolling-text__image .image-wrapper picture:first-child {
opacity: 1;
}
.wt-image-with-scrolling-text__text {
overflow: visible;
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: left;
gap: 35vh;
}
.wt-image-with-scrolling-text__text .image-text {
transition: opacity 0.5s ease-in-out;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
padding-left: calc(var(--gap, 8px) * 10);
padding-right: calc(var(--gap, 8px) * 10);
}
.wt-image-with-scrolling-text__text .image-text.item--left {
text-align: left;
align-items: flex-start;
}
[dir="rtl"] .wt-image-with-scrolling-text__text .image-text.item--left {
text-align: right;
}
.wt-image-with-scrolling-text__text .image-text.item--right {
text-align: right;
align-items: flex-end;
}
[dir="rtl"] .wt-image-with-scrolling-text__text .image-text.item--right {
text-align: left;
}
.wt-image-with-scrolling-text__text .image-text .hero__title {
font-size: calc(
var(--font-headline-size) * var(--font-headline-scale-desk, 1)
);
margin-bottom: 12px;
display: flex;
}
.wt-image-with-scrolling-text__text .image-text .hero__text {
display: flex;
}
.wt-image-with-scrolling-text__text .image-text .hero__button--gap {
margin-top: 16px;
width: fit-content;
}
.wt-image-with-scrolling-text .wt-slider {
background: var(--color-custom-background);
color: var(--color-custom-text);
padding-top: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
padding-bottom: calc(var(--gap, 8px) * 2 + var(--gap, 8px) * 2);
}
.wt-drawer-content__source {
display: none;
}
.wt-drawer-content__drawer {
position: fixed;
background: var(--color-background);
width: 100%;
max-width: 50rem;
height: 100%;
z-index: 50;
transform: translateX(100%);
top: 0;
right: 0;
display: flex;
flex-direction: column;
left: unset;
right: 0;
transform: translateX(100%);
z-index: 120;
display: block;
background-color: var(--color-background);
color: var(--color-text);
overflow: auto;
}
.drawers-animated .wt-drawer-content__drawer {
transition:
transform 0.3s cubic-bezier(0.12, 0.67, 0.53, 1),
opacity 0.3s cubic-bezier(0.12, 0.67, 0.53, 1);
}
[dir="rtl"] .wt-drawer-content__drawer {
left: 0;
right: unset;
transform: translateX(-100%);
}
[dir="rtl"] .wt-drawer-content__drawer--open {
transform: translateX(0);
}
.wt-drawer-content__drawer__inner {
flex-direction: column;
display: flex;
height: 100%;
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body {
position: relative;
padding-top: calc(var(--gap, 8px) * 4);
padding-bottom: 5rem;
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body iframe {
width: 100%;
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body__video {
padding-bottom: calc(var(--gap, 8px) * 2);
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body__video video {
max-width: 100%;
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body__image {
padding-bottom: calc(var(--gap, 8px) * 2);
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body__image img {
border-radius: var(--border-radius);
}
.wt-drawer-content__drawer .wt-drawer-content__drawer__body > *:first-child {
margin-top: 0;
}
.wt-drawer-content__drawer
.wt-drawer-content__drawer__body
> :is(ul, ol):first-child
> li:first-child {
margin-top: 0;
}
.wt-drawer-content__drawer__header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-drawer-content__drawer--open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.wt-drawer-content__drawer__header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4);
}
.wt-drawer-content__drawer__header h3 {
margin: 0;
}
.wt-drawer-content__drawer__close {
display: inline-block;
cursor: pointer;
}
.wt-drawer-content__drawer__body {
padding: calc(var(--gap, 8px) * 2) calc(var(--gap, 8px) * 4) 0;
flex-grow: 100;
overflow: auto;
}
.wt-drawer-content__drawer__close {
border: none;
background: none;
color: inherit;
padding: 0;
align-items: center;
display: flex;
position: relative;
cursor: pointer;
}
.wt-drawer-content__drawer__close:hover {
background: none;
color: var(--color-body-text);
}
.wt-drawer-content__drawer__close::after {
content: "";
position: absolute;
inset: 0;
}
.wt-drawer-content__drawer__close.remove-focus:focus-visible {
outline: none;
box-shadow: none;
}
.wt-drawer-content__drawer__close:focus-visible {
outline: 2px solid var(--color-links-active);
outline-offset: 2px;
}
.wt-drawer-content__drawer__title {
font-family: var(--font-headline);
font-style: var(--font-headline-style);
font-weight: var(--font-headline-weight);
text-transform: var(--font-headline-transform, none);
font-size: var(--font-headline-size);
letter-spacing: var(--font-headline-letter-spacing, normal);
line-height: var(--font-headline-line-height, normal);
font-size: calc(var(--font-base-size) * 1.15);
}
@media (min-width: 1200px) {
.wt-drawer-content__drawer__title {
font-size: calc(var(--font-base-size) * 1.25);
}
}
.wt-drawer-content__overlay {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
position: fixed;
height: 100vh;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transform: scale(0);
z-index: 15;
transition: opacity 0.3s ease-in-out;
}
.wt-drawer-content__overlay-on {
overflow: hidden;
}
.wt-drawer-content__overlay-on .wt-drawer-content__overlay {
opacity: 1;
transform: scale(1);
backdrop-filter: blur(4px);
z-index: 100;
}
.wt-drawer .wt-page-nav-mega__aside shopify-account {
--shopify-account-avatar-size: 28px;
margin-left: -4px;
}
.wt-drawer .wt-page-nav-mega__aside shopify-account::part(button) {
justify-content: flex-start;
}
.wt-drawer .wt-page-nav-mega__login {
display: flex;
justify-content: flex-start;
align-items: center;
gap: calc(var(--gap, 8px) - 4px);
padding: calc(var(--gap, 8px) * 1.2) 0;
color: inherit;
}
.wt-drawer .signed-out-avatar-menu {
display: flex;
align-items: center;
gap: var(--gap, 8px);
}
[data-animate-picures-onhover] .wt-grid-box .hero__img,
[data-animate-picures-onhover] .wt-multicol__section .hero__img,
[data-animate-picures-onhover] .wt-mosaic .hero__img,
[data-animate-picures-onhover] .wt-blog .hero__img {
transition: transform var(--onhover-picture-duration, 5s)
cubic-bezier(0.24, 0.47, 0.46, 0.93);
}
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
[data-animate-picures-onhover] .wt-grid-box .hero:hover .hero__img,
[data-animate-picures-onhover] .wt-multicol__section .hero:hover .hero__img,
[data-animate-picures-onhover] .wt-mosaic .hero:hover .hero__img,
[data-animate-picures-onhover] .wt-blog .hero:hover .hero__img {
transform: scale(var(--onhover-picture-scale, 1.1));
}
}
[data-animate-picures-onhover] .grid-banner img {
transition: transform var(--onhover-picture-duration, 5s)
cubic-bezier(0.24, 0.47, 0.46, 0.93);
}
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
[data-animate-picures-onhover] .grid-banner:hover img {
transform: scale(var(--onhover-picture-scale, 1.1));
}
}
.shopify_subscriptions_app__title {
font-size: 2rem;
font-family: var(--font-headline);
font-weight: var(--font-headline-weight);
font-style: var(--font-headline-style);
letter-spacing: var(--font-headline-letter-spacing);
text-transform: var(--font-headline-transform, initial);
line-height: 1.2;
margin-block: calc(var(--gap, 8px) * 1) !important;
}
@media (max-width: 1199px) {
.shopify_subscriptions_app__title {
font-size: 1.6rem;
}
}
.shopify_subscriptions_app_block_label label {
display: inline-flex;
gap: calc(var(--gap, 8px) * 1);
align-items: center;
padding-block: calc(var(--gap, 8px) * 0.5);
}
.shopify_subscriptions_app_block_label label [type="radio"] {
width: calc(var(--gap, 8px) * 2);
height: calc(var(--gap, 8px) * 2);
}
.rte .shopify_subscriptions_app_block_label_children ul {
border: 0;
margin: 0;
padding: 0;
list-style: none;
background: none;
}
.rte .shopify_subscriptions_app_block_label_children ul li {
margin-block: 0.25em;
}
.rte .shopify_subscriptions_app_block_label_children ul li label {
margin: 0 !important;
}
.rte .shopify_subscriptions_app_policy {
margin-top: 0.5em;
}
/*# sourceMappingURL=main.css.map */
.wt-cart__subtotal__value {
font-size: calc(16px * 1.4);
font-family: var(--font-price);
font-style: var(--font-price-style);
font-weight: var(--font-price-weight);
text-transform: var(--font-price-transform, none);
letter-spacing: var(--font-price-letter-spacing, normal);
}
.wt-quote-slider {
padding-top: var(--section-gap-top, 0px);
padding-bottom: var(--section-gap-bottom, 0px);
color: var(--color-custom-text);
}
.wt-quote-slider--bg {
background-color: rgba(
var(--color-overlay-rgb),
var(--color-overlay-opacity, 1)
);
}
.wt-quote-slider__inner {
max-width: var(--site-max-width);
margin-left: auto;
margin-right: auto;
padding-left: calc(var(--gap, 8px) * 2);
padding-right: calc(var(--gap, 8px) * 2);
}
@media (min-width: 1200px) {
.wt-quote-slider__inner {
padding-left: calc(calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2));
padding-right: calc(
calc(var(--gap, 8px) * 2) + calc(var(--gap, 8px) * 2)
);
}
}
.wt-quote-slider__slide {
display: grid;
grid-template-columns: 1fr;
row-gap: calc(var(--gap, 8px) * 3);
align-items: start;
}
@media (min-width: 750px) {
.wt-quote-slider__slide {
grid-template-columns: var(--quote-slider-cols);
column-gap: clamp(2rem, 5vw, 4.5rem);
}
}
.wt-quote-slider__meta {
display: flex;
flex-direction: column;
gap: calc(var(--gap, 8px) * 1);
}
.wt-quote-slider__author {
font-family: var(--font-base);
font-size: 1rem;
font-weight: 600;
margin: 0;
color: inherit;
}
.wt-quote-slider__stars {
font-size: 0.9rem;
letter-spacing: 0.15em;
color: inherit;
}
.wt-quote-slider__quote {
font-family: var(--font-headline);
font-weight: 400;
font-style: normal;
font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
line-height: 1.35;
color: inherit;
}
.wt-quote-slider__quote p {
margin: 0;
}
.wt-quote-slider__nav {
display: grid;
grid-template-columns: 1fr;
margin-top: calc(var(--gap, 8px) * 3);
}
@media (min-width: 750px) {
.wt-quote-slider__nav {
grid-template-columns: var(--quote-slider-cols);
}
}
.wt-quote-slider__nav-buttons {
grid-column: 1;
display: flex;
align-items: center;
gap: calc(var(--gap, 8px) * 2);
}
@media (min-width: 750px) {
.wt-quote-slider__nav-buttons {
grid-column: 2;
}
}
.wt-quote-slider__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
cursor: pointer;
color: inherit;
transition: opacity 0.2s ease;
}
.wt-quote-slider__nav-btn:hover {
opacity: 0.6;
}
.wt-quote-slider__nav-icon {
width: 1.1rem;
height: 1.1rem;
fill: currentColor;
}