/************
* THIS FILE WILL BE LOADED ON ALL BRANDS THE USE THE ELC ENTERPRISE DESIGN SYSTEM.
* AT THIS TIME THE ONLY BRAND USING THAT SYSTEM IS TOM FORD BEAUTY.
*
* PLEASE AVOID NESTED SELECTORS LIKE .parent .child
************/
/***********
* STYLES ARE ORGANIZED MOBILE-UP.
* PLEASE PLACE MEDIA QUERIES AT THE BOTTOM.
************/
body, button {
font-variant-ligatures: none;
}
header *:focus-visible,
footer *:focus-visible {
outline: solid;
border-radius: 0;
}
.content-width {
margin-left: auto;
margin-right: auto;
}
.copy-section {
max-width: 1536px;
margin: auto;
padding-left: 60px;
padding-right: 60px;
}
/* Power Reviews Styling mobile */
.ratings-and-reviews .p-w-r input {
height: 1rem !important;
margin: 0;
width: 1rem !important;
color: var(--primary-default);
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-ratings-histogram .pr-ratings-histogram-barValue,
.ratings-and-reviews .p-w-r .pr-multiselect .pr-multiselect-button .pr-multiselect-count {
background: var(--primary-default);
}
.ratings-and-reviews .p-w-r .pr-slider-root .pr-slider .pr-slider-node-group .pr-slider-node.pr-active {
background-color: var(--primary-default);
}
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-snippet-reco-to-friend .pr-snippet-reco-to-friend-percent .pr-reco .pr-reco-value {
color: var(--primary-default);
}
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-histogram-msq-container,
.ratings-and-reviews .p-w-r .pr-review-snapshot-block-container,
.ratings-and-reviews .p-w-r .pr-review-snapshot-histogram,
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced.pr-snapshot-mobile .pr-review-snapshot-histogram-msq-container .pr-review-snapshot-msq-histogram,
.ratings-and-reviews .p-w-r .pr-snippet-stars-reco-reco,
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-snippet-reco-to-friend .pr-snippet-reco-to-friend-percent .pr-reco-green .pr-reco-value:after,
.ratings-and-reviews .p-w-r .pr-subheadline span,
.ratings-and-reviews .p-w-r .pr-review-snapshot-header-intro a,
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced.pr-snapshot-mobile .pr-review-snapshot-header .pr-review-snapshot-header-intro .pr-subheadline .pr-snapshot-logo-mobile,
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-faceoff {
display: none !important;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-snippet-rating-decimal,
.ratings-and-reviews .p-w-r .pr-rd-search-reviews-icon-button .pr-search-icon:after,
.ratings-and-reviews .p-w-r .pr-submit .pr-logo-container {
display: none;
}
.ratings-and-reviews .p-w-r .thank-you-page .pr-star, .p-w-r .thank-you-page .pr-star-accessible-0-filled, .p-w-r .thank-you-page .pr-star-accessible-100-filled, .p-w-r .thank-you-page .pr-star-accessible-25-filled, .p-w-r .thank-you-page .pr-star-accessible-50-filled, .p-w-r .thank-you-page .pr-star-accessible-75-filled, .p-w-r .thank-you-page .pr-star-selected, .p-w-r .thank-you-page .pr-star-v4, .p-w-r .thank-you-page .pr-star-v4-0-filled, .p-w-r .thank-you-page .pr-star-v4-100-filled, .p-w-r .thank-you-page .pr-star-v4-25-filled, .p-w-r .thank-you-page .pr-star-v4-50-filled, .p-w-r .thank-you-page .pr-star-v4-75-filled, .p-w-r .thank-you-page .pr-star:hover {
height: 2.5rem;
}
.ratings-and-reviews .p-w-r .pr-read-review.pr-rd-display-tablet .pr-rd-main-header-with-filters .pr-rd-main-header-search-sort .pr-rd-main-header-sorts-w-search,
.ratings-and-reviews .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-main-header-search-sort .pr-rd-main-header-sorts-w-search,
.ratings-and-reviews.p-w-r .pr-review-display.pr-rd-display-tablet .pr-rd-main-header-with-filters .pr-rd-main-header-search-sort .pr-rd-main-header-sorts-w-search {
padding-top: 0.375rem;
}
.ratings-and-reviews .pr-write .p-w-r .pr-star-v4-0-filled {
background-image: none;
}
/* reviews section container */
.ratings-and-reviews .p-w-r {
margin:auto;
font-family: var(--font-family-primary) !important;
padding-bottom: var(--mobile-reviews-section-container-padding-bottom);
grid-gap: var(--mobile-reviews-section-container-spacing);
}
/* reviews section title */
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header {
padding: 0;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-review-snapshot-header-intro {
display: flex;
align-content: space-around;
flex-direction: row;
justify-content: unset !important;
border-width: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-review-snapshot-header-intro .pr-headline,
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-snapshot-mobile .pr-review-snapshot-header .pr-headline {
display: flex;
justify-content: space-evenly;
align-content: space-around;
flex-wrap: wrap ;
flex-direction: column;
font-family: var(--mobile-reviews-section-title-font-family) !important;
font-weight: var(--desktop-reviews-section-title-font-weight) !important;
text-transform: var(--mobile-reviews-section-title-text-case) !important;
font-size: var(--mobile-reviews-section-title-font-size) !important;
letter-spacing: var(--mobile-reviews-section-title-letter-spacing) !important;
line-height: var(--mobile-reviews-section-title-line-height) !important;
text-decoration: var(--mobile-reviews-section-title-text-decoration) !important;
color: var(--mobile-reviews-section-title-fill) !important;
hyphens: auto;
}
/* reviews section rating icon container + icon */
.ratings-and-reviews .p-w-r .pr-snippet-stars.pr-snippet-stars-png {
text-wrap: nowrap;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-snippet .pr-snippet-stars-png {
display: flex;
flex-direction: row-reverse;
justify-content: start;
align-items: center;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-snippet .pr-snippet-stars-png .pr-rating-stars {
text-wrap: nowrap;
gap: 10px;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-snippet .pr-snippet-stars-png .pr-star-v4 {
font-size: 0.75rem;
margin: 0 var(--mobile-reviews-section-rating-icon-container-spacing);
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4::after,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4::after {
overflow: hidden;
display: block;
position: absolute;
top: 0;
color: var(--mobile-reviews-section-rating-icon-active-fill);
line-height: 1.5;
content: "\2605";
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4::before,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4::before {
color: var(--mobile-reviews-section-rating-icon-inactive-fill);
line-height: 1.5;
content: "\2605";
}
.p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4 {
font-size: 1rem;
height: 1rem;
margin-right: 0.625rem;
}
.p-w-r .pr-review-display .pr-review .pr-star-v4:hover {
height: auto;
width: auto;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4 {
width: auto;
height: auto;
color: var(--primary-default);
font-family: var(--font-family-primary);
background: none;
padding: 0;
position: relative;
}
body[dir=rtl] .ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4::after,
body[dir=rtl] .ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4::after {
right: 0;
}
body[dir=ltr] .ratings-and-reviews .pr-reviewdisplay .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4::after,
body[dir=ltr] .ratings-and-reviews .pr-reviewdisplay .p-w-r .pr-review-display .pr-star-v4::after {
left: 0;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4-75-filled::after,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4-75-filled::after {
width: 75%;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4-50-filled::after,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4-50-filled::after {
width: 50%;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4-25-filled::after,
.p-w-r .pr-review-display .pr-star-v4-25-filled::after {
width: 25%;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4-0-filled::after,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4-0-filled::after {
width: 0;
}
body[dir=rtl] .ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal {
text-align: right;
}
body[dir=ltr] .ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal {
text-align: left;
}
.p-w-r .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal {
text-align: left;
}
/* reviews section rating average */
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal {
border: 0;
order: 0;
margin: 0 var(--mobile-reviews-section-rating-value-container-spacing) 0 0 !important;
padding: 0 !important;
height: auto !important;
font-weight: var(--mobile-reviews-section-rating-average-font-weight) !important;
text-decoration: var(--mobile-reviews-section-rating-average-text-decoration);
text-transform: var(--mobile-reviews-section-rating-average-text-case);
letter-spacing: var(--mobile-reviews-section-rating-average-letter-spacing);
font-size: var(--mobile-reviews-section-rating-average-font-size) !important;
line-height: var(--mobile-reviews-section-rating-average-line-height) !important;
font-family: var(--mobile-reviews-section-rating-average-font-family) !important;
color: var(--mobile-reviews-section-rating-average-fill) !important;
width: auto !important;
}
/* reviews section review qty */
.p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-review-snapshot-snippets .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars .pr-snippet .pr-snippet-read-and-write span.pr-snippet-review-count,
.p-w-r .pr-snippet-stars-reco-inline .pr-snippet-read-and-write span.pr-snippet-review-count {
font-size: var(--mobile-reviews-section-review-qty-font-size) !important;
font-family: var(--mobile-reviews-section-review-qty-font-family);
font-weight: var(--mobile-reviews-section-review-qty-font-weight);
font-style: normal;
line-height: var(--mobile-reviews-section-review-qty-line-height);
letter-spacing: var(--mobile-reviews-section-review-qty-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-qty-text-decoration);
text-transform: var(--mobile-reviews-section-review-qty-text-case);
color: var(--mobile-reviews-section-review-qty-fill) !important;
margin: 0 0 0.625rem 0;
padding: 0;
}
/* reviews section no reviews */
.p-w-r .pr-review-display .pr-rd-no-reviews {
letter-spacing: var(--mobile-reviews-section-no-reviews-text-letter-spacing);
text-decoration: var(--mobile-reviews-section-no-reviews-text-text-decoration);
text-transform: var(--mobile-reviews-section-no-reviews-text-text-case);
font-size: var(--mobile-reviews-section-no-reviews-text-font-size);
line-height: var(--mobile-reviews-section-no-reviews-text-line-height);
font-weight: var(--mobile-reviews-section-no-reviews-text-font-weight);
font-family: var(--mobile-reviews-section-no-reviews-text-font-family);
color: var(--mobile-reviews-section-no-reviews-text-fill);
}
/* reviews section write review button */
.p-w-r .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars {
width: 100%;
}
.ratings-and-reviews .p-w-r .pr-snippet-stars-reco-inline {
width: 100%;
display: flex ;
justify-content: center ;
}
.p-w-r .pr-snippet div.pr-snippet-read-and-write {
width: 100%;
align-items: start !important;
display: flex !important;
flex-direction: column;
margin-left: 0 !important;
}
.p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-review-snapshot-snippets .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars .pr-snippet .pr-snippet-read-and-write a.pr-snippet-write-review-link,
.p-w-r .pr-snippet-stars-reco-inline .pr-snippet-read-and-write .pr-snippet-write-review-link,
.p-w-r .pr-rd-no-reviews .pr-snippet-write-review-link {
background-color: var(--desktop-button-container-secondary-default-fill);
color: var(--primary-default);
width: var(--mobile-reviews-section-write-review-button-width);
border-width: 1px;
border-style: solid;
border-color: var(--desktop-button-container-secondary-default-border-color);
border-radius: var(--desktop-button-container-secondary-default-border-radius);
font-family: var(--desktop-button-text-secondary-default-font-family);
font-size: var(--desktop-button-text-secondary-default-font-size) !important;
font-weight: var(--desktop-button-text-secondary-default-font-weight);
align-items: center;
justify-content: center;
letter-spacing: var(--desktop-button-text-secondary-default-letter-spacing);
line-height: var(--desktop-button-text-secondary-default-line-height);
padding-bottom: var(--desktop-button-container-secondary-default-padding-bottom);
padding-top: var(--desktop-button-container-secondary-default-padding-top);
padding-left: var(--desktop-button-container-secondary-default-padding-left);
padding-right: var(--desktop-button-container-secondary-default-padding-right);
text-transform: var(--desktop-button-text-secondary-default-text-case);
text-align: center;
text-decoration: var(--desktop-button-text-secondary-default-text-decoration);
}
/* reviews section filter dropdowns */
.p-w-r .pr-review-display .pr-rd-review-header-contents {
background-color: var(--color-neutral-white) !important;
padding: 0 !important;
}
.p-w-r .pr-review-display .pr-multiselect span {
text-transform: uppercase !important;
}
.p-w-r .pr-multiselect .pr-multiselect-button {
padding: 12px !important;
border-radius: 0 !important;
}
.p-w-r .pr-multiselect .pr-multiselect-button .pr-caret-icon {
margin-left: 10px;
}
/* Mac Cosmetics has different mark up, we need to handle this */
.p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters{
width: 100%;
}
.p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-review-header-sorts{
width: 20%;
padding: 0px;
display: flex;
justify-content: flex-end;
}
.p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-review-header-contents{
width: 80%;
float: left;
}
.p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-search-container{
height: var(--desktop-dropdown-container-default-height);
padding: 0px;
margin-bottom: 0px;
}
/* Sort /Filter for mac shade */
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-sort-group #pr-rd-filter-variant-by{
display: none;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-sort-group {
padding-top: 0px;
padding-right: 0px;
}
.p-w-r .pr-multiselect .pr-multiselect-button .pr-multiselect-button-label {
font-size: var(--desktop-reviews-section-review-item-review-text-font-size);
}
.p-w-r .pr-multiselect ul.pr-multiselect-options {
border-radius: 0 !important;
}
.ratings-and-reviews .p-w-r .pr-multiselect ul.pr-multiselect-options li .pr-multiselect-item-label {
padding-left: 0.3rem;
text-transform: uppercase;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-sort-group select {
text-transform: uppercase;
}
.ratings-and-reviews .p-w-r .pr-review-filter-clear-all {
color: var(--color-neutral-black) !important;
}
/* reviews section search */
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-main-header-search .pr-rd-search-reviews-input > input {
border: 1px solid #8c8c8c !important;
font-size: var(--desktop-reviews-section-review-item-review-text-font-size);
height: var(--desktop-write-review-input-icon-button-container-height) !important;
padding: 10px;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-main-header-search .pr-rd-search-reviews-input > input:focus,
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-main-header-search .pr-rd-search-reviews-input > input:active {
box-shadow: none;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-main-header-search .pr-rd-search-reviews-input .pr-rd-search-reviews-icon-button {
background-color: transparent;
border: none;
top: 0;
bottom: 0;
height: auto;
margin: 0 6px;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-main-header-search .pr-rd-search-reviews-input .pr-rd-search-reviews-icon-button svg > path {
fill: black;
}
/*
Default swiper button SVG dimensions to full.
NOTE: In Safari, SVGs do not have the width/height defaulted to full which
caused some SVGs to not be displayed (because they didn't have dimensions set),
we need default dimensions in order to avoid this kind of issue in Safari.
*/
.swiper-button-prev svg,
.swiper-button-next svg {
width: 100%;
height: 100%;
}
.p-w-r .pr-badging-icon circle {
fill: var(--color-neutral-black);
}
.p-w-r .pr-rd-review-total {
display: none !important;
}
.p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-search-container .pr-rd-search-reviews-input input:focus+button.pr-rd-search-filled {
background-color: var(--color-neutral-1-200) !important;
}
/* reviews section review item container */
.p-w-r .pr-review-display .pr-review {
padding-top: var(--mobile-reviews-section-review-item-container-padding-top) !important;
padding-right: var(--mobile-reviews-section-review-item-container-padding-right) !important;
padding-bottom: var(--mobile-reviews-section-review-item-container-padding-bottom) !important;
padding-left: var(--mobile-reviews-section-review-item-container-padding-left) !important;
border-top: var(--mobile-reviews-section-review-item-container-border-top) solid var(--desktop-reviews-section-review-item-container-border-color) !important;
margin-bottom: 0 !important;
}
/* reviews section review item date */
.p-w-r .pr-review .pr-rd-description.pr-rd-content-block .pr-rd-details.pr-rd-author-submission-date span {
letter-spacing: var(--mobile-reviews-section-review-item-date-letter-spacing) !important;
text-decoration: var(--mobile-reviews-section-review-item-date-text-decoration) !important;
text-transform: var(--mobile-reviews-section-review-item-date-text-case) !important;
font-size: var(--mobile-reviews-section-review-item-date-font-size) !important;
line-height: var(--mobile-reviews-section-review-item-date-line-height) !important;
font-weight: var(--mobile-reviews-section-review-item-date-font-weight) !important;
font-family: var(--mobile-reviews-section-review-item-date-font-family) !important;
color: var(--mobile-reviews-section-review-item-date-fill) !important;
}
/* reviews section review item username + location */
.p-w-r .pr-review .pr-rd-description.pr-rd-content-block .pr-rd-details.pr-rd-author-nickname span,
.p-w-r .pr-review .pr-rd-description.pr-rd-content-block .pr-rd-details.pr-rd-author-location span {
letter-spacing: var(--mobile-reviews-section-review-item-user-name-letter-spacing) !important;
text-decoration: var(--mobile-reviews-section-review-item-user-name-text-decoration) !important;
text-transform: var(--mobile-reviews-section-review-item-user-name-text-case) !important;
font-size: var(--mobile-reviews-section-review-item-user-name-font-size) !important;
line-height: var(--mobile-reviews-section-review-item-user-name-line-height) !important;
font-weight: var(--mobile-reviews-section-review-item-user-name-font-weight) !important;
font-family: var(--mobile-reviews-section-review-item-user-name-font-family) !important;
color: var(--mobile-reviews-section-review-item-user-name-fill) !important;
}
/* reviews section review item review title */
.pr-review .pr-rd-review-headline,
.pr-review .pr-rd-review-headline.pr-h2 {
font-size: var(--mobile-reviews-section-review-item-review-title-font-size) !important;
font-family: var(--mobile-reviews-section-review-item-review-title-font-family) !important;
font-weight: var(--mobile-reviews-section-review-item-review-title-font-weight) !important;
font-style: normal;
line-height: var(--mobile-reviews-section-review-item-review-title-line-height) !important;
letter-spacing: var(--mobile-reviews-section-review-item-review-title-letter-spacing) !important;
text-transform: uppercase !important;
text-decoration: var(--mobile-reviews-section-review-item-review-title-text-decoration) !important;
color: var(--mobile-reviews-section-review-item-review-title-fill) !important;
}
/* reviews section review item review text + recommendation text */
.p-w-r .pr-review-display .pr-rd-description-text,
.p-w-r .pr-review-display .pr-rd-footer.pr-rd-content-block .pr-rd-bottomline.pr-rd-inner-content-block span,
.p-w-r .pr-flag-review-fieldset span,
.p-w-r .pr-flag-review-fieldset .pr-flag-review-label,
.p-w-r .pr-flag-review button {
font-family: var(--mobile-reviews-section-review-item-review-text-font-family) !important;
font-size: var(--mobile-reviews-section-review-item-review-text-font-size) !important;
font-weight: var(--mobile-reviews-section-review-item-review-text-font-weight) !important;
text-transform: var(--mobile-reviews-section-review-item-review-text-text-case) !important;
line-height: var(--mobile-reviews-section-review-item-review-text-line-height) !important;
letter-spacing: var(--mobile-reviews-section-review-item-review-text-letter-spacing) !important;
text-decoration: var(--mobile-reviews-section-review-item-review-text-text-decoration) !important;
color: var(--mobile-reviews-section-review-item-review-text-fill) !important;
}
.pr-rd-footer.pr-rd-content-block .pr-rd-bottomline.pr-rd-inner-content-block {
padding: 20px 0;
}
/* reviews section review item report link */
.p-w-r .pr-rd-flag-review-container .pr-rd-flag-review-btn {
letter-spacing: var(--mobile-reviews-section-review-item-report-link-letter-spacing);
font-size: var(--mobile-reviews-section-review-item-report-link-font-size);
line-height: var(--mobile-reviews-section-review-item-report-link-line-height);
font-weight: var(--mobile-reviews-section-review-item-report-link-font-weight);
font-family: var(--mobile-reviews-section-review-item-report-link-font-family);
color: var(--mobile-reviews-section-review-item-report-link-fill);
text-decoration: var(--mobile-reviews-section-review-item-report-link-text-decoration);
text-transform: capitalize;
}
/* report modal */
.p-w-r .pr-flag-review-fieldset .pr-flag-review-label {
font-size: 16px !important;
font-weight: 700 !important;
}
.p-w-r .pr-flag-review button {
text-transform: capitalize !important;
background-color: var(--color-neutral-white) !important;
border: 1px solid var(--primary-default) !important;
}
.p-w-r .pr-modal__backdrop + div .pr-flagging-radio .pr-radio {
width: 11px !important;
height: 11px !important;
margin: 3px;
}
.p-w-r .pr-modal__backdrop + div {
width: 100%;
}
/* reviews section review item buttons container */
.p-w-r .pr-review .pr-rd-helpful-action-btn-group,
.p-w-r .pr-review .pr-helpful-voting.pr-rd-helpful-action-btn-group {
gap: var(--mobile-reviews-section-review-item-buttons-container-spacing);
}
.pr-helpful-voting.pr-rd-helpful-action-btn-group {
display: flex;
}
/* reviews section review item helpful button container */
.p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-helpful-action-btn-group {
margin: 0 !important;
}
.p-w-r button.pr-helpful-btn {
cursor: pointer !important;
padding-top: var(--mobile-reviews-section-review-item-helpful-button-container-padding-top);
padding-right: var(--mobile-reviews-section-review-item-helpful-button-container-padding-right);
padding-bottom: var(--mobile-reviews-section-review-item-helpful-button-container-padding-bottom);
padding-left: var(--mobile-reviews-section-review-item-helpful-button-container-padding-left);
border-width: var(--mobile-reviews-section-review-item-helpful-button-container-border);
border-style: solid;
border-color: var(--mobile-reviews-section-review-item-helpful-button-container-border-color);
border-radius: var(--mobile-button-container-secondary-default-border-radius);
}
.p-w-r button.pr-helpful-btn:active,
.p-w-r button.pr-helpful-active:hover[disabled],
.p-w-r button.pr-helpful-active:active {
background-color: var(--color-neutral-1-200) !important;
}
/* reviews section review item helpful button icon */
.p-w-r .pr-thumbs-icon {
padding-right: var(--mobile-reviews-section-review-item-helpful-button-icon-padding-right);
width: var(--mobile-reviews-section-review-item-helpful-button-icon-width) !important;
height: var(--mobile-reviews-section-review-item-helpful-button-icon-height) !important;
}
.p-w-r .pr-thumbs-icon svg g path {
fill: var(--mobile-reviews-section-review-item-helpful-button-icon-fill) !important;
}
/* reviews section review item helpful button text */
.p-w-r .pr-helpful-count {
font-size: var(--mobile-reviews-section-review-item-helpful-button-text-font-size);
line-height: var(--mobile-reviews-section-review-item-helpful-button-text-line-height);
letter-spacing: var(--mobile-reviews-section-review-item-helpful-button-text-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-item-helpful-button-text-text-decoration);
text-transform: var(--mobile-reviews-section-review-item-helpful-button-text-text-case);
font-weight: var(--mobile-reviews-section-review-item-helpful-button-text-font-weight);
font-family: var(--mobile-reviews-section-review-item-helpful-button-text-font-family);
color: var(--mobile-reviews-section-review-item-helpful-button-text-fill) !important;
}
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-histogram-msq-container,
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-msq-container,
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced.pr-snapshot-mobile .pr-review-snapshot-histogram-msq-container .pr-review-snapshot-msq-histogram {
display: none !important;
}
.breadcrumb-text[href^="/"]:hover {
color: var(--button-background-primary-default);
text-decoration-line: underline;
}
/* mobile warf begin */
/* warf thank you page begin */
.pr-write .p-w-r .thank-you-page .pr-star,
.pr-write .p-w-r .thank-you-page .pr-star-accessible-0-filled,
.pr-write .p-w-r .thank-you-page .pr-star-accessible-100-filled,
.pr-write .p-w-r .thank-you-page .pr-star-accessible-25-filled,
.pr-write .p-w-r .thank-you-page .pr-star-accessible-50-filled,
.pr-write .p-w-r .thank-you-page .pr-star-accessible-75-filled,
.pr-write .p-w-r .thank-you-page .pr-star-selected,
.pr-write .p-w-r .thank-you-page .pr-star-v4,
.pr-write .p-w-r .thank-you-page .pr-star-v4-0-filled,
.pr-write .p-w-r .thank-you-page .pr-star-v4-100-filled,
.pr-write .p-w-r .thank-you-page .pr-star-v4-25-filled,
.pr-write .p-w-r .thank-you-page .pr-star-v4-50-filled,
.pr-write .p-w-r .thank-you-page .pr-star-v4-75-filled,
.pr-write .p-w-r .thank-you-page .pr-star:hover {
display: flex;
width: var(--mobile-write-review-rating-icon-inactive-width) !important;
height: var(--mobile-write-review-rating-icon-inactive-height) !important;
gap: var(--mobile-write-review-rating-icon-container-spacing);
padding: 0;
}
.pr-write .p-w-r .thank-you-page .pr-rating-stars {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mobile-write-review-rating-icon-container-spacing);
height: var(--mobile-write-review-rating-icon-inactive-height);
}
.pr-write .p-w-r .thank-you-page .pr-rating-number {
border: none;
padding: 0.625rem !important;
}
.pr-write .p-w-r .thank-you-page .pr-rating-date {
display: none;
}
.pr-write .p-w-r .thank-you-page .title {
text-decoration: var(--mobile-write-review-processed-title-text-decoration);
text-transform: var(--mobile-write-review-processed-title-text-case);
font-weight: var(--mobile-write-review-processed-title-font-weight);
letter-spacing: var(--mobile-write-review-processed-title-letter-spacing);
font-size: var(--mobile-write-review-processed-title-font-size);
line-height: var(--mobile-write-review-processed-title-line-height);
font-family: var(--mobile-write-review-processed-title-font-family);
padding-bottom: var(--mobile-write-review-processed-title-padding-bottom);
margin-top: 0;
margin-bottom: 0;
}
.pr-write .p-w-r .thank-you-page .subtitle {
text-decoration: var(--mobile-write-review-processed-subheading-text-decoration);
text-transform: var(--mobile-write-review-processed-subheading-text-case);
font-weight: var(--mobile-write-review-processed-subheading-font-weight);
letter-spacing: var(--mobile-write-review-processed-subheading-letter-spacing);
font-size: var(--mobile-write-review-processed-subheading-font-size);
line-height: var(--mobile-write-review-processed-subheading-line-height);
font-family: var(--mobile-write-review-processed-subheading-font-family);
padding-bottom: var(--mobile-write-review-processed-subheading-padding-bottom);
margin-top: 0;
margin-bottom: 0;
}
.pr-write .p-w-r .thank-you-page .headline {
letter-spacing: var(--mobile-write-review-processed-review-title-letter-spacing);
text-transform: var(--mobile-write-review-processed-review-title-text-case);
text-decoration: var(--mobile-write-review-processed-review-title-text-decoration);
font-size: var(--mobile-write-review-processed-review-title-font-size);
line-height: var(--mobile-write-review-processed-review-title-line-height);
font-weight: var(--mobile-write-review-processed-review-title-font-weight);
font-family: var(--mobile-write-review-processed-review-title-font-family);
padding-bottom: var(--mobile-write-review-processed-review-title-padding-bottom);
margin-bottom: 0;
}
.pr-write .p-w-r .thank-you-page .review-preview .text {
letter-spacing: var(--mobile-write-review-processed-review-image-caption-letter-spacing);
text-transform: var(--mobile-write-review-processed-review-image-caption-text-case);
text-decoration: var(--mobile-write-review-processed-review-image-caption-text-decoration);
font-size: var(--mobile-write-review-processed-review-image-caption-font-size);
line-height: var(--mobile-write-review-processed-review-image-caption-line-height);
font-weight: var(--mobile-write-review-processed-review-image-caption-font-weight);
font-family: var(--mobile-write-review-processed-review-image-caption-font-family);
padding-top: var(--mobile-write-review-processed-review-image-caption-padding-top);
}
/* warf thank you page end */
.pr-write .p-w-r .pr-rating-stars {
display: flex;
}
.pr-write .p-w-r .pr-form-group .pr-rating-input-container {
display: block;
}
.pr-write .p-w-r .pr-star-v4-0-filled,
.pr-write .p-w-r .pr-star-v4-100-filled {
background-image: none !important;
}
.pr-write .p-w-r .pr-rating-stars > span {
height: 1.875rem !important;
width: 1.875rem !important;
}
.pr-write .p-w-r .pr-star-v4-0-filled::before {
display: flex;
justify-content: center;
align-items: center;
color: var(--desktop-reviews-section-rating-icon-inactive-fill);
font-size: var(--mobile-write-review-rating-icon-inactive-height) !important;
content: "\2605" !important;
width: var(--mobile-write-review-rating-icon-inactive-width);
height: var(--mobile-write-review-rating-icon-inactive-height);
}
.pr-write .p-w-r .pr-star-v4-100-filled::before {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--mobile-write-review-rating-icon-inactive-height) !important;
content: "\2605" !important;
width: var(--mobile-write-review-rating-icon-inactive-width);
height: var(--mobile-write-review-rating-icon-inactive-height);
}
.pr-write .p-w-r input:focus+label.pr-star-v4-100-filled,
.pr-write .p-w-r input:focus+label.pr-star-v4-75-filled,
.pr-write .p-w-r input:focus+label.pr-star-v4-50-filled,
.pr-write .p-w-r input:focus+label.pr-star-v4-25-filled,
.pr-write .p-w-r input:focus+label.pr-star-v4-0-filled,
.pr-write .p-w-r input+label.pr-star-v4-100-filled,
.pr-write .p-w-r input+label.pr-star-v4-75-filled,
.pr-write .p-w-r input+label.pr-star-v4-50-filled,
.pr-write .p-w-r input+label.pr-star-v4-25-filled,
.pr-write .p-w-r input+label.pr-star-v4-0-filled {
display: flex;
background-color: transparent;
border: none;
text-align: center;
width: var(--mobile-write-review-rating-icon-inactive-width);
height: var(--mobile-write-review-rating-icon-inactive-height);
gap: var(--mobile-write-review-rating-icon-container-spacing);
}
.pr-write .p-w-r .pr-header .pr-header-product-img img {
max-width: unset;
}
.pr-write .p-w-r .pr-war .pr-header .pr-table-cell:has(img) {
padding: 0;
}
.pr-write .p-w-r .pr-header .pr-table-cell:has(.pr-header-title) {
vertical-align: top;
padding: 0 var(--mobile-write-review-heading-container-spacing);
}
.pr-write .p-w-r .pr-header .pr-table-cell .pr-header-title {
text-decoration: var(--mobile-write-review-heading-title-text-decoration);
font-weight: var(--mobile-write-review-heading-title-font-weight);
text-transform: var(--mobile-write-review-heading-title-text-case);
letter-spacing: var(--mobile-write-review-heading-title-letter-spacing);
font-size: var(--mobile-write-review-heading-title-font-size);
line-height: var(--mobile-write-review-heading-title-line-height);
font-family: var(--mobile-write-review-heading-title-font-family);
margin: 0;
}
.pr-write .p-w-r .pr-file-input-btn-group .pr-file-input-label,
.pr-write .p-w-r .pr-control-label span {
letter-spacing: var(--mobile-write-review-input-label-letter-spacing);
text-decoration: var(--mobile-write-review-input-label-text-decoration);
text-transform: var(--mobile-write-review-input-label-text-case);
font-size: var(--mobile-write-review-input-label-font-size);
line-height: var(--mobile-write-review-input-label-line-height);
font-weight: var(--mobile-write-review-input-label-font-weight);
font-family: var(--mobile-write-review-input-label-font-family);
}
.pr-write .p-w-r input[type=text].form-control,
.pr-write textarea#pr-comments-input {
border: var(--mobile-text-input-container-default-border) solid var(--mobile-text-input-container-default-border-color);
padding-left: var(--mobile-text-input-container-default-padding-left) !important;
padding-bottom: var(--mobile-text-input-container-default-padding-bottom) !important;
padding-right: var(--mobile-text-input-container-default-padding-right) !important;
padding-top: var(--mobile-text-input-container-default-padding-top) !important;
background-color: var(--mobile-text-input-container-default-fill);
}
.pr-write .p-w-r .pr-control-label .pr-helper-text {
letter-spacing: var(--mobile-write-review-input-description-letter-spacing);
text-transform: var(--mobile-write-review-input-description-text-case);
text-decoration: var(--mobile-write-review-input-description-text-decoration);
font-size: var(--mobile-write-review-input-description-font-size);
line-height: var(--mobile-write-review-input-description-line-height);
font-weight: var(--mobile-write-review-input-description-font-weight);
font-family: var(--mobile-write-review-input-description-font-family);
padding-bottom: var(--mobile-write-review-input-description-padding-bottom);
color: var(--mobile-write-review-input-description-fill);
}
.pr-write .pr-form-group.form-group.pr-bestuses-form-group,
.pr-write .pr-form-group.form-group.pr-pros-form-group,
.pr-write .pr-form-group.form-group.pr-cons-form-group,
.pr-write .pr-form-group.form-group.pr-media_videourl-form-group {
display: none;
}
.pr-write .p-w-r .btn-group {
display: flex;
flex-direction: row;
gap: var(--spacing-5);
}
.pr-write .p-w-r .btn-group-radio-vertical input+label.pr-btn,
.pr-write .p-w-r .tag-group .pr-label-control,
.pr-write .p-w-r .btn-group-radio-vertical input+label.pr-btn:last-of-type,
.pr-write button.pr-btn.pr-btn-default.pr-btn-add-tag-submit {
background-color: var(--mobile-button-container-secondary-default-fill);
border: var(--mobile-button-container-secondary-default-border) solid var(--mobile-button-container-secondary-default-border-color);
padding-bottom: var(--mobile-button-container-secondary-default-padding-bottom);
padding-top: var(--mobile-button-container-secondary-default-padding-top);
padding-left: var(--mobile-button-container-secondary-default-padding-left);
padding-right: var(--mobile-button-container-secondary-default-padding-right);
}
.pr-write .p-w-r .pr-media-input-display .pr-media-input-display-captionGroup .pr-media-input-display-captionGroup-buttons .pr-media-input-display-captionGroup-button {
width: var(--mobile-write-review-input-icon-button-container-width);
height: var(--mobile-write-review-input-icon-button-container-height);
margin-top: var(--mobile-write-review-input-icon-button-container-padding-top);
background-color: var(--mobile-write-review-input-icon-button-container-fill);
}
.pr-write .p-w-r .btn-group-radio-vertical input+label.pr-btn,
.pr-write .p-w-r .tag-group .pr-label-control,
.pr-write button.pr-btn.pr-btn-default.pr-btn-add-tag-submit,
.pr-write .p-w-r .tag-group .tag-container .pr-btn-add-tag button,
.pr-write button.pr-btn.pr-btn-default.pr-btn-fileinput {
text-decoration: var(--mobile-button-text-secondary-default-text-decoration);
letter-spacing: var(--mobile-button-text-secondary-default-letter-spacing);
text-transform: var(--mobile-button-text-secondary-default-text-case);
font-size: var(--mobile-button-text-secondary-default-font-size);
line-height: var(--mobile-button-text-secondary-default-line-height);
font-weight: var(--mobile-button-text-secondary-default-font-weight);
font-family: var(--mobile-button-text-secondary-default-font-family);
background-color: var(--desktop-button-container-secondary-default-fill);
color: var(--mobile-button-text-secondary-default-fill);
border: var(--mobile-button-container-secondary-default-border) solid var(--mobile-button-container-secondary-default-border-color);
padding-bottom: var(--mobile-button-container-secondary-default-padding-bottom);
padding-top: var(--mobile-button-container-secondary-default-padding-top);
padding-left: var(--mobile-button-container-secondary-default-padding-left);
padding-right: var(--mobile-button-container-secondary-default-padding-right);
}
.pr-write .p-w-r .btn-group-radio-vertical label.pr-btn.pr-btn-default.active,
.pr-write .p-w-r .tag-group .pr-label-control.checked,
.pr-write .p-w-r .pr-btn-add-tag button,
.pr-write .p-w-r .pr-btn-add-tag button:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:hover,
.pr-write .p-w-r .pr-btn-add-tag button:hover,
.pr-write button.pr-btn.pr-btn-default.pr-btn-review.pr-accessible-btn {
background-color: var(--mobile-button-container-primary-default-fill);
border: var(--mobile-button-container-primary-default-border) solid var(--desktop-button-container-primary-default-border-color);
padding-bottom: var(--mobile-button-container-primary-default-padding-bottom);
padding-top: var(--mobile-button-container-primary-default-padding-top);
padding-left: var(--mobile-button-container-primary-default-padding-left);
padding-right: var(--mobile-button-container-primary-default-padding-right);
text-decoration: var(--mobile-button-text-primary-default-text-decoration);
letter-spacing: var(--mobile-button-text-primary-default-letter-spacing);
text-transform: var(--mobile-button-text-primary-default-text-case);
font-size: var(--mobile-button-text-primary-default-font-size);
line-height: var(--mobile-button-text-primary-default-line-height);
font-weight: var(--mobile-button-text-primary-default-font-weight);
font-family: var(--mobile-button-text-primary-default-font-family);
}
.pr-write .p-w-r .btn-group-radio-vertical label.pr-btn.pr-btn-default.active,
.pr-write .p-w-r .tag-group .pr-label-control.checked {
color: var(--mobile-button-text-primary-default-fill);
}
.pr-write .p-w-r button.pr-clear-all-radios,
.pr-write button.pr-btn-link.pr-input-add-tag__cancel,
.pr-write .p-w-r .thank-you-page a {
letter-spacing: var(--mobile-write-review-input-link-letter-spacing);
text-decoration: var(--mobile-write-review-input-link-text-decoration);
text-transform: var(--mobile-write-review-input-link-text-case);
font-size: var(--mobile-write-review-input-link-font-size);
line-height: var(--mobile-write-review-input-link-line-height);
font-weight: var(--mobile-write-review-input-link-font-weight);
font-family: var(--mobile-write-review-input-link-font-family);
color: var(--mobile-write-review-input-link-fill);
padding-top: var(--mobile-write-review-input-link-padding-top);
}
.pr-write .p-w-r .pr-textinput::placeholder,
.pr-write .p-w-r .pr-textarea::placeholder {
color: var(--tertiary-default);
}
.pr-write .p-w-r .pr-btn-add-tag button,
.pr-write .p-w-r .pr-btn-add-tag button:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:hover,
.pr-write .p-w-r .pr-btn-add-tag button:hover,
.pr-write button.pr-btn.pr-btn-default.pr-btn-review.pr-accessible-btn {
color: var(--mobile-link-button-normal-default-inverse-fill);
}
.pr-write button.pr-btn.pr-btn-default.pr-btn-fileinput {
background-color: var(--mobile-button-container-secondary-default-fill);
}
.pr-write .input-add-tag__container {
gap: var(--spacing-5);
}
.pr-write p.pr-header-required,
.pr-write p.pr-subscript {
text-decoration: var(--mobile-write-review-terms-text-decoration);
letter-spacing: var(--mobile-write-review-terms-letter-spacing);
text-transform: var(--mobile-write-review-terms-text-case);
font-size: var(--mobile-write-review-terms-font-size);
line-height: var(--mobile-write-review-terms-line-height);
font-weight: var(--mobile-write-review-terms-font-weight);
font-family: var(--mobile-write-review-terms-font-family);
}
.pr-write p.pr-subscript a {
color: var(--mobile-link-button-normal-default-fill);
}
.pr-write .p-w-r .pr-has-error .pr-control-label span {
color: var(--mobile-dropdown-label-text-error-fill)
}
.pr-write .pr-form-control-error-wrapper input#pr-email_collection-input {
padding-left: var(--mobile-text-input-container-error-padding-left);
padding-bottom: var(--mobile-text-input-container-error-padding-bottom);
padding-right: var(--mobile-text-input-container-error-padding-right);
padding-top: var(--mobile-text-input-container-error-padding-top);
}
.pr-write .pr-form-control-error-wrapper input.pr-invalid-field {
border: var(--mobile-text-input-container-error-border) solid var(--desktop-text-input-container-error-border-color);
}
.pr-write .p-w-r .pr-has-error .form-control:focus {
box-shadow: 0 0 0 2px var(--mobile-text-input-container-error-border-color);
}
.pr-write .pr-form-control-error-wrapper svg {
display: none;
}
.pr-write .p-w-r abbr.pr-required-indicator {
color: var(--mobile-text-input-container-error-border-color);
}
.pr-write .pr-logo-container {
display: none;
}
.pr-write .p-w-r .pr-media-input-display .pr-media-input-display-thumbnail .pr-media-input-display-thumbnail-wrapper img {
height: var(--mobile-write-review-input-image-height);
width: var(--mobile-write-review-input-image-width);
}
/* mobile warf end */
.breadcrumb-text[href^="/"]:hover {
color: var(--button-background-primary-default);
text-decoration-line: underline;
}
.p-w-r .pr-accessible-btn,
.p-w-r .pr-review-snapshot .pr-review-snapshot-simple .pr-review-snapshot-snippets .pr-snippet-read-and-write a {
border-bottom: none !important;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-review-header-sorts .pr-rd-sort {
font-size: var(--desktop-reviews-section-review-item-review-text-font-size);
margin-top: 10px;
padding: 10px;
width: 100%;
padding-left: var(--desktop-dropdown-container-default-padding-left);
padding-right: var(--desktop-dropdown-container-default-padding-right);
height: var(--desktop-dropdown-container-default-height);
}
.p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-content-block.pr-accordion,
.pr-review section.pr-rd-content-block.pr-accordion.pr-accordion-collapsed {
display: none;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-review-header-sorts .pr-rd-sort {
background-color: var(--mobile-button-container-secondary-default-fill);
color: var(--primary-default);
border-width: var(--mobile-button-container-secondary-default-border);
border-style: solid;
border-radius: var(--mobile-button-container-secondary-default-border-radius);
font-family: var(--mobile-button-text-secondary-default-font-family);
font-size: var(--mobile-button-text-secondary-default-font-size) !important;
font-weight: var(--mobile-button-text-secondary-default-font-weight);
letter-spacing: var(--mobile-button-text-secondary-default-letter-spacing);
line-height: var(--mobile-button-text-secondary-default-line-height);
padding-bottom: var(--mobile-button-container-secondary-default-padding-bottom);
padding-top: var(--mobile-button-container-secondary-default-padding-top);
padding-left: var(--mobile-button-container-secondary-default-padding-left);
padding-right: var(--mobile-button-container-secondary-default-padding-right);
text-transform: var(--mobile-button-text-secondary-default-text-case);
text-align: center;
text-decoration: var(--mobile-button-text-secondary-default-text-decoration);
}
.ratings-and-reviews .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-review-header-sorts .pr-rd-sort {
background-color: var(--desktop-button-container-secondary-default-fill);
color: var(--primary-default);
border-width: var(--desktop-button-container-secondary-default-border);
border-style: solid;
border-radius: var(--desktop-button-container-secondary-default-border-radius);
font-family: var(--desktop-button-text-secondary-default-font-family);
font-size: var(--desktop-button-text-secondary-default-font-size) !important;
font-weight: var(--desktop-button-text-secondary-default-font-weight);
letter-spacing: var(--desktop-button-text-secondary-default-letter-spacing);
line-height: var(--desktop-button-text-secondary-default-line-height);
padding-bottom: var(--desktop-button-container-secondary-default-padding-bottom);
padding-top: var(--desktop-button-container-secondary-default-padding-top);
padding-left: var(--desktop-button-container-secondary-default-padding-left);
padding-right: var(--desktop-button-container-secondary-default-padding-right);
text-transform: var(--desktop-button-text-secondary-default-text-case);
text-align: center;
text-decoration: var(--desktop-button-text-secondary-default-text-decoration);
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-search-container .pr-rd-search-reviews-input input {
border-radius: var(--mobile-button-container-secondary-default-border-radius);
padding-left: 1rem;
}
.ratings-and-reviews .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-search-container .pr-rd-search-reviews-input input {
border-radius: var(--desktop-button-container-secondary-default-border-radius);
padding-left: 1rem;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-search-container .pr-rd-search-reviews-input .pr-rd-search-reviews-icon-button {
border-top-right-radius: var(--desktop-button-container-secondary-default-border-radius);
border-bottom-right-radius: var(--desktop-button-container-secondary-default-border-radius);
}
.ratings-and-reviews .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-review-header-sorts .pr-rd-sort,
.ratings-and-reviews .p-w-r .pr-review-display.pr-rd-display-tablet .pr-rd-main-header-with-filters .pr-rd-review-header-sorts .pr-rd-sort .pr-caret-icon{
width: 17rem;
padding-left: var(--desktop-dropdown-container-default-padding-left);
padding-right: var(--desktop-dropdown-container-default-padding-right);
height: var(--desktop-dropdown-container-default-height);
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke-width='1' transform='rotate(180)' stroke='currentColor'%3E%3Cpath stroke-linecap='square' stroke-linejoin='square' d='M4.5 11.75l3.5-3.5 3.5 3.5' /%3E%3C/svg%3E");
}
#pr-rd-native-sort {
display: none
}
/* CL CO ZA, AV IT - caret not coming through from pr reviews for these so custom on id... */
#pr-gender-input, #pr-age-input, #pr-skintype-input, #pr-cliniquecustomerfor-input, #pr-wasthisreviewedaspartofasweepstakesorcontest-input, #pr-didyoureceivethisproductasasample-input,
#pr-esigenzaprincipale-input, #pr-fasciadetà-input, #pr-sesso-input, #pr-tipodicapelli-input, #pr-esigenzaprincipale-input, #pr-tipodipelle-input, #pr-recensitonellambitodiunconcorso-input {
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-6 0 20 20' stroke-width='1' transform='rotate(180)' stroke='currentColor'%3E%3Cpath stroke-linecap='square' stroke-linejoin='square' d='M4.5 11.75l3.5-3.5 3.5 3.5' /%3E%3C/svg%3E") !important;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-sort {
margin-bottom: 0.313rem;
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-6 0 20 20' stroke-width='1' transform='rotate(180)' stroke='currentColor'%3E%3Cpath stroke-linecap='square' stroke-linejoin='square' d='M4.5 11.75l3.5-3.5 3.5 3.5' /%3E%3C/svg%3E");
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-footer {
padding-bottom: 0.625rem;
}
.ratings-and-reviews .p-w-r .pr-review-display div.pr-rd-content-block {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-content-block .pr-rd-to-top {
display: none;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-content-block .pr-rd-review-position {
margin-right: 0;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-content-block .pr-rd-pagination-btn {
color: var(--desktop-reviews-section-review-item-report-link-fill);
text-decoration: underline;
}
.p-w-r .pr-review-snapshot {
padding-bottom:0px !important;
}
.p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal {
margin-left: 0px !important;
border: none !important;
}
.p-w-r .pr-btn.active {
background-color: var(--primary-default) !important;
}
.p-w-r .pr-review-display .pr-rd-helpful-action-legend {
display: none;
}
.pr-rd-description-text {
margin-top: 20px !important;
}
.pr-review .pr-rd-footer.pr-rd-content-block {
width: 100%;
}
.pr-rd-main-footer {
border-top: var(--mobile-reviews-section-review-item-container-border-top) solid var(--desktop-reviews-section-review-item-container-border-color) !important;
border-bottom: none !important;
padding-top: 40px !important;
}
.p-w-r .pr-review-display .pr-rd-pagination {
border: none !important;
padding: 0 !important;
}
.p-w-r .pr-review-display .pr-rd-pagination a {
text-decoration: none !important;
}
/* End Power Reviews Styling mobile */
.copy-section:has(.rich-text) {
margin-bottom: var(--mobile-padding-bottom-copy-section-container);
}
.rich_text {
font-family: var(--font-family-primary);
}
.product-details {
display: block;
padding-bottom: 3.375rem;
}
.product-details-price {
color: var(--desktop-product-details-size-chip-price-fill);
}
.carousel-container {
overflow: hidden;
width: var(--mobile-carousel-container-width);
margin: 45px auto 0;
}
.product-section-title-container {
display: flex;
flex-direction: column;
grid-gap: var(--desktop-product-section-title-container-spacing);
justify-content: center;
justify-content: left;
margin: 0 1.25rem 0.25rem;
width: var(--desktop-product-section-title-container-width);
}
.product-details + .carousel-container .product-section-title-container {
margin-left: 1rem;
}
.product-section-title-container .link-button-bold-default {
font-size: 12px;
}
.product-section-title {
font-family: var(--mobile-cards-section-title-font-family);
font-weight: var(--mobile-cards-section-title-font-weight);
font-size: var(--mobile-cards-section-title-font-size);
line-height: var(--mobile-cards-section-title-line-height);
letter-spacing: var(--mobile-cards-section-title-letter-spacing);
text-transform: var(--mobile-cards-section-title-text-case);
text-decoration: var(--mobile-cards-section-title-text-decoration);
color: var(--mobile-cards-section-title-fill);
}
.product-section-subhead {
font-family: var(--mobile-cards-section-sub-title-font-family);
font-weight: var(--mobile-cards-section-sub-title-font-weight);
font-size: var(--mobile-cards-section-sub-title-font-size);
line-height: var(--mobile-cards-section-sub-title-line-height);
letter-spacing: var(--mobile-cards-section-sub-title-letter-spacing);
text-transform: var(--mobile-cards-section-sub-title-text-case);
text-decoration: var(--mobile-cards-section-sub-title-text-decoration);
color: var(--mobile-cards-section-sub-title-fill);
}
.product-details + .carousel-container .product-section-title {
font-size: var(--desktop-font-size-3xl);
}
.product-section-item-container {
max-width: 322px;
}
.product-section-item-container img {
width: 100%;
}
.product-section-link-below-container {
width: var(--desktop-product-section-link-below-container-width);
padding-bottom: var(--desktop-product-section-link-below-container-padding-top);
display: flex;
justify-content: center;
}
.link-button-bold-default {
font-family: var(--font-family-primary);
font-weight: var(--font-weight-medium);
font-size: var(--desktop-font-size-xs);
line-height: var(--desktop-font-leading-base);
text-transform: var(--font-text-transform-uppercase);
text-decoration: var(--font-text-decoration-underline);
color: var(--text-color-primary);
}
.carousel-previous-icon {
height: var(--desktop-carousel-previous-icon-height);
width: var(--desktop-carousel-previous-icon-width);
fill: var(--desktop-carousel-previous-icon-fill);
margin: 32px;
}
.carousel-next-icon {
height: var(--desktop-carousel-next-icon-height);
width: var(--desktop-carousel-next-icon-width);
fill: var(--desktop-carousel-next-icon-fill);
}
.carousel-container .product-carousel-pincer-swiper {
display: flex;
height: 100%;
width: 100%;
}
.product-carousel-container .product-carousel-pincer-swiper {
margin: 1rem 0 1rem 1.25rem;
}
.content-card-carousel-container .product-carousel-pincer-swiper {
margin-left: 1.25rem;
}
.product-carousel-container .product-section-carousel {
display: flex;
}
.content-card-carousel-container .product-section-carousel {
display: flex;
position: relative;
margin-top: 1rem;
margin-bottom: 1rem;
}
.product-section-container .product-card {
padding-bottom: 20px;
}
.product-section-container .pincer-swiper .swiper-wrapper {
margin-bottom: 40px;
}
.product-section-container .product-section-item-container {
padding: 0 calc(var(--desktop-product-grid-products-row-spacing) / 2);
}
.product-details + .carousel-container .product-carousel-pincer-swiper {
margin-left: 1rem;
}
.carousel-container .swiper-button-prev::after,
.carousel-container .swiper-button-next::after,
.carousel-container .swiper-button-prev svg,
.carousel-container .swiper-button-next svg {
display: none;
}
.product-details-badge-text {
position: absolute;
top: 0.9rem;
left: 0.956rem;
color: var(--mobile-product-details-image-badge-text-fill);
font-family: var(--mobile-product-details-image-badge-text-font-family);
font-weight: var(--mobile-product-details-image-badge-text-font-weight);
text-decoration: var(--mobile-product-details-image-badge-text-text-decoration);
text-transform: var(--mobile-product-details-image-badge-text-text-case);
letter-spacing: var(--mobile-product-details-image-badge-text-letter-spacing);
font-size: var(--mobile-product-details-image-badge-text-font-size);
line-height: var(--mobile-product-details-image-badge-text-line-height);
z-index: 10;
display: none;
}
.swiper-slide:first-child .product-details-badge-text {
display: block;
}
.product-attributes-primary {
margin-left: 1rem;
margin-right: 1rem;
}
.product-details-carousel {
position: relative;
}
[data-swiper-carousel-zoom-enabled-value] .product-details-carousel-pincer-swiper .swiper-slide-active {
cursor: zoom-out;
}
.product-details-carousel-pincer-swiper {
width: 100%;
margin-top: 1rem;
}
.swiper-thumbnail-button-prev,
.swiper-thumbnail-button-next {
display: none;
}
.product-details-carousel-thumbnails {
display: none;
}
.product-details-carousel .swiper-thumbnail-button-prev,
.product-details-carousel .swiper-thumbnail-button-next,
.product-details-carousel .swiper-thumbnail-button-prev svg,
.product-details-carousel .swiper-thumbnail-button-next svg {
display: block;
}
.product-details-carousel-pincer-swiper .swiper-button-prev,
.product-details-carousel-pincer-swiper .swiper-button-next {
top: 50%;
transform: translateY(0);
}
.pincer-swiper .pincer-button-prev.swiper-button-disabled svg,
.pincer-swiper .pincer-button-next.swiper-button-disabled svg {
opacity: .3;
}
.product-details-carousel-pincer-swiper .swiper-button-prev::after,
.product-details-carousel-pincer-swiper .swiper-button-next::after {
content: initial;
}
.product-details-carousel-pincer-swiper .swiper-button-prev svg,
.product-details-carousel-pincer-swiper .swiper-button-next svg {
width: 2rem;
stroke-width: .5px;
}
.product-details-carousel-pincer-swiper .swiper-button-prev svg {
transform: rotate(180deg);
}
.swiper-button-prev svg path {
stroke: var(--mobile-carousel-previous-icon-fill);
}
.swiper-button-next svg path {
stroke: var(--mobile-carousel-next-icon-fill);
}
.pincer-swiper .pincer-button-next:after {
color: var(--desktop-carousel-next-icon-fill);
}
.pincer-swiper .pincer-button-prev:after {
color: var(--desktop-carousel-previous-icon-fill);
}
.product-details-carousel-pincer-swiper .swiper-button-prev {
left: 0;
padding-left: 8px;
}
.product-details-carousel-pincer-swiper .swiper-button-next {
right: 0;
padding-right: 8px;
text-align: right;
}
.product-section-container .product-grid .swiper-pagination {
position: absolute;
bottom: 0;
}
.pincer-swiper .swiper-pagination {
line-height: 8px;
padding-top: 0.5rem;
}
.product-details-carousel .swiper-pagination-bullets {
position: static;
line-height: 8px;
padding-top: 0.5rem;
}
.product-details-carousel-pincer-swiper .swiper-pagination-bullet,
.product-section-container .swiper-pagination-bullet {
height: 0.5rem;
width: 0.5rem;
margin: 0 0.375rem !important;
border-radius: var(--mobile-carousel-carousel-indicator-active-border-radius);
background-color: var(--mobile-carousel-carousel-indicator-inactive-fill);
opacity: var(--mobile-carousel-carousel-indicator-inactive-inverse-opacity);
}
.product-details-carousel-pincer-swiper .swiper-pagination-bullet-active,
.carousel-container .swiper-pagination-bullet-active {
background-color: var(--mobile-carousel-carousel-indicator-active-fill);
opacity: var(--mobile-carousel-carousel-indicator-active-inverse-fill);
}
.carousel-container .product-card-add-to-bag-button {
width: auto;
}
.carousel-image {
width: 100%;
height: auto;
}
.product-details-carousel .carousel-image {
object-fit: cover;
object-position: bottom;
aspect-ratio: 1;
}
.product-details-carousel .swiper-slide img {
background: var(--mobile-product-card-image-fill);
transition: none;
}
.product-attributes-secondary {
margin-left: 1rem;
margin-right: 1rem;
}
.product-details-description {
color: var(--mobile-product-details-product-description-fill);
font-family: var(--mobile-product-details-product-description-font-family);
line-height: var(--mobile-product-details-product-description-line-height);
font-size: var(--mobile-product-details-product-description-font-size);
letter-spacing: var(--mobile-product-details-product-description-letter-spacing);
font-weight: var(--mobile-product-details-product-description-font-weight);
text-transform: var(--mobile-product-details-product-description-text-case);
text-decoration: var(--mobile-product-details-product-description-text-decoration);
margin-top: 0.75rem;
}
.product-details-add-to-bag {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
display: flex;
gap: 0.5rem;
}
.product-details-quantity {
display: flex;
width: 5.625rem;
border-width: var(--mobile-qty-selector-container-large-border);
border-color: var(--mobile-qty-selector-container-large-border-color);
border-radius: var(--mobile-qty-selector-container-large-border-radius);
}
.product-details-quantity-text {
color: var(--desktop-qty-selector-number-fill);
font-family: var(--desktop-qty-selector-number-font-family);
font-size: var(--desktop-qty-selector-number-font-size);
line-height: var(--desktop-qty-selector-number-line-height);
letter-spacing: var(--desktop-qty-selector-number-letter-spacing);
text-transform: var(--desktop-qty-selector-number-text-case);
text-decoration: var(--desktop-qty-selector-number-text-decoration);
width: 1.938rem;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
border: 0;
appearance: textfield;
-moz-appearance: textfield;
padding: 0;
text-align: center;
}
.product-details-quantity-button {
width: 1.938rem;
display: flex;
justify-content: center;
align-items: center;
}
.product-details-quantity-button-svg {
height: 0.75rem;
width: 0.75rem;
}
.product-details-quantity-button.disabled {
cursor: default;
}
.product-details-quantity-button.disabled svg {
fill: #b7b7b7;
}
.product-details-add-to-bag-button {
background-color: var(--mobile-button-container-primary-default-fill);
border-width: var(--mobile-button-container-primary-default-border);
border-color: var(--mobile-button-container-primary-default-border-color);
border-radius: var(--mobile-button-container-primary-default-border-radius);
flex: 1;
padding-top: var(--mobile-button-container-primary-default-padding-top);
padding-right: var(--mobile-button-container-primary-default-padding-right);
padding-bottom: var(--mobile-button-container-primary-default-padding-bottom);
padding-left: var(--mobile-button-container-primary-default-padding-left);
color: var(--mobile-button-text-primary-default-fill);
font-family: var(--mobile-button-text-primary-default-font-family);
font-size: var(--mobile-button-text-primary-default-font-size);
letter-spacing: var(--mobile-button-text-primary-default-letter-spacing);
line-height: var(--mobile-button-text-primary-default-line-height);
font-weight: var(--mobile-button-text-primary-default-font-weight);
text-transform: var(--mobile-button-text-primary-default-text-case);
text-decoration: var(--mobile-button-text-primary-default-text-decoration);
width: 100%;
}
.product-details-add-to-bag-button:disabled,
.product-details-loading-button {
background-color: var(--mobile-button-container-primary-disabled-fill);
border-width: var(--mobile-button-container-primary-disabled-border);
border-color: var(--mobile-button-container-primary-disabled-border-color);
flex: 1;
padding-top: var(--mobile-button-container-primary-disabled-padding-top);
padding-right: var(--mobile-button-container-primary-disabled-padding-right);
padding-bottom: var(--mobile-button-container-primary-disabled-padding-bottom);
padding-left: var(--mobile-button-container-primary-disabled-padding-left);
color: var(--mobile-button-text-primary-disabled-fill);
font-family: var(--mobile-button-text-primary-disabled-font-family);
font-size: var(--mobile-button-text-primary-disabled-font-size);
letter-spacing: var(--mobile-button-text-primary-disabled-letter-spacing);
line-height: var(--mobile-button-text-primary-disabled-line-height);
font-weight: var(--mobile-button-text-primary-disabled-font-weight);
text-transform: var(--mobile-button-text-primary-disabled-text-case);
text-decoration: var(--mobile-button-text-primary-disabled-text-decoration);
width: 100%;
}
.product-details-loading-button {
width: 15.375rem;
text-align: center;
}
.product-details-loading-button.hidden {
visibility: hidden;
}
.product-details-accordions-container .accordion-content > div > div:not(.accordion-attribute-container) {
margin-top: 0.75rem;
}
.product-details-accordions-ingredients-disclaimer {
color: var(--color-neutral-1-600);
}
.accordion-content {
font-style: normal;
color: var(--desktop-accordion-text-fill);
font-feature-settings: "clig" off, "liga" off;
letter-spacing: var(--desktop-accordion-text-letter-spacing);
text-decoration: var(--desktop-accordion-text-text-decoration);
text-transform: var(--desktop-accordion-text-text-case);
font-size: var(--desktop-accordion-text-font-size);
line-height: var(--desktop-accordion-text-line-height);
font-weight: var(--desktop-accordion-text-font-weight);
font-family: var(--desktop-accordion-text-font-family);
}
.product-details-panel {
width: 345px;
}
.product-details-title {
color: var(--mobile-product-details-title-text-fill);
font-family: var(--mobile-product-details-title-text-font-family);
line-height: var(--mobile-product-details-title-text-line-height);
font-size: var(--mobile-product-details-title-text-font-size);
letter-spacing: var(--mobile-product-details-title-text-letter-spacing);
text-transform: var(--mobile-product-details-title-text-text-case);
font-weight: var(--mobile-product-details-title-text-font-weight);
text-decoration: var(--mobile-product-details-title-text-text-decoration);
margin-top: 1.5rem;
}
.product-details-price {
padding-top: 1.25rem;
}
.product-details-price-per-unit, .variant-size-container {
display: inline-flex;
font-family: var(--mobile-product-details-price-price-per-unit-font-family);
font-size: var(--mobile-product-details-price-price-per-unit-font-size);
font-weight: var(--mobile-product-details-price-price-per-unit-font-weight);
letter-spacing: var(--mobile-product-details-price-price-per-unit-letter-spacing);
text-transform: var(--mobile-product-details-price-price-per-unit-text-case);
text-decoration: var(--mobile-product-details-price-price-per-unit-text-decoration);
color: var(--mobile-product-details-price-price-per-unit-fill);
margin-left: var(--spacing-1);
}
.product-details-price-per-unit:before {
content: "("
}
.product-details-price-per-unit:after {
content: ")"
}
.product-details-price-divider {
display: none;
}
.variant-size-container {
padding-inline-start: var(--spacing-2);
border-inline-start: 1px solid var(--desktop-product-details-price-divider-fill);
display: inline-block;
}
.variant-size-divier {
color: var(--color-neutral-200);
}
.product-details-price-discounted,
.product-details-price-discount-percent {
font-family: var(--mobile-product-details-price-discounted-font-family);
line-height: var(--mobile-product-details-price-discounted-line-height);
font-size: var(--mobile-product-details-price-discounted-font-size);
letter-spacing: var(--mobile-product-details-price-discounted-letter-spacing);
font-weight: var(--mobile-product-details-price-discounted-font-weight);
text-transform: var(--mobile-product-details-price-discounted-text-case);
text-decoration: var(--mobile-product-details-price-discounted-text-decoration);
}
.product-details-price-strikethrough {
font-family: var(--mobile-product-details-price-strikethrough-font-family);
font-size: var(--mobile-product-details-price-strikethrough-font-size);
font-weight: var(--mobile-product-details-price-strikethrough-font-weight);
letter-spacing: var(--mobile-product-details-price-strikethrough-letter-spacing);
line-height: var(--mobile-product-details-price-strikethrough-line-height);
text-decoration: var(--mobile-product-details-price-strikethrough-text-decoration);
text-transform: var(--mobile-product-details-price-strikethrough-text-case);
}
.product-details-price-recommended {
font-family: var(--mobile-product-details-price-recommended-font-family);
line-height: var(--mobile-product-details-price-recommended-line-height);
font-size: var(--mobile-product-details-price-recommended-font-size);
letter-spacing: var(--mobile-product-details-price-recommended-letter-spacing);
font-weight: var(--mobile-product-details-price-recommended-font-weight);
text-transform: var(--mobile-product-details-price-recommended-text-case);
text-decoration: var(--mobile-product-details-price-recommended-text-decoration);
}
.product-details-price-variant-size {
font-family: var(--desktop-product-accordion-product-size-font-family);
font-size: 0.8125rem;
line-height: 1rem;
letter-spacing: -0.025rem;
padding-bottom: 0.125rem;
position: relative;
bottom: 0.0625rem;
}
.product-details-shipping-text {
color: var(--Primary-Black, #000);
font-feature-settings: "clig" off, "liga" off;
font-family: var(--font-family-primary);
font-size: var(--mobile-font-size-base);
font-style: normal;
font-weight: 325;
line-height: var(--desktop-font-leading-base); /* 123.077% */
letter-spacing: -0.4px;
}
.product-details-payment-options-link {
display: flex;
margin-top: 12px;
}
.product-details-payment-options {
color: var(--Secondary-neutral-800, #404040);
font-feature-settings: "clig" off, "liga" off;
font-family: var(--font-family-primary);
font-size: var(--mobile-font-size-xs);
font-style: normal;
font-weight: 325;
line-height: var(--mobile-font-leading-xs); /* 109.091% */
letter-spacing: -0.4px;
padding-right: 2px;
}
.product-details-size-chips-container {
display: grid;
gap: var(--mobile-product-details-size-chips-container-spacing);
grid-row-gap: 12px;
grid-template-columns: 1fr 1fr;
margin-top: 24px;
}
.product-details-size-chip {
cursor: pointer;
border-width: var(--mobile-product-details-size-chip-default-border);
border-color: var(--mobile-product-details-size-chip-default-border-color);
border-radius: var(--mobile-product-details-size-chip-default-border-radius);
padding-top: var(--mobile-product-details-size-chip-default-padding-top);
padding-right: var(--mobile-product-details-size-chip-default-padding-right);
padding-bottom: var(--mobile-product-details-size-chip-default-padding-bottom);
padding-left: var(--mobile-product-details-size-chip-default-padding-left);
height: var(--mobile-product-details-size-chip-default-height);
}
.product-details-size-chip.checked {
border-color: var(--mobile-product-details-size-chip-active-border-color);
border-width: var(--mobile-product-details-size-chip-active-border);
}
.product-details-size-chip.unavailable {
background: linear-gradient(
to top left,
var(--surface-default) calc(50% - 1px),
var(--mobile-product-card-size-chip-container-sold-out-border-color),
var(--surface-default) calc(50% + 1px)
)
}
.product-details-size-chip.checked.unavailable {
background: linear-gradient(
to top left,
var(--surface-default) calc(50% - 1px),
var(--mobile-product-card-size-chip-container-selected-border-color),
var(--surface-default) calc(50% + 1px)
)
}
.product-details-size-chip {
cursor: pointer;
}
.product-details-size-chip.only-size {
cursor: default;
}
.product-details-size-chip-text {
cursor: pointer;
color: var(--mobile-product-details-size-chip-size-fill);
font-family: var(--mobile-product-details-size-chip-size-font-family);
font-weight: var(--mobile-product-details-size-chip-size-font-weight);
line-height: var(--mobile-product-details-size-chip-size-line-height);
font-size: var(--mobile-product-details-size-chip-size-font-size);
text-transform: var(--mobile-product-details-size-chip-size-text-case);
text-decoration: var(--mobile-product-details-size-chip-size-text-decoration);
letter-spacing: var(--mobile-product-details-size-chip-size-letter-spacing);
}
.product-details-size-chip-label {
display: flex;
flex-direction: column;
gap: var(--mobile-product-details-size-chip-default-spacing);
}
.product-details-size-chip-price {
cursor: pointer;
color: var(--mobile-product-details-size-chip-price-recommended-fill);
font-family: var(--mobile-product-details-size-chip-price-recommended-font-family);
font-weight: var(--mobile-product-details-size-chip-price-recommended-font-weight);
line-height: var(--mobile-product-details-size-chip-price-recommended-line-height);
font-size: var(--mobile-product-details-size-chip-price-recommended-font-size);
text-transform: var(--mobile-product-details-size-chip-price-recommended-text-case);
text-decoration: var(--mobile-product-details-size-chip-price-recommended-text-decoration);
letter-spacing: var(--mobile-product-details-size-chip-price-recommended-letter-spacing);
}
.product-details-size-chip.only-size .product-details-size-chip-text {
cursor: auto;
}
.product-details-size-chip.only-size .product-details-size-chip-price {
cursor: auto;
}
.card-vertical-eyebrow {
margin: 1rem 0;
}
.card-vertical-title {
font-family: var(--mobile-card-vertical-title-font-family);
font-weight: var(--mobile-card-vertical-title-font-weight);
font-size: var(--mobile-card-vertical-title-font-size);
line-height: var(--mobile-card-vertical-title-line-height);
text-transform: var(--mobile-card-vertical-title-text-case);
text-decoration: var(--mobile-card-vertical-title-text-decoration);
letter-spacing: var(--mobile-card-vertical-title-letter-spacing);
color: var(--mobile-card-vertical-title-fill);
margin: 1rem 0;
}
.card-vertical-description {
font-family: var(--mobile-card-vertical-description-font-family);
font-weight: var(--mobile-card-vertical-description-font-weight);
font-size: var(--mobile-card-vertical-description-font-size);
line-height: var(--mobile-card-vertical-description-line-height);
text-transform: var(--mobile-card-vertical-description-text-case);
text-decoration: var(--mobile-card-vertical-description-text-decoration);
letter-spacing: var(--mobile-card-vertical-description-letter-spacing);
color: var(--mobile-card-vertical-description-fill);
}
.card-vertical-copy {
margin: 1rem 0;
}
.video-section-fullwidth-container {
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
.video-section-fullwidth-container-end {
order: 1;
}
.video-section-video-container {
position: relative;
}
.video-section-footer {
display: flex;
flex-direction: column;
width: var(--mobile-video-section-text-container-width);
padding-top: var(--mobile-video-section-text-container-padding-top);
padding-right: var(--mobile-video-section-text-container-padding-right);
padding-bottom: var(--mobile-video-section-text-container-padding-bottom);
padding-left: var(--mobile-video-section-text-container-padding-left);
gap: var(--mobile-video-section-text-container-spacing);
}
.video-section-footer-heading {
color: var(--mobile-video-section-text-title-fill);
font-family: var(--mobile-video-section-text-title-font-family);
line-height: var(--mobile-video-section-text-title-line-height);
font-size: var(--mobile-video-section-text-title-font-size);
letter-spacing: var(--mobile-video-section-text-title-letter-spacing);
text-transform: var(--mobile-video-section-text-title-text-case);
font-weight: var(--mobile-video-section-text-title-font-weight);
text-decoration: var(--mobile-video-section-text-title-text-decoration);
}
.video-section-footer-subheading {
color: var(--mobile-video-section-text-body-fill);
font-family: var(--mobile-video-section-text-body-font-family);
line-height: var(--mobile-video-section-text-body-line-height);
font-size: var(--mobile-video-section-text-body-font-size);
letter-spacing: var(--mobile-video-section-text-body-letter-spacing);
text-transform: var(--mobile-video-section-text-body-text-case);
font-weight: var(--mobile-video-section-text-body-font-weight);
text-decoration: var(--mobile-video-section-text-body-text-decoration);
}
.video-section-fullwidth-video {
width: 100%;
}
.video-section-video {
object-fit: cover;
max-width: auto;
height: 29.3125rem;
width: 100%;
}
.video-section-controls-container {
position: absolute;
bottom: 0px;
left: 0px;
padding-top: var(--mobile-video-section-controls-container-padding-top);
padding-right: var(--mobile-video-section-controls-container-padding-right);
padding-bottom: var(--mobile-video-section-controls-container-padding-bottom);
padding-left: var(--mobile-video-section-controls-container-padding-left);
display: flex;
gap: 0.5rem;
}
.video-section-controls-icon {
height: 1.125rem;
width: 1.125rem;
filter: invert(1); /* temporary */
cursor: pointer;
}
.video-section-progress-container {
height: var(--mobile-video-section-progress-completed-height);
background-color: var(--mobile-video-section-progress-container-fill);
}
.video-section-progress-completed {
width: 0;
height: var(--mobile-video-section-progress-container-height);
background-color: #FFFFFF;
transition: width 1s linear;
}
.sticky-cta-container {
width: var(--mobile-sticky-add-to-bag-container-width);
padding-left: var(--mobile-sticky-add-to-bag-container-padding-left);
padding-top: var(--mobile-sticky-add-to-bag-container-padding-top);
padding-right: var(--mobile-sticky-add-to-bag-container-padding-right);
padding-bottom: var(--mobile-sticky-add-to-bag-container-padding-bottom);
border-top: var(--mobile-sticky-add-to-bag-container-border-top) solid var(--mobile-sticky-add-to-bag-container-border-color);
background-color: var(--mobile-sticky-add-to-bag-container-fill);
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
.sticky-cta-content-wrapper {
display: flex;
width: 100%;
justify-content: center;
}
.sticky-cta-container .product-card-add-to-bag,
.sticky-cta-container .product-card-add-to-bag-container {
margin: 0;
width: 100%;
}
.sticky-cta-container .edl-button {
text-decoration: var(--mobile-sticky-add-to-bag-button-text-default-text-decoration);
letter-spacing: var(--mobile-sticky-add-to-bag-button-text-default-letter-spacing);
text-transform: var(--mobile-sticky-add-to-bag-button-text-default-text-case);
font-size: var(--mobile-sticky-add-to-bag-button-text-default-font-size);
line-height: var(--mobile-sticky-add-to-bag-button-text-default-line-height);
font-weight: var(--mobile-sticky-add-to-bag-button-text-default-font-weight);
font-family: var(--mobile-sticky-add-to-bag-button-text-default-font-family);
color: var(--mobile-sticky-add-to-bag-button-text-default-fill);
background-color: var(--mobile-sticky-add-to-bag-button-container-default-fill);
border-color: var(--mobile-sticky-add-to-bag-button-container-default-border-color);
width: 100%;
}
.sticky-cta-container .edl-button:disabled {
text-decoration: var(--mobile-sticky-add-to-bag-button-text-sold-out-text-decoration);
letter-spacing: var(--mobile-sticky-add-to-bag-button-text-sold-out-letter-spacing);
text-transform: var(--mobile-sticky-add-to-bag-button-text-sold-out-text-case);
font-size: var(--mobile-sticky-add-to-bag-button-text-sold-out-font-size);
line-height: var(--mobile-sticky-add-to-bag-button-text-sold-out-line-height);
font-weight: var(--mobile-sticky-add-to-bag-button-text-sold-out-font-weight);
font-family: var(--mobile-sticky-add-to-bag-button-text-sold-out-font-family);
color: var(--mobile-sticky-add-to-bag-button-text-sold-out-fill);
background-color: var(--mobile-sticky-add-to-bag-button-container-sold-out-fill);
border-color: var(--mobile-sticky-add-to-bag-button-container-sold-out-border-color)
}
.accordions-container {
width: 90%;
max-width: 940px;
margin: auto auto 4rem;
}
.accordions:first-child {
border-top: 1px solid var(--desktop-accordion-container-border-color);
}
.accordions {
border-bottom: 1px solid var(--desktop-accordion-container-border-color);
}
.single-unit-accordion-container:first-child {
border-top: 1px solid var(--desktop-accordion-container-border-color);
}
.single-unit-accordion-container:not(:last-child) {
border-bottom: 1px solid var(--desktop-accordion-container-border-color);
}
.accordion {
padding: 12px 0;
}
.accordion-heading {
font-weight: bold;
}
.accordion-attribute {
letter-spacing: var(--mobile-accordion-attribute-title-letter-spacing);
text-transform: var(--mobile-accordion-attribute-title-text-case);
text-decoration: var(--mobile-accordion-attribute-title-text-decoration);
font-size: var(--mobile-accordion-attribute-title-font-size);
line-height: var(--mobile-accordion-attribute-title-line-height);
font-weight: var(--mobile-accordion-attribute-title-font-weight);
font-family: var(--mobile-accordion-attribute-title-font-family);
color: var(--mobile-accordion-attribute-title-fill);
padding-right: 0.25em;
}
.accordion-subheader {
color: var(--mobile-accordion-subheader-fill);
letter-spacing: var(--mobile-accordion-subheader-letter-spacing);
text-decoration: var(--mobile-accordion-subheader-text-decoration);
text-transform: var(--mobile-accordion-subheader-text-case);
font-size: var(--mobile-accordion-subheader-font-size);
line-height: var(--mobile-accordion-subheader-line-height);
font-weight: var(--mobile-accordion-subheader-font-weight);
font-family: var(--mobile-accordion-subheader-font-family);
}
.accordion-toggle {
width: var(--mobile-footer-accordion-icon-width);
height: var(--mobile-footer-accordion-icon-height);
display: inline-block;
position: relative;
flex-shrink: 0;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: "";
width: 100%;
height: 0;
border-top: 1px solid black;
top: 50%;
left: 0;
transform: translateY(-50%);
position: absolute;
transition: transform 200ms;
}
.accordion-toggle.minimized::after {
transform: translateY(-50%) rotate(90deg);
}
.accordion-button {
font-family: var(--desktop-accordion-title-font-family);
font-weight: var(--desktop-accordion-title-font-weight);
font-size: var(--desktop-accordion-title-font-size);
line-height: var(--desktop-accordion-title-line-height);
letter-spacing: var(--desktop-accordion-title-letter-spacing);
text-transform: var(--desktop-accordion-title-text-case);
text-decoration: var(--desktop-accordion-title-text-decoration);
color: var(--desktop-accordion-title-fill);
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
width: 100%;
text-align: start;
}
.accordion-legal, .product-details-accordions-ingredients-disclaimer {
font-family: var(--mobile-accordion-legal-text-font-family);
color: var(--mobile-accordion-legal-text-fill);
font-size: var(--mobile-accordion-legal-text-font-size);
line-height: var(--mobile-accordion-legal-text-line-height);
padding-top: 1em;
margin-top: 0 !important;
}
.mobile-footer-container {
width: var(--mobile-footer-container-width);
grid-gap: var(--mobile-footer-container-spacing);
}
.mobile-footer-top {
background-color: var(--mobile-footer-top-fill);
width: var(--mobile-footer-top-width);
grid-gap: var(--mobile-footer-top-spacing);
}
.mobile-footer-bottom {
width: var(--mobile-footer-bottom-width);
padding-bottom: var(--mobile-footer-bottom-padding-bottom);
padding-right: var(--mobile-footer-bottom-padding-right);
padding-left: var(--mobile-footer-bottom-padding-left);
grid-gap: var(--mobile-footer-bottom-spacing);
background-color: var(--mobile-footer-bottom-fill);
}
.mobile-footer-accordion-container {
width: var(--mobile-footer-accordion-container-width);
padding-bottom: var(--mobile-footer-accordion-container-padding-bottom);
padding-top: var(--mobile-footer-accordion-container-padding-top);
grid-gap: var(--mobile-footer-accordion-container-spacing);
border-bottom-width: var(--mobile-footer-accordion-container-border-bottom);
border-bottom-color: var(--mobile-footer-accordion-container-border-color);
}
.mobile-footer-accordion-heading {
width: var(--mobile-footer-accordion-heading-width);
padding-top: var(--mobile-footer-accordion-heading-padding-top);
padding-bottom: var(--mobile-footer-accordion-heading-padding-bottom);
padding-right: var(--mobile-footer-accordion-heading-padding-right);
padding-left: var(--mobile-footer-accordion-heading-padding-left);
grid-gap: var(--mobile-footer-accordion-heading-spacing);
}
.mobile-footer-links-container {
width: var(--mobile-footer-links-container-width);
padding-right: var(--mobile-footer-links-container-padding-right);
padding-left: var(--mobile-footer-links-container-padding-left);
grid-gap: var(--mobile-footer-links-container-spacing);
display: grid;
}
.mobile-footer-accordion-title-text,
.accordion-button span.mobile-footer-accordion-title-text {
font-family: var(--mobile-footer-accordion-title-text-font-family);
font-weight: var(--mobile-footer-accordion-title-text-font-weight);
font-size: var(--mobile-footer-accordion-title-text-font-size);
line-height: var(--mobile-footer-accordion-title-text-line-height);
letter-spacing: var(--mobile-footer-accordion-title-text-letter-spacing);
text-transform: var(--mobile-footer-accordion-title-text-text-case);
text-decoration: var(--mobile-footer-accordion-title-text-text-decoration);
color: var(--mobile-footer-accordion-title-text-fill);
}
.mobile-footer-accordion-icon {
width: var(--mobile-footer-accordion-icon-width);
height: var(--mobile-footer-accordion-icon-height);
fill: var(--mobile-footer-accordion-icon-fill);
}
.mobile-footer-accordion-icon::after,
.mobile-footer-accordion-icon::before {
border-color: var(--mobile-footer-accordion-icon-fill);
}
.mobile-footer-link {
font-family: var(--mobile-footer-link-font-family);
font-weight: var(--mobile-footer-link-font-weight);
font-size: var(--mobile-footer-link-font-size);
line-height: var(--mobile-footer-link-line-height);
letter-spacing: var(--mobile-footer-link-letter-spacing);
text-transform: var(--mobile-footer-link-text-case);
text-decoration: var(--mobile-footer-link-text-decoration);
color: var(--mobile-footer-link-fill);
}
.mobile-footer-link button {
text-transform: var(--desktop-footer-link-text-case);
}
.mobile-footer-link:first-child {
margin-top: 20px;
}
.product-card-shade-swatches .vul-shades-horizontal-scroll-root {
display: flex;
align-items: center;
gap: 8px;
margin-top: var(--desktop-product-card-shade-chips-container-spacing);
}
.product-details-shade-swatches .product-card-shade-slider {
display: flex;
align-items: start;
gap: 2px;
margin-top: 24px;
flex: 1;
}
.shades-tabs-wrapper {
display: flex;
flex: 1;
overflow: hidden;
}
.shades-tabs-container {
width: 100%;
border-bottom-width: var(--desktop-product-details-shade-tab-carousel-container-border-bottom);
border-bottom-color: var(--desktop-product-details-shade-tab-carousel-container-border-color);
border-bottom-style: solid;
overflow: hidden;
gap: var(--spacing-2);
}
.shade-tabs-item-content {
display: inline-block;
}
.shades-tabs-item {
text-transform: var(--mobile-product-details-shade-tab-text-active-text-case);
text-decoration: var(--mobile-product-details-shade-tab-text-default-text-decoration);
padding: var(--mobile-product-details-shade-tab-container-default-padding-bottom)
var(--mobile-product-details-shade-tab-container-default-padding-right)
var(--mobile-product-details-shade-tab-container-default-padding-bottom)
var(--mobile-product-details-shade-tab-container-default-padding-left);
color: var(--mobile-product-details-shade-tab-text-default-fill);
font-size: var(--mobile-product-details-shade-tab-text-default-font-size);
line-height: var(--mobile-product-details-shade-tab-text-default-line-height);
font-weight: var(--mobile-product-details-shade-tab-text-default-font-weight);
font-family: var(--mobile-product-details-shade-tab-text-default-font-family);
border-bottom: var(--mobile-product-details-shade-tab-container-default-border-bottom) solid transparent;
line-height: var(--mobile-product-details-shade-tab-text-default-line-height);
letter-spacing: var(--mobile-product-details-shade-tab-text-active-letter-spacing);
display: block;
white-space: nowrap;
width: 100%;
}
.shades-tabs-item.active {
color: var(--mobile-product-details-shade-tab-text-active-fill);
font-size: var(--mobile-product-details-shade-tab-text-active-font-size);
line-height: var(--mobile-product-details-shade-tab-text-active-line-height);
font-weight: var(--mobile-product-details-shade-tab-text-active-font-weight);
font-family: var(--mobile-product-details-shade-tab-text-active-font-family);
border-bottom: var(--mobile-product-details-shade-tab-container-active-border-bottom) solid var(--mobile-product-details-shade-tab-text-active-fill);
line-height: var(--mobile-product-details-shade-tab-text-active-line-height);
padding: var(--mobile-product-details-shade-tab-container-active-padding-bottom)
var(--mobile-product-details-shade-tab-container-active-padding-right)
var(--mobile-product-details-shade-tab-container-active-padding-bottom)
var(--mobile-product-details-shade-tab-container-active-padding-left);
}
.shades-tabs-item-wrapper {
flex: 1;
}
.shades-tab-item-text {
white-space: nowrap;
}
.shades-tabs-button {
width: var(--desktop-product-details-shade-tab-carousel-icon-default-width, 16px);
height: var(--desktop-product-details-shade-tab-carousel-icon-default-height, 16px);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.shades-tabs-button svg {
width: 100%;
height: 100%;
}
.shades-tabs-button:disabled {
opacity: var(--mobile-carousel-carousel-indicator-inactive-opacity);
}
.shades-tabs-previous-button {
transform: translateY(-50%) rotate(180deg);
}
.product-card-shade-swatches ul {
display: flex;
align-items: center;
justify-items: start;
justify-content: start;
gap: var(--mobile-product-card-sku-carousel-container-spacing);
flex: 1;
overflow: hidden;
height: var(--mobile-product-card-shade-chip-height);
}
.product-details-shade-picker ul {
padding: 0 24px;
}
.product-card-shade-button {
opacity: 0;
position: absolute;
width: 0;
height: 0;
border: none;
}
.product-card-shade-button-label {
cursor: pointer;
}
.product-card-shade-nav-button {
border: 1px solid #000;
border-right: 0;
border-bottom: 0;
transform: rotate(-45deg);
width: 12px;
height: 12px;
position: relative;
}
.product-card-shade-nav-button:disabled {
border-color: var(--input-default-border);
}
.product-card-shade-nav-button:last-of-type {
transform: rotate(135deg);
}
.product-card-shade-nav-button svg {
display: none;
}
.shade-slider-multiple-item {
position: relative;
}
.product-card-product-card-shade-swatches .shade-slider-multiple-item {
position: relative;
}
.shade-slider-swatch-container {
position: relative;
padding: 1px;
}
.shade-swatch {
border-width: var(--mobile-product-card-shade-chip-border);
border-style: solid;
border-color: var(--mobile-product-card-shade-chip-border-color);
border-radius: var(--mobile-product-card-shade-chip-border-radius);
cursor: pointer;
width: var(--mobile-product-card-shade-chip-width);
height: var(--mobile-product-card-shade-chip-height);
overflow: hidden;
display: flex;
flex-wrap: wrap;
&.shade-selected {
border-color: var(--mobile-product-card-shade-chip-selected-border-color);
outline-width: var(--mobile-product-card-shade-chip-border);
outline-style: solid;
outline-color: #fff;
outline-offset: -2px;
}
}
.shade-picker-dropdown .shade-swatch {
width: var(--mobile-dropdown-icon-width);
height: var(--mobile-dropdown-icon-height);
}
.product-details-shade-swatches {
margin-top: 1.25rem;
}
.sr-only {
inset-inline-start: 0;
}
.multi-shade-blocks-swatch {
flex: 1;
flex-grow: 1;
height: 50%;
min-width: 50%;
}
.multi-shade-blocks-swatch:first-child:nth-last-child(2),
.multi-shade-blocks-swatch:first-child:nth-last-child(2) ~ .multi-shade-blocks-swatch {
min-width: 100%;
}
.product-card-description {
font-family: var(--mobile-product-card-description-font-family);
line-height: var(--mobile-product-card-description-line-height);
font-size: var(--mobile-product-card-description-font-size);
letter-spacing: var(--mobile-product-card-description-letter-spacing);
font-weight: var(--mobile-product-card-description-font-weight);
text-transform: var(--mobile-product-card-description-text-case);
text-decoration: var(--mobile-product-card-description-text-decoration);
margin-top: var(--mobile-product-card-title-description-container-spacing);
color: var(--mobile-product-card-description-fill);
flex-grow: 1;
}
.product-card-title {
color: var(--mobile-product-card-title-fill);
font-family: var(--mobile-product-card-title-font-family);
line-height: var(--mobile-product-card-title-line-height);
font-size: var(--mobile-product-card-title-font-size);
letter-spacing: var(--mobile-product-card-title-letter-spacing);
font-weight: var(--mobile-product-card-title-font-weight);
text-transform: var(--mobile-product-card-title-text-case);
text-decoration: var(--mobile-product-card-title-text-decoration);
margin-top: 1rem;
}
.product-card-rating {
margin-top: var(--mobile-product-card-rating-container-spacing);
}
.product-card-rating-average {
color: var(--mobile-product-card-rating-average-fill);
font-family: var(--mobile-product-card-rating-average-font-family);
line-height: var(--mobile-product-card-rating-average-line-height);
font-size: var(--mobile-product-card-rating-average-font-size);
letter-spacing: var(--mobile-product-card-rating-average-letter-spacing);
font-weight: var(--mobile-product-card-rating-average-font-weight);
text-transform: var(--mobile-product-card-rating-average-text-case);
text-decoration: var(--mobile-product-card-rating-average-text-decoration);
}
.product-card-rating-score {
font-family: var(--mobile-product-details-review-number-font-family);
font-weight: var(--mobile-product-details-review-number-font-weight);
font-size: var(--mobile-product-details-review-number-font-size);
line-height: var(--mobile-product-details-review-number-line-height);
letter-spacing: var(--mobile-product-details-review-number-letter-spacing);
text-transform: var(--mobile-product-details-review-number-text-case);
text-decoration: var(--mobile-product-details-review-number-text-decoration);
color: var(--mobile-product-details-review-number-fill);
}
.product-card-rating-link {
color: var(--mobile-product-details-review-link-fill);
font-family: var(--mobile-product-details-review-link-font-family);
line-height: var(--mobile-product-details-review-link-line-height);
font-size: var(--mobile-product-details-review-link-font-size);
font-weight: var(--mobile-product-details-review-link-font-weight);
text-decoration-line: var(--mobile-product-details-review-link-text-decoration);
text-transform: var(--mobile-product-details-review-link-text-case);
letter-spacing: var(--mobile-product-details-review-link-letter-spacing);
padding-left: var(--mobile-product-details-review-rating-container-spacing);
}
.product-card-rating-icon {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
position: relative;
width: calc(var(--mobile-product-card-rating-icon-active-width) * 5);
height: var(--mobile-product-card-rating-icon-active-height);
}
.product-card-rating-icon::before,
.product-card-rating-icon::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
}
.product-card-rating-icon::before {
background-color: var(--mobile-product-card-rating-icon-inactive-fill);
}
.product-card-rating-icon::after {
background-color: var(--mobile-product-card-rating-icon-active-fill);
width: var(--percent);
overflow: hidden;
}
.product-card-image {
background: var(--mobile-product-card-image-fill)
}
.product-card-image-badge-text {
font-family: var(--mobile-product-card-image-badge-text-font-family);
font-size: var(--mobile-product-card-image-badge-text-font-size);
font-weight: var(--mobile-product-card-image-badge-text-font-weight);
}
.product-card-image-badge-image {
margin-top: var(--mobile-image-badge-image-margin-top);
}
.product-card-variant-count-badge-text {
font-family: var(--mobile-product-card-image-skus-count-font-family);
font-size: var(--mobile-product-card-image-skus-count-font-size);
font-weight: var(--mobile-product-card-image-skus-count-font-weight);
line-height: var(--mobile-product-card-image-skus-count-line-height);
letter-spacing: var(--mobile-product-card-image-skus-count-letter-spacing);
text-decoration: var(--mobile-product-card-image-skus-count-text-decoration);
text-transform: var(--mobile-product-card-image-skus-count-text-case);
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
color: var(--mobile-product-card-image-skus-count-fill);
}
.product-card-price {
margin-top: var(--mobile-product-card-detail-panel-spacing);
}
.product-card-price-recommended {
font-family: var(--mobile-product-card-price-recommended-font-family);
line-height: var(--mobile-product-card-price-recommended-line-height);
font-size: var(--mobile-product-card-price-recommended-font-size);
letter-spacing: var(--mobile-product-card-price-recommended-letter-spacing);
font-weight: var(--mobile-product-card-price-recommended-font-weight);
text-transform: var(--mobile-product-card-price-recommended-text-case);
text-decoration: var(--mobile-product-card-price-recommended-text-decoration);
color: var(--mobile-product-card-price-recommended-fill);
}
.product-card-price-discounted {
font-family: var(--mobile-product-card-price-discounted-font-family);
line-height: var(--mobile-product-card-price-discounted-line-height);
font-size: var(--mobile-product-card-price-discounted-font-size);
letter-spacing: var(--mobile-product-card-price-discounted-letter-spacing);
font-weight: var(--mobile-product-card-price-discounted-font-weight);
text-transform: var(--mobile-product-card-price-discounted-text-case);
text-decoration: var(--mobile-product-card-price-discounted-text-decoration);
color: var(--mobile-product-card-price-discounted-fill);
}
.product-card-price-per-unit {
font-family: var(--mobile-product-card-price-price-per-unit-font-family);
line-height: var(--mobile-product-card-price-price-per-unit-line-height);
font-size: var(--mobile-product-card-price-price-per-unit-font-size);
letter-spacing: var(--mobile-product-card-price-price-per-unit-letter-spacing);
font-weight: var(--mobile-product-card-price-price-per-unit-font-weight);
text-transform: var(--mobile-product-card-price-price-per-unit-text-case);
text-decoration: var(--mobile-product-card-price-price-per-unit-text-decoration);
color: var(--mobile-product-card-price-price-per-unit-fill);
display: inline-flex;
}
.product-card-price-divider {
margin-right: var(--mobile-product-card-price-container-spacing);
margin-left: var(--mobile-product-card-price-container-spacing);
font-family: var(--mobile-product-card-price-divider-font-family);
font-size: var(--mobile-product-card-price-divider-font-size);
letter-spacing: var(--mobile-product-card-price-divider-letter-spacing);
font-weight: var(--mobile-product-card-price-divider-font-weight);
text-transform: var(--mobile-product-card-price-divider-text-case);
text-decoration: var(--mobile-product-card-price-divider-text-decoration);
color: var(--mobile-product-card-price-divider-fill);
}
.product-card-price-discount-percent {
font-family: var(--mobile-product-card-price-discount-percent-font-family);
line-height: var(--mobile-product-card-price-discount-percent-line-height);
font-size: var(--mobile-product-card-price-discount-percent-font-size);
letter-spacing: var(--mobile-product-card-price-discount-percent-letter-spacing);
font-weight: var(--mobile-product-card-price-discount-percent-font-weight);
letter-spacing: var(--mobile-product-card-price-discount-percent-letter-spacing);
font-weight: var(--mobile-product-card-price-discount-percent-font-weight);
text-transform: var(--mobile-product-card-price-discount-percent-text-case);
text-decoration: var(--mobile-product-card-price-discount-percent-text-decoration);
color: var(--mobile-product-card-price-discount-percent-fill);
}
.product-card-price-strikethrough,
.product-price-with-strikethrough {
font-family: var(--mobile-product-card-price-strikethrough-font-family);
line-height: var(--mobile-product-card-price-strikethrough-line-height);
font-size: var(--mobile-product-card-price-strikethrough-font-size);
letter-spacing: var(--mobile-product-card-price-strikethrough-letter-spacing);
font-weight: var(--mobile-product-card-price-strikethrough-font-weight);
text-transform: var(--mobile-product-card-price-strikethrough-text-case);
text-decoration: var(
--mobile-product-card-price-strikethrough-text-decoration
);
color: var(--mobile-product-card-price-strikethrough-fill);
}
.product-card-size-chips-form {
margin-top: 1.625rem;
display: flex;
align-items: center;
}
.product-card-shade-nav-button:disabled {
opacity: var(--desktop-carousel-carousel-indicator-inactive-opacity);
}
.product-card-size-slider-chips-button-prev:disabled {
opacity: var(--desktop-carousel-carousel-indicator-inactive-opacity);
}
.product-card-size-slider-chips-button-next:disabled {
opacity: var(--desktop-carousel-carousel-indicator-inactive-opacity);
}
.product-card-size-chips-container {
flex-grow: 1;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
position: relative;
min-width: 0;
}
.product-card-size-chips-container::-webkit-scrollbar {
display: none;
}
.product-card-size-slider-chips-button {
height: 30px;
font-variant-ligatures: common-ligatures;
}
.product-card-size-slider-chips-button:after {
font-family: swiper-icons;
color: var(--pincer-swiper-navigation-font-color);
opacity: var(--pincer-swiper-navigation-opacity);
}
.product-card-size-slider-chips-button-prev:after {
content: "prev";
}
.product-card-size-slider-chips-button-next:after {
content: "next";
}
.product-card-size-chip {
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
height: var(--mobile-product-card-size-chip-container-default-height);
background-color: var(--mobile-product-card-size-chip-container-default-fill);
border-width: var(--mobile-product-card-size-chip-container-default-border);
border-color: var(--mobile-product-card-size-chip-container-default-border-color);
border-radius: var(--mobile-product-card-size-chip-container-default-border-radius);
padding-top: var(--mobile-product-card-size-chip-container-default-padding-top);
padding-right: var(--mobile-product-card-size-chip-container-default-padding-right);
padding-bottom: var(--mobile-product-card-size-chip-container-default-padding-bottom);
padding-left: var(--mobile-product-card-size-chip-container-default-padding-left);
margin-right: var(--mobile-product-card-size-chips-container-spacing);
}
.product-card-size-chip label {
white-space: nowrap;
}
.product-card-size-chip.checked {
border-color: var(--mobile-product-card-size-chip-container-selected-border-color);
border-width: var(--mobile-product-card-size-chip-container-selected-border);
}
.product-card-size-chip.unavailable {
background: linear-gradient(
to top left,
var(--surface-default) calc(50% - 1px),
var(--mobile-product-card-size-chip-container-sold-out-border-color),
var(--surface-default) calc(50% + 1px)
)
}
.product-card-size-chip.checked.unavailable {
background: linear-gradient(
to top left,
var(--surface-default) calc(50% - 1px),
var(--mobile-product-card-size-chip-container-selected-border-color),
var(--surface-default) calc(50% + 1px)
)
}
.product-card-size-chip-text {
color: var(--mobile-product-card-size-chip-text-default-fill);
font-family: var(--mobile-product-card-size-chip-text-default-font-family);
line-height: var(--mobile-product-card-size-chip-text-default-line-height);
font-size: var(--mobile-product-card-size-chip-text-default-font-size);
letter-spacing: var(--mobile-product-card-size-chip-text-default-letter-spacing);
font-weight: var(--mobile-product-card-size-chip-text-default-font-weight);
text-transform: var(--mobile-product-card-size-chip-text-default-text-case);
text-decoration: var(--mobile-product-card-size-chip-text-default-text-decoration);
white-space: nowrap;
}
.product-card-add-to-bag {
margin-top: 1rem;
}
.product-card-add-to-bag-container {
margin-top: 1em;
}
.product-card-add-to-bag-button {
background-color: var(--mobile-button-container-primary-default-fill);
border-width: var(--mobile-button-container-primary-default-border);
border-color: var(--mobile-button-container-primary-default-border-color);
border-radius: var(--mobile-button-container-primary-default-border-radius);
padding-top: var(--mobile-button-container-primary-default-padding-top);
padding-right: var(--mobile-button-container-primary-default-padding-right);
padding-bottom: var(--mobile-button-container-primary-default-padding-bottom);
padding-left: var(--mobile-button-container-primary-default-padding-left);
color: var(--mobile-button-text-primary-default-fill);
font-family: var(--mobile-button-text-primary-default-font-family);
line-height: var(--mobile-button-text-primary-default-line-height);
font-size: var(--mobile-button-text-primary-default-font-size);
letter-spacing: var(--mobile-button-text-primary-default-letter-spacing);
font-weight: var(--mobile-button-text-primary-default-font-weight);
text-transform: var(--mobile-button-text-primary-default-text-case);
text-decoration: var(--mobile-button-text-primary-default-text-decoration);
width: 100%;
}
.product-card-add-to-bag-button:disabled, .product-card-loading-button {
background-color: var(--mobile-product-card-button-add-to-cart-container-sold-out-fill);
border-width: var(--mobile-product-card-button-add-to-cart-container-sold-out-border);
border-color: var(--mobile-product-card-button-add-to-cart-container-sold-out-border-color);
padding-top: var(--mobile-product-card-button-add-to-cart-container-sold-out-padding-top);
padding-right: var(--mobile-product-card-button-add-to-cart-container-sold-out-padding-right);
padding-bottom: var(--mobile-product-card-button-add-to-cart-container-sold-out-padding-bottom);
padding-left: var(--mobile-product-card-button-add-to-cart-container-sold-out-padding-left);
color: var(--mobile-product-card-button-add-to-cart-text-sold-out-fill);
font-family: var(--mobile-product-card-button-add-to-cart-text-sold-out-font-family);
line-height: var(--mobile-product-card-button-add-to-cart-text-sold-out-line-height);
font-size: var(--mobile-product-card-button-add-to-cart-text-sold-out-font-size);
letter-spacing: var(--mobile-product-card-button-add-to-cart-text-sold-out-letter-spacing);
font-weight: var(--mobile-product-card-button-add-to-cart-text-sold-out-font-weight);
text-transform: var(--mobile-product-card-button-add-to-cart-text-sold-out-text-case);
text-decoration: var(--mobile-product-card-button-add-to-cart-text-sold-out-text-decoration);
}
.product-card-loading-button {
width: 100%;
display: inline-block;
text-align: center;
}
.product-card-loading-button.hidden {
display: none;
}
.product-card-image-panel {
aspect-ratio: 1/1;
position: relative;
}
.product-card-badge-text {
position: absolute;
top: 0.5rem;
left: 0.5rem;
color: var(--mobile-product-card-badge-text-fill);
font-family: var(--mobile-product-card-badge-text-font-family);
line-height: var(--mobile-product-card-badge-text-line-height);
font-size: var(--mobile-product-card-badge-text-font-size);
letter-spacing: var(--mobile-product-card-badge-text-letter-spacing);
font-weight: var(--mobile-product-card-badge-text-font-weight);
text-transform: var(--mobile-product-card-badge-text-text-case);
text-decoration: var(--mobile-product-card-badge-text-text-decoration);
}
.product-card-details-panel {
align-content: flex-end;
display: flex;
flex-direction: column;
flex-grow: 1;
margin-left: 1rem;
margin-right: 1rem;
}
.product-card-shade-picker-grid {
display: flex;
gap: var(--mobile-product-card-shade-chips-container-spacing);
margin-bottom: 1.5rem;
}
.product-details-shade-swatches .product-card-shade-picker-grid {
flex-wrap: wrap;
}
.product-card-shade-grid-item[href="#"], .product-card-shade-grid-item[href="#"] .product-card-shade-button-label {
cursor: default;
}
.banner-container {
position: relative;
min-height: 132px;
}
.banner-image-container {
min-height: 132px;
}
.banner-title,
.banner-category-title {
font-family: var(--mobile-category-banner-category-title-font-family);
font-weight: var(--mobile-category-banner-category-title-font-weight);
font-size: var(--mobile-category-banner-category-title-font-size);
letter-spacing: var(--mobile-category-banner-category-title-letter-spacing);
line-height: var(--mobile-category-banner-category-title-line-height);
text-transform: var(--mobile-category-banner-category-title-text-case);
text-decoration: var(--mobile-category-banner-category-title-text-decoration);
color: var(--mobile-category-banner-category-title-fill);
}
.banner-subtitle
.banner-category-subtitle {
font-family: var(--mobile-category-banner-category-description-font-family);
font-weight: var(--mobile-category-banner-category-description-font-weight);
font-size: var(--mobile-category-banner-category-description-font-size);
letter-spacing: var(--mobile-category-banner-category-description-letter-spacing);
line-height: var(--mobile-category-banner-category-description-line-height);
text-transform: var(--mobile-category-banner-category-description-text-case);
text-decoration: var(--mobile-category-banner-category-description-text-decoration);
color: var(--mobile-category-banner-category-description-fill);
}
.banner-image-content {
position: absolute;
left: 18px;
bottom: 18px;
right: 18px;
}
.banner-image-content .anchor-section-container,
.banner-inline-container .anchor-section-container {
margin-top: 1rem;
flex-direction: row;
}
.banner-image-content .anchor-section-item,
.banner-inline-container .anchor-section-item {
width: auto;
}
.card-section-split-text {
width: var(--mobile-image-section-1-1-text-half-width);
padding-top: 32px;
padding-bottom: 32px;
padding-right: var(--mobile-image-section-1-1-text-half-padding-right);
padding-bottom: var(--mobile-image-section-1-1-text-half-padding-bottom);
padding-left: var(--mobile-image-section-1-1-text-half-padding-left);
}
.card-section-split-text-headline {
font-family: var(--mobile-font-heading-4xl-font-family);
line-height: var(--mobile-font-heading-4xl-line-height);
font-size: var(--mobile-font-heading-4xl-font-size);
letter-spacing: var(--mobile-font-heading-4xl-letter-spacing);
font-weight: var(--mobile-font-heading-4xl-font-weight);
text-transform: var(--mobile-font-heading-4xl-text-case);
text-decoration: var(--mobile-font-heading-4xl-text-decoration);
margin-bottom: 1.25rem;
}
.card-section-split-image {
object-fit: cover;
height: 100%;
width: 100%;
}
.rich-text > * > *:first-child {
margin-top: 0;
}
.rich-text {
font-family: var(--mobile-rich-text-body-normal-font-family);
line-height: var(--mobile-rich-text-body-normal-line-height);
font-size: var(--mobile-rich-text-body-normal-font-size);
letter-spacing: var(--mobile-rich-text-body-normal-letter-spacing);
font-weight: var(--mobile-rich-text-body-normal-font-weight);
text-transform: var(--mobile-rich-text-body-normal-text-case);
text-decoration: var(--mobile-rich-text-body-normal-text-decoration);
}
.rich-text i {
font-style: italic;
}
.rich-text b {
font-weight: bold;
}
.rich-text h1 {
font-family: var(--mobile-rich-text-h1-font-family);
line-height: var(--mobile-rich-text-h1-line-height);
font-size: var(--mobile-rich-text-h1-font-size);
letter-spacing: var(--mobile-rich-text-h1-letter-spacing);
font-weight: var(--mobile-rich-text-h1-font-weight);
text-transform: var(--mobile-rich-text-h1-text-case);
text-decoration: var(--mobile-rich-text-h1-text-decoration);
margin-top: 1.5rem;
}
.rich-text h2 {
font-family: var(--mobile-rich-text-h2-font-family);
line-height: var(--mobile-rich-text-h2-line-height);
font-size: var(--mobile-rich-text-h2-font-size);
letter-spacing: var(--mobile-rich-text-h2-letter-spacing);
font-weight: var(--mobile-rich-text-h2-font-weight);
text-transform: var(--mobile-rich-text-h2-text-case);
text-decoration: var(--mobile-rich-text-h2-text-decoration);
margin-top: 1rem;
}
.rich-text h3 {
font-family: var(--mobile-rich-text-h3-font-family);
line-height: var(--mobile-rich-text-h3-line-height);
font-size: var(--mobile-rich-text-h3-font-size);
letter-spacing: var(--mobile-rich-text-h3-letter-spacing);
font-weight: var(--mobile-rich-text-h3-font-weight);
text-transform: var(--mobile-rich-text-h3-text-case);
text-decoration: var(--mobile-rich-text-h3-text-decoration);
margin-top: 1.5rem;
}
.rich-text h4 {
font-family: var(--mobile-rich-text-h4-font-family);
line-height: var(--mobile-rich-text-h4-line-height);
font-size: var(--mobile-rich-text-h4-font-size);
letter-spacing: var(--mobile-rich-text-h4-letter-spacing);
font-weight: var(--mobile-rich-text-h4-font-weight);
text-transform: var(--mobile-rich-text-h4-text-case);
text-decoration: var(--mobile-rich-text-h4-text-decoration);
margin-top: 1.5rem;
}
.rich-text h5 {
font-family: var(--mobile-rich-text-h5-font-family);
line-height: var(--mobile-rich-text-h5-line-height);
font-size: var(--mobile-rich-text-h5-font-size);
letter-spacing: var(--mobile-rich-text-h5-letter-spacing);
font-weight: var(--mobile-rich-text-h5-font-weight);
text-transform: var(--mobile-rich-text-h5-text-case);
text-decoration: var(--mobile-rich-text-h5-text-decoration);
margin-top: 1.5rem;
}
.rich-text h6 {
font-family: var(--mobile-rich-text-h6-font-family);
line-height: var(--mobile-rich-text-h6-line-height);
font-size: var(--mobile-rich-text-h6-font-size);
letter-spacing: var(--mobile-rich-text-h6-letter-spacing);
font-weight: var(--mobile-rich-text-h6-font-weight);
text-transform: var(--mobile-rich-text-h6-text-case);
text-decoration: var(--mobile-rich-text-h6-text-decoration);
margin-top: 1.5rem;
}
.rich-text a {
text-decoration: underline;
}
.rich-text a:visited {
text-decoration: underline;
}
.rich-text ul {
list-style: disc;
padding-left: 2rem;
}
.markdown ul {
list-style: disc;
padding-left: 1rem;
}
.markdown ol {
list-style: decimal;
padding-left: 1rem;
}
.markdown strong {
font-weight: bold;
}
/* these defaults for the h1, h2, h3, h4, and p tags came from https://www.w3schools.com/ */
.markdown h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.markdown h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.markdown h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.markdown h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.markdown p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.rich-text ol {
list-style-type: decimal;
padding-left: 2rem;
}
.rich-text p {
margin-top: 1rem;
}
.desktop-header-brand-logo-container {
display: none;
}
.desktop-header-brand-logo {
display: inline-flex;
align-self: flex-start;
margin-bottom: 0.75rem;
}
.desktop-header-brand-logo-with-salon-logo {
padding-left: 1rem;
}
.header-salon-logo {
padding-right: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 45px;
margin-bottom: 0.5rem;
}
.desktop-header-logo-separator {
border-left-width: 2px;
padding-left: 1rem;
}
.header-background {
background-color: var(--mobile-header-container-fill)
}
.header-container {
max-width: 1536px;
margin: auto;
}
.header-brand-logo {
color: #000000;
width: var(--mobile-header-logo-width);
height: var(--mobile-header-logo-height);
}
.mobile-header-search-container {
display: flex;
justify-content: start;
align-items: center;
column-gap: 12px;
padding: 12px 16px;
width: 100%;
border-color: var(--desktop-header-search-container-border-color);
border-bottom-width: var(--desktop-header-search-container-border-bottom);
}
.screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.header-secondary-links-icon {
color: var(--mobile-header-secondary-link-icon-fill);
width: var(--desktop-header-secondary-link-icon-width);
height: var(--desktop-header-secondary-link-icon-height);
}
.header-search-text {
color: var(--desktop-header-search-text-fill);
font-family: var(--desktop-header-search-text-font-family);
font-weight: var(--desktop-header-search-text-font-weight);
font-size: var(--desktop-header-search-text-font-size);
line-height: var(--desktop-header-search-text-line-height);
letter-spacing: var(--desktop-header-search-text-letter-spacing);
text-transform: var(--desktop-header-search-text-text-case);
text-decoration: var(--desktop-header-search-text-text-decoration);
}
.header-search-icon {
width: var(--desktop-header-secondary-link-icon-width);
height: var(--desktop-header-secondary-link-icon-height);
fill: var(--desktop-header-secondary-link-icon-fill);
}
.product-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
row-gap: 60px;
}
.product-card {
display: flex;
flex-direction: column;
height: 100%;
}
.product-details-shade-picker .product-card-shade-slider {
display: flex;
flex-wrap: wrap;
}
.selected-shade-name {
color: var(--mobile-product-card-shade-name-fill);
font-family: var(--mobile-product-card-shade-name-font-family);
text-decoration: var(--mobile-product-card-shade-name-text-decoration);
text-transform: var(--mobile-product-card-shade-name-text-case);
letter-spacing: var(--mobile-product-card-shade-name-letter-spacing);
line-height: var(--mobile-product-card-shade-name-line-height);
font-size: var(--mobile-product-card-shade-name-font-size);
font-weight: var(--mobile-product-card-shade-name-font-weight);
}
.selected-shade-description {
letter-spacing: var(--mobile-product-details-shade-description-letter-spacing);
text-transform: var(--mobile-product-details-shade-description-text-case);
text-decoration: var(--mobile-product-details-shade-description-text-decoration);
font-size: var(--mobile-product-details-shade-description-font-size);
line-height: var(--mobile-product-details-shade-description-line-height);
font-weight: var(--mobile-product-details-shade-description-font-weight);
font-family: var(--mobile-product-details-shade-description-font-family);
}
.product-card-shade-swatches .selected-shade-name, .product-card-shade-swatches .selected-shade-description {
margin-top: var(--desktop-product-card-shade-chips-container-padding-top);
display: block;
}
.shade-picker-dropdown {
position: relative;
width: 100%;
margin-top: 8px;
}
.shade-picker-dropdown-trigger-button {
background-color: var(--desktop-dropdown-list-item-default-fill);
border-color: var(--outline-variant);
border-radius: var(--border-radius-xl);
border-style: solid;
border-width: 1px;
padding: 12px;
width: 100%;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.shade-picker-dropdown-trigger-swatch {
width: 16px;
height: 16px;
border: 1px solid var(--input-default-border);
}
.shade-picker-dropdown-trigger-title {
color: var(--desktop-dropdown-text-active-fill);
letter-spacing: var(--desktop-dropdown-text-active-letter-spacing);
text-decoration: var(--desktop-dropdown-text-active-text-decoration);
text-transform: var(--desktop-dropdown-list-item-text-text-case);
font-size: var(--desktop-dropdown-text-active-font-size);
line-height: var(--desktop-dropdown-text-active-line-height);
font-weight: var(--desktop-dropdown-text-active-font-weight);
font-family: var(--desktop-dropdown-text-active-font-family);
flex: 1;
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.shade-picker-dropdown-trigger-chevron {
color: var(--desktop-dropdown-icon-fill);
width: 13px;
height: 13px;
border: 1px solid #000;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
position: relative;
top: -4px;
transition: transform 200ms, top 200ms;
}
.shade-picker-dropdown-trigger-chevron.is-open {
transform: rotate(-135deg);
top: 4px;
}
.shade-picker-dropdown-list {
position: absolute;
top: 43px;
background-color: var(--desktop-dropdown-list-item-default-fill);
width: 100%;
border-width: var(--desktop-dropdown-list-container-border);
border-style: solid;
border-color: var(--desktop-dropdown-list-container-border-color);
border-radius: var(--desktop-dropdown-list-container-border-radius);
border-top: 0;
z-index: 10;
max-height: 200px;
overflow: auto;
}
.shade-picker-dropdown-list-item {
color: var(--desktop-dropdown-text-default-fill);
letter-spacing: var(--desktop-dropdown-text-active-letter-spacing);
text-decoration: var(--desktop-dropdown-text-active-text-decoration);
text-transform: var(--desktop-dropdown-text-active-text-case);
font-size: var(--desktop-dropdown-text-active-font-size);
line-height: var(--desktop-dropdown-text-active-line-height);
font-weight: var(--desktop-dropdown-text-active-font-weight);
font-family: var(--desktop-dropdown-text-active-font-family);
cursor: pointer;
border-bottom: 1px solid var(--divider-border);
}
.shade-picker-dropdown-list-item-href {
padding: 12px;
cursor: pointer;
display: block;
}
.shade-picker-dropdown-list-item-wrapper {
display: flex;
justify-content: center;
gap: 8px;
cursor: pointer;
align-items: center;
}
.shade-picker-dropdown-list-item.checked {
background-color: #f0f0f0;
}
.shade-picker-dropdown-list-item:hover {
background-color: #fafafa;
}
.shade-picker-dropdown-list-item-wapper {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
}
.shade-picker-dropdown-list-item-input {
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
.shade-picker-dropdown-list-item-swatch-wrapper {
display: inline-block;
border: 1px solid var(--input-default-border);
width: 16px;
height: 16px;
}
.shade-picker-dropdown-list-item-swatch {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.swatch-wrapper {
position: relative;
}
.dropdown-list-item-swatch-inactive {
display: block;
width: 100%;
border-bottom: 1px solid #fff;
transform: rotate(-45deg);
position: absolute;
left: 0;
top: 50%;
}
.shade-picker-dropdown-list-item-title {
color: var(--desktop-dropdown-list-item-text-fill);
font-family: var(--desktop-dropdown-list-item-text-font-family);
font-size: var(--desktop-dropdown-list-item-text-font-size);
font-weight: var(--desktop-dropdown-list-item-text-font-weight);
line-height: var(--desktop-dropdown-list-item-text-line-height);
letter-spacing: var(--desktop-dropdown-list-item-text-letter-spacing);
text-transform: var(--desktop-dropdown-list-item-text-text-case);
text-decoration: var(--desktop-dropdown-list-item-text-text-decoration);
flex: 1;
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mobile-header-secondary-links-inner-container {
position: relative;
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.mobile-header-secondary-links-text {
color: var(--mobile-header-secondary-link-text-fill);
font-family: var(--mobile-header-secondary-link-text-font-family);
font-weight: var(--mobile-header-secondary-link-text-font-weight);
font-size: var(--mobile-header-secondary-link-text-font-size);
line-height: var(--mobile-header-secondary-link-text-line-height);
letter-spacing: var(--mobile-header-secondary-link-text-letter-spacing);
text-transform: var(--mobile-header-secondary-link-text-text-case);
text-decoration: var(--mobile-header-secondary-link-text-text-decoration);
}
.sidebar-nav-container {
position: fixed;
background: var(--surface-default);
display: flex;
flex-grow: 1;
flex-direction: column;
row-gap: 1.25rem;
overflow-y: auto;
top: 0;
bottom: 0;
width: 100%;
max-width: 100vw;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 400ms;
z-index: 1;
}
.hide-sidebar{
transform: translateX(-100%);
/* Support Safari 15.2 or lower */
pointer-events: none;
-webkit-transform: translateX(-100%);
}
/* navigation on mobile scroll */
.scroll-overflow-y-hidden {
overflow-y: hidden;
}
.-translate-x-full {
transform: translateX(-100%);
}
.translate-x-full {
transform: translateX(100%);
}
.mobile-header-menu-bottom-container {
display: grid;
row-gap: var(--mobile-header-menu-bottom-container-spacing);
padding-top: var(--mobile-header-menu-bottom-container-padding-top);
padding-right: var(--mobile-header-menu-bottom-container-padding-right);
padding-bottom: var(--mobile-header-menu-bottom-container-padding-bottom);
padding-left: var(--mobile-header-menu-bottom-container-padding-left);
}
.mobile-header-secondary-links-container {
display: grid;
row-gap: var(--mobile-header-secondary-links-container-spacing);
}
.mobile-header-menu-controls-container {
width: var(--mobile-header-menu-controls-container-width);
display: flex;
align-items: center;
flex-shrink: 0;
height: var(--mobile-header-container-height);
padding-left: var(--mobile-header-container-padding-left);
padding-right: var(--mobile-header-container-padding-right);
}
.mobile-header-menu-top-container {
padding: 13px;
margin: 0 -13px;
}
.mobile-header-menu-controls-close-icon {
width: var(--mobile-header-menu-controls-close-icon-height);
height: var(--mobile-header-menu-controls-close-icon-width);
fill: var(--mobile-header-menu-controls-close-icon-fill);
}
.mobile-header-menu-controls-back-icon {
width: var(--mobile-header-menu-controls-back-icon-height);
height: var(--mobile-header-menu-controls-back-icon-width);
fill: var(--mobile-header-menu-controls-back-icon-fill);
}
.mobile-header-menu-controls-current-category-title {
color: var(--mobile-header-menu-controls-current-category-title-fill);
font-family: var(--mobile-header-menu-controls-current-category-title-font-family);
font-weight: var(--mobile-header-menu-controls-current-category-title-font-weight);
line-height: var(--mobile-header-menu-controls-current-category-title-line-height);
font-size: var(--mobile-header-menu-controls-current-category-title-font-size);
text-transform: var(--mobile-header-menu-controls-current-category-title-text-case);
text-decoration: var(--mobile-header-menu-controls-current-category-title-text-decoration);
letter-spacing: var(--mobile-header-menu-controls-current-category-title-letter-spacing);
}
.mobile-header-primary-link {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
padding-top: var(--mobile-header-primary-link-padding-top);
padding-right: var(--mobile-header-container-padding-right);
padding-bottom: var(--mobile-header-primary-link-padding-bottom);
padding-left: var(--mobile-header-container-padding-left);
height: var(--mobile-header-container-height);
gap: 1rem;
}
.mobile-header-primary-link-text {
color: var(--mobile-header-primary-link-text-fill);
font-family: var(--mobile-header-primary-link-text-font-family);
line-height: var(--mobile-header-primary-link-text-line-height);
font-size: var(--mobile-header-primary-link-text-font-size);
letter-spacing: var(--mobile-header-primary-link-text-letter-spacing);
text-transform: var(--mobile-header-primary-link-text-text-case);
font-weight: var(--mobile-header-primary-link-text-font-weight);
text-decoration: var(--mobile-header-primary-link-text-text-decoration);
width: calc(100% - 2rem);
text-align: start;
}
.mobile-header-primary-link-text.levelTwo {
color: var(--mobile-header-sub-menu-category-text-fill);
font-family: var(--mobile-header-sub-menu-category-text-font-family);
line-height: var(--mobile-header-sub-menu-category-text-line-height);
font-size: var(--mobile-header-sub-menu-category-text-font-size);
letter-spacing: var(--mobile-header-sub-menu-category-text-letter-spacing);
text-transform: var(--mobile-header-sub-menu-category-text-text-case);
font-weight: var(--mobile-header-sub-menu-category-text-font-weight);
text-decoration: var(--mobile-header-sub-menu-category-text-text-decoration);
}
.mobile-header-primary-link-text.levelThree {
color: var(--mobile-header-sub-menu-link-text-fill);
font-family: var(--mobile-header-sub-menu-link-text-font-family);
line-height: var(--mobile-header-sub-menu-link-text-line-height);
font-size: var(--mobile-header-sub-menu-link-text-font-size);
letter-spacing: var(--mobile-header-sub-menu-link-text-letter-spacing);
text-transform: var(--mobile-header-sub-menu-link-text-text-case);
font-weight: var(--mobile-header-sub-menu-link-text-font-weight);
text-decoration: var(--mobile-header-sub-menu-link-text-text-decoration);
}
.mobile-header-primary-link-icon {
width: var(--mobile-header-primary-link-icon-height);
height: var(--mobile-header-primary-link-icon-width);
stroke: var(--mobile-header-primary-link-icon-fill);
}
.mobile-header-sub-menu-link-text {
color: var(--mobile-header-sub-menu-link-text-fill);
font-family: var(--mobile-header-sub-menu-link-text-font-family);
font-weight: var(--mobile-header-sub-menu-link-text-font-weight);
line-height: var(--mobile-header-sub-menu-link-text-line-height);
font-size: var(--mobile-header-sub-menu-link-text-font-size);
text-transform: var(--mobile-header-sub-menu-link-text-text-case);
text-decoration: var(--mobile-header-sub-menu-link-text-text-decoration);
letter-spacing: var(--mobile-header-sub-menu-link-text-letter-spacing);
}
.row-reverse {
flex-direction: row-reverse;
}
.banner-inline-container {
height: 100%;
width: 100%;
position: relative;
}
.banner-inline-container .product-card-add-to-bag-button {
width: auto;
position: unset;
}
.inline-tout-image-panel {
aspect-ratio: 4/5;
height: inherit;
width: inherit;
}
.inline-tout-details-panel {
position: absolute;
bottom: 0;
padding-top: var(--mobile-banner-inline-1-column-container-padding-top);
padding-right: var(--mobile-banner-inline-1-column-container-padding-right);
padding-bottom: var(--mobile-banner-inline-1-column-container-padding-bottom);
padding-left: var(--mobile-banner-inline-1-column-container-padding-left);
display: grid;
grid-gap: var(--mobile-banner-inline-1-column-text-container-spacing);
}
.banner-inline-eyebrow {
font-family: var(--mobile-banner-inline-1-column-eyebrow-font-family);
font-weight: var(--mobile-banner-inline-1-column-eyebrow-font-weight);
font-size: var(--mobile-banner-inline-1-column-eyebrow-font-size);
line-height: var(--mobile-banner-inline-1-column-eyebrow-line-height);
letter-spacing: var(--mobile-banner-inline-1-column-eyebrow-letter-spacing);
text-transform: var(--mobile-banner-inline-1-column-eyebrow-text-case);
text-decoration: var(--mobile-banner-inline-1-column-eyebrow-text-decoration);
color: var(--mobile-banner-inline-1-column-eyebrow-fill);
}
.card-vertical-eyebrow {
font-family: var(--mobile-card-vertical-eyebrow-font-family);
font-weight: var(--mobile-card-vertical-eyebrow-font-weight);
font-size: var(--mobile-card-vertical-eyebrow-font-size);
line-height: var(--mobile-card-vertical-eyebrow-line-height);
letter-spacing: var(--mobile-card-vertical-eyebrow-letter-spacing);
text-transform: var(--mobile-card-vertical-eyebrow-text-case);
text-decoration: var(--mobile-card-vertical-eyebrow-text-decoration);
color: var(--mobile-card-vertical-eyebrow-fill);
}
.banner-inline-title {
width: 100%;
font-family: var(--mobile-banner-inline-1-column-title-font-family);
font-weight: var(--mobile-banner-inline-1-column-title-font-weight);
font-size: var(--mobile-banner-inline-1-column-title-font-size);
line-height: var(--mobile-banner-inline-1-column-title-line-height);
letter-spacing: var(--mobile-banner-inline-1-column-title-letter-spacing);
text-transform: var(--mobile-banner-inline-1-column-title-text-case);
text-decoration: var(--mobile-banner-inline-1-column-title-text-decoration);
color: var(--mobile-banner-inline-1-column-title-fill);
}
.light-text .banner-inline-eyebrow,
.light-text .banner-inline-title,
.light-text .banner-inline-description
{
color: white;
}
.dark-text .banner-inline-eyebrow,
.dark-text .banner-inline-title,
.dark-text .banner-inline-description
{
color: black;
}
.banner-inline-description {
display: flex;
flex-grow: 1;
font-family: var(--mobile-banner-inline-1-column-description-font-family);
font-weight: var(--mobile-banner-inline-1-column-description-font-weight);
font-size: var(--mobile-banner-inline-1-column-description-font-size);
line-height: var(--mobile-banner-inline-1-column-description-line-height);
letter-spacing: var(--mobile-banner-inline-1-column-description-letter-spacing);
text-transform: var(--mobile-banner-inline-1-column-description-text-case);
text-decoration: var(--mobile-banner-inline-1-column-description-text-decoration);
color: var(--mobile-banner-inline-1-column-description-fill);
}
.inline-tout-details-panel .product-card-add-to-bag-button {
color: white;
border-color: white;
margin-top: 0;
}
/* LiveChat */
/* All LivePerson Engagement elements should have a significantly-reduced z-index. !important is necessary, as it is overriding LivePerson's defaults. */
.LPMcontainer.LPMoverlay {
z-index: 40 !important;
}
/* LivePerson Sticky Button Engagements have role=button. This is to assure Proactive Engagements load above Sticky Button Engagements. */
.LPMcontainer.LPMoverlay[role='button'] {
z-index: 35 !important;
}
/* This button is placed in the DOM by SalesForce, but should only be programmatically clickable. Hide it, but don't remove it from the DOM. */
.embeddedServiceHelpButton{
visibility: hidden;
pointer-events: none;
}
/* z-index set to 110000 to be above the third party chat prompt (107158), below the header (120000) and below the search overlay (130000) */
.filter-overlay-z-index {
z-index: 110000;
position: static;
top: auto;
}
/* z-index set to 130000 to be above the third party chat prompt (107158), above the filters (110000), and above the header (120000) */
.search_overlay {
position: fixed;
left: 0;
z-index: 130000;
}
.search-outer-container {
display: flex;
flex-direction: column;
width: 100%;
left: 0;
top: 0;
z-index: 50;
background-color: var(--surface-default);
position: fixed;
}
/* slim overlay with only input field */
.search-outer-container-no-products {
display: flex;
flex-direction: column;
width: 100%;
left: 0;
top: 0;
z-index: 50;
background-color: var(--surface-default);
position: fixed;
}
.search-container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: var(--mobile-search-container-width);
grid-gap: var(--mobile-search-container-spacing);
padding-top: var(--mobile-search-container-padding-top);
padding-bottom: var(--mobile-search-container-padding-bottom);
overflow-y: auto;
}
.search-input-and-no-results-message-container {
display: flex;
flex-direction: column
}
.search-container-shadow {
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: white;
opacity: 1;
}
.search-input-and-button-container {
display: flex;
align-items: center;
margin-left: 1rem;
padding-bottom: 0.75rem;
margin-right: 1rem;
}
.search-input-container {
display: flex;
align-items: center;
flex-grow: 1;
padding-top: var(--mobile-search-input-container-padding-top);
padding-right: var(--mobile-search-input-container-padding-right);
padding-bottom: var(--mobile-search-input-container-padding-bottom);
padding-left: var(--mobile-search-input-container-padding-left);
border-bottom-width: var(--mobile-search-input-container-border-bottom);
border-bottom-style: solid;
border-color: var(--mobile-search-input-container-border-color);
border-radius: var(--mobile-search-input-container-border-radius);
background-color: var(--mobile-search-input-container-fill);
}
.search-input-text {
flex-grow: 1;
border: none;
font-family: var(--mobile-search-input-text-font-family);
font-weight: var(--mobile-search-input-text-font-weight);
font-size: var(--mobile-search-input-text-font-size);
line-height: var(--mobile-search-input-text-line-height);
letter-spacing: var(--mobile-search-input-text-letter-spacing);
text-transform: var(--mobile-search-input-text-text-case);
text-decoration: var(--mobile-search-input-text-text-decoration);
color: var(--mobile-search-input-text-fill);
background-color: var(--mobile-search-input-container-fill);
padding-bottom: unset;
padding-top: unset;
padding-left: unset;
}
.search-input-text:focus {
box-shadow: none;
}
.search-input-text::placeholder {
font-family: var(--mobile-search-input-placeholder-font-family);
font-weight: var(--mobile-search-input-placeholder-font-weight);
font-size: var(--mobile-search-input-placeholder-font-size);
line-height: var(--mobile-search-input-placeholder-line-height);
letter-spacing: var(--mobile-search-input-placeholder-letter-spacing);
text-transform: var(--mobile-search-input-placeholder-text-case);
text-decoration: var(--mobile-search-input-placeholder-text-decoration);
color: var(--mobile-search-input-placeholder-fill);
}
.search-input-search-controls-container {
display: flex;
gap: var(--mobile-search-input-search-controls-container-spacing);
}
.search-input-search-controls-link {
font-family: var(--mobile-search-input-search-controls-link-font-family);
font-weight: var(--mobile-search-input-search-controls-link-font-weight);
font-size: var(--mobile-search-input-search-controls-link-font-size);
line-height: var(--mobile-search-input-search-controls-link-line-height);
letter-spacing: var(--mobile-search-input-search-controls-link-letter-spacing);
text-transform: var(--mobile-search-input-search-controls-link-text-case);
text-decoration: var(--mobile-search-input-search-controls-link-text-decoration);
color: var(--mobile-search-input-search-controls-link-fill);
}
.search-input-search-controls-icon {
height: var(--mobile-search-input-search-controls-icon-height);
width: var(--mobile-search-input-search-controls-icon-width);
fill: var(--mobile-search-input-search-controls-icon-fill);
}
.search-close-icon {
height: var(--mobile-search-close-icon-height);
width: var(--mobile-search-close-icon-width);
fill: var(--mobile-search-close-icon-fill);
margin-left: 0.5rem;
}
.search-content-container-four-products {
display: flex;
flex-direction: column;
margin-left: 1rem;
margin-right: 1rem;
max-width: var(--mobile-search-content-container-max-width);
grid-gap: var(--mobile-search-content-container-spacing);
height: 100vh;
}
.search-content-container {
display: flex;
flex-direction: column;
margin-left: 1rem;
margin-right: 1rem;
max-width: var(--mobile-search-content-container-max-width);
grid-gap: var(--mobile-search-content-container-spacing);
height: 100vh;
}
.search-no-results-title-container {
width: var(--mobile-search-no-results-title-container-width);
padding-top: var(--mobile-search-no-results-title-container-padding-top);
padding-right: var(--mobile-search-no-results-title-container-padding-right);
padding-left: var(--mobile-search-no-results-title-container-padding-left);
}
.search-no-results-title-text {
font-family: var(--mobile-search-no-results-title-text-font-family);
font-weight: var(--mobile-search-no-results-title-text-font-weight);
font-size: var(--mobile-search-no-results-title-text-font-size);
line-height: var(--mobile-search-no-results-title-text-line-height);
letter-spacing: var(--mobile-search-no-results-title-text-letter-spacing);
text-transform: var(--mobile-search-no-results-title-text-text-case);
text-decoration: var(--mobile-search-no-results-title-text-text-decoration);
color: var(--mobile-search-no-results-title-text-fill);
}
.search-content-suggested-container {
display: flex;
flex-direction: column;
gap: var(--mobile-search-content-suggested-container-spacing);
padding-top: var(--mobile-search-content-suggested-container-padding-top);
padding-bottom: var(--mobile-search-content-suggested-container-padding-bottom);
}
.search-content-suggested-title {
font-family: var(--mobile-search-content-suggested-title-font-family);
font-weight: var(--mobile-search-content-suggested-title-font-weight);
font-size: var(--mobile-search-content-suggested-title-font-size);
line-height: var(--mobile-search-content-suggested-title-line-height);
letter-spacing: var(--mobile-search-content-suggested-title-letter-spacing);
text-transform: var(--mobile-search-content-suggested-title-text-case);
text-decoration: var(--mobile-search-content-suggested-title-text-decoration);
color: var(--mobile-search-content-suggested-title-fill);
}
.search-content-suggested-suggestions-container {
display: flex;
flex-direction: column;
gap: var(--mobile-search-content-suggested-suggestions-container-spacing);
}
.search-content-suggested-link-container {
display: flex;
gap: var(--mobile-search-content-suggested-link-container-spacing);
}
.search-content-suggested-link-typed {
font-family: var(--mobile-search-content-suggested-link-typed-font-family);
font-weight: var(--mobile-search-content-suggested-link-typed-font-weight);
font-size: var(--mobile-search-content-suggested-link-typed-font-size);
line-height: var(--mobile-search-content-suggested-link-typed-line-height);
letter-spacing: var(--mobile-search-content-suggested-link-typed-letter-spacing);
text-transform: var(--mobile-search-content-suggested-link-typed-text-case);
text-decoration: var(--mobile-search-content-suggested-link-typed-text-decoration);
color: var(--mobile-search-content-suggested-link-typed-fill);
}
.search-content-suggested-link-suggestion {
font-family: var(--mobile-search-content-suggested-link-suggestion-font-family);
font-weight: var(--mobile-search-content-suggested-link-suggestion-font-weight);
font-size: var(--mobile-search-content-suggested-link-suggestion-font-size);
line-height: var(--mobile-search-content-suggested-link-suggestion-line-height);
letter-spacing: var(--mobile-search-content-suggested-link-suggestion-letter-spacing);
text-transform: var(--mobile-search-content-suggested-link-suggestion-text-case);
text-decoration: var(--mobile-search-content-suggested-link-suggestion-text-decoration);
color: var(--mobile-search-content-suggested-link-suggestion-fill);
}
.search-content-suggested-number {
font-family: var(--mobile-search-content-suggested-number-font-family);
font-weight: var(--mobile-search-content-suggested-number-font-weight);
font-size: var(--mobile-search-content-suggested-number-font-size);
line-height: var(--mobile-search-content-suggested-number-line-height);
letter-spacing: var(--mobile-search-content-suggested-number-letter-spacing);
text-transform: var(--mobile-search-content-suggested-number-text-case);
text-decoration: var(--mobile-search-content-suggested-number-text-decoration);
color: var(--mobile-search-content-suggested-number-fill);
}
.search-content-results-container {
display: flex;
flex-direction: column;
gap: var(--mobile-search-content-results-container-spacing);
padding-top: var(--mobile-search-content-results-container-padding-top);
padding-bottom: var(--mobile-search-content-results-container-padding-bottom);
}
.search-content-results-title-container {
display: flex;
align-items: baseline;
justify-content: space-between;
width: var(--mobile-search-content-results-title-container-width);
gap: var(--mobile-search-content-results-title-container-spacing);
}
.search-content-results-title {
font-family: var(--mobile-search-content-results-title-font-family);
font-weight: var(--mobile-search-content-results-title-font-weight);
font-size: var(--mobile-search-content-results-title-font-size);
line-height: var(--mobile-search-content-results-title-line-height);
letter-spacing: var(--mobile-search-content-results-title-letter-spacing);
text-transform: var(--mobile-search-content-results-title-text-case);
text-decoration: var(--mobile-search-content-results-title-text-decoration);
color: var(--mobile-search-content-results-title-fill);
}
.search-content-results-link {
font-family: var(--mobile-search-content-results-link-font-family);
font-weight: var(--mobile-search-content-results-link-font-weight);
font-size: var(--mobile-search-content-results-link-font-size);
line-height: var(--mobile-search-content-results-link-line-height);
letter-spacing: var(--mobile-search-content-results-link-letter-spacing);
text-transform: var(--mobile-search-content-results-link-text-case);
text-decoration: var(--mobile-search-content-results-link-text-decoration);
color: var(--mobile-search-content-results-link-fill);
}
.search-content-product-container {
display: flex;
flex-direction: column;
gap: var(--mobile-search-content-product-container-spacing);
}
.search-content-product-card-container {
display: flex;
gap: var(--mobile-search-content-product-card-container-spacing);
height: 100%;
}
img.search-content-product-card-image {
height: var(--mobile-search-content-product-card-image-height);
min-width: var(--mobile-search-content-product-card-image-width);
}
.search-content-product-card-image-skus-count {
display: none;
}
.search-content-product-card-text-container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: var(--mobile-search-content-product-card-text-container-width);
max-width: 100%;
gap: var(--mobile-search-content-product-card-text-container-spacing);
height: 100%;
}
.search-content-product-card-title-container {
display: flex;
flex-direction: column;
gap: var(--mobile-search-content-product-card-title-container-spacing);
}
.search-content-product-card-title {
font-family: var(--mobile-search-content-product-card-title-font-family);
font-weight: var(--mobile-search-content-product-card-title-font-weight);
font-size: var(--mobile-search-content-product-card-title-font-size);
line-height: var(--mobile-search-content-product-card-title-line-height);
letter-spacing: var(--mobile-search-content-product-card-title-letter-spacing);
text-transform: var(--mobile-search-content-product-card-title-text-case);
text-decoration: var(--mobile-search-content-product-card-title-text-decoration);
color: var(--mobile-search-content-product-card-title-fill);
}
.search-content-product-card-rating-container {
align-items: center;
display: flex;
gap: var(--mobile-search-content-product-card-rating-container-spacing);
}
.search-content-product-card-rating-icon-container {
margin-top: var(--mobile-search-content-product-card-rating-icon-container-spacing);
}
.search-content-product-card-rating-icon {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
position: relative;
width: calc(var(--mobile-search-content-product-card-rating-icon-active-width) * 5);
height: var(--mobile-search-content-product-card-rating-icon-active-height);
}
.search-content-product-card-rating-icon::before,
.search-content-product-card-rating-icon::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
}
.search-content-product-card-rating-icon::before {
background-color: var(--mobile-search-content-product-card-rating-icon-inactive-fill);
}
.search-content-product-card-rating-icon::after {
background-color: var(--mobile-search-content-product-card-rating-icon-active-fill);
width: var(--percent);
overflow: hidden;
}
.search-content-product-card-rating-average {
font-family: var(--mobile-search-content-product-card-rating-average-font-family);
font-weight: var(--mobile-search-content-product-card-rating-average-font-weight);
font-size: var(--mobile-search-content-product-card-rating-average-font-size);
line-height: var(--mobile-search-content-product-card-rating-average-line-height);
letter-spacing: var(--mobile-search-content-product-card-rating-average-letter-spacing);
text-transform: var(--mobile-search-content-product-card-rating-average-text-case);
text-decoration: var(--mobile-search-content-product-card-rating-average-text-decoration);
color: var(--mobile-search-content-product-card-rating-average-fill);
}
.search-content-product-card-price-container {
align-items: last baseline;
display: flex;
gap: var(--mobile-product-card-price-container-spacing);
flex-wrap: wrap;
}
.search-content-product-card-price-recommended {
font-family: var(--mobile-search-content-product-card-price-recommended-font-family);
font-weight: var(--mobile-search-content-product-card-price-recommended-font-weight);
font-size: var(--mobile-search-content-product-card-price-recommended-font-size);
line-height: var(--mobile-search-content-product-card-price-recommended-line-height);
letter-spacing: var(--mobile-search-content-product-card-price-recommended-letter-spacing);
text-transform: var(--mobile-search-content-product-card-price-recommended-text-case);
text-decoration: var(--mobile-search-content-product-card-price-recommended-text-decoration);
color: var(--mobile-search-content-product-card-price-recommended-fill);
}
.search-content-product-card-price-discounted {
font-family: var(--mobile-search-content-product-card-price-discounted-font-family);
font-weight: var(--mobile-search-content-product-card-price-discounted-font-weight);
font-size: var(--mobile-search-content-product-card-price-discounted-font-size);
line-height: var(--mobile-search-content-product-card-price-discounted-line-height);
letter-spacing: var(--mobile-search-content-product-card-price-discounted-letter-spacing);
text-transform: var(--mobile-search-content-product-card-price-discounted-text-case);
text-decoration: var(--mobile-search-content-product-card-price-discounted-text-decoration);
color: var(--mobile-search-content-product-card-price-discounted-fill);
}
.search-content-product-card-price-strikethrough {
font-family: var(--mobile-search-content-product-card-price-strikethrough-font-family);
font-weight: var(--mobile-search-content-product-card-price-strikethrough-font-weight);
font-size: var(--mobile-search-content-product-card-price-strikethrough-font-size);
line-height: var(--mobile-search-content-product-card-price-strikethrough-line-height);
letter-spacing: var(--mobile-search-content-product-card-price-strikethrough-letter-spacing);
text-transform: var(--mobile-search-content-product-card-price-strikethrough-text-case);
text-decoration-line: var(--mobile-search-content-product-card-price-strikethrough-text-decoration);
color: var(--mobile-search-content-product-card-price-strikethrough-fill);
}
.search-content-product-card-price-discount-percent {
font-family: var(--mobile-search-content-product-card-price-discount-percent-font-family);
font-weight: var(--mobile-search-content-product-card-price-discount-percent-font-weight);
font-size: var(--mobile-search-content-product-card-price-discount-percent-font-size);
line-height: var(--mobile-search-content-product-card-price-discount-percent-line-height);
letter-spacing: var(--mobile-search-content-product-card-price-discount-percent-letter-spacing);
text-transform: var(--mobile-search-content-product-card-price-discount-percent-text-case);
text-decoration-line: var(--mobile-search-content-product-card-price-discount-percent-text-decoration);
color: var(--mobile-search-content-product-card-price-discount-percent-fill);
}
.search-content-product-card-price-per-unit-container {
display: flex;
align-items: center;
}
.search-content-product-card-price-divider {
font-family: var(--mobile-search-content-product-card-price-divider-font-family);
font-weight: var(--mobile-search-content-product-card-price-divider-font-weight);
font-size: var(--mobile-search-content-product-card-price-divider-font-size);
line-height: var(--mobile-search-content-product-card-price-divider-line-height);
letter-spacing: var(--mobile-search-content-product-card-price-divider-letter-spacing);
text-transform: var(--mobile-search-content-product-card-price-divider-text-case);
text-decoration: var(--mobile-search-content-product-card-price-divider-text-decoration);
color: var(--mobile-search-content-product-card-price-divider-fill);
padding-right: 0.5rem;
}
.search-content-product-card-price-price-per-unit {
font-family: var(--mobile-search-content-product-card-price-price-per-unit-font-family);
font-weight: var(--mobile-search-content-product-card-price-price-per-unit-font-weight);
font-size: var(--mobile-search-content-product-card-price-price-per-unit-font-size);
line-height: var(--mobile-search-content-product-card-price-price-per-unit-line-height);
letter-spacing: var(--mobile-search-content-product-card-price-price-per-unit-letter-spacing);
text-transform: var(--mobile-search-content-product-card-price-price-per-unit-text-case);
text-decoration: var(--mobile-search-content-product-card-price-price-per-unit-text-decoration);
color: var(--mobile-search-content-product-card-price-price-per-unit-fill);
}
.search-landing-heading-container {
display: flex;
flex-direction: column;
gap: var(--mobile-search-results-page-heading-container-default-spacing);
padding-top: var(--mobile-search-results-page-heading-container-default-padding-top);
padding-right: var(--mobile-search-results-page-heading-container-default-padding-right);
padding-bottom: var(--mobile-search-results-page-heading-container-default-padding-bottom);
padding-left: var(--mobile-search-results-page-heading-container-default-padding-left);
}
.search-landing-heading-container-no-results {
display: flex;
flex-direction: column;
padding-top: var(--mobile-search-results-page-heading-container-no-results-padding-top);
padding-left: var(--mobile-search-results-page-heading-container-no-results-padding-left);
padding-right: var(--mobile-search-results-page-heading-container-no-results-padding-right);
padding-bottom: var(--mobile-search-results-page-heading-container-no-results-padding-bottom);
grid-gap: var(--mobile-search-results-page-heading-container-no-results-spacing);
}
.search-landing-heading-headline {
color: var(--mobile-search-results-page-heading-title-fill);
font-family: var(--mobile-search-results-page-heading-title-font-family);
line-height: var(--mobile-search-results-page-heading-title-line-height);
font-size: var(--mobile-search-results-page-heading-title-font-size);
letter-spacing: var(--mobile-search-results-page-heading-title-letter-spacing);
text-transform: var(--mobile-search-results-page-heading-title-text-case);
font-weight: var(--mobile-search-results-page-heading-title-font-weight);
text-decoration: var(--mobile-search-results-page-heading-title-text-decoration);
}
.search-landing-heading-help {
color: var(--mobile-search-results-page-heading-text-fill);
font-family: var(--mobile-search-results-page-heading-text-font-family);
font-weight: var(--mobile-search-results-page-heading-text-font-weight);
line-height: var(--mobile-search-results-page-heading-text-line-height);
font-size: var(--mobile-search-results-page-heading-text-font-size);
text-transform: var(--mobile-search-results-page-heading-text-text-case);
text-decoration: var(--mobile-search-results-page-heading-text-text-decoration);
letter-spacing: var(--mobile-search-results-page-heading-text-letter-spacing);
}
.search-landing-heading-correct {
font-family: var(--font-family-primary);
font-size: 13px;
font-style: normal;
font-weight: 325;
line-height: 16px; /* 123.077% */
letter-spacing: -0.4px;
}
.search-landing-heading-correct a {
text-decoration: underline;
}
.search-landing-container-no-results {
display: flex;
flex-direction: column;
gap: var(--mobile-search-results-page-container-no-results-spacing);
}
.search-landing-container-no-results > .product-container {
padding: 0;
}
.search-landing-products-headline {
color: var(--mobile-search-results-page-product-grid-title-fill);
font-family: var(--mobile-search-results-page-product-grid-title-font-family);
line-height: var(--mobile-search-results-page-product-grid-title-line-height);
font-size: var(--mobile-search-results-page-product-grid-title-font-size);
letter-spacing: var(--mobile-search-results-page-product-grid-title-letter-spacing);
text-transform: var(--mobile-search-results-page-product-grid-title-text-case);
font-weight: var(--mobile-search-results-page-product-grid-title-font-weight);
text-decoration: var(--mobile-search-results-page-product-grid-title-text-decoration);
padding-left: var(--mobile-search-results-page-heading-container-default-padding-left);
}
.sort-select {
font-family: var(--mobile-product-grid-sort-by-dropdown-text-font-family);
line-height: var(--mobile-product-grid-sort-by-dropdown-text-line-height);
font-size: var(--mobile-product-grid-sort-by-dropdown-text-font-size);
letter-spacing: var(--mobile-product-grid-sort-by-dropdown-text-letter-spacing);
text-transform: var(--mobile-product-grid-sort-by-dropdown-text-text-case);
font-weight: var(--mobile-product-grid-sort-by-dropdown-text-font-weight);
text-decoration: var(--mobile-product-grid-sort-by-dropdown-text-text-decoration);
color: var(--mobile-product-grid-sort-by-dropdown-text-fill);
background-color: var(--mobile-product-grid-sort-by-dropdown-container-fill);
border-width: var(--mobile-product-grid-sort-by-dropdown-container-border);
border-style: solid;
border-color: var(--mobile-product-grid-sort-by-dropdown-container-border-color);
border-radius: var(--mobile-product-grid-sort-by-dropdown-container-border-radius);
max-width: 100%;
padding-left: var(--mobile-product-grid-sort-by-dropdown-container-padding-left);
padding-right: 36px;
height: var(--mobile-product-grid-sort-by-dropdown-container-height);
text-overflow: ellipsis;
white-space: nowrap;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 10.9228L0.677179 3.6L0 4.27718L8 12.2772L16 4.27718L15.3228 3.6L8 10.9228Z' fill='black'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 1rem;
}
.sticky-trigger-overlay {
font-family: var(--mobile-product-grid-sort-by-dropdown-text-font-family);
line-height: var(--mobile-product-grid-sort-by-dropdown-text-line-height);
font-size: var(--mobile-product-grid-sort-by-dropdown-text-font-size);
letter-spacing: var(--mobile-product-grid-sort-by-dropdown-text-letter-spacing);
text-transform: var(--mobile-product-grid-sort-by-dropdown-text-text-case);;
font-weight: var(--mobile-product-grid-sort-by-dropdown-text-font-weight);
text-decoration: var(--mobile-product-grid-sort-by-dropdown-text-text-decoration);
color: var(--mobile-product-grid-sort-by-dropdown-text-fill);
height: var(--mobile-product-grid-filter-cta-container-height);
border-width: var(--mobile-product-grid-filter-cta-container-border);
border-style: solid;
border-color: var(--mobile-product-grid-filter-cta-container-border-color);
border-radius: var(--mobile-product-grid-filter-cta-container-border-radius);
background-color: var(--mobile-product-grid-filter-cta-container-fill);
width: 100%;
max-width: 13rem;
}
.selected-filters-container {
display: flex;
padding: 0 16px 12px 16px;
gap: 0;
}
.selected-filters-chips-container {
display: flex;
width: 100%;
}
.filter-container {
padding-right: var(--mobile-filter-container-padding-right);
padding-left: var(--mobile-filter-container-padding-left);
background-color: #ffffff;
display: none;
position: fixed;
width: 100vw;
overflow-y: auto;
z-index: 50;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.filter-heading {
padding-top: var(--mobile-filter-heading-padding-top);
padding-bottom: var(--mobile-filter-heading-padding-bottom);
font-size: 12px;
line-height: 14px;
color: var(--color-neutral-600);
text-transform: uppercase;
display: flex;
justify-content: space-between;
position: sticky;
top: 0;
background-color: var(--surface-default);
}
.filter-clear-all {
display: none;
font-family: var(--mobile-filter-clear-all-font-family);
font-size: var(--mobile-filter-clear-all-font-size);
letter-spacing: var(--mobile-filter-clear-all-letter-spacing);
line-height: var(--mobile-filter-clear-all-line-height);
color: var(--mobile-filter-clear-all-fill);
font-weight: var(--mobile-filter-clear-all-font-weight);
text-transform: var(--mobile-filter-clear-all-text-case);
text-decoration-line: var(--mobile-filter-clear-all-text-decoration);
}
.filter-footer > .filter-clear-all {
display: inline;
width: 100%;
}
.product-grid-title-container > .filter-clear-all {
display: inline;
}
.filter-close-overlay {
display: inline;
}
.filter-skus-count {
font-family: var(--mobile-filter-skus-count-font-family);
font-weight: var(--mobile-filter-skus-count-font-weight);
font-size: var(--mobile-filter-skus-count-font-size);
line-height: var(--mobile-filter-skus-count-line-height);
letter-spacing: var(--mobile-filter-skus-count-letter-spacing);
text-transform: var(--mobile-filter-skus-count-text-case);
text-decoration: var(--mobile-filter-skus-count-text-decoration);
color: var(--mobile-filter-skus-count-fill)
}
.filter-close-icon {
width: var(--mobile-filter-close-icon-width);
height: var( --mobile-height-filter-close-icon);
fill: var( --mobile-fill-filter-close-icon);
}
.filter-categories {
min-height: 100vh;
}
.filter-category {
grid-gap: var(--mobile-filter-category-spacing);
border-top: 1px solid;
border-color: var(--desktop-accordion-container-border-color);
}
.filter-category-title {
padding-top: var(--mobile-filter-category-title-padding-top);
padding-bottom: var(--mobile-filter-category-title-padding-bottom);
display: flex;
justify-content: space-between;
width: 100%;
}
.filter-category-title-text {
font-family: var(--mobile-filter-category-title-text-font-family);
line-height: var(--mobile-filter-category-title-text-line-height);
font-size: var(--mobile-filter-category-title-text-font-size);
letter-spacing: var(--mobile-filter-category-title-text-letter-spacing);
text-transform: var(--mobile-filter-category-title-text-text-case);
text-decoration: var(--mobile-filter-category-title-text-text-decoration);
font-weight: var(--mobile-filter-category-title-text-font-weight);
color: var(--mobile-filter-category-title-text-fill);
cursor: pointer;
text-align: left;
}
.filter-category-title-icon {
width: var(--mobile-filter-category-title-icon-width);
height: var(--mobile-filter-category-title-icon-height);
fill: var(--mobile-filter-category-title-icon-fill);
margin-right: 4px;
}
.filter-items-container {
display: flex;
flex-direction: column;
gap: var(--mobile-filter-items-container-spacing);
padding-bottom: var(--mobile-filter-items-container-padding-bottom);
}
.filter-category-item {
display: flex;
align-items: center;
width: 100%;
gap: var(--desktop-filter-category-item-spacing);
text-align: unset;
}
.filter-category-item-checkbox-default {
height: var(--mobile-filter-category-item-checkbox-default-height);
width: var(--mobile-filter-category-item-checkbox-default-width);
background-color: var(--mobile-filter-category-item-checkbox-default-fill);
border-width: var(--mobile-filter-category-item-checkbox-default-border);
border-style: solid;
border-color: var(--mobile-filter-category-item-checkbox-default-border-color);
border-radius: var(--mobile-filter-category-item-checkbox-default-border-radius);
}
button:disabled > span.filter-category-item-checkbox-default {
height: var(--mobile-filter-category-item-checkbox-disabled-height);
width: var(--mobile-filter-category-item-checkbox-disabled-width);
background-color: var(--mobile-filter-category-item-checkbox-disabled-fill);
border-width: var(--mobile-filter-category-item-checkbox-disabled-border);
border-style: solid;
border-color: var(--mobile-filter-category-item-checkbox-disabled-border-color);
border-radius: var(--mobile-filter-category-item-checkbox-disabled-border-radius);
}
.filter-category-item-checkbox-checked {
display: flex;
align-items: center;
justify-content: center;
height: var(--mobile-filter-category-item-checkbox-default-width);
width: var(--mobile-filter-category-item-checkbox-default-height);
border-width: var(--mobile-filter-category-item-checkbox-default-border);
border-style: solid;
border-color: var(--mobile-filter-category-item-checkbox-default-border-color);
border-radius: var(--mobile-filter-category-item-checkbox-default-border-radius);
}
.filter-category-item-checkbox-checked-icon {
width: var(--mobile-filter-category-title-icon-width);
height: var(--mobile-filter-category-title-icon-height);
color: var(--mobile-checkbox-selector-icon-default-fill);
}
.filter-category-item-text-default {
font-family: var(--mobile-filter-category-item-text-default-font-family);
font-weight: var(--mobile-filter-category-item-text-default-font-weight);
font-size: var(--mobile-filter-category-item-text-default-font-size);
line-height: var(--mobile-filter-category-item-text-default-line-height);
letter-spacing: var(--mobile-filter-category-item-text-default-letter-spacing);
text-transform: var(--mobile-filter-category-item-text-default-text-case);
text-decoration: var(--mobile-filter-category-item-text-default-text-decoration);
color: var(--mobile-filter-category-item-text-default-fill);
}
button:disabled > span.filter-category-item-text-default {
font-family: var(--mobile-filter-category-item-text-disabled-font-family);
font-weight: var(--mobile-filter-category-item-text-disabled-font-weight);
font-size: var(--mobile-filter-category-item-text-disabled-font-size);
line-height: var(--mobile-filter-category-item-text-disabled-line-height);
letter-spacing: var(--mobile-filter-category-item-text-disabled-letter-spacing);
text-transform: var(--mobile-filter-category-item-text-disabled-text-case);
text-decoration: var(--mobile-filter-category-item-text-disabled-text-decoration);
color: var(--mobile-filter-category-item-text-disabled-fill);
}
.filter-category-item-shade {
height: var(--mobile-filter-category-item-shade-height);
width: var(--mobile-filter-category-item-shade-width);
border-width: var(--mobile-filter-category-item-shade-border);
border-style: solid;
border-color: var(--mobile-filter-category-item-shade-border-color);
border-radius: var(--mobile-filter-category-item-shade-border-radius);
margin-left: auto;
}
.filter-footer{
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
gap: 1rem;
position: sticky;
border-top: 1px solid #b7b7b7;
width: 100vw;
padding: 1rem;
bottom: 0;
margin-right: calc(var(--mobile-filter-container-padding-right) * -1);
margin-left: calc(var(--mobile-filter-container-padding-left) * -1);
}
.filter-apply-filters {
width: 100%;
padding: 1rem;
font-family: var(--font-family-primary);
font-size: 13px;
line-height: 16px;
font-style: normal;
font-weight: 350;
letter-spacing: -0.4px;
text-transform: uppercase;
background-color: #000000;
color: #ffffff;
}
.product-grid-title-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.banner-section {
width: var(--mobile-banner-section-container-width);
}
.banner-container {
position: relative;
}
.banner-image-container {
min-height: 135px;
}
.banner-image {
display: block;
width: 100%;
min-height: 135px;
height: unset;
object-fit: cover;
}
.banner-image-content {
color: white;
position: absolute;
left: 20px;
bottom: 20px;
}
.banner-image-content > * + * {
margin-top: 1rem;
}
.banner-section .banner-subtitle,
.banner-section-subtitle {
color: var(--mobile-banner-section-text-fill);
font-family: var(--mobile-banner-section-text-font-family);
font-weight: var(--mobile-banner-section-text-font-weight);
line-height: var(--mobile-banner-section-text-line-height);
font-size: var(--mobile-banner-section-text-font-size);
letter-spacing: var(--mobile-banner-section-text-letter-spacing);
text-transform: var(--mobile-banner-section-text-text-case);
text-decoration: var(--mobile-banner-section-text-text-decoration);
}
.banner-section .banner-title,
.banner-section-title {
color: var(--mobile-banner-section-title-text-fill);
font-family: var(--mobile-banner-section-title-text-font-family);
font-weight: var(--mobile-banner-section-title-text-font-weight);
line-height: var(--mobile-banner-section-title-text-line-height);
font-size: var(--mobile-banner-section-title-text-font-size);
letter-spacing: var(--mobile-banner-section-title-text-letter-spacing);
text-transform: var(--mobile-banner-section-title-text-text-case);
text-decoration: var(--mobile-banner-section-title-text-text-decoration);
}
.banner-category-subtitle,
.banner-subtitle {
font-family: var(--mobile-category-banner-category-description-font-family);
font-weight: var(--mobile-category-banner-category-description-font-weight);
font-size: var(--mobile-category-banner-category-description-font-size);
letter-spacing: var(--mobile-category-banner-category-description-letter-spacing);
line-height: var(--mobile-category-banner-category-description-line-height);
text-transform: var(--mobile-category-banner-category-description-text-case);
text-decoration: var(--mobile-category-banner-category-description-text-decoration);
color: var(--mobile-category-banner-category-description-fill);
}
.banner-section .banner-eyebrow {
color: var(--mobile-banner-section-eyebrow-text-fill);
font-family: var(--mobile-banner-section-eyebrow-text-font-family);
font-weight: var(--mobile-banner-section-eyebrow-text-font-weight);
line-height: var(--mobile-banner-section-eyebrow-text-line-height);
font-size: var(--mobile-banner-section-eyebrow-text-font-size);
letter-spacing: var(--mobile-banner-section-eyebrow-text-letter-spacing);
text-transform: var(--mobile-banner-section-eyebrow-text-text-case);
text-decoration: var(--mobile-banner-section-eyebrow-text-text-decoration);
}
.banner-section-1-col img,
.banner-section-2-col img,
.banner-section-3-col img {
aspect-ratio: 375 / 469;
}
.banner-section .banner-button {
display: inline-flex;
padding-top: var(--mobile-banner-section-button-container-default-padding-top);
padding-right: var(--mobile-banner-section-button-container-default-padding-right);
padding-bottom: var(--mobile-banner-section-button-container-default-padding-bottom);
padding-left: var(--mobile-banner-section-button-container-default-padding-left);
border-style: solid;
border-color: var(--mobile-banner-section-button-container-default-border-color);
border-width: var(--mobile-banner-section-button-container-default-border);
color: var(--mobile-banner-section-button-text-default-fill);
font-family: var(--mobile-banner-section-button-text-default-font-family);
font-weight: var(--mobile-banner-section-button-text-default-font-weight);
line-height: var(--mobile-banner-section-button-text-default-line-height);
font-size: var(--mobile-banner-section-button-text-default-font-size);
letter-spacing: var(--mobile-banner-section-button-text-default-letter-spacing);
text-transform: var(--mobile-banner-section-button-text-default-text-case);
text-decoration: var(--mobile-banner-section-button-text-default-text-decoration);
}
.banner-text {
font-family: var(--mobile-banner-section-text-font-family);
font-weight: var(--mobile-banner-section-text-font-weight);
font-size: var(--mobile-banner-section-text-font-size);
letter-spacing: var(--mobile-banner-section-text-letter-spacing);
line-height: var(--mobile-banner-section-text-line-height);
text-transform: var(--mobile-banner-section-text-text-case);
text-decoration: var(--mobile-banner-section-text-text-decoration);
color: var(--mobile-banner-section-text-fill);
}
.banner-image-content.light-text .banner-eyebrow,
.banner-image-content.light-text .banner-section-title,
.banner-image-content.light-text .banner-section-subtitle,
.banner-image-content.light-text .banner-category-title,
.banner-image-content.light-text .banner-category-subtitle {
color: #ffffff;
}
.banner-image-content.dark-text .banner-eyebrow,
.banner-image-content.dark-text .banner-section-title,
.banner-image-content.dark-text .banner-section-subtitle,
.banner-image-content.dark-text .banner-category-title,
.banner-image-content.dark-text .banner-category-subtitle {
color: #000000;
}
.banner-no-img-container {
margin: auto;
max-width: 1536px;
padding-top: var(--mobile-category-text-banner-container-padding-top);
padding-right: var(--mobile-category-text-banner-container-padding-right);
padding-bottom: var(--mobile-category-text-banner-container-padding-bottom);
padding-left: var(--mobile-category-text-banner-container-padding-left);
}
.banner-no-img-title {
font-family: var(--mobile-category-text-banner-category-title-font-family);
font-weight: var(--mobile-category-text-banner-category-title-font-weight);
font-size: var(--mobile-category-text-banner-category-title-font-size);
line-height: var(--mobile-category-text-banner-category-title-line-height);
letter-spacing: var(--mobile-category-text-banner-category-title-letter-spacing);
text-transform: var(--mobile-category-text-banner-category-title-text-case);
text-decoration: var(--mobile-category-text-banner-category-title-text-decoration);
color: var(--mobile-category-text-banner-category-title-fill);
}
.banner-no-img-subtitle {
font-family: var(--mobile-category-text-banner-category-description-font-family);
font-weight: var(--mobile-category-text-banner-category-description-font-weight);
font-size: var(--mobile-category-text-banner-category-description-font-size);
line-height: var(--mobile-category-text-banner-category-description-line-height);
letter-spacing: var(--mobile-category-text-banner-category-description-letter-spacing);
text-transform: var(--mobile-category-text-banner-category-description-text-case);
text-decoration: var(--mobile-category-text-banner-category-description-text-decoration);
color: var(--mobile-category-text-banner-category-description-fill);
padding: 30px 45px 0 0;
}
.banner-no-img-subtitle a {
text-decoration: var(--font-text-decoration-underline);
}
.promo-bar {
position: relative;
background: var(--mobile-promo-bar-container-fill);
width: var( --mobile-promo-bar-container-width);
font-weight: var(--mobile-promo-bar-right-text-font-weight);
text-decoration: var(--mobile-promo-bar-right-text-text-decoration);
text-transform: var(--mobile-promo-bar-right-text-text-case);
letter-spacing: var(--mobile-promo-bar-right-text-letter-spacing);
font-size: var(--mobile-promo-bar-right-text-font-size);
line-height: var(--mobile-promo-bar-right-text-line-height);
font-family: var(--mobile-promo-bar-right-text-font-family);
z-index: 40;
}
.promo-bar-inner-container {
padding-top: var(--mobile-promo-bar-container-padding-top);
padding-right: var(--mobile-promo-bar-container-padding-right);
padding-bottom: var(--mobile-promo-bar-container-padding-bottom);
padding-left: var(--mobile-promo-bar-container-padding-left);
display: flex;
justify-content: center;
max-width: 1536px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.promo-bar-paragraph {
line-height: 0;
text-align: center;
}
.promo-bar-left-text {
color: var(--desktop-promo-bar-left-text-fill);
font-family: var(--desktop-promo-bar-left-text-font-family);
line-height: var(--desktop-promo-bar-left-text-line-height);
font-size: var(--desktop-promo-bar-left-text-font-size);
letter-spacing: var(--desktop-promo-bar-left-text-letter-spacing);
text-transform: var(--desktop-promo-bar-left-text-text-case);
text-decoration: var(--desktop-promo-bar-left-text-text-decoration);
font-weight: var(--desktop-promo-bar-left-text-font-weight);
}
.promo-bar-right-text {
color: var(--desktop-promo-bar-right-text-fill);
font-family: var(--desktop-promo-bar-right-text-font-family);
line-height: var(--desktop-promo-bar-right-text-line-height);
font-size: var(--desktop-promo-bar-right-text-font-size);
letter-spacing: var(--desktop-promo-bar-right-text-letter-spacing);
text-transform: var(--desktop-promo-bar-right-text-text-case);
text-decoration: var(--desktop-promo-bar-right-tex-text-decoration);
font-weight: var(--desktop-promo-bar-right-text-font-weight);
display: none;
}
.promo-bar-right-text-svg {
width: 0.625rem;
height: 0.625rem;
}
.mobile-header-tertiary-link {
color: var(--mobile-header-tertiary-link-fill);
font-family: var(--mobile-header-tertiary-link-font-family);
line-height: var(--mobile-header-tertiary-link-line-height);
font-size: var(--mobile-header-tertiary-link-font-size);
letter-spacing: var(--mobile-header-tertiary-link-letter-spacing);
text-transform: var(--mobile-header-tertiary-link-text-case);
text-decoration: var(--mobile-header-tertiary-link-text-decoration);
font-weight: var(--mobile-header-tertiary-link-font-weight);
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 0.25rem;
}
/* Bottom Footer Mobile */
.footer-container {
width: var(--mobile-footer-container-width);
grid-gap: var(--mobile-footer-container-spacing);
}
.footer-links-container {
width: var(--mobile-footer-links-container-width);
padding-right: var(--mobile-footer-links-container-padding-right);
padding-left: var(--mobile-footer-links-container-padding-left);
grid-gap: var(--mobile-footer-links-container-spacing);
}
.footer-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: var(--mobile-footer-bottom-fill);
width: var(--mobile-footer-bottom-width);
padding-bottom: var(--mobile-footer-bottom-padding-bottom);
padding-right: var(--mobile-footer-bottom-padding-right);
padding-left: var(--mobile-footer-bottom-padding-left);
padding-top: 48px;
grid-gap: var(--mobile-footer-bottom-spacing);
}
.select-language {
border-width: var(--mobile-dropdown-container-default-border);
border-radius: var(--mobile-dropdown-container-default-border-radius);
height: var(--mobile-dropdown-container-default-height);
padding-left: var(--mobile-dropdown-container-default-padding-left);
background-color: var(--mobile-dropdown-container-default-fill);
font-family: var(--mobile-dropdown-text-default-font-family);
font-weight: var(--mobile-dropdown-text-default-font-weight);
font-size: var(--mobile-dropdown-text-default-font-size);
line-height: var(--mobile-dropdown-text-default-line-height);
letter-spacing: var(--mobile-dropdown-text-default-letter-spacing);
text-transform: var(--mobile-dropdown-text-default-text-case);
text-decoration: var(--mobile-dropdown-text-default-text-decoration);
color: var(--mobile-dropdown-text-default-fill);
}
.multi-lang-dropdown-selector {
position: relative;
display: inline-block;
width: max-content;
}
.multi-lang-dropdown-selector-arrow {
position: absolute;
top: 50%;
right: 10px;
pointer-events: none;
transform: translateY(-50%);
}
.multi-lang-dropdown-selector-arrow-svg {
fill: currentColor;
width: 1rem;
height: 1rem;
}
.footer-bottom-left {
display: flex;
flex-direction: column;
gap:32px;
}
.footer-bottom-right{
display: flex;
flex-direction: column;
gap:32px;
padding: 0px 0px 48px 0px;
}
.accessibility-container{
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: flex-end;
grid-gap: var(--mobile-footer-accessibility-container-spacing);
}
.footer-logo {
width: auto;
height: var(--mobile-footer-logo-height);
fill: var(--mobile-footer-logo-fill);
pointer-events:none;
}
.footer-social-icons-container {
grid-gap: var(--mobile-footer-social-icons-container-spacing);
display: flex;
align-items: center;
}
.footer-copyright-text {
font-family: var(--mobile-footer-copyright-text-font-family);
font-weight: var(--mobile-footer-copyright-text-font-weight);
font-size: var(--mobile-footer-copyright-text-font-size);
line-height: var(--mobile-footer-copyright-text-line-height);
letter-spacing: var(--mobile-footer-copyright-text-letter-spacing);
text-transform: var(--mobile-footer-copyright-text-text-case);
text-decoration: var(--mobile-footer-copyright-text-text-decoration);
color: var(--mobile-footer-copyright-text-fill);
}
.footer-copyright-text span {
text-transform: uppercase;
}
.footer-accordion-title-text {
font-family: var(--mobile-footer-accordion-title-text-font-family);
font-weight: var(--mobile-footer-accordion-title-text-font-weight);
font-size: var(--mobile-footer-accordion-title-text-font-size);
line-height: var(--mobile-footer-accordion-title-text-line-height);
letter-spacing: var(--mobile-footer-accordion-title-text-letter-spacing);
text-transform: var(--mobile-footer-accordion-title-text-text-case);
text-decoration: var(--mobile-footer-accordion-title-text-text-decoration);
color: var(--mobile-footer-accordion-title-text-fill);
}
.footer-accordion-icon {
width: var(--mobile-footer-accordion-icon-width);
height: var(--mobile-footer-accordion-icon-height);
fill: var(--mobile-footer-accordion-icon-fill);
}
.footer-link {
font-family: var(--mobile-footer-link-font-family);
font-weight: var(--mobile-footer-link-font-weight);
font-size: var(--mobile-footer-link-font-size);
line-height: var(--mobile-footer-link-line-height);
letter-spacing: var(--mobile-footer-link-letter-spacing);
text-transform: var(--mobile-footer-link-text-case);
text-decoration: var(--mobile-footer-link-text-decoration);
color: var(--mobile-footer-link-fill);
}
.footer-social-icon {
width: var(--mobile-footer-social-icon-width);
height: var(--mobile-footer-social-icon-height);
fill: var(--mobile-footer-social-icon-fill);
}
.footer-accessibility-icon {
width: var(--mobile-footer-accessibility-icon-width);
height: var(--mobile-footer-accessibility-icon-height);
fill: var(--mobile-footer-accessibility-icon-fill);
}
.footer-accessibility-text {
font-family: var(--mobile-footer-accessibility-text-font-family);
font-weight: var(--mobile-footer-accessibility-text-font-weight);
font-size: var(--mobile-footer-accessibility-text-font-size);
line-height: var(--mobile-footer-accessibility-text-line-height);
letter-spacing: var(--mobile-footer-accessibility-text-letter-spacing);
text-transform: var(--mobile-footer-accessibility-text-text-case);
text-decoration: var(--mobile-footer-accessibility-text-text-decoration);
color: var(--mobile-footer-accessibility-text-fill);
}
.footer-top {
width: var(--mobile-footer-top-width);
grid-gap: var(--mobile-footer-top-spacing);
}
.footer-accordion-container {
width: var(--mobile-footer-accordion-container-width);
padding-bottom: var(--mobile-footer-accordion-container-padding-bottom);
padding-top: var(--mobile-footer-accordion-container-padding-top);
grid-gap: var(--mobile-footer-accordion-container-spacing);
border-top-width: var(--mobile-footer-accordion-container-border-top);
border-top-color: var(--mobile-footer-accordion-container-border-color);
border-bottom-width: var(--mobile-footer-accordion-container-border-bottom);
border-bottom-color: var(--mobile-footer-accordion-container-border-color);
}
.footer-accordion-heading {
width: var(--mobile-footer-accordion-heading-width);
padding-right: var(--mobile-footer-accordion-heading-padding-right);
padding-left: var(--mobile-footer-accordion-heading-padding-left);
grid-gap: var(--mobile-footer-accordion-heading-spacing);
}
.footer-copyright-text span {
text-transform: uppercase;
}
.ufc-cart-icon-container {
width: 18px;
height: 18px;
cursor: pointer;
position: relative;
vertical-align: middle;
}
.ufc-cart-icon-container .ufc-cart-icon-svg {
display: block;
padding: 13px;
box-sizing: content-box;
width: 100%;
height: 100%;
translate: -13px -50%;
position: absolute;
}
.ufc-cart-icon-container .ufc-cart-icon-count {
top: 1px;
left: 10px;
width: 11px;
height: 11px;
font-size: 9px;
line-height: 11px;
border-radius: 50%;
position: absolute;
text-align: center;
background-color: #E3E3E3;
}
.desktop-header-search-container,
.desktop-header-secondary-links-inner-container {
display: none;
}
.utility-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-right: var(--mobile-header-container-padding-right);
padding-left: var(--mobile-header-container-padding-left);
height: var(--mobile-header-container-height);
}
.utility-nav-logo {
display: block;
}
.gnav-desktop-top-level-container {
display: none;
width: 100%;
}
.product-grid-container {
display: flex;
flex-direction: column;
gap: var(--mobile-product-grid-container-spacing);
width: 100%;
padding-bottom: var(--mobile-product-grid-container-padding-bottom);
}
.product-grid-sort-by-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 16px 12px 16px;
gap: var(--mobile-product-grid-sort-by-container-spacing);
margin-left: auto;
}
.product-grid-sort-by-text {
font-family: var(--mobile-product-grid-sort-by-text-font-family);
font-weight: var(--mobile-product-grid-sort-by-text-font-weight);
font-size: var(--mobile-product-grid-sort-by-text-font-size);
line-height: var(--mobile-product-grid-sort-by-text-line-height);
letter-spacing: var(--mobile-product-grid-sort-by-text-letter-spacing);
text-transform: var(--mobile-product-grid-sort-by-text-text-case);
text-decoration: var(--mobile-product-grid-sort-by-text-text-decoration);
color: var(--mobile-product-grid-sort-by-text-fill);
white-space: nowrap;
}
.product-grid-ctas-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mobile-product-grid-ctas-container-spacing);
width: 100%;
}
.product-grid-ctas-container>form {
width: 100%;
max-width: 13rem;
}
.product-grid-ctas-container>form>.sort-select {
width: 100%;
}
.selected-filters-container > .product-grid-sort-by-container {
display: none;
}
.product-grid-no-products {
font-family: var(--font-family-primary);
padding-left: 16px;
padding-right: 16px;
}
.product-grid-no-results {
font-family: var(--font-family-primary);
padding: 16px;
}
.breadcrumbs-container-class {
display: flex;
flex-wrap: wrap;
padding: 1.5rem 1rem 0 1rem;
}
.breadcrumbs-li-class {
display: flex;
}
.breadcrumbs-link-class {
font-family: var(--mobile-breadcrumb-page-name-font-family);
font-weight: var(--mobile-breadcrumb-page-name-font-weight);
color: var(--mobile-breadcrumb-page-name-fill);
text-transform: var(--mobile-breadcrumb-page-name-text-case);
font-size: var(--mobile-breadcrumb-page-name-font-size);
line-height: var(--mobile-breadcrumb-page-name-line-height);
letter-spacing: var(--mobile-breadcrumb-page-name-letter-spacing);
text-decoration: var(--mobile-breadcrumb-page-name-text-decoration);
}
a.breadcrumbs-link-class:hover {
text-decoration: underline;
}
.breadcrumbs-divider-class {
margin: 0rem 0.25rem;
color: var(--mobile-breadcrumb-separator-fill);
font-family: var(--mobile-breadcrumb-separator-font-family);
font-weight: var(--mobile-breadcrumb-separator-font-weight);
color: var(--mobile-breadcrumb-separator-fill);
text-transform: var(--mobile-breadcrumb-separator-text-case);
font-size: var(--mobile-breadcrumb-separator-font-size);
line-height: var(--mobile-breadcrumb-separator-line-height);
letter-spacing: var(--mobile-breadcrumb-separator-letter-spacing);
text-decoration: var(--mobile-breadcrumb-separator-text-decoration);
}
.last-breadcrumb-class {
color: var(--mobile-breadcrumb-page-name-active-fill);
font-family: var(--mobile-breadcrumb-page-name-active-font-family);
font-weight: var(--mobile-breadcrumb-page-name-active-font-weight);
color: var(--mobile-breadcrumb-page-name-active-fill);
text-transform: var(--mobile-breadcrumb-page-name-active-text-case);
font-size: var(--mobile-breadcrumb-page-name-active-font-size);
line-height: var(--mobile-breadcrumb-page-name-active-line-height);
letter-spacing: var(--mobile-breadcrumb-page-name-active-letter-spacing);
text-decoration: var(--mobile-breadcrumb-page-name-active-text-decoration);
}
.filter-chips-container {
display: flex;
overflow-x: auto;
gap: 0.5rem;
width: 100%;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.filter-chips-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.filter-chip-container-small-default {
display: flex;
align-items: center;
background-color: var(--desktop-filter-chip-container-small-default-fill);
padding-top: var(--desktop-filter-chip-container-small-default-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-small-default-vertical-padding);
padding-left: var(--desktop-vertical-padding-filter-chip-container-small-default-horizontal-padding);
padding-right: var(--desktop-vertical-padding-filter-chip-container-small-default-horizontal-padding);
gap: var(--desktop-filter-chip-container-small-default-spacing);
}
.filter-chip-container-small-selected {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-small-selected-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-small-selected-vertical-padding);
padding-left: var(--desktop-filter-chip-container-small-selected-horizontal-padding);
padding-right: var(--desktop-filter-chip-container-small-selected-horizontal-padding);
gap: var(--desktop-filter-chip-container-small-selected-spacing);
background-color: var(--desktop-filter-chip-container-small-selected-fill);
border-width: var(--desktop-filter-chip-container-small-selected-border);
border-style: solid;
border-color: var(--desktop-filter-chip-container-small-selected-border-color);
border-radius: var(--desktop-filter-chip-container-small-selected-border-radius);
}
.filter-chip-container-small-default:hover, .filter-chip-container-small-selected:hover {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-small-hover-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-small-hover-vertical-padding);
padding-left: var(--desktop-filter-chip-container-small-hover-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-small-hover-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-small-hover-fill);
gap: var(--desktop-filter-chip-container-small-hover-spacing);
}
.filter-chip-container-small-default:disabled, .filter-chip-container-small-selected:disabled {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-small-disabled-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-small-disabled-vertical-padding);
padding-left: var(--desktop-filter-chip-container-small-disabled-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-small-disabled-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-small-disabled-fill);
gap: var(--desktop-filter-chip-container-small-disabled-spacing);
}
.filter-chip-container-medium-default {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-medium-default-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-medium-default-vertical-padding);
padding-left: var(--desktop-filter-chip-container-medium-default-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-medium-default-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-medium-default-fill);
gap: var(--desktop-filter-chip-container-medium-default-spacing);
}
.filter-chip-container-medium-selected {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-medium-selected-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-medium-selected-vertical-padding);
padding-left: var(--desktop-filter-chip-container-medium-selected-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-medium-selected-horizontal-padding);;
border-width: var(--desktop-filter-chip-container-medium-selected-border);
border-style: solid;
border-color: var(--desktop-filter-chip-container-medium-selected-border-color);
background-color: var(--desktop-filter-chip-container-medium-selected-fill);
gap: var(--desktop-filter-chip-container-medium-selected-spacing);
}
.filter-chip-container-medium-default:hover, .filter-chip-container-medium-selected:hover {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-medium-hover-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-medium-hover-vertical-padding);
padding-left: var(--desktop-filter-chip-container-medium-hover-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-medium-hover-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-medium-hover-fill);
gap: var(--desktop-filter-chip-container-medium-hover-spacing);
}
.filter-chip-container-medium-default:disabled, .filter-chip-container-medium-selected:disabled {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-medium-disabled-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-medium-disabled-vertical-padding);
padding-left: var(--desktop-filter-chip-container-medium-disabled-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-medium-disabled-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-medium-disabled-fill);
gap: var(--desktop-filter-chip-container-medium-disabled-spacing);
}
.filter-chip-container-large-default {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-large-default-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-large-default-vertical-padding);
padding-left: var(--desktop-filter-chip-container-large-default-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-large-default-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-large-default-fill);
gap: var(--desktop-filter-chip-container-large-default-spacing);
}
.filter-chip-container-large-selected {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-large-selected-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-large-selected-vertical-padding);
padding-left: var(--desktop-filter-chip-container-large-selected-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-large-selected-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-large-selected-fill);
gap: var(--desktop-filter-chip-container-large-selected-spacing);
border-width: var(--desktop-filter-chip-container-large-selected-border);
border-style: solid;
border-color: var(--desktop-filter-chip-container-large-selected-border-color);
}
.filter-chip-container-large-default:hover, .filter-chip-container-large-selected:hover {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-large-hover-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-large-hover-vertical-padding);
padding-left: var(--desktop-filter-chip-container-large-hover-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-large-hover-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-large-hover-fill);
gap: var(--desktop-filter-chip-container-large-hover-spacing);
}
.filter-chip-container-large-default:disabled, .filter-chip-container-large-selected:disabled {
display: flex;
align-items: center;
padding-top: var(--desktop-filter-chip-container-large-disabled-vertical-padding);
padding-bottom: var(--desktop-filter-chip-container-large-disabled-vertical-padding);
padding-left: var(--desktop-filter-chip-container-large-disabled-horizontal-padding);;
padding-right: var(--desktop-filter-chip-container-large-disabled-horizontal-padding);;
background-color: var(--desktop-filter-chip-container-large-disabled-fill);
gap: var(--desktop-filter-chip-container-large-disabled-spacing);
}
.filter-chip-text-default {
color: var(--desktop-filter-chip-text-default-fill);
font-family: var(--desktop-filter-chip-text-default-font-family);
font-weight: var(--desktop-filter-chip-text-default-font-weight);
line-height: var(--desktop-filter-chip-text-default-line-height);
font-size: var(--desktop-filter-chip-text-default-font-size);
text-transform: var(--desktop-filter-chip-text-default-text-case);
text-decoration: var(--desktop-filter-chip-text-default-text-decoration);
letter-spacing: var(--desktop-filter-chip-text-default-letter-spacing);
white-space: nowrap;
}
:hover > .filter-chip-text-default {
color: var(--desktop-filter-chip-text-hover-fill);
font-family: var(--desktop-filter-chip-text-hover-font-family);
font-weight: var(--desktop-filter-chip-text-hover-font-weight);
line-height: var(--desktop-filter-chip-text-hover-line-height);
font-size: var(--desktop-filter-chip-text-hover-font-size);
text-transform: var(--desktop-filter-chip-text-hover-text-case);
text-decoration: var(--desktop-filter-chip-text-hover-text-decoration);
letter-spacing: var(--desktop-filter-chip-text-hover-letter-spacing);
}
:disabled > .filter-chip-text-default {
color: var(--desktop-filter-chip-text-disabled-fill);
font-family: var(--desktop-filter-chip-text-disabled-font-family);
font-weight: var(--desktop-filter-chip-text-disabled-font-weight);
line-height: var(--desktop-filter-chip-text-disabled-line-height);
font-size: var(--desktop-filter-chip-text-disabled-font-size);
text-transform: var(--desktop-filter-chip-text-disabled-text-case);
text-decoration: var(--desktop-filter-chip-text-disabled-text-decoration);
letter-spacing: var(--desktop-filter-chip-text-disabled-letter-spacing);
}
.filter-chip-icon-default {
height: var(--desktop-filter-chip-icon-default-height);
width: var(--desktop-filter-chip-icon-default-width);
}
.filter-chip-icon-default > path {
fill: var(--desktop-filter-chip-icon-default-fill);
}
:hover > .filter-chip-icon-default {
height: var(--desktop-filter-chip-icon-hover-height);
width: var(--desktop-filter-chip-icon-hover-width);
}
:hover > .filter-chip-icon-default path {
fill: var(--desktop-filter-chip-icon-hover-fill);
}
:disabled > .filter-chip-icon-default {
height: var(--desktop-filter-chip-icon-disabled-height);
width: var(--desktop-filter-chip-icon-disabled-width);
}
:disabled > .filter-chip-icon-default path {
fill: var(--desktop-filter-chip-icon-disabled-fill);
}
.filter-chips-container {
display: flex;
overflow-x: auto;
gap: 0.5rem;
width: 100%;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.filter-chips-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.copy-section-text-banner {
font-weight: bold;
margin: 2rem auto;
text-align: center;
font-size: 1.25rem;
font-family: var(--font-family-primary);
}
.footer-link-button {
text-align: start;
}
/* Animation footer */
.accordion-content-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 200ms ease-out;
}
.accordion-content-inner {
overflow: hidden;
}
.accordion-content-wrapper.is-open {
grid-template-rows: 1fr;
}
.product-grid-filters {
width: 100%;
}
.gnav-desktop-header-bottom-row cart-drawer {
visibility: visible;
}
.desktop-header-search-container {
visibility: hidden;
}
.desktop-header-secondary-links-inner-container {
visibility: hidden;
}
.desktop-header-accessibility-location,
.desktop-header-accessibility-account {
visibility: hidden;
}
.gnav-desktop-top-level-row {
visibility: hidden;
}
.mobile-nav-sidebar-container {
display: grid;
align-content: space-between;
height: 100%;
}
.gnav-desktop-overlay-shadow {
background-color: rgba(0, 0, 0, 0.5);
inset: 0;
visibility: hidden;
position: fixed;
transition: visibility 100ms step-end 200ms;
}
.sidebar-nav-container .accordion {
padding: 0;
}
.sidebar-nav-container .accordions {
border: 0;
}
.sidebar-nav-container .accordion-content {
padding-inline-start: 1rem;
}
.skip-link a {
background-color: var(--button-background-primary-default);
color: var(--desktop-fill-button-text-primary-default);
font-family: var(--desktop-font-family-link-button-normal-default);
font-weight: var(--desktop-font-weight-link-button-normal-default);
line-height: var(--desktop-line-height-link-button-normal-default);
font-size: var(--desktop-font-size-link-button-normal-default);
text-transform: var(--desktop-text-case-link-button-normal-default);
letter-spacing: var(--desktop-letter-spacing-link-button-normal-default);
position: absolute;
top: 3px;
left: 3px;
transform: translateY(-101%);
z-index: 100;
padding: 14px 20px;
transition: all 0.25s ease-out;
opacity: 0;
}
.skip-link a:focus-visible {
position: absolute;
transform: translateY(3px);
outline-color: #0054cc;
opacity: 1;
}
/* z-index set to 120000 to be above the third party chat prompt (107158), above filters (110000), but below the search overlay (130000) */
.layout-header {
position: sticky;
top: 0;
z-index: 120;
}
.desktop-footer-container {
display: none;
}
/*
So far in 17 April 2024, we don't have a direction UI/UX wise about how
to handle first/second render of LV's. This class is only to prevent clicks
in the search overlay while waiting for the socket connection (a.k.a second render).
We decided to only apply to the search overlay because bugs were reported when users
tried to use the functionality in the first render.
*/
.vulcan-loading {
cursor: wait;
*{
pointer-events: none;
}
}
.write-a-review-container {
margin: auto;
padding: 2rem 1rem;
gap: 2rem;
max-width: 800px;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-review__grid-col.tt-l-grid__col--2.tt-c-review__grid-col--2 {
position: relative;
}
.write-a-review-container .tt-o-check__label:before,
.write-a-review-container .tt-o-radio__label:before {
all: unset !important;
}
.write-a-review-container .tt-o-check-group {
display: flex;
flex-wrap: nowrap;
gap: var(--spacing-3)!important;
}
.write-a-review-container .tt-u-spacing--left--xs>*+* {
margin-left: var(--spacing-0) !important;
}
.write-a-review-container .tt-o-radio__label {
display: flex;
border: 1px solid;
border-color: var(--primary-default);
font-weight: var(--font-weight-bold);
align-items: center;
justify-content: center;
padding: var(--spacing-2);
text-transform: var(--font-text-transform-uppercase);
text-align: center;
letter-spacing: var(--desktop-button-text-secondary-default-letter-spacing);
}
.write-a-review-container .tt-c-auth__email-submit,
.write-a-review-container .tt-c-review-form__submit {
background-color: var(--primary-default);
color: var(--color-neutral-white);
justify-content: center;
width: var(--mobile-write-review-button-width);
}
.write-a-review-container .tt-o-radio__label:hover,
.write-a-review-container .tt-o-radio:checked+.tt-o-radio__label {
background-color: var(--primary-default);
color: var(--color-neutral-white);
}
.write-a-review-container fieldset.tt-u-spacing--lg,
.write-a-review-container .tt-o-check__item,
.write-a-review-container .tt-o-radio__item {
margin: unset;
}
.write-a-review-container .tt-c-review-form-header__product-image {
background-color: var(--color-neutral-1-100);
width: var(--desktop-write-review-image-width);
}
.write-a-review-container .tt-o-field-group__required {
color: var(--text-color-primary);
}
.write-a-review-container .tt-o-radio__item {
flex-grow: 1;
}
.write-a-review-container .tt-o-icon.tt-o-icon--star--empty.tt-o-icon--xxl.tt-c-rating__icon.tt-c-rating__icon{
width: var(--desktop-write-review-rating-icon-inactive-width);
height: var(--desktop-write-review-rating-icon-inactive-height);
border-spacing: var(--desktop-write-review-rating-icon-container-spacing);
}
.write-a-review-container .tt-o-textarea {
padding-top: var(--desktop-write-review-input-field-padding-top);
padding-left: var(--desktop-write-review-input-field-padding-left);
padding-right: var(--desktop-write-review-input-field-padding-right);
padding-bottom: var(--desktop-write-review-input-field-padding-bottom);
border: var(--desktop-write-review-input-field-border);
}
.write-a-review-container .tt-o-selectbox {
border: var(--desktop-write-review-input-field-border);
border-color: var(--mobile-write-review-input-field-border-color);
}
.write-a-review-container .tt-o-textarea,
.write-a-review-container [type=text].tt-o-text-field {
border-radius: 0;
border: 1px solid;
border-color: var(--mobile-write-review-input-field-border-color);
padding-top: var(--desktop-write-review-input-field-padding-top);
padding-left: var(--desktop-write-review-input-field-padding-left);
padding-right: var(--desktop-write-review-input-field-padding-right);
padding-bottom: var(--desktop-write-review-input-field-padding-bottom);
letter-spacing: var(--desktop-write-review-input-label-letter-spacing);
font-family: var(--desktop-write-review-input-label-font-family);
font-size: var(--desktop-write-review-input-label-font-size);
line-height: var(--desktop-write-review-input-label-line-height);
border-spacing:var(--desktop-write-review-input-container-spacing);
}
.write-a-review-container .tt-o-field-group__label-text {
font-weight: var(--desktop-write-review-input-label-font-weight);
text-transform: var(--desktop-write-review-input-label-text-decoration);
color: var(--mobile-write-review-input-label-fill);
letter-spacing: var(--desktop-write-review-input-label-letter-spacing);
line-height: var(--desktop-write-review-input-label-line-height);
}
.write-a-review-container .tt-o-hint__text {
display: block;
color: var(--tertiary-default);
font-size: var(--mobile-reviews-section-review-item-disclaimer-font-size);
line-height: var(--mobile-reviews-section-review-item-disclaimer-line-height);
letter-spacing: var(--mobile-reviews-section-review-item-disclaimer-letter-spacing);
text-transform: var(--mobile-reviews-section-review-item-disclaimer-text-case);
font-weight: var(--mobile-reviews-section-review-item-disclaimer-font-weight);
font-family: var(--mobile-reviews-section-review-item-disclaimer-font-family);
}
.write-a-review-container .tt-c-added-media,
.write-a-review-container .tt-c-review-form__added-media,
.write-a-review-container .tt-c-review-form-header__guidelines-link,
.write-a-review-container .tt-c-review-form-header__text,
.write-a-review-container .tt-c-review-form-header__heading,
.write-a-review-container .tt-o-hint__icon,
.write-a-review-container .tt-shopper-profile-fieldset__country,
.write-a-review-container .tt-shopper-profile-fieldset__state,
.write-a-review-container .tt-shopper-profile-fieldset__city,
.write-a-review-container .tt-w-embedded-submission__footer {
display: none;
}
.write-a-review-container .tt-c-review-form-header-container .tt-c-review-form-header--with-image {
display: block;
position: relative;
}
.write-a-review-container .tt-c-review-dimensions-fieldset .tt-o-field-group:last-child {
border-bottom: 1px solid;
border-color: var(--color-neutral-1-200);
padding-bottom: var(--spacing-8);
}
.write-a-review-container .tt-c-review-form-header__product-title {
display: inline;
color: var(--color-neutral-black);
font-family: var(--desktop-write-review-heading-title-font-family);
font-size: var(--mobile-write-review-heading-title-font-size) !important;
line-height: var(--mobile-write-review-heading-title-line-height) !important;
letter-spacing: var(--mobile-write-review-heading-title-letter-spacing) !important;
font-weight: var(--desktop-write-review-heading-title-font-weight) !important;
text-transform: var(--desktop-write-review-heading-title-text-case);
}
.write-a-review-container .tt-o-header__heading {
font-size: var(--mobile-write-review-heading-title-font-size);
line-height: var(--mobile-write-review-heading-title-line-height);
letter-spacing: var(--mobile-write-review-heading-title-letter-spacing) !important;
text-transform: var(--mobile-write-review-heading-title-text-case);
font-weight: var(--mobile-write-review-heading-title-font-weight);
text-decoration: var(--desktop-write-review-heading-subheading-text-decoration);
margin-bottom: var(--spacing-4);
}
.write-a-review-container .tt-u-spacing--lg>*+* {
margin-top: var(--spacing-8);
}
.write-a-review-container .tt-o-header--with-border {
border-bottom: none;
padding-bottom: var(--spacing-4);
}
.write-a-review-container .tt-o-header {
margin-bottom: unset;
}
/* profile/tell us about you subheading */
.write-a-review-container .tt-o-header__text {
line-height: var(--mobile-create-profile-heading-subheading-line-height);
letter-spacing: var(--mobile-create-profile-heading-subheading-letter-spacing);
color: var(--mobile-create-profile-heading-subheading-fill);
font-size:var(--mobile-create-profile-heading-subheading-font-size);
text-decoration: var(--mobile-create-profile-heading-title-text-decoration);
text-transform: var(--mobile-create-profile-heading-subheading-text-case);
font-weight: var(--mobile-create-profile-heading-subheading-font-weight);
margin-top: var(--mobile-create-profile-heading-container-spacing);
}
.write-a-review-container .tt-c-auth__confirm-message {
font-weight: var(--font-weight-normal);
color: var(--color-neutral-1-600);
letter-spacing: var(--desktop-font-tracking-1);
}
.write-a-review-container .tt-c-auth__resend-message {
font-weight: var(--font-weight-normal);
color: var(--color-neutral-1-600);
letter-spacing: var(--desktop-font-tracking-1) ;
padding-bottom: var(--spacing-4);
}
.write-a-review-container button.tt-o-button.tt-o-button--compact-text.tt-c-auth__resend-btn.tt-c-auth__resend-btn {
text-decoration: var(--mobile-reviews-section-review-item-readmore-link-text-decoration);
letter-spacing: var(--desktop-font-tracking-1);
margin-top: var(--spacing-4);
}
.write-a-review-container .tt-o-check__label {
color: var(--secondary-default);
font-family: var(--mobile-reviews-section-review-item-disclaimer-font-family);
font-size: var(--desktop-checkbox-text-default-inverse-font-size);
font-weight: var(--desktop-checkbox-text-default-inverse-font-weight);
line-height: var(--desktop-checkbox-text-default-inverse-line-height);
letter-spacing: var(--desktop-checkbox-text-default-letter-spacing);
text-decoration: var(--desktop-checkbox-text-default-text-decoration);
text-transform: var(--desktop-checkbox-text-default-text-case);
padding-left: var(--spacing-8);
}
.write-a-review-container .tt-o-check {
height: var(--desktop-checkbox-selector-container-default-height);
width: var(--desktop-checkbox-selector-container-default-width);
border: 1px solid;
border-color: var(--tertiary-default);
}
.write-a-review-container .tt-c-review-form__disclaimer {
color: var(--primary-default);
line-height: var(--mobile-write-review-terms-line-height);
letter-spacing: var(--mobile-write-review-terms-letter-spacing);
transform: var(--mobile-write-review-terms-text-case);
font-size: var(--mobile-write-review-terms-font-size);
font-weight: var(--mobile-write-review-terms-font-weight);
font-family: var(--mobile-write-review-terms-font-family);
}
.write-a-review-container fieldset.tt-c-review-dimensions-fieldset.tt-u-spacing--lg,
.write-a-review-container fieldset.tt-shopper-profile-fieldset.tt-u-spacing--lg {
margin-top: var(--spacing-6);
}
.write-a-review-container .tt-c-review-form-header {
margin-bottom: var(--spacing-2);
}
.write-a-review-container .tt-o-icon.tt-o-icon--star--full.tt-o-icon--xxl.tt-c-rating__icon.tt-c-rating__icon {
width: var(--desktop-write-review-rating-icon-inactive-width);
height: var(--desktop-write-review-rating-icon-inactive-height);
}
.write-a-review-container .tt-c-rating {
margin:var(--mobile-reviews-section-rating-icon-container-spacing);
}
.write-a-review-container .tt-o-icon--xxl {
width:var(--mobile-write-review-rating-icon-inactive-width);
height:var(--mobile-write-review-rating-icon-inactive-height);
color: var(--mobile-write-review-rating-icon-inactive-fill);
}
.write-a-review-container .tt-o-selectbox {
width: 100%;
border-radius: 0;
border: 1px solid;
border-color: var(--mobile-write-review-input-field-border-color);
}
.write-a-review-container .tt-o-icon--star--empty,
.write-a-review-container .tt-o-icon--star--half {
stroke-width: 0;
fill: var(--reviews-section-rating-icon-inactive);
}
.write-a-review-container .tt-c-review-form__sweepstakes input[type=checkbox] {
opacity: 1
}
.write-a-review-container .tt-o-arrow--down {
mask: url('data:image/svg+xml,');
background-position: center;
background-size: cover;
background: var(--tertiary-default);
width: var(--mobile-dropdown-icon-width);
height: var(--mobile-dropdown-icon-height);
}
.write-a-review-container .tt-c-review-form__overall-rating .tt-o-field-group__label-text {
display: inline-block;
text-transform: var(--font-text-transform-lowercase);
}
.write-a-review-container .tt-c-review-form__overall-rating .tt-o-field-group__label-text:first-letter {
text-transform: var(--font-text-transform-uppercase);
}
.write-a-review-container .tt-c-review-form-header__content--right {
margin: var(--spacing-2) 0;
}
/* z-index set to 121000 to be above the third party chat prompt (107158), above filters (110000), above header (120000), but below the search overlay (130000) */
.tt-o-modal.tt-w-submission-modal.tt-w-submission-modal__do-more {
z-index: 121000;
}
/* Ratings and Reviews css overrides BEGIN */
.ratings-and-reviews {
margin-left: 1rem;
margin-right: 1rem;
padding-top: var(--mobile-reviews-section-container-padding-top);
padding-bottom: var(--mobile-reviews-section-container-padding-bottom);
grid-gap: var(--mobile-spacing-reviews-section-container);
}
.ratings-and-reviews .tt-l-grid__row.tt-c-reviews-summary__grid-row {
align-items: center;
padding-top: 0;
padding-bottom: 2.5rem;
grid-gap: var(--mobile-reviews-section-rating-container-spacing);
}
.ratings-and-reviews .tt-c-reviews-summary__rating.tt-u-mb--sm span.tt-c-reviews-summary__rating-number {
font-family: var(--mobile-reviews-section-rating-average-font-family);
font-size: var(--mobile-reviews-section-rating-average-font-size);
font-weight: var(--mobile-reviews-section-rating-average-font-weight);
text-decoration: var(--mobile-reviews-section-rating-average-text-decoration);
line-height: var(--mobile-reviews-section-rating-average-line-height);
text-transform: var(--mobile-reviews-section-rating-average-text-case);
letter-spacing: var(--mobile-reviews-section-rating-average-letter-spacing);
}
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--full.tt-o-icon--xl.tt-c-rating__icon.tt-c-rating__icon,
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--half.tt-o-icon--xl.tt-c-rating__icon.tt-c-rating__icon,
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--empty.tt-o-icon--xl.tt-c-rating__icon.tt-c-rating__icon {
height: 0.75rem;
width: 0.75rem;
stroke: transparent;
}
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--half.tt-o-icon--xl.tt-c-rating__icon.tt-c-rating__icon {
fill: var(--mobile-reviews-section-rating-icon-active-fill);
}
.ratings-and-reviews .tt-o-button--icon,
.ratings-and-reviews button.tt-o-button--icon {
padding: 0;
margin: 0;
}
.ratings-and-reviews .tt-c-rating.tt-c-reviews-summary__stars.tt-u-mb--lg,
.ratings-and-reviews .tt-c-reviews-summary__rating.tt-u-mb--sm {
margin-bottom: 0;
}
/*/*/
.ratings-and-reviews button.tt-o-button.tt-o-button--primary.tt-c-reviews-summary__write-review.tt-u-mb--xl.tt-o-button--full.tt-c-reviews-summary__write-review.tt-u-mb--xl.tt-o-button--full:hover {
background-color: transparent;
}
.ratings-and-reviews .tt-c-rating.tt-c-reviews-summary__stars.tt-u-mb--lg {
display: flex;
align-items: center;
}
.ratings-and-reviews .ratings-total {
margin-left: 0.5rem;
font-size: var(--mobile-reviews-section-review-qty-font-size);
font-family: var(--mobile-reviews-section-review-qty-font-family);
font-weight: var(--mobile-reviews-section-review-qty-font-weight);
line-height: var(--mobile-reviews-section-review-qty-line-height);
letter-spacing: var(--mobile-reviews-section-review-qty-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-qty-text-decoration);
text-transform: var(--mobile-reviews-section-review-qty-text-case);
fill: var(--mobile-reviews-section-review-qty-fill);
}
.ratings-and-reviews [class^=tt-c-], [class^=tt-l-], [class^=tt-o-], [class^=tt-u-], [class^=tt-w-] {
color: var(--mobile-reviews-section-review-qty-fill);
opacity: 100;
}
.ratings-and-reviews .ratings-and-reviews-header {
font-family: var(--mobile-reviews-section-title-font-family);
font-weight: var(--mobile-reviews-section-title-font-weight);
text-transform: var(--mobile-reviews-section-title-text-case);
font-size: var(--mobile-reviews-section-title-font-size);
letter-spacing: var(--mobile-reviews-section-title-letter-spacing);
line-height: var(--mobile-reviews-section-title-line-height);
text-decoration: var(--mobile-reviews-section-title-text-decoration);
padding-bottom: var(--mobile-reviews-section-title-padding-bottom);
}
.ratings-and-reviews .ratings-and-reviews-header.hidden {
display: none;
}
.ratings-and-reviews .tt-w-reviews-summary .tt-l-grid.tt-c-reviews-summary__content .tt-l-grid__row.tt-c-reviews-summary__grid-row {
display: flex;
flex-wrap: wrap;
}
.ratings-and-reviews .tt-w-reviews-summary {
border-bottom: 0.0625rem solid var(--border-divider);
}
.ratings-and-reviews .tt-o-icon--star--full {
fill: var(--reviews-section-rating-icon-active);
}
.ratings-and-reviews .write-review-cta {
width: 100%;
font-feature-settings: 'clig' off, 'liga' off;
text-align: center;
text-decoration: var(--mobile-button-text-secondary-default-text-decoration);
letter-spacing: var(--mobile-button-text-secondary-default-letter-spacing);
text-transform: var(--mobile-button-text-secondary-default-text-case);
font-size: var(--mobile-button-text-secondary-default-font-size);
line-height: var(--mobile-button-text-secondary-default-line-height);
font-weight: var(--mobile-button-text-secondary-default-font-weight);
font-family: var(--mobile-button-text-secondary-default-font-family);
border-style: solid;
border-color: var(--mobile-button-container-secondary-default-border-color);
border-width: var(--mobile-button-container-secondary-default-border);
padding-top: var(--mobile-button-container-secondary-default-padding-top);
padding-left: var(--mobile-button-container-secondary-default-padding-left);
padding-right: var(--mobile-button-container-secondary-default-padding-right);
padding-bottom: var(--mobile-button-container-secondary-default-padding-bottom);
background-color: var(--mobile-button-container-secondary-default-fill);
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--1.tt-c-reviews-summary__grid-col--1,
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--2.tt-c-reviews-summary__grid-col--2 {
display: flex;
width: auto !important;
margin-right: 0 !important;
align-items: center;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--1.tt-c-reviews-summary__grid-col--1 {
justify-content: flex-end;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--2.tt-c-reviews-summary__grid-col--2 {
justify-content: flex-start;
}
.ratings-and-reviews .tt-c-reviews-list__show-more .tt-c-reviews-list__show-more-btn, .tt-c-reviews-list__show-more .tt-o-spinner {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.ratings-and-reviews .tt-c-reviews-list button.tt-o-button.tt-o-button--primary.tt-c-reviews-list__show-more-btn {
width: 100%;
display: flex;
justify-content: center;
border: 0.0625rem solid black;
padding: 0.75rem 1.5rem;
text-transform: uppercase;
font-feature-settings: 'clig' off, 'liga' off;
font-family: var(--font-family-primary);
font-size: 0.8125rem;
font-style: normal;
font-weight: 350;
line-height: 1rem;
letter-spacing: -0.025rem;
}
.ratings-and-reviews .tt-c-reviews-list button.tt-o-button.tt-o-button--primary.tt-c-reviews-list__show-more-btn:hover {
background-color: white;
}
/* Reviews List overrides */
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-listbox button.tt-o-listbox__btn,
.ratings-and-reviews input#tt-c-reviews-list-search-field,
.ratings-and-reviews .tt-o-listbox .tt-o-listbox__btn,
.ratings-and-reviews .tt-c-reviews-filters-row .tt-c-review-filters .tt-o-listbox button {
border-radius: 0;
}
.ratings-and-reviews .tt-c-reviews-list-utilities {
padding: 0 0 2.5rem;
}
/* Fixes default star rating list checkbox styling so that each element appears as a
row, instead of as a column */
.ratings-and-reviews .tt-o-listbox .tt-o-listbox__rating-option,
.ratings-and-reviews .tt-o-listbox .tt-o-listbox__list li.tt-o-listbox__option {
display: flex;
flex-direction: row;
}
.ratings-and-reviews .tt-o-listbox .tt-o-listbox__list li.tt-o-listbox__option {
outline: none;
}
.ratings-and-reviews .tt-o-listbox__list li.tt-o-listbox__option .tt-o-listbox__rating-option {
padding-right: 0.3125rem;
}
.ratings-and-reviews .tt-o-listbox svg.tt-o-icon.tt-o-icon--star--empty.tt-o-icon--sm.tt-c-rating__rating-option-icon.tt-c-rating__rating-option-icon,
.ratings-and-reviews .tt-c-review__rating svg.tt-o-icon.tt-o-icon--star--empty.tt-o-icon--lg.tt-c-rating__icon.tt-c-rating__icon {
stroke-width: 0;
}
.ratings-and-reviews .tt-c-review .tt-c-rating.tt-c-review__rating.tt-u-mb--sm {
gap: var(--mobile-reviews-section-rating-icon-container-spacing);
margin-bottom: var(--mobile-reviews-section-review-item-disclaimer-padding-top);
}
.ratings-and-reviews .tt-c-review .tt-o-byline.tt-c-review__byline,
.ratings-and-reviews .tt-c-review .tt-c-review__heading.tt-u-mb--sm,
.ratings-and-reviews .tt-c-review .tt-c-review__text-content-wrapper.tt-u-mb--md,
.ratings-and-reviews .tt-c-review .tt-c-dimension.tt-u-mb--xl,
.ratings-and-reviews .tt-c-review .tt-c-review__incentivized.tt-u-mb--sm,
.ratings-and-reviews .tt-c-review .tt-c-review__profile-attributes.tt-c-profile-attributes.tt-u-mb--lg {
margin-bottom: 0;
padding-bottom: var(--mobile-reviews-section-review-item-user-rating-container-spacing);
}
.ratings-and-reviews .tt-o-byline span.tt-o-badge.tt-o-badge--staff,
.ratings-and-reviews .tt-o-byline span.tt-o-badge.tt-o-badge--verified-purchaser {
background: transparent;
color: black;
text-transform: var(--font-text-transform-capitalize);
}
.ratings-and-reviews .tt-o-byline span.tt-o-badge.tt-o-badge--verified-purchaser {
padding: 0 0.75rem;
margin-left: 0;
}
.ratings-and-reviews .tt-o-byline span.tt-o-badge.tt-o-badge--verified-purchaser:before {
content: url('data:image/svg+xml,');
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
}
.ratings-and-reviews .tt-c-reviews-list-utilities .tt-c-reviews-toolbar {
justify-content: flex-end;
margin-bottom: 0;
}
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-listbox.tt-c-reviews-toolbar__sort {
margin: 0;
width: 100%;
position: relative;
height: unset;
}
.ratings-and-reviews .tt-c-reviews-list__content .tt-c-review {
padding-top: var(--mobile-reviews-section-review-item-container-padding-top);
padding-right: var(--mobile-reviews-section-review-item-container-padding-right);
padding-bottom: var(--mobile-reviews-section-review-item-container-padding-bottom);
padding-left: var(--mobile-reviews-section-review-item-container-padding-left);
border-bottom: var(--mobile-reviews-section-review-item-container-border-bottom) solid var(--mobile-reviews-section-review-item-container-border-color);
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body.tt-u-spacing--md {
border-top: none;
grid-gap: var(--mobile-reviews-section-rating-container-spacing);
}
.ratings-and-reviews .tt-c-rating.tt-c-rating--actionable.no-reviews {
display: flex;
align-items: center;
margin-top: 0;
}
/* No reviews average rating, which is 0 */
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .no-reviews:before {
display: flex;
content: '0';
padding-right: 0.625rem;
font-family: var(--mobile-reviews-section-rating-average-font-family);
font-size: var(--mobile-reviews-section-rating-average-font-size);
line-height: var(--mobile-reviews-section-rating-average-line-height);
letter-spacing: var(--mobile-reviews-section-rating-average-letter-spacing);
text-decoration: var(--mobile-reviews-section-rating-average-text-decoration);
font-weight: var(--mobile-reviews-section-rating-average-font-weight);
text-transform: var(--mobile-reviews-section-rating-average-text-case);
}
/* No reviews count, which is (0) */
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .no-reviews:after {
display: flex;
content: '(0)';
padding-left: 0.5rem;
font-size: var(--mobile-reviews-section-review-qty-font-size);
font-weight: var(--mobile-reviews-section-review-qty-font-weight);
font-family: var(--mobile-reviews-section-review-qty-font-family);
letter-spacing: var(--mobile-reviews-section-review-qty-letter-spacing);
line-height: var(--mobile-reviews-section-review-qty-line-height);
text-decoration: var(--mobile-reviews-section-review-qty-text-decoration);
text-transform: var(--mobile-reviews-section-review-qty-text-case);
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__write-review-wrap {
width: 100%;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__write-review-wrap button {
display: flex;
width: 100%;
justify-content: center;
border: 0.0625rem solid black;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem;
letter-spacing: 0.12rem;
text-transform: uppercase;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews-body {
align-items: flex-start;
border-top: none;
border-bottom: none;
padding-top: 0;
padding-bottom: 0;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body.tt-u-spacing--md .tt-c-rating.tt-c-rating--actionable.no-reviews {
order: 1;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body.tt-u-spacing--md .tt-c-reviews-summary__no-review-text {
order: 2;
letter-spacing: var(--mobile-reviews-section-no-reviews-text-letter-spacing);
text-decoration: var(--mobile-reviews-section-no-reviews-text-text-decoration);
text-transform: var(--mobile-reviews-section-no-reviews-text-text-case);
font-size: var(--mobile-reviews-section-no-reviews-text-font-size);
line-height: var(--mobile-reviews-section-no-reviews-text-line-height);
font-weight: var(--mobile-reviews-section-no-reviews-text-font-weight);
font-family: var(--mobile-reviews-section-no-reviews-text-font-family);
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body.tt-u-spacing--md .write-review-cta {
order: 3;
}
/* Drop down list styles */
.ratings-and-reviews .tt-o-listbox__list,
.ratings-and-reviews .tt-o-listbox ul.tt-o-listbox__list,
.ratings-and-reviews ul.tt-o-listbox__list.tt-o-listbox__list--has-selection {
border: 0.0625rem solid #212121;
border-top: 0;
box-shadow: none !important;
width: 100%;
border-radius: 0 !important;
padding: 0 !important;
}
.ratings-and-reviews .tt-o-listbox .tt-o-listbox__btn, .tt-o-listbox button.tt-o-listbox__btn {
border: 0.0625rem solid #A3A3A3;
}
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-listbox button.tt-o-listbox__btn {
margin-left: 42px;
width: calc(100% - 42px);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: var(--mobile-dropdown-container-default-padding-left);
padding-right: var(--mobile-dropdown-container-default-padding-right);
height: auto;
max-height: unset;
border-color: var(--mobile-dropdown-container-default-border-color);
border-radius: var(--mobile-dropdown-container-default-border-radius);
}
.ratings-and-reviews button.tt-o-listbox__btn .tt-o-listbox__label {
position: absolute;
left: 0;
padding-right: var(--spacing-4);
font-size: 0.8125rem;
line-height: var(--desktop-font-leading-base);
letter-spacing: -0.4px;
text-transform: capitalize;
}
.ratings-and-reviews .tt-o-listbox__btn-label {
color: var(--color-neutral-1-800);
font-size: 0.8125rem;
line-height: var(--desktop-font-leading-base);
letter-spacing: -0.4px;
}
.ratings-and-reviews ul.tt-o-listbox__list.tt-o-listbox__list--has-selection {
width: calc(100% - 42px);
left: unset;
right: 0;
}
.ratings-and-reviews .tt-o-listbox__btn-icon--open {
top: 50%;
transform: rotate(180deg) translateY(50%);
}
.ratings-and-reviews .tt-o-listbox__option.tt-o-listbox__option--is-active {
outline: none;
background-color: var(--color-neutral-1-100) !important;
}
.ratings-and-reviews button.tt-o-button.tt-o-button--toolbar.tt-o-button--flat-icon-right.tt-c-reviews-toolbar__filters-toggle,
.ratings-and-reviews .tt-l-grid__row.tt-c-reviews-summary__grid-row .tt-l-grid__header.tt-c-reviews-summary__grid-header,
.ratings-and-reviews .tt-l-grid.tt-c-reviews-summary__content .tt-l-grid__row.tt-c-reviews-summary__grid-row:first-child,
.ratings-and-reviews .tt-l-grid.tt-c-reviews-summary__content .tt-l-grid__row.tt-c-reviews-summary__grid-row:last-child,
.ratings-and-reviews .tt-c-reviews-summary__rating-text,
.ratings-and-reviews .tt-c-reviews-list__header.tt-u-mb--md,
.ratings-and-reviews .tt-c-reviews-filters-row.tt-u-spacing--sm,
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-search-field.tt-o-search-field--with-search-icon.tt-c-reviews-toolbar__search,
.ratings-and-reviews .tt-c-reviews-toolbar__spacer,
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__heading,
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__write-review-wrap,
.ratings-and-reviews .tt-o-listbox__option .tt-o-listbox__option-icon-wrap,
.ratings-and-reviews .tt-o-listbox__option.tt-o-listbox__option--is-active .tt-o-listbox__option-icon-wrap {
display: none;
}
.ratings-and-reviews ul.tt-o-listbox__list.tt-o-listbox__list--has-selection li.tt-o-listbox__option {
padding: 0.75rem;
border-top: 1px solid var(--color-neutral-1-200);
}
.ratings-and-reviews ul.tt-o-listbox__list.tt-o-listbox__list--has-selection li.tt-o-listbox__option .tt-o-listbox__option-text {
font-size: 0.8125rem;
line-height: 1rem;
letter-spacing: -0.4px;
}
.ratings-and-reviews .tt-c-rating__star {
margin: 0;
}
.ratings-and-reviews .tt-c-reviews-summary__rating-number {
margin-right: 0;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--1.tt-c-reviews-summary__grid-col--1 {
gap: 0.5rem;
}
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--empty.tt-o-icon--lg.tt-c-rating__icon.tt-c-rating__icon,
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--half.tt-o-icon--xl.tt-c-rating__icon.tt-c-rating__icon,
.ratings-and-reviews .tt-c-rating.tt-c-review__rating.tt-u-mb--sm .tt-c-rating__star svg.tt-o-icon.tt-o-icon--star--empty.tt-o-icon--lg.tt-c-rating__icon.tt-c-rating__icon,
.ratings-and-reviews .tt-c-rating.tt-c-review__rating.tt-u-mb--sm .tt-c-rating__star svg.tt-o-icon.tt-o-icon--star--half.tt-o-icon--lg.tt-c-rating__icon.tt-c-rating__icon {
width: var(--mobile-reviews-section-rating-icon-inactive-width);
height: var(--mobile-reviews-section-rating-icon-inactive-height);
}
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--star--full.tt-o-icon--lg.tt-c-rating__icon.tt-c-rating__icon,
.ratings-and-reviews .tt-c-rating.tt-c-review__rating.tt-u-mb--sm .tt-c-rating__star svg.tt-o-icon.tt-o-icon--star--full.tt-o-icon--lg.tt-c-rating__icon.tt-c-rating__icon {
width: var(--mobile-reviews-section-rating-icon-active-width);
height: var(--mobile-reviews-section-rating-icon-active-height);
}
.ratings-and-reviews .tt-c-review__heading-text {
font-size: var(--mobile-reviews-section-review-item-review-title-font-size);
font-family: var(--mobile-reviews-section-review-item-review-title-font-family);
font-weight: var(--mobile-reviews-section-review-item-review-title-font-weight);
font-style: normal;
line-height: var(--mobile-reviews-section-review-item-review-title-line-height);
letter-spacing: var(--mobile-reviews-section-review-item-review-title-letter-spacing);
text-transform: var(--mobile-reviews-section-review-item-review-title-text-case);
text-decoration: var(--mobile-reviews-section-review-item-review-title-text-decoration);
}
.ratings-and-reviews span.tt-c-review__text-content {
display: block;
font-family: var(--mobile-reviews-section-review-item-review-text-font-family);
font-size: var(--mobile-reviews-section-review-item-review-text-font-size);
font-weight: var(--mobile-reviews-section-review-item-review-text-font-weight);
text-transform: var(--mobile-reviews-section-review-item-review-text-text-case);
line-height: var(--mobile-reviews-section-review-item-review-text-line-height);
letter-spacing: var(--mobile-reviews-section-review-item-review-text-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-item-review-text-text-decoration);
}
.ratings-and-reviews .tt-c-review__profile-attributes.tt-c-profile-attributes.tt-u-mb--lg {
font-style: normal;
font-family: var(--desktop-reviews-section-review-item-date-font-family);
font-weight: var(--desktop-reviews-section-review-item-date-font-weight);
font-size: var(--desktop-reviews-section-review-item-date-font-size);
line-height: var(--desktop-reviews-section-review-item-date-line-height);
letter-spacing: var(--desktop-reviews-section-review-item-date-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-item-date-text-decoration);
text-transform: var(--desktop-reviews-section-review-item-date-text-case);
top: 0;
right: 0;
}
.ratings-and-reviews .tt-c-review__incentivized.tt-u-mb--sm {
text-decoration: var(--mobile-reviews-section-review-item-disclaimer-text-decoration);
letter-spacing: var(--mobile-reviews-section-review-item-disclaimer-letter-spacing);
text-transform: var(--mobile-reviews-section-review-item-disclaimer-text-case);
font-size: var(--mobile-reviews-section-review-item-disclaimer-font-size);
line-height: var(--mobile-reviews-section-review-item-disclaimer-line-height);
font-weight: var(--mobile-reviews-section-review-item-disclaimer-font-weight);
font-family: var(--mobile-reviews-section-review-item-disclaimer-font-family);
color:var(--color-neutral-1-800);
}
.ratings-and-reviews .tt-l-grid__col.tt-c-review__grid-col.tt-l-grid__col--1.tt-c-review__grid-col--1 {
position: relative;
margin-right: var(--desktop-reviews-section-review-item-container-spacing) !important;
}
.ratings-and-reviews .tt-c-review__date.tt-u-mb--sm {
font-style: normal;
font-family: var(--desktop-reviews-section-review-item-date-font-family);
font-weight: var(--desktop-reviews-section-review-item-date-font-weight);
font-size: var(--desktop-reviews-section-review-item-date-font-size);
line-height: var(--desktop-reviews-section-review-item-date-line-height);
letter-spacing: var(--desktop-reviews-section-review-item-date-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-item-date-text-decoration);
text-transform: var(--desktop-reviews-section-review-item-date-text-case);
position: absolute;
top: 0;
right: 0;
color: var(--primary-default);
}
.ratings-and-reviews .tt-l-grid__col--1.tt-c-review__grid-col--1 .tt-c-review__profile-attributes .tt-c-profile-attributes__item .tt-c-profile-attributes__value,
.ratings-and-reviews span.tt-o-byline__item.tt-o-byline__author {
font-family: var(--mobile-reviews-section-review-item-user-name-font-family);
font-size: var(--mobile-reviews-section-review-item-user-name-font-size);
font-weight: var(--mobile-reviews-section-review-item-user-name-font-weight);
text-transform: var(--mobile-reviews-section-review-item-user-name-text-case);
text-decoration: var(--mobile-reviews-section-review-item-user-name-text-decoration);
letter-spacing: var(--mobile-reviews-section-review-item-user-name-letter-spacing);
font-style: normal;
line-height: var(--mobile-reviews-section-review-item-user-name-line-height);
}
.ratings-and-reviews button.tt-o-button.tt-o-button--toolbar.tt-o-button--flat-icon-left.tt-c-review-toolbar__vote.tt-c-review-toolbar__vote{
padding-top: var(--mobile-reviews-section-review-item-helpful-button-container-padding-top);
padding-right: var(--mobile-reviews-section-review-item-helpful-button-container-padding-right);
padding-bottom: var(--mobile-reviews-section-review-item-helpful-button-container-padding-bottom);
padding-left: var(--mobile-reviews-section-review-item-helpful-button-container-padding-top);
border: 1px solid var(--mobile-reviews-section-review-item-helpful-button-container-border-color);
margin-left: 0;
}
.ratings-and-reviews button.tt-o-button.tt-o-button--toolbar.tt-o-button--flat-icon-left.tt-c-review-toolbar__vote.tt-c-review-toolbar__vote span {
text-decoration: var(--mobile-reviews-section-review-item-helpful-button-text-text-decoration);
}
.ratings-and-reviews .tt-c-review-toolbar__content--left.tt-u-spacing--left--md {
gap: 0.5rem;
}
.ratings-and-reviews .tt-o-button--flat-icon-left .tt-o-icon, button.tt-o-button--flat-icon-left .tt-o-icon {
margin-right: 0.5rem;
}
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--helpful-off.tt-o-icon--sm,
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--unhelpful-off.tt-o-icon--sm {
height: var(--mobile-reviews-section-review-item-helpful-button-icon-height);
width: var(--mobile-reviews-section-review-item-helpful-button-icon-width);
fill: var(--mobile-reviews-section-review-item-helpful-button-icon-fill);
}
.ratings-and-reviews span.tt-c-review-toolbar__likes-number {
font-size: var(--mobile-reviews-section-review-item-helpful-button-text-font-size);
line-height: var(--mobile-reviews-section-review-item-helpful-button-text-line-height);
letter-spacing: var(--mobile-reviews-section-review-item-helpful-button-text-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-item-helpful-button-text-text-decoration);
text-transform: var(--mobile-reviews-section-review-item-helpful-button-text-text-case);
font-weight: var(--mobile-reviews-section-review-item-helpful-button-text-font-weight);
font-family: var(--mobile-reviews-section-review-item-helpful-button-text-font-family);
}
.ratings-and-reviews span.tt-c-review-toolbar__dislikes-number {
font-size: var(--mobile-reviews-section-review-item-helpful-button-text-font-size);
line-height: var(--mobile-reviews-section-review-item-helpful-button-text-line-height);
letter-spacing: var(--mobile-reviews-section-review-item-helpful-button-text-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-item-helpful-button-text-text-decoration);
text-transform: var(--mobile-reviews-section-review-item-helpful-button-text-text-case);
font-weight: var(--mobile-reviews-section-review-item-helpful-button-text-font-weight);
font-family: var(--mobile-reviews-section-review-item-helpful-button-text-font-family);
}
.ratings-and-reviews .tt-c-review-toolbar.tt-u-mb--xs,
.ratings-and-reviews .tt-c-review-toolbar__content--left.tt-u-spacing--left--md {
margin-left: 0;
}
[data-video-target="modal"] {
z-index: 125000;
}
.ratings-and-reviews .tt-c-review-toolbar__action,
.ratings-and-reviews .tt-c-review-toolbar button.tt-c-review-toolbar__action {
letter-spacing: var(--mobile-reviews-section-review-item-report-link-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-item-report-link-text-decoration);
text-transform: var(--mobile-reviews-section-review-item-report-link-text-case);
font-size: var(--mobile-reviews-section-review-item-report-link-font-size);
line-height: var(--mobile-reviews-section-review-item-report-link-line-height);
font-weight: var(--mobile-reviews-section-review-item-report-link-font-weight);
font-family: var(--mobile-reviews-section-review-item-report-link-font-family);
}
.ratings-and-reviews button.tt-o-button.tt-o-button--link.tt-c-review__text-expand.tt-c-review__text-expand {
display: flex;
letter-spacing: var(--mobile-reviews-section-review-item-readmore-link-letter-spacing);
text-decoration: var(--mobile-reviews-section-review-item-readmore-link-text-decoration);
text-transform: var(--mobile-reviews-section-review-item-readmore-link-text-case);
font-size: var(--mobile-reviews-section-review-item-readmore-link-font-size);
line-height: var(--mobile-reviews-section-review-item-readmore-link-line-height);
font-weight: var(--mobile-reviews-section-review-item-readmore-link-font-weight);
font-family: var(--mobile-reviews-section-review-item-readmore-link-font-family);
}
.ratings-and-reviews button.tt-o-button--toolbar span {
text-decoration-color: var(--tertiary-default) !important;
text-decoration: var(--mobile-reviews-section-review-item-report-link-text-decoration);
color: var(--tertiary-default) !important;
text-transform: var(--mobile-reviews-section-review-item-report-link-text-case);
font-size: var(--mobile-reviews-section-review-item-report-link-font-size);
line-height: var(--mobile-reviews-section-review-item-report-link-line-height);
font-weight:var(--mobile-reviews-section-review-item-report-link-font-weight);
letter-spacing: var(--mobile-reviews-section-review-item-report-link-letter-spacing);
font-family: var(--mobile-reviews-section-review-item-report-link-font-family);
}
/* Ratings and Reviews CSS Overrides END */
.maximum-retail-price {
color: var(--mobile-product-details-price-mrp-fill);
text-decoration: var(--mobile-product-details-price-mrp-text-decoration);
letter-spacing: var(--mobile-product-details-price-mrp-letter-spacing);
text-transform: var(--mobile-product-details-price-mrp-text-case);
font-size: var(--mobile-product-details-price-mrp-font-size);
line-height: var(--mobile-product-details-price-mrp-line-height);
font-weight: var(--mobile-product-details-price-mrp-font-weight);
font-family: var(--mobile-product-details-price-mrp-font-family);
padding-top: var(--mobile-product-details-price-mrp-padding-top);
}
.anchor-section-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 12px;
margin: 12px auto 0;
width: 100%;
max-width: 1536px;
}
.anchor-section-item {
display: inline-block;
text-align: center;
width: 100%;
z-index: 2;
}
.anchor-primary {
background: var(--mobile-button-container-primary-default-fill);
border: 1px solid var(--desktop-button-container-primary-default-border-color);
padding-bottom: var(--mobile-button-container-primary-default-padding-bottom);
padding-left: var(--mobile-button-container-primary-default-padding-left);
padding-right: var(--mobile-button-container-primary-default-padding-right);
padding-top: var(--mobile-button-container-primary-default-padding-top);
color: var(--mobile-button-text-primary-default-fill);
font-family: var(--mobile-button-text-primary-default-font-family);
font-size: var(--mobile-button-text-primary-default-font-size);
font-weight: var(--mobile-button-text-primary-default-font-weight);
letter-spacing: var(--mobile-button-text-primary-default-letter-spacing);
line-height: var(--mobile-button-text-primary-default-line-height);
text-decoration: var(--mobile-button-text-primary-default-text-decoration);
text-transform: var(--mobile-button-text-primary-default-text-case);
}
.anchor-primary:hover {
background: var(--mobile-button-container-primary-hover-fill);
border-color: var(--mobile-button-container-primary-hover-border-color);
padding-bottom: var(--mobile-button-container-primary-hover-padding-bottom);
padding-left: var(--mobile-button-container-primary-hover-padding-left);
padding-right: var(--mobile-button-container-primary-hover-padding-right);
padding-top: var(--mobile-button-container-primary-hover-padding-top);
color: var(--mobile-button-text-primary-hover-fill);
font-family: var(--mobile-button-text-primary-hover-font-family);
font-size: var(--mobile-button-text-primary-hover-font-size);
font-weight: var(--mobile-button-text-primary-hover-font-weight);
letter-spacing: var(--mobile-button-text-primary-hover-letter-spacing);
line-height: var(--mobile-button-text-primary-hover-line-height);
text-decoration: var(--mobile-button-text-primary-hover-text-decoration);
text-transform: var(--mobile-button-text-primary-hover-text-case);
}
.anchor-secondary {
background: var(--mobile-button-container-secondary-default-fill);
border: 1px solid var(--desktop-button-container-secondary-default-border-color);
padding-bottom: var(--mobile-button-container-secondary-default-padding-bottom);
padding-left: var(--mobile-button-container-secondary-default-padding-left);
padding-right: var(--mobile-button-container-secondary-default-padding-right);
padding-top: var(--mobile-button-container-secondary-default-padding-top);
color: var(--mobile-button-text-secondary-default-fill);
font-family: var(--mobile-button-text-secondary-default-font-family);
font-size: var(--mobile-button-text-secondary-default-font-size);
font-weight: var(--mobile-button-text-secondary-default-font-weight);
letter-spacing: var(--mobile-button-text-secondary-default-letter-spacing);
line-height: var(--mobile-button-text-secondary-default-line-height);
text-decoration: var(--mobile-button-text-secondary-default-text-decoration);
text-transform: var(--mobile-button-text-secondary-default-text-case);
}
.anchor-secondary:hover {
background: var(--mobile-button-container-secondary-hover-fill);
border-color: var(--mobile-button-container-secondary-hover-border-color);
padding-bottom: var(--mobile-button-container-secondary-hover-padding-bottom);
padding-left: var(--mobile-button-container-secondary-hover-padding-left);
padding-right: var(--mobile-button-container-secondary-hover-padding-right);
padding-top: var(--mobile-button-container-secondary-hover-padding-top);
color: var(--mobile-button-text-secondary-hover-fill);
font-family: var(--mobile-button-text-secondary-hover-font-family);
font-size: var(--mobile-button-text-secondary-hover-font-size);
font-weight: var(--mobile-button-text-secondary-hover-font-weight);
letter-spacing: var(--mobile-button-text-secondary-hover-letter-spacing);
line-height: var(--mobile-button-text-secondary-hover-line-height);
text-decoration: var(--mobile-button-text-secondary-hover-text-decoration);
text-transform: var(--mobile-button-text-secondary-hover-text-case);
}
.anchor-tertiary {
background: transparent;
border: 1px solid transparent;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.875rem;
color: var(--mobile-link-button-normal-default-fill);
font-family: var(--mobile-link-button-normal-default-font-family);
font-size: var(--mobile-link-button-normal-default-font-size);
font-weight: var(--mobile-link-button-normal-default-font-weight);
letter-spacing: var(--mobile-link-button-normal-default-letter-spacing);
line-height: var(--mobile-link-button-normal-default-line-height);
text-decoration: var(--mobile-link-button-normal-default-text-decoration);
text-transform: var(--mobile-link-button-normal-default-text-case);
}
.anchor-tertiary:hover {
color: var(--mobile-link-button-normal-hover-fill);
font-family: var(--mobile-link-button-normal-hover-font-family);
font-size: var(--mobile-link-button-normal-hover-font-size);
font-weight: var(--mobile-link-button-normal-hover-font-weight);
letter-spacing: var(--mobile-link-button-normal-hover-letter-spacing);
line-height: var(--mobile-link-button-normal-hover-line-height);
text-decoration: var(--mobile-link-button-normal-hover-text-decoration);
text-transform: var(--mobile-link-button-normal-hover-text-case);
}
.anchor-primary-inverse {
background: var(--desktop-button-container-primary-default-inverse-fill);
border: 1px solid var(--desktop-button-container-primary-default-inverse-border-color);
padding-bottom: var(--desktop-button-container-primary-default-inverse-padding-bottom);
padding-left: var(--desktop-button-container-primary-default-inverse-padding-left);
padding-right: var(--desktop-button-container-primary-default-inverse-padding-right);
padding-top: var(--desktop-button-container-primary-default-inverse-padding-top);
color: var(--desktop-button-text-primary-default-inverse-fill);
font-family: var(--desktop-button-text-primary-default-inverse-font-family);
font-size: var(--desktop-button-text-primary-default-inverse-font-size);
font-weight: var(--desktop-button-text-primary-default-inverse-font-weight);
letter-spacing: var(--desktop-button-text-primary-default-inverse-letter-spacing);
line-height: var(--desktop-button-text-primary-default-inverse-line-height);
text-decoration: var(--desktop-button-text-primary-default-inverse-text-decoration);
text-transform: var(--desktop-button-text-primary-default-inverse-text-case);
}
.anchor-primary-inverse:hover {
background: var(--desktop-button-container-primary-hover-inverse-fill);
border-color: var(--desktop-button-container-primary-hover-inverse-border-color);
padding-bottom: var(--desktop-button-container-primary-hover-inverse-padding-bottom);
padding-left: var(--desktop-button-container-primary-hover-inverse-padding-left);
padding-right: var(--desktop-button-container-primary-hover-inverse-padding-right);
padding-top: var(--desktop-button-container-primary-hover-inverse-padding-top);
color: var(--desktop-button-text-primary-hover-inverse-fill);
font-family: var(--desktop-button-text-primary-hover-inverse-font-family);
font-size: var(--desktop-button-text-primary-hover-inverse-font-size);
font-weight: var(--desktop-button-text-primary-hover-inverse-font-weight);
letter-spacing: var(--desktop-button-text-primary-hover-inverse-letter-spacing);
line-height: var(--desktop-button-text-primary-hover-inverse-line-height);
text-decoration: var(--desktop-button-text-primary-hover-inverse-text-decoration);
text-transform: var(--desktop-button-text-primary-hover-inverse-text-case);
}
.anchor-secondary-inverse {
background: var(--desktop-button-container-secondary-default-inverse-fill);
border: 1px solid var(--desktop-button-container-secondary-default-inverse-border-color);
padding-bottom: var(--desktop-button-container-secondary-default-inverse-padding-bottom);
padding-left: var(--desktop-button-container-secondary-default-inverse-padding-left);
padding-right: var(--desktop-button-container-secondary-default-inverse-padding-right);
padding-top: var(--desktop-button-container-secondary-default-inverse-padding-top);
color: var(--desktop-button-text-secondary-default-inverse-fill);
font-family: var(--desktop-button-text-secondary-default-inverse-font-family);
font-size: var(--desktop-button-text-secondary-default-inverse-font-size);
font-weight: var(--desktop-button-text-secondary-default-inverse-font-weight);
letter-spacing: var(--desktop-button-text-secondary-default-inverse-letter-spacing);
line-height: var(--desktop-button-text-secondary-default-inverse-line-height);
text-decoration: var(--desktop-button-text-secondary-default-inverse-text-decoration);
text-transform: var(--desktop-button-text-secondary-default-inverse-text-case);
}
.anchor-secondary-inverse:hover {
background: var(--desktop-button-container-secondary-hover-inverse-fill);
border-color: var(--desktop-button-container-secondary-hover-inverse-border-color);
padding-bottom: var(--desktop-button-container-secondary-hover-inverse-padding-bottom);
padding-left: var(--desktop-button-container-secondary-hover-inverse-padding-left);
padding-right: var(--desktop-button-container-secondary-hover-inverse-padding-right);
padding-top: var(--desktop-button-container-secondary-hover-inverse-padding-top);
color: var(--desktop-button-text-secondary-hover-inverse-fill);
font-family: var(--desktop-button-text-secondary-hover-inverse-font-family);
font-size: var(--desktop-button-text-secondary-hover-inverse-font-size);
font-weight: var(--desktop-button-text-secondary-hover-inverse-font-weight);
letter-spacing: var(--desktop-button-text-secondary-hover-inverse-letter-spacing);
line-height: var(--desktop-button-text-secondary-hover-inverse-line-height);
text-decoration: var(--desktop-button-text-secondary-hover-inverse-text-decoration);
text-transform: var(--desktop-button-text-secondary-hover-inverse-text-case);
}
.anchor-tertiary-inverse {
background: transparent;
border: 1px solid transparent;
padding-bottom: 0.75rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.875rem;
color: var(--mobile-link-button-normal-default-inverse-fill);
font-family: var(--mobile-link-button-normal-default-inverse-font-family);
font-size: var(--mobile-link-button-normal-default-inverse-font-size);
font-weight: var(--mobile-link-button-normal-default-inverse-font-weight);
letter-spacing: var(--mobile-link-button-normal-default-inverse-letter-spacing);
line-height: var(--mobile-link-button-normal-default-inverse-line-height);
text-decoration: var(--mobile-link-button-normal-default-inverse-text-decoration);
text-transform: var(--mobile-link-button-normal-default-inverse-text-case);
}
.anchor-tertiary-inverse:hover {
color: var(--mobile-link-button-normal-hover-inverse-fill);
font-family: var(--mobile-link-button-normal-hover-inverse-font-family);
font-size: var(--mobile-link-button-normal-hover-inverse-font-size);
font-weight: var(--mobile-link-button-normal-hover-inverse-font-weight);
letter-spacing: var(--mobile-link-button-normal-hover-inverse-letter-spacing);
line-height: var(--mobile-link-button-normal-hover-inverse-line-height);
text-decoration: var(--mobile-link-button-normal-hover-inverse-text-decoration);
text-transform: var(--mobile-link-button-normal-hover-inverse-text-case);
}
.inline-tout-details-panel .anchor-section-container {
margin: 0;
}
.vto-cta {
border: 1px solid var(--mobile-button-container-secondary-default-border-color);
border-radius: 0rem;
font-weight: var(--mobile-button-text-primary-default-font-weight);
font-size: var(--mobile-button-text-primary-default-font-size);
padding: 0.25rem 1rem;
text-transform: var(--mobile-button-text-primary-default-text-case);
flex-shrink: 0;
align-self: baseline;
}
.vto-cta:hover {
background: var(--secondary-container-variant);
}
.vto-cta:disabled {
background-color: var(--desktop-button-container-primary-disabled-fill);
border-color: var(--desktop-button-container-primary-disabled-border-color);
color: var(--desktop-button-text-primary-disabled-fill);
cursor: not-allowed;
}
.vto-container {
background: var(--primary-default);
position: absolute;
inset: 0px;
display: flex;
align-items: center;
justify-content: center;
max-width: 37.5rem;
height: 37.5rem;
margin: auto;
z-index: 100;
}
.shade-description-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.zoom-instructions {
display: none;
text-align: center;
margin-top: 12px;
font-size: 12px;
line-height: 18px;
text-align: center;
color: #525252;
}
.mobile-image-zoom-button {
position: absolute;
top: 0;
height: calc(100% - 1rem);
width: 100%;
z-index: 10;
}
.mobile-image-zoom-svg-wrapper {
/* Using px instead of rems. TF cart-drawer resets html font-size, this might be bug in the cart-drawer */
background: #fff;
border-radius: calc(infinity * 1px);
display: flex;
padding: 6px;
position: absolute;
align-items: center;
justify-content: center;
bottom: 16px;
right: 16px;
width: 32px;
height: 32px;
}
.mobile-image-zoom-dialog {
background: #fff;
padding: 0;
position: fixed;
height: 100vh;
width: 100vw;
}
.mobile-image-zoom-dialog-header {
display: flex;
justify-content: end;
padding: 1rem;
}
.mobile-image-zoom-dialog-close {
width: 1.5rem;
height: 1.5rem;
z-index: 10;
}
.how-to-zoom-container {
display: flex;
justify-content: center;
margin-bottom: 19px;
}
.how-to-zoom-label {
color: #525252;
background: #fafafa;
border: 1px solid #e5e5e5;
padding: 5px 10px;
font-size: 12px;
line-height: 18px;
}
#blueprint-pdp .ugc-container,
.drupal-container .ugc-container {
display: grid;
margin: 3.75rem auto;
max-width: unset;
width: 100%;
}
#blueprint-pdp .ugc-heading,
.drupal-container .ugc-heading {
all: unset;
color: var(--mobile-ugc-section-heading-fill);
margin-bottom: 0.5rem;
text-decoration: var(--mobile-ugc-section-heading-text-decoration);
text-transform: var(--mobile-ugc-section-heading-text-case);
text-align: center;
font-weight: var(--mobile-ugc-section-heading-font-weight);
letter-spacing: var(--mobile-ugc-section-heading-letter-spacing);
font-size: var(--mobile-ugc-section-heading-font-size);
line-height: var(--mobile-ugc-section-heading-line-height);
font-family: var(--mobile-ugc-section-heading-font-family);
}
#blueprint-pdp .ugc-subheading,
.drupal-container .ugc-subheading {
all: unset;
color: var(--mobile-ugc-section-subheading-fill);
text-decoration: var(--mobile-ugc-section-subheading-text-decoration);
text-transform: var(--mobile-ugc-section-subheading-text-case);
font-weight: var(--mobile-ugc-section-subheading-font-weight);
text-align: center;
letter-spacing: var(--mobile-ugc-section-subheading-letter-spacing);
font-size: var(--mobile-ugc-section-subheading-font-size);
line-height: var(--mobile-ugc-section-subheading-line-height);
font-family: var(--mobile-ugc-section-subheading-font-family);
}
#blueprint-pdp .ugc-content,
.drupal-container .ugc-content,
.drupal-container [id^="pixlee_container"] {
margin-top: 1.5rem;
}
@media (min-width: 640px) {
.sticky-cta-container {
display: none;
}
.product-carousel-container .product-carousel-pincer-swiper {
margin-left: 27px;
margin-right: 27px;
}
.product-section-title-container .link-button-bold-default {
margin-left: 10px;
}
.product-section-title {
margin-left: 10px;
}
.product-grid {
display: grid;
margin-left: 0;
margin-right: 0;
align-self: start;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--desktop-product-grid-products-row-spacing);
row-gap: 60px;
}
.utility-nav {
padding-right: 2rem;
padding-left: 2rem;
}
.mobile-header-search-container {
padding-right: 2rem;
padding-left: 2rem;
}
.write-a-review-container .tt-o-radio__label {
width: var(--desktop-write-review-button-width);
}
.write-a-review-container .tt-o-radio__item {
flex-grow: 0;
}
.write-a-review-container .tt-c-auth__email-submit,
.write-a-review-container .tt-c-review-form__submit {
max-width: var(--desktop-write-review-button-width);
}
.write-a-review-container .tt-o-check__label {
padding-top: var(--spacing-1);
}
.product-section-container {
position: relative;
}
.swiper-button-prev svg path {
stroke: var(--desktop-carousel-previous-icon-fill);
}
.swiper-button-next svg path {
stroke: var(--desktop-carousel-next-icon-fill);
}
.pincer-swiper .pincer-button-next:after {
color: var(--desktop-carousel-next-icon-fill);
}
.pincer-swiper .pincer-button-prev:after {
color: var(--desktop-carousel-previous-icon-fill);
}
.product-carousel-container .swiper-button-prev,
.product-carousel-container .swiper-button-next {
top: var(--desktop-carousel-previous-icon-padding-top);
}
.product-carousel-container .swiper-button-prev::after,
.product-carousel-container .swiper-button-next::after,
.product-carousel-container .swiper-button-prev svg,
.product-carousel-container .swiper-button-next svg {
display: block;
}
.content-card-carousel-container .swiper-button-prev::after,
.content-card-carousel-container .swiper-button-next::after,
.content-card-carousel-container .swiper-button-prev svg,
.content-card-carousel-container .swiper-button-next svg {
margin: 0;
display: block;
}
.content-card-carousel-container .swiper-button-next {
color: var(--desktop-cards-section-next-icon-fill);
top: var(--desktop-cards-section-next-icon-padding-top);
width: var(--desktop-cards-section-next-icon-width);
height: var(--desktop-cards-section-next-icon-height);
}
.content-card-carousel-container .swiper-button-prev {
color: var(--desktop-cards-section-previous-icon-fill);
top: var(--desktop-cards-section-previous-icon-padding-top);
width: var(--desktop-cards-section-previous-icon-width);
height: var(--desktop-cards-section-previous-icon-height);
}
.carousel-container .swiper-button-prev {
left: unset;
}
.carousel-container .swiper-button-next {
position: absolute;
right: 0;
}
.carousel-container .swiper-button-prev::after,
.carousel-container .swiper-button-next::after {
content: initial;
}
.carousel-container .swiper-button-prev::after svg,
.carousel-container .swiper-button-next::after svg {
width: 2rem;
stroke-width: .5px;
}
.carousel-container .swiper-button-prev {
transform: rotate(180deg);
}
.ratings-and-reviews .tt-l-grid__row.tt-c-reviews-summary__grid-row {
align-items: center;
padding-top: 0;
padding-bottom: 2.5rem;
grid-gap: 0;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--2.tt-c-reviews-summary__grid-col--2{
padding-right: 2.5rem;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews-body {
padding-top: 0;
padding-bottom: 1rem;
}
}
@media (min-width: 1024px) {
.product-section-title {
margin-left: unset;
}
.product-details-carousel.is-sticky {
position: sticky;
top: 24px;
}
.product-details-size-chips-container {
gap: var(--desktop-product-details-size-chips-container-spacing);
}
.product-section-title-container .link-button-bold-default {
margin-left: unset;
}
.banner-section-2-col {
display: grid;
grid-template-columns: 1fr 1fr;
}
.banner-section-3-col {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.banner-section {
width: var(--desktop-banner-section-container-width);
}
.banner-section img {
aspect-ratio: unset;
}
.banner-section-2-col img {
aspect-ratio: 1;
}
.banner-section .banner-button {
padding-top: var(--desktop-banner-section-button-container-default-padding-top);
padding-right: var(--desktop-banner-section-button-container-default-padding-right);
padding-bottom: var(--desktop-banner-section-button-container-default-padding-bottom);
padding-left: var(--desktop-banner-section-button-container-default-padding-left);
border-color: var(--desktop-banner-section-button-container-default-border-color);
border-width: var(--desktop-banner-section-button-container-default-border);
color: var(--desktop-banner-section-button-text-default-fill);
font-family: var(--desktop-banner-section-button-text-default-font-family);
font-weight: var(--desktop-banner-section-button-text-default-font-weight);
line-height: var(--desktop-banner-section-button-text-default-line-height);
font-size: var(--desktop-banner-section-button-text-default-font-size);
letter-spacing: var(--desktop-banner-section-button-text-default-letter-spacing);
text-transform: var(--desktop-banner-section-button-text-default-text-case);
text-decoration: var(--desktop-banner-section-button-text-default-text-decoration);
}
.banner-section-1-col .banner-image-content {
width: var(--desktop-banner-section-text-container-width);
min-width: var(--desktop-min-banner-section-text-container-width);
}
.banner-section .banner-title,
.banner-section-title {
color: var(--desktop-banner-section-title-text-fill);
font-family: var(--desktop-banner-section-title-text-font-family);
font-weight: var(--desktop-banner-section-title-text-font-weight);
line-height: var(--desktop-banner-section-title-text-line-height);
font-size: var(--desktop-banner-section-title-text-font-size);
letter-spacing: var(--desktop-banner-section-title-text-letter-spacing);
text-transform: var(--desktop-banner-section-title-text-text-case);
text-decoration: var(--desktop-banner-section-title-text-text-decoration);
}
.banner-section .banner-eyebrow {
color: var(--desktop-banner-section-eyebrow-text-fill);
font-family: var(--desktop-banner-section-eyebrow-text-font-family);
font-weight: var(--desktop-banner-section-eyebrow-text-font-weight);
line-height: var(--desktop-banner-section-eyebrow-text-line-height);
font-size: var(--desktop-banner-section-eyebrow-text-font-size);
letter-spacing: var(--desktop-banner-section-eyebrow-text-letter-spacing);
text-transform: var(--desktop-banner-section-eyebrow-text-text-case);
text-decoration: var(--desktop-banner-section-eyebrow-text-text-decoration);
}
.banner-section .banner-subtitle,
.banner-section-subtitle,
.banner-text {
font-family: var(--desktop-banner-section-text-font-family);
font-weight: var(--desktop-banner-section-text-font-weight);
font-size: var(--desktop-banner-section-text-font-size);
letter-spacing: var(--desktop-banner-section-text-letter-spacing);
line-height: var(--desktop-banner-section-text-line-height);
text-transform: var(--desktop-banner-section-text-text-case);
text-decoration: var(--desktop-banner-section-text-text-decoration);
color: var(--desktop-banner-section-text-fill);
}
.card-vertical-eyebrow {
font-family: var(--desktop-card-vertical-eyebrow-font-family);
font-weight: var(--desktop-card-vertical-eyebrow-font-weight);
font-size: var(--desktop-card-vertical-eyebrow-font-size);
line-height: var(--desktop-card-vertical-eyebrow-line-height);
letter-spacing: var(--desktop-card-vertical-eyebrow-letter-spacing);
text-transform: var(--desktop-card-vertical-eyebrow-text-case);
text-decoration: var(--desktop-card-vertical-eyebrow-text-decoration);
color: var(--desktop-card-vertical-eyebrow-fill);
}
.copy-section:has(.rich-text) {
margin-bottom: var(--desktop-copy-section-container-padding-bottom);
}
.accordions-container {
margin-bottom: 5rem;
}
.accordion-legal {
font-family: var(--desktop-accordion-legal-text-font-family);
color: var(--desktop-accordion-legal-text-fill);
font-size: var(--desktop-accordion-legal-text-font-size);
line-height: var(--desktop-accordion-legal-text-line-height);
}
.accordion-attribute {
letter-spacing: var(--desktop-accordion-attribute-title-letter-spacing);
text-transform: var(--desktop-accordion-attribute-title-text-case);
text-decoration: var(--desktop-accordion-attribute-title-text-decoration);
font-size: var(--desktop-accordion-attribute-title-font-size);
line-height: var(--desktop-accordion-attribute-title-line-height);
font-weight: var(--desktop-accordion-attribute-title-font-weight);
font-family: var(--desktop-accordion-attribute-title-font-family);
color: var(--desktop-accordion-attribute-title-fill);
}
.accordion-subheader {
color: var(--desktop-accordion-subheader-fill);
letter-spacing: var(--desktop-accordion-subheader-letter-spacing);
text-decoration: var(--desktop-accordion-subheader-text-decoration);
text-transform: var(--desktop-accordion-subheader-text-case);
font-size: var(--desktop-accordion-subheader-font-size);
line-height: var(--desktop-accordion-subheader-line-height);
font-weight: var(--desktop-accordion-subheader-font-weight);
font-family: var(--desktop-accordion-subheader-font-family);
margin: 0;
}
.product-card-description {
font-family: var(--desktop-product-card-description-font-family);
line-height: var(--desktop-product-card-description-line-height);
font-size: var(--desktop-product-card-description-font-size);
letter-spacing: var(--desktop-product-card-description-letter-spacing);
font-weight: var(--desktop-product-card-description-font-weight);
text-transform: var(--desktop-product-card-description-text-case);
text-decoration: var(--desktop-product-card-description-text-decoration);
margin-top: var(--desktop-product-card-title-description-container-spacing);
flex-grow: 1;
}
.product-card .product-card-title:first-child {
margin-top: var(--desktop-product-card-single-sku-spacer-container-height);
}
.product-card-title {
color: var(--desktop-product-card-title-fill);
font-family: var(--desktop-product-card-title-font-family);
line-height: var(--desktop-product-card-title-line-height);
font-size: var(--desktop-product-card-title-font-size);
letter-spacing: var(--desktop-product-card-title-letter-spacing);
font-weight: var(--desktop-product-card-title-font-weight);
text-transform: var(--desktop-product-card-title-text-case);
text-decoration: var(--desktop-product-card-title-text-decoration);
margin-top: var(--desktop-product-card-detail-panel-spacing);
}
.product-card-rating {
margin-top: var(--desktop-product-card-title-description-container-spacing);
}
.product-card-rating-average {
color: var(--desktop-product-card-rating-average-fill);
font-family: var(--desktop-product-card-rating-average-font-family);
line-height: var(--desktop-product-card-rating-average-line-height);
font-size: var(--desktop-product-card-rating-average-font-size);
letter-spacing: var(--desktop-product-card-rating-average-letter-spacing);
font-weight: var(--desktop-product-card-rating-average-font-weight);
text-transform: var(--desktop-product-card-rating-average-text-case);
text-decoration: var(--desktop-product-card-rating-average-text-decoration);
}
.product-card-rating-score {
font-family: var(--desktop-product-details-review-number-font-family);
font-weight: var(--desktop-product-details-review-number-font-weight);
font-size: var(--desktop-product-details-review-number-font-size);
line-height: var(--desktop-product-details-review-number-line-height);
letter-spacing: var(--desktop-product-details-review-number-letter-spacing);
text-transform: var(--desktop-product-details-review-number-text-case);
text-decoration: var(--desktop-product-details-review-number-text-decoration);
color: var(--desktop-product-details-review-number-fill);
}
.product-card-rating-link {
color: var(--desktop-product-details-review-link-fill);
font-family: var(--desktop-product-details-review-link-font-family);
line-height: var(--desktop-product-details-review-link-line-height);
font-size: var(--desktop-product-details-review-link-font-size);
font-weight: var(--desktop-product-details-review-link-font-weight);
text-decoration-line: var(--desktop-product-details-review-link-text-decoration);
text-transform: var(--desktop-product-details-review-link-text-case);
letter-spacing: var(--desktop-product-details-review-link-letter-spacing);
padding-left: var(--desktop-product-details-review-rating-container-spacing);
}
.product-card-rating-icon {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
position: relative;
width: calc(var(--desktop-product-card-rating-icon-active-width) * 5);
height: var(--desktop-product-card-rating-icon-active-height);
}
.product-card-rating-icon::before,
.product-card-rating-icon::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
}
.product-card-rating-icon::before {
background-color: var(--desktop-product-card-rating-icon-inactive-fill);
}
.product-card-rating-icon::after {
background-color: var(--desktop-product-card-rating-icon-active-fill);
width: var(--percent);
overflow: hidden;
}
.product-card-image {
background: var(--desktop-product-card-image-fill)
}
.product-card-image-badge-text {
font-family: var(--desktop-product-card-image-badge-text-font-family);
font-size: var(--desktop-product-card-image-badge-text-font-size);
font-weight: var(--desktop-product-card-image-badge-text-font-weight);
}
.product-card-image-badge-image {
margin-top: var(--desktop-image-badge-image-margin-top);
}
.product-card-variant-count-badge-text {
font-family: var(--desktop-product-card-image-skus-count-font-family);
font-size: var(--desktop-product-card-image-skus-count-font-size);
font-weight: var(--desktop-product-card-image-skus-count-font-weight);
line-height: var(--desktop-product-card-image-skus-count-line-height);
letter-spacing: var(--desktop-product-card-image-skus-count-letter-spacing);
text-decoration: var(--desktop-product-card-image-skus-count-text-decoration);
text-transform: var(--desktop-product-card-image-skus-count-text-case);
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
color: var(--desktop-product-card-image-skus-count-fill);
}
.product-card-price {
margin-top: var(--desktop-product-card-price-container-spacing);
}
.product-card-price-divider {
font-family: var(--desktop-product-card-price-divider-font-family);
font-size: var(--desktop-product-card-price-divider-font-size);
letter-spacing: var(--desktop-product-card-price-divider-letter-spacing);
font-weight: var(--desktop-product-card-price-divider-font-weight);
text-transform: var(--desktop-product-card-price-divider-text-case);
text-decoration: var(--desktop-product-card-price-divider-text-decoration);
color: var(--desktop-product-card-price-divider-fill);
}
.product-card-price-recommended {
font-family: var(--desktop-product-card-price-recommended-font-family);
line-height: var(--desktop-product-card-price-recommended-line-height);
font-size: var(--desktop-product-card-price-recommended-font-size);
letter-spacing: var(--desktop-product-card-price-recommended-letter-spacing);
font-weight: var(--desktop-product-card-price-recommended-font-weight);
text-transform: var(--desktop-product-card-price-recommended-text-case);
text-decoration: var(--desktop-product-card-price-recommended-text-decoration);
}
.product-card-price-discounted {
font-family: var(--desktop-product-card-price-discounted-font-family);
line-height: var(--desktop-product-card-price-discounted-line-height);
font-size: var(--desktop-product-card-price-discounted-font-size);
letter-spacing: var(--desktop-product-card-price-discounted-letter-spacing);
font-weight: var(--desktop-product-card-price-discounted-font-weight);
text-transform: var(--desktop-product-card-price-discounted-text-case);
text-decoration: var(--desktop-product-card-price-discounted-text-decoration);
}
.product-card-price-per-unit {
font-family: var(--desktop-product-card-price-price-per-unit-font-family);
line-height: var(--desktop-product-card-price-price-per-unit-line-height);
font-size: var(--desktop-product-card-price-price-per-unit-font-size);
letter-spacing: var(--desktop-product-card-price-price-per-unit-letter-spacing);
font-weight: var(--desktop-product-card-price-price-per-unit-font-weight);
text-transform: var(--desktop-product-card-price-price-per-unit-text-case);
text-decoration: var(--desktop-product-card-price-price-per-unit-text-decoration);
}
.product-card-price-discount-percent {
font-family: var(--desktop-product-card-price-discount-percent-font-family);
line-height: var(--desktop-product-card-price-discount-percent-line-height);
font-size: var(--desktop-product-card-price-discount-percent-font-size);
letter-spacing: var(--desktop-product-card-price-discount-percent-letter-spacing);
font-weight: var(--desktop-product-card-price-discount-percent-font-weight);
text-transform: var(--desktop-product-card-price-discount-percent-text-case);
text-decoration: var(--desktop-product-card-price-discount-percent-text-decoration);
}
.product-card-price-strikethrough {
font-family: var(--desktop-product-card-price-strikethrough-font-family);
line-height: var(--desktop-product-card-price-strikethrough-line-height);
font-size: var(--desktop-product-card-price-strikethrough-font-size);
letter-spacing: var(--desktop-product-card-price-strikethrough-letter-spacing);
font-weight: var(--desktop-product-card-price-strikethrough-font-weight);
text-transform: var(--desktop-product-card-price-strikethrough-text-case);
text-decoration: var(--desktop-product-card-price-strikethrough-text-decoration);
}
.product-card-shade-picker-grid {
grid-template-columns: repeat(11, minmax(0, 1fr));
gap: var(--desktop-product-card-shade-chips-container-spacing);
margin-bottom: 1.5rem;
}
.shades_tabs_button_svg_class {
width: var(--desktop-carousel-previous-icon-width);
height: var(--desktop-carousel-next-icon-height);
}
.product-card-add-to-bag-button {
border-width: var(--desktop-button-container-primary-default-border);
border-color: var(--desktop-button-container-primary-default-border-color);
border-radius: var(--desktop-button-container-primary-default-border-radius);
color: var(--desktop-button-text-primary-default-fill);
font-family: var(--desktop-button-text-primary-default-font-family);
line-height: var(--desktop-button-text-primary-default-line-height);
font-size: var(--desktop-button-text-primary-default-font-size);
letter-spacing: var(--desktop-button-text-primary-default-letter-spacing);
font-weight: var(--desktop-button-text-primary-default-font-weight);
text-transform: var(--desktop-button-text-primary-default-text-case);
text-decoration: var(--desktop-button-text-primary-default-text-decoration);
width: auto;
margin-top: 1em;
}
.product-card-add-to-bag-button:disabled, .product-card-loading-button {
color: var(--desktop-product-card-button-add-to-cart-text-sold-out-fill);
font-family: var(--desktop-product-card-button-add-to-cart-text-sold-out-font-family);
line-height: var(--desktop-product-card-button-add-to-cart-text-sold-out-line-height);
font-size: var(--desktop-product-card-button-add-to-cart-text-sold-out-font-size);
letter-spacing: var(--desktop-product-card-button-add-to-cart-text-sold-out-letter-spacing);
font-weight: var(--desktop-product-card-button-add-to-cart-text-sold-out-font-weight);
text-transform: var(--desktop-product-card-button-add-to-cart-text-sold-out-text-case);
text-decoration: var(--desktop-product-card-button-add-to-cart-text-sold-out-text-decoration);
}
.product-card-loading-button {
width: auto;
margin-top: 1em;
}
.product-card-badge-text {
position: absolute;
top: 0.8125rem;
left: 0.75rem;
color: var(--desktop-product-card-badge-text-fill);
font-family: var(--desktop-product-card-badge-text-font-family);
line-height: var(--desktop-product-card-badge-text-line-height);
font-size: var(--desktop-product-card-badge-text-font-size);
letter-spacing: var(--desktop-product-card-badge-text-letter-spacing);
font-weight: var(--desktop-product-card-badge-text-font-weight);
text-transform: var(--desktop-product-card-badge-text-text-case);
text-decoration: var(--desktop-product-card-badge-text-text-decoration);
}
.product-section-title-container {
margin: 0 2rem 0.5rem;
}
.banner-image-container {
min-height: 135px;
}
.banner-image {
height: unset;
}
.banner-image-content {
color: var(--desktop-category-banner-category-description-fill);
left: var(--desktop-category-banner-container-padding-left);
right: var(--desktop-category-banner-container-padding-right);
bottom: var(--desktop-category-banner-container-padding-bottom);
}
.banner-image-content > * + * {
margin-top: 1rem;
}
.banner-category-title,
.banner-title {
font-family: var(--desktop-category-banner-category-title-font-family);
font-weight: var(--desktop-category-banner-category-title-font-weight);
font-size: var(--desktop-category-banner-category-title-font-size);
letter-spacing: var(--desktop-category-banner-category-title-letter-spacing);
line-height: var(--desktop-category-banner-category-title-line-height);
text-transform: var(--desktop-category-banner-category-title-text-case);
text-decoration: var(--desktop-category-banner-category-title-text-decoration);
color: var(--desktop-category-banner-category-title-fill);
}
.banner-category-subtitle,
.banner-subtitle {
font-family: var(--desktop-category-banner-category-description-font-family);
font-weight: var(--desktop-category-banner-category-description-font-weight);
font-size: var(--desktop-category-banner-category-description-font-size);
letter-spacing: var(--desktop-category-banner-category-description-letter-spacing);
line-height: var(--desktop-category-banner-category-description-line-height);
text-transform: var(--desktop-category-banner-category-description-text-case);
text-decoration: var(--desktop-category-banner-category-description-text-decoration);
color: var(--desktop-category-banner-category-description-fill);
}
.banner-inline-eyebrow {
font-family: var(--desktop-banner-inline-1-column-eyebrow-font-family);
font-weight: var(--desktop-banner-inline-1-column-eyebrow-font-weight);
font-size: var(--desktop-banner-inline-1-column-eyebrow-font-size);
line-height: var(--desktop-banner-inline-1-column-eyebrow-line-height);
letter-spacing: var(--desktop-banner-inline-1-column-eyebrow-letter-spacing);
text-transform: var(--desktop-banner-inline-1-column-eyebrow-text-case);
text-decoration: var(--desktop-banner-inline-1-column-eyebrow-text-decoration);
color: var(--desktop-banner-inline-1-column-eyebrow-fill);
}
.banner-inline-title {
font-family: var(--desktop-banner-inline-1-column-title-font-family);
font-weight: var(--desktop-banner-inline-1-column-title-font-weight);
font-size: var(--desktop-banner-inline-1-column-title-font-size);
line-height: var(--desktop-banner-inline-1-column-title-line-height);
letter-spacing: var(--desktop-banner-inline-1-column-title-letter-spacing);
text-transform: var(--desktop-banner-inline-1-column-title-text-case);
text-decoration: var(--desktop-banner-inline-1-column-title-text-decoration);
color: var(--desktop-banner-inline-1-column-title-fill);
}
.inline-tout {
position: absolute;
bottom: 0;
padding: 2rem;
}
.inline-tout > * + * {
margin-top: 1rem;
}
.inline-tout .banner-inline-eyebrow {
color: white;
}
.inline-tout .banner-inline-title {
color: white;
width: 100%;
}
.product-grid-no-filters {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-carousel-pincer-swiper {
margin-right: 12px;
margin-top: 0;
}
.product-carousel-container .product-carousel-pincer-swiper {
margin: 1rem 1.75rem;
}
.content-card-carousel-container .product-carousel-pincer-swiper {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.mobile-footer-container {
display: none;
}
.desktop-footer-container {
height: var(--desktop-footer-container-height);
display: block;
}
.desktop-footer-top {
background-color: var(--desktop-footer-top-fill);
grid-gap: var(--desktop-footer-top-spacing);
padding-top: var(--desktop-footer-top-padding-top);
padding-bottom: var(--desktop-footer-top-padding-bottom);
border-top-width: var(--desktop-footer-top-border-top);
border-top-color: var(--desktop-footer-top-border-color);
}
.desktop-footer-wrapper {
width: 100%;
display: flex;
column-gap: 59px;
justify-content: center;
}
.desktop-footer-bottom {
padding-top: var(--desktop-footer-bottom-padding-top);
padding-bottom: var(--desktop-footer-bottom-padding-bottom);
border-top-width: var(--desktop-footer-bottom-border-top);
border-top-color: var(--desktop-footer-bottom-border-color);
}
.desktop-footer-bottom-left {
grid-gap: var(--desktop-footer-bottom-left-spacing);
}
.desktop-footer-bottom-right {
grid-gap: var(--desktop-footer-bottom-right-spacing);
}
.desktop-footer-column {
display: flex;
flex-direction: column;
width: var(--desktop-footer-column-width);
grid-gap: var(--desktop-footer-column-spacing);
}
.desktop-footer-links-title {
font-family: var(--desktop-footer-links-title-font-family);
font-weight: var(--desktop-footer-links-title-font-weight);
font-size: var(--desktop-footer-links-title-font-size);
line-height: var(--desktop-footer-links-title-line-height);
letter-spacing: var(--desktop-footer-links-title-letter-spacing);
text-transform: var(--desktop-footer-links-title-text-case);
text-decoration: var(--desktop-footer-links-title-text-decoration);
color: var(--desktop-footer-links-title-fill);
}
.desktop-footer-links-container {
display: grid;
grid-gap: var(--desktop-footer-links-container-spacing);
}
.desktop-footer-link {
font-family: var(--desktop-footer-link-font-family);
font-weight: var(--desktop-footer-link-font-weight);
font-size: var(--desktop-footer-link-font-size);
line-height: var(--desktop-footer-link-line-height);
letter-spacing: var(--desktop-footer-link-letter-spacing);
text-transform: var(--desktop-footer-link-text-case);
text-decoration: var(--desktop-footer-link-text-decoration);
color: var(--desktop-footer-link-fill);
}
/* Bottom Footer Desktop; */
.footer-container {
height: var(--desktop-footer-container-height);
}
.accessibility-container {
display: flex;
align-items: center;
gap: var(--desktop-footer-accessibility-container-spacing);
}
.footer-bottom {
padding-top: var(--desktop-footer-bottom-padding-top);
padding-bottom: var(--desktop-footer-bottom-padding-bottom);
border-top-width: var(--desktop-footer-bottom-border-top);
border-top-color: var(--desktop-footer-bottom-border-color);
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: var(--desktop-footer-bottom-fill);
}
.footer-lang-selector-container {
flex-basis: 100%;
}
.select-language {
border-width: var(--desktop-dropdown-container-default-border);
border-radius: var(--desktop-dropdown-container-default-border-radius);
height: var(--desktop-dropdown-container-default-height);
padding-left: var(--desktop-dropdown-container-default-padding-left);
background-color: var(--desktop-dropdown-container-default-fill);
font-family: var(--desktop-dropdown-text-default-font-family);
font-weight: var(--desktop-dropdown-text-default-font-weight);
font-size: var(--desktop-dropdown-text-default-font-size);
line-height: var(--desktop-dropdown-text-default-line-height);
letter-spacing: var(--desktop-dropdown-text-default-letter-spacing);
text-transform: var(--desktop-dropdown-text-default-text-case);
text-decoration: var(--desktop-dropdown-text-default-text-decoration);
color: var(--desktop-dropdown-text-default-fill);
}
.multi-lang-dropdown-selector {
position: relative;
display: inline-block;
width: max-content;
}
.multi-lang-dropdown-selector-arrow {
position: absolute;
top: 50%;
right: 10px;
pointer-events: none;
transform: translateY(-50%);
}
.multi-lang-dropdown-selector-arrow-svg {
fill: currentColor;
width: 1rem;
height: 1rem;
}
.footer-bottom-left {
grid-gap: var(--desktop-footer-bottom-left-spacing);
display:flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0px 32px;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.footer-bottom-right {
grid-gap: var(--desktop-footer-bottom-right-spacing);
display:flex;
flex-direction: row;
padding: 0px 32px;
justify-content: space-between;
align-items: center;
}
.footer-logo {
width: var(--desktop-footer-logo-width);
height: var(--desktop-footer-logo-height);
fill: var(--desktop-footer-logo-fill);
pointer-events: none;
}
.footer-social-icons-container {
grid-gap: var(--desktop-footer-social-icons-container-spacing);
display:flex;
flex-direction: row;
}
.footer-copyright-text {
font-family: var(--desktop-footer-copyright-text-font-family);
font-weight: var(--desktop-footer-copyright-text-font-weight);
font-size: var(--desktop-footer-copyright-text-font-size);
line-height: var(--desktop-footer-copyright-text-line-height);
letter-spacing: var(--desktop-footer-copyright-text-letter-spacing);
text-transform: var(--desktop-footer-copyright-text-text-case);
text-decoration: var(--desktop-footer-copyright-text-text-decoration);
color: var(--desktop-footer-copyright-text-fill);
}
.desktop-footer-link {
font-family: var(--desktop-footer-link-font-family);
font-weight: var(--desktop-footer-link-font-weight);
font-size: var(--desktop-footer-link-font-size);
line-height: var(--desktop-footer-link-line-height);
letter-spacing: var(--desktop-footer-link-letter-spacing);
text-transform: var(--desktop-footer-link-text-case);
text-decoration: var(--desktop-footer-link-text-decoration);
color: var(--desktop-footer-link-fill);
}
.desktop-footer-link button {
text-transform: var(--desktop-footer-link-text-case);
}
.desktop-footer-link:hover {
color: var(--desktop-footer-links-title-fill);
}
.footer-social-icon {
width: var(--desktop-footer-social-icon-width);
height: var(--desktop-footer-social-icon-height);
fill: var(--desktop-footer-social-icon-fill);
}
.footer-accessibility-text {
font-family: var(--desktop-footer-accessibility-text-font-family);
font-weight: var(--desktop-footer-accessibility-text-font-weight);
font-size: var(--desktop-footer-accessibility-text-font-size);
line-height: var(--desktop-footer-accessibility-text-line-height);
letter-spacing: var(--desktop-footer-accessibility-text-letter-spacing);
text-transform: var(--desktop-footer-accessibility-text-text-case);
text-decoration: var(--desktop-footer-accessibility-text-text-decoration);
color: var(--desktop-footer-accessibility-text-fill);
}
.footer-accessibility-icon {
width: var(--desktop-footer-accessibility-icon-width);
height: var(--desktop-footer-accessibility-icon-height);
fill: var(--desktop-footer-accessibility-icon-fill);
}
.footer-top {
grid-gap: var(--desktop-footer-top-spacing);
padding-top: var(--desktop-footer-top-padding-top);
padding-bottom: var(--desktop-footer-top-padding-bottom);
border-top-width: var(--desktop-footer-top-border-top);
border-top-color: var(--desktop-footer-top-border-color);
}
.footer-column {
width: var(--desktop-footer-column-width);
grid-gap: var(--desktop-footer-column-spacing);
}
.footer-links-title {
font-family: var(--desktop-footer-links-title-font-family);
font-weight: var(--desktop-footer-links-title-font-weight);
font-size: var(--desktop-footer-links-title-font-size);
line-height: var(--desktop-footer-links-title-line-height);
letter-spacing: var(--desktop-footer-links-title-letter-spacing);
text-transform: var(--desktop-footer-links-title-text-case);
text-decoration: var(--desktop-footer-links-title-text-decoration);
color: var(--desktop-footer-links-title-fill);
}
.footer-links-container {
grid-gap: var(--desktop-footer-links-container-spacing);
}
.footer-link {
margin-top: 1em;
}
.footer-link:hover {
text-decoration: underline;
}
.footer-link {
font-family: var(--desktop-footer-link-font-family);
font-weight: var(--desktop-footer-link-font-weight);
font-size: var(--desktop-footer-link-font-size);
line-height: var(--desktop-footer-link-line-height);
letter-spacing: var(--desktop-footer-link-letter-spacing);
text-transform: var(--desktop-footer-link-text-case);
text-decoration: var(--desktop-footer-link-text-decoration);
color: var(--desktop-footer-link-fill);
}
.footer-link:hover {
font-weight: var(--desktop-footer-links-title-font-weight);
}
.cart-badge-number {
background: #e3e3e3;
position: absolute;
width: 10px;
height: 10px;
border-radius: 9999px;
padding: 0.25rem;
font-size: 9px;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
}
.breadcrumbs-wrapper-class {
margin: auto;
max-width: 1536px;
}
.product_details-breadcrumbs-container-class {
display: flex;
padding: 2rem 1rem 0rem 2rem;
margin-bottom: 2.5rem;
}
.product-container {
display: flex;
margin: auto;
max-width: 1536px;
gap: 48px;
padding: 0 2rem;
}
.product-grid-no-filters {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-grid-container {
gap: var(--desktop-product-grid-container-spacing);
padding-bottom: var(--desktop-product-grid-container-padding-bottom);
}
.product-filter-container {
min-width: var(--desktop-filter-container-width);
max-width: var(--desktop-filter-container-width);
}
.product-grid-breadcrumbs {
width: 50%
}
.product-sort-container {
height: 72px;
width: 100%;
}
.breadcrumbs-container-class {
padding: 1.5rem 2rem 0 2rem;
}
.breadcrumbs-link-class {
font-family: var(--desktop-breadcrumb-page-name-font-family);
font-weight: var(--desktop-breadcrumb-page-name-font-weight);
color: var(--desktop-breadcrumb-page-name-fill);
text-transform: var(--desktop-breadcrumb-page-name-text-case);
font-size: var(--desktop-breadcrumb-page-name-font-size);
line-height: var(--desktop-breadcrumb-page-name-line-height);
letter-spacing: var(--desktop-breadcrumb-page-name-letter-spacing);
text-decoration: var(--desktop-breadcrumb-page-name-text-decoration);
}
a.breadcrumbs-link-class:hover {
text-decoration: underline;
}
.breadcrumbs-divider-class {
margin: 0rem 0.25rem;
color: var(--desktop-breadcrumb-separator-fill);
font-family: var(--desktop-breadcrumb-separator-font-family);
font-weight: var(--desktop-breadcrumb-separator-font-weight);
color: var(--desktop-breadcrumb-separator-fill);
text-transform: var(--desktop-breadcrumb-separator-text-case);
font-size: var(--desktop-breadcrumb-separator-font-size);
line-height: var(--desktop-breadcrumb-separator-line-height);
letter-spacing: var(--desktop-breadcrumb-separator-letter-spacing);
text-decoration: var(--desktop-breadcrumb-separator-text-decoration);
}
.last-breadcrumb-class {
color: var(--desktop-breadcrumb-page-name-active-fill);
font-family: var(--desktop-breadcrumb-page-name-active-font-family);
font-weight: var(--desktop-breadcrumb-page-name-active-font-weight);
color: var(--desktop-breadcrumb-page-name-active-fill);
text-transform: var(--desktop-breadcrumb-page-name-active-text-case);
font-size: var(--desktop-breadcrumb-page-name-active-font-size);
line-height: var(--desktop-breadcrumb-page-name-active-line-height);
letter-spacing: var(--desktop-breadcrumb-page-name-active-letter-spacing);
text-decoration: var(--desktop-breadcrumb-page-name-active-text-decoration);
}
.product-card {
padding-bottom: 16px;
}
.product-card-price-container {
margin-top: var(--desktop-product-card-price-container-spacing);
}
.product-card-size-chips-form {
margin-top: var(--desktop-product-card-size-chips-container-padding-top);
}
.product-card-size-chip {
height: var(--desktop-product-card-size-chip-container-default-height);
background-color: var(--desktop-product-card-size-chip-container-default-fill);
border-width: var(--desktop-product-card-size-chip-container-default-border);
border-color: var(--desktop-product-card-size-chip-container-default-border-color);
border-radius: var(--desktop-product-card-size-chip-container-default-border-radius);
padding-top: var(--desktop-product-card-size-chip-container-default-padding-top);
padding-inline-end: var(--desktop-product-card-size-chip-container-default-padding-right);
padding-bottom: var(--desktop-product-card-size-chip-container-default-padding-bottom);
padding-inline-start: var(--desktop-product-card-size-chip-container-default-padding-left);
margin-inline-end: var(--desktop-product-card-size-chips-container-spacing);
margin-inline-start: 0;
}
.product-card-size-chips-container li:last-child label {
margin-inline-end: 0;
}
.product-card-size-chips-container li:first-child label {
margin-inline-start: 0;
}
.product-card-size-chip-text {
color: var(--desktop-product-card-size-chip-text-default-fill);
font-family: var(--desktop-product-card-size-chip-text-default-font-family);
line-height: var(--desktop-product-card-size-chip-text-default-line-height);
font-size: var(--desktop-product-card-size-chip-text-default-font-size);
letter-spacing: var(--desktop-product-card-size-chip-text-default-letter-spacing);
font-weight: var(--desktop-product-card-size-chip-text-default-font-weight);
text-transform: var(--desktop-product-card-size-chip-text-default-text-case);
text-decoration: var(--desktop-product-card-size-chip-text-default-text-decoration);
white-space: nowrap;
}
.product-card-shade-swatches ul {
height: var(--desktop-product-card-shade-chip-height);
gap: var(--desktop-product-card-sku-carousel-container-spacing);
}
.product-card-shade-nav-button {
left: 0.3125rem;
}
.product-card-shade-nav-button:last-of-type {
right: 0.3125rem;
left: auto;
}
.product-details-description {
color: var(--desktop-product-details-product-description-fill);
font-family: var(--desktop-product-details-product-description-font-family);
line-height: var(--desktop-product-details-product-description-line-height);
font-size: var(--desktop-product-details-product-description-font-size);
letter-spacing: var(--desktop-product-details-product-description-letter-spacing);
font-weight: var(--desktop-product-details-product-description-font-weight);
text-transform: var(--desktop-product-details-product-description-text-case);
text-decoration: var(--desktop-product-details-product-description-text-decoration);
margin-top: 0.75rem;
}
.product-details {
display: grid;
align-items: start;
justify-items: start;
align-content: start;
justify-content: center;
grid-template-columns: auto 21.5625rem;
grid-template-rows: 0.05fr 0.95fr;
max-width: 71.3125rem;
column-gap: 3.75rem;
margin: 0 auto;
padding-bottom: 5rem;
}
.product-details-badge-text {
top: 0.9rem;
left: 0.838rem;
color: var(--desktop-product-details-image-badge-text-fill);
font-family: var(--desktop-product-details-image-badge-text-font-family);
font-weight: var(--desktop-product-details-image-badge-text-font-weight);
text-decoration: var(--desktop-product-details-image-badge-text-text-decoration);
text-transform: var(--desktop-product-details-image-badge-text-text-case);
letter-spacing: var(--desktop-product-details-image-badge-text-letter-spacing);
font-size: var(--desktop-product-details-image-badge-text-font-size);
line-height: var(--desktop-product-details-image-badge-text-line-height);
}
.product-attributes-primary {
order: 1;
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 1;
margin: 0;
}
.product-details-title {
color: var(--desktop-product-details-title-text-fill);
font-family: var(--desktop-product-details-title-text-font-family);
line-height: var(--desktop-product-details-title-text-line-height);
font-size: var(--desktop-product-details-title-text-font-size);
letter-spacing: var(--desktop-product-details-title-text-letter-spacing);
text-transform: var(--desktop-product-details-title-text-text-case);
font-weight: var(--desktop-product-details-title-text-font-weight);
text-decoration: var(--desktop-product-details-title-text-text-decoration);
margin-top: 0;
}
.product-details-add-to-bag-button {
background-color: var(--desktop-button-container-primary-default-fill);
border-width: var(--desktop-button-container-primary-default-border);
border-color: var(--desktop-button-container-primary-default-border-color);
border-radius: var(--desktop-button-container-primary-default-border-radius);
flex: 1;
padding-top: var(--desktop-button-container-primary-default-padding-top);
padding-right: var(--desktop-button-container-primary-default-padding-right);
padding-bottom: var(--desktop-button-container-primary-default-padding-bottom);
padding-left: var(--desktop-button-container-primary-default-padding-left);
color: var(--desktop-button-text-primary-default-fill);
font-family: var(--desktop-button-text-primary-default-font-family);
font-size: var(--desktop-button-text-primary-default-font-size);
letter-spacing: var(--desktop-button-text-primary-default-letter-spacing);
line-height: var(--desktop-button-text-primary-default-line-height);
font-weight: var(--desktop-button-text-primary-default-font-weight);
text-transform: var(--desktop-button-text-primary-default-text-case);
text-decoration: var(--desktop-button-text-primary-default-text-decoration);
width: 15.375rem;
}
.product-details-add-to-bag-button:disabled,
.product-details-loading-button {
background-color: var(--desktop-button-container-primary-disabled-fill);
border-width: var(--desktop-button-container-primary-disabled-border);
border-color: var(--desktop-button-container-primary-disabled-border-color);
flex: 1;
padding-top: var(--desktop-button-container-primary-disabled-padding-top);
padding-right: var(--desktop-button-container-primary-disabled-padding-right);
padding-bottom: var(--desktop-button-container-primary-disabled-padding-bottom);
padding-left: var(--desktop-button-container-primary-disabled-padding-left);
color: var(--desktop-button-text-primary-disabled-fill);
font-family: var(--desktop-button-text-primary-disabled-font-family);
font-size: var(--desktop-button-text-primary-disabled-font-size);
letter-spacing: var(--desktop-button-text-primary-disabled-letter-spacing);
line-height: var(--desktop-button-text-primary-disabled-line-height);
font-weight: var(--desktop-button-text-primary-disabled-font-weight);
text-transform: var(--desktop-button-text-primary-disabled-text-case);
text-decoration: var(--desktop-button-text-primary-disabled-text-decoration);
width: 100%;
}
.product-details-carousel {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: span 2;
}
.product-details-carousel .swiper-slide img {
background: var(--desktop-product-card-image-fill)
}
.product-details-carousel-pincer-swiper .swiper-pagination {
display: none;
}
.product-details-carousel-pincer-swiper .pincer-button-prev,
.product-details-carousel-pincer-swiper .pincer-button-next {
opacity: 0;
transition: opacity 200ms;
}
.product-details-carousel-pincer-swiper:hover .pincer-button-prev,
.product-details-carousel-pincer-swiper:hover .pincer-button-next {
opacity: 1;
}
.product-details-size-chip {
border-width: var(--desktop-product-details-size-chip-default-border);
border-color: var(--desktop-product-details-size-chip-default-border-color);
border-radius: var(--desktop-product-details-size-chip-default-border-radius);
}
.product-details-size-chip.checked {
border-width: var(--desktop-product-details-size-chip-active-border);
border-color: var(--desktop-product-details-size-chip-active-border-color);
}
.product-details-size-chip-label {
gap: var(--desktop-product-details-size-chip-default-spacing);
}
.product-details-size-chip-text {
color: var(--desktop-product-details-size-chip-size-fill);
font-family: var(--desktop-product-details-size-chip-size-font-family);
font-weight: var(--desktop-product-details-size-chip-size-font-weight);
line-height: var(--desktop-product-details-size-chip-size-line-height);
font-size: var(--desktop-product-details-size-chip-size-font-size);
text-transform: var(--desktop-product-details-size-chip-size-text-case);
text-decoration: var(--desktop-product-details-size-chip-size-text-decoration);
letter-spacing: var(--desktop-product-details-size-chip-size-letter-spacing);
}
.product-details-size-chip-price {
color: var(--desktop-product-details-size-chip-price-fill);
font-family: var(--desktop-product-details-size-chip-price-font-family);
font-weight: var(--desktop-product-details-size-chip-price-font-weight);
line-height: var(--desktop-product-details-size-chip-price-line-height);
font-size: var(--desktop-product-details-size-chip-price-font-size);
text-transform: var(--desktop-product-details-size-chip-price-text-case);
text-decoration: var(--desktop-product-details-size-chip-price-text-decoration);
letter-spacing: var(--desktop-product-details-size-chip-price-letter-spacing);
}
.product-details-price {
padding-top: 1.5rem;
}
.product-card-add-to-bag {
margin-top: 0;
}
.product-details-price-per-unit, .variant-size-container {
font-family: var(--desktop-product-details-price-price-per-unit-font-family);
font-size: var(--desktop-product-details-price-price-per-unit-font-size);
font-weight: var(--desktop-product-details-price-price-per-unit-font-weight);
letter-spacing: var(--desktop-product-details-price-price-per-unit-letter-spacing);
text-transform: var(--desktop-product-details-price-price-per-unit-text-case);
text-decoration: var(--desktop-product-details-price-price-per-unit-text-decoration);
color: var(--desktop-product-details-price-price-per-unit-fill);
margin-left: var(--spacing-1);
}
.product-details-add-to-bag {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.product-details-price {
padding-top: 1.5rem;
}
.product-details-price-discounted {
font-family: var(--desktop-product-details-price-discounted-font-family);
line-height: var(--desktop-product-details-price-discounted-line-height);
font-size: var(--desktop-product-details-price-discounted-font-size);
letter-spacing: var(--desktop-product-details-price-discounted-letter-spacing);
font-weight: var(--desktop-product-details-price-discounted-font-weight);
text-transform: var(--desktop-product-details-price-discounted-text-case);
text-decoration: var(--desktop-product-details-price-discounted-text-decoration);
}
.product-details-price-strikethrough {
font-family: var(--desktop-product-details-price-strikethrough-font-family);
font-size: var(--desktop-product-details-price-strikethrough-font-size);
font-weight: var(--desktop-product-details-price-strikethrough-font-weight);
letter-spacing: var(--desktop-product-details-price-strikethrough-letter-spacing);
line-height: var(--desktop-product-details-price-strikethrough-line-height);
text-decoration: var(--desktop-product-details-price-strikethrough-text-decoration);
text-transform: var(--desktop-product-details-price-strikethrough-text-case);
}
.product-details-price-recommended {
font-family: var(--desktop-product-details-price-recommended-font-family);
line-height: var(--desktop-product-details-price-recommended-line-height);
font-size: var(--desktop-product-details-price-recommended-font-size);
letter-spacing: var(--desktop-product-details-price-recommended-letter-spacing);
font-weight: var(--desktop-product-details-price-recommended-font-weight);
text-transform: var(--desktop-product-details-price-recommended-text-case);
text-decoration: var(--desktop-product-details-price-recommended-text-decoration);
}
.product-details-add-to-bag {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.video-section-video {
height: auto;
}
.video-section-footer {
width: var(--desktop-video-section-text-container-width);
padding-top: var(--desktop-video-section-text-container-padding-top);
padding-right: var(--desktop-video-section-text-container-padding-right);
padding-bottom: var(--desktop-video-section-text-container-padding-bottom);
padding-left: var(--desktop-video-section-text-container-padding-left);
gap: var(--desktop-video-section-text-container-spacing);
}
.video-section-footer-heading {
color: var(--desktop-video-section-text-title-fill);
font-family: var(--desktop-video-section-text-title-font-family);
line-height: var(--desktop-video-section-text-title-line-height);
font-size: var(--desktop-video-section-text-title-font-size);
letter-spacing: var(--desktop-video-section-text-title-letter-spacing);
text-transform: var(--desktop-video-section-text-title-text-case);
font-weight: var(--desktop-video-section-text-title-font-weight);
text-decoration: var(--desktop-video-section-text-title-text-decoration);
}
.video-section-footer-subheading {
color: var(--desktop-video-section-text-body-fill);
font-family: var(--desktop-video-section-text-body-font-family);
line-height: var(--desktop-video-section-text-body-line-height);
font-size: var(--desktop-video-section-text-body-font-size);
letter-spacing: var(--desktop-video-section-text-body-letter-spacing);
text-transform: var(--desktop-video-section-text-body-text-case);
font-weight: var(--desktop-video-section-text-body-font-weight);
text-decoration: var(--desktop-video-section-text-body-text-decoration);
}
.video-section-controls-icon {
height: 1rem;
width: 1rem;
}
.product-attributes-secondary {
order: 2;
grid-column-start: 2;
margin: 0;
width: var(--desktop-product-details-accordions-container-width);
}
.card-section-container {
max-width: 1140px;
margin: 2rem auto 4rem;
}
.card-section-split {
align-items: stretch;
display: flex;
overflow: hidden;
}
.card-section-split video {
object-fit: cover;
height: 100%;
}
.card-section-split > * {
width: 50%;
}
.card-section-split-image-container-end {
order: 2
}
.card-section-split-image-container picture,
.card-section-split-image-container-end picture {
display: flex;
height: 100%;
}
.card-section-split-text {
width: var(--desktop-image-section-1-1-text-half-width);
padding-top: 32px;
padding-right: var(--desktop-image-section-1-1-text-half-padding-right);
padding-bottom: 32px;
padding-left: var(--desktop-image-section-1-1-text-half-padding-left);
display: flex;
flex-direction: column;
justify-content: center;
}
.card-section-split-text-headline {
font-family: var(--desktop-font-heading-4xl-font-family);
line-height: var(--desktop-font-heading-4xl-line-height);
font-size: var(--desktop-font-heading-4xl-font-size);
letter-spacing: var(--desktop-font-heading-4xl-letter-spacing);
font-weight: var(--desktop-font-heading-4xl-font-weight);
text-transform: var(--desktop-font-heading-4xl-text-case);
text-decoration: var(--desktop-font-heading-4xl-text-decoration);
}
.rich-text {
font-family: var(--desktop-rich-text-body-normal-font-family);
line-height: var(--desktop-rich-text-body-normal-line-height);
font-size: var(--desktop-rich-text-body-normal-font-size);
letter-spacing: var(--desktop-rich-text-body-normal-letter-spacing);
font-weight: var(--desktop-rich-text-body-normal-font-weight);
text-transform: var(--desktop-rich-text-body-normal-text-case);
text-decoration: var(--desktop-rich-text-body-normal-text-decoration);
}
.rich-text h1 {
font-family: var(--desktop-rich-text-h1-font-family);
line-height: var(--desktop-rich-text-h1-line-height);
font-size: var(--desktop-rich-text-h1-font-size);
letter-spacing: var(--desktop-rich-text-h1-letter-spacing);
font-weight: var(--desktop-rich-text-h1-font-weight);
text-transform: var(--desktop-rich-text-h1-text-case);
text-decoration: var(--desktop-rich-text-h1-text-decoration);
margin-top: 1.5rem;
}
.rich-text h2 {
font-family: var(--desktop-rich-text-h2-font-family);
line-height: var(--desktop-rich-text-h2-line-height);
font-size: var(--desktop-rich-text-h2-font-size);
letter-spacing: var(--desktop-rich-text-h2-letter-spacing);
font-weight: var(--desktop-rich-text-h2-font-weight);
text-transform: var(--desktop-rich-text-h2-text-case);
text-decoration: var(--desktop-rich-text-h2-text-decoration);
margin-top: 1.5rem;
}
.rich-text h3 {
font-family: var(--desktop-rich-text-h3-font-family);
line-height: var(--desktop-rich-text-h3-line-height);
font-size: var(--desktop-rich-text-h3-font-size);
letter-spacing: var(--desktop-rich-text-h3-letter-spacing);
font-weight: var(--desktop-rich-text-h3-font-weight);
text-transform: var(--desktop-rich-text-h3-text-case);
text-decoration: var(--desktop-rich-text-h3-text-decoration);
margin-top: 1.5rem;
}
.rich-text h4 {
font-family: var(--desktop-rich-text-h4-font-family);
line-height: var(--desktop-rich-text-h4-line-height);
font-size: var(--desktop-rich-text-h4-font-size);
letter-spacing: var(--desktop-rich-text-h4-letter-spacing);
font-weight: var(--desktop-rich-text-h4-font-weight);
text-transform: var(--desktop-rich-text-h4-text-case);
text-decoration: var(--desktop-rich-text-h4-text-decoration);
margin-top: 1.5rem;
}
.rich-text h5 {
font-family: var(--desktop-rich-text-h5-font-family);
line-height: var(--desktop-rich-text-h5-line-height);
font-size: var(--desktop-rich-text-h5-font-size);
letter-spacing: var(--desktop-rich-text-h5-letter-spacing);
font-weight: var(--desktop-rich-text-h5-font-weight);
text-transform: var(--desktop-rich-text-h5-text-case);
text-decoration: var(--desktop-rich-text-h5-text-decoration);
margin-top: 1.5rem;
}
.rich-text h6 {
font-family: var(--desktop-rich-text-h6-font-family);
line-height: var(--desktop-rich-text-h6-line-height);
font-size: var(--desktop-rich-text-h6-font-size);
letter-spacing: var(--desktop-rich-text-h6-letter-spacing);
font-weight: var(--desktop-rich-text-h6-font-weight);
text-transform: var(--desktop-rich-text-h6-text-case);
text-decoration: var(--desktop-rich-text-h6-text-decoration);
margin-top: 1.5rem;
}
.swiper {
margin-left: 0;
}
.swiper-thumbnail .swiper-wrapper {
height: auto;
order: 2;
}
.swiper-thumbnail-button-prev,
.swiper-thumbnail-button-next {
display: block;
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
margin: 0;
height: auto;
width: auto;
align-self: center;
transform: rotate(90deg);
color: black;
}
.swiper-thumbnail-button-prev::after,
.swiper-thumbnail-button-next::after {
font-size: 1rem;
}
.swiper-thumbnail-button-prev {
margin-bottom: 4px;
}
.swiper-thumbnail-button-next {
margin-top: 4px;
}
.swiper-thumbnail-button-prev svg, .swiper-thumbnail-button-next svg {
width: 18px;
}
.swiper-thumbnail-button-prev svg {
transform: rotate(-180deg);
}
.swiper-thumbnail-button-prev::after, .swiper-thumbnail-button-next::after {
content: initial;
}
.product-details-carousel-thumbnails {
display: flex;
flex-direction: column;
}
.pincer-swiper.swiper-thumbnail {
display: flex !important;
flex-direction: column;
flex-shrink: 0;
overflow: hidden;
max-height: 31.25rem;
}
.product-details-carousel-thumbnails .swiper-slide {
margin-bottom: .25rem;
cursor: pointer;
}
.product-details-carousel-thumbnails .swiper-slide img {
object-fit: cover;
object-position: bottom;
aspect-ratio: 1;
}
.product-details-carousel {
width: 35rem;
}
.pincer-swiper.swiper-thumbnail {
display: none;
width: 6rem;
}
.product-details-carousel-pincer-swiper {
width: 25.25rem;
margin-left: 3.75rem;
margin-top: 0;
}
.product-details-carousel-pincer-swiper .swiper-button-prev,
.product-details-carousel-pincer-swiper .swiper-button-next {
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
}
.product-details-carousel-pincer-swiper .swiper-button-prev {
left: -.3rem;
padding-left: 8px;
}
.product-details-carousel-pincer-swiper .swiper-button-next {
right: -.15rem;
padding-right: 8px;
}
.product-card-details-panel {
height: 100%;
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.desktop-header-secondary-links-container {
display: flex;
align-items: center;
justify-content: end;
column-gap: 1.25rem;
/* Support Safari 15.2 or lower */
-webkit-justify-content: flex-end;
}
.header-secondary-links-icon {
width: var(--desktop-header-secondary-link-icon-width);
height: var(--desktop-header-secondary-link-icon-height);
}
.header-search-text {
color: var(--desktop-header-search-text-fill);
font-family: var(--desktop-header-search-text-font-family);
font-weight: var(--desktop-header-search-text-font-weight);
font-size: var(--desktop-header-search-text-font-size);
line-height: var(--desktop-header-search-text-line-height);
letter-spacing: var(--desktop-header-search-text-letter-spacing);
text-transform: var(--desktop-header-search-text-text-case);
text-decoration: var(--desktop-header-search-text-text-decoration);
}
.header-search-icon {
width: var(--desktop-header-search-icon-width);
height: var(--desktop-header-search-icon-height);
fill: var(--desktop-header-search-icon-fill);
}
.search-landing-container {
max-width: 1536px;
margin: auto;
}
.search-landing-container-no-results {
gap: var(--desktop-search-results-page-container-no-results-spacing);
max-width: var(--desktop-search-results-page-container-no-results-max-width);
margin: auto;
padding-left: 0;
padding-right: 0;
}
.search-landing-heading-container {
padding-top: var(--desktop-search-results-page-heading-container-default-padding-top);
padding-right: var(--desktop-search-results-page-heading-container-default-heading-padding-right);
padding-bottom: var(--desktop-search-results-page-heading-container-default-padding-bottom);
padding-left: var(--desktop-search-results-page-heading-container-default-padding-left);
}
.search-landing-heading-container-no-results {
padding-top: var(--desktop-search-results-page-heading-container-default-padding-top);
padding-right: 0;
padding-bottom: var(--desktop-search-results-page-heading-container-default-padding-bottom);
padding-left: 0;
}
.search-landing-heading-headline {
color: var(--desktop-search-results-page-heading-title-fill);
font-family: var(--desktop-search-results-page-heading-title-font-family);
line-height: var(--desktop-search-results-page-heading-title-line-height);
font-size: var(--desktop-search-results-page-heading-title-font-size);
letter-spacing: var(--desktop-search-results-page-heading-title-letter-spacing);
text-transform: var(--desktop-search-results-page-heading-title-text-case);
font-weight: var(--desktop-search-results-page-heading-title-font-weight);
text-decoration: var(--desktop-search-results-page-heading-title-text-decoration);
}
.search-landing-heading-help {
color: var(--desktop-search-results-page-heading-text-fill);
font-family: var(--desktop-search-results-page-heading-text-font-family);
font-weight: var(--desktop-search-results-page-heading-text-font-weight);
line-height: var(--desktop-search-results-page-heading-text-line-height);
font-size: var(--desktop-search-results-page-heading-text-font-size);
text-transform: var(--desktop-search-results-page-heading-text-text-case);
text-decoration: var(--desktop-search-results-page-heading-text-text-decoration);
letter-spacing: var(--desktop-search-results-page-heading-text-letter-spacing);
}
.search-landing-heading-correct {
font-family: var(--font-family-primary);
font-size: 13px;
font-style: normal;
font-weight: 325;
line-height: 16px; /* 123.077% */
letter-spacing: -0.4px;
}
.search-landing-products-headline {
color: var(--desktop-search-results-page-product-grid-title-fill);
font-family: var(--desktop-search-results-page-product-grid-title-font-family);
line-height: var(--desktop-search-results-page-product-grid-title-line-height);
font-size: var(--desktop-search-results-page-product-grid-title-font-size);
letter-spacing: var(--desktop-search-results-page-product-grid-title-letter-spacing);
text-transform: var(--desktop-search-results-page-product-grid-title-text-case);
font-weight: var(--desktop-search-results-page-product-grid-title-font-weight);
text-decoration: var(--desktop-search-results-page-product-grid-title-text-decoration);
padding-left: 0;
}
.sort-select {
font-family: var(--desktop-product-grid-sort-by-dropdown-text-font-family);
line-height: var(--desktop-product-grid-sort-by-dropdown-text-line-height);
font-size: var(--desktop-product-grid-sort-by-dropdown-text-font-size);
letter-spacing: var(--desktop-product-grid-sort-by-dropdown-text-letter-spacing);
text-transform: var(--desktop-product-grid-sort-by-dropdown-text-text-case);
font-weight: var(--desktop-product-grid-sort-by-dropdown-text-font-weight);
text-decoration: var(--desktop-product-grid-sort-by-dropdown-text-text-decoration);
color: var(--desktop-product-grid-sort-by-dropdown-text-fill);
background-color: var(--desktop-product-grid-sort-by-dropdown-container-fill);
border-width: var(--desktop-product-grid-sort-by-dropdown-container-border);
border-radius: var(--desktop-product-grid-sort-by-dropdown-container-border-radius);
border-color: var(--desktop-product-grid-sort-by-dropdown-container-border-color);
padding-left: var(--desktop-product-grid-sort-by-dropdown-container-padding-left);
height: var(--desktop-product-grid-sort-by-dropdown-container-height);
}
.selected-filters-container {
display: flex;
padding: 0;
gap: 16px;
}
.banner-no-img-container {
padding-top: var(--desktop-category-text-banner-container-padding-top);
padding-right: var(--desktop-category-text-banner-container-padding-right);
padding-bottom: var(--desktop-category-text-banner-container-padding-bottom);
padding-left: var(--desktop-category-text-banner-container-padding-left);
}
.banner-no-img-title {
font-family: var(--desktop-category-text-banner-category-title-font-family);
font-weight: var(--desktop-category-text-banner-category-title-font-weight);
font-size: var(--desktop-category-text-banner-category-title-font-size);
line-height: var(--desktop-category-text-banner-category-title-line-height);
letter-spacing: var(--desktop-category-text-banner-category-title-letter-spacing);
text-transform: var(--desktop-category-text-banner-category-title-text-case);
text-decoration: var(--desktop-category-text-banner-category-title-text-decoration);
color: var(--desktop-category-text-banner-category-title-fill);
}
.banner-no-img-subtitle {
font-family: var(--desktop-category-text-banner-category-description-font-family);
font-weight: var(--desktop-category-text-banner-category-description-font-weight);
font-size: var(--desktop-category-text-banner-category-description-font-size);
line-height: var(--desktop-category-text-banner-category-description-line-height);
letter-spacing: var(--desktop-category-text-banner-category-description-letter-spacing);
text-transform: var(--desktop-category-text-banner-category-description-text-case);
text-decoration: var(--desktop-category-text-banner-category-description-text-decoration);
color: var(--desktop-category-text-banner-category-description-fill);
width: 800px;
padding: 30px 0 0;
}
.banner-no-img-subtitle a {
text-decoration: var(--font-text-decoration-underline);
}
.filter-container {
width: var(--desktop-filter-container-width);
background-color: inherit;
padding-right: 0;
padding-left: 0;
display: inline;
position: relative;
overflow-y: hidden;
z-index: auto;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
.filter-heading {
padding-top: var(--desktop-filter-heading-padding-top);
padding-bottom: var(--desktop-filter-heading-padding-bottom);
}
.filter-clear-all {
display: inline;
font-family: var(--desktop-filter-clear-all-font-family);
font-size: var(--desktop-filter-clear-all-font-size);
letter-spacing: var(--desktop-filter-clear-all-letter-spacing);
line-height: var(--desktop-filter-clear-all-line-height);
color: var(--desktop-filter-clear-all-fill);
font-weight: var(--desktop-filter-clear-all-font-weight);
text-transform: var(--desktop-filter-clear-all-text-case);
text-decoration-line: var(--desktop-filter-clear-all-text-decoration);
}
.filter-close-overlay {
display: none;
}
.filter-skus-count {
font-family: var(--desktop-filter-skus-count-font-family);
font-weight: var(--desktop-filter-skus-count-font-weight);
font-size: var(--desktop-filter-skus-count-font-size);
line-height: var(--desktop-filter-skus-count-line-height);
letter-spacing: var(--desktop-filter-skus-count-letter-spacing);
text-transform: var(--desktop-filter-skus-count-text-case);
text-decoration: var(--desktop-filter-skus-count-text-decoration);
color: var(--desktop-filter-skus-count-fill)
}
.filter-category {
grid-gap: var(--desktop-filter-category-spacing);
border-top: 1px solid;
border-color: var(--desktop-accordion-container-border-color);
}
.filter-categories {
min-height: auto;
height: fit-content;
overflow-y: auto;
}
.filter-categories::-webkit-scrollbar-thumb {
background-color: #e5e5e5;
border-radius: 32px;
}
.filter-categories::-webkit-scrollbar {
overflow: hidden;
width: 4px;
}
.filter-category-title {
padding-top: var(--desktop-filter-category-title-padding-top);
padding-bottom: var(--desktop-filter-category-title-padding-bottom);
}
.filter-category-title-icon {
width: var(--desktop-filter-category-title-icon-width);
height: var(--desktop-filter-category-title-icon-height);
fill: var(--desktop-filter-category-title-icon-fill);
}
.filter-items-container {
display: flex;
flex-direction: column;
gap: var(--desktop-filter-items-container-spacing);
padding-bottom: var(--desktop-filter-items-container-padding-bottom);
}
.filter-category-item {
display: flex;
align-items: center;
width: 100%;
gap: var(--desktop-filter-category-item-spacing);
}
.filter-category-item-checkbox-default {
height: var(--desktop-filter-category-item-checkbox-default-height);
width: var(--desktop-filter-category-item-checkbox-default-width);
background-color: var(--desktop-filter-category-item-checkbox-default-fill);
border-width: var(--desktop-filter-category-item-checkbox-default-border);
border-style: solid;
border-color: var(--desktop-filter-category-item-checkbox-default-border-color);
border-radius: var(--desktop-filter-category-item-checkbox-default-border-radius);
}
button:disabled > span.filter-category-item-checkbox-default {
height: var(--desktop-filter-category-item-checkbox-disabled-height);
width: var(--desktop-filter-category-item-checkbox-disabled-width);
background-color: var(--desktop-filter-category-item-checkbox-disabled-fill);
border-width: var(--desktop-filter-category-item-checkbox-disabled-border);
border-style: solid;
border-color: var(--desktop-filter-category-item-checkbox-disabled-border-color);
border-radius: var(--desktop-filter-category-item-checkbox-disabled-border-radius);
}
.filter-category-item-checkbox-checked {
display: flex;
align-items: center;
justify-content: center;
height: var(--desktop-filter-category-item-checkbox-default-width);
width: var(--desktop-filter-category-item-checkbox-default-height);
border-width: var(--desktop-filter-category-item-checkbox-default-border);
border-style: solid;
border-color: var(--desktop-filter-category-item-checkbox-default-border-color);
border-radius: var(--desktop-filter-category-item-checkbox-default-border-radius);
}
.filter-category-item-checkbox-checked-icon {
width: var(--desktop-filter-category-title-icon-width);
height: var(--desktop-filter-category-title-icon-height);
color: var(--desktop-checkbox-selector-icon-default-fill);
}
.filter-category-item-text-default {
font-family: var(--desktop-filter-category-item-text-default-font-family);
font-weight: var(--desktop-filter-category-item-text-default-font-weight);
font-size: var(--desktop-filter-category-item-text-default-font-size);
line-height: var(--desktop-filter-category-item-text-default-line-height);
letter-spacing: var(--desktop-filter-category-item-text-default-letter-spacing);
text-transform: var(--desktop-filter-category-item-text-default-text-case);
text-decoration: var(--desktop-filter-category-item-text-default-text-decoration);
color: var(--desktop-filter-category-item-text-default-fill);
}
button:disabled > span.filter-category-item-text-default {
font-family: var(--desktop-filter-category-item-text-disabled-font-family);
font-weight: var(--desktop-filter-category-item-text-disabled-font-weight);
font-size: var(--desktop-filter-category-item-text-disabled-font-size);
line-height: var(--desktop-filter-category-item-text-disabled-line-height);
letter-spacing: var(--desktop-filter-category-item-text-disabled-letter-spacing);
text-transform: var(--desktop-filter-category-item-text-disabled-text-case);
text-decoration: var(--desktop-filter-category-item-text-disabled-text-decoration);
color: var(--desktop-filter-category-item-text-disabled-fill);
}
.filter-category-item-shade {
height: var(--desktop-filter-category-item-shade-height);
width: var(--desktop-filter-category-item-shade-width);
border-width: var(--desktop-filter-category-item-shade-border);
border-style: solid;
border-color: var(--desktop-filter-category-item-shade-border-color);
border-radius: var(--desktop-filter-category-item-shade-border-radius);
}
.filter-footer{
display: none;
}
.product-grid-title-container {
display: none;
}
.product-grid-sort-by-container {
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--desktop-product-grid-sort-by-container-spacing);
padding: 0;
}
.product-grid-sort-by-text {
font-family: var(--desktop-product-grid-sort-by-text-font-family);
font-weight: var(--desktop-product-grid-sort-by-text-font-weight);
font-size: var(--desktop-product-grid-sort-by-text-font-size);
line-height: var(--desktop-product-grid-sort-by-text-line-height);
letter-spacing: var(--desktop-product-grid-sort-by-text-letter-spacing);
text-transform: var(--desktop-product-grid-sort-by-text-text-case);
text-decoration: var(--desktop-product-grid-sort-by-text-text-decoration);
color: var(--desktop-product-grid-sort-by-text-fill);
white-space: nowrap;
}
.product-grid-ctas-container {
display: none;
}
.product-grid-no-products {
padding-left: 0;
}
.product-grid-no-results {
padding: 0;
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 60px;
}
.product-grid-no-filters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.filter-chips-container {
flex-wrap: wrap;
}
/* resetting filter-overlay-z-index to it's default value */
.filter-overlay-z-index {
z-index: 10;
position: sticky;
top: 0;
}
.ratings-and-reviews {
padding-left: 3rem;
padding-right: 3rem;
width: 100%;
margin: auto;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-review__grid-col {
position: relative;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews-body {
border-bottom: none;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--1.tt-c-reviews-summary__grid-col--1,
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--2.tt-c-reviews-summary__grid-col--2 {
width: auto !important;
margin: 0 !important;
height: 3rem;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--1.tt-c-reviews-summary__grid-col--1 {
display: flex;
justify-content: flex-end;
padding-right: var(--spacing-2);
}
.ratings-and-reviews .write-review-cta,
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__write-review-wrap button {
width: var(--desktop-reviews-section-write-review-button-width);
text-align: center;
font-style: normal;
text-decoration: var(--desktop-button-text-secondary-default-text-decoration);
letter-spacing: var(--desktop-button-text-secondary-default-letter-spacing);
text-transform: var(--desktop-button-text-secondary-default-text-case);
font-size: var(--desktop-button-text-secondary-default-font-size);
line-height: var(--desktop-button-text-secondary-default-line-height);
font-weight: var(--desktop-button-text-secondary-default-font-weight);
font-family: var(--desktop-button-text-secondary-default-font-family);
border-style: solid;
border-color: var(--desktop-button-container-secondary-default-border-color);
border-width: var(--desktop-button-container-secondary-default-border);
padding-top: var(--desktop-button-container-secondary-default-padding-top);
padding-left: var(--desktop-button-container-secondary-default-padding-left);
padding-right: var(--desktop-button-container-secondary-default-padding-right);
padding-bottom: var(--desktop-button-container-secondary-default-padding-bottom);
background-color: var(--desktop-button-container-secondary-default-fill);
}
.ratings-and-reviews .write-review-cta {
margin-top: 0;
}
.ratings-and-reviews .tt-w-reviews-summary .tt-l-grid.tt-c-reviews-summary__content .tt-l-grid__row.tt-c-reviews-summary__grid-row {
padding-bottom: 1.5rem;
justify-content: center;
}
.ratings-and-reviews .tt-l-grid__col.tt-c-reviews-summary__grid-col.tt-l-grid__col--2.tt-c-reviews-summary__grid-col--2 {
display: flex;
justify-content: center;
align-items: center;
}
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-listbox.tt-c-reviews-toolbar__sort {
width: 17rem;
}
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-listbox button.tt-o-listbox__btn {
position: relative;
display: flex;
align-items: center;
padding: 1rem;
width: 100%;
margin-left: 0;
}
.ratings-and-reviews .tt-c-reviews-toolbar .tt-o-listbox button.tt-o-listbox__btn[aria-expanded="true"] {
border-color: var(--color-neutral-black);
border-width: var(--desktop-dropdown-container-default-border);
border-radius: var(--desktop-dropdown-container-default-border-radius);
}
.ratings-and-reviews button.tt-o-listbox__btn .tt-o-listbox__label {
left: unset;
right: 100%;
}
.ratings-and-reviews ul.tt-o-listbox__list.tt-o-listbox__list--has-selection {
width: 100%;
}
.ratings-and-reviews ul.tt-o-listbox__list.tt-o-listbox__list--has-selection li.tt-o-listbox__option {
padding: 1rem;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__write-review-wrap {
width: 20.625rem;
margin-top: 0;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body {
display: flex;
flex-direction: row;
justify-content: center;
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body.tt-u-spacing--md {
grid-gap: var(--desktop-reviews-section-rating-container-spacing);
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .tt-c-reviews-summary__no-reivews-body.tt-u-spacing--md .tt-c-reviews-summary__no-review-text {
letter-spacing: var(--desktop-reviews-section-no-reviews-text-letter-spacing);
text-decoration: var(--desktop-reviews-section-no-reviews-text-text-decoration);
text-transform: var(--desktop-reviews-section-no-reviews-text-text-case);
font-size: var(--desktop-reviews-section-no-reviews-text-font-size);
line-height: var(--desktop-reviews-section-no-reviews-text-line-height);
font-weight: var(--desktop-reviews-section-no-reviews-text-font-weight);
font-family: var(--desktop-reviews-section-no-reviews-text-font-family);
grid-gap: var(--desktop-reviews-section-rating-container-spacing);
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews-body {
border-top: none;
border-bottom: none;
}
/* No reviews average rating, which is 0 */
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .no-reviews:before {
font-family: var(--desktop-reviews-section-rating-average-font-family);
font-size: var(--desktop-reviews-section-rating-average-font-size);
line-height: var(--desktop-reviews-section-rating-average-line-height);
letter-spacing: var(--desktop-reviews-section-rating-average-letter-spacing);
text-decoration: var(--desktop-reviews-section-rating-average-text-decoration);
font-weight: var(--desktop-reviews-section-rating-average-font-weight);
text-transform: var(--desktop-reviews-section-rating-average-text-case);
}
/* No reviews count, which is (0) */
.ratings-and-reviews .tt-c-reviews-summary__no-reivews .no-reviews:after {
font-size: var(--desktop-reviews-section-review-qty-font-size);
font-weight: var(--desktop-reviews-section-review-qty-font-weight);
font-family: var(--desktop-reviews-section-review-qty-font-family);
letter-spacing: var(--desktop-reviews-section-review-qty-letter-spacing);
line-height: var(--desktop-reviews-section-review-qty-line-height);
text-decoration: var(--desktop-reviews-section-review-qty-text-decoration);
text-transform: var(--desktop-reviews-section-review-qty-text-case);
}
.ratings-and-reviews .tt-c-reviews-summary__no-reivews-body {
align-items: center;
}
.ratings-and-reviews .tt-c-reviews-summary__rating.tt-u-mb--sm span.tt-c-reviews-summary__rating-number {
font-family: var(--desktop-reviews-section-rating-average-font-family);
font-size: var(--desktop-reviews-section-rating-average-font-size);
font-weight: var(--desktop-reviews-section-rating-average-font-weight);
text-decoration: var(--desktop-reviews-section-rating-average-text-decoration);
line-height: var(--desktop-reviews-section-rating-average-line-height);
text-transform: var(--desktop-reviews-section-rating-average-text-case);
letter-spacing: var(--desktop-reviews-section-rating-average-letter-spacing);
}
.ratings-and-reviews .ratings-total {
font-size: var(--desktop-reviews-section-review-qty-font-size);
font-family: var(--desktop-reviews-section-review-qty-font-family);
font-weight: var(--desktop-reviews-section-review-qty-font-weight);
line-height: var(--desktop-reviews-section-review-qty-line-height);
letter-spacing: var(--desktop-reviews-section-review-qty-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-qty-text-decoration);
text-transform: var(--desktop-reviews-section-review-qty-text-case);
fill: var(--primary-default);
}
.ratings-and-reviews .tt-c-reviews-list__content .tt-c-review {
padding-top: var(--desktop-reviews-section-review-item-container-padding-top);
padding-right: var(--desktop-reviews-section-review-item-container-padding-right);
padding-bottom: var(--desktop-reviews-section-review-item-container-padding-bottom);
padding-left: var(--desktop-reviews-section-review-item-container-padding-left);
border-bottom: var(--desktop-reviews-section-review-item-container-border-bottom) solid var(--mobile-reviews-section-review-item-container-border-color);
}
.ratings-and-reviews .tt-c-reviews-list button.tt-o-button.tt-o-button--primary.tt-c-reviews-list__show-more-btn {
width: var(--desktop-reviews-section-load-more-button-width);
}
.ratings-and-reviews .ratings-and-reviews-header {
display: flex;
justify-content: center;
font-family: var(--desktop-reviews-section-title-font-family);
font-weight: var(--desktop-reviews-section-title-font-weight);
text-transform: var(--desktop-reviews-section-title-text-case);
font-size: var(--desktop-reviews-section-title-font-size);
letter-spacing: var(--desktop-reviews-section-title-letter-spacing);
line-height: var(--desktop-reviews-section-title-line-height);
text-decoration: var(--desktop-reviews-section-title-text-decoration);
padding-bottom: var(--desktop-reviews-section-title-padding-bottom);
}
.write-a-review-container .tt-c-review-form-header__content--right {
position: absolute;
left: -180px;
top: 0;
}
.ratings-and-reviews span.tt-o-byline__item.tt-o-byline__author {
font-family: var(--desktop-reviews-section-review-item-user-name-font-family);
font-size: var(--desktop-reviews-section-review-item-user-name-font-size);
font-weight: var(--desktop-reviews-section-review-item-user-name-font-weight);
text-transform: var(--desktop-reviews-section-review-item-user-name-text-case);
text-decoration: var(--desktop-reviews-section-review-item-user-name-text-decoration);
letter-spacing: var(--desktop-reviews-section-review-item-user-name-letter-spacing);
font-style: normal;
line-height: var(--desktop-reviews-section-review-item-user-name-line-height);
}
.ratings-and-reviews .tt-c-review-toolbar__action,
.ratings-and-reviews .tt-c-review-toolbar button.tt-c-review-toolbar__action {
letter-spacing: var(--desktop-reviews-section-review-item-report-link-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-item-report-link-text-decoration);
text-transform: var(--desktop-reviews-section-review-item-report-link-text-case);
font-size: var(--desktop-reviews-section-review-item-report-link-font-size);
line-height: var(--desktop-reviews-section-review-item-report-link-line-height);
font-weight: var(--desktop-reviews-section-review-item-report-link-font-weight);
font-family: var(--desktop-reviews-section-review-item-report-link-font-family);
}
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--helpful-off.tt-o-icon--sm,
.ratings-and-reviews svg.tt-o-icon.tt-o-icon--unhelpful-off.tt-o-icon--sm {
height: var(--desktop-reviews-section-review-item-helpful-button-icon-height);
width: var(--desktop-reviews-section-review-item-helpful-button-icon-width);
fill: var(--desktop-reviews-section-review-item-helpful-button-icon-fill);
}
.ratings-and-reviews span.tt-c-review-toolbar__likes-number {
font-size: var(--desktop-reviews-section-review-item-helpful-button-text-font-size);
line-height: var(--desktop-reviews-section-review-item-helpful-button-text-line-height);
letter-spacing: var(--desktop-reviews-section-review-item-helpful-button-text-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-item-helpful-button-text-text-decoration);
text-transform: var(--desktop-reviews-section-review-item-helpful-button-text-text-case);
font-weight: var(--desktop-reviews-section-review-item-helpful-button-text-font-weight);
font-family: var(--desktop-reviews-section-review-item-helpful-button-text-font-family);
}
.ratings-and-reviews span.tt-c-review-toolbar__dislikes-number {
font-size: var(--desktop-reviews-section-review-item-helpful-button-text-font-size);
line-height: var(--desktop-reviews-section-review-item-helpful-button-text-line-height);
letter-spacing: var(--desktop-reviews-section-review-item-helpful-button-text-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-item-helpful-button-text-text-decoration);
text-transform: var(--desktop-reviews-section-review-item-helpful-button-text-text-case);
font-weight: var(--desktop-reviews-section-review-item-helpful-button-text-font-weight);
font-family: var(--desktop-reviews-section-review-item-helpful-button-text-font-family);
}
/* desktop warf begin */
/* Center WARF content */
.pr-write .p-w-r .pr-war {
margin: auto;
}
/* Hide Power Reviews logo on WARF */
.pr-write .p-w-r .pr-pull-right {
display: none;
}
.pr-write .p-w-r .pr-header .pr-table-cell:has(.pr-header-title) {
padding: 0 var(--desktop-write-review-heading-container-spacing);
}
.pr-write .p-w-r .btn-group-radio-vertical input+label.pr-btn,
.pr-write .p-w-r .btn-group-radio-vertical input+label.pr-btn:last-of-type {
background-color: var(--desktop-button-container-secondary-default-fill);
border: var(--desktop-button-container-secondary-default-border) solid var(--desktop-button-container-secondary-default-border-color);
padding-bottom: var(--desktop-button-container-secondary-default-padding-bottom);
padding-top: var(--desktop-button-container-secondary-default-padding-top);
padding-left: var(--desktop-button-container-secondary-default-padding-left);
padding-right: var(--desktop-button-container-secondary-default-padding-right);
text-decoration: var(--desktop-button-text-secondary-default-text-decoration);
letter-spacing: var(--desktop-button-text-secondary-default-letter-spacing);
text-transform: var(--desktop-button-text-secondary-default-text-case);
font-size: var(--desktop-button-text-secondary-default-font-size);
line-height: var(--desktop-button-text-secondary-default-line-height);
font-weight: var(--desktop-button-text-secondary-default-font-weight);
font-family: var(--desktop-button-text-secondary-default-font-family);
}
.pr-write .p-w-r .pr-control-label span {
letter-spacing: var(--desktop-write-review-input-label-letter-spacing);
text-decoration: var(--desktop-write-review-input-label-text-decoration);
text-transform: var(--desktop-write-review-input-label-text-case);
font-size: var(--desktop-write-review-input-label-font-size);
line-height: var(--desktop-write-review-input-label-line-height);
font-weight: var(--desktop-write-review-input-label-font-weight);
font-family: var(--desktop-write-review-input-label-font-family);
}
.pr-write .p-w-r .btn-group-radio-vertical input+label.pr-btn {
width: 126px;
}
.pr-write .p-w-r .btn-group-radio-vertical label.pr-btn.pr-btn-default.active,
.pr-write .p-w-r .pr-btn-add-tag button,
.pr-write .p-w-r .pr-btn-add-tag button:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:hover,
.pr-write .p-w-r .pr-btn-add-tag button:hover,
.pr-write button.pr-btn.pr-btn-default.pr-btn-review.pr-accessible-btn {
background-color: var(--desktop-button-container-primary-default-fill);
border: var(--desktop-button-container-primary-default-border) solid var(--desktop-button-container-primary-default-border-color);
padding-bottom: var(--desktop-button-container-primary-default-padding-bottom);
padding-top: var(--desktop-button-container-primary-default-padding-top);
padding-left: var(--desktop-button-container-primary-default-padding-left);
padding-right: var(--desktop-button-container-primary-default-padding-right);
text-decoration: var(--desktop-button-text-primary-default-text-decoration);
letter-spacing: var(--desktop-button-text-primary-default-letter-spacing);
text-transform: var(--desktop-button-text-primary-default-text-case);
font-size: var(--desktop-button-text-primary-default-font-size);
line-height: var(--desktop-button-text-primary-default-line-height);
font-weight: var(--desktop-button-text-primary-default-font-weight);
font-family: var(--desktop-button-text-primary-default-font-family);
}
.pr-write .p-w-r .btn-group-radio-vertical label.pr-btn.pr-btn-default.active {
color: var(--desktop-button-text-primary-default-fill);
}
.pr-write .p-w-r button.pr-clear-all-radios {
letter-spacing: var(--desktop-link-button-normal-default-letter-spacing);
text-decoration: var(--desktop-link-button-normal-default-text-decoration);
text-transform: var(--desktop-link-button-normal-default-text-case);
font-size: var(--desktop-link-button-normal-default-font-size);
line-height: var(--desktop-link-button-normal-default-line-height);
font-weight: var(--desktop-link-button-normal-default-font-weight);
font-family: var(--desktop-link-button-normal-default-font-family);
color: var(--desktop-link-button-normal-default-fill);
}
.pr-write .p-w-r .pr-textinput::placeholder,
.pr-write .p-w-r .pr-textarea::placeholder {
color: var(--tertiary-default);
}
.pr-write .p-w-r .pr-btn-add-tag button,
.pr-write .p-w-r .pr-btn-add-tag button:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:focus,
.pr-write .p-w-r .pr-btn-add-tag button:active:hover,
.pr-write .p-w-r .pr-btn-add-tag button:hover,
.pr-write button.pr-btn.pr-btn-default.pr-btn-review.pr-accessible-btn {
color: var(--desktop-link-button-normal-default-inverse-fill);
}
.pr-write button.pr-btn.pr-btn-default.pr-btn-fileinput,
.pr-write button.pr-btn.pr-btn-default.pr-btn-add-tag-submit {
color: var(--desktop-button-text-secondary-default-fill);
background-color: var(--desktop-button-container-secondary-default-fill);
border: var(--desktop-button-container-secondary-default-border) solid var(--desktop-button-container-secondary-default-border-color);
padding-bottom: var(--desktop-button-container-secondary-default-padding-bottom);
padding-top: var(--desktop-button-container-secondary-default-padding-top);
padding-left: var(--desktop-button-container-secondary-default-padding-left);
padding-right: var(--desktop-button-container-secondary-default-padding-right);
text-decoration: var(--desktop-button-text-secondary-default-text-decoration);
letter-spacing: var(--desktop-button-text-secondary-default-letter-spacing);
text-transform: var(--desktop-button-text-secondary-default-text-case);
font-size: var(--desktop-button-text-secondary-default-font-size);
line-height: var(--desktop-button-text-secondary-default-line-height);
font-weight: var(--desktop-button-text-secondary-default-font-weight);
font-family: var(--desktop-button-text-secondary-default-font-family);
}
.pr-write .input-add-tag__container {
gap: var(--spacing-5);
}
.pr-write .p-w-r .thank-you-page {
max-width: 700px;
margin: auto;
}
.pr-write button.pr-btn-link.pr-input-add-tag__cancel,
.pr-write .p-w-r .thank-you-page a {
letter-spacing: var(--desktop-write-review-input-link-letter-spacing);
text-decoration: var(--desktop-write-review-input-link-text-decoration);
text-transform: var(--desktop-write-review-input-link-text-case);
font-size: var(--desktop-write-review-input-link-font-size);
line-height: var(--desktop-write-review-input-link-line-height);
font-weight: var(--desktop-write-review-input-link-font-weight);
font-family: var(--desktop-write-review-input-link-font-family);
color: var(--desktop-write-review-input-link-fill);
padding-top: var(--desktop-write-review-input-link-padding-top);
}
.pr-write p.pr-header-required,
.pr-write p.pr-subscript {
text-decoration: var(--desktop-write-review-terms-text-decoration);
letter-spacing: var(--desktop-write-review-terms-letter-spacing);
text-transform: var(--desktop-write-review-terms-text-case);
font-size: var(--desktop-write-review-terms-font-size);
line-height: var(--desktop-write-review-terms-line-height);
font-weight: var(--desktop-write-review-terms-font-weight);
font-family: var(--desktop-write-review-terms-font-family);
}
.pr-write p.pr-subscript a {
color: var(--desktop-link-button-normal-default-fill);
}
.pr-write .p-w-r .pr-control-label .pr-helper-text {
letter-spacing: var(--desktop-write-review-input-description-letter-spacing);
text-transform: var(--desktop-write-review-input-description-text-case);
text-decoration: var(--desktop-write-review-input-description-text-decoration);
font-size: var(--desktop-write-review-input-description-font-size);
line-height: var(--desktop-write-review-input-description-line-height);
font-weight: var(--desktop-write-review-input-description-font-weight);
font-family: var(--desktop-write-review-input-description-font-family);
padding-bottom: var(--desktop-write-review-input-description-padding-bottom);
color: var(--desktop-write-review-input-description-fill);
}
.pr-write .p-w-r .pr-media-input-display .pr-media-input-display-thumbnail .pr-media-input-display-thumbnail-wrapper img {
height: var(--desktop-write-review-input-image-height);
width: var(--desktop-write-review-input-image-width);
}
.pr-write .p-w-r .thank-you-page .title {
text-decoration: var(--desktop-write-review-processed-title-text-decoration);
text-transform: var(--desktop-write-review-processed-title-text-case);
font-weight: var(--desktop-write-review-processed-title-font-weight);
letter-spacing: var(--desktop-write-review-processed-title-letter-spacing);
font-size: var(--desktop-write-review-processed-title-font-size);
line-height: var(--desktop-write-review-processed-title-line-height);
font-family: var(--desktop-write-review-processed-title-font-family);
padding-bottom: var(--desktop-write-review-processed-title-padding-bottom);
margin-top: 0;
margin-bottom: 0;
}
.pr-write .p-w-r .thank-you-page .subtitle {
text-decoration: var(--desktop-write-review-processed-subheading-text-decoration);
text-transform: var(--desktop-write-review-processed-subheading-text-case);
font-weight: var(--desktop-write-review-processed-subheading-font-weight);
letter-spacing: var(--desktop-write-review-processed-subheading-letter-spacing);
font-size: var(--desktop-write-review-processed-subheading-font-size);
line-height: var(--desktop-write-review-processed-subheading-line-height);
font-family: var(--desktop-write-review-processed-subheading-font-family);
padding-bottom: var(--desktop-write-review-processed-subheading-padding-bottom);
margin-top: 0;
margin-bottom: 0;
}
.pr-write .p-w-r .thank-you-page .headline {
letter-spacing: var(--desktop-write-review-processed-review-title-letter-spacing);
text-transform: var(--desktop-write-review-processed-review-title-text-case);
text-decoration: var(--desktop-write-review-processed-review-title-text-decoration);
font-size: var(--desktop-write-review-processed-review-title-font-size);
line-height: var(--desktop-write-review-processed-review-title-line-height);
font-weight: var(--desktop-write-review-processed-review-title-font-weight);
font-family: var(--desktop-write-review-processed-review-title-font-family);
padding-bottom: var(--desktop-write-review-processed-review-title-padding-bottom);
margin-bottom: 0;
}
.pr-write .p-w-r .thank-you-page .review-preview .text {
letter-spacing: var(--desktop-write-review-processed-review-image-caption-letter-spacing);
text-transform: var(--desktop-write-review-processed-review-image-caption-text-case);
text-decoration: var(--desktop-write-review-processed-review-image-caption-text-decoration);
font-size: var(--desktop-write-review-processed-review-image-caption-font-size);
line-height: var(--desktop-write-review-processed-review-image-caption-line-height);
font-weight: var(--desktop-write-review-processed-review-image-caption-font-weight);
font-family: var(--desktop-write-review-processed-review-image-caption-font-family);
padding-top: var(--desktop-write-review-processed-review-image-caption-padding-top);
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-review-header-sorts .pr-rd-sort {
margin-top: 0px;
}
.ratings-and-reviews .p-w-r .pr-review-display.pr-rd-display-desktop .pr-rd-main-header-with-filters .pr-rd-search-container .pr-rd-search-reviews-input input,.p-w-r .pr-review-display .pr-rd-main-header-with-filters .pr-rd-search-container .pr-rd-search-reviews-input .pr-rd-search-reviews-icon-button {
height: var(--desktop-write-review-input-icon-button-container-height) !important;
}
/* desktop warf end */
.maximum-retail-price {
color: var(--desktop-product-details-price-mrp-fill);
text-decoration: var(--desktop-product-details-price-mrp-text-decoration);
letter-spacing: var(--desktop-product-details-price-mrp-letter-spacing);
text-transform: var(--desktop-product-details-price-mrp-text-case);
font-size: var(--desktop-product-details-price-mrp-font-size);
line-height: var(--desktop-product-details-price-mrp-line-height);
font-weight: var(--desktop-product-details-price-mrp-font-weight);
font-family: var(--desktop-product-details-price-mrp-font-family);
padding-top: var(--desktop-product-details-price-mrp-padding-top);
}
.anchor-section-container {
flex-direction: row;
}
.anchor-section-item {
width: auto;
}
.mobile-image-zoom-button {
display: none;
}
.zoom-instructions {
display: block;
}
#blueprint-pdp .ugc-container,
.drupal-container .ugc-container {
margin-bottom: 5rem;
margin-top: 5rem;
}
#blueprint-pdp .ugc-heading,
.drupal-container .ugc-heading {
color: var(--desktop-ugc-section-heading-fill);
text-decoration: var(--desktop-ugc-section-heading-text-decoration);
text-transform: var(--desktop-ugc-section-heading-text-case);
font-weight: var(--desktop-ugc-section-heading-font-weight);
letter-spacing: var(--desktop-ugc-section-heading-letter-spacing);
font-size: var(--desktop-ugc-section-heading-font-size);
line-height: var(--desktop-ugc-section-heading-line-height);
}
#blueprint-pdp .ugc-subheading,
.drupal-container .ugc-subheading {
color: var(--desktop-ugc-section-subheading-fill);
text-decoration: var(--desktop-ugc-section-subheading-text-decoration);
text-transform: var(--desktop-ugc-section-subheading-text-case);
font-weight: var(--desktop-ugc-section-subheading-font-weight);
letter-spacing: var(--desktop-ugc-section-subheading-letter-spacing);
font-size: var(--desktop-ugc-section-subheading-font-size);
line-height: var(--desktop-ugc-section-subheading-line-height);
}
.mobile-image-zoom-dialog {
display: none;
}
}
@media(min-width: 1280px) {
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 60px;
}
.product-grid-no-filters {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-details-carousel {
width: 46rem;
}
.product-details-carousel-pincer-swiper {
width: 36.25rem;
}
.gnav-desktop-top-level-row {
visibility: visible;
display: flex;
align-items: flex-end;
column-gap: 2rem;
}
.gnav-desktop-nav-item-group:hover .gnav-desktop-top-level-title {
color: #000;
text-decoration-color: inherit;
transition: unset;
}
.gnav-desktop-nav-item {
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
justify-content: center;
position: relative;
}
.gnav-desktop-top-level-accessibility-trigger-icon {
height: 0.5rem;
width: 0.5rem;
}
header:has(.navbar-level-2-content-group:hover) .gnav-desktop-overlay-shadow,
header:has(.display-sub-nav) .gnav-desktop-overlay-shadow {
visibility: visible;
}
body:not(:has(.gnav-desktop-nav-item-group:focus-within)):not(:has(.navbar-level-2-content-group:hover)) .gnav-desktop-overlay-shadow,
body:not(:has(.gnav-desktop-nav-item-group:focus-within)):not(:has(.navbar-level-2-content-group:hover)) .gnav-desktop-sub-nav-container {
visibility: hidden;
}
.gnav-desktop-nav-item-group:has(.gnav-desktop-top-level-title:focus) .gnav-desktop-top-level-accessibility-trigger-container {
visibility: visible;
display: block;
}
.gnav-desktop-nav-item-group:focus-within .gnav-desktop-top-level-accessibility-trigger-container {
visibility: visible;
display: block;
}
.gnav-desktop-top-level-accessibility-trigger-container {
position: absolute;
top: 3px;
right: -1.25rem;
visibility: hidden;
display: none;
padding: 0.25rem;
transition: all 100ms ease-in-out;
}
.gnav-desktop-top-level-accessibility-trigger-container svg,
.gnav-desktop-top-level-accessibility-trigger-container path {
fill: white;
transition: all 100ms ease-in-out;
}
.gnav-desktop-top-level-accessibility-trigger-container:focus svg,
.gnav-desktop-top-level-accessibility-trigger-container:focus path {
fill: currentColor;
}
.display-sub-nav.gnav-desktop-nav-item-group .gnav-desktop-sub-nav-container { visibility: visible;}
.gnav-desktop-nav-item-group .gnav-desktop-sub-nav-container {
visibility: hidden;
transition: visibility 100ms step-end 200ms;
}
.gnav-desktop-nav-item-group:hover .gnav-desktop-sub-nav-container {
visibility: visible;
}
.gnav-desktop-top-level-row:not(:hover) .gnav-desktop-top-level-title {
transition: text-decoration-color 100ms step-end 200ms;
}
.gnav-desktop-top-level-title {
display: flex;
padding-bottom: var(--desktop-header-primary-link-text-default-padding-bottom);
color: var(--desktop-header-primary-link-text-default-fill);
font-family: var(--desktop-header-primary-link-text-default-font-family);
line-height: var(--desktop-header-primary-link-text-default-line-height);
font-size: var(--desktop-header-primary-link-text-default-font-size);
letter-spacing: var(--desktop-header-primary-link-text-default-letter-spacing);
text-transform: var(--desktop-header-primary-link-text-default-text-case);
font-weight: var(--desktop-header-primary-link-text-default-font-weight);
text-decoration: underline;
text-underline-offset: 0.5rem;
text-decoration-color: transparent;
cursor: pointer;
}
.gnav-desktop-sub-nav-category-title {
-webkit-font-smoothing: antialiased;
font-family: var(--desktop-header-sub-menu-category-text-font-family);
font-weight: var(--desktop-header-sub-menu-category-text-font-weight);
font-size: var(--desktop-header-sub-menu-category-text-font-size);
line-height: var(--desktop-header-sub-menu-category-text-line-height);
letter-spacing: var(--desktop-header-sub-menu-category-text-letter-spacing);
text-transform: var(--desktop-header-sub-menu-category-text-text-case);
text-decoration: var(
--desktop-text-decoration-header-sub-menu-category-text
);
color: var(--desktop-header-sub-menu-category-text-fill);
}
.gnav-desktop-sub-nav-item-text {
-webkit-font-smoothing: antialiased;
color: var(--desktop-header-sub-menu-link-text-fill);
font-size: var(--desktop-header-sub-menu-link-text-font-size);
line-height: var(--desktop-header-sub-menu-link-text-line-height);
font-family: var(--desktop-header-sub-menu-link-text-font-family);
font-weight: var(--desktop-header-sub-menu-link-text-font-weight);
letter-spacing: var(--desktop-header-sub-menu-link-text-letter-spacing);
text-transform: var(--desktop-header-sub-menu-link-text-text-case);
text-decoration: var(--desktop-header-sub-menu-link-text-text-decoration);
}
a.gnav-desktop-sub-nav-item-text:hover,
a.gnav-desktop-sub-nav-category-title:hover {
text-decoration: underline;
}
.gnav-desktop-sub-nav-container {
width: 100%;
background-color: var(--surface-default);
position: absolute;
left: 0px;
z-index: 100;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
max-height: 75vh;
overflow-y: auto;
}
.gnav-desktop-sub-nav-content {
max-width: 1536px;
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
column-gap: var(--desktop-header-secondary-links-container-spacing);
padding-top: var(--desktop-header-sub-menu-container-padding-top);
padding-bottom: var(--desktop-header-sub-menu-container-padding-bottom);
padding-left: var(--desktop-header-sub-menu-container-padding-left);
padding-right: var(--desktop-header-sub-menu-container-padding-right);
}
.gnav-desktop-sub-nav-categories-links {
display: flex;
gap: 1.25rem;
}
.gnav-desktop-sub-nav-categories-banner-images {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
grid-gap: var(--desktop-header-sub-menu-touts-container-spacing);
}
.gnav-desktop-sub-nav-content-column {
/* --max-nav-sub-menu-columns: 7; */
width: calc(
(100% - (7 * var(--desktop-header-secondary-links-container-spacing))) / 7
);
display: flex;
flex-direction: column;
}
header:has(.navbar-level-2-content-group:hover) .gnav-desktop-overlay-shadow {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
right:0;
top: 0;
bottom: 0;
}
.header-background {
background-color: var(--desktop-header-container-fill)
}
.header-container {
padding-top: var(--desktop-header-container-padding-top);
padding-right: var(--desktop-header-container-padding-right);
padding-bottom: var(--desktop-header-container-padding-bottom);
padding-left: var(--desktop-header-container-padding-left);
}
.desktop-header-brand-logo-container {
display: flex;
}
.header-brand-logo {
width: var(--desktop-header-logo-width);
height: var(--desktop-header-logo-height);
}
.desktop-header-search-container {
visibility: visible;
width: var(--desktop-header-search-container-width);
height: var(--desktop-header-search-container-height);
border-color: var(--desktop-header-search-container-border-color);
border-bottom-width: var(--desktop-header-search-container-border-bottom);
padding-bottom: var(--desktop-header-search-container-padding-bottom);
padding: unset;
display: flex;
column-gap: 0.5rem;
flex-direction: row;
}
.desktop-header-secondary-links-inner-container {
visibility: visible;
position: relative;
display: flex;
align-items: center;
justify-content: end;
column-gap: 0.5rem;
}
.mobile-header-secondary-links-inner-container {
display: none;
}
.gnav-desktop-top-level-container {
display: block;
}
.utility-nav {
height: unset;
padding: 0 0 0.75rem 0;
display: block;
}
.utility-nav-logo {
display: none;
}
.mobile-header-search-container {
display: none;
}
.product-details + .carousel-container .product-section-title-container {
margin-left: 2rem
}
.product-section-title {
font-family: var(--desktop-product-section-title-font-family);
font-size: var(--desktop-product-section-title-font-size);
line-height: var(--desktop-product-section-title-line-height);
}
.product-details + .carousel-container .product-section-title {
font-size: var(--desktop-product-section-title-font-size);
}
.product-carousel-pincer-swiper .swiper-wrapper {
width: auto;
}
.product-carousel-pincer-swiper .slide-wrapper {
width: 100%;
}
.carousel-container {
max-width: 1360px;
margin-top: 5rem;
position: relative;
}
.product-carousel-container .product-carousel-pincer-swiper {
margin: 1rem 2rem 4rem;
}
.content-card-carousel-container .product-carousel-pincer-swiper {
margin-left: 2rem;
margin-right: 2rem;
}
.content-card-carousel-container .product-section-carousel {
margin-bottom: 4rem;
}
.product-details + .carousel-container .product-carousel-pincer-swiper {
margin-left: 2rem;
}
.product-details-shade-swatches {
margin-top: 1.5rem;
}
.selected-shade-name {
color: var(--desktop-product-card-shade-name-fill);
letter-spacing: var(--desktop-product-card-shade-name-letter-spacing);
text-decoration: var(--desktop-product-card-shade-name-text-decoration);
text-transform: var(--desktop-product-card-shade-name-text-case);
font-size: var(--desktop-product-card-shade-name-font-size);
line-height: var(--desktop-product-card-shade-name-line-height);
font-weight: var(--desktop-product-card-shade-name-font-weight);
font-family: var(--desktop-product-card-shade-name-font-family);
}
.selected-shade-description {
color: var(--desktop-product-details-shade-description-fill);
letter-spacing: var(--desktop-product-details-shade-description-letter-spacing);
text-decoration: var(--desktop-product-details-shade-description-text-decoration);
text-transform: var(--desktop-product-details-shade-description-text-case);
font-size: var(--desktop-product-details-shade-description-font-size);
line-height: var(--desktop-product-details-shade-description-line-height);
font-weight: var(--desktop-product-details-shade-description-font-weight);
font-family: var(--desktop-product-details-shade-description-font-family);
}
.search-form-container {
padding-left: 0;
padding-right: 0;
}
.search-overlay-shadow {
position: absolute;
}
.gnav-desktop-container {
padding-top: 1rem;
width: 100%;
}
.promo-bar {
position: relative;
background: var(--desktop-promo-bar-container-fill);
width: var( --desktop-promo-bar-container-width);
font-weight: var(--desktop-promo-bar-right-text-font-weight);
text-decoration: var(--desktop-promo-bar-right-text-text-decoration);
text-transform: var(--desktop-promo-bar-right-text-text-case);
letter-spacing: var(--desktop-promo-bar-right-text-letter-spacing);
font-size: var(--desktop-promo-bar-right-text-font-size);
line-height: var(--desktop-promo-bar-right-text-line-height);
font-family: var(--desktop-promo-bar-right-text-font-family);
z-index: 40;
}
.promo-bar-inner-container {
align-items: center;
justify-content: space-between;
}
.promo-bar-paragraph {
line-height: inherit;
}
.promo-bar-right-text {
display: flex;
align-items: center;
flex-direction: row-reverse;
gap: 0.25rem;
}
.desktop-header-secondary-links-text {
color: var(--desktop-header-secondary-link-text-fill);
font-family: var(--desktop-header-secondary-link-text-font-family);
font-weight: var(--desktop-header-secondary-link-text-font-weight);
font-size: var(--desktop-header-secondary-link-text-font-size);
line-height: var(--desktop-header-secondary-link-text-line-height);
letter-spacing: var(--desktop-header-secondary-link-text-letter-spacing);
text-transform: var(--desktop-header-secondary-link-text-text-case);
text-decoration: var(--desktop-header-secondary-link-text-text-decoration);
}
.gnav-desktop-header-bottom-row {
visibility: visible;
}
.desktop-header-accessibility-location,
.desktop-header-accessibility-account {
visibility: visible;
}
.ratings-and-reviews {
max-width: 80rem;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
padding-top: var(--desktop-padding-top-reviews-section-container);
padding-bottom: var(--desktop-padding-bottom-reviews-section-container);
grid-gap: var(--desktop-spacing-reviews-section-container);
}
.ratings-and-reviews .tt-c-review .tt-c-rating.tt-c-review__rating.tt-u-mb--sm {
gap: var(--desktop-reviews-section-rating-icon-container-spacing);
}
.ratings-and-reviews .tt-c-review .tt-c-rating.tt-c-review__rating.tt-u-mb--sm,
.ratings-and-reviews .tt-c-review__incentivized.tt-u-mb--sm,
.ratings-and-reviews .tt-c-review .tt-o-byline.tt-u-spacing--left--xs.tt-c-review__byline.tt-u-mb--lg,
.ratings-and-reviews .tt-c-review .tt-c-review__heading.tt-u-mb--sm,
.ratings-and-reviews .tt-c-review .tt-c-review__text-content-wrapper.tt-u-mb--md,
.ratings-and-reviews .tt-c-review .tt-c-dimension.tt-u-mb--xl.tt-c-dimension--3 {
margin-bottom: var(--desktop-reviews-section-review-item-user-rating-container-spacing);
padding-bottom: 0;
}
.ratings-and-reviews .tt-c-review .tt-c-review__heading.tt-u-mb--sm {
margin-bottom: .5rem;
}
.ratings-and-reviews .tt-c-review .tt-c-review__text-content-wrapper.tt-u-mb--md {
margin-bottom: 1rem;
}
.ratings-and-reviews .tt-c-review .tt-c-dimension.tt-u-mb--xl.tt-c-dimension--3 {
margin-bottom: 2rem;
}
.search-outer-container {
display: flex;
z-index: 50;
background-color: var(--surface-default);
position: fixed;
left: 0;
width: 100%;
top: 0;
}
/* slim overlay with only input field */
.search-outer-container-no-products {
display: flex;
z-index: 50;
background-color: var(--surface-default);
position: fixed;
left: 0;
width: 100%;
top: 0;
height: 7rem;
}
.search-container-shadow {
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: black;
opacity: 0.6;
}
.search-container {
display: flex;
flex-direction: column;
height: unset;
width: inherit;
max-width: 1440px;
margin: auto;
gap: var(--desktop-search-container-spacing);
padding-top: var(--desktop-search-container-padding-top);
padding-bottom: var(--desktop-search-container-padding-bottom);
padding-left: 5.63rem;
padding-right: 2rem;
overflow-y: unset;
}
.search-input-and-button-container {
margin-left: unset;
margin-right: unset;
padding-bottom: unset;
}
.search-input-container {
display: flex;
align-items: center;
flex-grow: 1;
width: 100%;
max-width: var(--desktop-search-input-container-max-width);
padding-top: var(--desktop-search-input-container-padding-top);
padding-right: var(--desktop-search-input-container-padding-right);
padding-bottom: var(--desktop-search-input-container-padding-bottom);
padding-left: var(--desktop-search-input-container-padding-left);
border-bottom-width: var(--desktop-search-input-container-border-bottom);
border-bottom-style: solid;
border-color: var(--desktop-search-input-container-border-color);
border-radius: var(--desktop-search-input-container-border-radius);
}
.search-input-text {
flex-grow: 1;
font-family: var(--desktop-search-input-text-font-family);
font-weight: var(--desktop-search-input-text-font-weight);
font-size: var(--desktop-search-input-text-font-size);
line-height: var(--desktop-search-input-text-line-height);
letter-spacing: var(--desktop-search-input-text-letter-spacing);
text-transform: var(--desktop-search-input-text-text-case);
text-decoration: var(--desktop-search-input-text-text-decoration);
color: var(--desktop-search-input-text-fill);
}
.search-input-text::placeholder {
font-family: var(--desktop-search-input-placeholder-font-family);
font-weight: var(--desktop-search-input-placeholder-font-weight);
font-size: var(--desktop-search-input-placeholder-font-size);
line-height: var(--desktop-search-input-placeholder-line-height);
letter-spacing: var(--desktop-search-input-placeholder-letter-spacing);
text-transform: var(--desktop-search-input-placeholder-text-case);
text-decoration: var(--desktop-search-input-placeholder-text-decoration);
color: var(--desktop-search-input-placeholder-fill);
}
.search-input-search-controls-container {
display: flex;
gap: var(--desktop-search-input-search-controls-container-spacing);
}
.search-input-search-controls-link {
font-family: var(--desktop-search-input-search-controls-link-font-family);
font-weight: var(--desktop-search-input-search-controls-link-font-weight);
font-size: var(--desktop-search-input-search-controls-link-font-size);
line-height: var(--desktop-search-input-search-controls-link-line-height);
letter-spacing: var(--desktop-search-input-search-controls-link-letter-spacing);
text-transform: var(--desktop-search-input-search-controls-link-text-case);
text-decoration: var(--desktop-search-input-search-controls-link-text-decoration);
color: var(--desktop-search-input-search-controls-link-fill);
}
.search-input-search-controls-icon {
height: var(--desktop-search-input-search-controls-icon-height);
width: var(--desktop-search-input-search-controls-icon-width);
fill: var(--desktop-search-input-search-controls-icon-fill);
}
.search-close-icon {
height: var(--desktop-search-close-icon-height);
width: var(--desktop-search-close-icon-width);
fill: var(--desktop-search-close-icon-fill);
margin-left: 2.5rem;
}
.search-content-parent-container {
display: flex;
flex-direction: row;
width: 100%;
}
.search-content-container-four-products {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
max-width: var(--desktop-search-content-container-max-width);
height: 100%;
margin-left: unset;
margin-right: unset;
}
.search-content-container {
display: flex;
flex-direction: row;
gap: var(--desktop-search-content-container-spacing);
width: 100%;
max-width: var(--desktop-search-content-container-max-width);
height: 100%;
margin-left: unset;
margin-right: unset;
}
.search-no-results-title-container {
width: unset;
padding-top: var(--desktop-search-no-results-title-container-padding-top);
padding-right: unset;
padding-left: unset;
}
.search-no-results-title-text {
font-family: var(--desktop-search-no-results-title-text-font-family);
font-weight: var(--desktop-search-no-results-title-text-font-weight);
font-size: var(--desktop-search-no-results-title-text-font-size);
line-height: var(--desktop-ine-search-no-results-title-text-height);
letter-spacing: var(--desktop-search-no-results-title-text-letter-spacing);
text-transform: var(--desktop-search-no-results-title-text-text-case);
text-decoration: var(--desktop-ext-decoration-search-no-results-title-text);
color: var(--desktop-search-no-results-title-text-fill);
}
.search-content-suggested-container {
display: flex;
flex-direction: column;
gap: var(--desktop-search-content-suggested-container-spacing);
padding-top: unset;
padding-bottom: unset;
}
.search-content-suggested-title {
font-family: var(--desktop-search-content-suggested-title-font-family);
font-weight: var(--desktop-search-content-suggested-title-font-weight);
font-size: var(--desktop-search-content-suggested-title-font-size);
line-height: var(--desktop-search-content-suggested-title-line-height);
letter-spacing: var(--desktop-search-content-suggested-title-letter-spacing);
text-transform: var(--desktop-search-content-suggested-title-text-case);
text-decoration: var(--desktop-search-content-suggested-title-text-decoration);
color: var(--desktop-search-content-suggested-title-fill);
}
.search-content-suggested-suggestions-container {
display: flex;
flex-direction: column;
gap: var(--desktop-search-content-suggested-suggestions-container-spacing);
}
.search-content-suggested-link-container {
display: flex;
gap: var(--desktop-search-content-suggested-link-container-spacing);
padding-top: var(--desktop-search-content-suggested-link-container-padding-top);
padding-bottom: var(--desktop-search-content-suggested-link-container-padding-bottom);
}
.search-content-suggested-link-typed {
font-family: var(--desktop-search-content-suggested-link-typed-font-family);
font-weight: var(--desktop-search-content-suggested-link-typed-font-weight);
font-size: var(--desktop-search-content-suggested-link-typed-font-size);
line-height: var(--desktop-search-content-suggested-link-typed-line-height);
letter-spacing: var(--desktop-search-content-suggested-link-typed-letter-spacing);
text-transform: var(--desktop-search-content-suggested-link-typed-text-case);
text-decoration: var(--desktop-search-content-suggested-link-typed-text-decoration);
color: var(--desktop-search-content-suggested-link-typed-fill);
}
.search-content-suggested-link-typed:hover {
text-decoration: underline;
}
.search-content-suggested-link-suggestion {
font-family: var(--desktop-search-content-suggested-link-suggestion-font-family);
font-weight: var(--desktop-search-content-suggested-link-suggestion-font-weight);
font-size: var(--desktop-search-content-suggested-link-suggestion-font-size);
line-height: var(--desktop-search-content-suggested-link-suggestion-line-height);
letter-spacing: var(--desktop-search-content-suggested-link-suggestion-letter-spacing);
text-transform: var(--desktop-search-content-suggested-link-suggestion-text-case);
text-decoration: var(--desktop-search-content-suggested-link-suggestion-text-decoration);
color: var(--desktop-search-content-suggested-link-suggestion-fill);
}
.search-content-suggested-link-suggestion:hover {
text-decoration: underline;
}
.search-content-suggested-number {
font-family: var(--desktop-search-content-suggested-number-font-family);
font-weight: var(--desktop-search-content-suggested-number-font-weight);
font-size: var(--desktop-search-content-suggested-number-font-size);
line-height: var(--desktop-search-content-suggested-number-line-height);
letter-spacing: var(--desktop-search-content-suggested-number-letter-spacing);
text-transform: var(--desktop-search-content-suggested-number-text-case);
text-decoration: var(--desktop-search-content-suggested-number-text-decoration);
color: var(--desktop-search-content-suggested-number-fill);
}
.search-content-results-container {
display: flex;
flex-direction: column;
gap: var(--desktop-search-content-results-container-spacing);
padding-top: unset;
padding-bottom: unset;
}
.search-content-results-title-container {
display: flex;
align-items: baseline;
justify-content: normal;
gap: var(--desktop-search-content-results-title-container-spacing);
}
.search-content-results-title {
font-family: var(--desktop-search-content-results-title-font-family);
font-weight: var(--desktop-search-content-results-title-font-weight);
font-size: var(--desktop-search-content-results-title-font-size);
line-height: var(--desktop-search-content-results-title-line-height);
letter-spacing: var(--desktop-search-content-results-title-letter-spacing);
text-transform: var(--desktop-search-content-results-title-text-case);
text-decoration: var(--desktop-search-content-results-title-text-decoration);
color: var(--desktop-search-content-results-title-fill);
}
.search-content-results-link {
font-family: var(--desktop-search-content-results-link-font-family);
font-weight: var(--desktop-search-content-results-link-font-weight);
font-size: var(--desktop-search-content-results-link-font-size);
line-height: var(--desktop-search-content-results-link-line-height);
letter-spacing: var(--desktop-search-content-results-link-letter-spacing);
text-transform: var(--desktop-search-content-results-link-text-case);
text-decoration: var(--desktop-search-content-results-link-text-decoration);
color: var(--desktop-search-content-results-link-fill);
}
.search-content-product-container {
display: flex;
flex-direction: row;
gap: var(--desktop-search-content-product-container-spacing);
}
.search-content-product-card-container {
flex-direction: column;
gap: var(--desktop-search-content-product-card-container-spacing);
}
img.search-content-product-card-image {
height: var(--desktop-search-content-product-card-image-height);
width: var(--desktop-search-content-product-card-image-width);
}
.search-content-product-card-image-skus-count {
display: unset;
font-family: var(--desktop-product-card-image-skus-count-font-family);
font-size: var(--desktop-product-card-image-skus-count-font-size);
font-weight: var(--desktop-product-card-image-skus-count-font-weight);
line-height: var(--desktop-product-card-image-skus-count-line-height);
letter-spacing: var(--desktop-product-card-image-skus-count-letter-spacing);
color: var(--desktop-product-card-image-skus-count-fill);
text-transform: var(--desktop-product-card-image-skus-count-text-case);
text-decoration: var(--desktop-product-card-image-skus-count-text-decoration);
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
}
.search-content-product-card-text-container {
width: var(--desktop-search-content-product-card-image-width);
gap: var(--desktop-search-content-product-card-text-container-spacing);
padding-top: var(--desktop-search-content-product-card-text-container-padding-top);
padding-right: var(--desktop-search-content-product-card-text-container-padding-right);
padding-bottom: var(--desktop-search-content-product-card-text-container-padding-bottom);
padding-left: var(--desktop-search-content-product-card-text-container-padding-left);
}
.search-content-product-card-title-container {
display: flex;
gap: var(--desktop-search-content-product-card-title-container-spacing);
}
.search-content-product-card-title {
font-family: var(--desktop-search-content-product-card-title-font-family);
font-weight: var(--desktop-search-content-product-card-title-font-weight);
font-size: var(--desktop-search-content-product-card-title-font-size);
line-height: var(--desktop-search-content-product-card-title-line-height);
letter-spacing: var(--desktop-search-content-product-card-title-letter-spacing);
text-transform: var(--desktop-search-content-product-card-title-text-case);
text-decoration: var(--desktop-search-content-product-card-title-text-decoration);
color: var(--desktop-search-content-product-card-title-fill);
}
.search-content-product-card-rating-container {
display: flex;
gap: var(--desktop-search-content-product-card-rating-container-spacing);
}
.search-content-product-card-rating-icon-container {
margin-top: var(--desktop-search-content-product-card-rating-icon-container-spacing);
}
.search-content-product-card-rating-icon {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
position: relative;
width: calc(var(--desktop-search-content-product-card-rating-icon-active-width) * 5);
height: var(--desktop-search-content-product-card-rating-icon-active-height);
}
.search-content-product-card-rating-icon::before,
.search-content-product-card-rating-icon::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"%3E%3Cpath fill="%23FFF" d="M250 12l59 181.6h191L345.5 305.9l59 181.6L250 375.3 95.5 487.5l59-181.6L0 193.6h191z"/%3E%3C/svg%3E');
}
.search-content-product-card-rating-icon::before {
background-color: var(--desktop-search-content-product-card-rating-icon-inactive-fill);
}
.search-content-product-card-rating-icon::after {
background-color: var(--desktop-search-content-product-card-rating-icon-active-fill);
width: var(--percent);
overflow: hidden;
}
.search-content-product-card-rating-average {
font-family: var(--desktop-search-content-product-card-rating-average-font-family);
font-weight: var(--desktop-search-content-product-card-rating-average-font-weight);
font-size: var(--desktop-search-content-product-card-rating-average-font-size);
line-height: var(--desktop-search-content-product-card-rating-average-line-height);
letter-spacing: var(--desktop-search-content-product-card-rating-average-letter-spacing);
text-transform: var(--desktop-search-content-product-card-rating-average-text-case);
text-decoration: var(--desktop-search-content-product-card-rating-average-text-decoration);
color: var(--desktop-search-content-product-card-rating-average-fill);
}
.search-content-product-card-price-container {
display: flex;
gap: var(--desktop-search-content-product-card-price-container-spacing);
}
.search-content-product-card-price-recommended {
font-family: var(--desktop-search-content-product-card-price-recommended-font-family);
font-weight: var(--desktop-search-content-product-card-price-recommended-font-weight);
font-size: var(--desktop-search-content-product-card-price-recommended-font-size);
line-height: var(--desktop-search-content-product-card-price-recommended-line-height);
letter-spacing: var(--desktop-search-content-product-card-price-recommended-letter-spacing);
text-transform: var(--desktop-search-content-product-card-price-recommended-text-case);
text-decoration: var(--desktop-search-content-product-card-price-recommended-text-decoration);
color: var(--desktop-search-content-product-card-price-recommended-fill);
}
.search-content-product-card-price-divider {
font-family: var(--desktop-search-content-product-card-price-divider-font-family);
font-weight: var(--desktop-search-content-product-card-price-divider-font-weight);
font-size: var(--desktop-search-content-product-card-price-divider-font-size);
line-height: var(--desktop-search-content-product-card-price-divider-line-height);
letter-spacing: var(--desktop-search-content-product-card-price-divider-letter-spacing);
text-transform: var(--desktop-search-content-product-card-price-divider-text-case);
text-decoration: var(--desktop-search-content-product-card-price-divider-text-decoration);
color: var(--desktop-search-content-product-card-price-divider-fill);
}
.search-content-product-card-price-price-per-unit {
font-family: var(--desktop-search-content-product-card-price-price-per-unit-font-family);
font-weight: var(--desktop-search-content-product-card-price-price-per-unit-font-weight);
font-size: var(--desktop-search-content-product-card-price-price-per-unit-font-size);
line-height: var(--desktop-search-content-product-card-price-price-per-unit-line-height);
letter-spacing: var(--desktop-search-content-product-card-price-price-per-unit-letter-spacing);
text-transform: var(--desktop-search-content-product-card-price-price-per-unit-text-case);
text-decoration: var(--desktop-search-content-product-card-price-price-per-unit-text-decoration);
color: var(--desktop-search-content-product-card-price-price-per-unit-fill);
}
.search-content-product-card-price-discounted {
font-family: var(--desktop-search-content-product-card-price-discounted-font-family);
font-weight: var(--desktop-search-content-product-card-price-discounted-font-weight);
font-size: var(--desktop-search-content-product-card-price-discounted-font-size);
line-height: var(--desktop-search-content-product-card-price-discounted-line-height);
letter-spacing: var(--desktop-search-content-product-card-price-discounted-letter-spacing);
text-transform: var(--desktop-search-content-product-card-price-discounted-text-case);
text-decoration: var(--desktop-search-content-product-card-price-discounted-text-decoration);
color: var(--desktop-search-content-product-card-price-discounted-fill);
}
.search-content-product-card-price-strikethrough {
font-family: var(--desktop-search-content-product-card-price-strikethrough-font-family);
font-weight: var(--desktop-search-content-product-card-price-strikethrough-font-weight);
font-size: var(--desktop-search-content-product-card-price-strikethrough-font-size);
line-height: var(--desktop-search-content-product-card-price-strikethrough-line-height);
letter-spacing: var(--desktop-search-content-product-card-price-strikethrough-letter-spacing);
text-transform: var(--desktop-search-content-product-card-price-strikethrough-text-case);
text-decoration: var(--desktop-search-content-product-card-price-strikethrough-text-decoration);
color: var(--desktop-search-content-product-card-price-strikethrough-fill);
}
.search-content-product-card-price-discount-percent {
font-family: var(--desktop-search-content-product-card-price-discount-percent-font-family);
font-weight: var(--desktop-search-content-product-card-price-discount-percent-font-weight);
font-size: var(--desktop-search-content-product-card-price-discount-percent-font-size);
line-height: var(--desktop-search-content-product-card-price-discount-percent-line-height);
letter-spacing: var(--desktop-search-content-product-card-price-discount-percent-letter-spacing);
text-transform: var(--desktop-search-content-product-card-price-discount-percent-text-case);
text-decoration-line: var(--desktop-search-content-product-card-price-discount-percent-text-decoration);
color: var(--desktop-search-content-product-card-price-discount-percent-fill);
}
.product-details-carousel-pincer-swiper .swiper-pagination-bullet,
.product-section-container .swiper-pagination-bullet {
background-color: var(--desktop-carousel-carousel-indicator-inactive-fill);
opacity: var(--desktop-carousel-carousel-indicator-inactive-inverse-opacity);
}
.product-details-carousel-pincer-swiper .swiper-pagination-bullet-active,
.carousel-container .swiper-pagination-bullet-active {
background-color: var(--desktop-carousel-carousel-indicator-active-fill);
opacity: var(--desktop-carousel-carousel-indicator-active-inverse-fill);
}
/* Power Reviews Styling desktop */
/* reviews section container */
.ratings-and-reviews .p-w-r {
max-width: 90%;
padding-bottom: var(--desktop-reviews-section-container-padding-bottom);
grid-gap: var(--desktop-reviews-section-container-spacing);
}
/* reviews section title */
.ratings-and-reviews .p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-review-snapshot-header-intro .pr-headline,
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-headline {
display: flex;
justify-content: space-evenly;
align-content: space-around;
flex-wrap: wrap ;
flex-direction: column;
font-family: var(--desktop-reviews-section-title-font-family) !important;
font-weight: var(--desktop-reviews-section-title-font-weight) !important;
text-transform: var(--desktop-reviews-section-title-text-case) !important;
font-size: var(--desktop-reviews-section-title-font-size) !important;
letter-spacing: var(--desktop-reviews-section-title-letter-spacing) !important;
line-height: var(--desktop-reviews-section-title-line-height) !important;
text-decoration: var(--desktop-reviews-section-title-text-decoration) !important;
color: var(--desktop-reviews-section-title-fill) !important;
}
/* reviews section rating icon container + icon */
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-snippet .pr-snippet-stars-png .pr-star-v4 {
font-size: 0.75rem;
width: var(--desktop-reviews-section-rating-icon-active-width);
height: 1.125rem !important;
margin: 0 var(--desktop-reviews-section-rating-icon-container-spacing);
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4::after,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4::after {
overflow: hidden;
display: block;
position: absolute;
top: 0;
color: var(--desktop-reviews-section-rating-icon-active-fill);
line-height: 1.5;
content: "\2605";
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-star-v4::before,
.ratings-and-reviews .p-w-r .pr-review-display .pr-star-v4::before {
color: var(--desktop-reviews-section-rating-icon-inactive-fill);
line-height: 1.5;
content: "\2605";
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-snippet .pr-snippet-stars-png {
flex-direction: row-reverse;
}
/* reviews section rating average */
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-stars-png .pr-snippet-rating-decimal {
margin: 0 var(--desktop-reviews-section-rating-value-container-spacing) 0 0 !important;
padding: 0 !important;
height: auto !important;
font-weight: var(--mobile-reviews-section-rating-average-font-weight) !important;
text-decoration: var(--desktop-reviews-section-rating-average-text-decoration);
text-transform: var(--desktop-reviews-section-rating-average-text-case);
letter-spacing: var(--desktop-reviews-section-rating-average-letter-spacing);
font-size: var(--desktop-reviews-section-rating-average-font-size) !important;
line-height: var(--desktop-reviews-section-rating-average-line-height) !important;
font-family: var(--desktop-reviews-section-rating-average-font-family) !important;
color: var(--desktop-reviews-section-rating-average-fill) !important;
}
/* reviews section review qty */
.p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-review-snapshot-snippets .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars .pr-snippet .pr-snippet-read-and-write span.pr-snippet-review-count,
.p-w-r .pr-snippet-stars-reco-inline .pr-snippet-read-and-write span.pr-snippet-review-count {
font-size: var(--desktop-reviews-section-review-qty-font-size) !important;
font-family: var(--desktop-reviews-section-review-qty-font-family);
font-weight: var(--desktop-reviews-section-review-qty-font-weight);
font-style: normal;
line-height: var(--desktop-reviews-section-review-qty-line-height);
letter-spacing: var(--desktop-reviews-section-review-qty-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-qty-text-decoration);
text-transform: var(--desktop-reviews-section-review-qty-text-case);
color: var(--desktop-reviews-section-review-qty-fill) !important;
margin: 0;
padding: 0 var(--spacing-2) !important;
}
/* reviews section write review button */
.p-w-r .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars {
width: unset;
}
.p-w-r .pr-review-snapshot.pr-review-enhanced .pr-review-snapshot-header .pr-review-snapshot-snippets .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars .pr-snippet .pr-snippet-read-and-write a.pr-snippet-write-review-link,
.p-w-r .pr-review-snapshot .pr-snippet .pr-snippet-read-and-write a.pr-snippet-write-review-link {
display: block;
width: var(--desktop-reviews-section-write-review-button-width);
}
.p-w-r .pr-review-snapshot .pr-snippet div.pr-snippet-read-and-write {
display: flex;
flex-direction: row;
vertical-align: middle;
align-items: center !important;
gap: var(--desktop-reviews-section-rating-container-spacing);
}
.ratings-and-reviews .p-w-r .pr-snippet-stars-reco-inline .pr-snippet-stars-reco-stars .pr-snippet {
display: flex;
align-content: space-around;
align-items: center;
flex-wrap: nowrap !important;
flex-direction: row;
justify-content: space-evenly;
}
/* reviews section review item review title */
.pr-review .pr-rd-review-headline,
.pr-review .pr-rd-review-headline.pr-h2 {
font-size: var(--desktop-reviews-section-review-item-review-title-font-size) !important;
font-family: var(--desktop-reviews-section-review-item-review-title-font-family);
font-weight: var(--desktop-reviews-section-review-item-review-title-font-weight) !important;
font-style: normal;
line-height: var(--desktop-reviews-section-review-item-review-title-line-height) !important;
letter-spacing: var(--desktop-reviews-section-review-item-review-title-letter-spacing);
text-transform: uppercase;
text-decoration: var(--desktop-reviews-section-review-item-review-title-text-decoration);
color: var(--desktop-reviews-section-review-item-review-title-fill) !important;
}
.p-w-r .pr-review-display .pr-rd-header.pr-rd-content-block {
display: flex;
align-items: center;
}
/* reviews section review item review text + recommendation text */
.p-w-r .pr-review-display .pr-rd-description-text,
.p-w-r .pr-review-display .pr-rd-footer.pr-rd-content-block .pr-rd-bottomline.pr-rd-inner-content-block span {
font-family: var(--desktop-reviews-section-review-item-review-text-font-family) !important;
font-size: var(--desktop-reviews-section-review-item-review-text-font-size) !important;
font-weight: var(--desktop-reviews-section-review-item-review-text-font-weight) !important;
text-transform: var(--desktop-reviews-section-review-item-review-text-text-case) !important;
line-height: var(--desktop-reviews-section-review-item-review-text-line-height) !important;
letter-spacing: var(--desktop-reviews-section-review-item-review-text-letter-spacing) !important;
text-decoration: var(--desktop-reviews-section-review-item-review-text-text-decoration) !important;
color: var(--desktop-reviews-section-review-item-review-text-fill) !important;
}
/* reviews section review item date */
.p-w-r .pr-review .pr-rd-description.pr-rd-content-block .pr-rd-details.pr-rd-author-submission-date span {
letter-spacing: var(--desktop-reviews-section-review-item-date-letter-spacing) !important;
text-decoration: var(--desktop-reviews-section-review-item-date-text-decoration) !important;
text-transform: var(--desktop-reviews-section-review-item-date-text-case) !important;
font-size: var(--desktop-reviews-section-review-item-date-font-size) !important;
line-height: var(--desktop-reviews-section-review-item-date-line-height) !important;
font-weight: var(--desktop-reviews-section-review-item-date-font-weight) !important;
font-family: var(--desktop-reviews-section-review-item-date-font-family) !important;
color: var(--desktop-reviews-section-review-item-date-fill) !important;
}
/* reviews section review item username + location */
.p-w-r .pr-review .pr-rd-description.pr-rd-content-block .pr-rd-details.pr-rd-author-nickname span,
.p-w-r .pr-review .pr-rd-description.pr-rd-content-block .pr-rd-details.pr-rd-author-location span {
letter-spacing: var(--desktop-reviews-section-review-item-user-name-letter-spacing) !important;
text-decoration: var(--desktop-reviews-section-review-item-user-name-text-decoration) !important;
text-transform: var(--desktop-reviews-section-review-item-user-name-text-case) !important;
font-size: var(--desktop-reviews-section-review-item-user-name-font-size) !important;
line-height: var(--desktop-reviews-section-review-item-user-name-line-height) !important;
font-weight: var(--desktop-reviews-section-review-item-user-name-font-weight) !important;
font-family: var(--desktop-reviews-section-review-item-user-name-font-family) !important;
color: var(--desktop-reviews-section-review-item-user-name-fill) !important;
}
/* reviews section review item report link */
.p-w-r .pr-rd-flag-review-container .pr-rd-flag-review-btn {
letter-spacing: var(--desktop-reviews-section-review-item-report-link-letter-spacing);
font-size: var(--desktop-reviews-section-review-item-report-link-font-size);
line-height: var(--desktop-reviews-section-review-item-report-link-line-height);
font-weight: var(--desktop-reviews-section-review-item-report-link-font-weight);
font-family: var(--desktop-reviews-section-review-item-report-link-font-family);
color: var(--desktop-reviews-section-review-item-report-link-fill);
text-decoration: var(--desktop-reviews-section-review-item-report-link-text-decoration);
text-transform: capitalize;
}
/* report modal */
.p-w-r .pr-modal__backdrop + div {
width: 30%;
}
/* reviews section review item buttons container */
.p-w-r .pr-review .pr-rd-helpful-action-btn-group,
.p-w-r .pr-review .pr-helpful-voting.pr-rd-helpful-action-btn-group {
gap: var(--desktop-reviews-section-review-item-buttons-container-spacing);
}
.pr-helpful-voting.pr-rd-helpful-action-btn-group {
display: flex;
}
/* reviews section review item helpful button container */
.p-w-r button.pr-helpful-btn {
cursor: pointer !important;
padding-top: var(--desktop-reviews-section-review-item-helpful-button-container-padding-top);
padding-right: var(--desktop-reviews-section-review-item-helpful-button-container-padding-right);
padding-bottom: var(--desktop-reviews-section-review-item-helpful-button-container-padding-bottom);
padding-left: var(--desktop-reviews-section-review-item-helpful-button-container-padding-left);
border: var(--desktop-reviews-section-review-item-helpful-button-container-border) solid var(--desktop-reviews-section-review-item-helpful-button-container-border-color);
}
/* reviews section review item helpful button icon */
.p-w-r .pr-thumbs-icon {
padding-right: var(--desktop-reviews-section-review-item-helpful-button-icon-padding-right);
width: var(--desktop-reviews-section-review-item-helpful-button-icon-width) !important;
height: var(--desktop-reviews-section-review-item-helpful-button-icon-height) !important;
}
.p-w-r .pr-thumbs-icon svg g path {
fill: var(--desktop-reviews-section-review-item-helpful-button-icon-fill) !important;
}
/* reviews section review item helpful button text */
.p-w-r .pr-helpful-count {
font-size: var(--desktop-reviews-section-review-item-helpful-button-text-font-size);
line-height: var(--desktop-reviews-section-review-item-helpful-button-text-line-height);
letter-spacing: var(--desktop-reviews-section-review-item-helpful-button-text-letter-spacing);
text-decoration: var(--desktop-reviews-section-review-item-helpful-button-text-text-decoration);
text-transform: var(--desktop-reviews-section-review-item-helpful-button-text-text-case);
font-weight: var(--desktop-reviews-section-review-item-helpful-button-text-font-weight);
font-family: var(--desktop-reviews-section-review-item-helpful-button-text-font-family);
color: var(--desktop-reviews-section-review-item-helpful-button-text-fill) !important;
}
/* reviews section no reviews */
.p-w-r .pr-review-display .pr-rd-no-reviews {
letter-spacing: var(--desktop-reviews-section-no-reviews-text-letter-spacing);
text-decoration: var(--desktop-reviews-section-no-reviews-text-text-decoration);
text-transform: var(--desktop-reviews-section-no-reviews-text-text-case);
font-size: var(--desktop-reviews-section-no-reviews-text-font-size);
line-height: var(--desktop-reviews-section-no-reviews-text-line-height);
font-weight: var(--desktop-reviews-section-no-reviews-text-font-weight);
font-family: var(--desktop-reviews-section-no-reviews-text-font-family);
color: var(--desktop-reviews-section-no-reviews-text-fill);
}
.p-w-r .pr-review-display .pr-rd-pagination .pr-rd-pagination-btn:last-child {
width: var(--desktop-reviews-section-load-more-button-width);
}
.ratings-and-reviews .p-w-r .pr-review-snapshot .pr-review-snapshot-header .pr-review-snapshot-header-intro {
justify-content: center !important;
flex-direction: column;
padding-bottom: 10px;
margin-bottom: 20px;
align-items: center;
text-transform: uppercase;
}
.ratings-and-reviews .p-w-r .pr-review-display .pr-rd-footer {
background: transparent;
width: 100% !important;
margin-top: 30px;
}
.p-w-r .pr-review-display.pr-rd-display-desktop div.pr-rd-side-content-block {
right: unset;
left: 0;
top: 0;
padding: 2.5rem !important;
width: 300px !important;
}
.p-w-r .pr-review-display section.pr-rd-content-block {
position: unset;
}
.pr-rd-helpful-action-group {
justify-content: space-between;
}
.p-w-r .pr-header .pr-header-product-img {
width: var(--desktop-write-review-image-width);
height: var(--desktop-write-review-image-height);
}
.p-w-r .pr-review-display .pr-review {
padding-top: var(--desktop-reviews-section-review-item-container-padding-top) !important;
padding-right: var(--desktop-reviews-section-review-item-container-padding-right) !important;
padding-bottom: var(--desktop-reviews-section-review-item-container-padding-bottom) !important;
padding-left: var(--desktop-reviews-section-review-item-container-padding-left) !important;
border-top: var(--desktop-reviews-section-review-item-container-border-top) solid var(--desktop-reviews-section-review-item-container-border-color) !important;
padding-left: 300px !important;
position: relative;
}
.p-w-r .pr-review-display .pr-rd-pagination {
margin-top: 10px !important;
}
/* End Power Reviews Styling desktop */
.desktop-sub-menu-tout-container {
column-gap: var(--desktop-header-sub-menu-tout-container-spacing);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.desktop-sub-menu-tout {
max-width: var(--desktop-header-sub-menu-tout-image-width);
}
.desktop-sub-menu-tout-image {
width: var(--desktop-header-sub-menu-tout-image-width);
/*
* We do have a height token but it prevents the images from being dynamic
* Currently image dimensions from the CMS are unknown thus setting the height will break the resolution
* height: var(--desktop-header-sub-menu-tout-image-height);
*/
}
.desktop-sub-menu-tout-text {
color: var(--desktop-header-sub-menu-tout-text-fill);
font-family: var(--desktop-header-sub-menu-tout-text-font-family);
line-height: var(--desktop-header-sub-menu-tout-text-line-height);
font-size: var(--desktop-header-sub-menu-tout-text-font-size);
letter-spacing: var(--desktop-header-sub-menu-tout-text-letter-spacing);
text-transform: var(--desktop-header-sub-menu-tout-text-text-case);
text-decoration: var(--desktop-header-sub-menu-tout-text-text-decoration);
font-weight: var(--desktop-header-sub-menu-tout-text-font-weight);
padding-top: var(--desktop-header-sub-menu-tout-container-spacing);
}
}
@media(min-width: 1440px) {
.gnav-desktop-container {
padding-top: 0;
width: fit-content;
}
.gnav-desktop-header-bottom-row {
display: flex;
flex-wrap: wrap;
column-gap: 3.625rem;
align-items: flex-end;
padding-left: 0;
padding-right: 0;
}
}
.clickable-block {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.mobile-zoom-slide .swiper {
height: 76vh;
}