.address-book-form__container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: var(--size-breakpoint-sm);
}
.address-book-form__header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.address-book-form__header-container .ok-icon {
width: unset;
height: unset;
}
.address-book-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
}
.address-book-form__success-message {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-sm);
margin-bottom: var(--size-spacing-one-x);
}
.address-book-form__button-container {
display: flex;
flex-direction: column-reverse;
align-items: center;
align-self: stretch;
gap: var(--size-spacing-half-x);
}
.address-book-form .ok-button {
align-self: stretch;
}
.address-book-form__item {
position: relative;
}
.address-book-form__card {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x) var(--size-spacing-half-x);
border: 1px solid var(--color-blue-20n);
border-radius: 2px;
}
.address-book-form__card--section {
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-blue-20n);
padding: var(--size-spacing-one-x) 0;
gap: var(--size-spacing-half-x);
}
.address-book-form__card--kr-text {
color: var(--color-primary-60);
text-decoration: underline;
font-size: var(--font-size-600);
}
.address-book-form__item .ok-icon {
position: absolute;
top: 50%;
right: var(--size-spacing-half-x);
transform: translateY(-50%);
width: var(--font-size-900);
height: var(--font-size-900);
color: var(--color-brand-80);
}
#datePickerDiv .ok-icon {
right: var(--size-spacing-two-x);
}
.address-book-form__item--input {
border-radius: 4px;
border-width: 1px;
color: var(--color-base-100);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
width: 100%;
}
.address-book-form__item--input:focus {
border-color: var(--color-primary-60);
box-shadow: none;
}
.address-book-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid;
outline-offset: -1px;
}
.address-book-form__item--label {
position: absolute;
top: 50%;
left: var(--size-spacing-half-x);
transform: translateY(-50%);
padding: 0 var(--size-spacing-quarter-x);
transition: 0.2s;
pointer-events: none;
color: var(--color-blue-60n);
}
.address-book-form__item--label-prefix {
text-transform: capitalize;
}
.address-book-form__item--note {
margin-top: calc(-1 * var(--size-spacing-half-x));
}
.address-book-form__item--input:focus + .address-book-form__item--label,
.address-book-form__item--input:not(:placeholder-shown)
+ .address-book-form__item--label {
top: -0.25rem;
transform: translateY(0);
font-size: var(--font-size-300);
background: var(--color-base-0);
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
max-width: calc(100% - var(--size-spacing-one-x));
}
.address-book-form__item--error .address-book-form__item--input,
.address-book-form__error .ok-checkbox__input-control {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.address-book-form__item--error .address-book-form__item--label,
.address-book-form__item--error .ok-checkbox__label,
.address-book-form__item--error .ok-icon,
.address-book-form__error {
color: var(--color-red-60);
}
@media (min-width: 30.0625rem) {
.address-book-form__button-container {
flex-direction: row;
justify-content: space-between;
}
.address-book-form .ok-button {
align-self: flex-end;
}
}
.address-book-form__kr-row {
display: flex;
gap: var(--size-spacing-three-quarters-x);
align-items: center;
}
.address-book-form__kr-input {
flex-grow: 1;
}
.address-book-form__kr-button {
margin-left: auto;
white-space: nowrap;
}
/* for the JP only zip code and address search */
.address-book-form__jp-zip-row {
display: flex;
gap: var(--size-spacing-three-quarters-x);
align-items: flex-end;
}
.address-book-form__jp-zip-input {
flex-grow: 1;
}
.address-book-form__jp-zip-button {
margin-left: auto;
white-space: nowrap;
}
.address-card {
display: flex;
flex-direction: column;
flex: 0 0 100%;
max-width: 100%;
border: 1px solid var(--color-blue-20n);
padding: 1.25rem var(--size-spacing-half-x);
gap: var(--size-spacing-half-x);
}
.address-card__phone {
display: flex;
gap: var(--size-spacing-quarter-x);
margin-top: auto;
}
.address-card__buttons-container {
display: flex;
justify-content: space-between;
margin-top: var(--size-spacing-one-and-a-half-x);
}
.address-card__buttons-container .ok-link .ok-icon {
color: var(--color-base-100);
}
.address-card-removing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.4;
}
.address-card-cancel-link > button {
text-transform: capitalize;
}
@media (min-width: 30.0625rem) {
.address-card {
flex: 0 0 48%;
max-width: 48%;
}
}
@media (min-width: 48rem) {
.address-card {
flex: 0 0 31%;
max-width: 31%;
}
}
.address-book {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
margin: auto auto var(--size-spacing-two-x) auto;
line-height: 1.4;
}
.address-book__header {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: 22rem;
}
.address-book__header--heading {
font-size: var(--font-size-900);
}
.address-book__list {
display: flex;
flex-flow: wrap;
justify-content: start;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-xl);
}
.alternate-message {
.ok-toast {
font-size: var(--font-size-500);
line-height: 1.413;
}
.ok-toast__block {
justify-content: flex-start;
}
}
[data-brand='heydude'] {
--sf-product-swatch-promo-message-color: var(--color-teal-60);
--sf-product-swatch-promo-message-font-weight: var(--font-weight-bold);
}
[data-brand='crocs'] {
--sf-product-swatch-promo-message-color: var(--color-brand-80);
--sf-product-swatch-promo-message-font-weight: 450;
}
.sf-product_color-swatches {
display: flex;
fill: none;
flex-direction: column;
row-gap: 8px;
stroke: var(--sf-product-swatch-promo-message-color);
.sf-product_price {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0;
}
}
.sf-product-swatch-group-wrapper {
display: flex;
flex-direction: column;
gap: var(--size-spacing-half-x);
padding-top: var(--size-spacing-quarter-x);
&:first-of-type {
padding-top: 0;
}
}
.sf-product-swatch-promos-wrapper {
align-items: flex-end;
display: flex;
flex-direction: column;
row-gap: 10px;
}
.sf-product_promo-message {
color: var(--sf-product-swatch-promo-message-color);
column-gap: var(--size-spacing-half-x);
display: flex;
font-weight: var(--sf-product-swatch-promo-message-font-weight);
line-height: 1.4;
}
.sf-product-color-swatch-label {
font-size: var(--font-size-400);
line-height: 1.286;
}
.sf-product_color-selected {
font-weight: var(--font-weight-regular);
}
.sf-product_color-group {
display: grid;
grid-template-columns: repeat(auto-fill, 70px);
gap: var(--size-spacing-half-x);
padding-bottom: var(--size-spacing-0);
min-height: 48px;
}
[data-brand='heydude'] .sf-product_color-group {
grid-template-columns: repeat(auto-fill, 48px);
}
.sf-product_color-swatch {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--size-spacing-quarter-x);
border: 1px solid var(--color-blue-20n);
padding: var(--size-spacing-one-x);
cursor: pointer;
white-space: nowrap;
text-align: center;
position: relative;
background-color: var(--color-base-0);
padding: 0 var(--size-spacing-quarter-x);
min-height: 48px;
}
.sf-product_color-swatch-promo-icon {
position: absolute;
top: 4px;
left: 4px;
display: flex;
margin-bottom: var(--size-spacing-quarter-x);
gap: var(--size-spacing-quarter-x);
span {
display: block;
width: 8px;
}
svg {
display: block;
width: 8px;
height: 8px;
}
}
.sf-product_color-swatch:focus-within {
border: 1px solid var(--color-base-100);
border-radius: 4px;
box-shadow: none;
}
.sf-product_color-swatch:hover {
border: 1px solid var(--color-base-100);
border-radius: 4px;
box-shadow: none;
cursor: pointer;
}
.sf-product_color-swatch.bisn,
.sf-product_color-swatch.oos,
.sf-product_color-swatch.soon {
cursor: default;
.ok-icon {
width: 8px;
height: 8px;
position: absolute;
top: 4px;
left: 4px;
}
}
.sf-product_color-swatch.bisn img,
.sf-product_color-swatch.oos img,
.sf-product_color-swatch.soon {
opacity: .3;
}
.sf-product_color-swatch.bisn label:after,
.sf-product_color-swatch.oos label:after,
.sf-product_color-swatch.soon label:after {
content: '';
position: absolute;
width: 87%;
height: 1px;
left: 3px;
top: 50%;
transform: skewY(317deg);
background-color: var(--color-blue-50n);
}
.sf-product_color-swatch--active {
border: 1px solid var(--color-base-100);
}
.sf-product_color-swatch-image {
max-width: 100%;
height: auto;
display: block;
margin-left: auto !important;
margin-right: auto !important;
cursor: pointer;
}
.sf-product_price {
padding-top: var(--size-spacing-half-x);
font-size: var(--font-size-400);
font-weight: var(--font-weight-bold);
min-height: 22px;
}
.sf-product_price-includes-tax {
font-weight: var(--font-weight-regular);
}
.sf-product_coming-soon-banner {
display: flex;
justify-content: flex-start;
align-items: center;
height: 36px;
background-color: var(--color-yellow-20);
color: var(--color-base-100);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-400);
padding: var(--size-spacing-half-x) var(--size-spacing-one-x);
margin: 0;
.ok-icon {
margin-right: var(--size-spacing-half-x);
}
}
@media (min-width: 768px) {
.sf-product_coming-soon-banner {
margin: var(--size-spacing-two-x) var(--sf-product-header-inline-padding) 0 var(--sf-product-header-inline-padding);
}
}
.sf-product_coming-soon-date {
color: var(--color-base-100);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-700);
margin-bottom: var(--size-spacing-one-x);
padding: var(--size-spacing-half-x);
text-align: center;
}
.sf-product_low-stock-banner {
.ok-toast {
font-size: var(--font-size-500);
line-height: 1.413;
}
.ok-toast__block {
justify-content: flex-start;
}
}
.sf-product_oos-banner {
background-color: var(--color-rubine-10);
color: var(--color-red-60);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-700);
margin-bottom: var(--size-spacing-one-x);
padding: var(--size-spacing-half-x);
text-align: center;
}
.sf-product-bisn {
background: var(--color-blue-05n);
padding: var(--size-spacing-one-x);
border-radius: var(--size-spacing-half-x);
}
.sf-product-bisn-sub-title {
font-size: var(--font-size-300);
font-weight: var(--font-weight-regular);
margin-bottom: var(--size-spacing-three-quarters-x);
}
.sf-product-bisn-btn-alert {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-spacing-quarter-x);
line-height: 1.25;
}
.sf-product-bisn-details {
display: flex;
align-items: center;
gap: var(--size-spacing-one-x);
padding: var(--size-spacing-half-x);
margin-bottom: var(--size-spacing-half-x);
}
.sf-product-bisn-consent-notification {
color: var(--color-blue-60n);
font-size: var(--font-size-300);
line-height: 1.4;
}
.sf-product-bisn-out-of-stock {
color: var(--color-red-60);
font-size: var(--font-size-300);
font-weight: var(--font-weight-bold);
}
.sf-product-bisn-shop-by-link a {
display: block;
color: var(--color-base-100);
font-size: var(--font-size-300);
font-weight: var(--font-weight-bold);
text-decoration: underline;
}
.sf-product-bisn-join-waitlist {
margin-bottom: var(--size-spacing-one-x);
width: 100%;
letter-spacing: 1.2;
}
.sf-product-bisn-form.cx-form {
gap: var(--size-spacing-three-quarters-x);
}
.sf-product-bisn-input-wrap {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.sf-product-bisn-input-wrap .cx-control {
flex-grow: 1;
margin-right: var(--size-spacing-half-x);
}
.sf-product-bisn-success-list {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
}
.sf-product-bisn-success {
font-size: var(--font-size-300);
font-weight: var(--font-weight-regular);
color: var(--color-brand-90);
}
.sf-product-bisn .cx-control .cx-control-border {
border-radius: var(--size-spacing-quarter-x);
}
.sf-product-bisn .cx-control .cx-label {
text-transform: none;
color: var(--color-blue-60n);
font-size: var(--size-spacing-one-x);
}
[data-brand='heydude'] {
--sf-product-size-swatch-wrapper-max-width: none;
--sf-product-size-tab-bottom-border: 2px solid transparent;
--sf-product-size-tab-font-weight: var(--font-weight-bold);
--sf-product-size-tab-wrapper-min-height: 32px;
}
[data-brand='crocs'] {
--sf-product-size-swatch-wrapper-max-width: 384px;
--sf-product-size-tab-bottom-border: 2px solid #E7EAEC;
--sf-product-size-tab-font-weight: var(--font-weight-regular);
--sf-product-size-tab-wrapper-min-height: 30px;
}
.sf-product-size-wrapper {
display: flex;
flex-direction: column;
row-gap: 12px;
}
.sf-product_size-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.sf-product-size-swatch-wrapper {
display: flex;
flex-direction: column;
row-gap: 12px;
}
.sf-product-size-label {
font-size: var(--font-size-400);
line-height: 1.286;
}
.sf-product_size-selected {
font-weight: var(--font-weight-regular);
}
.sf-product-size-tab-label-wrapper {
display: flex;
min-height: var(--sf-product-size-tab-wrapper-min-height);
}
.sf-product_size-tab-label {
border-bottom: var(--sf-product-size-tab-bottom-border);
font-size: var(--font-size-400);
font-weight: var(--sf-product-size-tab-font-weight);
line-height: 1.4;
min-width: 74px;
padding-inline: var(--size-spacing-quarter-x);
&.sf-product_size-tab-label--active {
border-bottom-color: var(--color-base-100);
}
}
.sf-product-size-chart-link {
color: var(--color-purple-90n);
display: flex;
font-size: var(--font-size-400);
gap: 6px;
}
.sf-product_size-grid {
display: none;
grid-template-columns: repeat(auto-fill, 48px);
gap: var(--size-spacing-half-x);
}
.sf-product_size-grid--active {
display: grid;
}
.sf-product_size-chip {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--size-spacing-quarter-x);
border: 1px solid var(--color-blue-20n);
padding: var(--size-spacing-one-x);
cursor: pointer;
white-space: nowrap;
text-align: center;
position: relative;
background-color: var(--color-base-0);
color: var(--color-base-100);
}
.sf-product_size-chip:hover {
border-color: var(--color-base-100);
}
.sf-product_size-chip--active {
background: var(--color-base-100);
color: var(--color-base-0);
}
.sf-product_size-chip--active:focus-within {
box-shadow: inset 0 0 0 1px var(--color-base-0);
border-color: var(--color-base-100);
}
.sf-product_size-chip--active:active {
border: solid 1px var(--color-blue-20n);
}
.sf-product_size-chip--active.oos,
.sf-product_size-chip--active.bisn,
.sf-product_size-chip--active.soon {
background-color: var(--color-base-0);
color: var(--color-base-100);
border-color: var(--color-base-100);
}
.sf-product_size-chip--active.oos:focus-within,
.sf-product_size-chip--active.bisn:focus-within,
.sf-product_size-chip--active.soon:focus-within {
box-shadow: inset 0 0 0 2px var(--color-base-100);
}
.sf-product_size-chip.oos .sf-product_size-chip-label,
.sf-product_size-chip.bisn .sf-product_size-chip-label,
.sf-product_size-chip.soon .sf-product_size-chip-label {
color: var(--color-blue-20n);
}
.sf-product_size-chip.oos,
.sf-product_size-chip.bisn,
.sf-product_size-chip.soon {
.ok-icon {
width: 8px;
height: 8px;
position: absolute;
top: 4px;
left: 4px;
}
}
.sf-product_size-chip.oos label:after,
.sf-product_size-chip.bisn label:after,
.sf-product_size-chip.soon label:after {
color: var(--color-blue-20n);
content: '';
position: absolute;
width: 87%;
height: 1px;
left: 3px;
top: 50%;
transform: skewY(317deg);
background-color: var(--color-blue-50n);
}
.sf-product_size-chip-label {
font-size: .875rem;
font-weight: 700;
cursor: pointer;
}
.sf-product_size-label {
margin-top: var(--size-spacing-three-quarters-x) 0 var(--size-spacing-quarter-x);
font-size: var(--font-size-400);
line-height: var(--size-spacing-one-and-a-half-x);
}
.sf-product_size-toast {
font-size: var(--font-size-300);
line-height: var(--font-size-300);
margin-bottom: var(--size-spacing-half-x);
}
.view-full-product-details-button {
text-align: center;
margin: var(--size-spacing-half-x);
}
.sf-product_description ul {
list-style: inside;
margin-left: var(--size-spacing-quarter-x);
}
[data-brand='heydude'] {
--sf-product-header-inline-padding: 40px;
--sf-product-header-background: none;
}
[data-brand='crocs'] {
--sf-product-header-inline-padding: 32px;
--sf-product-header-background: radial-gradient(
97.98% 109.8% at 22.39% 22.32%,
#fff 0%,
rgba(245, 231, 224, 0.2) 100%
);
}
.sf-product_header {
align-items: flex-start;
display: flex;
justify-content: space-between;
padding: var(--size-spacing-half-x) 8px;
background: var(--sf-product-header-background);
.sf-product-ratings-name-container {
display: flex;
flex-direction: column;
gap: 12px;
}
> div {
justify-content: space-between;
}
}
.sf-product_name {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
line-height: 1.25;
}
[data-brand='heydude'] .sf-product_name {
font-size: var(--font-size-700);
}
.sf-product_alt-name {
font-size: var(--font-size-500);
font-weight: var(--font-weight-regular);
line-height: var(--font-size-700)
}
@media (min-width: 768px) {
.sf-product_header {
background: none;
padding: var(--size-spacing-two-x) var(--sf-product-header-inline-padding) var(--size-spacing-one-and-a-half-x) var(--sf-product-header-inline-padding);
}
.sf-product_name {
font-size: var(--font-size-1000);
}
[data-brand='heydude'] .sf-product_name {
font-size: var(--font-size-1000);
}
}
[data-brand='heydude'] {
--sf-view-cart-button-container-justify-content: center;
}
[data-brand='crocs'] {
--sf-view-cart-button-container-justify-content: right;
}
.view-cart-button-container {
display: flex;
justify-content: var(--sf-view-cart-button-container-justify-content);
padding: var(--size-spacing-one-x);
}
[data-brand='heydude'] {
--sf-product-buy-stack-wrapper-columns: 40px 1fr 40px;
--sf-product-buy-stack-accordion-background-color: none;
--sf-product-buy-stack-add-to-cart-button-font-family: var(--font-family-sans);
--sf-product-buy-stack-actions-wrapper-padding-block: 0;
.sf-product_buystack {
.ok-accordion .ok-accordion__item {
border-top: 1px solid var(--color-purple-10n);
}
.ok-accordion__heading {
font-size: var(--font-size-900);
}
> .sf-product_low-stock-banner,
> .alternate-message {
.ok-toast {
display: flex;
}
}
.sf-product_buystack-actions-wrapper {
align-items: stretch;
flex-direction: column;
}
}
}
[data-brand='crocs'] {
--sf-product-buy-stack-wrapper-columns: 32px 1fr 32px;
--sf-product-buy-stack-accordion-background-color: var(--color-brand-20);
--sf-product-buy-stack-add-to-cart-button-font-family: inherit;
--sf-product-buy-stack-actions-wrapper-padding-block: var(--size-spacing-three-quarters-x);
}
.sf-product_buystack {
display: grid;
grid-template-columns: 8px 1fr 8px;
row-gap: 12px;
> * {
grid-column: 2;
}
> .ok-accordion {
background-color: var(--sf-product-buy-stack-accordion-background-color);
grid-column: 1/-1;
}
.sf-product_buystack-actions-wrapper {
align-items: center;
justify-content: space-between;
display: flex;
padding-block: var(--sf-product-buy-stack-actions-wrapper-padding-block);
> * {
flex: 1;
}
.ok-button {
font-family: var(--sf-product-buy-stack-add-to-cart-button-font-family);
}
.sf-product_buystack-actions-button {
text-align: right;
}
.sf-product_buystack-actions-price {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-700);
}
.sf-product_buystack-actions-size-oos {
color: var(--color-red-60);
width: 150px;
}
.sf-product_buystack-actions-color-size {
display: flex;
flex-direction: column;
font-size: var(--font-size-300);
line-height: 14px;
}
}
}
.sf-product_buystack-info-wrapper {
align-items: center;
column-gap: var(--size-spacing-half-x);
display: flex;
}
.sf-product_buystack-info-price-wrapper {
display: flex;
flex-direction: column;
> span {
font-size: var(--font-size-300);
line-height: 1.167;
}
.sf-product_buystack-info-price {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
line-height: 1.2;
}
}
@media (min-width: 768px) {
.sf-product_buystack {
grid-template-columns: var(--sf-product-buy-stack-wrapper-columns);
}
}
.ok-link {
&.sf-product_bklk-link {
font-size: var(--font-size-700);
}
.sf-product_bklk-icon{
height: var(--size-spacing-one-and-a-half-x);
transform: scale(-1);
width: var(--size-spacing-one-and-a-half-x);
}
}
.sf-product-quantity-selection {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: var(--size-spacing-three-quarters-x);
}
.sf-product-quantity-selection__label {
font-weight: var(--font-weight-bold);
}
.sf-product-quantity-selection__elem {
display: flex;
}
.sf-product-quantity-selection__button {
background: var(--color-base-0);
font-size: var(--font-size-1000);
padding: 0 var(--size-spacing-three-quarters-x);
line-height: 1.2;
}
.sf-product-quantity-selection__button--decrease {
border: 1px solid var(--color-base-90);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-font-smoothing: none;
}
.sf-product-quantity-selection__button--increase {
border: 1px solid var(--color-base-90);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
}
.sf-product-quantity-selection__input {
width: 4ch;
height: auto;
font-size: var(--font-size-500);
border-left: 0;
border-right: 0;
border-top: 1px solid var(--color-base-90);
border-bottom: 1px solid var(--color-base-90);
background-color: var(--color-base-0);
font-weight: var(--font-weight-bold);
text-align: center;
}
.sf-product-quantity-selection__input[type="number"]::-webkit-inner-spin-button,
.sf-product-quantity-selection__input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sf-product-quantity-selection__input[type="number"] {
-moz-appearance: textfield;
}
.sf-select {
max-height: 48px;
background: var(--color-base-0);
border-color: var(--color-blue-60n);
border-radius: 4px !important;
color: var(--color-blue-90n);
.ok-icon {
width: 24px;
height: 24px;
}
&:hover {
background: #fff;
border-color: var(--color-blue-90n);
}
&:focus,
&:focus-visible {
color: var(--color-blue-90n);
background-color: transparent;
box-shadow: inset 0 0 0 3px transparent;
border-color: var(--color-blue-50n);
border-width: 2px;
outline: 2px solid var(--color-brand-50);
outline-offset: 3px;
}
&[disabled],
&[aria-disabled='true'] {
border-color: var(--color-blue-50n);
color: var(--color-blue-60n);
cursor: not-allowed;
transform: none;
filter: unset;
}
.MuiTypography-root {
font-family: var(--font-family-sans);
font-size: var(--font-size-500);
font-weight: var(--font-weight-regular);
color: rgba(44 40 44 / 80%);
&:hover {
color: var(--color-blue-90n);
}
}
.MuiInputBase-input {
padding-right: 8px !important;
&:focus,
&:focus-visible {
outline: none;
outline-offset: 0;
}
}
}
.MuiMenuItem-root.Mui-selected {
background-color: var(--color-base-10) !important;
&.Mui-focusVisible {
background-color: var(--color-base-10) !important;
}
}
.sf-product_jibbitz-snipe-wrapper {
display: inline-flex;
}
.sf-product_jibbitz-snipe-text {
display: flex;
font-weight: var(--font-weight-regular);
gap: var(--size-spacing-quarter-x);
}
[data-brand='heydude'] {
--sf-snipe-text-transform: uppercase;
.sf-snipe {
font-family: var(--font-family-decorative);
}
}
[data-brand='crocs'] {
--sf-snipe-text-transform: none;
}
.sf-snipe {
background: var(--color-base-10, #f2f0eb);
border-radius: var(--size-spacing-five-x, 80px);
display: inline-flex;
font-size: var(--font-size-300);
line-height: 1.4;
min-height: 24px;
padding: 5px var(--size-spacing-three-quarters-x)
var(--size-spacing-quarter-x) var(--size-spacing-three-quarters-x);
text-transform: var(--sf-snipe-text-transform, uppercase);
}
[data-brand='crocs'] .sf-snipe {
background: none;
}
/* brand specific vars */
[data-brand='heydude'] {
--sf-product-carousel-thumbnails-column-gap: var(--size-spacing-half-x);
--sf-product-carousel-thumbnail-active-box-shadow: none;
--sf-product-carousel-thumbnail-aspect-ratio: 1/1;
--sf-product-carousel-thumbnail-background: var(--color-base-0);
--sf-product-carousel-thumbnail-border-color: var(--color-brand-20);
--sf-product-carousel-thumbnail-border-radius: var(
--size-spacing-quarter-x
);
--sf-product-carousel-thumbnail-border-width: 1px;
--sf-product-carousel-thumbnail-height: 40px;
--sf-product-carousel-tile-background: var(--color-base-0);
}
[data-brand='crocs'] {
--sf-product-carousel-thumbnails-column-gap: 10px;
--sf-product-carousel-thumbnail-active-box-shadow: var(
--elevation-light-200
);
--sf-product-carousel-thumbnail-aspect-ratio: 4/5;
--sf-product-carousel-thumbnail-background: radial-gradient(
50% 50% at 50% 50%,
#fff 0%,
rgba(245, 231, 224, 0.2) 100%
);
--sf-product-carousel-thumbnail-border-color: transparent;
--sf-product-carousel-thumbnail-border-radius: 3px;
--sf-product-carousel-thumbnail-border-width: 0.5px;
--sf-product-carousel-thumbnail-height: 48px;
--sf-product-carousel-tile-background: radial-gradient(
97.98% 109.8% at 22.39% 22.32%,
#fff 0%,
rgba(245, 231, 224, 0.2) 100%
);
}
/* carousel */
.sf-product_carousel {
position: relative;
padding-bottom: var(--size-spacing-half-x);
.sf-snipe {
position: absolute;
left: 16px;
top: 16px;
z-index: 4;
}
}
@media (min-width: 768px) {
.sf-product_carousel {
overflow: hidden;
}
}
.sf-product_carousel-slides {
align-items: center;
aspect-ratio: 1 / 1;
background: var(--sf-product-gallery-tile-background);
display: flex;
justify-content: center;
padding: var(--size-spacing-one-x);
z-index: 2;
&.sf-product_carousel-slides-full-bleed {
padding: 0;
}
}
.sf-product_carousel-item,
.sf-product_carousel-image {
width: 100%;
}
.sf-product_carousel-prev,
.sf-product_carousel-next {
display: none;
}
.sf-product_carousel-prev {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.sf-product_carousel-next {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
@media (min-width: 481px) {
.sf-product_carousel-prev,
.sf-product_carousel-next {
display: block;
z-index: 3;
}
}
.sf-product_carousel-prev,
.sf-product_carousel-next {
position: absolute;
background-color: rgba(251, 251, 251, 0.75);
top: calc(50% - 28px);
font-size: var(--font-size-1200);
line-height: 1.55;
cursor: pointer;
height: 56px;
width: 40px;
}
.sf-product_carousel-prev {
left: 0;
}
.sf-product_carousel-next {
right: 0;
}
.sf-product_carousel-prev.swiper-button-disabled,
.sf-product_carousel-next.swiper-button-disabled {
display: none;
}
/* Thumbnails */
.sf-product_carousel-thumbnails {
column-gap: var(--sf-product-carousel-thumbnails-column-gap);
cursor: pointer;
display: flex;
overflow-x: auto;
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x)
var(--size-spacing-quarter-x) var(--size-spacing-one-x);
scroll-snap-type: x mandatory;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.sf-product_carousel-thumbnails::-webkit-scrollbar {
display: none;
}
[data-brand='crocs'] .sf-product_carousel-thumbnails {
background: var(--sf-product-gallery-tile-background);
}
.sf-product_carousel-thumbnail {
align-items: center;
aspect-ratio: var(--sf-product-carousel-thumbnail-aspect-ratio);
display: flex;
height: var(--sf-product-carousel-thumbnail-height);
border-radius: var(--sf-product-carousel-thumbnail-border-radius);
border: var(--sf-product-carousel-thumbnail-border-width) solid
var(--sf-product-carousel-thumbnail-border-color);
background: var(--sf-product-carousel-thumbnail-background);
padding: var(--size-spacing-eighth-x);
scroll-snap-align: center;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
&.sf-product_carousel-thumbnail--active {
border-color: var(--color-base-100);
box-shadow: var(--sf-product-carousel-thumbnail-active-box-shadow);
}
&.sf-product_carousel-thumbnail-full-bleed {
padding: 0;
img {
object-fit: cover;
}
}
}
[data-brand='heydude'] {
--sf-product-gallery-background-color: var(--color-base-10, #f2f0eb);
--sf-product-gallery-tile-background: var(--color-base-0);
}
[data-brand='crocs'] {
--sf-product-gallery-background-color: var(--color-base-10, #f7f5f8);
--sf-product-gallery-tile-background: radial-gradient(
97.98% 109.8% at 22.39% 22.32%,
#fff 0%,
rgba(245, 231, 224, 0.2) 100%
);
}
.sf-product_gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--size-spacing-half-x);
}
.sf-product_gallery-tile {
align-items: center;
aspect-ratio: 1 / 1;
display: flex;
grid-column: span 1;
padding: var(--size-spacing-one-x);
position: relative;
box-shadow: 0 0 23px 7px #f7f5f8 inset;
&:first-child {
grid-column: span 2;
padding: var(--size-spacing-two-x);
box-shadow: 0 0 30px 17px #f7f5f8 inset;
}
&.sf-product_gallery-tile-full-bleed {
padding: 0;
}
}
.sf-product_gallery-image {
height: 100%;
object-fit: contain;
width: 100%;
}
@media (min-width: 768px) {
.sf-product_gallery {
margin-left: auto;
max-width: 960px;
.sf-snipe {
position: absolute;
top: 32px;
left: 32px;
}
}
}
:root {
--sf-power-reviews-photos-heading-font-size: var(--font-size-1100);
}
@media screen and (min-width: 1200px) {
:root {
--sf-power-reviews-photos-heading-font-size: var(--font-size-1300);
}
}
[data-brand='heydude'] {
--sf-power-reviews-photos-heading-font-family: var(--font-family-decorative);
--sf-power-reviews-photos-heading-font-weight: var(--font-weight-bold);
--sf-power-reviews-photos-heading-text-transform: uppercase;
--sf-power-reviews-container-background-color: #f2f0eb;
--sf-power-reviews-container-padding: var(--size-spacing-one-and-a-half-x) var(--size-spacing-one-x);
--sf-power-reviews-tabs-bottom-border-styling: 2px solid transparent;
--sf-power-reviews-tabs-font-family: var(--font-family-decorative);
--sf-power-reviews-tabs-padding: 0 var(--size-spacing-one-x);
--sf-power-reviews-tabs-text-transform: uppercase;
--sf-power-reviews-reviews-link-padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
--sf-power-reviews-reviews-link-border-radius: var(--size-spacing-half-x);
--sf-power-reviews-reviews-link-font-size: var(--font-size-400);
--sf-power-reviews-reviews-link-line-height: 1.143;
}
[data-brand='crocs'] {
--sf-power-reviews-photos-heading-font-family: inherit;
--sf-power-reviews-photos-heading-font-weight: var(--font-weight-black);
--sf-power-reviews-photos-heading-text-transform: none;
--sf-power-reviews-container-background-color: #f7f5f8;
--sf-power-reviews-container-padding: 0 var(--size-spacing-one-x) var(--size-spacing-one-and-a-half-x) var(--size-spacing-one-x);
--sf-power-reviews-tabs-bottom-border-styling: 2px solid #e7eaec;
--sf-power-reviews-tabs-font-family: inherit;
--sf-power-reviews-tabs-padding: 0 var(--size-spacing-three-quarters-x);
--sf-power-reviews-tabs-text-transform: none;
--sf-power-reviews-reviews-link-padding: var(--size-spacing-one-x) var(--size-spacing-one-and-a-half-x);
--sf-power-reviews-reviews-link-border-radius: 50px;
--sf-power-reviews-reviews-link-font-size: var(--font-size-700);
--sf-power-reviews-reviews-link-line-height: 1.2;
}
/* container */
.product-review-wrapper {
background-color: var(--sf-power-reviews-container-background-color);
padding: var(--sf-power-reviews-container-padding);
}
/* tabs */
.product-review-tabs {
display: flex;
border-bottom: var(--sf-power-reviews-tabs-bottom-border-styling);
li {
align-items: center;
display: flex;
font-family: var(--sf-power-reviews-tabs-font-family);
min-height: 30px;
padding: var(--sf-power-reviews-tabs-padding);
position: relative;
text-transform: var(--sf-power-reviews-tabs-text-transform);
&:hover,
&.active {
&:after {
background-color: var(--color-base-100);
bottom: -2px;
content: '';
height: 2px;
left: 0;
position: absolute;
right: 0;
}
}
}
a {
color: var(--color-base-100);
font-weight: 700;
font-size: var(--font-size-400);
line-height: 1.4;
}
}
.product-review-tabs .product-review-tabs li:nth-child(2) {
border-left: none;
}
.product-review-tabs li .product-review-tabs li a {
display: block;
padding: 10px 0px 10px;
margin: 0;
text-align: center;
width: 100%;
}
.product-review-tabs-contents {
margin-top: 24px;
> dd {
display: none;
padding: 0;
outline: none;
&.active {
display: flex;
flex-direction: column;
gap: 24px;
}
}
[tabindex='-1']:focus {
outline: none !important;
box-shadow: none !important;
}
}
/* */
.power-reviews-accordion-link {
color: var(--color-base-100);
background-color: var(--color-base-0);
border: 1px solid var(--color-base-100);
border-radius: var(--sf-power-reviews-reviews-link-border-radius);
display: flex;
font-size: var(--sf-power-reviews-reviews-link-font-size);
font-weight: 700;
justify-content: center;
line-height: var(--sf-power-reviews-reviews-link-line-height);
padding: var(--sf-power-reviews-reviews-link-padding);
&:hover {
background-color: var(--color-base-10);
}
}
.power-reviews-accordion-body {
position: relative;
}
.power-reviews-accordion-body.is-closed {
display: none;
}
.power-reviews-chevron-icon {
display: flex;
font-size: var(--font-size-1000);
}
.power-reviews-photos-wrapper {
display: flex;
flex-direction: column;
gap: 32px;
padding: 40px 24px;
}
.power-reviews-photos-heading {
color: var(--color-base-100);
font-family: var(--sf-power-reviews-photos-heading-font-family);
font-size: var(--sf-power-reviews-photos-heading-font-size);
font-weight: var(--sf-power-reviews-photos-heading-font-weight);
line-height: 1.15;
text-transform: var(--sf-power-reviews-photos-heading-text-transform);
}
.comm-pref-birthday__container {
display: flex;
justify-content: space-between;
margin: var(--size-spacing-two-x) 0 var(--size-spacing-one-x) 0;
}
.comm-pref-birthday__subtitle {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-900);
}
.comm-pref-birthday__caption {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-800);
margin-bottom: var(--size-spacing-one-x);
margin-top: var(--size-spacing-two-x);
padding: var(--size-spacing-0);
position: relative;
width: 100%;
}
.comm-pref-birthday__input-wrapper {
flex: 0 0 49%;
max-width: 49%;
position: relative;
}
.comm-pref-birthday__input {
border-radius: 4px;
border-width: 1px;
color: var(--color-blue-60n);
flex: 1;
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
position: relative;
width: 100%;
}
.comm-pref-birthday__input-label {
background: var(--color-base-0);
font-size: var(--font-size-300);
left: var(--size-spacing-quarter-x);
padding: var(--size-spacing-0) var(--size-spacing-quarter-x);
pointer-events: none;
position: absolute;
top: 0;
transform: translateY(-50%);
}
.comm-pref-birthday__input:focus + .comm-pref-birthday__input-label,
.comm-pref-birthday__input:not(:placeholder-shown)
+ .comm-pref-birthday__input-label {
background: var(--color-base-0);
font-size: var(--font-size-300);
top: 0;
transform: translateY(-50%);
}
.comm-pref-birthday__container .ok-icon {
color: var(--color-brand-90);
font-size: 1.2em;
position: absolute;
right: var(--size-spacing-two-x);
top: 1.1em;
transform: translateY(-50%);
}
.comm-pref-birthday__error .comm-pref-birthday__caption,
.comm-pref-birthday__error .comm-pref-birthday__message,
.comm-pref-birthday__error .ok-icon {
color: var(--color-red-60);
}
.comm-pref-birthday__error .comm-pref-birthday__message {
display: block;
font-size: var(--font-size-400);
line-height: var(--size-spacing-one-and-a-half-x);
}
.comm-pref-checkboxes__fieldset {
padding-bottom: var(--size-spacing-one-x);
}
.comm-pref-checkboxes__container {
border-bottom: 1px solid var(--color-blue-10n);
margin: var(--size-spacing-0);
padding: var(--size-spacing-one-x) 0;
position: relative;
}
.comm-pref-checkboxes__caption {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-800);
margin-top: var(--size-spacing-two-x);
margin-bottom: var(--size-spacing-three-quarters-x);
padding: var(--size-spacing-0);
position: relative;
width: 100%;
}
.comm-pref-checkboxes__subtitle {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-900);
}
.comm-pref-checkboxes__required {
color: var(--color-red-60);
margin-right: var(--size-spacing-eighth-x);
}
.comm-pref-checkboxes__fieldset .comm-pref-checkboxes__container:nth-of-type(2) {
border-top: 1px solid var(--color-blue-10n);
}
.comm-pref-checkboxes__container .ok-checkbox__label,
.comm-pref-checkboxes__fieldset .ok-checkbox__label {
align-items: center !important;
}
.comm-pref-checkboxes__error {
color: var(--color-red-60) !important;
}
.comm-pref-checkboxes__small-text {
display: block;
font-size: var(--font-size-400);
line-height: 18px;
margin-top: var(--size-spacing-half-x);
}
.comm-pref-buttons__fieldset {
padding: var(--size-spacing-two-x) 0;
}
.comm-pref-buttons__caption {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-800);
margin-bottom: var(--size-spacing-one-x);
padding: var(--size-spacing-0);
position: relative;
width: 100%;
}
.comm-pref-buttons__required {
color: var(--color-red-60);
margin-right: var(--size-spacing-eighth-x);
}
.comm-pref-buttons__small-text {
display: block;
font-size: var(--font-size-400);
line-height: 18px;
margin-top: var(--size-spacing-half-x);
}
.comm-pref-buttons__error {
color: var(--color-red-60) !important;
}
.comm-pref-buttons__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--size-spacing-one-x);
}
.comm-pref-buttons__column {
grid-template-columns: 1fr;
}
@media (min-width: 767px) {
.comm-pref-buttons__column {
grid-template-columns: repeat(2, 1fr);
}
}
.comm-pref-buttons__button {
box-shadow: inset 0 0 0 var(--size-spacing-eighth-x) var(--color-blue-10n);
color: var(--color-base-90);
cursor: pointer;
display: block;
font-weight: var(--font-weight-regular);
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-0);
text-align: center;
width: 100%;
}
.comm-pref-buttons__wrapper.comm-pref-buttons__active .comm-pref-buttons__button {
background-color: var(--color-base-100);
box-shadow: none;
color: var(--color-base-0);
}
.comm-pref-buttons__wrapper input:focus-visible+.comm-pref-buttons__button {
box-shadow: inset 0 0 0 var(--size-spacing-eighth-x) var(--color-base-100)
}
.comm-pref-buttons__wrapper.comm-pref-buttons__active input:focus-visible+.comm-pref-buttons__button {
box-shadow: inset 0 0 0 var(--size-spacing-eighth-x) var(--color-base-0)
}
.comm-pref-silhouette__fieldset {
padding-bottom: var(--size-spacing-two-x);
padding-top: var(--size-spacing-one-and-a-half-x);
}
.comm-pref-silhouette__caption {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-800);
margin: var(--size-spacing-one-x) 0;
padding: var(--size-spacing-0);
position: relative;
width: 100%;
}
.comm-pref-silhouette__subtitle {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-900);
}
.comm-pref-silhouette__required {
color: var(--color-red-60);
margin-right: var(--size-spacing-eighth-x);
}
.comm-pref-silhouette__error {
color: var(--color-red-60) !important;
}
.comm-pref-silhouette__small-text {
display: block;
font-size: var(--font-size-400);
line-height: 18px;
margin-top: var(--size-spacing-half-x);
}
.comm-pref-silhouette__button-container {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--size-spacing-half-x));
}
.comm-pref-silhouette__button-wrapper {
flex: 0 0 33.333333%;
margin-bottom: var(--size-spacing-one-x);
max-width: 33.333333%;
padding: 0 var(--size-spacing-half-x);
position: relative;
text-align: center;
}
.comm-pref-silhouette__button {
cursor: pointer;
display: block;
padding-bottom: var(--size-spacing-three-quarters-x);
width: 100%;
}
.comm-pref-silhouette__button-wrapper
.comm-pref-silhouette__button.comm-pref-silhouette__active {
background-color: var(--color-base-0);
box-shadow: inset 0 0 0 var(--size-spacing-eighth-x) var(--color-primary-60);
color: var(--color-primary-60);
}
/* Non-token values needed to replicate focus state */
.comm-pref-silhouette__button-wrapper button:focus-visible {
box-shadow: inset 0 0 0 var(--size-spacing-eighth-x) var(--color-base-100);
outline: 3px solid var(--color-blue-20n);
outline-offset: -5px;
}
.comm-pref-silhouette__button .ok-icon {
height: 60px;
margin-bottom: calc(-1 * var(--size-spacing-quarter-x));
width: 60px;
}
.communication-preferences__status {
background-color: var(--color-base-0);
display: flex;
margin: var(--size-spacing-one-x) var(--size-spacing-0);
padding: var(--size-spacing-three-quarters-x);
}
.communication-preferences__status .ok-icon {
height: 21px;
width: 21px;
}
.communication-preferences__status span {
padding-left: var(--size-spacing-quarter-x);
position: relative;
top: var(--size-spacing-eighth-x);
}
.communication-preferences__status-success {
animation: zoomUp 20s ease-in-out forwards;
border: 1px solid var(--color-brand-90);
color: var(--color-brand-90) !important;
}
.communication-preferences__status-error {
animation: zoomUp 20s ease-in-out forwards;
border: 1px solid var(--color-red-60);
color: var(--color-red-60) !important;
}
.comm-pref-subscription__email-signup-form {
display: flex;
flex-direction: column;
margin-bottom: var(--size-spacing-one-and-a-half-x);
margin-top: var(--size-spacing-two-x);
}
.comm-pref-subscription__email-details {
line-height: var(--font-size-800);
margin-bottom: var(--size-spacing-two-x);
}
.comm-pref-subscription__email-input-wrapper {
display: flex;
flex-direction: row;
flex: 0 0 70%;
position: relative;
}
.comm-pref-subscription__email-input-wrapper .comm-pref-subscription__input-label,
.comm-pref-subscription__input:placeholder-shown+.comm-pref-subscription__input-label {
left: var(--size-spacing-half-x);
padding: var(--size-spacing-0) var(--size-spacing-quarter-x);
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.2s;
}
.comm-pref-subscription__email-input-wrapper .ok-icon {
color: var(--color-brand-90);
font-size: 1.2em;
right: var(--size-spacing-two-x);
top: 1.1em;
transform: translateY(-50%);
}
.comm-pref-subscription__input:focus+.comm-pref-subscription__input-label,
.comm-pref-subscription__input:not(:placeholder-shown)+.comm-pref-subscription__input-label {
background: var(--color-base-0);
font-size: var(--font-size-300);
top: 0;
transform: translateY(-50%);
}
.comm-pref-subscription__input-wrapper {
flex: 0 0 50%;
max-width: 50%;
padding: 0 var(--size-spacing-half-x);
position: relative;
}
.comm-pref-subscription__input {
border-radius: var(--size-spacing-quarter-x);
border-width: 1px;
color: var(--color-blue-60n);
flex: 1;
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
position: relative;
max-width: 500px;
}
.comm-pref-subscription__label {
left: var(--size-spacing-half-x);
padding: var(--size-spacing-0) var(--size-spacing-quarter-x);
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.2s;
}
.comm-pref-subscription__error .ok-icon,
.comm-pref-subscription__error-message {
color: var(--color-red-60);
}
@media screen and (max-width:960px) {
.comm-pref-subscription__email-signup-form {
display: block;
}
.comm-pref-subscription__email-input-wrapper {
flex: none;
padding-bottom: var(--size-spacing-eighth-x);
}
}
.communication-preferences__interests-form {
padding-bottom: 40px;
}
.communication-preferences__submit-button {
margin-top: var(--size-spacing-two-x);
text-align: center;
}
@media (min-width: 768px) {
.communication-preferences__container {
margin-left: 8.333333%;
max-width: 75%;
padding-bottom: var(--size-spacing-two-x);
}
.communication-preferences__submit-button .ok-button {
width: 50%;
}
}
.communication-preferences__input:focus+.communication-preferences__input-label,
.communication-preferences__input:not(:placeholder-shown)+.communication-preferences__input-label {
background: var(--color-base-0);
font-size: var(--font-size-300);
top: 0;
transform: translateY(-50%);
}
.communication-preferences__title {
color: var(--color-base-100);
font-size: var(--font-size-900);
line-height: var(--font-size-900);
margin: var(--size-spacing-one-x) var(--size-spacing-0);
}
.communication-preferences__subtitle {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-900);
}
.communication-preferences__intro {
color: var(--color-base-100);
font-size: var(--font-size-600);
font-weight: var(--font-weight-regular);
line-height: var(--font-size-900);
margin: var(--size-spacing-one-x) var(--size-spacing-0);
margin-top: -.3125em;
}
.communication-preferences__caption {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
line-height: var(--font-size-800);
margin: var(--size-spacing-one-x) var(--size-spacing-0);
padding: var(--size-spacing-0);
position: relative;
width: 100%;
}
.communication-preferences__small-text {
display: block;
font-size: var(--font-size-400);
line-height: 18px;
margin-top: var(--size-spacing-half-x);
}
.communication-preferences__input-wrapper {
flex: 0 0 50%;
max-width: 50%;
padding: 0 var(--size-spacing-half-x);
position: relative;
}
.communication-preferences__input {
border-radius: 4px;
border-width: 1px;
color: var(--color-blue-60n);
flex: 1;
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
position: relative;
width: 100%;
}
.communication-preferences__label {
left: var(--size-spacing-half-x);
padding: var(--size-spacing-0) var(--size-spacing-quarter-x);
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.2s;
}
.communication-preferences__work {
padding: var(--size-spacing-one-x) 0;
}
.communication-preferences__checkbox-container {
border-bottom: 1px solid var(--color-blue-10n);
margin: var(--size-spacing-0);
padding: var(--size-spacing-half-x) 0;
position: relative;
}
.communication-preferences__checkbox-container:nth-of-type(2) {
border-top: 1px solid var(--color-blue-10n);
}
.communication-preferences__checkbox-container .ok-checkbox__label,
.communication-preferences__fieldset .ok-checkbox__label {
align-items: center !important;
}
.communication-preferences__required {
color: var(--color-red-60);
margin-right: var(--size-spacing-eighth-x);
}
.communication-preferences__error {
color: var(--color-red-60) !important;
}
@keyframes zoomUp {
0% {
display: none;
opacity: 0;
}
10% {
display: block;
opacity: 1;
}
90% {
display: block;
opacity: 1;
}
100% {
display: none;
opacity: 0;
}
}
.payment-methods-badges {
display: flex;
grid-template-columns: none;
gap: calc(var(--size-spacing-quarter-x) * 2) var(--size-spacing-three-quarters-x);
flex-wrap: wrap;
}
@media (min-width: 64rem) {
.payment-methods-badges {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--size-spacing-three-quarters-x) calc(var(--size-spacing-quarter-x) * 2);
}
}
.payment-methods-badges__logo {
height: var(--size-spacing-one-and-a-half-x);
width: calc((var(--size-spacing-eighth-x) * 3) + var(--size-spacing-two-x));
}
[data-brand='heydude'] .footer {
position: relative;
background-color: var(--color-primary-light);
padding-bottom: var(--size-spacing-two-x);
z-index: 0;
}
[data-brand='heydude'] .footer .smaller {
font-size: 0.75rem;
}
[data-brand='heydude'] .footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center bottom;
background-size: 90rem auto;
background-repeat: no-repeat;
z-index: 0;
}
[data-brand='heydude'] .footer a,
[data-brand='heydude'] .footer a:hover {
color: var(--color-primary-dark) !important;
}
[data-brand='heydude'] .footer h4 {
color: var(--color-primary-dark);
font-family: var(--font-family-decorative);
font-size: var(--size-spacing-one-and-a-half-x);
}
[data-brand='heydude'] .hd-footer-banner {
height: 6.5rem;
width: 100%;
background-color: var(--color-primary-dark);
background-size: auto 100%;
}
[data-brand='heydude'] .footer__main {
position: relative;
margin-bottom: var(--size-spacing-one-and-a-half-x);
}
[data-brand='heydude'] .footer__main li + li {
margin-top: var(--size-spacing-three-quarters-x);
}
[data-brand='heydude'] .footer__main svg {
display: inline-block;
}
[data-brand='heydude'] .carousel {
max-width: 15rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
[data-brand='heydude'] .carousel > div {
flex-basis: 50%;
padding-bottom: var(--size-spacing-one-and-a-half-x);
min-width: auto;
}
[data-brand='heydude'] .carousel img {
border-radius: var(--size-spacing-one-half-x);
margin-bottom: var(--size-spacing-one-half-x);
}
[data-brand='heydude'] .footer .cx_row {
z-index: 1;
position: relative;
}
[data-brand='heydude'] .footer .cx_col-12,
[data-brand='heydude'] .footer .cx_col {
padding: 0;
padding-bottom: var(--size-spacing-one-x);
}
[data-brand='heydude'] .footer .cx-svg {
height: var(--size-spacing-one-and-a-half-x);
width: var(--size-spacing-one-and-a-half-x);
margin-right: var(--size-spacing-one-x);
}
[data-brand='heydude'] .footer__sub {
max-width: 90rem;
border-color: var(--color-brand-20);
padding: 0;
margin: 0 auto;
z-index: 1;
}
[data-brand='heydude'] .footer__sub .js-tealium-cookie-prefs span {
display: none;
}
[data-brand='heydude'] .footer__sub .js-tealium-cookie-prefs a {
font-size: var(--size-spacing-three-quarters-x) !important;
}
[data-brand='heydude'] .footer__sub .footer__col {
padding: var(--size-spacing-one-x) 0 0 0;
}
[data-brand='heydude'] .footer__sub .d-inline-block {
padding-left: 6.5rem;
}
[data-brand='heydude'] .email-signup-container p {
color: var(--color-primary-dark);
line-height: var(--size-spacing-one-and-a-half-x);
}
[data-brand='heydude'] .email-signup-container form {
position: relative;
}
[data-brand='heydude'] .email-signup-container input,
[data-brand='heydude'] .email-signup-container input:focus,
[data-brand='heydude'] .email-signup-container input:focus-visible {
padding: var(--size-spacing-one-x);
padding-right: var(--size-spacing-three-x);
height: var(--size-spacing-three-x);
width: 100%;
border: none;
border-radius: var(--size-spacing-quarter-x);
margin: var(--size-spacing-one-x) 0;
box-shadow: none;
outline: none;
}
[data-brand='heydude'] .email-signup-container input:disabled {
background: var(--color-brand-20);
opacity: 0.7;
cursor: not-allowed;
}
[data-brand='heydude'] .email-signup-container input::placeholder {
font-size: 0.875rem;
font-weight: var(--font-weight-bold);
line-height: 1.25rem;
text-transform: uppercase;
align-items: center;
color: var(--color-hdredesign-dark-grey);
}
[data-brand='heydude'] .email-signup-container button {
position: absolute;
right: 0;
top: var(--size-spacing-one-x);
padding: 0.875rem;
}
[data-brand='heydude'] .email-signup-container svg {
height: var(--size-spacing-one-x);
width: var(--size-spacing-one-x);
}
[data-brand='heydude'] .email-signup-message {
opacity: 1;
height: auto;
visibility: visible;
}
[data-brand='heydude'] .email-signup-message.hidden {
opacity: 0;
display: block !important;
visibility: hidden;
height: 0;
transition: all 1s ease-out;
}
[data-brand='heydude'] p.email-error {
color: var(--color-hdredesign-error-red);
}
[data-brand='heydude'] p.email-exists {
color: var(--color-orange-60);
line-height: var(--size-spacing-one-and-a-half-x);
}
[data-brand='heydude'] p.email-success {
color: var(--color-hdredesign-success-green);
line-height: var(--size-spacing-one-and-a-half-x);
}
@media (min-width: 1440px) {
[data-brand='heydude'] .footer .max-1200,
[data-brand='heydude'] .footer .max-1440 {
width: 90rem;
padding: 0;
margin: 0 auto;
}
[data-brand='heydude'] .hd-social {
position: relative;
}
}
@media (min-width: 768px) {
[data-brand='heydude'] .footer .cx_col-md-3 {
max-width: none;
}
}
@media (max-width: 1440px) {
[data-brand='heydude'] .hd-footer-banner {
height: 5rem;
background-size: 100% auto;
}
}
@media (max-width: 1200px) {
[data-brand='heydude'] .footer__main {
margin-bottom: var(--size-spacing-one-and-a-half-x);
}
[data-brand='heydude'] .footer__main .cx_col-md-3 {
flex: 0 0 50%;
order: 2
}
[data-brand='heydude'] .footer__main .cx_col-md-3:first-of-type,
[data-brand='heydude'] .footer__main .cx_col-md-3:last-of-type {
flex: 0 0 100%;
order: 1;
}
[data-brand='heydude'] .footer__main .cx_col-md-3:last-of-type {
padding-bottom: var(--size-spacing-one-and-a-half-x);
}
[data-brand='heydude'] .footer__sub .d-inline-block {
padding: 0 1.25rem 0 0;
}
[data-brand='heydude'] .footer .cx_row {
margin-right: 0;
margin-left: 0;
}
[data-brand='heydude'] .carousel {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 31rem;
}
[data-brand='heydude'] .carousel > div {
flex: 0 0 auto;
padding-right: var(--size-spacing-three-quarters-x);
}
}
@media (max-width: 767px) {
[data-brand='heydude'] .hd-footer-banner {
height: 5rem;
background-size: auto 5rem;
}
[data-brand='heydude'] .footer__sub .d-inline-block {
padding: var(--size-spacing-one-x) 1.25rem 0 0;
}
}
@media (max-width: 576px) {
[data-brand='heydude'] .footer::before {
background-size: 36rem auto;
}
}
.my-account-header {
margin-top: var(--size-spacing-one-x);
}
.my-account-header__welcome {
text-align: center;
text-transform: uppercase;
font-size: var(--font-size-900);
margin: 0 auto var(--size-spacing-two-x);
}
.sf-reset-password-form__container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: var(--size-breakpoint-sm);
padding: var(--size-spacing-two-x) var(--size-spacing-one-x);
}
.sf-reset-password-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x) 0;
}
.sf-reset-password-form__success-message {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-sm);
margin-bottom: var(--size-spacing-one-x);
}
.sf-reset-password-form .ok-button {
flex: 0 0 auto;
align-self: flex-end;
}
.sf-reset-password-form__item {
position: relative;
}
.sf-reset-password-form__item .ok-icon {
position: absolute;
top: 50%;
right: var(--size-spacing-half-x);
transform: translateY(-50%);
width: var(--font-size-900);
height: var(--font-size-900);
color: var(--color-brand-80);
}
.sf-reset-password-form__item--input {
border-radius: 4px;
border-width: 1px;
color: var(--color-base-100);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
width: 100%;
}
.sf-reset-password-form__item--input:focus {
border-color: var(--color-primary-60);
box-shadow: none;
}
.sf-reset-password-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid;
outline-offset: -1px;
}
.sf-reset-password-form__item--label {
position: absolute;
top: 50%;
left: var(--size-spacing-half-x);
background: var(--color-base-0);
transform: translateY(-50%);
padding: 0 var(--size-spacing-quarter-x);
transition: 0.2s;
pointer-events: none;
text-transform: uppercase;
color: var(--color-blue-60n);
}
.sf-reset-password-form__item--input:focus + .sf-reset-password-form__item--label,
.sf-reset-password-form__item--input:not(:placeholder-shown) + .sf-reset-password-form__item--label {
top: -0.25rem;
transform: translateY(0);
font-size: var(--font-size-300);
}
.sf-reset-password-form__item--error .sf-reset-password-form__item--input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.sf-reset-password-form__item--error .sf-reset-password-form__item--label,
.sf-reset-password-form__item--error .ok-icon,
.sf-reset-password-form__error {
color: var(--color-red-60);
}
@media (min-width: 30.0625rem) {
.sf-reset-password-form__button-container {
flex-direction: row;
align-self: flex-end;
}
}
.sf-product_list__breadcrumbs {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
}
.sf-product_list__breadcrumbs.hide-icon-x .ok-breadcrumbs__item--last a {
display: none;
}
.sf-product_list__breadcrumbs .ok-breadcrumbs {
justify-content: start;
}
/* null-search */
.null-search__top {
background-color: var(--color-blue-10n);
margin: var(--size-spacing-one-x) 0;
padding: var(--size-spacing-one-x);
}
.null-search__top h3 {
font-size: var(--font-size-900);
margin: var(--size-spacing-one-x) 0;
}
.null-search__bottom {
margin-bottom: var(--size-spacing-two-x);
}
.null-search__bottom form {
max-width: 680px;
}
.null-search__bottom ul {
list-style-type: disc;
margin-bottom: var(--size-spacing-one-x);
padding-left: var(--size-spacing-two-x);
}
.null-search__bottom ul li {
line-height: 1.3;
}
.null-search__bottom h4 {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
}
.null-search__suggestions a:first-of-type {
font-weight: var(--font-weight-bold);
}
.null-search--margin-bottom {
margin-bottom: var(--size-spacing-one-x);
}
.name-form__container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: var(--size-breakpoint-sm);
padding: var(--size-spacing-two-x) var(--size-spacing-one-x) var(--size-spacing-two-x) 0;
}
.name-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x) 0;
}
.name-form__success-message {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-sm);
margin-bottom: var(--size-spacing-one-x);
}
.name-form .ok-button {
flex: 0 0 auto;
align-self: flex-end;
}
.name-form__item {
position: relative;
}
.name-form__item .ok-icon {
position: absolute;
top: 50%;
right: var(--size-spacing-half-x);
transform: translateY(-50%);
width: var(--font-size-900);
height: var(--font-size-900);
color: var(--color-brand-80);
}
#datePickerDiv .ok-icon {
right: var(--size-spacing-two-x);
}
.name-form__item--input {
border-radius: 4px;
border-width: 1px;
color: var(--color-base-100);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
width: 100%;
}
.name-form__item--input:focus {
border-color: var(--color-primary-60);
box-shadow: none;
}
.name-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid;
outline-offset: -1px;
}
.name-form__item--label {
position: absolute;
top: 50%;
left: var(--size-spacing-half-x);
background: var(--color-base-0);
transform: translateY(-50%);
padding: 0 var(--size-spacing-quarter-x);
transition: 0.2s;
pointer-events: none;
color: var(--color-blue-60n);
}
.name-form__item-label--uppercase {
text-transform: uppercase;
}
.name-form__item--input:focus + .name-form__item--label,
.name-form__item--input:not(:placeholder-shown) + .name-form__item--label {
top: -0.25rem;
transform: translateY(0);
font-size: var(--font-size-300);
}
.name-form__item--error .name-form__item--input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.name-form__item--error .name-form__item--label,
.name-form__item--error .ok-icon,
.name-form__error {
color: var(--color-red-60);
}
@media (min-width: 30.0625rem) {
.name-form__button-container {
flex-direction: row;
align-self: flex-end;
}
}
.email-form__container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: var(--size-breakpoint-sm);
padding: var(--size-spacing-two-x) var(--size-spacing-one-x) var(--size-spacing-two-x) 0;
}
.email-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x) 0;
}
.email-form__success-message {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-sm);
margin-bottom: var(--size-spacing-one-x);
}
.email-form .ok-button {
flex: 0 0 auto;
align-self: flex-end;
}
.email-form__item {
position: relative;
}
.email-form__item:focus-within {
overflow: visible;
}
.email-form__item .ok-icon {
position: absolute;
top: 50%;
right: var(--size-spacing-half-x);
right: var(--size-spacing-half-x);
transform: translateY(-50%);
width: var(--font-size-900);
height: var(--font-size-900);
color: var(--color-brand-80);
}
.email-form__item--input {
border-radius: var(--size-spacing-quarter-x);
border-width: 1px;
color: var(--color-base-100);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
padding: var(--size-spacing-half-x);
width: 100%;
}
.email-form__item--input:focus {
border-color: var(--color-primary-60);
box-shadow: none;
}
.email-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid;
outline-offset: -1px;
}
.email-form__item--label {
position: absolute;
top: 50%;
left: var(--size-spacing-half-x);
left: var(--size-spacing-half-x);
transform: translateY(-50%);
padding: 0 var(--size-spacing-quarter-x);
padding: 0 var(--size-spacing-quarter-x);
transition: 0.2s;
pointer-events: none;
text-transform: uppercase;
color: var(--color-blue-60n);
}
.email-form__item--label em {
text-transform: lowercase;
}
.email-form__item--input:focus + .email-form__item--label,
.email-form__item--input:not(:placeholder-shown) + .email-form__item--label {
top: calc(var(--size-spacing-quarter-x)*-1);
transform: translateY(0);
font-size: var(--font-size-300);
background: var(--color-base-0);
}
.email-form__item--error .email-form__item--input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.email-form__item--error .email-form__item--label,
.email-form__item--error .ok-icon,
.email-form__error {
color: var(--color-red-60);
}
.site-selector-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
padding: var(--size-spacing-one-x) 0;
}
.site-selector {
display: flex;
flex-direction: column;
max-width: var(--size-breakpoint-lg);
width: 100%;
}
.site-selector__header {
text-align: center;
border: none;
}
.site-selector__header-link {
display: inline-block;
padding: var(--size-spacing-one-x);
}
.site-selector__header-logo {
display: block;
height: auto;
width: 215px;
padding: 0 var(size-spacing-quarter-x);
}
.site-selector__main {
width: auto;
}
.site-selector__title {
font-size: var(--font-size-900);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
text-align: center;
margin-top: 0;
margin-bottom: var(--size-spacing-one-and-a-half-x);
}
.site-selector__nav {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
width: 100%;
}
.site-selector__header-link:focus {
outline: 2px solid var(--color-base-100);
outline-offset: -5px;
}
.sizechart__wrapper {
max-width: var(--size-breakpoint-xl);
margin: 0 auto;
}
.sizechart__heading {
font-size: var(--size-spacing-one-and-a-half-x);
color: var(--color-base-100);
padding: var(--size-spacing-one-x) var(--size-spacing-one-x);
}
.sizechart__subheading {
margin: 0 var(--size-spacing-one-x);
}
.sizechart__subheading,
.sizechart__tab-page p {
margin-bottom: var(--size-spacing-one-x);
font-size: var(--font-size-500);
line-height: var(--font-size-900);
}
.sizechart__tab-page-conspicuous {
font-weight: var(--font-weight-bold);
padding-left: var(--size-spacing-half-x);
}
.sizechart__socks-page {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.sizechart__socks-page {
flex-direction: row;
}
}
.sizechart__socks-page p {
font-size: var(--size-spacing-one-x);
line-height: var(--size-spacing-one-and-a-half-x);
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-spacing-quarter-x);
}
/* base styles for table */
.sizechart-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-smooth: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
.sizechart table > tbody > tr:hover {
background-color: var(--color-blue-10n);
}
.sizechart-table th,
.sizechart-table td {
font-size: var(--font-size-500);
line-height: var(--font-size-900);
text-align: center;
height: 55px;
border-left: solid 1px var(--color-blue-20n);
word-wrap: break-word;
}
.sizechart-table th:first-child {
font-weight: var(--font-weight-bold);
border-left: none;
box-shadow:
inset -1px 0 0 var(--color-blue-20n),
inset 0 0 0 var(--color-blue-20n);
}
.sizechart-table td:nth-child(2),
.sizechart-table th:nth-child(2) {
border-left: none;
}
.sizechart-table__units {
background-color: var(--color-blue-90n);
font-weight: var(--font-weight-bold);
color: var(--color-base-0);
}
/* adult && kids specific */
.sizechart-table--adults,
.sizechart-table--kids {
overflow-x: scroll;
max-width: 100vw;
}
.sizechart-table--adults > .sizechart-table {
width: 1380px;
}
.sizechart-table--kids > .sizechart-table {
width: 1639px;
}
.sizechart-table--adults > .sizechart-table th:first-child,
.sizechart-table--kids > .sizechart-table th:first-child {
width: 121px;
position: sticky;
left: var(--size-spacing-0);
z-index: 1;
background-color: var(--color-base-0);
}
.sizechart-table--adults > .sizechart-table thead th:first-child,
.sizechart-table--kids > .sizechart-table thead th:first-child {
background-color: var(--color-blue-90n);
line-height: var(--size-spacing-one-x);
}
/* sock specific */
.sizechart-table--adultsocks,
.sizechart-table--kidsocks {
width: 300px;
}
.sizechart-table--adultsocks th,
.sizechart-table--kidsocks th {
width: 50%;
}
.sizechart-table--adultsocks {
margin-right: var(--size-spacing-one-x);
margin-bottom: var(--size-spacing-one-x);
}
/* kids ages row */
.sizechart-table--kids .ages-row th {
text-align: start;
height: auto;
font-weight: var(--font-weight-regular);
padding: var(--size-spacing-half-x);
}
.sizechart-table--kids .ages-row-group {
font-weight: var(--font-weight-bold);
}
.sizechart-table--kids > .sizechart-table thead .ages-row th:nth-child(1) {
background: var(--color-purple-10n);
}
.sizechart-table--kids .ages-row th:nth-child(2) {
background: var(--color-primary-20);
}
.sizechart-table--kids .ages-row th:nth-child(3) {
background: rgba(214, 235, 235, 0.6);
}
.sizechart-table--kids .ages-row th:nth-child(4) {
background: rgba(214, 235, 235, 0.4);
}
.sizechart-table--kids .ages-row th:nth-child(5) {
background: var(--color-blue-30);
}
.unit-toggle__container {
display: flex;
align-items: center;
padding: var(--size-spacing-quarter-x);
margin-bottom: var(--size-spacing-one-x);
gap: var(--size-spacing-half-x);
}
.unit-toggle__switch {
display: block;
width: 36px;
height: 10px;
border-radius: 34px;
background-color: var(--color-purple-20n);
cursor: pointer;
position: relative;
}
.unit-toggle__circle {
width: 18px;
height: 18px;
background-color: var(--color-primary-60);
border-radius: 50%;
position: absolute;
top: 50%;
left: 1px;
transform: translateY(-50%);
transition: left 0.3s;
}
.unit-toggle__base input:checked + .unit-toggle__switch .unit-toggle__circle {
left: calc(100% - 18px);
}
.unit-toggle__label--active {
color: var(--color-primary-60);
}
/* custom styling and overrides */
[data-brand='heydude'] .swiper-frame {
position: relative;
padding: var(--size-spacing-two-x) var(--size-spacing-two-x);
background: var(--color-primary-light) url(../css/assets/SfCarouselBackground.png) repeat-x center;
background-size: cover;
max-width: 100vw;
}
[data-brand='heydude'] .swiper-frame swiper-container {
padding-bottom: 3.75rem;
margin: 0 auto;
width: calc(100% + 1rem);
max-width: var(--size-breakpoint-lg-desktop);
}
.swiper-header {
display: flex;
align-items: flex-end;
padding-bottom: var(--size-spacing-one-and-a-half-x);
width: 100%;
max-width: var(--size-breakpoint-lg-desktop);
margin: 0 auto;
}
.swiper-header > div {
flex-basis: 50%;
}
.swiper-frame .ctas {
text-align: right;
padding-left: var(--size-spacing-one-and-a-half-x);
}
.swiper-tab {
padding: var(--size-spacing-half-x) var(--size-spacing-one-and-a-half-x);
color: var(--color-primary-dark);
display: inline-block;
text-decoration: none;
border-bottom: 2px solid transparent;
font-size: 0.875rem;
border-bottom: 2px solid var(--color-blue-10);
}
.swiper-tab.active {
border-bottom: 2px solid var(--color-primary-dark);
}
.swiper-frame .heading span,
.swiper-frame .heading h3 {
font-family: var(--font-family-decorative);
text-transform: uppercase;
padding: 0;
margin: 0;
}
.swiper-frame .heading h3 {
font-size: var(--size-spacing-three-x);
line-height: 2.5rem;
}
.swiper-frame .heading span {
font-size: var(--size-spacing-one-and-a-half-x);
line-height: var(--size-spacing-one-x);
}
.swiper-footer {
position: relative;
margin: 0 auto;
width: 100%;
max-width: var(--size-breakpoint-lg-desktop);
}
.swiper-footer .ok-button {
display: none;
}
/* centered styles */
.text_center .swiper-header {
display: block;
text-align: center;
}
.text_center .ctas {
text-align: center;
margin-top: var(--size-spacing-one-and-a-half-x);
}
.ctas .ok-button {
margin-left: var(--size-spacing-one-x);
}
.text_center .ctas .ok-button {
display: block;
margin: var(--size-spacing-one-x) auto 0;
width: fit-content;
}
@media screen and (max-width: 1440px) {
[data-brand='heydude'] .swiper-frame {
padding: var(--size-spacing-two-x) var(--size-spacing-one-x);
}
}
@media screen and (max-width: 1024px) {
[data-brand='heydude'] .swiper-frame swiper-container {
padding-bottom: var(--size-spacing-three-x);
}
.swiper-header {
display: block;
}
.swiper-frame .ctas {
display: flex;
justify-content: center;
text-align: center;
margin-top: var(--size-spacing-one-x);
padding-left: 0;
}
.text_center .ctas .ok-button,
.ctas .ok-button {
display: none;
}
.swiper-frame .ctas .swiper-tab {
flex-basis: 25%;
}
.swiper-frame .swiper-navigation {
display: none;
}
.swiper-frame .swiper-scrollbar {
width: 100% !important;
}
.swiper-footer .ok-button {
display: block;
width: 100%;
}
}
.product-grid {
display: grid;
gap: var(--size-spacing-half-x);
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
padding: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-lg);
margin: 0 auto var(--size-spacing-one-x);
}
@media (min-width: 60rem) {
.product-grid {
gap: var(--size-spacing-one-x);
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
}
/**
* Center a single ok-card or ok-story-card
*
* 1. ok-card collapses without, sets reasonable fallback
width of ok-story-card
* 2. prevents ok-story-card from being too squatty
*/
.product-grid > .ok-card:nth-child(1):last-child,
.product-grid > .ok-story-card:nth-child(1):last-child {
grid-column: 1 / -1;
justify-self: center;
min-width: 300px; /* 1 */
min-height: 310px; /* 2 */
}
/* BASE */
.sf-rte {
max-width: var(--size-breakpoint-xl);
margin: 0 auto var(--size-spacing-one-x);
display: flex;
padding: 0 var(--size-spacing-one-x);
}
@media (min-width: 75rem) {
.sf-rte {
padding: 0;
}
}
.sf-rte__copy-block {
display: flex;
flex-direction: column;
gap: var(--size-spacing-half-x);
}
.sf-rte--seo .sf-rte__copy-block > * {
font-size: unset;
font-weight: unset;
}
.sf-rte__copy-block ol {
list-style: auto;
margin-left: var(--size-spacing-one-x);
}
.sf-rte__copy-block ul {
list-style: disc;
margin-left: var(--size-spacing-one-x);
}
.sf-rte__copy-block h1.sf-rte__heading {
font-size: var(--font-size-1100);
font-weight: var(--font-weight-black);
}
@media (min-width: 48rem) {
.sf-rte__copy-block[data-spacing~=small] {
gap: var(--size-spacing-one-x);
}
}
/* VERTICAL SPACING */
.sf-rte[data-spacing~=small] {
padding: var(--size-spacing-half-x) var(--size-spacing-one-x);
}
.sf-rte[data-spacing~=medium] {
padding: var(--size-spacing-one-and-a-half-x) var(--size-spacing-one-x);
}
.sf-rte[data-spacing~=large] {
padding: var(--size-spacing-two-x) var(--size-spacing-one-x);
}
@media (min-width: 48rem) {
.sf-rte[data-spacing~=small] {
padding: var(--size-spacing-one-x);
}
.sf-rte[data-spacing~=medium] {
padding: var(--size-spacing-two-x) var(--size-spacing-one-x);
}
.sf-rte[data-spacing~=large] {
padding: var(--size-spacing-four-x) var(--size-spacing-one-x);
}
}
@media (min-width: 75rem) {
.sf-rte[data-spacing~=small] {
padding: var(--size-spacing-one-x) 0;
}
.sf-rte[data-spacing~=medium] {
padding: var(--size-spacing-two-x) 0;
}
.sf-rte[data-spacing~=large] {
padding: var(--size-spacing-four-x) 0;
}
}
/* BLOCK ALIGNMENT */
.sf-rte[data-block-alignment~=center] {
justify-content: center;
}
.sf-rte[data-block-alignment~=right] {
justify-content: end;
}
/* TEXT ALIGNMENT */
.sf-rte__copy-block[data-text-alignment~=center] {
text-align: center;
}
.sf-rte__copy-block[data-text-alignment~=right] {
text-align: right;
}
/* TEXT WIDTH */
.sf-rte__copy-block[data-text-width~=small]{
max-width: 25rem;
}
.sf-rte__copy-block[data-text-width~=medium]{
max-width: 37.5rem;
}
.sf-rte__copy-block[data-text-width~=full]{
max-width: 50rem;
}
.sticky-atc-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 var(--size-spacing-one-x);
height: 94px;
}
[data-brand='heydude'] .sticky-atc-container {
height: 72px;
}
.sticky-atc-name {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-size-1000);
font-weight: var(--font-weight-bold);
}
.sticky-atc-name-image-container {
display: flex;
align-items: center;
}
.sticky-atc-name-image {
width: 82px;
height: 82px;
display: flex;
align-items: center;
border: 1px solid var(--color-blue-20n);
}
.sticky-atc-color-size {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-size-600);
font-weight: var(--font-weight-regular);
color: var(--color-base-100);
}
.sticky-atc-color-size .ok-button {
font-family: var(--font-family-sans);
}
[data-brand=heydude] .sticky-atc-color-size .ok-button {
font-family: var(--font-family-sans);
}
.sticky-atc-single-product {
display: flex;
align-items: center;
justify-content: center;
}
.sticky-atc-quantity-stacked {
display: flex;
flex-direction: column;
justify-content: center;
}
.sticky-atc-color-size-stacked {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: var(--size-spacing-one-x);
gap: 10px;
}
.sticky-atc-color-size-stacked-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.sticky-atc-color-size-stacked-link-container {
display: flex;
margin-left: var(--size-spacing-one-x);
}
.sticky-atc-color-size-stacked-link {
display: flex;
font-size: var(--font-size-300);
gap: 5px;
text-underline-offset: 5px;
}
.sticky-atc-color-size-link {
margin-right: var(--size-spacing-one-x);
color: var(--color-base-100);
}
.sticky-atc-quantity {
padding-top: 8px;
}
.sticky-atc-button {
font-size: var(--font-size-600);
letter-spacing: 1.2;
margin-left: var(--size-spacing-one-x);
}
.sticky-atc-color-size-stretched {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 767px) {
.sticky-atc-container {
height: fit-content;
padding: var(--size-spacing-one-x);
}
[data-brand='heydude'] .sticky-atc-button {
width: 100%;
}
[data-brand='heydude'] .sticky-atc-button-container,
[data-brand='heydude'] .sticky-atc-button-container button {
width: 100%;
}
[data-brand='heydude'] .sticky-atc-button-container {
margin-bottom: 12px;
}
[data-brand='heydude'] .ok-link.sticky-atc-color-size {
font-size: var(--font-size-300);
}
.sticky-atc-color-size {
font-size: var(--font-size-300);
}
.ok-link.sticky-atc-color-size {
font-size: var(--font-size-300);
}
}
[data-brand='heydude'] {
--sf-product-top-gap: 12px;
}
[data-brand='crocs'] {
--sf-product-top-gap: 0;
}
#pdp-react-bottom {
padding-bottom: 50px;;
}
.sf-product {
color: var(--color-base-100);
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 1920px;
}
.sf-product_top {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--sf-product-top-gap);
}
@media screen and (min-width: 768px) {
.sf-product_top {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: unset;
> dl,
> div {
grid-column: 2;
}
.sf-product_details {
grid-column: 1;
grid-row: 1 / span 10; /* -1 was not working */
}
}
}
.sf-product_description-wrap {
max-width: 760px;
margin: 0 auto;
}
.sf-product_einstein-wrapper {
margin-left: 15px;
margin-right: 15px;
padding-bottom: 105px;
}
@media (min-width: 768px) {
.sf-product_einstein-wrapper {
margin-left: 0;
margin-right: 0;
padding-bottom: 85px;
}
}
.sf-product_power-reviews-container {
min-height: 320px;
}
.sticky-atc {
position: fixed;
left: 0;
right: 0;
z-index: 1000;
bottom: 20px;
width: 95%;
height: 94px;
background-color: white;
justify-self: center;
align-items: center;
opacity: 0;
transition: opacity 150ms ease-in;
border-radius: 8px;
box-shadow: var(--elevation-light-700);
}
[data-brand='heydude'] .sticky-atc {
height: 72px;
}
.sticky-atc-footer {
position: absolute;
opacity: 1;
margin: 0 auto;
}
@media (max-width: 767px) {
.sticky-atc {
width: 100%;
bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.sticky-atc,
[data-brand='heydude'] .sticky-atc {
height: fit-content;
padding: 16px;
}
}
.sticky-atc.visible {
opacity: 1;
}
/* global for all quick add carousels */
.quick-add-carousel {
.ok-card--simple {
.ok-card__body {
> .ok-card__link {
position: relative;
.ok-card__atc {
background: transparent;
position: absolute;
inset: 0;
.ok-icon {
position: absolute;
bottom: 4px;
right: 4px;
}
}
}
}
}
}
.sf-signup {
padding: var(--size-spacing-one-x);
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: 800px;
margin: 0 auto;
}
.sf-signup .ok-button {
width: 100%;
}
.cx-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
}
.sf-signup--terms-and-privacy {
padding: var(--size-spacing-two-x);
min-height: 10rem;
max-height: 10rem;
overflow-y: auto;
border-radius: 3px;
border: 3px dashed var(--color-blue-60n);
}
.sf-product_list-product-pagination {
text-align: center;
margin: 15px 15px 30px;
}
.sf-product_list-product-pagination button {
margin: 0 20px;
font-weight: var(--font-weight-bold);
}
.sf-product_list-product-pagination .ais-Pagination {
display: inline-block;
}
.sf-product_list .ais-Pagination-item--firstPage,
.sf-product_list .ais-Pagination-item--lastPage,
.sf-product_list .ais-Pagination-item--previousPage,
.sf-product_list .ais-Pagination-item--page,
.sf-product_list .ais-Pagination-item--nextPage.ais-Pagination-item--disabled {
display: none;
}
.sf-product_list .ais-Pagination-item--nextPage .ais-Pagination-link {
align-items: center;
border: 1px solid var(--color-border-button-primary);
border-radius: var(--size-radius-button, 0);
cursor: pointer;
display: inline-flex;
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
gap: var(--size-spacing-half-x);
height: auto;
justify-content: center;
max-width: 100%;
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
vertical-align: middle;
word-break: break-word;
background-color: var(--color-base-100);
border-color: var(--color-base-100);
color: var(--color-base-0);
text-align: center;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.sf-product_list .ais-Pagination-item--nextPage .ais-Pagination-link:hover {
background-color: var(--color-base-0);
border-color: var(--color-base-100);
color: var(--color-base-100);
}
}
.sf-product_list__product-grid {
width: 100%;
padding-right: var(--size-spacing-one-x);
padding-left: var(--size-spacing-one-x);
margin-right: auto;
margin-left: auto;
margin-top: var(--size-spacing-one-x) !important;
margin-bottom: var(--size-spacing-one-x) !important;
padding: 0 !important;
}
.sf-product_list__product-grid .jibbitz-picker-grid {
grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
}
.sf-skeleton {
opacity: 0.3;
background-color: var(--color-blue-20n) !important;
animation-duration: 3s;
animation-name: loading;
animation-iteration-count: infinite;
}
.jibbitz-picker-grid .sf-skeleton {
min-height: 135px;
}
@keyframes loading {
0% {
opacity: 0.3;
}
50% {
opacity: 0.7
}
100% {
opacity: 0.3;
}
}
.login-form__item {
position: relative;
}
/* Input field */
.login-form__item-input {
border-radius: var(--size-spacing-quarter-x);
border-width: 1px;
color: var(--color-blue-60n);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
width: 100%;
}
/* Label styles */
.login-form__item-label {
position: absolute;
left: var(--size-spacing-half-x);
top: 50%;
transform: translateY(-50%);
padding: 0 var(--size-spacing-quarter-x);
transition: 0.2s;
pointer-events: none;
}
/* Input field with focus or non-empty value */
.login-form__item-input:focus + .login-form__item-label,
.login-form__item-input:not(:placeholder-shown) + .login-form__item-label {
background: var(--color-base-0);
font-size: var(--font-size-300);
top: 0;
transform: translateY(-50%);
}
/* Focus state */
.login-form__item:focus,
.login-form__item-input:focus {
border-color: var(--color-primary-60) !important;
box-shadow: none !important;
outline: none;
}
.login-form__item:focus-visible,
.login-form__item-input:focus-visible {
outline: var(--color-primary-60) 1px solid !important;
outline-offset: -1px;
}
/* Error state */
.login-form--error input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.login-form--error label {
color: var(--color-red-60);
}
.login-form--error p {
color: var(--color-red-60);
margin-top: var(--size-spacing-quarter-x);
}
/* Error/success icons */
.login-form__item .ok-icon {
position: absolute;
right: var(--size-spacing-half-x);
top: 0.8rem;
font-size: var(--font-size-700);
pointer-events: none;
fill: var(--color-brand-80);
}
.login-form--error .ok-icon {
fill: var(--color-red-60);
}
.login-form ul {
margin-top: var(--size-spacing-one-x);
}
.login-form li,
.login-form button {
margin-bottom: var(--size-spacing-one-x);
}
.login-form p {
font-size: var(--font-size-400);
}
.password-rules {
border: 1px solid var(--color-blue-20n);
margin-top: var(--size-spacing-three-quarters-x);
padding: var(--size-spacing-one-x);
position: relative;
}
.password-rules__arrow {
border-color: transparent transparent var(--color-blue-20n) transparent;
border-style: solid;
border-width: 0 var(--size-spacing-half-x) var(--size-spacing-half-x) var(--size-spacing-half-x);
position: absolute;
top: calc(var(--size-spacing-half-x)*-1);
}
.password-rules__list {
display: flex;
flex-direction: column;
list-style: disc;
margin-left: var(--size-spacing-one-x);
margin-top: var(--size-spacing-one-x);
}
.password-rules__list-item .ok-icon {
height: var(--size-spacing-one-and-a-half-x);
margin-left: var(--size-spacing-quarter-x);
width: var(--size-spacing-one-and-a-half-x);
}
.password-rules__rule--valid {
color: var(--color-brand-80);
}
.password-rules__rule--invalid {
color: var(--color-red-60);
}
.registration-form__item {
display: flex;
flex-direction: column;
position: relative;
min-height: 44px; /* Ensure space for labels */
}
.registration-form__item:has(.ok-checkbox) {
min-height: auto; /* Reset height for checkboxes */
}
/* Styling for the input */
.registration-form__item--input,
.registration-form__item input[type="date"] {
border-radius: var(--size-spacing-quarter-x);
border-width: 1px;
color: var(--color-blue-60n);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
width: 100%;
position: relative;
}
/* Floating label */
.registration-form__item--label {
position: absolute;
left: var(--size-spacing-half-x);
top: 50%;
transform: translateY(-50%);
font-size: var(--font-size-500);
transition: all 0.2s ease;
pointer-events: none;
max-width: calc(100% - 1rem);
}
/* Input field with focus or non-empty value */
.registration-form__item--input:focus + .registration-form__item--label,
.registration-form__item--input:not(:placeholder-shown) + .registration-form__item--label {
background: var(--color-base-0);
font-size: var(--font-size-300);
top: 0;
transform: translateY(-50%);
}
/* Focus state */
.registration-form__item:focus,
.registration-form__item--input:focus {
border-color: var(--color-primary-60) !important;
box-shadow: none !important;
outline: none;
}
.registration-form__item:focus-visible,
.registration-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid !important;
outline-offset: -1px;
}
/* Error state */
.registration-form--error input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
}
.registration-form--error input:focus,
.registration-form--error input:focus-visible {
border-color: var(--color-red-60) !important;
outline: var(--color-red-60) 1px solid !important;
outline-offset: -1px;
}
.registration-form--error label,
.registration-form--error p {
color: var(--color-red-60);
}
/* Error/success icons */
.registration-form__item .ok-icon:not(.password-rules__list-item .ok-icon) {
position: absolute;
right: var(--size-spacing-half-x);
top: var(--size-spacing-three-quarters-x);
font-size: var(--font-size-700);
pointer-events: none;
fill: var(--color-brand-80);
}
.registration-form--error .ok-icon:not(.password-rules__list-item .ok-icon) {
fill: var(--color-red-60);
}
.registration-form ul {
margin-top: var(--size-spacing-one-x)!important;
}
.registration-form li {
margin-bottom: var(--size-spacing-one-x);
}
.registration-form p {
font-size: var(--font-size-400);
margin-top: var(--size-spacing-quarter-x);
}
/* Adjust margins for items with additional headers (JP only) */
.registration-form li:has(h3:not(.sr-only)) h3 {
margin-bottom: var(--size-spacing-half-x);
}
.registration-form li:has(.sr-only) {
margin-bottom: var(--size-spacing-two-x);
}
.registration-form__date {
margin-right: var(--size-spacing-half-x);
}
.registration-form__scrollable-container {
max-height: 150px;
overflow-y: auto;
margin-bottom: var(--size-spacing-one-x);
}
.registration-form .ok-checkbox {
margin-bottom: var(--size-spacing-half-x);
}
/* Identify autofilled fields */
@keyframes autofill {
from {}
to {}
}
input:-webkit-autofill {
animation-name: autofill;
animation-fill-mode: both;
}
input:autofill {
animation-name: autofill;
}
[data-brand='heydude'] {
--sf-flyout-panel-plp-background-color: var(--color-base-10);
}
[data-brand='crocs'] {
--sf-flyout-panel-plp-background-color: var(--color-blue-10n);
}
.sf-flyout-panel {
align-items: flex-start;
background-color: var(--color-base-0);
border-radius: 0;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: flex-start;
max-height: 100vh;
max-width: 330px;
overflow-y: scroll;
padding: 0 0 var(--size-spacing-two-x) var(--size-spacing-one-x);
position: fixed;
top: 0;
transform: none;
width: 100vw;
z-index: 3000;
&.sf-flyout-panel__slide-out-right {
animation: flyoutOpenRight 150ms ease-in-out;
right: 0;
}
&.sf-flyout-panel__slide-out-left {
animation: flyoutOpenLeft 150ms ease-in-out;
left: 0;
}
.sf-flyout-panel__body {
padding-bottom: 100px;
padding-right: var(--size-spacing-one-x);
width: 100%;
/**
* Defensive here for the close button spacing/wrapping.
*
* This add "dummy" space for close button so that content
* can wrap around the close button. And we can still maintain
* proper source order for the close button.
*/
&:before {
content: '';
float: right;
height: 45px;
width: 45px;
}
}
}
.sf-flyout-panel__Search.sf-flyout-panel,
.sf-flyout-panel__Plp.sf-flyout-panel {
background-color: var(--sf-flyout-panel-plp-background-color);
opacity: 1 !important; /* overrides fadein effect */
box-shadow: 1px 0 16px 1px rgba(0, 0, 0, .08);
max-width: 375px;
overflow-y: auto;
padding: 0 var(--size-spacing-one-x) var(--size-spacing-two-x);
&.sf-flyout-panel__slide-out-right {
animation: flyoutOpenRight 300ms ease-in-out;
}
&.sf-flyout-panel__slide-out-left{
animation: flyoutOpenLeft 300ms ease-in-out;
}
.sf-flyout-panel__body--header {
border-bottom: 1px solid color-mix(in srgb, var(--color-blue-60n) 10%, transparent);
margin-bottom: var(--size-spacing-three-quarters-x);
}
.sf-flyout-panel__body {
color: var(--color-base-100);
line-height: 1.25;
padding: 0;
}
}
.sf-flyout-panel__Plp.sf-flyout-panel {
height: 100dvh;
padding: 0 var(--size-spacing-one-x);
}
.sf-flyout-panel__Search.sf-flyout-panel {
max-width: min(485px, 90%);
.sf-flyout-panel__body {
&:before {
content: none;
}
}
}
.sf-flyout-panel[data-state="closed"] {
&.sf-flyout-panel__slide-out-right {
animation: flyoutCloseRight 150ms ease-in-out;
}
&.sf-flyout-panel__slide-out-left{
animation: flyoutCloseLeft 150ms ease-in-out;
}
}
.sf-flyout-panel__Search.sf-flyout-panel[data-state="closed"],
.sf-flyout-panel__Plp.sf-flyout-panel[data-state="closed"] {
opacity: 1 !important; /* overrides fadeout effect */
&.sf-flyout-panel__slide-out-right {
animation: flyoutCloseRight 300ms ease-in-out;
}
&.sf-flyout-panel__slide-out-left{
animation: flyoutCloseLeft 300ms ease-in-out;
}
}
.sf-flyout-panel__overlay {
animation: overlayShow 350ms cubic-bezier(0.16, 1, 0.3, 1);
background: #343649bf;
cursor: pointer;
inset: 0;
position: fixed;
z-index: 1052;
}
.sf-flyout-panel__overlay.sf-flyout-panel__overlay-Search,
.sf-flyout-panel__overlay.sf-flyout-panel__overlay-Plp {
backdrop-filter: none;
background: rgba(0,0,0,.5);
}
.sf-flyout-panel__close {
align-self: flex-end;
position: sticky;
right: var(--size-spacing-half-x);
top: var(--size-spacing-half-x);
}
.sf-flyout-panel__body {
padding-bottom: 100px;
padding-right: var(--size-spacing-one-x);
width: 100%;
}
.sf-flyout-panel__body--header h2 {
padding-bottom: var(--size-spacing-three-quarters-x);
}
.sf-flyout-panel__body--header p {
margin-bottom: var(--size-spacing-half-x);
}
@keyframes flyoutOpenLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes flyoutCloseLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-100%);
}
}
@keyframes flyoutOpenRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes flyoutCloseRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.header-account-menu {
display: 'block';
transition: 'max-height 0.3s ease-in-out';
visibility: 'auto';
position: absolute;
z-index: 100;
right: 0;
min-width: 225px;
background-color: var(--color-blue-20n);
font-size: var(--font-size-500);
overflow-y: hidden;
max-height: 0;
}
.header-account-menu[data-open="true"] {
max-height: 300px;
}
.header-account-menu__list {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.header-account-menu__item {
display: flex;
text-transform: uppercase;
position: relative;
color: var(--color-base-100);
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-three-quarters-x) var(--size-spacing-three-quarters-x);
border-top: 1px solid var(--color-base-0);
line-height: 1.1;
font-weight: var(--font-weight-bold);
width: 100%;
}
.header-account-menu__item:hover,
.header-account-menu__item:focus {
color: var(--color-primary-60);
text-decoration: underline;
background: var(--color-blue-20n);
}
.header-account-menu__item:focus {
outline: 3px solid var(--color-blue-40n);
outline-offset: -3px;
}
.nav-link-account {
display: flex;
}
.nav-link-account .ok-button,
.nav-link-account .ok-link {
padding: 0 12px;
}
.nav-link-account .ok-button:hover,
.nav-link-account .ok-link:hover,
.nav-link-account .ok-button:focus,
.nav-link-account .ok-link:focus,
.nav-link-account .ok-button:active,
.nav-link-account .ok-link:active {
color: var(--color-primary-60) !important;
}
.nav-link-accoumt .ok-button:focus,
.nav-link-account .ok-link:focus {
outline-offset: -5px;
}
.nav-link-account .ok-icon {
min-width: var(--size-spacing-one-and-a-half-x);
min-height: var(--size-spacing-one-and-a-half-x);
}
.hd-logo-row {
display: flex;
flex-basis: 100%;
justify-content: center;
background: var(--color-purple-20n);
background: linear-gradient(
180deg,
rgba(255,255,255,1) 19%,
rgba(232,146,67,1) 19%,
rgba(232,146,67,1) 38%,
rgba(246,192,94,1) 38%,
rgba(246,192,94,1) 47%,
rgba(207,204,203,1) 47%,
rgba(207,204,203,1) 53%,
rgba(128,191,209,1) 53%,
rgba(128,191,209,1) 61%,
rgba(93,136,195,1) 61%,
rgba(93,136,195,1) 80%,
rgba(255,255,255,1) 80%
);
margin-top: var(--size-spacing-one-x);
}
@media (min-width: 60rem) {
[data-brand='heydude'] .header-logo {
min-width: 75px;
min-height: 48px;
flex-shrink: 0;
}
}
.sf-sub-nav h2 {
color: var(--color-base-90);
font-size: var(--font-size-800);
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
}
.sf-sub-nav .sub-nav--without-icon .ok-sub-nav__text-wrapper {
margin: 0;
}
.sf-sub-nav .sub-nav--with-icon .ok-sub-nav {
padding-top: 0;
padding-bottom: 0;
}
.sf-sub-nav .sub-nav--with-icon .ok-sub-nav svg {
margin-bottom: var(--size-spacing-half-x);
}
.dialog-overlay {
backdrop-filter: blur(4px);
cursor: pointer;
position: fixed;
inset: 0;
z-index: 1052;
animation: overlayShow 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes overlayShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.dialog {
background-color: var(--color-base-0);
border-radius: 6px;
box-shadow: var(--elevation-backdrop-100);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 1000px;
max-height: 85vh;
padding: var(--size-spacing-one-x);
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1053;
}
@keyframes contentShow {
from {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/**
* Defensive here for the close button spacing/wrapping.
*
* This adds "dummy" space for close button so that content
* can wrap around the close button. And we can still maintain
* proper source order for the close button.
*/
.dialog__body:before {
content: '';
width: 45px;
height: 45px;
float: right;
}
.dialog__close {
position: fixed;
top: var(--size-spacing-half-x);
right: var(--size-spacing-half-x);
padding: var(--size-spacing-half-x);
}
.cancel-order-modal {
padding: var(--size-spacing-one-x);
}
.cancel-order-modal__body--title {
font-size: var(--font-size-700);
margin-bottom: var(--size-spacing-one-x);
}
.cancel-order-modal__body--text {
margin-bottom: var(--size-spacing-one-x);
}
.cancel-order-modal__actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--size-spacing-one-x);
}
.address-section {
line-height: 1.5;
}
.address-section__lines {
white-space: pre-line;
}
.address-section__lines:last-child {
margin-bottom: var(--size-spacing-one-x);
}
.payment-and-address-section {
display: flex;
justify-content: space-between;
gap: var(--size-spacing-one-x);
flex-wrap: nowrap;
margin-top: var(--size-spacing-four-x);
}
.payment-and-address-section__payment-method {
width: calc(50% - 1px);
box-sizing: border-box;
}
.payment-and-address-section__address-section {
width: 100%;
box-sizing: border-box;
}
.payment-and-address-section__section-header {
border-top: 1px solid var(--color-grey-20n);
border-bottom: 1px solid var(--color-grey-20n);
padding: var(--size-spacing-half-x) 0;
margin-bottom: var(--size-spacing-half-x);
}
.payment-and-address-section__section-title {
margin-bottom: var(--size-spacing-half-x);
color: var(--color-grey-80n);
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
}
.payment-and-address-section__address-container {
display: flex;
flex-direction: row;
gap: var(--size-spacing-half-x);
width: calc(50% - 1px);
box-sizing: border-box;
}
@media (max-width: 768px) {
.payment-and-address-section {
flex-direction: column;
}
.payment-and-address-section__payment-method,
.payment-and-address-section__address-container,
.payment-and-address-section__address-section {
width: 100%;
}
}
.payment-method {
border: 1px solid var(--color-blue-20n);
padding: var(--size-spacing-one-x);
border-radius: var(--size-spacing-quarter-x);
margin-bottom: var(--size-spacing-one-x);
}
.payment-method__card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: var(--size-spacing-two-x);
}
.payment-method__card-info {
flex: 1;
}
.payment-method__card-number {
font-weight: var(--font-weight-normal);
color: var(--color-base-100);
}
.expiration {
color: var(--color-grey-60n);
font-size: var(--font-size-500);
display: block;
margin-top: var(--size-spacing-quarter-x);
}
.payment-method__card-image-container {
flex-shrink: 0;
margin-left: var(--size-spacing-half-x);
}
.payment-method__card-image {
width: 73px;
height: 46px;
object-fit: contain;
}
.payment-method__card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--color-grey-20n);
padding-top: var(--size-spacing-two-x);
}
.payment-method__card-holder {
color: var(--color-grey-80n);
font-size: var(--font-size-500);
font-weight: var(--font-weight-bold);
}
.payment-method__amount-container {
text-align: right;
}
.payment-method__amount-label {
font-weight: var(--font-weight-bold);
}
.payment-method__amount-value {
display: block;
font-size: var(--font-size-500);
font-weight: var(--font-weight-regular);
}
.purchase-cards__return-link {
margin-top: var(--size-spacing-one-x);
}
.totals {
margin: var(--size-spacing-one-x) 0;
border-top: 1px solid var(--color-grey-20n);
}
.totals__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--size-spacing-half-x) 0;
border-bottom: 1px dashed var(--color-blue-20n);
text-wrap: wrap;
}
.totals__row--no-underline {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--size-spacing-half-x) 0;
text-wrap: wrap;
}
.totals__row:last-child {
border-bottom: none;
}
.totals__label {
font-size: var(--font-size-500);
color: var(--color-grey-80n);
flex-shrink: 0;
word-wrap: break-word;
max-width: 70%;
}
.totals__value {
font-size: var(--font-size-500);
font-weight: var(--font-weight-bold);
color: var(--color-base-100);
margin-right: var(--size-spacing-one-x);
}
.totals__value--red {
color: var(--color-red-60);
}
.totals__total {
font-size: var(--font-size-500);
font-weight: var(--font-weight-bold);
padding-top: var(--size-spacing-one-x);
}
.totals__total-label {
color: var(--color-base-100);
}
.totals__total-value {
color: var(--color-base-100);
margin-right: var(--size-spacing-one-x);
}
@media (min-width: 768px) {
.totals {
margin-left: 50%;
}
}
.totals__inner {
border-bottom: 1px dashed var(--color-blue-20n);
padding-bottom: var(--size-spacing-half-x);
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.totals__inner:last-child {
border-bottom: none;
}
.order-details__container {
margin: 0 auto;
max-width: var(--size-breakpoint-xl);
}
.order-details__title {
color: var(--color-base-100);
font-size: var(--size-spacing-one-and-a-half-x);
margin: var(--size-spacing-one-x) 0;
padding: 0 0 var(--size-spacing-one-x);
}
.order-details__top-section {
margin-bottom: var(--size-spacing-one-and-a-half-x);
}
.order-details__top-section--element {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.order-details__cancel-or-return-container{
display: flex;
align-items: center;
margin-left: auto;
}
.order-details__detail-row {
display: flex;
margin-bottom: var(--size-spacing-one-x);
}
.order-details__detail-label {
font-size: var(--size-spacing-one-x);
color: var(--color-grey-80n);
flex-shrink: 0;
white-space: nowrap;
width: 180px;
}
.order-details__detail-value {
font-size: var(--size-spacing-one-x);
font-weight: var(--font-weight-bold);
max-width: 250px;
margin-left: var(--size-spacing-one-x);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.order-details__detail-label--large {
font-size: calc((var(--size-spacing-one-x) + var(--size-spacing-quarter-x)));
color: var(--color-grey-80n);
flex-shrink: 0;
white-space: nowrap;
width: 180px;
}
.order-details__detail-value--large {
font-size: calc((var(--size-spacing-one-x) + var(--size-spacing-quarter-x)));
font-weight: var(--font-weight-bold);
max-width: 250px;
margin-left: var(--size-spacing-one-x);
flex-grow: 1;
}
.order-details__text-red {
color: var(--color-red-60);
font-weight: var(--font-weight-bold);
}
.order-details__mobile-button {
display: flex;
justify-content: center;
width: 100%;
}
.order-details__mobile-button--custom {
width: 100%;
}
.order-details__mobile-button--form {
display: flex;
width: 100%;
justify-content: center;
margin-bottom: var(--size-spacing-one-x);
}
/* these style overwrites were necessary to give UX what they've asked for */
.order-details__purchase-cards img {
align-self: center !important;
}
.order-details__purchase-cards h2 {
font-weight: var(--font-weight-bold) !important;
}
.order-details__purchase-cards .ok-purchase-card__cta {
display: none;
}
.header-nav {
display: flex;
}
[data-brand='heydude'] .header-nav {
display: flex;
flex-grow: 1;
justify-content: space-between;
}
[data-brand='heydude'] .header-nav .nav-link {
font-size: var(--font-size-400);
font-weight: var(--font-weight-bold);
letter-spacing: 0.06em;
text-decoration: none;
color: var(--color-primary-dark);
}
[data-brand='heydude'] .global-viewport[data-nav-mode='nav-dark'] .header-nav .nav-link {
color: var(--color-primary-light);
}
[data-brand='heydude'] .global-viewport[data-nav-mode='nav-light'] .header-nav .nav-link {
color: var(--color-primary-dark);
}
[data-brand='heydude'] .header-nav .nav-link .nav-link-label {
position: relative;
padding-bottom: 3px;
&:hover {
color: var(--color-brand-dark-blue) !important;
&:after {
width: 100%;
}
}
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px; /* Adjust thickness of underline */
background-color: var(--color-brand-dark-blue); /* Change to your preferred underline color */
transition: width 0.3s ease; /* Adjust duration and timing function as needed */
}
}
[data-brand='heydude'] #global-viewport .header-wrapper.hovering .header-nav .nav-link {
color: var(--color-primary-dark);
}
.user-links-small-list {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.user-links-small-list__item {
display: flex;
}
.user-links-small-list__menu-item {
display: flex;
flex: 1 1 auto;
text-transform: uppercase;
color: var(--color-primary-dark);
padding: var(--size-spacing-one-and-a-half-x) var(--size-spacing-one-x);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-400);
text-transform: none;
}
#header-nav-mobile-logout.user-links-small-list__menu-item {
position: relative;
}
#header-nav-mobile-logout.user-links-small-list__menu-item:after {
position: absolute;
left: 0;
top: var(--size-spacing-one-x);
bottom: var(--size-spacing-one-x);
width: 1px;
background-color: var(--color-blue-40n);
content: '';
}
#header-nav-phone.user-links-small-list__menu-item {
justify-content: center;
}
.user-links-small-list__menu-item:focus {
outline: 3px solid var(--color-blue-40n);
outline-offset: -3px;
}
.user-links-small-list__menu-item[aria-disabled="true"]:focus {
outline: 3px solid var(--color-base-90);
outline-offset: -4px;
}
.user-links-small-list__menu-item .ok-icon {
margin-right: var(--size-spacing-half-x);
line-height: var(--font-size-500);
width: 20px;
height: 20px;
}
.minicart-link {
color: var(--color-base-100);
padding-left: var(--size-spacing-three-quarters-x);
padding-right: var(--size-spacing-three-quarters-x);
align-items: center;
display: flex;
}
.minicart-cart-icon {
display: flex;
}
.minicart-quantity-chip {
color: var(--color-base-0);
background-color: var(--color-primary-60);
text-align: center;
width: 15px;
height: 15px;
margin-top: -8px;
margin-left: -8px;
border-radius: 50%;
font-size: var(--font-size-200);
line-height: var(--size-spacing-one-x);
}
.minicart {
display: flex;
position: relative;
}
.minicart.active .minicart-container {
visibility: visible;
top: 0;
}
.minicart-container {
background: var(--color-base-0);
color: var(--color-base-100);
position: fixed;
top: -100%;
left: var(--size-spacing-0);
height: auto;
width: 100%;
visibility: hidden;
border: 1px solid var(--color-base-100);
box-shadow: 0 1px 4px rgba(0,0,0,.5);
z-index: 201; /* minicart will cover feedback button */
transition: 500ms ease-in-out;
}
@media (min-width: 60rem) {
.minicart-container {
left: auto;
right: -50%;
width: 350px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: right 700ms cubic-bezier(1, -0.01, 0.55, 0.9), visibility 700ms;
}
.minicart.active .minicart-container {
visibility: visible;
right: var(--size-spacing-0);
}
/* extend hover area on top to prevent jump when user moves from cart icon to minicart */
.minicart-container:before {
content: '';
position: absolute;
left: 10%;
right: 0;
top: -2%;
bottom: 100%;
}
}
/* this extends the mini cart from right edge of viewport to under the minicart for xxxl viewports */
@media (min-width: 2075px) {
.minicart-container {
width: 25vw;
}
}
.minicart-empty {
padding: var(--size-spacing-one-x);
text-align: center;
}
.minicart-header {
border-bottom: 1px solid var(--color-blue-20n);
padding: var(--size-spacing-one-x);
align-items: center;
display: flex;
justify-content: space-between;
}
.minicart-subheading {
text-align: right;
margin-left: auto;
}
.minicart-container .cartPromotionalMessage {
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
font-size: var(--font-size-400);
}
.minicart-price {
font-weight: var(--font-weight-bold);
white-space: nowrap;
}
.minicart-close {
margin-left: var(--size-spacing-one-x);
}
.minicart-symbolset {
font-size: var(--font-size-500);
font-family: 'symbolset', Arial, sans-serif;
color: var(--color-base-100);
vertical-align: middle;
}
.minicart-scroll-container {
overflow: auto;
}
.minicart-progress-bar {
display: block;
width: 100%;
margin-top: var(--size-spacing-three-quarters-x);
}
.minicart-list-item {
padding: var(--size-spacing-one-x);
min-height: 110px;
border-top: 1px solid var(--color-blue-20n);
display: none; /* for small viewports we're only displaying the last item added to cart */
}
@media (min-width: 60rem) {
.minicart-list-item {
display: flex;
}
}
.minicart.suppress-items-mobile .minicart-list .minicart-list-item,
.minicart.suppress-items-mobile .minicart-subtotal {
display: none;
}
.minicart.suppress-items-mobile .minicart-list {
padding-top: 20px;
}
.minicart-list-item.last-added {
display: flex; /* for small viewports we're only displaying the last item added to cart */
}
.minicart-list-item:first-child {
border-top: var(--size-spacing-0);
}
.minicart-list-item-details {
line-height: var(--font-size-700);
margin-left: var(--size-spacing-one-and-a-half-x);
}
.minicart-list-item-image {
flex-shrink: 0;
}
.minicart-text-sale {
padding: var(--size-spacing-half-x) 0 0;
overflow: hidden;
position: relative;
}
.minicart-sale-msg {
color: var(--color-base-90);
font-size: var(--font-size-400);
line-height: var(--font-size-900);
}
.minicart-oos {
color: var(--color-red-60);
font-weight: var(--font-weight-bold);
}
.minicart-unavailable {
color: var(--color-red-60);
}
.minicart-subtotal {
border-top: 1px solid var(--color-blue-20n);
padding: var(--size-spacing-one-and-a-half-x) var(--size-spacing-one-x) var(--size-spacing-three-quarters-x);
display: flex;
justify-content: space-between;
}
.minicart-subtotal-label {
color: var(--color-base-90);
}
.minicart-subtotal-value {
text-align: right;
font-weight: var(--font-weight-bold);
}
.minicart-buttons {
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x) var(--size-spacing-one-and-a-half-x);
}
.minicart-buttons a {
width: 100%;
margin-bottom: var(--size-spacing-one-x);
}
.minicart-container .cartPromotionalMessage {
padding: 10px 15px;
font-size: var(--font-size-400);
}
/* Autocomplete */
/*************************************************************/
[data-brand='heydude'] {
--sf-header-autocomplete-header-font-family: var(--font-family-decorative);
--sf-header-autocomplete-header-text-decoration: uppercase;
}
[data-brand='crocs'] {
--sf-header-autocomplete-header-font-family: inherit;
--sf-header-autocomplete-header-text-decoration: none;
}
.autocomplete-larger-viewport_search-wrapper {
display: flex;
flex: 1 1 auto !important;
flex-direction: column;
gap: var(--size-spacing-half-x);
overflow: visible;
padding-block: var(--size-spacing-one-x) var(--size-spacing-two-x);
min-width: 150px;
}
.autocomplete-larger-viewport_nav-search {
min-width: 150px;
width: 100%;
position: relative;
width: 100%;
-webkit-transition: all .2s;
transition: all .2s;
}
.autocomplete-larger-viewport_sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.autocomplete-larger-viewport_input-wrapper {
border-radius: var(--size-spacing-eighth-x);
line-height: var(--size-spacing-one-x);
color: var(--color-base-100);
min-height: 2.75em;
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
padding: .875em var(--size-spacing-half-x);
width: 100%;
height: 2.75em;
}
.autocomplete-larger-viewport_input-wrapper input {
width: calc(100% - 2px);
height: calc(100% - 2px);
position: absolute;
top: 1px;
left: 1px;
font-size: var(--font-size-500);
border: none;
border-radius: 0;
outline: 0 !important;
box-shadow: none !important;
padding: .875em var(--size-spacing-half-x);
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
font: inherit;
background-color: var(--color-base-0);
}
.autocomplete-larger-viewport_input-wrapper input::placeholder {
color: #d4d4d4;
}
.autocomplete-larger-viewport_input-wrapper input::-webkit-search-decoration,
.autocomplete-larger-viewport_input-wrapper input::-webkit-search-cancel-button,
.autocomplete-larger-viewport_input-wrapper input::-webkit-search-results-button,
.autocomplete-larger-viewport_input-wrapper input::-webkit-search-results-decoration {
display: none;
}
.autocomplete-larger-viewport_search-button {
padding: 10px;
}
.autocomplete-larger-viewport_search-button svg {
cursor: pointer !important;
min-width: var(--size-spacing-one-and-a-half-x);
height: var(--size-spacing-one-and-a-half-x);
}
.autocomplete-larger-viewport_search-panel {
border: 0px;
color: var(--color-base-100) !important;
display: flex;
flex-direction: column;
gap: var(--size-spacing-half-x);
max-height: 100vh;
}
.autocomplete-larger-viewport_empty-results {
font-size: var(--font-size-700);
line-height: 1.4;
}
.autocomplete-larger-viewport_terms-list {
display: flex;
flex-direction: column;
gap: 13px;
.ok-link {
color: var(--color-base-100) !important;
font-size: var(--font-size-400) !important;
gap: 0;
line-height: 1.4;
margin: 0;
padding: 3px;
text-decoration: none !important;
&:focus,
&:hover {
text-decoration: underline !important;
}
}
}
.autocomplete-larger-viewport_terms-list .autocomplete-larger-viewport_terms-selected a {
text-decoration: underline;
}
.autocomplete-larger-viewport_header {
color: var(--color-base-110);
font-family: var(--sf-header-autocomplete-header-font-family);
font-size: var(--font-size-600);
font-weight: var(--font-weight-regular);
line-height: 1.556;
text-transform: var(--sf-header-autocomplete-header-text-decoration);
}
.autocomplete-larger-viewport_products-list {
display: flex;
flex-direction: column;
gap: var(--size-spacing-half-x);
}
.autocomplete-larger-viewport_products-wrapper {
display: flex;
flex-direction: column;
gap: var(--size-spacing-half-x);
}
.sf-text-field-input-container {
align-items: center;
background-color: var(--color-base-10);
border-radius: 8px;
border: 1px solid var(--color-blue-60n);
display: flex;
gap: 7px;
padding-inline: 12px;
position: relative;
width: 100%;
&:focus-within {
box-shadow: 0 0 0 1px var(--color-blue-60n);
outline: none;
}
&.sf-text-field-input-container-with-icon {
.sf-text-field-label {
left: 29px;
}
}
.ok-icon {
height: 18px;
width: 18px;
}
}
.sf-text-field-input {
background-color: inherit;
border: none;
height: auto;
padding-block: 11px;
transition:
border-color 0.2s,
box-shadow 0.2s;
width: 100%;
&:focus {
outline: none;
}
&[type="search"]::-webkit-search-cancel-button {
width: 18px;
height: 18px;
}
}
.sf-text-field-label {
background-color: var(--color-base-10);
color: #666;
left: 13px;
padding-inline: 7px;
pointer-events: none;
position: absolute;
top: 10px;
transform-origin: left top;
transition:
transform 0.2s,
color 0.2s;
}
.sf-text-field-input,
.sf-text-field-label {
color: var(--color-blue-60n);
font-size: var(--font-size-500);
line-height: 1.25;
}
/* Using CSS sibling selector for the floating effect */
.sf-text-field-input:focus ~ .sf-text-field-label,
.sf-text-field-input:not(:placeholder-shown) ~ .sf-text-field-label {
transform: translateY(-21px) scale(0.75);
}
@media (min-width: 60rem) {
[data-brand='heydude'] .header-wrapper {
min-height: 72px;
transition: background .125s linear;
background-color: var(--color-base-10, #F2F0EB);
}
[data-brand='heydude'] .global-viewport {
background: var(--color-primary-light);
}
[data-brand='heydude'] .global-viewport[data-nav-mode*='nav-'] .header-wrapper {
background-color: transparent;
}
[data-brand='heydude'] .global-viewport[data-nav-mode*='nav-'] .header-wrapper.hovering {
background-color: var(--color-base-10, #F2F0EB);
}
[data-brand='heydude'] .nav-main-menu {
top: 72px;
}
[data-brand='heydude'] .header-wrapper-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
margin: 0 40px;
}
}
@media (min-width: 75rem) {
[data-brand='heydude'] .nav-main-menu {
top: 72px;
}
}
@media (min-width: 120rem) {
[data-brand='heydude'] .header-wrapper-inner {
margin: 0 auto;
}
}
[data-brand='heydude'] #banner-react-container {
position: relative;
z-index: 100;
}
@media (max-width: 48rem) {
[data-brand='heydude'] #banner-react-container {
z-index: -1;
}
}
.header-wrapper-inner {
display: flex;
align-items: stretch;
max-width: 90rem;
margin: 0 auto;
}
[data-brand='heydude'] .header-wrapper-inner {
max-width: 120rem;
}
.header_search-button {
align-items: center;
border-radius: 50%;
display: flex;
justify-content: center;
position: relative;
padding: var(--size-spacing-half-x);
line-height: 1.1;
&:hover {
background: var(--color-purple-10n);
}
svg {
min-width: 24px;
min-height: 24px;
}
}
.autocomplete_search-button {
padding: 10px;
svg {
cursor: pointer !important;
min-width: var(--size-spacing-one-and-a-half-x);
height: var(--size-spacing-one-and-a-half-x);
}
}
.autocomplete_input-container {
background-color: var(--color-base-0);
border: 1px solid var(--color-blue-60n);
border-radius: var(--size-spacing-eighth-x);
line-height: var(--size-spacing-one-x);
color: var(--color-base-100);
min-height: 2.75em;
position: relative;
overflow: hidden;
display: flex;
flex: 1 1 auto;
max-width: 300px;
min-width: 150px;
}
.autocomplete_input-wrapper {
background-color: var(--color-base-0);
border-radius: var(--size-spacing-eighth-x);
line-height: var(--size-spacing-one-x);
color: var(--color-base-100);
min-height: 2.75em;
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
padding: .875em var(--size-spacing-half-x);
width: 100%;
height: 2.75em;
input {
width: calc(100% - 2px);
height: calc(100% - 2px);
position: absolute;
top: 1px;
left: 1px;
font-size: var(--font-size-500);
border: none;
border-radius: 0;
outline: 0 !important;
box-shadow: none !important;
padding: .875em var(--size-spacing-half-x);
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
font: inherit;
background-color: var(--color-base-0);
&:placeholder {
color: #d4d4d4;
}
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
}
[data-brand='heydude'] .header-account-menu {
display: 'block';
transition: 'max-height 0.3s ease-in-out';
visibility: 'auto';
position: absolute;
z-index: 100;
right: 0;
min-width: 225px;
background-color: var(--color-blue-20n);
font-size: var(--font-size-500);
overflow-y: hidden;
max-height: 0;
white-space: nowrap;
}
[data-brand='heydude'] .header-account-menu[data-open="true"] {
max-height: 300px;
}
[data-brand='heydude'] .header-account-menu__list {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[data-brand='heydude'] .header-account-menu__item {
display: flex;
text-transform: uppercase;
position: relative;
color: var(--color-base-100);
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-three-quarters-x) var(--size-spacing-three-quarters-x);
border-top: 1px solid var(--color-base-0);
line-height: 1.1;
font-weight: var(--font-weight-bold);
width: 100%;
}
[data-brand='heydude'] .header-account-menu__item:hover,
[data-brand='heydude'] .header-account-menu__item:focus {
color: var(--color-primary-60);
text-decoration: underline;
background: var(--color-blue-20n);
}
[data-brand='heydude'] .header-account-menu__item:focus {
outline: 3px solid var(--color-blue-40n);
outline-offset: -3px;
}
.order-history__container {
margin: 0 auto;
max-width: var(--size-breakpoint-xl);
}
.order-history__title {
color: var(--color-base-100);
font-size: var(--size-spacing-one-and-a-half-x);
margin: var(--size-spacing-one-x) 0;
padding: 0 0 var(--size-spacing-one-x);
}
.order-history__copy {
margin: 0 0 var(--size-spacing-one-x);
}
.order-history__return-link {
margin: 0 0 var(--size-spacing-one-x);
padding: 0 0 var(--size-spacing-one-x);
}
.order-history__menu {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: var(--size-spacing-one-and-a-half-x);
}
.order-history__total-orders {
font-weight: var(--font-weight-bold);
text-align: right;
}
.order-history__sort-dropdown {
display: flex;
flex-direction: column;
position: relative;
}
.order-history__sort-label {
color: var(--color-blue-60n);
font-size: var(--size-spacing-three-quarters-x);
margin-bottom: var(--size-spacing-quarter-x);
pointer-events: none;
}
.order-history__sort-select {
background-color: var(--color-base-0);
border: 1px solid #ccc;
border-radius: var(--size-spacing-quarter-x);
color: #333;
cursor: pointer;
font-size: 0.9rem;
padding: 6px var(--size-spacing-quarter-x);
}
.order-history__list {
list-style: none;
margin: 0;
padding: 0;
}
.order-history__list-item {
background-color: var(--color-blue-10n);
margin-bottom: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x);
}
.order-history__list-item-top {
align-items: flex-start;
display: flex;
justify-content: space-between;
margin-bottom: var(--size-spacing-one-x);
}
.order-history__list-item-bottom {
display: flex;
justify-content: space-between;
margin-top: var(--size-spacing-one-x);
}
.order-history__bottom-column {
display: flex;
flex: 1 1 33.33%;
flex-direction: column;
min-width: 0;
}
.order-history__column-heading {
font-size: var(--size-spacing-one-x);
font-weight: var(--font-weight-regular);
margin-bottom: var(--size-spacing-half-x);
width: 120px;
}
.order-history__column-content {
font-size: var(--size-spacing-one-x);
font-weight: var(--font-weight-bold);
}
.order-history__item-links {
font-size: var(--size-spacing-one-x);
margin-bottom: var(--size-spacing-quarter-x);
}
.order-history__divider {
background-color: var(--color-blue-20n);
height: 1px;
margin: var(--size-spacing-half-x) 0;
width: 100%;
}
.order-history__text-red {
color: var(--color-red-60);
font-weight: var(--font-weight-bold);
}
.order-history__total-heading {
font-size: var(--size-spacing-one-x);
font-weight: var(--font-weight-regular);
margin-bottom: var(--size-spacing-half-x);
text-align: right;
}
.order-history__total-content {
font-size: var(--size-spacing-one-x);
font-weight: var(--font-weight-bold);
text-align: right;
}
/* media query for adjusting bottom section elements to stack vertically and align left for smaller viewports */
@media (max-width: 480px) {
.order-history__list-item-bottom {
align-items: stretch;
flex-direction: column;
gap: var(--size-spacing-one-x);
}
.order-history__bottom-column {
margin-bottom: var(--size-spacing-one-x);
width: 100%;
}
.order-history__total-heading {
text-align: left;
}
.order-history__total-content {
text-align: left;
}
}
.order-history__mobile-button {
display: flex;
justify-content: center;
width: 100%;
}
.order-history__mobile-button > a {
width: 100%;
}
.order-history__sub-list {
flex: auto;
}
.order-history__text-left {
text-align: left;
}
.order-history__detail-row {
align-items: center;
display: flex;
margin-bottom: var(--size-spacing-half-x);
}
.order-history__detail-label {
flex-shrink: 0;
font-size: var(--size-spacing-one-x);
white-space: nowrap;
width: 150px;
}
.order-history__detail-value {
flex-grow: 1;
font-size: var(--size-spacing-one-x);
font-weight: var(--font-weight-bold);
}
.order-history__no-orders-content {
margin-top: var(--size-spacing-four-x);
margin-bottom: var(--size-spacing-four-x);
text-align: center;
}
.order-history__no-orders-block {
display: block;
margin-top: var(--size-spacing-one-and-a-half-x);
margin-bottom: var(--size-spacing-one-x);
}
[data-brand='heydude'] {
--sf-product-list-refinement-title-font-family: var(--font-family-decorative);
--sf-product-list-refinement-title-font-size: var(--font-size-900);
--sf-product-list-refinement-title-line-height: 1.25;
--sf-product-list-refinement-title-text-transform: uppercase;
}
[data-brand='crocs'] {
--sf-product-list-refinement-title-font-family: inherit;
--sf-product-list-refinement-title-font-size: var(--font-size-500);
--sf-product-list-refinement-title-line-height: 1.41;
--sf-product-list-refinement-title-text-transform: none;
}
.sf-product_list-refinement--title {
align-items: center;
border-top: 1px solid var(--color-purple-10n);
cursor: pointer;
display: flex;
font-family: var(--sf-product-list-refinement-title-font-family);
font-size: var(--sf-product-list-refinement-title-font-size);
justify-content: space-between;
line-height: var(--sf-product-list-refinement-title-line-height);
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
text-transform: var(--sf-product-list-refinement-title-text-transform);
}
.sf-product_list-refinement--title-icon {
font-size: var(--font-size-500);
.sf-product-list-refinement-title-icon-close {
display: none;
}
}
.is-closed .sf-product_list-refinement--title-icon {
.sf-product-list-refinement-title-icon-open{
display: none;
}
.sf-product-list-refinement-title-icon-close {
display: inline-block;
}
}
.sf-product_list-refinement--title-content p {
display: inline-block;
padding: 7px 0;
}
.sf-product_list-refinement--title-content span {
font-size: var(--font-size-300);
line-height: 1.333;
letter-spacing: 0.4px;
color: var(--color-base-100);
display: none;
}
.is-closed .sf-product_list-refinement--title-content span {
display: block;
}
/* global vars */
:root {
--sf-product-list-padding: var(--size-spacing-one-and-a-half-x) 40px
var(--size-spacing-two-x) 40px;
--sf-product-list-padding-mobile: var(--size-spacing-one-x)
var(--size-spacing-one-x) 40px;
--sf-product-list-filter-gap: var(--size-spacing-half-x);
--sf-product-list-filter-value-wrapper-width-quick-filter: calc(242px - 2px - (2 * var(--sf-product-list-quick-filter-dropdown-wrapper-padding)));
--sf-product-list-filter-item-background-color: var(--color-base-0);
--sf-product-list-filter-item-border-color: var(--color-base-0);
--sf-product-list-filter-item-padding: var(--size-spacing-one-x);
--sf-product-list-filter-item-height: 104px;
--sf-product-list-heading-text-transform: none;
}
[data-brand='heydude'] {
--sf-product-list-filter-item-label-text-color: var(--color-base-100);
--sf-product-list-quick-filter-chip-border-color: transparent;
--sf-product-list-quick-filter-chip-background-color: transparent;
--sf-product-list-quick-filter-chip-background-color-hover: var(
--color-blue-40n
);
--sf-product-list-quick-filter-chip-font-size: var(--font-size-400);
--sf-product-list-quick-filter-chip-gap: var(--size-spacing-half-x);
--sf-product-list-quick-filter-chip-padding: 6px var(--size-spacing-three-quarters-x);
--sf-product-list-gender-tabs-box-shadow: none;
--sf-product-list-gender-tabs-font-weight: var(--font-weight-bold);
--sf-product-list-heading-text-transform: uppercase;
.sf-product-list-filter-style {
--sf-product-list-filter-value-wrapper-width-quick-filter: calc(360px - 2px - (2 * var(--sf-product-list-quick-filter-dropdown-wrapper-padding)));
}
.sf-product-list-filter-color {
--sf-product-list-filter-item-background-color: var(--color-blue-05n);
--sf-product-list-filter-value-wrapper-width-quick-filter: calc(360px - 2px - (2 * var(--sf-product-list-quick-filter-dropdown-wrapper-padding)));
}
.sf-product_list__breadcrumbs {
font-weight: var(--font-weight-bold);
}
.sf-product-list-quick-filter-chip {
--sf-product-list-quick-filter-chip-padding: 6px 10px;
}
}
[data-brand='crocs'] {
--sf-product-list-filter-item-label-text-color: var(--color-blue-60n);
--sf-product-list-quick-filter-chip-border-color: var(--color-blue-20n);
--sf-product-list-quick-filter-chip-background-color: var(--color-base-0);
--sf-product-list-quick-filter-chip-background-color-hover: var(
--color-primary-30
);
--sf-product-list-quick-filter-chip-font-size: var(--font-size-300);
--sf-product-list-quick-filter-chip-gap: var(--size-spacing-half-x);
--sf-product-list-quick-filter-chip-padding: 6px var(--size-spacing-three-quarters-x);
--sf-product-list-gender-tabs-box-shadow: inset 0 -2px 0 0 var(--color-blue-20n);
--sf-product-list-gender-tabs-font-weight: var(--font-weight-regular);
.sf-product-list-filter-color {
--sf-product-list-filter-value-wrapper-width-quick-filter: calc(300px - 2px - (2 * var(--sf-product-list-quick-filter-dropdown-wrapper-padding)));
}
.sf-product-list-filter-style {
--sf-product-list-filter-gap: var(--size-spacing-quarter-x);
--sf-product-list-filter-value-wrapper-width-quick-filter: calc(250px - 2px - (2 * var(--sf-product-list-quick-filter-dropdown-wrapper-padding)));
}
.sf-product-list-filter-value-wrapper {
&.sf-product-list-filter-value-wrapper-panel {
&.sf-product-list-filter-jibbitz,
&.sf-product-list-filter-style {
.sf-product-list-filter-value-list {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
}
.sf-product_list {
display: flex;
flex-direction: column;
margin-inline: auto;
padding: var(--sf-product-list-padding-mobile);
row-gap: var(--size-spacing-one-x);
width: 100%;
.categoryReviews:not(:has(*)),
.react-plp-below-grid-asset:not(:has(*)),
#plp-react-seo:not(:has(*)),
#plp-react-top:not(:has(*)) {
display: none;
}
}
.sf-product_list__content-top {
h1 {
font-weight: var(--font-weight-bold);
font-family: var(--font-family-decorative);
font-size: var(--font-size-1100);
color: var(--color-base-100);
line-height: var(--font-size-1000);
text-transform: var(--sf-product-list-heading-text-transform);
@media (min-width: 768px) {
font-size: var(--font-size-1100);
line-height: var(--font-size-1200);
}
}
}
#plp-react-top {
.swiper-frame {
padding: 0;
swiper-container {
padding: 0;
}
.ok-tile__block {
padding-bottom: 0;
}
}
}
.sf-product_list__product-grid-wrapper {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
.ok-card {
height: 100%;
}
}
.sf-product_list__category-subtitle {
font-weight: normal;
line-height: 1.25;
color: var(--color-base-100);
font-size: var(--font-size-600);
}
.sf-product_list__category-paragraph {
font-size: var(--font-size-500);
line-height: 1.5;
font-size: var(--font-size-600);
}
/* Chip Styles */
/* Chip */
.sf-product-list-quick-filter-chip {
align-items: center;
background-color: var(--sf-product-list-quick-filter-chip-background-color);
border: 1px solid var(--sf-product-list-quick-filter-chip-border-color);
border-radius: 50px;
color: var(--color-base-100);
display: inline-flex;
font-size: var(--sf-product-list-quick-filter-chip-font-size);
gap: var(--sf-product-list-quick-filter-chip-gap);
padding: var(--sf-product-list-quick-filter-chip-padding);
@media (min-width: 768px) {
font-size: var(--font-size-400);
line-height: var(--font-size-400);
}
&:hover {
background-color: var(
--sf-product-list-quick-filter-chip-background-color-hover
);
}
&:focus-visible {
border-color: var(--color-primary-60);
outline: none;
}
&[data-state='open'] {
border-bottom-color: transparent;
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
pointer-events: none;
.ok-icon {
transform: rotate(180deg);
}
}
.ok-icon {
height: 14px;
width: 14px;
}
}
@media screen and (min-width: 1200px) {
.sf-product-list-quick-filter-chip {
&[data-state='open'] {
pointer-events: auto;
}
}
}
/* Clear Button */
.sf-product-list-toolbar-clear-filter-button {
color: var(--color-base-100);
font-size: var(--font-size-400);
line-height: 1.286;
text-decoration: underline;
text-underline-offset: 17%;
&:hover {
text-decoration: none;
}
}
.sf-product-list-toolbar-clear-filter-disabled-button {
display: none;
}
/* Refinement Styles */
/* refinement wrapper */
/* include filter and panel/quick filter based overrides here */
.sf-product-list-filter-value-wrapper {
/* panel/quick filter specific overrides */
&.sf-product-list-filter-value-wrapper-panel {
.sf-product-list-filter-value-list {
padding-bottom: var(--size-spacing-one-x);
}
}
/* filter type specific overrides */
&.sf-product-list-filter-size {
--sf-product-list-filter-item-border-color: var(--color-blue-20n);
--sf-product-list-filter-item-padding: 9px 0;
--sf-product-list-filter-item-height: 36px;
.sf-product-list-filter-item-label {
align-items: center;
display: flex;
justify-content: center;
padding: 0;
}
.sf-product-list-filter-value-item.sf-product-list-filter-value-item-selected {
.sf-product-list-filter-item-label {
color: white;
background: var(--color-base-100);
}
}
.active-gender-C
.sf-product-list-filter-value-item:has([data-gender='M']),
.active-gender-C
.sf-product-list-filter-value-item:has([data-gender='W']) {
display: none;
}
.active-gender-W
.sf-product-list-filter-value-item:has([data-gender='M']),
.active-gender-W
.sf-product-list-filter-value-item:has([data-gender='J']),
.active-gender-W
.sf-product-list-filter-value-item:has([data-gender='C']) {
display: none;
}
.active-gender-M
.sf-product-list-filter-value-item:has([data-gender='W']),
.active-gender-M
.sf-product-list-filter-value-item:has([data-gender='J']),
.active-gender-M
.sf-product-list-filter-value-item:has([data-gender='C']) {
display: none;
}
}
&.sf-product-list-filter-style {
--sf-product-list-filter-item-border-color: var(--color-purple-20n);
}
&.sf-product-list-filter-color {
--sf-product-list-filter-item-height: 48px;
--sf-product-list-filter-item-padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
.sf-product-list-filter-item-label-text {
flex-direction: row;
gap: var(--size-spacing-three-quarters-x);
}
}
&.sf-product-list-filter-jibbitable {
padding: var(--size-spacing-three-quarters-x) var(--size-spacing-one-x);
}
&.sf-product-list-filter-jibbitz {
--sf-product-list-filter-item-border-color: var(--color-purple-20n);
.sf-product-list-filter-item-label {
align-items: center;
display: flex;
justify-content: center;
}
.sf-product_list-refinement-refinement-jibbitz--item {
align-items: center;
display: flex;
gap: 5px;
justify-content: center;
}
.sf-product_list-refinement-refinement-jibbitz--item img {
height: auto;
display: block;
width: 19px;
}
}
/* filter and panel/quick filter combo overrides */
&.sf-product-list-filter-value-wrapper-panel {
&.sf-product-list-filter-size {
.sf-product-list-filter-item-label {
width: 48px;
height: 48px;
}
.sf-product-list-filter-value-list {
grid-template-columns: repeat(6, 1fr);
gap: var(--size-spacing-half-x);
}
}
&.sf-product-list-filter-style {
.sf-product-list-filter-item-label {
padding-block: 9px;
}
}
}
&.sf-product-list-filter-value-wrapper-quick-filter {
&.sf-product-list-filter-size {
display: flex;
flex-direction: column;
row-gap: var(--size-spacing-three-quarters-x);
.sf-product-list-filter-value-list {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
.sf-product_list-filter-size-variations--gender-tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: var(--size-spacing-three-quarters-x);
button {
background: none;
border: none;
border-radius: 0;
box-shadow: var(--sf-product-list-gender-tabs-box-shadow);
color: var(--color-base-100);
display: inline-block;
font-family: inherit !important;
font-size: var(--font-size-400) !important;
font-weight: var(--sf-product-list-gender-tabs-font-weight);
letter-spacing: normal !important;
line-height: 1.4;
padding: 6px 9px !important;
text-transform: none !important;
&:hover {
background: none !important;
box-shadow: inset 0 -2px 0 0 var(--color-base-100);
}
&[aria-selected='true'] {
box-shadow: inset 0 -2px 0 0 var(--color-base-100);
}
}
}
.sf-product-list-filter-value-wrapper-quick-filter {
width: var(--sf-product-list-filter-value-wrapper-width-quick-filter);
}
/* refinement list wrapper */
.sf-product-list-filter-value-list {
grid-template-columns: 1fr 1fr;
display: grid;
gap: var(--sf-product-list-filter-gap);
}
.sf-product-list-filter-value-list-checkbox {
.sf-product-list-filter-item-count {
display: block;
}
}
/* fitler item */
.sf-product-list-filter-value-item {
&.sf-product-list-filter-value-item-selected {
.sf-product-list-filter-item-label {
--sf-product-list-filter-item-border-color: var(--color-base-100);
}
}
}
.sf-product-list-filter-item-label {
background-color: var(--sf-product-list-filter-item-background-color);
border: 1px solid var(--sf-product-list-filter-item-border-color);
border-radius: var(--size-spacing-quarter-x);
cursor: pointer;
display: block;
height: var(--sf-product-list-filter-item-height);
padding: var(--sf-product-list-filter-item-padding);
&:hover {
box-shadow: var(--elevation-light-200);
}
}
.sf-product-list-filter-item-label-checkbox {
column-gap: var(--size-spacing-half-x);
cursor: pointer;
display: grid;
grid-template-columns: auto auto auto 1fr;
grid-template-rows: auto auto;
position: relative;
&:has(.sf-product-list-filter-item-checkbox:checked) {
&:after {
content: '';
position: absolute;
left: 8px;
top: 4px;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
&:before {
content: '';
border: 1px solid #a2a7a9;
border-radius: 4px;
flex-shrink: 0;
grid-column: 1;
grid-row: 1;
height: 20px;
width: 20px;
}
}
.sf-product-list-filter-item-label-text {
align-items: center;
display: flex;
flex-direction: column;
> svg {
filter: grayscale(100%);
height: 45px;
width: 45px;
}
> span {
color: var(--sf-product-list-filter-item-label-text-color);
flex-shrink: 0;
line-height: 1.25;
text-align: center;
overflow-wrap: anywhere;
}
}
.sf-product-list-filter-item-label-text-checkbox {
display: grid;
grid-column: 2 / -1;
grid-row: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
line-height: 1.25;
row-gap: var(--size-spacing-half-x);
> span:nth-child(1) {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
grid-column: 2;
}
> span:nth-child(2) {
color: #5c5a58;
grid-column: 2 / -1;
}
}
.sf-product-list-filter-item-count,
.sf-product-list-filter-item-checkbox {
display: none;
}
.sf-product-list-filter-item-count-checkbox {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
grid-column: 4;
grid-row: 1;
}
@media (min-width: 1200px) {
.sf-product_list {
max-width: var(--size-breakpoint-lg-desktop);
padding: var(--sf-product-list-padding);
}
.sf-product-list-toolbar-clear-filter {
margin-left: auto;
}
}
.sf-product_list-refinement-size-variations--item {
display: flex;
position: relative;
}
.sf-product_list-refinement-size-variations--item a,
.sf-product_list-refinement-size-variations--item button {
display: block;
width: 70px;
height: 36px;
outline-offset: -1px;
margin: 5px 2px;
outline: 1px solid var(--color-purple-20n);
background-color: var(--color-base-0);
overflow-wrap: break-word;
color: inherit;
border-radius: 3px;
text-decoration: none !important;
pointer-events: none;
}
.sf-product_list-refinement-size-variations--item:hover a,
.sf-product_list-refinement-size-variations--item:hover button {
background-color: var(--color-blue-10n);
}
.sf-product_list-refinement-size-variations--gender-tabs {
display: flex;
flex-wrap: wrap;
margin: 0 20px 5px;
}
.sf-product_list-refinement-size-variations--gender-tabs button {
display: inline-block;
width: auto;
height: auto;
font-weight: var(--font-weight-bold);
line-height: 1.4;
text-align: center;
margin: 6px 0;
border-radius: 0;
cursor: pointer;
padding: 5px;
font-size: var(--font-size-500);
color: var(--color-base-100);
border: none;
background-color: var(--color-primary-10) !important;
}
.sf-product_list-refinement-size-variations--gender-tabs button:hover {
background-color: var(--color-primary-10);
}
.sf-product_list-refinement-size-variations--gender-tabs button {
margin-right: 7px;
}
[data-brand="heydude"] .sf-product_list-refinement-size-variations--gender-tabs button {
padding: var(--size-spacing-quarter-x);
font-size: var(--font-size-500);
color: var(--color-base-100);
background-color: var(--color-primary-10);
font-family: var(--font-family-sans);
letter-spacing: normal;
text-transform: none;
margin-top: 0;
}
.sf-product_list-refinement-size-variations--gender-tabs button[aria-selected="true"] {
box-shadow: inset 0 -2px 0 0 var(--color-base-100);
}
.sf-product_list-refinement-size-variations li.selected a,
.sf-product_list-refinement-size-variations li.selected button {
outline: 2px solid var(--color-primary-60);
outline-offset: -2px;
}
.sf-product_list-refinement-size-variations li a,
.sf-product_list-refinement-size-variations li button {
display: block;
padding: 10px 5px;
text-align: center;
}
[data-brand="heydude"] .sf-product_list-refinement-size-variations li a,
[data-brand="heydude"] .sf-product_list-refinement-size-variations li button {
font-size: var(--font-size-500);
}
.active-gender-C [data-gender="M"],
.active-gender-C [data-gender="W"],
.active-gender-C [data-gender="A"] {
display: none;
}
.active-gender-A [data-gender="M"],
.active-gender-A [data-gender="J"],
.active-gender-A [data-gender="C"] {
display: none;
}
.active-gender-W [data-gender="M"],
.active-gender-W [data-gender="J"],
.active-gender-W [data-gender="C"],
.active-gender-W [data-gender="A"] {
display: none;
}
.active-gender-M [data-gender="W"],
.active-gender-M [data-gender="J"],
.active-gender-M [data-gender="C"],
.active-gender-M [data-gender="A"] {
display: none;
}
.sf-product_list-refinement-size--items-header {
line-height: 1.5;
font-size: 0.875em;
padding-bottom: var(--size-spacing-half-x);
padding-left: 15px;
}
.sf-product-list-filter-value-wrapper-quick-filter.sf-product-list-filter-size {
.sf-product_list-refinement-size--items-header {
padding-left: 0;
}
}
.sf-product_list-refinement-refinement-color-swatch-container {
display: flex;
align-items: center;
}
.sf-product_list-refinement-refinement-color-swatch {
width: var(--size-spacing-one-and-a-half-x);
height: var(--size-spacing-one-and-a-half-x);
border-radius: 50%;
background-color: var(--color-purple-20n); /* default if no color is input */
flex-shrink: 0;
}
.sf-product_list-refinement-refinement-color-swatch-white {
background-color: var(--color-base-0);
border: 1px solid var(--color-blue-20n);
}
.sf-product_list-refinement-refinement-color-swatch-yellow {
background-color: #ece816;
}
.sf-product_list-refinement-refinement-color-swatch-lightblue {
background-color: #bad9eb;
}
.sf-product_list-refinement-refinement-color-swatch-orange {
background-color: #fd8204;
}
.sf-product_list-refinement-refinement-color-swatch-pink {
background-color: #ec3691;
}
.sf-product_list-refinement-refinement-color-swatch-red {
background-color: #d70035;
}
.sf-product_list-refinement-refinement-color-swatch-black {
background-color: #000;
}
.sf-product_list-refinement-refinement-color-swatch-gray {
background-color: #9c9c9c;
}
.sf-product_list-refinement-refinement-color-swatch-brown {
background-color: #735023;
}
.sf-product_list-refinement-refinement-color-swatch-purple {
background-color: #7e2e8f;
}
.sf-product_list-refinement-refinement-color-swatch-blue {
background-color: #0971ce;
}
.sf-product_list-refinement-refinement-color-swatch-green {
background-color: #79b800;
}
.sf-product_list-refinement-refinement-color-swatch-neutrals {
background: linear-gradient(180deg, #C5C5C5 0%, #B7AB83 100%);
}
[data-brand='heydude'] {
--sf-product-list-sort-by-label-text-transform-classic-variant: uppercase;
--sf-product-list-sort-by-label-font-family-classic-variant: var(--font-family-decorative);
}
[data-brand='crocs'] {
--sf-product-list-sort-by-label-text-transform-classic-variant: capitalize;
--sf-product-list-sort-by-label-font-family-classic-variant: inherit;
}
.sf-product-list-sort-by {
&.sf-product-list-sort-by-chip-variant {
align-items: center;
background-color: var(--sf-product-list-quick-filter-chip-background-color);
border: 1px solid var(--sf-product-list-quick-filter-chip-border-color);
border-radius: 50px;
color: var(--color-base-100);
display: inline-flex;
font-size: var(--sf-product-list-quick-filter-chip-font-size);
gap: var(--sf-product-list-quick-filter-chip-gap);
padding-inline: var(--size-spacing-three-quarters-x);
&:hover {
background-color: var(--sf-product-list-quick-filter-chip-background-color-hover);
}
&:focus-visible {
border-color: var(--color-primary-60);
outline: none;
}
.sf-product-list-sort-by-select {
align-items: center;
display: flex;
font-weight: var(--font-weight-bold);
gap: var(--sf-product-list-quick-filter-chip-gap);
padding-block: 6px;
.ok-icon {
height: 14px;
width: 14px;
}
}
label {
text-transform: capitalize;
}
}
&.sf-product-list-sort-by-classic-variant {
display: flex;
flex-direction: column;
gap: var(--size-spacing-three-quarters-x);
margin-bottom: var(--size-spacing-one-x);
.sf-product-list-sort-by-select {
align-items: center;
background-color: var(--color-base-0);
border: 1px solid var(--color-blue-60n);
display: flex;
justify-content: space-between;
padding-inline: var(--size-spacing-three-quarters-x);
.ok-icon {
height: 36px;
width: 36px;
}
}
label {
font-family: var(--sf-product-list-sort-by-label-font-family-classic-variant);
font-size: var(--font-size-900);
letter-spacing: 1.2px;
text-transform: var(--sf-product-list-sort-by-label-text-transform-classic-variant);
}
}
}
.sf-product-list-sort-by-content {
background-color: white;
box-shadow:
0px 10px 38px -10px rgba(22, 23, 24, 0.35),
0px 10px 20px -15px rgba(22, 23, 24, 0.2);
width: max(200px, var(--radix-select-trigger-width));
}
.sf-product-list-sort-by-items {
display: flex;
flex-direction: column;
}
.sf-product-list-sort-by-item {
font-size: 14px;
line-height: 1;
color: #333;
border-radius: 3px;
display: flex;
align-items: center;
padding: 10px 5px;
position: relative;
user-select: none;
cursor: pointer;
&[data-state='checked'],
&:hover {
background-color: var(--sf-product-list-quick-filter-chip-background-color-hover);
}
}
[data-brand='heydude'] {
--sf-product-list-selected-filters-wrapper-gap: var(--size-spacing-half-x);
--sf-product-list-selected-filters-list-gap: var(--size-spacing-half-x);
--sf-product-list-selected-filters-label-font-weight: var(--font-weight-bold);
--sf-product-list-selected-filter-border-color: transparent;
--sf-product-list-selected-filter-hover-bg-color: var(--color-blue-40n);
--sf-product-list-selected-filter-padding: var(--size-spacing-half-x) 32px var(--size-spacing-half-x) 8px;
--sf-product-list-selected-filter-padding-right: 8px;
--sf-product-list-selected-filter-font-size: var(--font-size-400);
}
[data-brand='crocs'] {
--sf-product-list-selected-filters-wrapper-gap: var(--size-spacing-quarter-x);
--sf-product-list-selected-filters-list-gap: var(--size-spacing-quarter-x);
--sf-product-list-selected-filters-label-font-weight: inherit;
--sf-product-list-selected-filter-border-color: var(--color-blue-20n);
--sf-product-list-selected-filter-hover-bg-color: var(--color-primary-30);
--sf-product-list-selected-filter-padding: var(--size-spacing-half-x) calc(var(--size-spacing-three-quarters-x) + 17px) var(--size-spacing-half-x) var(--size-spacing-three-quarters-x);
--sf-product-list-selected-filter-padding-right: var(--size-spacing-three-quarters-x);
--sf-product-list-selected-filter-font-size: var(--font-size-300);
}
.sf-product-list-selected-filters-wrapper {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--sf-product-list-selected-filters-wrapper-gap);
}
.sf-product-list-selected-filters {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--sf-product-list-selected-filters-list-gap);
&.sf-product-list-no-selected-filters {
display: none;
}
}
.sf-product-list-selected-filters-label {
color: var(--color-base-100);
font-size: var(--font-size-400);
font-weight: var(--sf-product-list-selected-filters-label-font-weight);
line-height: 1.286;
}
.sf-product-list-selected-filter {
align-items: center;
background-color: var(--color-base-0);
border: 1px solid var(--sf-product-list-selected-filter-border-color);
border-radius: 50px;
color: var(--color-base-100);
display: flex;
font-size: var(--sf-product-list-selected-filter-font-size);
gap: var(--sf-product-list-selected-filters-list-gap);
padding: var(--sf-product-list-selected-filter-padding);
position: relative;
&:hover {
background-color: var(--sf-product-list-selected-filter-hover-bg-color);
}
&:focus-visible {
outline: none;
}
}
.sf-product-list-selected-filter-delete {
border-radius: 50px;
height: 100%;
left: 0;
padding-right: 12px;
position: absolute;
text-align: right;
width: 100%;
.ok-icon {
height: 14px;
width: 14px;
}
&:focus-visible {
outline: 1px solid var(--color-primary-60);
}
}
.sf-product_list_ca__our-favorites {
display: none;
}
@media (min-width: 960px) {
.sf-product_list_ca__our-favorites {
display: block;
}
.sf-product_list_ca__our-favorites ul {
margin-bottom: 25px;
}
.sf-product_list_ca__our-favorites a {
color: var(--color-primary-60);
display: block;
padding: 15px;
outline: 0;
}
}
.sf-product_list_ca__our-favorites--title {
font-weight: 700;
text-transform: uppercase;
line-height: 1.25;
color: var(--color-base-100);
margin: .625em 0;
font-size: 1.125em;
}
[data-brand='heydude'] {
--sf-product-list-sidebar-close-button-wrapper-background-color: var(--color-base-10);
}
[data-brand='crocs'] {
--sf-product-list-sidebar-close-button-wrapper-background-color: var(--color-blue-10n);
}
.sf-product-list-sidebar-applied-filters {
display: grid;
grid-template-columns: 1fr auto;
padding-block: var(--size-spacing-half-x);
}
.sf-product-list-sidebar-close-button-wrapper {
background-color: var(--sf-product-list-sidebar-close-button-wrapper-background-color);
bottom: 0;
margin-top: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x);
position: sticky;
z-index: 1;
.ok-button {
width: 100%;
}
}
.sf-skeleton {
opacity: 0.3;
background-color: var(--color-blue-20n);
animation-duration: 3s;
animation-name: loading;
animation-iteration-count: infinite;
border-radius: 6px;
margin-bottom: var(--size-spacing-one-x);
}
.sf-skeleton-breadcrumb {
width: 50%;
margin-top: 35px;
margin-bottom: 30px;
height: calc(var(--size-spacing-quarter-x) + var(--size-spacing-one-x));
}
.sf-skeleton-sortby {
margin-bottom: 30px;
height: calc(var(--size-spacing-quarter-x) + var(--size-spacing-one-x));
}
.sf-skeleton-refinement-lifestyle {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(157px, 1fr));
}
@keyframes loading {
0% {
opacity: 0.3;
}
50% {
opacity: 0.7;
}
100% {
opacity: 0.3;
}
}
.sf-product_list__sidebar-flyout-cta {
background: var(--color-base-0);
padding: var(--size-spacing-one-x);
border-top: 1px solid var(--color-purple-20n);
bottom: 0;
position: sticky;
z-index: 1;
margin: 0 calc(var(--size-spacing-one-x) * -1);
}
.sf-product_list__sidebar-flyout-cta .ok-button {
width: 100%;
}
/* brand specific vars and overrides */
[data-brand='heydude'] {
--sf-product-list-quick-filter-chips-gap: var(--size-spacing-quarter-x);
--sf-product-list-quick-filter-chips-gap-mobile: var(--size-spacing-quarter-x);
--sf-product-list-quick-filter-dropdown-wrapper-border-color: var(--color-blue-10n);
--sf-product-list-quick-filter-dropdown-wrapper-border-radius: var(--size-spacing-half-x);
--sf-product-list-quick-filter-dropdown-wrapper-box-shadow: var(--elevation-light-700);
--sf-product-list-quick-filter-dropdown-wrapper-padding: var(--size-spacing-one-x);
}
[data-brand='crocs'] {
--sf-product-list-quick-filter-chips-gap: var(--size-spacing-half-x);
--sf-product-list-quick-filter-chips-gap-mobile: var(--size-spacing-quarter-x);
--sf-product-list-quick-filter-dropdown-wrapper-border-color: var(--color-blue-20n);
--sf-product-list-quick-filter-dropdown-wrapper-border-radius: 0 var(--size-spacing-three-quarters-x) var(--size-spacing-three-quarters-x) var(--size-spacing-three-quarters-x);
--sf-product-list-quick-filter-dropdown-wrapper-box-shadow: none;
--sf-product-list-quick-filter-dropdown-wrapper-padding: var(--size-spacing-half-x);
}
/* quick filter chips */
.sf-product-list-quick-filter-chips {
display: flex;
column-gap: var(--sf-product-list-quick-filter-chips-gap-mobile);
}
/* quick filter dropdown wrapper */
.sf-product-list-quick-filter-dropdown-wrapper {
background-color: var(--color-base-0);
border: 1px solid var(--sf-product-list-quick-filter-dropdown-wrapper-border-color);
border-radius: var(--sf-product-list-quick-filter-dropdown-wrapper-border-radius);
box-shadow: var(--sf-product-list-quick-filter-dropdown-wrapper-box-shadow);
padding: var(--sf-product-list-quick-filter-dropdown-wrapper-padding);
z-index: 1;
}
@media screen and (min-width: 1200px) {
.sf-product-list-quick-filter-chips {
column-gap: var(--sf-product-list-quick-filter-chips-gap);
}
}
[data-brand='heydude'] {
--sf-product-list-toolbar-all-filters-label-display: inline;
.sf-product-list-toolbar {
.sf-product-list-toolbar-row-wrapper:nth-child(2) {
border-top: 1px solid var(--color-blue-40n);
padding-top: var(--size-spacing-one-x);
}
.sf-product-list-sort-by {
display: none;
}
.sf-product-list-toolbar-all-filters {
order: 4;
}
.sf-product-list-quick-filter-chips {
order: 3;
}
}
}
[data-brand='crocs'] {
--sf-product-list-toolbar-all-filters-label-display: none;
.sf-product-list-toolbar {
.sf-product-list-toolbar-row-wrapper:nth-child(1) {
container-type: inline-size;
display: grid;
grid-template-columns: auto auto 1fr;
position: relative;
}
.sf-product-list-toolbar-all-filters,
.sf-product-list-quick-filter-chips {
grid-row: 3;
}
.sf-product-list-sort-by {
grid-column: 1 / -1;
grid-row: 2;
margin-bottom: var(--size-spacing-one-x);
margin-left: auto;
&:after {
background-color: var(--color-blue-40n);
content: '';
height: 1px;
left: calc(50% - 50cqw);
margin-top: 60px;
position: absolute;
width: 100cqw;
}
}
.react-category-refinement-asset {
grid-column: 1 / -1;
grid-row: 1;
}
}
}
.sf-product-list-toolbar {
display: flex;
flex-direction: column;
padding-top: var(--size-spacing-one-x);
row-gap: var(--size-spacing-one-x);
.react-category-refinement-asset:not(:has(*)) {
display: none;
}
.sf-product-list-sort-by {
order: 2;
}
}
.sf-product-list-toolbar-row-wrapper {
align-items: center;
column-gap: var(--size-spacing-half-x);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: var(--size-spacing-one-x);
&:nth-child(2) {
align-items: baseline;
flex-wrap: nowrap;
}
&:has(.sf-product-list-toolbar-clear-filter-disabled-button) {
display: none;
}
&:has(.product-filter-toggle) {
min-height: 40px;
}
}
.sf-product-list-toolbar-clear-filter {
flex-shrink: 0;
}
.sf-product-list-toolbar-all-filters {
align-items: center;
background-color: var(--sf-product-list-quick-filter-chip-background-color);
border: 1px solid var(--sf-product-list-quick-filter-chip-border-color);
border-radius: 50px;
color: var(--color-base-100);
display: inline-flex;
flex-shrink: 0;
font-size: var(--sf-product-list-quick-filter-chip-font-size);
gap: var(--sf-product-list-quick-filter-chip-gap);
padding: 6px var(--size-spacing-three-quarters-x);
span {
display: var(--sf-product-list-toolbar-all-filters-label-display);
}
&:hover {
background-color: var(
--sf-product-list-quick-filter-chip-background-color-hover
);
}
&:focus-visible {
border-color: var(--color-primary-60);
outline: none;
}
}
.react-category-refinement-asset {
border-bottom: 1px solid var(--color-blue-40n);
order: 1;
padding-bottom: var(--size-spacing-one-x);
width: 100%;
}
@media screen and (min-width: 1200px) {
[data-brand='heydude'] {
.sf-product-list-toolbar {
.sf-product-list-toolbar-row-wrapper:nth-child(2) {
border-top: none;
padding-top: 0;
}
.sf-product-list-toolbar-all-filters {
order: 3;
}
.sf-product-list-quick-filter-chips {
margin-right: auto;
order: unset;
}
.sf-product-list-sort-by {
display: flex;
}
}
}
[data-brand='crocs'] {
.sf-product-list-toolbar {
.sf-product-list-toolbar-row-wrapper:nth-child(1) {
display: flex;
}
.sf-product-list-sort-by {
margin-bottom: 0;
&:after {
content: unset;
}
}
.sf-product-list-toolbar-all-filters {
order: unset;
}
.sf-product-list-quick-filter-chips {
order: unset;
}
}
}
.sf-product-list-toolbar-row-wrapper {
&:nth-child(2) {
align-items: center;
justify-content: normal;
}
}
.sf-product-list-sort-by {
order: unset;
}
.sf-product-list-toolbar {
border-top: 1px solid var(--color-blue-40n);
padding-top: var(--size-spacing-three-quarters-x);
row-gap: var(--size-spacing-half-x);
}
.react-category-refinement-asset {
border-bottom: none;
order: unset;
padding-bottom: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: auto;
}
.sf-product-list-selected-filters-wrapper {
width: auto;
}
}
.password-form__container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: var(--size-breakpoint-sm);
padding: var(--size-spacing-two-x) var(--size-spacing-one-x) var(--size-spacing-two-x) 0;
}
.password-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
padding: var(--size-spacing-one-x) 0;
}
.password-form__success-message {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-sm);
margin-bottom: var(--size-spacing-one-x);
}
.password-form .ok-button {
flex: 0 0 auto;
align-self: flex-end;
}
.password-form__item {
position: relative;
}
.password-form__item:focus-within {
overflow: visible;
}
.password-form__item .ok-icon {
position: absolute;
top: 50%;
right: var(--size-spacing-half-x);
right: var(--size-spacing-half-x);
transform: translateY(-50%);
width: var(--font-size-900);
height: var(--font-size-900);
color: var(--color-brand-80);
}
.password-form__item--input {
border-radius: var(--size-spacing-quarter-x);
border-width: 1px;
color: var(--color-base-100);
font-size: var(--font-size-500);
height: 44px;
padding: var(--size-spacing-half-x);
padding: var(--size-spacing-half-x);
width: 100%;
}
.password-form__item--input:focus {
border-color: var(--color-primary-60);
box-shadow: none;
}
.password-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid;
outline-offset: -1px;
}
.password-form__item--label {
position: absolute;
top: 50%;
left: var(--size-spacing-half-x);
left: var(--size-spacing-half-x);
transform: translateY(-50%);
padding: 0 var(--size-spacing-quarter-x);
padding: 0 var(--size-spacing-quarter-x);
transition: 0.2s;
pointer-events: none;
text-transform: uppercase;
color: var(--color-blue-60n);
}
.password-form__item--label em {
text-transform: lowercase;
}
.password-form__item--input:focus + .password-form__item--label,
.password-form__item--input:not(:placeholder-shown) + .password-form__item--label {
top: calc(var(--size-spacing-quarter-x)*-1);
transform: translateY(0);
font-size: var(--font-size-300);
background: var(--color-base-0);
}
.password-form__item--error .password-form__item--input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.password-form__item--error .password-form__item--label,
.password-form__item--error .ok-icon,
.password-form__error {
color: var(--color-red-60);
}
.my-profile-container {
display: flex;
flex-direction: column;
}
.my-profile-customer__welcome {
text-transform: uppercase;
font-size: var(--font-size-900);
margin: 0 auto var(--size-spacing-four-x);
}
.my-profile__h1 {
font-size: var(--font-size-900);
padding-bottom: var(--size-spacing-one-x);
}
.my-profile__forms-container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
}
.sf-password-reset-request-form__parent {
padding: var(--size-spacing-two-x) var(--size-spacing-one-x);
}
.sf-password-reset-request-form__container {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-and-a-half-x);
max-width: var(--size-breakpoint-sm);
}
.sf-password-reset-request-form {
display: flex;
flex-direction: column;
gap: var(--size-spacing-two-x);
padding: var(--size-spacing-one-x) 0;
}
.sf-password-reset-request-form__success-message {
display: flex;
flex-direction: column;
gap: var(--size-spacing-one-x);
max-width: var(--size-breakpoint-sm);
margin-bottom: var(--size-spacing-one-x);
}
.sf-password-reset-request-form__input-container {
display: flex;
flex-direction: column;
gap: .5rem;
}
.sf-password-reset-request-form__button-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-spacing-one-x);
}
.sf-password-reset-request-form__button-container .ok-button {
width: 100%;
text-transform: capitalize;
}
.sf-password-reset-request-form__item {
position: relative;
}
.sf-password-reset-request-form__item .ok-icon {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
width: var(--font-size-900);
height: var(--font-size-900);
color: var(--color-brand-80);
}
.sf-password-reset-request-form__item--input {
border-radius: 4px;
border-width: 1px;
color: var(--color-base-100);
font-size: var(--font-size-500);
height: 44px;
padding: 0.5rem;
width: 100%;
}
.sf-password-reset-request-form__item--input:focus {
border-color: var(--color-primary-60);
box-shadow: none;
background-color: transparent;
}
.sf-password-reset-request-form__item--input:focus-visible {
outline: var(--color-primary-60) 1px solid;
outline-offset: -1px;
}
.sf-password-reset-request-form__item--label {
position: absolute;
top: 50%;
left: 0.5rem;
background: var(--color-base-0);
transform: translateY(-50%);
padding: 0 0.25rem;
transition: 0.2s;
pointer-events: none;
text-transform: uppercase;
color: var(--color-blue-60n);
}
.sf-password-reset-request-form__item--input:focus + .sf-password-reset-request-form__item--label,
.sf-password-reset-request-form__item--input:not(:placeholder-shown) + .sf-password-reset-request-form__item--label {
top: -0.25rem;
transform: translateY(0);
font-size: var(--font-size-300);
}
.sf-password-reset-request-form__item--error .sf-password-reset-request-form__item--input {
border-color: var(--color-red-60);
box-shadow: none;
outline: var(--color-red-60) 1px solid;
outline-offset: -1px;
color: var(--color-red-60);
}
.sf-password-reset-request-form__item--error .sf-password-reset-request-form__item--label,
.sf-password-reset-request-form__item--error .ok-icon,
.sf-password-reset-request-form__error {
color: var(--color-red-60);
}
@media (min-width: 30.0625rem) {
.sf-password-reset-request-form__button-container {
flex-direction: row;
align-self: flex-end;
}
.sf-password-reset-request-form__button-container .ok-button {
width: unset;
}
}
.site-selector__modal-heading {
font-size: var(--font-size-700);
font-weight: var(--font-weight-bold);
color: var(--color-black);
margin-top: var(--size-spacing-one-x);
margin-bottom: var(--size-spacing-one-x);
}
.site-selector__modal-message {
font-size: var(--font-size-500);
color: var(--color-gray-700);
text-align: start;
margin-bottom: var(--size-spacing-one-and-a-half-x);
line-height: 1.5;
}
.site-selector__modal-form {
text-align: center;
}
.site-selector__flag {
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
margin-right: var(--size-spacing-one-x);
}
.site-selector__flag--icon {
width: 44px;
height: 33px;
border: none;
outline: 1px solid var(--color-purple-20n);
outline-offset: 1px;
background-color: var(--color-blue-10n);
}
.site-selector__flag--default {
width: 44px;
height: 33px;
display: inline-block;
outline: 1px solid var(--color-purple-20n);
outline-offset: 1px;
background-color: var(--color-blue-10n);
}
.site-selector__region {
margin-bottom: var(--size-spacing-one-x);
}
.site-selector__region-heading {
font-size: var(--font-size-600);
font-weight: var(--font-weight-bold);
margin-bottom: var(--size-spacing-one-x);
padding-left: var(--size-spacing-one-x);
}
.site-selector__region-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
list-style-type: none;
margin: 0;
padding: 0;
}
@media (min-width: 30.0625rem) {
.site-selector__region-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 48rem) {
.site-selector__region-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 60rem) {
.site-selector__region-list {
grid-template-columns: repeat(4, 1fr);
}
}
.site-selector__region-item {
padding: var(--size-spacing-one-x);
}
.site-selector__region-item .ok-link {
text-align: left;
}
.react-test-components__header,
.react-test-components__wrapper:not(.react-test-components__wrapper--live) {
padding: var(--size-spacing-two-x) var(--size-spacing-two-x) var(--size-spacing-four-x);
}
.react-test-components__header-heading {
font-size: var(--font-size-900);
margin-bottom: var(--size-spacing-one-x);
}
.react-test-components__header-select {
display: block;
margin-top: var(--size-spacing-half-x);
}
.react-test-components__error {
color: var(--color-red-60);
}
.react-test-components__wrapper:has(> .ok-tile) {
display: flex;
flex-wrap: wrap;
gap: var(--size-spacing-one-x);
}