.header .contents { display: contents; } .header-section { --header-column-gap: 24px; --header-column-gap-mobile: 8px; --header-background: var(--color-background, 255, 255, 255); --header-color-text: var(--color-text, 0, 0, 0); } .header-section.transparent { position: absolute; width: 100%; background: linear-gradient(180deg, rgb(0 0 0 / 60%) 0%, rgb(22 19 19 / 0%) 100%); --header-transparent-color-text: 255, 255, 255; } .header-section.transparent::after { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: block; width: 100%; height: 0; content: ""; background-color: rgb(var(--header-background)); transition: height 0.1s ease-in; } .header-section.transparent:hover { --header-transparent-color-text: var(--header-color-text); } .header-section.transparent:hover::after { height: 100%; } .theme-sticky-header--sticky .header-section.transparent { position: relative; --header-transparent-color-text: var(--header-color-text); } .header-section { --header-nav-dropdown-menu-z-index: 2; --header-nav-dropdown-panel-z-index: 4; position: relative; } .header-section .full-screen-width { max-width: 100%; } .header-section.divider { border-block-end: 1px solid rgb(var(--color-entry-line)); } .header__container { position: relative; z-index: 1; background-color: rgba(var(--header-background), 1); } .transparent .header__container { background-color: rgba(var(--header-background), 0); } .theme-sticky-header--sticky .transparent .header__container { background-color: rgba(var(--header-background), 1); } .header__container-top { position: relative; box-sizing: content-box; } .header__container-top-wrap { position: relative; display: grid; grid-template: "action-bar-left nav logo action-bar-right"; grid-template-rows: auto; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--header-column-gap); align-items: center; justify-content: space-between; margin: 0 auto; } .header__container-top-wrap[layout$="_left_menu"] .header__container-top-wrap theme-nav-bar .header-nav { margin-inline-start: calc(var(--header-column-gap) * -1); } @media (min-width: 960px) { .header__container-top-wrap[layout^="center_logo_"] .header__container-top-wrap .header__logo-text { text-align: center; } } @media (min-width: 960px) { .header__container[layout="center_logo_left_menu"] .header__container-top-wrap .header-nav { margin-inline-start: calc(var(--header-column-gap) * -1); } } .header__container[layout="left_logo_wrap_menu"] .header__container-top-wrap { grid-template: "logo action-bar-right"; grid-template-columns: auto 1fr; } @media (min-width: 960px) { .header__container[layout="left_logo_wrap_menu"] .header__container-top-wrap .header__logo { justify-content: flex-start; } .header__container[layout="left_logo_wrap_menu"] .header__container-top-wrap .header-action-bar.right { width: 100%; } .header__container[layout="left_logo_wrap_menu"] .header__container-top-wrap .header-action-bar.right .header-action-bar__search-bar { margin-inline-end: auto; } } .header__container[layout^="left_logo_left_menu"] .header__container-top-wrap { grid-template-areas: "logo nav action-bar-right"; grid-template-columns: minmax(0, auto) minmax(0, auto) 1fr; } .header__container[layout^="left_logo_center_menu"] .header__container-top-wrap { grid-template-areas: "logo nav action-bar-right"; grid-template-columns: 1fr minmax(0, auto) 1fr; } .header__container[layout="center_logo_wrap_menu"] .header__container-top-wrap { display: flex; } .header__container[layout="center_logo_wrap_menu_2"] .header__container-top-wrap { grid-template: "action-bar-left logo action-bar-right"; grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr); } .header__container[layout="center_logo_wrap_menu_2"] .header__container-top-wrap .header-action-bar.left { width: 100%; } .header__container[layout="center_logo_left_menu"][type="drawer"] .header__container-top-wrap { grid-template-areas: "action-bar-left logo action-bar-right"; grid-template-columns: 1fr minmax(0, auto) 1fr; } .header__container[layout="left_logo_center_menu"][type="drawer"] .header__container-top-wrap { grid-template-areas: "action-bar-left logo nav action-bar-right"; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto) 1fr; } .header__container-bottom { position: relative; z-index: var(--header-nav-dropdown-menu-z-index); display: none; } .header__container-bottom.divider { border-block-start: 1px solid rgb(var(--color-entry-line)); } .header__container[type="drawer"] .header__container-bottom { display: none; } .header__logo { position: relative; z-index: calc(var(--header-nav-dropdown-menu-z-index) + 1); display: flex; grid-area: logo; align-items: center; justify-content: center; order: 20; transform: none; } .header__logo-wrapper { position: relative; display: flex; } .header__logo-link { display: inline-flex; align-items: center; justify-content: center; font-family: Jost, sans-serif; font-size: 30px; white-space: nowrap; } .header__logo-link:not(.button), .header__logo-link:not(.button):hover { color: rgb(var(--header-color-text)); } .header__logo-text { text-align: center; word-break: break-all; white-space: normal; } .header__logo-image { width: var(--desktop-size); height: auto; } @media (max-width: 959px) { .header__logo-image { width: var(--mobile-size); max-height: 100%; } } .header__logo-link.transparent { position: absolute; inset: 0; max-height: 100%; visibility: hidden; } .header__logo-link.transparent .header__logo-image { height: 100%; object-fit: contain; } .header [layout^="left_logo_"]__logo-link { justify-content: flex-start; } .transparent:not(:hover) .header__logo-link { color: rgb(var(--header-transparent-color-text, var(--color-text))); visibility: hidden; } .transparent:not(:hover) .header__logo-link.transparent { visibility: visible; } .theme-sticky-header--sticky .transparent .header__logo-link { color: inherit; visibility: visible; } .theme-sticky-header--sticky .transparent .header__logo-link.transparent { visibility: hidden; } .header__container[layout="center_logo_wrap_menu"] .header__action-bar, .header__container[layout="center_logo_wrap_menu_2"] .header__action-bar { flex: 1; } [layout$="_wrap_menu"] .header__container-top~.header__container-bottom, [layout$="_wrap_menu_2"] .header__container-top~.header__container-bottom { display: flex; align-items: center; justify-content: center; width: 100%; } [type="drawer"] .header__container-top~.header__container-bottom { display: none; } @media (max-width: 959px) { .header {} .header__container[mobile-layout] .header__container-top-wrap { column-gap: var(--header-column-gap-mobile); } .header__container[mobile-layout] .header__container-top-wrap .header-nav { display: none; } .header__container[mobile-layout="left_logo"] .header__container-top-wrap { grid-template: "action-bar-left logo action-bar-right"; grid-template-columns: auto auto minmax(min-content, 1fr); } .header__container[mobile-layout="left_logo"] .header__container-top-wrap .header__logo { justify-content: flex-start; } .header__container[mobile-layout="left_logo"] .header__container-top-wrap .header-action-bar { margin-inline-start: 0; } .header__container[mobile-layout="left_logo"] .header__container-top-wrap .header-action-bar.left { flex: 0; margin-inline-end: 0; } .header__container[mobile-layout="left_logo"] .header__container-top-wrap .header-action-bar.right .header-action-bar__search { display: inline-flex; } .header__container[mobile-layout="center_logo"] .header__container-top-wrap { grid-template: "action-bar-left logo action-bar-right"; grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); } .header__container[mobile-layout="center_logo"] .header__container-top-wrap .header-action-bar.left { width: 100%; } } theme-nav-bar { display: contents; } @media (max-width: 959px) { .header-nav { display: none !important; } } [layout="left_logo_left_menu"] .header-nav { order: 10; margin: 0 auto 0 0; } .header-nav__menu { display: flex; flex-wrap: wrap; } .header-nav__menu-item { --nav-menu-item-padding-block: 12px; box-sizing: content-box; max-width: 100%; min-height: 26px; margin-inline: 16px; } .header-nav__menu-item>a { position: relative; z-index: calc(var(--header-nav-dropdown-menu-z-index) + 1); width: 100%; height: 100%; font-size: var(--body3-font-size); font-weight: 400; } .header-nav__menu-item>a:not(.button), .header-nav__menu-item>a:not(.button):hover { color: rgb(var(--header-color-text)); } .transparent:not(:hover) .header-nav__menu-item>a { color: rgb(var(--header-transparent-color-text, var(--color-text))); } .theme-sticky-header--sticky .transparent .header-nav__menu-item>a { color: rgb(var(--header-color-text)); } .header-nav__menu-item>a>span { padding: var(--nav-menu-item-padding-block) 0; } [layout$="_wrap_menu"] .header__container-top .header-nav, [layout$="_wrap_menu_2"] .header__container-top .header-nav { display: none; } .header-nav__underline { --underline-size: 2px; position: relative; display: inline-flex; flex-direction: column; white-space: nowrap; } .header-nav__underline::after { display: block; width: 0; height: var(--underline-size); pointer-events: none; content: ""; background-color: rgb(var(--color-text)); transition: width 200ms ease-in; } .header-nav-dropdown-menu .header-nav__underline::after, .header-nav-dropdown-panel .header-nav__underline::after { inset-block-end: 0; } .header-nav__underline:hover::after, .header-nav__underline-control:hover>.header-nav__underline::after, .header-nav__underline-scope:hover>.header-nav__underline-control>.header-nav__underline::after { width: 100%; } .header-nav__ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; white-space: normal; -webkit-box-orient: vertical; } theme-header-nav-dropdown { contain: layout; } .header-nav-dropdown-menu-scope { position: absolute; z-index: var(--header-nav-dropdown-panel-z-index); display: none; } .header-nav__menu-item:hover .header-nav-dropdown-menu-scope { display: block; animation: animation-slide-in 300ms ease forwards; } .header-nav-dropdown-menu-scope.right { inset-inline: auto 0; } .header-nav-dropdown-menu { position: relative; z-index: var(--header-nav-dropdown-menu-z-index); box-sizing: content-box; display: inline-flex; width: 100%; } .header-nav-dropdown-menu__menu { padding-block: 10px; background-color: rgb(var(--header-background)); box-shadow: 0 5px 20px 0 rgb(0 0 0 / 12%); } .header-nav-dropdown-menu__hero { display: inline-flex; flex: 1; width: max-content; min-width: 168px; max-width: 360px; padding: 4px 20px; font-size: var(--body3-font-size); line-height: 1.625; transition: color 200ms ease-in; } .header-nav-dropdown-menu__hero:not(.button), .header-nav-dropdown-menu__hero:not(.button):hover { color: rgb(var(--header-color-text)); } .header-nav-dropdown-panel { position: absolute; inset-inline-start: 0; z-index: var(--header-nav-dropdown-panel-z-index); display: none; width: 100%; } .header-nav__menu-item:hover .header-nav-dropdown-panel { display: block; animation: animation-slide-in 300ms ease forwards; } .header-nav-dropdown-panel__menu { position: absolute; z-index: var(--header-nav-dropdown-menu-z-index); display: flex; width: 100%; background-color: rgb(var(--color-background)); box-shadow: 0 10px 20px -10px rgb(0 0 0 / 10%); } .header-nav-dropdown-panel__menu>ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%; padding: 40px; } .header-nav-dropdown-panel__menu>ul>li { flex: 1 1 200px; min-width: 200px; max-width: 460px; padding-inline-end: 15px; } .header-nav-dropdown-panel__menu>ul>li>.header-nav__underline-scope { display: inline-flex; flex-direction: column; max-width: 100%; } .header-nav-dropdown-panel__hero { flex: 1; margin-block-end: 15px; font-size: var(--body2-font-size); font-weight: 500; line-height: 1.6111; } .header-nav-dropdown-panel__hero:not(.button), .header-nav-dropdown-panel__hero:not(.button):hover { color: rgb(var(--header-color-text)); } .header-nav-dropdown-panel__link { display: inline-flex; flex: 1; max-width: 100%; padding: 4px 15px 4px 0; font-size: var(--body3-font-size); line-height: 1.625; transition: color 200ms ease-in; } .header-nav-dropdown-panel__link:not(.button), .header-nav-dropdown-panel__link:not(.button):hover { color: rgb(var(--header-color-text)); } .header-nav-dropdown-panel__hero>.header-nav__underline, .header-nav-dropdown-panel__link>.header-nav__underline { max-width: 100%; } .header-nav-dropdown-panel__submenu { display: flex; flex-direction: column; } .header-nav-dropdown-panel__submenu>ul>li { display: flex; flex: 1; max-width: 100%; } .header-nav-dropdown-panel__menu>ul.has-image-items { min-width: 0; } .header-nav__menu-item:hover>a.header-nav__underline::after { width: 100%; } .header-nav mark.lighthighted { display: block; color: rgb(var(--nav-bar-highlighted-color, var(--color-button-text))); background: linear-gradient(90deg, rgb(var(--nav-bar-highlighted-background-color, var(--color-button-background))) 0%, rgb(201 245 47 / 0%) 100%); } .header-nav-with-images-dropdown-panel, .header-super-nav-dropdown-panel { display: none; align-items: center; justify-content: center; height: auto; background-color: rgb(var(--header-background)); } .header-nav__menu-item:hover .header-nav-with-images-dropdown-panel, .header-nav__menu-item:hover .header-super-nav-dropdown-panel { display: flex; } .header-nav-with-images-dropdown-panel__item, .header-super-nav-dropdown-panel__item { position: relative; display: flex; width: 25%; aspect-ratio: 1 / 1; overflow: hidden; } .header-nav-with-images-dropdown-panel__item::after, .header-super-nav-dropdown-panel__item::after { position: absolute; width: 100%; height: 100%; content: ""; background-color: rgb(0 0 0 / calc(var(--nav-super-gallery-background-opcity) / 100)); } .header-nav-with-images-dropdown-panel__item>img, .header-super-nav-dropdown-panel__item>img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .header-nav-with-images-dropdown-panel__item>*, .header-super-nav-dropdown-panel__item>* { transition: transform 200ms ease-in; } .header-nav-with-images-dropdown-panel__item:hover>*, .header-super-nav-dropdown-panel__item:hover>* { transform: scale(1.1); transform-origin: center; } .header-nav-with-images-dropdown-panel__item-inner, .header-super-nav-dropdown-panel__item-inner { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-inline: 20px; color: rgb(var(--nav-super-gallery-text-color, #fff)); pointer-events: none; } .header-nav-with-images-dropdown-panel__item:not( :has(.header-nav-with-images-dropdown-panel__item-inner))::after, .header-super-nav-dropdown-panel__item:not( :has(.header-super-nav-dropdown-panel__item-inner))::after { display: none; } .nav-item-with-images { display: contents; } .header-nav-with-images-dropdown-panel__item { flex: 1; width: auto; min-width: 25%; max-width: 100%; } .header-nav-with-images-dropdown-panel__item:hover>*:not(img) { transform: none; } .header-nav-with-images-dropdown-panel__item.before { order: -1; } .header-nav-with-images-dropdown-panel__item.after { order: 2; } .header-nav-with-images-dropdown-panel__item-inner { align-items: flex-start; pointer-events: auto; } .header-nav-with-images-dropdown-panel__title { margin-block: 16px; } .header-nav-with-images-dropdown-panel__link { cursor: pointer; } .header-nav-with-images-dropdown-panel__link:not(.button) { display: block; padding-block-end: 7px; } .header-nav-with-images-dropdown-panel__link:not(.button), .header-nav-with-images-dropdown-panel__link:not(.button):hover { color: inherit; text-decoration: underline; } .header-nav__menu-item--adapt .header-super-nav-dropdown-panel__item>img { position: absolute; height: unset; object-fit: unset; } theme-sticky-header { --theme-sticky-header-top: 0; position: relative; inset-block-start: 0; z-index: calc(var(--z-index-fixed) - 1); display: block; } .theme-sticky-header--sticky { display: contents; } .theme-sticky-header--sticky theme-sticky-header { position: sticky; inset-block-start: var(--theme-sticky-header-top); animation: animation-header-sticky 0.26s ease-out forwards; } .theme-sticky-header--sticky-collapse theme-sticky-header { animation-name: animation-header-sticky-collapse; } @keyframes animation-header-sticky { 0% { transform: translateY(calc(-100% + var(--theme-sticky-header-top) * -1)); } 100% { transform: translateY(0); } } @keyframes animation-header-sticky-collapse { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-100% + var(--theme-sticky-header-top) * -1)); } } theme-dropdown-menu { position: relative; display: inline-flex; } theme-dropdown-menu .dropdown-menu__label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; user-select: none; } theme-dropdown-menu .dropdown-menu__label-text { display: inline-flex; color: rgb(var(--header-color-text)); white-space: nowrap; } .header-nav-drawer theme-dropdown-menu .dropdown-menu__label-text { white-space: normal; } .transparent:not(:hover) theme-dropdown-menu .dropdown-menu__label-text { color: rgb(var(--header-transparent-color-text, var(--header-color-text))); } .theme-sticky-header--sticky .transparent theme-dropdown-menu .dropdown-menu__label-text { color: rgb(var(--header-color-text)); } theme-dropdown-menu .dropdown-menu__label-arrow { display: inline-flex; width: 10px; height: 10px; transition: transform 0.16s ease-in-out; } theme-dropdown-menu .dropdown-menu__list { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: var(--z-index-dropdown); display: none; width: max-content; max-height: 530px; padding-block: 10px; margin-block-end: env(safe-area-inset-bottom, 0); overflow-y: auto; color: rgb(var(--header-color-text)); background: rgb(var(--header-background)); box-shadow: 0 5px 20px 0 rgb(0 0 0 / 12%); animation: animation-dropdown 0.16s ease-in; } theme-dropdown-menu .dropdown-menu__list::-webkit-scrollbar-thumb { background: rgb(var(--header-color-text)); border-radius: 2px; } theme-dropdown-menu.top .dropdown-menu__list { inset-block: auto calc(100% + 4px); } theme-dropdown-menu.left .dropdown-menu__list { inset-inline: 0 auto; } theme-dropdown-menu .dropdown-menu__list-item { display: flex; padding: 4px 15px; line-height: 160%; word-break: keep-all; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; } theme-dropdown-menu .dropdown-menu__list-item a:not(.button), theme-dropdown-menu .dropdown-menu__list-item a:not(.button):hover { color: rgb(var(--header-color-text)); } theme-dropdown-menu .dropdown-menu__divider { height: 1px; margin: 4px 15px; background: rgb(var(--color-entry-line)); } theme-dropdown-menu .dropdown-menu__trigger { position: fixed; inset-block-start: -1000px; inset-inline-start: -1000px; pointer-events: none; visibility: hidden; user-select: none; opacity: 0; } theme-dropdown-menu.hover:hover .dropdown-menu__list { display: block; } theme-dropdown-menu .dropdown-menu__trigger:checked~.dropdown-menu__label-arrow { transform: rotate(-180deg); } theme-dropdown-menu .dropdown-menu__label:has(.dropdown-menu__trigger:checked)~.dropdown-menu__list { display: block; } theme-locale-picker { display: contents; } theme-locale-picker>form { display: contents; } theme-locale-picker .theme-locale-picker__inner { display: inline-flex; flex-shrink: 1; gap: 28px; align-items: center; min-width: 0; } theme-locale-picker theme-dropdown-menu { min-width: 0; } .header-action-bar { position: relative; display: flex; flex: 0; flex-wrap: nowrap; column-gap: var(--header-column-gap); align-items: center; order: 40; padding-block: 0; padding-block: 12px; margin-inline-start: auto; } @media (max-width: 959px) { .header-action-bar { display: flex; column-gap: var(--header-column-gap-mobile); } } .header-action-bar>* { position: relative; z-index: calc(var(--header-nav-dropdown-menu-z-index) + 1); } @media (max-width: 959px) { .header-action-bar { flex: 1; padding: 0; } } .header__container[layout="center_logo_wrap_menu"] .header-action-bar { flex: 1; } .header-action-bar .button--icon { display: inline-flex; justify-self: end; width: 28px; height: 28px; } .header-action-bar .button--hidden { display: none; } @media (max-width: 959px) { .header-action-bar .button--hidden-mobile { display: none; } } @media (min-width: 960px) { .header-action-bar .button--hidden-desktop { display: none; } } .header-action-bar__search-bar-container { display: inline-flex; flex-shrink: 9; } .header-action-bar__search-bar { display: inline-flex; flex-shrink: 1; gap: 10px; width: 100%; min-width: 48px; max-width: 300px; height: 48px; padding: 10px; overflow: hidden; color: rgb(var(--header-color-text)); background-color: rgb(var(--header-background)); border: 1px solid rgb(var(--color-entry-line)); border-radius: 6px; transform: color 200ms ease-in-out, background-color 200ms ease-in-out; } .header-action-bar__search-bar-icon { display: inline-flex; flex-shrink: 0; color: inherit; } .header-action-bar__search-bar-input { width: 100%; overflow: hidden; font-size: var(--body3-font-size); color: inherit; appearance: none; background-color: rgb(0 0 0 / 0%); border: none; outline: none; box-shadow: none; } .header-action-bar__search-bar-input::-webkit-search-cancel-button { display: none; } .header-action-bar__search-bar-input::placeholder { color: inherit; } .header-action-bar__search.button--icon { margin-inline-end: 0; } .header-action-bar__results { position: absolute; inset-block-start: 100%; z-index: var(--z-index-dropdown); display: none; flex-direction: column; width: 100%; max-height: 80vh; padding: 20px; overflow: hidden auto; background-color: rgba(var(--color-background), 1); border: 1px solid rgb(0 0 0 / 10%); box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%); } .header-action-bar__results.shown { display: flex; } .header-action-bar__results-loading { display: none; align-items: center; justify-content: center; padding: 20px 0; } .header-action-bar__results-spinner { width: 20px; height: 20px; color: rgba(var(--color-text), 1); animation: animation-circling linear 1.5s infinite; } .header-action-bar__results-list { display: block; } .header-action-bar__results.loading { align-items: center; justify-content: center; } .header-action-bar__results.loading .header-action-bar__results-loading { display: flex; } .header-action-bar__results.loading .header-action-bar__results-list { display: none; } .header-action-bar__results .predictive-search__results { grid-template-columns: repeat(1, 1fr); } .header-action-bar__results .predictive-search__product { flex-direction: row; } .header-action-bar__results .predictive-search__product-image-wrap { display: block; grid-area: image; width: 62px; height: 62px; overflow: visible; object-fit: cover; object-position: center; } .header-action-bar__results .predictive-search__product-title { display: block; overflow: visible; } .header-action-bar__results .predictive-search__more>svg { display: none !important; } .header-action-bar.left { display: none; grid-area: action-bar-left; order: 0; } .header-action-bar.left .header-action-bar__search, .header-action-bar.left .header-action-bar__search-bar { display: none; } .header-action-bar.right { grid-area: action-bar-right; align-items: center; justify-content: end; max-width: 100%; } [type="drawer"] .header-action-bar.left, [layout^="center_logo_"] .header-action-bar.left { display: flex; } [layout="center_logo_wrap_menu"] .header-action-bar.left .header-action-bar__search, [layout="center_logo_wrap_menu"] .header-action-bar.left .header-action-bar__search-bar { display: inline-flex; } [layout="center_logo_wrap_menu"] .header-action-bar.right .header-action-bar__search, [layout="center_logo_wrap_menu"] .header-action-bar.right .header-action-bar__search-bar { display: none; } [layout="center_logo_wrap_menu_2"] .header-action-bar.left .header-action-bar__search, [layout="center_logo_wrap_menu_2"] .header-action-bar.left .header-action-bar__search-bar { display: none; } [layout="center_logo_wrap_menu_2"] .header-action-bar.right .header-action-bar__search, [layout="center_logo_wrap_menu_2"] .header-action-bar.right .header-action-bar__search-bar { display: inline-flex; } .header-action-bar [layout="left_logo_left_menu"] .header__logo { order: 0; } @media (max-width: 959px) { .header-action-bar {} .header-action-bar.right .header-action-bar__menu { display: none; } .header-action-bar.left { display: flex; } .header-action-bar__search-bar { display: none; } .header-action-bar__search.button--icon { display: inline-flex; } [layout^="left_logo_"] .header-action-bar.left { flex: 0; } [mobile-layout="left_logo"] .header-action-bar.left .header-action-bar__search { display: none !important; } } @media (max-width: 959px) { .header-action-bar theme-locale-picker { display: none; } } .transparent:not(:hover) .header-action-bar { color: rgb(var(--header-transparent-color-text, var(--color-text))); } .transparent:not(:hover) .header-action-bar__search-bar { color: rgb(var(--header-transparent-color-text)); background-color: transparent; } .transparent:not(:hover) .header-action-bar__search-bar-icon { color: rgb(var(--header-transparent-color-text)); } .theme-sticky-header--sticky .transparent:not(:hover) .header-action-bar__search-bar { color: rgb(var(--header-color-text)); background-color: rgb(var(--header-background)); } .theme-sticky-header--sticky .transparent:not(:hover) .header-action-bar__search-bar-icon { color: inherit; } .mobile-slider-navbar { position: relative; z-index: 1; display: none; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: rgb(var(--header-background)); animation: animation-fade-in 0.16s ease-in; -webkit-overflow-scrolling: touch; } @media (max-width: 959px) { .mobile-slider-navbar { display: block; } } .mobile-slider-navbar::-webkit-scrollbar { display: none; } .mobile-slider-navbar__list { display: flex; flex-wrap: nowrap; padding: 0; margin: 0; list-style: none; } .mobile-slider-navbar__item { flex-shrink: 0; scroll-snap-align: center; } .mobile-slider-navbar__link { display: block; padding: 14px 16px; font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap; } .mobile-slider-navbar__link:not(.button), .mobile-slider-navbar__link:not(.button):hover { color: rgb(var(--header-color-text)); } .mobile-slider-navbar__link--active { position: relative; color: rgb(var(--header-color-text)); } .mobile-slider-navbar__link--active::after { position: absolute; inset-block-end: 8px; inset-inline: 16px; height: 2px; content: ""; background-color: rgb(var(--header-color-text)); } .header-section.transparent:not(:hover) .mobile-slider-navbar { background: transparent; } .header-section.transparent:not(:hover) .mobile-slider-navbar__link:not(.button), .header-section.transparent:not(:hover) .mobile-slider-navbar__link:not(.button):hover { color: rgb(var(--header-transparent-color-text)); } .header-nav-drawer { --header-nav-drawer-slide-anime-duration: 200ms; --header-background: var(--color-background, 255, 255, 255); --header-color-text: var(--color-text, 0, 0, 0); position: fixed; z-index: -1; display: none; pointer-events: none; transition: z-index 1ms ease var(--header-nav-drawer-slide-anime-duration); } .header-nav-drawer--lockscreen { overflow: hidden !important; } .header-nav-drawer.open { z-index: var(--z-index-fixed); pointer-events: all; transition: z-index 1ms ease; } .header-nav-drawer, .header-nav-drawer__backdrop, .header-nav-drawer__content { inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; } @media (max-width: 959px) { .header-nav-drawer .body-font-bold { font-weight: 700; } } .header-nav-drawer__backdrop { position: fixed; z-index: -1; display: block !important; width: 100%; height: 100vh; background: rgb(0 0 0 / 40%); opacity: 0; transition: opacity var(--header-nav-drawer-slide-anime-duration) ease-in-out, z-index 1ms ease var(--header-nav-drawer-slide-anime-duration); } .header-nav-drawer.open .header-nav-drawer__backdrop { opacity: 1; } .header-nav-drawer__content { position: fixed; display: flex; flex-direction: column; gap: 0; width: 400px; height: 100dvh; padding: 15px 0 10px; background: rgb(var(--header-background)); transition: width var(--header-nav-drawer-slide-anime-duration) ease, transform var(--header-nav-drawer-slide-anime-duration) ease-out; transform: translateX(-100%); } @media (max-width: 959px) { .header-nav-drawer__content { width: 340px; } } .header-nav-drawer.open .header-nav-drawer__content { transition: width var(--header-nav-drawer-slide-anime-duration) ease, transform var(--header-nav-drawer-slide-anime-duration) ease-in; transform: translateX(0); } .header-nav-drawer__header { padding-inline: 30px; } @media (max-width: 959px) { .header-nav-drawer__header { padding-inline: 20px; } } .header-nav-drawer__header-container { box-sizing: content-box; display: flex; gap: 15px; align-items: center; justify-content: space-between; height: 28px; padding-block-end: 15px; color: rgb(var(--color-text)); border-block-end: 1px solid rgb(var(--color-entry-line)); } .header-nav-drawer__login { display: inline-flex; flex: 1; gap: 8px; align-items: center; } .header-nav-drawer__login:not(.button), .header-nav-drawer__login:not(.button):hover { color: var(--header-color-text); } .header-nav-drawer__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .header-nav-drawer__ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; white-space: normal; -webkit-box-orient: vertical; } .header-nav-drawer__menu { --nav-drawer-padding-inline: 20px; --nav-drawer-padding-block: 12px; overflow-y: auto; } .header-nav-drawer__menu-control { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: var(--nav-drawer-padding-block) var(--nav-drawer-padding-inline); } .header-nav-drawer__menu-control:not(.button), .header-nav-drawer__menu-control:not(.button):hover { color: rgb(var(--header-color-text)); } .header-nav-drawer__menu-control>a:not(.button), .header-nav-drawer__menu-control>a:not(.button):hover { color: inherit; } .header-nav-drawer__menu-control .header-nav-drawer__menu-icon { width: 10px; height: 10px; transform: scale(1); } .header-nav-drawer__menu-control .header-nav-drawer__menu-icon>svg { --animation-rotate-degree: -270deg; position: absolute; opacity: 0; transition: transform 300ms ease; transform: rotate(0deg) scale(1); } summary.header-nav-drawer__menu-control { align-items: stretch; padding: 0; padding-inline-start: var(--nav-drawer-padding-inline); } summary.header-nav-drawer__menu-control .header-nav-drawer__menu-link { display: flex; flex: 1; gap: 10px; padding: var(--nav-drawer-padding-block) var(--nav-drawer-padding-inline); padding-inline-start: 0; } summary.header-nav-drawer__menu-control .header-nav-drawer__menu-icon { box-sizing: content-box; height: auto; padding: var(--nav-drawer-padding-block) var(--nav-drawer-padding-inline); } details:not([open]) .header-nav-drawer__menu-control .header-nav-drawer__menu-icon>.icon-arrow-thin { opacity: 1; transform: rotate(0deg) scale(1); } details:not([open]) .header-nav-drawer__menu-control .header-nav-drawer__menu-icon>.icon-minus { opacity: 0; transform: rotate(var(--animation-rotate-degree)) scale(0); } details[open] .header-nav-drawer__menu-control .header-nav-drawer__menu-icon>.icon-arrow-thin { opacity: 0; transform: rotate(var(--animation-rotate-degree)) scale(0); } details[open] .header-nav-drawer__menu-control .header-nav-drawer__menu-icon>.icon-minus { opacity: 1; transform: rotate(0) scale(1); } .header-nav-drawer__submenu { --nav-drawer-submenu-padding-inline: 15px; overflow: hidden; background: rgb(0 0 0 / 5%); } details+.header-nav-drawer__submenu { transition: var(--nav-drawer-submenu-transition-max-height), var(--nav-drawer-submenu-transition-color); } .header-nav-drawer__submenu .header-nav-drawer__submenu { background-color: rgb(0 0 0 / 0%); } details:not([open])+.header-nav-drawer__submenu { --nav-drawer-submenu-transition-max-height: max-height 360ms ease; --nav-drawer-submenu-transition-color: color 200ms ease; max-height: 0; color: rgb(0 0 0 / 0%); } details[open]+.header-nav-drawer__submenu { --nav-drawer-submenu-transition-max-height: max-height 360ms ease-in; --nav-drawer-submenu-transition-color: color 200ms ease-in-out 200ms; max-height: 100vh; color: rgb(var(--color-text)); } details[open]+.header-nav-drawer__submenu details:not([open])+.header-nav-drawer__submenu { color: rgb(0 0 0 / 0%); } details:not([open])+.header-nav-drawer__submenu details[open]+.header-nav-drawer__submenu { color: rgb(0 0 0 / 0%); transition-delay: 0ms, 0ms; } details[open]+.header-nav-drawer__submenu details[open]+.header-nav-drawer__submenu { color: rgb(var(--color-text)); } .header-nav-drawer__submenu .header-nav-drawer__menu-control { padding-inline-start: calc(var(--nav-drawer-padding-inline) + (var(--nav-drawer-submenu-padding-inline) * (var(--nav-drawer-submenu-level, 1) - 1))); color: inherit; } details+.header-nav-drawer__submenu .header-nav-drawer__menu-control { transition: transform 400ms ease-in; } details:not([open])+.header-nav-drawer__submenu .header-nav-drawer__menu-control { transform: translate(4px, 4px) !important; } details[open]+.header-nav-drawer__submenu>li>.header-nav-drawer__menu-control, details[open]+.header-nav-drawer__submenu>li>details .header-nav-drawer__menu-control { transform: translate(0, 0); } .header-nav-drawer__footer { flex-shrink: 0; padding-block-start: 15px; margin-block-start: auto; border-block-start: 1px solid rgb(var(--color-entry-line)); } @media (max-width: 959px) { .header-nav-drawer__footer { padding-block-end: env(safe-area-inset-bottom, 0); } } .header-nav-drawer__footer .theme-locale-picker__inner { display: flex; flex-direction: column; gap: 0; align-items: flex-start; } .header-nav-drawer__footer theme-locale-picker { display: contents; } .header-nav-drawer__footer theme-locale-picker theme-dropdown-menu { display: flex; gap: 10px; padding: 12px 20px; } .header-nav-drawer mark.lighthighted { display: block; padding-inline-end: 32px; color: rgb(var(--nav-bar-highlighted-color, var(--color-button-text))); background: linear-gradient(90deg, rgb(var(--nav-bar-highlighted-background-color, var(--color-button-background))) 0%, rgb(201 245 47 / 0%) 100%); } .nav-drawer-super-gallery__menu { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; } .nav-drawer-super-gallery__row { display: flex; } .nav-drawer-super-gallery__row:empty { display: none; } details:not([open])+.nav-drawer-super-gallery__menu { display: block; } details[open]+.nav-drawer-super-gallery__menu { display: flex; } details+.nav-drawer-super-gallery__menu .nav-drawer-super-gallery__row { opacity: 0; transition: var(--nav-drawer-submenu-transition-opacity); } details:not([open])+.nav-drawer-super-gallery__menu .nav-drawer-super-gallery__row { --nav-drawer-submenu-transition-opacity: opacity 160ms ease-in; } details[open]+.nav-drawer-super-gallery__menu .nav-drawer-super-gallery__row { --nav-drawer-submenu-transition-opacity: opacity 160ms ease-in 160ms; opacity: 1; } .nav-drawer-super-gallery__item { position: relative; display: flex; aspect-ratio: 1 / 1; overflow: hidden; } .nav-drawer-super-gallery__item::after { position: absolute; width: 100%; height: 100%; content: ""; background-color: rgb(0 0 0 / calc(var(--nav-super-gallery-background-opcity) / 100)); } .nav-drawer-super-gallery__item>img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .nav-drawer-super-gallery__item>* { transition: transform 200ms ease-in; } .nav-drawer-super-gallery__item:hover>* { transform: scale(1.1); transform-origin: center; } .nav-drawer-super-gallery--adapt .nav-drawer-super-gallery__item { aspect-ratio: unset; } .nav-drawer-super-gallery--adapt .nav-drawer-super-gallery__item>img { height: fit-content; object-fit: unset; object-position: 0 0; } .cart-bubble, .cart-bubble>a { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cart-bubble__count { position: absolute; inset-block-end: 1px; inset-inline-start: 13px; z-index: 1; min-width: 20px; max-width: 60px; padding-inline: 6px; overflow: hidden; font-style: normal; line-height: 20px; color: rgba(var(--color-cart-bubble-text), 1); text-align: center; text-overflow: ellipsis; white-space: nowrap; background-color: rgba(var(--color-cart-bubble), 1); border-radius: 20px; } .cart-bubble__count:empty { display: none; }     .header-section { --cb-header-height: 74px; --cb-header-inline-padding: 34px; --cb-header-font-size: 13px; --cb-header-letter-spacing: 0.12em; --cb-header-icon-size: 23px; --cb-header-transition: 220ms ease; }  @media (min-width: 960px) { .header__container[layout="center_logo_wrap_menu"] .header__container-top-wrap, .header__container[layout="center_logo_wrap_menu_2"] .header__container-top-wrap, .header__container[layout="center_logo_left_menu"][type="drawer"] .header__container-top-wrap { display: grid; grid-template-areas: "action-bar-left logo action-bar-right"; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; } .header__container[layout^="center_logo_"] .header-action-bar.left { grid-area: action-bar-left; width: 100%; margin: 0; justify-content: flex-start; } .header__container[layout^="center_logo_"] .header__logo { grid-area: logo; margin: 0; } .header__container[layout^="center_logo_"] .header-action-bar.right { grid-area: action-bar-right; width: 100%; margin: 0; justify-content: flex-end; } } .header__container-top-wrap.page-width { width: 100%; max-width: 100%; min-height: var(--cb-header-height); padding-inline: var(--cb-header-inline-padding) !important; }  .header-section.transparent { position: absolute; inset-block-start: 0; inset-inline: 0; width: 100%; background: transparent !important; border-block-end: 1px solid transparent; box-shadow: none; --header-transparent-color-text: 255, 255, 255; } .header-section.transparent::after, .header-section.transparent:hover::after { display: none !important; height: 0 !important; background: transparent !important; } .header-section.transparent:hover { --header-transparent-color-text: 255, 255, 255; } .header-section.transparent .header__container, .header-section.transparent:hover .header__container { background: transparent !important; } .header-section.transparent .header-action-bar, .header-section.transparent:hover .header-action-bar, .header-section.transparent .header-action-bar a, .header-section.transparent:hover .header-action-bar a, .header-section.transparent .header-action-bar button, .header-section.transparent:hover .header-action-bar button { color: rgb(var(--header-transparent-color-text)) !important; } .header-section.transparent .header__logo-link, .header-section.transparent:hover .header__logo-link { color: rgb(var(--header-transparent-color-text)) !important; visibility: hidden; } .header-section.transparent .header__logo-link.transparent, .header-section.transparent:hover .header__logo-link.transparent { visibility: visible; }  .theme-sticky-header--sticky .header-section.transparent { position: relative; background: rgb(var(--header-background)) !important; border-block-end-color: rgba(var(--header-color-text), 0.12); --header-transparent-color-text: var(--header-color-text); } .theme-sticky-header--sticky .header-section.transparent .header__container, .theme-sticky-header--sticky .header-section.transparent:hover .header__container { background: rgb(var(--header-background)) !important; } .theme-sticky-header--sticky .header-section.transparent .header-action-bar, .theme-sticky-header--sticky .header-section.transparent:hover .header-action-bar, .theme-sticky-header--sticky .header-section.transparent .header-action-bar a, .theme-sticky-header--sticky .header-section.transparent:hover .header-action-bar a, .theme-sticky-header--sticky .header-section.transparent .header-action-bar button, .theme-sticky-header--sticky .header-section.transparent:hover .header-action-bar button { color: rgb(var(--header-color-text)) !important; } .theme-sticky-header--sticky .header-section.transparent .header__logo-link, .theme-sticky-header--sticky .header-section.transparent:hover .header__logo-link { color: rgb(var(--header-color-text)) !important; visibility: visible; } .theme-sticky-header--sticky .header-section.transparent .header__logo-link.transparent, .theme-sticky-header--sticky .header-section.transparent:hover .header__logo-link.transparent { visibility: hidden; } .header__container, .header-action-bar, .header-action-bar a, .header-action-bar button, .header__logo-link { transition: color var(--cb-header-transition), background-color var(--cb-header-transition), border-color var(--cb-header-transition), opacity var(--cb-header-transition); }  .header-action-bar { min-width: 0; padding-block: 0; column-gap: 18px; font-size: var(--cb-header-font-size); font-weight: 400; line-height: 1; letter-spacing: var(--cb-header-letter-spacing); text-transform: uppercase; white-space: nowrap; } .header-action-bar.left { gap: 18px; } .header-action-bar.right { gap: 18px; } .header-action-bar__cb-menu, .header-action-bar__cb-search, .header-action-bar__cb-account, .header-action-bar__cb-cart-label { display: inline-flex; align-items: center; min-width: 0; min-height: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: none; background: transparent !important; border: 0; border-radius: 0; box-shadow: none; } .header-action-bar__cb-menu:hover, .header-action-bar__cb-search:hover, .header-action-bar__cb-account:hover, .header-action-bar__cb-cart-label:hover { color: inherit; opacity: 0.78; } .header-action-bar__cb-search { gap: 12px; } .header-action-bar__cb-account { gap: 11px; } .header-action-bar__cb-cart { display: inline-flex; align-items: center; gap: 11px; } .header-action-bar__cb-divider { display: inline-block; flex: 0 0 auto; width: 1px; height: 24px; background: currentColor; opacity: 0.78; }  .header-action-bar__cb-search-icon { display: inline-flex; width: 16px; height: 16px; } .header-action-bar__cb-account-icon { display: inline-flex; width: 25px; height: 25px; } .header-action-bar__cb-cart-icon, .header-action-bar__cb-cart-icon .button--icon, .header-action-bar__cb-cart-icon .cart-bubble, .header-action-bar__cb-cart-icon .cart-bubble>a { width: var(--cb-header-icon-size); height: var(--cb-header-icon-size); } .header-action-bar__cb-menu-icon, .header-action-bar__cb-account-mobile, .header-action-bar__search.button--icon { width: var(--cb-header-icon-size); height: var(--cb-header-icon-size); } .header-action-bar__cb-search-icon svg, .header-action-bar__cb-account-icon svg, .header-action-bar__cb-cart-icon svg, .header-action-bar__cb-menu-icon svg, .header-action-bar__cb-account-mobile svg, .header-action-bar__search.button--icon svg { width: 100%; height: 100%; overflow: visible; } .header-action-bar svg [stroke] { stroke-width: 1.25px !important; vector-effect: non-scaling-stroke; }  .header-action-bar.right .cart-bubble::before { display: none !important; } .header-action-bar__cb-cart-icon.button.button--icon { padding: 0; background: transparent; } .header-action-bar__cb-cart-icon .cart-bubble__count { inset-block-end: -5px; inset-inline-start: 13px; min-width: 16px; max-width: 42px; padding-inline: 4px; font-size: 10px; line-height: 16px; }  .header-action-bar [class*="wishlist"i], .header-action-bar [href*="wishlist"i], .header-action-bar [aria-label*="wishlist"i], .header-action-bar [title*="wishlist"i], .header-action-bar theme-locale-picker { display: none !important; }  .header-action-bar__search-bar-container, .header-action-bar__search-bar { background: transparent; } @media (max-width: 959px) { .header-section { --cb-header-height: 58px; --cb-header-inline-padding: 18px; --cb-header-icon-size: 22px; } .header__container-top-wrap.page-width { min-height: var(--cb-header-height); padding-inline: var(--cb-header-inline-padding) !important; } .header-action-bar { column-gap: 10px; } .header-action-bar.left { justify-content: flex-start; } .header-action-bar.right { justify-content: flex-end; } .header-action-bar__cb-menu { display: inline-flex; } .header-action-bar__cb-cart { gap: 0; } .header-action-bar svg [stroke] { stroke-width: 1.3px !important; } } @media (prefers-reduced-motion: reduce) { .header__container, .header-action-bar, .header-action-bar a, .header-action-bar button, .header__logo-link { transition: none !important; } }     .header-action-bar__cb-menu, .header-action-bar__cb-search, .header-action-bar__cb-search-mobile, .header-action-bar__cb-account, .header-action-bar__cb-account-mobile, .header-action-bar__cb-cart-label, .header-action-bar__cb-cart-icon, .header-action-bar__cb-cart-icon .cart-bubble, .header-action-bar__cb-cart-icon .cart-bubble>a { appearance: none; -webkit-appearance: none; outline: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .header-action-bar__cb-menu::before, .header-action-bar__cb-menu::after, .header-action-bar__cb-search::before, .header-action-bar__cb-search::after, .header-action-bar__cb-search-mobile::before, .header-action-bar__cb-search-mobile::after, .header-action-bar__cb-account::before, .header-action-bar__cb-account::after, .header-action-bar__cb-account-mobile::before, .header-action-bar__cb-account-mobile::after, .header-action-bar__cb-cart-label::before, .header-action-bar__cb-cart-label::after, .header-action-bar__cb-cart-icon::before, .header-action-bar__cb-cart-icon::after { display: none !important; content: none !important; } .header-action-bar__cb-menu:focus, .header-action-bar__cb-menu:focus-visible, .header-action-bar__cb-search:focus, .header-action-bar__cb-search:focus-visible, .header-action-bar__cb-search-mobile:focus, .header-action-bar__cb-search-mobile:focus-visible, .header-action-bar__cb-account:focus, .header-action-bar__cb-account:focus-visible, .header-action-bar__cb-account-mobile:focus, .header-action-bar__cb-account-mobile:focus-visible, .header-action-bar__cb-cart-label:focus, .header-action-bar__cb-cart-label:focus-visible, .header-action-bar__cb-cart-icon a:focus, .header-action-bar__cb-cart-icon a:focus-visible { outline: 0 !important; border: 0 !important; box-shadow: none !important; } .header-action-bar__cb-menu-label { display: inline-flex; align-items: center; } .header-action-bar__cb-mobile-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--cb-header-icon-size); height: var(--cb-header-icon-size); padding: 0; margin: 0; color: inherit; } .header-action-bar__cb-mobile-icon svg { display: block; width: 100%; height: 100%; overflow: visible; } @media (max-width: 959px) { .header-section { --cb-header-height: 64px; --cb-header-inline-padding: 18px; --cb-header-font-size: 13px; --cb-header-letter-spacing: 0.08em; --cb-header-icon-size: 24px; } .header__container[mobile-layout] .header__container-top-wrap { display: grid !important; grid-template-areas: "action-bar-left logo action-bar-right" !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; column-gap: 10px !important; align-items: center; } .header-action-bar.left { grid-area: action-bar-left; display: flex !important; width: 100%; min-width: 0; margin: 0; justify-content: flex-start; } .header-action-bar.right { grid-area: action-bar-right; display: flex !important; width: 100%; min-width: 0; margin: 0; gap: 12px; justify-content: flex-end; } .header__logo { grid-area: logo; margin: 0; justify-content: center !important; }  .header-action-bar__cb-menu { display: inline-flex !important; align-items: center; justify-content: flex-start; min-width: 0; padding: 0 !important; font: inherit; color: inherit; letter-spacing: var(--cb-header-letter-spacing); line-height: 1; } .header-action-bar__cb-menu-label { display: inline-flex !important; } .header-action-bar__cb-search-mobile { order: 10; } .header-action-bar__cb-account-mobile { order: 20; } .header-action-bar__cb-cart { order: 30; display: inline-flex; flex: 0 0 auto; gap: 0; } .header-action-bar__cb-cart-icon, .header-action-bar__cb-cart-icon .cart-bubble, .header-action-bar__cb-cart-icon .cart-bubble>a { display: inline-flex; align-items: center; justify-content: center; width: var(--cb-header-icon-size); height: var(--cb-header-icon-size); padding: 0; margin: 0; } .header-action-bar__cb-cart-icon svg { width: 100%; height: 100%; } .header-action-bar__cb-cart-icon .cart-bubble__count { inset-block-end: -6px; inset-inline-start: 14px; }  .header__logo-image { max-width: min(var(--mobile-size), 126px); } } @media (max-width: 420px) { .header-section { --cb-header-inline-padding: 14px; --cb-header-icon-size: 22px; } .header-action-bar.right { gap: 9px; } .header-action-bar__cb-menu { font-size: 12px; } .header__logo-image { max-width: min(var(--mobile-size), 108px); } }     @media (min-width: 960px) { .header__container .header-action-bar.left .header-action-bar__cb-search { display: inline-flex !important; align-items: center; gap: 12px; width: auto; height: auto; padding: 0 !important; margin: 0; overflow: visible; color: inherit; visibility: visible !important; opacity: 1 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .header__container .header-action-bar.left .header-action-bar__cb-search-icon { display: inline-flex !important; flex: 0 0 auto; width: 16px; height: 16px; } .header__container .header-action-bar.left .header-action-bar__cb-search-label { display: inline-flex !important; align-items: center; width: auto; max-width: none; overflow: visible; font: inherit; line-height: 1; letter-spacing: inherit; color: inherit; white-space: nowrap; visibility: visible !important; opacity: 1 !important; } } @media (max-width: 959px) {  .header-action-bar__cb-search-label { display: none !important; } }     @media (max-width: 959px) { .header__container[mobile-layout] .header-action-bar.right .header-action-bar__search.header-action-bar__cb-search-mobile { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--cb-header-icon-size); height: var(--cb-header-icon-size); padding: 0 !important; margin: 0; color: inherit; visibility: visible !important; opacity: 1 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .header__container[mobile-layout] .header-action-bar.right .header-action-bar__cb-search-mobile svg { display: block; width: 100%; height: 100%; } }     .header-action-bar, .header-action-bar__cb-menu, .header-action-bar__cb-search, .header-action-bar__cb-search-label, .header-action-bar__cb-account, .header-action-bar__cb-cart-label { font-weight: 320 !important; font-variation-settings: "wght"320; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }       .theme-sticky-header--sticky .header-section.transparent, .theme-sticky-header--sticky .header-section.transparent:hover { background: transparent !important; border-block-end-color: transparent !important; box-shadow: none !important;  --header-transparent-color-text: var(--header-color-text); } .theme-sticky-header--sticky .header-section.transparent::after, .theme-sticky-header--sticky .header-section.transparent:hover::after { display: none !important; height: 0 !important; background: transparent !important; } .theme-sticky-header--sticky .header-section.transparent .header__container, .theme-sticky-header--sticky .header-section.transparent:hover .header__container, .theme-sticky-header--sticky .transparent .header__container { background: transparent !important; background-color: transparent !important; box-shadow: none !important; }  .theme-sticky-header--sticky .header-section.transparent .header-action-bar, .theme-sticky-header--sticky .header-section.transparent:hover .header-action-bar, .theme-sticky-header--sticky .header-section.transparent .header-action-bar a, .theme-sticky-header--sticky .header-section.transparent:hover .header-action-bar a, .theme-sticky-header--sticky .header-section.transparent .header-action-bar button, .theme-sticky-header--sticky .header-section.transparent:hover .header-action-bar button { color: rgb(var(--header-color-text)) !important; }  .theme-sticky-header--sticky .header-section.transparent .header__logo-link, .theme-sticky-header--sticky .header-section.transparent:hover .header__logo-link { color: rgb(var(--header-color-text)) !important; visibility: visible !important; opacity: 1 !important; } .theme-sticky-header--sticky .header-section.transparent .header__logo-link.transparent, .theme-sticky-header--sticky .header-section.transparent:hover .header__logo-link.transparent { visibility: hidden !important; opacity: 0 !important; }     .header-section { overflow: visible; }              .header-action-bar .cart-bubble__count { background-color: #222222 !important; color: #ffffff !important; }            .header-section { overflow: visible; } .header-search-bar.cb-search-bar { --header-search-bar-slide-anime-duration: 240ms; --cb-search-results-height: calc(100dvh - 190px); position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: -1; display: block; width: 100%; height: auto; margin: 0; color: #222222; visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity var(--header-search-bar-slide-anime-duration) ease, transform var(--header-search-bar-slide-anime-duration) cubic-bezier(0.22, 1, 0.36, 1), visibility 1ms linear var(--header-search-bar-slide-anime-duration), z-index 1ms linear var(--header-search-bar-slide-anime-duration); } .header-search-bar.cb-search-bar.open { z-index: var(--z-index-fixed); visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); transition: opacity var(--header-search-bar-slide-anime-duration) ease, transform var(--header-search-bar-slide-anime-duration) cubic-bezier(0.22, 1, 0.36, 1), visibility 1ms linear 0ms, z-index 1ms linear 0ms; } .header-search-bar--lockscreen { overflow: hidden !important; } .header-search-bar.cb-search-bar .header-search-bar__backdrop { position: fixed; inset: 0; z-index: 0; display: block !important; width: 100vw; height: 100dvh; background: rgb(0 0 0 / 22%); opacity: 0; transition: opacity var(--header-search-bar-slide-anime-duration) ease; } .header-search-bar.cb-search-bar.open .header-search-bar__backdrop { opacity: 1; } .header-search-bar.cb-search-bar .cb-search-bar__form { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; padding: 38px 88px 42px 32px; margin: 0; background: #ffffff; border: 0; box-shadow: none; } .cb-search-bar__field { position: relative; display: block; width: min(720px, 56vw); height: 48px; color: #222222; background: #ffffff; border: 1px solid #222222; } .header-search-bar.cb-search-bar .cb-search-bar__input { appearance: none; display: block; width: 100%; height: 100%; padding: 0 54px 0 18px; margin: 0; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 18px; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: 0; color: #222222; background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; } .header-search-bar.cb-search-bar .cb-search-bar__input::placeholder { color: #222222; opacity: 0.48; } .header-search-bar.cb-search-bar .cb-search-bar__input::-webkit-search-cancel-button { display: none; } .cb-search-bar__submit, .cb-search-bar__dismiss { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; color: #222222; cursor: pointer; background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; -webkit-appearance: none; } .cb-search-bar__submit { position: absolute; inset-block-start: 50%; inset-inline-end: 15px; width: 18px; height: 18px; transform: translateY(-50%); } .cb-search-bar__dismiss { position: absolute; inset-block-start: 50%; inset-inline-end: 30px; width: 34px; height: 34px; transform: translateY(-50%); } .cb-search-bar__submit svg, .cb-search-bar__dismiss svg { display: block; width: 100%; height: 100%; overflow: visible; } .cb-search-bar__submit svg [stroke], .cb-search-bar__dismiss svg [stroke] { stroke-width: 1.2px !important; vector-effect: non-scaling-stroke; } .cb-search-bar__submit:hover, .cb-search-bar__dismiss:hover { opacity: 0.6; } .cb-search-bar__field:focus-within { outline: 1px solid #222222; outline-offset: -2px; } .cb-search-bar__screen-reader { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; white-space: nowrap !important; clip-path: inset(50%) !important; border: 0 !important; }  .header-search-bar.cb-search-bar .header-search-bar__results { position: relative; z-index: 2; display: none; width: 100%; height: var(--cb-search-results-height); min-height: 0; max-height: none; padding: 26px 48px 34px; margin: 0; overflow-x: hidden; overflow-y: auto; color: #222222; background: #ffffff; border: 0; box-shadow: none; pointer-events: auto; touch-action: pan-y; overscroll-behavior-y: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .header-search-bar.cb-search-bar .header-search-bar__results.shown { display: block; } .header-search-bar.cb-search-bar .header-search-bar__results-loading { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 20px; background: rgb(255 255 255 / 92%); } .header-search-bar.cb-search-bar .header-search-bar__results.loading .header-search-bar__results-loading { display: flex; } .header-search-bar.cb-search-bar .header-search-bar__results-spinner { width: 20px; height: 20px; color: #222222; animation: animation-circling linear 1.5s infinite; } .header-search-bar.cb-search-bar .header-search-bar__results-list, .header-search-bar.cb-search-bar .predictive-search-section, .header-search-bar.cb-search-bar .predictive-search__body { display: block; width: min(1200px, 100%); height: auto; min-height: 0; max-height: none; padding: 0; margin: 0 auto; overflow: visible; opacity: 1; transform: none; animation: none; } .header-search-bar.cb-search-bar .predictive-search__header { display: none; } .header-search-bar.cb-search-bar .predictive-search__results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; width: 100%; height: auto; padding: 0; margin: 0; overflow: visible; list-style: none; } .header-search-bar.cb-search-bar .predictive-search__result-item { min-width: 0; overflow: visible; white-space: normal; } .header-search-bar.cb-search-bar .predictive-search__result-item>a, .header-search-bar.cb-search-bar .predictive-search__product { display: block; width: 100%; color: #222222; text-decoration: none; } .header-search-bar.cb-search-bar .predictive-search__product-image-wrap { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; overflow: hidden; background: #ffffff; } .header-search-bar.cb-search-bar .predictive-search__product-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } .header-search-bar.cb-search-bar .predictive-search__product:hover .predictive-search__product-image { transform: scale(1.015); } .header-search-bar.cb-search-bar .predictive-search__product-content { display: flex; flex-direction: column; gap: 0; align-items: flex-start; padding-block-start: 12px; } .header-search-bar.cb-search-bar .predictive-search__product-title { display: -webkit-box; width: 100%; margin: 0; overflow: hidden; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 15px; font-style: italic; font-weight: 400; line-height: 1.35; letter-spacing: 0; color: #222222; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .header-search-bar.cb-search-bar .predictive-search__product-price { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; margin-block-start: 7px; font-family: "Figtree", var(--font-body-family, Arial, sans-serif); font-size: 13px; font-style: normal; font-weight: 400; line-height: 1.3; color: #222222; word-break: normal; white-space: normal; } .header-search-bar.cb-search-bar .predictive-search__product-save-price { font-family: "Figtree", var(--font-body-family, Arial, sans-serif); font-size: 12px; font-weight: 400; line-height: 1.3; color: #929292; text-decoration: line-through; opacity: 1; }  .header-search-bar.cb-search-bar .predictive-search__footer { position: static; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 72px; padding: 28px 0 18px; margin: 0; overflow: visible; background: #ffffff; border: 0; pointer-events: auto; } .header-search-bar.cb-search-bar .predictive-search__more, .header-search-bar.cb-search-bar .predictive-search__more.button, .header-search-bar.cb-search-bar .predictive-search__footer .button { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 26px; padding: 0 0 4px; margin: 0; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 15px; font-style: italic; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: #222222; text-align: center; text-decoration: none; text-transform: none; white-space: normal; background: transparent; border: 0; border-block-end: 1px solid rgba(34, 34, 34, 0.55); border-radius: 0; box-shadow: none; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .header-search-bar.cb-search-bar .predictive-search__more::before, .header-search-bar.cb-search-bar .predictive-search__more::after, .header-search-bar.cb-search-bar .predictive-search__more>svg { display: none; content: none; } .header-search-bar.cb-search-bar .predictive-search__more:hover { color: #222222; background: transparent; opacity: 0.58; }  .header-section:has(.header-search-bar.open), .header-section.transparent:has(.header-search-bar.open), .header-section.transparent:has(.header-search-bar.open):hover { --header-background: 255, 255, 255; --header-color-text: 34, 34, 34; --header-transparent-color-text: 34, 34, 34; background: #ffffff !important; border-block-end-color: transparent !important; box-shadow: none !important; } .header-section:has(.header-search-bar.open)::after, .header-section.transparent:has(.header-search-bar.open)::after, .header-section.transparent:has(.header-search-bar.open):hover::after { display: none !important; height: 0 !important; background: transparent !important; } .header-section:has(.header-search-bar.open) .header__container, .header-section.transparent:has(.header-search-bar.open) .header__container, .header-section.transparent:has(.header-search-bar.open):hover .header__container { background: #ffffff !important; } .header-section:has(.header-search-bar.open) .header-action-bar, .header-section:has(.header-search-bar.open) .header-action-bar a, .header-section:has(.header-search-bar.open) .header-action-bar button, .header-section:has(.header-search-bar.open) .header-action-bar svg { color: #222222 !important; } .header-section.transparent:has(.header-search-bar.open) .header__logo-link:not(.transparent) { visibility: visible !important; opacity: 1 !important; } .header-section.transparent:has(.header-search-bar.open) .header__logo-link.transparent { visibility: hidden !important; opacity: 0 !important; } .header-action-bar .cart-bubble__count { color: #ffffff !important; background-color: #222222 !important; } @media (min-width: 720px) and (max-width: 1100px) { .header-search-bar.cb-search-bar .predictive-search__results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } } @media (max-width: 719px) { .header-search-bar.cb-search-bar .cb-search-bar__form { padding: 22px 66px 26px 18px; } .cb-search-bar__field { width: 100%; height: 46px; } .header-search-bar.cb-search-bar .cb-search-bar__input { padding-inline-start: 15px; padding-inline-end: 50px; font-size: 17px; } .cb-search-bar__submit { inset-inline-end: 14px; width: 17px; height: 17px; } .cb-search-bar__dismiss { inset-inline-end: 16px; width: 30px; height: 30px; } .header-search-bar.cb-search-bar .header-search-bar__results { height: var(--cb-search-results-height); padding: 18px 18px max(24px, env(safe-area-inset-bottom, 0px)); touch-action: pan-y; overscroll-behavior-y: contain; } .header-search-bar.cb-search-bar .predictive-search__results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; } .header-search-bar.cb-search-bar .predictive-search__product-content { padding-block-start: 9px; } .header-search-bar.cb-search-bar .predictive-search__product-title { font-size: 13px; } .header-search-bar.cb-search-bar .predictive-search__product-price { margin-block-start: 5px; font-size: 12px; } .header-search-bar.cb-search-bar .predictive-search__product-save-price { font-size: 11px; } .header-search-bar.cb-search-bar .predictive-search__footer { min-height: 66px; padding: 24px 0 14px; } .header-search-bar.cb-search-bar .predictive-search__more { max-width: calc(100vw - 36px); font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .header-search-bar.cb-search-bar, .header-search-bar.cb-search-bar .header-search-bar__backdrop, .header-search-bar.cb-search-bar .predictive-search__product-image { transition: none !important; } }  .header-search-bar.cb-search-bar .cb-search-bar__dismiss { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; color: #222222 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .header-search-bar.cb-search-bar .cb-search-bar__dismiss svg { display: block !important; width: 12px !important; height: 12px !important; } .header-search-bar.cb-search-bar .cb-search-bar__dismiss svg [stroke] { stroke-width: 1.1px !important; vector-effect: non-scaling-stroke; }  @media (max-width: 959px) { .header-search-bar.cb-search-bar .cb-search-bar__dismiss { width: 42px !important; height: 42px !important; } .header-search-bar.cb-search-bar .cb-search-bar__dismiss svg { width: 10px !important; height: 10px !important; } }  .header-search-bar.cb-search-bar .predictive-search__product-content { align-items: center !important; width: 100% !important; text-align: center !important; } .header-search-bar.cb-search-bar .predictive-search__product-title { width: 100% !important; text-align: center !important; } .header-search-bar.cb-search-bar .predictive-search__product-price { justify-content: center !important; width: 100% !important; text-align: center !important; } .header-search-bar.cb-search-bar .predictive-search__product-save-price { text-align: center !important; }     @media (max-width: 959px) {  .header-section { --mr-mobile-search-color: rgb(var(--header-color-text)); } .header-section.transparent { --mr-mobile-search-color: rgb(var(--header-transparent-color-text, var(--header-color-text))); } .theme-sticky-header--sticky .header-section.transparent, .theme-sticky-header--sticky .header-section.transparent:hover { --mr-mobile-search-color: rgb(var(--header-color-text)); } .header-section:has(.header-search-bar.open), .header-section.transparent:has(.header-search-bar.open), .header-section.transparent:has(.header-search-bar.open):hover { --mr-mobile-search-color: #222222; } .header__container[mobile-layout] .header-action-bar.right .header-action-bar__search.header-action-bar__cb-search-mobile { color: var(--mr-mobile-search-color) !important;  transition: none !important; } .header-action-bar__cb-search-mobile-svg { display: block !important; width: 22px !important; height: 22px !important; overflow: visible !important; color: inherit !important; fill: none !important; transition: none !important; } .header-action-bar__cb-search-mobile-svg circle, .header-action-bar__cb-search-mobile-svg path { fill: none !important; stroke: currentColor !important; stroke-width: 1px !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke; transition: none !important; } } @media (max-width: 420px) { .header-action-bar__cb-search-mobile-svg { width: 20px !important; height: 20px !important; } }          .header-nav-drawer { --cb-menu-panel-width: clamp(400px, 35vw, 455px); --cb-main-feature-width: min(66.6504dvh, calc(100vw - var(--cb-menu-panel-width) - 32px)); --cb-active-feature-width: var(--cb-main-feature-width); --header-nav-drawer-slide-anime-duration: 360ms; --header-background: 255, 255, 255; --header-color-text: 34, 34, 34; --color-background: 255, 255, 255; --color-text: 34, 34, 34; --color-entry-line: 34, 34, 34; color: #222222 !important; } .header-nav-drawer__backdrop { background: rgb(0 0 0 / 22%) !important; } .header-nav-drawer__content.cb-nav-drawer { position: fixed !important; inset: 0 auto auto 0 !important; display: block !important; width: calc(var(--cb-menu-panel-width) + var(--cb-main-feature-width)) !important; min-width: 0 !important; max-width: calc(100vw - 32px) !important; height: 100dvh !important; padding: 0 !important; overflow: hidden !important; color: #222222 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: translateX(-100%) !important; transition: width 220ms ease, transform var(--header-nav-drawer-slide-anime-duration) cubic-bezier(0.22, 1, 0.36, 1) !important; } .header-nav-drawer.open .header-nav-drawer__content.cb-nav-drawer { transform: translateX(0) !important; } .header-nav-drawer.cb-submenu-active .header-nav-drawer__content.cb-nav-drawer { width: calc(var(--cb-menu-panel-width) + var(--cb-active-feature-width)) !important; } .cb-nav-drawer a, .cb-nav-drawer a:hover { color: inherit !important; text-decoration: none !important; } .cb-nav-drawer__main-view { position: relative; display: grid; grid-template-columns: var(--cb-menu-panel-width) var(--cb-main-feature-width); width: calc(var(--cb-menu-panel-width) + var(--cb-main-feature-width)); max-width: calc(100vw - 32px); height: 100dvh; min-height: 0; overflow: hidden; background: #ffffff; transition: width 220ms ease; } .header-nav-drawer.cb-submenu-active .cb-nav-drawer__main-view { width: calc(var(--cb-menu-panel-width) + var(--cb-active-feature-width)); } .cb-nav-drawer__panel { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100dvh; min-height: 0; overflow-x: hidden; overflow-y: auto; color: #222222; background: #ffffff; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cb-nav-drawer__panel::-webkit-scrollbar, .cb-nav-drawer__submenu-panel::-webkit-scrollbar, .cb-nav-drawer__submenu-scroll::-webkit-scrollbar, .cb-nav-drawer__submenu-media::-webkit-scrollbar { display: none; } .cb-nav-drawer__panel.cb-locale-panel-open { overflow: hidden !important; } .cb-nav-drawer__header { flex: 0 0 auto; padding: 45px 30px 0; } .cb-nav-drawer__close { display: inline-flex; align-items: center; min-height: 18px; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.045em; color: #222222 !important; text-transform: uppercase; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: opacity 180ms ease; } .cb-nav-drawer__close:hover, .cb-nav-drawer__primary-link:hover, .cb-nav-drawer__primary-button:hover, .cb-nav-drawer__campaign-link:hover, .cb-nav-drawer__submenu-link:hover, .cb-nav-drawer__submenu-group-title:hover, .cb-nav-drawer__submenu-back:hover, .cb-locale-picker__trigger:hover { opacity: 0.62; } .cb-nav-drawer__close:focus-visible, .cb-nav-drawer button:focus-visible, .cb-nav-drawer a:focus-visible, .cb-locale-picker__trigger:focus-visible { outline: 1px solid #222222; outline-offset: 4px; } .cb-nav-drawer__shopping { display: block; flex: 0 0 auto; padding: 0 30px 28px; margin-block-start: 54px; } .cb-nav-drawer__main-list, .cb-nav-drawer__submenu-links { padding: 0; margin: 0; list-style: none; } .cb-nav-drawer__main-item { position: static; padding: 0; margin: 0; } .cb-nav-drawer__primary-link, .cb-nav-drawer__primary-button { appearance: none; display: block; width: fit-content; max-width: 100%; padding: 0; margin: 0 0 27px; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 28px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0.005em; color: #222222 !important; text-align: left; text-transform: uppercase; white-space: normal; cursor: pointer; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: opacity 180ms ease; -webkit-appearance: none; } .cb-nav-drawer__primary-link.cb-nav-drawer__campaign-link, .cb-nav-drawer__primary-button.cb-nav-drawer__campaign-link { margin-block-start: 9px; font-size: 17px; font-style: italic; line-height: 1.2; letter-spacing: 0; text-transform: none; } .header-nav-drawer__footer.cb-nav-drawer__locale { display: block !important; flex: 0 0 auto; width: auto !important; padding: 0 30px 34px !important; margin: auto 0 0 !important; color: #222222 !important; background: transparent !important; border: 0 !important; }  .cb-nav-drawer__main-utility { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 13px; width: 100%; padding: 22px 30px 20px; margin: 0; color: #222222; background: #ffffff; border-block-start: 1px solid rgb(34 34 34 / 52%); } .cb-nav-drawer__main-utility-link { display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 0; margin: 0; font-family: var(--body-font-family, Arial, Helvetica, sans-serif); font-size: 13px; font-style: normal; font-weight: 400; line-height: 1.35; letter-spacing: 0.08em; color: #222222 !important; text-transform: uppercase; transition: opacity 180ms ease; } .cb-nav-drawer__main-utility-icon { display: inline-flex; flex: 0 0 14px; align-items: center; justify-content: center; width: 14px; height: 14px; color: currentColor; } .cb-nav-drawer__main-utility-icon svg { display: block; width: 14px; height: 14px; overflow: visible; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; fill: none; } .cb-nav-drawer__main-utility-link:hover { opacity: 0.62; } .cb-nav-drawer__main-utility-link:focus-visible { outline: 1px solid #222222; outline-offset: 4px; }  .cb-nav-drawer__feature { position: relative; z-index: 1; display: block; width: var(--cb-main-feature-width); min-width: 0; height: 100dvh; overflow: hidden; color: #ffffff !important; background: #ffffff; } .cb-nav-drawer__feature-image, .cb-nav-drawer__feature>img, .cb-nav-drawer__submenu-fallback>img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: 50% 50% !important; background: #ffffff !important; } .cb-nav-drawer__feature-shade { position: absolute; inset: auto 0 0; height: 28%; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 32%) 100%); } .cb-nav-drawer__feature-cta { position: absolute; inset-inline: 28px; inset-block-end: 50px; z-index: 2; display: block; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0.085em; color: #ffffff; text-align: center; text-transform: uppercase; }  .cb-nav-drawer__submenu-view { position: absolute; inset: 0; z-index: 20; display: grid; grid-template-columns: var(--cb-menu-panel-width) var(--cb-active-feature-width); width: calc(var(--cb-menu-panel-width) + var(--cb-active-feature-width)); max-width: calc(100vw - 32px); height: 100dvh; min-height: 0; overflow: hidden; visibility: hidden; background: #ffffff; opacity: 0; pointer-events: none; transform: translateX(24px); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 1ms linear 320ms; } .cb-nav-drawer__submenu-view.is-active { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 1ms linear 0ms; } .cb-nav-drawer__submenu-panel { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100dvh; min-height: 0; overflow: hidden; color: #222222; background: #ffffff; border-inline-end: 1px solid rgb(34 34 34 / 12%); } .cb-nav-drawer__submenu-topbar { flex: 0 0 auto; padding: 45px 30px 25px; } .cb-nav-drawer__submenu-heading-row { flex: 0 0 auto; padding: 0 30px 28px; border-block-start: 1px solid #222222; } .cb-nav-drawer__submenu-back { appearance: none; display: inline-flex; gap: 16px; align-items: center; width: auto; max-width: 100%; padding: 25px 0 0; margin: 0; color: #222222; cursor: pointer; background: transparent; border: 0; border-radius: 0; box-shadow: none; transition: opacity 180ms ease; -webkit-appearance: none; } .cb-nav-drawer__submenu-back-icon { display: block; width: 10px; height: 10px; border-block-start: 1px solid #222222; border-inline-start: 1px solid #222222; transform: rotate(-45deg); } .cb-nav-drawer__submenu-heading { display: block; overflow: hidden; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 28px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0.005em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .cb-nav-drawer__submenu-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 10px 30px 42px; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cb-nav-drawer__submenu-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 34px; align-items: start; } .cb-nav-drawer__submenu-group { min-width: 0; } .cb-nav-drawer__submenu-group-title { display: inline-block; width: fit-content; max-width: 100%; margin: 0 0 14px; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 17px; font-style: italic; font-weight: 400; line-height: 1.15; letter-spacing: 0; color: #222222 !important; transition: opacity 180ms ease; } .cb-nav-drawer__submenu-links { display: flex; flex-direction: column; gap: 10px; } .cb-nav-drawer__submenu-link { display: inline-block; width: fit-content; max-width: 100%; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: 1.25; letter-spacing: 0.002em; color: #222222 !important; transition: opacity 180ms ease; } .cb-nav-drawer__submenu-link--standalone { font-size: 17px; font-style: italic; }  .cb-nav-drawer__submenu-media { position: relative; width: var(--cb-active-feature-width); min-width: 0; height: 100dvh; overflow: hidden; background: #ffffff; } .cb-nav-drawer__submenu-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; color: #ffffff !important; background: #ffffff; }  .cb-nav-drawer__submenu-media>.cb-nav-drawer__gallery-source { display: block !important; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: #ffffff; } .cb-nav-drawer__gallery-grid { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y proximity; background: #ffffff; } .cb-nav-drawer__gallery-grid::-webkit-scrollbar { display: none; } .cb-nav-drawer__gallery-card { position: relative; display: block; flex: 0 0 100dvh; width: 100%; height: 100dvh; min-width: 0; min-height: 0; overflow: hidden; color: #ffffff !important; background: #ffffff; border: 0; scroll-snap-align: start; } .cb-nav-drawer__gallery-image, .cb-nav-drawer__gallery-card>img, .cb-nav-drawer__gallery-card picture, .cb-nav-drawer__gallery-card picture>img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: 50% 50% !important; background: #ffffff !important; } .cb-nav-drawer__gallery-shade { position: absolute; inset: auto 0 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 36%) 100%); } .cb-nav-drawer__gallery-title { position: absolute; inset-inline: 22px; inset-block-end: 25px; z-index: 2; display: block; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 19px; font-style: normal; font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; color: #ffffff; text-align: center; text-transform: uppercase; }    .cb-nav-drawer__locale theme-dropdown-menu, .cb-nav-drawer__locale .dropdown-menu__list, .cb-nav-drawer__locale .dropdown-menu__label-arrow { display: none !important; } .cb-locale-picker, .cb-locale-picker>form { display: block !important; width: 100% !important; } .cb-locale-picker__triggers { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; width: 100%; } .cb-locale-picker__trigger { appearance: none; display: inline-flex; gap: 12px; align-items: center; width: fit-content; min-height: 18px; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.075em; color: #222222; text-align: left; text-transform: uppercase; cursor: pointer; background: transparent; border: 0; border-radius: 0; box-shadow: none; transition: opacity 180ms ease; -webkit-appearance: none; } .cb-locale-picker__currency-icon { box-sizing: border-box; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 17px; height: 17px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 500; line-height: 1; color: #222222; border: 1px solid #222222; border-radius: 50%; } .cb-locale-picker__globe-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 17px; height: 17px; color: #222222; } .cb-locale-picker__globe-icon svg { display: block; width: 100%; height: 100%; } .cb-locale-drawer { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: calc(var(--z-index-fixed) + 4); display: block; width: var(--cb-menu-panel-width); height: 100dvh; overflow-x: hidden; overflow-y: auto; color: #222222; visibility: hidden; background: #ffffff; opacity: 0; transform: translateX(-100%); scrollbar-width: none; overscroll-behavior: contain; pointer-events: none; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease, visibility 1ms linear 360ms; -webkit-overflow-scrolling: touch; } .cb-locale-drawer::-webkit-scrollbar { display: none; } .cb-locale-drawer.is-open { visibility: visible; opacity: 1; transform: translateX(0); pointer-events: auto; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease, visibility 1ms linear 0ms; } .cb-locale-drawer__header { position: relative; display: flex; align-items: flex-start; justify-content: flex-end; min-height: 250px; padding: 44px 28px 0; background: #ffffff; } .cb-locale-drawer__close { appearance: none; position: relative; display: block; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; margin: 0; cursor: pointer; background: transparent; border: 1px solid #222222; border-radius: 0; box-shadow: none; -webkit-appearance: none; } .cb-locale-drawer__close span { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; display: block; width: 22px; height: 1px; background: #222222; transform-origin: center; } .cb-locale-drawer__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .cb-locale-drawer__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .cb-locale-drawer__close:hover { opacity: 0.62; } .cb-locale-drawer__list { padding: 0; margin: 0; list-style: none; border-block-start: 1px solid #222222; } .cb-locale-drawer__row { min-height: 92px; border-block-end: 1px solid #222222; } .cb-locale-drawer__option { position: relative; display: flex; align-items: center; width: 100%; min-height: 92px; padding: 22px 38px; margin: 0; font-family: "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif; font-size: 27px; font-style: italic; font-weight: 400; line-height: 1.15; letter-spacing: 0; color: #222222; cursor: pointer; background: #ffffff; transition: background-color 160ms ease; } .cb-locale-drawer__option:hover { background: rgb(34 34 34 / 4%); } .cb-locale-drawer__option input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; pointer-events: none; }    @media (max-width: 959px) { .header-nav-drawer { --cb-menu-panel-width: 100vw; --cb-main-feature-width: 100vw; --cb-active-feature-width: 100vw; } .header-nav-drawer__content.cb-nav-drawer, .header-nav-drawer.cb-submenu-active .header-nav-drawer__content.cb-nav-drawer { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; overflow: hidden !important; background: #ffffff !important; } .cb-nav-drawer__main-view, .header-nav-drawer.cb-submenu-active .cb-nav-drawer__main-view { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; grid-template-columns: none !important; grid-template-rows: none !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cb-nav-drawer__main-view::-webkit-scrollbar, .cb-nav-drawer__submenu-view::-webkit-scrollbar { display: none; } .cb-nav-drawer__panel { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } .cb-nav-drawer__header { padding: 31px 25px 0; } .cb-nav-drawer__shopping { padding: 0 25px 20px; margin-block-start: 46px; } .cb-nav-drawer__main-utility { gap: 11px; padding: 17px 25px 12px; border-block-start-width: 1px; } .cb-nav-drawer__main-utility-link { gap: 9px; font-size: 13px; font-weight: 400; line-height: 1.35; letter-spacing: 0.08em; } .cb-nav-drawer__main-utility-icon, .cb-nav-drawer__main-utility-icon svg { width: 14px; height: 14px; } .cb-nav-drawer__primary-link, .cb-nav-drawer__primary-button { margin-block-end: 24px; font-size: 25px; } .cb-nav-drawer__primary-link.cb-nav-drawer__campaign-link, .cb-nav-drawer__primary-button.cb-nav-drawer__campaign-link { font-size: 16px; } .header-nav-drawer__footer.cb-nav-drawer__locale { padding: 0 25px 30px !important; } .cb-nav-drawer__feature { position: relative !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin-block-start: 4px !important; aspect-ratio: auto !important; overflow: hidden !important; background: #ffffff !important; } .cb-nav-drawer__feature-image, .cb-nav-drawer__feature>img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; object-fit: contain !important; object-position: 50% 50% !important; } .cb-nav-drawer__feature-cta { inset-inline: 20px; inset-block-end: 40px; font-size: 13px; } .cb-nav-drawer__submenu-view { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; grid-template-columns: none !important; grid-template-rows: none !important; transform: translateX(100%); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cb-nav-drawer__submenu-view.is-active { transform: translateX(0); } .cb-nav-drawer__submenu-panel { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; border-inline-end: 0 !important; border-block-end: 0 !important; } .cb-nav-drawer__submenu-topbar { padding: 31px 25px 20px; } .cb-nav-drawer__submenu-heading-row { padding: 0 25px 22px; } .cb-nav-drawer__submenu-back { padding-block-start: 20px; } .cb-nav-drawer__submenu-heading { font-size: 25px; } .cb-nav-drawer__submenu-scroll { flex: 0 0 auto !important; min-height: 0 !important; padding: 8px 25px 10px; overflow: visible !important; } .cb-nav-drawer__submenu-groups { gap: 24px 26px; } .cb-nav-drawer__submenu-group-title, .cb-nav-drawer__submenu-link--standalone { font-size: 16px; } .cb-nav-drawer__submenu-link { font-size: 14px; } .cb-nav-drawer__submenu-media { position: relative !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin-top: 6px !important; overflow: visible !important; background: #ffffff !important; } .cb-nav-drawer__submenu-fallback { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; overflow: hidden !important; background: #ffffff !important; } .cb-nav-drawer__submenu-fallback .cb-nav-drawer__feature-image, .cb-nav-drawer__submenu-fallback>img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; object-fit: contain !important; object-position: 50% 50% !important; } .cb-nav-drawer__submenu-media>.cb-nav-drawer__gallery-source { display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; } .cb-nav-drawer__gallery-grid { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; scroll-snap-type: none; } .cb-nav-drawer__gallery-card { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; background: #ffffff !important; } .cb-nav-drawer__gallery-image, .cb-nav-drawer__gallery-card>img, .cb-nav-drawer__gallery-card picture, .cb-nav-drawer__gallery-card picture>img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; object-fit: contain !important; object-position: 50% 50% !important; } .cb-nav-drawer__gallery-title { inset-inline: 12px; inset-block-end: 15px; font-size: 14px; } .cb-locale-drawer { width: 100vw; } .cb-locale-drawer__header { min-height: 245px; padding: 44px 24px 0; } .cb-locale-drawer__close { width: 50px; height: 50px; } .cb-locale-drawer__row, .cb-locale-drawer__option { min-height: 82px; } .cb-locale-drawer__option { padding: 20px 30px; font-size: 25px; } } @media (max-width: 420px) { .cb-nav-drawer__submenu-groups { grid-template-columns: 1fr 1fr; gap: 22px 20px; } .cb-locale-drawer__option { padding-inline: 25px; font-size: 23px; } } @media (max-height: 700px) and (min-width: 960px) { .cb-nav-drawer__header, .cb-nav-drawer__submenu-topbar { padding-block-start: 30px; } .cb-nav-drawer__shopping { margin-block-start: 38px; } .cb-nav-drawer__primary-link, .cb-nav-drawer__primary-button { margin-block-end: 20px; font-size: 25px; } .cb-nav-drawer__submenu-heading { font-size: 25px; } } @media (prefers-reduced-motion: reduce) { .header-nav-drawer__content.cb-nav-drawer, .cb-nav-drawer__submenu-view, .cb-locale-drawer { transition: none !important; } }  .cb-nav-drawer__main-utility { display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 15px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 34px 36px 12px !important; margin: 0 !important; overflow: visible !important; color: #222222 !important; background: #ffffff !important; border-block-start: 1px solid rgb(34 34 34 / 52%) !important; } .cb-nav-drawer__main-utility-link { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-style: normal !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.075em !important; color: #222222 !important; text-decoration: none !important; text-transform: uppercase !important; white-space: nowrap !important; transition: opacity 180ms ease !important; }  .cb-nav-drawer__main-utility-icon { display: inline-flex !important; flex: 0 0 13px !important; align-items: center !important; justify-content: center !important; width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; margin: 0 !important; color: #222222 !important; opacity: 0.88 !important; } .cb-nav-drawer__main-utility-icon svg { display: block !important; width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; overflow: visible !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.05 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }  .cb-nav-drawer__main-utility-link::before, .cb-nav-drawer__main-utility-link::after { content: none !important; display: none !important; } .cb-nav-drawer__main-utility-link:hover { opacity: 0.62 !important; } .cb-nav-drawer__main-utility-link:focus-visible { outline: 1px solid #222222 !important; outline-offset: 4px !important; } @media (max-width: 959px) { .cb-nav-drawer__main-utility { gap: 15px !important; padding: 28px 25px 8px !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; } .cb-nav-drawer__main-utility-link { gap: 9px !important; width: fit-content !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.075em !important; } .cb-nav-drawer__main-utility-icon, .cb-nav-drawer__main-utility-icon svg { width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; } }