/* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ /* Typography functions - Gobal core */ /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ .quickbuyMob--image__wrapper .product-image, .product-tile .image-container .plp-slick-img, .product-tile .plp-img-container { aspect-ratio: 3/3.95257; } /* Motion animations - Global core */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } /* buttons */ .quickbuy--variant-selector-container, .variant-selector-container { margin-bottom: var(--spacing-8); } .buy-box .quickbuy--variant-selector-container, .buy-box .variant-selector-container { margin-bottom: var(--spacing-16); } @media (max-width: 768.98px) { .quickbuy--variant-selector-container, .variant-selector-container { width: 100%; line-height: 0.1px; white-space: nowrap; } } .quickbuy--variant-selector-container .quickbuy--variant-list, .variant-selector-container .variant-list { list-style: none; margin: 0; padding-left: 0; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { text-overflow: ellipsis; white-space: nowrap; float: left; width: calc(25% - 8px * 3 / 4); height: 48px; border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-border-radius); color: var(--filter-text-primary-color); margin: 0 var(--spacing-8) var(--spacing-8) 0; overflow: hidden; text-align: center; cursor: pointer; padding: 19px 4px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0.5rem; font-size: 13px; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { width: 69px; float: none; display: inline-block; } } @media (min-width: 992px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover, .variant-selector-container .variant-color-item:hover, .variant-selector-container .variant-item:hover { border-color: #808080; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true], .variant-selector-container .variant-color-item[aria-checked=true], .variant-selector-container .variant-item[aria-checked=true] { background-color: var(--filter-text-primary-color); color: var(--color-white); border: none; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch, .variant-selector-container .disabled.variant-color-item, .variant-selector-container .disabled.variant-item { position: relative; color: var(--color-grey-400); border: var(--input-border-width) solid var(--color-grey-100); background-color: var(--color-grey-100); } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::before, .variant-selector-container .disabled.variant-color-item::before, .variant-selector-container .disabled.variant-item::before { position: absolute; content: ""; left: 50%; left: 50%; top: 50%; border-top: var(--input-border-width) solid; border-color: var(--color-grey-400); -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); -webkit-transform-origin: center center; transform-origin: center center; width: 28px; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: var(--spacing-4) var(--spacing-8) var(--spacing-8) var(--spacing-4); border-radius: 50%; padding: 0; border: none; overflow: visible; } @media (max-width: 768.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: 0 0 24px 24px; float: none; display: inline-block; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .variant-color-item::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 130%; height: 130%; border-radius: 50%; border: 1px solid transparent; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover::after, .variant-selector-container .variant-color-item:hover::after { border-color: #808080; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true]::after, .variant-selector-container .variant-color-item[aria-checked=true]::after { border-color: #000; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::before, .variant-selector-container .disabled.variant-color-item::before { left: -2%; width: 100%; color: #fff; border-color: #fff; background-color: #fff; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .disabled.variant-color-item::after { border-color: transparent; } .quickbuy--variant-selector-container .colorOOS.quickbuy--variant-color-item.single-swatch, .variant-selector-container .colorOOS.variant-color-item { display: none; } .quickbuy--variant-error, .variant-error { width: 100%; clear: both; -webkit-transform: translateY(0); transform: translateY(0); color: var(--color-feedback-error); margin-bottom: var(--spacing-16); display: -webkit-box; display: -ms-flexbox; display: flex; } .show.quickbuy--variant-error, .show.variant-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: show-error 0.3s forwards; animation: show-error 0.3s forwards; } .hide.quickbuy--variant-error, .hide.variant-error { display: none; } .quickbuy--variant-error .icon-alert, .variant-error .icon-alert { margin-right: 6px; } @-webkit-keyframes show-error { from { -webkit-transform: translateY(-24px); transform: translateY(-24px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes show-error { from { -webkit-transform: translateY(-24px); transform: translateY(-24px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } /* header height */ /* TODO change include to extend in future to reduce css size */ /* stylelint-disable */ /* motion animations */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .fade-in, .slide-up, .slide-down, .slide-left, .slide-right { -webkit-animation-duration: var(--motion-functional-duration-md); animation-duration: var(--motion-functional-duration-md); -webkit-animation-timing-function: cubic-bezier(--motion-functional-easing-ease); animation-timing-function: cubic-bezier(--motion-functional-easing-ease); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fade-out, .slide-up-exit, .slide-down-exit { -webkit-animation-duration: var(--motion-functional_exit-duration-sm); animation-duration: var(--motion-functional_exit-duration-sm); -webkit-animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } @-webkit-keyframes slide-down { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-down { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes slide-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes slide-down-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slide-down-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes slide-up-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slide-up-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* BEHAVIOUR ANIMATION */ .fade-in { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform, opacity; } .fade-out { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform, opacity; } .slide-up { -webkit-animation-name: slide-up, fade-in; animation-name: slide-up, fade-in; will-change: transform; } .slide-up-exit { -webkit-animation-name: slide-up-exit, fade-out; animation-name: slide-up-exit, fade-out; will-change: transform; } .slide-down { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform; } .slide-down-exit { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform; } .slide-left { -webkit-animation-name: slide-left; animation-name: slide-left; will-change: transform; } .slide-right { -webkit-animation-name: slide-right; animation-name: slide-right; will-change: transform; } /* TRANSITIONS */ /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ /* Typography functions - Gobal core */ /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ .quickbuyMob--image__wrapper .product-image, .product-tile .image-container .plp-slick-img, .product-tile .plp-img-container { aspect-ratio: 3/3.95257; } /* Motion animations - Global core */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } /* buttons */ .quickbuy--variant-selector-container, .variant-selector-container { margin-bottom: var(--spacing-8); } .buy-box .quickbuy--variant-selector-container, .buy-box .variant-selector-container { margin-bottom: var(--spacing-16); } @media (max-width: 767.98px) { .quickbuy--variant-selector-container, .variant-selector-container { width: 100%; line-height: 0.1px; white-space: nowrap; } } .quickbuy--variant-selector-container .quickbuy--variant-list, .variant-selector-container .variant-list { list-style: none; margin: 0; padding-left: 0; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { text-overflow: ellipsis; white-space: nowrap; float: left; width: calc(25% - 8px * 3 / 4); height: 48px; border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-border-radius); color: var(--filter-text-primary-color); margin: 0 var(--spacing-8) var(--spacing-8) 0; overflow: hidden; text-align: center; cursor: pointer; padding: 19px 4px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0.5rem; font-size: 13px; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 767.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { width: 69px; float: none; display: inline-block; } } @media (min-width: 992px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover, .variant-selector-container .variant-color-item:hover, .variant-selector-container .variant-item:hover { border-color: #808080; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true], .variant-selector-container .variant-color-item[aria-checked=true], .variant-selector-container .variant-item[aria-checked=true] { background-color: var(--filter-text-primary-color); color: var(--color-white); border: none; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch, .variant-selector-container .disabled.variant-color-item, .variant-selector-container .disabled.variant-item { position: relative; color: var(--color-grey-400); border: var(--input-border-width) solid var(--color-grey-100); background-color: var(--color-grey-100); } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::before, .variant-selector-container .disabled.variant-color-item::before, .variant-selector-container .disabled.variant-item::before { position: absolute; content: ""; left: 50%; left: 50%; top: 50%; border-top: var(--input-border-width) solid; border-color: var(--color-grey-400); -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); -webkit-transform-origin: center center; transform-origin: center center; width: 28px; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: var(--spacing-4) var(--spacing-8) var(--spacing-8) var(--spacing-4); border-radius: 50%; padding: 0; border: none; overflow: visible; } @media (max-width: 767.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: 0 0 24px 24px; float: none; display: inline-block; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .variant-color-item::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 130%; height: 130%; border-radius: 50%; border: 1px solid transparent; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover::after, .variant-selector-container .variant-color-item:hover::after { border-color: #808080; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true]::after, .variant-selector-container .variant-color-item[aria-checked=true]::after { border-color: #000; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::before, .variant-selector-container .disabled.variant-color-item::before { left: -2%; width: 100%; color: #fff; border-color: #fff; background-color: #fff; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .disabled.variant-color-item::after { border-color: transparent; } .quickbuy--variant-selector-container .colorOOS.quickbuy--variant-color-item.single-swatch, .variant-selector-container .colorOOS.variant-color-item { display: none; } .quickbuy--variant-error, .variant-error { width: 100%; clear: both; -webkit-transform: translateY(0); transform: translateY(0); color: var(--color-feedback-error); margin-bottom: var(--spacing-16); display: -webkit-box; display: -ms-flexbox; display: flex; } .show.quickbuy--variant-error, .show.variant-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: show-error 0.3s forwards; animation: show-error 0.3s forwards; } .hide.quickbuy--variant-error, .hide.variant-error { display: none; } .quickbuy--variant-error .icon-alert, .variant-error .icon-alert { margin-right: 6px; } @keyframes show-error { from { -webkit-transform: translateY(-24px); transform: translateY(-24px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } /* header height */ /* TODO change include to extend in future to reduce css size */ /* stylelint-disable */ /* motion animations */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .fade-in, .slide-up, .slide-down, .slide-left, .slide-right { -webkit-animation-duration: var(--motion-functional-duration-md); animation-duration: var(--motion-functional-duration-md); -webkit-animation-timing-function: cubic-bezier(--motion-functional-easing-ease); animation-timing-function: cubic-bezier(--motion-functional-easing-ease); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fade-out, .slide-up-exit, .slide-down-exit { -webkit-animation-duration: var(--motion-functional_exit-duration-sm); animation-duration: var(--motion-functional_exit-duration-sm); -webkit-animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } @keyframes slide-down { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-down-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slide-up-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes fade-in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* BEHAVIOUR ANIMATION */ .fade-in { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform, opacity; } .fade-out { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform, opacity; } .slide-up { -webkit-animation-name: slide-up, fade-in; animation-name: slide-up, fade-in; will-change: transform; } .slide-up-exit { -webkit-animation-name: slide-up-exit, fade-out; animation-name: slide-up-exit, fade-out; will-change: transform; } .slide-down { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform; } .slide-down-exit { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform; } .slide-left { -webkit-animation-name: slide-left; animation-name: slide-left; will-change: transform; } .slide-right { -webkit-animation-name: slide-right; animation-name: slide-right; will-change: transform; } /* TRANSITIONS */ .fonts-headers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--color-grey-200); margin-bottom: var(--spacing-24); } .fonts-headers .values { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--font-size-md); } .fonts-headers .values span { color: var(--color-grey-500); font-weight: var(--font-weight-400); font-size: var(--font-size-sm); } .headline.lg { font-family: var(--heading-lg-fontFamily) ; font-size: var(--heading-lg-fontSize) ; font-weight: var(--heading-lg-fontWeight) ; letter-spacing: var(--heading-lg-letterSpacing) ; line-height: calc(var(--heading-lg-lineHeight)) ; text-transform: var(--heading-lg-textCase, "inherit") ; } .headline.md { font-family: var(--heading-md-fontFamily) ; font-size: var(--heading-md-fontSize) ; font-weight: var(--heading-md-fontWeight) ; letter-spacing: var(--heading-md-letterSpacing) ; line-height: calc(var(--heading-md-lineHeight)) ; text-transform: var(--heading-md-textCase, "inherit") ; } .headline.sm { font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; } .headline.xs { font-family: var(--heading-xs-fontFamily) ; font-size: var(--heading-xs-fontSize) ; font-weight: var(--heading-xs-fontWeight) ; letter-spacing: var(--heading-xs-letterSpacing) ; line-height: calc(var(--heading-xs-lineHeight)) ; text-transform: var(--heading-xs-textCase, "inherit") ; } .body-font.lg { font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .body-font.md { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .body-font.sm { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .body-font.xs { font-family: var(--body-xs-fontFamily) ; font-size: var(--body-xs-fontSize) ; font-weight: var(--body-xs-fontWeight) ; letter-spacing: var(--body-xs-letterSpacing) ; line-height: calc(var(--body-xs-lineHeight)) ; text-transform: var(--body-xs-textCase, "inherit") ; } .text-caption { font-family: var(--body-xs-fontFamily) ; font-size: var(--body-xs-fontSize) ; font-weight: var(--body-xs-fontWeight) ; letter-spacing: var(--body-xs-letterSpacing) ; line-height: calc(var(--body-xs-lineHeight)) ; text-transform: var(--body-xs-textCase, "inherit") ; } .button-text.md { font-family: var(--button-md-fontFamily) ; font-size: var(--button-md-fontSize) ; font-weight: var(--button-md-fontWeight) ; letter-spacing: var(--button-md-letterSpacing) ; line-height: calc(var(--button-md-lineHeight)) ; text-transform: var(--button-md-textCase, "inherit") ; } .button-text.sm { font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } .textbutton { /* Escape the number */ } .textbutton.md { font-family: var(--textbutton-md-fontFamily) ; font-size: var(--textbutton-md-fontSize) ; font-weight: var(--textbutton-md-fontWeight) ; letter-spacing: var(--textbutton-md-letterSpacing) ; line-height: calc(var(--textbutton-md-lineHeight)) ; text-transform: var(--textbutton-md-textCase, "inherit") ; } .textbutton.sm { font-family: var(--textbutton-sm-fontFamily) ; font-size: var(--textbutton-sm-fontSize) ; font-weight: var(--textbutton-sm-fontWeight) ; letter-spacing: var(--textbutton-sm-letterSpacing) ; line-height: calc(var(--textbutton-sm-lineHeight)) ; text-transform: var(--textbutton-sm-textCase, "inherit") ; } .textbutton.xs { font-family: var(--textbutton-xs-fontFamily) ; font-size: var(--textbutton-xs-fontSize) ; font-weight: var(--textbutton-xs-fontWeight) ; letter-spacing: var(--textbutton-xs-letterSpacing) ; line-height: calc(var(--textbutton-xs-lineHeight)) ; text-transform: var(--textbutton-xs-textCase, "inherit") ; } .textbutton.\32xs { font-family: var(--textbutton-2xs-fontFamily) ; font-size: var(--textbutton-2xs-fontSize) ; font-weight: var(--textbutton-2xs-fontWeight) ; letter-spacing: var(--textbutton-2xs-letterSpacing) ; line-height: calc(var(--textbutton-2xs-lineHeight)) ; text-transform: var(--textbutton-2xs-textCase, "inherit") ; } .style_label.md { font-family: var(--style_label-md-fontFamily) ; font-size: var(--style_label-md-fontSize) ; font-weight: var(--style_label-md-fontWeight) ; letter-spacing: var(--style_label-md-letterSpacing) ; line-height: calc(var(--style_label-md-lineHeight)) ; text-transform: var(--style_label-md-textCase, "inherit") ; } .style_label.sm { font-family: var(--style_label-sm-fontFamily) ; font-size: var(--style_label-sm-fontSize) ; font-weight: var(--style_label-sm-fontWeight) ; letter-spacing: var(--style_label-sm-letterSpacing) ; line-height: calc(var(--style_label-sm-lineHeight)) ; text-transform: var(--style_label-sm-textCase, "inherit") ; } .t-paragraph { font-size: var(--font-size-md); color: var(--color-text-primary_on_light_bg); font-weight: var(--font-weight-500); } .t-paragraph.line-height-xl { line-height: var(--line-height-xl); } .t-paragraph.line-height-lg { line-height: var(--line-height-lg); } .t-paragraph.line-height-md { line-height: var(--line-height-md); } .t-paragraph.line-height-sm { line-height: var(--line-height-sm); } .t-paragraph.line-height-xs { line-height: var(--line-height-xs); } .t-paragraph.font-size-2xl { font-size: var(--font-size-2xl); } .t-paragraph.font-size-xl { font-size: var(--font-size-xl); } .t-paragraph.font-size-lg { font-size: var(--font-size-lg); } .t-paragraph.font-size-md { font-size: var(--font-size-md); } .t-paragraph.font-size-sm { font-size: var(--font-size-sm); } .t-paragraph.font-size-xs { font-size: var(--font-size-xs); } .t-paragraph.font-size-2xs { font-size: var(--font-size-2xs); } .t-paragraph.letter-spacing-sm { letter-spacing: var(--letter_spacing-sm); } .t-paragraph.letter-spacing-xs { letter-spacing: var(--letter_spacing-xs); } .t-paragraph .values { margin-top: var(--spacing-16); color: var(--color-grey-600); font-size: var(--font-size-sm); } .icon-utility-chevron-16px-left, .icon-utility-chevron-16px-right, .icon-utility-chevron-16px-up, .icon-utility-chevron-16px-down { width: 16px; height: 16px; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { caret-color: #000; } /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ .ds-search-results.search-results { margin-top: 28px; } @media (max-width: 767px) { .ds-search-results.search-results { margin-top: 0; } } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .js-search-results, .search-page-only ~ .container .js-search-results, .ds-plp-page .js-search-results { padding: 0; } } .search-page-only ~ .ds-search-results .search-nav, .search-page-only ~ .container .search-nav, .ds-plp-page .search-nav { display: none; } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .header-border-bottom, .search-page-only ~ .container .header-border-bottom, .ds-plp-page .header-border-bottom { border-bottom: var(--border-width-1) solid var(--border-color); } } .search-page-only ~ .ds-search-results .search-banner, .search-page-only ~ .container .search-banner, .ds-plp-page .search-banner { display: none; } .search-page-only ~ .ds-search-results .hide, .search-page-only ~ .container .hide, .ds-plp-page .hide { display: none; } .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements { -webkit-transition-property: opacity; transition-property: opacity; will-change: opacity; } .search-page-only ~ .ds-search-results .ds-main-heading, .search-page-only ~ .container .ds-main-heading, .ds-plp-page .ds-main-heading { color: var(--filter-text-primary-color); margin-top: var(--spacing-16); margin-bottom: var(--spacing-24); font-family: var(--heading-md-fontFamily) ; font-size: var(--heading-md-fontSize) ; font-weight: var(--heading-md-fontWeight) ; letter-spacing: var(--heading-md-letterSpacing) ; line-height: calc(var(--heading-md-lineHeight)) ; text-transform: var(--heading-md-textCase, "inherit") ; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-main-heading, .search-page-only ~ .container .ds-main-heading, .ds-plp-page .ds-main-heading { margin-top: 0; padding-left: 0; margin-bottom: var(--spacing-24); } } .search-page-only ~ .ds-search-results .experience-dynamic-dynamicCategoryHeader .ds-main-heading, .search-page-only ~ .container .experience-dynamic-dynamicCategoryHeader .ds-main-heading, .ds-plp-page .experience-dynamic-dynamicCategoryHeader .ds-main-heading { margin-top: 0; } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .experience-dynamic-dynamicCategoryHeader .ds-main-heading, .search-page-only ~ .container .experience-dynamic-dynamicCategoryHeader .ds-main-heading, .ds-plp-page .experience-dynamic-dynamicCategoryHeader .ds-main-heading { padding-top: 0; } } .search-page-only ~ .ds-search-results .ds-main-heading-search, .search-page-only ~ .container .ds-main-heading-search, .ds-plp-page .ds-main-heading-search { text-align: center; margin-top: var(--spacing-12); margin-bottom: var(--spacing-24); } .search-page-only ~ .ds-search-results .ds-main-heading-search span, .search-page-only ~ .container .ds-main-heading-search span, .ds-plp-page .ds-main-heading-search span { color: var(--color-black); margin-top: var(--spacing-32); margin-bottom: 0; font-family: var(--heading-lg-fontFamily) ; font-size: var(--heading-lg-fontSize) ; font-weight: var(--heading-lg-fontWeight) ; letter-spacing: var(--heading-lg-letterSpacing) ; line-height: calc(var(--heading-lg-lineHeight)) ; text-transform: var(--heading-lg-textCase, "inherit") ; } .pvhthus .search-page-only ~ .ds-search-results .ds-main-heading-search span, .pvhthca .search-page-only ~ .ds-search-results .ds-main-heading-search span, .pvhthus .search-page-only ~ .container .ds-main-heading-search span, .pvhthca .search-page-only ~ .container .ds-main-heading-search span, .pvhthus .ds-plp-page .ds-main-heading-search span, .pvhthca .ds-plp-page .ds-main-heading-search span { font-weight: 700; } .search-page-only ~ .ds-search-results .ds-main-heading-search span:first-child, .search-page-only ~ .container .ds-main-heading-search span:first-child, .ds-plp-page .ds-main-heading-search span:first-child { color: var(--color-grey-600); } .search-page-only ~ .ds-search-results .ds-main-heading-search span:last-child, .search-page-only ~ .container .ds-main-heading-search span:last-child, .ds-plp-page .ds-main-heading-search span:last-child { color: var(--color-brand-primary); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-main-heading-search span, .search-page-only ~ .container .ds-main-heading-search span, .ds-plp-page .ds-main-heading-search span { font-size: var(--heading-sm-fontSize); } } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-main-heading-search, .search-page-only ~ .container .ds-main-heading-search, .ds-plp-page .ds-main-heading-search { margin-top: var(--spacing-16); margin-bottom: var(--spacing-20); } .pvhthus .search-page-only ~ .ds-search-results .ds-main-heading-search, .pvhthca .search-page-only ~ .ds-search-results .ds-main-heading-search, .pvhthus .search-page-only ~ .container .ds-main-heading-search, .pvhthca .search-page-only ~ .container .ds-main-heading-search, .pvhthus .ds-plp-page .ds-main-heading-search, .pvhthca .ds-plp-page .ds-main-heading-search { margin-top: 0; } } .search-page-only ~ .ds-search-results .ds-l1-categories ul, .search-page-only ~ .container .ds-l1-categories ul, .ds-plp-page .ds-l1-categories ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin: var(--spacing-4) 0 var(--spacing-32); } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value, .search-page-only ~ .container .ds-l1-categories ul .category-value, .ds-plp-page .ds-l1-categories ul .category-value { list-style: none; height: 44px; padding-left: var(--spacing-32); padding-right: var(--spacing-32); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: var(--border-width-1) solid var(--color-grey-400); text-align: center; line-height: 0; border-radius: 100px; margin-right: var(--spacing-8); background-color: var(--search-list-text-color); position: relative; } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value .category-element, .search-page-only ~ .container .ds-l1-categories ul .category-value .category-element, .ds-plp-page .ds-l1-categories ul .category-value .category-element { margin-bottom: 0; } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value .category-element::after, .search-page-only ~ .container .ds-l1-categories ul .category-value .category-element::after, .ds-plp-page .ds-l1-categories ul .category-value .category-element::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value .category-name, .search-page-only ~ .container .ds-l1-categories ul .category-value .category-name, .ds-plp-page .ds-l1-categories ul .category-value .category-name { font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; color: var(--search-bg-color); } .pvhckus .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value .category-name, .pvhckca .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value .category-name, .pvhckus .search-page-only ~ .container .ds-l1-categories ul .category-value .category-name, .pvhckca .search-page-only ~ .container .ds-l1-categories ul .category-value .category-name, .pvhckus .ds-plp-page .ds-l1-categories ul .category-value .category-name, .pvhckca .ds-plp-page .ds-l1-categories ul .category-value .category-name { display: inline-block; margin-bottom: var(--spacing-2); } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value.selected, .search-page-only ~ .container .ds-l1-categories ul .category-value.selected, .ds-plp-page .ds-l1-categories ul .category-value.selected { background-color: var(--search-bg-color); } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value.selected .category-name, .search-page-only ~ .container .ds-l1-categories ul .category-value.selected .category-name, .ds-plp-page .ds-l1-categories ul .category-value.selected .category-name { color: var(--btn-outline-bg-color); } @media screen and (min-width: 1280px) { .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value:hover, .search-page-only ~ .container .ds-l1-categories ul .category-value:hover, .ds-plp-page .ds-l1-categories ul .category-value:hover { background-color: var(--search-bg-color); } .search-page-only ~ .ds-search-results .ds-l1-categories ul .category-value:hover .category-name, .search-page-only ~ .container .ds-l1-categories ul .category-value:hover .category-name, .ds-plp-page .ds-l1-categories ul .category-value:hover .category-name { color: var(--btn-outline-bg-color); } } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-l1-categories ul, .search-page-only ~ .container .ds-l1-categories ul, .ds-plp-page .ds-l1-categories ul { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; margin-left: -24px; margin-right: -24px; overflow-x: auto; ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-hidden; margin-bottom: 0; } .pvhckus .search-page-only ~ .ds-search-results .ds-l1-categories ul, .pvhckca .search-page-only ~ .ds-search-results .ds-l1-categories ul, .pvhckus .search-page-only ~ .container .ds-l1-categories ul, .pvhckca .search-page-only ~ .container .ds-l1-categories ul, .pvhckus .ds-plp-page .ds-l1-categories ul, .pvhckca .ds-plp-page .ds-l1-categories ul { padding-top: var(--spacing-2); } .search-page-only ~ .ds-search-results .ds-l1-categories ul::-webkit-scrollbar, .search-page-only ~ .container .ds-l1-categories ul::-webkit-scrollbar, .ds-plp-page .ds-l1-categories ul::-webkit-scrollbar { display: none; } .search-page-only ~ .ds-search-results .ds-l1-categories ul li:first-child, .search-page-only ~ .container .ds-l1-categories ul li:first-child, .ds-plp-page .ds-l1-categories ul li:first-child { margin-left: var(--spacing-24); } .search-page-only ~ .ds-search-results .ds-l1-categories ul li:first-child, .search-page-only ~ .container .ds-l1-categories ul li:first-child, .ds-plp-page .ds-l1-categories ul li:first-child { margin-left: var(--spacing-24); } .search-page-only ~ .ds-search-results .ds-l1-categories ul li:last-child, .search-page-only ~ .container .ds-l1-categories ul li:last-child, .ds-plp-page .ds-l1-categories ul li:last-child { margin-right: var(--spacing-24); } } .search-page-only ~ .ds-search-results .ds-similier-categories .ds-similier-pages, .search-page-only ~ .container .ds-similier-categories .ds-similier-pages, .ds-plp-page .ds-similier-categories .ds-similier-pages { overflow-y: hidden !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; max-width: 100%; overflow: auto; list-style: none; padding-bottom: var(--spacing-24); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-similier-categories .ds-similier-pages, .search-page-only ~ .container .ds-similier-categories .ds-similier-pages, .ds-plp-page .ds-similier-categories .ds-similier-pages { padding-bottom: var(--spacing-20); } } .search-page-only ~ .ds-search-results .ds-similier-categories .ds-similier-pages li a, .search-page-only ~ .container .ds-similier-categories .ds-similier-pages li a, .ds-plp-page .ds-similier-categories .ds-similier-pages li a { color: var(--link-secondary-color); padding-bottom: var(--spacing-8); padding-right: var(--spacing-24); white-space: nowrap; text-transform: capitalize; font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } .search-page-only ~ .ds-search-results .ds-similier-categories .ds-similier-pages li a:hover, .search-page-only ~ .container .ds-similier-categories .ds-similier-pages li a:hover, .ds-plp-page .ds-similier-categories .ds-similier-pages li a:hover { color: var(--filter-text-primary-color); text-decoration: underline; } .search-page-only ~ .ds-search-results .ds-similier-categories .ds-similier-pages li a.category-bold, .search-page-only ~ .container .ds-similier-categories .ds-similier-pages li a.category-bold, .ds-plp-page .ds-similier-categories .ds-similier-pages li a.category-bold { color: var(--filter-text-primary-color); text-decoration: underline; } .search-page-only ~ .ds-search-results .ds-similier-categories .ds-similier-pages .l4-cat-name-black, .search-page-only ~ .container .ds-similier-categories .ds-similier-pages .l4-cat-name-black, .ds-plp-page .ds-similier-categories .ds-similier-pages .l4-cat-name-black { color: var(--filter-text-primary-color); } .search-page-only ~ .ds-search-results .ds-filter-column .product-grid, .search-page-only ~ .container .ds-filter-column .product-grid, .ds-plp-page .ds-filter-column .product-grid { margin: 0 -4px; } .search-page-only ~ .ds-search-results .ds-filter-column .product-grid .productTileShow, .search-page-only ~ .container .ds-filter-column .product-grid .productTileShow, .ds-plp-page .ds-filter-column .product-grid .productTileShow { padding: 0 var(--spacing-2); } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .ds-filter-column .product-grid .productTileShow, .search-page-only ~ .container .ds-filter-column .product-grid .productTileShow, .ds-plp-page .ds-filter-column .product-grid .productTileShow { max-width: 50%; } } .search-page-only ~ .ds-search-results .ds-filter-column .product-grid .producttile-transparency, .search-page-only ~ .container .ds-filter-column .product-grid .producttile-transparency, .ds-plp-page .ds-filter-column .product-grid .producttile-transparency { opacity: 0.5; pointer-events: none; } .search-page-only ~ .ds-search-results .icon-close, .search-page-only ~ .ds-search-results .dropdown-icon, .search-page-only ~ .ds-search-results .filter-icon, .search-page-only ~ .container .icon-close, .search-page-only ~ .container .dropdown-icon, .search-page-only ~ .container .filter-icon, .ds-plp-page .icon-close, .ds-plp-page .dropdown-icon, .ds-plp-page .filter-icon { position: absolute; right: 0; font-size: var(--sizing-icon-sm); } .search-page-only ~ .ds-search-results .filtered-list-short, .search-page-only ~ .container .filtered-list-short, .ds-plp-page .filtered-list-short { z-index: 99; background: var(--color-white); padding: 0; } @media (max-width: 767.98px) { .search-page-only ~ .ds-search-results .filtered-list-short, .search-page-only ~ .container .filtered-list-short, .ds-plp-page .filtered-list-short { position: sticky; padding: var(--spacing-24) var(--spacing-24) 0; margin: 0; border: none; -webkit-transition: top 300ms linear; transition: top 300ms linear; will-change: top; } } .nav-hidden .search-page-only ~ .ds-search-results .filtered-list-short, .nav-hidden .search-page-only ~ .container .filtered-list-short, .nav-hidden .ds-plp-page .filtered-list-short { top: 0; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar ul, .search-page-only ~ .container .filtered-list-short .filter-bar ul, .ds-plp-page .filtered-list-short .filter-bar ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar ul li, .search-page-only ~ .container .filtered-list-short .filter-bar ul li, .ds-plp-page .filtered-list-short .filter-bar ul li { list-style: none; margin-bottom: var(--spacing-8); } @media (max-width: 767.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar ul, .search-page-only ~ .container .filtered-list-short .filter-bar ul, .ds-plp-page .filtered-list-short .filter-bar ul { overflow-x: auto; white-space: nowrap; margin-bottom: var(--spacing-16); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-left: -24px; margin-right: -24px; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar ul li, .search-page-only ~ .container .filtered-list-short .filter-bar ul li, .ds-plp-page .filtered-list-short .filter-bar ul li { list-style-type: none; margin-top: var(--spacing-24); margin-bottom: var(--spacing-20); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar ul li:not(.d-none), .search-page-only ~ .container .filtered-list-short .filter-bar ul li:not(.d-none), .ds-plp-page .filtered-list-short .filter-bar ul li:not(.d-none) { margin-left: var(--spacing-24); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar ul li:not(.d-none) ~ :not(.d-none), .search-page-only ~ .container .filtered-list-short .filter-bar ul li:not(.d-none) ~ :not(.d-none), .ds-plp-page .filtered-list-short .filter-bar ul li:not(.d-none) ~ :not(.d-none) { margin-left: 0; } } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value, .ds-plp-page .filtered-list-short .filter-bar .filter-value, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value { border: var(--border-width-1) solid var(--color-grey-200); padding: var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-16); border-radius: var(--border-radius-circle); border-radius: 50px; margin-bottom: var(--spacing-12); margin-right: var(--spacing-12); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value:has(:focus-visible), .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value:has(:focus-visible), .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value:has(:focus-visible), .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value:has(:focus-visible), .ds-plp-page .filtered-list-short .filter-bar .filter-value:has(:focus-visible), .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value:has(:focus-visible) { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button, .ds-plp-page .filtered-list-short .filter-bar .filter-value button, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button { position: relative; color: var(--filter-text-primary-color); padding: 0 var(--spacing-32) 0 0; border: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; text-transform: unset; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pvhthus .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button, .pvhthca .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button, .pvhthus .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button, .pvhthca .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button, .pvhthus .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button, .pvhthca .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button, .pvhthus .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button, .pvhthca .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button, .pvhthus .ds-plp-page .filtered-list-short .filter-bar .filter-value button, .pvhthca .ds-plp-page .filtered-list-short .filter-bar .filter-value button, .pvhthus .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button, .pvhthca .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button { line-height: var(--spacing-12); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button span, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button span, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button span, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button span, .ds-plp-page .filtered-list-short .filter-bar .filter-value button span, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button span { margin-bottom: 0; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button .refinement-count, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button .refinement-count, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button .refinement-count, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button .refinement-count, .ds-plp-page .filtered-list-short .filter-bar .filter-value button .refinement-count, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button .refinement-count { color: var(--text-secondary-light-bg); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button::after, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button::after, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button::after, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button::after, .ds-plp-page .filtered-list-short .filter-bar .filter-value button::after, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button::after { display: none; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value button:focus, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value button:focus, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value button:focus, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value button:focus, .ds-plp-page .filtered-list-short .filter-bar .filter-value button:focus, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value button:focus { outline: none; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll, .ds-plp-page .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll { background: transparent; border: var(--border-width-0) solid var(--color-grey-200); padding-left: 0; color: var(--filter-text-secondary-color); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button, .ds-plp-page .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button { position: relative; color: var(--filter-text-secondary-color); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button, .ds-plp-page .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button { padding-right: 0; } } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button span, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button span, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button span, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button span, .ds-plp-page .filtered-list-short .filter-bar .filter-value.filter-bar-clearAll button span, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value.filter-bar-clearAll button span { text-decoration: underline; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value { margin-bottom: 0; margin-top: var(--spacing-12); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value { margin-bottom: var(--spacing-8); } } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-value:hover, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-value:hover, .ds-plp-page .filtered-list-short .filter-bar .filter-value:hover { border: var(--border-width-1) solid var(--color-grey-600); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .dropdown-icon, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .filter-icon, .search-page-only ~ .container .filtered-list-short .filter-bar .dropdown-icon, .search-page-only ~ .container .filtered-list-short .filter-bar .filter-icon, .ds-plp-page .filtered-list-short .filter-bar .dropdown-icon, .ds-plp-page .filtered-list-short .filter-bar .filter-icon { color: #696969; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .icon-close, .search-page-only ~ .container .filtered-list-short .filter-bar .icon-close, .ds-plp-page .filtered-list-short .filter-bar .icon-close { color: #808080; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll), .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll), .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll) { background: var(--btn-bg-color-dark); border: 0; } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll) button, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll) button, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll) button { color: var(--color-white); } .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):hover, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):active, .search-page-only ~ .ds-search-results .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):focus, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):hover, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):active, .search-page-only ~ .container .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):focus, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):hover, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):active, .ds-plp-page .filtered-list-short .filter-bar .selected-filter-value:not(.filter-bar-clearAll):focus { background-color: var(--color-grey-800); } .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements, .search-page-only ~ .container .filtered-list-short .selected-refinements, .ds-plp-page .filtered-list-short .selected-refinements { padding-left: var(--spacing-24); padding-right: var(--spacing-24); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements .selected-filter-bar, .search-page-only ~ .container .filtered-list-short .selected-refinements .selected-filter-bar, .ds-plp-page .filtered-list-short .selected-refinements .selected-filter-bar { padding-top: var(--spacing-8); padding-left: var(--spacing-24); } } .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements .filter-value .filter-bar-clearAll, .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements .selected-filter-value .filter-bar-clearAll, .search-page-only ~ .container .filtered-list-short .selected-refinements .filter-value .filter-bar-clearAll, .search-page-only ~ .container .filtered-list-short .selected-refinements .selected-filter-value .filter-bar-clearAll, .ds-plp-page .filtered-list-short .selected-refinements .filter-value .filter-bar-clearAll, .ds-plp-page .filtered-list-short .selected-refinements .selected-filter-value .filter-bar-clearAll { padding-left: var(--spacing-4); margin-right: 0; } .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements .filter-value.all-filters, .search-page-only ~ .container .filtered-list-short .selected-refinements .filter-value.all-filters, .ds-plp-page .filtered-list-short .selected-refinements .filter-value.all-filters { display: none; } @media screen and (min-width: 1400px) { .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements, .search-page-only ~ .container .filtered-list-short .selected-refinements, .ds-plp-page .filtered-list-short .selected-refinements { padding-left: var(--spacing-38); padding-right: var(--spacing-38); } } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .selected-refinements, .search-page-only ~ .container .filtered-list-short .selected-refinements, .ds-plp-page .filtered-list-short .selected-refinements { padding-left: 0; padding-right: 0; } } .search-page-only ~ .ds-search-results .filtered-list-short .sticky-filter-bar, .search-page-only ~ .container .filtered-list-short .sticky-filter-bar, .ds-plp-page .filtered-list-short .sticky-filter-bar { position: fixed; width: 100%; top: 50px; z-index: 9; background-color: var(--color-white); padding-bottom: 28px; padding-top: var(--spacing-24); margin-top: 0; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .pvhckus .search-page-only ~ .ds-search-results .filtered-list-short .sticky-filter-bar, .pvhckca .search-page-only ~ .ds-search-results .filtered-list-short .sticky-filter-bar, .pvhckus .search-page-only ~ .container .filtered-list-short .sticky-filter-bar, .pvhckca .search-page-only ~ .container .filtered-list-short .sticky-filter-bar, .pvhckus .ds-plp-page .filtered-list-short .sticky-filter-bar, .pvhckca .ds-plp-page .filtered-list-short .sticky-filter-bar { top: 80px; } .nav-hidden .search-page-only ~ .ds-search-results .filtered-list-short .sticky-filter-bar, .nav-hidden .search-page-only ~ .container .filtered-list-short .sticky-filter-bar, .nav-hidden .ds-plp-page .filtered-list-short .sticky-filter-bar { /* created a 8px (8 because thats an available token) overlap to avoid gap between header and sticky filter */ top: calc(var(--spacing-8) * -1); padding-top: var(--spacing-32); } .search-page-only ~ .ds-search-results .filtered-list-short .sticky-filter-bar .filter-value.all-filters, .search-page-only ~ .container .filtered-list-short .sticky-filter-bar .filter-value.all-filters, .ds-plp-page .filtered-list-short .sticky-filter-bar .filter-value.all-filters { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .search-page-only ~ .ds-search-results .filtered-list-short .sticky-filter-bar .selected-filter-value, .search-page-only ~ .container .filtered-list-short .sticky-filter-bar .selected-filter-value, .ds-plp-page .filtered-list-short .sticky-filter-bar .selected-filter-value { margin-top: 0; margin-bottom: var(--spacing-12); } .search-page-only ~ .ds-search-results .filtered-list-short .short-inline, .search-page-only ~ .container .filtered-list-short .short-inline, .ds-plp-page .filtered-list-short .short-inline { display: none; } @media (max-width: 767.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .short-inline, .search-page-only ~ .container .filtered-list-short .short-inline, .ds-plp-page .filtered-list-short .short-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-bottom: 0; } } .search-page-only ~ .ds-search-results .filtered-list-short .short-inline .search-result-count, .search-page-only ~ .ds-search-results .filtered-list-short .short-inline .search-count, .search-page-only ~ .container .filtered-list-short .short-inline .search-result-count, .search-page-only ~ .container .filtered-list-short .short-inline .search-count, .ds-plp-page .filtered-list-short .short-inline .search-result-count, .ds-plp-page .filtered-list-short .short-inline .search-count { color: var(--link-secondary-color); margin: 0; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; display: none; } @media (max-width: 767.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .short-inline .search-result-count, .search-page-only ~ .ds-search-results .filtered-list-short .short-inline .search-count, .search-page-only ~ .container .filtered-list-short .short-inline .search-result-count, .search-page-only ~ .container .filtered-list-short .short-inline .search-count, .ds-plp-page .filtered-list-short .short-inline .search-result-count, .ds-plp-page .filtered-list-short .short-inline .search-count { display: block; } } .search-page-only ~ .ds-search-results .filtered-list-short .sort-container, .search-page-only ~ .container .filtered-list-short .sort-container, .ds-plp-page .filtered-list-short .sort-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main, .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main, .ds-plp-page .filtered-list-short .sort-container .sort-by-main { margin-bottom: 0; } @media (max-width: 767.98px) { .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main, .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main, .ds-plp-page .filtered-list-short .sort-container .sort-by-main { display: none; } } .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main select.form-control, .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main select.form-control, .ds-plp-page .filtered-list-short .sort-container .sort-by-main select.form-control { padding-top: 0; padding-bottom: 0; border: none; width: auto; min-width: 200px; font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main select.form-control:valid ~ label, .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main select.form-control:valid ~ label, .ds-plp-page .filtered-list-short .sort-container .sort-by-main select.form-control:valid ~ label { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; top: 0; } .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .ds-plp-page .filtered-list-short .sort-container .sort-by-main .dropdown-icon { top: var(--spacing-12); } .pvhthus .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .pvhthca .search-page-only ~ .ds-search-results .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .pvhthus .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .pvhthca .search-page-only ~ .container .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .pvhthus .ds-plp-page .filtered-list-short .sort-container .sort-by-main .dropdown-icon, .pvhthca .ds-plp-page .filtered-list-short .sort-container .sort-by-main .dropdown-icon { top: var(--spacing-16); } .search-page-only ~ .ds-search-results .ds-show-filters-btn-mobile, .search-page-only ~ .container .ds-show-filters-btn-mobile, .ds-plp-page .ds-show-filters-btn-mobile { border: none; background: transparent; color: var(--filter-text-primary-color); font-size: var(--font-size-sm); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 0; display: none; } .search-page-only ~ .ds-search-results .ds-show-filters-btn-mobile .icon-filters, .search-page-only ~ .container .ds-show-filters-btn-mobile .icon-filters, .ds-plp-page .ds-show-filters-btn-mobile .icon-filters { margin-right: var(--spacing-4); vertical-align: sub; } @media (max-width: 767.98px) { .search-page-only ~ .ds-search-results .ds-show-filters-btn-mobile, .search-page-only ~ .container .ds-show-filters-btn-mobile, .ds-plp-page .ds-show-filters-btn-mobile { display: block; } } .search-page-only ~ .ds-search-results .img-quickview-container, .search-page-only ~ .container .img-quickview-container, .ds-plp-page .img-quickview-container { position: relative; } .search-page-only ~ .ds-search-results .img-quickview-container .badge-container, .search-page-only ~ .container .img-quickview-container .badge-container, .ds-plp-page .img-quickview-container .badge-container { position: absolute; font-size: var(--font-size-xs); letter-spacing: var(--letter_spacing-sm); top: var(--spacing-16); left: var(--spacing-32); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .img-quickview-container .badge-container, .search-page-only ~ .container .img-quickview-container .badge-container, .ds-plp-page .img-quickview-container .badge-container { top: auto; bottom: var(--spacing-20); left: var(--spacing-16); background: transparent; height: auto; padding: 0; } } .search-page-only ~ .ds-search-results .ds-rating .ds-rating-container, .search-page-only ~ .container .ds-rating .ds-rating-container, .ds-plp-page .ds-rating .ds-rating-container { margin-top: var(--spacing-12); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-rating .ds-rating-container, .search-page-only ~ .container .ds-rating .ds-rating-container, .ds-plp-page .ds-rating .ds-rating-container { margin-top: 0; } } .search-page-only ~ .ds-search-results .ds-rating .ds-rating-container .ds-star-rating, .search-page-only ~ .container .ds-rating .ds-rating-container .ds-star-rating, .ds-plp-page .ds-rating .ds-rating-container .ds-star-rating { margin-left: var(--spacing-4); } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-rating .ds-rating-container .ds-star-rating, .search-page-only ~ .container .ds-rating .ds-rating-container .ds-star-rating, .ds-plp-page .ds-rating .ds-rating-container .ds-star-rating { margin-top: 0; } } .search-page-only ~ .ds-search-results .ds-rating .ds-rating-container .ds-counter-rating, .search-page-only ~ .container .ds-rating .ds-rating-container .ds-counter-rating, .ds-plp-page .ds-rating .ds-rating-container .ds-counter-rating { -ms-flex-item-align: end; align-self: flex-end; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-rating .ds-rating-container .ds-counter-rating, .search-page-only ~ .container .ds-rating .ds-rating-container .ds-counter-rating, .ds-plp-page .ds-rating .ds-rating-container .ds-counter-rating { margin-top: 0; } } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter { display: none; } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter { display: block; position: fixed; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 500; width: 100%; height: var(--vh); -webkit-transition-property: left; transition-property: left; will-change: left; } .search-page-only ~ .ds-search-results .ds-left-filter.left-filter, .search-page-only ~ .container .ds-left-filter.left-filter, .ds-plp-page .ds-left-filter.left-filter { left: 0; top: 100%; } .search-page-only ~ .ds-search-results .ds-left-filter.filter-open, .search-page-only ~ .container .ds-left-filter.filter-open, .ds-plp-page .ds-left-filter.filter-open { top: 0; } .search-page-only ~ .ds-search-results .ds-left-filter.filter-open .fltroverlays, .search-page-only ~ .container .ds-left-filter.filter-open .fltroverlays, .ds-plp-page .ds-left-filter.filter-open .fltroverlays { opacity: 0.4; } .search-page-only ~ .ds-search-results .ds-left-filter .overlay-filter, .search-page-only ~ .container .ds-left-filter .overlay-filter, .ds-plp-page .ds-left-filter .overlay-filter { position: fixed; left: 0; top: 0; z-index: 1; background-color: var(--color-black); opacity: 0.4; width: 100%; height: 100vh; overflow: auto; } .search-page-only ~ .ds-search-results .ds-left-filter .overlay-filters, .search-page-only ~ .container .ds-left-filter .overlay-filters, .ds-plp-page .ds-left-filter .overlay-filters { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; } .search-page-only ~ .ds-search-results .ds-left-filter .refinement-bar-flt, .search-page-only ~ .container .ds-left-filter .refinement-bar-flt, .ds-plp-page .ds-left-filter .refinement-bar-flt { min-width: 375px; width: 100%; background-color: var(--color-white); position: fixed; z-index: 1234; height: 100vh; overflow-y: auto; } .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays { background-color: var(--color-black); bottom: 0; left: 0; opacity: 0; position: fixed; right: 0; top: 0; -webkit-transition-property: opacity; transition-property: opacity; will-change: opacity; } } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .pdp-link, .search-page-only ~ .container .ds-product-tile .tile-body .pdp-link, .ds-plp-page .ds-product-tile .tile-body .pdp-link { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .pdp-link .ds-product-name span, .search-page-only ~ .container .ds-product-tile .tile-body .pdp-link .ds-product-name span, .ds-plp-page .ds-product-tile .tile-body .pdp-link .ds-product-name span { color: var(--product-card-text-color); font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .pdp-link .ds-product-name span, .search-page-only ~ .container .ds-product-tile .tile-body .pdp-link .ds-product-name span, .ds-plp-page .ds-product-tile .tile-body .pdp-link .ds-product-name span { font-size: var(--font-size-xs); } } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .pdp-link .ds-product-name span:hover, .search-page-only ~ .container .ds-product-tile .tile-body .pdp-link .ds-product-name span:hover, .ds-plp-page .ds-product-tile .tile-body .pdp-link .ds-product-name span:hover { color: var(--link-primary-color-hover); text-decoration: underline; } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .ds-product-price, .search-page-only ~ .container .ds-product-tile .tile-body .ds-product-price, .ds-plp-page .ds-product-tile .tile-body .ds-product-price { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; margin: var(--spacing-8) 0 0 0; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .ds-product-price, .search-page-only ~ .container .ds-product-tile .tile-body .ds-product-price, .ds-plp-page .ds-product-tile .tile-body .ds-product-price { margin-top: 6px; font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .ds-product-price span, .search-page-only ~ .container .ds-product-tile .tile-body .ds-product-price span, .ds-plp-page .ds-product-tile .tile-body .ds-product-price span { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; margin-bottom: 0; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .ds-product-price span, .search-page-only ~ .container .ds-product-tile .tile-body .ds-product-price span, .ds-plp-page .ds-product-tile .tile-body .ds-product-price span { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .product-flag, .search-page-only ~ .container .ds-product-tile .tile-body .product-flag, .ds-plp-page .ds-product-tile .tile-body .product-flag { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .promotions-container-wrapper, .search-page-only ~ .container .ds-product-tile .tile-body .promotions-container-wrapper, .ds-plp-page .ds-product-tile .tile-body .promotions-container-wrapper { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; margin: var(--spacing-8) 0 0 0; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .promotions-container-wrapper, .search-page-only ~ .container .ds-product-tile .tile-body .promotions-container-wrapper, .ds-plp-page .ds-product-tile .tile-body .promotions-container-wrapper { margin-top: 6px; } } .search-page-only ~ .ds-search-results .ds-product-tile .tile-body .swatch-more-colors a, .search-page-only ~ .container .ds-product-tile .tile-body .swatch-more-colors a, .ds-plp-page .ds-product-tile .tile-body .swatch-more-colors a { position: relative; bottom: var(--spacing-2); right: var(--spacing-4); } .search-page-only ~ .ds-search-results .ds-product-tile .ds-rating.ratings, .search-page-only ~ .container .ds-product-tile .ds-rating.ratings, .ds-plp-page .ds-product-tile .ds-rating.ratings { margin-left: var(--spacing-4); } .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide, .ds-plp-page .plp-img-container.slick-initialized .slick-slide { opacity: 0; } .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-property: opacity; transition-property: opacity; will-change: opacity; opacity: 1; } .search-page-only ~ .ds-search-results .ds-show-more, .search-page-only ~ .container .ds-show-more, .ds-plp-page .ds-show-more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: var(--spacing-20); margin-bottom: var(--spacing-44); } .search-page-only ~ .ds-search-results .ds-show-more .show-count, .search-page-only ~ .container .ds-show-more .show-count, .ds-plp-page .ds-show-more .show-count { color: var(--filter-text-secondary-color); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; margin: 0 0 27px; } .search-page-only ~ .ds-search-results .ds-show-more button.ds-load-more, .search-page-only ~ .container .ds-show-more button.ds-load-more, .ds-plp-page .ds-show-more button.ds-load-more { width: 414px; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .ds-show-more button.ds-load-more, .search-page-only ~ .container .ds-show-more button.ds-load-more, .ds-plp-page .ds-show-more button.ds-load-more { width: 327px; } } .search-page-only ~ .ds-search-results .seo-content-container--title, .search-page-only ~ .container .seo-content-container--title, .ds-plp-page .seo-content-container--title { color: var(--color-brand-primary); margin-bottom: var(--spacing-8); text-align: left; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .search-page-only ~ .ds-search-results .seo-content-container--description, .search-page-only ~ .container .seo-content-container--description, .ds-plp-page .seo-content-container--description { color: var(--link-secondary-color); text-align: left; margin-bottom: var(--spacing-80); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .seo-content-container--description, .search-page-only ~ .container .seo-content-container--description, .ds-plp-page .seo-content-container--description { margin-bottom: var(--spacing-56); } } @media (max-width: 767px) { .search-page-only ~ .ds-search-results .seo-content-container, .search-page-only ~ .container .seo-content-container, .ds-plp-page .seo-content-container { padding: 0 var(--spacing-24); } } .search-page-only ~ .ds-search-results .search-result-count.results-count, .search-page-only ~ .ds-search-results .search-count, .search-page-only ~ .container .search-result-count.results-count, .search-page-only ~ .container .search-count, .ds-plp-page .search-result-count.results-count, .ds-plp-page .search-count { margin: 0; } @media only screen and (max-width: 991.98px) { .search-page-only ~ .ds-search-results .search-result-count.results-count, .search-page-only ~ .ds-search-results .search-count, .search-page-only ~ .container .search-result-count.results-count, .search-page-only ~ .container .search-count, .ds-plp-page .search-result-count.results-count, .ds-plp-page .search-count { margin-bottom: var(--spacing-16); display: none; } } .search-page-only ~ .ds-search-results .sort-by-main, .search-page-only ~ .container .sort-by-main, .ds-plp-page .sort-by-main { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; color: var(--text-secondary-light-bg); } .search-page-only ~ .ds-search-results .sort-by-main .separator, .search-page-only ~ .container .sort-by-main .separator, .ds-plp-page .sort-by-main .separator { color: var(--color-grey-200); } .search-page-only ~ .ds-search-results .sort-by-main .separator, .search-page-only ~ .ds-search-results .sort-by-main .results-count, .search-page-only ~ .container .sort-by-main .separator, .search-page-only ~ .container .sort-by-main .results-count, .ds-plp-page .sort-by-main .separator, .ds-plp-page .sort-by-main .results-count { display: inline-block; margin-right: var(--spacing-12); } .search-page-only ~ .ds-search-results .sort-by-main .filter-value, .search-page-only ~ .container .sort-by-main .filter-value, .ds-plp-page .sort-by-main .filter-value { min-width: 160px; text-align: left; margin-left: var(--spacing-4); -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: var(--line-height-sm); } .search-page-only ~ .ds-search-results .sort-by-main .dropdown-icon, .search-page-only ~ .container .sort-by-main .dropdown-icon, .ds-plp-page .sort-by-main .dropdown-icon { right: var(--spacing-12); } .search-page-only ~ .ds-search-results .ds-search-results.search-results, .search-page-only ~ .container .ds-search-results.search-results, .ds-plp-page .ds-search-results.search-results { overflow-x: hidden; } .search-result-count.hide, .search-count.hide { display: none; } @media (min-width: 992px) { .menu-open .ds-plp-page .filtered-list-short .sticky-filter-bar .sort-container .sort-by-main { margin-right: var(--scrollbarwidth); } } @media only screen and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1366px) and (pointer: coarse) { .ds-search-results.search-results .quickview.quickview-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; } .ds-search-results.search-results .quickview.quickview-mobile .quickview__button { display: block; } .ds-search-results.search-results .quickview.quickview-mobile .quickview__button span { display: -webkit-box; display: -ms-flexbox; display: flex; } .ds-search-results.search-results .quickview.quickview-mobile .quickview__button span.icon-qv-plus { display: block; } .ds-search-results.search-results .quickview.quickview-mobile .quickview__button span.quickview__button-name { display: none; } } .search-page-only .ds-container-fluid, .plp-only .ds-container-fluid { max-width: 100%; } .search-page-only .ds-container, .plp-only .ds-container { max-width: 100%; } .ds-offcanvas { width: 100%; max-width: auto; } @media (max-width: 767px) { .ds-offcanvas { position: fixed; z-index: 500; max-width: 468px; height: 100vh; background-color: var(--color-white); overflow-y: auto; top: 100%; } .filter-open .ds-offcanvas { top: 0; } } .ds-offcanvas.ds-sort-filter { padding-left: var(--spacing-32); padding-right: var(--spacing-32); } @media (max-width: 767px) { .ds-offcanvas.ds-sort-filter { border-top: none; } } .ds-offcanvas.ds-sort-filter .clearSectionBtn { color: var(--filter-text-secondary-color); position: relative; cursor: pointer; } .ds-offcanvas.ds-sort-filter .clearSectionBtn::after { content: ""; height: 1px; width: var(--spacing-32); background-color: var(--filter-text-secondary-color); position: absolute; left: var(--spacing-24); bottom: 1px; } .ds-offcanvas.ds-sort-filter .ds-filter-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: var(--spacing-32); padding-bottom: var(--spacing-32); padding-left: 0; padding-right: 0; background: var(--color-white); position: sticky; top: 0; z-index: 1; border-bottom: var(--border-width-1) solid var(--color-grey-200); } .ds-offcanvas.ds-sort-filter .ds-filter-head .title { font-size: var(--font-size-md); color: var(--filter-text-primary-color); font-weight: var(--font-weight-400); letter-spacing: var(--letter_spacing-sm); } .ds-offcanvas.ds-sort-filter .ds-filter-head svg { cursor: pointer; margin: var(--spacing-4) var(--spacing-8) 0 0; width: var(--sizing-icon-sm); height: var(--sizing-icon-sm); } @media (min-width: 768px) { .ds-offcanvas.ds-sort-filter .ds-filter-head { display: none; } } .ds-offcanvas.ds-sort-filter .ds-filter-head.thsite-fltheader .title { font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .ds-offcanvas.ds-sort-filter details { padding: 0; margin-bottom: 0; border-color: var(--color-grey-200); } .ds-offcanvas.ds-sort-filter details summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--spacing-24) 0; } .ds-offcanvas.ds-sort-filter details summary h3 { font-size: var(--font-size-sm); color: var(--color-black); margin-bottom: 0; font-family: var(--base-font-family) !important; font-weight: var(--font-weight-500); line-height: var(--line-height-md); } .ds-offcanvas.ds-sort-filter details summary h3 span { font-weight: var(--font-weight-500) !important; font-size: var(--font-size-sm); } .ds-offcanvas.ds-sort-filter details summary .accordionIcon--open { font-size: var(--font-size-xs); color: var(--color-grey-600); } .ds-offcanvas.ds-sort-filter details summary .accordionIcon--open svg { width: var(--spacing-16); height: var(--spacing-16); } .ds-offcanvas.ds-sort-filter details summary .accordionIcon--close { font-size: var(--font-size-xs); color: var(--color-text-secondary_on_dark_bg); } .ds-offcanvas.ds-sort-filter details span { margin-bottom: 0; text-align: right; } .ds-offcanvas.ds-sort-filter details .content ul { padding: 0; margin: 0; } .ds-offcanvas.ds-sort-filter .refinementValue_size { font-size: var(--font-size-sm); padding: 0; max-width: 82px; width: 100%; margin-left: 0.5px; margin-right: 0.5px; margin-bottom: var(--spacing-12); } .ds-offcanvas.ds-sort-filter .content-inner.filter-resize { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--spacing-8); } .ds-offcanvas.ds-sort-filter .ds-color-attribute { margin-bottom: var(--spacing-16); margin-left: var(--spacing-2); -ms-flex-preferred-size: 47%; flex-basis: 47%; } @media only screen and (min-width: 992px) and (max-width: 1279.98px) { .ds-offcanvas.ds-sort-filter .ds-color-attribute { -ms-flex-preferred-size: 97%; flex-basis: 97%; } } .ds-offcanvas.ds-sort-filter .ds-color-attribute button { outline: none; border: none; background: var(--color-white); padding: 0; } .ds-offcanvas.ds-sort-filter .ds-color-attribute a.refinementValue_color:focus-visible { /* stylelint-disable */ outline: 2px solid var(--color-brand-primary); outline-offset: 2px; border-radius: 2px; display: inline-block; } .ds-offcanvas.ds-sort-filter .ds-color-attribute a.refinementValue_color:focus:not(:focus-visible) { outline: none; } .ds-offcanvas.ds-sort-filter .ds-color-attribute .filter-item__color { display: inline-block; width: 16px; height: 16px; margin-bottom: 0; top: 3px; } .ds-offcanvas.ds-sort-filter .ds-color-attribute .filter-item__color.selected { position: relative; width: 13.3px; height: 13.3px; } .ds-offcanvas.ds-sort-filter .ds-color-attribute .filter-item__color.selected::after { left: 50%; } .ds-offcanvas.ds-sort-filter .ds-color-attribute .filter-item__color.selected + .ds-color-name { color: var(--color-brand-primary); } .ds-offcanvas.ds-sort-filter .ds-color-attribute .ds-color-name { color: var(--filter-checkbox-border-color); margin-left: var(--spacing-16); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; text-transform: capitalize; } .ds-offcanvas.ds-sort-filter .ds-color-attribute .filter-item__hit-count { font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; color: var(--filter-checkbox-border-color); } .ds-offcanvas.ds-sort-filter .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"] { --active: #000; --focus: 1px rgba(39, 94, 254, 0.3); --border: var(--filter-checkbox-border-color); --border-hover: #1f1f1f; } .ds-offcanvas.ds-sort-filter .ds-input input[type="checkbox"]:focus-visible, .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"]:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; -webkit-box-shadow: none; box-shadow: none; } .ds-offcanvas.ds-sort-filter .ds-input input[type="checkbox"]:focus:not(:focus-visible), .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"]:focus:not(:focus-visible) { outline: none; } .ds-offcanvas.ds-sort-filter .ds-input input[type="checkbox"] { position: relative; top: var(--spacing-4); left: var(--spacing-2); width: 16px; height: 16px; margin-bottom: 28px; } .ds-offcanvas.ds-sort-filter .ds-input input[type="checkbox"]:not(.switch) { border-radius: 2px; } .ds-offcanvas.ds-sort-filter .ds-input input[type="checkbox"]:not(.switch)::after { left: 5px; top: 1px; } .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"] { --active: var(--filter-text-primary-color); --active-inner: var(--filter-text-primary-color); --border: var(--filter-checkbox-border-color); --background: #fff; margin-bottom: 28px; } .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"]:not(.switch) { width: 18px; height: 18px; } .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"]:checked { --b: #fff; --s: 0.7; } .ds-offcanvas.ds-sort-filter .ds-input input[type="radio"]::after { width: 16px; height: 16px; } .ds-offcanvas.ds-sort-filter .ds-input label { font-size: var(--body-md-fontSize); line-height: calc(var(--line-height-sm)); padding-left: var(--spacing-16); margin-left: 0; margin-bottom: 0; letter-spacing: var(--letter_spacing-sm); color: var(--filter-text-secondary-color); } .ds-offcanvas.ds-sort-filter .ds-input .filter-item__hit-count { font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; color: var(--filter-text-secondary-color); } .ds-offcanvas.ds-sort-filter #collection-filter .ds-input, .ds-offcanvas.ds-sort-filter #fabric-drawer .ds-input, .ds-offcanvas.ds-sort-filter #pack-size-drawer .ds-input, .ds-offcanvas.ds-sort-filter #gender-drawer .ds-input, .ds-offcanvas.ds-sort-filter #feature-drawer .ds-input, .ds-offcanvas.ds-sort-filter #discount-drawer .ds-input, .ds-offcanvas.ds-sort-filter #category-drawer .ds-input, .ds-offcanvas.ds-sort-filter #sleeve-length-drawer .ds-input, .ds-offcanvas.ds-sort-filter #capsule-drawer .ds-input { margin-bottom: var(--spacing-8); } .ds-offcanvas.ds-sort-filter #collection-filter .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #fabric-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #pack-size-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #gender-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #feature-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #discount-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #category-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #sleeve-length-drawer .ds-input input[type="checkbox"], .ds-offcanvas.ds-sort-filter #capsule-drawer .ds-input input[type="checkbox"] { margin-bottom: 0; } .ds-offcanvas.ds-sort-filter #collection-filter .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #fabric-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #pack-size-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #gender-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #feature-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #discount-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #category-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #sleeve-length-drawer .ds-input input[type="checkbox"]:checked + label, .ds-offcanvas.ds-sort-filter #capsule-drawer .ds-input input[type="checkbox"]:checked + label { color: var(--color-brand-primary); } .ds-offcanvas.ds-sort-filter #collection-filter .ds-input label, .ds-offcanvas.ds-sort-filter #fabric-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #pack-size-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #gender-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #feature-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #discount-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #category-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #sleeve-length-drawer .ds-input label, .ds-offcanvas.ds-sort-filter #capsule-drawer .ds-input label { color: var(--color-grey-900); } .ds-offcanvas.ds-sort-filter #collection-filter .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #fabric-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #pack-size-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #gender-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #feature-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #discount-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #category-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #sleeve-length-drawer .ds-input .filter-item__hit-count, .ds-offcanvas.ds-sort-filter #capsule-drawer .ds-input .filter-item__hit-count { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; color: var(--color-text-secondary_on_light_bg); } .ds-offcanvas.ds-sort-filter #collection-filter .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #fabric-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #pack-size-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #gender-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #feature-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #discount-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #category-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #sleeve-length-drawer .ds-full-block > div:has(> .ds-input), .ds-offcanvas.ds-sort-filter #capsule-drawer .ds-full-block > div:has(> .ds-input) { margin-bottom: var(--spacing-24); } .ds-offcanvas.ds-sort-filter input[type=checkbox] + label { vertical-align: middle; } .ds-offcanvas.ds-sort-filter input[type=checkbox]:checked + label { color: var(--filter-text-primary-color); } .ds-offcanvas.ds-sort-filter .filter-desriptive-copy { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; padding-left: 35px; display: block; color: var(--color-grey-500); padding-bottom: 0; } .ds-offcanvas.ds-sort-filter input[type=radio]:checked + label { color: var(--filter-text-primary-color); } .ds-offcanvas.ds-sort-filter input.sort-unchecked.d-none + label { color: var(--filter-text-primary-color); } .ds-offcanvas.ds-sort-filter input.sort-checked { border-color: var(--filter-text-primary-color); } .ds-offcanvas.ds-sort-filter .ds-filter-footer { position: sticky; bottom: 0; left: 0; z-index: 1; padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); background: var(--color-white); width: 100%; border-top: var(--border-width-1) solid var(--color-grey-200); } .ds-offcanvas.ds-sort-filter .ds-filter-footer::before { content: ""; position: absolute; height: 1px; width: 100%; overflow: hidden; left: 50%; top: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } @media (max-width: 767px) { .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button { font-size: var(--font-size-md); letter-spacing: var(--letter_spacing-sm); color: var(--filter-text-primary-color); border-radius: var(--btn-border-radius-alt); padding: var(--spacing-12) var(--spacing-4); border: var(--border-width-1) solid var(--color-grey-200); width: 100%; height: var(--sizing-button-md); } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.dark { background-color: var(--filter-text-primary-color); color: var(--color-white); } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.dark:hover, .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.dark:active { background: var(--color-grey-800); color: var(--color-white); } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.outline { background: transparent; margin-right: var(--spacing-8); } @media only screen and (max-width: 991.98px) { .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.outline { margin-right: 0; } } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.outline:hover, .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button.outline:active { background: var(--color-black); color: var(--color-white); } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; border-radius: 2px; } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action button:focus:not(:focus-visible) { outline: none; } .ds-offcanvas.ds-sort-filter .ds-filter-footer .ds-action .refineBaritemCount { color: var(--color-white); } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn { -webkit-box-flex: 0; -ms-flex: 0 0 31.3%; flex: 0 0 31.3%; margin-bottom: 0; max-width: 31.3%; } @media only screen and (min-width: 992px) and (max-width: 1279.98px) { .ds-offcanvas.ds-sort-filter .ds-size-filter-btn { -webkit-box-flex: 0; -ms-flex: 0 0 47.9%; flex: 0 0 47.9%; max-width: 47.9%; } } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn:last-child { margin-bottom: var(--spacing-24); } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button { font-size: var(--font-size-sm); color: var(--filter-text-primary-color); border: var(--border-width-1) solid var(--input-border-color); border-radius: var(--border-radius-2); padding: var(--spacing-16) var(--spacing-8); min-width: 100%; background: transparent; text-transform: uppercase; width: inherit; max-width: inherit; } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button span { font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; margin-bottom: 0; } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button .filter-item__hit-count { color: var(--filter-checkbox-border-color); } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button.size--selected { background: var(--filter-text-primary-color); color: var(--color-white) !important; border-color: var(--filter-text-primary-color); } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button.size--selected .filter-item__hit-count { color: var(--color-white) !important; } @media screen and (min-width: 1280px) { .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button:hover { background: var(--filter-text-primary-color); border-color: var(--filter-text-primary-color); color: var(--color-white); } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button:hover .filter-item__hit-count { color: var(--color-white); } } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .ds-offcanvas.ds-sort-filter .ds-size-filter-btn button:focus:not(:focus-visible) { outline: none; } @media only screen and (max-width: 991.98px) { .ds-offcanvas.ds-sort-filter { display: block; max-width: 100%; padding-left: var(--spacing-24); padding-right: var(--spacing-24); } } .ds-offcanvas.ds-sort-filter .enable-drawer .content { margin-bottom: 0; } .ds-offcanvas .clear-filters-seperator { margin: 0 var(--spacing-8); } @media (max-width: 767px) { .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer { bottom: -115%; display: block; padding-left: 20px; padding-right: 20px; position: fixed; -webkit-transition-property: bottom; transition-property: bottom; will-change: bottom; } .ds-left-filter.left-filter.filter-open .ds-sort-filter { padding-bottom: calc(105px + calc(100vh - var(--vh))); } .ds-left-filter.left-filter.filter-open .ds-sort-filter .ds-filter-footer { bottom: 0; } } @media (max-width: 991.98px) { .ds-left-filter.left-filter .enable-drawer__button .accordionHeader:has(.btn.collapsed) .accordionIcon--open { display: block; } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader:has(.btn.collapsed) .accordionIcon--close { display: none; } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader:not(:has(.btn.collapsed)) .accordionIcon--open { display: none; } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader:not(:has(.btn.collapsed)) .accordionIcon--close { display: block; } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader { width: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader__left .clear-filters-seperator { padding: var(--spacing-20) 0 var(--spacing-16); } .ds-left-filter.left-filter .enable-drawer__button .accordionHeader__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; } } .ds-filter-inline { padding: 0 30px 0 8px; } @media (min-width: 768px) { .ds-filter-inline .ds-sort-filter { padding: 0; } .ds-filter-inline .ds-left-filter { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } .ds-filter-inline .ds-left-filter::-webkit-scrollbar { display: none; } } .experience-component .pvh-image-and-text-with-links { padding-bottom: var(--spacing-32); } .experience-component .pvh-image-and-text-with-links .imgHeight { height: auto; } .experience-component.experience-dynamic-productDetail .product-wrapper { margin-bottom: 0; } .pdp-pd-wrapper { margin-bottom: var(--spacing-80); } .ds-breadcrumb { margin: var(--spacing-16) -20px; } .ds-breadcrumb ul { padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .ds-breadcrumb ul li { list-style: none; margin-right: var(--spacing-4); } .ds-breadcrumb ul li a:not(.btn-primary) { color: var(--link-secondary-color); } .ds-breadcrumb ul li a:not(.btn-primary):hover { color: var(--link-secondary-color-hover); text-decoration: underline; } .ds-breadcrumb ul li::after { content: "/"; color: var(--color-grey-600); padding-left: var(--spacing-2); font-size: var(--font-size-sm); } .ds-breadcrumb ul li:last-child::after { display: none; } .ds-breadcrumb ul li:last-child a { color: var(--filter-text-primary-color); } .ds-breadcrumb ul li:last-child a:hover { text-decoration: none; cursor: auto; } .ds-breadcrumb ul li:first-child { margin-left: var(--spacing-20); } .ds-breadcrumb .ds-breadcrumb-desktop { -ms-overflow-style: none; scrollbar-width: none; overflow: -moz-scrollbars-hidden; overflow-x: auto; white-space: nowrap; } .ds-breadcrumb .ds-breadcrumb-desktop::-webkit-scrollbar { display: none; } @media (max-width: 991px) { .ds-breadcrumb.ds-pdp-breadcrumb { margin: 0 0 var(--spacing-16); } } .ds-breadcrumb.ds-pdp-breadcrumb ul { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } @media (max-width: 991px) { .ds-breadcrumb.ds-pdp-breadcrumb ul li:first-child { margin-left: 0; } } .ds-breadcrumb.ds-pdp-breadcrumb ul li:last-child a:not(.btn-primary) { color: var(--link-secondary-color); } .ds-breadcrumb.ds-pdp-breadcrumb ul li:last-child a:not(.btn-primary):hover { color: var(--link-secondary-color-hover); text-decoration: underline; cursor: pointer; } /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ /* header height */ /* TODO change include to extend in future to reduce css size */ /* stylelint-disable */ .fit-analytics__flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; } .buy-box .fit-analytics__flex-container { /* 3rd party html override */ } .buy-box .fit-analytics__flex-container span { color: var(--link-secondary-color) !important; font-family: var(--textbutton-sm-fontFamily) !important; font-size: var(--textbutton-sm-fontSize) !important; font-weight: var(--textbutton-sm-fontWeight) !important; letter-spacing: var(--textbutton-sm-letterSpacing) !important; line-height: calc(var(--textbutton-sm-lineHeight)) !important; text-transform: var(--textbutton-sm-textCase, "inherit") !important; } .buy-box .fit-analytics__flex-container span:hover { color: var(--link-secondary-color-hover) !important; } .fit-analytics__flex-container .size-guide__component { margin-left: var(--spacing-12); margin-right: var(--spacing-4); border-bottom: var(--border-width-1) solid; } .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: translateX(-64%); transform: translateX(-64%); } @media (max-width: 1280px) { .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: translateX(-62%); transform: translateX(-62%); } } @media (max-width: 991px) { .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: translateX(-42%); transform: translateX(-42%); } } @media (max-width: 767px) { .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: none; transform: none; } } .product-quickview.product-wrapper.product-detail .size-guide__popup .modal-content .modal-header { padding-bottom: var(--spacing-16); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .product-quickview.product-wrapper.product-detail .size-guide__popup .modal-content .modal-header .sizeguide-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: initial; } .size-guide__popup { width: 105vw; z-index: 1100; } @media (max-width: 767px) { .size-guide__popup { width: 100vw; } } .size-guide__popup .modal-dialog.modal-dialog-centered { max-width: 1080px; } @media (max-width: 1280px) { .size-guide__popup .modal-dialog.modal-dialog-centered { max-width: 860px; } } .size-guide__popup .modal-body { padding: var(--spacing-32); } @media (max-width: 767px) { .size-guide__popup .modal-content { max-height: var(--vh); } } .size-guide__popup.show + .modal-backdrop { z-index: 1050; } .size-guide__popup .close { position: absolute; right: 0; z-index: 100; margin: var(--spacing-32); } .size-guide__popup .cs_sizeGuideContainer { width: 100%; } .size-guide__popup .cs_sizeGuideContainer table tr th, .size-guide__popup .cs_sizeGuideContainer table tr td { font-size: var(--body-lg-fontSize); line-height: calc(var(--body-lg-lineHeight)); letter-spacing: var(--body-lg-letterSpacing); font-weight: var(--body-lg-fontWeight); } .size-guide__popup .header-wrapper { padding: 0; } .size-guide__popup .header-wrapper .header-text { margin-top: 0; color: var(--color-black); font-size: var(--heading-md-fontSize); line-height: calc(var(--heading-md-lineHeight)); letter-spacing: var(--heading-md-letterSpacing); font-weight: var(--heading-md-fontWeight); } .size-guide__popup .sub-header-text { padding-left: 0; } .size-recommendation__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .size-recommendation__container .size-guide { pointer-events: all; cursor: pointer; } .size-recommendation__container .fit-analytics__flex-container { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .pdp-size { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0; } .size-recommendation-group { padding-top: var(--spacing-8); } .size-recommendation-group .model-info { float: right; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; padding-top: 3.5px; color: var(--text-primary-color-light-bg); } .pvhthus .size-recommendation-group .model-info, .pvhthca .size-recommendation-group .model-info { font-weight: var(--font-weight-400); } .size-recommendation { display: inline-block; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: var(--spacing-16); } .size-recommendation__model-info { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; color: var(--text-primary-color-light-bg); } .buy-box .size-recommendation__container { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-family: var(--textbutton-sm-fontFamily) ; font-size: var(--textbutton-sm-fontSize) ; font-weight: var(--textbutton-sm-fontWeight) ; letter-spacing: var(--textbutton-sm-letterSpacing) ; line-height: calc(var(--textbutton-sm-lineHeight)) ; text-transform: var(--textbutton-sm-textCase, "inherit") ; } .buy-box .pdp-size { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-item-align: center; align-self: center; } #quickViewModal .quickview__modal__images .swiper-fraction, #editProductModal .quickview__modal__images .swiper-fraction { border-radius: var(--spacing-24); background-color: rgba(0, 0, 0, var(--opacity-40)); -webkit-backdrop-filter: blur(calc(var(--opacity-20) * 1px)); backdrop-filter: blur(calc(var(--opacity-20) * 1px)); color: var(--color-white); padding: calc(var(--spacing-8)) var(--spacing-12); font-family: var(--textbutton-2xs-fontFamily) ; font-size: var(--textbutton-2xs-fontSize) ; font-weight: var(--textbutton-2xs-fontWeight) ; letter-spacing: var(--textbutton-2xs-letterSpacing) ; line-height: calc(var(--textbutton-2xs-lineHeight)) ; text-transform: var(--textbutton-2xs-textCase, "inherit") ; line-height: normal; } .quickview__button { background: var(--btn-bg-color-inversed); border-radius: var(--btn-border-radius-alt); padding: var(--spacing-12) var(--spacing-32); border: none; font-size: var(--font-size-sm); letter-spacing: var(--letter_spacing-sm); } .quickview__button:hover { opacity: 1; } .quickview__button-name { color: var(--color-white); white-space: nowrap; } @media (max-width: 767px) { .quickview__button { display: none; } } .quickview__modal { width: 65%; height: 100%; margin: auto; position: fixed; right: 0%; max-width: 950px; color: var(--color-brand-primary); } @media (max-width: 991px) { .quickview__modal { width: 100%; max-width: 100%; } } @media screen and (min-width: 1400px) { .quickview__modal { width: 50%; } } .slide-in .quickview__modal .modal-close { position: fixed; top: var(--spacing-16); right: var(--spacing-16); z-index: 200; } @media screen and (min-width: 1280px) { .slide-in .quickview__modal .modal-close { top: var(--spacing-40); right: var(--spacing-40); } } .slide-in .quickview__modal .modal-close button.close { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: color-mix(in srgb, var(--color-white), transparent calc((1 - var(--opacity-20)) * 100%)); border-radius: 50%; color: var(--color-black); display: -webkit-box; display: -ms-flexbox; display: flex; height: 34px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; min-height: 34px; min-width: 34px; opacity: 1; padding: 0; text-shadow: none; width: 34px; } @media screen and (min-width: 1280px) { .slide-in .quickview__modal .modal-close { top: var(--spacing-24); right: var(--spacing-24); } .slide-in .quickview__modal .modal-close button.close { min-height: 32px; min-width: 32px; width: 32px; height: 32px; } } .quickview__modal .modal-header { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-bottom: 0; } .quickview__modal .modal-error-color { color: var(--color-red-500); } .quickview__modal .modal-valid-color { color: var(--color-grey-600); } .quickview__modal__head--name { margin-bottom: var(--spacing-8); font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; padding-right: var(--spacing-32); } .quickview__modal__head--name a.quickview__modal-heading-link { font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; color: var(--color-brand-primary); } @media (max-width: 991px) { .quickview__modal__head--name { padding-right: 0; } } .quickview__modal .ds-rating .ds-rating-container { display: block; margin-bottom: 0; } .quickview__modal .ds-rating .ds-rating-container .ds-star-rating { line-height: var(--body-xs-lineHeight); display: inline-block; vertical-align: middle; } .quickview__modal .ds-rating .ds-rating-container .ds-star-rating span { font-size: var(--font-size-sm); float: left; color: var(--color-brand-primary); letter-spacing: calc(var(--spacing-2) * -1); } .quickview__modal .ds-rating .ds-rating-container .ds-counter-rating { display: inline; font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .quickview__modal .quickvie-head { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; margin-bottom: var(--spacing-8); } .quickview__modal .quickvie-head:empty { display: none; } .quickview__modal--content { border: none !important; border-radius: 0%; overflow-y: auto; overflow-x: hidden; height: 100%; } .quickview__modal--content::-webkit-scrollbar { width: 0; background: none; } .quickview__modal--content .modal-carousel { margin-top: 0; margin-bottom: 0; } .quickview__modal--content.qv-lock { overflow-y: hidden; } .quickview__modal__body { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; max-height: unset !important; overflow-y: unset !important; padding: 0; margin-bottom: 0; } .quickview__modal__body .promotion__list { margin-bottom: 0; padding-left: 0; } .quickview__modal__body .variation-spacing .variant-selector-container { margin-bottom: 0; } .quickview__modal__body .variation-spacing .variant-selector-container h3 { font-weight: normal; margin-bottom: var(--spacing-16); } .quickview__modal__body .variation-spacing .variant-selector-container .variant-item { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; border: var(--border-width-1) solid var(--input-border-color); width: 100%; padding: var(--spacing-16) var(--spacing-4); margin: 0; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .quickview__modal__body .variation-spacing .variant-selector-container .variant-item.modal-error-border { border: var(--input-border-width-focus) solid var(--input-color-error); line-height: normal; } .quickview__modal__body .variation-spacing .variant-selector-container .variant-item span { margin-bottom: 0; } .quickview__modal__body .list__description { display: block; margin-bottom: var(--spacing-8); } @media only screen and (max-width: 991.98px) { .quickview__modal__body .list__description { margin-bottom: var(--spacing-4); } } .quickview__modal__body .list__description--product { color: var(--color-text-sale); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .quickview__modal__body .list__description:last-of-type .list__description--seperator { color: var(--username-text-color); display: none; } .quickview__modal__body--stars { margin-bottom: var(--spacing-16); } .quickview__modal__body--pricesAndviewDetails { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--spacing-4); } @media screen and (min-width: 1280px) { .quickview__modal__body--pricesAndviewDetails { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } } .quickview__modal__body--viewdetails { width: 100%; } .quickview__modal__body--viewdetails a { font-family: var(--button-md-fontFamily) ; font-size: var(--button-md-fontSize) ; font-weight: var(--button-md-fontWeight) ; letter-spacing: var(--button-md-letterSpacing) ; line-height: calc(var(--button-md-lineHeight)) ; text-transform: var(--button-md-textCase, "inherit") ; } .quickview__modal__body--contentassets { margin: auto; } .quickview__modal__body--links.viewdetails-link { padding-top: var(--spacing-16); } .quickview__modal__body--links.viewdetails-link a { margin: 0; height: 56px; color: var(--link-primary-color); } .quickview__modal__body--links.viewdetails-link a:hover { color: var(--link-primary-color-hover); } .quickview__modal__body--links .variant-selector-container { padding: 0%; margin-top: var(--spacing-12); } .quickview-set .quickview__modal__body--links.viewdetails-link { padding-top: 0; } .quickview-set .quickview__modal__body--links.viewdetails-link a { text-decoration: none; } .has-view-all-color .quickview__modal__body--colorCode { max-width: calc(100% - 100px); word-break: break-all; } .quickview__modal__body--attribute { -webkit-box-flex: 0%; -ms-flex: 0%; flex: 0%; max-width: 100%; margin-top: var(--spacing-12); } .quickview__modal__body--attribute--variation { -webkit-box-flex: 0%; -ms-flex: 0%; flex: 0%; max-width: 100%; } .quickview__modal__body--attribute--variation .variant-selector-heading { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: none; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .quickview__modal__body--attribute--variation .variant-selector-heading label { margin-bottom: var(--spacing-16); display: block; } .quickview__modal__body--inner { margin-bottom: var(--spacing-40); } @media (max-width: 991px) { .quickview__modal__body--inner { margin-bottom: calc(var(--spacing-32) - var(--spacing-4)); } } .quickview__modal__body--inner .sold-out-msg-container .sold-out-msg { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; padding-bottom: var(--spacing-8); } .quickview__modal__body--inner .sold-out-msg-container .product__availability .availability-msg { color: var(--color-red-500); } .quickview__modal__body--availability .product-availability .product__availability { margin: 0; padding: 0; } .quickview__modal__body--availability .product-availability .product__availability .availability-msg { margin: 0; padding: 0; } .quickview__modal__body--availability .product-availability .product__availability .availability-msg li { color: var(--quickbuy-secondary-color); margin-bottom: var(--spacing-16); display: inline-block; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; padding-top: 4px; padding-bottom: 4px; } .quickview__modal__body--availability .product-availability .product__availability .availability-msg li .page-error { margin-bottom: 0; } .quickview__modal__body--availability .product-availability .product__availability .availability-msg.custom-error { color: var(--color-feedback-error); } .quickview__modal__body--availability .product-availability .product__availability > div { padding: 0; } .quickview__modal__body .product-detail__salebadges-text { margin-bottom: var(--spacing-16); display: inline-block; color: var(--text-secondary-light-bg); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .quickview__modal__body .product-detail__salebadges-text.inventory-msg { color: var(--color-grey-600); background-color: var(--color-grey-100); padding: var(--spacing-4) var(--spacing-8); border-radius: var(--spacing-4); max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } .quickview__modal__body .product-detail__salebadges-text.quickview__modal__body--finalBadge { color: var(--color-text-sale); } .quickview__modal__body--promotions { width: 100%; } .quickview__modal__body--promotions .promotion__list--shipping { text-align: center; margin-bottom: 0; padding-left: 0; padding-top: var(--spacing-24); } .quickview__modal__body--promotions .list__description { display: block; margin-bottom: var(--spacing-8); } .quickview__modal__body--promotions .list__description:last-child { margin-bottom: 0; } .quickview__modal__body--promotions .list__description--shipping { color: var(--username-text-color); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .quickview__modal__body--promotions .list__description:last-of-type .list__description--seperator { color: var(--username-text-color); display: none; } .quickview__modal__body .promo__div--product { padding-left: 0; } .quickview__modal__body .product-detail { margin: 0; } .quickview__modal__images { margin-bottom: var(--spacing-24); } .quickview__modal__images .slick-arrow .icon-arrow-right { display: inline-block; color: var(--color-brand-primary); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .quickview__modal__images .slick-arrow .icon-arrow-left { display: inline-block; color: var(--color-brand-primary); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .quickview__modal__images .slick-arrow.slick-disabled .icon-arrow-right, .quickview__modal__images .slick-arrow.slick-disabled .icon-arrow-left { color: var(--color-grey-200); } .quickview__modal__body::-webkit-scrollbar { display: none; } .quickview__modal__footer { width: 100%; background: var(--color-white); z-index: 300; margin-top: var(--spacing-24); } @media (max-width: 991px) { .quickview__modal__footer { margin-top: var(--spacing-12); } } .quickview__modal__footer .cart-and-ipay { width: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: var(--spacing-8); -moz-column-gap: var(--spacing-8); column-gap: var(--spacing-8); } .quickview__modal__footer .cart-and-ipay.qv-footer-oos .quantity { display: none; } .quickview__modal__footer .cart-and-ipay.qv-footer-oos .add-to-cart-actions { max-width: 100%; -webkit-box-flex: 100%; -ms-flex: 100%; flex: 100%; } .quickview__modal__footer--cartBtn--mob { margin: 0; width: 100%; } .quickview__modal__footer--cartBtn { width: 100%; padding-left: var(--spacing-12); padding-right: var(--spacing-12); } .quickview__modal__footer .ds-btn-block.md, .quickview__modal__footer .ds-btn-block.md:hover { background-color: var(--color-brand-primary); } .quickview__modal__footer .ds-btn-block.md:disabled, .quickview__modal__footer .ds-btn-block.md:hover:disabled { background-color: var(--color-grey-100); color: var(--color-grey-600); text-decoration: none; } .quickview__modal__footer .sign-in-to-buy { width: 100%; } .quickview__modal__footer .sign-in-to-buy .icon-lock { padding-right: var(--spacing-8); overflow: hidden; } .quickview__modal__footer .quantity { -webkit-box-flex: 0; -ms-flex: 0 0 24.5%; flex: 0 0 24.5%; max-width: 24.5%; } @media (max-width: 991px) { .quickview__modal__footer .quantity { -webkit-box-flex: 0; -ms-flex: 0 0 22.5%; flex: 0 0 22.5%; max-width: 22.5%; } } .quickview__modal__footer .quantity .ds-select-dropdown { margin-bottom: 0; } .quickview__modal__footer .add-to-cart-actions { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100% - 24.5%) - var(--spacing-8)); flex: 0 0 calc((100% - 24.5%) - var(--spacing-8)); max-width: calc((100% - 24.5%) - var(--spacing-8)); } @media (max-width: 991px) { .quickview__modal__footer .add-to-cart-actions { -webkit-box-flex: 0; -ms-flex: 0 0 calc((100% - 22.5%) - var(--spacing-8)); flex: 0 0 calc((100% - 22.5%) - var(--spacing-8)); max-width: calc((100% - 22.5%) - var(--spacing-8)); } } .quickview__modal__footer .hide-qty-selector .quantity { display: none; } .quickview__modal__footer .hide-qty-selector .add-to-cart-actions { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .quickview__modal__footer .variation-dropdown .dropdown-menu { position: relative; } .quickview__modal__footer .error-text { margin-bottom: var(--spacing-32); } .quickview__modal__footer .error-text .icon-utility-alert-red { margin-right: var(--spacing-12); } .quickview__modal .variant-selector-container .variant-list[data-display-id="colorCode"] { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: var(--spacing-16); -moz-column-gap: var(--spacing-16); column-gap: var(--spacing-16); row-gap: var(--spacing-16); } .quickview__modal .variant-selector-container .variant-list[data-display-id="colorCode"]:last-of-type { margin-bottom: 0; } .quickview-set .quickview__modal .variant-selector-container .variant-list[data-display-id="colorCode"] { -webkit-column-gap: var(--spacing-16); -moz-column-gap: var(--spacing-16); column-gap: var(--spacing-16); } .quickview__modal .variant-item { text-overflow: ellipsis; white-space: nowrap; float: left; width: calc(25% - 8px * 3 / 4); height: 48px; border: var(--border-width-1) solid var(--filter-btn-border-color); color: var(--filter-text-primary-color); margin: 0 var(--spacing-8) var(--spacing-8) 0; overflow: hidden; text-align: center; cursor: pointer; padding: var(--spacing-20) var(--spacing-4); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: var(--font-size-sm); line-height: 0.5rem; position: relative; width: 90%; } .quickview__modal .edit-qv-buttons .quickview__modal__body--viewdetails { margin: var(--spacing-20) var(--spacing-8) var(--spacing-32); } .quickview__modal .sticky-container { position: sticky; top: 0; -webkit-transition: all 300ms linear; transition: all 300ms linear; padding: var(--spacing-40) var(--spacing-16) var(--spacing-56) 0; } @media (max-width: 991px) { .quickview__modal .sticky-container { position: static; padding: var(--spacing-24) 0 0 0; } } .product .quickview__modal .sticky-container { max-width: 450px; margin: auto; } @media (max-width: 991px) { .product .quickview__modal .sticky-container { padding-top: 0; max-width: 100%; } } .strike-through.list { color: var(--text-strikeout-color); text-decoration: line-through; margin: 0; } .size-help-links { float: right; margin-bottom: var(--spacing-16); } .size-help-links .size-help { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; color: var(--link-primary-color); text-decoration: underline; } .size-help-links .size-help:hover { color: var(--link-primary-color-hover); } .size-help-links .find-size { margin-right: var(--spacing-8); } .variation__attr--value { color: var(--color-brand-primary); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .variation__attr--name { color: var(--quickbuy-secondary-color); padding-right: 8px; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .variation__attr--name.custom-error { color: var(--color-feedback-error); } .strike-block { display: inline-block; } .quick-view-dialog .promotions, .choose-bonus-product-dialog .promotions { text-align: left; color: var(--color-black); font-size: var(--font-size-md); } .quick-view-dialog .promotions a, .choose-bonus-product-dialog .promotions a { font-size: var(--font-size-md); } #quickViewModal .quickview__modal__images .swiper-fraction, #editProductModal .quickview__modal__images .swiper-fraction { width: 50px; display: block; position: absolute; bottom: var(--spacing-16); left: var(--spacing-16); text-align: center; z-index: 2; display: none; } @media (max-width: 991px) { #quickViewModal .quickview__modal__images, #editProductModal .quickview__modal__images { position: relative; } #quickViewModal .quickview__modal__images.has-many-images, #editProductModal .quickview__modal__images.has-many-images { margin-right: calc(var(--spacing-24) * -1); margin-left: calc(var(--spacing-24) * -1); margin-top: calc(var(--spacing-20) * -1); } #quickViewModal .quickview__modal__images .swiper-fraction, #editProductModal .quickview__modal__images .swiper-fraction { display: block; } } #quickViewModal .quickview__modal__images .slick-slide, #editProductModal .quickview__modal__images .slick-slide { display: block; width: auto; /* TODO Move this to mixin in future changes */ aspect-ratio: 3/3.95257; margin-right: var(--spacing-4); } @media (max-width: 991px) { #quickViewModal .quickview__modal__images .slick-slide, #editProductModal .quickview__modal__images .slick-slide { width: 260px; } } #quickViewModal .quickview__modal__images .quickview-slick-img, #quickViewModal .quickview__modal__images .js-quickview-slick img, #editProductModal .quickview__modal__images .quickview-slick-img, #editProductModal .quickview__modal__images .js-quickview-slick img { -o-object-fit: cover; object-fit: cover; width: 100%; aspect-ratio: 3/3.95257; } @media (max-width: 991px) { #quickViewModal .quickview__modal__images .quickview-slick-img, #quickViewModal .quickview__modal__images .js-quickview-slick img, #editProductModal .quickview__modal__images .quickview-slick-img, #editProductModal .quickview__modal__images .js-quickview-slick img { height: 100%; width: 260px; } } #quickViewModal .quickview__modal__images .quickview-slick-img:empty, #quickViewModal .quickview__modal__images .js-quickview-slick img:empty, #editProductModal .quickview__modal__images .quickview-slick-img:empty, #editProductModal .quickview__modal__images .js-quickview-slick img:empty { background-color: #fafafa; } #quickViewModal .quickview__modal__images svg.svg-arrow, #editProductModal .quickview__modal__images svg.svg-arrow { width: 16px; height: 14px; margin-bottom: 10px; } #quickViewModal .quickview__modal__images svg.svg-arrow path, #editProductModal .quickview__modal__images svg.svg-arrow path { fill: var(--color-brand-primary); } #quickViewModal .quickview__modal__images svg.svg-arrow.right, #editProductModal .quickview__modal__images svg.svg-arrow.right { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } #quickViewModal .quickview__modal__images svg.svg-arrow.left, #editProductModal .quickview__modal__images svg.svg-arrow.left { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #quickViewModal .quickview__modal__images .slick-disabled svg.svg-arrow path, #editProductModal .quickview__modal__images .slick-disabled svg.svg-arrow path { fill: var(--color-grey-200); } #quickViewModal.quickview-set .quickview__modal__images .swiper-fraction, #editProductModal.quickview-set .quickview__modal__images .swiper-fraction { display: none; } .product-quickview.product-wrapper.product-detail { padding: 0%; } .product-quickview.product-wrapper.product-detail .quickview__label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .product__availability { padding: 0%; } .product-sales-discnt { font-size: var(--font-size-sm); color: var(--color-text-sale); font-weight: var(--font-weight-500); letter-spacing: var(--letter_spacing-sm); } .product-quickview.product-wrapper.product-detail { margin-top: 0; margin-bottom: 0; } .product-quickview.product-wrapper.product-detail .detail-panel { width: 100%; padding-top: 0; } .product-quickview.product-wrapper.product-detail .detail-panel .size-guide { cursor: pointer; color: var(--quickbuy-secondary-color); font-family: var(--textbutton-sm-fontFamily) ; font-size: var(--textbutton-sm-fontSize) ; font-weight: var(--textbutton-sm-fontWeight) ; letter-spacing: var(--textbutton-sm-letterSpacing) ; line-height: calc(var(--textbutton-sm-lineHeight)) ; text-transform: var(--textbutton-sm-textCase, "inherit") ; } .product-quickview.product-wrapper.product-detail .row { margin: 0; } .product-quickview.product-wrapper.product-detail .attribute-item.no-margin .variation-spacing { margin-bottom: 0; } .quickbuy--variant-selector-container .product-detail .variant-selector-container { padding: 0%; margin: var(--spacing-12); } .variant-item--quickview { width: 102px; } .variant-item--quickview:nth-child(4) { margin-right: 0; } @media (max-width: 991px) { .quickview__modal__body--prices { font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } } .quickview__modal__body--prices .strike-block { display: inline-block; } .quickview__modal__body--prices .product-sales-discnt { font-size: var(--font-size-md); letter-spacing: var(--letter_spacing-sm); color: var(--color-text-sale); font-weight: var(--font-weight-500); } .quickview__modal__body--prices .pdprange-percent span { color: var(--color-text-sale); } .quickview__modal__body--prices .range { padding-right: var(--spacing-4); font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .quickview__modal__body--prices .sales { font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .quickview__modal__body--prices .listrange-strike { text-decoration: line-through; color: var(--quickbuy-secondary-color); display: inline-block; padding-right: var(--spacing-4); font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; margin-bottom: 0; } .preorder-status { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .preorder-status .pre-order { color: var(--text-primary-color-light-bg); margin-bottom: var(--spacing-8); } .promotion-fix { margin-bottom: 60px; } .quickview__defaultimage { display: none; } .one-size-inventory-msg { padding-bottom: var(--spacing-16); } .sold-out-msg-container { padding-top: var(--spacing-4); } @media (max-width: 991px) { .sold-out-msg-container { margin-top: var(--spacing-8); } } .sold-out-msg-container .product__availability .availability-msg { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .sold-out-msg-container .product__availability .availability-msg .sold-out-sku { color: var(--color-red-500); } .sold-out-msg-container .product__availability .availability-msg .other-sku-in-stock { color: var(--color-grey-600); } .display-color-oos-message { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: var(--spacing-12); margin-bottom: var(--spacing-24); } @media (max-width: 767px) { .display-color-oos-message { margin-bottom: 6px; padding-top: var(--spacing-20); } } .display-color-oos-message .color-oos-message { color: var(--color-red-500); font-weight: var(--font-weight-500); font-size: var(--font-size-sm); line-height: calc(var(--body-md-lineHeight)); letter-spacing: var(--body-sm-letterSpacing); padding-left: var(--spacing-8); margin-bottom: 0; } .sold-out-msg-container { padding-top: var(--spacing-4); } @media (max-width: 991px) { .sold-out-msg-container { margin-top: var(--spacing-8); } } .sold-out-msg-container .product__availability .availability-msg .sold-out-sku { color: var(--color-red-500); } .sold-out-msg-container .product__availability .availability-msg .other-sku-in-stock { color: var(--color-grey-600); } .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item, .variant-section .attribute-item .variant-selector-container .variant-color-item { margin: var(--spacing-2); border: 0; } .modal .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item, .modal .variant-section .attribute-item .variant-selector-container .variant-color-item { width: var(--spacing-24); height: var(--spacing-24); border: var(--btn-secondary-border-width) solid rgba(0, 0, 0, var(--opacity-10)); } .modal .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item::after, .modal .variant-section .attribute-item .variant-selector-container .variant-color-item::after { width: 30px; height: 30px; } @media (max-width: 991px) { .modal .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item:nth-child(4n), .modal .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item:first-child, .modal .variant-section .attribute-item .variant-selector-container .variant-color-item:nth-child(4n), .modal .variant-section .attribute-item .variant-selector-container .variant-color-item:first-child { margin: var(--spacing-2); } } .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item:hover, .variant-section .attribute-item .variant-selector-container .variant-color-item:hover { border: 0; } .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item[aria-checked=true]::after, .variant-section .attribute-item .variant-selector-container .variant-color-item[aria-checked=true]::after { border: var(--input-border-width) solid var(--color-grey-600); } .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item[aria-checked=true] + label span::before, .variant-section .attribute-item .variant-selector-container .variant-color-item[aria-checked=true] + label span::before { border: var(--input-border-width) solid var(--color-grey-600); } .product-detail .quickview__modal__body--attribute--variation .variant-selector-container .variant-color-item[aria-checked=false]:hover::after, .variant-section .attribute-item .variant-selector-container .variant-color-item[aria-checked=false]:hover::after { border: var(--input-border-width) solid var(--color-grey-600); } .product-detail .quickview__modal__body--attribute--variation .variation-spacing, .variant-section .attribute-item .variation-spacing { margin-bottom: var(--spacing-24); } .product-detail .quickview__modal__body--attribute--variation .variation-spacing.variation-spacing-colorCode, .product-detail .quickview__modal__body--attribute--variation .variation-spacing.attribute-colorCode, .variant-section .attribute-item .variation-spacing.variation-spacing-colorCode, .variant-section .attribute-item .variation-spacing.attribute-colorCode { margin-bottom: var(--spacing-40); } .quickview-set .product-detail .quickview__modal__body--attribute--variation .variation-spacing.variation-spacing-colorCode, .quickview-set .product-detail .quickview__modal__body--attribute--variation .variation-spacing.attribute-colorCode, .quickview-set .variant-section .attribute-item .variation-spacing.variation-spacing-colorCode, .quickview-set .variant-section .attribute-item .variation-spacing.attribute-colorCode { margin-bottom: var(--spacing-24); } @media (max-width: 991px) { .product-detail .quickview__modal__body--attribute--variation .variation-spacing.variation-spacing-colorCode, .product-detail .quickview__modal__body--attribute--variation .variation-spacing.attribute-colorCode, .variant-section .attribute-item .variation-spacing.variation-spacing-colorCode, .variant-section .attribute-item .variation-spacing.attribute-colorCode { margin-bottom: var(--spacing-32); } } .product-detail .quickview__modal__body--attribute--variation .variant-error, .variant-section .attribute-item .variant-error { margin-top: var(--spacing-24); } .product-detail .quickview__modal__body--attribute--variation .variant-error.icon-alert, .variant-section .attribute-item .variant-error.icon-alert { line-height: 1; } .max-quantity-error-item .icon-alert { margin-right: 10px; } @media (max-width: 991px) { .max-quantity-error-item.page-error { margin: 0 0 var(--spacing-24); } } @media (max-width: 991px) { #quickViewModal .quickview__modal__head, #editProductModal .quickview__modal__head { padding: 0; } #quickViewModal .quickview__modal__head .buy-box__imgbadges, #quickViewModal .quickview__modal__head .product-detail__imgbadges, #editProductModal .quickview__modal__head .buy-box__imgbadges, #editProductModal .quickview__modal__head .product-detail__imgbadges { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; font-weight: 400; } #quickViewModal .quickview__modal__head .quickview__modal-heading-link, #quickViewModal .quickview__modal__head--name, #editProductModal .quickview__modal__head .quickview__modal-heading-link, #editProductModal .quickview__modal__head--name { font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; } #quickViewModal .quickview__modal__head .quickview__modal-heading-link a.quickview__modal-heading-link, #quickViewModal .quickview__modal__head--name a.quickview__modal-heading-link, #editProductModal .quickview__modal__head .quickview__modal-heading-link a.quickview__modal-heading-link, #editProductModal .quickview__modal__head--name a.quickview__modal-heading-link { font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; } #quickViewModal .quickview__modal__head--name, #editProductModal .quickview__modal__head--name { margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-2); } .modal #quickViewModal .quickview__modal--content .modal-carousel, .modal #editProductModal .quickview__modal--content .modal-carousel { margin: 0 calc(var(--spacing-16) * -1); } #quickViewModal .quickview__modal__body, #editProductModal .quickview__modal__body { padding: 0; margin-bottom: 0; } #quickViewModal .quickview__modal__body .size-recommendation__container, #editProductModal .quickview__modal__body .size-recommendation__container { margin-bottom: var(--spacing-12); } #quickViewModal .quickview__modal--content, #editProductModal .quickview__modal--content { padding: var(--spacing-16) var(--spacing-24); overflow-x: hidden; } #quickViewModal .quickview__modal__images .js-quickview-slick, #editProductModal .quickview__modal__images .js-quickview-slick { margin-left: 0; } #quickViewModal .quickview__modal__images .slick-next, #editProductModal .quickview__modal__images .slick-next { right: 16px; } #quickViewModal .quickview__modal__images .slick-prev, #editProductModal .quickview__modal__images .slick-prev { right: 65.7px; left: auto; } #quickViewModal .quickview__modal__footer, #editProductModal .quickview__modal__footer { padding: 0; position: unset; bottom: unset; border-top: 0 !important; } #quickViewModal .quickview__modal__footer .cart-and-ipay, #editProductModal .quickview__modal__footer .cart-and-ipay { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: var(--spacing-8); -moz-column-gap: var(--spacing-8); column-gap: var(--spacing-8); } #quickViewModal .quickview__modal__footer .quickview__modal__body--promotions .list__description, #editProductModal .quickview__modal__footer .quickview__modal__body--promotions .list__description { margin-top: var(--spacing-24); } #quickViewModal .quickview__modal__footer .dw-apple-pay-button, #editProductModal .quickview__modal__footer .dw-apple-pay-button { display: none !important; } } @media screen and (min-width: 1400px) { .quickViewBody .qw-buybox { -ms-flex-preferred-size: calc(65% - 16px); flex-basis: calc(65% - 16px); } } .quickViewBody .qw-image { padding-left: 0; margin-left: var(--spacing-8); } .quickViewBody .qw-buybox { padding-left: var(--spacing-16); -ms-flex-preferred-size: calc(50% - 16px); flex-basis: calc(50% - 16px); } .quickViewBody .js-quickview-slick > div { margin-bottom: var(--spacing-4); } .quickViewBody .js-quickview-slick > div:last-child { margin-bottom: 0; } @media (max-width: 991px) { .quickViewBody .qw-image { padding-left: var(--spacing-8); margin-left: 0; } .quickViewBody .qw-buybox { padding-left: var(--spacing-8); -ms-flex-preferred-size: 100%; flex-basis: 100%; } .quickViewBody .js-quickview-slick > div { margin-bottom: 0; } } .savedfor-modal .quickview__modal__footer .add-to-cart-actions { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .savedfor-modal .quickview__modal__footer .quantity { display: none; } /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ /* header height */ /* TODO change include to extend in future to reduce css size */ /* stylelint-disable */ .fit-analytics__flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; } .buy-box .fit-analytics__flex-container { /* 3rd party html override */ } .buy-box .fit-analytics__flex-container span { color: var(--link-secondary-color) !important; font-family: var(--textbutton-sm-fontFamily) !important; font-size: var(--textbutton-sm-fontSize) !important; font-weight: var(--textbutton-sm-fontWeight) !important; letter-spacing: var(--textbutton-sm-letterSpacing) !important; line-height: calc(var(--textbutton-sm-lineHeight)) !important; text-transform: var(--textbutton-sm-textCase, "inherit") !important; } .buy-box .fit-analytics__flex-container span:hover { color: var(--link-secondary-color-hover) !important; } .fit-analytics__flex-container .size-guide__component { margin-left: var(--spacing-12); margin-right: var(--spacing-4); border-bottom: var(--border-width-1) solid; } .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: translateX(-64%); transform: translateX(-64%); } @media (max-width: 1280px) { .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: translateX(-62%); transform: translateX(-62%); } } @media (max-width: 991px) { .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: translateX(-42%); transform: translateX(-42%); } } @media (max-width: 767px) { .product-quickview.product-wrapper.product-detail .size-guide__popup { -webkit-transform: none; transform: none; } } .product-quickview.product-wrapper.product-detail .size-guide__popup .modal-content .modal-header { padding-bottom: var(--spacing-16); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .product-quickview.product-wrapper.product-detail .size-guide__popup .modal-content .modal-header .sizeguide-close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: initial; } .size-guide__popup { width: 105vw; z-index: 1100; } @media (max-width: 767px) { .size-guide__popup { width: 100vw; } } .size-guide__popup .modal-dialog.modal-dialog-centered { max-width: 1080px; } @media (max-width: 1280px) { .size-guide__popup .modal-dialog.modal-dialog-centered { max-width: 860px; } } .size-guide__popup .modal-body { padding: var(--spacing-32); } @media (max-width: 767px) { .size-guide__popup .modal-content { max-height: var(--vh); } } .size-guide__popup.show + .modal-backdrop { z-index: 1050; } .size-guide__popup .close { position: absolute; right: 0; z-index: 100; margin: var(--spacing-32); } .size-guide__popup .cs_sizeGuideContainer { width: 100%; } .size-guide__popup .cs_sizeGuideContainer table tr th, .size-guide__popup .cs_sizeGuideContainer table tr td { font-size: var(--body-lg-fontSize); line-height: calc(var(--body-lg-lineHeight)); letter-spacing: var(--body-lg-letterSpacing); font-weight: var(--body-lg-fontWeight); } .size-guide__popup .header-wrapper { padding: 0; } .size-guide__popup .header-wrapper .header-text { margin-top: 0; color: var(--color-black); font-size: var(--heading-md-fontSize); line-height: calc(var(--heading-md-lineHeight)); letter-spacing: var(--heading-md-letterSpacing); font-weight: var(--heading-md-fontWeight); } .size-guide__popup .sub-header-text { padding-left: 0; } .size-recommendation__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .size-recommendation__container .size-guide { pointer-events: all; cursor: pointer; } .size-recommendation__container .fit-analytics__flex-container { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .pdp-size { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0; } .size-recommendation-group { padding-top: var(--spacing-8); } .size-recommendation-group .model-info { float: right; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; padding-top: 3.5px; color: var(--text-primary-color-light-bg); } .pvhthus .size-recommendation-group .model-info, .pvhthca .size-recommendation-group .model-info { font-weight: var(--font-weight-400); } .size-recommendation { display: inline-block; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: var(--spacing-16); } .size-recommendation__model-info { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; color: var(--text-primary-color-light-bg); } .buy-box .size-recommendation__container { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-family: var(--textbutton-sm-fontFamily) ; font-size: var(--textbutton-sm-fontSize) ; font-weight: var(--textbutton-sm-fontWeight) ; letter-spacing: var(--textbutton-sm-letterSpacing) ; line-height: calc(var(--textbutton-sm-lineHeight)) ; text-transform: var(--textbutton-sm-textCase, "inherit") ; } .buy-box .pdp-size { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-item-align: center; align-self: center; } .refinebar__modal { width: 100%; height: 100%; margin: auto; position: fixed; right: 0%; max-width: 468px; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers { max-width: 468px; padding: 0 var(--spacing-40); } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-head { padding-top: var(--spacing-40); padding-bottom: var(--spacing-24); } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-head svg { margin: 0; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .refinements.drawer-group { margin-bottom: 122px; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionIcon--open, .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionIcon--close { margin: 0; line-height: 0; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .enable-drawer__button button { margin: var(--spacing-4) 0; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader:has(.btn.collapsed) .accordionIcon--open { display: block; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader:has(.btn.collapsed) .accordionIcon--close { display: none; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader:not(:has(.btn.collapsed)) .accordionIcon--open { display: none; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader:not(:has(.btn.collapsed)) .accordionIcon--close { display: block; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader { width: 100%; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--spacing-20) 0 var(--spacing-16); cursor: pointer; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader__right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader .btn { color: var(--btn-bg-color-inversed); margin: 0; padding: 0; text-align: left; background: transparent; border: none; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; -webkit-transition: none; transition: none; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader .btn:focus-visible { /* stylelint-disable */ outline: 2px solid var(--color-brand-primary); outline-offset: 2px; border-radius: 2px; } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .accordionHeader .btn:focus:not(:focus-visible) { outline: none; } @media (min-width: 768px) { .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-head { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -2px; padding-left: var(--spacing-2); } } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-footer { position: fixed; padding: var(--spacing-24) var(--spacing-40); } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-footer .ds-action button { height: auto; padding: var(--spacing-16); } .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-footer .ds-action button.outline, .refinebar__modal .ds-offcanvas.ds-sort-filter.ds-drawers .ds-filter-footer .ds-action button.reset { margin-right: var(--spacing-20); } .refinebar__modal .modal-close button.close { margin: 0; z-index: 1; position: absolute; top: var(--spacing-24); right: var(--spacing-32); padding: 0; border-radius: 50%; width: 34px; height: 34px; min-width: 34px; min-height: 34px; color: var(--filter-text-primary-color); opacity: 1; } .refinebar__modal--content { border: none !important; border-radius: 0%; overflow-y: auto; overflow-x: hidden; height: 100%; } .refinebar__modal--content::-webkit-scrollbar { width: 0; background: none; } .ds-offcanvas.ds-sort-filter.ds-drawers .btn-close-wrap { width: 32px; height: 32px; border-radius: 50%; position: relative; top: -13px; cursor: pointer; } @media only screen and (max-width: 991.98px) { .ds-offcanvas.ds-sort-filter.ds-drawers .btn-close-wrap { position: relative; background: none; left: var(--spacing-8); padding-left: var(--spacing-8); padding-top: var(--spacing-8); } } .ds-offcanvas.ds-sort-filter.ds-drawers .btn-close-wrap:focus { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } .ds-offcanvas.ds-sort-filter.ds-drawers .btn-close-wrap .icon-close { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (max-width: 991.98px) { .ds-offcanvas.ds-sort-filter.ds-drawers .btn-close-wrap .icon-close { position: relative; top: 0; left: 0; -webkit-transform: initial; transform: initial; } } .ds-offcanvas.ds-sort-filter.ds-drawers .btn-close-wrap .icon-close::before { font-size: var(--sizing-icon-sm); } .plp-page .einstein-recommendation { padding: 0; } .einsteinReco-wrapper.loading { visibility: hidden; max-height: 380px; } .einsteinReco-wrapper__title { text-align: center; margin: var(--spacing-56) 0; color: var(--heading-primary-color); font-family: var(--heading-lg-fontFamily) ; font-size: var(--heading-lg-fontSize) ; font-weight: var(--heading-lg-fontWeight) ; letter-spacing: var(--heading-lg-letterSpacing) ; line-height: calc(var(--heading-lg-lineHeight)) ; text-transform: var(--heading-lg-textCase, "inherit") ; } @media only screen and (max-width: 991.98px) { .einsteinReco-wrapper__title { font-family: var(--heading-md-fontFamily) ; font-size: var(--heading-md-fontSize) ; font-weight: var(--heading-md-fontWeight) ; letter-spacing: var(--heading-md-letterSpacing) ; line-height: calc(var(--heading-md-lineHeight)) ; text-transform: var(--heading-md-textCase, "inherit") ; margin: var(--spacing-24) 0 var(--spacing-16); } } @media only screen and (max-width: 991.98px) { .einsteinReco-wrapper .slick-arrow { display: none !important; } .einsteinReco-wrapper__caro { margin-right: -24px; } .einsteinReco-wrapper .slick-list { margin-right: 0; } } .einsteinReco-wrapper__tile { position: relative; margin-bottom: var(--spacing-32); -ms-flex-item-align: start; align-self: flex-start; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body { padding-bottom: 0; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .pdp-link { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .pdp-link span { color: var(--text-secondary-light-bg); } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .price { padding-top: var(--spacing-4); margin-top: 0; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .price span { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .price .ds-slash-price { text-decoration: unset; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .price .sales span { color: var(--text-primary-color-light-bg); } @media only screen and (max-width: 991.98px) { .einsteinReco-wrapper__tile .ds-product-tile .tile-body { margin-top: var(--spacing-8); } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .pdp-link { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .pdp-link .ds-product-name span { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .einsteinReco-wrapper__tile .ds-product-tile .tile-body .price span { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } } .einsteinReco-wrapper__tile .product-tile { cursor: pointer; } .einsteinReco-wrapper__tile .product { padding-right: var(--spacing-4); width: 100%; display: inline-block; } .einsteinReco-wrapper .slick-arrow { width: 98px; height: 50px; background: var(--color-white); border-radius: 150px 150px 0 0; } .einsteinReco-wrapper .slick-arrow::before { content: ""; } .einsteinReco-wrapper .slick-prev, .einsteinReco-wrapper .slick-next { top: 36.5%; } .einsteinReco-wrapper .slick-prev { right: 43px; left: auto; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 1; } .einsteinReco-wrapper .slick-next { right: -6px; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-box-shadow: 0 18px 30px -5px rgba(0, 0, 0, 0.4); box-shadow: 0 18px 30px -5px rgba(0, 0, 0, 0.4); } .einsteinReco-wrapper .slick-next:focus { -webkit-box-shadow: 0 18px 30px -5px rgba(0, 0, 0, 0.4) !important; box-shadow: 0 18px 30px -5px rgba(0, 0, 0, 0.4) !important; } .einsteinReco-wrapper svg.svg-arrow { width: 16px; height: 14px; margin-bottom: 10px; } .einsteinReco-wrapper svg.svg-arrow path { fill: var(--color-brand-primary); } .einsteinReco-wrapper svg.svg-arrow.right { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .einsteinReco-wrapper svg.svg-arrow.left { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .einsteinReco-wrapper .slick-disabled svg.svg-arrow path { fill: var(--color-grey-200); } .einsteinReco-wrapper .img-quickview-container { position: relative; } @media (min-width: 992px) and (pointer: fine) { .einsteinReco-wrapper__tile, .einsteinReco-wrapper__slot-tile { /* stylelint-disable-line */ } .einsteinReco-wrapper__tile:hover .quickview[data-comp="quickView"], .einsteinReco-wrapper__slot-tile:hover .quickview[data-comp="quickView"] { display: block; } } .einsteinReco-wrapper .quickview[data-comp="quickView"], .slot-einsteinReco-wrapper .quickview[data-comp="quickView"] { position: absolute; bottom: var(--spacing-44); right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); display: none; opacity: 1; } .pvhthus .einsteinReco-wrapper .quickview[data-comp="quickView"], .pvhthca .einsteinReco-wrapper .quickview[data-comp="quickView"], .pvhthus .slot-einsteinReco-wrapper .quickview[data-comp="quickView"], .pvhthca .slot-einsteinReco-wrapper .quickview[data-comp="quickView"] { top: 50%; bottom: auto; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .einsteinReco-wrapper .img-quickview-container, .slot-einsteinReco-wrapper .img-quickview-container { position: relative; } .plp-reco-container { overflow-x: hidden; } @media only screen and (max-width: 991.98px) { .plp-reco-container .einsteinReco-wrapper__caro { margin-right: 0; } } .plp-reco-container .einsteinReco-wrapper .slick-list { margin-right: 0; } .icon-qv-plus { display: none; } /* SEARCH PAGE COMPONENT CSS */ .no-search-results { text-align: center; margin-top: var(--spacing-56); } .no-search-results .no-search-heading { word-break: break-all; color: var(--heading-secondary-color); font-family: var(--heading-lg-fontFamily) ; font-size: var(--heading-lg-fontSize) ; font-weight: var(--heading-lg-fontWeight) ; letter-spacing: var(--heading-lg-letterSpacing) ; line-height: calc(var(--heading-lg-lineHeight)) ; text-transform: var(--heading-lg-textCase, "inherit") ; margin-bottom: var(--spacing-24); } .no-search-results .no-search-heading span.search-keywords { color: var(--heading-secondary-color); } @media (max-width: 1199.98px) { .no-search-results .no-search-heading { font-family: var(--heading-md-fontFamily) ; font-size: var(--heading-md-fontSize) ; font-weight: var(--heading-md-fontWeight) ; letter-spacing: var(--heading-md-letterSpacing) ; line-height: calc(var(--heading-md-lineHeight)) ; text-transform: var(--heading-md-textCase, "inherit") ; } } @media (max-width: 991.98px) { .no-search-results .no-search-heading { margin-bottom: var(--spacing-40); } } .no-search-results .no-search-p { text-align: center; color: var(--text-secondary-light-bg); font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; margin-bottom: var(--spacing-32); margin-bottom: 17px; } @media (max-width: 991.98px) { .no-search-results .no-search-p { margin-bottom: var(--spacing-24); } } .no-search-results .search-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: var(--spacing-40); font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .recommendation-products { margin-top: var(--spacing-40); } .swatch-circle-beige { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #f5f5dc; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-beige.disabled { opacity: 0.2; } .swatch-filter-beige { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #f5f5dc; border-radius: 0.69em; background-color: #f5f5dc; display: block; position: relative; } .swatch-filter-beige.disabled { opacity: 0.2; } .swatch-circle-black { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #000; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-black.disabled { opacity: 0.2; } .swatch-filter-black { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #000; border-radius: 0.69em; background-color: #000; display: block; position: relative; } .swatch-filter-black.disabled { opacity: 0.2; } .swatch-circle-blue { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #0070d2; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-blue.disabled { opacity: 0.2; } .swatch-filter-blue { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #0070d2; border-radius: 0.69em; background-color: #0070d2; display: block; position: relative; } .swatch-filter-blue.disabled { opacity: 0.2; } .swatch-circle-brown { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #964b00; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-brown.disabled { opacity: 0.2; } .swatch-filter-brown { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #964b00; border-radius: 0.69em; background-color: #964b00; display: block; position: relative; } .swatch-filter-brown.disabled { opacity: 0.2; } .swatch-circle-green { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #008827; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-green.disabled { opacity: 0.2; } .swatch-filter-green { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #008827; border-radius: 0.69em; background-color: #008827; display: block; position: relative; } .swatch-filter-green.disabled { opacity: 0.2; } .swatch-circle-grey { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #8f979d; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-grey.disabled { opacity: 0.2; } .swatch-filter-grey { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #8f979d; border-radius: 0.69em; background-color: #8f979d; display: block; position: relative; } .swatch-filter-grey.disabled { opacity: 0.2; } .swatch-circle-navy { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #000080; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-navy.disabled { opacity: 0.2; } .swatch-filter-navy { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #000080; border-radius: 0.69em; background-color: #000080; display: block; position: relative; } .swatch-filter-navy.disabled { opacity: 0.2; } .swatch-circle-orange { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ffa500; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-orange.disabled { opacity: 0.2; } .swatch-filter-orange { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ffa500; border-radius: 0.69em; background-color: #ffa500; display: block; position: relative; } .swatch-filter-orange.disabled { opacity: 0.2; } .swatch-circle-pink { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #fe249a; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-pink.disabled { opacity: 0.2; } .swatch-filter-pink { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #fe249a; border-radius: 0.69em; background-color: #fe249a; display: block; position: relative; } .swatch-filter-pink.disabled { opacity: 0.2; } .swatch-circle-purple { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #800080; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-purple.disabled { opacity: 0.2; } .swatch-filter-purple { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #800080; border-radius: 0.69em; background-color: #800080; display: block; position: relative; } .swatch-filter-purple.disabled { opacity: 0.2; } .swatch-circle-red { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #f00; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-red.disabled { opacity: 0.2; } .swatch-filter-red { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #f00; border-radius: 0.69em; background-color: #f00; display: block; position: relative; } .swatch-filter-red.disabled { opacity: 0.2; } .swatch-circle-white { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #fff; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-white.disabled { opacity: 0.2; } .swatch-filter-white { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #fff; border-radius: 0.69em; background-color: #fff; display: block; position: relative; } .swatch-filter-white.disabled { opacity: 0.2; } .swatch-circle-yellow { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #ff0; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-yellow.disabled { opacity: 0.2; } .swatch-filter-yellow { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #ff0; border-radius: 0.69em; background-color: #ff0; display: block; position: relative; } .swatch-filter-yellow.disabled { opacity: 0.2; } .swatch-circle-neutral { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #c7bbb1; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-neutral.disabled { opacity: 0.2; } .swatch-filter-neutral { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #c7bbb1; border-radius: 0.69em; background-color: #c7bbb1; display: block; position: relative; } .swatch-filter-neutral.disabled { opacity: 0.2; } .swatch-circle-ivory { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #fffff0; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-ivory.disabled { opacity: 0.2; } .swatch-filter-ivory { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #fffff0; border-radius: 0.69em; background-color: #fffff0; display: block; position: relative; } .swatch-filter-ivory.disabled { opacity: 0.2; } .swatch-circle-denim { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #4b0082; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-denim.disabled { opacity: 0.2; } .swatch-filter-denim { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #4b0082; border-radius: 0.69em; background-color: #4b0082; display: block; position: relative; } .swatch-filter-denim.disabled { opacity: 0.2; } .swatch-circle-indigo { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #4b0082; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-indigo.disabled { opacity: 0.2; } .swatch-filter-indigo { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #4b0082; border-radius: 0.69em; background-color: #4b0082; display: block; position: relative; } .swatch-filter-indigo.disabled { opacity: 0.2; } .swatch-circle-multi { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet); border-radius: 1.25em; display: block; position: relative; } .swatch-circle-multi.disabled { opacity: 0.2; } .swatch-filter-multi { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet); border-radius: 0.69em; background-color: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet); display: block; position: relative; } .swatch-filter-multi.disabled { opacity: 0.2; } .swatch-circle-metallic { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 2.5em; height: 2.5em; background: #eaeaea; border-radius: 1.25em; display: block; position: relative; } .swatch-circle-metallic.disabled { opacity: 0.2; } .swatch-filter-metallic { border: 0.063em solid rgba(0, 0, 0, 0.3); width: 1.38em; height: 1.38em; background: #eaeaea; border-radius: 0.69em; background-color: #eaeaea; display: block; position: relative; } .swatch-filter-metallic.disabled { opacity: 0.2; } .swatch-circle-miscellaneous { background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #821e91), color-stop(25%, #821e91), color-stop(25%, #edd134), color-stop(50%, yellow), color-stop(50%, #edd134), color-stop(50%, #59ba00), color-stop(76%, #59ba00), color-stop(76%, #111), to(#111)), -webkit-gradient(linear, left bottom, left top, color-stop(0, #0e5cd1), color-stop(50%, #0e5cd1), color-stop(50%, #e20b0b), to(#e20b0b)); background: linear-gradient(0deg, #821e91 0, #821e91 25%, #edd134 25%, yellow 50%, #edd134 50%, #59ba00 50%, #59ba00 76%, #111 76%, #111 100%), linear-gradient(0deg, #0e5cd1 0, #0e5cd1 50%, #e20b0b 50%, #e20b0b 100%); background-repeat: repeat-y, repeat; background-size: 50% 100%, 100% 100%; border: 0.063em solid rgba(0, 0, 0, 0.3); border-radius: 1.25em; display: block; height: 2.5em; position: relative; -webkit-transform: rotate(35deg); transform: rotate(35deg); width: 2.5em; } .swatch-circle-miscellaneous.disabled { opacity: 0.2; } .swatch-circle-miscellaneous.selected::after { -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ /* Typography functions - Gobal core */ /* Font Size variables - Global core */ /* Line Height variables - Global core */ /* Letter Spacing variables - Global core */ .quickbuyMob--image__wrapper .product-image, .product-tile .image-container .plp-slick-img, .product-tile .plp-img-container { aspect-ratio: 3/3.95257; } /* Motion animations - Global core */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } /* buttons */ .quickbuy--variant-selector-container, .variant-selector-container { margin-bottom: var(--spacing-8); } .buy-box .quickbuy--variant-selector-container, .buy-box .variant-selector-container { margin-bottom: var(--spacing-16); } @media (max-width: 767.98px) { .quickbuy--variant-selector-container, .variant-selector-container { width: 100%; line-height: 0.1px; white-space: nowrap; } } .quickbuy--variant-selector-container .quickbuy--variant-list, .variant-selector-container .variant-list { list-style: none; margin: 0; padding-left: 0; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { text-overflow: ellipsis; white-space: nowrap; float: left; width: calc(25% - 8px * 3 / 4); height: 48px; border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-border-radius); color: var(--filter-text-primary-color); margin: 0 var(--spacing-8) var(--spacing-8) 0; overflow: hidden; text-align: center; cursor: pointer; padding: 19px 4px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0.5rem; font-size: 13px; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 767.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { width: 69px; float: none; display: inline-block; } } @media (min-width: 992px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover, .variant-selector-container .variant-color-item:hover, .variant-selector-container .variant-item:hover { border-color: #808080; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true], .variant-selector-container .variant-color-item[aria-checked=true], .variant-selector-container .variant-item[aria-checked=true] { background-color: var(--filter-text-primary-color); color: var(--color-white); border: none; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch, .variant-selector-container .disabled.variant-color-item, .variant-selector-container .disabled.variant-item { position: relative; color: var(--color-grey-400); border: var(--input-border-width) solid var(--color-grey-100); background-color: var(--color-grey-100); } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::before, .variant-selector-container .disabled.variant-color-item::before, .variant-selector-container .disabled.variant-item::before { position: absolute; content: ""; left: 50%; left: 50%; top: 50%; border-top: var(--input-border-width) solid; border-color: var(--color-grey-400); -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); -webkit-transform-origin: center center; transform-origin: center center; width: 28px; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: var(--spacing-4) var(--spacing-8) var(--spacing-8) var(--spacing-4); border-radius: 50%; padding: 0; border: none; overflow: visible; } @media (max-width: 767.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: 0 0 24px 24px; float: none; display: inline-block; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .variant-color-item::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 130%; height: 130%; border-radius: 50%; border: 1px solid transparent; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover::after, .variant-selector-container .variant-color-item:hover::after { border-color: #808080; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true]::after, .variant-selector-container .variant-color-item[aria-checked=true]::after { border-color: #000; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::before, .variant-selector-container .disabled.variant-color-item::before { left: -2%; width: 100%; color: #fff; border-color: #fff; background-color: #fff; } .quickbuy--variant-selector-container .disabled.quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .disabled.variant-color-item::after { border-color: transparent; } .quickbuy--variant-selector-container .colorOOS.quickbuy--variant-color-item.single-swatch, .variant-selector-container .colorOOS.variant-color-item { display: none; } .quickbuy--variant-error, .variant-error { width: 100%; clear: both; -webkit-transform: translateY(0); transform: translateY(0); color: var(--color-feedback-error); margin-bottom: var(--spacing-16); display: -webkit-box; display: -ms-flexbox; display: flex; } .show.quickbuy--variant-error, .show.variant-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: show-error 0.3s forwards; animation: show-error 0.3s forwards; } .hide.quickbuy--variant-error, .hide.variant-error { display: none; } .quickbuy--variant-error .icon-alert, .variant-error .icon-alert { margin-right: 6px; } @keyframes show-error { from { -webkit-transform: translateY(-24px); transform: translateY(-24px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } /* header height */ /* TODO change include to extend in future to reduce css size */ /* stylelint-disable */ /* motion animations */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .fade-in, .slide-up, .slide-down, .slide-left, .slide-right { -webkit-animation-duration: var(--motion-functional-duration-md); animation-duration: var(--motion-functional-duration-md); -webkit-animation-timing-function: cubic-bezier(--motion-functional-easing-ease); animation-timing-function: cubic-bezier(--motion-functional-easing-ease); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fade-out, .slide-up-exit, .slide-down-exit { -webkit-animation-duration: var(--motion-functional_exit-duration-sm); animation-duration: var(--motion-functional_exit-duration-sm); -webkit-animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } @keyframes slide-down { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-down-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slide-up-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes fade-in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* BEHAVIOUR ANIMATION */ .fade-in { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform, opacity; } .fade-out { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform, opacity; } .slide-up { -webkit-animation-name: slide-up, fade-in; animation-name: slide-up, fade-in; will-change: transform; } .slide-up-exit { -webkit-animation-name: slide-up-exit, fade-out; animation-name: slide-up-exit, fade-out; will-change: transform; } .slide-down { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform; } .slide-down-exit { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform; } .slide-left { -webkit-animation-name: slide-left; animation-name: slide-left; will-change: transform; } .slide-right { -webkit-animation-name: slide-right; animation-name: slide-right; will-change: transform; } /* TRANSITIONS */ .fonts-headers { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--color-grey-200); margin-bottom: var(--spacing-24); } .fonts-headers .values { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--font-size-md); } .fonts-headers .values span { color: var(--color-grey-500); font-weight: var(--font-weight-400); font-size: var(--font-size-sm); } .headline.lg { font-family: var(--heading-lg-fontFamily) ; font-size: var(--heading-lg-fontSize) ; font-weight: var(--heading-lg-fontWeight) ; letter-spacing: var(--heading-lg-letterSpacing) ; line-height: calc(var(--heading-lg-lineHeight)) ; text-transform: var(--heading-lg-textCase, "inherit") ; } .headline.md { font-family: var(--heading-md-fontFamily) ; font-size: var(--heading-md-fontSize) ; font-weight: var(--heading-md-fontWeight) ; letter-spacing: var(--heading-md-letterSpacing) ; line-height: calc(var(--heading-md-lineHeight)) ; text-transform: var(--heading-md-textCase, "inherit") ; } .headline.sm { font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; } .headline.xs { font-family: var(--heading-xs-fontFamily) ; font-size: var(--heading-xs-fontSize) ; font-weight: var(--heading-xs-fontWeight) ; letter-spacing: var(--heading-xs-letterSpacing) ; line-height: calc(var(--heading-xs-lineHeight)) ; text-transform: var(--heading-xs-textCase, "inherit") ; } .body-font.lg { font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; } .body-font.md { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .body-font.sm { font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .body-font.xs { font-family: var(--body-xs-fontFamily) ; font-size: var(--body-xs-fontSize) ; font-weight: var(--body-xs-fontWeight) ; letter-spacing: var(--body-xs-letterSpacing) ; line-height: calc(var(--body-xs-lineHeight)) ; text-transform: var(--body-xs-textCase, "inherit") ; } .text-caption { font-family: var(--body-xs-fontFamily) ; font-size: var(--body-xs-fontSize) ; font-weight: var(--body-xs-fontWeight) ; letter-spacing: var(--body-xs-letterSpacing) ; line-height: calc(var(--body-xs-lineHeight)) ; text-transform: var(--body-xs-textCase, "inherit") ; } .button-text.md { font-family: var(--button-md-fontFamily) ; font-size: var(--button-md-fontSize) ; font-weight: var(--button-md-fontWeight) ; letter-spacing: var(--button-md-letterSpacing) ; line-height: calc(var(--button-md-lineHeight)) ; text-transform: var(--button-md-textCase, "inherit") ; } .button-text.sm { font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } .textbutton { /* Escape the number */ } .textbutton.md { font-family: var(--textbutton-md-fontFamily) ; font-size: var(--textbutton-md-fontSize) ; font-weight: var(--textbutton-md-fontWeight) ; letter-spacing: var(--textbutton-md-letterSpacing) ; line-height: calc(var(--textbutton-md-lineHeight)) ; text-transform: var(--textbutton-md-textCase, "inherit") ; } .textbutton.sm { font-family: var(--textbutton-sm-fontFamily) ; font-size: var(--textbutton-sm-fontSize) ; font-weight: var(--textbutton-sm-fontWeight) ; letter-spacing: var(--textbutton-sm-letterSpacing) ; line-height: calc(var(--textbutton-sm-lineHeight)) ; text-transform: var(--textbutton-sm-textCase, "inherit") ; } .textbutton.xs { font-family: var(--textbutton-xs-fontFamily) ; font-size: var(--textbutton-xs-fontSize) ; font-weight: var(--textbutton-xs-fontWeight) ; letter-spacing: var(--textbutton-xs-letterSpacing) ; line-height: calc(var(--textbutton-xs-lineHeight)) ; text-transform: var(--textbutton-xs-textCase, "inherit") ; } .textbutton.\32xs { font-family: var(--textbutton-2xs-fontFamily) ; font-size: var(--textbutton-2xs-fontSize) ; font-weight: var(--textbutton-2xs-fontWeight) ; letter-spacing: var(--textbutton-2xs-letterSpacing) ; line-height: calc(var(--textbutton-2xs-lineHeight)) ; text-transform: var(--textbutton-2xs-textCase, "inherit") ; } .style_label.md { font-family: var(--style_label-md-fontFamily) ; font-size: var(--style_label-md-fontSize) ; font-weight: var(--style_label-md-fontWeight) ; letter-spacing: var(--style_label-md-letterSpacing) ; line-height: calc(var(--style_label-md-lineHeight)) ; text-transform: var(--style_label-md-textCase, "inherit") ; } .style_label.sm { font-family: var(--style_label-sm-fontFamily) ; font-size: var(--style_label-sm-fontSize) ; font-weight: var(--style_label-sm-fontWeight) ; letter-spacing: var(--style_label-sm-letterSpacing) ; line-height: calc(var(--style_label-sm-lineHeight)) ; text-transform: var(--style_label-sm-textCase, "inherit") ; } .t-paragraph { font-size: var(--font-size-md); color: var(--color-text-primary_on_light_bg); font-weight: var(--font-weight-500); } .t-paragraph.line-height-xl { line-height: var(--line-height-xl); } .t-paragraph.line-height-lg { line-height: var(--line-height-lg); } .t-paragraph.line-height-md { line-height: var(--line-height-md); } .t-paragraph.line-height-sm { line-height: var(--line-height-sm); } .t-paragraph.line-height-xs { line-height: var(--line-height-xs); } .t-paragraph.font-size-2xl { font-size: var(--font-size-2xl); } .t-paragraph.font-size-xl { font-size: var(--font-size-xl); } .t-paragraph.font-size-lg { font-size: var(--font-size-lg); } .t-paragraph.font-size-md { font-size: var(--font-size-md); } .t-paragraph.font-size-sm { font-size: var(--font-size-sm); } .t-paragraph.font-size-xs { font-size: var(--font-size-xs); } .t-paragraph.font-size-2xs { font-size: var(--font-size-2xs); } .t-paragraph.letter-spacing-sm { letter-spacing: var(--letter_spacing-sm); } .t-paragraph.letter-spacing-xs { letter-spacing: var(--letter_spacing-xs); } .t-paragraph .values { margin-top: var(--spacing-16); color: var(--color-grey-600); font-size: var(--font-size-sm); } .icon-utility-chevron-16px-left, .icon-utility-chevron-16px-right, .icon-utility-chevron-16px-up, .icon-utility-chevron-16px-down { width: 16px; height: 16px; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { caret-color: #000; } .product-details__price-box--name { font-size: 24px; line-height: 36px; letter-spacing: 0.2px; } @media (max-width: 767.98px) { .product-details--mob--name { margin-bottom: var(--spacing-16); line-height: var(--heading-md-lineHeight); } } /* header height */ /* TODO change include to extend in future to reduce css size */ /* stylelint-disable */ .quickbuy--variant-selector-container, .variant-selector-container { margin-bottom: var(--spacing-8); } @media only screen and (max-width: 991.98px) { .quickbuy--variant-selector-container, .variant-selector-container { width: 100%; line-height: 0.1px; white-space: nowrap; } } .quickbuy--variant-selector-container .quickbuy--variant-list, .variant-selector-container .variant-list { list-style: none; margin: 0; padding-left: 0; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { text-overflow: ellipsis; white-space: nowrap; float: left; width: calc(25% - 8px * 3 / 4); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-border-radius); color: var(--color-brand-primary); margin: 0 var(--spacing-8) var(--spacing-8) 0; overflow: hidden; text-align: center; cursor: pointer; padding: 19px 4px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 0.5rem; font-size: var(--font-size-sm); position: relative; } @media only screen and (max-width: 991.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item, .variant-selector-container .variant-item { width: 69px; float: none; display: inline-block; } } @media screen and (min-width: 1280px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover, .variant-selector-container .variant-color-item:hover, .variant-selector-container .variant-item:hover { border-color: var(--color-grey-500); -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true], .variant-selector-container .variant-color-item[aria-checked=true], .variant-selector-container .variant-item[aria-checked=true] { background-color: var(--body-color); color: var(--color-white); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[disabled], .variant-selector-container .variant-color-item[disabled], .variant-selector-container .variant-item[disabled] { position: relative; color: var(--color-grey-400); border: var(--input-border-width) solid var(--color-grey-100); background-color: var(--color-grey-100); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[disabled]::before, .variant-selector-container .variant-color-item[disabled]::before, .variant-selector-container .variant-item[disabled]::before { position: absolute; content: ""; left: 50%; left: 50%; top: 50%; border-top: var(--input-border-width) solid; border-color: var(--color-grey-400); -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); -webkit-transform-origin: center center; transform-origin: center center; width: 28px; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: var(--spacing-4) var(--spacing-8) var(--spacing-8) var(--spacing-4); border-radius: 50%; padding: 0; border: none; overflow: visible; border: var(--border-width-1) solid var(--color-grey-200); } @media only screen and (max-width: 991.98px) { .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch, .variant-selector-container .variant-color-item { width: 32px; height: 32px; margin: 0 0 var(--spacing-24) var(--spacing-24); float: none; display: inline-block; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:nth-child(4n), .variant-selector-container .variant-color-item:nth-child(4n) { margin: 0 0 var(--spacing-24) var(--spacing-24); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:first-child, .variant-selector-container .variant-color-item:first-child { margin: 0 0 var(--spacing-24) 6px; } } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch::after, .variant-selector-container .variant-color-item::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 130%; height: 130%; border-radius: 50%; border: 1px solid transparent; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch:hover::after, .variant-selector-container .variant-color-item:hover::after { border-color: var(--color-grey-200); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true]::after, .variant-selector-container .variant-color-item[aria-checked=true]::after { border-color: var(--color-black); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[disabled]::before, .variant-selector-container .variant-color-item[disabled]::before { left: -2%; width: 100%; color: var(--color-white); border-color: var(--color-white); background-color: var(--color-white); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[disabled]::after, .variant-selector-container .variant-color-item[disabled]::after { border-color: transparent; } .quickbuy--variant-error, .variant-error { width: 100%; clear: both; -webkit-transform: translateY(0); transform: translateY(0); color: var(--color-feedback-error); display: -webkit-box; display: -ms-flexbox; display: flex; font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .show.quickbuy--variant-error, .show.variant-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: show-error 0.3s forwards; animation: show-error 0.3s forwards; } .hide.quickbuy--variant-error, .hide.variant-error { display: none; } @keyframes show-error { from { -webkit-transform: translateY(-24px); transform: translateY(-24px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } /* motion animations */ /** Animation Guide * For mobile viewports (based on distance to cover)- * 0 to 240px distance - Functional motion * 241px to 360px distance - Expressive motion * For desktop viewports (based on distance to cover) - * 0 to 600px - Functional motion * 601px to 1440px - Expressive motion */ .fade-in, .slide-up, .slide-down, .slide-left, .slide-right { -webkit-animation-duration: var(--motion-functional-duration-md); animation-duration: var(--motion-functional-duration-md); -webkit-animation-timing-function: cubic-bezier(--motion-functional-easing-ease); animation-timing-function: cubic-bezier(--motion-functional-easing-ease); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .fade-out, .slide-up-exit, .slide-down-exit { -webkit-animation-duration: var(--motion-functional_exit-duration-sm); animation-duration: var(--motion-functional_exit-duration-sm); -webkit-animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); animation-timing-function: cubic-bezier(--motion-functional_exit-easing-in); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; will-change: transform; } .search-page-only ~ .ds-search-results .refinements, .search-page-only ~ .container .refinements, .ds-plp-page .refinements, .search-page-only ~ .ds-search-results .plp-img-container.slick-initialized .slick-slide.slick-active, .search-page-only ~ .container .plp-img-container.slick-initialized .slick-slide.slick-active, .ds-plp-page .plp-img-container.slick-initialized .slick-slide.slick-active { -webkit-transition-duration: var(--motion-functional-duration-md); transition-duration: var(--motion-functional-duration-md); -webkit-transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); transition-timing-function: cubic-bezier(var(--motion-functional-easing-ease)); } .search-page-only ~ .ds-search-results .ds-left-filter, .search-page-only ~ .container .ds-left-filter, .ds-plp-page .ds-left-filter, .search-page-only ~ .ds-search-results .ds-left-filter .fltroverlays, .search-page-only ~ .container .ds-left-filter .fltroverlays, .ds-plp-page .ds-left-filter .fltroverlays, .ds-left-filter.left-filter .ds-sort-filter .ds-filter-footer, .quickbuy__backdrop, .variation__attr--quickbuy .quickBuy-nonswatch-popup, .variation__attr--quickbuy [data-attr='colorCode'] { -webkit-transition-duration: var(--motion-expressive-duration-lg); transition-duration: var(--motion-expressive-duration-lg); -webkit-transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); transition-timing-function: cubic-bezier(var(--motion-expressive-easing-in_and_out)); } @keyframes slide-down { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: none; transform: none; } } @keyframes slide-down-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slide-up-exit { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes fade-in { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* BEHAVIOUR ANIMATION */ .fade-in { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform, opacity; } .fade-out { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform, opacity; } .slide-up { -webkit-animation-name: slide-up, fade-in; animation-name: slide-up, fade-in; will-change: transform; } .slide-up-exit { -webkit-animation-name: slide-up-exit, fade-out; animation-name: slide-up-exit, fade-out; will-change: transform; } .slide-down { -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; will-change: transform; } .slide-down-exit { -webkit-animation-name: slide-down-exit, fade-out; animation-name: slide-down-exit, fade-out; will-change: transform; } .slide-left { -webkit-animation-name: slide-left; animation-name: slide-left; will-change: transform; } .slide-right { -webkit-animation-name: slide-right; animation-name: slide-right; will-change: transform; } /* TRANSITIONS */ .modal--container { padding: var(--spacing-16) var(--spacing-24); } .modal--container .row__padding.qbb-image-container { margin-left: 0; } .modal .modal-error-color { color: var(--color-red-500) !important; } @media (max-width: 1280px) { .modal__mobile { display: none; } } .modal__mobile svg.icon-close { background-color: var(--color-grey-50); width: var(--spacing-12); height: var(--spacing-12); padding: var(--spacing-8); border-radius: var(--border-radius-circle); margin-right: var(--spacing-16); } .modal__mobile .product-quantity { padding-bottom: var(--spacing-32); } .modal--qbb { background: var(--color-white); } @media only screen and (max-width: 991.98px) { .modal--qbb { background: none; } } .modal--qbb .product-detail__prices { margin-bottom: 0; margin-top: var(--spacing-8); } .modal--qbb .product-detail__attributes { padding-bottom: var(--spacing-32); } .modal--qbb .product-detail__attributes .attribute { margin-bottom: 0; } .modal--qbb .product-detail__attributes .attribute-size label.size, .modal--qbb .product-detail__attributes .attribute-size label.size span, .modal--qbb .product-detail__attributes .attribute-size .size-help-links { font-size: var(--font-size-sm); line-height: var(--line-height-md); color: var(--color-grey-600); } @media (max-width: 1280px) { .modal--qbb .product-detail__attributes .attribute-size label.size, .modal--qbb .product-detail__attributes .attribute-size label.size span, .modal--qbb .product-detail__attributes .attribute-size .size-help-links { margin-bottom: 0; } } .modal--qbb .product-detail__attributes .attribute-size label.size span.variation__attr--value { color: var(--color-black); } .modal--qbb .product-detail__attributes .product__availability ul { margin: 0 0 var(--spacing-16); } @media only screen and (max-width: 991.98px) { .modal--qbb .product-detail__attributes label.colorCode { margin-bottom: 0; } } .modal--dialog__fullscreen { margin: 0; height: calc(var(--vh) - 1px); } .modal--content__fullscreen { height: 100%; border: none; } @media only screen and (max-width: 991.98px) { .modal--content__fullscreen { width: 100vw; overflow: auto; } } .modal--cart__button { height: var(--spacing-56); margin-top: var(--spacing-16); } @media only screen and (max-width: 991.98px) { .modal--cart__button .quantity-dropdown.variation-dropdown { display: none; } } .modal__attribute-container { margin-top: var(--spacing-20); } .modal__attribute-container .variation-spacing { width: 100%; } .modal .attribute-item.no-margin .variation-spacing { margin-bottom: 0; } .modal [data-attr='colorCode'] .attribute .quickbuy--variant-selector-container { margin-top: var(--spacing-12); } @media only screen and (max-width: 991.98px) { .modal [data-attr='colorCode'] .attribute .quickbuy--variant-selector-container { margin-top: 0; } } .modal [data-attr='colorCode'] .attribute .variant-list__item.colorOOS { display: none; } .modal .quickbuy--price { margin-bottom: 0; } .modal .quickbuy--price .product-details__price-box { display: none; } .modal .product_quantity_selector { margin-bottom: var(--spacing-32); } .qbb-ratings-review-count { position: relative; top: 0; left: var(--spacing-2); font-size: var(--font-size-xs); cursor: pointer; color: var(--color-grey-600); } @media (max-width: 1024px) { .cart__button { display: none; } } @media (max-width: 991px) { .cart__button { display: block; } } .cart__button--mobile { width: 100%; background-color: var(--color-black); color: #fff; height: 58px; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; position: fixed; bottom: 0; left: 0; z-index: 2; } .cart__button--desktop { margin-top: var(--spacing-12); } .cart__button--desktop .add-to-cart-container { margin-right: var(--spacing-8); margin-left: auto; width: 89%; position: relative; } .cart__button--desktop .availability-message { font-size: var(--font-size-sm); line-height: var(--line-height-md); color: var(--color-red-500); } .cart__button--desktop .availability-message .recommendation { text-decoration: underline; } .cart__button-wrapper--desktop { margin: var(--spacing-16) 0; } .svg--position { position: absolute; right: var(--spacing-24); top: var(--spacing-24); } .svg--position.ds-btn-circle { height: var(--sizing-button-xs); width: var(--sizing-button-xs); } .svg--position.ds-btn-circle svg { width: var(--spacing-16); height: var(--spacing-16); } .quickbuy { margin-top: 22px; } .quickbuy--container { background-color: var(--color-white); font-family: var(--base-font-family); font-weight: var(--font-weight-500); left: 50%; margin-top: 72px; max-width: 1920px; opacity: 0; padding: 0 var(--spacing-24); position: fixed; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: top 300ms linear; transition: top 300ms linear; will-change: top; visibility: hidden; width: 100%; } @media screen and (max-width: 1280px) { .quickbuy--container { display: none !important; } } .quickbuy--container.align-top { display: block; } .quickbuy--container.align-top.show { opacity: 1; visibility: visible; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .quickbuy--container.align-top:not(.show) { opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .quickbuy--container.align-bottom { display: none; } .quickbuy--container.align-bottom.show { opacity: 1; visibility: visible; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .quickbuy--container.align-bottom:not(.show) { opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; z-index: 0000 !important; bottom: -350px !important; } .js-colab-image.has-image ~ .quickbuy--desktop .align-bottom { display: block; } @media (max-width: 1400px) { .hide-scroll-and-lock .quickbuy--container { padding-right: calc(var(--spacing-24) + var(--scrollbarwidth)); } } @media screen and (min-width: 1400px) { .hide-scroll-and-lock .quickbuy--container { padding-right: calc(var(--spacing-38) + var(--scrollbarwidth)); } } @media screen and (min-width: 1400px) { .quickbuy--container { padding: 0 var(--spacing-38); } } .quickbuy--container .size-label { cursor: pointer; display: inline-block; padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); color: var(--quickbuy-primary-color); padding-right: var(--spacing-16); font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } .quickbuy--container .qbbAvailabilityError { margin-bottom: var(--spacing-4); } .quickbuy--container .qbb-product-detail-container { padding-left: var(--spacing-16); } .quickbuy--desktop { position: relative; z-index: 997; } .quickbuy--desktop .quickbuy--productname { margin-top: 0; margin-bottom: var(--spacing-4); } .quickbuy--desktop .quickbuy--productname .product-name { padding-top: 0; font-family: var(--heading-sm-fontFamily) ; font-size: var(--heading-sm-fontSize) ; font-weight: var(--heading-sm-fontWeight) ; letter-spacing: var(--heading-sm-letterSpacing) ; line-height: calc(var(--heading-sm-lineHeight)) ; text-transform: var(--heading-sm-textCase, "inherit") ; } .quickbuy--desktop .item-no-available { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .quickbuy--desk__attr { font-family: var(--base-font-family); font-weight: var(--font-weight-500); color: var(--quickbuy-secondary-color); padding: 0; font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } .quickbuy--image__padding { padding-right: var(--spacing-16); } .quickbuy--d-none { -webkit-transform: scale(1); transform: scale(1); opacity: 0; top: 40px; } .quickbuy--image__wrapper { width: 60px; height: var(--spacing-80); margin-top: var(--spacing-16); margin-bottom: 14px; } .quickbuy__flexprop { -webkit-box-flex: 0; -ms-flex: 0 0 14%; flex: 0 0 14%; margin-left: 10%; } @media only screen and (min-width: 992px) and (max-width: 1279.98px) { .quickbuy__flexprop { -webkit-box-flex: 0; -ms-flex: 0 0 16%; flex: 0 0 16%; } } .quickbuy__flexprop .col-6 { padding: 0 0 0 var(--spacing-2); } .quickbuy__flexprop .col-7.quickbuy--variant-size-wrapper { padding: 0 0 0 var(--spacing-2); } .quickbuy__flexprop .col-5 { padding: 0; } .quickbuy__flexprop .col-5.quickbuy--variant-color-wrapper { padding-left: var(--spacing-4); } .quickbuy__flexprop .size { font-size: 14px; line-height: 22px; letter-spacing: 0.2px; } .quickbuy__flexprop--padding { padding-top: 28px; padding-left: var(--spacing-4); } .quickbuy--variant-selector-container { margin-bottom: 0; } .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-dropdown, .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-size-dropdown { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; gap: var(--spacing-12); } .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-dropdown.shoe-layout, .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-size-dropdown.shoe-layout { grid-template-columns: repeat(2, 1fr); } .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-dropdown.shoe-layout .variant-item[disabled], .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-size-dropdown.shoe-layout .variant-item[disabled] { border: var(--input-border-width) solid var(--color-grey-100); } .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-dropdown.shoe-layout .variant-item[disabled]:hover, .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-size-dropdown.shoe-layout .variant-item[disabled]:hover { background-color: var(--color-grey-100); color: var(--color-grey-400); } .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-dropdown.shoe-layout .variant-item[disabled]::before, .quickbuy--variant-selector-container .quickbuy--variant-list.quickbuy-size-dropdown.shoe-layout .variant-item[disabled]::before { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); width: 110px; } @media (max-width: 991px) { .quickbuy--variant-selector-container .quickbuy--variant-list#qcolors { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: var(--spacing-20); -moz-column-gap: var(--spacing-20); column-gap: var(--spacing-20); row-gap: var(--spacing-16); } } .quickbuy--variant-selector-container .quickbuy--variant-item { width: 88px !important; } .quickbuy--variant-selector-container .quickbuy--variant-item.ds-radio-size + label { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: var(--spacing-16) 4px 18px; margin: 0; cursor: pointer; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .quickbuy--variant-selector-container .quickbuy--variant-item.ds-radio-size + label.modal-error-border { border: var(--input-border-width-focus) solid var(--input-color-error); } .quickbuy--variant-selector-container .quickbuy--variant-item:nth-child(4n) { margin: 0 8px 8px 0 !important; } .quickbuy--variant-selector-container .quickbuy--variant-color-item { margin-top: 7.2px !important; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch { margin-left: 0; margin-right: var(--spacing-20); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true] { position: relative; bottom: var(--spacing-12); width: 16px; height: 16px; margin-left: 0; margin-right: var(--spacing-20); } .quickbuy--variant-selector-container .quickbuy--variant-color-item.single-swatch[aria-checked=true]::after { border: none; } .quickbuy--variant-selector-container .quickbuy--variant-color-item.ds-radio-swatch + span { padding: var(--spacing-16) 4px 18px; margin: 0 var(--spacing-8) 8px 0; cursor: pointer; } .quickbuy--variant-selector-container.quickbuy--color-container-desk { cursor: pointer; margin-right: var(--spacing-16); padding-top: var(--spacing-20); } .quickbuy__drop--button { border: none; background: none; padding: 0; } .quickbuy__drop--button.color-drop { position: relative; bottom: 10px; } .quickbuy__drop--button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .quickbuy__drop--button svg { width: 12.83px; } .quickbuy__drop--button ~ .size-drop { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); } .quickbuy__badge--color { color: var(--color-red-500); } .quickbuy__backdrop { z-index: 800; width: 100vw; height: 100vh; background-color: var(--color-black); opacity: 0; visibility: hidden; position: fixed; left: 0; width: calc(100% - var(--scrollbarwidth)); -webkit-transition-property: opacity, visibility; transition-property: opacity, visibility; will-change: opacity, visibility; } .quickbuy__backdrop.show { opacity: 0.5; visibility: visible; } .quickbuy__product-header { margin-left: var(--spacing-16); margin-right: var(--spacing-16); } .quickbuy__product-header .ratings svg { width: var(--spacing-16); height: var(--spacing-16); } .quickbuy--variant .icon-chevron-down { font-size: var(--sizing-icon-sm); } .quickbuy--variant .icon-chevron-down::before { color: var(--color-grey-500); } .quickbuy-drop-arrow-up .icon-chevron-down { display: inline-block; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .quickbuyMob--image__wrapper { height: var(--spacing-80); margin-bottom: var(--spacing-8); margin-right: 0; padding-left: 0; padding-right: 0; width: var(--spacing-60); -webkit-box-flex: 0; -ms-flex: 0 0 60px; flex: 0 0 60px; } .quickbuyMob--image__wrapper .product-image { width: 60px; height: auto; } .quickbuyMob--productname__wrapper { margin-left: var(--spacing-16); padding-left: var(--spacing-12); } .quickbuyMob--productname__wrapper .ratings svg { width: var(--spacing-16); height: var(--spacing-16); } .quickbuyMob--promotion-fix { margin-top: var(--spacing-4); margin-bottom: 0; } .row__padding.variant-section { margin-top: var(--spacing-24); } .row__padding.variant-section.variant-section__mobile { margin-top: 0; } .variation__attr--quickbuy { position: relative; z-index: 900; } @media (max-width: 767px) { .variation__attr--quickbuy { display: none; } } .variation__attr--quickbuy .quickBuy-nonswatch-popup { background-color: var(--color-white); position: fixed; left: 35%; left: 35.5%; max-width: 432px; width: 432px; padding-bottom: var(--spacing-24); -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: hidden; -webkit-transition-property: all; transition-property: all; } .variation__attr--quickbuy .quickBuy-nonswatch-popup.align-top { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .variation__attr--quickbuy .quickBuy-nonswatch-popup.align-bottom { -webkit-transform: translateY(100%); transform: translateY(100%); } .variation__attr--quickbuy .quickBuy-nonswatch-popup.show { visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .quickbuy--variant-error.variant-error-size { display: none; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .variant-error { padding-top: var(--spacing-8); padding-bottom: 0; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .modal-error-color { color: var(--color-red-500); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .non-swatch-section { width: 100%; margin: var(--spacing-12) var(--spacing-24) 0 var(--spacing-24); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .non-swatch-section:first-child { margin-top: var(--spacing-24); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .non-swatch-section .attribute { margin: 0; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .non-swatch-section .attribute > label { margin-bottom: 0; color: var(--color-black); font-size: var(--font-size-sm); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .non-swatch-section .attribute .quickbuy--variant-selector-container { padding: var(--spacing-20) 0 0; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .quickbuy--variant-error { padding: 0; margin: var(--spacing-8) var(--spacing-24) var(--spacing-8); font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .size-help-links { margin-top: var(--spacing-2); margin-bottom: var(--spacing-8); position: absolute; right: var(--spacing-24); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product__availability { margin-top: 0; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product__availability ul { margin: 0; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product__availability ul p { margin: 0 0 0 var(--spacing-24); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product__availability ul.product-detail__salebadges-quickbuy p, .variation__attr--quickbuy .quickBuy-nonswatch-popup .product__availability ul.availability-msg-quickbuy p { margin-top: var(--spacing-8); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product__availability ul.product-detail__finalSaleFlag-quickbuy p { margin-top: var(--spacing-12); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product-detail__salebadges-quickbuy { color: var(--color-grey-800); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product-detail__salebadges-quickbuy.custom-error { color: var(--color-feedback-error); } .variation__attr--quickbuy .quickBuy-nonswatch-popup .availability-msg-quickbuy { color: var(--quickbuy-secondary-color); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .availability-msg-quickbuy.custom-error { color: var(--color-feedback-error); width: 380px; } .variation__attr--quickbuy .quickBuy-nonswatch-popup .product-detail__finalSaleFlag-quickbuy { color: var(--color-red-500); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .variation__attr--quickbuy [data-attr='colorCode'] { background-color: var(--color-white); left: 42%; max-width: 350px; padding: var(--spacing-20) var(--spacing-16) var(--spacing-16); position: fixed; visibility: hidden; -webkit-transition-property: all; transition-property: all; } .variation__attr--quickbuy [data-attr='colorCode'].align-top { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .variation__attr--quickbuy [data-attr='colorCode'].align-bottom { -webkit-transform: translateY(100%); transform: translateY(100%); } .variation__attr--quickbuy [data-attr='colorCode'].show { visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .variation__attr--quickbuy [data-attr='colorCode'] .attribute { margin-bottom: 0; } .variation__attr--quickbuy [data-attr='colorCode'] .attribute label { margin-bottom: var(--spacing-8); margin-right: var(--spacing-12); } .variation__attr--quickbuy [data-attr='colorCode'] .attribute label.colorCode { margin-bottom: var(--spacing-4); } .variation__attr--quickbuy [data-attr='colorCode'] .attribute .quickbuy--variant-selector-container { padding: var(--spacing-16) 0 0 0; } .variation__attr--quickbuy [data-attr='colorCode'] .attribute .variant-list__item span { margin: 0 0 var(--spacing-8) 5px; } .variation__attr--quickbuy [data-attr='colorCode'] .attribute .variant-list__item.colorOOS { display: none; } .product-detail__salebadges-qbb-onload { padding: 0; } .product-detail__salebadges-qbb-onload p { padding: 0; color: var(--color-red-500); margin: var(--spacing-8) var(--spacing-24) 0; font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } @media only screen and (max-width: 991.98px) { .product-detail__salebadges-qbb-onload p { margin: var(--spacing-8) 0 var(--spacing-8); } } .product-detail__salebadges-quickbuy { color: var(--color-grey-800); font-family: var(--button-sm-fontFamily) ; font-size: var(--button-sm-fontSize) ; font-weight: var(--button-sm-fontWeight) ; letter-spacing: var(--button-sm-letterSpacing) ; line-height: calc(var(--button-sm-lineHeight)) ; text-transform: var(--button-sm-textCase, "inherit") ; } @media (max-width: 1280px) { .product-detail__salebadges-quickbuy { margin: var(--spacing-8) var(--spacing-24) var(--spacing-8); } } .product-detail__salebadges-quickbuy.custom-error { color: var(--color-feedback-error); } .availability-msg-quickbuy { color: var(--quickbuy-secondary-color); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .availability-msg-quickbuy.custom-error { color: var(--color-feedback-error); width: 380px; } @media screen and (min-width: 1280px) { .availability-msg-quickbuy span { margin: var(--spacing-8) var(--spacing-24) var(--spacing-8); } } .product-detail__finalSaleFlag-quickbuy { color: var(--color-red-500); font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } @media (max-width: 1280px) { .product-detail__finalSaleFlag-quickbuy { margin: var(--spacing-8) var(--spacing-24) var(--spacing-8); } } @media (max-width: 1280px) { .product-detail__finalSaleFlag-quickbuy span { margin: var(--spacing-8) var(--spacing-24) var(--spacing-8); } } .variation-spacing-size-label { margin-bottom: var(--spacing-8); } .variant-selector-container .variant-color-item.oss-color + label::before, .variant-selector-container .variant-color-item.oss-color::before { position: absolute; content: ""; left: 50%; top: 50%; border-top: var(--border-width-2) solid; border-color: var(--color-white); -webkit-transform: translate(-50%, -50%) rotate(-40deg); transform: translate(-50%, -50%) rotate(-40deg); -webkit-transform-origin: center center; transform-origin: center center; width: 13px; z-index: 2; width: 24px; } /* FIXME : cleanup and move to DS under components */ .variant-selector-container .variant-item.disabled[aria-checked="true"] { border-color: var(--color-brand-primary); background-color: var(--color-grey-100); color: var(--color-grey-400); } .variant-selector-container .variant-color-item.oss-color + label { position: relative; cursor: pointer; } .variant-selector-container .variant-color-item.oss-color { position: relative; cursor: pointer; } .variant-selector-container .variant-list:not([data-display-id="colorCode"]) { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; gap: var(--spacing-12); } .variant-selector-container .variant-list:not([data-display-id="colorCode"]) h3 { grid-column: 1 / -1; font-weight: normal; } .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout { grid-template-columns: repeat(2, 1fr); } .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item[disabled], .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item.disabled { border: var(--input-border-width) solid var(--color-grey-100); } .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item[disabled]:hover, .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item.disabled:hover { background-color: var(--color-grey-100); color: var(--color-grey-400); } .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item[disabled]::before, .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item.disabled::before { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); width: 110px; } .variant-selector-container .variant-list:not([data-display-id="colorCode"]).shoe-layout .variant-item.disabled:hover { border-color: var(--btn-secondary-outline-color-hover); } .variant-selector-container li.variant-item { width: 95%; } .variant-selector-container li.variant-item.ds-radio-size + label { width: calc(23% - 8px * 3 / 4); padding: var(--spacing-16) var(--spacing-4); margin: 0 var(--spacing-8) 8px 0; cursor: pointer; } .variant-selector-container input.variant-item.disabled[aria-checked=true] + label { border: 1px solid var(--color-brand-primary); } .variant-selector-container .variant-color-item.ds-radio-swatch + span { padding: var(--spacing-16) var(--spacing-4); margin: 0 var(--spacing-8) 8px 0; cursor: pointer; } .swatch-container { width: 100%; overflow: hidden; height: 24px; padding-left: 3px; position: relative; margin-top: var(--spacing-8); } @media only screen and (max-width: 991.98px) { .swatch-container { margin-top: var(--spacing-16); margin-bottom: 0; } } .swatch-list { list-style: none; padding: 0; margin: 0; } .swatch-item { float: left; color: var(--color-black); cursor: pointer; position: relative; width: 16px; height: 16px; margin: var(--spacing-4) 12px var(--spacing-4) 0; border-radius: 50%; border: none; position: absolute; top: 0; opacity: 0; border: var(--border-width-1) solid var(--color-grey-200); } .show .swatch-item { opacity: 1; } .swatch-item::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .swatch-item:hover::after { border-color: var(--color-grey-200); } .swatch-item[aria-checked="true"]::after { border-color: var(--color-grey-500); } .swatch-item[aria-checked="true"] { cursor: default; } .swatch-item:nth-child(1) { left: calc(3px + (26px * (1 - 1))); } .swatch-item:nth-child(2) { left: calc(3px + (26px * (2 - 1))); } .swatch-item:nth-child(3) { left: calc(3px + (26px * (3 - 1))); } .swatch-item:nth-child(4) { left: calc(3px + (26px * (4 - 1))); } .swatch-item:nth-child(5) { left: calc(3px + (26px * (5 - 1))); } .swatch-item:nth-child(6) { left: calc(3px + (26px * (6 - 1))); } .swatch-item:nth-child(7) { left: calc(3px + (26px * (7 - 1))); } .swatch-item:nth-child(8) { left: calc(3px + (26px * (8 - 1))); } .swatch-item:nth-child(9) { left: calc(3px + (26px * (9 - 1))); } @media only screen and (max-width: 991.98px) { .swatch-item:nth-child(1) { left: calc(3px + (31px * (1 - 1))); } .swatch-item:nth-child(2) { left: calc(3px + (31px * (2 - 1))); } .swatch-item:nth-child(3) { left: calc(3px + (31px * (3 - 1))); } .swatch-item:nth-child(4) { left: calc(3px + (31px * (4 - 1))); } .swatch-item:nth-child(5) { left: calc(3px + (31px * (5 - 1))); } .swatch-item:nth-child(6) { left: calc(3px + (31px * (6 - 1))); } .swatch-item:nth-child(7) { left: calc(3px + (31px * (7 - 1))); } .swatch-item:nth-child(8) { left: calc(3px + (31px * (8 - 1))); } .swatch-item:nth-child(9) { left: calc(3px + (31px * (9 - 1))); } } .swatch-more-colors { position: absolute; top: 0; opacity: 0; -webkit-transition: all linear 0.1s; transition: all linear 0.1s; } .swatch-more-colors span { color: var(--text-secondary-light-bg); font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } .show .swatch-more-colors { opacity: 1; } .swatch-plus-colors { display: inline; position: absolute; top: 0; left: 0; -webkit-transition: all linear 0.01s; transition: all linear 0.01s; font-size: var(--font-size-sm); letter-spacing: var(--letter_spacing-sm); line-height: var(--line-height-lg); transition: all linear 0.01s; opacity: 1; } @media (max-width: 767.98px) { .swatch-plus-colors { font-size: var(--font-size-xs); line-height: var(--line-height-md); } } .swatch-plus-colors span { color: var(--text-secondary-light-bg); } .show .swatch-plus-colors { opacity: 0; } .swatch-plus-colors.slide { top: -24px; } .variant-price { font-family: var(--body-lg-fontFamily) ; font-size: var(--body-lg-fontSize) ; font-weight: var(--body-lg-fontWeight) ; letter-spacing: var(--body-lg-letterSpacing) ; line-height: calc(var(--body-lg-lineHeight)) ; text-transform: var(--body-lg-textCase, "inherit") ; margin-bottom: var(--spacing-12); } .variant-price .ds-slash-price { color: var(--color-grey-600); } .buy-box .variant-price { margin-bottom: var(--spacing-16); } .variant-price span.range, .variant-price .ds-slash-price, .variant-price span.sales, .variant-price .ds-product-price { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } .variant-price .ds-discount { display: none; } .variant-price .range, .variant-price .sales { padding-right: var(--spacing-4); color: var(--quickbuy-primary-color); } .variant-selector-container .variant-list.colors-variant-list { margin-bottom: var(--spacing-24); } .product-tile .tile-body { padding: var(--spacing-16) var(--spacing-16) var(--spacing-32); } @media (max-width: 767.98px) { .product-tile .tile-body { padding: var(--spacing-12) var(--spacing-16) var(--spacing-32); } } .product-tile .tile-body .pdp-link { margin-bottom: 0; font-weight: var(--font-weight-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media only screen and (max-width: 991.98px) { .product-tile .tile-body .pdp-link { font-family: var(--body-md-fontFamily) ; font-size: var(--body-md-fontSize) ; font-weight: var(--body-md-fontWeight) ; letter-spacing: var(--body-md-letterSpacing) ; line-height: calc(var(--body-md-lineHeight)) ; text-transform: var(--body-md-textCase, "inherit") ; } } .product-tile .tile-body .price { color: var(--text-primary-color-light-bg); margin-bottom: var(--spacing-2); } @media (max-width: 767px) { .product-tile .tile-body .price span { white-space: nowrap; } } @media (max-width: 767.98px) { .product-tile .tile-body .price { margin-bottom: 0; } } .product-tile .tile-body .price .strike-through { color: var(--color-grey-500); } .product-tile .tile-body .price .strike-through span { text-decoration: line-through; color: var(--color-grey-500); display: inline-block; } .product-tile .tile-body .price .product-sales-discnt span { font-size: var(--body-md-fontSize); letter-spacing: var(--letter_spacing-sm); color: var(--color-red-500); font-weight: var(--font-weight-500); } @media (max-width: 767.98px) { .product-tile .tile-body .price .product-sales-discnt span { font-size: var(--font-size-xs); } } .product-tile .tile-body .price .pdprange-percent span { font-size: var(--body-md-fontSize); letter-spacing: var(--letter_spacing-sm); color: var(--color-red-500); } @media (max-width: 767.98px) { .product-tile .tile-body .price .pdprange-percent span { font-size: var(--body-sm-fontSize); } } @media (max-width: 767.98px) { .product-tile .tile-body .price .pdprange-percent { display: var(--none); } } .product-tile .tile-body .price .listrange-strike span { text-decoration: line-through; color: var(--color-grey-500); display: inline-block; } @media (max-width: 767px) { .product-tile .tile-body .price .listrange-strike span { margin-bottom: 0; } } @media (max-width: 767.98px) { .product-tile .tile-body .price .listrange-strike { display: var(--none); } } .product-tile .tile-body .promotions-container { color: var(--color-text-discount); margin-bottom: var(--spacing-4); font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; } @media only screen and (max-width: 991.98px) { .product-tile .tile-body .promotions-container { margin-bottom: 0; } } .product-tile .tile-body .product-flag { font-family: "KleinMedium", Arial, Helvetica, sans-serif; font-weight: var(--font-weight-500); color: var(--color-black); padding: var(--spacing-8) 0 0; font-size: var(--body-md-fontSize); line-height: var(--body-md-lineHeight); letter-spacing: var(--body-md-letterSpacing); } @media (max-width: 991px) { .product-tile .tile-body .product-flag { font-size: var(--body-sm-fontSize); line-height: var(--body-sm-lineHeight); letter-spacing: var(--body-sm-letterSpacing); } } @media (max-width: 767px) { .product-tile .tile-body .product-flag { padding: var(--spacing-16) 0 0; } } .product-tile .tile-body .tile-body-footer { margin-top: var(--spacing-8); } @media (max-width: 767.98px) { .product-tile .tile-body .tile-body-footer { margin-top: var(--spacing-12); } } .product-tile .image-container { overflow: hidden; } .product-tile .image-container .quickview { position: absolute; bottom: var(--spacing-44); right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); display: none; } .product-tile .image-container .quickview .icon-qv-plus { display: none; } @media only screen and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1366px) and (pointer: coarse) { .product-tile .image-container .quickview.quickview-mobile { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border-radius: unset; color: var(--color-black); height: var(--spacing-20); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; min-height: var(--spacing-20); min-width: var(--spacing-20); padding: 0; text-shadow: none; width: var(--spacing-20); -webkit-transform: none; transform: none; right: var(--spacing-12); bottom: var(--spacing-8); top: auto; z-index: 5; } .product-tile .image-container .quickview.quickview-mobile .quickview__button { width: var(--spacing-20); height: var(--spacing-20); padding: 0; border-radius: 50%; border: 1px solid var(--color-grey-200); background-color: var(--color-white); position: relative; } .product-tile .image-container .quickview.quickview-mobile .quickview__button::after { content: ''; position: absolute; right: -12px; bottom: -8px; width: 50px; height: 50px; z-index: -1; cursor: pointer; } .product-tile .image-container .quickview.quickview-mobile .quickview__button span { width: var(--spacing-20); height: var(--spacing-20); line-height: 19px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--color-black); font-size: var(--sizing-icon-sm); } .pvhckus .product-tile .image-container .quickview.quickview-mobile .quickview__button span, .pvhckca .product-tile .image-container .quickview.quickview-mobile .quickview__button span { padding-right: 1.5px; } } .product-tile .image-container .quickview span { font-weight: var(--font-weight-500); font-size: var(--font-size-sm); line-height: var(--line-height-xs); letter-spacing: var(--letter_spacing-sm); } @media (min-width: 992px) { .product-tile .image-container .plp-slick-img:empty { background-color: #fafafa; } } @media (max-width: 991.98px) { .product-tile .image-container .plp-slick-img:empty { background-color: #fafafa; } } @media (pointer: fine) { .product-tile { /* stylelint-disable-line */ } .product-tile .image-container:hover .quickview { display: block; } } .product-tile .plp-img-container { overflow: hidden; background-color: var(--color-grey-50); } .product-tile .plp-img-container .slick-dots { bottom: var(--spacing-16); opacity: 0; } .product-tile .plp-img-container .slick-dots li, .product-tile .plp-img-container .slick-dots button { height: 0; } .product-tile .plp-img-container .slick-dots button::before { content: ""; background-color: var(--color-grey-200); width: 24px; height: 2px; opacity: 1; } .product-tile .plp-img-container .slick-dots .slick-active button::before { background-color: var(--color-black); } @media only screen and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1366px) and (pointer: coarse) { .product-tile .plp-img-container .slick-dots { opacity: 0; } } .product-tile .plp-img-container .slick-arrow { width: 30px; height: 30px; background: var(--color-grey-50); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; } .product-tile .plp-img-container .slick-arrow .icon-image-slide { color: var(--color-brand-primary); font-size: var(--sizing-icon-sm); } .product-tile .plp-img-container .slick-arrow.slick-disabled .icon-image-slide { opacity: var(--opacity-30); } .product-tile .plp-img-container .slick-arrow::before { content: ""; } .product-tile .plp-img-container .slick-arrow:hover:not(.slick-disabled) { background: var(--color-white); } .product-tile .plp-img-container .slick-prev { left: var(--spacing-16); z-index: 1; } .product-tile .plp-img-container .slick-next { right: var(--spacing-16); } .product-tile .plp-img-container:hover .slick-arrow { opacity: 1; } @media only screen and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1366px) and (pointer: coarse) { .product-tile .plp-img-container:hover .slick-arrow { opacity: 0; } } .product-tile .plp-img-container:hover .slick-dots { opacity: 1; } @media only screen and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1366px) and (pointer: coarse) { .product-tile .plp-img-container:hover .slick-dots { opacity: 0; } } .product-tile .img-quickview-container { position: relative; } .product-tile .img-quickview-container .badge-container { z-index: 1; position: absolute; color: var(--product-badge-text-color); white-space: nowrap; font-family: var(--body-sm-fontFamily) ; font-size: var(--body-sm-fontSize) ; font-weight: var(--body-sm-fontWeight) ; letter-spacing: var(--body-sm-letterSpacing) ; line-height: calc(var(--body-sm-lineHeight)) ; text-transform: var(--body-sm-textCase, "inherit") ; padding: 3px var(--spacing-8) 3px var(--spacing-8); background-color: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--color-white); border-radius: 2px; } @media screen and (min-width: 1280px) { .product-tile .img-quickview-container .badge-container { top: var(--spacing-8); left: var(--spacing-8); } } @media only screen and (min-width: 992px) and (max-width: 1279.98px) { .product-tile .img-quickview-container .badge-container { top: var(--spacing-8); left: var(--spacing-8); } } @media only screen and (max-width: 991.98px) { .product-tile .img-quickview-container .badge-container { left: var(--spacing-8); bottom: var(--spacing-8); height: 25px; } } .product-tile .img-quickview-container .slick-dotted.slick-slider { margin-bottom: 0; } .plp-slot .html-slot-container { width: 100%; height: 100%; } .plp-slot .slot-container { width: 100%; background-color: var(--color-white); background-size: 100% 100%; background-repeat: no-repeat; position: relative; } .plp-slot .slot-content { position: absolute; width: 55%; top: 20px; margin-left: 45%; } .plp-slot .slot-url { height: 10%; float: right; } .swatch-mark-color.color-value[data-selected=true]::after { border-color: var(--color-grey-500); } .swatch-mark-color.color-value.selected { margin-left: var(--spacing-2); } .swatch-mark-color.color-value.selected::after { content: ''; position: absolute; top: 50%; left: 7px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--filter-text-primary-color); -webkit-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } /* APPLICATION OVERRIDE STYLE GOES HERE */ .btn-close-wrap { background: var(--color-grey-50); }