/** Shopify CDN: Minification failed Line 905:2 Unexpected "}" Line 1947:0 Unexpected "{" Line 1947:1 Expected identifier but found "%" Line 1949:20 Unexpected "{" Line 1949:29 Expected ":" Line 1955:4 Unexpected "{" Line 1955:5 Expected identifier but found "%" Line 1956:17 Expected identifier but found whitespace Line 1956:19 Unexpected "{" Line 1956:23 Expected ":" ... and 12 more hidden warnings **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:collection-links (INDEX:3) */ collection-links-component { --alignment: flex-start; display: grid; align-items: center; grid-gap: var(--gap-3xl); &:has([ratio='portrait']) { --template-column-ratio: 0.8fr; } &:has([ratio='square']) { --template-column-ratio: 1fr; } &:has([ratio='landscape']) { --template-column-ratio: 1.4fr; } &[alignment='center'] { --alignment: center; .text-block { text-align: center; } } &[alignment='right'] { --alignment: flex-end; .text-block { text-align: right; } } &[layout='spotlight'] { position: relative; grid-template-columns: 1fr var(--template-column-ratio); grid-template-areas: 'text image'; @media (min-width: 749px) { &[reverse] { grid-template-areas: 'image text'; grid-template-columns: var(--template-column-ratio) 1fr; } } .collection-links__container { align-items: var(--alignment); } @media (max-width: 749px) { grid-template-columns: 1fr; grid-template-areas: 'text' 'image'; grid-gap: var(--gap-2xl); .collection-links__container { gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl); justify-content: var(--alignment); } } } &[layout='text'] { grid-gap: 0; grid-template-areas: 'text'; .collection-links__container { gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl); flex-wrap: wrap; flex-direction: row; justify-content: var(--alignment); } } } .collection-links__container { display: flex; gap: var(--gap-md); flex-direction: column; } .collection-links__images { overflow: hidden; grid-area: image; @media (max-width: 749px) { image-block { max-width: 100%; } } } /* END_SECTION:collection-links */ /* START_SECTION:collection-list (INDEX:4) */ @media screen and (max-width: 767px) { .ui-test-collection-list .section-resource-list { padding-inline: 12px !important; } .ui-test-collection-list .section-resource-list .section-resource-list__content > .text-block:first-child, .ui-test-collection-list .section-resource-list .section-resource-list__content > .text-block:first-child > * { text-align: center !important; align-items: center !important; justify-content: center !important; margin-inline: auto !important; } .ui-test-collection-list .section-resource-list :is( .section-resource-list__header, .text-block, .text-block > *, .resource-list__item ) { max-width: 100%; } } /* END_SECTION:collection-list */ /* START_SECTION:featured-blog-posts (INDEX:8) */ .featured-blog-posts h3 { text-transform: uppercase; } /* END_SECTION:featured-blog-posts */ /* START_SECTION:featured-product (INDEX:9) */ .featured-product-section .section-content-wrapper { grid-template-columns: 1fr; display: grid; overflow: hidden; @media (min-width: 750px) { grid-template-columns: 1fr 1fr; } } /* Here I should maybe set the width to auto when the ratio is set to adapt */ .featured-product-section .product-media-container.constrain-height { /* arbitrary offset value based on average theme spacing and header height */ --viewport-offset: 400px; --constrained-min-height: var(--visual-preview--height, 80dvh); @media screen and (min-width: 750px) { --viewport-offset: 300px; } } .featured-product-section .product-grid__card { --padding-block: 20px; --padding-inline: 20px; @media screen and (min-width: 750px) { --padding-block: 40px; --padding-inline: 40px; } } @media screen and (max-width: 749px) { .featured-product-section .media-block { order: -1; } } /* END_SECTION:featured-product */ /* START_SECTION:footer-utilities (INDEX:10) */ .utilities { width: 100%; display: flex; flex-direction: column; gap: var(--gap); text-wrap: nowrap; border-top: var(--border-width) solid var(--color-border); color: var(--color-foreground-muted); } .utilities a { color: var(--color-foreground-muted); } /* ✅ MOBILE alignment */ .utilities[data-align='left'] { align-items: flex-start; } .utilities[data-align='center'] { align-items: center; } .utilities[data-align='right'] { align-items: flex-end; } .utilities[data-align='left'] > * { text-align: left; } .utilities[data-align='center'] > * { text-align: center; } .utilities[data-align='right'] > * { text-align: right; } /* ✅ FIX: if ONLY ONE block exists (copyright), don't let it stretch full width */ .utilities > *:only-child { width: fit-content; max-width: 100%; } .utilities[data-align='left'] > *:only-child { margin-right: auto; } .utilities[data-align='center'] > *:only-child { margin-left: auto; margin-right: auto; } .utilities[data-align='right'] > *:only-child { margin-left: auto; text-align: right; } @media screen and (min-width: 750px) { .utilities { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--gap); align-items: center; width: 100%; } /* reset */ .utilities > * { order: 0; margin: 0; position: static; min-width: 0; } /* ✅ Default desktop alignment */ .utilities[data-align='left'] { justify-items: start; } .utilities[data-align='center'] { justify-items: center; } .utilities[data-align='right'] { justify-items: end; } .utilities[data-align='left'] > * { text-align: left; } .utilities[data-align='center'] > * { text-align: center; } .utilities[data-align='right'] > * { text-align: right; } /* ------------------------------ ✅ Your existing dynamic positioning rules (kept) ------------------------------ */ .utilities:has( .footer-utilities__text:nth-child(1) + .footer-utilities__text:nth-child(2) + .footer-utilities__icons:nth-child(3) ) { grid-template-columns: auto auto 1fr; } .utilities:has( .footer-utilities__text:nth-child(1) + .footer-utilities__icons:nth-child(2) + .footer-utilities__text:nth-child(3) ) { grid-template-columns: 1fr auto 1fr; } .utilities:has( .footer-utilities__icons:nth-child(1) + .footer-utilities__text:nth-child(2) + .footer-utilities__text:nth-child(3) ) { grid-template-columns: 1fr auto auto; } .utilities:has(.footer-utilities__text:first-child:nth-last-child(2) + .footer-utilities__text:last-child) { grid-template-columns: auto auto; justify-content: space-between; } .utilities:has(.footer-utilities__icons:first-child:nth-last-child(2) + .footer-utilities__text:last-child) { grid-template-columns: 1fr 1fr; } .utilities:has(.footer-utilities__text:first-child:nth-last-child(2) + .footer-utilities__icons:last-child) { grid-template-columns: 1fr 1fr; } /* ✅ IMPORTANT: 1 BLOCK ONLY → span full width, then align to edge */ .utilities > *:only-child { grid-column: 1 / -1; width: fit-content; /* ✅ keep it from stretching in grid */ max-width: 100%; } .utilities[data-align='left'] > *:only-child { justify-self: start; } .utilities[data-align='center'] > *:only-child { justify-self: center; } .utilities[data-align='right'] > *:only-child { justify-self: end; text-align: right; } } /* END_SECTION:footer-utilities */ /* START_SECTION:footer (INDEX:11) */ .footer-content { display: grid; grid-template-columns: 1fr; row-gap: var(--footer-gap-y); column-gap: 0; } @media screen and (min-width: 750px) and (max-width: 989px) { .footer-content { grid-template-columns: 1fr; justify-content: center; grid-auto-flow: row; padding-inline: var(--footer-x-padding); } .footer-content--isolated-grid-item-tablet > :last-child { grid-column: 1 / -1; } } /* ✅ Desktop centered menus */ @media screen and (min-width: 990px) { .footer-content { display: grid; grid-template-columns: max-content 1fr 1fr 1fr max-content; align-items: start; column-gap: var(--footer-menu-gap); row-gap: var(--footer-gap-y); width: 100%; padding-inline: var(--footer-x-padding); } .footer-content > :first-child { justify-self: start; padding-left: var(--footer-logo-left-pad); } .footer-content > :nth-child(2), .footer-content > :nth-child(3), .footer-content > :nth-child(4) { justify-self: center; width: max-content; } .footer-content > :nth-child(5) { justify-self: end; width: max-content; } .footer-content :is(.social-links, .social-icons, .social-media-links, .social-links__list) { width: max-content; display: flex; justify-content: flex-end; gap: 12px; } } /* ✅ Common footer heading selector */ .footer-content :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { font-size: var(--footer-heading-size) !important; font-weight: var(--footer-heading-weight) !important; /* ✅ fallback: if line-height is -1, variable is not set -> use normal */ line-height: var(--footer-heading-line-height, normal) !important; text-align: var(--footer-heading-align) !important; } /* ✅ HEADING preset = theme heading font */ .footer-content[data-footer-heading-preset="heading"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-preset="heading"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { font-family: var(--font-heading-family) !important; font-style: var(--font-heading-style) !important; letter-spacing: normal !important; } /* ✅ BODY preset = theme body font */ .footer-content[data-footer-heading-preset="body"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-preset="body"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { font-family: var(--font-body-family) !important; font-style: var(--font-body-style) !important; letter-spacing: normal !important; } /* ✅ SUBHEADING preset = Halant */ .footer-content[data-footer-heading-preset="subheading"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-preset="subheading"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { font-family: "Halant", serif !important; letter-spacing: 0.08em !important; } /* ✅ heading text case control */ .footer-content[data-footer-heading-case="none"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-case="none"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { text-transform: none !important; } .footer-content[data-footer-heading-case="uppercase"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-case="uppercase"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { text-transform: uppercase !important; } .footer-content[data-footer-heading-case="lowercase"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-case="lowercase"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { text-transform: lowercase !important; } .footer-content[data-footer-heading-case="sentence"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ), .footer-content[data-footer-heading-case="sentence"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a { text-transform: lowercase !important; } .footer-content[data-footer-heading-case="sentence"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title )::first-letter, .footer-content[data-footer-heading-case="sentence"] :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) a::first-letter { text-transform: uppercase !important; } /* underline option */ .footer-content--heading-underline :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) { border-bottom: none !important; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } @media screen and (max-width: 767px) { .footer-content { grid-template-columns: 1fr; row-gap: max(22px, var(--footer-gap-y)); padding: 22px 12px 18px !important; } .footer-content > * { width: 100%; justify-self: stretch !important; padding-bottom: 16px; border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.25); } .footer-content > *:last-child { padding-bottom: 0; border-bottom: 0; } .footer-content :is( .footer-block__heading, .menu__title, .menu__heading, .footer-heading, .footer__title, .footer__heading, .footer__block-title, .accordion__title ) { font-size: clamp(0.95rem, 4vw, 1.1rem) !important; line-height: 1.35 !important; margin-bottom: 10px; text-align: left !important; } .footer-content :is(a, p, li) { font-size: 0.92rem; line-height: 1.5; text-align: left; } .footer-content :is(ul, ol) { margin: 0; padding: 0; list-style: none; } .footer-content li + li { margin-top: 8px; } .footer-content :is( .social-links, .social-icons, .social-media-links, .social-links__list, .footer-utilities__icons.social-icons__wrapper ) { justify-content: flex-start !important; gap: 10px !important; } .footer-content :is(.social-icons__icon-wrapper, .social-icons__icon-wrapper a) { min-width: 44px; min-height: 44px; } .footer-content .email-signup__input-group { grid-template-columns: 1fr; gap: 10px; } .footer-content .email-signup__input { padding: 12px 14px; } .footer-content .email-signup__button { width: 100%; min-height: 46px; } .footer-content .email-signup__button--integrated { position: static; width: 100%; height: auto; right: auto; top: auto; } } /* END_SECTION:footer */ /* START_SECTION:header-announcements (INDEX:12) */ .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; &[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:13) */ body { --header-height: 0px; --header-group-height: var(--header-height); --transparent-header-offset-boolean: 0; } body:has(> #header-group > header) { --header-height: 60px; } body:has(> #header-group:empty) { --header-group-height: 0px; } .header[transparent] { --language-button-background-color: transparent; --language-button-border-color: transparent; --header-bg-color: transparent; --header-logo-display: none; --header-logo-inverse-display: block; position: absolute; top: 0; left: 0; right: 0; background-color: transparent; z-index: var(--layer-overlay); &[transparent='not-sticky'][data-sticky-state='active'], &:has(.mega-menu__list:hover), &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])), &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) { --header-logo-display: unset; --header-logo-inverse-display: unset; --header-bg-color: unset; --color-foreground: inherit; --color-foreground-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; .header__row { transition: color var(--animation-values-fast), border-color var(--animation-values-fast), background-color var(--animation-values-fast); } } .header__row { transition: color var(--animation-values-slow), border-color var(--animation-values-slow), background-color var(--animation-values-slow); } } :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active']) .header__row:not( :has( .mega-menu__list:hover, .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]), .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating]) ) ) { --color-foreground: inherit; --color-foreground-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; --color-primary-button-background: inherit; --color-primary-button-text: inherit; } .header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row, .header--inherit-color-scheme-on-menu-open:has( .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]) ) .header__row, .header--inherit-color-scheme-on-menu-open:has( .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating]) ) .header__row { --color-foreground: inherit; --color-foreground-rgb: inherit; --color-background: inherit; --color-background-rgb: inherit; --color-border: inherit; --color-border-rgb: inherit; } .header-section { position: relative; } #header-group:has(#header-component[sticky]) { display: contents; } .header-section:has(> #header-component[sticky='always']), .header-section:has(> #header-component[sticky='scroll-up']) { position: sticky; top: -1px; z-index: var(--layer-sticky); } /* Direct sticky fallback on the header component itself. This avoids relying only on :has() wrapper behavior in embedded previews. */ #header-component[sticky='always'], #header-component[sticky='scroll-up'] { position: sticky; top: -1px; z-index: var(--layer-sticky); } .header[data-sticky-state] { transition: opacity var(--animation-speed) var(--animation-easing); opacity: 1; } .header[data-sticky-state='active'] { view-transition-name: sticky-header; } .header[data-sticky-state='idle'], .header[data-sticky-state='active'][data-animating] { opacity: 0; } /* Fail-safe for sticky='scroll-up': ensure upward direction always reveals the header on tablet/desktop/editor. */ .header[sticky='scroll-up'][data-scroll-direction='up'], .header[sticky='scroll-up'][data-sticky-state='inactive'] { opacity: 1 !important; } .header[sticky='scroll-up'][data-scroll-direction='down'] { opacity: 0; } } .header__row { position: relative; background-color: var(--header-bg-color, var(--color-background)); } /* Force solid white header background on all devices */ #header-component { --header-bg-color: #ffffff !important; --header-logo-display: block !important; --header-logo-inverse-display: none !important; } #header-component .header__row { background-color: #ffffff !important; } .header__row--top:not(.divider--page-width), .header__row--top.divider--page-width .header__columns, .header__row--bottom { border-bottom: var(--border-bottom-width) solid var(--color-border); } @media screen and (max-width: 749px) { .header__row--top:not(.divider--page-width), .header__row--top.divider--page-width .header__columns { border-bottom-width: var(--border-bottom-width-mobile); } } .header__row.divider--page-width:not(.section--page-width) .header__columns { @media screen and (min-width: 750px) { padding-inline-start: 0; padding-inline-end: 0; margin-inline-start: var(--page-margin); margin-inline-end: var(--page-margin); } } .header__column { display: flex; align-items: center; @media screen and (max-width: 749px) { display: contents; } } .header__column--left, .header__column--center { gap: var(--gap-xl); grid-area: left; } .header__column--center { justify-content: center; grid-area: center; header-menu:only-child .overflow-menu::part(list) { justify-content: center; } } .header__column--right { gap: var(--gap-xl); justify-content: flex-end; grid-area: right; .overflow-menu::part(list) { justify-content: flex-end; } } .header__columns { --header-left: 1fr; --header-center: auto; --header-right: 1fr; --header-template-columns: var(--header-left) var(--header-center) var(--header-right); --header-mobile-bookend: 44px; display: grid; grid-template-areas: 'left center right'; grid-gap: var(--gap-xl); grid-template-columns: var(--header-template-columns); &:has(.header__column--center header-menu) { --header-center: auto; --header-left: minmax(max-content, 1fr); --header-right: minmax(max-content, 1fr); } &:where(:not(:has(.header__column--center))) { @media screen and (min-width: 750px) { --header-template-columns: var(--header-left) var(--header-right); grid-template-areas: 'left right'; } &:has(.header__column--right header-menu) { --header-right: auto; --header-left: minmax(max-content, 1fr); } &:has(.header__column--left header-menu) { --header-left: auto; --header-right: minmax(max-content, 1fr); } } @media screen and (max-width: 749px) { --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr var(--header-mobile-bookend) var(--header-mobile-bookend); grid-template-areas: 'leftA leftB center rightA rightB'; grid-column: span 3; column-gap: 0; align-items: center; padding-block: 0; padding-inline: 0 var(--padding-3xs); .header-logo { grid-area: center; } &:not(:has(header-actions)) .search-action { grid-area: leftB; } &:not(:has(.account-actions)) .search-action { grid-area: rightA; } .search-action { grid-area: leftB; } header-actions { grid-area: rightB; } } } .header__columns:not(:has(.header__column)) { grid-template-columns: 1fr; } /* ✅ When hovering menu, do NOT fade icons/button (only menu should be affected) */ @media (hover: hover) { .header:has(header-menu:hover) :is( header-actions, header-actions .header-actions__action, .search-action, .dropdown-localization__button, .header__icon--menu ) { opacity: 1 !important; } } header-menu, .header-actions__action, .dropdown-localization__button, .header__icon--menu { transition: opacity var(--animation-speed) var(--animation-easing); } .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link[aria-haspopup], .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link, .menu-list__list-item:where(:not([slot='overflow'])) > button.menu-list__link { margin-block: calc(-2 * var(--header-padding)); padding-block: calc(2 * var(--header-padding)); margin-inline: calc(-1 * var(--gap-xl) / 2); padding-inline: calc(var(--gap-xl) / 2); } /* Set header paddings based on height setting */ .header { --header-padding: var(--padding-sm); --font-paragraph--line-height: 1; } .header.header--compact { --header-padding: var(--padding-2xs); } .header__columns { --padding-block-start: var(--header-padding); --padding-block-end: var(--header-padding); } .header:not(.header--compact) .header__row--bottom { --header-padding: var(--padding-xs); } .header--collapse-row-paddings { .header__row--top .header__columns { --padding-block-end: 0px; } .header__row--bottom .header__columns { --padding-block-start: 0px; } } /* ============================ ICON PADDING + GAP (FIXED) - pad-left: space between menu and first icon - gap: space between search & cart - pad-right: space between icons and button (button DOES NOT MOVE) ============================ */ .header { --header-icons-pad-left: var(--icons-pad-left, 0px); --header-icons-pad-right: var(--icons-pad-right, 0px); --header-icons-gap: var(--icons-gap, 12px); } @media screen and (max-width: 749px) { .header { --header-icons-pad-left: var(--icons-pad-left-mobile, 0px); --header-icons-pad-right: var(--icons-pad-right-mobile, 0px); --header-icons-gap: var(--icons-gap-mobile, 10px); } } /* Desktop */ @media screen and (min-width: 750px) { /* keep right column normal */ .header__column--right { gap: 0 !important; } /* make actions a tight group aligned right */ .header__column--right header-actions { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 0 !important; padding: 0 !important; flex-wrap: nowrap; } /* pad-left = ONLY before first icon (Search) */ .header__column--right .search-action { margin-left: var(--header-icons-pad-left) !important; margin-right: var(--header-icons-gap) !important; /* gap between search & cart */ } /* pad-right = ONLY between last icon (Cart) and button */ .header__column--right header-actions > .header-actions__action:not(.header__cta):last-of-type { margin-right: var(--header-icons-pad-right) !important; } /* keep button fixed (do NOT auto-push it) */ .header__column--right header-actions .header__cta { margin-left: 16px !important; /* constant space between icons and button */ } } /* Mobile */ @media screen and (max-width: 749px) { header-actions { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 0 !important; padding: 0 !important; flex-wrap: nowrap; } .search-action { margin-left: var(--header-icons-pad-left) !important; margin-right: var(--header-icons-gap) !important; } header-actions > .header-actions__action:not(.header__cta):last-of-type { margin-right: var(--header-icons-pad-right) !important; } header-actions .header__cta { margin-left: 12px !important; } } /* remove margins that fight spacing */ .header-actions__action { margin: 0 !important; } /* When the header is transparent, add a margin to a potential header-section below it */ .header-section:has(.header[transparent]) + .shopify-section { margin-top: var(--header-height); } main > .shopify-section:first-child .section:not(.disable-section-top-offset) { &.spacing-style, .spacing-style { --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean)); :is(.spacing-style, .inherit-spacing) { --section-top-offset: 0px; } } .sticky-content { margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1); } } /* Search icon size */ .header { --search-icon-size: 26px; /* change this */ --search-icon-size-mobile: 20px; /* change this */ } /* Desktop search */ @media screen and (min-width: 750px) { .header__column--right .search-action svg, .header__column--right .search-action img { width: var(--search-icon-size) !important; height: var(--search-icon-size) !important; } } /* Mobile search */ @media screen and (max-width: 749px) { .search-action svg, .search-action img { width: var(--search-icon-size-mobile) !important; height: var(--search-icon-size-mobile) !important; } } /* Cart icon size */ .header { --cart-icon-size: 28px; /* change this */ --cart-icon-size-mobile: 20px; /* change this */ } /* Desktop cart */ @media screen and (min-width: 750px) { .header__column--right a[href*="/cart"] svg, .header__column--right a[href*="/cart"] img { width: var(--cart-icon-size) !important; height: var(--cart-icon-size) !important; } } /* Mobile cart */ @media screen and (max-width: 749px) { header-actions a[href*="/cart"] svg, header-actions a[href*="/cart"] img { width: var(--cart-icon-size-mobile) !important; height: var(--cart-icon-size-mobile) !important; } } /* ============================ MENU PADDING + GAP (FIXED) - pad left/right = moves whole menu group - gap = space between menu items ============================ */ .header { --header-menu-pad-left: var(--menu-pad-left, 0px); --header-menu-pad-right: var(--menu-pad-right, 0px); --header-menu-gap: var(--menu-gap, 24px); } @media screen and (max-width: 749px) { .header { --header-menu-pad-left: var(--menu-pad-left-mobile, 0px); --header-menu-pad-right: var(--menu-pad-right-mobile, 0px); --header-menu-gap: var(--menu-gap-mobile, 18px); } } /* Applies to header menu wherever it is (left/center/right) */ .header__columns header-menu { margin-left: var(--header-menu-pad-left) !important; margin-right: var(--header-menu-pad-right) !important; /* IMPORTANT: this theme uses --gap-xl for menu spacing, so we override it only inside header-menu */ --gap-xl: var(--header-menu-gap); } @media screen and (max-width: 749px) { #header-component { --mobile-header-side-padding: 16px; --mobile-header-icon-size: 20px; --mobile-cart-icon-size: 18px; --mobile-user-icon-size: 22px; --mobile-header-touch-size: 42px; --mobile-header-icon-gap: 0px; --mobile-logo-x-offset: 32px; } #header-component .header__row--top { overflow-x: clip; } #header-component .header__row--top .header__columns { grid-template-columns: var(--mobile-header-touch-size) minmax(0, 1fr) var(--mobile-header-touch-size) auto; grid-template-areas: 'left center search actions'; column-gap: var(--mobile-header-icon-gap); align-items: center; min-height: 60px; padding-inline: var(--mobile-header-side-padding); position: relative; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: clip; } #header-component .header__row--top .header__columns > * { min-width: 0; } #header-component .header__row--top .header__column--left, #header-component .header__row--top .header__column--center { display: contents; } #header-component .header__row--top .header__column--right { display: contents; } #header-component .header__row--top .header-logo { grid-area: center; position: absolute !important; left: calc(50% + var(--mobile-logo-x-offset)) !important; right: auto !important; transform: translateX(-50%) !important; inset-inline-start: calc(50% + var(--mobile-logo-x-offset)) !important; inset-inline-end: auto !important; justify-self: center; width: max-content !important; max-width: none !important; margin-inline: auto !important; padding: 0; z-index: 3; display: flex; justify-content: center; pointer-events: auto; } /* Keep logo perfectly centered on mobile regardless of side action widths */ #header-component .header__row--top { position: relative; } #header-component .header__row--top .header-logo > * { margin-inline: auto; } #header-component .header__row--top .header__drawer { grid-area: left; min-height: var(--mobile-header-touch-size); display: flex; align-items: center; justify-content: flex-start; z-index: 2; } #header-component .header__row--top .header__drawer .header__icon--summary { margin-block: 4px; } #header-component .header__row--top .search-action, #header-component .header__row--top header-actions { margin: 0 !important; align-items: center; } #header-component .header__row--top .search-action { grid-area: search; display: inline-flex; align-items: center; justify-content: flex-end; margin-right: -8px !important; z-index: 2; } #header-component .header__row--top header-actions { grid-area: actions; display: inline-flex !important; align-items: center; justify-content: flex-end; gap: var(--mobile-header-icon-gap) !important; z-index: 2; } #header-component .header__row--top .header__icon--summary, #header-component .header__row--top .search-modal__button, #header-component .header__row--top .header-actions__action { width: var(--mobile-header-touch-size); min-width: var(--mobile-header-touch-size); height: var(--mobile-header-touch-size); min-height: var(--mobile-header-touch-size); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; } #header-component .header__row--top .header-actions__action { margin: 0 !important; line-height: 1; } #header-component .header__row--top .header__column--right header-actions > .header-actions__action { margin: 0 !important; } #header-component .header__row--top .search-modal__button { line-height: 1; } #header-component .header__row--top .search-action .svg-wrapper, #header-component .header__row--top .header-actions__action .svg-wrapper { width: var(--mobile-header-icon-size); height: var(--mobile-header-icon-size); } #header-component .header__row--top .search-action .svg-wrapper, #header-component .header__row--top .search-action svg { width: 17px !important; height: 17px !important; } #header-component .header__row--top .header-drawer-icon, #header-component .header__row--top .header__icon--summary svg, #header-component .header__row--top .search-action svg, #header-component .header__row--top .header-actions__action svg { width: var(--mobile-header-icon-size); height: var(--mobile-header-icon-size); } #header-component .header__row--top .header-actions__cart-icon { --cart-bubble-size: auto; --cart-bubble-top: -3px; --cart-bubble-right: -2px; position: relative !important; } #header-component .header__row--top .header-actions__cart-icon .svg-wrapper, #header-component .header__row--top .header-actions__cart-icon svg { width: var(--mobile-cart-icon-size); height: var(--mobile-cart-icon-size); } #header-component .header__row--top .header-actions__cart-icon, #header-component .header__row--top .header-actions__cart-icon cart-icon, #header-component .header__row--top .header-actions__cart-icon .svg-wrapper { display: inline-flex; align-items: center; justify-content: center; } #header-component .header__row--top .header-actions__cart-icon cart-icon { width: var(--mobile-header-icon-size); height: var(--mobile-header-icon-size); line-height: 1; position: relative !important; } /* Keep cart icon size identical whether cart is empty or has items */ #header-component .header__row--top .header-actions__cart-icon.header-actions__cart-icon--has-cart svg { mask: none !important; -webkit-mask: none !important; } #header-component .header__row--top .account-button .account-button__mobile-icon, #header-component .header__row--top .account-button .account-button__mobile-icon svg { width: var(--mobile-user-icon-size); height: var(--mobile-user-icon-size); } #header-component .header__row--top .header-actions__cart-icon .cart-bubble { top: var(--cart-bubble-top); right: var(--cart-bubble-right); width: 13px !important; min-width: 13px !important; height: 13px !important; aspect-ratio: 1 !important; padding: 0 !important; border-radius: 999px !important; background: #235160 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; z-index: 2 !important; } #header-component .header__row--top .header-actions__cart-icon .cart-bubble__background { display: none !important; } #header-component .header__row--top .header-actions__cart-icon .cart-bubble__text { font-size: 8px !important; line-height: 1 !important; font-weight: 700 !important; color: #ffffff !important; transform: translateY(-1px); } #header-component .header__row--top .header__icon--summary:focus-visible, #header-component .header__row--top .search-modal__button:focus-visible, #header-component .header__row--top .header-actions__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } #header-component .header__row--top .account-button--logged-out:focus-visible, #header-component .header__row--top .account-button--logged-out:focus, #header-component .header__row--top .account-button--logged-out:active { outline: none !important; background: transparent !important; box-shadow: none !important; } #header-component .header__row--top:has(.menu-drawer-container[open]) .search-action, #header-component .header__row--top:has(.menu-drawer-container[open]) header-actions, #header-component .header__row--top:has(.menu-drawer-container[open]) .header-logo { visibility: hidden; } } /* Stable desktop + tablet header (single layout, no drawer, no vertical drift) */ @media screen and (min-width: 750px) { #header-component .header__row--top, #header-component .header__row--top .header__columns { overflow: visible !important; } #header-component .header__row--top .header__columns { grid-template-columns: auto minmax(0, 1fr) auto !important; column-gap: 0 !important; align-items: center !important; } #header-component .header__row--top .header__column--left, #header-component .header__row--top .header__column--center, #header-component .header__row--top .header__column--right { display: flex !important; align-items: center !important; } #header-component .header__row--top .header__column--left { justify-content: flex-start !important; } #header-component .header__row--top .header__column--center { justify-content: center !important; justify-self: center !important; } #header-component .header__row--top .header__column--right { justify-content: flex-end !important; justify-self: end !important; margin-left: 0 !important; } #header-component .header__row--top .header__column--center header-menu { display: inline-flex !important; align-items: center !important; } #header-component .header__row--top .header__column--center .overflow-menu::part(list) { flex-wrap: nowrap !important; align-items: center !important; column-gap: var(--header-menu-gap) !important; } #header-component .header__row--top .header__column--center .menu-list__submenu--popup { z-index: var(--layer-popover, 40) !important; } #header-component .header__row--top .header__column--center .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link, #header-component .header__row--top .header__column--center .menu-list__list-item:where(:not([slot='overflow'])) > button.menu-list__link { margin-block: 0 !important; padding-block: 0 !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; } /* Gap from menu toward search icon (left side of search) */ #header-component .header__row--top .header__column--right .search-action { margin-left: clamp(20px, 2.6vw, 34px) !important; } #header-component .header__row--top .search-action, #header-component .header__row--top header-actions { grid-area: auto !important; margin: 0 !important; justify-self: auto !important; } #header-component .header__drawer { display: none !important; } #header-component .header-menu, #header-component .header-menu.hidden { display: block !important; visibility: visible !important; opacity: 1 !important; } } /* Desktop-only header side spacing */ @media screen and (min-width: 1200px) { #header-component .header__row--top .header__columns, #header-component .header__row--bottom .header__columns { padding-inline: clamp(20px, 3.5vw, 56px) !important; box-sizing: border-box; } } /* Tablet range: single stable navbar style */ @media screen and (min-width: 750px) and (max-width: 1199px) { .header { --header-menu-gap: 22px; --search-icon-size: 21px; --cart-icon-size: 21px; } #header-component .header__row--top .header__column--center { justify-content: center !important; justify-self: center !important; } #header-component .header__row--top .header__column--center .overflow-menu::part(list) { flex-wrap: nowrap !important; column-gap: var(--header-menu-gap) !important; } #header-component .header__row--top .header__column--center .menu-list__link, #header-component .header__row--top .header__column--center button.menu-list__link { font-size: 0.95rem !important; } #header-component .header__row--top .header__column--right .search-action { margin-left: 24px !important; margin-right: 16px !important; } } /* Tablet-only cart icon rendering fix */ @media screen and (min-width: 750px) and (max-width: 1199px) { #header-component .header__row--top .header-actions__cart-icon .svg-wrapper, #header-component .header__row--top .header-actions__cart-icon svg { width: 22px !important; height: 22px !important; opacity: 1 !important; } #header-component .header__row--top .header-actions__cart-icon.header-actions__cart-icon--has-cart svg { mask: none !important; -webkit-mask: none !important; } #header-component .header__row--top .header-actions__cart-icon .cart-bubble { top: -2px !important; right: -2px !important; width: 13px !important; min-width: 13px !important; height: 13px !important; padding: 0 !important; border-radius: 999px !important; } #header-component .header__row--top .header-actions__cart-icon .cart-bubble__text { font-size: 9px !important; line-height: 1 !important; } } /* END_SECTION:header */ /* START_SECTION:hero (INDEX:14) */ .hero-wrapper { --hero-height-offset: 0px; } /* Being extra specific in the selector for performance reasons */ body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child { --hero-height-offset: var(--header-group-height, 0); } .hero { position: relative; min-height: calc(var(--hero-min-height) - var(--hero-height-offset)); } .hero[data-shopify-visual-preview] { --hero-min-height: 600px; min-height: 600px; } .hero__container { position: relative; overflow: hidden; border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity)); min-height: inherit; align-items: var(--vertical-alignment-mobile); justify-content: var(--horizontal-alignment); z-index: var(--layer-base); @media screen and (min-width: 750px) { align-items: var(--vertical-alignment); } } .hero__content-wrapper.page-width { grid-column: 2 / 3; } .hero__content-wrapper { position: relative; inset: 0; z-index: var(--layer-flat); } .hero__content-wrapper .group-block-content { position: relative; } .hero__media-wrapper { position: absolute; inset: 0; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(var(--hero-media-count, 1), 1fr); } .hero--auto .hero__image, .hero--auto .hero__video { aspect-ratio: var(--hero-media-aspect-ratio); } .hero--no-blocks-auto-height { :is(.hero__image, .hero__video) { width: 100%; aspect-ratio: auto; } .hero__media-wrapper { /* When there are no blocks and the height is auto, allow the image to appear. */ position: relative; } } .hero__image, .hero__video, .hero__video-poster { height: 100%; width: 100%; object-fit: cover; object-position: center center; overflow: hidden; position: relative; z-index: var(--layer-base); } /* Mobile/Desktop media visibility */ .hero__image--mobile, .hero__video--mobile, .hero__video-wrapper--mobile { display: none; } .hero__image--desktop, .hero__video--desktop, .hero__video-wrapper--desktop { display: block; } @media screen and (max-width: 899px) { .hero__image--desktop, .hero__video--desktop, .hero__video-wrapper--desktop { display: none; } .hero__image--mobile, .hero__video--mobile, .hero__video-wrapper--mobile { display: block; } .hero__media-wrapper { grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr); } /* Mobile stacking */ .hero--stack-mobile .hero__media-wrapper { grid-template-columns: 1fr; grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1))); } } .hero__video-wrapper--desktop { position: relative; } .hero__video-poster--desktop { position: absolute; } .hero__link { position: absolute; inset: 0; grid-column: 1 / -1; } .hero__media-wrapper, .hero__content-wrapper { pointer-events: none; :is(a, button, input, textarea, select) { pointer-events: auto; } } .hero__content-wrapper--design-mode * { pointer-events: auto; } .hero[data-blur-shadow='true'] { --blurred-reflection-filter-saturate: saturate(1.5); --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem; --blurred-reflection-filter-blur: blur(20px); --blurred-reflection-scale: scale(2, 1.25); --blurred-reflection-padding-block-end: 60px; } .hero[data-blur-shadow='true'] .hero__container::before { content: ''; position: absolute; inset: 0; box-shadow: var(--blurred-reflection-box-shadow); mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .hero__blurred-image { position: absolute; inset: 0; z-index: -1; mask-image: var(--blurred-reflection-mask-image); filter: var(--blurred-reflection-filter-saturate); pointer-events: none; transform: translateY(50%); overflow: hidden; } .hero__blurred-image--desktop { display: none; @media screen and (min-width: 750px) { display: block; } } .hero__blurred-image--mobile { display: block; @media screen and (min-width: 750px) { display: none; } } .hero__blurred-image img, .hero__blurred-image svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: var(--blurred-reflection-filter-blur); opacity: var(--blur-opacity); transform: var(--blurred-reflection-scale); padding-block-end: var(--blurred-reflection-padding-block-end); &:not(:only-child) { width: 50%; &:last-child { right: 0; left: auto; } } } /* Responsive HERO button with custom font + height */ .hero-wrapper .hero__content-wrapper .button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--hero-button-font-family, inherit); font-weight: var(--hero-button-font-weight, 500); font-size: var(--hero-button-font-size, 14px); /* 0px = auto height (comes only from padding) */ min-height: var(--hero-button-height, auto); padding-block: clamp(10px, 0.9vw, 14px); padding-inline: clamp(24px, 2.5vw, 40px); width: auto; max-width: 100%; text-align: center; } @media screen and (max-width: 899px) { .hero-wrapper .hero__content-wrapper .button { width: 100%; max-width: 260px; } } /* END_SECTION:hero */ /* START_SECTION:locations-split (INDEX:15) */ {%- assign cs = settings.color_schemes[section.settings.color_scheme] -%} #shopify-section-{{ section.id }} .locations-split__scheme-wrap{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; {%- if cs.settings.gradient != blank -%} background: {{ cs.settings.gradient }}; {%- else -%} background: {{ cs.settings.background }}; {%- endif -%} } #shopify-section-{{ section.id }}{ padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; } #shopify-section-{{ section.id }} > .section { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; } .locations-split__grid { display: grid; gap: 32px; align-items: stretch; height: 100%; } .locations-split__content { display: flex; flex-direction: column; justify-content: center; } .locations-split__heading { margin: 0; } .locations-split__item { display: flex; align-items: flex-start; } .locations-split__item-icon-wrapper { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .locations-split__item-icon { width: 100%; height: 100%; object-fit: contain; display: block; } .locations-split__item-bullet { width: 100%; height: 100%; border-radius: 999px; background-color: currentColor; opacity: .9; display: block; } .locations-split__item-text-wrapper { flex: 1 1 auto; } .locations-split__item-text { margin: 0; text-decoration: underline; } /* Right media column */ .locations-split__media { position: relative; overflow: hidden; border-radius: 6px; /* reduced radius */ } .locations-split__media--fill { height: 100%; } .locations-split__image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; /* reduced radius */ } /* MAP wrapper + iframe */ .locations-split__map{ width: 100%; height: 100%; } .locations-split__map iframe{ width: 100% !important; height: 100% !important; display: block; border: 0 !important; border-radius: 6px !important; /* reduced radius */ } /* ✅ Desktop: force a proper map box height */ @media screen and (min-width: 990px) { .locations-split__media{ min-height: 420px; /* increase this if you want taller */ } .locations-split__map{ height: 420px; /* must match min-height for consistent look */ } } /* Desktop only: slightly reduce extra bottom spacing */ @media screen and (min-width: 1025px) { .locations-split__outer { padding-bottom: 28px !important; } } @media screen and (max-width: 767px) { .locations-split.section { padding-left: 0 !important; padding-right: 0 !important; } .locations-split__outer { padding: 0 0 24px 0 !important; } .locations-split__inner { max-width: 100% !important; } .locations-split__grid { grid-template-columns: 1fr !important; gap: 0; } .locations-split__media { order: -1; min-height: 320px; padding: 0 !important; margin: 0 -16px !important; width: calc(100% + 32px) !important; max-width: none !important; border-radius: 0 !important; } .locations-split__map { height: 320px; width: 100% !important; border-radius: 0 !important; } .locations-split__map > * { width: 100% !important; max-width: none !important; display: block !important; margin: 0 !important; border-radius: 0 !important; } .locations-split__map iframe, .locations-split__image { border-radius: 0 !important; } .locations-split__content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; gap: 0; min-height: auto; padding: 0 8px 12px !important; margin-top: -64px; } .locations-split__heading { text-align: left !important; font-weight: 500 !important; font-size: 36px !important; line-height: 1.2 !important; margin: 0 0 20px !important; padding: 0 !important; } .locations-split__item-icon-wrapper { width: 16px !important; height: 16px !important; } .locations-split__item { justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 14px !important; padding: 0 !important; } .locations-split__item:last-child { margin-bottom: 0 !important; } .locations-split__item-text-wrapper { text-align: left; min-width: 0; flex: 1 1 auto; } .locations-split__item-text, .locations-split__item-text-wrapper p, .locations-split__item-text-wrapper a { font-size: 0.88rem !important; line-height: 1.3; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* END_SECTION:locations-split */ /* START_SECTION:logo (INDEX:17) */ .logo-section { width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end)); max-width: 100%; max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end)); font-size: var(--logo-height); display: flex; @media screen and (max-width: 750px) { max-height: calc( var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end) ); font-size: var(--logo-height-mobile, var(--logo-height)); width: calc( var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end) ); } } .logo-section--center { margin-inline: auto; } .logo-section--flex-end { margin-inline-start: auto; } .logo-section--flex-start { margin-inline-end: auto; } .logo-section__image-wrapper { display: flex; width: 100%; max-width: 100%; max-height: 100%; } .logo-section__image { object-fit: contain; width: 100%; } /* END_SECTION:logo */ /* START_SECTION:main-blog-post (INDEX:21) */ .blog-post-comments-container { width: 100%; max-width: var(--normal-content-width); margin: 0 auto; } .blog-post-comments { display: flex; flex-direction: column; gap: var(--gap-3xl); } .blog-post-comment__author { display: flex; align-items: center; gap: var(--gap-2xs); margin-top: var(--margin-md); font-size: var(--font-size--body-sm); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .blog-post-comments-pagination { display: flex; justify-content: center; gap: var(--gap-2xs); } .blog-post-comments-pagination, .blog-post-comments-pagination a { color: var(--color-foreground); } .blog-post-comments-pagination .current { color: var(--color-foreground); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a { display: block; padding: var(--padding-2xs) var(--padding-xs); } .blog-post-comments-pagination .current, .blog-post-comments-pagination a:hover { border-bottom: 1px solid var(--color-foreground); } /* END_SECTION:main-blog-post */ /* START_SECTION:main-blog (INDEX:22) */ /** * Blog posts page layout */ .blog-posts { --page-content-width: var(--narrow-page-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); --columns-gap: 36px; --rows-gap: 36px; } .blog-posts-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; width: 100%; column-gap: var(--columns-gap); row-gap: var(--rows-gap); } /** * Apart from the first and second rows in the grid, all remaining blog posts * are arranged in a three-column layout: * +------------+------------+-------------+ * | | | | * | (span 2) | (span 2) | (span 2) | * | | | | * +------------+------------+-------------+ */ .blog-post-item { --blog-post-card-scale: 0.6; grid-column: span 2; @media screen and (max-width: 749px) { --blog-post-card-scale: 0.5; grid-column: span 6; } } /** * The second row of blog posts has two columns: * +-------------------+-------------------+ * | | | * | (column span 3) | (column span 3) | * | | | * +-------------------+-------------------+ */ .blog-post-item:nth-child(2), .blog-post-item:nth-child(3) { --blog-post-card-scale: 0.8; grid-column: span 3; @media screen and (max-width: 749px) { --blog-post-card-scale: 0.5; grid-column: span 6; } } /** * The first row of blog posts has only one column: * +---------------------------------------+ * | | * | (1 column span 6) | * | | * +---------------------------------------+ */ .blog-post-item:first-child { --blog-post-card-scale: 1; grid-column: span 6; } /** * When there's no image, the blog post item has a border. */ .blog-post-item { border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20)); padding: 0 1rem 1rem; } .blog-post-item:has(.blog-post-card__image-container) { border: none; padding: 0; } /* END_SECTION:main-blog */ /* START_SECTION:main-cart (INDEX:23) */ .cart-page { --cart-font-size--2xs: var(--font-size--2xs); --cart-font-size--xs: var(--font-size--xs); --cart-font-size--sm: var(--font-size--sm); --cart-font-size--md: var(--font-size--md); --cart-font-size--2xl: var(--font-size--2xl); display: grid; grid-template-columns: 1fr; gap: 0 var(--padding-5xl); /* ✅ left/right padding */ padding-inline: var(--cart-page-pad-inline-mobile, 0px); font-family: var(--font-body-family, inherit); color: #235160; } @media screen and (min-width: 750px) { .cart-page { padding-inline: var(--cart-page-pad-inline-desktop, 0px); } } /* EMPTY CART STATE – centered card UI */ .cart-page--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; } /* hide default empty text / title when using our custom card */ .cart-page--empty .cart-page__title, .cart-page--empty .cart-page__items, .cart-page--empty .cart-page__more-blocks { display: none; } .cart-page__empty-card { max-width: 480px; width: 100%; background: #ffffff; border-radius: 18px; padding: 2.25rem 2.5rem 2rem; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .cart-empty-icon { width: 3rem; height: 3rem; border-radius: 999px; background: rgba(35, 81, 96, 0.08); display: flex; align-items: center; justify-content: center; color: #235160; } .cart-empty-icon__svg { width: 1.7rem; height: 1.7rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ⬇️ bigger heading + theme heading font */ .cart-empty-heading { margin: 0; font-family: var(--font-heading-family, var(--font-body-family, inherit)); font-size: 1.3rem; /* slightly larger */ font-weight: 600; line-height: 1.45; color: #235160; } .cart-empty-text { margin: 0; font-size: 0.9rem; opacity: 0.85; color: #235160; } .cart-empty-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.25rem; } .cart-empty-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.9rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.08s ease, border-color 0.18s ease; } .cart-empty-button--primary { border: none; background-color: #235160; color: #ffffff; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16); } .cart-empty-button--primary:hover { background-color: #1c3f4c; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22); transform: translateY(-1px); } .cart-empty-button--primary:focus-visible { outline: 2px solid #235160; outline-offset: 2px; } .cart-empty-button--secondary { border: 1px solid rgba(35, 81, 96, 0.3); background-color: #ffffff; color: #235160; box-shadow: none; } .cart-empty-button--secondary:hover { background-color: rgba(35, 81, 96, 0.05); border-color: rgba(35, 81, 96, 0.5); transform: translateY(-1px); } /* DEFAULT (non-empty) cart layout stays as before */ .cart-page__more-blocks { width: 100%; } .cart-page__main { grid-column: 1; } .cart-page__summary { padding-top: var(--padding-xl); } @media screen and (min-width: 750px) { .cart-page { grid-template-columns: 1fr min(50vw, var(--sidebar-width)); grid-template-rows: min-content min-content 1fr; } .cart-page__summary { display: grid; height: 100%; grid-column: 2; grid-row: 1 / -1; align-self: stretch; grid-template-rows: subgrid; padding-top: 0; /* needed to support blurred effect from hero section */ position: relative; } .section--page-width .cart-page:has(.cart__container--extend) { grid-column: 2 / 4; grid-template-columns: 1fr minmax( var(--sidebar-width), calc((100vw - var(--page-width)) / 2 + var(--sidebar-width)) ); } .cart__container--extend { height: 100%; } } @media screen and (min-width: 1400px) { .cart-page { grid-template-columns: 1fr var(--sidebar-width); } } @media screen and (max-width: 767px) { .cart-page { padding-inline: 0px !important; padding-block-start: 18px !important; padding-block-end: 18px !important; row-gap: 14px; } .cart-page__items { margin-top: 0; } .cart-page__summary { padding-top: 0; padding-inline: 8px !important; } .cart-page__empty-card { padding: 1.75rem 1.5rem; margin-inline: 1rem; } .cart-empty-actions { flex-direction: column; align-items: stretch; } .cart-empty-button { width: 100%; } } /* END_SECTION:main-cart */ /* START_SECTION:main-collection-list (INDEX:24) */ @media screen and (max-width: 767px) { .ui-test-collection-list .section-resource-list { padding-inline: 12px !important; } .ui-test-collection-list .section-resource-list .section-resource-list__content > .text-block:first-child, .ui-test-collection-list .section-resource-list .section-resource-list__content > .text-block:first-child > * { text-align: center !important; align-items: center !important; justify-content: center !important; margin-inline: auto !important; } .ui-test-collection-list .section-resource-list :is( .section-resource-list__header, .text-block, .text-block > *, .resource-list__item ) { max-width: 100%; } .ui-test-collection-list .section-resource-list .resource-list__item .collection-card { --collection-card-gap: 14px !important; } .ui-test-collection-list .section-resource-list .resource-list__item .collection-card__content { padding-top: 2px !important; padding-bottom: 2px !important; } .ui-test-collection-list .section-resource-list .resource-list__item .collection-card__content .text-block { min-height: 2.5em; display: flex; align-items: center; justify-content: center; margin: 0 !important; width: 100% !important; text-align: center !important; } .ui-test-collection-list .section-resource-list .resource-list__item .collection-card__content { align-items: center !important; } .ui-test-collection-list .section-resource-list .resource-list__item .collection-card__content .text-block > * { width: 100% !important; text-align: center !important; } } /* END_SECTION:main-collection-list */ /* START_SECTION:main-collection (INDEX:25) */ /* ========================= GRID + ALIGNMENT ========================= */ .product-grid-container .breadcrumb, .product-grid-container nav[aria-label="Breadcrumb"]{ margin-bottom: 10px !important; } .product-grid-container .breadcrumb + .collection-wrapper{ margin-top: 6px !important; } .main-collection-grid{ grid-column: var(--grid-column--mobile, 1 / -1); } @media screen and (min-width: 750px){ .main-collection-grid{ grid-column: var(--grid-column--desktop, 2 / -2); } } .v-subcollections{ padding-inline: 0 !important; } /* Align breadcrumb with product grid left edge */ .product-grid-container .v-bc-wrap{ padding-inline: clamp(0px, 0vw, 40px) !important; /* same as .collection-wrapper */ margin-bottom: 10px; } .collection-wrapper{ padding-inline: clamp(46px, 3vw, 40px); } @media screen and (min-width: 750px){ .collection-wrapper{ grid-template-columns: 1fr repeat( var(--centered-column-number), minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) ) 1fr; } } /* ========================= SUB-COLLECTIONS ========================= */ .v-subcollections{ width: 100%; display: flex; flex-direction: column; gap: 44px; padding-inline: 0; } .v-subcollections__block{ padding-block: 6px; } .v-subcollections__head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .v-subcollections__title{ margin: 0; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.1; font-size: 16px !important; } .v-subcollections__all{ font-weight: 600; font-size: 13px; text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.14); background: rgba(15, 23, 42, 0.03); } .v-subcollections__all:hover{ border-color: rgba(15, 23, 42, 0.24); background: rgba(15, 23, 42, 0.05); } /* ✅ Sub-collection grid */ .v-subcollections__grid{ list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; padding-bottom: 10px; /* default desktop */ grid-template-columns: repeat(4, minmax(0, 1fr)); } .v-subcollections__grid .product-grid__item{ min-width: 0; } /* ✅ Desktop view modes */ @media screen and (min-width: 750px){ .v-subcollections__grid[product-grid-view="default"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .v-subcollections__grid[product-grid-view="cols-3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .v-subcollections__grid[product-grid-view="cols-5"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .v-subcollections__grid[product-grid-view="cols-6"]{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .v-subcollections__grid[product-grid-view="zoom-out"]{ grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); } } /* ✅ ONE ROW LIMITS */ @media screen and (min-width: 750px){ .v-subcollections__grid[product-grid-view="default"] .product-grid__item:nth-child(n+5){ display:none; } .v-subcollections__grid[product-grid-view="cols-3"] .product-grid__item:nth-child(n+4){ display:none; } .v-subcollections__grid[product-grid-view="cols-5"] .product-grid__item:nth-child(n+6){ display:none; } .v-subcollections__grid[product-grid-view="cols-6"] .product-grid__item:nth-child(n+7){ display:none; } .v-subcollections__grid[product-grid-view="zoom-out"] .product-grid__item:nth-child(n+7){ display:none; } } /* ✅ Mobile: always 2 items only */ @media screen and (max-width: 749px){ .product-grid-container { padding-inline: 16px !important; } .product-grid-container .v-bc-wrap { padding-inline: 0 !important; } .product-grid-container .v-bc-wrap .breadcrumb, .product-grid-container .v-bc-wrap nav[aria-label="Breadcrumb"] { margin: 0 0 10px 0 !important; } .collection-wrapper { padding-inline: 0 !important; } .product-grid-container .collection-wrapper .facets-toggle, .product-grid-container .collection-wrapper .facets-mobile-wrapper, .product-grid-container .collection-wrapper .facets-controls-wrapper { padding-inline: 0 !important; margin-inline: 0 !important; } .product-grid-container #ResultsList, .product-grid-container .main-collection-grid, .product-grid-container .v-subcollections { width: 100%; max-width: 100%; } .v-subcollections{ gap: 24px; } .v-subcollections__block{ padding-block: 10px !important; margin: 0 !important; } .v-subcollections__head{ margin: 0 !important; padding-block: 10px !important; min-height: 24px; } .v-subcollections__title{ margin: 0; line-height: 1.2; } .v-subcollections__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 0; } .v-subcollections__grid .product-grid__item:nth-child(n+3){ display: none; } } /* END_SECTION:main-collection */ /* START_SECTION:marquee (INDEX:29) */ marquee-component { display: block; width: 100%; overflow: hidden; } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_SECTION:marquee */ /* START_SECTION:media-with-content (INDEX:30) */ .section--page-width { &.media-with-content { grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right'; @media screen and (min-width: 750px) { /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */ --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 12) * 7) calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin); grid-template-areas: 'margin-left media content margin-right'; } } &.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 12) * 5) calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin); grid-template-areas: 'margin-left content media margin-right'; } } &.media-with-content--medium { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin); } } &.media-with-content--narrow.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc((var(--full-page-grid-central-column-width) / 3) * 2) calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin); } } &.media-with-content--narrow { @media screen and (min-width: 750px) { --media-with-content-grid-columns: var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 3) calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin); } } } .section--full-width { &.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 2.5fr 3.5fr; grid-template-areas: 'content media'; } } &.media-with-content--medium { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 1fr 1fr; } } &.media-with-content--narrow { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 2fr 4fr; } } &.media-with-content--narrow.media-with-content--media-right { @media screen and (min-width: 750px) { --media-with-content-grid-columns: 4fr 2fr; } } } /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */ .media-with-content.media-with-content--media-extend { grid-template-columns: var(--media-with-content-grid-columns); grid-template-areas: 'media media media' 'margin-left content margin-right'; @media screen and (min-width: 750px) { grid-template-areas: 'media media content margin-right'; } } .media-with-content--media-extend.media-with-content--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media media'; } } .media-with-content--media-right { @media screen and (min-width: 750px) { grid-template-areas: 'margin-left content media media'; } } .media-with-content { --media-with-content-grid-columns: var(--full-page-grid-with-margins); grid-template-columns: var(--media-with-content-grid-columns); grid-template-areas: 'media media media' 'content content content'; @media screen and (min-width: 750px) { --media-with-content-grid-columns: 3.5fr 2.5fr; /* Default desktop layout is wide media, on the left, in full page section */ grid-template-areas: 'media content'; } .media-block { grid-area: media; } .media-with-content__content { grid-area: content; } /* Inner blocks spacing */ .media-with-content__content > .group-block-content { padding-inline: var(--page-margin); padding-block: calc(2 * var(--page-margin)); @media screen and (min-width: 750px) { padding-block: var(--page-margin); } } &.section--page-width .media-with-content__content > .group-block-content { padding-inline: 0; @media screen and (min-width: 750px) { padding-inline-start: var(--page-margin); } } &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content { padding-inline-end: var(--page-margin); padding-inline-start: 0; } } .media-with-content[data-shopify-visual-preview] { --hero-min-height: 500px; min-height: 500px; } @media screen and (max-width: 767px) { .media-with-content .media-with-content__content > .group-block-content { padding-inline: 16px !important; padding-block: 18px 22px; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; } .media-with-content .media-with-content__content > .group-block-content > * { width: 100% !important; max-width: 100% !important; align-self: stretch !important; margin-inline: 0 !important; } .media-with-content .media-with-content__content .text-block, .media-with-content .media-with-content__content .text-block > * { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; text-align: left !important; overflow-wrap: anywhere; word-break: break-word; } } /* ============================ MOBILE ONLY (<= 767px) Vessel Media-with-Content - 16px side padding - Heading smaller + semibold - Body text smaller - Works with multiple blocks (Heading + Content) ============================ */ @media screen and (max-width: 767px) { /* 16px gutters + spacing */ .media-with-content .media-with-content__content > .group-block-content{ padding: 18px 16px 22px !important; gap: 14px !important; align-items: flex-start !important; justify-content: flex-start !important; } /* Make each block full width */ .media-with-content .media-with-content__content > .group-block-content > *{ width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* ✅ 1) HEADING BLOCK (usually first item) */ .media-with-content .media-with-content__content > .group-block-content > *:nth-child(1) .text-block__text, .media-with-content .media-with-content__content > .group-block-content > *:nth-child(1) .rte, .media-with-content .media-with-content__content > .group-block-content > *:nth-child(1) p { font-size: 36px !important; /* adjust: 28-34 */ line-height: 1.15 !important; font-weight: 500 !important; /* semibold */ letter-spacing: 0 !important; } /* If Vessel uses custom mobile variable sizing, override it */ .media-with-content .media-with-content__content > .group-block-content > *:nth-child(1) { --font-size-mobile: 30px !important; } /* ✅ OPTIONAL: if you REALLY want “of premium linens” NOT to break (Enable this line, but note it can overflow on very small screens) */ /* .media-with-content .media-with-content__content > .group-block-content > *:nth-child(1) .text-block__text { white-space: nowrap !important; } */ /* ✅ 2) CONTENT/TEXT BLOCK (usually second item) */ .media-with-content .media-with-content__content > .group-block-content > *:nth-child(2) .text-block__text, .media-with-content .media-with-content__content > .group-block-content > *:nth-child(2) .rte, .media-with-content .media-with-content__content > .group-block-content > *:nth-child(2) p, .media-with-content .media-with-content__content > .group-block-content > *:nth-child(2) li { font-size: 14px !important; /* adjust: 14-15 */ line-height: 1.65 !important; font-weight: 400 !important; } .media-with-content .media-with-content__content > .group-block-content > *:nth-child(2) { --font-size-mobile: 14px !important; } } /* END_SECTION:media-with-content */ /* START_SECTION:password (INDEX:32) */ .section-password { flex-grow: 1; display: flex; } .password-main-content { flex: 1; display: flex; flex-direction: column; } .password-enter { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); padding-block: var(--padding-xl); } .password-enter__powered-by { margin: 0; display: flex; align-items: center; gap: var(--padding-xs); height: 1em; a { display: flex; } svg { display: inline; height: 1.3em; color: var(--color-foreground); } } .password-enter__links { display: flex; align-items: center; gap: var(--gap-2xl); @media screen and (max-width: 749px) { flex-direction: column; gap: var(--gap-sm); } } .password-enter__admin-link { margin: 0; } .password-enter__button { height: var(--minimum-touch-target); background-color: transparent; color: var(--color-primary); cursor: pointer; text-decoration: underline; &:hover { color: var(--color-primary-hover); text-decoration: none; } } .password-dialog { max-width: 100vw; max-height: 100svh; width: 100vw; height: 100svh; border: none; transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete, overlay var(--animation-speed) allow-discrete; &::backdrop { display: none; } } .password-dialog[open] { opacity: 1; top: 0; left: 0; } @starting-style { .password-dialog[open] { opacity: 0; } } .password-dialog:not([open]) { opacity: 0; } @starting-style { .password-dialog:not([open]) { opacity: 1; } } .password-dialog__close-button { cursor: pointer; } .password-dialog__header { position: absolute; top: 0; right: 0; padding: var(--padding-lg); z-index: var(--layer-raised); } .password-dialog__content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--padding-lg); height: 100%; transition: transform var(--animation-values); } .password-dialog__content .email-signup__message { padding-block-start: var(--padding-xl); } .password-dialog[open] .password-dialog__content { transform: translateY(0); } @starting-style { .password-dialog[open] .password-dialog__content { transform: translateY(1em); } } .password-dialog:not([open]) .password-dialog__content { transform: translateY(1em); } @starting-style { .password-dialog:not([open]) .password-dialog__content { transform: translateY(0); } } .storefront-password-form { max-width: 400px; width: 100%; } .email-signup__input-group, .password-dialog__submit-button { width: 100%; @media screen and (min-width: 750px) { width: auto; } } /* END_SECTION:password */ /* START_SECTION:predictive-search (INDEX:34) */ input[type='search']::-webkit-search-decoration { -webkit-appearance: none; /* stylelint-disable-line */ } .predictive-search-dropdown { display: flex; flex-direction: column; position: relative; top: 0; left: 0; right: 0; z-index: var(--layer-base); } .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; } } .header[transparent] :is(.predictive-search):not(:focus-within) { background-color: transparent; } .header[transparent] .predictive-search-form__header-inner { border-color: var(--color-foreground); } .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__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__wrapper.predictive-search-results__wrapper-queries { margin-bottom: var(--margin-lg); padding-inline: var(--padding-xl); gap: var(--gap-2xs); } .predictive-search-results__card { 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 { animation-delay: 100ms; transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in); } .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; } .predictive-search-results__no-results:last-child { margin-block: var(--margin-lg); text-align: center; } 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); } } /* END_SECTION:predictive-search */ /* START_SECTION:product-information (INDEX:36) */ .product-information { gap: var(--gap) 0; /* NEW: section left/right padding */ padding-inline-start: var(--section-padding-inline-start, 0px); padding-inline-end: var(--section-padding-inline-end, 0px); } /* Base grid layout */ .product-information__grid { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; } /* Default column positions */ .product-details { order: 1; } .product-information__media { order: 0; width: 0; min-width: 100%; } /* Mobile styles */ @media screen and (max-width: 749px) { .product-information__media { grid-column: 1 / -1; } .product-details { grid-column: 2 / 3; } } /* Desktop styles */ @media screen and (min-width: 750px) { .product-information__grid { grid-column: 2; } /* Position when there is no media */ .product-information__grid.product-information--media-none, .product-information__grid:has(.product-information__media:empty) { .product-details { width: var(--narrow-content-width); margin: 0 auto; } } /* Position when there is media */ .product-information__grid:not(:has(.product-information__media:empty)) { /* Media on the left side */ &.product-information--media-left { grid-template-columns: 1fr min(50vw, var(--sidebar-width)); /* NEW: actual gap between columns */ column-gap: var(--column-gap, 0px); /* OPTIONAL: extra padding near the split */ .product-information__media { padding-inline-end: var(--media-split-padding, 0px); } .product-details { padding-inline-start: var(--details-split-padding, 0px); } &:has(.media-gallery--extend) { grid-column: 1 / 3; } } /* Media on the right side */ &.product-information--media-right { grid-template-columns: min(50vw, var(--sidebar-width)) 1fr; /* NEW: actual gap between columns */ column-gap: var(--column-gap, 0px); .product-information__media { order: 1; padding-inline-start: var(--media-split-padding, 0px); } .product-details { order: 0; padding-inline-end: var(--details-split-padding, 0px); } &:has(.media-gallery--extend) { grid-column: 2 / -1; } } /* Equal width columns */ &.product-information__grid--half, &.product-information__grid--half:has(.media-gallery--extend) { grid-column: 1 / -1; grid-template-columns: var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(var(--full-page-grid-central-column-width) / 2) var(--full-page-grid-margin); /* keep the same gap behavior in half mode too */ column-gap: var(--column-gap, 0px); &.product-information--media-left { .product-information__media { grid-column: 2 / 3; &:has(.media-gallery--extend) { grid-column: 1 / 3; } } .product-details { grid-column: 3 / 4; } } &.product-information--media-right { .product-information__media { grid-column: 3 / 4; &:has(.media-gallery--extend) { grid-column: 3 / -1; } } .product-details { grid-column: 2 / 3; } } } } /* Handle full width section */ .section--full-width { .product-information__grid:not(:has(.product-information__media:empty)), .product-information__grid:not(:has(.product-information__media:empty)) { &.product-information--media-left, &.product-information--media-right { grid-column: 1 / -1; } &.product-information--media-left .product-details { padding-inline-end: var(--padding-lg); } &.product-information--media-right .product-details { padding-inline-start: var(--padding-lg); } &.product-information__grid--half.product-information--media-left { .product-information__media { grid-column: 1 / 3; } .product-details { grid-column: 3 / -1; } } &.product-information__grid--half.product-information--media-right { .product-information__media { grid-column: 3 / -1; } .product-details { grid-column: 1 / 3; } } } } } /* Wider sidebar for large screens */ @media screen and (min-width: 1200px) { .product-information__grid:not( .product-information__grid--half, :has(.product-information__media:empty) ).product-information--media-left { grid-template-columns: 2fr 1fr; } .product-information__grid:not( .product-information__grid--half, :has(.product-information__media:empty) ).product-information--media-right { grid-template-columns: 1fr 2fr; } } .product-information__grid--limit-details .product-details > .group-block { max-width: var(--sidebar-width); } /* If the header is sticky, make product details content stick underneath the header */ body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop { --sticky-header-offset: var(--header-height); } /* Stop the right column from jumping while scrolling */ @media screen and (min-width: 750px) { .product-details.sticky-content--desktop { position: static !important; top: auto !important; } } /* Breadcrumb inside product grid: align with image */ .product-information__grid .breadcrumb { grid-column: 1 / -1; /* span full grid width */ margin: 0 0 24px 116px; /* no side offset, small bottom gap */ } /* Tablet-only: align breadcrumb/media to the left and reduce left page spacing */ @media screen and (min-width: 750px) and (max-width: 1024px) { main[data-template*='product'] .product-information, body.template-product .product-information { --section-padding-inline-start: 0px !important; --section-padding-inline-end: 24px !important; padding-inline-start: 0 !important; padding-inline-end: 24px !important; } main[data-template*='product'] .product-information__grid, body.template-product .product-information__grid { grid-column: 1 / -1 !important; } main[data-template*='product'] .product-information__grid .breadcrumb, body.template-product .product-information__grid .breadcrumb { grid-column: 1 / -1 !important; margin: 0 0 18px 8px !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; } main[data-template*='product'] .product-information__media, body.template-product .product-information__media, main[data-template*='product'] .product-information__media :is(.media-gallery, media-gallery, slideshow-component, slideshow-container), body.template-product .product-information__media :is(.media-gallery, media-gallery, slideshow-component, slideshow-container) { margin-inline-start: 0 !important; padding-inline-start: 0 !important; } /* Keep product media pinned left on tablet */ main[data-template*='product'] .product-information__media, body.template-product .product-information__media { margin-left: 0 !important; } /* Move breadcrumb right on tablet */ main[data-template*='product'] .product-information__grid .breadcrumb, body.template-product .product-information__grid .breadcrumb { margin-left: 52px !important; } /* Tablet typography tuning */ main[data-template*='product'] .product-details h1, main[data-template*='product'] .product-details .h1, body.template-product .product-details h1, body.template-product .product-details .h1 { font-size: clamp(42px, 4.1vw, 52px) !important; line-height: 1.08 !important; } main[data-template*='product'] .product-details, body.template-product .product-details { font-size: 0.95rem !important; } main[data-template*='product'] .product-details .text-block.rte, main[data-template*='product'] .product-details .text-block.rte > *, body.template-product .product-details .text-block.rte, body.template-product .product-details .text-block.rte > * { font-size: 0.94rem !important; line-height: 1.4 !important; } } /* ✅ Floating overlay layer for VP panel (beats gallery stacking contexts) */ .product-information { position: relative; z-index: 1; } @media screen and (max-width: 767px) { main[data-template*='product'] .product-information, body.template-product .product-information { padding-inline: 16px !important; } main[data-template*='product'] .product-information__grid, body.template-product .product-information__grid { row-gap: 14px; } main[data-template*='product'] .product-information__grid .breadcrumb, body.template-product .product-information__grid .breadcrumb { margin: 0; grid-column: 1 / -1; } main[data-template*='product'] .product-information__media, body.template-product .product-information__media { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0; padding-inline: 0; } main[data-template*='product'] .product-information__media .media-gallery, main[data-template*='product'] .product-information__media media-gallery, body.template-product .product-information__media .media-gallery, body.template-product .product-information__media media-gallery { width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; } main[data-template*='product'] .product-information__media .media-gallery--extend, body.template-product .product-information__media .media-gallery--extend { width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; } main[data-template*='product'] .product-information__media img, main[data-template*='product'] .product-information__media video, body.template-product .product-information__media img, body.template-product .product-information__media video { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } main[data-template*='product'] .product-details, body.template-product .product-details { grid-column: 1 / -1; padding-inline: 0 !important; text-align: left; } main[data-template*='product'] .product-details > .group-block, body.template-product .product-details > .group-block { width: 100% !important; margin-inline: 0 !important; } main[data-template*='product'] .product-details .group-block-content, body.template-product .product-details .group-block-content { align-items: flex-start !important; text-align: left; } main[data-template*='product'] .product-details .text-block.rte, body.template-product .product-details .text-block.rte { align-items: flex-start !important; width: 100% !important; } main[data-template*='product'] .product-details .text-block.rte > *, body.template-product .product-details .text-block.rte > * { width: 100% !important; max-width: 100% !important; text-align: left !important; } main[data-template*='product'] .product-details .text-block.rte ul, body.template-product .product-details .text-block.rte ul { margin: 0 !important; padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; } main[data-template*='product'] .product-details .text-block.rte li, body.template-product .product-details .text-block.rte li { position: relative !important; padding-left: 32px !important; /* text starts after custom marker */ margin-left: 0 !important; font-size: 0.95em; line-height: 1.45; } main[data-template*='product'] .product-details .text-block.rte li::before, body.template-product .product-details .text-block.rte li::before { content: '\2022'; position: absolute; left: 16px; /* marker inset from section left */ top: 0; line-height: 1.45; } /* Strong fallback for any details list structure in product details */ main[data-template*='product'] .product-details :is(ul, ol), body.template-product .product-details :is(ul, ol) { margin: 0 !important; padding-left: 0 !important; list-style: none !important; } main[data-template*='product'] .product-details :is(ul, ol) > li, body.template-product .product-details :is(ul, ol) > li { position: relative !important; padding-left: 32px !important; margin-left: 0 !important; } main[data-template*='product'] .product-details :is(ul, ol) > li::before, body.template-product .product-details :is(ul, ol) > li::before { content: '\2022' !important; position: absolute; left: 16px !important; top: 0; line-height: inherit; } main[data-template*='product'] .product-details .text-block.rte p.vp-bullet-line, .product-information .product-details .text-block.rte p.vp-bullet-line, body.template-product .product-details .text-block.rte p.vp-bullet-line { position: relative !important; padding-left: 32px !important; /* text starts after custom marker */ margin-left: 0 !important; } main[data-template*='product'] .product-details .text-block.rte p.vp-bullet-line::before, .product-information .product-details .text-block.rte p.vp-bullet-line::before, body.template-product .product-details .text-block.rte p.vp-bullet-line::before { content: '\2022'; position: absolute; left: 16px; /* marker inset from section left */ top: 0; line-height: inherit; } /* Fallback: enforce the same bullet alignment for any RTE list in product information. */ main[data-template*='product'] .product-information .rte ul, body.template-product .product-information .rte ul { margin: 0 !important; padding-left: 0 !important; list-style: none !important; } main[data-template*='product'] .product-information .rte li, body.template-product .product-information .rte li { position: relative !important; padding-left: 32px !important; margin-left: 0 !important; } main[data-template*='product'] .product-information .rte li::before, body.template-product .product-information .rte li::before { content: '\2022' !important; position: absolute; left: 16px !important; top: 0; line-height: inherit; } main[data-template*='product'] .product-details h1, main[data-template*='product'] .product-details .h1, body.template-product .product-details h1, body.template-product .product-details .h1 { margin-top: 22px !important; } /* Final mobile bullet alignment override for product information details. Keeps the bullet marker and text inset from the left edge consistently. */ .product-information .rte ul, .product-information .rte ol { list-style-position: inside !important; list-style-type: disc !important; padding-left: 16px !important; margin-left: 0 !important; } .product-information .rte li { padding-left: 0 !important; margin-left: 0 !important; } .product-information .rte li::before { content: none !important; display: none !important; } } @media screen and (max-width: 767px) { main[data-template*='product'] .product-details h1, main[data-template*='product'] .product-details .h1, body.template-product .product-details h1, body.template-product .product-details .h1 { font-size: clamp(2.1rem, 8vw, 2.5rem) !important; line-height: 1.12 !important; margin-top: 14px !important; } main[data-template*='product'] .product-details .vp-root, body.template-product .product-details .vp-root { --vp-btn-height: 40px !important; --vp-btn-text-size: 11px !important; --vp-btn-caret-size: 8px !important; --vp-btn-caret-right: 10px !important; } main[data-template*='product'] .product-details .text-block.rte, body.template-product .product-details .text-block.rte { font-size: 0.9rem !important; line-height: 1.4 !important; } main[data-template*='product'] .product-details .text-block.rte strong, body.template-product .product-details .text-block.rte strong { font-size: 1rem !important; font-weight: 600 !important; } main[data-template*='product'] .product-details .vp-mode-popup .vp-btn, body.template-product .product-details .vp-mode-popup .vp-btn { letter-spacing: 0.05em !important; } main[data-template*='product'] .product-details .product-form__submit, main[data-template*='product'] .product-details button[name='add'], main[data-template*='product'] .product-details .add-to-cart-button, body.template-product .product-details .product-form__submit, body.template-product .product-details button[name='add'], body.template-product .product-details .add-to-cart-button { min-height: 40px !important; height: 40px !important; font-size: 0.95rem !important; font-weight: 600 !important; padding-block: 0 !important; } main[data-template*='product'] .product-details .product-form__submit .add-to-cart-text, main[data-template*='product'] .product-details .product-form__submit .add-to-cart-text__content, main[data-template*='product'] .product-details button[name='add'] .add-to-cart-text, main[data-template*='product'] .product-details button[name='add'] .add-to-cart-text__content, body.template-product .product-details .product-form__submit .add-to-cart-text, body.template-product .product-details .product-form__submit .add-to-cart-text__content, body.template-product .product-details button[name='add'] .add-to-cart-text, body.template-product .product-details button[name='add'] .add-to-cart-text__content { font-weight: 600 !important; } } .product-information .product-details .text-block.rte.vp-details-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 8px; align-items: start; } .product-information .product-details .text-block.rte.vp-details-layout > .vp-col-desc { grid-column: 1; grid-row: 1 / span 2; } .product-information .product-details .text-block.rte.vp-details-layout > .vp-col-details-heading { grid-column: 2; grid-row: 1; margin-bottom: 0 !important; } .product-information .product-details .text-block.rte.vp-details-layout > .vp-col-features { grid-column: 2; grid-row: 2; margin-top: 0 !important; } @media screen and (max-width: 749px) { .product-information .product-details .text-block.rte.vp-details-layout { column-gap: 12px; row-gap: 6px; } } .vp-floating-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; /* top of everything */ } .vp-floating-layer .vp-panel{ pointer-events: auto; } /* Match Add to Cart button style with previous Login button style */ main[data-template*='product'] .product-details .product-form__submit.button-secondary, body.template-product .product-details .product-form__submit.button-secondary, main[data-template*='product'] .product-details button[name='add'].button-secondary, body.template-product .product-details button[name='add'].button-secondary, main[data-template*='product'] .product-details form[action*='/cart/add'] button[name='add'], body.template-product .product-details form[action*='/cart/add'] button[name='add'] { width: 100% !important; min-height: 0 !important; border-radius: 4px !important; padding: 0px 0px !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: 1px !important; text-transform: none !important; line-height: 1.1 !important; } @media screen and (min-width: 750px) { main[data-template*='product'] .product-details .product-form__submit.button-secondary, body.template-product .product-details .product-form__submit.button-secondary, main[data-template*='product'] .product-details button[name='add'].button-secondary, body.template-product .product-details button[name='add'].button-secondary, main[data-template*='product'] .product-details form[action*='/cart/add'] button[name='add'], body.template-product .product-details form[action*='/cart/add'] button[name='add'] { padding: 11px 18px !important; min-height: 44px !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; border-radius: 6px !important; } } /* END_SECTION:product-information */ /* START_SECTION:product-list (INDEX:37) */ @media screen and (max-width: 767px) { .ui-test-product-list .section-resource-list { padding-inline: 12px !important; } .ui-test-product-list .section-resource-list__header, .ui-test-product-list .section-resource-list__content, .ui-test-product-list .section-resource-list :is(.text-block, .text-block > *) { max-width: 100%; } } /* END_SECTION:product-list */ /* START_SECTION:product-recommendations (INDEX:38) */ .product-recommendations__skeleton-item { aspect-ratio: 3 / 4; background-color: var(--color-foreground); opacity: var(--skeleton-opacity); border-radius: 4px; } @media screen and (max-width: 749px) { .product-recommendations__skeleton-item:nth-child(2n + 1) { display: none; } } product-recommendations:has([data-has-recommendations='false']) { display: none; } /* END_SECTION:product-recommendations */ /* START_SECTION:split-info-banner (INDEX:45) */ /* Make this section full width (escapes theme container padding) */ .split-info-banner{ grid-column: 1 / -1; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; overflow-x: clip; overflow-y: hidden; } .split-info-banner__inner{ width: 100%; max-width: 100%; } /* .split-info-banner__media{ position: relative; overflow: hidden; padding-right: 0 !important; margin-right: 0 !important; } */ /* Recreate Dawn-like spacing ONLY for the left text side */ .split-info-banner__content{ padding-left: 1.5rem; padding-right: 1.5rem; } @media screen and (min-width: 750px){ .split-info-banner__content{ padding-left: 5rem; padding-right: 5rem; } } .split-info-banner { position: relative; } .split-info-banner__inner { height: 100%; } .split-info-banner__grid { display: grid; gap: 32px; align-items: stretch; height: 100%; width: 100%; } .split-info-banner__grid--image-fill { height: 100%; } .split-info-banner__content { display: flex; flex-direction: column; justify-content: center; } .split-info-banner__buttons { display: flex; flex-wrap: wrap; gap: 12px; } .split-info-banner__button { display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; } .split-info-banner__media { position: relative; overflow: hidden; justify-self: stretch; } .split-info-banner__media--fill { height: 100%; } /* Default (natural look like your 2nd screenshot) */ .split-info-banner__image { width: 100%; height: auto; /* ✅ key: don’t force 100% height */ display: block; object-fit: contain; /* ✅ show full image (no zoom/crop) */ } /* Only when "fill-height" is selected — show full image (no zoom/crop) */ .split-info-banner__media--fill .split-info-banner__image { width: 100%; height: 100%; object-fit: contain; /* ✅ no zoom */ object-position: center; } @media screen and (min-width: 768px) { .split-info-banner { padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; min-height: 0 !important; } .split-info-banner__inner { height: 100% !important; } .split-info-banner__grid { gap: 0 !important; height: 100% !important; min-height: clamp(360px, 42vw, 540px) !important; align-items: stretch !important; } .split-info-banner__media { padding: 0 !important; margin: 0 !important; height: 100% !important; min-height: 100% !important; display: flex; align-items: stretch; justify-content: stretch; } .split-info-banner__media picture { display: block !important; width: 100% !important; height: 100% !important; } .split-info-banner__image { width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center !important; } .split-info-banner__content > *:first-child { margin-top: 0 !important; } .split-info-banner__content > *:last-child { margin-bottom: 0 !important; } } @media screen and (max-width: 767px) { .split-info-banner__grid { grid-template-columns: 1fr !important; gap: 24px; } .split-info-banner__media { order: -1; /* image on top for mobile */ } } @media screen and (max-width: 767px) { .split-info-banner { padding-inline: 0 !important; padding-top: 0 !important; padding-bottom: 24px !important; } .split-info-banner__inner { padding-inline: 0; } .split-info-banner__grid { gap: 16px; grid-template-columns: 1fr !important; } .split-info-banner__content { padding: 22px 24px 24px !important; } .split-info-banner__heading { font-size: 36px !important; line-height: 1.2 !important; font-weight: 500 !important; text-align: left !important; margin-bottom: 10px !important; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap !important; word-break: normal !important; } .split-info-banner__body { font-size: 0.95rem !important; line-height: 1.55 !important; overflow-wrap: anywhere; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; margin-top: 2px !important; margin-bottom: 20px !important; } .split-info-banner__media { padding: 0 !important; margin-inline: 0 !important; border-radius: 0 !important; } .split-info-banner__image { width: 100% !important; border-radius: 0 !important; } .split-info-banner__buttons { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0px; } .split-info-banner__button { width: 100%; min-height: 38px; margin: 0 !important; padding: 5px 16px !important; border-radius: 8px !important; font-size: 0.92rem !important; letter-spacing: 0.01em; } } /* END_SECTION:split-info-banner */ /* CSS from block stylesheet tags */ /* START_BLOCK:_accordion-row (INDEX:48) */ .details__icon { height: auto; margin-inline-end: var(--margin-xs); } /* END_BLOCK:_accordion-row */ /* START_BLOCK:_announcement (INDEX:49) */ .text-block { width: var(--width); max-width: 100%; } .text-block > * { width: var(--width); max-width: var(--max-width, 100%); text-align: var(--text-align); } .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:_blog-post-card (INDEX:50) */ .blog-post-card { display: flex; flex-direction: column; text-align: var(--text-align); } .blog-post-card__content { padding-block-start: 0.4rem; display: flex; flex-direction: column; } .blog-post-item .blog-post-card__image-container, .blog-post-item .blog-post-card__content { width: 100%; } .blog-post-item:first-child .blog-post-card { flex-direction: row; @media screen and (max-width: 749px) { flex-direction: column; } } .blog-post-item:first-child .blog-post-card__image-container { width: 70%; @media screen and (max-width: 749px) { width: 100%; } } .blog-post-item:first-child:has(.blog-post-card__image-container) .blog-post-card__content { padding-inline-start: var(--columns-gap); width: 30%; @media screen and (max-width: 749px) { padding-inline-start: 0; width: 100%; } } .blog-post-card__content a { display: block; text-wrap: pretty; text-decoration: none; padding-block-start: 0.75rem; } .blog-post-card__content a:hover, .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] { color: var(--color-primary-hover); } .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] { color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text)); } .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } /* END_BLOCK:_blog-post-card */ /* START_BLOCK:_blog-post-content (INDEX:51) */ .blog-post-content { max-width: var(--normal-content-width); margin: 0 auto; } /* END_BLOCK:_blog-post-content */ /* START_BLOCK:_blog-post-description (INDEX:52) */ .blog-post-card__content-text a { color: var(--color-primary); } .custom-color, .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) { color: var(--color); } /* END_BLOCK:_blog-post-description */ /* START_BLOCK:_blog-post-featured-image (INDEX:53) */ .blog-post-featured-image { --width: 100%; --custom-width: 100%; display: block; position: relative; width: var(--width); } .blog-post-featured-image.size-style { --width: var(--size-style-width, 100%); } .blog-post-featured-image--height-fit { height: fit-content; } .blog-post-featured-image--height-fill { height: 100%; } .blog-post-featured-image__image { aspect-ratio: var(--ratio); width: 100%; height: 100%; object-fit: cover; object-position: center center; } @media screen and (max-width: 749px) { .blog-post-featured-image { --width: var(--width-mobile, var(--width)); --custom-width: var(--custom-width-mobile, var(--custom-width)); } .blog-post-featured-image.size-style { --width: var(--size-style-width-mobile, var(--size-style-width, 100%)); } } /* END_BLOCK:_blog-post-featured-image */ /* START_BLOCK:_blog-post-image (INDEX:54) */ .blog-post-card__image { width: 100%; object-fit: cover; object-position: center center; height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale)); } .blog-post-card__image--small { --blog-post-card-img-height: 280px; } .blog-post-card__image--medium { --blog-post-card-img-height: 340px; } .blog-post-card__image--large { --blog-post-card-img-height: 400px; } /* END_BLOCK:_blog-post-image */ /* START_BLOCK:_blog-post-info-text (INDEX:55) */ .blog-post-details { display: flex; gap: var(--gap-sm); font-size: var(--font-paragraph-size); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); white-space: nowrap; flex-wrap: wrap; } .blog-post-details > span { text-overflow: clip; overflow: hidden; } /* END_BLOCK:_blog-post-info-text */ /* START_BLOCK:_cart-products (INDEX:56) */ /* ========================================================= EQUAL TOP/BOTTOM SPACING AROUND DIVIDERS ========================================================= */ .cart-products-block :is( .cart-item, .cart-items__item, .cart-items__row, .cart-items__product, .cart-items__line-item ){ margin: 0 !important; padding-block: var(--cart-prod-row-pad-y, 16px) !important; border: 0; } .cart-products-block[data-dividers="true"] :is( .cart-item, .cart-items__item, .cart-items__row, .cart-items__product, .cart-items__line-item ):not(:last-child){ border-bottom: var(--cart-prod-divider-thickness, 1px) solid currentColor !important; } .cart-products-block :is( .cart-items__header, .cart-items__head, .cart-items__thead, .cart-items__header-row ){ margin: 0 !important; padding-block: var(--cart-prod-header-pad-y, 16px) !important; border: 0; } .cart-products-block[data-dividers="true"] :is( .cart-items__header, .cart-items__head, .cart-items__thead, .cart-items__header-row ){ border-bottom: var(--cart-prod-divider-thickness, 1px) solid currentColor !important; } .cart-products-block[data-dividers="false"] :is( .cart-item, .cart-items__item, .cart-items__row, .cart-items__product, .cart-items__line-item, .cart-items__wrapper, .cart-items__items, .cart-items__header, .cart-items__head, .cart-items__thead, .cart-items__header-row ){ border: 0 !important; } /* ========================================================= ✅ QUANTITY: make it smaller + centered under QUANTITY header ========================================================= */ /* Make the QUANTITY column center aligned (table + non-table themes) */ .cart-products-block :is( .cart-items__header [data-label="QUANTITY"], .cart-items__header .cart-items__header-quantity, .cart-items__header .cart-items__quantity, th.quantity, th[data-label*="Quantity" i] ){ text-align: center !important; } /* Center the quantity control container */ .cart-products-block :is( .cart-item__quantity, .cart-items__quantity, .cart-item__quantity-wrapper, .cart-items__quantity-wrapper, td.quantity, td[data-label*="Quantity" i] ){ text-align: center !important; } /* Force the quantity widget to be smaller */ .cart-products-block :is( .quantity, .quantity-input, .cart-item__quantity .quantity, .cart-items__quantity .quantity ){ width: 48px !important; /* ✅ decrease width here */ min-width: 48px !important; max-width: 48px !important; margin-inline: auto !important; /* ✅ center */ display: inline-flex !important; justify-content: center !important; } /* Make +/- buttons smaller so total width stays tight */ .cart-products-block :is( .quantity__button, button.quantity__button ){ width: 24px !important; min-width: 24px !important; padding: 0 !important; } /* Keep input compact */ .cart-products-block :is( .quantity__input, input.quantity__input ){ width: 32px !important; min-width: 32px !important; padding: 0 !important; text-align: center !important; } /* Your existing styles */ .cart-page--empty .cart-items__wrapper { display: flex; flex-direction: column; align-items: center; margin-block-start: 0; text-align: center; } .cart-page__title + .cart-page__items { margin-block-start: var(--margin-lg); } /* ========================================================= ✅ FORCE quantity control smaller (Dawn + most themes) Put at the END so it overrides everything ========================================================= */ /* 1) Target the actual quantity element (often in Shopify) */ .cart-products-block :is( quantity-input.quantity, .quantity, .quantity-input ){ width: 70px !important; /* ✅ total box width */ min-width: 70px !important; max-width: 70px !important; margin-inline: auto !important; display: flex !important; align-items: center !important; } /* 2) Shrink +/- buttons */ .cart-products-block :is( quantity-input .quantity__button, .quantity .quantity__button, .quantity__button ){ width: 18px !important; min-width: 18px !important; height: 28px !important; /* adjust if you want smaller height */ padding: 0 !important; } /* 3) Shrink the number input and allow it to flex */ .cart-products-block :is( quantity-input .quantity__input, .quantity .quantity__input, .quantity__input, input.quantity__input ){ width: auto !important; min-width: 0 !important; flex: 1 1 auto !important; text-align: center !important; padding: 0 !important; height: 28px !important; line-height: 28px !important; font-size: 12px !important; /* ✅ smaller number */ } /* 4) Shrink SVG icons inside +/- */ .cart-products-block :is( quantity-input .quantity__button svg, .quantity .quantity__button svg, .quantity__button svg ){ width: 10px !important; height: 10px !important; } /* 5) Center the whole quantity column (cell/wrapper) */ .cart-products-block :is( .cart-item__quantity, .cart-items__quantity, td.quantity, td[data-label*="Quantity" i] ){ text-align: center !important; } /* END_BLOCK:_cart-products */ /* START_BLOCK:_cart-summary (INDEX:57) */ /* ========================================================= IMPORTANT FIX: Keep the summary card in ROW 2 (same row as items), so the left cart items DO NOT get pushed down. ========================================================= */ @media screen and (min-width: 750px) { .cart-page__summary { align-self: stretch; align-content: start; } .cart-page__summary .cart__summary-container { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; align-self: stretch; justify-self: end; } /* ✅ key: inner starts from ROW 2 (not row 1) */ .cart-page__summary .cart__summary-container .cart__summary-inner { grid-row: 2 / -1; } } /* ========================================================= Card size (small like your reference) ========================================================= */ .cart-page__summary .cart__summary-container { width: min(100%, var(--cart-summary-card-width-mobile, 360px)); justify-self: end; align-self: start; } @media screen and (min-width: 750px) { .cart-page__summary .cart__summary-container { width: min(100%, var(--cart-summary-card-width-desktop, 420px)); } } /* ✅ NEW: radius (controlled by block setting border_radius) */ .cart-page__summary .cart__summary-container.has-border-radius{ border-radius: var(--cart-summary-card-radius, 18px) !important; overflow: hidden; /* ensures corners clip */ } /* (optional) also round the background layer if theme uses one */ .cart-page__summary .cart__summary-container.has-border-radius .cart__summary-inner{ border-radius: inherit; } .cart-page__summary .cart__summary-inner { display: flex; flex-direction: column; gap: var(--gap-md); container-type: inline-size; padding: var(--cart-summary-pad-mobile, 18px); width: 100%; min-height: var(--cart-summary-card-min-height, 0px); max-height: var(--cart-summary-card-max-height); overflow: auto; position: sticky; top: 0; align-self: start; } @media screen and (min-width: 750px) { .cart-page__summary .cart__summary-inner { padding: var(--cart-summary-pad-desktop, 28px); top: var(--header-height, 0); } } body:has(> #header-group .header[sticky]) .cart-page__summary .cart__summary-inner { top: var(--header-height, 0); } /* ========================================================= One-line rows + spacing after subtotal ========================================================= */ .cart-page__summary .cart__summary-item { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); width: 100%; } .cart-page__summary .cart__summary-lines .cart__summary-item:first-child { margin-bottom: var(--cart-summary-after-subtotal, 6px); } .cart-page__summary .cart__summary-label { font-size: var(--cart-summary-label-size, 13px); font-weight: var(--cart-summary-label-weight, 400); } .cart-page__summary .cart__summary-value, .cart-page__summary .cart__summary-value.cart-secondary-typography { font-size: var(--cart-summary-value-size, 13px); font-weight: var(--cart-summary-value-weight, 400); text-align: right; white-space: nowrap; } .cart-page__summary .cart__total-label { font-size: var(--cart-summary-total-label-size, 14px); font-weight: var(--cart-summary-total-label-weight, 600); } .cart-page__summary .cart__total-value { font-size: var(--cart-summary-total-value-size, 16px); font-weight: var(--cart-summary-total-value-weight, 700); white-space: nowrap; } /* ========================================================= ONLY ONE divider (after shipping) + color #235160 ========================================================= */ .cart-page__summary .cart__summary-divider { border-top-style: solid; border-top-color: var(--cart-summary-divider-color, #235160); border-top-width: calc(var(--cart-summary-divider-tenths, 10) * 0.1px); margin-block: 20px; /* increase/decrease this */ width: 100%; } /* remove any extra theme lines */ .cart-page__summary .cart__summary-totals::before, .cart-page__summary .cart__summary-totals::after { content: none !important; display: none !important; } .cart-page__summary .cart-actions, .cart-page__summary .cart-actions__divider { border: 0 !important; display: none !important; } /* ========================================================= Button controls ========================================================= */ .cart-page__summary .cart__ctas { width: 100%; } .cart-page__summary .cart__checkout-button { font-size: var(--cart-summary-btn-font-size, 14px) !important; font-weight: var(--cart-summary-btn-font-weight, 600) !important; padding: var(--cart-summary-btn-pad-y, 12px) var(--cart-summary-btn-pad-x, 18px) !important; border-radius: var(--cart-summary-btn-radius, 6px) !important; min-height: var(--cart-summary-btn-min-height, 44px) !important; width: 100%; } .additional-checkout-buttons { display: none !important; } @media screen and (max-width: 767px) { .cart-page__summary .cart__summary-container { width: 100%; justify-self: stretch; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } .cart-page__summary .cart__summary-inner { position: static; top: auto; padding: 6px 0 0; min-height: 0; max-height: none; overflow: visible; gap: 8px; background: transparent !important; box-shadow: none !important; border: 0 !important; } } /* END_BLOCK:_cart-summary */ /* START_BLOCK:_cart-title (INDEX:58) */ .cart-title h1 { margin-block-end: 0; display: inline-flex; align-items: center; gap: var(--gap-sm); } .cart-title .cart-bubble { width: fit-content; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--style-border-radius-buttons-primary); aspect-ratio: auto; padding: var(--cart-padding); } .cart-title .cart-bubble[data-maintain-ratio] { aspect-ratio: 1; min-width: 26px; } .cart-title .cart-bubble__background { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } .cart-title .cart-bubble__text { color: var(--color-foreground); font-family: var(--font-paragraph--family); font-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs)); } /* END_BLOCK:_cart-title */ /* START_BLOCK:_collection-image (INDEX:61) */ .collection-image { width: var(--image-width); } .collection-image .collection-image__featured-image { aspect-ratio: var(--ratio); object-fit: cover; } /* END_BLOCK:_collection-image */ /* START_BLOCK:_collection-link (INDEX:63) */ .collection-links__link { --min-font-size: var(--font-size--4xl); --max-font-size: var(--font-size--6xl); display: flex; color: inherit; text-decoration: none; text-wrap: pretty; font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size)); @media (hover: hover) { opacity: var(--disabled-opacity); } [layout='spotlight'] & { opacity: var(--disabled-opacity); } &[aria-current='true'] { opacity: 1; } .text-block { display: inline-block; } @media (max-width: 749px) { --min-font-size: var(--font-size--3xl); --max-font-size: var(--font-size--5xl); [layout='spotlight'] & { white-space: normal; scroll-snap-align: start; text-wrap: pretty; span { text-wrap: pretty; } } } } .collection-links__count { font-size: 0.5em; opacity: var(--disabled-opacity); font-weight: var(--font-paragraph--weight); } .collection-links__image { align-items: center; justify-content: center; &:not([hidden]) { display: flex; } &[reveal] { --offset: 15px; position: fixed; top: 0; left: 0; z-index: var(--layer-temporary); display: block; translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset)); pointer-events: none; width: auto; image-block { --image-height-basis: 5rem; height: var(--image-height); } } } /* END_BLOCK:_collection-link */ /* START_BLOCK:_featured-blog-posts-card (INDEX:67) */ .featured-blog-posts-card { width: 100%; position: relative; text-align: var(--text-align); } .featured-blog-posts-card__inner { width: 100%; overflow: hidden; position: relative; gap: var(--gap); display: flex; flex-direction: column; height: 100%; z-index: var(--layer-flat); pointer-events: none; } .resource-list--grid .resource-list__item { min-width: 0; } /* Editorial layout */ .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { height: 100%; .featured-blog-posts-card__image, .blog-placeholder-svg { aspect-ratio: 99; height: 100%; } .featured-blog-posts-card__content { flex-shrink: 0; height: auto; } } @media (max-width: 768px) { .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { .featured-blog-posts-card__image, .blog-placeholder-svg { aspect-ratio: unset; } } } .featured-blog-posts-card__inner a, .featured-blog-posts-card__inner button { pointer-events: auto; } /* allow all blocks to be selectable in editor preview */ .shopify-design-mode .featured-blog-posts-card__content * { pointer-events: auto; } .featured-blog-posts-card__content { position: relative; display: flex; height: 100%; width: 100%; gap: var(--gap); flex-direction: column; align-items: var(--horizontal-alignment); } .featured-blog-posts-card__link { position: absolute; inset: 0; border-radius: var(--border-radius); } .featured-blog-posts-card__content h4 { margin: 0; } /* END_BLOCK:_featured-blog-posts-card */ /* START_BLOCK:_featured-blog-posts-image (INDEX:68) */ .featured-blog-posts-card__image { width: 100%; } .featured-blog-posts-card__image .blog-placeholder-svg { object-fit: cover; width: 100%; height: 100%; } /* END_BLOCK:_featured-blog-posts-image */ /* START_BLOCK:_featured-product (INDEX:72) */ .featured-product-content-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); } .featured-product-content-bottom:not(:has(product-swatches)) { display: none; } /* END_BLOCK:_featured-product */ /* START_BLOCK:_footer-social-icons (INDEX:73) */ .social-icons__wrapper { display: flex; gap: var(--gap-sm); flex-wrap: wrap; justify-content: center; @media screen and (min-width: 750px) { flex-wrap: nowrap; justify-content: flex-start; } } /* END_BLOCK:_footer-social-icons */ /* START_BLOCK:_header-logo (INDEX:74) */ .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; /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */ margin-inline: calc(-1 * var(--padding-inline-start)); &[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; justify-self: center !important; margin-inline: auto !important; text-align: center; } @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:75) */ .menu-list--mobile { &.menu-list { display: grid; } & .menu-list__list { width: max-content; margin-inline: auto; gap: var(--menu-horizontal-gap); } & li { width: max-content; padding-block: var(--padding-sm); } & li:first-of-type { padding-inline-start: var(--menu-horizontal-gap); } & li:last-of-type { padding-inline-end: var(--menu-horizontal-gap); } & a { color: var(--color-foreground); } } .menu-list__scroll-container { position: relative; overflow-x: auto; mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent); padding-block: var(--padding-2xs); } header-menu { width: 100%; } /* Drawer menu featured content */ .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-list { --menu-horizontal-gap: var(--gap-xl); --menu-vertical-gap: var(--gap-xl); display: flex; } .menu-list__list { display: flex; justify-content: var(--grid-area-alignment); } .menu-list__list-item { flex-shrink: 0; white-space: nowrap; } .menu-list__list-item[aria-hidden='true'] { visibility: hidden; } .menu-list__link { 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); transition: color var(--animation-speed) var(--animation-easing); text-decoration: none; display: flex; min-height: var(--minimum-touch-target); align-items: center; &:hover, &:focus { color: var(--menu-top-level-font-color); } @media screen and (min-width: 750px) { font-size: var(--menu-top-level-font-size-desktop); } } /* High specificity selectors to subdue non-hovered links without javascript. If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these. */ .menu-list:where(:has(.menu-list__list-item:hover)), .menu-list:where(:has(.menu-list__list-item:focus-within)), .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) { .menu-list__link { color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text)); } } /* stylelint-disable-next-line selector-max-specificity */ .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active, .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link, .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] { color: var(--menu-top-level-font-color); } .overflow-menu::part(list) { /* Make sure focus outline is not cut off by overflow hidden */ --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width)); gap: 0 var(--menu-horizontal-gap); } .overflow-menu { background-color: transparent; padding: var(--focus-outline-size); margin: calc(-1 * var(--focus-outline-size)); } /* the submenu background element to animate */ .overflow-menu::after { content: ''; position: absolute; top: calc(100% - 1px + var(--border-bottom-width)); left: 0; width: 100%; height: var(--submenu-height); background-color: var(--color-background); box-shadow: var(--shadow-popover); clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */ opacity: var(--submenu-opacity, 1); transition: height var(--submenu-animation-speed) var(--ease-out-cubic), opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast); z-index: calc(var(--layer-header-menu) - 1); } /** mega menu **/ .menu-list__submenu, .overflow-menu::part(overflow) { --submenu-padding-block-start: var(--padding-3xl); --submenu-padding-block-end: var(--padding-3xl); background-color: transparent; } .header__row[style*='--border-bottom-width: 0px'] { .menu-list__submenu.color-scheme-matches-parent, .overflow-menu.color-scheme-matches-parent::part(overflow) { --submenu-padding-block-start: 0px; } } .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu, .overflow-menu::part(overflow) { --submenu-content-opacity: 0; --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing); box-shadow: var(--shadow-drawer); visibility: hidden; background-color: var(--color-background); position: absolute; width: 100%; left: 0; top: calc(100% - 1px + var(--border-bottom-width)); z-index: var(--layer-header-menu); padding-inline: var(--padding-inline); clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */ transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); } /* Show the submenus on hover */ .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu, /* Show the overflow menu when a menu item is hovered */ .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow), /* Keep the submenus open when they are hovered */ .menu-list__submenu:is(:hover), .overflow-menu::part(overflow):hover { --submenu-content-opacity: 1; visibility: visible; } .menu-list__list-item:has([data-animating]) > .menu-list__submenu { --submenu-content-opacity: 0; visibility: visible; &::before { height: 0; } } .menu-list__submenu-inner, .overflow-menu::part(overflow-list) { grid-column: 2; padding-block-start: var(--submenu-padding-block-start); padding-block-end: var(--submenu-padding-block-end); padding-inline: var(--section-padding-inline); } .overflow-menu::part(overflow) { --menu-top-level-font-size: var(--font-size--xlarge); display: grid; grid-template-columns: var(--full-page-grid-with-margins); } .overflow-menu::part(overflow-list) { --submenu-content-opacity: 0; position: relative; display: grid; grid-template-columns: minmax(auto, 200px) 1fr; grid-template-areas: 'left right'; grid-template-rows: max-content; grid-gap: 0; } /* Make overflow menu scrollable when content exceeds viewport */ .menu-list__submenu-inner, .overflow-menu::part(overflow-list) { max-height: calc(80vh - var(--header-height)); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent; } .menu-list__list-item:is([slot='overflow']) { --menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb); display: contents; white-space: normal; .menu-list__link { --submenu-content-opacity: 0; grid-area: left; grid-row: auto; height: min-content; font-size: var(--font-size--xl); opacity: var(--submenu-content-opacity); transition: var(--submenu-content-animation); } .menu-list__submenu { visibility: hidden; grid-row: 1; grid-area: right; grid-row-end: span calc(var(--overflow-count) + 1); padding-inline-start: var(--menu-horizontal-gap); .menu-list__submenu-inner { padding-block-start: 0; grid-column: unset; } } .menu-list__link[aria-expanded='true'] + .menu-list__submenu { visibility: visible; } } .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link { --submenu-content-opacity: 1; } .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link { --submenu-content-opacity: 0; } .menu-list__submenu-inner { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; opacity: var(--submenu-content-opacity); transition: var(--submenu-content-animation); } .mega-menu__link { 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); white-space: normal; text-decoration: none; display: inline-flex; padding: var(--padding-2xs) 0; transition: color var(--animation-speed) var(--animation-easing); &:hover { color: var(--menu-child-active-font-color); } } .mega-menu__link--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-active-font-color); } } @media screen and (max-width: 989px) { .mega-menu__content-list-item--hidden-tablet { display: none; } } .mega-menu__link:has(.mega-menu__link-image) { display: flex; flex-direction: column; padding-inline: 0; padding-block: var(--padding-sm) 0; } .mega-menu__link-image { width: 100%; position: relative; aspect-ratio: 16 / 9; margin-bottom: var(--padding-sm); object-fit: cover; border-radius: var(--menu-image-border-radius); } /* Fix alignment for collection image mode links without images */ /* Target only top-level links (direct children of column > div) in collection image mode */ .mega-menu__grid:has(.mega-menu__link-image) .mega-menu__column > div > .mega-menu__link:not(:has(.mega-menu__link-image)) { display: flex; flex-direction: column; padding-inline: 0; padding-block: var(--padding-sm) 0; } .mega-menu__grid:has(.mega-menu__link-image) .mega-menu__column > div > .mega-menu__link:not(:has(.mega-menu__link-image))::before { content: ''; display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--padding-sm); background-color: var(--color-foreground-muted); opacity: 0.1; border-radius: var(--menu-image-border-radius); } .mega-menu__grid { display: grid; grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr)); gap: var(--menu-vertical-gap) var(--menu-horizontal-gap); width: 100%; @media screen and (min-width: 990px) { grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr)); } } .mega-menu__column { grid-column: span 1; } .mega-menu__column--span-2 { grid-column: span 2; } .mega-menu__column--span-3 { grid-column: span 3; } .mega-menu__column--span-4 { grid-column: span 4; } .mega-menu__column--wide-collection-image { grid-column: span 1; @media screen and (min-width: 990px) { grid-column: span 2; } } .mega-menu__submenu .mega-menu__column--wide-collection-image { grid-column: span 1; } .mega-menu__content-list { display: grid; justify-content: end; gap: var(--menu-vertical-gap) var(--menu-horizontal-gap); } .mega-menu__content-list--products { grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr)); @media screen and (min-width: 990px) { grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr)); } } .mega-menu__content-list--collections { grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px)); @media screen and (min-width: 990px) { grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px)); } } .mega-menu__list { display: grid; grid-template-columns: subgrid; grid-column: span var(--menu-columns-tablet); gap: var(--menu-vertical-gap) var(--menu-horizontal-gap); @media screen and (min-width: 990px) { grid-column: span var(--menu-columns-desktop); } } .mega-menu__content { grid-column: span var(--menu-content-columns-tablet) / -1; @media screen and (min-width: 990px) { grid-column: span var(--menu-content-columns-desktop) / -1; } } .menu-list__list-item[slot='overflow'] .section { grid-template-columns: 1fr; } .menu-list__list-item[slot='overflow'] .section .mega-menu__grid { grid-column: 1; } .mega-menu__content-list li { white-space: normal; } /* mega more menu */ .mega-menu__more-list { --menu-child-font-size: var(--font-size--xl); width: 200px; } .mega-menu__more-list-item .mega-menu__link { color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text)); } .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link { color: var(--menu-top-level-font-color); } .mega-menu__more-list-item[aria-hidden='true'] { display: none; } .mega-menu__submenu { /* preserves the inherited grid layout when this submenu wrapper is used */ display: contents; } /* ================================ FIX: remove the full-width hover background keep only the dropdown box ================================ */ /* 1) Kill the big animated background layer that expands */ header-menu .overflow-menu::after { content: none !important; display: none !important; height: 0 !important; opacity: 0 !important; box-shadow: none !important; } /* 2) Make the popup submenu NOT full width (no extra backdrop) */ header-menu .menu-list__list-item { position: relative; } header-menu .menu-list__submenu--popup { background: transparent !important; box-shadow: none !important; width: max-content !important; min-width: 220px; /* adjust if you want */ left: 0 !important; padding-inline: 0 !important; clip-path: none !important; --submenu-padding-block-start: 0px; --submenu-padding-block-end: 0px; } /* 3) Put background + border ONLY on the dropdown box itself */ header-menu .menu-list__submenu--popup .menu-list__submenu-inner { padding: 10px 12px !important; background: var(--color-background); border: 1px solid rgb(var(--color-foreground-rgb) / 0.12); border-radius: 10px; box-shadow: var(--shadow-popover); max-height: none !important; overflow: visible !important; } /* END_BLOCK:_header-menu */ /* START_BLOCK:_image (INDEX:77) */ image-block { --image-height-basis: 10rem; --image-height-small: calc(var(--image-height-basis) * 2); --image-height-medium: calc(var(--image-height-basis) * 3); --image-height-large: calc(var(--image-height-basis) * 4); display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio); width: 100%; max-width: calc(var(--image-height) * var(--ratio)); height: var(--image-height); overflow: hidden; @media screen and (min-width: 750px) { --image-height-small: calc(var(--image-height-basis) * 2.5); --image-height-medium: calc(var(--image-height-basis) * 3.5); --image-height-large: calc(var(--image-height-basis) * 4.5); } @media screen and (max-width: 749px) { height: auto; } &[height='small'] { --image-height: var(--image-height-small); } &[height='medium'] { --image-height: var(--image-height-medium); } &[height='large'] { --image-height: var(--image-height-large); } &[ratio='portrait'] { --ratio: 4 / 5; } &[ratio='square'] { --ratio: 1 / 1; @media screen and (min-width: 750px) { max-width: var(--image-height); } } &[ratio='landscape'] { --ratio: 16 / 9; } img { object-fit: cover; width: 100%; height: auto; aspect-ratio: var(--ratio); border-radius: var(--border-radius); } } /* END_BLOCK:_image */ /* START_BLOCK:_marquee (INDEX:80) */ marquee-component { display: block; width: 100%; overflow: hidden; background-color: var(--color-background); } .marquee__wrapper { display: flex; gap: var(--marquee-gap); width: fit-content; white-space: nowrap; } .marquee__content { min-width: max-content; display: flex; gap: var(--marquee-gap); } .marquee__content :is(p, h1, h2, h3, h4, h5, h6) { white-space: nowrap; } .marquee__content .marquee__repeated-items * { max-width: none; } .marquee__repeated-items { min-width: max-content; display: flex; gap: var(--marquee-gap); align-items: center; justify-content: center; } .marquee__repeated-items > * { align-content: center; } .hero__content-wrapper.layout-panel-flex--column marquee-component { --margin-inline: var(--full-page-margin-inline-offset); width: -webkit-fill-available; min-height: max-content; } @media (prefers-reduced-motion: no-preference) { marquee-component:not([data-disabled]) .marquee__wrapper { animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction); } } @keyframes marquee-motion { to { transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0); } } /* END_BLOCK:_marquee */ /* START_BLOCK:_product-details (INDEX:86) */ /* Clear padding on mobile, if not full-width */ @media screen and (max-width: 749px) { .product-information.section--page-width .product-details > .group-block { padding-inline: 0; } } .view-product-title { display: none; } /* Container styles */ .product-details { display: flex; align-self: start; justify-content: center; } @media screen and (min-width: 750px) { .product-details > .group-block { height: min-content; } .full-height--desktop { height: 100%; max-height: calc(100vh - var(--header-group-height, 0)); min-height: fit-content; } .full-height--desktop .group-block { align-self: var(--details-position, 'flex-start'); } } /* END_BLOCK:_product-details */ /* START_BLOCK:_product-media-gallery (INDEX:90) */ .dialog-zoomed-gallery { cursor: zoom-out; } .dialog--preloading { opacity: 0; } .product-media__drag-zoom-wrapper { aspect-ratio: inherit; min-height: inherit; min-width: inherit; display: inherit; flex: inherit; } @media screen and (max-width: 749px) { .dialog-zoomed-gallery { /* Prevent scroll wheel or swipe scrolling */ overscroll-behavior: none; scrollbar-width: none; display: flex; scroll-snap-type: x mandatory; overflow-x: hidden; scroll-behavior: smooth; height: 100%; &::-webkit-scrollbar { display: none; } } .dialog-zoomed-gallery .product-media-container { flex: 0 0 100%; scroll-snap-align: start; position: relative; } .dialog-zoomed-gallery .product-media-container--image .product-media { aspect-ratio: auto; height: 100%; width: 100%; overflow: hidden; } .dialog-zoomed-gallery .product-media-container--video, .dialog-zoomed-gallery .product-media-container--external_video { align-content: center; } .dialog-zoomed-gallery :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model) .product-media { aspect-ratio: auto; align-items: center; height: 100%; .product-media__image { height: 100%; } } .product-media__drag-zoom-wrapper { display: flex; aspect-ratio: auto; height: 100%; width: 100%; overflow: scroll; scrollbar-width: none; justify-content: center; &::-webkit-scrollbar { display: none; } } .product-media__drag-zoom-wrapper .product-media__image { --product-media-fit: contain; object-fit: var(--product-media-fit); overflow: hidden; transform: scale(var(--drag-zoom-scale)) translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0)); } .media-gallery--hint { --slideshow-gap: var(--gap-2xs); :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) { width: 90%; .product-media img { object-fit: cover; } } } } .dialog-zoomed-gallery__close-button { color: #fff; mix-blend-mode: difference; z-index: var(--layer-raised); } .media-gallery__mobile-controls { grid-area: auto; } .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image { cursor: zoom-out; } .product-media-container--zoomable.product-media-container--image { cursor: zoom-in; } .dialog-zoomed-gallery .product-media-container--video deferred-media, .dialog-zoomed-gallery .product-media-container--external_video deferred-media { height: auto; aspect-ratio: var(--ratio); } .dialog-zoomed-gallery .product-media-container--model .product-media__image { /* Make the height match the height of the model-viewer */ height: 100vh; } /* END_BLOCK:_product-media-gallery */ /* START_BLOCK:_search-input (INDEX:91) */ .search-page-input { width: 100%; color: var(--color-input-text); background-color: var(--color-input-background); padding-block: var(--padding-lg); padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5); text-overflow: ellipsis; overflow: hidden; border-radius: var(--style-border-radius-inputs); border: var(--style-border-width-inputs) solid var(--color-input-border); @media screen and (max-width: 749px) { padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md)); } } .search-page-input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); } .search-page-input__parent { display: flex; flex-direction: column; align-items: var(--horizontal-alignment); } .search-results__no-results { opacity: var(--opacity-subdued-text); } search-page-input-component { position: relative; width: 100%; display: flex; top: 0; max-width: var(--size-style-width); align-items: center; background-color: var(--color-background); margin: var(--margin-2xl) 0 var(--margin-md); @media screen and (max-width: 749px) { max-width: 100%; } } search-page-input-component .search__icon, search-page-input-component .search__icon:hover, search-page-input-component .search__reset-button, search-page-input-component .search__reset-button:hover { background: transparent; position: absolute; top: auto; width: var(--icon-size-lg); height: var(--icon-size-lg); } search-page-input-component .search__icon svg, search-page-input-component .search__reset-button svg { width: var(--icon-size-md); height: var(--icon-size-md); } search-page-input-component .search__icon svg { color: var(--color-input-text); } search-page-input-component .search__icon { left: var(--margin-lg); @media screen and (max-width: 749px) { left: var(--margin-md); } } search-page-input-component .search__reset-button { border-radius: 100%; color: var(--color-input-text); right: var(--margin-lg); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--animation-speed) var(--animation-easing), visibility var(--animation-speed) var(--animation-easing); @media screen and (max-width: 749px) { right: var(--margin-md); } } search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button { opacity: 1; visibility: visible; pointer-events: auto; } search-page-input-component .search__reset-button-icon { vertical-align: middle; display: flex; align-items: center; justify-content: center; width: var(--icon-size-lg); height: var(--icon-size-lg); transition: transform var(--animation-speed) var(--animation-easing); } search-page-input-component .search__reset-button:active .search__reset-button-icon { transform: scale(0.9); } search-page-input-component .search__reset-button-icon svg { width: var(--icon-size-md); height: var(--icon-size-md); } search-page-input-component .search__reset-button--hidden { cursor: default; opacity: 0; transition: opacity var(--animation-speed) var(--animation-easing); pointer-events: none; visibility: hidden; } search-page-input-component .search__reset-button-text { display: none; } /* END_BLOCK:_search-input */ /* START_BLOCK:_slide (INDEX:92) */ .slide__content { height: 100%; position: relative; z-index: var(--layer-flat); } .slide__content > * { margin: auto; } .slide__content.background-transparent { background-color: transparent; } slideshow-slide > .slide__image-container { display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; } .slide__image-container > placeholder-image, .slide__image-container > placeholder-image > img { width: 100%; } .slide__image-container > .slide__image, .slide__image-container > .slide__video, .slide__image-container > .slide__video-poster { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .slide__image-container > .slide__video-poster { position: absolute; } /* END_BLOCK:_slide */ /* START_BLOCK:_social-link (INDEX:93) */ .social-icons__icon-wrapper { display: flex; align-items: center; justify-content: center; height: var(--icon-size-lg); } .social-icons__icon { display: flex; fill: currentColor; flex-shrink: 0; width: var(--icon-size-lg); height: var(--icon-size-lg); } .social-icons__icon { display: none; } .social-icons__icon-wrapper:has(.social-icons__icon path) { width: var(--icon-size-lg); .social-icons__icon { display: block; } .social-icons__icon-label { display: none; } } /* Disabled state for editor */ .shopify-design-mode .social-icons__icon-wrapper--disabled { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .shopify-design-mode .social-icons__icon-wrapper--disabled a { pointer-events: none; } /* END_BLOCK:_social-link */ /* START_BLOCK:accelerated-checkout (INDEX:94) */ .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_BLOCK:accelerated-checkout */ /* START_BLOCK:accordion (INDEX:95) */ .accordion { flex: 1; width: 100%; } .accordion--dividers accordion-custom:not(:first-child) .details { border-block-start: var(--style-border-width) solid var(--color-border); } /* When accordion borders are not set, show fallback borders */ .accordion--dividers { /* stylelint-disable-next-line declaration-property-value-disallowed-list */ --show-fallback-borders: 0; } .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'], .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] { --show-fallback-borders: 1; } .accordion--dividers accordion-custom:first-child .details { border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border); } .accordion--dividers accordion-custom:last-child .details { border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border); } .accordion--dividers .details-content { padding-block-end: var(--padding-sm); } .accordion--caret .icon-plus, .accordion--plus .icon-caret { display: none; } /* because we can't pass apply a specific class on a block based on its parent block setting */ .accordion .details__header { font-family: var(--summary-font-family); font-style: var(--summary-font-style); font-weight: var(--summary-font-weight); font-size: var(--summary-font-size); line-height: var(--summary-font-line-height); text-transform: var(--summary-font-case); min-height: var(--minimum-touch-target); } /* END_BLOCK:accordion */ /* START_BLOCK:buy-buttons (INDEX:98) */ .buy-buttons-block { 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, .quantity-rules, .quantity-label) { flex: 1 1 185px; min-width: fit-content; } .product-form-buttons--stacked > *:not(.quantity-selector, .quantity-rules, .quantity-label) { flex-basis: 51%; /* Force the buttons to be on separate rows */ } .product-form-buttons button { width: 100%; padding-inline: var(--padding-4xl); padding-block: var(--padding-lg); } .quantity-selector { flex-grow: 0; flex-shrink: 0; height: var(--height-buy-buttons); } .product-form-buttons:has(.quantity-rules) .quantity-selector { margin-inline-end: var(--gap-sm); margin-block-end: var(--gap-sm); } .quantity-selector:has(+ .quantity-rules) { margin-block-end: 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-buttons .shopify-payment-button__button { width: 100%; min-height: var(--minimum-touch-target); } .product-form-text__error { display: flex; align-items: flex-start; gap: var(--gap-xs); margin-block-end: var(--gap-xs); } .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-2xl); } .quantity-rules__item { position: relative; display: inline-block; } .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; } .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)); } @media screen and (max-width: 767px) { main[data-template*='product'] { --vp-mobile-button-radius: 4px; } main[data-template*='product'] .vp-mode-popup .vp-btn { border-radius: var(--vp-mobile-button-radius) !important; } main[data-template*='product'] a.add-to-cart-button.button-secondary { border-radius: var(--vp-mobile-button-radius) !important; min-height: 40px !important; height: 40px !important; font-size: 0.85rem !important; font-weight: 600; letter-spacing: 0.02em; padding-inline: 14px !important; padding-block: 0 !important; } main[data-template*='product'] .product-form__submit, main[data-template*='product'] button[name='add'] { min-height: 40px !important; height: 40px !important; font-size: 0.85rem !important; padding-block: 0 !important; } } /* END_BLOCK:buy-buttons */ /* START_BLOCK:contact-form-submit-button (INDEX:101) */ .submit-button { min-width: max-content; } /* END_BLOCK:contact-form-submit-button */ /* START_BLOCK:email-signup (INDEX:104) */ email-signup-block { display: block; } .email-signup-block { min-width: fit-content; @media screen and (max-width: 749px) { width: 100%; min-width: unset; } } .email-signup__heading { padding-block: var(--padding-sm); } .email-signup__form { display: flex; flex-direction: column; } .email-signup__input-group { position: relative; display: grid; grid-template-columns: 1fr auto; background-color: transparent; } .email-signup__input-group:not(:has(.email-signup__button--integrated)) { gap: var(--gap-xs); } .email-signup__input-group:not(:has(.email-signup__button--arrow)) { @media screen and (max-width: 749px) { grid-template-columns: 1fr; } } .email-signup__input { width: 100%; border-width: var(--border-width); border-radius: var(--border-radius); border-style: solid; border-color: var(--color-input-border); } .email-signup__input.paragraph { color: var(--color-input-text); outline-color: var(--color-input-background); } .email-signup__button { white-space: nowrap; padding: 0; @media screen and (max-width: 749px) { width: 100%; } } .email-signup__input, .email-signup__button--text { padding: var(--padding-lg) var(--padding-3xl); } .email-signup__input-group .email-signup__input--underline { --box-shadow-color: var(--color-input-border); --box-shadow-multiplier: 1; color: var(--color-input-text); background-color: transparent; padding: 12px 0; border: none; border-radius: 0; box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color); transition: box-shadow var(--animation-values); &:focus-visible { --box-shadow-multiplier: 1.75; --box-shadow-color: var(--color-input-text); outline: none; } } .email-signup__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-70)); } .email-signup__input-group .email-signup__input--none { color: var(--color-input-text); background-color: var(--color-input-background); border: none; } .email-signup__input-group { --button-actual-width: var(--button-size); } .email-signup__input:has(+ .email-signup__button--arrow.email-signup__button--integrated) { padding-inline-end: calc(var(--button-size) + var(--padding-sm)); @media screen and (max-width: 749px) { text-align: left; } } .email-signup__input:has(+ .email-signup__button--integrated.email-signup__button--text) { padding-inline-end: calc(var(--button-actual-width) + var(--padding-xs) + var(--margin-xs)); @media screen and (max-width: 749px) { text-align: left; } } .email-signup__button-icon { color: currentcolor; padding: 5px; @media screen and (max-width: 749px) { padding: 0; align-self: center; justify-self: center; width: var(--icon-size-lg); height: var(--icon-size-lg); } } .email-signup__button--arrow { aspect-ratio: 1; padding-inline: var(--padding-xs); &:not(.email-signup__button--integrated) { width: auto; } } .email-signup__button--integrated { --button-offset: var(--margin-xs); position: absolute; height: calc(100% - (var(--button-offset) * 2) - (var(--border-width) * 2)); right: calc(var(--button-offset) + var(--border-width)); top: calc(var(--button-offset) + var(--border-width)); width: max-content; @media screen and (max-width: 749px) { width: fit-content; } &.email-signup__button--text { padding: 0 var(--padding-3xl); } &.email-signup__button--text.button-unstyled { padding: 0 var(--padding-xl); } &.button-unstyled { border-radius: var(--border-radius); } > .email-signup__button-icon { padding: 0; } } .email-signup__input--underline + .email-signup__button--integrated { --button-offset: calc(10% - var(--border-width)); right: 0; &.email-signup__button--text.button-unstyled { padding: 0; } &.button-unstyled { border-radius: 0; } } .email-signup__button:not(.button-unstyled) { background-color: var(--button-background-color); color: var(--button-color); text-transform: var(--button-text-case-primary); } .email-signup__button.button-secondary { text-transform: var(--button-text-case-secondary); } .email-signup__button.button-unstyled { background-color: transparent; color: var(--color-input-text); } .email-signup__button.button-unstyled:hover { color: rgb(var(--color-input-text-rgb) / var(--opacity-70)); cursor: pointer; } .email-signup__message { display: flex; align-items: center; gap: var(--gap-xs); } .email-signup__message-text { margin: 0; } /* END_BLOCK:email-signup */ /* START_BLOCK:filters (INDEX:106) */ .collection-wrapper { @media screen and (min-width: 750px) { --facets-vertical-col-width: 6; } @media screen and (min-width: 990px) { --facets-vertical-col-width: 5; } } .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-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:has(> :nth-child(2)) { justify-content: space-between; } dialog-component.facets-block-wrapper:not(:has(.facets--drawer[open])) { @media screen and (min-width: 750px) { display: none; } } .variant-option__swatch-wrapper { position: relative; overflow: visible; border-radius: var(--options-border-radius); } .variant-option--swatches-disabled .variant-option__swatch-wrapper { overflow: hidden; } .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; } } .collection-wrapper:has(.collection-wrapper--full-width) .facets--vertical:not(.facets--drawer) { @media screen and (min-width: 750px) { padding-inline-start: max(var(--padding-sm), var(--padding-inline-start)); } } .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; justify-content: space-between; } .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); } } .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper { @media screen and (max-width: 749px) { display: none; } } .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, .sorting-filter__options { @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, .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__label, .products-count-wrapper { text-transform: var(--facet-label-transform); } .clear-filter { background-color: transparent; box-shadow: none; padding: 0; } /* Facets - Label */ .facets__label { color: var(--color-foreground); cursor: pointer; @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); } } .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] { @media screen and (min-width: 750px) { z-index: var(--facets-open-z-index); } } /* Make ONLY the Availability popup wider + add inner padding */ @media screen and (min-width: 750px) { .facets--horizontal .facets__item--availability .facets__panel-content { width: 240px !important; min-width: 240px !important; max-width: 240px !important; border-radius: 8px; /* inner spacing: top | right | bottom | left */ padding: 8px 0px 8px 10px; } } /* END_BLOCK:filters */ /* START_BLOCK:footer-policy-list (INDEX:109) */ .policy-list-trigger { anchor-name: --terms-policies-trigger; cursor: pointer; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } .policy_list { li { border-radius: calc(var(--style-border-radius-popover) - 8px); a { color: var(--color-foreground); display: inline-block; padding: 8px; text-align: start; width: 100%; outline-color: #0000; font-size: var(--font-size, 0.75rem); text-transform: var(--text-transform, none); } &:is(:hover, :focus-within) { background: rgb(var(--color-foreground-rgb) / 0.15); } } } .terms-policies-popover { position-anchor: --terms-policies-trigger; inset: unset; bottom: calc(anchor(top) + 1rem); left: anchor(left); border-radius: var(--style-border-radius-popover); background: linear-gradient(var(--color-background) 0 100%), linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%); background-clip: padding-box, border-box; border: 1px solid #0000; box-shadow: var(--shadow-popover); padding: 8px; margin: 0; opacity: 0; scale: 0.94; translate: 0 6px; transform-origin: 6ch 100%; } .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 1; translate: 0 0; scale: 1; } @media screen and (max-width: 750px) { .terms-policies-popover { left: anchor(center); transform: translate(-50%, 0); transform-origin: 0% 100%; } } @supports not (position-anchor: --account-button-trigger) { .terms-policies-popover { bottom: unset; top: calc(var(--anchor-top) * 1px); left: calc(var(--anchor-left) * 1px); transform: translate(0, calc(-100% - 1.25rem)); } @media screen and (max-width: 750px) { .terms-policies-popover { left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px); transform: translate(-50%, calc(-100% - 1.25rem)); } } } @media (prefers-reduced-motion: no-preference) { .terms-policies-popover { transition-property: display, overlay, opacity, scale, translate; transition-behavior: allow-discrete; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); } @starting-style { .terms-policies-popover.\:popover-open, .terms-policies-popover:popover-open { opacity: 0.7; translate: 0 6px; scale: 0.94; } } } /* END_BLOCK:footer-policy-list */ /* START_BLOCK:icon (INDEX:111) */ .icon-block { display: flex; fill: currentcolor; flex-shrink: 0; } .icon-block__media { height: auto; } /* END_BLOCK:icon */ /* START_BLOCK:image (INDEX:112) */ .placeholder-image { position: relative; aspect-ratio: var(--ratio); overflow: hidden; } placeholder-image img { width: 100%; height: 100%; aspect-ratio: var(--ratio); } .image-block { display: flex; /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */ justify-content: var(--horizontal-alignment, 'inline-start'); } .image-block--height-fill .image-block__image { height: 100%; } .image-block__image { object-fit: cover; aspect-ratio: var(--ratio); } /* END_BLOCK:image */ /* START_BLOCK:logo (INDEX:114) */ .logo-block { width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end)); max-width: 100%; max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end)); font-size: var(--logo-height); display: flex; @media screen and (max-width: 750px) { max-height: calc( var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end) ); font-size: var(--logo-height-mobile, var(--logo-height)); width: calc( var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end) ); } } .logo-block__link { display: flex; width: 100%; text-decoration: none; color: inherit; } .logo-block__image-wrapper { display: flex; width: 100%; max-width: 100%; max-height: 100%; } .logo-block__image { object-fit: contain; width: 100%; } /* END_BLOCK:logo */ /* START_BLOCK:menu (INDEX:115) */ .menu { width: 100%; } .menu:not(:has(.menu__heading--empty)) .details-content { margin-block-start: var(--spacing--size); } .menu__item + .menu__item { margin-block-start: var(--spacing--size); } .menu .menu__heading--empty { display: none; } .menu__heading__default { display: contents; } .menu__heading__accordion { display: none; } /* ✅ Heading link styling (inherits color) */ .menu__heading-link { color: inherit; text-decoration: none; pointer-events: auto; /* ensure it can be clicked */ } .menu__heading-link:hover { text-decoration: underline; text-underline-offset: 0.2em; } @media screen and (max-width: 749px) { .menu--accordion .menu__heading--empty { display: flex; } .menu--accordion .menu__heading__accordion { display: contents; } .menu--accordion .menu__heading__default { display: none; } .menu--accordion .details-content { margin-block-start: var(--spacing--size); } .menu--accordion .menu__details { padding-inline: 0; } .menu--dividers .menu__details { border-block-end: var(--style-border-width) solid var(--color-border); } .menu--dividers .details-content { padding-block-end: var(--padding-sm); } } .menu--caret .icon-plus, .menu--plus .icon-caret { display: none; } /* END_BLOCK:menu */ /* START_BLOCK:page (INDEX:117) */ .page-block { display: flex; flex-direction: column; max-width: 100%; max-height: 100%; width: 100%; height: auto; align-items: flex-start; } .page-title { margin-bottom: var(--margin-xl); } .placeholder-image { position: relative; aspect-ratio: var(--ratio); overflow: hidden; } .page-placeholder { width: 100%; height: 100%; } /* END_BLOCK:page */ /* START_BLOCK:payment-icons (INDEX:118) */ .payment-icons { width: 100%; } .payment-icons__list { display: flex; align-items: center; justify-content: var(--alignment); flex-wrap: wrap; gap: var(--icon-gap); margin: 0; padding: 0; } .payment-icons__item { display: flex; align-items: center; } /* END_BLOCK:payment-icons */ /* START_BLOCK:popup-link (INDEX:119) */ .popup-link__button svg { display: inline-block; position: relative; top: var(--margin-2xs); } .popup-link__content { box-shadow: var(--shadow-popover); border: var(--style-border-popover); border-radius: var(--style-border-radius-popover); background-color: var(--color-background); padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl); max-width: var(--normal-content-width); max-height: var(--modal-max-height); @media screen and (min-width: 750px) { padding: var(--padding-5xl); } } .popup-link__content[open] { animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards; } .popup-link__content.dialog-closing { animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards; } .popup-link__content--drawer { position: fixed; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; height: 100%; margin: 0 0 0 auto; } /* Needed to ensure the drawer is full height */ .popup-link__content--drawer:modal { max-height: 100dvh; } .popup-link__close { top: var(--margin-2xs); right: var(--margin-2xs); opacity: 0.8; animation: none; } /* END_BLOCK:popup-link */ /* START_BLOCK:price (INDEX:120) */ .tax-note:empty { display: none; } form.payment-terms { padding-top: 0.5em; font-size: min(0.85em, var(--font-paragraph--size)); font-weight: var(--font-paragraph--weight); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .installments:not(:has(shopify-payment-terms)) { display: none; } /* END_BLOCK:price */ /* START_BLOCK:product-custom-property (INDEX:122) */ product-custom-property-component { display: block; width: 100%; } product-custom-property-component .__heading { margin-inline: 0; margin-block: 0 var(--padding-sm); } product-custom-property-component .__heading:has(+ .__description) { margin-block-end: var(--padding-2xs); } product-custom-property-component .__description { font-size: min(0.85em, var(--font-paragraph--size)); color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); margin-inline: 0; margin-block: 0 var(--padding-md); } product-custom-property-component .__field { position: relative; } product-custom-property-component .__input-wrapper { position: relative; } product-custom-property-component input, product-custom-property-component textarea { width: 100%; /* stylelint-disable-next-line declaration-no-important */ color: var(--color-input-text) !important; } /* Add padding for inputs with counter inside */ product-custom-property-component .__input-wrapper input { padding-bottom: calc(var(--padding-sm) * 3); } product-custom-property-component .__input-wrapper textarea { padding-bottom: calc(var(--padding-sm) * 3); scroll-padding-bottom: calc(var(--padding-sm) * 3); } product-custom-property-component textarea { min-height: 80px; } @supports (resize: vertical) { @media (hover: hover) and (pointer: fine) { product-custom-property-component textarea { resize: vertical; /* stylelint-disable-line */ } } } product-custom-property-component .__character-label { position: absolute; left: var(--input-padding-x); bottom: var(--padding-sm); pointer-events: none; } product-custom-property-component .__character-count { font-style: italic; /* stylelint-disable-next-line declaration-no-important */ color: var(--color-input-text) !important; } /* We should consolidate input styles that share the same behavior */ .custom-property__input { border: var(--style-border-width-inputs) solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); /* this is needed to override the styles from field__input */ box-shadow: none; &:is(:hover, :focus) { /* this is needed to override the styles from field__input */ box-shadow: none; } &:focus { /* this is needed to override the styles from field__input */ outline: var(--focus-outline-width) solid var(--color-input-background); } } /* END_BLOCK:product-custom-property */ /* START_BLOCK:product-inventory (INDEX:124) */ .product-inventory__status { display: flex; align-items: center; font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); gap: var(--padding-xs); } .product-inventory__icon, .product-inventory__icon svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .product-inventory__icon-low { color: var(--color-lowstock); } .product-inventory__icon-in_stock { color: var(--color-instock); } .product-inventory__icon-out_of_stock { color: var(--color-outofstock); } .product-inventory__icon circle:first-of-type { opacity: 0.3; } /* END_BLOCK:product-inventory */ /* START_BLOCK:product-recommendations (INDEX:125) */ .product-recommendations-wrapper { width: 100%; } .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) { width: 100vw; } .product-recommendations { display: block; } .product-recommendations__skeleton-item { aspect-ratio: 3 / 4; background-color: var(--color-foreground); opacity: var(--skeleton-opacity); border-radius: 4px; } /* END_BLOCK:product-recommendations */ /* START_BLOCK:review (INDEX:128) */ .rating-wrapper { width: 100%; gap: var(--gap-xs); flex-wrap: wrap; } .rating-color--primary { --star-fill-color: var(--color-primary); --star-fill-color-rgb: var(--color-primary-rgb); } .rating-color--foreground { --star-fill-color: var(--color-foreground); --star-fill-color-rgb: var(--color-foreground-rgb); } .rating-wrapper, .rating { display: flex; align-items: center; } .rating-wrapper.justify-right { flex-direction: row-reverse; } .rating { gap: var(--gap-3xs); } .rating-wrapper .rating-text, .rating-wrapper .rating-count, .rating-wrapper .rating-count-separator { color: var(--star-fill-color); margin: 0; white-space: nowrap; } .rating-count-separator { opacity: var(--opacity-20); padding-left: calc(var(--padding-xs) / 2); padding-right: var(--padding-xs); } .stars { height: var(--star-size); fill: var(--empty-star-fill-color); } .filled-star { fill: var(--star-fill-color); } /* END_BLOCK:review */ /* START_BLOCK:social-links (INDEX:129) */ .footer-utilities__icons.social-icons__wrapper { display: flex; flex-wrap: wrap; /* ✅ gap from your slider (forced) */ gap: var(--social-icon-gap) !important; /* ✅ padding from your sliders */ padding: var(--social-pad-top) var(--social-pad-right) var(--social-pad-bottom) var(--social-pad-left); justify-content: center; } @media screen and (min-width: 750px) { .footer-utilities__icons.social-icons__wrapper { flex-wrap: nowrap; justify-content: flex-start; } } /* ✅ Make the click area match the icon size */ .footer-utilities__icons .social-icons__icon-wrapper { display: flex; align-items: center; justify-content: center; width: var(--social-icon-size) !important; height: var(--social-icon-size) !important; } /* ✅ Force SVG size (beats theme rules) */ .footer-utilities__icons .social-icons__icon { fill: currentColor; flex-shrink: 0; width: var(--social-icon-size) !important; height: var(--social-icon-size) !important; } /* Label fallback */ .footer-utilities__icons .social-icons__icon-label { display: none; } /* If icon is missing, show label instead */ .footer-utilities__icons .social-icons__icon-wrapper:not(:has(.social-icons__icon path)) .social-icons__icon { display: none; } .footer-utilities__icons .social-icons__icon-wrapper:not(:has(.social-icons__icon path)) .social-icons__icon-label { display: inline; } /* Disabled state for editor */ .shopify-design-mode .social-icons__icon-wrapper--disabled { opacity: var(--disabled-opacity, 0.5); cursor: not-allowed; } .shopify-design-mode .social-icons__icon-wrapper--disabled a { pointer-events: none; } /* END_BLOCK:social-links */ /* START_BLOCK:spacer (INDEX:130) */ /* Fill opposite direction */ .layout-panel-flex--column > .spacer-block { width: 100%; } .layout-panel-flex--row > .spacer-block { height: 100%; } /* Flex - Percent */ :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent { flex: var(--spacer-size); } /* Flex - Pixel */ .layout-panel-flex--row > .spacer-block--size-pixel { width: var(--spacer-size); } .layout-panel-flex--column > .spacer-block--size-pixel { height: var(--spacer-size); } /* Mobile */ @media screen and (max-width: 750px) { /* Percent */ .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent { flex: var(--spacer-size-mobile); height: 100%; } .layout-panel-flex--column > .spacer-block--size-mobile-percent, .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) { width: 100%; flex: var(--spacer-size-mobile); } /* Pixel */ .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel { width: var(--spacer-size-mobile); height: 100%; } .layout-panel-flex--column > .spacer-block--size-mobile-pixel, .mobile-column > .spacer-block--size-mobile-pixel { width: 100%; flex: 0; height: var(--spacer-size-mobile); } } /* END_BLOCK:spacer */ /* START_BLOCK:swatches (INDEX:131) */ product-swatches { width: 100%; display: flex; position: relative; overflow: hidden; gap: 0; flex-shrink: 0; } swatches-variant-picker-component { display: flex; width: 100%; flex-direction: row; justify-content: var(--product-swatches-alignment-mobile); @media (min-width: 750px) { justify-content: var(--product-swatches-alignment); } } swatches-variant-picker-component .variant-option--swatches { padding-block: calc( var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width) ) calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)); padding-inline: calc( var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width)) ) calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width)); } .variant-option--swatches { overflow-list::part(list) { gap: var(--gap-sm); } overflow-list[defer]::part(list) { flex-wrap: nowrap; } } .hidden-swatches__count { display: flex; align-self: center; align-items: center; justify-content: center; color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60)); background-color: transparent; padding: 0; border: 0; border-radius: 0; &::before { /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */ counter-reset: overflow-count var(--overflow-count); content: '+' counter(overflow-count); line-height: 1; cursor: pointer; } } .hidden-swatches__count:hover { color: var(--color-foreground-rgb); } /* END_BLOCK:swatches */ /* START_BLOCK:video (INDEX:134) */ .placeholder-video { aspect-ratio: 5 / 3; } /* END_BLOCK:video */ /* CSS from snippet stylesheet tags */ /* START_SNIPPET:account-actions (INDEX:135) */ .account-actions { background-color: var(--color-background); display: flex; flex-direction: column; position: relative; transition: height var(--animation-values); &:has([data-active]) .account-actions__main-menu { visibility: hidden; } } .account-actions__header { padding: var(--padding-xl); display: flex; flex-direction: column; gap: var(--gap-2xs); } .account-actions__title { /* Ideally we set the font-size here, but specificity issues make this necessary */ --font-h5--size: var(--font-size--lg); margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .account-actions__email { display: flex; align-items: center; gap: var(--gap-2xs); color: rgb(var(--color-foreground-rgb) / var(--opacity-60)); max-width: var(--account-actions-max-width); word-break: break-all; } .account-actions__sign-ins { padding: var(--padding-xl); padding-block-start: 0; padding-block-end: var(--padding-md); display: flex; flex-direction: column; gap: var(--gap-sm); } .account-actions__sign-in-text { display: inline; } .account-actions__fallback-text { display: none; } .account-actions__sign-ins:not(:has(shop-login-button)) { gap: 0; .account-actions__sign-in-text { display: none; } .account-actions__fallback-text { display: block; } } /* Makes the shop login button radius match the theme settings */ .account-actions__shop-login { --buttons-radius: var(--style-border-radius-buttons-primary); } .account-actions__nav { padding: var(--padding-xl); padding-block-start: 0; } .account-actions__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); width: 100%; list-style: none; margin: 0; padding: 0; @media screen and (max-width: 300px) { grid-template-columns: 1fr; } } .account-actions__link { width: auto; display: flex; justify-content: center; align-items: center; gap: var(--gap-2xs); } .account-actions__icon { display: flex; width: var(--icon-size-sm); height: var(--icon-size-sm); margin-block: -4px; } /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */ @supports not (background-color: rgb(from red 150 g b / alpha)) { /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. Using element selector to increase specificity. **/ .account-actions :is(a.button, a.button-secondary):focus-visible { outline: none; overflow: visible; position: relative; &::after { content: ''; position: absolute; inset: calc(-1 * var(--focus-outline-offset)); border: var(--focus-outline-width) solid currentColor; border-radius: var(--style-border-radius-buttons-secondary); display: inherit; } } .account-actions a.button:focus-visible::after { border-color: var(--button-background-color); border-radius: var(--style-border-radius-buttons-primary); } } /* END_SNIPPET:account-actions */ /* START_SNIPPET:account-button (INDEX:136) */ .account-button { appearance: none; border: none; background: #ffffff; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.55rem; padding: 0.4rem 0.95rem; padding-left: 4px; min-width: 7.5rem; height: 2.6rem; border-radius: 999px; border: 1px solid rgba(35, 81, 96, 0.18); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08); cursor: pointer; anchor-name: --account-button-trigger; font-family: var(--font-body-family, inherit); font-size: 0.9rem; font-weight: 500; color: #235160; text-decoration: none; transition: background-color var(--animation-speed) var(--animation-easing), box-shadow var(--animation-speed) var(--animation-easing), transform 0.08s ease, border-color var(--animation-speed) var(--animation-easing), color var(--animation-speed) var(--animation-easing); } @media screen and (min-width: 750px) { .account-button { padding-right: 0.58rem; } } .account-button:hover { background-color: rgba(35, 81, 96, 0.06); border-color: rgba(35, 81, 96, 0.3); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16); transform: translateY(-1px); } .account-button:focus-visible { outline: 2px solid #235160; outline-offset: 2px; } .account-button__mobile-icon { display: none; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; color: currentColor; } .account-button__mobile-icon svg { width: 100%; height: 100%; } .account-button--logged-out { justify-content: center; padding: 10px 16px; background-color: #235160; color: #ffffff; border-color: #235160; box-shadow: none; font-size: 13px; border-radius: 4px; min-width: auto; white-space: nowrap; height: auto; } .account-button--logged-out:hover { background-color: #1e4454; border-color: #1e4454; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16); } .customer-logged-in .account-button--logged-out { display: none !important; } .account-button__avatar-wrap { display: flex; align-items: center; justify-content: center; } .account-button__avatar { --account-button-size: 2rem; display: flex; align-items: center; justify-content: center; width: var(--account-button-size); height: var(--account-button-size); border-radius: var(--style-border-radius-50); background-color: var(--color-primary-button-background); font-size: var(--font-size--sm); font-weight: 700; color: var(--color-primary-button-text); text-transform: uppercase; line-height: 1; } .account-button__icon { display: inline-flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: var(--style-border-radius-50); background-color: var(--color-primary-button-background); color: var(--color-primary-button-text); } .account-button__icon svg { width: 1.2rem; height: 1.2rem; fill: currentColor; } .account-button__label { white-space: nowrap; } .account-button shop-user-avatar { pointer-events: none; } @media screen and (min-width: 750px) and (max-width: 899px) { .account-button { width: 42px; min-width: 42px; height: 42px; padding: 0; gap: 0; justify-content: center; } .account-button__label { display: none; } } @media screen and (min-width: 900px) and (max-width: 1024px) { .account-button { min-width: 6.6rem; height: 2.35rem; padding: 0.32rem 0.75rem 0.32rem 0.45rem; gap: 0.45rem; font-size: 0.84rem; } } @media screen and (min-width: 750px) and (max-width: 989px) { .account-button { width: auto; min-width: 7.5rem; height: 2.6rem; padding: 0.4rem 0.95rem; padding-left: 4px; gap: 0.55rem; justify-content: flex-start; font-size: 0.9rem; } .account-button__label { display: inline; } } @media screen and (max-width: 749px) { .account-button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border: none; border-radius: 999px; box-shadow: none; background: transparent; justify-content: center; gap: 0; color: var(--color-foreground); } .account-button__mobile-icon { display: inline-flex; width: 1.48rem; height: 1.48rem; } .account-button__avatar-wrap, .account-button__label { display: none; } .customer-logged-in .account-button__mobile-icon { display: none; } .customer-logged-in .account-button__avatar-wrap { display: inline-flex; width: 30px; height: 30px; border-radius: 999px; overflow: hidden; align-items: center; justify-content: center; background: rgba(35, 81, 96, 0.12); border: 1px solid rgba(35, 81, 96, 0.26); box-shadow: 0 1px 6px rgba(15, 23, 42, 0.14); } .customer-logged-in .account-button__avatar { --account-button-size: 30px; font-size: 0.95rem; font-weight: 700; background-color: #235160; color: #ffffff; } .customer-logged-in .account-button__icon { width: 30px; height: 30px; background-color: #235160; color: #ffffff; } .customer-logged-in .account-button shop-user-avatar { --shop-avatar-size: 30px; border-radius: 999px; } @media (hover: hover) and (pointer: fine) { .customer-logged-in .account-button:hover { background: rgba(35, 81, 96, 0.09); } } .account-button--logged-out { background: transparent; border: none; color: var(--color-foreground); font-size: 0; box-shadow: none !important; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } .account-button--logged-out:active, .account-button--logged-out:focus, .account-button--logged-out:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; } } /* END_SNIPPET:account-button */ /* START_SNIPPET:account-drawer (INDEX:137) */ .account-drawer { @media screen and (min-width: 750px) { display: none; } } .account-drawer__dialog { --animation-speed: 0.24s; --dialog-drawer-opening-animation: account-drawer-slide-in; --dialog-drawer-closing-animation: account-drawer-slide-out; height: fit-content; margin: 0; inset-block-end: 0; inset-block-start: auto; border-radius: 0; padding: 0; } .account-drawer__close-button { z-index: 1; inset-block-start: var(--padding-xs); inset-inline-end: var(--padding-xs); color: var(--color-foreground); background-color: transparent; } .account-drawer__close-button .svg-wrapper { display: flex; width: var(--button-size); height: var(--button-size); align-items: center; justify-content: center; } @keyframes account-drawer-slide-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes account-drawer-slide-out { from { transform: translateY(0); } to { transform: translateY(100%); } } /* END_SNIPPET:account-drawer */ /* START_SNIPPET:account-popover (INDEX:138) */ .account-popover { --account-popover-min-width: 18rem; --account-actions-max-width: 18rem; --account-popover-text-color: #235160; } .account-popover__summary { padding: 0; } .account-popover__summary:hover { color: var(--color-foreground); } .account-popover__panel { --account-popover-opacity: 0; --account-popover-y: 16px; --account-popover-scale: 0.98; position-anchor: --account-button-trigger; border-radius: var(--style-border-radius-popover); margin: 0; left: unset; width: max-content; min-width: var(--account-popover-min-width); box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); overflow-y: hidden; opacity: var(--account-popover-opacity); translate: 0 var(--account-popover-y); scale: var(--account-popover-scale); transition-property: display, opacity, translate, scale; transition-duration: 0.25s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; top: calc(anchor(bottom) + var(--header-padding)); right: anchor(right); font-family: var(--font-body-family, inherit); color: var(--account-popover-text-color); } .account-popover__panel:popover-open { --account-popover-opacity: 1; --account-popover-y: 0px; --account-popover-scale: 1; } @supports not (position-anchor: --account-button-trigger) { .account-popover__panel { top: calc( var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding) ); right: calc(var(--anchor-right) * 1px); } } @supports not selector(:popover-open) { .account-popover__panel.\:popover-open { --account-popover-opacity: 1; --account-popover-y: 0px; --account-popover-scale: 1; } } @starting-style { .account-popover__panel { --account-popover-opacity: 0.7; --account-popover-y: 16px; --account-popover-scale: 0.98; } .account-popover__panel:popover-open { --account-popover-opacity: 0.7; --account-popover-y: 16px; --account-popover-scale: 0.98; } } .account-popover__panel--hidden { display: none !important; } .account-popover__content--actions { max-width: var(--account-actions-max-width); padding: 1rem 1.15rem 1.2rem; } /* HEADER (like your first reference image) */ .account-popover__header-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; margin-bottom: 0.85rem; } .account-popover__avatar-wrapper { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .account-popover__user { display: flex; flex-direction: column; gap: 0.12rem; } .account-popover__name { font-size: 0.95rem; font-weight: 600; color: var(--account-popover-text-color); } .account-popover__email { font-size: 0.8rem; opacity: 0.75; max-width: 14rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--account-popover-text-color); } .account-popover__avatar { width: 2.1rem; height: 2.1rem; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: rgba(35, 81, 96, 0.04); } .account-popover__avatar-initial, .account-popover__avatar-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background-color: var(--color-primary-button-background); color: var(--color-primary-button-text); font-weight: 600; text-transform: uppercase; line-height: 1; font-size: 0.95rem; } .account-popover__avatar-icon svg { width: 1.35rem; height: 1.35rem; } /* tiny green status dot like reference */ .account-popover__status-dot { position: absolute; right: -1px; bottom: -1px; width: 0.6rem; height: 0.6rem; border-radius: 999px; background-color: #16a34a; /* green */ border: 2px solid #ffffff; } /* NAV + ITEMS (more spacing + bigger hover pill) */ .account-popover__nav { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.55rem; padding-top: 0.65rem; border-top: 1px solid rgba(15, 23, 42, 0.06); } .account-popover__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; margin: 0 -0.8rem; text-decoration: none; color: var(--account-popover-text-color); font-size: 0.9rem; border-radius: 0.75rem; transition: background-color 0.18s ease, color 0.18s ease, transform 0.08s ease; } .account-popover__link-icon { width: 1.4rem; display: inline-flex; justify-content: center; align-items: center; } .account-popover__icon-svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .account-popover__link:hover { background-color: rgba(35, 81, 96, 0.06); transform: translateY(-1px); } .account-popover__link--button { padding: 0; margin: 0 -0.8rem; } .account-popover__link--button button { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border: none; background: none; font: inherit; cursor: pointer; color: var(--account-popover-text-color); border-radius: 0.75rem; width: 100%; text-align: left; } .account-popover__link--button button:hover { background-color: rgba(35, 81, 96, 0.06); transform: translateY(-1px); } @media (max-width: 1024px) { .account-popover { --account-popover-min-width: 16rem; --account-actions-max-width: 16rem; } } @media screen and (max-width: 749px) { .account-popover { --account-popover-min-width: min(16.5rem, calc(100vw - 24px)); --account-actions-max-width: min(16.5rem, calc(100vw - 24px)); } .account-popover__panel { position: fixed; width: min(270px, calc(100vw - 24px)); min-width: 0; max-width: calc(100vw - 24px); top: calc(var(--header-height, 60px) + 6px); right: calc(12px + env(safe-area-inset-right)); left: auto !important; border-radius: 10px; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14); z-index: 1200; } .account-popover__content--actions { padding: 0.7rem 0.78rem 0.8rem; } .account-popover__header-row { gap: 0.45rem; margin-bottom: 0.55rem; } .account-popover__avatar, .account-popover__avatar-initial, .account-popover__avatar-icon { width: 1.75rem; height: 1.75rem; } .account-popover__name { font-size: 0.82rem; } .account-popover__email { font-size: 0.7rem; max-width: calc(100vw - 110px); } .account-popover__nav { margin-top: 0.35rem; padding-top: 0.45rem; gap: 0.1rem; } .account-popover__link { min-height: 42px; padding: 0.48rem 0.62rem; margin: 0 -0.25rem; font-size: 0.82rem; border-radius: 0.5rem; } .account-popover__link-icon { width: 1.05rem; } .account-popover__icon-svg { width: 0.9rem; height: 0.9rem; stroke-width: 1.5; } .account-popover__link:hover, .account-popover__link--button button:hover { transform: none; background-color: rgba(35, 81, 96, 0.04); } } /* END_SNIPPET:account-popover */ /* START_SNIPPET:background-video (INDEX:142) */ @media (prefers-reduced-motion: reduce) { video-background-component video { display: none; } } /* END_SNIPPET:background-video */ /* START_SNIPPET:bento-grid (INDEX:143) */ .bento-box { display: grid; column-gap: var(--bento-gap); row-gap: calc(var(--bento-gap) * 1.5); width: 100%; } .bento-box:has(.collection-card--image-bg) { row-gap: var(--bento-gap); } .bento-box ~ .bento-box { padding-block-start: var(--bento-gap); } @media (max-width: 900px) { .bento-box { grid-template-columns: repeat(2, 1fr); } .bento-box__item:nth-child(3n + 1) { grid-column: span 1; } .bento-box__item:nth-child(3n + 2) { grid-column: span 1; } .bento-box__item:nth-child(3n + 3) { grid-column: span 2; } /* Ensure last items create a full row */ .bento-box__item:last-child:nth-child(3n + 5) { grid-column: span 1; } .bento-box__item:last-child:nth-child(3n + 4) { grid-column: span 2; } } @media (min-width: 901px) { .bento-box { grid-template-columns: repeat(12, 1fr); grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H I I I I I I' 'J J J J K K K K L L L L'; } .bento-box__item:nth-child(1) { grid-area: A; } .bento-box__item:nth-child(2) { grid-area: B; } .bento-box__item:nth-child(3) { grid-area: C; } .bento-box__item:nth-child(4) { grid-area: D; } .bento-box__item:nth-child(5) { grid-area: E; } .bento-box__item:nth-child(6) { grid-area: F; } .bento-box__item:nth-child(7) { grid-area: G; } .bento-box__item:nth-child(8) { grid-area: H; } .bento-box__item:nth-child(9) { grid-area: I; } .bento-box__item:nth-child(10) { grid-area: J; } .bento-box__item:nth-child(11) { grid-area: K; } .bento-box__item:nth-child(12) { grid-area: L; } /* === Overrides for specific cases === */ /* Exactly 1 item */ .bento-box:has(.bento-box__item:first-child:nth-last-child(1)) { grid-template-areas: 'A A A A A A A A A A A A'; } /* Exactly 2 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(2)) { grid-template-areas: 'A A A A A A B B B B B B'; } /* Exactly 4 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(4)) { grid-template-areas: 'A A A A B B B B B B B B' 'C C C C C C C C D D D D'; } /* Exactly 5 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(5)) { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E E E E'; } /* Exactly 7 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(7)) { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D D D D E E E' 'F F F F F F G G G G G G'; } /* Exactly 8 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(8)) { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H H H H H H H'; } /* Exactly 10 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(10)) { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G G G G G G G H H H' 'I I I J J J J J J J J J'; } /* Exactly 11 items */ .bento-box:has(.bento-box__item:first-child:nth-last-child(11)) { grid-template-areas: 'A A A B B B B B B C C C' 'D D D D D D E E E F F F' 'G G G H H H I I I I I I' 'J J J J K K K K K K K K'; } } /* END_SNIPPET:bento-grid */ /* START_SNIPPET:blog-comment-form (INDEX:144) */ .blog-post-comments__form-container { --comment-form-gap: var(--gap-md); width: 100%; max-width: var(--normal-content-width); margin: var(--margin-4xl) auto 0; } .blog-post-comments__form { display: grid; grid-template-columns: 1fr; gap: var(--comment-form-gap); @media screen and (min-width: 750px) { grid-template-columns: 1fr 1fr; } } .blog-post-comments__form-input { padding: var(--padding-lg) var(--padding-xl); border: var(--style-border-width-inputs) solid var(--color-input-border); } .blog-post-comments__form-input--textarea { resize: vertical; min-height: var(--input-textarea-min-height); } .blog-post-comments__form-message { display: flex; align-items: center; gap: var(--gap-xs); } .blog-post-comments__form-body { grid-column: 1 / -1; } .blog-post-comments__form-input:focus-visible { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } .blog-post-comments__form-moderated { font-size: var(--font-size--xs); } .blog-post-comments__form-submit { margin-block-start: var(--comment-form-gap); } /* END_SNIPPET:blog-comment-form */ /* START_SNIPPET:button (INDEX:147) */ .link { text-decoration: none; text-decoration-color: currentcolor; &:hover { color: var(--color-primary-hover); text-decoration-color: transparent; } } /* END_SNIPPET:button */ /* START_SNIPPET:card-gallery (INDEX:148) */ .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:has(.product-badges--top-right .product-badges__badge) .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-3xl) + 50px); } .product-grid[data-product-card-size='large'] .card-gallery:has(.product-badges--top-right .product-badges__badge) .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-2xl) + 50px); } .product-grid[data-product-card-size='medium'] .card-gallery:has(.product-badges--top-right .product-badges__badge) .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-xl) + 50px); } .product-grid[data-product-card-size='small'] .card-gallery:has(.product-badges--top-right .product-badges__badge) .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-sm) + 50px); } .product-grid[data-product-card-size='extra-large'] .card-gallery:has(.product-badges--top-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-3xl) + 40px); } .product-grid[data-product-card-size='large'] .card-gallery:has(.product-badges--top-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-2xl) + 40px); } .product-grid[data-product-card-size='medium'] .card-gallery:has(.product-badges--top-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-xl) + 40px); } .product-grid[data-product-card-size='small'] .card-gallery:has(.product-badges--top-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-sm) + 40px); } .product-grid[data-product-card-size='extra-large'] .card-gallery:has(.product-badges--bottom-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-3xl) + 40px); } .product-grid[data-product-card-size='large'] .card-gallery:has(.product-badges--bottom-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-2xl) + 40px); } .product-grid[data-product-card-size='medium'] .card-gallery:has(.product-badges--bottom-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-bottom: calc(var(--padding-xl) + 40px); } .product-grid[data-product-card-size='small'] .card-gallery:has(.product-badges--bottom-left .product-badges__badge) .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:has(.product-badges--top-right .product-badges__badge) .product-card-gallery__title-placeholder { padding-right: calc(var(--padding-sm) + 50px); } .product-grid[data-product-card-size] .card-gallery:has(.product-badges--top-left .product-badges__badge) .product-card-gallery__title-placeholder { padding-top: calc(var(--padding-sm) + 40px); } .product-grid[data-product-card-size] .card-gallery:has(.product-badges--bottom-left .product-badges__badge) .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; } /* END_SNIPPET:card-gallery */ /* START_SNIPPET:cart-discount (INDEX:150) */ .cart-discount__input { background-color: var(--color-input-background); color: var(--color-input-text); border-width: var(--style-border-width-inputs); border-color: var(--color-input-border); border-style: solid; border-radius: var(--style-border-radius-inputs); padding: var(--padding-sm) var(--padding-md); height: 100%; flex-grow: 1; min-width: 0; } .cart-discount__input::placeholder { color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text)); } .cart-discount__pill-code { overflow: hidden; max-width: 100px; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .cart-discount { width: 100%; } .cart-discount__codes { display: none; gap: var(--padding-xs); flex-wrap: wrap; list-style: none; padding-inline: 0; margin: 0; } .cart-discount__codes:has(.cart-discount__pill) { display: flex; } .cart-discount__button { height: 100%; } .cart-discount__content { height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm)); } .cart-discount__pill { display: flex; color: var(--color-foreground); gap: var(--padding-xs); align-items: center; padding: var(--padding-xs) var(--padding-sm); border-radius: var(--style-border-radius-pills); background-color: var(--color-input-background); text-transform: uppercase; } .cart-discount__form { display: flex; gap: var(--padding-md); align-items: center; height: 100%; padding-block: var(--padding-2xs) var(--padding-sm); } :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) { --close-icon-opacity: 0.4; color: var(--color-foreground); background-color: transparent; pointer-events: all; cursor: pointer; height: 100%; } .cart-discount__error { display: flex; align-items: center; width: 100%; padding-block: var(--padding-2xs) var(--padding-sm); } .cart-discount__error .svg-wrapper { flex-shrink: 0; width: var(--icon-size-xs); height: var(--icon-size-xs); margin-inline: var(--margin-3xs) var(--margin-xs); } .cart-discount__error-text { margin-block-start: var(--margin-3xs); } /* END_SNIPPET:cart-discount */ /* START_SNIPPET:cart-drawer (INDEX:151) */ .cart-items-component { width: 100%; height: 100%; display: flex; flex-direction: column; } .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] { aspect-ratio: 1; min-width: 26px; } .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: var(--cart-drawer-padding-desktop); } } .cart-drawer__dialog { overflow: hidden; } .cart-drawer__inner { height: 100%; overflow: hidden; } .cart-drawer__content { height: calc(100% - var(--header-height)); display: flex; flex-direction: column; } .cart-drawer__summary { background-color: var(--color-background); position: sticky; bottom: 0; z-index: 1; } /* END_SNIPPET:cart-drawer */ /* START_SNIPPET:cart-icon-component (INDEX:152) */ /* Existing theme behavior */ 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; } } /* ✅ FIX: Remove black dot (list marker) ONLY for the
  • that contains cart-icon */ li:has(cart-icon) { list-style: none !important; } li:has(cart-icon)::marker { content: "" !important; } /* END_SNIPPET:cart-icon-component */ /* START_SNIPPET:cart-products (INDEX:154) */ .cart-items{ --cart-item-media-width-min: 2.5rem; --cart-item-media-width-max: var(--cart-item-media-width-fixed, 7.5rem); --cart-accent: #235160; container-name: cart-items; container-type: inline-size; width: 100%; } @media (min-width: 750px){ .cart-items__wrapper{ margin-left: -14px !important; } .cart-items{ width: calc(100% + 14px) !important; } } .cart-items__header{ display:none; gap: var(--gap-md); padding-bottom: var(--margin-sm); margin-bottom: var(--margin-lg); font-size: var(--cart-header-size, 12px); font-weight: var(--cart-header-weight, 500); text-transform: uppercase; letter-spacing: .04em; opacity: 1; align-items: end; border-bottom: var(--cart-divider-thickness, 1px) solid var(--cart-accent); color: var(--cart-accent) !important; } .cart-items__header-qty, .cart-items__header-item, .cart-items__header-total{ font-weight: 700 !important; } .cart-items__header *{ color: var(--cart-accent) !important; } .cart-items__table{ width:100%; border-collapse: collapse !important; } .cart-items__table *{ margin:0; } .cart-items__table-row{ display:grid; grid-template-columns: clamp(2.5rem, 15cqi, var(--cart-item-media-width-max)) minmax(0, 1fr) var(--cart-item-qty-width, 180px) var(--cart-item-price-width, 120px) var(--cart-item-remove-width, 44px); grid-template-areas: 'media details quantity price remove'; column-gap: var(--gap-md); align-items: center; padding-block: 20px; } .cart-items--dividers .cart-items__table-row{ border-bottom: var(--cart-divider-thickness, 1px) solid var(--cart-accent); } .cart-items__error{ grid-column: 1 / -1; grid-row: 2; padding-top: 10px; } .cart-items__media{ grid-area: media; padding:0; } .cart-items__details{ grid-area: details; color: rgb(var(--color-foreground-rgb) / var(--opacity-70)); } .cart-items__media-container{ display:flex; aspect-ratio: var(--ratio); position:relative; width:100%; overflow:hidden; border-radius: var(--cart-image-radius, 6px); } .cart-items__media-image{ width:100%; height:100%; object-fit: cover; border-radius: var(--cart-image-radius, 6px); } .cart-items__quantity{ grid-area: quantity; display:flex; justify-content:center; align-items:center; justify-self: center !important; position: relative !important; overflow: visible !important; } .cart-items__price{ grid-area: price; display:flex; justify-content:flex-start !important; align-items:center; text-align:left !important; justify-self: start !important; font-size: var(--cart-total-size, 14px); } .cart-items__price text-component{ font-size: var(--cart-total-size, 14px); font-weight: var(--cart-total-weight, 500) !important; display:block !important; width:100% !important; text-align:left !important; margin: 0 !important; padding: 0 !important; } .cart-items__remove-cell{ grid-area: remove; display:flex; justify-content:center; align-items:center; } .cart-items__title{ font-size: var(--cart-item-title-size, 14px); font-weight: var(--cart-item-title-weight, 600); color: var(--color-foreground); text-transform: var(--product-title-case); text-decoration:none; } .cart-items__meta, .cart-items__details *:not(.cart-items__title){ font-size: var(--cart-item-meta-size, 12px); font-weight: var(--cart-item-meta-weight, 400); } .cart-items__meta--line{ margin-top: 6px !important; color: var(--cart-accent) !important; } .cart-items__meta--line *{ color: var(--cart-accent) !important; } .cart-items__meta-line{ display: inline-flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; align-items: center !important; gap: 6px !important; opacity: .95 !important; } .cart-meta-sep{ margin: 0 2px !important; opacity: .9 !important; } @container cart-items (max-width: 540px){ .cart-items__meta-line{ flex-wrap: wrap !important; white-space: normal !important; } } .cart-qty-stepper{ width: 82px !important; min-width: 82px !important; max-width: 82px !important; height: 26px !important; min-height: 26px !important; border: 1px solid rgb(35 81 96 / 0.35) !important; border-radius: 4px !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; display: grid !important; grid-template-columns: 22px minmax(0, 1fr) 22px !important; align-items: stretch !important; position: relative !important; } .cart-qty-stepper__btn{ width: 22px !important; height: 26px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; font-weight: 400 !important; color: #235160 !important; cursor: pointer; } .cart-qty-stepper__btn span{ display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; } .cart-qty-stepper__val{ grid-column: 2 !important; width: 100% !important; min-width: 0 !important; height: 26px !important; border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important; text-align: center !important; padding: 0 4px !important; margin: 0 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; color: #235160 !important; caret-color: #235160 !important; font-variant-numeric: tabular-nums !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .cart-items__remove{ width: var(--cart-remove-btn, 44px); height: var(--cart-remove-btn, 44px); padding: 0; border: 0; background: transparent; box-shadow: none; display:flex; align-items:center; justify-content:center; color: var(--cart-accent); cursor: pointer; } .cart-remove__icon{ width: var(--cart-remove-icon, 18px); height: var(--cart-remove-icon, 18px); display:flex; align-items:center; justify-content:center; } .cart-remove__icon svg{ width: 100%; height: 100%; display:block; stroke: currentColor; fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .95; } @container cart-items (min-width: 720px){ .cart-items__header{ display:grid; grid-template-columns: clamp(2.5rem, 15cqi, var(--cart-item-media-width-max)) minmax(0, 1fr) var(--cart-item-qty-width, 180px) var(--cart-item-price-width, 120px) var(--cart-item-remove-width, 44px); } .cart-items__header-item{ grid-column: 1 / span 2; justify-self:start; } .cart-items__header-qty{ grid-column: 3; justify-self:center; text-align:center; } .cart-items__header-total{ grid-column: 4; justify-self:start; text-align:left; } .cart-items__header-remove{ grid-column: 5; } } @container cart-items (max-width: 719px){ .cart-items__table-row{ grid-template-areas: 'media details price remove' 'media quantity price remove'; grid-template-columns: clamp(2.5rem, 15cqi, var(--cart-item-media-width-max)) minmax(0, 1fr) minmax(6rem, auto) var(--cart-item-remove-width, 44px); align-items: start; } .cart-items__quantity{ justify-content:flex-start; justify-self: start !important; } .cart-items__price{ justify-content:flex-end; text-align:right; justify-self: end !important; } } @media screen and (max-width: 767px) { .template-cart .cart-items__table-row { grid-template-areas: 'media details remove' 'media price quantity'; grid-template-columns: 56px minmax(0, 1fr) 30px; row-gap: 4px; column-gap: 8px; align-items: start; padding: 8px 0; margin-bottom: 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid rgba(35, 81, 96, 0.18); } .template-cart .cart-items--dividers .cart-items__table-row { border-bottom: 1px solid rgba(35, 81, 96, 0.18); } .template-cart .cart-items__media-container { aspect-ratio: 1 / 1; border-radius: 8px; } .template-cart .cart-items__details { display: grid; gap: 3px; align-self: start; min-width: 0; } .template-cart .cart-items__details p { margin: 0; } .template-cart .cart-items__title { display: block; font-size: 0.86rem; line-height: 1.18; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; padding-right: 6px; } .template-cart .cart-items__meta, .template-cart .cart-items__details *:not(.cart-items__title) { font-size: 0.72rem; line-height: 1.2; } .template-cart .cart-items__variants { margin: 0; } .template-cart .cart-items__meta--line { margin-top: 4px !important; } .template-cart .cart-items__meta-line { display: inline-flex; flex-wrap: wrap; gap: 4px; } /* Extra breathing room between cart items */ .template-cart .cart-items__table-row { padding-top: 18px !important; padding-bottom: 18px !important; } .template-cart .cart-items__price { grid-area: price; justify-content: flex-start !important; justify-self: start !important; align-self: center; text-align: left !important; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 6px; } .template-cart .cart-items__price-label { font-size: 0.76rem; font-weight: 600; line-height: 1; opacity: 0.95; } .template-cart .cart-items__price text-component { text-align: left !important; font-size: 0.86rem; font-weight: 700 !important; } .template-cart .cart-items__quantity { grid-area: quantity; justify-content: flex-end !important; justify-self: end !important; align-self: center; } .template-cart .cart-items__remove-cell { grid-area: remove; justify-content: flex-end; justify-self: end; align-self: start; } .template-cart .cart-items__remove { width: 32px; height: 32px; } .template-cart .cart-remove__icon { width: 16px; height: 16px; } .template-cart .cart-qty-stepper { width: 70px !important; min-width: 70px !important; max-width: 70px !important; height: 24px !important; min-height: 24px !important; grid-template-columns: 20px minmax(0, 1fr) 20px !important; border-radius: 8px !important; } .template-cart .cart-qty-stepper__btn { width: 20px !important; height: 24px !important; } .template-cart .cart-qty-stepper__btn span { font-size: 10px !important; } .template-cart .cart-qty-stepper__val { height: 24px !important; font-size: 10px !important; padding: 0 2px !important; } .template-cart .cart-qty__max { top: calc(100% + 4px) !important; font-size: 10px !important; } } .cart-qty__max{ position: absolute !important; top: calc(100% + 6px) !important; left: 50% !important; transform: translateX(-50%) !important; white-space: nowrap !important; font-size: 10px !important; line-height: 1.2 !important; color: rgba(180, 0, 0, .85) !important; display: none !important; pointer-events: none !important; } .cart-qty__max.is-show{ display: inline-block !important; } @media screen and (min-width: 768px) { .template-cart .cart-items__media-container, .template-cart .cart-items__media-image { border-radius: 5px !important; } .template-cart .cart-items__media-container { overflow: hidden !important; } .template-cart .cart-items__price-label { display: none !important; } } /* END_SNIPPET:cart-products */ /* START_SNIPPET:cart-summary (INDEX:155) */ @media screen and (max-width: 767px) { .template-cart .cart__summary-totals { background: #ffffff; border: 1px solid rgba(35, 81, 96, 0.16); border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); } .template-cart .cart__summary-lines { display: grid; gap: 7px; } .template-cart .cart__summary-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .template-cart .cart__summary-label, .template-cart .cart__summary-value { font-size: 0.88rem; line-height: 1.3; } .template-cart .cart__summary-divider { margin: 18px 0; border-top: 1px solid rgba(35, 81, 96, 0.25); } .template-cart .cart__total-label, .template-cart .cart__total-value { font-size: 1.05rem; line-height: 1.25; font-weight: 700; } .template-cart .cart__total { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .template-cart .cart__total-label { display: inline !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap; } .template-cart .cart__ctas { margin-top: 14px; display: flex; justify-content: center; background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } .template-cart .cart__checkout-button, .template-cart .cart__checkout-button.button, .template-cart button.cart__checkout-button { width: min(100%, 300px); min-width: 0; max-width: 300px; padding-inline: 14px; min-height: 38px; border-radius: 9999px !important; -webkit-border-radius: 9999px !important; clip-path: none !important; overflow: visible !important; font-size: 0.875rem; font-weight: 600; } } /* END_SNIPPET:cart-summary */ /* START_SNIPPET:collection-card (INDEX:157) */ .collection-card { --fixed-card-height: var(--height-small); flex: 1 1 var(--card-width-small); width: 100%; position: relative; } .collection-card > svg { height: 100%; width: 100%; aspect-ratio: var(--ratio); } .collection-card__inner { width: 100%; overflow: hidden; position: relative; gap: var(--collection-card-gap); display: flex; flex-direction: column; } .collection-card--image-bg .collection-card__inner { height: 100%; } .collection-card__inner { z-index: var(--layer-flat); pointer-events: none; a, button { /* only allow interactive elements to be clickable separate from .collection-card__link */ pointer-events: auto; } } /* allow all blocks to be selectable in editor preview */ .shopify-design-mode .collection-card__content * { pointer-events: auto; } .collection-card__content { position: relative; display: flex; height: 100%; width: 100%; max-width: 100%; gap: var(--collection-card-gap); flex-direction: column; align-items: var(--horizontal-alignment); justify-content: var(--vertical-alignment); } .collection-card__link { position: absolute; inset: 0; /* allows focus outline to have radius in supported browsers */ border-radius: var(--border-radius); } /* Nested image block rules */ .collection-card.collection-card--image-bg { aspect-ratio: var(--ratio); } .collection-card.collection-card--image-bg .collection-card__content { padding: var(--padding-lg); } /* Bento layout rules */ .collection-card--image-height-fixed .collection-card__image { height: var(--fixed-card-height); width: 100%; } .collection-card--image-height-fixed.collection-card--image-bg { height: var(--fixed-card-height); aspect-ratio: unset; } .collection-card__image .image-block__image { object-fit: cover; width: 100%; height: 100%; max-width: 100%; } .collection-card--image-bg .collection-card__image { position: absolute; width: 100%; height: 100%; } .collection-card__image svg { height: 100%; width: 100%; } .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio { &.collection-card.collection-card--image-bg, &.collection-card .placeholder-svg { aspect-ratio: 99; } .collection-card__image { aspect-ratio: 99; height: 100%; } .collection-card__inner { display: flex; flex-direction: column; height: 100%; } .collection-card__content { flex-shrink: 0; } &:not(.collection-card--image-bg) .collection-card__content { height: auto; } } /* END_SNIPPET:collection-card */ /* START_SNIPPET:contact-form (INDEX:159) */ .contact-form__form { display: flex; flex-direction: column; gap: var(--gap-md); } .contact-form__form-row { display: flex; flex-direction: column; gap: var(--gap-md); @media screen and (min-width: 750px) { flex-direction: row; align-items: center; } } .contact-form__input { width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--color-input-text); background-color: var(--color-input-background); padding: var(--padding-lg) var(--padding-xl); border-radius: var(--style-border-radius-inputs); border: var(--style-border-width-inputs) solid var(--color-input-border); -webkit-font-smoothing: antialiased; } .contact-form__input--textarea { resize: vertical; min-height: var(--input-textarea-min-height); } .contact-form__error, .contact-form__success { display: flex; align-items: center; gap: var(--gap-xs); } /* END_SNIPPET:contact-form */ /* START_SNIPPET:disclosure-content (INDEX:160) */ .disclosure-content { display: grid; grid-template-rows: 1fr; /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ clip-path: inset(-5% -5% 0 -5%); opacity: 1; &[inert] { grid-template-rows: 0fr; opacity: 0; } & > * { min-height: 0; } } @media (prefers-reduced-motion: no-preference) { .disclosure-content { transition-property: grid-template-rows, opacity; transition-duration: var(--surface-transition-duration); transition-timing-function: var(--surface-transition-timing); } } /* END_SNIPPET:disclosure-content */ /* START_SNIPPET:disclosure-trigger (INDEX:161) */ .disclosure-trigger { cursor: pointer; color: var(--color-foreground); display: flex; align-items: center; justify-content: space-between; padding-block: var(--padding-sm); width: 100%; border: none; background: #0000; &[aria-expanded='true'] .horizontal { rotate: 90deg; } &:is(:hover, :focus-visible) { color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .horizontal { transform-box: fill-box; transform-origin: center; } svg { aspect-ratio: 1; width: var(--icon-size-xs); } } .disclosure-trigger__label { display: flex; align-items: flex-start; gap: var(--gap-2xs); font-size: var(--cart-font-size--sm); } @media (prefers-reduced-motion: no-preference) { .disclosure-trigger .horizontal { transition: rotate var(--surface-transition-duration) var(--surface-transition-timing); } } /* END_SNIPPET:disclosure-trigger */ /* START_SNIPPET:divider (INDEX:162) */ .divider { align-self: stretch; display: flex; align-items: center; justify-content: var(--divider-justify-content); } .divider__line { border-bottom: var(--divider-border-thickness) solid var(--color-border); border-right: var(--divider-border-thickness) solid var(--color-border); border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded)); flex-basis: var(--divider-flex-basis); min-height: var(--divider-flex-basis); } /* END_SNIPPET:divider */ /* START_SNIPPET:editorial-blog-grid (INDEX:165) */ .editorial-blog__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: var(--gap-xl); .shopify-block { height: 100%; } } .editorial-blog__spacer { aspect-ratio: 1; } @media (max-width: 768px) { .editorial-blog__grid { display: flex; flex-direction: column; gap: var(--gap-2xl); } .editorial-blog__spacer { display: none; } .featured-blog-posts-card__image { min-height: 200px; } /* Mobile layout - also horizontally mirrored from collection grid */ .editorial-blog__item-0 { width: 66%; align-self: flex-end; /* Originally flex-start, now flex-end */ } .editorial-blog__item-1 { width: 83%; align-self: flex-start; /* Originally flex-end, now flex-start */ } .editorial-blog__item-2 { width: 83%; align-self: flex-end; /* Originally flex-start, now flex-end */ } .editorial-blog__item-3 { width: 100%; align-self: center; /* Stays centered */ } } /* END_SNIPPET:editorial-blog-grid */ /* START_SNIPPET:editorial-collection-grid (INDEX:166) */ .editorial-collection__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: var(--gap-xl); .resource-list__item, .collection-card { height: 100%; } } .editorial-collection__spacer { aspect-ratio: 1; } @media (max-width: 768px) { .editorial-collection__grid { display: flex; flex-direction: column; gap: var(--gap-2xl); } .editorial-collection__spacer { display: none; } .editorial-collection__item-0 { width: 66%; align-self: flex-start; aspect-ratio: 4 / 5; } .editorial-collection__item-1 { width: 83%; align-self: flex-end; aspect-ratio: 5 / 5; } .editorial-collection__item-2 { width: 83%; align-self: flex-start; aspect-ratio: 8 / 6; } .editorial-collection__item-3 { width: 100%; align-self: center; aspect-ratio: 8 / 6; } } /* END_SNIPPET:editorial-collection-grid */ /* START_SNIPPET:editorial-product-grid (INDEX:167) */ .editorial-product__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: var(--gap-xl); /* Make the aspect ratio super high on width, then increase the height of * slideshow containers until they fill all the available space */ .card-gallery { /* stylelint-disable-next-line declaration-no-important */ --gallery-aspect-ratio: 99 !important; } .card-gallery, slideshow-component, slideshow-container, slideshow-slides { height: 100%; } } .editorial-product__spacer { aspect-ratio: 1; } @media (max-width: 768px) { .editorial-product__grid { display: flex; flex-direction: column; gap: var(--gap-2xl); } .editorial-product__spacer { display: none; } .editorial-product__item-0 { width: 83%; align-self: flex-start; aspect-ratio: 7 / 6; } .editorial-product__item-1 { width: 83%; align-self: flex-end; aspect-ratio: 4 / 5; } .editorial-product__item-2 { width: 66%; align-self: flex-start; aspect-ratio: 5 / 5; } .editorial-product__item-3 { width: 100%; aspect-ratio: 8 / 6; } } /* END_SNIPPET:editorial-product-grid */ /* START_SNIPPET:facets-actions (INDEX:168) */ /* Facets - Actions */ .facets__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 ); order: 1; position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: stretch; gap: var(--gap-sm); background-image: var(--to-top-gradient-background); z-index: var(--facets-sticky-z-index); padding-block-start: var(--padding-xs); padding-block-end: var(--padding-md); padding-inline: var(--padding-lg); margin-top: auto; } .facets:not(.facets--drawer) .facets__actions { @media screen and (min-width: 750px) { position: static; } } .facets--vertical .facets__actions { padding-inline: 0; justify-content: center; } .facets--horizontal .facets__actions { @media screen and (min-width: 750px) { order: 0; bottom: auto; position: static; padding: 0; z-index: var(--layer-flat); flex-shrink: 0; align-items: center; margin-top: initial; background-image: none; } } .facets--horizontal .facets__actions--active::before { @media screen and (min-width: 750px) { content: ''; border-inline-start: var(--style-border-width) solid var(--color-border); height: var(--font-paragraph--size); position: absolute; } } /* 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; } } .clear-filter:hover { text-decoration: underline; background-color: transparent; } /* Clear all button */ .facets__clear-all { display: none; cursor: pointer; min-width: var(--facets-clear-all-min-width); transition: transform var(--animation-values), opacity var(--animation-values); opacity: 0; transform: translateY(100%); flex-grow: 1; padding-block: var(--padding-lg); } .facets:not(.facets--drawer) .facets__clear-all { box-shadow: none; } .facets--horizontal .facets__clear-all { @media screen and (min-width: 750px) { --facets-clear-all-min-width: var(--minimum-touch-target); --button-color: var(--color-primary); text-decoration: underline transparent 0.075em; text-underline-offset: 0.125em; width: auto; transform: none; opacity: 1; height: var(--minimum-touch-target); align-items: center; flex-grow: 0; transition: text-decoration-color var(--animation-speed) var(--animation-easing); } } .facets--horizontal .facets__clear-all:hover { @media screen and (min-width: 750px) { --button-color: var(--color-primary-hover); } } @starting-style { .facets__clear-all { opacity: 1; transform: translateY(0); } } .facets__clear-all.active { transform: translateY(0); opacity: 1; display: grid; } .facets--horizontal .facets__clear-all.active { @media screen and (min-width: 750px) { padding-block: 0; padding-inline: var(--facets-form-horizontal-gap); background-color: transparent; position: static; transform: none; } } @starting-style { .facets__clear-all.active { opacity: 0; transform: translateY(100%); } .facets--horizontal .facets__clear-all.active { @media screen and (min-width: 750px) { opacity: 1; transform: none; } } } .facets__see-results { min-width: var(--facets-see-results-min-width); flex-grow: 1; padding-block: var(--padding-lg); } .facets:not(.facets--drawer) .facets__see-results { @media screen and (min-width: 750px) { display: none; } } /* END_SNIPPET:facets-actions */ /* START_SNIPPET:filter-remove-buttons (INDEX:169) */ /* 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__clear-all-link { --button-color: var(--color-primary); border: none; background-color: transparent; padding: var(--padding-xs); min-width: fit-content; 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); color: var(--button-color); text-decoration-color: var(--button-color); } .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:filters-toggle (INDEX:170) */ /* Facets - Toggle */ .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 */ .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%; } } } /* END_SNIPPET:filters-toggle */ /* START_SNIPPET:gift-card-recipient-form (INDEX:173) */ .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 { /* 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; 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; 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) { 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 */ /* START_SNIPPET:grid-density-controls (INDEX:174) */ /* ========================= WRAPPER ALIGNMENT ========================= */ .column-options-wrapper{ display:flex; align-items:center; justify-content:flex-end; min-width: fit-content; height: var(--minimum-touch-target); } .column-options-wrapper:only-child{ margin-left:auto; } .column-options{ display:flex; align-items:center; gap: 10px; margin:0; padding:0; border:none; } .column-options__legend{ padding:0; margin:0; } /* mobile only */ .column-options__option{ position:relative; display:none; } .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-input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; } /* ========================= DESKTOP DROPDOWN ========================= */ .gridview{ position: relative; display: none; } @media screen and (min-width: 750px){ .gridview{ display:inline-flex; } } /* remove default marker */ .gridview__trigger{ list-style:none; } .gridview__trigger::-webkit-details-marker{ display:none; } /* trigger button (bigger icon + darker) */ .gridview__trigger{ height: 36px; display:inline-flex; align-items:center; justify-content:center; gap: 8px; padding: 0 10px; border-radius: 10px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.16); background: rgb(var(--color-foreground-rgb) / 0.03); cursor:pointer; transition: background .15s ease, border-color .15s ease; } .gridview__trigger:hover{ background: rgb(var(--color-foreground-rgb) / 0.06); border-color: rgb(var(--color-foreground-rgb) / 0.22); } .gridview[open] .gridview__trigger{ border-color: rgb(var(--color-foreground-rgb) / 0.28); } /* icon bigger + darker */ .gridview__icon{ display:inline-flex; align-items:center; justify-content:center; color: rgb(var(--color-foreground-rgb) / 0.92); } .gridview__icon svg{ width: 20px !important; height: 20px !important; } /* caret */ .gridview__caret{ display:inline-flex; align-items:center; justify-content:center; color: rgb(var(--color-foreground-rgb) / 0.65); } .gridview[open] .gridview__caret{ transform: rotate(180deg); } /* popup */ .gridview__menu{ position:absolute; top: calc(100% + 10px); right: 0; width: 140px; /* smaller popup */ padding: 10px; border-radius: 14px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.12); background: rgb(var(--color-background-rgb)); box-shadow: 0 16px 36px rgba(0,0,0,0.14); display:none; z-index: 60; } .gridview[open] .gridview__menu{ display:grid; gap: 10px; } /* remove extra borders: only border on label */ .gridview__item{ position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; } /* radio hidden */ .gridview__radio{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; } /* label = border pill (spacing fixed) */ .gridview__label{ width: 100%; text-align:center; padding: 8px 10px; /* ✅ spacing */ border-radius: 999px; border: 1px solid rgb(var(--color-foreground-rgb) / 0.18); background: transparent; font-weight: 600; font-size: 13px; color: rgb(var(--color-foreground-rgb) / 0.78); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } /* hover */ .gridview__item:hover .gridview__label{ background: rgb(var(--color-foreground-rgb) / 0.04); border-color: rgb(var(--color-foreground-rgb) / 0.26); } /* selected effect (strong & professional) */ .gridview__item:has(input:checked) .gridview__label{ background: rgb(var(--color-foreground-rgb) / 0.10); border-color: rgb(var(--color-foreground-rgb) / 0.45); color: rgb(var(--color-foreground-rgb)); transform: translateY(-1px); } /* END_SNIPPET:grid-density-controls */ /* START_SNIPPET:group (INDEX:175) */ /* Link overlay */ .group-block__link { position: absolute; inset: 0; } .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) { pointer-events: none; } .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) :is(a, button, input, textarea, select) { pointer-events: auto; } /* Needs to be specific enough in editor */ .group-block__link ~ .group-block-content--design-mode { pointer-events: auto; } /* ================================ ✅ WIDTH CONTROL (DESKTOP/MOBILE) Works with your settings: width: fit-content / fill / custom custom_width: up to 200% ================================ */ .group-block{ /* force override theme max-width constraints */ max-width: none !important; width: var(--gb-width, 100%) !important; /* if width < 100%, center it nicely */ margin-inline: auto !important; } @media (max-width: 749px){ .group-block{ width: var(--gb-width-mobile, 100%) !important; max-width: none !important; margin-inline: auto !important; } } /* If fit-content: don’t center by default (optional nicer behavior) */ .group-block--width-fit-content{ margin-inline: 0 !important; } /* ========================================== ✅ MAKE CHILD BLOCKS “FOLLOW” GROUP WIDTH Only when column layout (so row layouts won’t break). ========================================== */ .group-block--stretch-children.group-block--dir-column .group-block-content{ align-items: stretch !important; } .group-block--stretch-children.group-block--dir-column .group-block-content > *{ width: 100% !important; max-width: 100% !important; } /* If row on desktop but vertical_on_mobile enabled, stretch only on mobile column */ @media (max-width: 749px){ .group-block--stretch-children .group-block-content.mobile-column{ align-items: stretch !important; } .group-block--stretch-children .group-block-content.mobile-column > *{ width: 100% !important; max-width: 100% !important; } } /* Extra: common button elements should always expand with group */ .group-block--stretch-children.group-block--dir-column .group-block-content :is( .button, button, a.button, .shopify-payment-button__button, .product-form__submit, .vp-btn, details.vp-select ){ width: 100% !important; max-width: 100% !important; } /* Allow group to visually expand beyond its container */ .group-block{ max-width: none !important; width: var(--gb-width, 100%) !important; } /* IMPORTANT: if group width is > 100%, stop centering it */ .group-block--width-custom{ margin-inline: 0 !important; } /* Let parent containers allow overflow */ .product__info-wrapper, .product__info-container, .product__info, .section, .page-width{ overflow: visible !important; max-width: none !important; } /* If parent is using grid, force it to allow wider content */ .product__info-wrapper, .product__info-container{ width: 100% !important; } /* END_SNIPPET:group */ /* START_SNIPPET:header-actions (INDEX:176) */ .cart-drawer { --cart-drawer-padding: var(--padding-lg) var(--padding-xl); --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl); --cart-font-size--2xs: var(--font-size--2xs); --cart-font-size--xs: var(--font-size--xs); --cart-font-size--sm: var(--font-size--sm); --cart-font-size--md: var(--font-size--md); --cart-font-size--2xl: var(--font-size--2xl); } .cart-drawer__dialog { position: fixed; border-radius: 0; width: var(--sidebar-width); max-width: 95vw; 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); } .cart-drawer__dialog:modal { max-height: 100dvh; overflow-y: hidden; } .cart-drawer__inner { height: 100%; } .cart-drawer__content { padding: 0; background-color: var(--color-background); display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; } .cart-drawer__heading { display: flex; align-items: center; gap: var(--gap-xs); } .cart-drawer__close-button { margin-right: calc(var(--padding-sm) * -1); } .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); display: flex; flex-direction: column; align-items: center; gap: var(--gap-2xl); 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__summary .cart__summary-totals:not(:has(.cart__original-total-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--empty .cart-drawer__header { justify-content: right; border-bottom: none; padding-bottom: 0; } .cart-drawer--empty .cart-drawer__heading { 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; } header-actions { display: flex; @media screen and (max-width: 749px) { justify-self: flex-end; } } .header__column--right header-actions { margin-inline-start: calc(var(--gap-md) * -1); } .header-actions__action { --button-color: var(--color-foreground); cursor: pointer; display: flex; justify-content: center; } .header-actions__action .svg-wrapper { height: var(--button-size); width: var(--button-size); } .header-actions__action svg { width: var(--icon-size-md); height: var(--icon-size-md); } .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); } .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__background { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25)); } .cart-drawer__heading .cart-bubble__text { color: var(--color-foreground); font-size: var(--font-size--xs); } .cart-bubble--animating .cart-bubble__background { animation: grow var(--animation-speed) var(--animation-easing); } .cart-bubble--animating .cart-bubble__text { animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing); } /* END_SNIPPET:header-actions */ /* START_SNIPPET:header-drawer (INDEX:177) */ .header__icon--menu { position: initial; } @media screen and (min-width: 750px) { .header--desktop header-menu + .header__drawer header-drawer { display: none; } } .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); } .header__drawer { display: flex; min-height: 60px; align-items: center; @media screen and (min-width: 750px) { min-height: 0; } } .header--compact .header__drawer { min-height: var(--minimum-touch-target); } .menu-drawer__navigation { padding: 0; @media screen and (min-width: 750px) { margin-top: var(--drawer-header-desktop-top); } } details:not([open]) .header__icon--menu .header-drawer-icon--close { display: none; } details[open] .header__icon--menu .header-drawer-icon--close { @media screen and (min-width: 750px) { display: none; } } details[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; } .header__drawer--desktop & { height: 100vh; } } .menu-drawer:has(details[open]) { 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; will-change: transform; } .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; 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-start: 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-start: 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; padding: var(--padding-lg); will-change: transform; } .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; } @media screen and (max-width: 767px) { .menu-drawer-container, .menu-drawer-container[open] { position: static; } .menu-drawer-container[open] > summary { visibility: hidden; } .menu-drawer { left: 0; right: 0; top: 0; bottom: 0; height: 100dvh; width: 100vw; max-width: 100vw; border-right: none; box-shadow: none; padding-top: max(env(safe-area-inset-top), 0px); z-index: 1002; overflow-x: hidden; overflow-y: auto; } .menu-drawer__backdrop { z-index: 1001; } .menu-drawer__inner-container, .menu-drawer__navigation-container { height: 100dvh; } .menu-drawer__close-button { padding: 18px 14px 12px; margin-top: 10px; } .menu-drawer__navigation { margin-top: 12px; } .menu-drawer__menu { padding-inline: 12px; } .menu-drawer__submenu { height: 100dvh; background-color: var(--color-background); } .menu-drawer__submenu .menu-drawer__menu { padding-top: 8px; } .menu-drawer__menu > .menu-drawer__list-item { min-height: 0; } .menu-drawer__menu-item { min-height: 44px; padding-block: 11px; gap: 10px; } .menu-drawer__menu-item--mainlist, .menu-drawer__menu-item--parent { font-size: 1.06rem !important; font-weight: 400 !important; line-height: 1.35 !important; } .menu-drawer__menu-item--child { font-size: 0.96rem !important; font-weight: 400 !important; line-height: 1.4 !important; } .menu-drawer__menu-item-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-drawer__menu-item > .svg-wrapper { margin-left: auto; width: 20px; min-width: 20px; height: 20px; padding: 0 0 0 12px; display: inline-flex; align-items: center; justify-content: center; } .menu-drawer__menu-item > .svg-wrapper svg { width: 19px; height: 19px; } .menu-drawer__utility-links { margin-inline: 12px; margin-block: auto 12px; background-color: transparent; } .menu-drawer__nav-buttons { position: sticky; top: 0; z-index: 3; background: var(--color-background); padding-top: 14px; padding-bottom: 4px; padding-inline: 12px; border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.3); margin-bottom: 4px; } .menu-drawer__back-button { padding: 14px 0; font-size: 1rem; min-height: 50px; } .menu-drawer__back-button > .svg-wrapper { width: 20px; height: 20px; margin-right: 10px; } .menu-drawer__caret svg { width: 19px; height: 19px; } .menu-drawer__menu details[open] > summary .menu-drawer__caret svg { transform: rotate(0deg); } .menu-drawer__menu details:not([open]) > summary .menu-drawer__caret svg { transform: rotate(-90deg); } .menu-drawer__menu .menu-drawer__list-item:has(> .menu-drawer__menu-item[href*='/account/login']), .menu-drawer__menu .menu-drawer__list-item:has(> .menu-drawer__menu-item[href*='/account/register']), .menu-drawer__menu .menu-drawer__list-item:has(> .menu-drawer__menu-item[href*='/pages/custom-login']) { display: none !important; } } .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); } } /* END_SNIPPET:header-drawer */ /* START_SNIPPET:jumbo-text (INDEX:183) */ .jumbo-text__container { width: 100%; } footer .jumbo-text__container { pointer-events: none; } jumbo-text { display: block; font-family: var(--font-family, inherit); font-style: var(--font-style, normal); color: var(--color, inherit); font-weight: var(--font-weight, inherit); letter-spacing: var(--letter-spacing, -0.02em); line-height: var(--line-height, 1); opacity: 0; text-align: var(--text-align); text-box: var(--text-trim, trim-end cap text); text-transform: var(--text-transform, none); transition: opacity 0.3s ease; white-space: pre; width: 100%; will-change: font-size; margin-left: var(--margin-left-nudge, 0); margin-right: var(--margin-right-nudge, 0); overflow: visible; } jumbo-text.ready { opacity: 1; } jumbo-text[data-cap-text='true'] { /* stylelint-disable-next-line plugin/no-unsupported-browser-features */ text-box-edge: cap text; } .jumbo-text-space { display: inline-flex; width: 0.5ch; } :is(.jumbo-text-char, .jumbo-text-line) { display: inline-flex; } @media (prefers-reduced-motion: no-preference) { /* Blur effect */ [data-text-effect='blur'] { filter: blur(20px); opacity: 0.5; scale: 1.05; transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in), scale 1.6s var(--animation-timing-fade-in); } .jumbo-text-visible[data-text-effect='blur'] { filter: blur(0); opacity: 1; scale: 1; } /* Reveal effect */ .ready[data-text-effect='reveal'], .ready[data-text-effect='reveal'] .jumbo-text-line { overflow: hidden; } .ready[data-text-effect='reveal'] .jumbo-text-char { transform: translateY(100%); } .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-char { transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s); transform: translateY(0); } .jumbo-text-visible[data-text-effect='reveal'], .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line { overflow: visible; transition: overflow 0s linear 0.75s; } } /* END_SNIPPET:jumbo-text */ /* START_SNIPPET:list-filter (INDEX:186) */ .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(:has(.checkbox__input: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)); } .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85)); } .facets .checkbox:not(:has(.checkbox__input: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; opacity: 0; cursor: pointer; } /* Swatches */ .facets__status--swatches { display: none; } .facets__swatch-wrapper { display: flex; } .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; &.variant-option--swatches-disabled, &:has(input:disabled) { cursor: not-allowed; } } .facets__inputs-wrapper .facets__inputs-list--swatches-grid label { cursor: pointer; word-break: break-word; white-space: normal; .variant-option--swatches-disabled &, .variant-option--swatches:has(input:disabled) & { cursor: not-allowed; } } .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch { 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--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)); } .variant-option--images { position: relative; } .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); 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:not(:has(input:disabled)), &:has(input:checked) { --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); } &:has(input:disabled), &:has(input:disabled):hover { --image-facet-border-opacity: 0; opacity: var(--disabled-opacity); cursor: not-allowed; 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); } } } .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); } /* 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; } .facets__image-label { width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block-end: var(--padding-xs); cursor: pointer; .variant-option--images:has(input:disabled) & { cursor: not-allowed; } } .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) { font-weight: 500; } .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover { font-weight: 500; } /* END_SNIPPET:list-filter */ /* START_SNIPPET:localization-form (INDEX:187) */ /* Localization */ localization-form-component { display: flex; width: var(--width, auto); @media screen and (min-width: 750px) { position: relative; } } localization-form-component[data-show-filter='false'] .country-selector-form__wrapper { padding-block-start: var(--padding-xs); } .localization-form { width: 100%; } localization-form-component .button:is(:not(.country-filter__reset-button)) { --button-color: var(--color-primary); --button-background-color: var(--language-button-background-color, var(--color-background)); --button-border-color: var(--language-button-border-color, var(--color-border)); text-decoration-color: transparent; text-decoration-thickness: 0.075em; text-underline-offset: 0.125em; transition: text-decoration-color var(--animation-speed) var(--animation-easing); } localization-form-component .button:is(:not(.country-filter__reset-button)):hover, .localization-form__list-item:hover, .localization-form__list-item:focus { --button-color: var(--color-primary-hover); background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8)); } .localization-form__list-item[aria-current='true'] { --button-color: var(--color-primary-active); background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10)); } .localization-form__list-item-disabled { pointer-events: none; } .localization-form__list-item:focus-visible { outline: none; } localization-form-component .localization-selector { display: flex; align-items: center; gap: var(--margin-2xs); } localization-form-component .country-filter__search-icon { left: 8px; right: auto; color: var(--color-foreground-muted); pointer-events: none; } .country-filter__search-icon .svg-wrapper svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .disclosure { width: 100%; } .dropdown-localization__button { display: flex; position: relative; align-items: center; gap: 4px; font-family: var(--menu-localization-font); font-size: var(--menu-localization-font-size); font-weight: var(--menu-top-level-font-weight); padding-inline: var(--padding-2xs); margin-inline: calc(-1 * var(--padding-2xs)); } .dropdown-localization__button .icon-caret { height: var(--icon-size-xs); width: var(--icon-size-xs); right: var(--margin-xs); top: calc(50% - var(--padding-2xs)); flex-shrink: 0; transition: transform var(--animation-speed) var(--animation-easing); } .drawer-localization__button .icon-flag, .dropdown-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; } .icon-flag::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow); border-radius: 50%; } .dropdown-localization__button[aria-expanded='true'] .icon-caret svg { transform: rotate(180deg); } .dropdown-localization__button, .dropdown-localization__button:hover { box-shadow: none; background-color: transparent; border-color: transparent; color: var(--color-foreground); } .localization-form__list { position: relative; width: 100%; padding-block: 0 var(--padding-xs); font-size: var(--font-size-lg); scroll-padding: var(--padding-xs) 0; overflow-y: auto; white-space: nowrap; /* Hide scrollbar which would cause extra right padding in Safari */ scrollbar-width: none; &::-webkit-scrollbar { display: none; } } dropdown-localization-component .localization-form__list { max-height: 20.5rem; } .localization-wrapper { position: fixed; z-index: var(--layer-raised); border-radius: var(--style-border-radius-popover); transition-property: display, opacity, translate; transition-duration: 0.3s; transition-timing-function: var(--ease-out-quad); transition-behavior: allow-discrete; translate: 0 20px; opacity: 0; } .localization-wrapper:not([hidden]) { translate: 0 0; opacity: 1; } @starting-style { .localization-wrapper:not([hidden]) { translate: 0 20px; opacity: 0; } } .localization-form__list-item:not([hidden]) { margin-block-end: var(--margin-3xs); display: flex; gap: var(--margin-sm); padding: 8px; border-radius: 8px; line-height: var(--font-line-height-md); align-items: center; text-align: start; cursor: pointer; transition: background-color var(--animation-speed) var(--animation-easing); .country { flex: 1; color: var(--color-foreground); } &:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } &[aria-current='true'] { .country { font-weight: 500; } } } .localization-form__list-item#no-results-message { grid-template-columns: 1fr; text-align: center; color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .is-searching .localization-form__list-item .country { color: rgb(var(--color-foreground-rgb) / var(--opacity-80)); } .localization-form__list-item .country mark { font-weight: 500; background: none; color: var(--color-foreground); } .country-filter { position: relative; padding: var(--padding-xs); border-bottom: var(--style-border-width) solid transparent; transition: border-color var(--animation-values); } .country-filter.is-scrolled { border-color: var(--color-border); } .drawer-localization .country-filter { padding-block: 8px; } dropdown-localization-component .country-filter { position: relative; padding: 8px; } .country-selector-form__wrapper { overflow-y: auto; max-height: 100%; flex-grow: 1; } .language-selector { display: flex; gap: var(--gap-xs); padding: var(--padding-md) var(--padding-lg); position: relative; align-items: center; justify-content: space-between; width: 100%; } .language-selector__label { flex-shrink: 0; color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } .localization-form__select { border: none; color: var(--color-foreground); appearance: none; background-color: var(--color-input-background); padding-block: var(--padding-3xs); padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs)); text-align: right; cursor: pointer; max-width: 40vw; text-overflow: ellipsis; &:focus-visible { outline: var(--focus-outline-width) solid currentcolor; } &:focus { outline: none; } } #header-component[transparent] localization-form-component .localization-form .localization-form__select { background-color: transparent; } .localization-form__select option { background-color: var(--color-input-background); color: var(--color-input-text); } dropdown-localization-component .localization-form__select:hover { background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8)); } .language-selector .svg-wrapper.icon-caret { width: var(--icon-size-xs); height: var(--icon-size-xs); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; } .language-selector--collapse-space { padding-inline-end: var(--padding-2xs); } .language-selector--collapse-space .localization-form__select { padding-inline-end: var(--icon-size-xs); } .language-selector--collapse-space .svg-wrapper.icon-caret { right: 0; } .localization-form .icon-checkmark { width: var(--icon-size-xs); height: var(--icon-size-xs); } .localization-form .svg-wrapper.icon-checkmark { visibility: hidden; } .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark { visibility: visible; } .country-filter__input { width: 100%; height: 44px; font-size: var(--font-size-lg); padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl)); border: 1px solid var(--color-foreground); color: var(--color-input-text); background-color: var(--color-input-background); outline-offset: -1px; @media screen and (min-width: 750px) { height: 36px; } } .country-filter__input::placeholder { color: inherit; } .country-filter .field { position: relative; } .country-filter .field__label { font-size: var(--font-size-lg); left: var(--margin-2xl); top: var(--margin-xl); pointer-events: none; position: absolute; } .country-filter__input:focus ~ .field__label, .country-filter__input:not(:placeholder-shown) ~ .field__label, .country-filter__input:-webkit-autofill ~ .field__label { font-size: var(--font-size-xs); top: var(--margin-xs); } .country-filter .field__button:not([hidden]) { display: flex; height: fit-content; position: absolute; padding: 0; right: 8px; top: 50%; transform: translateY(-50%); align-items: center; background-color: transparent; color: var(--color-input-text); border: 0; } input[type='search']::-webkit-search-cancel-button { appearance: none; } .country-selector__close-button { display: none; } .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); } dropdown-localization-component { position: relative; background-color: transparent; } dropdown-localization-component .country-filter__input { border: none; } dropdown-localization-component .localization-form__list-item { margin-inline: 8px; } dropdown-localization-component .localization-wrapper { box-shadow: var(--shadow-popover); border: var(--style-border-popover); background-color: var(--color-background); max-height: 27.5rem; position: absolute; top: calc(100% + 10px); z-index: calc(var(--layer-header-menu) + 1); } dropdown-localization-component .localization-wrapper.right-bound { right: 0; left: unset; } dropdown-localization-component .localization-wrapper.left-bound { left: -8px; right: unset; } /* Additional specificity due to dropdown-localization-component getting a low score */ dropdown-localization-component .language-selector.language-selector { padding: 10px 8px 10px 16px; } dropdown-localization-component .localization-form__currency { width: max-content; opacity: 0; visibility: hidden; transition: none; } dropdown-localization-component :is( .localization-form__list-item:hover, .localization-form__list-item[aria-selected='true'], .localization-form__list-item[aria-current='true'] ) .localization-form__currency { opacity: 1; color: var(--color-foreground-muted); transition: opacity var(--animation-speed-slow) var(--animation-easing); visibility: visible; } .dropdown-localization .language-selector:where(:not(.top-shadow)) { font-weight: var(--menu-top-level-font-weight); } .dropdown-localization:not(dropdown-localization-component) .language-selector, .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; } .header__column .localization-form__select { background-color: var(--header-bg-color); } .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:localization-form */ /* START_SNIPPET:media (INDEX:188) */ .media-block { overflow: hidden; position: relative; @media screen and (min-width: 750px) { min-height: var(--media-height); } } .media-block__media { height: var(--media-height-mobile, auto); object-fit: var(--image-position, 'cover'); object-position: center center; width: 100%; @media screen and (min-width: 750px) { height: 100%; position: absolute; } } deferred-media[class].media-block__media :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) { object-fit: var(--video-position, 'cover'); } /* This is to support corner radius on video and align the video to the center of the block */ .media-block__media--video { display: flex; align-items: center; justify-content: center; @media screen and (max-width: 749px) { --media-height-mobile: auto; } } /* END_SNIPPET:media */ /* START_SNIPPET:overlay (INDEX:194) */ .overlay { position: absolute; inset: 0; z-index: var(--overlay-layer); pointer-events: none; border-radius: var(--overlay-border-radius, 0); } .overlay--solid { background: var(--overlay-color); } .overlay--gradient { background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end)); } /* END_SNIPPET:overlay */ /* START_SNIPPET:pagination-controls (INDEX:195) */ .pagination { --pagination-size: 36px; --pagination-inset: 2px; --pagination-radius: 6; display: flex; justify-content: center; padding: var(--padding-xl) var(--padding-sm); margin-top: var(--padding-xl); position: relative; } .pagination__list { display: flex; gap: 0; align-items: center; list-style: none; margin: 0; padding: 0; position: relative; } .pagination__item { width: var(--pagination-size); aspect-ratio: 1; display: grid; place-items: center; } .pagination__link { display: grid; place-items: center; color: var(--color-foreground); text-decoration: none; width: 100%; height: 100%; user-select: none; position: relative; outline-color: var(--color-foreground); -webkit-tap-highlight-color: transparent; font-size: var(--font-size--md); font-weight: var(--font-weight-normal); border-radius: calc(var(--pagination-radius) * 1px); transition: color var(--hover-transition-duration) var(--hover-transition-timing), opacity var(--hover-transition-duration) var(--hover-transition-timing); } .pagination__link:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } .pagination__link--current { color: var(--color-background); font-weight: var(--font-weight-medium); cursor: default; } .pagination__link--gap { cursor: default; pointer-events: none; } .pagination__link--arrow { display: flex; align-items: center; justify-content: center; } .pagination__link--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .pagination__link svg { width: 0.5rem; height: 0.75rem; flex-shrink: 0; } .pagination__item--mobile-only { display: none; } /* Fallback for browsers without anchor positioning support */ @supports not (anchor-name: --pagination-active) { .pagination__link:not(.pagination__link--gap)::before { content: ''; position: absolute; inset: var(--pagination-inset); border-radius: calc(var(--pagination-radius) * 1px); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); z-index: -1; opacity: 0; transition: background var(--hover-transition-duration) var(--hover-transition-timing), opacity var(--hover-transition-duration) var(--hover-transition-timing); } .pagination__link[aria-current='page']::before { background: var(--color-foreground); opacity: 1; } .pagination__link:hover:not([aria-current='page']):not(.pagination__link--gap):not( .pagination__link--disabled )::before { opacity: 1; } } /* Modern approach with anchor positioning */ @supports (anchor-name: --pagination-active) { .pagination__list::before { content: ''; z-index: -1; position: absolute; width: calc(var(--pagination-size) - (2 * var(--pagination-inset))); aspect-ratio: 1; pointer-events: none; opacity: 0; border-radius: calc(var(--pagination-radius) * 1px); background: rgb(var(--color-foreground-rgb) / var(--opacity-10)); transition: left var(--hover-transition-duration) var(--hover-transition-timing), top var(--hover-transition-duration) var(--hover-transition-timing); } /* Hide hover indicator on touch devices */ @media (hover: none) and (pointer: coarse) { .pagination__list::before { content: unset; } } .pagination__list:has( .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap):not(.pagination__link--disabled) )::before { opacity: 1; } /* Style current page directly */ .pagination__link[aria-current='page']::before { content: ''; position: absolute; inset: var(--pagination-inset); border-radius: calc(var(--pagination-radius) * 1px); background: var(--color-foreground); z-index: -1; } .pagination__list .pagination__item:has( .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap):not(.pagination__link--disabled) ) { anchor-name: --pagination-hover; } /* Position hover indicator using anchor */ .pagination__list::before { position-anchor: --pagination-hover; left: calc(anchor(left) + var(--pagination-inset)); top: calc(anchor(top) + var(--pagination-inset)); } .pagination__item:has(+ .pagination__item--gap) .pagination__link::after, .pagination__item--gap + .pagination__item .pagination__link::after { position: absolute; content: ''; pointer-events: auto; } .pagination__item:has(+ .pagination__item--gap) .pagination__link::after { inset: 0 -50% 0 100%; } .pagination__item--gap + .pagination__item .pagination__link::after { inset: 0 100% 0 -50%; } } @media screen and (max-width: 749px) { .pagination { --pagination-size: 44px; --pagination-inset: 5px; padding: var(--padding-lg) var(--padding-sm); } .pagination__link { font-size: var(--font-size--sm); } .pagination__item--mobile-hide { display: none; } .pagination__item--mobile-only { display: grid; } .pagination__item:has(.pagination__link--gap) { width: calc(var(--pagination-size) * 0.5); } } /* END_SNIPPET:pagination-controls */ /* START_SNIPPET:predictive-search-products-list (INDEX:197) */ .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; } .search-modal .predictive-search-results__clear { font-size: 0.75rem; } /* Search popup heading: RECENTLY VIEWED / PRODUCTS */ .search-modal .predictive-search-results__title { font-family: var(--font-heading-family); font-size: 14px; /* ↓ smaller than before */ font-weight: 700; /* make it bold */ letter-spacing: 0px; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.85); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 12px; margin-bottom: 12px; } /* Search popup product titles under image */ .search-modal .predictive-search-results__card .resource-card__title, .search-modal .predictive-search-results__card .card__heading, .search-modal .predictive-search-results__card .card-information__text { font-family: var(--font-body-family); font-size: 0.95rem; /* ↓ smaller than before */ font-weight: 500; /* semi-bold feel */ line-height: 1.45; margin-bottom: 24px; } .search-modal .predictive-search-results__card .resource-card, .search-modal .predictive-search-results__card .card, .search-modal .predictive-search-results__card .product-card { background: transparent; border: none; box-shadow: none; } /* END_SNIPPET:predictive-search-products-list */ /* START_SNIPPET:predictive-search-resource-carousel (INDEX:198) */ .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-resource-carousel */ /* START_SNIPPET:predictive-search (INDEX:199) */ 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; } .predictive-search-results__inner { --title-font-size: var(--font-size--md); --title-margin-block: var(--margin-xs); --list-item-padding-block: var(--padding-sm); flex-grow: 1; overflow-y: auto; padding-block: var(--padding-lg); container-type: inline-size; color: var(--color-foreground); } .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; } /* ───── Search modal layout overrides ───── */ /* Search modal layout overrides – ONLY adjust wrapper, keep single scroll on content */ .search-modal .predictive-search-form__content-wrapper { position: static; top: auto; left: auto; width: 100%; max-height: none; /* let the inner content control height */ border-radius: 0; /* dialog already has rounded corners */ overflow: hidden; /* hide any tiny overflow */ } /* keep ONE scrollbar on the content itself */ .search-modal .predictive-search-form__content { max-height: calc(100vh - 180px); /* header + padding space */ overflow-y: auto; } /* remove the extra inner scrollbar */ .search-modal .predictive-search-results__inner { overflow-y: visible; } /* Remove extra bottom padding that creates a tall white area */ .search-modal .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results)) > .predictive-search-form__content { padding-block-end: 0; } /* Hide footer/gradient completely (it can overlay last row) */ .search-modal .predictive-search-form__footer { display: none !important; } /* END_SNIPPET:predictive-search */ /* START_SNIPPET:price-filter (INDEX:200) */ /* === PRICE FILTER – MODERN CARD === */ .price-facet { container-type: inline-size; display: flex; flex-direction: column; } /* Popup shell */ .facets--horizontal .facets__panel-content:has(.price-facet), .facets--vertical .facets__panel-content:has(.price-facet), .facets--drawer .facets__panel-content:has(.price-facet) { min-width: 260px; max-width: 320px; border-radius: 10px; overflow: hidden; padding: 0; } .price-facet__card { border-radius: 20px; background-color: var(--color-background, #ffffff); box-shadow: 0 14px 40px rgb(var(--color-foreground-rgb) / 0.10); border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.10); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-paragraph--family); } /* Header */ .price-facet__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .price-facet__title { font-size: var(--font-size--sm); font-weight: 600; color: rgb(var(--color-foreground-rgb) / 0.9); } .price-facet__badge { padding: 4px 8px; border-radius: 999px; border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.25); font-size: var(--font-size--xs); text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--color-foreground-rgb) / 0.6); background-color: rgb(var(--color-background-rgb, 255 255 255) / 0.8); } /* Inputs layout */ .facets__inputs-wrapper.price-facet__inputs-wrapper { display: grid; grid-template-columns: 1fr; gap: 10px; } .price-facet__field { width: 100%; } .price-facet__field-inner { display: flex; align-items: center; gap: 6px; padding-inline: 14px; padding-block: 8px; border-radius: 999px; border: 1px solid rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.35); background-color: rgb(var(--color-background-rgb, 255 255 255) / 1); transition: border-color var(--animation-speed) var(--animation-easing), box-shadow var(--animation-speed) var(--animation-easing), background-color var(--animation-speed) var(--animation-easing); } .price-facet__currency { font-size: var(--font-paragraph--size); color: rgb(var(--color-foreground-rgb) / 0.7); } .field.price-facet__field:focus-within .price-facet__field-inner { border-color: rgb(var(--color-primary-rgb, var(--color-foreground-rgb)) / 0.9); box-shadow: 0 0 0 1px rgb(var(--color-primary-rgb, var(--color-foreground-rgb)) / 0.25); background-color: rgb(var(--color-background-rgb, 255 255 255) / 1); } .price-facet__input { width: 100%; border: none; box-shadow: none; outline: none; background: transparent; padding: 0; text-align: left; font-size: var(--font-paragraph--size); color: var(--color-text, rgb(var(--color-foreground-rgb))); } .price-facet__input:hover, .price-facet__input:focus { background-color: transparent; } .price-facet__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px transparent inset; box-shadow: 0 0 0 1000px transparent inset; background-color: transparent !important; } .price-facet__input::placeholder { color: var(--facets-input-label-color); } /* Separator */ .price-facet__separator { display: flex; align-items: center; gap: 6px; justify-content: center; margin-block: 2px; } .price-facet__separator-line { flex: 1; height: 1px; background-color: rgb(var(--color-border-rgb, var(--color-foreground-rgb)) / 0.2); } .price-facet__separator-text { font-size: var(--font-size--xs); color: rgb(var(--color-foreground-rgb) / 0.5); text-transform: uppercase; letter-spacing: 0.12em; } /* Slightly denser layout on very small popups */ @container (max-width: 260px) { .price-facet__card { padding-inline: 14px; } .facets__inputs-wrapper.price-facet__inputs-wrapper { gap: 8px; } } /* Two-column desktop layout (when there is room) */ @container (min-width: 320px) { .facets__inputs-wrapper.price-facet__inputs-wrapper { grid-template-columns: 1fr; row-gap: 8px; } } /* END_SNIPPET:price-filter */ /* START_SNIPPET:product-card-badges (INDEX:202) */ .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-card-badges */ /* START_SNIPPET:product-card (INDEX:204) */ product-card-link, :not(product-card-link) product-card { width: 100%; } .product-card__placeholder-image svg { height: 100%; } @media screen and (max-width: 749px) { .product-card slideshow-arrows .slideshow-control { display: none; } } /* Hide the variant swatches for product cards that show a swatches variant picker */ :is(.product-card):has(swatches-variant-picker-component) .quick-add .variant-option--swatches { display: none; } /* Hide "Add" button for single option product cards that show a swatches variant picker */ :is(.product-card:not([data-no-swatch-selected])):has(.quick-add__product-form-component--single-option):has( swatches-variant-picker-component ) .quick-add__button--choose { display: none; } /* Hide "Add" button for single option product cards that show a swatches variant picker */ :is(.product-card[data-no-swatch-selected]):has(.quick-add__product-form-component--single-option):has( swatches-variant-picker-component ) add-to-cart-component { display: none; } /* Hide "add" button for multi-variant product cards that don't show a swatches variant picker */ :is(.product-card):has(.quick-add__product-form-component--multi-variant):not(:has(swatches-variant-picker-component)) .quick-add__button--add { display: none; } /* Hover effect for single variant product cards and product blocks */ /* stylelint-disable selector-max-specificity */ :is(.product-card):has(.quick-add__product-form-component--single-variant) .card-gallery:hover { & .quick-add__button--choose { display: none; } & .quick-add__button--add { display: grid; } } .product-card[data-no-swatch-selected] slideshow-component[data-generic-media-size='1'] slideshow-arrows { display: none; } .product-card[data-no-swatch-selected] slideshow-component[data-generic-media-size='1'] slideshow-arrows:has(+ slideshow-slides slideshow-slide[variant-image]:not([hidden])) { display: flex; } .product-card .variant-option__swatch svg { display: none; } .product-card [data-available-count='0'] ~ svg { display: block; } /* END_SNIPPET:product-card */ /* START_SNIPPET:product-grid (INDEX:205) */ .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 { padding: var(--grid--margin--mobile); @media screen and (min-width: 750px) { 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; } .collection-wrapper--full-width .main-collection-grid__title { margin-left: var(--page-margin); } .collection-wrapper--full-width-on-mobile .main-collection-grid__title { @media screen and (max-width: 749px) { margin-left: var(--page-margin); } } /* END_SNIPPET:product-grid */ /* START_SNIPPET:product-media (INDEX:206) */ .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; } } } ::view-transition-old(gallery-item), ::view-transition-new(gallery-item) { animation-duration: 0ms; } /* END_SNIPPET:product-media */ /* START_SNIPPET:quick-add-modal (INDEX:208) */ .quick-add-modal { padding: 0; border: var(--style-border-popover); height: fit-content; overflow: hidden; min-height: 500px; box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15)); @media screen and (max-width: 750px) { position: fixed; display: block; margin: auto 0 0 0; min-height: unset; max-width: 100%; border-radius: 0; } } .quick-add-modal[open] { @media screen and (min-width: 750px) { display: flex; } } .quick-add-modal .view-more-details__wrapper { @media screen and (max-width: 750px) { 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); } .quick-add-modal__close:active { transform: scale(0.8); } .quick-add-modal__content { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 100% 1fr; position: relative; max-width: var(--wide-content-width); overflow-y: auto; max-height: 100vh; @media screen and (max-width: 750px) { 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: 750px) { 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: 750px) { grid-column: 1 / -1; } } .quick-add-modal__content .variant-picker__form { display: block; } .quick-add-modal__content .variant-option + .variant-option { margin-top: var(--padding-lg); } .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; height: 100%; min-height: 0; dialog[open] & { animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both; animation-delay: 0.1s; } @media screen and (max-width: 750px) { grid-column: 2 / span 2; grid-row: span 1; overflow-y: auto; max-height: 100%; height: 100%; } } .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 .variant-picker { --product-swatches-padding-block-end: 0px; flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-block-end: calc( var(--product-swatches-padding-block-end) + 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; /* Prevent overlap between title and close button */ padding-inline: 0 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 .view-product-title { display: flex; } .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: min(var(--gap-2xl), var(--gap)); } .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 .media-gallery--grid .product-media-container:first-child { border-top-right-radius: var(--style-border-radius-popover, 0); } .quick-add-modal__content .media-gallery--grid .product-media-container:last-child { border-bottom-right-radius: var(--style-border-radius-popover, 0); } } .quick-add-modal__content .product-details > .group-block { padding: var(--padding-2xl); max-height: 100%; } .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; 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: 750px) { 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 slideshow-controls { 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 */ /* START_SNIPPET:quick-add (INDEX:209) */ /* Quick Add */ .quick-add { --quick-add-offset: var(--padding-sm); --quick-add-top: calc(var(--quick-add-offset) + var(--padding-block-start)); --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end)); --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end)); --quick-add-left: calc(var(--quick-add-offset) + var(--padding-inline-end)); position: absolute; display: var(--quick-add-mobile-display, none); flex-direction: column; justify-content: flex-end; inset: max(var(--quick-add-top), calc((var(--border-radius) + var(--quick-add-top)) * (1 - cos(45deg)))) max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))) max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))) max(var(--quick-add-left), calc((var(--border-radius) + var(--quick-add-left)) * (1 - cos(45deg)))); width: auto; height: auto; z-index: var(--layer-raised); cursor: default; pointer-events: none; @media screen and (min-width: 750px) { --quick-add-offset: var(--padding-md); display: var(--quick-add-display, flex); } } .quick-add .variant-option__button-label input[data-option-available='false'] { cursor: not-allowed; } .quick-add[class*='color-scheme-'] { background-color: transparent; } .quick-add__button { display: grid; padding: var(--padding-xs); align-items: center; background-color: var(--color-background); color: var(--color-foreground); border-color: transparent; box-shadow: var(--shadow-popover); pointer-events: all; position: relative; overflow: hidden; border-radius: 100px; @media screen and (min-width: 750px) { display: none; padding: var(--padding-xs) var(--padding-sm); } .quick-add[stay-visible] & { display: grid; } } .quick-add__button .add-to-cart-text { gap: 0; line-height: 1; grid-row: 1 / span 1; grid-column: 1 / span 1; animation: none; @media screen and (min-width: 750px) { /* offset button padding to show a round button in a collapsed state */ margin-inline: calc(var(--padding-sm) * -1); padding-inline: var(--padding-xs); } } .quick-add__button .add-to-cart-text--added { position: relative; grid-row: 1 / span 1; grid-column: 1 / span 1; justify-self: end; line-height: 1; @media screen and (min-width: 750px) { width: 0; } } .quick-add__button .add-to-cart-text__content { width: 0; opacity: 0; transform: translateX(1em); transition: width var(--animation-speed) ease-in-out, opacity var(--animation-speed) ease-in-out, transform var(--animation-speed) ease-in-out; interpolate-size: allow-keywords; will-change: width, opacity, transform; } @container (min-width: 99px) { .quick-add[stay-visible] .add-to-cart-text, .quick-add__button:is(:focus, :hover) .add-to-cart-text { gap: var(--gap-2xs); @media screen and (min-width: 750px) { /* offset button padding to show a round button in a collapsed state */ margin-inline: 0; padding-inline: 0; } } .quick-add[stay-visible] .add-to-cart-text__content, .quick-add__button:is(:focus, :hover) .add-to-cart-text__content { width: fit-content; opacity: 1; transform: translateX(0); } } .quick-add__button.atc-added .add-to-cart-text { opacity: 0; } .quick-add__button.atc-added .add-to-cart-text--added { opacity: 1; width: auto; @supports (width: calc-size(auto, size)) { width: calc-size(auto, size); } } .quick-add__button.atc-added .add-to-cart-text { animation-name: atc-fade-out; } .quick-add__button.atc-added .add-to-cart-text--added { 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; } @keyframes atc-fade-in { from { opacity: 0; transform: translateX(1em); position: absolute; } to { opacity: 1; transform: translateX(0); position: inherit; } } @keyframes atc-fade-out { from { opacity: 1; transform: translateX(0); position: inherit; } to { opacity: 0; transform: translateX(-1em); position: absolute; } } /* END_SNIPPET:quick-add */ /* START_SNIPPET:resource-card (INDEX:210) */ .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; } } .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; } .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:resource-image (INDEX:211) */ .resource-image { position: relative; display: flex; width: 100%; height: 100%; z-index: var(--layer-base); overflow: hidden; max-width: 100%; max-height: 100%; aspect-ratio: var(--ratio); } .resource-image .image-block__image { object-fit: cover; width: 100%; height: 100%; } .resource-image--placeholder { width: 100%; height: 100%; } /* END_SNIPPET:resource-image */ /* START_SNIPPET:search-modal (INDEX:215) */ /* ───────────────────────────────────── Base modal layout ───────────────────────────────────── */ .search-modal { --search-border-radius: var(--style-border-radius-popover); --search-border-width: var(--style-border-width); } .search-modal__button { display: flex; align-items: center; justify-content: center; } .search-modal__content { /* width + padding */ --modal-width: min(1150px, 94vw); padding: 1rem 2rem 0.25rem; /* small bottom padding only */ border: var(--style-border-popover); border-radius: var(--search-border-radius); box-shadow: var(--shadow-popover); background-color: var(--color-background); @media screen and (min-width: 750px) { width: var(--modal-width); margin-inline: auto; margin-block-start: 5vh; max-height: calc(100vh - 10vh); /* ⛔ REMOVE these so the dialog itself doesn’t scroll */ /* overflow-y: auto; overflow-x: hidden; */ } @media screen and (max-width: 749px) { width: 100vw; height: 100vh; margin: 0; padding-inline: 1rem; padding-block: 0.75rem 1.25rem; border-radius: 0; } } .search-modal__content[open] { display: flex; } /* Hide the default dialog backdrop on small screens */ @media screen and (max-width: 749px) { .search-modal__content::backdrop { display: none; } } /* open / close animation */ .dialog-modal[open].search-modal__content { transform-origin: top center; animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards; } .dialog-modal.search-modal__content.dialog-closing { animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards; } /* ───────────────────────────────────── Header (search field + icons) ───────────────────────────────────── */ .search-modal__content .predictive-search-form__header { padding-block: 0.25rem 0.9rem; padding-inline: 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; } .search-modal__content .predictive-search-form__field { margin-inline: 0; border-radius: 999px; } /* search input text styling (bigger, theme font) */ .search-modal__content .predictive-search__input { font-family: var(--font-body-family); font-size: 1rem; padding-block: 0.55rem; } /* bigger search icon (left) */ .search-modal__content .predictive-search-form__header svg { width: 18px; height: 18px; } /* specifically bump the close icon */ .search-modal__content .predictive-search__close-modal-button svg { width: 18px; height: 18px; } .search-modal__content .predictive-search__close-modal-button { padding-inline: 0.6rem; } /* vertical divider between reset + close – keep existing logic */ .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; } } /* Kill the divider line before the close icon in the modal */ .search-modal .predictive-search-form__header::before { content: none !important; } @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); } } /* ───────────────────────────────────── Content / results ───────────────────────────────────── */ .search-modal__content .predictive-search-dropdown, .search-modal__content .predictive-search-form__content-wrapper { padding: 0; margin: 0; max-height: none; } .search-modal__content .predictive-search__results { padding-block: 0.75rem 0.5rem; padding-inline: 0; } .search-modal__content .predictive-search__results-groups-wrapper { padding-inline: 0; padding-block-start: 0.5rem; } /* headings like RECENTLY VIEWED / PRODUCTS */ .search-modal__content .predictive-search__heading { font-family: var(--font-heading-family); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.7); margin-bottom: 0.5rem; } /* products grid */ .search-modal__content .predictive-search__results-list--products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } @media screen and (max-width: 1200px) { .search-modal__content .predictive-search__results-list--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 900px) { .search-modal__content .predictive-search__results-list--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .search-modal__content .predictive-search__item { margin: 0; } .search-modal__content .predictive-search__item-content { display: flex; flex-direction: column; text-decoration: none; } .search-modal__content .predictive-search__item-image { border-radius: 4px; overflow: hidden; } .search-modal__content .predictive-search__item-heading { font-family: var(--font-body-family); font-size: 0.9rem; font-weight: 500; margin-top: 0.6rem; margin-bottom: 0.25rem; line-height: 1.4; color: rgb(var(--color-foreground-rgb)); } /* === Search popup: show full product image, no white card/stripe === */ .search-modal dialog.search-modal__content .predictive-search__item, .search-modal dialog.search-modal__content .predictive-search__item-content { background: transparent !important; border: none !important; box-shadow: none !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* force vertical layout: image on top, text below */ .search-modal dialog.search-modal__content .predictive-search__item-content { display: flex !important; flex-direction: column !important; } /* image should be fully visible */ .search-modal dialog.search-modal__content .predictive-search__item-image { height: auto !important; max-height: none !important; overflow: visible !important; } .search-modal dialog.search-modal__content .predictive-search__item-image img { width: 100%; height: auto !important; object-fit: cover; } /* hide prices ONLY in modal */ .search-modal__content .price { display: none !important; } /* a little hover state for each product */ .search-modal__content .predictive-search__item-content:hover { transform: translateY(-1px); } /* ─── Search modal: spacing only on top, no extra at bottom ─── */ /* outer wrapper – keep some top space before RECENTLY VIEWED / PRODUCTS */ /* correct class name for your products block */ .search-modal__content .predictive-search-results__products, .search-modal__content #predictive-search-products { padding-top: 1rem; /* adjust if you want more/less gap above PRODUCTS */ padding-bottom: 0 !important; margin-bottom: 0 !important; } /* inner container (when it exists) – no extra bottom padding */ .search-modal__content .predictive-search-results__inner, .search-modal__content .predictive-search-results__wrapper-products { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* last card: no margin under the final row */ .search-modal__content .predictive-search-results__card:last-child { margin-bottom: 0 !important; } /* scroll content area inside modal – no bottom padding */ .search-modal__content .predictive-search-form__content { padding-bottom: 0 !important; } /* hide the "View all" footer so it doesn't reserve space */ .search-modal__content .predictive-search-form__footer { display: none !important; } /* END_SNIPPET:search-modal */ /* START_SNIPPET:search (INDEX:216) */ .search-action { --search-border-radius: var(--style-border-radius-inputs); --search-border-width: var(--style-border-width-inputs); display: flex; } .header__column--center .search-action { width: auto; flex-grow: 1; } :is(.header__column--left, .header__column--center) .search-action { @media screen and (min-width: 750px) { margin-inline: calc(var(--padding-lg) * -1); } } .header__column--right .search-action { @media screen and (min-width: 750px) { margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1); } } /* END_SNIPPET:search */ /* START_SNIPPET:section (INDEX:217) */ .section-wrapper { --section-height-offset: 0px; } .section[data-shopify-visual-preview] { min-height: var(--section-preview-height); padding-top: 0; } .section[data-shopify-visual-preview] .custom-section-background { display: none; } body:has(> #header-group > .header-section > #header-component[transparent]):not( :has(> #header-group > .header-section + .shopify-section) ) > main > .section-wrapper:first-child { --section-height-offset: var(--header-group-height, 0); } .custom-section-background { grid-column: 1 / -1; } .custom-section-content { z-index: var(--layer-flat); } @media screen and (max-width: 767px) { /* remove page-width gutter spacing on mobile */ .section.section--page-width { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* give inner content equal 16px spacing */ .section.section--page-width .section-content-wrapper { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; } /* override any block padding (like your 100px) ONLY on mobile */ .section.section--page-width .text-block, .section.section--page-width .text-block * { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } } @media screen and (min-width: 768px) { /* About page: match vertical breathing room with contact-style spacing on tablet/desktop */ .shopify-section[id$='section_xnwEce'] .section-content-wrapper { padding-top: 48px !important; padding-bottom: 48px !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { /* 3) About testimonial section tablet typography */ .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(1), .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(1) * { font-size: 1.8rem !important; line-height: 1.2 !important; } .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(2), .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(2) * { font-size: 2.2rem !important; line-height: 1.35 !important; } .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(3), .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(3) * { font-size: 1.45rem !important; line-height: 1.3 !important; } } @media screen and (max-width: 767px) { /* About page pull-quote: mobile-only smaller typography */ .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(1), .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(1) * { font-size: 1.4rem !important; line-height: 1.3 !important; } .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(2), .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(2) * { font-size: 1.55rem !important; line-height: 1.45 !important; } .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(3), .shopify-section[id$='section_b4RTFX'] .section-content-wrapper > .text-block:nth-of-type(3) * { font-size: 1rem !important; line-height: 1.3 !important; } } /* END_SNIPPET:section */ /* START_SNIPPET:sorting (INDEX:225) */ .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: flex; right: 0; flex-direction: column; gap: var(--margin-3xs); padding: calc(var(--drawer-padding) / 2); color: var(--color-foreground); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } .sorting-filter__option { cursor: pointer; display: grid; grid-template-columns: var(--icon-size-sm) 1fr; gap: var(--margin-2xs); min-width: 180px; 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-mobile-wrapper .sorting-filter__options { border-radius: var(--style-border-radius-popover); position: absolute; top: 0; right: 0; 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; padding: var(--padding-sm); gap: var(--gap-sm); } .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; } } .sorting-filter__options { 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); } details[open] .sorting-filter__options { opacity: 1; block-size: auto; @starting-style { block-size: 0; opacity: 0; overflow-y: clip; } &:focus-within { overflow-y: visible; } } /* END_SNIPPET:sorting */ /* START_SNIPPET:text (INDEX:233) */ :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-width: 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 */ /* START_SNIPPET:variant-main-picker (INDEX:243) */ /* (YOUR FULL CSS EXACTLY AS YOU SHARED — UNCHANGED EXCEPT THE FEW REQUIRED UPDATES BELOW) */ :root{ --vp-accent: #235160; } .vp-root, .vp-root .vp-form{ width: 100% !important; max-width: 100% !important; overflow: visible !important; } .vp-hidden-options{ display: none !important; } .product__info-container, .product__info-wrapper, .product__info, .product__info-container *{ overflow: visible !important; } .vp-mode-popup .vp-select{ position: relative !important; overflow: visible !important; } .vp-mode-popup .vp-btn{ position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: var(--vp-btn-height) !important; padding: 0 calc(16px + var(--vp-btn-caret-right) + var(--vp-btn-caret-size)) 0 16px !important; border-radius: var(--vp-btn-radius) !important; cursor: pointer !important; user-select: none !important; font-weight: 500 !important; letter-spacing: .8px !important; text-transform: uppercase !important; font-size: var(--vp-btn-text-size) !important; border-width: var(--vp-btn-border) !important; border-style: solid !important; border-color: var(--vp-accent) !important; color: var(--vp-accent) !important; background: transparent !important; } .vp-mode-popup .vp-btn__text{ white-space: nowrap !important; text-align: center !important; } .vp-mode-popup details[open] > .vp-btn{ border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .vp-mode-popup details[open] .vp-panel{ border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .vp-mode-popup .vp-panel{ position: absolute !important; top: calc(var(--vp-btn-height)) !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; background: #fff !important; border: var(--vp-panel-border) solid var(--vp-accent) !important; border-radius: var(--vp-panel-radius) !important; padding: var(--vp-panel-pad-top) var(--vp-panel-pad-right) var(--vp-panel-pad-bottom) var(--vp-panel-pad-left) !important; max-height: 520px !important; overflow: auto !important; box-shadow: 0 10px 30px rgba(0,0,0,.10) !important; } .vp-mode-popup details:not([open]) .vp-panel{ display: none !important; } .vp-mode-popup .vp-group{ margin: 0 0 var(--vp-group-gap) 0 !important; } .vp-mode-popup .vp-group:last-child{ margin-bottom: 0 !important; } .vp-mode-popup .vp-group__title{ font-size: var(--vp-heading-size) !important; font-weight: var(--vp-heading-weight) !important; color: var(--vp-accent) !important; margin: 0 0 var(--vp-heading-margin-bottom) 0 !important; padding-bottom: var(--vp-heading-pad-bottom) !important; border-bottom: 1px solid rgba(35,81,96,0.65) !important; } .vp-mode-popup .vp-lines{ display:block !important; } .vp-mode-popup .vp-line{ display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: var(--vp-row-pad-y) 0 !important; border-bottom: none !important; cursor: default !important; /* ✅ UPDATED: allow max-msg to take its own line (no overlap) */ flex-wrap: wrap !important; } .vp-mode-popup .vp-line.is-selected{ background: rgba(35,81,96,0.06) !important; } .vp-mode-popup .vp-line__left{ display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; flex: 1 1 auto !important; font-size: var(--vp-row-font-size) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: var(--vp-accent) !important; } .vp-mode-popup .vp-line__label{ font-weight: var(--vp-row-label-weight) !important; color: var(--vp-accent) !important; } .vp-mode-popup .vp-line__meta{ font-weight: var(--vp-row-meta-weight) !important; color: var(--vp-accent) !important; } .vp-mode-popup .vp-sep{ color: var(--vp-accent) !important; margin: 0 2px !important; } .vp-mode-popup .vp-line__right{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: var(--vp-stepper-height) !important; width: var(--vp-stepper-width) !important; border: var(--vp-stepper-border) solid rgba(35,81,96,0.35) !important; border-radius: var(--vp-stepper-radius) !important; overflow: hidden !important; background: rgba(255,255,255,0.65) !important; } .vp-mode-popup .vp-stepper__btn{ width: var(--vp-stepper-btn-width) !important; height: 100% !important; border: 0 !important; background: transparent !important; color: var(--vp-accent) !important; cursor: pointer !important; font-size: var(--vp-stepper-btn-font) !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .vp-mode-popup .vp-stepper__btn span{ display:block !important; line-height: 1 !important; transform: translateY(-.5px) !important; } .vp-mode-popup .vp-stepper__val{ width: calc(100% - (var(--vp-stepper-btn-width) * 2)) !important; height: 100% !important; border: 0 !important; border-left: var(--vp-stepper-divider) solid var(--vp-accent) !important; border-right: var(--vp-stepper-divider) solid var(--vp-accent) !important; text-align: center !important; color: var(--vp-accent) !important; font-size: var(--vp-stepper-val-font) !important; background: transparent !important; padding: 0 !important; line-height: 1 !important; } .vp-selected{ margin-top: 32px !important; margin-bottom: 16px !important; padding-top: 16px !important; padding-bottom: 0px !important; } .vp-selected__table{ width: 100% !important; padding: 0 !important; margin: 0 !important; } .vp-selected__row{ display: grid !important; grid-template-columns: 26% 1px 1fr 1fr 108px 32px !important; gap: 0 !important; align-items: stretch !important; padding: 0 !important; border: 0 !important; } .vp-selected__col{ color: var(--vp-accent) !important; font-size: 13px !important; padding: 10px 0 !important; display: flex !important; align-items: center !important; min-width: 0 !important; } /* ✅ Make stepper + max message stack vertically in the table */ .vp-selected__col--qty{ flex-direction: column !important; align-items: center !important; } .vp-selected__row--header .vp-selected__col{ padding-top: 6px !important; padding-bottom: 10px !important; font-weight: 700 !important; } .vp-selected__col--name{ padding-right: 6px !important; align-items: flex-start !important; } .vp-selected__nameBlock{ display:flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.25 !important; } .vp-selected__group{ font-weight: 700 !important; } .vp-selected__label{ font-weight: 400 !important; opacity: 0.95 !important; } .vp-selected__col--div{ padding: 0 !important; width: 1px !important; background: #235160 !important; align-self: stretch !important; margin: 0 auto !important; } .vp-selected__col--pp, .vp-selected__col--total{ padding-left: 24px !important; } .vp-selected__col--qty{ justify-content: center !important; padding-right: 0 !important; } .vp-selected__stepper{ margin: 0 auto !important; } .vp-selected__stepper{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: var(--vp-stepper-height) !important; width: var(--vp-table-stepper-width) !important; border: var(--vp-stepper-border) solid rgba(35,81,96,0.35) !important; border-radius: var(--vp-stepper-radius) !important; overflow: hidden !important; } .vp-selected__stepper .vp-stepper__btn{ width: var(--vp-table-stepper-btn-w) !important; font-size: 12px !important; padding: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .vp-selected__stepper .vp-stepper__val{ width: calc(100% - (var(--vp-table-stepper-btn-w) * 2)) !important; font-size: 12px !important; padding: 0 !important; line-height: 1 !important; } .vp-selected__col--del{ justify-content: flex-end !important; padding-right: 0 !important; } .vp-selected__del{ border: 0 !important; background: transparent !important; color: rgba(35,81,96,0.85) !important; cursor: pointer !important; width: 26px !important; height: 26px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .vp-selected__del:hover{ color: #235160 !important; } .vp-trash-svg{ width: 18px !important; height: 18px !important; display: block !important; } @media (max-width: 749px){ /* Popup inner panel rows: stack label over stepper on very narrow screens */ .vp-mode-popup .vp-line{ align-items: flex-start !important; } /* Selected table header is handled in 767px block */ .vp-selected__row--header{ display:none !important; } } /* ========================================================= ✅ Overlay pieces text inside steppers (NO width change) ✅ UPDATED: allow manual typing (overlay hides on focus) ========================================================= */ [data-vp-overlay]{ position: relative !important; } .vp-mode-popup .vp-line__right[data-vp-overlay]{ --vp-ov-btn-w: var(--vp-stepper-btn-width); } .vp-selected__stepper[data-vp-overlay]{ --vp-ov-btn-w: var(--vp-table-stepper-btn-w); } [data-vp-overlay] .vp-stepper__val{ position: relative !important; z-index: 1 !important; } [data-vp-overlay].show-pieces .vp-stepper__val{ color: transparent !important; caret-color: transparent !important; } [data-vp-overlay].show-pieces::after{ content: attr(data-display) !important; position: absolute !important; left: var(--vp-ov-btn-w) !important; right: var(--vp-ov-btn-w) !important; top: 0 !important; bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; /* ✅ clip, not ... */ padding: 0 4px !important; z-index: 5 !important; color: var(--vp-accent) !important; font-variant-numeric: tabular-nums !important; font-size: 13px !important; /* was 12 */ line-height: 1 !important; font-weight: 400 !important; } /* shrink progressively so 4–6 digits never “go inside” buttons */ [data-vp-overlay].show-pieces.ov-3d::after{ font-size: 12px !important; } [data-vp-overlay].show-pieces.ov-4d::after{ font-size: 11px !important; letter-spacing: -0.25px !important; } [data-vp-overlay].show-pieces.ov-5d::after{ font-size: 10px !important; letter-spacing: -0.35px !important; } [data-vp-overlay].show-pieces.ov-6d::after{ font-size: 9px !important; letter-spacing: -0.45px !important; } /* ========================================================= ✅ NEW: Unavailable + Max message styling (minimal add) ✅ UPDATED: max-msg takes its own space (no overlap) ========================================================= */ .vp-mode-popup .vp-line{ position: relative !important; } .vp-mode-popup .vp-line.is-unavailable{ opacity: .62 !important; } .vp-mode-popup .vp-line.is-unavailable .vp-line__label, .vp-mode-popup .vp-line.is-unavailable .vp-line__meta, .vp-mode-popup .vp-line.is-unavailable .vp-sep{ text-decoration: line-through !important; } .vp-mode-popup .vp-line__badge{ margin-left: 8px !important; font-size: 11px !important; letter-spacing: .03em !important; text-transform: uppercase !important; color: rgba(180, 0, 0, .80) !important; border: 1px solid rgba(180, 0, 0, .25) !important; padding: 2px 6px !important; border-radius: 999px !important; text-decoration: none !important; white-space: nowrap !important; } /* ✅ Give the stepper a smarter minimum width so digits fit better */ .vp-mode-popup .vp-line__right{ min-width: calc((var(--vp-stepper-btn-width) * 2) + 6ch) !important; } /* ✅ Give popup stepper more usable center space for 4+ digits */ .vp-mode-popup .vp-line__right{ width: max(var(--vp-stepper-width), 148px) !important; } .vp-selected__stepper{ min-width: calc((var(--vp-table-stepper-btn-w) * 2) + 6ch) !important; } /* ✅ Right-align popup "Max unit reached" */ .vp-mode-popup .vp-line__max{ flex: 0 0 100% !important; order: 3 !important; display: flex !important; justify-content: flex-end !important; /* ✅ pushes text to the right */ text-align: right !important; font-size: 12px !important; color: rgba(180, 0, 0, .85) !important; max-height: 0 !important; overflow: hidden !important; margin-top: 0 !important; transition: max-height 120ms ease, margin-top 120ms ease !important; } .vp-mode-popup .vp-line__max.is-show{ max-height: 22px !important; margin-top: 6px !important; } /* ✅ More shrink for long numbers */ /* ✅ Keep 5 digits readable */ [data-vp-overlay].show-pieces.ov-5d::after{ font-size: 11px !important; letter-spacing: -0.2px !important; } /* ✅ Only shrink more for 6+ digits */ [data-vp-overlay].show-pieces.ov-6d::after{ font-size: 10px !important; letter-spacing: -0.3px !important; } /* ✅ Keep popup stepper same (do NOT increase) */ .vp-root{ --vp-stepper-width: 92px; --vp-stepper-btn-width: 26px; } /* remove the forced min width + max(…,148px) behavior */ .vp-mode-popup .vp-line__right{ width: var(--vp-stepper-width) !important; min-width: 0 !important; } /* ✅ Increase ONLY selected table stepper width */ .vp-root{ --vp-table-stepper-width: 96px; /* <— table bigger */ --vp-table-stepper-btn-w: 24px; } .vp-selected__stepper{ width: var(--vp-table-stepper-width) !important; min-width: 0 !important; } /* ========================================================= ✅ 1) Keep stepper always on the right (no dropping) Use GRID for popup rows: left wraps, right stays pinned ========================================================= */ .vp-mode-popup .vp-line{ display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "left right" "max max" !important; column-gap: 12px !important; row-gap: 6px !important; align-items: start !important; } /* put blocks into grid areas */ .vp-mode-popup .vp-line__left{ grid-area: left !important; min-width: 0 !important; /* allow wrapping so it doesn't push stepper down */ white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } .vp-mode-popup .vp-line__right{ grid-area: right !important; justify-self: end !important; align-self: start !important; } .vp-mode-popup .vp-line__max{ grid-area: max !important; justify-content: flex-end !important; } /* ========================================================= ✅ 2) Shrink overlay number at 4–5 digits (your JS already toggles ov-4d / ov-5d) ========================================================= */ [data-vp-overlay].show-pieces.ov-4d::after{ font-size: 10px !important; letter-spacing: -0.35px !important; } [data-vp-overlay].show-pieces.ov-5d::after{ font-size: 9px !important; letter-spacing: -0.45px !important; } /* optional: 6+ digits even smaller */ [data-vp-overlay].show-pieces.ov-6d::after{ font-size: 8.5px !important; letter-spacing: -0.55px !important; } .vp-root{ --vp-stepper-width: 92px; --vp-stepper-btn-width: 26px; } .vp-mode-popup .vp-line__right{ width: var(--vp-stepper-width) !important; min-width: 0 !important; } /* ✅ Show real text ONLY when the input is focused */ [data-vp-overlay].show-pieces .vp-stepper__val:focus{ color: var(--vp-accent) !important; caret-color: var(--vp-accent) !important; } /* ✅ Hide overlay ONLY while input is focused (modern browsers) */ @supports selector(:has(*)) { [data-vp-overlay].show-pieces:has(.vp-stepper__val:focus)::after{ opacity: 0 !important; } [data-vp-overlay].show-pieces:has(.vp-stepper__val:focus) .vp-stepper__val{ color: var(--vp-accent) !important; caret-color: var(--vp-accent) !important; } } .vp-selected__col--qty{ position: relative !important; } .vp-selected__max{ margin-top: 6px !important; font-size: 12px !important; color: rgba(180, 0, 0, .85) !important; display: none !important; } .vp-selected__max.is-show{ display:block !important; } /* ✅ Portal mode: panel is moved to and becomes fixed */ .vp-panel.vp-portal-panel{ position: fixed !important; z-index: 2147483647 !important; /* max-ish */ left: 0; top: 0; width: auto; } /* optional: keep same look */ .vp-panel.vp-portal-panel{ max-height: min(520px, calc(100vh - 120px)) !important; overflow: auto !important; -webkit-overflow-scrolling: touch !important; } @media (max-width: 767px){ .vp-mode-popup .vp-select[open] > .vp-panel:not(.vp-mobile-sheet-panel){ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.vp-mobile-sheet-open{ overflow: hidden !important; } .vp-mobile-sheet-backdrop{ position: fixed !important; inset: 0 !important; background: transparent !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 180ms ease !important; z-index: 2147483000 !important; } .vp-mobile-sheet-backdrop.is-open{ opacity: 1 !important; pointer-events: auto !important; } .vp-panel.vp-mobile-sheet-panel{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; height: 50vh !important; max-height: 50vh !important; margin: 0 !important; border-radius: 16px 16px 0 0 !important; border: 0 !important; background: #ffffff !important; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.14) !important; z-index: 2147483001 !important; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)) 16px !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; transform: translateY(105%) !important; opacity: 0 !important; transition: transform 220ms ease, opacity 220ms ease !important; pointer-events: none !important; touch-action: pan-y !important; } .vp-panel.vp-mobile-sheet-panel.is-open{ transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; } .vp-mobile-sheet-panel .vp-mobile-sheet__header{ display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 12px !important; margin: 0 0 8px 0 !important; border-bottom: 1px solid rgba(35, 81, 96, 0.15) !important; padding: 0 0 8px 0 !important; } .vp-mobile-sheet-panel .vp-mobile-sheet__title{ display: none !important; } .vp-mobile-sheet-panel .vp-mobile-sheet__close{ margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border: 0 !important; background: transparent !important; color: var(--vp-accent) !important; font-size: 24px !important; line-height: 1 !important; padding: 0 !important; cursor: pointer !important; } .vp-mobile-sheet-panel .vp-group{ margin: 0 0 12px 0 !important; padding: 0 !important; } .vp-mobile-sheet-panel .vp-group__title{ margin-bottom: 8px !important; font-size: 13px !important; font-weight: 600 !important; } .vp-mobile-sheet-panel .vp-lines, .vp-mobile-sheet-panel .vp-line{ padding-left: 0 !important; padding-right: 0 !important; } .vp-mobile-sheet-panel .vp-line{ padding-top: 8px !important; padding-bottom: 8px !important; } .vp-mobile-sheet-panel .vp-line__left{ gap: 4px !important; } .vp-mobile-sheet-panel .vp-line__label{ font-size: 10px !important; font-weight: 400 !important; line-height: 1.2 !important; } .vp-mobile-sheet-panel .vp-line__meta{ font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important; } .vp-mobile-sheet-panel .vp-line__meta, .vp-mobile-sheet-panel .vp-line__meta *{ font-weight: 400 !important; } /* compact, bordered stepper inside bottom sheet */ .vp-mobile-sheet-panel .vp-line__right{ height: 26px !important; width: 78px !important; border: 1px solid rgba(35, 81, 96, 0.35) !important; border-radius: 5px !important; overflow: visible !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 0 4px !important; } .vp-mobile-sheet-panel .vp-line__right .vp-stepper__btn{ width: 22px !important; min-width: 22px !important; height: 22px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--vp-accent) !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 4px !important; padding: 0 !important; line-height: 1 !important; } .vp-mobile-sheet-panel .vp-line__right .vp-stepper__btn span{ display: block !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; color: var(--vp-accent) !important; transform: none !important; } .vp-mobile-sheet-panel .vp-line__right .vp-stepper__val{ font-size: 11px !important; border: 0 !important; text-align: center !important; width: auto !important; min-width: 20px !important; flex: 1 1 auto !important; background: transparent !important; line-height: 1 !important; padding: 0 !important; } /* selected rows: compact 3-block layout */ .vp-selected{ margin-top: 14px !important; padding-top: 8px !important; border-top: 1px solid #a8b6bc !important; background: transparent !important; opacity: 1 !important; isolation: isolate !important; } .vp-selected__table, .vp-selected__body, .vp-selected__row{ opacity: 1 !important; } @supports selector(:has(*)) { .vp-selected:has(.vp-selected__row:only-child){ border-top: 0 !important; padding-top: 0 !important; margin-top: 10px !important; } } .vp-selected__row--header{ display: none !important; } /* ========================================================= MOBILE SELECTED TABLE: 2-row named-grid layout Row 1 (title): name | qty | del Row 2 (subtext): pp | total (spans to del col) | del No total price in title row. No duplicate elements. ========================================================= */ .vp-selected__row{ display: grid !important; /* 4 cols: [name flex] [pp auto] [total auto] [del fixed] */ grid-template-columns: minmax(0, 1fr) auto auto 22px !important; grid-template-rows: auto auto !important; grid-template-areas: "name name qty del" "pp tot tot del" !important; column-gap: 10px !important; row-gap: 1px !important; padding: 12px 0 14px 0 !important; border-bottom: 0 !important; align-items: start !important; } .vp-selected__row:not(:last-child){ border-bottom: 1px solid #a8b6bc !important; margin-bottom: 12px !important; } .vp-selected__col{ padding: 0 !important; min-width: 0 !important; } /* hide vertical divider line */ .vp-selected__col--div{ display: none !important; } /* Row 1 left: variant group + label (title) */ .vp-selected__col--name{ grid-area: name !important; align-self: center !important; } .vp-selected__nameBlock{ gap: 4px !important; min-width: 0 !important; } .vp-selected__group{ font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vp-selected__label{ font-size: 10px !important; font-weight: 400 !important; line-height: 1.2 !important; opacity: 0.9 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .vp-selected__nameBlock .vp-selected__label{ font-size: 10px !important; font-weight: 400 !important; } /* Row 1 right: stepper */ .vp-selected__col--qty{ grid-area: qty !important; justify-content: flex-end !important; align-items: center !important; align-self: center !important; } /* Trash icon: spans both rows on far right */ .vp-selected__col--del{ grid-area: del !important; grid-row: 1 !important; justify-content: flex-end !important; align-items: center !important; align-self: center !important; padding-top: 0 !important; } /* TASK 2A: smaller trash icon on mobile (still tappable) */ .vp-selected__col--del .vp-selected__del{ width: 24px !important; height: 24px !important; } .vp-selected__col--del .vp-trash-svg{ width: 14px !important; height: 14px !important; } /* Smaller SELECT OPTION caret icon on mobile */ /* Smaller SELECT OPTION caret icon on mobile */ .vp-mode-popup .vp-btn { font-size: 13px !important; /* Increase text size slightly */ padding: 0 16px !important; /* Remove the extra padding for absolute caret */ } .vp-mode-popup .vp-btn__caret { width: 18px !important; height: 18px !important; position: relative !important; /* Let flex gap naturally center it next to text */ right: auto !important; } .vp-mode-popup .vp-btn__caret-img { width: 18px !important; height: 18px !important; max-width: 18px !important; } /* Row 2 (subtext row): per-piece (left) and total (right), same line */ /* Per-piece price: occupies the "pp" named area (row 2, col 1) */ .vp-selected__col--pp{ grid-area: pp !important; display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 2px !important; font-size: 11px !important; font-weight: 400 !important; color: var(--vp-accent) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; padding-top: 0 !important; margin: 0 !important; } /* pp inner price inline */ .vp-selected__pp-price{ display: inline !important; font-size: 11px !important; font-weight: 400 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } .vp-selected__pp-inline{ font-size: inherit !important; font-weight: 400 !important; } .vp-selected__pp-suf{ display: inline !important; font-size: 11px !important; font-weight: 400 !important; opacity: 0.9 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } .vp-selected__col--pp::before{ content: none !important; } /* Total price: occupies the "tot" named area (row 2, cols 2-3), right-aligned */ .vp-selected__col--total{ grid-area: tot !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; text-align: right !important; font-size: 11px !important; font-weight: 700 !important; color: var(--vp-accent) !important; white-space: nowrap !important; padding: 0 !important; padding-right: 0 !important; padding-top: 5px !important; margin: 0 !important; } .vp-selected__total-label{ display: inline !important; margin-right: 4px !important; } .vp-selected__col--total::before{ content: none !important; } /* shared: both subtext cells stay on one line */ .vp-selected__col--pp, .vp-selected__col--total{ white-space: nowrap !important; overflow: hidden !important; } .vp-selected__stepper{ height: 26px !important; width: 76px !important; border: 1px solid rgba(35, 81, 96, 0.35) !important; border-radius: 5px !important; overflow: visible !important; background: transparent !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 0 4px !important; } .vp-mode-popup .vp-select[open] + .vp-selected, .vp-mode-popup .vp-select[open] + .vp-selected .vp-selected__row, .vp-mode-popup .vp-select[open] + .vp-selected .vp-selected__row:not(:last-child){ border-color: #a8b6bc !important; opacity: 1 !important; background: transparent !important; } body.vp-mobile-sheet-open .vp-selected, body.vp-mobile-sheet-open .vp-selected .vp-selected__row, body.vp-mobile-sheet-open .vp-selected .vp-selected__row:not(:last-child){ border-color: #a8b6bc !important; opacity: 1 !important; background: transparent !important; } .vp-selected__stepper .vp-stepper__btn{ width: 22px !important; min-width: 22px !important; height: 22px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; color: var(--vp-accent) !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 4px !important; padding: 0 !important; } .vp-selected__stepper .vp-stepper__btn span{ display: block !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; color: var(--vp-accent) !important; transform: none !important; } .vp-selected__stepper .vp-stepper__val{ font-size: 11px !important; text-align: center !important; border: 0 !important; width: auto !important; min-width: 20px !important; flex: 1 1 auto !important; background: transparent !important; line-height: 1 !important; padding: 0 !important; } /* remove duplicate top labels in product selected area */ .vp-selected__row--header{ display: none !important; } .vp-selected__del{ width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; padding: 0 !important; } .vp-trash-svg{ width: 11px !important; height: 11px !important; } } @media (min-width: 768px){ .vp-mobile-sheet__header{ display: none !important; } /* Desktop only: keep selected-row values as numbers only */ .vp-selected__pp-inline, .vp-selected__pp-suf, .vp-selected__total-label{ display: none !important; } } /* END_SNIPPET:variant-main-picker */ /* START_SNIPPET:video (INDEX:246) */ .video-interaction-hint { opacity: 0; transition: opacity 0.3s ease; z-index: var(--layer-flat); } .video-interaction-hint:hover { opacity: 1; } /* END_SNIPPET:video */