/** Shopify CDN: Minification failed
Line 91:0 All "@import" rules must come first
**/
/* START_SECTION:header-announcements (INDEX:13) */
.announcement-bar {
border-block-end: var(--border-bottom-width) solid var(--color-border);
}
.announcement-bar__slider {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
@media screen and (max-width: 749px) {
grid-column: 1 / -1;
}
}
.announcement-bar__slides {
display: grid;
grid: [stack] auto / [stack] auto;
width: calc(100% - var(--button-size) * 2);
max-width: 680px;
margin-inline: auto;
}
.announcement-bar__slides > * {
grid-area: stack;
}
.announcement-bar__slide {
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
content-visibility: visible;
&[aria-hidden='true'] {
opacity: 0;
visibility: hidden;
}
}
.announcement-bar__slider slideshow-arrows {
padding: 0;
mix-blend-mode: normal;
}
.announcement-bar__slider slideshow-arrows .slideshow-control {
color: var(--color-foreground);
}
.announcement-bar__slider .slideshow-control {
display: flex;
padding: 0;
width: var(--button-size);
height: var(--button-size);
align-items: center;
justify-content: center;
opacity: 1;
animation: none;
@media screen and (min-width: 750px) {
--slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);
.section--page-width &.slideshow-control--previous {
transform: translateX(var(--slideshow-control-offset));
}
}
}
.announcement-bar__slider .slideshow-control .svg-wrapper {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
.announcement-bar__slide {
place-content: center;
}
.announcement-bar__text:first-child {
margin: 0;
}
.announcement-bar__link {
position: absolute;
inset: 0;
}
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX:14) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--stella-ivory: #FAF8F5;
--stella-warm-white: #F5F0EB;
--stella-beige-nude: #E8DDD3;
--stella-champagne: #D4C5B5;
--stella-soft-blush: #E8C8C0;
--stella-rose-nude: #C9A99A;
--stella-black: #1A1A1A;
--stella-charcoal: #333333;
--stella-gold-muted: #B8976A;
--stella-gold-light: #D4B896;
--stella-text-primary: #1A1A1A;
--stella-text-secondary: #666666;
--stella-text-light: #999999;
--stella-border-light: #E8E4DF;
--stella-sale-red: #C45B4A;
}
body {
--stella-top-row-height: max(78px, calc(var(--stella-logo-height-desktop, 70px) + 26px));
--stella-bottom-row-height: 52px;
--header-height: calc(var(--stella-top-row-height) + var(--stella-bottom-row-height));
--header-group-height: var(--header-height);
--transparent-header-offset-boolean: 0;
}
.header-section {
position: relative;
z-index: var(--layer-heightened, 10);
width: 100%;
}
.header-section:has(> #header-component[sticky='always']),
.header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
position: sticky;
top: 0;
z-index: var(--layer-sticky, 100);
}
.stella-header {
--header-padding: 0;
--font-paragraph--line-height: 1;
--header-content-transition-timing: 0.25s ease;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
contain: none;
overflow: visible;
position: relative;
background: rgba(250, 248, 245, 0.96);
color: var(--stella-text-primary);
border-bottom: 1px solid var(--stella-border-light);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: none;
box-sizing: border-box;
}
.stella-header *,
.stella-header *::before,
.stella-header *::after {
box-sizing: border-box;
}
.stella-header__row {
position: relative;
width: 100%;
min-width: 0;
background: transparent;
overflow: visible;
}
.stella-header__row--top {
border-bottom: 1px solid var(--stella-border-light);
}
.stella-header__row--bottom {
border-bottom: 0;
}
.stella-header__top-inner {
width: 100%;
max-width: var(--stella-header-max-width, 1680px);
min-height: var(--stella-top-row-height);
margin: 0 auto;
padding-inline: clamp(16px, 2.7vw, 48px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
position: relative;
overflow: visible;
}
.stella-header--compact .stella-header__top-inner {
--stella-top-row-height: max(66px, calc(var(--stella-logo-height-desktop, 70px) + 20px));
}
.stella-header__side {
display: flex;
align-items: center;
min-width: 0;
z-index: 3;
}
.stella-header__side--left {
justify-content: flex-start;
flex: 1 1 0;
}
.stella-header__side--right {
justify-content: flex-end;
flex: 1 1 0;
gap: 8px;
margin-left: auto;
}
.stella-header__brand {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
width: auto;
max-width: min(620px, calc(100% - 360px));
min-width: 0;
text-align: center;
pointer-events: auto;
}
/* ── Single bar layout (logo left) ── */
.stella-header__top-inner--single {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--stella-top-row-height);
gap: 24px;
}
.stella-header__top-inner--single .header-logo img,
.stella-header__top-inner--single .header-logo picture,
.stella-header__top-inner--single .header-logo__image {
max-height: var(--stella-logo-height-desktop, 70px) !important;
width: auto !important;
max-width: 280px !important;
object-fit: contain;
display: block;
}
.stella-header__nav-inline {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
overflow: visible;
}
.stella-header__nav-inline header-menu,
.stella-header__nav-inline .header-menu {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.stella-header--logo-left .stella-header__brand {
position: static;
transform: none;
left: auto;
top: auto;
justify-content: flex-start;
flex: 0 0 auto;
order: -1;
max-width: min(400px, 40%);
}
.stella-header--logo-left .stella-header__side--left {
flex: 0 0 auto;
}
.stella-header--logo-left .stella-header__top-inner {
justify-content: flex-start;
gap: 32px;
}
.stella-header--logo-left .stella-header__side--right {
margin-left: auto;
flex: 0 0 auto;
}
.stella-header--logo-right .stella-header__brand {
position: static;
transform: none;
left: auto;
top: auto;
justify-content: flex-end;
flex: 0 0 auto;
order: 1;
max-width: min(400px, 40%);
}
.stella-header__brand .header-logo,
.stella-header__brand .header-logo a,
.stella-header__brand a {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
min-width: 0;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(25px, 2.2vw, 34px);
font-weight: 600;
letter-spacing: clamp(3px, 0.32vw, 5px);
line-height: 1;
text-transform: uppercase;
color: var(--stella-black);
white-space: nowrap;
overflow: visible;
text-decoration: none;
}
.stella-header__brand .header-logo img,
.stella-header__brand img,
.stella-header__brand picture,
.stella-header__brand .header-logo__image,
.stella-header__brand .header-logo__image-container {
display: block;
width: auto !important;
height: auto !important;
max-width: min(620px, calc(100vw - 380px)) !important;
max-height: var(--stella-logo-height-desktop, 70px) !important;
object-fit: contain;
}
.stella-header__brand svg {
width: auto;
height: auto;
max-width: min(620px, calc(100vw - 380px));
max-height: var(--stella-logo-height-desktop, 70px);
}
.stella-header__brand em,
.stella-header__brand i {
font-style: italic;
font-weight: 300;
letter-spacing: clamp(2.5px, 0.28vw, 4px);
}
.stella-header__mobile-drawer {
display: none;
}
.stella-header__search,
.stella-header__actions {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.stella-header__actions {
justify-content: flex-end;
}
.stella-header__actions header-actions,
.stella-header__actions .header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
min-width: 0;
}
.stella-header__search > .search-action,
.stella-header__search > .header-actions__action,
.stella-header__search > a,
.stella-header__search > button,
.stella-header__search > search-modal > .search-action,
.stella-header__search > search-modal > .header-actions__action,
.stella-header__search > search-modal > a,
.stella-header__search > search-modal > button,
.stella-header__search > predictive-search > .search-action,
.stella-header__search > predictive-search > .header-actions__action,
.stella-header__search > predictive-search > a,
.stella-header__search > predictive-search > button,
.stella-header__actions > .header-actions__action,
.stella-header__actions > a,
.stella-header__actions > button,
.stella-header__actions > header-actions > .header-actions__action,
.stella-header__actions > header-actions > a,
.stella-header__actions > header-actions > button,
.stella-header__actions > header-actions > shopify-account > .header-actions__action,
.stella-header__actions > header-actions > shopify-account > a,
.stella-header__actions > header-actions > shopify-account > button,
.stella-header__actions > header-actions > cart-drawer-component > .header-actions__action,
.stella-header__actions > header-actions > cart-drawer-component > a,
.stella-header__actions > header-actions > cart-drawer-component > button,
.stella-header__actions > header-actions > cart-icon > .header-actions__action,
.stella-header__actions > header-actions > cart-icon > a,
.stella-header__actions > header-actions > cart-icon > button,
.stella-header__actions > .header-actions > .header-actions__action,
.stella-header__actions > .header-actions > a,
.stella-header__actions > .header-actions > button,
.stella-header__actions > .header-actions > shopify-account > .header-actions__action,
.stella-header__actions > .header-actions > shopify-account > a,
.stella-header__actions > .header-actions > shopify-account > button,
.stella-header__actions > .header-actions > cart-drawer-component > .header-actions__action,
.stella-header__actions > .header-actions > cart-drawer-component > a,
.stella-header__actions > .header-actions > cart-drawer-component > button,
.stella-header__actions > .header-actions > cart-icon > .header-actions__action,
.stella-header__actions > .header-actions > cart-icon > a,
.stella-header__actions > .header-actions > cart-icon > button {
width: var(--stella-header-action-size);
height: var(--stella-header-action-size);
min-width: var(--stella-header-action-size);
min-height: var(--stella-header-action-size);
max-width: var(--stella-header-action-size);
max-height: var(--stella-header-action-size);
padding: 0;
margin: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--stella-text-secondary);
background: transparent;
border-color: transparent;
text-decoration: none;
line-height: 1;
flex: 0 0 var(--stella-header-action-size);
transition:
color var(--header-content-transition-timing),
background-color var(--header-content-transition-timing),
border-color var(--header-content-transition-timing),
opacity var(--header-content-transition-timing);
}
.stella-header__search > .search-action:hover,
.stella-header__search > .header-actions__action:hover,
.stella-header__search > a:hover,
.stella-header__search > button:hover,
.stella-header__search > search-modal > .search-action:hover,
.stella-header__search > search-modal > .header-actions__action:hover,
.stella-header__search > search-modal > a:hover,
.stella-header__search > search-modal > button:hover,
.stella-header__search > predictive-search > .search-action:hover,
.stella-header__search > predictive-search > .header-actions__action:hover,
.stella-header__search > predictive-search > a:hover,
.stella-header__search > predictive-search > button:hover,
.stella-header__actions > .header-actions__action:hover,
.stella-header__actions > a:hover,
.stella-header__actions > button:hover,
.stella-header__actions > header-actions > .header-actions__action:hover,
.stella-header__actions > header-actions > a:hover,
.stella-header__actions > header-actions > button:hover,
.stella-header__actions > header-actions > shopify-account > .header-actions__action:hover,
.stella-header__actions > header-actions > shopify-account > a:hover,
.stella-header__actions > header-actions > shopify-account > button:hover,
.stella-header__actions > header-actions > cart-drawer-component > .header-actions__action:hover,
.stella-header__actions > header-actions > cart-drawer-component > a:hover,
.stella-header__actions > header-actions > cart-drawer-component > button:hover,
.stella-header__actions > header-actions > cart-icon > .header-actions__action:hover,
.stella-header__actions > header-actions > cart-icon > a:hover,
.stella-header__actions > header-actions > cart-icon > button:hover,
.stella-header__actions > .header-actions > .header-actions__action:hover,
.stella-header__actions > .header-actions > a:hover,
.stella-header__actions > .header-actions > button:hover,
.stella-header__actions > .header-actions > shopify-account > .header-actions__action:hover,
.stella-header__actions > .header-actions > shopify-account > a:hover,
.stella-header__actions > .header-actions > shopify-account > button:hover,
.stella-header__actions > .header-actions > cart-drawer-component > .header-actions__action:hover,
.stella-header__actions > .header-actions > cart-drawer-component > a:hover,
.stella-header__actions > .header-actions > cart-drawer-component > button:hover,
.stella-header__actions > .header-actions > cart-icon > .header-actions__action:hover,
.stella-header__actions > .header-actions > cart-icon > a:hover,
.stella-header__actions > .header-actions > cart-icon > button:hover {
color: var(--stella-black);
background: var(--stella-warm-white);
}
.stella-header__search > .search-action svg,
.stella-header__search > .header-actions__action svg,
.stella-header__search > a svg,
.stella-header__search > button svg,
.stella-header__search > search-modal > .search-action svg,
.stella-header__search > search-modal > .header-actions__action svg,
.stella-header__search > search-modal > a svg,
.stella-header__search > search-modal > button svg,
.stella-header__search > predictive-search > .search-action svg,
.stella-header__search > predictive-search > .header-actions__action svg,
.stella-header__search > predictive-search > a svg,
.stella-header__search > predictive-search > button svg,
.stella-header__actions > .header-actions__action svg,
.stella-header__actions > a svg,
.stella-header__actions > button svg,
.stella-header__actions > header-actions > .header-actions__action svg,
.stella-header__actions > header-actions > a svg,
.stella-header__actions > header-actions > button svg,
.stella-header__actions > header-actions > shopify-account > .header-actions__action svg,
.stella-header__actions > header-actions > shopify-account > a svg,
.stella-header__actions > header-actions > shopify-account > button svg,
.stella-header__actions > header-actions > cart-drawer-component > .header-actions__action svg,
.stella-header__actions > header-actions > cart-drawer-component > a svg,
.stella-header__actions > header-actions > cart-drawer-component > button svg,
.stella-header__actions > header-actions > cart-icon > .header-actions__action svg,
.stella-header__actions > header-actions > cart-icon > a svg,
.stella-header__actions > header-actions > cart-icon > button svg,
.stella-header__actions > .header-actions > .header-actions__action svg,
.stella-header__actions > .header-actions > a svg,
.stella-header__actions > .header-actions > button svg,
.stella-header__actions > .header-actions > shopify-account > .header-actions__action svg,
.stella-header__actions > .header-actions > shopify-account > a svg,
.stella-header__actions > .header-actions > shopify-account > button svg,
.stella-header__actions > .header-actions > cart-drawer-component > .header-actions__action svg,
.stella-header__actions > .header-actions > cart-drawer-component > a svg,
.stella-header__actions > .header-actions > cart-drawer-component > button svg,
.stella-header__actions > .header-actions > cart-icon > .header-actions__action svg,
.stella-header__actions > .header-actions > cart-icon > a svg,
.stella-header__actions > .header-actions > cart-icon > button svg {
width: var(--stella-header-icon-size) !important;
height: var(--stella-header-icon-size) !important;
min-width: var(--stella-header-icon-size) !important;
min-height: var(--stella-header-icon-size) !important;
max-width: var(--stella-header-icon-size) !important;
max-height: var(--stella-header-icon-size) !important;
display: block;
flex: 0 0 var(--stella-header-icon-size);
}
.stella-header__search > .search-action .svg-wrapper,
.stella-header__search > .header-actions__action .svg-wrapper,
.stella-header__search > a .svg-wrapper,
.stella-header__search > button .svg-wrapper,
.stella-header__search > search-modal > .search-action .svg-wrapper,
.stella-header__search > search-modal > .header-actions__action .svg-wrapper,
.stella-header__search > search-modal > a .svg-wrapper,
.stella-header__search > search-modal > button .svg-wrapper,
.stella-header__search > predictive-search > .search-action .svg-wrapper,
.stella-header__search > predictive-search > .header-actions__action .svg-wrapper,
.stella-header__search > predictive-search > a .svg-wrapper,
.stella-header__search > predictive-search > button .svg-wrapper,
.stella-header__actions > .header-actions__action .svg-wrapper,
.stella-header__actions > a .svg-wrapper,
.stella-header__actions > button .svg-wrapper,
.stella-header__actions > header-actions > .header-actions__action .svg-wrapper,
.stella-header__actions > header-actions > a .svg-wrapper,
.stella-header__actions > header-actions > button .svg-wrapper,
.stella-header__actions > header-actions > shopify-account > .header-actions__action .svg-wrapper,
.stella-header__actions > header-actions > shopify-account > a .svg-wrapper,
.stella-header__actions > header-actions > shopify-account > button .svg-wrapper,
.stella-header__actions > header-actions > cart-drawer-component > .header-actions__action .svg-wrapper,
.stella-header__actions > header-actions > cart-drawer-component > a .svg-wrapper,
.stella-header__actions > header-actions > cart-drawer-component > button .svg-wrapper,
.stella-header__actions > header-actions > cart-icon > .header-actions__action .svg-wrapper,
.stella-header__actions > header-actions > cart-icon > a .svg-wrapper,
.stella-header__actions > header-actions > cart-icon > button .svg-wrapper,
.stella-header__actions > .header-actions > .header-actions__action .svg-wrapper,
.stella-header__actions > .header-actions > a .svg-wrapper,
.stella-header__actions > .header-actions > button .svg-wrapper,
.stella-header__actions > .header-actions > shopify-account > .header-actions__action .svg-wrapper,
.stella-header__actions > .header-actions > shopify-account > a .svg-wrapper,
.stella-header__actions > .header-actions > shopify-account > button .svg-wrapper,
.stella-header__actions > .header-actions > cart-drawer-component > .header-actions__action .svg-wrapper,
.stella-header__actions > .header-actions > cart-drawer-component > a .svg-wrapper,
.stella-header__actions > .header-actions > cart-drawer-component > button .svg-wrapper,
.stella-header__actions > .header-actions > cart-icon > .header-actions__action .svg-wrapper,
.stella-header__actions > .header-actions > cart-icon > a .svg-wrapper,
.stella-header__actions > .header-actions > cart-icon > button .svg-wrapper {
width: var(--stella-header-icon-size) !important;
height: var(--stella-header-icon-size) !important;
min-width: var(--stella-header-icon-size) !important;
min-height: var(--stella-header-icon-size) !important;
max-width: var(--stella-header-icon-size) !important;
max-height: var(--stella-header-icon-size) !important;
display: flex;
align-items: center;
justify-content: center;
}
.stella-header__nav-inner {
width: 100%;
max-width: var(--stella-header-max-width, 1680px);
min-height: var(--stella-bottom-row-height);
margin: 0 auto;
padding-inline: clamp(16px, 2.7vw, 48px);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
}
.stella-header .header__underlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.stella-header .header__underlay-closed {
z-index: -2;
background: linear-gradient(
var(--color-scheme-top-row) 0 var(--stella-top-row-height),
var(--color-scheme-bottom-row) var(--stella-top-row-height) var(--header-height)
);
}
.stella-header .header__underlay-open {
z-index: -1;
background: transparent;
}
.header__navigation-bar-row {
display: none !important;
}
@media screen and (max-width: 1280px) {
.stella-header__top-inner,
.stella-header__nav-inner {
padding-inline: clamp(14px, 2.1vw, 32px);
}
.stella-header__brand {
max-width: min(520px, calc(100% - 300px));
}
.stella-header__brand .header-logo img,
.stella-header__brand img,
.stella-header__brand picture,
.stella-header__brand .header-logo__image,
.stella-header__brand .header-logo__image-container {
max-width: min(520px, calc(100vw - 320px)) !important;
}
}
@media screen and (max-width: 989px) {
body {
--stella-top-row-height: max(72px, calc(var(--stella-logo-height-tablet, 52px) + 20px));
--stella-bottom-row-height: 0px;
--header-height: var(--stella-top-row-height);
--header-group-height: var(--header-height);
}
.stella-header__nav-inline {
display: none !important;
}
.stella-header--logo-left .stella-header__mobile-drawer {
display: flex;
align-items: center;
justify-content: flex-start;
}
.stella-header--logo-left .stella-header__top-inner {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) minmax(94px, auto);
column-gap: 8px;
}
.stella-header {
--stella-header-action-size: 38px;
--stella-header-icon-size: 19px;
border-bottom: 1px solid var(--stella-border-light);
}
.stella-header__row--top {
border-bottom: 0;
}
.stella-header__row--bottom {
display: none !important;
}
.stella-header__top-inner {
min-height: var(--stella-top-row-height);
padding-inline: 14px;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) minmax(94px, auto);
column-gap: 8px;
}
.stella-header__mobile-drawer {
display: flex;
align-items: center;
justify-content: flex-start;
}
.stella-header__mobile-drawer .header__drawer {
min-height: 44px;
display: flex;
align-items: center;
}
.stella-header__side--left,
.stella-header__side--right {
flex: initial;
margin: 0;
}
.stella-header__side--left {
grid-column: 1;
justify-content: flex-start;
}
.stella-header__side--right {
grid-column: 3;
justify-content: flex-end;
gap: 0;
}
.stella-header__brand {
position: static;
grid-column: 2;
transform: none;
width: 100%;
max-width: 100%;
min-width: 0;
justify-self: center;
}
.stella-header__brand .header-logo,
.stella-header__brand .header-logo a,
.stella-header__brand a {
font-size: clamp(20px, 5.2vw, 27px);
letter-spacing: clamp(2.3px, 0.85vw, 4px);
max-width: 100%;
min-width: 0;
overflow: visible;
}
.stella-header__brand .header-logo img,
.stella-header__brand img,
.stella-header__brand picture,
.stella-header__brand .header-logo__image,
.stella-header__brand .header-logo__image-container {
max-width: min(260px, 48vw) !important;
max-height: var(--stella-logo-height-tablet, 52px) !important;
}
}
@media screen and (max-width: 749px) {
body {
--stella-top-row-height: max(66px, calc(var(--stella-logo-height-mobile, 38px) + 20px));
}
.stella-header {
--stella-header-action-size: 36px;
--stella-header-icon-size: 18px;
}
.stella-header__top-inner {
grid-template-columns: 44px minmax(0, 1fr) minmax(84px, auto);
padding-inline: 12px;
column-gap: 6px;
}
.stella-header__brand .header-logo,
.stella-header__brand .header-logo a,
.stella-header__brand a {
font-size: clamp(18px, 5.8vw, 23px);
letter-spacing: clamp(1.8px, 0.8vw, 3px);
}
.stella-header__brand .header-logo img,
.stella-header__brand img,
.stella-header__brand picture,
.stella-header__brand .header-logo__image,
.stella-header__brand .header-logo__image-container {
max-width: min(210px, 44vw) !important;
max-height: var(--stella-logo-height-mobile, 38px) !important;
}
}
@media screen and (max-width: 420px) {
.stella-header {
--stella-header-action-size: 32px;
--stella-header-icon-size: 17px;
}
.stella-header__top-inner {
grid-template-columns: 40px minmax(0, 1fr) minmax(72px, auto);
padding-inline: 10px;
}
.stella-header__brand .header-logo,
.stella-header__brand .header-logo a,
.stella-header__brand a {
font-size: clamp(16px, 5.4vw, 20px);
letter-spacing: 1.5px;
}
.stella-header__brand .header-logo img,
.stella-header__brand img,
.stella-header__brand picture,
.stella-header__brand .header-logo__image,
.stella-header__brand .header-logo__image-container {
max-width: min(168px, 40vw) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.stella-header *,
.stella-header *::before,
.stella-header *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* ── Stella: Fix gap hover dropdown ── */
.stella-menu-list__list-item { position: relative; }
.stella-menu-list__list-item::after {
content: '';
position: absolute;
bottom: -24px;
left: 0; right: 0;
height: 24px;
background: transparent;
pointer-events: auto;
z-index: 9998;
}
.menu-list__submenu,
.stella-menu-list__submenu {
pointer-events: auto !important;
}
@media screen and (max-width: 989px) {
.stella-header--logo-left .stella-header__top-inner {
grid-template-columns: 44px 1fr minmax(90px, auto) !important;
}
.stella-header--logo-left .stella-header__top-inner > a,
.stella-header--logo-left .stella-header__top-inner .header-logo {
grid-column: 2;
justify-self: center;
}
.stella-header--logo-left .stella-header__mobile-drawer {
grid-column: 1;
}
.stella-header--logo-left .stella-header__side--right {
grid-column: 3;
}
.stella-header__mobile-drawer button,
.stella-header__mobile-drawer .header__drawer {
width: 36px !important;
height: 36px !important;
color: var(--stella-black) !important;
}
.stella-header__mobile-drawer svg {
width: 22px !important;
height: 22px !important;
}
}
/* ============================================
SEARCH PILL — Stella's premium aesthetic
(FUERA del @media para que aplique en TODOS los viewports)
============================================ */
.stella-header__search > .stella-header__search-pill {
position: relative !important;
display: flex !important;
align-items: center !important;
height: 42px !important;
width: 100% !important;
min-width: 220px !important;
max-width: 300px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid var(--stella-border-light, #E8E4DF) !important;
border-radius: 999px !important;
background: var(--stella-warm-white, #F5F0EB) !important;
box-shadow: 0 1px 2px rgba(26, 26, 26, 0.02) !important;
overflow: hidden !important;
box-sizing: border-box !important;
transition:
background-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.stella-header__search > .stella-header__search-pill:hover {
background: var(--stella-ivory, #FAF8F5) !important;
border-color: var(--stella-champagne, #D4C5B5) !important;
box-shadow: 0 2px 8px rgba(184, 151, 106, 0.08) !important;
}
.stella-header__search > .stella-header__search-pill:focus-within {
background: #FFFFFF !important;
border-color: var(--stella-gold-muted, #B8976A) !important;
box-shadow: 0 4px 16px rgba(184, 151, 106, 0.14) !important;
}
.stella-header__search-pill-input {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 4px 0 20px !important;
border: 0 !important;
outline: none !important;
background: transparent !important;
font-family: var(--font-body, inherit) !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
line-height: 1 !important;
color: var(--stella-text-primary, #1A1A1A) !important;
box-shadow: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
caret-color: var(--stella-gold-muted, #B8976A) !important;
}
.stella-header__search-pill-input::placeholder {
color: var(--stella-text-light, #999999) !important;
opacity: 1 !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
}
.stella-header__search-pill-input:focus {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Remove ugly browser default search icons & cancel button */
.stella-header__search-pill-input::-webkit-search-cancel-button,
.stella-header__search-pill-input::-webkit-search-decoration,
.stella-header__search-pill-input::-webkit-search-results-button,
.stella-header__search-pill-input::-webkit-search-results-decoration {
-webkit-appearance: none !important;
appearance: none !important;
display: none !important;
}
/* Show subtle clear button only when user has typed (Chrome custom) */
.stella-header__search-pill-input::-webkit-search-cancel-button {
height: 14px;
width: 14px;
background: var(--stella-text-light, #999999);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
cursor: pointer;
margin-right: 4px;
}
.stella-header__search-pill-btn {
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
margin: 0 3px 0 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--stella-text-secondary, #666666) !important;
cursor: pointer !important;
-webkit-appearance: none !important;
appearance: none !important;
transition:
background-color 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
color 240ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.stella-header__search-pill-btn:hover {
background: var(--stella-beige-nude, #E8DDD3) !important;
color: var(--stella-gold-muted, #B8976A) !important;
}
.stella-header__search-pill-btn:focus-visible {
outline: 2px solid var(--stella-gold-muted, #B8976A) !important;
outline-offset: 1px !important;
}
.stella-header__search-pill-btn svg,
.stella-header__search > .stella-header__search-pill .stella-header__search-pill-btn svg {
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
max-width: 15px !important;
max-height: 15px !important;
display: block !important;
flex: 0 0 15px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.6 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.stella-header__search-pill-btn:hover svg {
transform: scale(1.08) !important;
}
/* Tablet */
@media (max-width: 1199px) {
.stella-header__search > .stella-header__search-pill {
min-width: 200px !important;
max-width: 260px !important;
}
}
/* Mobile compact */
@media (max-width: 749px) {
.stella-header__search > .stella-header__search-pill {
height: 38px !important;
min-width: 140px !important;
max-width: 180px !important;
}
.stella-header__search-pill-input {
font-size: 12px !important;
padding-left: 16px !important;
}
.stella-header__search-pill-btn {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
}
.stella-header__search-pill-btn svg {
width: 13px !important;
height: 13px !important;
min-width: 13px !important;
min-height: 13px !important;
max-width: 13px !important;
max-height: 13px !important;
}
}
/* END_SECTION:header */
/* START_BLOCK:_announcement (INDEX:71) */
.text-block:not(.text-block--full-width).rte,
.text-block:not(.text-block--full-width).paragraph {
/* Safari doesn't support pretty, so fallback to balance */
text-wrap: balance;
text-wrap: pretty;
}
.text-block:not(.text-block--full-width).h1,
.text-block:not(.text-block--full-width).h2,
.text-block:not(.text-block--full-width).h3,
.text-block:not(.text-block--full-width).h4,
.text-block:not(.text-block--full-width).h5,
.text-block:not(.text-block--full-width).h6 {
text-wrap: balance;
}
/* Hide underline unless text is using paragraph styles. */
.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
text-decoration-color: transparent;
}
.text-block h1,
.text-block.h1 > * {
margin-block: var(--font-h1--spacing);
}
.text-block h2,
.text-block.h2 > * {
margin-block: var(--font-h2--spacing);
}
.text-block h3,
.text-block.h3 > * {
margin-block: var(--font-h3--spacing);
}
.text-block h4,
.text-block.h4 > * {
margin-block: var(--font-h4--spacing);
}
.text-block h5,
.text-block.h5 > * {
margin-block: var(--font-h5--spacing);
}
.text-block h6,
.text-block.h6 > * {
margin-block: var(--font-h6--spacing);
}
.text-block > *:first-child {
margin-block-start: 0;
}
.text-block > *:last-child {
margin-block-end: 0;
}
.text-block--align-center,
.text-block--align-center > * {
margin-inline: auto;
}
.text-block--align-right,
.text-block--align-right > * {
margin-inline-start: auto;
}
/* END_BLOCK:_announcement */
/* START_BLOCK:_header-logo (INDEX:99) */
.header-logo {
display: flex;
height: 100%;
font-size: var(--font-size--md);
font-family: var(--font-family);
font-weight: var(--font-weight);
font-style: var(--font-style);
color: var(--color-foreground);
justify-content: center;
align-items: center;
text-decoration: none;
&[data-hidden-on-home-page] {
display: none;
#header-component:is(
[sticky='always']:not([data-scroll-direction='none']),
[sticky='scroll-up'][data-scroll-direction='up']
)
& {
display: flex;
}
}
@media screen and (max-width: 749px) {
padding: 0;
}
@media screen and (min-width: 750px) {
flex-shrink: 0;
}
&:hover {
text-decoration: none;
}
}
.header-logo__image {
object-fit: contain;
height: var(--header-logo-image-height-mobile);
width: var(--header-logo-image-width-mobile);
@media screen and (min-width: 750px) {
height: var(--header-logo-image-height);
width: var(--header-logo-image-width);
}
}
.header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
display: var(--header-logo-display, block);
}
.header-logo__image-container--inverse {
display: var(--header-logo-inverse-display, none);
}
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:100) */
@media screen and (max-width: 989px) {
.scm--desktop { display: none !important; }
}
.scm--desktop {
position: relative;
display: flex;
align-items: stretch;
justify-content: center;
width: 100%;
height: 100%;
overflow: visible;
}
.scm__list {
display: flex;
align-items: stretch;
justify-content: center;
gap: clamp(10px, 1.8vw, 32px);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.scm__item {
position: static;
display: flex;
align-items: center;
}
.scm__item--has-dd {
position: relative;
}
.scm__item--has-dd::after {
content: '';
position: absolute;
bottom: -80px;
left: -30px;
right: -30px;
height: 80px;
background: transparent;
pointer-events: auto;
z-index: 9991;
}
.scm__link {
display: inline-flex;
align-items: center;
gap: 5px;
height: auto;
padding: 6px 0;
font-family: var(--scm-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
font-size: var(--scm-link-size, 11px);
font-weight: 600;
letter-spacing: 1.6px;
text-transform: var(--scm-link-case, uppercase);
color: var(--scm-link-color, #888888);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
cursor: pointer;
position: relative;
}
.scm__link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.5px;
background: var(--scm-link-active-color, #1A1A1A);
transition: width 0.25s ease;
}
.scm__link:hover,
.scm__item--has-dd:hover > .scm__link {
color: var(--scm-link-active-color, #1A1A1A);
}
.scm__link:hover::before,
.scm__item--has-dd:hover > .scm__link::before {
width: 100%;
}
.scm__caret {
width: 8px;
height: 5px;
flex-shrink: 0;
opacity: 0.5;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.scm__item--has-dd:hover > .scm__link .scm__caret {
transform: rotate(180deg);
opacity: 1;
}
.scm__dd {
position: fixed;
top: var(--header-height, 80px);
left: 0;
right: 0;
width: 100%;
z-index: 9990;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
background: var(--scm-dd-bg, #FAFAF9);
border-top: 1px solid var(--scm-dd-border, #E8E4DF);
border-bottom: 1px solid var(--scm-dd-border, #E8E4DF);
box-shadow: 0 20px 48px rgba(26, 26, 26, 0.08);
}
.scm__item--has-dd:hover > .scm__dd {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.scm__dd-inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 32px 48px;
box-sizing: border-box;
}
.scm__dd-inner--split {
display: grid;
grid-template-columns: minmax(260px, 1fr) 2fr;
gap: 48px;
align-items: start;
}
.scm__sub {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.scm__sub li {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.scm__sub li:last-child {
border-bottom: none;
}
.scm__sub-link {
display: block;
padding: 12px 0;
font-family: var(--scm-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
font-size: var(--scm-sub-size, 14px);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--scm-sub-color, #666);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s ease, padding-left 0.15s ease;
}
.scm__sub-link:hover {
color: var(--scm-sub-hover-color, #1A1A1A);
padding-left: 10px;
}
.scm__dd--brands .scm__dd-inner {
padding: 24px 48px;
}
.scm__brands {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
max-width: 900px;
margin: 0 auto;
}
.scm__brand {
display: flex;
align-items: center;
justify-content: center;
width: 140px;
height: 60px;
border-radius: 8px;
text-decoration: none;
transition: background 0.15s ease;
}
.scm__brand:hover {
background: rgba(26, 26, 26, 0.04);
}
.scm__brand img {
max-width: 110px;
max-height: 40px;
object-fit: contain;
opacity: 0.82;
transition: opacity 0.15s ease;
display: block;
}
.scm__brand:hover img {
opacity: 0.4;
}
.scm__brand-text {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #666;
}
.scm__feat {
display: grid;
gap: 16px;
}
.scm__feat--grid {
grid-template-columns: repeat(auto-fill, minmax(var(--scm-feat-size, 170px), 1fr));
}
.scm__feat--list {
grid-template-columns: 1fr;
}
.scm__feat--list .scm__feat-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
align-items: center;
}
.scm__feat--list .scm__feat-img {
width: 80px;
}
.scm__feat-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.scm__feat-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
transition: opacity 0.15s ease;
}
.scm__feat-link:hover {
opacity: 0.85;
}
.scm__feat-img-wrap {
position: relative;
width: 100%;
}
.scm__feat-img-link {
display: block;
text-decoration: none;
}
.scm__feat-img {
width: 100%;
background: transparent;
border-radius: 6px;
overflow: hidden;
display: flex !important;
align-items: center;
justify-content: center;
}
.scm__feat-img--square { aspect-ratio: 1 / 1 !important; }
.scm__feat-img--portrait { aspect-ratio: 3 / 5 !important; }
.scm__feat-img--landscape { aspect-ratio: 16 / 9 !important; }
.scm__feat-img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
}
.scm__feat-form,
.scm__feat-view-btn {
position: absolute;
bottom: 8px;
right: 8px;
margin: 0;
z-index: 5;
}
.scm__feat-add-btn,
.scm__feat-view-btn {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #FFFFFF !important;
color: #1A1A1A !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
text-decoration: none !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.scm__feat-add-btn:hover,
.scm__feat-view-btn:hover {
transform: scale(1.1) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.16) !important;
background: #1A1A1A !important;
color: #FFFFFF !important;
}
.scm__feat-add-btn .add-to-cart-text {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: 100% !important;
height: 100% !important;
}
.scm__feat-add-btn .add-to-cart-icon,
.scm__feat-view-btn svg {
width: 15px !important;
height: 15px !important;
}
.scm__feat-add-btn .add-to-cart-text > span:not(.add-to-cart-icon):not(.svg-wrapper) {
display: none !important;
}
.scm__feat-text-link {
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
color: inherit;
margin-top: 8px;
transition: opacity 0.15s ease;
}
.scm__feat-text-link:hover {
opacity: 0.7;
}
.scm__feat-title {
font-size: 12.5px;
line-height: 1.3;
color: var(--scm-sub-color, #666);
font-weight: 500;
}
.scm__feat-price {
font-size: 12.5px;
color: var(--scm-link-active-color, #1A1A1A);
font-weight: 600;
}
/* Product card hover effect */
.scm__feat-item--product {
cursor: pointer;
transition: transform 0.2s ease;
}
.scm__feat-item--product:hover {
transform: translateY(-2px);
}
.scm__feat-item--product:hover .scm__feat-img {
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.scm__feat-item--product .scm__feat-img {
transition: box-shadow 0.2s ease;
}
/* "View all" link */
.scm__feat-panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.scm__feat-viewall {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-end;
padding: 8px 0;
font-family: var(--scm-font-family, 'Inter', -apple-system, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--scm-link-active-color, #1A1A1A);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: gap 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.scm__feat-viewall:hover {
gap: 12px;
border-bottom-color: var(--scm-link-active-color, #1A1A1A);
}
.scm__feat-viewall svg {
width: 14px;
height: 14px;
}
@media (prefers-reduced-motion: reduce) {
.scm__dd, .scm__link::before, .scm__sub-link, .scm__brand img, .scm__caret,
.scm__feat-item--product, .scm__feat-viewall { transition: none !important; }
}
/* END_BLOCK:_header-menu */
/* START_SNIPPET:cart-bubble (INDEX:173) */
.cart-bubble {
--cart-padding: 0.2em;
position: relative;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
border-width: 0;
display: flex;
line-height: normal;
align-items: center;
justify-content: center;
color: var(--color-primary-button-text);
padding-inline: var(--cart-padding);
}
.cart-bubble[data-maintain-ratio] {
aspect-ratio: 1;
}
.cart-bubble[data-maintain-ratio] .cart-bubble__background {
border-radius: var(--style-border-radius-50);
}
.cart-bubble__background {
position: absolute;
inset: 0;
background-color: var(--color-primary-button-background);
border-radius: var(--style-border-radius-lg);
}
.cart-bubble__text {
font-size: var(--font-size--3xs);
z-index: var(--layer-flat);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-items-component (INDEX:174) */
.cart-items-component {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
@media screen and (prefers-reduced-motion: no-preference) {
html:active-view-transition-type(empty-cart-drawer) {
.cart-items-component {
view-transition-name: cart-drawer-content;
}
}
html:active-view-transition-type(empty-cart-page) {
.cart-items-component {
view-transition-name: cart-page-content;
}
}
}
::view-transition-old(cart-page-content) {
animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
}
@keyframes cart-page-content-old {
from {
opacity: 1;
}
to {
opacity: 0;
filter: blur(4px);
}
}
::view-transition-old(cart-drawer-content) {
transform-origin: 50% 33%;
animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
}
::view-transition-new(cart-drawer-content) {
transform-origin: top center;
animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
}
@keyframes cart-contents-old {
to {
scale: 0.92;
opacity: 0;
}
}
@keyframes cart-contents-new {
from {
scale: 1.05;
translate: 0 128px;
filter: blur(1px);
opacity: 0;
}
}
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:175) */
.cart-items {
--cart-item-media-width-min: 2.5rem;
--cart-item-media-width-max: 7.5rem;
container-name: cart-items;
container-type: inline-size;
width: 100%;
}
.cart-items-disabled {
pointer-events: none;
}
.cart-page--empty .cart-items__wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-block-start: 0;
text-align: center;
}
.cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.cart-items__table {
width: 100%;
border-spacing: 0;
}
.cart-items__table * {
margin: 0;
}
.cart-items__table-row {
--cart-item-price-width: 6rem;
display: grid;
grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
grid-template-areas:
'media details price'
'media quantity price'
'media error error';
column-gap: var(--gap-md);
align-items: start;
padding-bottom: var(--cart-items-gap);
margin-bottom: var(--margin-lg);
}
/* Cart drawer: separate grid areas for variants and unit price */
.cart-drawer .cart-items__table-row--full-width-variants {
grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
grid-template-rows: repeat(4, min-content) 1fr;
grid-template-areas:
'media details price'
'media variants variants'
'media unit_price unit_price'
'media quantity quantity'
'media error error';
.cart-items__details {
display: contents;
}
.cart-items__product-info {
grid-area: details;
}
.cart-items__variants-wrapper {
grid-area: variants;
&:empty {
display: none;
}
p {
margin: 0;
}
}
.cart-items__unit-price-wrapper {
grid-area: unit_price;
font-size: var(--font-size--sm);
}
.cart-items__price {
min-width: auto;
width: max-content;
}
}
.cart-items__table-row.cart-items__nested-line td:first-child {
width: 60%;
justify-self: right;
}
html:active-view-transition-type(page-navigation) .cart-items__table-row {
/* stylelint-disable-next-line declaration-no-important */
view-transition-name: none !important;
}
.cart-items__table-row.removing {
overflow: hidden;
animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
animation-delay: var(--animation-speed);
}
@keyframes removeRow {
0% {
height: var(--row-height);
}
100% {
opacity: 0;
height: 0;
padding-bottom: 0;
margin-bottom: 0;
border-color: transparent;
}
}
.cart-items__table-row:last-child {
padding-bottom: 0;
}
.cart-items--dividers .cart-items__table-row {
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--cart-items-gap);
}
.cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
border-bottom: none;
margin-bottom: 0;
}
.cart-items--dividers .cart-items__table-row:last-of-type {
border-block-end: none;
padding-block-end: 0;
margin-bottom: 0;
}
.cart-items__details {
grid-area: details;
color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
}
.cart-items__details > * + *,
.cart-items__bundle li {
margin-block-start: var(--margin-3xs);
}
.cart-items__details * {
font-size: var(--font-size--sm);
}
.cart-items__details a {
text-decoration: none;
}
.cart-items__title {
font-size: var(--font-size--md);
color: var(--color-foreground);
text-transform: var(--product-title-case);
display: block;
margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
}
.cart-items__variants {
display: block;
}
.cart-items__variant {
display: inline;
}
.cart-items__variant dt,
.cart-items__variant dd {
display: inline;
margin: 0;
}
.cart-items__quantity {
grid-area: quantity;
margin-block-start: var(--margin-xs);
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--gap-xs);
width: fit-content;
}
.cart-items__quantity-controls {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--gap-xs);
width: fit-content;
}
.cart-items__quantity-controls > .volume-pricing-info {
margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
}
.cart-items__quantity .quantity-selector {
display: inline-flex;
font-size: var(--font-size--sm);
height: auto;
}
.cart-items__remove {
background-color: transparent;
color: var(--color-foreground);
width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
justify-content: center;
box-shadow: none;
padding: 0;
}
.cart-items__media {
grid-area: media;
padding: 0;
}
.cart-items__price {
grid-area: price;
min-height: unset;
min-width: var(--cart-item-price-width);
text-align: end;
display: block;
font-size: var(--font-size--sm);
line-height: var(--line-height);
}
.cart-items__price-unit {
font-size: var(--font-size--xs);
padding-block-start: var(--padding-2xs);
}
.cart-items__media-container {
display: flex;
aspect-ratio: var(--ratio);
position: relative;
width: 100%;
overflow: hidden;
}
.cart-items__media-image {
aspect-ratio: inherit;
object-fit: cover;
object-position: center center;
width: 100%;
height: auto;
}
.cart-items__empty-button {
margin-top: var(--margin-md);
padding-inline: var(--padding-4xl);
padding-block: var(--padding-lg);
}
/* Error message */
.cart-items__error {
display: flex;
align-items: flex-start;
width: 100%;
grid-area: error;
margin-block-start: var(--margin-xs);
opacity: 1;
overflow: hidden;
transform: translateY(0);
transition: opacity var(--drawer-animation-speed) var(--animation-easing),
transform var(--drawer-animation-speed) var(--animation-easing);
@starting-style {
opacity: 0;
transform: translateY(-0.5rem);
}
}
.cart-item__error {
display: flex;
align-items: flex-start;
width: 100%;
font-size: var(--font-size--sm);
padding-block: var(--padding-2xs);
}
.cart-item__error .svg-wrapper {
flex-shrink: 0;
width: var(--icon-size-xs);
height: var(--icon-size-xs);
margin-inline: var(--margin-3xs) var(--margin-xs);
margin-block-start: var(--margin-3xs);
}
@container cart-items (min-width: 720px) {
/* Cart page: original layout */
.cart-items__table-row {
--cart-item-price-width: 6rem;
grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
grid-template-rows: min-content 1fr;
grid-template-areas:
'media details quantity price'
'media details error error';
}
.cart-items__quantity,
.cart-items__price {
grid-area: initial;
}
.cart-items__quantity {
margin-top: 0;
}
.cart-items__price {
min-height: var(--minimum-touch-target);
display: flex;
flex-direction: column;
align-items: flex-end;
}
/* Cart drawer: separate areas for variants and unit price */
.cart-drawer .cart-items__table-row--full-width-variants {
grid-template-rows: min-content min-content min-content 1fr;
grid-template-areas:
'media details quantity price'
'media variants variants variants'
'media unit_price unit_price unit_price'
'media error error error';
.cart-items__quantity,
.cart-items__price {
grid-area: initial;
}
}
}
.cart__subtotal-container,
.cart__total-container {
display: flex;
flex-direction: column;
}
.cart__total-container {
row-gap: var(--gap-2xs);
&.cart__total-container--has-installments {
row-gap: var(--gap-xs);
}
}
.cart__subtotal-container:empty {
display: none;
}
.cart__summary-totals {
display: flex;
flex-direction: column;
gap: var(--gap-xl);
width: 100%;
border-block-start: none;
&:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
padding-block-start: 0;
border-block-start: none;
}
@media screen and (min-width: 750px) {
padding-block-start: 0;
}
}
.cart__subtotal-container,
.cart__subtotal-container * {
font-size: var(--font-size--sm);
}
.cart__total {
font-weight: var(--font-weight-bold);
}
.cart__total-label {
font-size: var(--font-size--sm);
}
.cart__total-value {
font-size: var(--font-size--xl);
@media screen and (max-width: 749px) {
font-size: var(--font-size--lg);
}
}
.cart-primary-typography {
font-family: var(--cart-primary-font-family);
font-style: var(--cart-primary-font-style);
font-weight: var(--cart-primary-font-weight);
}
.cart-secondary-typography {
font-family: var(--cart-secondary-font-family);
font-style: var(--cart-secondary-font-style);
font-weight: var(--cart-secondary-font-weight);
}
.cart__ctas {
width: 100%;
display: grid;
gap: var(--checkout-button-gap);
grid-auto-flow: row;
grid-template-columns: 1fr;
}
.cart__additional-checkout-buttons {
width: 100%;
}
shopify-accelerated-checkout-cart {
--shopify-accelerated-checkout-inline-alignment: center;
--shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
--shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
}
/* Remove animation */
.remove-icon-bottom,
.remove-icon-top {
transition: transform var(--animation-speed) var(--animation-easing);
}
.cart-items__remove:hover .remove-icon-top {
transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
}
.cart-items__remove:is(:hover, :active) .remove-icon-bottom {
transform: translateY(var(--icon-stroke-width));
}
.cart-items__table-row.removing .remove-icon-bottom {
transform: translateY(0);
}
.cart-items__table-row.removing .remove-icon-top {
animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
}
@keyframes removeButtonClickedIconTop {
50% {
transform: translate(0, calc(-1 * var(--icon-stroke-width)));
}
100% {
transform: translate(0, 0);
}
}
.cart-items__properties {
display: block;
margin-block-start: var(--margin-2xs);
}
.cart-items__property {
display: block;
}
.cart-items__properties dt,
.cart-items__properties dd {
display: inline;
margin: 0;
overflow-wrap: break-word;
}
@media screen and (min-width: 750px) {
.cart-items .quantity-selector {
--quantity-selector-width: 105px;
height: var(--button-size-md);
width: var(--quantity-selector-width);
}
.cart-items .quantity-selector button {
width: var(--button-size-md);
height: var(--button-size-md);
}
.cart-items .quantity-selector input {
max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
}
}
@media screen and (prefers-reduced-motion: no-preference) {
html:active-view-transition-type(empty-cart-drawer) {
.cart-items__empty-button,
.cart__checkout-button {
view-transition-name: cart-drawer-primary-action;
& > .button-text {
view-transition-name: cart-drawer-primary-action-text;
}
}
}
}
::view-transition-old(cart-drawer-primary-action-text),
::view-transition-new(cart-drawer-primary-action-text) {
height: 100%;
object-fit: none;
overflow: clip;
overflow-clip-margin: 1em;
}
::view-transition-old(cart-drawer-primary-action-text) {
animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
}
::view-transition-new(cart-drawer-primary-action-text) {
animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
}
::view-transition-old(cart-drawer-primary-action),
::view-transition-new(cart-drawer-primary-action) {
height: 100%;
}
::view-transition-group(cart-drawer-primary-action-text),
::view-transition-group(cart-drawer-primary-action) {
animation-duration: var(--spring-d300-b0-duration);
animation-timing-function: var(--spring-d300-b0-easing);
}
@keyframes cart-drawer-primary-action-text {
from {
filter: blur(3px);
opacity: 0;
}
to {
filter: none;
opacity: 1;
}
}
/* END_SNIPPET:cart-products */
/* START_SNIPPET:header-actions (INDEX:192) */
.header {
--account-offset-top: calc(
var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
);
&[data-sticky-state='active'] {
--account-offset-top: calc(var(--header-height) - 1px);
}
}
.account-button {
/* Remove the background color from the color scheme, we want to inherit the color of the header */
background: transparent;
}
.account-button__icon,
.account-button__text {
color: var(--color-account-icon);
transition: color var(--header-content-transition-timing);
-webkit-font-smoothing: antialiased;
}
shopify-account {
--shopify-account-font-heading: var(--font-heading--family);
--shopify-account-font-heading-weight: var(--font-heading--weight);
--shopify-account-font-body: var(--font-body--family);
--shopify-account-font-body-weight: var(--font-body--weight);
--shopify-account-radius-base: var(--style-border-radius-popover);
--shopify-account-radius-button: var(--style-border-radius-buttons-primary);
--shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
--shopify-account-radius-input: var(--style-border-radius-buttons-primary);
--shopify-account-color-background: var(--color-background);
--shopify-account-color-text: var(--color-foreground);
--shopify-account-color-accent: var(--color-primary-button-background);
--shopify-account-color-accent-text: var(--color-primary-button-text);
--shopify-account-dialog-position-top: var(--account-offset-top);
&:not(:defined) {
min-width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
/* Match the line height of the other buttons */
line-height: normal;
}
}
.account-button__fallback {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--shopify-account-color-accent, #0a142f);
}
.account-button--text shopify-account {
color: inherit;
}
.cart-drawer {
--cart-drawer-padding: var(--padding-xl) var(--padding-xl);
--cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
@media screen and (min-width: 750px) {
margin-inline-end: calc(var(--gap-xs) * -1);
}
}
@media screen and (min-width: 750px) {
.cart-drawer--text {
display: flex;
align-items: center;
}
}
.cart-drawer__dialog {
position: fixed;
overflow: hidden;
border-radius: 0;
width: 100%;
height: 100%;
margin: 0 0 0 auto;
padding: 0;
border-left: var(--style-border-drawer);
box-shadow: var(--shadow-drawer);
background-color: var(--color-background);
@media screen and (min-width: 750px) {
width: var(--sidebar-width);
max-width: 95vw;
}
}
/* Needed to ensure the drawer is full height */
.cart-drawer__dialog:modal {
max-height: 100dvh;
overflow-y: hidden;
}
.cart-drawer__inner {
height: 100%;
overflow: hidden;
}
.cart-drawer__content {
height: calc(100% - var(--header-height));
display: flex;
flex-direction: column;
padding: 0;
background-color: var(--color-background);
flex-grow: 1;
overflow-y: auto;
}
.cart-drawer__heading {
display: flex;
align-items: center;
gap: var(--gap-xs);
margin-bottom: 0;
}
.cart-drawer__close-button {
margin-right: calc(var(--padding-sm) * -1);
top: var(--margin-sm);
@media screen and (max-width: 749px) {
top: var(--margin-2xs);
}
}
.cart-drawer--empty .cart-drawer__content {
text-align: center;
min-height: auto;
}
.cart-drawer--empty .cart-drawer__heading {
margin-bottom: var(--margin-md);
}
.cart-drawer__items .cart-items__table-row {
padding-bottom: var(--gap-xl);
border-bottom: var(--style-border-width) solid var(--color-border);
margin-bottom: var(--gap-xl);
}
.cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
border-bottom: none;
margin-bottom: 0;
}
.cart-drawer__items .cart-items__table-row:last-child {
border-bottom: none;
}
.cart-drawer__summary {
--cart-drawer-summary-padding: var(--padding-lg);
position: sticky;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-xl);
padding: var(--cart-drawer-summary-padding);
margin-top: auto;
background-color: var(--color-background);
/* stylelint-disable-next-line color-named */
mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));
@media screen and (min-width: 750px) {
--cart-drawer-summary-padding: var(--padding-2xl);
}
}
.cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
position: static;
mask-image: none;
}
.cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
overflow: unset;
}
.cart-actions summary {
padding-inline: 0;
padding-block: var(--padding-sm);
line-height: 1.2;
min-height: var(--minimum-touch-target);
}
.cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
border-block-start: var(--style-border-width) solid var(--color-border);
padding-block-start: var(--padding-2xl);
}
.cart-drawer__summary .cart-note {
@media screen and (min-width: 750px) {
margin-block-start: var(--margin-3xs);
}
}
.cart-drawer__heading--empty {
display: flex;
justify-content: center;
}
.cart-drawer__items {
display: flex;
flex-direction: column;
padding-inline: var(--cart-drawer-padding);
overflow-y: auto;
@media screen and (min-width: 750px) {
padding-inline: var(--cart-drawer-padding-desktop);
}
}
.cart-drawer__items .cart-items__table-row {
padding-bottom: var(--gap-xl);
border-bottom: var(--style-border-width) solid var(--color-border);
margin-bottom: var(--gap-xl);
}
.cart-drawer__items .cart-items__table-row:last-child {
border-bottom: none;
padding-block-end: 0;
margin-block-end: 0;
}
.cart-drawer--empty .cart-drawer__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
margin-top: 0;
}
.cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
justify-content: center;
}
.cart-drawer__header {
background-color: var(--color-background);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--cart-drawer-padding);
border-bottom: var(--style-border-width) solid none;
position: sticky;
top: 0;
z-index: 1;
@media screen and (min-width: 750px) {
padding-inline: var(--cart-drawer-padding-desktop);
}
}
.cart-drawer--empty .cart-drawer__header {
justify-content: right;
border-bottom: none;
padding-bottom: 0;
}
.cart-drawer--empty .cart-drawer__heading {
text-align: center;
}
header-actions {
display: flex;
@media screen and (max-width: 749px) {
justify-self: flex-end;
}
}
@media screen and (min-width: 750px) {
.header-actions--text {
gap: var(--gap-xl);
}
.header-actions__text-style {
font-size: var(--header-actions-font-size);
font-family: var(--header-actions-font-family);
font-weight: var(--header-actions-font-weight);
text-transform: var(--header-actions-text-case);
}
}
#header-component[data-menu-style='drawer'] header-actions {
justify-self: flex-end;
}
.header__column--right header-actions {
margin-inline-start: calc(var(--gap-md) * -1);
}
.header-actions__cart-icon {
--cart-bubble-size: 20px;
--cart-bubble-top: 4.5px;
--cart-bubble-right: 2.5px;
position: relative;
}
.header-actions__cart-icon .cart-bubble {
position: absolute;
width: var(--cart-bubble-size, 20px);
top: var(--cart-bubble-top);
right: var(--cart-bubble-right);
}
@media screen and (min-width: 750px) {
.header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
position: relative;
top: 0;
}
}
.cart-drawer__heading .cart-bubble {
width: fit-content;
border-radius: var(--style-border-radius-buttons-primary);
aspect-ratio: auto;
padding: var(--cart-padding);
}
.cart-drawer__heading .cart-bubble[data-maintain-ratio] {
width: min(1lh, 22px);
height: min(1lh, 22px);
}
.header-actions__cart-icon .cart-bubble__text,
.cart-drawer__heading .cart-bubble__text {
font-family: var(--font-paragraph--family);
font-weight: var(--font-paragraph--weight);
}
.header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
/* Create donut mask where the cart bubble sits */
mask: radial-gradient(
calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
transparent 45.45%,
#fff 45.45%,
#fff 100%
);
}
.cart-drawer__heading .cart-bubble .cart-bubble__background {
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
}
.cart-drawer__heading .cart-bubble__text {
color: var(--color-foreground);
font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
}
.cart-bubble.cart-bubble--animating .cart-bubble__background {
animation: grow var(--animation-speed) var(--animation-easing);
}
.cart-bubble--animating .cart-bubble__text {
--start-y: -1em;
--start-opacity: 1;
/* Set initial transform state before animation starts */
transform: translate(0, var(--start-y, -1em));
opacity: var(--start-opacity, 1);
animation: move-and-fade var(--animation-speed) var(--animation-easing);
}
cart-icon:has(.cart-bubble__text-count:empty) {
--cart-bubble-size: 10px;
--cart-bubble-top: 9px;
--cart-bubble-right: 9px;
.svg-wrapper {
--cart-bubble-top: 4px;
--cart-bubble-right: 4px;
}
}
@media screen and (min-width: 750px) {
cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
--cart-bubble-right: 2.5px;
}
}
@media screen and (prefers-reduced-motion: no-preference) {
html:active-view-transition-type(empty-cart-drawer) {
.cart-drawer__close-button {
view-transition-name: cart-drawer-close-button;
}
}
}
:active-view-transition {
.cart-drawer__header,
.cart-drawer__content {
background: transparent;
}
}
::view-transition-old(cart-drawer-content) {
transform-origin: 50% 33%;
animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
}
::view-transition-new(cart-drawer-content) {
transform-origin: top center;
animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
}
@keyframes cart-contents-old {
to {
scale: 0.92;
opacity: 0;
}
}
@keyframes cart-contents-new {
from {
scale: 1.05;
translate: 0 128px;
filter: blur(1px);
opacity: 0;
}
}
.header-actions__text {
display: flex;
align-items: center;
}
@media screen and (min-width: 750px) {
.header-actions__cart-icon--text {
display: flex;
align-items: center;
gap: var(--gap-xs);
}
.header__column--right .header-actions--text {
margin-inline-start: 0;
}
}
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:193) */
.header__icon--menu {
position: initial;
}
.menu-drawer-container .header__icon--summary {
color: var(--color-foreground);
display: flex;
justify-content: center;
align-items: center;
padding: var(--padding-lg);
}
.header__icon--summary .header-drawer-icon {
margin: auto;
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
.menu-drawer__featured-content {
z-index: var(--layer-base);
container-type: inline-size;
}
.menu-drawer__featured-content--childlist {
z-index: var(--layer-flat);
}
.menu-drawer__featured-content-list {
display: flex;
gap: 1em;
overflow-x: auto;
padding-block-end: var(--padding-lg);
}
.menu-drawer__featured-content-list-item {
flex: 0 0 auto;
}
.menu-drawer__featured-content-list-item--product {
width: 35cqi;
}
.menu-drawer__featured-content-list-item--collection img.resource-card__image {
width: 80cqi;
}
.menu-drawer__featured-content-list-item:first-child {
margin-inline-start: var(--margin-xl);
}
.menu-drawer__featured-content-list-item:last-child {
margin-inline-end: var(--margin-xl);
}
.menu-drawer__navigation {
padding: 0;
@media screen and (min-width: 750px) {
margin-top: var(--drawer-header-desktop-top);
}
}
details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
display: none;
}
details.menu-open .header__icon--menu .header-drawer-icon--close {
@media screen and (min-width: 750px) {
display: none;
}
}
details.menu-open .header__icon--menu .header-drawer-icon--open {
display: none;
@media screen and (min-width: 750px) {
display: flex;
}
}
.menu-drawer {
position: fixed;
transform: translateX(-100%);
visibility: hidden;
height: var(--drawer-height);
width: var(--drawer-width);
max-width: var(--drawer-max-width);
z-index: var(--layer-menu-drawer);
left: 0;
top: 0;
padding: 0;
background-color: var(--color-background);
overflow: auto;
display: flex;
border-right: var(--style-border-drawer);
box-shadow: var(--shadow-drawer);
flex-direction: column;
@media screen and (min-width: 750px) {
width: 25rem;
}
}
/* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow */
.menu-drawer.menu-drawer--has-submenu-opened {
overflow: initial;
}
.menu-drawer__backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
backdrop-filter: brightness(0.75);
z-index: var(--layer-heightened);
opacity: 0;
transition: opacity var(--drawer-animation-speed) ease;
.menu-open & {
opacity: 1;
}
}
.menu-drawer,
details[open] > .menu-drawer__submenu {
transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
opacity var(--drawer-animation-speed) ease;
}
.menu-open > .menu-drawer,
.menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
transform: translateX(0);
visibility: visible;
opacity: 1;
display: flex;
flex-direction: column;
}
.menu-drawer__inner-container {
position: relative;
height: 100%;
}
.menu-drawer__navigation-container {
display: grid;
grid-template-rows: 1fr auto;
align-content: space-between;
overflow-y: auto;
height: 100%;
}
.menu-drawer__inner-submenu {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
@media screen and (min-width: 750px) {
margin-top: var(--drawer-header-desktop-top);
}
}
.menu-drawer__nav-buttons {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-drawer__menu {
--menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);
list-style: none;
padding-inline: var(--drawer-padding);
margin-inline: 0;
margin-block-start: 0;
}
.menu-drawer__menu--grid {
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
gap: var(--padding-sm);
padding-inline-end: var(--menu-drawer-inline-padding);
padding-block-start: var(--padding-xs);
}
.menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
flex-grow: 1;
}
.menu-drawer__menu.has-submenu,
.menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
margin-block-end: var(--margin-xs);
@media screen and (min-width: 750px) {
margin-block-end: 2.5rem;
}
}
.menu-drawer__list-item--divider {
border-block-end: 1px solid var(--color-border);
}
.menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
margin-block-start: -0.3rem;
}
.menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
margin-block-start: -0.4rem;
}
.menu-drawer__menu-container--divider {
border-block-end: 1px solid var(--color-border);
}
.menu-drawer__menu > .menu-drawer__list-item {
display: flex;
min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
}
.menu-drawer__list-item--deep .menu-drawer__list-item,
.menu-drawer__list-item--flat .menu-drawer__list-item {
min-height: auto;
}
.menu-drawer__menu .menu-drawer__list-item--flat {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-block-end: var(--margin-md);
}
.menu-drawer__menu--childlist .menu-drawer__list-item--flat {
margin-block-end: var(--margin-sm);
@media screen and (min-width: 750px) {
margin-block-end: var(--margin-lg);
}
}
.menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
margin-block-end: 0;
}
.menu-drawer__list-item--flat .menu-drawer__menu--childlist {
width: 100%;
padding-inline: 0;
}
.menu-drawer-container[open] .menu-drawer__animated-element {
animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
animation-fill-mode: backwards;
}
.menu-drawer__menu accordion-custom .details-content--no-animation {
animation: none;
visibility: visible;
opacity: 1;
transform: translateX(0);
transition: none;
}
.menu-drawer__menu details,
.menu-drawer__menu-item,
.menu-drawer__menu accordion-custom {
width: 100%;
}
.menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
}
.menu-drawer__menu-item--mainlist {
min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
font-family: var(--menu-top-level-font-family);
font-style: var(--menu-top-level-font-style);
font-weight: var(--menu-top-level-font-weight);
font-size: var(--menu-top-level-font-size);
line-height: var(--menu-top-level-font-line-height);
text-transform: var(--menu-top-level-font-case);
color: var(--menu-top-level-font-color);
justify-content: space-between;
&:hover {
color: var(--menu-top-level-font-color);
}
}
.menu-drawer__menu-item--parent {
font-family: var(--menu-parent-font-family);
font-style: var(--menu-parent-font-style);
font-weight: var(--menu-parent-font-weight);
font-size: var(--menu-parent-font-size);
line-height: var(--menu-parent-font-line-height);
text-transform: var(--menu-parent-font-case);
color: var(--menu-parent-font-color);
&:hover {
color: var(--menu-parent-font-color);
}
}
.menu-drawer__menu-item--child {
font-family: var(--menu-child-font-family);
font-style: var(--menu-child-font-style);
font-weight: var(--menu-child-font-weight);
font-size: var(--menu-child-font-size);
line-height: var(--menu-child-font-line-height);
text-transform: var(--menu-child-font-case);
color: var(--menu-child-font-color);
&:hover {
color: var(--menu-child-font-color);
}
}
.menu-drawer__menu--childlist summary.menu-drawer__menu-item {
display: flex;
width: 100%;
padding-inline-end: 0;
}
.menu-drawer__list-item--deep .menu-drawer__menu,
.menu-drawer__menu--grandchildlist {
padding-inline: 0;
}
.menu-drawer__list-item--deep .menu-drawer__menu {
padding-block-end: 0.5rem;
}
.menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
padding-block-end: 0.3rem;
}
.menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
padding-block-end: 0.5rem;
}
.menu-drawer__menu-item {
display: flex;
padding: var(--padding-2xs) 0;
position: relative;
text-decoration: none;
justify-content: space-between;
align-items: center;
}
.menu-drawer__menu-item:has(> .menu-drawer__link-image) {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
row-gap: var(--padding-3xs);
padding: 0;
}
.menu-drawer__link-image {
width: 100%;
position: relative;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Fix alignment for collection image mode links without images in drawer */
/* Target menu items in grids that have images */
.menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
row-gap: var(--padding-3xs);
padding: 0;
}
.menu-drawer__menu--grid:has(.menu-drawer__link-image)
.menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
content: '';
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background-color: var(--color-foreground-muted);
opacity: 0.1;
border-radius: var(--menu-image-border-radius);
}
.menu-drawer__close-button {
position: relative;
right: auto;
top: auto;
width: fit-content;
height: fit-content;
color: inherit;
padding: var(--padding-lg);
}
.menu-drawer__back-button {
display: flex;
width: 100%;
padding: var(--padding-md) var(--padding-xl);
border: none;
align-items: center;
color: var(--color-foreground);
background-color: transparent;
text-align: left;
text-decoration: none;
white-space: nowrap;
overflow-x: hidden;
line-height: 1.2;
box-shadow: none;
}
.menu-drawer__menu-item-text {
overflow: hidden;
text-overflow: ellipsis;
}
/** Styles when the country selector is hidden */
.menu-drawer .language-selector:not(.menu-drawer__submenu *) {
width: fit-content;
padding-inline-start: 0;
.localization-form__select {
text-align: left;
}
}
.menu-drawer__menu-item > .svg-wrapper {
width: fit-content;
height: fit-content;
margin: 0;
padding-block: var(--padding-lg);
padding-inline-start: var(--padding-xl);
flex-shrink: 0;
}
.menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
padding-block: var(--padding-md);
}
.menu-drawer svg {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
.menu-drawer__submenu {
position: absolute;
width: 100%;
top: 0;
height: 100dvh;
left: 0;
background-color: var(--color-background);
z-index: var(--layer-flat);
transform: translateX(-5%);
visibility: hidden;
overflow-y: auto;
opacity: 0;
}
.menu-drawer__back-button > .svg-wrapper {
margin-right: var(--padding-md);
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
.menu-drawer__utility-links {
display: flex;
flex-direction: column;
padding: 0;
margin-block: auto var(--padding-sm);
margin-inline-start: var(--padding-xl);
background-color: rgb(var(--color-foreground) 0.03);
}
.menu-drawer__account {
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
text-decoration: none;
height: 44px;
font-size: 1.4rem;
color: rgb(var(--color-foreground));
}
.menu-drawer__account svg {
height: var(--icon-size-sm);
width: var(--icon-size-sm);
}
.menu-drawer__account shop-user-avatar {
--shop-avatar-size: 2.4rem;
margin-right: 0.55rem;
margin-left: -0.45rem;
}
.menu-drawer__link-image,
.menu-drawer__featured-product-image,
.menu-drawer__featured-collection-image,
.menu-drawer__featured-collection-link::before {
border-radius: var(--menu-image-border-radius);
}
@keyframes menu-drawer-nav-open {
0% {
visibility: hidden;
opacity: 0;
transform: translateX(-0.5rem);
}
100% {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
}
@keyframes menu-drawer-subnav-open {
0% {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
100% {
visibility: hidden;
opacity: 0;
transform: translateX(-1rem);
}
}
/* Drawer Localization Styles */
.drawer-localization__button .icon-flag {
width: var(--menu-localization-font-size, var(--icon-size-sm));
height: var(--menu-localization-font-size, var(--icon-size-sm));
clip-path: circle(50%); /* stylelint-disable-line */
background-position: center;
background-size: cover;
margin-inline-end: 4px;
position: relative;
}
.drawer-localization__button .icon-flag::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
border-radius: 50%;
}
.drawer-localization .country-filter {
padding-block: 8px;
}
.drawer-localization .drawer-localization__button {
display: flex;
padding: 0;
position: relative;
text-decoration: none;
height: 44px;
&:hover {
color: var(--color-foreground);
}
}
.drawer-localization .drawer-localization__button .icon-caret {
width: fit-content;
height: fit-content;
margin: 0;
padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
}
.menu-drawer__localization:not(drawer-localization-component) .language-selector {
font-family: var(--menu-localization-font);
font-size: var(--menu-localization-font-size);
}
.menu-drawer__localization .language-selector.h5 {
padding-inline-start: 0;
}
.drawer-localization {
display: contents;
color: var(--color-foreground);
}
.drawer-localization localization-form-component {
position: relative;
height: 100%;
}
.drawer-localization .mobile-localization,
.drawer-localization .drawer-localization__button--label {
display: flex;
gap: var(--gap-xs);
margin-block: 0;
align-items: center;
}
.drawer-localization__button--label.h6 {
font-family: var(--menu-localization-font);
}
.drawer-localization img {
width: var(--icon-size-sm);
}
.drawer-localization .localization-button__icon,
.drawer-localization .localization-button__icon svg {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
.drawer-localization summary.is-disabled {
pointer-events: none;
}
.drawer-localization .localization-wrapper {
width: 100%;
}
.drawer-localization .localization-form {
display: flex;
flex-direction: column;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.drawer-localization .localization-form > * {
padding-inline: var(--padding-xl);
}
.drawer-localization .language-selector .svg-wrapper.icon-caret {
transform: translateY(-50%) rotate(0deg);
}
.drawer-localization .language-selector .svg-wrapper.icon-caret svg {
transform: none;
}
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:predictive-search-styles (INDEX:214) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
.predictive-search-dropdown {
display: flex;
flex-direction: column;
position: relative;
top: 0;
left: 0;
right: 0;
z-index: var(--layer-base);
}
.predictive-search-results__title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size--body-md);
font-weight: 500;
margin-block: var(--margin-sm) var(--margin-xs);
width: 100%;
text-transform: var(--title-case);
&:first-of-type {
margin-block-start: 0;
}
@media screen and (max-width: 749px) {
margin-block: var(--margin-lg) var(--margin-sm);
}
}
.predictive-search-results__no-results {
animation-delay: 100ms;
transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
}
.predictive-search-results__no-results:last-child {
margin-block: var(--margin-lg);
text-align: center;
}
/* Predictive search section styles */
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none; /* stylelint-disable-line */
}
.search-action .predictive-search {
z-index: calc(var(--layer-header-menu) + 2);
}
.search-action .search-modal .predictive-search {
z-index: var(--layer-window-overlay);
}
.header__column--right .predictive-search-form__content-wrapper {
right: 0;
left: unset;
}
.search-modal .predictive-search-form__content-wrapper {
width: 100%;
@media screen and (min-width: 750px) {
height: fit-content;
}
}
.dialog-modal .predictive-search-form__header-inner {
@media screen and (min-width: 750px) {
border: 0;
}
}
.search-modal__content .predictive-search-form__content {
max-height: var(--modal-max-height);
}
.predictive-search:has(.predictive-search-dropdown) .search-input {
outline-color: transparent;
}
.predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
@media screen and (max-width: 749px) {
border-bottom-color: transparent;
}
}
.predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
.predictive-search-form__header-inner:focus-within {
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-radius: var(--search-border-radius);
@media screen and (max-width: 749px) {
border-radius: var(--style-border-radius-inputs);
}
}
.dialog-modal .predictive-search-form__header {
border: 0;
border-radius: 0;
background-color: var(--color-background);
border-bottom: var(--style-border-width) solid var(--color-border);
@media screen and (min-width: 750px) {
padding: var(--padding-2xs) var(--padding-2xs) 0;
border-bottom: var(--search-border-width) solid var(--color-border);
}
@media screen and (max-width: 749px) {
transition: box-shadow 0.2s ease;
box-shadow: none;
}
}
.search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
transition: box-shadow var(--animation-speed) var(--animation-easing);
background-color: var(--color-background);
@media screen and (max-width: 749px) {
border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
}
}
@media screen and (max-width: 749px) {
.dialog-modal .predictive-search__close-modal-button {
padding-inline-start: var(--margin-xs);
margin-inline-start: 0;
}
}
.dialog-modal[open] {
@media screen and (max-width: 749px) {
border-radius: 0;
}
}
.dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
@media screen and (min-width: 750px) {
border-bottom-color: transparent;
}
}
@media screen and (max-width: 749px) {
.dialog-modal {
.predictive-search__reset-button-icon {
display: none;
}
.predictive-search__reset-button-text {
display: block;
}
.predictive-search-form__content {
/* The parent has overflow auto, we want to prevent a double scrollbar during animation */
max-height: 100%;
}
.predictive-search-form__content-wrapper {
box-shadow: none;
}
.predictive-search-form__header {
box-shadow: none;
}
.predictive-search-form__footer {
padding-block: var(--padding-2xl);
}
}
}
.predictive-search-results__pill {
font-weight: 500;
white-space: nowrap;
color: var(--color-foreground);
transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
transform var(--animation-speed-medium) var(--animation-timing-bounce);
margin: 2px;
&:hover {
transform: scale(1.03);
box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
}
}
.predictive-search-results__pill mark {
background-color: transparent;
font-weight: 200;
color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}
.predictive-search-results__pill:focus,
.predictive-search-results__pill:hover,
.predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
--pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
background-color: var(--pill-background-color);
outline: var(--border-width-sm) solid var(--color-border);
border: var(--border-width-sm);
text-decoration: none;
}
.predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
margin-bottom: var(--margin-lg);
padding-inline: var(--padding-xl);
gap: var(--gap-2xs);
}
.predictive-search-results__card {
--title-font-size: var(--font-size--md);
--title-margin-block: var(--margin-xs);
flex: 0 0 auto;
scroll-snap-align: start;
scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
calc(var(--padding-xl) + var(--button-padding-block) * 2);
transition: transform var(--animation-speed-medium) var(--animation-timing-default),
background-color var(--animation-speed-medium) var(--animation-timing-hover),
border-color var(--animation-speed-medium) var(--animation-timing-hover);
&:nth-last-child(3) {
scroll-snap-align: end;
}
&:active {
transform: scale(0.97);
transition: transform 100ms var(--animation-timing-active);
}
}
.recently-viewed-wrapper .predictive-search-results__card {
opacity: 1;
transform: translateY(0);
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.recently-viewed-wrapper.removing .predictive-search-results__card {
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
.predictive-search-results__card--product,
.recently-viewed-wrapper .predictive-search-results__card--product {
&:active {
transform: scale(0.97);
transition: transform 100ms var(--animation-timing-active);
}
&:hover {
background-color: var(--card-bg-hover);
border-radius: var(--product-corner-radius);
padding: calc(var(--padding-2xs) + 2px);
margin: calc((var(--padding-2xs) + 2px) * -1);
}
&:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
background-color: var(--card-bg-hover);
padding: calc(var(--padding-2xs) + 1px);
margin: calc((var(--padding-2xs) + 1px) * -1);
outline: var(--border-width-sm) solid var(--color-border);
border-radius: calc(var(--product-corner-radius) + 1px);
border-color: var(--card-border-focus);
}
}
.predictive-search-results__card:not(.predictive-search-results__card--product) {
padding: var(--padding-sm);
border: var(--border-width-sm) solid var(--color-border);
border-radius: var(--card-corner-radius);
width: 60cqi;
content-visibility: visible;
@media screen and (min-width: 750px) {
width: 27.5cqi;
}
&:hover {
border-color: var(--card-border-hover);
background-color: var(--card-bg-hover);
}
&[aria-selected='true'].keyboard-focus {
border-color: var(--card-border-hover);
background-color: var(--card-bg-hover);
}
&:active {
transform: scale(0.97);
transition: transform var(--animation-speed-medium) var(--animation-timing-active);
}
}
@keyframes search-element-scale-in {
0% {
transform: scale(0.95);
opacity: 0;
}
40% {
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes search-element-scale-out {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.95);
opacity: 0;
}
}
@keyframes search-element-slide-in-top {
from {
margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
opacity: 0;
}
to {
margin-top: var(--modal-top-margin);
opacity: 1;
}
}
@keyframes search-element-slide-out-top {
from {
margin-top: var(--modal-top-margin);
opacity: 1;
}
to {
margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
opacity: 0;
}
}
@keyframes content-slide {
from {
transform: translateY(var(--slide-from, 0));
opacity: var(--slide-opacity-from, 1);
}
to {
transform: translateY(var(--slide-to, 0));
opacity: var(--slide-opacity-to, 1);
}
}
.predictive-search-results__list {
--slide-width: 27.5%;
--slideshow-gap: var(--gap-md);
/* Make space for the outline to be visible */
padding-block-start: var(--border-width-sm);
}
.predictive-search-results__list slideshow-arrows {
@media screen and (max-width: 749px) {
display: none;
}
}
.predictive-search-results__no-results,
.predictive-search-results__wrapper,
.predictive-search-results__wrapper-products .predictive-search-results__card {
animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
}
slideshow-slide .resource-card {
/* stylelint-disable-next-line declaration-no-important */
animation-delay: 0ms !important;
}
.predictive-search-results__list,
.predictive-search-results__wrapper {
animation-duration: var(--animation-speed-medium);
}
.predictive-search-results__wrapper-queries {
animation-delay: 50ms;
}
.predictive-search-results__list:nth-of-type(2) {
animation-delay: 150ms;
}
.predictive-search-results__list:nth-of-type(3) {
animation-delay: 200ms;
}
.predictive-search-results__list:nth-of-type(4) {
animation-delay: 250ms;
}
.predictive-search-results__list:last-child {
margin-block-end: 0;
}
[data-resource-type] {
/* stylelint-disable-next-line declaration-no-important */
animation-delay: 0ms !important;
}
.predictive-search-results__no-results.removing,
.predictive-search-results__wrapper.removing {
animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
}
.predictive-search-results__card.removing {
animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
}
.predictive-search-results__wrapper {
transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
}
@keyframes search-element-slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes search-element-slide-down {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(8px);
}
}
.predictive-search-results__card--query {
transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
transform-origin: center;
&:active {
transform: scale(0.97);
}
}
/* Products list styles */
.predictive-search-results__products {
padding-inline: var(--padding-xl);
}
.recently-viewed-wrapper {
display: grid;
grid-template-rows: auto auto;
max-height: 1000px;
opacity: 1;
overflow: visible;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: top center;
transform: translateY(0);
}
.recently-viewed-wrapper.removing {
max-height: 0;
opacity: 0;
transform: translateY(-10px);
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.predictive-search-results__clear.button-unstyled {
color: var(--color-foreground);
opacity: 0.68;
transition: opacity var(--animation-speed-medium) var(--animation-easing);
padding: 0;
margin-left: var(--margin-sm);
&:hover {
opacity: 1;
}
}
.recently-viewed-wrapper.removing .predictive-search-results__card {
transition: none;
transform: none;
opacity: 1;
}
.recently-viewed-wrapper > * {
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
animation-delay: 30ms;
}
.predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
animation-delay: 60ms;
}
.predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
animation-delay: 90ms;
}
.predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
animation-delay: 120ms;
}
.predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
animation-delay: 150ms;
}
.predictive-search-results__wrapper-products {
animation-delay: 50ms;
}
/* Resource carousel styles */
.predictive-search-results__wrapper {
display: flex;
overflow-x: auto;
overflow-y: hidden;
padding-block-end: var(--padding-sm);
padding-inline: 0;
scroll-snap-type: x mandatory;
scroll-padding: 0 var(--padding-xl);
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.predictive-search-results__wrapper slideshow-slides {
--gutter-slide-width: var(--padding-xl);
/* Add padding to prevent hover animations from being clipped in slideshow
15px accommodates:
- Scale effect (9px on each side from 1.03 scale)
- Lift effect (4px upward movement)
- Shadow (15px spread with -5px offset)
Using 16px for better alignment with our spacing scale */
padding-block: var(--padding-xl);
margin-block: calc(-1 * var(--padding-xl));
gap: var(--gap-md);
}
.predictive-search-results__resource-header {
display: flex;
padding-inline: var(--padding-xl);
justify-content: space-between;
align-items: center;
height: 32px;
}
.predictive-search-results__resource-header .svg-wrapper {
width: var(--icon-size-xs);
}
.predictive-search-results__wrapper-products {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-block-end: var(--padding-sm);
gap: var(--gap-md);
transition: height var(--animation-speed-medium) var(--animation-easing);
@container (min-width: 550px) {
grid-template-columns: repeat(4, 1fr);
}
}
.predictive-search-results__wrapper-products:last-child {
padding-block-end: var(--padding-lg);
@media screen and (min-width: 750px) {
padding-block-end: var(--padding-sm);
}
}
.predictive-search-results__resource-header .predictive-search-results__title {
margin-block-end: 0;
}
.predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
margin-block-end: 0;
}
.predictive-search-results__resource-header slideshow-controls {
@media screen and (max-width: 749px) {
display: none;
}
}
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:221) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
display: none;
}
media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
/* Needed for safari to stretch to full grid height */
height: 100%;
}
@media screen and (min-width: 750px) {
.media-gallery--two-column .media-gallery__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Display grid view as a carousel on mobile, grid on desktop */
media-gallery:is(.media-gallery--grid) slideshow-component {
display: none;
}
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
display: grid;
}
}
.product-media-container__zoom-button {
position: absolute;
width: 100%;
height: 100%;
z-index: var(--layer-flat);
cursor: zoom-in;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
slideshow-slide.product-media-container--tallest {
content-visibility: visible;
}
.product-media__drag-zoom-wrapper {
aspect-ratio: inherit;
min-height: inherit;
min-width: inherit;
display: inherit;
flex: inherit;
}
.media-gallery__mobile-controls {
grid-area: auto;
}
.product-media-container--zoomable.product-media-container--image {
cursor: zoom-in;
}
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:225) */
#quick-add-dialog {
display: contents;
}
@media screen and (min-width: 750px) {
.quick-add-modal {
width: var(--quick-add-modal-width);
height: var(--quick-add-modal-height);
max-width: none;
}
}
.quick-add-modal {
padding: 0;
border: var(--style-border-popover);
overflow: hidden;
box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));
@media screen and (max-width: 749px) {
position: fixed;
margin: auto 0 0 0;
min-height: unset;
max-width: 100%;
border-radius: 0;
overflow: clip;
height: fit-content;
}
}
.quick-add-modal[open] {
@media screen and (max-width: 750px) {
border-top-left-radius: var(--style-border-radius-popover);
border-top-right-radius: var(--style-border-radius-popover);
}
}
.quick-add-modal[open] {
@media screen and (min-width: 750px) {
display: flex;
}
}
.quick-add-modal .view-more-details__wrapper {
@media screen and (max-width: 749px) {
display: none;
}
}
.quick-add-modal[open] {
animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
}
.quick-add-modal.dialog-closing {
animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
}
.quick-add-modal__close {
position: absolute;
top: var(--margin-2xs);
right: var(--margin-2xs);
transition: transform 0.15s var(--animation-timing-bounce);
z-index: var(--layer-raised);
overflow: visible;
transform-origin: center;
}
.quick-add-modal__close:active {
transform: scale(0.99) translateY(1px);
}
.quick-add-modal__close {
&:focus-visible {
outline: none;
}
&:focus-visible::after {
content: '';
position: absolute;
inset: 0;
border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
outline: var(--focus-outline-width) solid currentColor;
}
}
.quick-add-modal__content {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 100% 1fr;
position: relative;
overflow-y: auto;
max-height: 100vh;
flex-grow: 1;
@media screen and (max-width: 749px) {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
padding-inline: var(--padding-xl);
padding-block: var(--padding-xl);
gap: var(--gap-lg);
flex: 1;
min-height: 0;
overflow-y: auto;
height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
max-height: 100vh;
}
}
.quick-add-modal__content .media-gallery--grid .media-gallery__grid {
grid-template-columns: 1fr;
}
.quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
grid-column: auto;
}
.quick-add-modal__content {
/* One column */
.media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
/* Two column, small first image */
.media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
.product-media-container:nth-of-type(odd)
.product-media > *,
/* Two column, large first image */
.media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
.product-media-container:is(:first-of-type, :nth-of-type(even))
.product-media > *,
/* Carousel */
.media-gallery--carousel slideshow-container {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.quick-add-modal__content .view-more-details__wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
}
.view-more-details__wrapper .view-more-details {
display: flex;
align-items: center;
width: fit-content;
}
.quick-add-modal__content .product-header {
@media screen and (max-width: 749px) {
display: flex;
flex-direction: column;
grid-column: 2 / -1;
grid-row: 1;
padding-right: var(--padding-2xl);
}
}
.quick-add-modal__content .product-header a:not(product-price *) {
@media screen and (max-width: 749px) {
font-size: var(--font-size--md);
font-weight: 500;
color: inherit;
width: fit-content;
}
}
.quick-add-modal__content variant-picker,
.quick-add-modal__content product-form-component {
@media screen and (max-width: 749px) {
grid-column: 1 / -1;
}
}
.quick-add-modal__content .product-media-container__zoom-button {
cursor: default;
}
.quick-add-modal__content .product-details {
grid-column: 4 / -1;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
justify-content: stretch;
height: 100%;
min-height: 0;
overflow-y: auto;
position: relative;
dialog[open] & {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.1s;
}
@media screen and (max-width: 749px) {
grid-column: 2 / span 2;
grid-row: span 1;
max-height: 100%;
height: 100%;
}
}
@property --quick-add-modal-mask-start {
syntax: '';
initial-value: 0px;
inherits: false;
}
@property --quick-add-modal-mask-end {
syntax: '';
initial-value: 0px;
inherits: true;
}
@keyframes detect-scroll {
from,
to {
--can-scroll: ;
}
}
@supports (animation-timeline: scroll(self)) {
dialog[open] .quick-add-modal__content .product-details {
mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
scrollEnd 1s linear both, detect-scroll 1ms linear none;
animation-timeline: auto, scroll(self), scroll(self), scroll(self);
animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
}
}
@keyframes scrollStart {
from {
--quick-add-modal-mask-start: 0px;
}
to {
--quick-add-modal-mask-start: 48px;
}
}
@keyframes scrollEnd {
from {
--quick-add-modal-mask-end: 0px;
}
to {
--quick-add-modal-mask-end: 48px;
}
}
.quick-add-modal__content .product-details > .group-block {
flex-grow: 1;
width: auto;
}
.quick-add-modal__content > * {
min-height: 0;
}
.quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
flex: 0 0 auto;
}
.quick-add-modal__content .product-details :is(.buy-buttons-block) {
margin-top: auto;
position: sticky;
bottom: 0;
padding-bottom: var(--padding-3xl);
background-color: var(--color-background);
z-index: var(--layer-raised);
&::before {
--quick-add-modal-mask-end-progressive-enhanced: 0px;
position: absolute;
content: '';
display: block;
inset: auto 0 100% 0;
pointer-events: none;
height: min(var(--gap-2xl), var(--gap));
background-color: inherit;
mask-image: linear-gradient(
to top,
#000 0%,
#000 calc(var(--gap-2xs)),
transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
transparent
);
}
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
position: static;
padding-bottom: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
display: none;
}
.quick-add-modal__content .product-details .buy-buttons-block__bar {
display: block;
position: sticky;
bottom: 0;
margin-top: auto;
padding-block: var(--gap-md) var(--padding-3xl);
background-color: var(--color-background);
z-index: var(--layer-raised);
&::before {
--quick-add-modal-mask-end-progressive-enhanced: 0px;
position: absolute;
content: '';
display: block;
inset: auto 0 100% 0;
pointer-events: none;
height: min(var(--gap-2xl), var(--gap));
background-color: inherit;
mask-image: linear-gradient(
to top,
#000 0%,
#000 calc(var(--gap-2xs)),
transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
transparent
);
}
}
@supports (animation-timeline: scroll(self)) {
.quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
.quick-add-modal__content .product-details .buy-buttons-block__bar::before {
--mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
--mask-if-no-scroll: 48px;
--quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
height: calc(var(--gap-2xs) + 48px);
}
}
.quick-add-modal__content .product-details .variant-picker {
flex: 0 0 auto;
padding-block: min(var(--gap-2xl), var(--gap));
margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
}
.quick-add-modal__content .variant-option--swatches {
padding-inline-start: var(--padding-2xs);
}
.quick-add-modal__content .variant-option--swatches legend {
margin-inline-start: calc(-1 * var(--padding-2xs));
}
.quick-add-modal__content:not(:has(.product-information__media)) .product-details {
grid-column: 1 / -1;
}
.quick-add-modal__content .view-product-title {
display: flex;
padding-block: 0;
margin-block-end: 12px;
/* Prevent overlap between title and close button */
padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
}
.quick-add-modal__content .view-product-title a {
color: inherit;
text-decoration: none;
text-align: left;
font-size: var(--font-size--2xl);
font-weight: 600;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s var(--animation-easing);
}
.quick-add-modal__content .product-details product-price {
--text-align: left;
}
.quick-add-modal__content .product-details product-price.text-block--align-center {
margin-inline: 0;
}
.quick-add-modal__content .product-details product-price.text-center {
--text-align: left;
}
.quick-add-modal__content .product-details product-price > * {
text-align: left;
}
/* Stella — bigger price in quick add modal */
.quick-add-modal__content .product-details product-price .price__regular .price-item,
.quick-add-modal__content .product-details product-price .price-item {
font-size: 1.35rem !important;
font-weight: 600 !important;
}
.quick-add-modal__content
.product-details
*:not(
.group-block,
.group-block-content,
.buy-buttons-block,
.buy-buttons-block *,
.view-product-title,
.view-product-title *,
variant-picker,
variant-picker *,
product-price,
product-price *,
product-inventory,
product-inventory *,
.view-more-details__wrapper,
.view-more-details__wrapper *
) {
@media screen and (min-width: 750px) {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
.quick-add-modal__content
.group-block:not(
:has(
.buy-buttons-block,
.buy-buttons-block *,
.view-product-title,
.view-product-title *,
variant-picker,
variant-picker *,
product-price,
product-price *,
product-inventory,
product-inventory *,
.view-more-details__wrapper,
.view-more-details__wrapper *
),
.buy-buttons-block
) {
display: none;
}
@media screen and (min-width: 750px) {
.quick-add-modal__content .group-block-content {
gap: 0;
}
.quick-add-modal__content .media-gallery__grid {
gap: min(var(--gap-2xs), var(--image-gap));
border-radius: var(--style-border-radius-popover, 0);
}
.quick-add-modal__content .media-gallery--grid .product-media img {
border-radius: 0;
}
}
.quick-add-modal__content .product-details > .group-block {
padding-block: var(--padding-3xl) 0;
}
.quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
padding-inline: var(--padding-3xl);
}
.quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
content-visibility: auto;
}
.quick-add-modal__content .product-information__media {
width: 100%;
grid-column: 1 / span 1;
grid-row: 1;
position: relative;
top: 0;
animation: fadeIn 0.4s var(--animation-timing-fade-in) both;
@media screen and (min-width: 750px) {
position: sticky;
grid-column: 1 / 4;
width: var(--quick-add-modal-gallery-width);
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
&::-webkit-scrollbar {
display: none;
}
}
.quick-add-modal__content .product-information__media media-gallery {
pointer-events: none;
@media screen and (min-width: 750px) {
position: absolute;
inset: 0;
}
}
.quick-add-modal media-gallery {
padding: 0;
}
.quick-add-modal__content .product-information__media slideshow-arrows {
display: none;
}
.quick-add-modal__content .product-information__media slideshow-container {
display: block;
}
.quick-add-modal__content .product-information__media slideshow-slides {
display: flex;
flex-direction: column;
gap: var(--gap-2xs);
overflow: visible;
scroll-snap-type: none;
}
.quick-add-modal__content .product-information__media slideshow-slide {
width: 100%;
flex: none;
scroll-snap-align: unset;
position: relative;
transform: none;
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--animation-easing);
}
.quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
@media screen and (max-width: 749px) {
display: none;
}
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.05s;
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.1s;
}
.quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
display: none;
}
.quick-add-modal__content .sticky-content,
.quick-add-modal__content .sticky-content--desktop {
top: 0;
}
.quick-add-modal__content .text-block.rte:not(product-price),
.quick-add-modal__content .view-more-details__wrapper {
display: none;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:resource-card (INDEX:229) */
.resource-card {
--resource-card-secondary-image-opacity: 0;
--resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));
display: flex;
flex-direction: column;
row-gap: var(--padding-xs);
position: relative;
text-decoration: none;
height: 100%;
opacity: 0;
animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
}
.resource-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
.resource-card__content {
display: flex;
flex-direction: column;
color: var(--color-foreground);
gap: var(--padding-3xs);
.price {
font-weight: 500;
}
.volume-pricing-note {
display: block;
margin-top: var(--padding-3xs);
font-family: var(--font-body--family);
font-weight: normal;
font-size: min(0.85em, var(--font-paragraph--size));
line-height: normal;
letter-spacing: normal;
text-transform: none;
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
}
.resource-card[data-resource-type='article'] .resource-card__content,
.resource-card[data-resource-type='page'] .resource-card__content {
gap: var(--padding-xs);
}
.resource-card__image {
aspect-ratio: var(--resource-card-aspect-ratio, auto);
object-fit: cover;
border-radius: var(--resource-card-corner-radius);
opacity: var(--resource-card-primary-image-opacity);
}
.resource-card__image--secondary {
position: absolute;
top: 0;
opacity: var(--resource-card-secondary-image-opacity);
border-radius: var(--resource-card-corner-radius);
}
.resource-card__media:empty {
display: none;
}
.resource-card__image-placeholder {
padding: var(--padding-sm);
font-size: var(--font-size--lg);
line-height: var(--line-height--display-loose);
word-break: break-word;
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
aspect-ratio: var(--resource-card-aspect-ratio, auto);
border-radius: var(--resource-card-corner-radius);
color: var(--color-foreground);
}
.resource-card__title {
margin-block: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.3;
word-break: break-word;
overflow-wrap: break-word;
}
.resource-card__title.paragraph {
line-height: 1.3;
}
.resource-card--overlay {
height: 100%;
&::before {
content: '';
position: absolute;
inset: 50% 0 0;
background: var(--gradient-image-overlay);
border-radius: var(--resource-card-corner-radius);
pointer-events: none;
z-index: var(--layer-flat);
}
}
.resource-card--overlay .resource-card__image {
height: 100%;
}
.resource-card--overlay .resource-card__content {
position: absolute;
inset: auto 0 0;
padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
z-index: var(--layer-raised);
}
.resource-card--overlay .resource-card__title {
color: var(--color-white);
}
/* Collection images */
.resource-card__image-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-2xs);
}
.resource-card__collection-image {
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
}
.resource-card__subtext {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
margin-block-start: 0;
}
.resource-card__subtext.paragraph {
font-size: var(--font-size--body-sm);
line-height: var(--line-height--body-tight);
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.resource-card:has(.resource-card__image--secondary) {
&:hover,
&:focus {
--resource-card-secondary-image-opacity: 1;
}
}
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:234) */
/* Search modal style */
.search-modal {
--search-border-radius: var(--style-border-radius-popover);
--search-border-width: var(--style-border-width);
}
.search-modal__content {
/* Approx set the top so when the content is at max height, the modal is centered */
--modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
--modal-width: 66dvw;
padding: 0;
border: var(--style-border-popover);
@media screen and (min-width: 750px) {
width: var(--modal-width);
margin-block-start: var(--modal-top-margin);
overflow: hidden;
}
}
/* Hide the default dialog backdrop on small screens */
@media screen and (max-width: 749px) {
.search-modal__content::backdrop {
display: none;
}
}
.dialog-modal[open].search-modal__content {
transform-origin: bottom center;
animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
border-radius: var(--search-border-radius);
box-shadow: var(--shadow-popover);
@media screen and (max-width: 749px) {
border-radius: 0;
}
}
.dialog-modal.search-modal__content.dialog-closing {
animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
}
.search-modal__content[open] {
display: flex;
}
.search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
position: relative;
}
.dialog-modal
.predictive-search-form__header:has(
.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
)::before {
content: '';
position: absolute;
right: calc(var(--padding-sm) + var(--minimum-touch-target));
top: 0;
bottom: 0;
width: var(--border-width-sm);
background-color: var(--color-border);
}
.dialog-modal
.predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
> .predictive-search__close-modal-button {
&::before {
content: none;
}
}
@media screen and (min-width: 750px) {
.dialog-modal
.predictive-search-form__header:has(
.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
)::before {
right: calc(var(--padding-2xl) * 2);
}
}
predictive-search-component {
--resource-card-corner-radius: var(--product-corner-radius);
display: flex;
width: 100%;
position: relative;
margin-inline: auto;
align-items: center;
background-color: var(--color-background);
z-index: var(--layer-heightened);
}
.predictive-search-form__footer {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
@media screen and (min-width: 750px) {
--to-top-gradient-background: linear-gradient(
to top,
rgb(var(--color-background-rgb) / var(--opacity-90)),
rgb(var(--color-background-rgb) / var(--opacity-80)),
rgb(var(--color-background-rgb) / var(--opacity-40)),
transparent
);
padding-block: var(--padding-xs) var(--padding-lg);
background-image: var(--to-top-gradient-background);
}
}
predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
.predictive-search-form__footer {
display: block;
}
.predictive-search-form {
position: relative;
width: 100%;
align-self: flex-start;
}
.predictive-search-form__content {
max-height: 50dvh;
overflow-y: auto;
background-color: var(--color-background);
/* Firefox */
scrollbar-width: none;
/* Webkit browsers */
&::-webkit-scrollbar {
display: none;
}
}
.predictive-search-form__content-wrapper {
position: absolute;
top: 100%;
width: 100%;
left: 0;
z-index: var(--layer-raised);
display: flex;
flex-direction: column;
border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
transition: box-shadow var(--animation-speed) var(--animation-easing);
transform: translateZ(0);
will-change: transform, opacity;
overflow: hidden;
@media screen and (max-width: 749px) {
border-radius: 0;
}
@media screen and (min-width: 750px) {
max-height: var(--modal-max-height);
}
}
/* Add new rule to apply bottom padding only when search button exists */
.predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
> .predictive-search-form__content {
padding-block-end: var(--padding-6xl);
}
.predictive-search-form__header-inner {
background: var(--color-background);
border: var(--search-border-width) solid var(--color-border);
color: var(--color-foreground);
border-radius: var(--style-border-radius-popover);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
@media screen and (max-width: 749px) {
border-radius: var(--style-border-radius-inputs);
border: none;
}
}
.predictive-search-form__header-inner:focus-within {
outline-offset: var(--focus-outline-offset);
@media screen and (min-width: 750px) {
outline: var(--focus-outline-width) solid var(--color-primary);
}
}
.predictive-search-form__header {
display: flex;
position: sticky;
top: 0;
z-index: var(--layer-heightened);
width: 100%;
align-items: center;
background-color: var(--color-input-background);
border: var(--search-border-width) solid var(--color-border);
border-radius: var(--style-border-radius-inputs);
@media screen and (max-width: 749px) {
padding: var(--padding-2xs) var(--padding-sm);
}
}
.predictive-search-form__header:focus-within,
.predictive-search-form__header-inner:focus-within,
.predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
outline: none;
box-shadow: none;
/* stylelint-disable-next-line declaration-no-important */
border-color: var(--color-border) !important;
}
input.search-input {
border-radius: var(--style-border-radius-inputs);
padding-block: var(--padding-sm);
font-size: var(--font-size--md);
width: 100%;
color: var(--color-foreground);
padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
background: transparent;
text-overflow: ellipsis;
overflow: hidden;
outline: none;
border: 0;
}
.search-input::placeholder {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.search-input,
.search-input:is(:focus, :focus-visible, :focus-within),
.predictive-search-form__header *:is(:focus, :focus-visible) {
outline: none;
box-shadow: none;
}
.search-input:hover {
background-color: transparent;
}
.predictive-search__icon {
position: absolute;
left: var(--margin-xl);
top: auto;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
@media screen and (min-width: 750px) {
left: var(--margin-md);
}
}
.predictive-search__icon > svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.predictive-search__reset-button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
padding: 0;
margin-inline-end: var(--margin-md);
background: transparent;
color: var(--color-foreground);
opacity: 0.68;
transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
visibility var(--animation-speed-medium) var(--animation-timing-fade-out);
&:hover {
color: var(--color-foreground);
}
&:active {
transform: scale(0.9);
transition: transform 100ms var(--animation-timing-active);
}
@media screen and (min-width: 750px) {
margin-inline-end: var(--margin-2xs);
}
}
.predictive-search__reset-button[hidden] {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.predictive-search__reset-button-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
transition: background-color var(--animation-speed-medium) ease-in-out,
transform var(--animation-speed-medium) var(--animation-timing-bounce);
border-radius: 50%;
&:hover {
background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
}
}
.predictive-search__reset-button:active .predictive-search__reset-button-icon {
transform: scale(0.85);
transition-timing-function: var(--animation-timing-active);
transition-duration: 100ms;
}
.predictive-search__reset-button svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.predictive-search__reset-button-text {
display: none;
}
.predictive-search__search-button {
margin: auto;
z-index: var(--layer-raised);
transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
transform-origin: center;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
}
&:active {
transform: scale(0.97);
transition: transform 100ms var(--animation-timing-active);
box-shadow: none;
}
}
.predictive-search__close-modal-button {
--button-color: var(--color-foreground);
--button-background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
margin-inline-start: var(--margin-sm);
padding: 0;
box-shadow: none;
&:active {
transform: scale(0.8);
transition: transform 100ms var(--animation-timing-active);
}
.svg-wrapper,
svg {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
}
.predictive-search__close-modal-button:hover {
--button-color: var(--color-foreground);
--button-background-color: transparent;
}
/* END_SNIPPET:search-modal */
/* START_SNIPPET:skip-to-content-link (INDEX:239) */
.skip-to-content-link {
position: absolute;
left: -99999px;
}
.skip-to-content-link:focus {
z-index: var(--layer-temporary);
overflow: auto;
width: auto;
height: auto;
padding: var(--padding-lg) var(--padding-4xl);
left: var(--margin-lg);
top: var(--margin-lg);
background-color: var(--color-background);
box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-arrow (INDEX:241) */
.slideshow-control--large {
.icon-caret {
--icon-stroke-width: 1px;
}
.icon-caret {
--icon-stroke-width: 1px;
}
.svg-wrapper,
svg {
width: var(--slideshow-controls-icon);
height: var(--slideshow-controls-icon);
}
}
/* Slideshow control shape styles */
.slideshow-control.slideshow-control--shape-square,
.slideshow-control.slideshow-control--shape-circle {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background-color: var(--color-primary-button-background);
color: var(--color-primary-button-text);
}
.slideshow-control.slideshow-control--shape-circle {
border-radius: 50%;
}
.slideshow-control.slideshow-control--shape-square {
border-radius: 0;
}
.slideshow-control .icon-caret {
rotate: -90deg;
}
/* END_SNIPPET:slideshow-arrow */
/* START_SNIPPET:slideshow-arrows (INDEX:242) */
slideshow-arrows {
--cursor-previous: w-resize;
--cursor-next: e-resize;
position: absolute;
inset: 0;
display: flex;
z-index: var(--layer-heightened);
pointer-events: none;
mix-blend-mode: difference;
align-items: flex-end;
&[position='left'] {
justify-content: flex-start;
padding-inline: var(--padding-xs);
}
&[position='right'] {
justify-content: flex-end;
padding-inline: var(--padding-xs);
}
&[position='center'] {
justify-content: space-between;
align-items: center;
}
}
slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
mix-blend-mode: normal;
}
slideshow-component[disabled='true'] slideshow-arrows {
display: none;
}
slideshow-arrows .slideshow-control {
pointer-events: auto;
opacity: 0;
min-height: var(--minimum-touch-target);
min-width: var(--minimum-touch-target);
padding: 0 var(--padding-xs);
color: var(--color-white);
}
slideshow-arrows .slideshow-control.slideshow-control--style-none {
display: none;
}
/* END_SNIPPET:slideshow-arrows */
/* START_SNIPPET:slideshow-styles (INDEX:245) */
/*
* Slideshow Component
*/
slideshow-component {
--cursor: grab;
--slide-offset: 6px;
position: relative;
display: flex;
flex-direction: column;
timeline-scope: var(--slideshow-timeline);
}
.slideshow--single-media {
--cursor: default;
}
a slideshow-component {
--cursor: pointer;
}
slideshow-component [data-placeholder='true'] * {
cursor: grab;
}
/*
* Slideshow Slides
*/
slideshow-slides {
width: 100%;
position: relative;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-color: transparent transparent;
scrollbar-width: none;
gap: var(--slideshow-gap, 0);
cursor: var(--cursor);
min-height: var(--slide-min-height);
align-items: var(--slideshow-align-items, normal);
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
&::-webkit-scrollbar {
width: 0;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
@media screen and (min-width: 750px) {
min-height: var(--slide-min-height-desktop);
}
}
.slideshow--stretch-content slideshow-slides > * {
height: auto;
}
slideshow-component[disabled='true'] slideshow-slides {
overflow: hidden;
}
/**
* By default, slideshows have overflow: hidden (no compositor layer).
* When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
*/
slideshow-component:not([in-viewport]) slideshow-slides {
overflow: hidden;
}
slideshow-component[mobile-disabled] slideshow-slides {
@media screen and (max-width: 749px) {
overflow: hidden;
}
}
slideshow-slides[gutters*='start'] {
padding-inline-start: var(--gutter-slide-width, 0);
scroll-padding-inline-start: var(--gutter-slide-width, 0);
}
slideshow-slides[gutters*='end'] {
padding-inline-end: var(--gutter-slide-width, 0);
}
slideshow-component[dragging] {
--cursor: grabbing;
* {
pointer-events: none;
}
}
slideshow-component[dragging] slideshow-arrows {
display: none;
}
slideshow-container {
width: 100%;
display: block;
position: relative;
grid-area: container;
container-type: inline-size;
background-color: var(--color-background);
}
/*
* Be specific about HTML children structure to avoid targeting nested slideshows.
* Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
*/
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
content-visibility: visible;
}
@keyframes slide-reveal {
0% {
translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
opacity: 0;
}
}
/*
* Slideshow Slide
*/
slideshow-slide {
position: relative;
scroll-snap-align: center;
width: var(--slide-width, 100%);
max-height: 100%;
flex-shrink: 0;
view-timeline-name: var(--slideshow-timeline);
view-timeline-axis: inline;
content-visibility: auto;
contain-intrinsic-size: auto none;
border-radius: var(--corner-radius, 0);
overflow: hidden;
slideshow-component[actioned] &,
&[aria-hidden='false'] {
content-visibility: visible;
}
slideshow-component slideshow-slide:not([aria-hidden='false']) {
content-visibility: hidden;
}
&[hidden]:not([reveal]) {
display: none;
}
/* Make inactive slides appear clickable */
&[aria-hidden='true'] {
cursor: pointer;
}
}
slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
bottom: var(--padding-sm);
right: var(--padding-sm);
}
slideshow-component.slideshow--content-below-media slideshow-slide {
display: grid;
}
.slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
position: static;
}
.slideshow--content-below-media slideshow-slide {
grid-template-rows: var(--grid-template-rows);
@media screen and (min-width: 750px) {
grid-template-rows: var(--grid-template-rows-desktop);
}
}
/* END_SNIPPET:slideshow-styles */