html .yotpo {
outline: none !important
}
html .yotpo a:hover {
color: inherit !important;
text-decoration: underline !important
}
html .yotpo .yotpo-review .yotpo-read-more,html .yotpo .yotpo-comment .yotpo-read-more,html .yotpo .yotpo-question .yotpo-read-more,html .yotpo .yotpo-onsite-upload .yotpo-read-more {
color: var(--cr-coral) !important
}
html .yotpo .yotpo-review .yotpo-header .yotpo-header-element .y-label.yotpo-user-name,html .yotpo .yotpo-comment .yotpo-header .yotpo-header-element .y-label.yotpo-user-name,html .yotpo .yotpo-question .yotpo-header .yotpo-header-element .y-label.yotpo-user-name,html .yotpo .yotpo-onsite-upload .yotpo-header .yotpo-header-element .y-label.yotpo-user-name {
color: var(--cr-black) !important
}
html .yotpo .yotpo-default-button,html .yotpo .yotpo-default-button:hover,html .yotpo input[type='button'].yotpo-default-button,html .yotpo input[type='button'].yotpo-default-button:hover,html .yotpo .yotpo-default-button.primary-color-btn,html .yotpo .yotpo-default-button.primary-color-btn:hover,html .yotpo input[type='button'].primary-color-btn,html .yotpo input[type='button'].primary-color-btn:hover,html .yotpo .yotpo-default-button.yotpo-disabled,html .yotpo .yotpo-default-button.yotpo-disabled:hover,html .yotpo input[type='button'].primary-color-btn.yotpo-disabled,html .yotpo input[type='button'].primary-color-btn.yotpo-disabled:hover {
position: relative;
display: inline-block !important;
padding: 0 30px !important;
overflow: hidden;
white-space: nowrap;
text-transform: none;
font: var(--t-h-4) !important;
height: 60px !important;
line-height: 58px !important;
text-align: center;
color: var(--cr-black) !important;
background-color: var(--cr-white) !important;
border: 1px solid var(--cr-silver);
box-shadow: none;
outline: none;
cursor: pointer;
-o-user-select: none;
user-select: none;
border-radius: 30px;
transition: background 0.6s, color 0.6s, box-shadow 0.6s, border 0.6s
}
html .yotpo .yotpo-default-button *,html .yotpo .yotpo-default-button:hover *,html .yotpo input[type='button'].yotpo-default-button *,html .yotpo input[type='button'].yotpo-default-button:hover *,html .yotpo .yotpo-default-button.primary-color-btn *,html .yotpo .yotpo-default-button.primary-color-btn:hover *,html .yotpo input[type='button'].primary-color-btn *,html .yotpo input[type='button'].primary-color-btn:hover *,html .yotpo .yotpo-default-button.yotpo-disabled *,html .yotpo .yotpo-default-button.yotpo-disabled:hover *,html .yotpo input[type='button'].primary-color-btn.yotpo-disabled *,html .yotpo input[type='button'].primary-color-btn.yotpo-disabled:hover * {
color: var(--cr-black)
}
html .yotpo .yotpo-default-button::first-letter,html .yotpo input[type='button'].yotpo-default-button::first-letter,html .yotpo .yotpo-default-button.primary-color-btn::first-letter,html .yotpo input[type='button'].primary-color-btn::first-letter,html .yotpo .yotpo-default-button.yotpo-disabled::first-letter,html .yotpo input[type='button'].primary-color-btn.yotpo-disabled::first-letter {
text-transform: uppercase
}
html .yotpo .yotpo-default-button.write-question-button,html .yotpo input[type='button'].yotpo-default-button.write-question-button,html .yotpo .yotpo-default-button.primary-color-btn.write-question-button,html .yotpo input[type='button'].primary-color-btn.write-question-button,html .yotpo .yotpo-default-button.yotpo-disabled.write-question-button,html .yotpo input[type='button'].primary-color-btn.yotpo-disabled.write-question-button {
display: none !important
}
html .yotpo .yotpo-icon.yotpo-icon-star,html .yotpo .yotpo-icon.yotpo-icon-half-star,html .yotpo .yotpo-icon.yotpo-icon-empty-star {
display: inline-block;
width: 12px !important;
height: 12px !important;
font-size: 0 !important;
margin: 0 8px 0 0 !important;
background: center/contain no-repeat !important
}
html .yotpo .yotpo-icon.yotpo-icon-star {
background-image: url(../assets/svg-star-blue.svg) !important
}
html .yotpo .yotpo-icon.yotpo-icon-half-star {
background-image: url(../assets/svg-star-blue-half.svg) !important
}
html .yotpo .yotpo-icon.yotpo-icon-empty-star {
background-image: url(../assets/svg-star-silver.svg) !important
}
html .yotpo .yotpo-header-title {
font: var(--t-h-3);
text-transform: lowercase
}
html .yotpo .yotpo-header-title::first-letter {
text-transform: uppercase
}
html .yotpo.yotpo-main-widget * {
font: var(--t-b-2);
color: var(--cr-black)
}
html .yotpo.yotpo-main-widget .promoted-products-box,html .yotpo.yotpo-main-widget .yotpo-label,html .yotpo.yotpo-main-widget .yotpo-form-buttons-wrapper,html .yotpo.yotpo-main-widget .yotpo-messages ~ .yotpo-nav.reviews {
display: none !important
}
html .yotpo.yotpo-main-widget .yotpo-first-review {
display: none;
margin-top: 0 !important
}
html .yotpo.yotpo-main-widget .write-question-button {
display: none !important
}
html .yotpo.yotpo-main-widget .write-review-button .yotpo-icon-write {
display: none
}
html .yotpo.yotpo-main-widget .write-review-button .yotpo-icon-button-text {
display: inline-block !important;
font: var(--t-h-4) !important;
color: var(--cr-black) !important
}
html .yotpo.yotpo-main-widget .write-review-button .yotpo-icon-button-text::first-letter {
text-transform: uppercase
}
html .yotpo.yotpo-main-widget .yotpo-label ~ .yotpo-display-wrapper {
text-align: center;
margin-bottom: var(--s-4)
}
html .yotpo.yotpo-main-widget .yotpo-label ~ .yotpo-display-wrapper .yotpo-regular-box {
padding: 0
}
html .yotpo.yotpo-main-widget .yotpo-label ~ .yotpo-display-wrapper .yotpo-stars-and-sum-reviews {
display: none
}
html .yotpo.yotpo-main-widget .yotpo-label ~ .yotpo-display-wrapper .write-review-button {
position: relative;
top: unset !important;
margin: auto
}
html .yotpo.yotpo-main-widget .yotpo-nav {
position: relative;
padding: 0
}
html .yotpo.yotpo-main-widget .yotpo-nav>.yotpo-icon-btn-big,html .yotpo.yotpo-main-widget .yotpo-nav>.yotpo-dropdown-wrapper.mobile-collapse,html .yotpo.yotpo-main-widget .yotpo-nav>.yotpo-clr {
display: none !important
}
html .yotpo.yotpo-main-widget .yotpo-nav ul {
float: none
}
html .yotpo.yotpo-main-widget .yotpo-nav ul li {
float: none;
text-transform: uppercase;
letter-spacing: 0.05em;
font: var(--t-link) !important
}
html .yotpo.yotpo-main-widget .yotpo-nav ul li .yotpo-nav-wrapper {
padding: 0;
border-bottom: 0 !important
}
html .yotpo.yotpo-main-widget .yotpo-nav .yotpo-nav-dropdown {
float: none;
text-transform: uppercase;
letter-spacing: 0.03em;
font: var(--t-links) !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper,html .yotpo.yotpo-main-widget .yotpo-thank-you {
padding: var(--s-4);
background-color: var(--cr-subtle);
border: none !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper .write-review,html .yotpo.yotpo-main-widget .yotpo-thank-you .write-review {
padding: 0 !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-header-title,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-header-title {
font: var(--t-h-3) !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-mandatory-explain,html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-mandatory-mark,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-mandatory-explain,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-mandatory-mark {
display: none
}
html .yotpo.yotpo-main-widget .write-review-wrapper .y-label:not(.yotpo-header-title),html .yotpo.yotpo-main-widget .yotpo-thank-you .y-label:not(.yotpo-header-title) {
text-transform: uppercase;
letter-spacing: 0.1em;
font: var(--t-l-1);
color: var(--cr-black)
}
html .yotpo.yotpo-main-widget .write-review-wrapper .stars-wrapper .yotpo-icon,html .yotpo.yotpo-main-widget .yotpo-thank-you .stars-wrapper .yotpo-icon {
cursor: pointer
}
html .yotpo.yotpo-main-widget .write-review-wrapper .y-input,html .yotpo.yotpo-main-widget .yotpo-thank-you .y-input {
width: 100%;
margin: var(--s-1) 0 var(--s-3);
text-overflow: ellipsis;
overflow: hidden;
border: none;
outline: none;
padding: 0;
font: var(--t-b-1);
color: var(--cr-black);
border-bottom: 1px solid var(--cr-silver);
transition: 0.2s
}
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-thankyou-header .yotpo-icon,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-thankyou-header .yotpo-icon {
display: none !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-thankyou-header span,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-thankyou-header span {
font: var(--t-h-3) !important;
color: var(--cr-black) !important;
text-transform: unset !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-thankyou-content,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-thankyou-content {
margin: 0 !important
}
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-thankyou-content span,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-thankyou-content span {
font: var(--t-b-1)
}
html .yotpo.yotpo-main-widget .write-review-wrapper .socialize,html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-or,html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-icon-btn,html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-preloader-wrapper,html .yotpo.yotpo-main-widget .yotpo-thank-you .socialize,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-or,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-icon-btn,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-preloader-wrapper {
display: none !important
}
@media screen and (max-width: 600px) {
html .yotpo.yotpo-main-widget .write-review-wrapper .yotpo-review,html .yotpo.yotpo-main-widget .yotpo-thank-you .yotpo-review {
padding:var(--s-3) var(--s-contain)
}
}
html .yotpo.yotpo-main-widget .yotpo-regular-box {
margin: auto;
border-top: 1px solid var(--cr-silver)
}
html .yotpo.yotpo-main-widget .yotpo-review {
display: flex;
gap: var(--s-4);
padding: var(--s-4) 0
}
html .yotpo.yotpo-main-widget .yotpo-review:last-of-type {
padding-bottom: 0
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header {
width: 100%;
max-width: 260px
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header>* {
display: block;
margin: 0 0 var(--s-2)
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-icon-profile,html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-tool-tip {
display: none !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-review-stars {
margin-top: 0
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-header-actions {
float: none !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-user-name,html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .label-with-tooltip {
display: block;
margin: 0 0 var(--s-2);
font: var(--t-h-4);
float: none !important;
display: inline-block !important;
color: var(--cr-black) !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-header-element .label-with-tooltip {
vertical-align: -3px;
display: none !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-user-title,html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-review-date {
text-transform: uppercase;
letter-spacing: 0.03em;
font: var(--t-caption) !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-user-related-fields .yotpo-user-field .yotpo-user-field-description {
font-style: normal !important;
color: var(--cr-eclipse)
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-user-related-fields .yotpo-user-field .yotpo-user-field-answer {
color: var(--cr-subdued)
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header .yotpo-header-element .y-label.yotpo-review-date {
float: none
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main {
display: inline-block;
flex: 1;
margin: 0 !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main>* {
max-width: 500px
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .content-title {
font: var(--t-s-3) !important;
color: var(--cr-black) !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .content-review,html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .rest-content-collapsed,html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .yotpo-read-more {
font: var(--t-b-1);
color: var(--cr-black) !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .yotpo-read-more {
color: var(--cr-kelp-dark)
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .yotpo-product-related-wrapper {
padding: 0 !important;
background-color: transparent !important
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-footer {
display: none
}
@media screen and (max-width: 900px) {
html .yotpo.yotpo-main-widget .yotpo-review {
display:block
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-header {
width: 100%;
max-width: 100%;
margin-bottom: var(--s-3)
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main {
display: block;
flex: unset
}
}
@media screen and (max-width: 600px) {
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-review {
padding:var(--s-3) 0
}
}
html .yotpo.yotpo-main-widget .yotpo-pager {
margin: var(--s-section-half) auto 0 !important
}
html .yotpo.yotpo-main-widget .yotpo-pager [role='menuitem'] {
display: none !important
}
html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_previous,html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_next {
display: inline-block;
width: var(--s-4) !important;
height: var(--s-3);
margin: 0 var(--s-2) !important;
background: center/contain no-repeat !important;
transition: 0.3s
}
html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_previous.yotpo-disabled,html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_next.yotpo-disabled {
opacity: 0.3 !important
}
html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_previous:before,html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_next:before {
display: none !important
}
html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_previous.yotpo_previous,html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_next.yotpo_previous {
background-image: url(../assets/svg-arrow-left-black.svg) !important
}
html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_previous.yotpo_next,html .yotpo.yotpo-main-widget .yotpo-pager .yotpo_next.yotpo_next {
background-image: url(../assets/svg-arrow-right-black.svg) !important
}
/*! Flickity v2.2.2
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative
}
.flickity-enabled:focus {
outline: none
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%
}
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
user-select: none
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: grab
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing
}
.flickity-button {
position: absolute;
background: rgba(255,255,255,0.75);
border: none;
color: #333
}
.flickity-button:hover {
background: white;
cursor: pointer
}
.flickity-button:focus {
outline: none;
box-shadow: 0 0 0 5px var(--cr-subdued)
}
.flickity-button:active {
opacity: 0.6
}
.flickity-button:disabled {
opacity: 0.3;
cursor: auto;
pointer-events: none
}
.flickity-button-icon {
fill: currentColor
}
.flickity-prev-next-button {
top: 50%;
width: 44px;
height: 44px;
border-radius: 50%;
transform: translateY(-50%)
}
.flickity-prev-next-button.previous {
left: 10px
}
.flickity-prev-next-button.next {
right: 10px
}
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px
}
.flickity-prev-next-button .flickity-button-icon {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%
}
.flickity-page-dots {
width: fit-content;
margin: auto;
list-style: none;
text-align: center;
line-height: 0;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
height: 40px;
width: fit-content;
margin: auto;
padding: 16px 20px;
border: 1px solid var(--cr-silver);
border-radius: 30px;
transition: 0.6s
}
.flickity-page-dots li {
position: relative;
display: inline-block;
width: 4px;
height: 4px;
background-color: var(--cr-silver);
border-radius: 100%;
cursor: pointer;
transition: 0.4s
}
.flickity-page-dots li:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 16px;
height: 16px
}
.flickity-page-dots li:not(:last-child) {
margin: 0 var(--s-2) 0 0
}
.flickity-page-dots li.is-selected {
background-color: var(--cr-black)
}
@media (hover: hover) {
.flickity-page-dots:hover {
color:var(--cr-black);
background-color: var(--cr-subtle);
background: var(--cr-gradient);
box-shadow: var(--cr-shadow);
border-color: transparent
}
}
.flickity-rtl .flickity-page-dots {
direction: rtl
}
.flickity-enabled.is-fade .flickity-slider>* {
pointer-events: none;
z-index: 0
}
.flickity-enabled.is-fade .flickity-slider>.is-selected {
pointer-events: auto;
z-index: 1
}
[data-flickity-slider]:not(.flickity-enabled):not(.flickity-disabled) {
overflow: hidden;
white-space: nowrap;
visibility: hidden
}
[data-flickity-slider]:not(.flickity-enabled):not(.flickity-disabled)>* {
display: inline-block;
white-space: normal
}
.cc-window.cc-settings-view[style*='display: block;'],.cc-settings-view.cc-settings-view[style*='display: block;'] {
display: flex !important;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
padding: var(--s-section) 0;
background-color: rgba(0,0,0,0.4)
}
.cc-window.cc-floating,.cc-settings-view.cc-floating {
padding: var(--s-3) !important;
border-radius: 8px
}
.cc-window a:focus,.cc-window button:focus,.cc-window .cc-settings-dialog a:focus,.cc-window .cc-settings-dialog button:focus,.cc-window .cc-settings-dialog input:focus+.cc-checkbox,.cc-settings-view a:focus,.cc-settings-view button:focus,.cc-settings-view .cc-settings-dialog a:focus,.cc-settings-view .cc-settings-dialog button:focus,.cc-settings-view .cc-settings-dialog input:focus+.cc-checkbox {
box-shadow: none !important;
transform: unset !important
}
.cc-window .cc-btn+.cc-btn,.cc-settings-view .cc-btn+.cc-btn {
margin-left: 0
}
.cc-window .cc-btn:not(:last-child),.cc-settings-view .cc-btn:not(:last-child) {
margin-right: 0.5em
}
.cc-window .cc-btn.cc-btn-accept-selected,.cc-window .cc-btn.cc-btn-accept-all,.cc-window .cc-btn.cc-settings,.cc-window .cc-btn.cc-allow,.cc-settings-view .cc-btn.cc-btn-accept-selected,.cc-settings-view .cc-btn.cc-btn-accept-all,.cc-settings-view .cc-btn.cc-settings,.cc-settings-view .cc-btn.cc-allow {
height: var(--s-4);
letter-spacing: 0 !important;
text-transform: none !important;
font: var(--t-h-4) !important;
-webkit-font-smoothing: antialiased;
font-weight: 700;
font-style: normal;
font-display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 16px;
text-decoration: none;
position: relative;
border-radius: var(--s-3);
user-select: none
}
.cc-window .cc-btn.cc-btn-accept-selected,.cc-window .cc-btn.cc-settings,.cc-settings-view .cc-btn.cc-btn-accept-selected,.cc-settings-view .cc-btn.cc-settings {
border: 1px solid var(--cr-silver) !important
}
.cc-window .cc-btn.cc-allow,.cc-settings-view .cc-btn.cc-allow {
color: #ffffff
}
.cc-window.cc-window .cc-message,.cc-settings-view.cc-window .cc-message {
margin-bottom: var(--s-2) !important
}
.cc-window.cc-window .cc-btn:hover,.cc-window.cc-window .cc-btn:focus,.cc-settings-view.cc-window .cc-btn:hover,.cc-settings-view.cc-window .cc-btn:focus {
border-color: transparent !important;
background-color: var(--cr-coral) !important
}
.cc-window .cc-settings-dialog,.cc-settings-view .cc-settings-dialog {
width: calc(100vw - var(--s-contain) * 2) !important;
max-width: 900px !important;
margin: auto !important;
padding: var(--s-4);
border-radius: 8px
}
.cc-window .cc-settings-dialog .cc-btn-close-settings,.cc-settings-view .cc-settings-dialog .cc-btn-close-settings {
position: absolute;
top: var(--s-2);
right: 10px;
margin-right: 0 !important;
padding: 5px
}
.cc-window .cc-settings-dialog label,.cc-settings-view .cc-settings-dialog label {
padding-left: 22px;
font: var(--t-s-3);
line-height: 1
}
.cc-window .cc-settings-dialog .cookie_settings_header,.cc-settings-view .cc-settings-dialog .cookie_settings_header {
font: var(--t-h-3);
margin: 0 var(--s-4) 0 0
}
.cc-window .cc-settings-dialog .cc-consent-verification,.cc-settings-view .cc-settings-dialog .cc-consent-verification {
display: block;
margin: 15px 0 0;
font-size: 14px
}
.cc-window .cc-settings-dialog .cc-consent-verification a,.cc-settings-view .cc-settings-dialog .cc-consent-verification a {
color: inherit;
font-weight: inherit;
text-shadow: unset
}
@media screen and (max-width: 600px) {
.cc-window.cc-floating,.cc-window .cc-settings-dialog,.cc-settings-view.cc-floating,.cc-settings-view .cc-settings-dialog {
padding:var(--s-contain);
border-radius: 0
}
}
html #ReCharge>#content__login,html #ReCharge>#content__customers__request-invite {
padding: calc(var(--s-header) + var(--s-3)) 0 var(--s-section)
}
html #ReCharge>#content__login .rc_header-settings,html #ReCharge>#content__customers__request-invite .rc_header-settings {
height: unset
}
html #ReCharge>#content__login .rc_header-settings:not(:last-child),html #ReCharge>#content__customers__request-invite .rc_header-settings:not(:last-child) {
margin: 0 0 var(--s-section-half)
}
html #ReCharge>#content__login .rc_header-settings__title>*:not(:last-child),html #ReCharge>#content__customers__request-invite .rc_header-settings__title>*:not(:last-child) {
margin: 0 0 var(--s-2)
}
html #ReCharge>#content__login a[href='/account/login?checkout_url=/tools/recurring/login'],html #ReCharge>#content__login a[href='/tools/recurring/get-subscription-access'],html #ReCharge>#content__customers__request-invite a[href='/account/login?checkout_url=/tools/recurring/login'],html #ReCharge>#content__customers__request-invite a[href='/tools/recurring/get-subscription-access'] {
position: relative;
display: inline-block;
padding: 0 var(--s-3);
overflow: hidden;
white-space: nowrap;
font: var(--t-h-4);
height: 60px;
line-height: 58px;
text-align: left;
border: none;
box-shadow: none;
outline: none;
cursor: pointer;
-o-user-select: none;
user-select: none;
border-radius: 30px;
transition: background 0.6s, color 0.6s, box-shadow 0.6s, border 0.6s;
width: fit-content;
color: inherit;
border: 1px solid var(--cr-silver)
}
html #ReCharge>#content__login #customer_tab_content,html #ReCharge>#content__customers__request-invite #customer_tab_content {
margin-top: var(--s-4);
padding: 0
}
html #ReCharge>#content__login#content__customers__request-invite,html #ReCharge>#content__customers__request-invite#content__customers__request-invite {
padding: calc(var(--s-header) + var(--s-4)) 0 var(--s-section)
}
html #ReCharge>#content__login#content__customers__request-invite #customer_tab_content>.row,html #ReCharge>#content__customers__request-invite#content__customers__request-invite #customer_tab_content>.row {
justify-content: center;
margin: 0
}
html #ReCharge>#content__login#content__customers__request-invite #customer_tab_content>.row .col-md-6,html #ReCharge>#content__customers__request-invite#content__customers__request-invite #customer_tab_content>.row .col-md-6 {
padding: 0;
width: calc(100vw - var(--s-contain) * 2);
max-width: 420px
}
html #ReCharge>#content__login#content__customers__request-invite #customer_tab_content>.row .rc_header-settings__title,html #ReCharge>#content__customers__request-invite#content__customers__request-invite #customer_tab_content>.row .rc_header-settings__title {
display: block;
margin: 0 0 var(--s-3)
}
html #ReCharge>#content__login#content__customers__request-invite #customer_tab_content>.row [href*='/account/login'],html #ReCharge>#content__customers__request-invite#content__customers__request-invite #customer_tab_content>.row [href*='/account/login'] {
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 0.1em;
font: var(--t-l-1)
}
html #ReCharge>#content__login#content__customers__request-invite .rc_logo,html #ReCharge>#content__customers__request-invite#content__customers__request-invite .rc_logo {
display: none !important
}
html .recharge-te {
padding: calc(var(--s-announcement) + var(--s-header) + var(--s-3)) 0 var(--s-section)
}
html input[type='radio'].rct_form__radio,html input[type='checkbox'].rct_form__radio {
display: none
}
html .rct_search-bar__container {
background-color: #f7f7f7;
background: var(--cr-gradient);
box-shadow: var(--cr-shadow);
border-radius: 4px
}
html .rct_search-bar__container svg {
display: none
}
html .rct_pagination .rct_pagination__prev:before,html .rct_pagination .rct_pagination__next:before {
font-size: 0;
width: 100%;
height: 100%
}
html .rct_pagination .rct_pagination__prev,html .rct_pagination .rct_pagination__next {
opacity: 0.6;
transition: 0.4s
}
html .rct_pagination .rct_pagination__prev--disabled,html .rct_pagination .rct_pagination__next--disabled {
opacity: 0.2
}
html .rct_pagination .rct_pagination__prev:before:hover,html .rct_pagination .rct_pagination__next:before:hover {
opacity: 1
}
html .rct_pagination .rct_pagination__prev:before {
background: url(../assets/svg-arrow-left-black.svg) center/18px no-repeat
}
html .rct_pagination .rct_pagination__next:before {
background: url(../assets/svg-arrow-right-black.svg) center/18px no-repeat
}
html .rct_sidebar .rct_sidebar__header {
justify-content: left;
padding: 20px;
font: var(--t-h-4)
}
html .rct_sidebar .rct_sidebar__back {
position: relative;
left: -18px
}
html .rct_sidebar .rct_sidebar__close {
width: 40px;
height: 40px;
right: 20px;
border-radius: 100%;
background: var(--cr-white) url(../assets/svg-close-black.svg?1) center/13px no-repeat;
box-shadow: inset 0 0 0 1px transparent,0 var(--s-2) var(--s-3) rgba(0,0,0,0);
border: 1px solid var(--cr-silver)
}
html .rct_sidebar .rct_sidebar__close svg {
display: none
}
html .rct_card {
background-color: #f7f7f7;
background: var(--cr-gradient);
box-shadow: var(--cr-shadow)
}
html .rct_card.rct_card--action:after {
color: var(--cr-silver)
}
html .rct_content>h1,html .rct_content>h3 {
font: var(--t-h-3)
}
html .rct_content .rct_content-header {
margin: 0 0 var(--s-section-half)
}
html .rct_content .rct_content-header__title h3 {
font: var(--t-h-3)
}
html .rct_button {
height: unset;
color: inherit;
line-height: 1;
padding: 0;
box-shadow: 0;
border: 0;
text-decoration: underline
}
html .rct_button.rct_button--primary {
position: relative;
display: inline-block;
width: fit-content;
padding: 0 var(--s-3);
overflow: hidden;
white-space: nowrap;
font: var(--t-h-4);
height: 60px;
line-height: 58px;
text-align: left;
text-decoration: none;
color: var(--cr-black);
background-color: transparent;
border: none;
border: 1px solid var(--cr-silver);
box-shadow: none;
outline: none;
cursor: pointer;
-o-user-select: none;
user-select: none;
border-radius: 30px;
transition: background 0.6s, color 0.6s, box-shadow 0.6s, border 0.6s
}
html .rct_button.rct_button:hover:not(.rct_button--link):not(:disabled),html .rct_button.rct_button--secondary:hover:not(:disabled) {
box-shadow: none !important;
color: inherit !important;
background-color: transparent !important
}
html #v-cal .vcal-date--selected span {
color: var(--cr-black) !important;
background-color: var(--cr-silver) !important
}
html .rct_button.ld-over.running {
background-color: var(--cr-black) !important
}
.comp-email-capture .t-h-3,.comp-email-capture .t-b-1 {
margin: 0 0 var(--s-2)
}
.comp-email-capture .field input[type='text'] ~ label,.comp-email-capture .field input[type='email'] ~ label,.comp-email-capture .field input[type='tel'] ~ label,.comp-email-capture .field input[type='url'] ~ label,.comp-email-capture .field input[type='password'] ~ label,.comp-email-capture .field select ~ label,.comp-email-capture .field textarea ~ label {
color: var(--cr-white)
}
.comp-email-capture [type='submit'].btn-outline {
min-width: 120px
}
.comp-email-capture.is-success>* {
animation: 0.6s fadeOut both;
pointer-events: none
}
.comp-email-capture.is-success:before {
content: 'Thanks for subscribing!';
position: absolute;
width: 90%;
top: 50%;
left: 50%;
font: var(--t-h-3);
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
animation: 0.6s 0.6s fadeIn both
}
@media screen and (max-width: 900px) {
.comp-email-capture .t-h-3 {
margin:0 0 var(--s-2)
}
}
.comp-breadcrumb ul {
list-style: none
}
.comp-breadcrumb ul li {
display: inline-block
}
.comp-breadcrumb ul li:last-child {
color: var(--cr-black)
}
.comp-breadcrumb ul li:not(:last-child)::after {
content: '/';
display: inline-block;
margin: 0 0.5em
}
.comp-accordion .accordion-label {
position: relative;
padding: var(--s-4) var(--s-3) var(--s-4) 0;
cursor: pointer;
border-top: 1px solid var(--cr-silver)
}
.comp-accordion .accordion-label .svg-plus {
position: absolute;
width: 12px;
top: calc(var(--s-4) + 12px);
right: 0;
transition: 0.2s
}
.comp-accordion .accordion-label .svg-plus path {
transform-origin: center;
transition: 0.2s
}
@media (hover: hover) {
.comp-accordion .accordion-label:hover .svg-plus {
color:var(--cr-coral)
}
}
.comp-accordion .accordion-label.t-l-1 {
padding: calc(4px + var(--s-2)) 0 var(--s-2) calc(var(--s-2) + var(--s-3));
line-height: 1
}
.comp-accordion .accordion-label.t-l-1 .svg-plus {
top: calc(var(--s-2) + 1px);
left: var(--s-2);
right: auto;
color: var(--cr-coral)
}
.comp-accordion .accordion-label.t-l-1 ~ .accordion-content .accordion-content-interior {
padding-bottom: var(--s-3)
}
.comp-accordion .accordion-content {
position: relative;
height: 0;
padding: 0 0 1px;
overflow: hidden
}
.comp-accordion .accordion-content .accordion-content-interior {
padding: 1px 0 var(--s-4);
max-width: 600px
}
.comp-accordion:last-child {
border-bottom: 1px solid var(--cr-silver)
}
.comp-accordion.is-active .accordion-label .svg-plus path:first-child {
transform: rotate(90deg)
}
@media screen and (max-width: 900px) {
.comp-accordion .accordion-label {
padding:var(--s-3) var(--s-3) var(--s-3) 0
}
.comp-accordion .accordion-label .svg-plus {
top: calc(var(--s-3) + 7px)
}
.comp-accordion .accordion-content-interior {
padding: 1px 0 var(--s-3)
}
}
@media screen and (max-width: 600px) {
.comp-accordion .accordion-label:not(.t-l-1) {
font-size:20px
}
}
.comp-product-index-hero {
position: relative;
padding: calc(var(--s-header) + var(--s-5)) 0 var(--s-4)
}
.comp-product-index-hero .hero-content {
margin: auto auto 0
}
.comp-page-anchors {
line-height: 0;
white-space: nowrap
}
.comp-page-anchors li {
display: inline-block
}
.comp-page-anchors li:not(:last-child) {
margin: 0 var(--s-3) 0 0
}
.comp-page-anchors li>a {
color: var(--cr-silver);
transition: 0.4s
}
.comp-page-anchors li.is-active>a {
color: var(--cr-black)
}
@media (hover: hover) {
.comp-page-anchors li>a:hover {
color:var(--cr-black)
}
}
@media screen and (max-width: 900px) {
.comp-page-anchors {
width:100vw;
line-height: 1;
margin: 0 calc(0px - var(--s-contain));
padding: var(--s-2) var(--s-contain);
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
}
.pagination-timer {
position: relative;
display: inline-block;
width: var(--s-3);
height: var(--s-3);
margin: -4px 0 0 var(--s-3);
font-size: 0;
border-radius: 50%;
transform: translateZ(0);
box-shadow: inset 0 0 0 1px var(--cr-silver);
transition: 0.6s var(--a-panel);
clip-path: url(#clip-path)
}
.pagination-timer:before {
content: '';
width: 50%;
height: 50%;
background: var(--cr-silver);
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0
}
.pagination-timer:after {
content: '';
display: block;
width: 100%;
height: 100%;
background: var(--cr-coral);
background: linear-gradient(to right, #fa3c16 10%, rgba(250,60,22,0) 42%);
border-radius: 100%
}
.section-hiw-a {
position: relative
}
.section-hiw-a .hiw-header {
margin: calc(var(--s-section) * 1.5) auto;
text-align: center
}
.section-hiw-a .hiw-content .hiw-media {
flex: 1;
margin: 0 var(--s-4) 0 0;
overflow: hidden;
border-radius: var(--s-1)
}
.section-hiw-a .hiw-content .hiw-text {
width: 30%;
max-width: 600px;
text-align: center
}
.section-hiw-a .hiw-content .hiw-text .text-content {
max-width: 430px;
margin: auto
}
.section-hiw-a .hiw-content .hiw-text .text-cta {
margin-top: var(--s-4)
}
.section-hiw-a .hiw-content .hiw-text .text-cta .t-s-3:not(:last-child) {
margin: 0 0 var(--s-3)
}
.section-hiw-a .hiw-content .hiw-text .item {
max-width: 270px;
margin: auto
}
.section-hiw-a .hiw-content .hiw-text .item:not(:last-child) {
margin: 0 auto var(--s-4)
}
.section-hiw-a .hiw-content .hiw-text .item img {
display: block;
max-width: 25px;
margin-left: auto;
margin-right: auto
}
.section-hiw-a .hiw-columns {
margin: var(--s-4) auto;
padding: var(--s-4) 0;
border-top: 1px solid var(--cr-silver);
border-bottom: 1px solid var(--cr-silver)
}
.section-hiw-a .hiw-columns .hiw-columns-header {
display: block;
margin: 0 auto var(--s-4);
text-align: center
}
.section-hiw-a .hiw-columns .hiw-columns-blocks {
justify-content: center
}
.section-hiw-a .hiw-columns .hiw-columns-blocks>* {
width: calc(100% / 4 - var(--s-4) / 4 * 3);
max-width: 260px
}
.section-hiw-a .hiw-columns .hiw-columns-blocks>*:not(:last-child) {
margin: 0 var(--s-4) 0 0
}
.section-hiw-a .hiw-columns .column img {
display: block;
max-width: 180px;
margin: auto
}
.section-hiw-a .hiw-columns .column-text {
margin: var(--s-3) 0 0;
padding: var(--s-3) 0 0;
text-align: center;
border-top: 1px solid var(--cr-silver)
}
@media screen and (max-width: 1120px) {
.section-hiw-a .hiw-header {
margin:var(--s-section) auto
}
.section-hiw-a .hiw-content .hiw-media {
flex: unset;
width: 100%;
margin: 0 0 var(--s-4)
}
.section-hiw-a .hiw-content .hiw-text {
width: 100%;
margin: auto
}
}
@media screen and (max-width: 900px) {
.section-hiw-a .hiw-header br {
display:none
}
.section-hiw-a .hiw-columns .hiw-columns-blocks>* {
width: 100%;
max-width: unset
}
.section-hiw-a .hiw-columns .hiw-columns-blocks>*:not(:last-child) {
margin: 0 0 var(--s-section)
}
.section-hiw-a .hiw-columns .column img {
max-width: unset;
height: 360px !important;
width: auto
}
.section-hiw-a .hiw-columns .column-text {
max-width: 240px;
margin: var(--s-4) auto 0;
padding: var(--s-3) 0 0
}
}
@media screen and (max-width: 600px) {
.section-hiw-a .hiw-columns .column img {
height:260px !important
}
}
.section-hiw-b {
margin: var(--s-section-half) 0
}
.section-hiw-b .hiw-header {
margin: 0 auto var(--s-section-half);
text-align: center
}
.section-hiw-b .hiw-columns {
justify-content: center
}
.section-hiw-b .hiw-columns:not(:last-child) {
margin: 0 auto var(--s-section-half)
}
.section-hiw-b .block {
flex: 1;
max-width: 275px
}
.section-hiw-b .block:not(:last-child) {
margin-right: var(--s-4)
}
.section-hiw-b .block img {
margin: 0 0 var(--s-3)
}
.section-hiw-b .block .t-h-3 {
margin: 0 0 var(--s-1)
}
.section-hiw-b .hiw-footer {
text-align: center
}
.section-hiw-b .hiw-footer .btn-fill {
width: fit-content
}
@media screen and (max-width: 900px) {
.section-hiw-b .hiw-header {
margin-bottom:0
}
.section-hiw-b .hiw-columns {
display: block;
width: 100%
}
.section-hiw-b .hiw-columns:not(:last-child) {
margin-bottom: 0
}
.section-hiw-b .flickity-slider {
padding: var(--s-3) 0
}
.section-hiw-b .block {
flex: unset;
width: calc(100% - (var(--s-3) + var(--s-edge)) * 2);
max-width: 450px;
margin-bottom: var(--s-4);
padding: var(--s-3);
border-radius: var(--s-2);
box-shadow: var(--cr-shadow)
}
.section-hiw-b .block:not(:last-child) {
margin-right: var(--s-2)
}
.section-hiw-b .block p {
font: var(--t-b-2)
}
}
.section-wau {
border-top: 1px solid var(--cr-silver)
}
.section-wau .c {
margin-top: var(--s-section-half);
margin-bottom: var(--s-section-half)
}
.section-wau .overlay-media {
border-radius: var(--s-2);
overflow: hidden
}
.section-wau .overlay-content {
position: relative;
text-align: center;
padding: var(--s-4)
}
.section-wau .wau-header {
margin: var(--s-3) auto var(--s-4);
text-align: center
}
.section-wau .wau-columns {
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
margin-bottom: var(--s-2)
}
.section-wau .wau-columns .svg-wau {
width: 28px;
height: 28px;
color: var(--cr-coral);
margin: 0 auto var(--s-1)
}
.section-wau .wau-columns .t-h-3 {
max-width: 180px;
margin-bottom: var(--s-2)
}
.section-wau .block {
width: 100%
}
.section-wau .block>* {
max-width: 240px;
margin: 0 auto
}
.section-wau .block:not(:first-child) {
border-left: 1px solid var(--cr-white)
}
@media screen and (max-width: 1240px) {
.section-wau .wau-columns {
grid-template-columns:repeat(2, 1fr);
row-gap: var(--s-5)
}
.section-wau .block:nth-child(odd) {
border-left: none
}
.section-wau .block:nth-child(even):not(:first-child)::after {
content: '';
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0;
right: 0;
background-color: var(--cr-white)
}
}
@media screen and (max-width: 900px) {
.section-wau .overlay-content {
padding:var(--s-4) 0
}
.section-wau .wau-header {
margin: 0 auto var(--s-3)
}
.section-wau .wau-columns {
display: block
}
.section-wau .wau-columns .t-h-3 {
max-width: 150px
}
.section-wau .block {
max-width: 240px;
padding: 0 var(--s-3)
}
.section-wau .block:nth-child(odd):not(:first-child) {
border-left: 1px solid var(--cr-white)
}
.section-wau .block:nth-child(even):not(:first-child)::after {
display: none
}
.section-wau .block p {
font: var(--t-b-2)
}
}
.section-press {
background: var(--cr-subdued);
margin-top: -2px;
padding: 64px 0
}
.section-press .press-quotes {
width: 100%
}
.section-press .press-quote {
width: 100%;
text-align: center
}
.section-press .press-quote .c {
display: flex;
justify-content: center;
align-items: center;
max-width: 600px;
margin: 0 auto
}
.section-press .press-quote q {
display: block
}
.section-press .press-logos {
display: flex;
justify-content: center;
margin-top: var(--s-4)
}
.section-press .press-logos:after {
content: 'flickity';
display: none
}
.section-press .press-logo {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 240px;
height: 48px
}
.section-press .press-logo img {
width: auto;
height: 100%;
padding-bottom: var(--s-1);
border-bottom: 3px solid transparent;
pointer-events: none
}
.section-press .press-logo.is-selected img {
border-bottom: 3px solid var(--cr-coral)
}
@media (hover: hover) {
.section-press .press-logo {
cursor:pointer
}
}
@media screen and (min-width: 901px) {
.section-press .press-logos:after {
content:''
}
}
@media screen and (max-width: 900px) {
.section-press .press-logos {
display:block;
width: 100%
}
}
@media screen and (max-width: 600px) {
.section-press .press-logo {
max-width:180px;
height: 36px
}
}
.section-brand-mission {
position: relative;
min-height: calc(var(--s-viewport-height) * 4)
}
.section-brand-mission .brand-mission-interior {
position: sticky;
height: var(--s-viewport-height);
top: 0;
left: 0
}
.section-brand-mission .brand-mission-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden
}
.section-brand-mission .brand-mission-image img {
position: absolute;
min-width: 100%;
top: 0
}
.section-brand-mission .brand-mission-circular {
width: calc(90vh - var(--s-header) - var(--s-4) * 2);
max-width: 600px;
border: 1px solid;
border-radius: 100%;
pointer-events: none
}
.section-brand-mission .brand-mission-circular:after {
content: '';
display: block;
padding-top: 100%
}
@media (max-aspect-ratio: 1 / 1) {
.section-brand-mission .brand-mission-circular {
width:calc(100vw - var(--s-contain) * 2)
}
}
.section-brand-mission .brand-mission-text {
text-align: center
}
.section-brand-mission .brand-mission-text .text-block {
width: 80%;
pointer-events: none
}
.section-brand-mission .brand-mission-text .svg-coral {
display: block;
width: var(--s-4);
margin: 0 auto var(--s-3)
}
.section-brand-mission .brand-mission-cta {
position: absolute;
width: 100%;
bottom: var(--s-4);
right: var(--s-edge);
max-width: 320px;
text-align: right;
line-height: 0
}
@media screen and (max-width: 600px) {
.section-brand-mission {
min-height:calc(var(--s-viewport-height) * 3)
}
.section-brand-mission .brand-mission-image picture {
transform: unset !important
}
.section-brand-mission .brand-mission-text .t-h-2 {
font: var(--t-h-3)
}
.section-brand-mission .brand-mission-text .svg-coral {
width: 40px;
margin: 0 auto 18px
}
}
.section-brand-certifications {
position: relative;
min-height: 300px;
padding: var(--s-section-half) 0
}
.section-brand-certifications .brand-certifications-content {
margin: auto;
text-align: center
}
.section-brand-certifications .brand-certifications-content .t-h-2 {
margin: 0 0 var(--s-section-half)
}
.section-brand-certifications .brand-certifications-icons {
line-height: 0
}
.section-brand-certifications .brand-certifications-icons svg {
display: inline-block;
vertical-align: middle;
height: var(--s-4)
}
.section-brand-certifications .brand-certifications-icons svg[class*='with-text'] {
height: calc(var(--s-4) + var(--s-2) * 2)
}
.section-brand-certifications .brand-certifications-icons svg:not(:last-child) {
margin: 0 var(--s-3) 0 0
}
@media screen and (max-width: 600px) {
.section-brand-certifications {
min-height:300px;
padding: var(--s-section) 0
}
.section-brand-certifications .brand-certifications-icons svg {
height: 40px;
margin: var(--s-2)
}
.section-brand-certifications .brand-certifications-icons svg:not(:last-child) {
margin: var(--s-2)
}
}
.section-image-text-overlay {
position: relative;
margin: var(--s-4) auto;
height: 448px
}
#list-collections .section-image-text-overlay {
margin: 0 auto
}
.section-image-text-overlay .overlay-media {
-webkit-mask-image: -webkit-radial-gradient(white, black);
border-radius: var(--s-2);
overflow: hidden
}
.section-image-text-overlay .overlay-media:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--cr-black);
opacity: 0.15
}
.section-image-text-overlay .overlay-media .video-reframe {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0)
}
.section-image-text-overlay .overlay-content {
position: relative;
margin: auto;
min-height: 100%;
padding: 80px var(--s-contain) var(--s-3);
text-align: center
}
.section-image-text-overlay .overlay-content>* {
max-width: 430px;
margin-left: auto;
margin-right: auto
}
.section-image-text-overlay .overlay-content .overlay-header {
margin-bottom: var(--s-4)
}
.section-image-text-overlay .overlay-blocks {
margin: auto auto 0
}
.section-image-text-overlay .overlay-blocks .svg-checkmark {
width: 16px
}
.section-image-text-overlay .overlay-blocks .pagination-buttons {
margin-top: var(--s-3);
background: rgba(255,255,255,0.04) !important;
border: 1px solid var(--cr-silver) !important;
box-shadow: none !important;
backdrop-filter: blur(var(--s-4))
}
.section-image-text-overlay .overlay-blocks .pagination-buttons button.is-active {
background-color: var(--cr-white)
}
.section-image-text-overlay [data-slide] {
animation: 0.8s fadeIn both
}
.section-image-text-overlay [data-slide]:not(.is-active) {
display: none
}
.section-image-text-overlay.is-transitioning {
pointer-events: none
}
.section-image-text-overlay.is-transitioning [data-slide] {
animation: 0.4s fadeOut both
}
@media screen and (max-width: 900px) {
.section-image-text-overlay .overlay-media .video-reframe {
height:100%;
width: 250% !important
}
}
.section-product-slider {
padding-left: var(--s-edge)
}
.section-product-slider .slider-header {
width: 100%;
max-width: 340px;
padding: 0 var(--s-3);
text-align: left
}
.section-product-slider .slider-content {
flex: 1
}
.section-product-slider .slider-pagination {
margin-top: var(--s-4)
}
.section-product-slider .slider-pagination>* {
position: relative;
display: inline-block;
width: var(--s-4);
height: var(--s-4);
border-radius: 100%;
background: var(--cr-gradient);
box-shadow: var(--cr-shadow)
}
.section-product-slider .slider-pagination>*:not(:last-child) {
margin: 0 var(--s-2) 0 0
}
.section-product-slider .slider-pagination button svg {
width: 16px;
height: 12px;
margin: calc((var(--s-4) - 12px) / 2) auto;
transition: 0.4s
}
@media (hover: hover) {
.section-product-slider .slider-pagination button:hover svg {
color:var(--cr-coral)
}
}
.section-product-slider .slider-pagination .slider-pagination-circular:before,.section-product-slider .slider-pagination .slider-pagination-circular .circular-ring {
content: '';
position: absolute;
display: block;
width: var(--s-3);
height: var(--s-3);
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
border-radius: 100%
}
.section-product-slider .slider-pagination .slider-pagination-circular:before {
border: 1px solid var(--cr-silver)
}
.section-product-slider .slider-pagination .slider-pagination-circular .circular-ring-progress {
transition: 0.2s stroke-dashoffset;
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke: var(--cr-coral)
}
.section-product-slider [data-flickity-slider] .flickity-button {
visibility: hidden
}
.section-product-slider [data-flickity-slider] .flickity-slider {
margin-left: var(--s-3)
}
.section-product-slider .product-card {
display: inline-block;
width: 45vw;
max-width: 580px;
margin: var(--s-3) var(--s-2)
}
@media screen and (max-width: 1300px) {
.section-product-slider .product-card .product-quick-add .quick-add-quantity,.section-product-slider .product-card .product-quick-add .quick-add-dispenser hr:first-child {
display:none
}
}
@media screen and (max-width: 900px) {
.section-product-slider {
padding-left:0
}
.section-product-slider .slider-header {
margin: var(--s-2) auto;
padding: 0 var(--s-edge);
text-align: center
}
.section-product-slider .slider-figure {
display: none
}
.section-product-slider .slider-pagination {
display: none
}
.section-product-slider .slider-content {
flex: unset;
width: 100%
}
.section-product-slider .product-card {
width: calc(100% - var(--s-edge) * 2 - var(--s-3));
margin: var(--s-3) var(--s-1)
}
}
.section-social {
margin: var(--s-4) 0;
text-align: center
}
.section-social .social-header a {
display: inline-block
}
.section-social .social-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 32px;
margin: var(--s-4) auto 0
}
.section-social .block {
width: 100%
}
.section-social .block .social-post {
position: relative;
overflow: hidden;
display: block
}
.section-social .block .social-post::after {
content: '';
display: block;
padding-top: 100%
}
@media screen and (max-width: 900px) {
.section-social .social-columns {
display:block;
width: 100%
}
.section-social .block {
max-width: 400px;
padding: 0 var(--s-2)
}
}
@media screen and (max-width: 600px) {
.section-social .block {
max-width:300px
}
}
.product-card .card-interior {
position: relative;
overflow: hidden;
border-radius: 8px
}
.product-card .card-thumbnail {
position: relative;
overflow: hidden;
border-radius: 8px;
-webkit-transform: translateZ(0)
}
.product-card .card-thumbnail:after {
content: '';
display: block;
padding-top: 58%
}
.product-card .card-title {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding: var(--s-3)
}
.product-card .card-title .t-h-4 {
flex: 1;
margin: -0.35em var(--s-2) 0 0
}
.product-card .card-title .card-badge {
margin: 0 0 0 auto;
padding: 9px 12px 6px;
line-height: 1;
color: var(--cr-coral);
border-radius: 14px
}
.product-card .card-title .card-price {
width: 100%;
display: block;
margin: 3px 0 0
}
.product-card .card-info {
position: absolute;
width: 100%;
height: 20%;
left: 0;
bottom: 0;
padding: 0 var(--s-2);
text-align: center
}
.product-card .product-quick-add {
margin: var(--s-3) auto 0
}
@media screen and (max-width: 600px) {
.product-card .t-s-3 {
font-size:14px
}
.product-card .card-thumbnail:after {
padding-top: 65%
}
.product-card .card-title {
padding: var(--s-2)
}
}
.product-card.is-large {
position: relative
}
@media screen and (min-width: 901px) {
.product-card.is-large .card-thumbnail img ~ img {
display:none
}
.product-card.is-large .card-thumbnail:after {
padding-top: 40%
}
.product-card.is-large .card-info {
height: 24%;
text-align: left
}
.product-card.is-large .product-quick-add {
position: absolute;
margin: 0;
bottom: 12%;
right: var(--s-3);
transform: translateY(50%)
}
}
@media screen and (max-width: 900px) {
.product-card.is-large .card-thumbnail img:first-child {
display:none
}
}
.product-quick-add .purchase-type>*,.product-quick-add .dispenser-option>* {
color: var(--cr-silver);
transition: color 0.4s ease
}
.product-quick-add .purchase-type label,.product-quick-add .dispenser-option label {
flex: 1;
margin: 4px 0 0;
padding: var(--s-2) 0;
cursor: pointer
}
.product-quick-add .purchase-type s,.product-quick-add .dispenser-option s {
color: var(--cr-silver);
margin-right: var(--s-1)
}
.product-quick-add .purchase-type input:checked ~ *,.product-quick-add .dispenser-option input:checked ~ * {
color: var(--cr-kelp-dark)
}
.product-quick-add {
position: relative;
margin: auto;
width: 100%;
max-width: 360px;
outline: none !important
}
.product-quick-add .quick-add-form {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: var(--s-2) var(--s-3) calc(60px + var(--s-2));
opacity: 0;
pointer-events: none;
border-radius: 8px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
transition: 0.4s var(--a-panel);
text-align: left
}
.product-quick-add hr {
margin: var(--s-2) auto;
background-color: var(--cr-subdued)
}
.product-quick-add .quick-add-kit-products-wrapper {
position: absolute;
visibility: hidden;
pointer-events: none
}
.product-quick-add .quick-add-title {
margin: var(--s-2) 0 0
}
.product-quick-add .quick-add-purchase-type .purchase-type input:checked ~ .purchase-frequency .select-trigger .svg-caret-down {
color: var(--cr-coral)
}
.product-quick-add .quick-add-purchase-type .purchase-type-note {
width: 100%;
padding: 0 0 var(--s-2) 22px
}
.product-quick-add .quick-add-purchase-type .purchase-frequency {
width: 100%;
pointer-events: none
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .select-wrapper {
position: relative;
font-size: 13px
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .select-trigger {
position: relative;
align-items: center;
justify-content: space-between;
white-space: nowrap;
width: 100%;
height: 40px;
border-radius: 40px;
border: 1px solid var(--cr-silver);
padding: 6px 14px;
z-index: 20;
cursor: pointer
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .select-trigger span {
display: block;
height: 10px;
line-height: 13px
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .select-trigger .svg-caret-down {
width: 12px;
height: 10px;
margin-left: 6px;
transition: 0.2s
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .custom-options {
position: absolute;
top: 20px;
left: 0;
width: 100%;
border-radius: 8px;
border: 1px solid var(--cr-silver);
overflow: hidden;
transition: 0.4s var(--a-panel);
white-space: nowrap;
pointer-events: none;
padding: 20px 14px 0;
padding-top: 20px;
opacity: 0;
z-index: 10
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .custom-options .custom-option {
transition: 0.2s;
padding: 16px 0;
cursor: pointer
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .custom-options .custom-option:not(:last-child) {
border-bottom: 1px solid var(--cr-subdued)
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .custom-options .custom-option.selected {
color: var(--cr-coral);
pointer-events: none
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .custom-options .custom-option.disabled {
background: var(--cr-silver);
pointer-events: none
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .custom-options .custom-option:hover {
color: var(--cr-coral)
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .select.active .select-trigger .svg-caret-down {
transform: rotate(180deg)
}
.product-quick-add .quick-add-purchase-type .purchase-frequency .select.active .custom-options {
opacity: 1;
pointer-events: auto
}
.product-quick-add .quick-add-quantity {
margin: var(--s-2) 0;
padding-left: 22px
}
.product-quick-add .quick-add-quantity .t-l-1 {
margin: 4px 0 0
}
.product-quick-add .quick-add-quantity .item-quantity {
margin: 0 0 0 auto
}
.product-quick-add .quick-add-dispenser .dispenser-option {
position: relative
}
.product-quick-add .quick-add-dispenser .dispenser-option input {
height: var(--s-3);
width: var(--s-4);
margin: var(--s-2) var(--s-2) 0 0;
border-radius: var(--s-3);
background-color: #f7f7f7;
background: var(--cr-gradient) !important;
border: 1px solid var(--cr-white);
transition: 0.4s;
cursor: pointer
}
.product-quick-add .quick-add-dispenser .dispenser-option label span {
display: block;
text-transform: initial;
letter-spacing: 0
}
.product-quick-add .quick-add-dispenser .dispenser-option .dispenser-option-toggle-dot {
position: absolute;
top: 19px;
width: var(--s-2);
height: var(--s-2);
margin: 0;
left: var(--s-1);
background-color: var(--cr-silver);
border-radius: 100%;
pointer-events: none;
transition: 0.2s
}
.product-quick-add .quick-add-dispenser .dispenser-option .dispenser-price {
padding: var(--s-2) 0
}
.product-quick-add .quick-add-dispenser .dispenser-option input:checked ~ .dispenser-option-toggle-dot {
left: calc(var(--s-3) + var(--s-1));
background: var(--cr-gradient-coral)
}
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.product-quick-add .quick-add-dispenser .dispenser-option input:checked ~ .dispenser-option-toggle-dot {
left:calc(var(--s-3) + 4px)
}
}
}
.product-quick-add .quick-add-footer {
display: flex;
align-items: end;
gap: var(--s-1)
}
.product-quick-add .quick-add-footer .quick-add-thumbnails {
position: relative;
flex: none;
width: 60px;
height: 60px
}
.product-quick-add .quick-add-footer .quick-add-thumbnails .product-thumbnail {
position: absolute;
background-color: var(--cr-white);
opacity: 1;
transition: opacity 0.4s;
width: 100%;
height: 100%
}
.product-quick-add .quick-add-footer .quick-add-thumbnails .product-thumbnail::after {
content: none;
display: block;
padding-top: 100%
}
.product-quick-add .quick-add-footer .quick-add-thumbnails:not(.with-dispenser) .product-thumbnail.is-dispenser {
opacity: 0
}
.product-quick-add:not(.is-active) .quick-add-toggle .toggle-add-to-cart {
display: none
}
.product-quick-add.is-kit .quick-add-dispenser {
position: absolute;
visibility: hidden;
pointer-events: none
}
.product-quick-add.is-active .quick-add-form {
opacity: 1;
pointer-events: auto
}
.product-quick-add.is-active .quick-add-purchase-type .purchase-type input:checked ~ .purchase-frequency {
pointer-events: auto
}
.product-quick-add.is-active .quick-add-toggle .toggle-product-title {
display: none
}
.product-quick-add.is-always-active .quick-add-form {
position: relative;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: var(--s-2) var(--s-3);
margin-bottom: var(--s-3)
}
.product-quick-add.is-always-active .quick-add-toggle .toggle-product-title {
display: none
}
@media screen and (max-width: 600px) {
.product-quick-add {
max-width:100%;
margin: auto
}
}
.ingredient-card {
position: relative;
width: 100%;
max-width: 300px;
padding: var(--s-3);
text-align: center;
border-radius: 8px;
z-index: 200
}
.ingredient-card .card-circular {
position: absolute;
width: 160px;
height: 160px;
top: var(--s-3);
left: 50%;
transform: translate3d(-50%, 0, 0);
border-radius: 100%
}
.ingredient-card .card-image {
position: relative;
width: 140px;
height: 140px;
margin: var(--s-3) auto
}
.ingredient-card hr {
margin: 20px 0 !important;
background-color: var(--cr-silver)
}
.ingredient-card .t-s-3 {
position: relative
}
.ingredient-card .t-l-1 {
margin-top: var(--s-2)
}
html#product-single .ingredient-card {
position: fixed;
transform: translate3d(-10%, calc(-100% - 150px), 0);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
cursor: none
}
html#product-single .ingredient-card.is-active {
opacity: 1
}
.content-layout>*,.shopify-policy__body>* {
max-width: 100%;
margin: var(--s-4) auto
}
.content-layout h1,.content-layout h2,.content-layout h3,.content-layout h4,.content-layout h5,.content-layout h6,.shopify-policy__body h1,.shopify-policy__body h2,.shopify-policy__body h3,.shopify-policy__body h4,.shopify-policy__body h5,.shopify-policy__body h6 {
margin: 0 0 var(--s-3)
}
.content-layout h1:not(:first-child),.content-layout h2:not(:first-child),.content-layout h3:not(:first-child),.content-layout h4:not(:first-child),.content-layout h5:not(:first-child),.content-layout h6:not(:first-child),.shopify-policy__body h1:not(:first-child),.shopify-policy__body h2:not(:first-child),.shopify-policy__body h3:not(:first-child),.shopify-policy__body h4:not(:first-child),.shopify-policy__body h5:not(:first-child),.shopify-policy__body h6:not(:first-child) {
margin: var(--s-4) 0 var(--s-3)
}
.content-layout h1,.shopify-policy__body h1 {
font: var(--t-h-1)
}
.content-layout h2,.shopify-policy__body h2 {
font: var(--t-h-2)
}
.content-layout h3,.shopify-policy__body h3 {
font: var(--t-h-3)
}
.content-layout h4,.content-layout h5,.content-layout h6,.shopify-policy__body h4,.shopify-policy__body h5,.shopify-policy__body h6 {
font: var(--t-h-4)
}
.content-layout p,.content-layout ol,.content-layout ul,.shopify-policy__body p,.shopify-policy__body ol,.shopify-policy__body ul {
margin: var(--s-3) auto;
font: var(--t-b-1);
color: var(--cr-kelp-dark)
}
.content-layout p a,.content-layout ol a,.content-layout ul a,.shopify-policy__body p a,.shopify-policy__body ol a,.shopify-policy__body ul a {
text-decoration: underline
}
.content-layout ol,.content-layout ul,.shopify-policy__body ol,.shopify-policy__body ul {
list-style-position: inside;
padding: 0 0 0 var(--s-3);
font: var(--t-b-1)
}
.content-layout ol li:not(:last-child),.content-layout ul li:not(:last-child),.shopify-policy__body ol li:not(:last-child),.shopify-policy__body ul li:not(:last-child) {
margin: 0 0 var(--s-1)
}
.content-layout ol,.shopify-policy__body ol {
list-style-type: decimal
}
.content-layout ul,.shopify-policy__body ul {
list-style-type: disc
}
.content-layout blockquote,.shopify-policy__body blockquote {
display: block;
margin: var(--s-4) auto;
font: var(--t-h-2);
quotes: "“" "”" "‘" "’"
}
.content-layout blockquote p,.shopify-policy__body blockquote p {
display: inline;
margin: 0;
font: var(--t-h-2)
}
.content-layout blockquote:before,.shopify-policy__body blockquote:before {
content: open-quote;
display: inline
}
.content-layout blockquote:after,.shopify-policy__body blockquote:after {
content: close-quote;
display: inline
}
.content-layout table,.shopify-policy__body table {
width: 100%;
border-collapse: collapse;
border-spacing: 0
}
.content-layout table>*,.shopify-policy__body table>* {
font: var(--t-b-1)
}
.content-layout table th,.content-layout table td,.shopify-policy__body table th,.shopify-policy__body table td {
font-weight: 400;
text-align: left;
padding: var(--s-1) !important;
border: 0;
border: 1px solid var(--cr-subtle)
}
.content-layout table th,.shopify-policy__body table th {
background-color: var(--cr-subtle)
}
.content-layout table p,.shopify-policy__body table p {
margin: 0;
font: var(--t-b-1)
}
.type-spacing>.t-l-1:not(:last-child) {
margin: 0
}
.type-spacing>*:not(:last-child) {
margin: 0 0 var(--s-2)
}
.type-spacing>.t-h-3:not(:last-child),.type-spacing>.t-s-2:not(:last-child) {
margin: 0 0 var(--s-3)
}
.type-spacing i,.type-spacing em {
font: var(--t-s-3)
}
.type-spacing ul,.type-spacing ol {
padding: 0 0 0 var(--s-3)
}
.type-spacing ul {
list-style: disc
}
.type-spacing ol {
list-style: decimal
}
.type-spacing p a:not(.btn-outline),.type-spacing ul a:not(.btn-outline),.type-spacing ol a:not(.btn-outline) {
text-decoration: underline
}
.btn,.btn-outline,.btn-fill {
position: relative;
display: inline-block;
padding: 0 30px;
overflow: hidden;
white-space: nowrap;
font: var(--t-h-4);
height: 60px;
line-height: 58px;
text-align: left;
border: none;
box-shadow: none;
outline: none;
cursor: pointer;
-o-user-select: none;
user-select: none;
border-radius: 30px;
transition: background 0.6s, color 0.6s, box-shadow 0.6s, border 0.6s
}
.btn.is-inline,.btn-outline.is-inline,.btn-fill.is-inline {
text-align: center;
width: fit-content !important
}
.btn.btn,.btn-outline.btn,.btn-fill.btn {
color: var(--cr-black);
background-color: var(--cr-white);
box-shadow: var(--cr-shadow)
}
.btn.btn-fill,.btn-outline.btn-fill,.btn-fill.btn-fill {
width: 100%;
text-align: center;
color: var(--cr-white);
background: linear-gradient(360deg, #e43202 1.67%, #fa4616 37.36%, #ffa857 100%)
}
.btn.btn-fill>span,.btn-outline.btn-fill>span,.btn-fill.btn-fill>span {
position: relative;
z-index: 1
}
.btn.btn-fill:before,.btn-outline.btn-fill:before,.btn-fill.btn-fill:before {
content: '';
display: block;
position: absolute;
inset: 0;
opacity: 0;
transition: 0.6s;
background: linear-gradient(180deg, #e43202 0%, #fa4616 28.5%, #ffa857 100%)
}
.btn .svg-arrow-right,.btn .svg-arrow-left,.btn-outline .svg-arrow-right,.btn-outline .svg-arrow-left,.btn-fill .svg-arrow-right,.btn-fill .svg-arrow-left {
display: inline-block;
width: 16px;
vertical-align: 2px;
color: var(--cr-coral);
transition: 0.6s
}
.btn .svg-arrow-right,.btn-outline .svg-arrow-right,.btn-fill .svg-arrow-right {
margin-left: 0.5em
}
.btn.btn-outline,.btn-outline.btn-outline,.btn-fill.btn-outline {
width: 100%;
color: inherit;
border: 1px solid var(--cr-silver)
}
.btn.btn-outline.cr-white,.btn-outline.btn-outline.cr-white,.btn-fill.btn-outline.cr-white {
color: var(--cr-white)
}
.btn.btn-outline .btn-toggle,.btn-outline.btn-outline .btn-toggle,.btn-fill.btn-outline .btn-toggle {
display: inline-block;
float: right;
vertical-align: top;
margin: 5px calc(0px - var(--s-3)) 5px var(--s-2)
}
.btn.btn-outline.is-active .btn-toggle:before,.btn-outline.btn-outline.is-active .btn-toggle:before,.btn-fill.btn-outline.is-active .btn-toggle:before {
transform: translate3d(-50%, -50%, 0) scale(1)
}
.btn.btn-outline.is-active .btn-toggle:after,.btn-outline.btn-outline.is-active .btn-toggle:after,.btn-fill.btn-outline.is-active .btn-toggle:after {
width: 100%;
height: 100%
}
@media (hover: hover) {
.btn:hover .svg-arrow-right,.btn-outline:hover .svg-arrow-right,.btn-fill:hover .svg-arrow-right {
transform:translateX(var(--s-1))
}
.btn.btn-outline:hover,.btn-outline.btn-outline:hover,.btn-fill.btn-outline:hover {
color: var(--cr-black);
background-color: var(--cr-subtle);
background: var(--cr-gradient);
box-shadow: var(--cr-shadow);
border-color: transparent
}
.btn.btn-outline:hover .btn-toggle:after,.btn-outline.btn-outline:hover .btn-toggle:after,.btn-fill.btn-outline:hover .btn-toggle:after {
width: 100%;
height: 100%
}
.btn.btn-fill:hover:before,.btn-outline.btn-fill:hover:before,.btn-fill.btn-fill:hover:before {
opacity: 1
}
}
@media screen and (max-width: 600px) {
.btn.is-mobile-fill,.btn-outline.is-mobile-fill,.btn-fill.is-mobile-fill {
color:var(--cr-black);
background: var(--cr-gradient);
box-shadow: var(--cr-shadow);
border: 0
}
.btn.is-mobile-fill .btn-toggle:before,.btn-outline.is-mobile-fill .btn-toggle:before,.btn-fill.is-mobile-fill .btn-toggle:before {
transform: translate3d(-50%, -50%, 0) scale(1)
}
.btn.is-mobile-fill .btn-toggle:after,.btn-outline.is-mobile-fill .btn-toggle:after,.btn-fill.is-mobile-fill .btn-toggle:after {
width: 100%;
height: 100%
}
}
.btn[disabled],button[disabled],input[disabled] {
background-color: var(--cr-subdued);
pointer-events: none
}
.object-fit,.object-contain {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
-o-user-select: none;
user-select: none
}
.object-fit.object-fit>*,.object-fit.object-contain>*,.object-contain.object-fit>*,.object-contain.object-contain>* {
position: relative;
width: 101%;
height: 101% !important;
max-width: none;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden
}
.object-fit.object-fit>*,.object-contain.object-fit>* {
object-fit: cover
}
.object-fit.object-contain>*,.object-contain.object-contain>* {
width: 100%;
height: 100% !important;
object-fit: contain
}
.object-fit.object-fit>picture,.object-fit.object-fit>iframe,.object-contain.object-fit>picture,.object-contain.object-fit>iframe {
top: 0;
left: 0;
transform: unset;
object-fit: unset
}
.object-fit.object-fit>picture>img,.object-contain.object-fit>picture>img {
width: 100%;
height: 101% !important;
object-fit: cover;
-webkit-backface-visibility: hidden
}
input[type='radio'],input[type='checkbox'] {
position: relative;
display: inline-block;
width: var(--s-2);
height: var(--s-2);
margin-right: 10px;
vertical-align: -1px;
background-color: var(--cr-silver);
cursor: pointer
}
input[type='radio']:after,input[type='checkbox']:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 200%;
height: 200%
}
input[type='radio'][type='radio'],input[type='checkbox'][type='radio'] {
border-radius: 100%
}
input[type='radio'][type='radio']:checked,input[type='radio'][type='checkbox']:checked,input[type='checkbox'][type='radio']:checked,input[type='checkbox'][type='checkbox']:checked {
background: #d75238;
background: linear-gradient(180deg, #d75238 0%, #ec562d 10%, #ffa857 100%)
}
.field,.input-wrapper {
position: relative;
line-height: 1
}
.field:not(:last-child),.input-wrapper:not(:last-child) {
margin-bottom: var(--s-3)
}
.field input[type='text'],.field input[type='email'],.field input[type='tel'],.field input[type='url'],.field input[type='password'],.field select,.field textarea,.input-wrapper input[type='text'],.input-wrapper input[type='email'],.input-wrapper input[type='tel'],.input-wrapper input[type='url'],.input-wrapper input[type='password'],.input-wrapper select,.input-wrapper textarea {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border: none;
outline: none;
font: var(--t-b-1);
color: var(--cr-black);
border-bottom: 1px solid var(--cr-silver);
transition: 0.2s
}
.field input[type='text'],.field input[type='text'] ~ label,.field input[type='email'],.field input[type='email'] ~ label,.field input[type='tel'],.field input[type='tel'] ~ label,.field input[type='url'],.field input[type='url'] ~ label,.field input[type='password'],.field input[type='password'] ~ label,.field select,.field select ~ label,.field textarea,.field textarea ~ label,.input-wrapper input[type='text'],.input-wrapper input[type='text'] ~ label,.input-wrapper input[type='email'],.input-wrapper input[type='email'] ~ label,.input-wrapper input[type='tel'],.input-wrapper input[type='tel'] ~ label,.input-wrapper input[type='url'],.input-wrapper input[type='url'] ~ label,.input-wrapper input[type='password'],.input-wrapper input[type='password'] ~ label,.input-wrapper select,.input-wrapper select ~ label,.input-wrapper textarea,.input-wrapper textarea ~ label {
padding: 14px 0 16px;
font: var(--t-b-1);
height: var(--s-4)
}
.field input[type='text'] ~ label,.field input[type='email'] ~ label,.field input[type='tel'] ~ label,.field input[type='url'] ~ label,.field input[type='password'] ~ label,.field select ~ label,.field textarea ~ label,.input-wrapper input[type='text'] ~ label,.input-wrapper input[type='email'] ~ label,.input-wrapper input[type='tel'] ~ label,.input-wrapper input[type='url'] ~ label,.input-wrapper input[type='password'] ~ label,.input-wrapper select ~ label,.input-wrapper textarea ~ label {
position: absolute;
display: block;
width: 100%;
top: 0;
left: 0;
pointer-events: none;
color: var(--cr-kelp-dark);
transition: 0.2s
}
.field input[type='text']:focus ~ label,.field input[type='email']:focus ~ label,.field input[type='tel']:focus ~ label,.field input[type='url']:focus ~ label,.field input[type='password']:focus ~ label,.field select:focus ~ label,.field textarea:focus ~ label,.input-wrapper input[type='text']:focus ~ label,.input-wrapper input[type='email']:focus ~ label,.input-wrapper input[type='tel']:focus ~ label,.input-wrapper input[type='url']:focus ~ label,.input-wrapper input[type='password']:focus ~ label,.input-wrapper select:focus ~ label,.input-wrapper textarea:focus ~ label {
top: -20px;
font-size: 12px
}
.field input[type='text'].is-error,.field input[type='email'].is-error,.field input[type='tel'].is-error,.field input[type='url'].is-error,.field input[type='password'].is-error,.field select.is-error,.field textarea.is-error,.input-wrapper input[type='text'].is-error,.input-wrapper input[type='email'].is-error,.input-wrapper input[type='tel'].is-error,.input-wrapper input[type='url'].is-error,.input-wrapper input[type='password'].is-error,.input-wrapper select.is-error,.input-wrapper textarea.is-error {
background-color: rgba(255,0,0,0.1)
}
.field input[type='text'].is-error,.field input[type='text'].is-error ~ label,.field input[type='email'].is-error,.field input[type='email'].is-error ~ label,.field input[type='tel'].is-error,.field input[type='tel'].is-error ~ label,.field input[type='url'].is-error,.field input[type='url'].is-error ~ label,.field input[type='password'].is-error,.field input[type='password'].is-error ~ label,.field select.is-error,.field select.is-error ~ label,.field textarea.is-error,.field textarea.is-error ~ label,.input-wrapper input[type='text'].is-error,.input-wrapper input[type='text'].is-error ~ label,.input-wrapper input[type='email'].is-error,.input-wrapper input[type='email'].is-error ~ label,.input-wrapper input[type='tel'].is-error,.input-wrapper input[type='tel'].is-error ~ label,.input-wrapper input[type='url'].is-error,.input-wrapper input[type='url'].is-error ~ label,.input-wrapper input[type='password'].is-error,.input-wrapper input[type='password'].is-error ~ label,.input-wrapper select.is-error,.input-wrapper select.is-error ~ label,.input-wrapper textarea.is-error,.input-wrapper textarea.is-error ~ label {
padding-left: var(--s-2);
padding-right: var(--s-2)
}
.field.has-value input[type='text'] ~ label,.field.has-value input[type='email'] ~ label,.field.has-value input[type='tel'] ~ label,.field.has-value input[type='url'] ~ label,.field.has-value input[type='password'] ~ label,.field.has-value select ~ label,.field.has-value textarea ~ label,.input-wrapper.has-value input[type='text'] ~ label,.input-wrapper.has-value input[type='email'] ~ label,.input-wrapper.has-value input[type='tel'] ~ label,.input-wrapper.has-value input[type='url'] ~ label,.input-wrapper.has-value input[type='password'] ~ label,.input-wrapper.has-value select ~ label,.input-wrapper.has-value textarea ~ label {
top: -20px;
font-size: 12px
}
.field input[type='checkbox'] label,.field input[type='radio'] label,.input-wrapper input[type='checkbox'] label,.input-wrapper input[type='radio'] label {
display: inline;
margin-right: var(--s-2);
line-height: 1
}
.field select,.input-wrapper select {
padding: 0;
background: url(../assets/svg-caret-down-black.svg) right center/var(--s-2) no-repeat;
cursor: pointer;
transition: 0.2s;
-o-user-select: none;
user-select: none
}
@media (hover: hover) {
.field select:hover,.input-wrapper select:hover {
background-image:url(../assets/svg-caret-down-coral.svg)
}
}
.field textarea,.input-wrapper textarea {
white-space: normal;
height: 200px;
resize: vertical
}
.field input[type='submit'],.input-wrapper input[type='submit'] {
display: block;
width: 100%
}
.field *::-webkit-input-placeholder,.input-wrapper *::-webkit-input-placeholder {
color: var(--cr-black)
}
.field *::-moz-placeholder,.input-wrapper *::-moz-placeholder {
color: var(--cr-black)
}
.field *:-ms-input-placeholder,.input-wrapper *:-ms-input-placeholder {
color: var(--cr-black)
}
.field *:-moz-placeholder,.input-wrapper *:-moz-placeholder {
color: var(--cr-black)
}
.field-group {
font-size: 0
}
.field-group .field {
display: inline-block;
width: calc(50% - var(--s-3) / 2);
margin: 0 var(--s-3) var(--s-3) 0
}
.field-group .field:nth-of-type(2n) {
margin: 0 0 var(--s-3)
}
.errors,.success {
padding: var(--s-2) var(--s-2) calc(var(--s-2) - 4px);
border-radius: 4px
}
.errors.errors,.success.errors {
color: var(--cr-coral);
background-color: rgba(255,0,0,0.1)
}
.errors.success,.success.success {
color: var(--cr-black);
background-color: rgba(150,255,150,0.1)
}
.errors ul,.success ul {
padding: 0;
list-style: none
}
form {
position: relative
}
form .form-error,form .form-success {
font: var(--t-b-1)
}
form .form-errors ul {
padding: 0
}
form .form-success ~ * {
animation: 0.6s fadeOut both;
pointer-events: none
}
form .form-success {
position: absolute;
width: 100%;
top: 0;
left: 0;
animation: 0.6s 0.4s fadeIn both
}
.item-quantity {
height: 40px;
border-radius: 20px
}
.item-quantity button[data-quantity-trigger],.item-quantity input[type='number'] {
position: relative;
display: inline-block;
height: 40px;
width: 40px;
text-align: center
}
.item-quantity button[data-quantity-trigger] svg,.item-quantity input[type='number'] svg {
width: 12px;
height: 12px;
margin: 14px;
transition: 0.4s
}
@media (hover: hover) {
.item-quantity button[data-quantity-trigger]:hover svg,.item-quantity input[type='number']:hover svg {
color:var(--cr-coral)
}
}
.item-quantity input[type='number'] {
flex: 1;
font: var(--t-s-3);
pointer-events: none
}
.item-quantity input[type='number']::-webkit-inner-spin-button,.item-quantity input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
.summary {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap
}
.summary>*:not(.summary-left):not(.summary-right) {
display: block;
width: 100%
}
.summary>*:not(.summary-left):not(.summary-right):not(:last-child) {
margin: 0 0 var(--s-2)
}
.summary .summary-left {
flex: 1;
margin: 0 var(--s-3) 0 0
}
.summary .summary-right {
text-align: right
}
.summary:not(:last-child) {
margin: 0 0 var(--s-1)
}
.pagination-buttons {
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-items: center;
height: 40px;
width: fit-content;
margin: auto;
padding: 16px 20px;
border: 1px solid var(--cr-silver);
border-radius: 30px;
transition: 0.6s
}
.pagination-buttons button {
position: relative;
display: inline-block;
width: 4px;
height: 4px;
background-color: var(--cr-silver);
border-radius: 100%;
transition: 0.4s
}
.pagination-buttons button:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 16px;
height: 16px
}
.pagination-buttons button:not(:last-child) {
margin: 0 var(--s-2) 0 0
}
.pagination-buttons button.is-active {
background-color: var(--cr-black)
}
@media (hover: hover) {
.pagination-buttons:hover {
color:var(--cr-black);
background-color: var(--cr-subtle);
background: var(--cr-gradient);
box-shadow: var(--cr-shadow);
border-color: transparent
}
}
.scroll-trigger {
padding: 0;
width: 40px;
height: 40px
}
.scroll-trigger .svg-arrow-down {
display: block;
width: 12px;
height: 16px;
margin: calc((40px - 16px) / 2) auto;
color: var(--cr-black);
transition: 0.4s
}
@media (hover: hover) {
.scroll-trigger:hover .svg-arrow-down {
color:var(--cr-coral)
}
}
.global-menu,.account-menu {
position: fixed;
width: 100%;
max-width: calc(330px + var(--s-edge) + var(--s-contain));
height: 100%;
top: 0;
left: 0;
transform: translate3d(-101%, 0, 0);
z-index: 90;
transition: 0.8s var(--a-panel);
box-shadow: 12px 0 24px rgba(0,0,0,0)
}
.global-menu .menu-content,.account-menu .menu-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: calc(var(--s-announcement) + var(--s-header) + var(--s-4)) var(--s-contain) var(--s-4) calc(var(--s-edge) + var(--s-1))
}
.global-menu .menu-links,.account-menu .menu-links {
animation: 0.4s fadeIn both
}
.global-menu .menu-links li>*,.account-menu .menu-links li>* {
display: block;
width: 100%;
text-align: left
}
.global-menu .menu-links li>* .svg-arrow-right,.account-menu .menu-links li>* .svg-arrow-right {
display: inline-block;
width: 16px;
float: right;
transition: 0.8s
}
.global-menu .menu-links>ul>li:not(:last-child),.account-menu .menu-links>ul>li:not(:last-child) {
margin: 0 0 var(--s-3)
}
.global-menu .menu-links>ul>li a[href='#'],.account-menu .menu-links>ul>li a[href='#'] {
pointer-events: none;
color: var(--cr-silver)
}
.global-menu .menu-links>ul>li>ul,.account-menu .menu-links>ul>li>ul {
margin: 0 0 var(--s-4)
}
.global-menu .menu-links>ul>li>.t-s-3,.account-menu .menu-links>ul>li>.t-s-3 {
margin: var(--s-4) 0 var(--s-2)
}
.global-menu .menu-links>ul>li>ul>li:not(:last-child),.account-menu .menu-links>ul>li>ul>li:not(:last-child) {
margin: 0 0 var(--s-1)
}
.global-menu .menu-links>ul>li>* .svg-arrow-right,.account-menu .menu-links>ul>li>* .svg-arrow-right {
margin: var(--s-2) 0 var(--s-2) var(--s-2);
color: var(--cr-silver)
}
.global-menu .menu-links>ul>li>ul>li * .svg-arrow-right,.account-menu .menu-links>ul>li>ul>li * .svg-arrow-right {
margin: 7px 0 7px 7px;
color: var(--cr-coral);
opacity: 0
}
.global-menu .menu-links>ul>li.is-active>* .svg-arrow-right,.account-menu .menu-links>ul>li.is-active>* .svg-arrow-right {
color: var(--cr-coral);
transition: 0.2s
}
.global-menu .menu-links>ul>li.is-active>ul>li * .svg-arrow-right,.account-menu .menu-links>ul>li.is-active>ul>li * .svg-arrow-right {
opacity: 1;
transition: 0.2s
}
@media (hover: hover) {
.global-menu .menu-links>ul>li>*:hover .svg-arrow-right,.account-menu .menu-links>ul>li>*:hover .svg-arrow-right {
color:var(--cr-coral);
transition: 0.2s
}
.global-menu .menu-links>ul>li>ul>li *:hover .svg-arrow-right,.account-menu .menu-links>ul>li>ul>li *:hover .svg-arrow-right {
opacity: 1;
transition: 0.2s
}
}
.global-menu .menu-links li>.account-gate-open .svg-account,.account-menu .menu-links li>.account-gate-open .svg-account {
display: inline-block;
width: 32px;
height: 32px;
vertical-align: middle;
margin: 0 0 0 var(--s-2);
padding: 8px;
border-radius: 100%;
color: var(--cr-coral);
border: 1px solid var(--cr-silver)
}
.global-menu .menu-links .menu-links-account,.account-menu .menu-links .menu-links-account {
display: none
}
.global-menu .menu-search,.account-menu .menu-search {
position: relative
}
.global-menu .menu-search input,.account-menu .menu-search input {
width: 100%;
padding: var(--s-4) var(--s-contain) var(--s-4) calc(var(--s-edge) + var(--s-1))
}
.global-menu .menu-search input *::-webkit-input-placeholder,.account-menu .menu-search input *::-webkit-input-placeholder {
color: var(--cr-black);
opacity: 1
}
.global-menu .menu-search input *::-moz-placeholder,.account-menu .menu-search input *::-moz-placeholder {
color: var(--cr-black);
opacity: 1
}
.global-menu .menu-search input *:-ms-input-placeholder,.account-menu .menu-search input *:-ms-input-placeholder {
color: var(--cr-black);
opacity: 1
}
.global-menu .menu-search input *:-moz-placeholder,.account-menu .menu-search input *:-moz-placeholder {
color: var(--cr-black);
opacity: 1
}
.global-menu .menu-search .search-clear,.account-menu .menu-search .search-clear {
position: absolute;
height: 13px;
top: 50%;
transform: translateY(-50%);
right: var(--s-contain);
white-space: nowrap;
user-select: none;
opacity: 0;
pointer-events: none;
transition: 0.4s
}
@media screen and (max-width: 600px) {
.global-menu,.account-menu {
max-width:100%
}
.global-menu .menu-links>ul>li>ul,.account-menu .menu-links>ul>li>ul {
margin: 0 0 var(--s-2)
}
.global-menu .menu-links>ul>li>.t-s-3,.account-menu .menu-links>ul>li>.t-s-3 {
margin: var(--s-3) 0 var(--s-1)
}
.global-menu .menu-links>ul>li>* .svg-arrow-right,.account-menu .menu-links>ul>li>* .svg-arrow-right {
margin: 12px 0 12px var(--s-2)
}
.global-menu .menu-links>ul>li>* .svg-arrow-right,.account-menu .menu-links>ul>li>* .svg-arrow-right {
margin: var(--s-2) 0 var(--s-2) var(--s-2);
color: var(--cr-silver)
}
.global-menu .menu-links .menu-links-account,.account-menu .menu-links .menu-links-account {
display: block
}
.global-menu .menu-search,.account-menu .menu-search {
position: relative
}
.global-menu .menu-search:before,.account-menu .menu-search:before {
content: '';
position: absolute;
display: block;
height: var(--s-4);
width: 100%;
top: 0;
transform: translateY(-100%);
background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 100%);
z-index: 10;
pointer-events: none
}
.global-menu .menu-search input,.account-menu .menu-search input {
padding: var(--s-3) var(--s-contain)
}
}
.global-menu .menu-links>ul>li {
opacity: 0;
transform: translateY(var(--s-4));
transition: 0.8s 0.8s
}
html.menu-is-active {
overflow: hidden
}
html.menu-is-active .global-header .header-logo {
color: var(--cr-coral)
}
html.menu-is-active .global-header .menu-toggle {
background: var(--cr-white);
box-shadow: inset 0 0 0 1px transparent,0 var(--s-2) var(--s-3) rgba(0,0,0,0);
border: 1px solid var(--cr-silver)
}
html.menu-is-active .global-header .menu-toggle .menu-toggle-hamburger {
opacity: 0
}
html.menu-is-active .global-header .menu-toggle svg {
transform: scale(1);
opacity: 1;
color: var(--cr-black)
}
html.menu-is-active .global-header .menu-toggle:after {
transform: translate3d(-50%, -50%) scale(0);
opacity: 0
}
@media (hover: hover) {
html.menu-is-active .global-header .menu-toggle:hover {
color:var(--cr-black);
border-color: transparent;
background-color: var(--cr-white);
box-shadow: var(--cr-shadow)
}
html.menu-is-active .global-header .menu-toggle:hover svg {
color: var(--cr-coral)
}
}
html.menu-is-active .global-menu {
transform: translate3d(0, 0, 0);
box-shadow: 12px 0 24px rgba(0,0,0,0.04)
}
html.menu-is-active .global-menu .menu-links>ul>li {
opacity: 1;
transform: translateY(0)
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(1) {
transition-delay: 0.4s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(2) {
transition-delay: 0.6s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(3) {
transition-delay: 0.8s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(4) {
transition-delay: 1s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(5) {
transition-delay: 1.2s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(6) {
transition-delay: 1.4s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(7) {
transition-delay: 1.6s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(8) {
transition-delay: 1.8s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(9) {
transition-delay: 2s
}
html.menu-is-active .global-menu .menu-links>ul>li:nth-child(10) {
transition-delay: 2.2s
}
.menu-search-results {
display: none;
margin: auto 0 0
}
.menu-search-results .search-results-image {
position: relative;
margin: 0 0 var(--s-3)
}
.menu-search-results .search-results-image:after {
content: '';
display: block;
padding-top: 50%
}
.menu-search-results .search-results-image .object-fit {
animation: 0.8s 0.6s fadeIn both
}
.menu-search-results ul {
padding: var(--s-4) 0 0;
border-top: 1px solid var(--cr-silver)
}
.menu-search-results ul:before {
display: block;
margin: 0 0 var(--s-2);
font: var(--t-s-3);
color: var(--cr-kelp-dark)
}
.menu-search-results ul li:not(:last-child) {
margin: 0 0 var(--s-1)
}
.menu-search-results ul li a {
display: block
}
.menu-search-results ul li a .svg-arrow-right {
display: inline-block;
width: 16px;
margin: 7px 0 7px 7px;
float: right;
color: var(--cr-coral);
opacity: 0;
transition: 0.8s
}
@media (hover: hover) {
.menu-search-results ul li a:hover .svg-arrow-right {
opacity:1
}
}
html.search-has-results .menu-search-results ul:before {
content: 'Search results'
}
html.search-has-results .menu-search-results .search-results-empty {
display: none
}
html.search-is-active .menu-links {
display: none
}
html.search-is-active .menu-search-results {
display: block;
animation: 0.4s fadeIn both
}
html.search-is-active .menu-search:before {
display: none
}
html.search-is-active .menu-search .search-clear {
opacity: 1;
pointer-events: auto
}
.global-footer {
position: relative;
padding: var(--s-4) 0
}
.global-footer .footer-content {
margin: 0 auto var(--s-4);
text-align: center
}
.global-footer .footer-content .footer-brand-certifications {
width: 50%;
max-width: 580px
}
.global-footer .footer-content .footer-links-email-capture-wrapper {
flex: 1
}
.global-footer .footer-brand-certifications .t-h-3 {
margin: 0 0 var(--s-3)
}
.global-footer .footer-brand-certifications .certifications-icons svg {
display: inline-block;
height: var(--s-4);
margin: var(--s-2);
vertical-align: middle
}
.global-footer .footer-brand-certifications .certifications-icons svg[class*='with-text'] {
height: 78px
}
.global-footer .footer-links {
margin: 0 0 var(--s-4)
}
.global-footer .footer-links ul li:not(:last-child) {
margin: 0 0 var(--s-3)
}
.global-footer .footer-links ul li a {
transition: 0.4s
}
@media (hover: hover) {
.global-footer .footer-links ul li a:hover {
opacity:0.4
}
}
.global-footer .comp-email-capture {
width: 100%;
max-width: 340px;
margin: auto
}
.global-footer .comp-email-capture .t-h-3 {
font: var(--t-h-4)
}
.global-footer .comp-email-capture .field input,.global-footer .comp-email-capture .field input ~ label {
text-align: left
}
.global-footer .comp-email-capture .field input {
color: var(--cr-white);
border-color: var(--cr-white) !important
}
.global-footer .footer-footnote .footer-logo {
margin: 0 auto 0 0;
font-size: 0;
line-height: 0
}
.global-footer .footer-footnote .footer-logo svg {
height: var(--s-3)
}
.global-footer .footer-footnote .footer-legal ul li {
display: inline-block;
white-space: nowrap
}
.global-footer .footer-footnote .footer-legal ul li:not(:last-child) {
margin: 0 var(--s-3) 0 0
}
.global-footer .footer-footnote .footer-legal ul li a {
transition: 0.4s
}
@media (hover: hover) {
.global-footer .footer-footnote .footer-legal ul li a:hover {
opacity:0.4
}
}
@media screen and (max-width: 900px) {
.global-footer .footer-content {
margin:0 auto var(--s-5);
text-align: center
}
.global-footer .footer-content .footer-brand-certifications,.global-footer .footer-content .footer-links-email-capture-wrapper {
width: 100%;
flex: unset;
margin: auto
}
.global-footer .footer-content .footer-brand-certifications {
margin-bottom: var(--s-4)
}
.global-footer .footer-footnote {
display: block;
text-align: center
}
.global-footer .footer-footnote .footer-logo {
display: block;
margin: 0 auto var(--s-3)
}
.global-footer .footer-footnote .footer-legal {
text-align: center
}
}
@media screen and (max-width: 600px) {
.global-footer .footer-brand-certifications .certifications-icons svg {
height:36px;
margin: var(--s-1)
}
.global-footer .footer-brand-certifications .certifications-icons svg[class*='with-text'] {
height: 64px
}
.global-footer .footer-footnote .footer-legal ul li {
display: block
}
.global-footer .footer-footnote .footer-legal ul li:not(:last-child) {
margin: 0 0 var(--s-1)
}
}
.header-space {
height: calc(var(--s-announcement) + var(--s-header))
}
.shopify-challenge__container {
max-width: 400px;
margin: var(--s-section) auto
}
.shopify-challenge__container .shopify-challenge__message {
font: var(--t-b-1)
}
.shopify-policy__container {
width: calc(100vw - var(--s-contain) * 2);
max-width: 720px;
margin: calc(var(--s-header) + var(--s-section)) auto;
padding: 0
}
.shopify-policy__container .shopify-policy__title {
margin: 0 0 var(--s-section-half);
text-align: left
}
.shopify-policy__container .shopify-policy__title h1 {
font: var(--t-h-1)
}
.page-content {
margin: calc(var(--s-header) + var(--s-section)) auto var(--s-section)
}
.error-content {
text-align: center
}
.global-loading-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
opacity: 0;
background: var(--cr-coral);
transition: width 0.4s var(--a-panel),opacity 0.4s;
z-index: 900;
pointer-events: none
}
.account-gate-wrapper {
position: fixed;
opacity: 0;
pointer-events: none;
transition: 0.8s;
z-index: 100
}
.account-gate-wrapper .account-gate-overlay {
position: fixed;
background-color: rgba(0,0,0,0.4)
}
.account-gate-wrapper .account-login,.account-gate-wrapper .account-register,.account-gate-wrapper .account-reset,.account-gate-wrapper .account-reset-password,.account-gate-wrapper .account-activate {
max-width: 375px;
padding: var(--s-3);
transform: translate3d(-50%, calc(-50% + var(--s-4)), 0);
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: 0.4s
}
.account-gate-wrapper .account-login.is-active,.account-gate-wrapper .account-register.is-active,.account-gate-wrapper .account-reset.is-active,.account-gate-wrapper .account-reset-password.is-active,.account-gate-wrapper .account-activate.is-active {
transform: translate3d(-50%, -50%, 0);
opacity: 1;
transition-delay: 0.4s
}
.account-gate-wrapper .account-gate-header {
margin: var(--s-3) 0;
text-align: center
}
.account-gate-wrapper .account-gate-content {
margin: 0 0 var(--s-3)
}
.account-gate-wrapper .account-gate-content .account-reset-password-open {
float: right;
margin: var(--s-2) 0 0;
text-decoration: underline
}
.account-gate-wrapper .account-gate-footer {
text-align: center
}
.account-gate-wrapper .account-gate-footer>*:not(:last-child) {
margin: 0 0 var(--s-3)
}
.account-gate-wrapper .account-gate-footer .btn-outline {
display: block;
width: 100%;
text-align: center
}
.account-gate-wrapper .account-gate-footer a.t-l-1,.account-gate-wrapper .account-gate-footer button.t-l-1 {
text-decoration: underline
}
.account-gate-wrapper .account-gate-footer .account-reset-password-close {
text-decoration: underline
}
.account-gate-wrapper .account-gate-footer .account-gate-close {
border: 1px solid var(--cr-silver);
box-shadow: none;
background: unset;
border-radius: 100%
}
.account-gate-wrapper .account-gate-footer .account-gate-close:before,.account-gate-wrapper .account-gate-footer .account-gate-close:after {
display: none
}
.account-gate-wrapper .account-gate-footer .account-gate-close svg {
position: relative;
width: 13px;
height: 13px;
margin: 17px
}
@media (hover: hover) {
.account-gate-wrapper .account-gate-footer .account-gate-close:hover {
background-color:var(--cr-subtle)
}
}
html.account-gate-is-active {
overflow: hidden
}
html.account-gate-is-active .account-gate-wrapper {
opacity: 1;
pointer-events: auto
}
html.account-gate-is-active .account-login.is-active,html.account-gate-is-active .account-register.is-active,html.account-gate-is-active .account-reset.is-active,html.account-gate-is-active .account-reset-password.is-active,html.account-gate-is-active .account-activate.is-active {
pointer-events: auto
}
.account-menu {
transform: translate3d(0, 0, 0);
box-shadow: 12px 0 24px rgba(0,0,0,0.04)
}
.account-menu .menu-header {
margin: 0 0 var(--s-4);
padding: calc(var(--s-3) + (64px - 20px) / 2) var(--s-contain) var(--s-4) calc(var(--s-edge) + var(--s-1));
border-bottom: 1px solid var(--cr-subdued)
}
.account-menu .menu-header .account-back-url {
display: inline-flex;
margin: 0 0 var(--s-4)
}
.account-menu .menu-header .svg-arrow-left {
display: inline-block;
width: 16px;
margin: 0 var(--s-3) 0 0;
color: var(--cr-silver);
transition: 0.4s
}
.account-menu .menu-header .svg-logo {
display: inline-block;
width: 50px;
height: 20px;
color: var(--cr-black)
}
@media (hover: hover) {
.account-menu .menu-header a:hover .svg-arrow-left {
color:var(--cr-coral)
}
}
.account-menu .menu-content {
padding-top: 0
}
.account-menu .menu-footer {
padding: 0 var(--s-contain) var(--s-4) calc(var(--s-edge) + var(--s-1))
}
.account-menu .account-help {
margin: 0 0 var(--s-4);
padding: 0 0 var(--s-2);
border-bottom: 1px solid var(--cr-subdued)
}
.account-menu .account-help a {
text-decoration: underline
}
@media screen and (max-width: 900px) {
.account-menu {
position:relative;
width: 100%;
max-width: 100%;
height: unset;
top: unset;
left: unset;
transform: unset
}
.account-menu .menu-header {
padding: calc(var(--s-3) + (64px - 20px) / 2) var(--s-contain) 0;
border-bottom: 0
}
.account-menu .menu-header .account-back-url {
margin: 0
}
.account-menu .menu-header .t-h-2 {
display: none
}
.account-menu .menu-content {
margin: 0 0 var(--s-2);
padding: 0 var(--s-contain)
}
.account-menu .menu-content .menu-links ul {
display: none
}
.account-menu .menu-content .field select {
padding: var(--s-2);
background-position: right var(--s-2) center;
border: 1px solid var(--cr-silver)
}
.account-menu .menu-footer {
padding: 0 var(--s-contain) var(--s-3)
}
.account-menu .menu-footer .account-help {
margin: 0;
padding: 0;
border-bottom: 0
}
.account-menu .menu-footer .account-sign-out {
display: none
}
}
.account-header,.account-content {
position: relative
}
.account-header>.c,.account-content>.c {
padding: var(--s-section) 0 var(--s-section) calc(330px + var(--s-contain) + var(--s-5))
}
@media screen and (max-width: 900px) {
.account-header>.c,.account-content>.c {
padding:var(--s-section-half) 0
}
}
@media screen and (max-width: 600px) {
.account-header>.c,.account-content>.c {
padding:var(--s-section) 0
}
}
.account-orders>h2 {
margin: 0 0 var(--s-3)
}
.account-orders .orders-list-header,.account-orders .orders-list-line {
margin: 0 0 var(--s-2)
}
.account-orders .orders-list-header>ul>li,.account-orders .orders-list-line>ul>li {
width: 20%
}
.account-orders .orders-list-header>ul>li:nth-child(5),.account-orders .orders-list-line>ul>li:nth-child(5) {
text-align: right
}
.account-orders .orders-list-header.orders-list-header,.account-orders .orders-list-line.orders-list-header {
white-space: nowrap;
padding: 0 var(--s-3)
}
.account-orders .orders-list-header.orders-list-line,.account-orders .orders-list-line.orders-list-line {
position: relative;
padding: var(--s-3) var(--s-3) calc(var(--s-3) - 4px);
border-radius: 8px;
transition: background 0.2s, padding 0.2s
}
@media screen and (max-width: 600px) {
.account-orders>ul {
width:100vw;
margin: 0 calc(0px - var(--s-contain));
padding: 0 var(--s-contain) var(--s-3);
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.account-orders>ul::-webkit-scrollbar {
height: var(--s-1)
}
.account-orders>ul::-webkit-scrollbar-track {
margin: 0 var(--s-contain);
background-color: var(--cr-white);
border-radius: var(--s-1)
}
.account-orders>ul::-webkit-scrollbar-thumb {
height: var(--s-1);
background-color: var(--cr-subdued);
border-radius: var(--s-1)
}
.account-orders>ul>li {
min-width: 600px;
padding-right: var(--s-3)
}
.account-orders .orders-list-header,.account-orders .orders-list-line {
padding: var(--s-3) var(--s-3) var(--s-3) 0
}
}
.account-addresses>h2 {
margin: 0 0 var(--s-3)
}
.account-addresses .address-list {
margin: 0 0 var(--s-section-half)
}
.account-addresses .address {
width: calc(100% / 2 - var(--s-3) / 2);
margin: 0 var(--s-3) var(--s-3) 0;
padding: var(--s-3);
border-radius: 8px
}
.account-addresses .address:nth-of-type(2n) {
margin: 0 0 var(--s-3)
}
.account-addresses .address .address-default {
display: inline-block;
height: 32px;
line-height: 36px;
margin: 0 0 var(--s-2) calc(0px - var(--s-2));
padding: 0 16px;
border: 1px solid var(--cr-silver);
border-radius: 16px
}
.account-addresses .address .address-actions {
margin: var(--s-3) 0 0
}
.account-addresses .address-add-trigger {
margin: var(--s-section-half) 0 0
}
@media screen and (max-width: 900px) {
.account-addresses .address,.account-addresses .address:nth-of-type(2n) {
width:100%;
margin: 0 0 var(--s-3)
}
}
.address-popup {
display: block !important;
position: absolute;
max-width: 720px;
top: var(--s-section);
left: 50%;
transform: translateX(-50%);
padding: var(--s-4);
background-color: var(--cr-white);
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: 0.4s;
z-index: 205
}
.address-popup.active {
opacity: 1;
pointer-events: auto
}
.address-popup .address-popup-header {
margin: 0 0 var(--s-4)
}
.address-popup .address-popup-header .address-popup-close {
margin: calc(0px - var(--s-2)) calc(0px - var(--s-2)) 0 auto;
background: var(--cr-white);
box-shadow: inset 0 0 0 1px transparent,0 var(--s-2) var(--s-3) rgba(0,0,0,0);
border: 1px solid var(--cr-silver)
}
.address-popup .address-popup-header .address-popup-close:before,.address-popup .address-popup-header .address-popup-close:after {
display: none
}
.address-popup .address-popup-header .address-popup-close svg {
position: relative;
width: 13px;
height: 13px;
margin: 17px;
pointer-events: none;
transition: 0.6s
}
.address-popup .address-popup-footer {
margin: var(--s-3) 0 0
}
.address-popup .address-popup-footer .btn {
width: 100%
}
@media screen and (max-width: 600px) {
.address-popup {
padding:var(--s-3) var(--s-contain)
}
}
.address-popup-overlay {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.1);
opacity: 0;
pointer-events: none;
transition: 0.4s;
z-index: 200
}
html.address-popup-active .address-popup-overlay {
opacity: 1;
pointer-events: auto
}
.order-details-summary {
margin: 0 auto var(--s-section-half)
}
.order-details-summary .block {
width: calc((100% - var(--s-4)) / 2);
margin: 0 var(--s-4) var(--s-4) 0
}
.order-details-summary .block:nth-child(2n) {
margin: 0 0 var(--s-4)
}
.order-details-summary .block .t-l-1 {
margin: 0 0 var(--s-1)
}
.order-details-summary .order-details-tracking-url {
margin: var(--s-3)
}
.order-details {
margin: 0 0 var(--s-section-half)
}
.order-details .order-details-header,.order-details .order-details-items {
padding: var(--s-3) 0;
border-bottom: 1px solid var(--cr-subdued)
}
.order-details .order-details-header>li:nth-child(1),.order-details .order-details-items>li:nth-child(1) {
width: var(--s-5)
}
.order-details .order-details-header>li:nth-child(2),.order-details .order-details-items>li:nth-child(2) {
flex: 1;
padding: 0 var(--s-3)
}
.order-details .order-details-header>li:nth-child(3),.order-details .order-details-header>li:nth-child(4),.order-details .order-details-items>li:nth-child(3),.order-details .order-details-items>li:nth-child(4) {
width: var(--s-6);
text-align: right
}
.order-details .order-details-header.orders-detail-header,.order-details .order-details-items.orders-detail-header {
white-space: nowrap
}
.order-details .order-details-header.orders-detail-items,.order-details .order-details-items.orders-detail-items {
position: relative;
border-bottom: 1px solid var(--cr-subdued)
}
.order-details .item-thumbnail {
position: relative
}
.order-details .item-thumbnail:after {
content: '';
display: block;
padding-top: 100%
}
.order-details .item-thumbnail img {
width: 80% !important;
height: 80% !important
}
@media screen and (max-width: 600px) {
.order-details {
width:100vw;
margin: 0 calc(0px - var(--s-contain)) var(--s-section);
padding: 0 var(--s-contain) var(--s-3);
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.order-details::-webkit-scrollbar {
height: var(--s-1);
margin: 0 0 var(--s-1)
}
.order-details::-webkit-scrollbar-track {
margin: 0 var(--s-contain) var(--s-1);
background-color: var(--cr-subtle);
border-radius: var(--s-1)
}
.order-details::-webkit-scrollbar-thumb {
height: var(--s-1);
background-color: var(--cr-subdued);
border-radius: var(--s-1)
}
.order-details>ul {
min-width: 600px;
padding-right: var(--s-3)
}
}
.order-details-footer {
max-width: 600px;
float: right
}
.frontpage-hero {
position: relative;
height: calc(var(--s-viewport-height) * 0.85);
max-height: 100%;
overflow: hidden
}
.frontpage-hero .hero-medias .media {
opacity: 0;
pointer-events: none;
transition: 1.2s
}
.frontpage-hero .hero-medias .media.is-active {
opacity: 1;
pointer-events: auto
}
.frontpage-hero .hero-medias p {
display: none
}
.frontpage-hero .hero-medias .media-vimeo-embed-iframe {
position: absolute;
height: calc((var(--s-viewport-height) * 0.85) * 1.01);
width: calc((var(--s-viewport-height) * 0.85) * 1.777 * 1.01);
max-width: unset;
pointer-events: none
}
@media (min-aspect-ratio: 16 / 9) {
.frontpage-hero .hero-medias .media-vimeo-embed-iframe {
width:101vw;
height: 57vw
}
}
.frontpage-hero .hero-content {
position: relative;
padding: 30px 0 var(--s-4);
height: 100%;
transition: color 0.6s
}
.frontpage-hero .hero-content .type-spacing {
margin: 0 0 0 auto;
text-align: right;
font-size: 0
}
.frontpage-hero .hero-content .btn-fill {
width: fit-content;
border: 1px solid #ffa857;
padding: 0 var(--s-4)
}
@media screen and (max-width: 900px) {
.frontpage-hero .hero-content .type-spacing {
width:100%;
color: var(--cr-white);
text-align: center;
margin-top: auto
}
.frontpage-hero .hero-content .type-spacing .t-s-2 {
font: var(--t-s-3)
}
.frontpage-hero .hero-content .type-spacing .t-s-2 br {
display: none
}
}
@media screen and (max-width: 600px) {
.frontpage-hero .hero-content {
padding:var(--s-contain) 0
}
}
.frontpage-product-slider {
margin-top: -1px;
padding: var(--s-3) 0;
border-top: 1px solid var(--cr-silver);
border-bottom: 1px solid var(--cr-silver)
}
.product-index-grid {
margin: 0 auto var(--s-section);
padding-top: calc( var(--s-header) + var(--s-announcement) + var(--s-section-half))
}
.product-index-grid .grid-header {
text-align: center;
margin: 0 auto var(--s-section-half)
}
.product-index-grid .grid-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: var(--s-4) var(--s-3);
margin: var(--s-section-half) auto
}
.product-index-grid .product-card.is-large {
grid-column-start: 1;
grid-column-end: 3
}
@media screen and (max-width: 900px) {
.product-index-grid {
margin:var(--s-4) auto;
padding-top: 0
}
.product-index-grid .grid-content {
grid-template-columns: 100%
}
.product-index-grid .product-card.is-large {
grid-column-start: 1;
grid-column-end: unset
}
}
.header-product-add-to-cart {
position: absolute;
right: calc(var(--s-edge) + 150px + var(--s-3));
top: 0;
padding: 10px 0;
transition: 0.4s
}
.header-product-add-to-cart img {
width: auto;
height: 32px !important;
margin-right: var(--s-2)
}
@media screen and (max-width: 900px) {
.header-product-add-to-cart {
display:none
}
}
.product-hero {
position: relative
}
.product-hero>.f-h {
position: static;
height: 100%
}
.product-hero>.f-h>* {
height: 100%
}
.product-hero .hero-images {
position: relative;
flex: 1;
overflow: hidden
}
.product-hero .hero-images .hero-images-gallery {
position: relative;
width: 100%;
height: calc(var(--s-viewport-height) - var(--s-hero-images-nav))
}
.product-hero .hero-images .hero-images-gallery .flickity-prev-next-button {
height: 100%;
width: 25%;
opacity: 0
}
.product-hero .hero-images .hero-images-gallery .flickity-prev-next-button>* {
display: none
}
.product-hero .hero-images .hero-images-gallery .flickity-prev-next-button.previous {
left: 0;
cursor: w-resize
}
.product-hero .hero-images .hero-images-gallery .flickity-prev-next-button.next {
right: 0;
cursor: e-resize
}
.product-hero .hero-images [data-product-image].object-contain {
width: calc(100% - var(--s-contain) * 2);
max-width: 960px;
max-height: 60vh;
top: 50%;
left: 50%
}
.product-hero .hero-images [data-product-image].object-contain:after {
content: '';
display: block;
padding-top: 50%
}
.product-hero .hero-images .video-play {
position: absolute !important;
width: var(--s-4);
height: var(--s-4) !important;
background-color: var(--cr-white);
border-radius: 100%;
transition: 0.2s
}
.product-hero .hero-images .video-play:after {
content: '';
position: absolute;
display: block;
top: 50%;
left: 54%;
transform: translate3d(-50%, -50%, 0);
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 15px solid var(--cr-black)
}
.product-hero .hero-images [data-product-image].is-playing .video-play {
opacity: 0;
pointer-events: none
}
.product-hero .hero-images .hero-images-nav {
position: relative;
display: flex;
gap: var(--s-2);
width: 100%;
padding: var(--s-3) calc(var(--s-edge) + 14px)
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail {
flex: none;
position: relative;
overflow: hidden;
width: 80px;
height: 80px;
cursor: pointer
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail:after {
content: '';
display: block;
padding-top: 100%
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail.is-active [data-product-thumbnail] {
border-color: var(--cr-coral)
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail [data-product-thumbnail] {
border-radius: 3px;
border: 1px solid transparent;
pointer-events: none
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail .video-play {
width: var(--s-3);
height: var(--s-3) !important
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail .video-play:after {
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 9px solid var(--cr-black)
}
.product-hero .hero-badge {
position: absolute;
top: var(--s-3);
left: var(--s-3);
padding: 9px 12px 6px;
line-height: 1;
color: var(--cr-coral);
border-radius: 14px;
z-index: 10;
pointer-events: none
}
.product-hero .hero-title {
order: 1;
transition: 0.4s;
margin-bottom: var(--s-2)
}
.product-hero .hero-title .hero-subtitle {
margin-top: var(--s-2)
}
.product-hero .hero-title .hero-subtitle span {
margin-left: var(--s-1)
}
.product-hero .hero-content {
position: relative;
width: 100%;
max-width: 440px;
padding: 40px 40px 0;
background-color: var(--cr-white);
z-index: 15
}
.product-hero .hero-content .content-add {
order: 3;
margin: 0 0 var(--s-4);
z-index: 1
}
.product-hero .hero-content .content-header {
order: 2;
margin: 0 0 var(--s-3);
transition: 0.4s
}
.product-hero .hero-content .content-reviews-rating {
height: 20px;
margin: 0 0 var(--s-3)
}
.product-hero .hero-content .content-reviews-rating .write-review-btn-hidden {
display: none !important
}
.product-hero .hero-content .content-reviews-rating .text-m {
text-transform: uppercase;
letter-spacing: 0.1em;
font: var(--t-l-1);
color: var(--cr-kelp-dark) !important
}
.product-hero .hero-content .content-description h1,.product-hero .hero-content .content-description h2,.product-hero .hero-content .content-description h3,.product-hero .hero-content .content-description h4 {
font: var(--t-s-3)
}
.product-hero .hero-content .content-description p,.product-hero .hero-content .content-description ol,.product-hero .hero-content .content-description ul {
font: var(--t-b-2)
}
@media screen and (max-width: 900px) {
.product-hero {
height:unset
}
.product-hero>.f-h {
display: block;
height: auto
}
.product-hero>.f-h>* {
height: auto
}
.product-hero .hero-images {
width: 100%;
flex: unset
}
.product-hero .hero-images,.product-hero .hero-images [data-product-image] {
height: 60vw
}
.product-hero .hero-title {
grid-area: hero-title
}
.product-hero .hero-content {
display: grid;
grid-template-areas: 'hero-title content-add' 'content-header content-add';
grid-template-columns: 1.5fr 1fr;
grid-template-rows: auto 1fr;
max-width: unset;
grid-gap: 0 var(--s-4);
padding: var(--s-4) var(--s-edge);
overflow: unset;
box-shadow: unset
}
.product-hero .hero-content .content-add {
grid-area: content-add
}
.product-hero .hero-content .content-header {
grid-area: content-header;
width: 100%
}
.product-hero .hero-content .content-header>* {
max-width: 460px
}
.product-hero .hero-content .content-header .t-l-1 {
margin-top: var(--s-4)
}
}
@media screen and (max-width: 900px) {
.product-hero .hero-images {
height:unset !important
}
.product-hero .hero-images .hero-images-gallery {
height: 60vw !important
}
.product-hero .flickity-prev-next-button {
display: none
}
.product-hero .hero-images .hero-images-nav {
white-space: nowrap;
overflow-x: auto;
gap: var(--s-1);
padding: var(--s-2) 0 var(--s-2) calc(var(--s-edge) + 14px)
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail {
width: 60px;
height: 60px
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail .video-play {
width: calc(var(--s-3) - 4px);
height: calc(var(--s-3) - 4px) !important
}
.product-hero .hero-images .hero-images-nav .hero-images-thumbnail .video-play:after {
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 7px solid var(--cr-black)
}
.product-hero .flickity-page-dots {
position: relative;
left: unset;
bottom: unset;
transform: unset;
margin: var(--s-2) auto
}
.product-hero .hero-title {
position: absolute;
top: 0;
left: 0;
padding: var(--s-3) var(--s-contain)
}
.product-hero .hero-content {
position: unset;
grid-template-areas: 'content-add' 'content-header';
grid-template-columns: 1fr;
grid-gap: var(--s-3);
padding: var(--s-section-half) var(--s-edge)
}
.product-hero .hero-content>* {
width: 100%;
max-width: 420px;
margin-left: auto !important;
margin-right: auto !important
}
.product-hero .hero-content .product-quick-add {
max-width: 100%
}
}
@media screen and (max-width: 600px) {
.product-hero .hero-title {
padding:var(--s-2) var(--s-contain)
}
.product-hero .hero-badge {
top: var(--s-2);
right: var(--s-contain);
left: unset
}
}
.product-details {
margin: var(--s-4) auto
}
.product-details .content-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
width: 100%;
margin: var(--s-3) 0
}
.product-details .content-detail {
flex: auto;
max-width: 640px
}
.product-details .content-detail .content {
flex: 1
}
.product-details .content-image {
position: relative;
width: var(--s-4);
height: var(--s-4);
border-radius: 100%;
overflow: hidden;
margin-right: var(--s-2)
}
.product-details .content-image::after {
content: '';
display: block;
padding-top: 100%
}
.product-details .comp-accordion .accordion-content {
padding-left: calc(var(--s-2) + var(--s-3))
}
.product-details .comp-accordion .accordion-content-interior {
display: flex;
align-items: center;
max-width: 100%
}
.product-details .comp-accordion ul {
flex: none;
list-style: none;
padding: 0
}
.product-details .comp-accordion ul li {
position: relative
}
.product-details .comp-accordion ul.content-list li {
padding-left: calc(16px + var(--s-2))
}
.product-details .comp-accordion ul li:not(:last-child) {
margin-bottom: var(--s-1)
}
.product-details .comp-accordion p ~ ul {
margin-top: var(--s-1)
}
.product-details .comp-accordion .svg-checkmark,.product-details .comp-accordion .svg-close {
display: inline-block;
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 12px;
color: var(--cr-coral)
}
.product-details .comp-accordion.product-details-key_benefits .content-wrapper {
gap: calc(var(--s-3)) 0
}
.product-details .comp-accordion.product-details-key_benefits .content-wrapper .content-detail {
width: calc(100%/3)
}
.product-details .comp-accordion.product-details-scent_profile ul.scent-profile-list {
display: flex;
gap: var(--s-3)
}
.product-details .comp-accordion.product-details-scent_profile ul.scent-profile-list li {
max-width: 120px;
text-align: center
}
.product-details .comp-accordion.product-details-scent_profile ul.scent-profile-list .object-contain {
position: relative;
overflow: hidden;
width: 60px;
height: 60px;
margin: 0 auto var(--s-1)
}
.product-details .comp-accordion.product-details-scent_profile ul.scent-profile-list .object-contain:after {
content: '';
display: block;
padding-top: 100%
}
.product-details .comp-accordion.product-details-brand-certification .content-wrapper {
align-items: center;
gap: calc(var(--s-section) / 2)
}
.product-details .comp-accordion.product-details-brand-certification ul.certification-list {
flex: 1;
display: flex;
align-items: center;
width: 100%;
gap: var(--s-4);
max-width: 720px
}
.product-details .comp-accordion.product-details-brand-certification ul.certification-list svg {
width: 100%
}
@media screen and (max-width: 900px) {
.product-details .comp-accordion .accordion-content-interior {
display:block
}
.product-details .comp-accordion.product-details-brand-certification .content-wrapper {
align-items: start
}
.product-details .comp-accordion.product-details-brand-certification ul.certification-list {
max-width: 540px;
gap: var(--s-2)
}
}
@media screen and (max-width: 900px) {
.product-details {
padding:0;
border-bottom: none
}
.product-details .content-wrapper {
flex-direction: column
}
.product-details .comp-accordion.product-details-key_benefits .content-wrapper .content-detail {
width: 100%
}
.product-details .comp-accordion.product-details-scent_profile ul.scent-profile-list {
justify-content: flex-start
}
.product-details .comp-accordion.product-details-scent_profile .content-detail {
text-align: center
}
}
.product-inside .product-quick-add {
display: none
}
@media screen and (max-width: 900px) {
.product-inside {
margin:0
}
}
.product-ingredients .ingredients-header {
width: 100%;
display: block;
margin: 0 0 var(--s-4)
}
.product-ingredients #ingredients-selector {
font: var(--t-h-4)
}
.product-ingredients [data-kit-ingredients]:not(.is-active) {
display: none
}
.product-ingredients .ingredients-super-ingredients {
max-width: 450px;
margin: 0 auto 0 0;
padding-left: var(--s-5)
}
.product-ingredients .ingredients-super-ingredients ul {
list-style: none;
padding: 0
}
.product-ingredients .ingredients-super-ingredients ul li:not(:last-child) {
margin: 0 0 30px
}
.product-ingredients .ingredients-super-ingredients ul li .t-h-3:not(:last-child) {
margin: 0 0 var(--s-2)
}
.product-ingredients .ingredients-all-ingredients {
flex: 1;
max-width: 540px;
margin: 0 40px 0 var(--s-4)
}
.product-ingredients .ingredients-all-ingredients>.t-l-1 {
margin: 0 0 var(--s-3)
}
.product-ingredients .ingredients-all-ingredients ul {
padding: 0;
list-style-type: none
}
.product-ingredients .ingredients-all-ingredients ul li {
display: inline
}
.product-ingredients .ingredients-all-ingredients ul li:not(:last-child):after {
content: ', ';
margin: 0 0 0 -0.2em
}
.product-ingredients .ingredients-all-ingredients ul li[data-ingredient-hover] {
cursor: pointer;
transition: 0.4s
}
@media (hover: hover) {
.product-ingredients .ingredients-all-ingredients ul li[data-ingredient-hover]:hover {
color:var(--cr-coral)
}
}
.product-ingredients .ingredients-hint {
position: absolute;
top: 20px;
right: 0;
display: flex;
align-items: center;
opacity: 0
}
.product-ingredients .ingredients-hint .btn-toggle {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
pointer-events: none;
margin-top: -6px;
margin-left: var(--s-2)
}
.product-ingredients .ingredients-hint .btn-toggle:before,.product-ingredients .ingredients-hint .btn-toggle:after {
display: none
}
.product-ingredients .ingredients-hint .svg-ingredient {
width: 18px;
height: 18px
}
@media (hover: hover) {
.product-ingredients .ingredients-hint {
opacity:1
}
}
@media screen and (max-width: 1240px) {
.product-ingredients .ingredients-all-ingredients {
margin-right:0
}
}
@media screen and (max-width: 900px) {
.product-ingredients>.c-1 {
max-width:420px;
margin: 0 auto
}
.product-ingredients .ingredients-header {
margin: 0 0 var(--s-3)
}
.product-ingredients .ingredients-super-ingredients,.product-ingredients .ingredients-all-ingredients {
width: 100%;
max-width: unset;
flex: unset;
margin: auto;
padding-left: 0
}
.product-ingredients .ingredients-super-ingredients {
padding-bottom: var(--s-3);
margin-bottom: var(--s-3);
border-bottom: 1px solid var(--cr-silver)
}
.product-ingredients .ingredients-super-ingredients ul li:not(:last-child) {
margin: 0 0 var(--s-3)
}
.product-ingredients .ingredients-hint {
display: none
}
}
.product-reviews .reviews-image {
display: block;
margin: 0 auto var(--s-3);
height: 100px !important;
width: auto
}
.product-reviews .t-h-1 {
text-align: center;
margin: 0 0 var(--s-section-half)
}
.product-inside,.product-ingredients,.product-reviews,.product-related {
margin: var(--s-4) 0
}
.global-minicart {
position: fixed;
width: 100%;
max-width: calc(330px + var(--s-edge) + var(--s-contain));
height: 100%;
top: 0;
right: 0;
transform: translate3d(101%, 0, 0);
pointer-events: none;
z-index: 110;
transition: 0.8s var(--a-panel);
box-shadow: -12px 0 24px rgba(0,0,0,0)
}
.global-minicart .minicart-header {
padding: calc(var(--s-3) + (64px - var(--s-4)) / 2) var(--s-3) var(--s-3);
line-height: 0;
justify-content: space-between;
border-bottom: 1px solid var(--cr-subdued)
}
.global-minicart .minicart-header .minicart-close {
background: var(--cr-white);
box-shadow: inset 0 0 0 1px transparent,0 var(--s-2) var(--s-3) rgba(0,0,0,0);
border: 1px solid var(--cr-silver)
}
.global-minicart .minicart-header .minicart-close:after {
display: none
}
.global-minicart .minicart-header .minicart-close svg {
position: relative;
width: 13px;
height: 13px;
margin: 17px;
transition: 0.4s
}
@media (hover: hover) {
.global-minicart .minicart-header .minicart-close:hover {
color:var(--cr-black);
border-color: transparent;
background-color: var(--cr-white);
box-shadow: var(--cr-shadow)
}
.global-minicart .minicart-header .minicart-close:hover svg {
color: var(--cr-coral)
}
}
.global-minicart .minicart-content {
flex: 1;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch
}
.global-minicart .minicart-messaging {
padding: var(--s-2) var(--s-3);
text-align: center
}
.global-minicart .minicart-free-shipping-progress {
position: relative;
border-top: 1px solid var(--cr-silver)
}
.global-minicart .minicart-free-shipping-progress .minicart-free-shipping-progress-bar {
position: absolute;
height: 1px;
top: -1px;
left: 0;
background-color: var(--cr-coral);
transition: 0.2s
}
.global-minicart .minicart-free-shipping-progress .t-s-3 {
height: 44px;
overflow: hidden;
padding: var(--s-2) 0;
text-align: center;
background-color: var(--cr-subtle);
transition: 0.4s
}
.global-minicart .minicart-free-shipping-progress .minicart-free-shipping-progress-bar[style*='100%'] ~ .t-s-3 {
height: 0;
padding: 0 var(--s-3);
opacity: 0
}
.global-minicart .minicart-footer {
padding: var(--s-3) var(--s-4) var(--s-3) var(--s-4)
}
.global-minicart .minicart-footer .summary {
margin: 0 0 var(--s-3);
padding: 0 var(--s-1);
align-items: center
}
.global-minicart .minicart-footer .summary .summary-left {
margin: 3px 0 0
}
.global-minicart .minicart-empty {
margin: auto;
padding: var(--s-4) var(--s-edge) var(--s-4) var(--s-4);
text-align: center
}
.global-minicart .cart-items-wrapper .cart-item {
order: 2
}
.global-minicart .cart-items-wrapper .cart-item.is-kit-item {
order: 1
}
.global-minicart .cart-items-wrapper .cart-item.is-dispenser {
order: 3
}
.global-minicart .cart-item-kit {
padding: var(--s-3)
}
.global-minicart .cart-item-kit .item-kit-header {
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--cr-silver)
}
.global-minicart .cart-item-kit .item-kit-header .t-h-4 {
margin-right: var(--s-1)
}
.global-minicart .cart-item-kit .item-kit-header-price {
margin-left: auto
}
.global-minicart .cart-item-kit .item-kit-header-description {
width: 100%;
margin: 5px 0 0
}
.global-minicart .cart-item-kit .cart-item {
padding-left: 0;
padding-right: 0
}
@media screen and (max-width: 600px) {
.global-minicart {
max-width:100%;
z-index: 120
}
.global-minicart .minicart-header {
padding: var(--s-contain)
}
.global-minicart .minicart-messaging,.global-minicart .minicart-footer,.global-minicart .minicart-free-shipping-progress .minicart-free-shipping-progress-bar[style*='100%'] ~ .t-s-3,.global-minicart .minicart-empty {
padding-left: var(--s-contain);
padding-right: var(--s-contain)
}
}
html:not(.cart-has-items) .global-minicart>*:not(.minicart-empty):not(.minicart-header),html.cart-has-items .global-minicart .minicart-empty {
display: none
}
html.minicart-is-active {
overflow: hidden
}
html.minicart-is-active .global-header .header-actions {
color: var(--cr-black) !important
}
html.minicart-is-active .global-header .header-actions svg {
color: var(--cr-coral) !important
}
html.minicart-is-active .global-minicart {
transform: translate3d(0, 0, 0);
pointer-events: auto;
box-shadow: -12px 0 24px rgba(0,0,0,0.04)
}
.cart-item {
padding: var(--s-3);
border-bottom: 1px solid var(--cr-silver)
}
.cart-item .item-header {
margin: 0 0 var(--s-3)
}
@media (hover: hover) {
.cart-item .item-header .item-remove-trigger:hover {
color:var(--cr-coral)
}
}
.cart-item .item-header .item-title {
margin: 0 var(--s-2) 0 0
}
.cart-item .item-header .item-price {
margin: 0 0 0 auto
}
.cart-item .item-header .item-dispenser-size {
display: block;
width: 100%;
margin: var(--s-1) 0 0
}
.cart-item .item-thumbnail {
position: relative;
margin: auto;
border-radius: var(--s-1);
overflow: hidden
}
.cart-item .item-thumbnail:after {
content: '';
display: block;
padding-top: 58%
}
.cart-item .item-footer {
margin: var(--s-3) 0 0
}
.cart-item .item-footer .item-purchase-type {
margin: 3px var(--s-2) 0 0
}
.cart-item .item-footer .item-quantity {
margin: 0 0 0 auto
}
.cart-item .item-footer .item-remove-trigger {
width: var(--s-2);
height: var(--s-2);
margin: 0 0 0 var(--s-2);
color: var(--cr-silver);
transition: 0.6s
}
@media (hover: hover) {
.cart-item .item-footer .item-remove-trigger:hover {
color:var(--cr-black)
}
}
.cart-item .item-note {
margin: var(--s-2) 0 0;
text-align: center;
opacity: 0.5
}
.about-hero {
min-height: var(--s-viewport-height);
margin-bottom: var(--s-viewport-height);
padding: calc(var(--s-3) + var(--s-4) + var(--s-4)) 0 0
}
.about-hero .hero-images {
transition: 0.4s
}
.about-hero .hero-images .object-fit {
position: fixed;
transition: opacity 0.4s 0.4s;
opacity: 0
}
.about-hero .hero-images .object-fit.is-active {
opacity: 1;
transition-delay: 0s
}
.about-hero .hero-circular {
position: fixed;
width: 90vh;
max-width: 580px;
top: 50vh;
border-radius: 100%;
transition: 0.4s;
opacity: 0;
pointer-events: none
}
.about-hero .hero-circular .svg-logo {
position: absolute;
width: 90%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
color: var(--cr-coral);
transition: 0.4s
}
.about-hero .hero-circular:after {
content: '';
display: block;
padding-top: 100%
}
@media (max-aspect-ratio: 1 / 1) {
.about-hero .hero-circular {
width:calc(100vw - var(--s-contain) * 2)
}
}
.about-hero .hero-content {
pointer-events: none;
transition: color 0.4s
}
.about-hero .hero-content h1,.about-hero .hero-content ul {
display: inline-block;
vertical-align: top;
margin-top: calc(var(--s-viewport-height) / 2 - var(--s-5) - 1em);
transition: opacity 0.8s
}
.about-hero .hero-content h1 {
position: fixed
}
.about-hero .hero-content ul {
margin-left: 2.8em
}
.about-hero .hero-content ul li {
scroll-snap-align: start;
transition: 0.2s
}
.about-hero .hero-images {
pointer-events: none
}
.about-hero .hero-ctas {
position: fixed;
bottom: var(--s-4);
right: var(--s-edge);
left: var(--s-edge);
opacity: 0;
text-align: right;
pointer-events: none;
transition: opacity 0.4s
}
.about-hero .hero-ctas>*:not(:last-child) {
margin: 0 var(--s-2) 0 0
}
.about-hero .scroll-trigger {
position: fixed;
bottom: var(--s-4);
left: 50%;
transform: translateX(-50%);
color: var(--cr-white);
transition: opacity 0.8s
}
@media screen and (max-width: 900px) {
.about-hero .scroll-trigger {
bottom:var(--s-2)
}
}
@media screen and (max-width: 600px) {
.about-hero .hero-circular {
top:calc(var(--s-viewport-height) * 0.4)
}
.about-hero .hero-circular .svg-logo {
width: calc(100% - 85px * 2);
max-width: 180px
}
.about-hero .hero-content h1,.about-hero .hero-content ul {
margin-top: calc(var(--s-viewport-height) * 0.4 - var(--s-5) - 1.6em)
}
.about-hero .hero-content .t-h-2 {
font-size: 28px
}
.about-hero .hero-ctas {
bottom: var(--s-3)
}
.about-hero .hero-ctas>* {
width: 100% !important
}
.about-hero .hero-ctas>*:not(:last-child) {
margin: 0 0 var(--s-2)
}
}
html.about-hero-is-scrolled .about-hero .hero-content {
color: var(--cr-black)
}
html.about-hero-is-scrolled .about-hero .hero-images,html.about-hero-is-scrolled .about-hero .hero-content ul,html.about-hero-is-scrolled .about-hero .scroll-trigger {
opacity: 0;
transition: opacity 0.8s;
transition-delay: 0s
}
html.about-hero-is-scrolled .about-hero .hero-circular,html.about-hero-is-scrolled .about-hero .hero-ctas {
opacity: 1
}
html.about-hero-is-scrolled .about-hero .hero-ctas {
pointer-events: auto
}
html.about-hero-is-scrolled-past .hero-circular,html.about-hero-is-scrolled-past .hero-content h1 {
opacity: 0
}
.cyclability-hero {
position: relative;
margin: var(--s-section) auto;
text-align: center
}
.cyclability-hero>.c {
max-width: 405px
}
.cyclability-cyclability {
margin: var(--s-section) auto
}
.cyclability-cyclability .cyclability-header {
max-width: 450px;
margin: 0 0 var(--s-section)
}
.cyclability-cyclability .cyclability-circular-wrapper {
width: 50%;
margin: 0 var(--s-4) 0 0
}
.cyclability-cyclability .cyclability-text-wrapper {
flex: 1;
margin: 0 0 0 auto
}
.cyclability-cyclability .cyclability-circular {
position: sticky;
top: calc((var(--s-viewport-height) - 600px) / 2);
max-width: 600px;
box-shadow: inset 0 0 0 1px var(--cr-silver);
border-radius: 100%;
transition: 0.4s
}
@media screen and (max-width: 1300px) {
.cyclability-cyclability .cyclability-circular {
top:calc( (var(--s-viewport-height) - ((100vw - var(--s-contain) * 2) * 0.5)) / 2)
}
}
.cyclability-cyclability .cyclability-circular:after {
content: '';
display: block;
padding-top: 100%
}
.cyclability-cyclability .cyclability-circular .svg-logo {
position: absolute;
width: 60%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0)
}
.cyclability-cyclability .cyclability-circular .svg-logo path {
fill: var(--cr-white);
stroke: var(--cr-silver);
stroke-width: 4px;
transition: 0.4s
}
.cyclability-cyclability .cyclability-circular .circular-progress-wrapper {
transform: rotate(-90deg)
}
.cyclability-cyclability .cyclability-circular .point {
position: absolute;
width: 32px;
height: 32px;
border-radius: 100%;
transform: translate3d(-50%, -50%, 0);
border: 1px solid var(--cr-silver);
background-color: var(--cr-white)
}
.cyclability-cyclability .cyclability-circular .point:after {
content: '';
display: block;
width: 6px;
height: 6px;
margin: 12px;
background: var(--cr-gradient-coral);
border-radius: 100%
}
.cyclability-cyclability .cyclability-circular .point span {
position: absolute;
width: fit-content;
top: 0;
left: 50%;
text-align: center;
transform: translate3d(-50%, calc(-100% - var(--s-2)), 0)
}
.cyclability-cyclability .cyclability-text {
margin: 0;
max-width: 360px
}
.cyclability-cyclability .cyclability-text .cyclability-leading {
margin: 0 0 var(--s-5)
}
.cyclability-cyclability .cyclability-text .block:not(:last-child) {
margin: 0 0 var(--s-4)
}
.cyclability-cyclability .cyclability-text .block>*:not(:last-child) {
margin: 0 0 var(--s-2)
}
.cyclability-cyclability.circular-progress-is-complete .cyclability-circular .svg-logo path {
fill: var(--cr-coral);
stroke: rgba(255,255,255,0)
}
@media screen and (min-width: 900px) {
.cyclability-cyclability .cyclability-blocks .block {
filter:opacity(0.2) grayscale(1);
transition: 0.4s
}
.cyclability-cyclability .cyclability-blocks .block.is-active {
filter: opacity(1) grayscale(0)
}
}
@media screen and (max-width: 900px) {
.cyclability-cyclability .cyclability-header .t-h-1 {
margin:0 0 var(--s-section-half)
}
.cyclability-cyclability .cyclability-circular-wrapper {
width: 90%;
max-width: 450px;
margin: 0 0 var(--s-section-half)
}
.cyclability-cyclability .cyclability-circular-wrapper .circular-progress {
transition: stroke-dashoffset 1.2s
}
.cyclability-cyclability .cyclability-circular .svg-logo path {
stroke-width: 6px
}
.cyclability-cyclability .cyclability-text-wrapper {
width: 100%;
flex: unset;
margin: 0
}
.cyclability-cyclability .cyclability-text {
max-width: unset
}
.cyclability-cyclability .cyclability-blocks {
width: 100vw;
margin: 0 calc(0px - var(--s-contain))
}
.cyclability-cyclability .cyclability-blocks .block {
width: 100%;
max-width: 450px;
transition: filter 0.4s;
filter: opacity(0.2) grayscale(1)
}
.cyclability-cyclability .cyclability-blocks .block.is-selected {
filter: opacity(1) grayscale(0)
}
.cyclability-cyclability .cyclability-blocks .block:not(:last-child) {
margin: 0 var(--s-4) 0 0
}
.cyclability-cyclability .cyclability-blocks .flickity-slider {
margin: 0 0 0 var(--s-contain)
}
}
@media screen and (max-width: 600px) {
.cyclability-cyclability .cyclability-circular-wrapper {
margin:var(--s-3) auto var(--s-section)
}
.cyclability-cyclability .cyclability-circular .point span {
transform: translate3d(-50%, calc(-100% - var(--s-1)), 0)
}
.cyclability-cyclability .cyclability-blocks .block {
max-width: 300px
}
.cyclability-cyclability .cyclability-blocks .block:not(:last-child) {
margin: 0 var(--s-3) 0 0
}
}
.cyclability-framework {
margin: calc(var(--s-section) * 2) auto;
text-align: center
}
.comp-cyclability-details {
position: relative;
padding: 1px 0
}
.comp-cyclability-details>.c {
position: relative;
margin: var(--s-section) auto
}
.comp-cyclability-details .details-header {
position: relative;
width: calc(50% - var(--s-4));
margin: 0 var(--s-4) 0 0
}
.comp-cyclability-details .details-header .details-header-sticky {
position: sticky;
top: calc(var(--s-header) + var(--s-4))
}
.comp-cyclability-details .details-header .t-h-2 {
margin: 0 0 var(--s-3)
}
.comp-cyclability-details .details-header ul {
list-style: none;
padding-left: var(--s-5)
}
.comp-cyclability-details .details-header ul li {
position: relative;
max-width: 380px;
padding-left: 1.3em
}
.comp-cyclability-details .details-header ul li svg {
position: absolute;
width: 16px;
top: 0.5em;
left: 0;
color: var(--cr-coral)
}
.comp-cyclability-details .details-header ul li:not(:last-child) {
margin: 0 0 var(--s-3)
}
.comp-cyclability-details .details-content {
position: relative;
flex: 1
}
.comp-cyclability-details .details-content .details-content-interior {
max-width: 360px;
margin: auto
}
.comp-cyclability-details .details-content .svg-coral {
width: 40px;
margin: 0 0 var(--s-1)
}
.comp-cyclability-details .details-content .block:not(:last-child) {
margin: 0 0 var(--s-4)
}
.comp-cyclability-details .details-content .block p {
max-width: 300px
}
.comp-cyclability-details .details-content hr {
border: 0;
margin: var(--s-4) 0;
height: 1px;
background-color: var(--cr-silver)
}
.comp-cyclability-details.cr-white .details-header ul li svg {
color: var(--cr-white)
}
.comp-cyclability-details.cr-white .details-content hr {
background-color: var(--cr-white)
}
@media screen and (max-width: 900px) {
.comp-cyclability-details>.c {
max-width:360px
}
.comp-cyclability-details .details-header {
width: 100%;
margin: 0 0 var(--s-section)
}
.comp-cyclability-details .details-header h2 {
position: relative;
top: unset
}
.comp-cyclability-details .details-header ul {
padding-left: 0
}
.comp-cyclability-details .details-content {
flex: unset
}
.comp-cyclability-details .details-content .block:not(:last-child) {
margin: 0 0 var(--s-section-half)
}
}
.ingredients-hero {
position: relative;
padding: calc(var(--s-header) + var(--s-3)) 0 var(--s-4)
}
.ingredients-hero .hero-content>* {
max-width: 320px
}
.ingredients-hero .hero-content .t-h-1 {
margin: 0 0 var(--s-3)
}
.ingredients-applications .applications-images {
position: relative;
width: 50%
}
.ingredients-applications .applications-images .applications-images-interior {
position: sticky;
height: var(--s-viewport-height);
top: 0
}
.ingredients-applications .applications-images .object-fit {
opacity: 0;
transition: 0.8s
}
.ingredients-applications .applications-images .object-fit.is-active {
opacity: 1
}
.ingredients-applications .applications-content {
flex: 1;
padding: 0 var(--s-edge) 0 var(--s-4)
}
.ingredients-applications .applications-content .applications-content-interior {
max-width: 540px;
margin: calc(var(--s-viewport-height) / 2) auto
}
.ingredients-applications .applications-benefit {
max-width: 420px;
margin: var(--s-5) 0 0
}
.ingredients-applications .applications-benefit ul {
padding: 0 0 0 40px;
list-style: none
}
.ingredients-applications .applications-benefit ul li {
position: relative
}
.ingredients-applications .applications-benefit ul li:not(:last-child) {
margin: 0 0 var(--s-3)
}
.ingredients-applications .applications-benefit ul li:before {
content: '';
display: block;
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 0;
transform: translate3d(-40px, -50%, 0);
background: url(../assets/svg-checkmark-coral.svg) center/contain no-repeat
}
@media screen and (max-width: 900px) {
.ingredients-applications .applications-images {
display:none
}
.ingredients-applications .applications-content {
flex: auto;
margin: var(--s-edge) auto var(--s-section);
padding: 0 var(--s-edge)
}
.ingredients-applications .applications-content img {
margin: 0 0 var(--s-3)
}
.ingredients-applications .applications-content .applications-content-interior {
margin: 0
}
.ingredients-applications .applications-content .applications-content-interior:not(:last-child) {
margin: 0 0 var(--s-section)
}
.ingredients-applications .applications-benefit {
margin: var(--s-section-half) 0 0
}
}
.ingredients-super-plants {
margin: var(--s-section) auto
}
.ingredients-super-plants .super-plants-header {
width: calc(100% / 2 - var(--s-4));
margin: 0 var(--s-4) 0 0
}
.ingredients-super-plants .super-plants-header>.t-h-1 {
max-width: 480px
}
.ingredients-super-plants .super-plants-header>p {
max-width: 400px
}
.ingredients-super-plants .super-plant-content {
flex: 1
}
.ingredients-super-plants .ingredient-card {
width: calc((100% - var(--s-4)) / 2);
margin: 0 var(--s-4) var(--s-4) 0
}
.ingredients-super-plants .ingredient-card:nth-child(2n) {
margin: 0 0 var(--s-4)
}
@media screen and (max-width: 900px) {
.ingredients-super-plants .super-plants-header {
width:100%;
margin: 0 0 var(--s-section-half)
}
.ingredients-super-plants .ingredient-card {
max-width: 100%
}
}
@media screen and (max-width: 600px) {
.ingredients-super-plants>.f-h {
display:block
}
.ingredients-super-plants .super-plant-content {
width: 100vw;
margin: 0 calc(0px - var(--s-contain));
padding: var(--s-2) var(--s-contain) var(--s-4);
flex-wrap: nowrap !important;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
scroll-snap-type: x mandatory;
scroll-padding: 0 0 0 var(--s-contain)
}
.ingredients-super-plants .super-plant-content:after {
content: 'this that this';
display: inline-block;
width: 100vw;
height: 0;
visibility: hidden
}
.ingredients-super-plants .ingredient-card {
display: inline-block;
flex-shrink: 0;
width: 300px;
max-width: calc(90vw - var(--s-contain) * 2);
margin: 0 var(--s-3) 0 0 !important;
white-space: normal;
scroll-snap-align: start
}
}
.ingredients-glossary {
margin: var(--s-section) auto
}
.ingredients-glossary .glossary-header {
width: calc(100% / 2 - var(--s-4));
margin: 0 var(--s-4) 0 0
}
.ingredients-glossary .glossary-header>* {
max-width: 400px
}
.ingredients-glossary .glossary-content {
position: relative;
flex: 1
}
.ingredients-glossary .glossary-tabs {
margin: 0 0 var(--s-section-half)
}
.ingredients-glossary .glossary-tabs ul {
list-style: none
}
.ingredients-glossary .glossary-tabs ul li {
display: inline-block
}
.ingredients-glossary .glossary-tabs ul li:not(:last-child) {
margin: 0 var(--s-2) 0 0
}
.ingredients-glossary .glossary-list .ingredient {
margin: 0 0 var(--s-3)
}
.ingredients-glossary .glossary-list .ingredient-title {
position: relative;
padding-right: var(--s-3);
cursor: pointer
}
.ingredients-glossary .glossary-list .ingredient-title .svg-plus {
position: absolute;
width: 12px;
top: 14px;
right: 0;
transition: 0.2s
}
.ingredients-glossary .glossary-list .ingredient-title .svg-plus path {
transform-origin: center;
transition: 0.2s
}
@media (hover: hover) {
.ingredients-glossary .glossary-list .ingredient-title:hover .svg-plus {
color:var(--cr-coral)
}
}
.ingredients-glossary .glossary-list .ingredient.is-active .ingredient-title svg path:first-child {
transform: rotate(90deg)
}
.ingredients-glossary .glossary-list .ingredient-content {
position: relative;
height: 0;
padding: 0 0 1px;
overflow: hidden
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-content-interior {
padding: var(--s-4) 0;
border-bottom: 1px solid var(--cr-silver)
}
.ingredients-glossary .glossary-list .ingredient-content .t-l-1 {
margin: 0 0 var(--s-3)
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-ewg-score {
margin: 0 0 36px
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-ewg-score .t-h-4 {
display: block;
width: var(--s-4);
height: var(--s-4);
line-height: var(--s-4);
text-align: center;
border: 1px solid var(--cr-silver);
border-radius: 100%
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-products-image {
margin: 0 0 var(--s-3)
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-products-image a {
display: inline-block;
margin: 0 var(--s-2) 0 0
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-products-image a img {
max-width: 30px
}
.ingredients-glossary .glossary-list .ingredient-content .ingredient-products-title a:not(:last-child):after {
content: ', ';
margin: 0 0 0 -0.25em
}
.ingredients-glossary .ingredient-content-left {
width: calc((100% - var(--s-4)) / 2);
margin: 0 var(--s-4) 0 0
}
.ingredients-glossary .ingredient-content-right {
width: calc((100% - var(--s-4)) / 2)
}
@media screen and (max-width: 900px) {
.ingredients-glossary .glossary-header {
width:100%;
margin: 0 0 var(--s-section-half)
}
.ingredients-glossary .glossary-content {
position: relative;
flex: unset
}
.ingredients-glossary .glossary-tabs ul {
width: 100vw;
white-space: nowrap;
line-height: 1;
margin: 0 calc(0px - var(--s-contain));
padding: var(--s-2) var(--s-contain);
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
}
@media screen and (max-width: 600px) {
.ingredients-glossary .ingredient-content-left {
width:100%;
margin: 0 0 var(--s-section-half)
}
.ingredients-glossary .ingredient-content-right {
width: 100%
}
}
.faq-header {
padding: calc(var(--s-header) + var(--s-announcement) + var(--s-3)) 0 var(--s-section);
margin: 0 0 var(--s-section)
}
.faq-content-wrapper {
margin: var(--s-section) auto
}
.faq-sidebar {
width: 30%;
max-width: 400px;
margin: 0 var(--s-5) 0 0
}
.faq-sidebar #shopify-section-faq-sidebar {
position: sticky;
top: calc(var(--s-header) + var(--s-4))
}
.faq-sidebar .t-h-1 {
margin: 0 0 var(--s-4)
}
.faq-sidebar .sidebar-block:not(:last-child) {
margin: 0 0 var(--s-3)
}
.faq-content {
flex: 1
}
.faq-group {
margin: 0 0 var(--s-section)
}
.faq-group>.t-h-2 {
margin: 0 0 var(--s-section-half)
}
@media screen and (max-width: 900px) {
.faq-sidebar {
width:100%;
max-width: unset;
margin: 0 0 var(--s-section)
}
.faq-content {
width: 100%;
flex: unset
}
}
.hiw-hero {
position: relative;
margin: var(--s-4) auto;
text-align: center
}
.hiw-hero>.c {
max-width: 405px
}
.hiw-hiw,.hiw-recycle {
margin: var(--s-4) auto
}
.hiw-carbon-neutral {
padding: var(--s-section-half);
border-top: 1px solid var(--cr-silver);
text-align: center
}
.hiw-carbon-neutral .svg-co2-with-text {
display: block;
height: 78px;
margin-left: auto;
margin-right: auto
}
.purchase-frequency.is-active {
display: none !important;
}
.purchase-frequency {
display: none !important;
}
@media only screen and (max-width: 600px) {
.product-hero .hero-content .content-add {
margin-bottom: 10px;
}
section#product-details {
margin-top: 0;
}
}
.frontpage-hero .hero-content .btn-fill {
border: none;
}
@media only screen and (max-width: 770px) {
.minicart-footer {
margin-bottom: 30px;
}
.product-hero .hero-content .content-header {
margin-bottom: -30px;
}
}
.product-hero .hero-content .content-header {
margin-bottom: -10px;
}
@media only screen and (max-width: 770px) {
.product-hero .hero-content .content-header {
margin-bottom: -30px;
}
}
.global-header, .is_scrolled .global-announcement {
transform: none !important;
}
.global-header {
top: 40px;
}
/* NEW LANDING PAGE */
.image-section-inner {
display: flex;
flex-direction: revert;
align-items: center;
}
.image-section-inner-text {
padding: 50px 20px 0 20px;
margin-bottom: -50px;
}
@media (min-width: 770px) {
.image-section-inner-text {
width: 50%;
padding: 0 50px;
margin-bottom: 0px;
}
}
.sec-title {
margin-bottom: 32px;
font-style: normal;
font-weight: bold;
font-size: 50px;
line-height: 100%;
display: flex;
align-items: center;
letter-spacing: -0.02em;
}
.sec-text {
margin-bottom: 32px;
}
.image-section-inner-text .btn-fill {
max-width: 211px;
margin-bottom: 36px;
}
.sec-text p {
font-size: 18px;
margin-bottom: 18px;
}
.image-section-inner.img_right {
flex-direction: row-reverse;
}
.image-section-inner-image {
width: 50%;
}
.image-section-inner-image img {
width: 100%;
height: auto;
}
.sec-number {
font: var(--t-h-3);
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
display: flex;
align-items: center;
letter-spacing: -0.02em;
color: #FA4616;
margin-bottom: 16px;
}
.single_product {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
gap: 48px;
margin-bottom: 97px;
margin-top: 48px;
padding-left: 15px;
padding-right: 15px;
}
.single_product img {
max-width: 369px;
}
.middle h1 {
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 90%;
display: flex;
align-items: center;
letter-spacing: -0.02em;
/* Black Urchin */
color: #1C201C;
}
.middle p {
margin-bottom: 32px;
}
section.featured-collection {
max-width: 1280px;
margin: 0 auto;
margin-bottom: 48px;
}
.cole_une {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
}
.cole_une .intt {
max-width: calc(33.333% - 25px);
}
.cole_une h2 {
font-style: bold;
font-weight: bold;
font-size: 32px;
line-height: 90%;
/* or 29px */
display: flex;
align-items: center;
letter-spacing: -0.02em;
/* Black Urchin */
color: #1C201C;
margin-bottom: 8px;
}
.cole_une {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 24px;
}
.intt img {
margin-bottom: 16px;
}
.intt .yotpo.bottomLine.yotpo-small {
margin-bottom: 16px;
}
.leftare {
display: flex;
flex-direction: revert;
justify-content: space-between;
align-items: baseline;
}
.leftare span {
font-family: 'Aldine721 BT';
font-style: italic;
font-weight: 400;
font-size: 20px;
line-height: 20px;
}
.leftare {
display: flex;
flex-direction: revert;
justify-content: space-between;
align-items: baseline;
}
.leftare span {
font-family: 'Aldine721 BT';
font-style: italic;
font-weight: 400;
font-size: 20px;
line-height: 20px;
}
.single_product span[data-product-price] {
font-family: 'Aldine721 BT';
font-style: italic;
font-weight: 400;
font-size: 20px;
line-height: 20px;
}
h2.featured-collection__title {
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 56px;
text-align: center;
color: #1C201C;
margin-bottom: 48px;
}
ul.slick-dots li {
font-size: 0;
}
li.slick-active {
}
.slick-dots li.slick-active {
width: 4px;
height: 4px;
background-color: #ffff;
border-radius: 100px;
}
ul.slick-dots {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
display: flex;
gap: 10px;
align-items: center;
background: rgba(255, 255, 255, 0.04);
mix-blend-mode: normal;
border: 1px solid rgba(203, 211, 221, 0.48);
backdrop-filter: blur(16px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 100px;
padding: 18px 26px 18px 26px;
}
ul.slick-dots li {
width: 5px;
height: 5px;
background-color: #CBD3DD;
border-radius: 100px;
cursor: pointer;
}
.sec-text a {
text-decoration: underline;
}
.image-section {
padding-left: 15px;
padding-right: 15px;
}
@media only screen and (max-width: 650px) {
.subheading {
font-size: 14px;
}
.sec-text a {
text-decoration: underline;
}
.image-section-inner {
flex-direction: column;
}
.image-section-inner-image {
width: 100%;
}
.image-section-inner.img_right {
flex-direction: column;
}
.image-section {
margin-bottom: 48px;
}
.cole_une .intt {
max-width: calc(50% - 25px);
}
.single_product {
flex-direction: column;
}
section.featured-collection {
padding-left: 15px;
}
/* .leftare {
flex-direction: column;
} */
.leftare span {
margin-bottom: 8px;
font-size: 18px;
}
.cole_une h2 {
font-size: 24px;
line-height: 110%;
}
.middle h1 {
padding-bottom: 4px;
}
.image-section-inner-text .btn-fill {
max-width: 100%;
}
}
@media (max-width: 370px) {
.yotpo .yotpo-icon.yotpo-icon-star {
width: 8px !important;
height: 8px !important;
}
.cole_une p {
font-size: 26px;
}
}
.product-quick-add .quick-add-footer .quick-add-thumbnails {
display: flex;
align-items: center;
height: auto;
width: auto;
}
.product-quick-add .quick-add-footer .quick-add-thumbnails .product-thumbnail {
position: relative;
text-align: center;
}
.product-quick-add .quick-add-footer .quick-add-thumbnails .product-thumbnail > span:first-child {
display: block;
height: 60px;
width: 60px;
position: relative;
border: 1px solid transparent;
cursor: pointer;
margin: 0 auto;
}
.product-quick-add .quick-add-footer .quick-add-thumbnails .product-thumbnail + .product-thumbnail {
margin-left: 20px;
}
.product-quick-add .quick-add-footer .quick-add-thumbnails.with-dispenser .product-thumbnail.is-dispenser > span:first-child {
border-color: var(--cr-black);
}
.product-quick-add .quick-add-footer .quick-add-thumbnails:not(.with-dispenser) .product-thumbnail:not(.is-dispenser) > span:first-child {
border-color: var(--cr-black);
}
.product-quick-add .quick-add-footer .quick-add-thumbnails:not(.with-dispenser) .product-thumbnail.is-dispenser {
opacity: 1;
}
.hidden_row {
display: none !important;
}
.product-quick-add .quick-add-footer.quick-add-thumbnails-footer {
justify-content: center;
margin-bottom: 30px;
}
.product-thumbnail_title {
font-size: 12px;
text-align: center;
width: 100%;
display: block;
margin-top: 9px;
}
html .yotpo.yotpo-main-widget .yotpo-review .yotpo-main .yotpo-read-more, .rest-content-collapsed {
font-size: 14px !important;
}
.gift_note textarea {
display: block;
border-bottom: 1px solid #333;
width: 100%;
}
.gift_note {
margin-bottom: 20px;
}
.gift_note label {
text-transform: uppercase;
letter-spacing: 0.1em;
font: var(--t-l-1);
}
#CartNote {
display: none;
}
#CartNote + .gift_note_row {
margin-top: 20px;
}
.gift_note_row + .gift_note_row {
padding-top: 20px;
}
.gift_note_row label {
font-size: 10px;
margin-bottom: 5px;
display: block;
}
.gift_note .gift_note_row textarea {
font-size: 13px;
}
.product-hero .hero-title.product-mobile-title .content-reviews-rating svg, .product-hero .hero-content .content-reviews-rating svg, .new-product-card.product-card .card-info .content-reviews-rating svg {
display: inline-block;
width: 12px !important;
height: 12px !important;
font-size: 0 !important;
margin: 0 8px 0 0 !important;
background: center / contain no-repeat !important;
background-image: url(../assets/svg-star-blue.svg) !important;
}
.product-hero .hero-content .content-reviews-rating svg path, .new-product-card.product-card .card-info .content-reviews-rating svg path, .product-hero .hero-content .content-reviews-rating .yotpo-star-rating-reviews-summary-link, .new-product-card.product-card .card-info .content-reviews-rating .yotpo-star-rating-reviews-summary-link, .product-hero .hero-title.product-mobile-title .content-reviews-rating svg path, .product-hero .hero-title.product-mobile-title .content-reviews-rating .yotpo-star-rating-reviews-summary-link, .new-product-card.product-card .card-info .content-reviews-rating .yotpo-sr-bottom-line-score {
display: none !important;
}
.product-hero .hero-content .content-reviews-rating .yotpo-sr-bottom-line-text, .product-hero .hero-title.product-mobile-title .content-reviews-rating .yotpo-sr-bottom-line-text, .new-product-card.product-card .card-info .content-reviews-rating .yotpo-sr-bottom-line-text {
font-size: 12px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
font: var(--t-l-1);
color: var(--cr-kelp-dark) !important;
}
.new-product-card.product-card .card-info .content-reviews-rating .yotpo-sr-bottom-line-summary {
flex-direction: row !important;
}
.redirect-gate-wrapper {
position: fixed;
opacity: 0;
pointer-events: none;
transition: 0.8s;
}
.redirect-gate-wrapper .redirect-gate-overlay {
position: fixed;
background-color: rgba(0,0,0,0.4)
}
.redirect-gate-wrapper .account-login,.redirect-gate-wrapper .account-register,.redirect-gate-wrapper .account-reset,.redirect-gate-wrapper .account-reset-password,.redirect-gate-wrapper .account-activate {
max-width: 375px;
padding: var(--s-3);
transform: translate3d(-50%, calc(-50% + var(--s-4)), 0);
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: 0.4s
}
.redirect-gate-wrapper .account-login.is-active,.redirect-gate-wrapper .account-register.is-active,.redirect-gate-wrapper .account-reset.is-active,.redirect-gate-wrapper .account-reset-password.is-active,.redirect-gate-wrapper .account-activate.is-active {
transform: translate3d(-50%, -50%, 0);
opacity: 1;
transition-delay: 0.4s
}
.redirect-gate-wrapper .redirect-gate-header {
margin: var(--s-3) 0;
text-align: center
}
.redirect-gate-wrapper .redirect-gate-content {
margin: 0 0 var(--s-3)
}
.redirect-gate-wrapper .redirect-gate-content .account-reset-password-open {
float: right;
margin: var(--s-2) 0 0;
text-decoration: underline
}
.redirect-gate-wrapper .redirect-gate-footer {
text-align: center
}
.redirect-gate-wrapper .redirect-gate-footer>*:not(:last-child) {
margin: 0 0 var(--s-3)
}
.redirect-gate-wrapper .redirect-gate-footer .btn-outline {
display: block;
width: 100%;
text-align: center
}
.redirect-gate-wrapper .redirect-gate-footer a.t-l-1,.redirect-gate-wrapper .redirect-gate-footer button.t-l-1 {
text-decoration: underline
}
.redirect-gate-wrapper .redirect-gate-footer .account-reset-password-close {
text-decoration: underline
}
.redirect-gate-wrapper .redirect-gate-footer .redirect-gate-close {
border: 1px solid var(--cr-silver);
box-shadow: none;
background: unset;
border-radius: 100%
}
.redirect-gate-wrapper .redirect-gate-footer .redirect-gate-close:before,.redirect-gate-wrapper .redirect-gate-footer .redirect-gate-close:after {
display: none
}
.redirect-gate-wrapper .redirect-gate-footer .redirect-gate-close svg {
position: relative;
width: 13px;
height: 13px;
margin: 17px
}
@media (hover: hover) {
.redirect-gate-wrapper .redirect-gate-footer .redirect-gate-close:hover {
background-color:var(--cr-subtle)
}
}
html.redirect-gate-is-active {
overflow: hidden
}
html.redirect-gate-is-active .redirect-gate-wrapper {
opacity: 1;
pointer-events: auto;
z-index: 99;
}
html.redirect-gate-is-active .account-login.is-active,html.redirect-gate-is-active .account-register.is-active,html.redirect-gate-is-active .account-reset.is-active,html.redirect-gate-is-active .account-reset-password.is-active,html.redirect-gate-is-active .account-activate.is-active {
pointer-events: auto
}
.redirect-gate-wrapper .account-login {
max-width: 800px;
}
.redirect-popup-close {
display: flex;
position: absolute;
right: 12px;
top: 12px;
}
.redirect-popup-content {
display: flex;
gap: 40px;
align-items: center;
}
.redirect-popup-content-image {
width: calc(50% - 20px);
min-width: calc(50% - 20px);
}
.redirect-popup-content-text {
width: 100%;
padding: 25px 0;
text-align: center;
}
.redirect-popup-content-text h2 {
margin-bottom: 10px;
display: none;
}
.redirect-popup-content-text.au-nz h2[data-location="au-nz"] {
display: block;
}
.redirect-popup-content-text.eu-uk h2[data-location="eu-uk"] {
display: block;
}
.redirect-popup-content-text .rte {
margin-bottom: 15px;
display: none;
}
.redirect-popup-content-text.au-nz .rte[data-location="au-nz"] {
display: block;
}
.redirect-popup-content-text.eu-uk .rte[data-location="eu-uk"] {
display: block;
}
.redirect-popup-content-buttons {
display: flex;
flex-direction: column;
gap: 15px;
}
.redirect-popup-content-buttons .redirect-popup-action {
height: 48px;
line-height: 48px;
font-size: 20px;
background: #244c5a;
}
.redirect-popup-content-buttons .redirect-popup-action:before {
background: #244c5a;
}
.redirect-popup-content-buttons .redirect-popup-close-btn {
background: #fff;
color: #244c5a;
border: 2px solid #244C5A;
height: 48px;
line-height: 48px;
font-size: 20px;
}
.redirect-popup-content-buttons .redirect-popup-close-btn:hover {
color: #fff;
}
.redirect-popup-content-buttons .redirect-popup-close-btn:before {
background: #244c5a;
}
@media screen and (max-width: 600px) {
.redirect-gate-wrapper .account-login {
overflow: auto;
max-height: calc(100vh - 40px);
padding: 35px var(--s-3);
}
.redirect-popup-content {
flex-direction: column;
gap: 20px;
}
.redirect-popup-content-image {
width: 100%;
}
.redirect-popup-content-text {
padding: 0;
}
}
.global-footer .footer-content {
justify-content: space-between;
align-items: flex-start;
margin-bottom: 22px;
gap: 24px;
}
.footer-email-wrapper {
width: 35%;
max-width: 350px;
}
.footer-email-wrapper .comp-email-capture {
max-width: 100%;
}
.footer-email-wrapper .comp-email-capture .t-h-3 {
text-align: left;
margin-bottom: 16px;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.footer-email-wrapper .comp-email-capture .field {
margin-bottom: 16px;
text-align: left;
}
.footer-email-wrapper .comp-email-capture .field input {
font: var(--t-h-4);
border: 0;
background: rgba(189, 201, 206, 0.50);
padding: 9px 11px;
font-size: 18px;
font-weight: 400;
font-style: italic;
line-height: 22px;
}
.footer-email-wrapper .comp-email-capture .field input::placeholder {
color: var(--cr-white);
}
.footer-email-wrapper .comp-email-capture .field:last-child {
margin: 0;
}
.footer-email-wrapper .comp-email-capture [type='submit'].btn {
max-width: 116px;
min-width: auto;
background: transparent;
text-align: center;
padding: 0 10px;
height: 29px;
line-height: 27px;
font-size: 18px;
}
@media screen and (pointer: fine) {
.footer-email-wrapper .comp-email-capture [type='submit'].btn:hover {
background: var(--cr-gradient);
}
}
.footer-email-wrapper .comp-email-capture [type='submit'].btn:active {
background: var(--cr-gradient);
color: var(--cr-coral);
}
.footer-logo {
margin-top: 34px;
}
.footer-logo img {
width: 100%;
height: auto;
display: block;
}
.footer-links-wrapper {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.footer-links-wrapper .footer-links {
margin: 0;
text-align: left;
}
.footer-links-wrapper .footer-links h3 {
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin-bottom: 13px;
}
.footer-links-wrapper .footer-links ul li:not(:last-child) {
margin-bottom: 4px;
}
.footer-links-wrapper .footer-links ul li a {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
.global-footer .footer-links-wrapper .footer-brand-certifications {
width: auto;
max-width: none;
margin: 0;
}
.global-footer .footer-links-wrapper .footer-brand-certifications h3 {
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin-bottom: 9px;
}
.footer-links-wrapper .footer-brand-certifications .certifications-icons {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.global-footer .footer-links-wrapper .footer-brand-certifications .certifications-icons svg {
width: 33px;
height: auto;
margin: 0;
}
.footer-legal {
width: 100%;
padding-top: 10px;
border-top: 1px solid;
text-align: center;
}
.global-footer .footer-footnote .footer-legal ul li:not(:last-child) {
margin-right: 0;
}
.global-footer .footer-footnote .footer-legal ul {
display: flex;
flex-wrap: wrap;
column-gap: 51px;
row-gap: 5px;
justify-content: center;
}
.global-footer .footer-footnote .footer-legal ul li > *, .global-footer .footer-footnote .footer-legal ul li {
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 14px;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.global-footer {
padding-bottom: 24px;
}
@media only screen and (max-width: 900px) {
.footer-email-wrapper {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.global-footer .footer-content {
gap: 48px;
margin-bottom: 48px;
}
.footer-email-wrapper {
max-width: 100%;
}
.footer-logo {
margin-top: 48px;
}
.footer-links-wrapper {
column-gap: 15px;
row-gap: 48px;
}
.footer-links-wrapper .footer-links {
width: calc(33.333% - 30px / 3);
}
.global-footer .footer-links-wrapper .footer-brand-certifications {
width: 100%;
text-align: center;
}
.global-footer .footer-links-wrapper .footer-brand-certifications h3 {
margin-bottom: 16px;
}
.footer-links-wrapper .footer-brand-certifications .certifications-icons {
flex-direction: row;
gap: 25px;
flex-wrap: wrap;
justify-content: center;
}
.footer-legal {
padding-top: 16px;
}
.global-footer .footer-footnote .footer-legal ul {
flex-direction: column;
gap: 16px;
}
.global-footer .footer-footnote .footer-legal ul li:not(:last-child) {
margin: 0;
}
}
.press-gallery-section {
padding: 30px 0;
margin-top: 0;
}
.press-gallery-section-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 92px;
}
.press-gallery-section-header h2 {
margin: 0;
font-size: 52px;
font-style: normal;
font-weight: 400;
line-height: 52px;
}
.press-gallery-section-header-text p {
font: var(--t-h-3);
font-size: 24px;
font-style: italic;
font-weight: 400;
line-height: 120%;
}
.press-gallery-section-grid {
display: flex;
flex-wrap: wrap;
column-gap: 27px;
row-gap: 92px;
}
.press-gallery-section-grid.large_spaces {
column-gap: 80px;
}
.press-gallery-section-grid-item {
width: calc(25% - 27px * 3 / 4);
display: flex;
flex-direction: column;
gap: 36px;
}
.press-gallery-section-grid.large_spaces .press-gallery-section-grid-item {
width: calc(25% - 80px * 3 / 4);
}
.press-gallery-section-grid.items-per-row-desktop--2 .press-gallery-section-grid-item {
width: calc(50% - 27px / 2);
}
.press-gallery-section-grid.items-per-row-desktop--2.large_spaces .press-gallery-section-grid-item {
width: calc(50% - 40px);
}
.press-gallery-section-grid-item-img {
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.press-gallery-section-grid-item-img img {
width: 100%;
height: auto;
display: block;
}
.press-gallery-section-grid-item-content {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
}
.press-gallery-section-grid-item-content h3 {
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 36px;
margin-bottom: 16px;
}
.press-gallery-section-grid-item-content .rte p {
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.press-gallery-section-grid-item-content .rte p em {
font-family: "Aldine 721", Georgia, serif;
}
.press-gallery-section-grid-item-content > a {
padding-top: 30px;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 14px;
letter-spacing: 1.1px;
text-decoration: underline;
text-transform: uppercase;
margin-top: auto;
}
@media only screen and (max-width: 900px) {
.press-gallery-section {
margin: 0;
}
.press-gallery-section-header {
margin-bottom: 40px;
}
.press-gallery-section-header h2 {
font-size: 32px;
line-height: 36px;
}
.press-gallery-section-header-text p {
font-size: 18px;
line-height: 22px;
}
.press-gallery-section-grid {
column-gap: 7px;
row-gap: 24px;
}
.press-gallery-section-grid.large_spaces {
column-gap: 7px;
row-gap: 48px;
}
.press-gallery-section-grid-item, .press-gallery-section-grid.items-per-row-desktop--2 .press-gallery-section-grid-item, .press-gallery-section-grid.items-per-row-desktop--2.large_spaces .press-gallery-section-grid-item {
width: calc(50% - 7px / 2);
}
.press-gallery-section-grid.items-per-row-mobile--1 .press-gallery-section-grid-item, .press-gallery-section-grid.items-per-row-desktop--2.items-per-row-mobile--1 .press-gallery-section-grid-item, .press-gallery-section-grid.items-per-row-desktop--2.items-per-row-mobile--1.large_spaces .press-gallery-section-grid-item {
width: 100%;
}
.press-gallery-section-grid-item-content h3 {
margin-bottom: 10px;
}
.press-gallery-section-grid.items-per-row-mobile--2 .press-gallery-section-grid-item .press-gallery-section-grid-item-content h3 {
font-size: 24px;
line-height: 24px;
margin-bottom: 16px;
}
.press-gallery-section-grid.items-per-row-mobile--2 .press-gallery-section-grid-item .press-gallery-section-grid-item-content .rte p {
font-size: 14px;
line-height: 18px;
}
}
.press-banner-section {
position: relative;
}
.press-banner-section-content {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.press-banner-section-content .btn {
width: auto;
background: transparent;
box-shadow: var(--cr-shadow);
color: #fff;
min-width: 200px;
height: 40px;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 37px;
text-align: center;
}
.footer-email-wrapper .comp-email-capture [type='submit'].btn {
position: absolute;
right: 7px;
top: 50%;
transform: translateY(-50%);
}
.footer-email-wrapper .comp-email-capture .field input {
padding-right: 130px;
height: 40px;
}
.content-reviews-rating.visibility_hidden {
opacity: 0;
visibility: hidden;
}
@media screen and (max-width: 600px) {
.product-card .card-thumbnail:after {
content: none;
}
.product-card .card-thumbnail .object-fit {
position: static;
height: auto;
}
.product-card .card-thumbnail img {
aspect-ratio: 1 / 1;
width: 100%;
height: 100% !important;
position: static;
transform: none;
}
}
.minicart_christmas_gifts {
order: 4;
padding: 8px 20px;
}
.minicart_christmas_gifts > h2 {
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 4px;
}
.minicart_christmas_gifts_subtitle {
font-size: 14px;
font-style: italic;
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.034px;
}
.minicart_christmas_gifts_subtitle p {
font: var(--t-b-1);
font-size: 14px;
font-style: italic;
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.034px;
}
.minicart_christmas_gifts_grid {
margin-top: 8px;
display: flex;
gap: 6px;
}
.minicart_christmas_gifts_grid_item {
display: flex;
flex-direction: column;
width: calc(50% - 3px);
background: #F2F3F4;
border-radius: 16px;
padding: 8px 15px 15px;
text-align: center;
cursor: pointer;
}
.minicart_christmas_gifts_grid_item_image {
margin-bottom: 5px;
}
.minicart_christmas_gifts_grid_item_image img {
height: 75px;
width: auto;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
}
.minicart_christmas_gifts_grid_item_info {
margin-bottom: 5px;
}
.minicart_christmas_gifts_grid_item_info_title {
margin-bottom: 4px;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 122.222% */
letter-spacing: -0.36px;
}
.minicart_christmas_gifts_grid_item_info_subtitle,
.minicart_christmas_gifts_grid_item_info_subtitle > * {
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 127.273% */
}
.minicart_christmas_gifts_grid_item_checkbox {
margin-top: auto;
}
.minicart_christmas_gifts_grid_item_checkbox input {
opacity: 0;
visibility: hidden;
width: 0;
height: 0;
}
.minicart_christmas_gifts_grid_item_checkbox span {
width: 16px;
height: 16px;
display: inline-block;
position: relative;
border: 1.5px solid #D2D2D2;
border-radius: 50%;
transition: .3s;
}
.minicart_christmas_gifts_grid_item_checkbox span:before {
content: '';
width: 8px;
height: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: .3s;
}
.minicart_christmas_gifts_grid_item_checkbox input:checked + span {
background: #244C5A;
border-color: #244C5A;
}
.minicart_christmas_gifts_grid_item_checkbox input:checked + span:before {
background: #fff;
}
.product-index-grid-collection-section {
padding-top: var(--s-section-half);
margin-top: 0;
}
html.redirect-gate-is-active .redirect-gate-wrapper {
z-index: 99999;
}
.minicart_christmas_gifts .cart_upsell_row {
padding: 0;
}
.minicart_christmas_gifts .cart_upsell_row .cart_upsell_products .upsell_product {
margin: 0;
width: 100%;
}
.header-mega-menu {
display: block;
width: 100%;
position: absolute;
left: 0;
top: 100%;
background: #F8F9FA;
box-shadow: var(--cr-shadow);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.header-mega-menu-wrapper {
padding: 30px var(--s-edge);
}
.header-mega-menu-categories {
display: flex;
justify-content: center;
gap: 24px;
width: 100%;
}
.header-mega-menu-categories-item {
font: var(--t-h-4);
font-size: 20px;
font-weight: 400;
line-height: normal;
letter-spacing: -0.4px;
transition: .3s;
}
.header-mega-menu-categories-item.active,
.header-mega-menu-categories-item:hover {
color: #808080;
}
.header-mega-menu-body {
margin-top: 50px;
}
.header-mega-menu-body-item {
display: flex;
flex-direction: column;
gap: 50px;
}
.header-mega-menu-images-slider {
width: 100%;
}
.header-mega-menu-images-slider:not(.use-slider) .swiper-wrapper {
gap: 20px;
justify-content: center;
}
.header-mega-menu-images-slider:not(.use-slider) .swiper-wrapper .swiper-slide {
width: calc(20% - 20px * 4 / 5);
}
.header-mega-menu-images-slider .swiper-slide {
height: 100%;
}
.header-mega-menu-images-slider-item {
display: flex;
flex-direction: column;
gap: 20px;
}
.header-mega-menu-images-slider-item-image {
position: relative;
width: 100%;
}
.header-mega-menu-images-slider-item-image img {
border-radius: var(--image-radius);
object-fit: cover;
}
.header-mega-menu-images-slider-item-badge {
position: absolute;
top: 11px;
right: 15px;
z-index: 1;
border-radius: 21px;
border: 0.5px solid #FFF;
background: linear-gradient(0deg, #FFF -11.9%, #EFEFEF 116.67%);
box-shadow: 0 0 10.6px 0 rgba(0, 0, 0, 0.09);
padding: 2px 10px;
color: #4F868E;
font-size: 8px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.header-mega-menu-images-slider-item-title {
font-size: 18px;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.36px;
}
.header-mega-menu-button {
text-align: center;
}
.header-mega-menu-button a {
display: inline-block;
padding: 10px;
min-width: 200px;
border-radius: 32px;
border: 1px solid;
font: var(--t-h-3);
font-size: 18px;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.36px;
}
.header-mega-menu-images-slider .swiper-button-prev,
.header-mega-menu-images-slider .swiper-button-next {
background: #fff;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--cr-black);
}
.header-mega-menu-images-slider .swiper-button-prev svg,
.header-mega-menu-images-slider .swiper-button-next svg {
color: inherit;
width: 9px;
height: auto;
}
.header-mega-menu-images-slider .swiper-button-prev.swiper-button-disabled,
.header-mega-menu-images-slider .swiper-button-next.swiper-button-disabled {
opacity: 0;
}
.header-mega-menu-images-slider .swiper-button-prev {
left: 10px;
}
.header-mega-menu-images-slider .swiper-button-next {
right: 10px;
}
.header-mega-menu-banner {
overflow: hidden;
border-radius: 16px;
position: relative;
}
.header-mega-menu-banner-content {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
padding: 20px;
text-align: center;
color: var(--text-color);
}
.header-mega-menu-banner-content h3 {
font-size: 18px;
font-style: italic;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.043px;
margin-bottom: 30px;
}
.header-mega-menu-banner-content h2 {
font-size: 40px;
font-weight: 400;
line-height: 40px;
letter-spacing: -0.8px;
margin-bottom: 20px;
}
.header-mega-menu-banner-content > img {
width: 150px;
height: auto;
display: block;
margin: 0 auto 20px;
}
.header-mega-menu-banner-content-button {
min-width: 220px;
padding: 10px;
border-radius: 32px;
border: 1px solid;
font: var(--t-h-3);
font-size: 18px;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.36px;
display: inline-block;
}
.header-mega-menu-banner-content .rte {
margin-bottom: 20px;
}
.header-mega-menu-banner-content .rte,
.header-mega-menu-banner-content .rte p {
font: var(--t-h-3);
font-size: 24px;
font-weight: 400;
line-height: 120%;
letter-spacing: -0.058px;
}
@media screen and (max-width: 900px) {
.global-header .global-header-menu:last-of-type {
margin-left: auto;
}
}
@media screen and (min-width: 901px) {
.global-header .menu-toggle {
display: none;
}
}
.global-header .cart-toggle {
--cr-coral: #4F868E;
}
.global-menu.mobile-menu {
background: #F8F9FA;
}
.global-menu.mobile-menu .menu-content {
padding: calc(var(--s-announcement) + var(--s-header) + 20px) var(--s-contain) var(--s-4) calc(var(--s-edge) + var(--s-1));
}
.header-mobile-menu {
display: flex;
flex-direction: column;
gap: 39px;
width: 100%;
}
.header-mobile-menu-categories-header {
white-space: nowrap;
overflow: auto;
text-align: center;
margin: 0 calc(var(--s-contain) * -1) 0 calc((var(--s-edge) + var(--s-1)) * -1);
-ms-overflow-style: none;
scrollbar-width: none;
}
.header-mobile-menu-categories-header::-webkit-scrollbar {
display: none;
}
.header-mobile-menu-categories-header-wrapper {
padding: 0 var(--s-contain) 0 calc(var(--s-edge) + var(--s-1));
width: min-content;
min-width: 100%;
}
.header-mobile-menu-categories-header-item {
display: inline-block;
font: var(--t-h-4);
font-size: 20px;
font-weight: 400;
line-height: normal;
letter-spacing: -0.4px;
transition: .3s;
}
.header-mobile-menu-categories-header-item.active {
color: #808080;
}
.header-mobile-menu-categories-header-item:not(:last-child) {
margin-right: 24px;
}
.mobile-menu-body {
margin-top: 28px;
}
.mobile-menu-body-item {
display: flex;
flex-direction: column;
gap: 28px;
}
.mobile-menu-images-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.mobile-menu-images-slider-item {
border-radius: 15px;
background: #fff;
padding: 15px;
display: flex;
gap: 20px;
position: relative;
align-items: center;
}
.mobile-menu-images-slider-item-badge {
position: absolute;
top: 20px;
right: 20px;
padding: 2px 15px;
border-radius: 21px;
border: 0.5px solid #F8F9FA;
background: linear-gradient(0deg, #FFF -11.9%, #EFEFEF 116.67%);
box-shadow: 0 0 10.6px 0 rgba(0, 0, 0, 0.09);
font-size: 8px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #4F868E;
}
.mobile-menu-images-slider-item-image {
width: 80px;
min-width: 80px;
border-radius: var(--image-radius);
overflow: hidden;
}
.mobile-menu-images-slider-item-title {
width: 100%;
font-size: 18px;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.36px;
}
.mobile-menu-button {
display: flex;
justify-content: center;
}
.mobile-menu-button a {
padding: 10px;
border-radius: 32px;
border: 1px solid #58595B;
font: var(--t-h-3);
font-size: 18px;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.36px;
min-width: 200px;
text-align: center;
}
.mobile-menu-dropdown {
border-top: 1px solid rgba(205, 206, 207, .48);
}
.mobile-menu-dropdown-heading {
padding: 15px 0;
cursor: pointer;
}
.mobile-menu-dropdown-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.mobile-menu-dropdown-body ul {
padding-top: 35px;
}
.mobile-menu-dropdown-heading-icon {
display: flex;
align-items: center;
height: 18px;
}
.mobile-menu-dropdown-heading-icon svg {
width: 18px;
height: auto;
}
.mobile-menu-dropdown-heading:not(.active) .mobile-menu-dropdown-heading-icon svg:last-child {
display: none;
}
.mobile-menu-dropdown-heading.active .mobile-menu-dropdown-heading-icon svg:first-child {
display: none;
}
.mobile-menu-dropdown-body ul li:not(:last-child) {
margin-bottom: 5px;
}
.mobile-menu-dropdown-body ul li a {
font: var(--t-h-3);
font-size: 20px;
font-weight: 400;
line-height: normal;
letter-spacing: -0.4px;
}
.global-header .cart-toggle:after {
background: #4F868E;
}
.new-product-card .product-quick-add .quick-add-toggle.is-touched {
color: #fff;
}
.new-product-card .product-quick-add .quick-add-toggle.is-touched:before {
opacity: 1;
}
.d-menu-search-results {
display: none;
margin: auto 0 0
}
.d-menu-search-results .d-search-results-image {
position: relative;
margin: 0 0 var(--s-3)
}
.d-menu-search-results .d-search-results-image:after {
content: '';
display: block;
padding-top: 50%
}
.d-menu-search-results .d-search-results-image .object-fit {
animation: 0.8s 0.6s fadeIn both
}
.d-menu-search-results ul {
padding: var(--s-4) 0 0;
border-top: 1px solid var(--cr-silver)
}
.d-menu-search-results ul:before {
display: block;
margin: 0 0 var(--s-2);
font: var(--t-s-3);
color: var(--cr-kelp-dark)
}
.d-menu-search-results ul li:not(:last-child) {
margin: 0 0 var(--s-1)
}
.d-menu-search-results ul li a {
display: block
}
.d-menu-search-results ul li a .svg-arrow-right {
display: inline-block;
width: 16px;
margin: 7px 0 7px 7px;
float: right;
color: var(--cr-coral);
opacity: 0;
transition: 0.8s
}
@media (hover: hover) {
.d-menu-search-results ul li a:hover .svg-arrow-right {
opacity:1
}
}
html.search-has-results .d-menu-search-results ul:before {
content: 'Search results'
}
html.search-has-results .d-menu-search-results .d-search-results-empty {
display: none
}
html.search-is-active .d-menu-search-results {
display: block;
animation: 0.4s fadeIn both
}
html.search-is-active .d-menu-search:before {
display: none
}
html.search-is-active .d-menu-search .d-search-clear {
opacity: 1;
pointer-events: auto
}
.global-menu-searchbar {
position: absolute;
left: 0;
width: 100%;
background: #fff;
box-shadow: var(--cr-shadow);
top: 100%;
/* max-height: 0; */
overflow: hidden;
transition: max-height 0.3s ease-out;
display: none;
}
.global-menu-searchbar.show {
display: block;
}
.global-menu-searchbar-wrapper {
padding: 30px var(--s-edge);
}
.d-menu-search {
position: relative;
}
.d-menu-search > svg {
position: absolute;
width: 25px;
height: auto;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.d-menu-search > input {
width: 100%;
background: transparent;
box-shadow: none;
font: var(--t-h-4);
font-size: 20px;
color: #808080;
border: 0;
outline: none;
padding: 5px 85px 5px 45px;
}
.d-menu-search > input::placeholder {
font-size: 20px;
color: #808080;
}
.d-search-clear {
position: absolute;
right: 30px;
top: 52%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
.d-menu-search-close {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
}
.d-menu-search-close svg {
width: 20px;
height: auto;
}
.d-menu-search-results {
gap: 40px;
align-items: flex-start;
position: relative;
}
html.search-is-active .d-menu-search-results {
display: flex;
}
.d-menu-search-results ul {
border: 0;
}
.d-menu-search-results .d-search-results-image {
width: 400px;
margin: 0;
max-width: 100%;
}
html.search-is-active .global-header-menu .menu-links {
display: flex;
}
.d-search-results-empty {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}