/** 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_BLOCK:filters (INDEX:134) */
.facets-block-wrapper {
@media screen and (min-width: 750px) {
margin: var(--facets-margin);
grid-column: var(--grid-column--desktop);
}
}
.facets-block-wrapper--vertical {
@media screen and (min-width: 750px) {
grid-column: var(--grid-column--desktop);
}
}
.facets-toggle {
--icon-offset: -3px;
display: flex;
justify-content: space-between;
align-items: center;
height: var(--minimum-touch-target);
margin: var(--facets-margin);
padding-block: var(--facets-inner-padding-block);
padding-inline: var(--facets-inner-padding-inline);
@media screen and (min-width: 750px) {
display: none;
}
}
.facets-toggle__wrapper {
margin-left: var(--icon-offset);
}
.facets-toggle__button {
box-shadow: none;
@media screen and (min-width: 750px) {
display: none;
}
}
.filter-count-bubble {
position: relative;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
line-height: normal;
place-content: center;
color: var(--color-foreground);
border: var(--icon-stroke-width) solid var(--color-background);
}
.facets-mobile__title-wrapper .h3 {
margin-block-end: 0;
display: inline-flex;
align-items: center;
gap: var(--gap-xs);
}
.facets-mobile__title-wrapper .filter-count-bubble {
width: 22px;
height: 22px;
}
.facets-mobile__title-wrapper .filter-count-bubble__text {
font-size: var(--font-size--xs);
}
.filter-count-bubble__background {
position: absolute;
inset: 0;
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
border-radius: var(--style-border-radius-50);
}
.filter-count-bubble__text {
font-size: 11px;
font-weight: var(--font-paragraph--weight);
aspect-ratio: 1 / 1;
}
.facets-toggle--no-filters {
@media screen and (max-width: 749px) {
/* stylelint-disable-next-line declaration-no-important */
justify-content: unset !important;
& > .facets-mobile-wrapper {
width: 100%;
}
}
}
.facets-block-wrapper--vertical + .facets-toggle {
@media screen and (max-width: 749px) {
margin: 0;
}
}
.facets-mobile-wrapper {
display: flex;
align-items: center;
gap: var(--gap-sm);
justify-content: flex-end;
}
.facets-mobile-wrapper--multiple-controls {
justify-content: space-between;
}
@media screen and (min-width: 750px) {
dialog-component.facets-block-wrapper {
position: absolute;
width: 0;
height: 0;
}
}
.facets {
--facets-form-horizontal-gap: 20px;
--facets-horizontal-max-input-wrapper-height: 230px;
--facets-upper-z-index: var(--layer-raised);
--facets-open-z-index: var(--layer-heightened);
--facets-sticky-z-index: var(--layer-sticky);
--facets-panel-min-width: 120px;
--facets-panel-height: 300px;
--facets-grid-panel-width: 300px;
--facets-clear-padding: var(--padding-md);
--facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
--facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
--facets-clear-all-min-width: 120px;
--facets-see-results-min-width: 55%;
--facets-mobile-gap: 22px;
--facets-low-opacity: 10%;
--facets-hover-opacity: 75%;
top: auto;
bottom: 0;
height: var(--drawer-height);
max-height: var(--drawer-height);
width: var(--drawer-width);
max-width: var(--drawer-max-width);
box-shadow: none;
padding-block: 0;
&:not(.facets--drawer) {
@media screen and (min-width: 750px) {
padding-inline: var(--padding-inline-start) var(--padding-inline-end);
width: 100%;
max-width: 100%;
}
}
}
.facets--horizontal {
display: none;
@media screen and (min-width: 750px) {
padding-block: var(--padding-block-start) var(--padding-block-end);
display: flex;
align-items: center;
position: relative;
z-index: var(--facets-upper-z-index);
border: none;
height: auto;
top: initial;
bottom: initial;
max-height: none;
width: auto;
overflow: visible;
}
}
.facets--vertical {
display: none;
@media screen and (min-width: 750px) {
padding-block: 0 var(--padding-block-end);
display: block;
position: static;
top: auto;
bottom: auto;
height: auto;
max-height: none;
width: auto;
overflow: visible;
}
}
.facets--drawer {
border-radius: 0;
border-right: var(--style-border-drawer);
box-shadow: var(--shadow-drawer);
padding-inline: 0;
}
.facets--drawer[open] {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.facets-drawer__form-wrapper {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.facets-drawer__form-wrapper .facets__form {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.facets-drawer__filters {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.facets-drawer__filters .facets__filters-wrapper,
.facets-drawer__filters .filter-remove-buttons,
.facets-drawer__filters .sorting-filter-component {
overflow: visible;
}
.facets.facets-controls-wrapper {
@media screen and (min-width: 750px) {
grid-column: column-1 / column-12;
color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
gap: 0 var(--facets-form-horizontal-gap);
padding-bottom: var(--padding-xs);
}
}
.facets__inputs {
display: flex;
flex-direction: column;
gap: var(--padding-lg);
width: 100%;
}
:is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
padding-block-end: var(--padding-sm);
}
/* Facets - Form */
.facets__form-wrapper {
display: flex;
flex-direction: column;
color: var(--color-foreground-muted);
width: 100%;
}
.facets--horizontal .facets__form-wrapper {
@media screen and (min-width: 750px) {
flex-direction: row;
height: auto;
}
}
.facets__form {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
}
.facets--horizontal .facets__form {
@media screen and (min-width: 750px) {
flex-flow: row nowrap;
height: auto;
}
}
.facets:not(.facets--drawer) .facets__filters-wrapper {
@media screen and (min-width: 750px) {
margin-inline-end: var(--margin-md);
}
}
.facets--horizontal .facets__filters-wrapper {
@media screen and (min-width: 750px) {
max-width: 60%;
display: flex;
flex-wrap: wrap;
column-gap: var(--gap-xl);
margin-inline-end: 0;
}
}
/* Facets - Summary */
.facets__summary {
--variant-picker-swatch-width: 32px;
--variant-picker-swatch-height: 32px;
--icon-opacity: 0.5;
@media screen and (min-width: 750px) {
--variant-picker-swatch-width: 26px;
--variant-picker-swatch-height: 26px;
}
font-size: var(--font-h5--size);
display: flex;
justify-content: space-between;
&:hover {
--icon-opacity: 1;
}
}
.facets__filters-wrapper:hover .facets__summary,
.facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
opacity: var(--facets-hover-opacity);
}
.facets__filters-wrapper .facets__summary:hover,
.facets__filters-wrapper .facets__panel[open] .facets__summary {
opacity: 1;
}
.facets--horizontal .facets__summary {
@media screen and (min-width: 750px) {
font-size: var(--font-paragraph--size);
justify-content: flex-start;
height: var(--minimum-touch-target);
}
}
.facets__summary .icon-caret {
height: var(--icon-size-xs);
width: var(--icon-size-xs);
color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
margin-block: var(--margin-2xs);
transition: color var(--animation-speed) var(--animation-easing);
}
.facets--drawer .facets__summary .icon-caret {
margin-inline-start: var(--margin-2xs);
}
/* Facets - Bubble */
.facets__bubble {
display: inline-flex;
font-family: var(--font-paragraph--family);
font-weight: var(--font-paragraph--weight);
aspect-ratio: 1 / 1;
}
/* Facets - Inputs */
.facets__inputs-wrapper {
margin-block: var(--padding-xs) var(--padding-xs);
}
.facets__inputs .show-more {
display: flex;
flex-direction: column;
gap: var(--gap-xl);
margin-block-end: var(--padding-xl);
}
.facets:not(.facets--drawer) .facets__inputs-wrapper {
@media screen and (min-width: 750px) {
gap: var(--gap-sm);
}
}
.facets--horizontal .facets__inputs .show-more {
@media screen and (min-width: 750px) {
display: contents;
}
}
.facets--horizontal .facets__inputs-wrapper {
@media screen and (min-width: 750px) {
max-height: var(--facets-horizontal-max-input-wrapper-height);
scrollbar-width: none;
-ms-overflow-style: none;
overflow-x: auto;
padding: var(--padding-md);
margin-block: 0;
}
}
.facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
padding-block: var(--padding-sm);
padding-inline: var(--padding-sm);
margin-block: calc(var(--padding-sm) * -1);
margin-inline: calc(var(--padding-sm) * -1);
}
@media screen and (max-width: 749px) {
.facets__inputs:has(.show-more) .facets__inputs-wrapper {
padding-block: var(--padding-sm);
padding-inline: var(--padding-sm);
margin-block: calc(var(--padding-sm) * -1);
margin-inline: calc(var(--padding-sm) * -1);
}
}
.facets__inputs-wrapper:not(:has(.facets__inputs-list)),
.facets__inputs-wrapper .facets__inputs-list {
display: flex;
gap: var(--facets-mobile-gap);
flex-direction: column;
@media screen and (min-width: 750px) {
gap: var(--gap-sm);
}
}
@media screen and (min-width: 750px) {
.facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
gap: var(--gap-sm);
}
.facets--horizontal
.facets__inputs-wrapper
.facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
display: grid;
grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
}
}
.facets__inputs-wrapper .facets__inputs-list--swatches {
--facets-mobile-gap: var(--gap-sm);
}
.facets__inputs-wrapper .facets__inputs-list--grid {
--min-column-width: 20%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
gap: var(--gap-sm);
@media screen and (min-width: 750px) {
--min-column-width: 50px;
}
}
.facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
@media screen and (min-width: 750px) {
width: var(--facets-grid-panel-width);
}
}
.facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
.facets__inputs-wrapper--row .facets__inputs-list {
flex-wrap: wrap;
flex-direction: row;
}
.facets__inputs .show-more__button {
--show-more-icon-size: 22px;
--show-more-gap: 8px;
gap: var(--show-more-gap);
@media screen and (min-width: 750px) {
--show-more-icon-size: 16px;
--show-more-gap: 6px;
}
}
.facets__inputs .show-more__button .icon-plus {
width: var(--show-more-icon-size);
height: var(--show-more-icon-size);
svg {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
}
/* Facets - Panel */
.facets__panel {
padding: 0 var(--drawer-padding);
}
.facets:not(.facets--drawer) .facets__panel,
.facets-controls-wrapper .facets__panel {
@media screen and (min-width: 750px) {
padding: 0;
}
}
.facets--horizontal .facets__panel {
@media screen and (min-width: 750px) {
position: relative;
}
}
.facets-mobile-wrapper .facets__panel-content {
border-radius: var(--style-border-radius-popover);
}
.facets-mobile-wrapper {
--facets-upper-z-index: var(--layer-raised);
--facets-panel-min-width: 120px;
--facets-panel-height: 300px;
}
.facets--horizontal .facets__panel-content {
@media screen and (min-width: 750px) {
border-radius: var(--style-border-radius-popover);
position: absolute;
top: 100%;
width: max-content;
min-width: var(--facets-panel-min-width);
max-width: var(--facets-panel-width);
max-height: var(--facets-panel-height);
z-index: var(--facets-upper-z-index);
box-shadow: var(--shadow-popover);
border: var(--style-border-popover);
background-color: var(--color-background);
overflow-y: hidden;
gap: 0;
}
}
:is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
content: '';
display: block;
height: 0;
width: calc(100% - var(--drawer-padding) * 2);
border-top: var(--style-border-width) solid var(--color-border);
margin: 0 auto;
}
@media screen and (min-width: 750px) {
.facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
width: 100%;
}
.facets--horizontal .facets__item:not(:first-of-type)::before,
.facets--horizontal .sorting-filter::before {
content: none;
}
}
@media screen and (min-width: 750px) {
.facets--vertical .facets__item:not(:first-of-type)::before,
.facets--vertical .sorting-filter::before {
content: '';
}
}
/* Facets - Text */
.facets__label,
.facets__clear-all-link,
.clear-filter {
text-decoration-color: transparent;
text-decoration-thickness: 0.075em;
text-underline-offset: 0.125em;
transition: text-decoration-color var(--animation-speed) var(--animation-easing);
}
.facets__clear-all-link {
display: none;
cursor: pointer;
padding: var(--padding-xs);
color: var(--button-color);
transition: text-decoration-color var(--animation-speed) var(--animation-easing),
color var(--animation-speed) var(--animation-easing);
}
.facets__clear-all-link:hover {
--button-color: var(--color-primary-hover);
text-decoration: underline;
text-decoration-color: var(--button-color);
}
.facets__clear-all-link--horizontal {
height: var(--minimum-touch-target);
padding-inline: var(--facets-form-horizontal-gap);
min-width: var(--facets-clear-all-min-width);
}
.facets__clear-all-link--active {
display: block;
}
.facets__label,
.products-count-wrapper {
text-transform: var(--facet-label-transform);
}
.clear-filter {
background-color: transparent;
box-shadow: none;
padding: 0;
}
.clear-filter:hover {
text-decoration: underline;
}
/* Clear button */
.facets__clear {
display: none;
}
.facets--horizontal .facets__clear {
@media screen and (min-width: 750px) {
width: 100%;
justify-content: flex-end;
padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
cursor: pointer;
}
}
.facets__clear--active {
@media screen and (min-width: 750px) {
display: flex;
}
}
/* Facets - Label */
.facets__label {
color: var(--color-foreground);
cursor: pointer;
white-space: nowrap;
@media screen and (min-width: 750px) {
margin-inline-end: var(--margin-2xs);
}
}
/* Products count */
.products-count-wrapper {
display: none;
}
.facets--horizontal .products-count-wrapper {
@media screen and (min-width: 750px) {
display: flex;
margin-left: auto;
flex-shrink: 0;
align-items: center;
height: var(--minimum-touch-target);
}
}
/* Mobile specific components */
.facets__title-wrapper {
background-color: var(--color-background);
color: var(--color-foreground);
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--padding-xs);
padding-inline-start: var(--drawer-padding);
padding-inline-end: var(--padding-2xs);
z-index: var(--facets-sticky-z-index);
}
:is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
@media screen and (min-width: 750px) {
display: none;
}
}
.facets-drawer__title {
--variant-picker-swatch-width: 32px;
--variant-picker-swatch-height: 32px;
margin: 0;
display: flex;
align-items: center;
gap: var(--gap-xs);
@media screen and (min-width: 750px) {
--variant-picker-swatch-width: 26px;
--variant-picker-swatch-height: 26px;
}
}
.facets-drawer__close {
position: relative;
top: 0;
right: 0;
padding: 0;
cursor: pointer;
}
/* Status */
.facets__status:not(:empty) {
width: max-content;
display: flex;
margin-inline-start: auto;
font-weight: 500;
color: var(--color-foreground);
}
.facets__panel[open] .facets__status {
display: none;
}
.facets--filters-title {
margin-block-end: 0;
color: var(--color-foreground);
height: fit-content;
@media screen and (max-width: 749px) {
display: none;
}
}
.facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
@media screen and (min-width: 750px) {
display: flex;
margin-inline-start: var(--margin-xs);
margin-inline-end: var(--margin-xs);
}
}
/* Horizontal filter style */
.facets--horizontal .facets__form {
@media screen and (min-width: 750px) {
gap: 0 var(--facets-form-horizontal-gap);
}
}
/* Facets - Actions */
.facets__drawer-actions {
--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
);
position: sticky;
bottom: 0;
z-index: var(--facets-sticky-z-index);
order: 1;
display: flex;
flex-shrink: 0;
justify-content: space-between;
align-items: stretch;
gap: var(--gap-sm);
padding-block-start: var(--padding-xs);
padding-block-end: var(--padding-md);
padding-inline: var(--padding-lg);
margin-top: auto;
background-image: var(--to-top-gradient-background);
background-color: var(--color-background);
}
/* Clear all button */
.facets__clear-all {
display: none;
cursor: pointer;
min-width: var(--facets-clear-all-min-width);
flex-grow: 1;
padding-block: var(--padding-lg);
color: var(--button-color, inherit);
}
.facets__clear-all--active {
display: block;
opacity: 1;
transform: translateY(0);
transition: transform var(--animation-values), opacity var(--animation-values);
}
@starting-style {
.facets__clear-all--active {
opacity: 0;
transform: translateY(100%);
}
}
.facets__see-results {
min-width: var(--facets-see-results-min-width);
flex-grow: 1;
padding-block: var(--padding-lg);
}
.facets-horizontal-remove {
display: flex;
align-items: center;
}
.facets-horizontal-remove--active::before {
content: '';
border-inline-start: var(--style-border-width) solid var(--color-border);
height: var(--font-paragraph--size);
position: absolute;
}
/* END_BLOCK:filters */
/* START_SNIPPET:accordion-custom-component (INDEX:164) */
accordion-custom {
details {
&::details-content,
.details-content {
block-size: 0;
overflow-y: clip;
opacity: 0;
interpolate-size: allow-keywords;
transition: content-visibility var(--animation-speed-slow) allow-discrete,
padding-block var(--animation-speed-slow) var(--animation-easing),
opacity var(--animation-speed-slow) var(--animation-easing),
block-size var(--animation-speed-slow) var(--animation-easing);
}
/* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
&:not(:focus-within)::details-content,
&:not(:focus-within) .details-content {
transition: none;
}
&:not([open]) {
&::details-content,
.details-content {
padding-block: 0;
}
}
&[open] {
&::details-content,
.details-content {
opacity: 1;
block-size: auto;
@starting-style {
block-size: 0;
opacity: 0;
overflow-y: clip;
}
&:focus-within {
overflow-y: visible;
}
}
}
}
}
accordion-custom[data-disable-on-mobile='true'] summary {
@media screen and (max-width: 749px) {
cursor: auto;
}
}
accordion-custom[data-disable-on-desktop='true'] summary {
@media screen and (min-width: 750px) {
cursor: auto;
}
}
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:buy-buttons-styles (INDEX:171) */
.buy-buttons-block {
--buy-button-preferred-width: 185px;
width: 100%;
}
.product-form-buttons {
display: flex;
flex-wrap: wrap;
}
.product-form-buttons:not(:has(.quantity-rules)) {
gap: calc(var(--gap-sm) / 2);
@media screen and (min-width: 750px) {
gap: var(--gap-sm);
}
}
.product-form-buttons
> *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
flex: 1 1 var(--buy-button-preferred-width, 0);
min-width: fit-content;
}
.product-form-buttons--stacked
> *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
flex-basis: 51%;
}
.product-form-buttons button {
width: 100%;
padding-block: var(--padding-lg);
}
.quantity-selector {
flex-grow: 0;
flex-shrink: 0;
height: var(--height-buy-buttons);
}
.quantity-label {
flex: 1 0 100%;
width: 100%;
font-size: var(--font-size--sm);
margin-block-end: var(--gap-xs);
}
.quantity-label__cart-count {
color: var(--color-foreground-secondary);
}
.quantity-rules {
display: flex;
flex-wrap: wrap;
gap: 0;
row-gap: calc(var(--gap-xs) / 2);
flex: 1 0 100%;
width: 100%;
font-size: var(--font-size--xs);
color: var(--color-foreground-secondary);
margin-block-start: var(--gap-xs);
margin-block-end: var(--gap);
}
.product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
margin-block-end: var(--gap-md);
}
.quantity-rules__item {
position: relative;
display: inline-block;
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.quantity-rules__item:not(:last-child) {
padding-right: var(--padding-xl);
margin-right: var(--margin-2xs);
}
.quantity-rules__item:not(:last-child)::after {
content: '•';
position: absolute;
inset-inline-end: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.5em;
line-height: 0;
}
.add-to-cart-button {
height: var(--height-buy-buttons);
text-transform: var(--button-text-case-primary);
}
.add-to-cart-button.button-secondary {
text-transform: var(--button-text-case-secondary);
}
.product-form-text__error {
display: flex;
flex: 1 0 100%;
align-items: flex-start;
gap: var(--gap-xs);
margin-block-end: var(--gap-xs);
}
.product__pickup-availabilities {
width: 100%;
}
.pickup-availability__column {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.pickup-availability__row {
display: flex;
gap: var(--padding-xs);
}
.pickup-availability__dialog-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.pickup-availability__header-container {
padding-block-end: var(--padding-2xl);
}
.pickup-location__wrapper {
display: flex;
flex-direction: column;
padding-block: var(--padding-2xl);
border-top: 1px solid var(--color-border);
gap: var(--padding-xs);
}
.pickup-location__address-wrapper {
display: flex;
flex-direction: column;
gap: var(--padding-md);
}
.pickup-location__dialog {
padding: var(--padding-2xl);
position: fixed;
border-radius: 0;
width: var(--sidebar-width);
max-width: 95vw;
height: 100%;
margin: 0 0 0 auto;
border: var(--style-border-drawer);
box-shadow: var(--shadow-drawer);
background-color: var(--color-background);
}
.pickup-location__dialog:modal {
max-height: 100dvh;
}
.pickup-location__text-sm {
font-size: var(--font-size--sm);
margin: 0;
}
.pickup-location__text-xs {
font-size: var(--font-size--xs);
margin: 0;
}
.pickup-location__button {
width: fit-content;
color: var(--color-primary);
font-size: var(--font-size--xs);
font-family: var(--font-body--family);
padding: 0;
cursor: pointer;
margin-block: var(--margin-xs);
}
.pickup-location__button:hover {
color: var(--color-primary-hover);
}
.pickup-location__h4 {
margin: 0;
}
.pickup-location__text-bold {
font-size: var(--font-size--md);
font-weight: 600;
margin: 0;
}
.pickup-location__availability-wrapper {
display: flex;
align-items: center;
gap: var(--gap-xs);
font-family: var(--font-paragraph--family);
}
.pickup-location__address {
font-style: normal;
}
.pickup-location__close-button {
top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
right: calc(var(--padding-2xl) - var(--icon-size-xs));
}
.volume-pricing {
display: block;
width: 100%;
margin-bottom: var(--gap);
}
.volume-pricing:not(:has(.volume-pricing__title)) {
margin-top: 0;
margin-bottom: 0;
}
.volume-pricing__title {
display: block;
margin-block-end: var(--gap-sm);
font-size: var(--font-size--sm);
font-weight: var(--font-body--weight);
color: var(--color-foreground);
}
.volume-pricing__table {
width: 100%;
}
.volume-pricing__row {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--padding-sm);
padding-inline: var(--padding-md);
font-size: var(--font-size--sm);
}
.volume-pricing__row--even {
background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
.volume-pricing__row--odd {
background: var(--color-background);
}
.volume-pricing__collapsible-wrapper {
block-size: 0;
overflow-y: clip;
opacity: 0;
interpolate-size: allow-keywords;
transition: opacity var(--animation-speed-slow) var(--animation-easing),
block-size var(--animation-speed-slow) var(--animation-easing);
}
.volume-pricing__toggle {
width: 100%;
padding-bottom: 0;
padding-inline: 0;
text-align: left;
color: var(--color-foreground-secondary);
font-size: var(--font-size--xs);
cursor: default;
margin-block-start: 0;
pointer-events: none;
}
button.volume-pricing__toggle {
/* Need the extra specificity to override .product-form-buttons button */
padding-block: var(--padding-sm);
}
.volume-pricing__toggle-text {
cursor: pointer;
display: inline-block;
pointer-events: auto;
}
.volume-pricing__show-less {
display: none;
}
.volume-pricing--expanded .volume-pricing__collapsible-wrapper {
opacity: 1;
block-size: auto;
@starting-style {
block-size: 0;
opacity: 0;
overflow-y: clip;
}
}
.volume-pricing--expanded .volume-pricing__show-more {
display: none;
}
.volume-pricing--expanded .volume-pricing__show-less {
display: inline;
}
/* Accelerated checkout styles — co-located here so they compile on pages
where the quick-add modal can display buy buttons (e.g. collection pages). */
.accelerated-checkout-block[data-shopify-visual-preview] {
width: 300px;
}
more-payment-options-link {
font-size: smaller;
}
more-payment-options-link a {
--button-color: var(--color-primary);
}
more-payment-options-link a:hover {
--button-color: var(--color-primary-hover);
}
.shopify-payment-button__more-options[aria-hidden='true'] {
display: none;
}
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:card-gallery (INDEX:172) */
.card-gallery {
overflow: hidden;
container-type: inline-size; /* Make card-gallery a container */
container-name: card-gallery-container; /* Optional: name the container */
}
.card-gallery__placeholder svg {
height: 100%;
width: 100%;
}
.card-gallery svg {
aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
}
.product-card-gallery__title-placeholder {
padding: var(--padding-md);
font-size: var(--font-size--2xl);
line-height: var(--line-height--display-loose);
word-break: break-word;
color: var(--color-foreground);
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
aspect-ratio: var(--gallery-aspect-ratio);
border-radius: var(--product-corner-radius);
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card-gallery__title-placeholder a {
color: var(--color-foreground);
}
@media screen and (min-width: 750px) {
.product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
padding: var(--padding-3xl);
font-size: var(--font-size--3xl);
}
.product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
padding: var(--padding-2xl);
font-size: var(--font-size--2xl);
}
.product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
padding: var(--padding-xl);
font-size: var(--font-size--xl);
}
.product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
padding: var(--padding-sm);
font-size: var(--font-size--lg);
}
.product-grid[data-product-card-size='extra-large']
.card-gallery.card-gallery--badge-top-right
.product-card-gallery__title-placeholder {
padding-right: calc(var(--padding-3xl) + 50px);
}
.product-grid[data-product-card-size='large']
.card-gallery.card-gallery--badge-top-right
.product-card-gallery__title-placeholder {
padding-right: calc(var(--padding-2xl) + 50px);
}
.product-grid[data-product-card-size='medium']
.card-gallery.card-gallery--badge-top-right
.product-card-gallery__title-placeholder {
padding-right: calc(var(--padding-xl) + 50px);
}
.product-grid[data-product-card-size='small']
.card-gallery.card-gallery--badge-top-right
.product-card-gallery__title-placeholder {
padding-right: calc(var(--padding-sm) + 50px);
}
.product-grid[data-product-card-size='extra-large']
.card-gallery.card-gallery--badge-top-left
.product-card-gallery__title-placeholder {
padding-top: calc(var(--padding-3xl) + 40px);
}
.product-grid[data-product-card-size='large']
.card-gallery.card-gallery--badge-top-left
.product-card-gallery__title-placeholder {
padding-top: calc(var(--padding-2xl) + 40px);
}
.product-grid[data-product-card-size='medium']
.card-gallery.card-gallery--badge-top-left
.product-card-gallery__title-placeholder {
padding-top: calc(var(--padding-xl) + 40px);
}
.product-grid[data-product-card-size='small']
.card-gallery.card-gallery--badge-top-left
.product-card-gallery__title-placeholder {
padding-top: calc(var(--padding-sm) + 40px);
}
.product-grid[data-product-card-size='extra-large']
.card-gallery.card-gallery--badge-bottom-left
.product-card-gallery__title-placeholder {
padding-bottom: calc(var(--padding-3xl) + 40px);
}
.product-grid[data-product-card-size='large']
.card-gallery.card-gallery--badge-bottom-left
.product-card-gallery__title-placeholder {
padding-bottom: calc(var(--padding-2xl) + 40px);
}
.product-grid[data-product-card-size='medium']
.card-gallery.card-gallery--badge-bottom-left
.product-card-gallery__title-placeholder {
padding-bottom: calc(var(--padding-xl) + 40px);
}
.product-grid[data-product-card-size='small']
.card-gallery.card-gallery--badge-bottom-left
.product-card-gallery__title-placeholder {
padding-bottom: calc(var(--padding-sm) + 40px);
}
}
@media screen and (max-width: 749px) {
.product-card-gallery__title-placeholder {
font-size: var(--font-size--xl);
padding: var(--padding-md);
}
.product-grid[data-product-card-size]
.card-gallery.card-gallery--badge-top-right
.product-card-gallery__title-placeholder {
padding-right: calc(var(--padding-sm) + 50px);
}
.product-grid[data-product-card-size]
.card-gallery.card-gallery--badge-top-left
.product-card-gallery__title-placeholder {
padding-top: calc(var(--padding-sm) + 40px);
}
.product-grid[data-product-card-size]
.card-gallery.card-gallery--badge-bottom-left
.product-card-gallery__title-placeholder {
padding-bottom: calc(var(--padding-sm) + 40px);
}
}
[product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
/* stylelint-disable-next-line declaration-no-important */
padding: var(--padding-xs) !important;
font-size: var(--font-size--xs);
}
[product-grid-view='zoom-out'] .card-gallery .slideshow-control {
min-width: auto;
}
ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
display: block;
}
[product-grid-view='zoom-out']
.card-gallery
> :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
display: none;
}
ul[product-grid-view='zoom-out'] .card-gallery > img {
display: block;
}
.card-gallery slideshow-arrows .slideshow-control {
/* Align icons with quick-add button */
padding-inline: var(--padding-xl);
@container (max-width: 249px) {
padding-inline: 0 var(--padding-sm);
}
}
/*
* Card galleries preview the next or previous images on 'pointerenter', so we
* try to kick load them beforehand (they are lazy loaded otherwise).
*/
.card-gallery
:is(
slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
slideshow-slide[aria-hidden='false'] + slideshow-slide
) {
content-visibility: auto;
slideshow-component[actioned] & {
content-visibility: visible;
}
}
/* END_SNIPPET:card-gallery */
/* 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:filter-remove-buttons (INDEX:184) */
/* Facets - Remove buttons */
.facets-remove {
--variant-picker-swatch-width: 20px;
--variant-picker-swatch-height: 20px;
display: none;
align-items: center;
flex-wrap: wrap;
gap: var(--gap-xs);
padding: 0 var(--drawer-padding);
margin: 0;
@media screen and (min-width: 750px) {
--variant-picker-swatch-width: 16px;
--variant-picker-swatch-height: 16px;
gap: var(--gap-2xs);
}
}
.facets-remove:has(facet-remove-component) {
display: flex;
margin-block-start: var(--margin-2xs);
margin-block-end: var(--margin-md);
}
.facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
@media screen and (min-width: 750px) {
padding: 0;
}
}
.facets--horizontal .facets-remove--mobile-and-vertical {
@media screen and (min-width: 750px) {
display: none;
}
}
.facets-remove__pill {
.svg-wrapper,
.swatch {
flex-shrink: 0;
}
}
.facets--horizontal .facets-remove {
@media screen and (min-width: 750px) {
display: none;
}
}
/* END_SNIPPET:filter-remove-buttons */
/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:188) */
.recipient-form {
--options-border-radius: var(--variant-picker-button-radius);
--options-border-width: var(--variant-picker-button-border-width);
display: flex;
flex-direction: column;
padding-bottom: var(--padding-2xl);
}
.recipient-form__send-to {
padding: 0;
margin-block-end: var(--margin-xs);
}
.gift-card-form-option {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-sm);
padding: 0;
border: none;
}
.gift-card-form-option__button-label {
display: flex;
align-items: center;
position: relative;
padding-block: var(--padding-sm);
padding-inline: var(--padding-lg);
border: var(--style-border-width) solid var(--color-variant-border);
border-radius: var(--options-border-radius);
border-width: var(--options-border-width);
overflow: clip;
justify-content: center;
min-width: auto;
background-color: var(--color-variant-background);
color: var(--color-variant-text);
transition: background-color var(--animation-speed) var(--animation-easing),
border-color var(--animation-speed) var(--animation-easing);
&:hover {
background-color: var(--color-variant-hover-background);
border-color: var(--color-variant-hover-border);
color: var(--color-variant-hover-text);
}
}
.gift-card-form-option__button-label:has(:focus-visible) {
--variant-picker-stroke-color: var(--color-foreground);
border-color: var(--color-foreground);
outline: var(--focus-outline-width) solid var(--color-foreground);
outline-offset: var(--focus-outline-offset);
}
.gift-card-form-option__button-label:has(:checked) {
color: var(--color-selected-variant-text);
background-color: var(--color-selected-variant-background);
border-color: var(--color-selected-variant-border);
transition: background-color var(--animation-speed) var(--animation-easing),
border-color var(--animation-speed) var(--animation-easing);
&:hover {
background-color: var(--color-selected-variant-hover-background);
border-color: var(--color-selected-variant-hover-border);
color: var(--color-selected-variant-hover-text);
}
}
.gift-card-form-option__button-label input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.recipient-fields {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
transition: opacity 0.3s var(--animation-easing);
padding-block-start: var(--padding-xl);
}
.recipient-fields[hidden] {
display: none;
}
.field--send-on {
display: flex;
flex-direction: column;
}
.recipient-form__message {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-sm);
margin-top: var(--margin-sm);
}
.recipient-form-field-label {
position: absolute;
left: var(--padding-sm);
bottom: var(--padding-sm);
font-style: italic;
color: var(--color-input-text);
}
.recipient-fields__textarea {
min-height: 5.5rem;
overflow-y: auto;
/* Space for the character count */
padding-bottom: calc(var(--padding-sm) * 3);
scroll-padding-bottom: calc(var(--padding-sm) * 3);
}
.recipient-fields__input {
flex-grow: 1;
transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
padding: var(--input-padding);
background-color: var(--color-input-background);
color: var(--color-input-text);
text-align: left;
font-size: var(--font-paragraph--size);
border: var(--style-border-width-inputs) solid var(--color-input-border);
border-radius: var(--style-border-radius-inputs);
&:autofill {
background-color: var(--color-input-background);
color: var(--color-input-text);
}
&:is(:focus, :hover) {
background-color: var(--color-input-hover-background);
}
&:is(:focus) {
outline-color: var(--color-input-background);
}
}
/* Date picker calendar icon
* Safari doesn't show the icon and Firefox correctly applies the color from the input field.
* Webkit browsers need the mask-image trick to use the correct icon color.
*/
.field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
cursor: pointer;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-image: none;
background-color: currentColor;
mask-type: match-source;
}
/* For Webkit browsers - text cursor for input area */
.field--send-on .recipient-fields__input::-webkit-datetime-edit {
cursor: text;
}
.field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
.field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
.field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
/* Override the disabled color */
color: var(--color-input-text);
}
/* Fallback for other browsers */
.field--send-on .recipient-fields__input {
cursor: text;
}
/* For Firefox - entire field is clickable, so show pointer */
@supports (-moz-appearance: none) {
.field--send-on .recipient-fields__input {
cursor: pointer;
}
}
/* END_SNIPPET:gift-card-recipient-form-styles */
/* START_SNIPPET:grid-density-controls (INDEX:190) */
.column-options-wrapper {
--icon-offset: -3px;
display: flex;
gap: var(--gap-sm);
min-width: fit-content;
justify-content: flex-end;
height: var(--minimum-touch-target);
align-items: center;
margin-right: var(--icon-offset);
}
.column-options-wrapper:only-child {
margin-left: auto;
}
.facets__form-wrapper > .column-options-wrapper:first-child {
margin-left: auto;
}
.facets .column-options-wrapper {
display: none;
@media screen and (min-width: 750px) {
display: flex;
}
}
.column-options {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
margin: 0;
padding: 0;
border: none;
@media screen and (min-width: 750px) {
gap: var(--gap-2xs);
}
}
.column-options__option {
display: none;
position: relative;
}
.column-options__option:has(.column-picker-mobile--single),
.column-options__option:has(.column-picker-mobile--double) {
@media screen and (max-width: 749px) {
display: flex;
}
}
.column-options__option:has(.column-picker--default),
.column-options__option:has(.column-picker--zoom-out) {
@media screen and (min-width: 750px) {
display: flex;
}
}
/* Override base rule for grid density controls - only when visible */
.column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
.column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
@media screen and (max-width: 749px) {
display: flex;
}
}
.column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
.column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
@media screen and (min-width: 750px) {
display: flex;
}
}
.column-options__legend {
padding: 0;
margin: 0;
}
.column-options__option-input {
/* this is a repeating pattern a bit with the variant picker buttons */
/* remove the checkbox from the page flow */
position: absolute;
/* set the dimensions to match those of the label */
inset: 0;
/* hide it */
opacity: 0;
margin: 0;
padding: 0;
width: auto;
height: auto;
aspect-ratio: unset;
border: none;
border-radius: 0;
background: transparent;
appearance: auto;
display: block;
cursor: pointer;
}
.column-picker {
color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
padding: var(--padding-2xs);
border-radius: var(--style-border-radius-xs);
transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
}
.column-options__option:hover .column-picker {
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
.column-options__option-input:checked ~ .column-picker {
color: rgb(var(--color-foreground-rgb));
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
/* END_SNIPPET:grid-density-controls */
/* 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:list-filter (INDEX:201) */
.facets input:checked + label {
font-weight: 500;
}
.facets .checkbox .icon-checkmark {
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
/* Hover state for checked checkboxes - targeting via adjacent sibling */
.facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}
.facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
}
.facets .checkbox .checkbox__label-text {
transition: color 0.2s ease, font-weight 0.2s ease;
}
/* Pill style */
.facets__pill-label {
--pill-label-padding-inline: var(--padding-xs);
--pill-label-border-radius: var(--style-border-radius-md);
--pill-label-border-width: var(--variant-picker-button-border-width);
--pill-label-height: var(--button-size-md);
--pill-label-focus-outline-color: var(--color-foreground);
--pill-label-color: var(--color-foreground);
--pill-label-color-rgb: var(--color-foreground-rgb);
--pill-label-background-color: var(--color-background);
--pill-label-background-color-rgb: var(--color-background-rgb);
--pill-label-border-opacity: var(--facets-low-opacity);
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
border-radius: var(--pill-label-border-radius);
height: var(--pill-label-height);
width: 100%;
padding-inline: var(--pill-label-padding-inline);
color: rgb(var(--pill-label-color-rgb));
background-color: rgb(var(--pill-label-background-color-rgb));
cursor: pointer;
transition: color var(--animation-speed) var(--animation-easing),
background-color var(--animation-speed) var(--animation-easing);
outline-color: var(--pill-label-focus-outline-color);
&:hover {
--pill-label-border-opacity: 100%;
}
}
.facets__pill-input {
&:checked + .facets__pill-label {
--pill-label-color-rgb: var(--color-background-rgb);
--pill-label-background-color-rgb: var(--color-foreground-rgb);
--pill-label-border-opacity: 0;
font-weight: 500;
}
&:disabled + .facets__pill-label {
opacity: var(--disabled-opacity);
cursor: not-allowed;
&:hover {
--pill-label-border-opacity: var(--facets-low-opacity);
}
}
}
.facets__status-wrapper {
display: flex;
align-items: center;
}
.facets--drawer .facets__status-wrapper {
@media screen and (max-width: 749px) {
gap: var(--gap-3xs);
}
}
.facets--vertical .facets__status-wrapper {
gap: var(--gap-xs);
}
.facets--horizontal .facets__status-wrapper {
gap: 0;
}
.facets__pill-input:disabled + .facets__pill-label svg {
position: absolute;
top: 0;
left: 0;
border-radius: var(--style-border-radius-md);
}
.facets__pill-label svg line {
stroke-width: 1.5px;
stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
}
.facets__pill-wrapper {
position: relative;
}
.facets__pill-input {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
width: auto;
height: auto;
aspect-ratio: unset;
border: none;
border-radius: 0;
background: transparent;
appearance: auto;
display: block;
opacity: 0;
cursor: pointer;
}
/* Swatches */
.facets__status--swatches {
display: none;
}
.facets__swatch-wrapper {
display: flex;
}
.variant-option__swatch-wrapper {
position: relative;
overflow: visible;
border-radius: var(--options-border-radius);
}
.variant-option--swatches-disabled {
pointer-events: none;
cursor: not-allowed;
}
.variant-option--swatches-disabled .variant-option__swatch-wrapper {
overflow: hidden;
}
.facets--horizontal .facets__status--swatches {
@media screen and (min-width: 750px) {
display: flex;
}
}
.facets--horizontal .sorting-filter .facets__status {
@media screen and (min-width: 750px) {
display: none;
}
}
.facets__status--swatches .swatch {
width: calc(var(--variant-picker-swatch-width) / 1.5);
height: calc(var(--variant-picker-swatch-height) / 1.5);
}
.facets__status--swatches .swatch + .swatch {
margin-left: calc(var(--variant-picker-swatch-width) / -3);
outline: 1px solid rgb(var(--color-background-rgb));
}
.facets__inputs-wrapper .facets__inputs-list--images {
display: grid;
grid-template-columns: repeat(var(--image-columns), 125px);
gap: var(--gap-sm);
}
.facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
grid-template-columns: repeat(3, 1fr);
@media screen and (min-width: 750px) {
grid-template-columns: repeat(4, 1fr);
}
}
.facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
grid-template-columns: repeat(2, 1fr);
}
.facets--drawer .facets__inputs-list--images {
padding-top: var(--padding-xs);
}
.facets__image-wrapper {
aspect-ratio: 1/1;
width: 100%;
padding: var(--padding-xs);
position: relative;
overflow: hidden;
}
.facets__image-wrapper img {
height: 100%;
width: 100%;
object-fit: contain;
border-radius: calc(var(--border-radius) / 2);
}
.facets__image-label {
width: 100%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-block-end: var(--padding-xs);
cursor: pointer;
}
.facets__inputs-list-item--disabled .facets__image-label {
cursor: not-allowed;
}
.facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
font-weight: 500;
}
/* Filter-specific variant-option styles */
.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
--focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
--focus-outline: var(--focus-outline-width) solid currentcolor;
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
outline: none;
}
.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
outline: none;
}
.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
--focus-outline: none;
}
.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
.facets__inputs-list--swatches .variant-option__button-label {
--color-variant-text: var(--color-foreground);
}
.facets__inputs-list--swatches {
--variant-picker-swatch-width: 32px;
--variant-picker-swatch-height: 32px;
@media screen and (min-width: 750px) {
--variant-picker-swatch-width: 26px;
--variant-picker-swatch-height: 26px;
}
}
.facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
gap: var(--gap-sm);
}
.facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
display: flex;
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid {
--columns: 2;
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
cursor: pointer;
overflow: visible;
}
.facets__inputs-list-item--disabled .variant-option--swatches {
cursor: not-allowed;
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
cursor: pointer;
word-break: break-word;
white-space: normal;
}
.facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
cursor: not-allowed;
}
.facets__inputs-list-item--disabled .variant-option__button-label {
cursor: not-allowed;
}
.facets__inputs-wrapper
.facets__inputs-list--swatches-grid
.variant-option__button-label--has-swatch:has(input[type='checkbox']) {
align-items: center;
overflow: visible;
justify-content: flex-start;
display: flex;
width: 100%;
flex-basis: unset;
gap: var(--gap-sm);
}
.facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
color: rgb(var(--color-foreground-rgb));
background-color: rgb(var(--color-background-rgb));
font-weight: 500;
transition: font-weight 0.2s ease;
}
.facets .variant-option--swatches {
--options-border-radius: var(--variant-picker-swatch-radius);
width: auto;
}
.facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
font-weight: 500;
}
/* Variant option images (filters) */
.variant-option--images {
--image-facet-border-width: var(--variant-picker-button-border-width);
--image-facet-border-opacity: var(--facets-low-opacity);
--image-facet-border-radius: var(--style-border-radius-xs);
position: relative;
border-radius: var(--image-facet-border-radius);
box-shadow: inset 0 0 0 var(--image-facet-border-width)
rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));
&:hover {
--image-facet-border-opacity: 100%;
}
&:has(input:checked) {
font-weight: 500;
transition: font-weight 0.2s ease;
}
&:has(input:checked):hover {
--image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
}
&:has(input:focus-visible) {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
}
.variant-option--images input {
/* remove the checkbox from the page flow */
position: absolute;
/* set the dimensions to match those of the label */
inset: 0;
/* hide it */
opacity: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
aspect-ratio: unset;
border: none;
border-radius: 0;
background: transparent;
appearance: auto;
display: block;
cursor: pointer;
}
.facets__inputs-list-item--disabled .variant-option--images {
--image-facet-border-opacity: 0;
opacity: var(--disabled-opacity);
cursor: not-allowed;
&:hover {
--image-facet-border-opacity: 0;
}
img {
opacity: var(--disabled-opacity);
}
input,
label,
.facets__image-label {
cursor: not-allowed;
}
.facets__image-wrapper {
border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
border-radius: var(--image-facet-border-radius);
}
}
/* Position disabled-svg */
.variant-option--images svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
stroke-width: var(--border-width);
stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
/* Position label text and handle overflow */
.facets__inputs-list-item,
.variant-option--images {
min-width: 0;
}
/* Safari < 16.4 outline border-radius workaround - filter-specific */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
outline: none;
position: relative;
overflow: visible;
}
.facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
content: '';
position: absolute;
inset: calc(-1 * var(--focus-outline-offset));
border: var(--focus-outline);
border-radius: var(--focus-outline-radius, 50%);
background-color: transparent;
display: inherit;
}
}
/* END_SNIPPET:list-filter */
/* 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:price-filter (INDEX:215) */
/* Price filter */
.price-facet {
container-type: inline-size;
display: flex;
flex-direction: column;
}
.price-facet--horizontal {
min-width: 360px;
}
.price-facet__inputs-wrapper {
display: flex;
flex-direction: row;
padding: var(--style-border-width-inputs);
gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
}
@container (max-width: 199px) {
.price-facet__inputs-wrapper {
flex-wrap: wrap;
}
}
.price-facet__input {
width: 100%;
text-align: right;
padding-left: calc(2.5 * var(--input-padding-x));
}
.price-facet__input::placeholder {
color: var(--facets-input-label-color);
}
.price-facet__separator {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-paragraph--size);
}
.price-facet__highest-price {
padding: var(--padding-xs) 0 var(--padding-sm);
}
.price-facet__highest-price--horizontal {
padding: 0 var(--padding-md) var(--padding-xs);
}
.price-facet__label {
top: 0;
left: 0;
color: var(--facets-input-label-color);
padding: var(--input-padding-y) var(--input-padding-x);
transform: none;
}
/* END_SNIPPET:price-filter */
/* START_SNIPPET:product-badges-styles (INDEX:217) */
.product-badges {
--badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));
position: absolute;
z-index: var(--layer-flat);
}
.product-badges--bottom-left {
bottom: calc(var(--badge-inset) + var(--padding-block-start));
left: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges--top-left {
top: calc(var(--badge-inset) + var(--padding-block-start));
left: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges--top-right {
top: calc(var(--badge-inset) + var(--padding-block-start));
right: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges__badge {
--badge-font-size: var(--font-size--xs);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-foreground);
background: var(--color-background);
font-size: var(--badge-font-size);
font-family: var(--badge-font-family);
font-weight: var(--badge-font-weight);
text-transform: var(--badge-text-transform);
border-radius: var(--badge-border-radius);
}
.product-badges__badge--rectangle {
padding-block: var(--badge-rectangle-padding-block);
padding-inline: var(--badge-rectangle-padding-inline);
}
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-card (INDEX:218) */
.product-card__placeholder-image svg {
height: 100%;
}
.product-card__content slideshow-component {
--cursor: pointer;
}
@media screen and (max-width: 749px) {
.product-card slideshow-arrows .slideshow-control {
display: none;
}
}
/* END_SNIPPET:product-card */
/* START_SNIPPET:product-grid (INDEX:219) */
.product-grid {
--product-grid-gap: var(--product-grid-gap-mobile);
--mobile-columns: 2; /* Default value */
isolation: isolate;
@media screen and (min-width: 750px) {
--product-grid-gap: var(--product-grid-gap-desktop);
}
}
.product-grid slideshow-arrows .slideshow-control {
display: none;
@media screen and (min-width: 750px) {
display: grid;
}
}
/* This triggers iOS < 16.4 */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
/* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
.product-grid .product-media,
.product-grid .product-media-container {
aspect-ratio: auto;
}
}
.main-collection-grid {
grid-column: var(--grid-column--mobile);
padding: var(--grid--margin--mobile);
@media screen and (min-width: 750px) {
grid-column: var(--grid-column--desktop);
padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
}
}
.main-collection-grid__empty {
padding-block: var(--padding-6xl);
padding-inline: var(--page-margin);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--padding-sm);
}
.main-collection-grid__empty-title {
margin: 0;
}
/* END_SNIPPET:product-grid */
/* 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:product-media (INDEX:223) */
.product-media {
aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
min-height: 0;
min-width: 0;
}
.product-media__image {
object-position: var(--focal-point, center center);
}
/*** Media border-radius feature ****/
@media screen and (min-width: 750px) {
.media-gallery--carousel slideshow-container,
.media-gallery--grid .product-media > * {
border-radius: var(--media-radius, 0);
overflow: hidden;
}
/* When the CAROUSEL is on the LEFT side */
.product-information:not(.product-information--media-right)
.media-gallery--carousel.media-gallery--extend
slideshow-container {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* When the CAROUSEL is on the RIGHT side */
.product-information.product-information--media-right
.media-gallery--carousel.media-gallery--extend
slideshow-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* When the GRID is on the LEFT side */
.product-information:not(.product-information--media-right) {
/* One column */
.media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
/* Two column, small first image */
.media-gallery--grid.media-gallery--extend.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--extend.media-gallery--two-column.media-gallery--large-first-image
.product-media-container:is(:first-of-type, :nth-of-type(even))
.product-media
> * {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/* When the GRID is on the RIGHT side */
.product-information.product-information--media-right {
/* One column */
.media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
/* Two column, small first image */
.media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
.product-media-container:nth-of-type(even)
.product-media
> *,
/* Two column, large first image */
.media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
.product-media-container:is(:first-of-type, :nth-of-type(odd))
.product-media
> * {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
/* END_SNIPPET:product-media */
/* 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:quick-add-styles (INDEX:227) */
/* Quick Add */
.quick-add {
--quick-add-offset: var(--padding-sm);
--quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
--quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
position: absolute;
inset: 0;
z-index: var(--layer-raised);
pointer-events: none;
@media screen and (min-width: 750px) {
--quick-add-offset: var(--padding-md);
}
}
.quick-add .variant-option__button-label input[data-option-available='false'] {
cursor: not-allowed;
}
.quick-add[class*='color-scheme-'] {
background-color: #0000;
}
product-card:is(:hover, :focus-within) .quick-add__button {
opacity: 1;
}
.quick-add__button {
display: var(--quick-add-mobile-display, none);
align-items: center;
background: linear-gradient(var(--color-background) 0 100%) padding-box;
padding: 0;
border-radius: 50px;
border: 2px solid hsl(0 0% 0% / 0.15);
height: 54px;
cursor: pointer;
opacity: var(--quick-add-mobile-opacity, 0);
overflow: hidden;
color: var(--color-foreground);
pointer-events: all;
position: absolute;
right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
backdrop-filter: blur(20px) saturate(180%);
&:hover {
scale: 1.03;
/* Hover stabilizer: extends hit area to maintain hover state */
&::before {
content: '';
position: absolute;
inset: -10px;
z-index: -1;
}
}
&:active {
scale: 0.99;
}
.quick-add[stay-visible] & {
display: grid;
}
@media screen and (min-width: 750px) {
display: var(--quick-add-display, flex);
opacity: 0;
}
}
.quick-add__button.add-to-cart-button {
height: 54px;
}
.quick-add__button .add-to-cart-text {
background: var(--color-background);
overflow: hidden;
border-radius: 50px;
height: 100%;
gap: 0;
}
.quick-add__button .svg-wrapper .checkmark-burst {
width: 22px;
height: 22px;
}
.quick-add__button .add-to-cart-icon {
/* account for border width */
height: 100%;
width: 50px;
}
.quick-add__button .add-to-cart-text__content {
display: grid;
grid-template-columns: 0fr;
& > span {
min-width: 0;
span {
padding-right: var(--padding-sm);
opacity: 0;
display: inline-block;
filter: blur(2px);
translate: 0.5ch 0;
}
}
}
.quick-add__button[data-added='true'] .add-to-cart-text {
animation-name: atc-fade-out;
}
.quick-add__button[data-added='true'] .add-to-cart-text--added {
translate: 0 0;
animation-name: atc-fade-in;
}
.quick-add__product-form-component {
height: 100%;
}
.quick-add__product-form-component .shopify-product-form {
display: flex;
justify-content: flex-end;
align-items: flex-end;
container-type: inline-size;
height: 100%;
}
.quick-add-modal .product-media {
width: 100%;
height: 100%;
}
.quick-add-modal deferred-media {
display: none;
}
.quick-add-modal .media-gallery--carousel slideshow-component {
--cursor: default;
}
.quick-add__button:is(:hover, :focus-visible) {
.add-to-cart-text__content {
grid-template-columns: 1fr;
span span {
opacity: 1;
translate: 0 0;
filter: blur(0);
}
}
}
@media (prefers-reduced-motion: reduce) {
.quick-add__button .add-to-cart-text__content {
grid-template-columns: 1fr;
span span {
opacity: 1;
translate: 0 0;
filter: blur(0);
}
}
}
@media (prefers-reduced-motion: no-preference) {
.quick-add__button {
transition-property: scale, translate, opacity;
transition-duration: var(--animation-speed);
transition-timing-function: var(--ease-out-cubic);
}
.quick-add__button:is(:hover, :focus-visible) {
.add-to-cart-text__content,
.add-to-cart-text__content span span {
transition-delay: var(--animation-speed);
}
}
.quick-add__button .add-to-cart-text__content {
transition-property: grid-template-columns;
transition-duration: var(--animation-speed);
transition-timing-function: var(--ease-out-cubic);
span span {
transition-property: opacity, filter, translate;
transition-duration: var(--animation-speed-slow);
transition-timing-function: var(--ease-out-quad);
}
}
}
/* END_SNIPPET:quick-add-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 */
/* START_SNIPPET:sorting (INDEX:247) */
.sorting-filter__container {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--drawer-padding) 0;
padding-block: var(--padding-sm);
margin-inline-end: var(--margin-md);
position: relative;
}
.sorting-filter__container .facets__label {
font-size: var(--font-h4--size);
}
.sorting-filter__select-wrapper {
display: flex;
position: relative;
border-radius: var(--variant-picker-button-radius);
align-items: center;
overflow: clip;
padding: var(--padding-2xs) var(--padding-xs);
}
.sorting-filter__select-wrapper:has(:focus-visible) {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
.sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
outline: none;
}
.sorting-filter__container .sorting-filter__select {
appearance: none;
border: 0;
margin: 0;
cursor: pointer;
width: 100%;
padding-inline-end: var(--icon-size-2xs);
text-align: right;
/* Needed for Safari */
text-align-last: right;
}
.sorting-filter__select .icon {
position: absolute;
right: var(--padding-md);
top: 50%;
transform: translateY(-50%);
width: var(--icon-size-2xs);
height: var(--icon-size-2xs);
pointer-events: none;
}
.sorting-filter {
@media screen and (min-width: 750px) {
z-index: var(--facets-upper-z-index);
}
}
.sorting-filter__options {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
position: absolute;
top: 100%;
right: 0;
color: var(--color-foreground);
z-index: var(--facets-upper-z-index);
box-shadow: var(--shadow-popover);
border: var(--style-border-popover);
background-color: var(--color-background);
border-radius: var(--style-border-radius-popover);
width: max-content;
min-width: var(--facets-panel-min-width);
min-height: 0;
transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
opacity var(--animation-speed-slow) var(--animation-easing);
}
details[open] .sorting-filter__options {
opacity: 1;
grid-template-rows: 1fr;
}
.sorting-filter__options-inner {
display: flex;
flex-direction: column;
grid-row: 1 / span 2;
gap: var(--gap-sm);
padding: calc(var(--drawer-padding) / 2);
color: var(--color-foreground);
overflow: clip;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 750px) {
gap: 0;
}
}
.sorting-filter__option {
cursor: pointer;
display: grid;
grid-template-columns: var(--icon-size-sm) 1fr;
gap: var(--margin-2xs);
align-items: center;
min-width: 180px;
max-width: 16em;
padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);
&:hover {
border-radius: calc(var(--style-border-radius-popover) / 2);
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
}
&:focus {
border-radius: calc(var(--style-border-radius-popover) / 2);
}
}
.sorting-filter__input {
display: none;
&:checked + .sorting-filter__checkmark + .sorting-filter__label {
font-weight: 500;
}
}
.sorting-filter__checkmark {
visibility: hidden;
}
*:checked ~ .sorting-filter__checkmark {
visibility: visible;
}
.sorting-filter__label {
cursor: pointer;
pointer-events: none;
}
.facets-toggle--no-filters .sorting-filter__select-wrapper {
@media screen and (max-width: 749px) {
padding-inline-start: 0;
}
}
.facets-mobile-wrapper .sorting-filter .facets__panel {
padding-inline: 0;
position: relative;
}
.facets-mobile-wrapper .sorting-filter .facets__status {
display: none;
}
.facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
left: 0;
right: unset;
}
.facets-mobile-wrapper .sorting-filter .facets__label {
margin-inline-end: var(--margin-2xs);
font-size: var(--font-paragraph--size);
color: var(--color-foreground-muted);
}
.facets-toggle .sorting-filter__container {
@media screen and (max-width: 749px) {
padding: 0;
}
}
.facets-toggle .sorting-filter__container .facets__label {
@media screen and (max-width: 749px) {
display: none;
}
}
.facets-toggle .sorting-filter::before {
@media screen and (max-width: 749px) {
display: none;
}
}
.facets--drawer .sorting-filter {
@media screen and (min-width: 750px) {
display: none;
}
}
/* END_SNIPPET:sorting */
/* START_SNIPPET:text (INDEX:259) */
:root {
--text-align-default: left;
}
[style*='--horizontal-alignment: center'] .text-block {
--text-align-default: center;
}
[style*='--horizontal-alignment: flex-end'] .text-block {
--text-align-default: right;
}
[style*='--horizontal-alignment: flex-start'] > .text-block {
--text-align-default: left;
}
[style*='--horizontal-alignment: center'] > .text-block {
--text-align-default: center;
}
[style*='--horizontal-alignment: flex-end'] > .text-block {
--text-align-default: right;
}
.text-block {
width: var(--width);
max-width: 100%;
display: flex;
flex-direction: column;
align-items: var(--horizontal-alignment);
}
.text-block > * {
width: var(--width);
max-inline-size: min(100%, var(--max-width, 100%));
text-align: var(--text-align, var(--text-align-default));
text-wrap: var(--text-wrap);
}
.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):is(.h1, .h2, .h3, .h4, .h5, .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 p,
.text-block.p > * {
margin-block: var(--font-paragraph--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;
}
.text-block--background {
background-color: var(--text-background-color);
border-radius: var(--text-corner-radius);
/* To avoid text being cropped when using a border radius we add a minimum padding. */
padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
}
.custom-color,
.custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
color: var(--color);
}
/* END_SNIPPET:text */